FIX: Old components

src/App.vue

@@ -13,14 +13,14 @@ const currentConfigPage = ref('program_settings')
   <main class="select-none">
     <Navbar />
     <div class="flex flex-row">
-      <ProfileManager class="border-solid border-0 border-r w-80 bg-zinc-900 bg-opacity-30" />
+      <ProfileManager class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" style="width: 20rem"/>
-      <div class="border-solid border-0 border-r">
+      <div class="border-solid border-0 border-r" style="width: 25rem">
         <DevicePreview />
         <ConfigSelect v-model="currentConfigPage" />
       </div>
       <ConfigPane
         :page="currentConfigPage"
-        class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
+        class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30"/>
     </div>
   </main>
 </template>

src/components/ProfileManager.vue

@@ -14,17 +14,9 @@
     </div>
     <Separator />
     <div>
-      <input
-        type="text"
-        aria-label="Add Profile"
-        placeholder="Profile name"
-        @keyup.enter="addNewProfile"
-      >
       <Command>
-
         <CommandList>
-
+          <CommandInput placeholder="Filter Profiles..." />
-          <CommandInput placeholder="Search Profile..." />
           <CommandEmpty>No profile found :(</CommandEmpty>
           <CommandGroup v-for="(profileTag, index) in tags" :key="index" :heading="profileTag">
             <CommandItem
@@ -36,7 +28,6 @@
           </CommandGroup>
         </CommandList>
         <CommandSeparator />
-
       </Command>
     </div>
     <SchemaTest />
@@ -85,7 +76,7 @@ const addNewProfile = async (event) => {
   console.log(event)
   const res = await axios.post('http://localhost:3001/profiles',
     {
-      name: "TODO: CHANGE THIS",
+      name: 'TODO: CHANGE THIS',
       profileTag: 'Uncategorized',
       profileConfig: {
         profileDesc: '',

src/components/config/MappingConfig.vue

@@ -248,8 +248,22 @@
   </TabsContent>
 </template>
 <script>
+import { ScrollArea } from '@/components/ui/scroll-area/index.js'
+import { Badge } from '@/components/ui/badge/index.js'
+import { Tabs } from '@/components/ui/tabs/index.js'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList, CommandSeparator,
+} from '@/components/ui/command/index.js'
+import { Slider } from '@/components/ui/slider/index.js'
+
 export default {
   name: 'MappingConfig',
+  components: { Slider, CommandSeparator, CommandGroup, CommandItem, CommandInput, CommandEmpty, CommandList, Command, Tabs, Badge, ScrollArea },
 }
 </script>
 <style scoped>