ADD: ConfigSection component

src/components/config/ConfigSection.vue

@@ -0,0 +1,36 @@
+<template>
+  <Collapsible v-model:open="collapse" :default-open="true">
+    <CollapsibleTrigger class="w-full bg-zinc-900 flex items-center px-4">
+      <component :is="iconComponent" class="h-4 w-4" />
+      <h2 class="text-sm px-2 py-4">{{ title }}</h2>
+      <ChevronLeft class="chevrot h-4 w-4 mb-0.5 transition-transform ml-auto text-muted-foreground" />
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <slot />
+    </CollapsibleContent>
+  </Collapsible>
+</template>
+<script setup>
+import { ChevronLeft } from 'lucide-vue-next'
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible/index.js'
+import { ref } from 'vue'
+
+const collapse = ref(true)
+
+defineProps({
+  title: {
+    type: String,
+    default: 'MISSING_TITLE',
+  },
+  iconComponent: {
+    type: [String, Object],
+    default: 'div',
+  },
+})
+
+</script>
+<style scoped>
+[data-state=open] > .chevrot {
+  transform: rotate(-90deg);
+}
+</style>

src/components/config/pages/ProfileConfig.vue

@@ -2,72 +2,47 @@
   <TabsContent value="prog-config" class="mt-0">
     <div class="w-96 bg-zinc-900 bg-opacity-40">
       <ScrollArea class="h-[720px]">
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+        <ConfigSection :title="$t('config_options.profile_settings.title')" :icon-component="Cable">
-
+          <Tabs default-value="fd">
-          <div class="flex-none">
+            <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
-            <Cable class="h-4 w-4" />
+              <TabsTrigger value="fd">
-          </div>
+                <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-          <div class="flex-initial"><h2 class="text-sm px-2 py-4">
+                  <div class="w-24 size-w mb-2">
-            {{ $t('config_options.profile_settings.connection_type.title') }}</h2></div>
+                    <img src="../../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
-
+                  </div>
-        </div>
+                  <span
-        <Separator />
+                    class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
-
+                    }}</span>
-        <Tabs default-value="fd">
-          <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
-            <TabsTrigger value="fd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-                <div class="w-24 size-w mb-2">
-                  <img src="../../assets/gui-ico/ico-usb-logo.svg" alt="usb-logo">
                 </div>
-                <span
+              </TabsTrigger>
-                  class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
+              <TabsTrigger value="cd">
-                  }}</span>
+                <div class="grid grid-flow-row auto-rows-max justify-items-center">
-              </div>
+                  <div class="w-24 size-w mb-2">
-            </TabsTrigger>
+                    <img src="../../../assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
-            <TabsTrigger value="cd">
+                  </div>
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                  <span class="text-xs leading-3 text-wrap">
-                <div class="w-24 size-w mb-2">
-                  <img src="../../assets/gui-ico/ico-midi-logo.svg" alt="midi-logo">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.profile_settings.connection_type.midi') }}
                             </span>
-              </div>
+                </div>
-            </TabsTrigger>
+              </TabsTrigger>
-          </TabsList>
+            </TabsList>
 
-        </Tabs>
+          </Tabs>
-
+        </ConfigSection>
-
+        <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
-        <Separator />
+          <div class="flex flex-col p-8 py-4">
-
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <Type class="h-4 w-4" />
-          </div>
-          <div class="grow">
-            <h2 class="text-sm px-2 py-4">{{ $t('config_options.profile_settings.profile_properties.title')
-              }}</h2>
-          </div>
-
-
-        </div>
-        <Separator />
-
-        <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_name')
                         }}</span>
-          <Input
+            <Input
-            type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
+              type="text" :placeholder="$t('config_options.profile_settings.profile_properties.profile_name')"
-            class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
+              class="text-xl border-0 text-center border-b rounded-none focus-visible:ring-0 focus-visible:border-emerald-500 font-pixelsm uppercase"
-            default-value="Oscillator 1" maxlength="20" />
+              default-value="Oscillator 1" maxlength="20" />
+
+            <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
+          </div>
+        </ConfigSection>
 
-          <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
-        </div>
-        <Separator />
         <div class="flex flex-col p-8 py-4">
                       <span
                         class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.profile_settings.profile_properties.profile_description')
@@ -130,6 +105,7 @@ import { Tabs } from '@/components/ui/tabs/index.js'
 import { Label } from '@/components/ui/label/index.js'
 import { Switch } from '@/components/ui/switch/index.js'
 import { Replace, Type, Cable, Power } from 'lucide-vue-next'
+import ConfigSection from '@/components/config/ConfigSection.vue'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,