From d90f2eea084b79241a9c2c889c1a665dc848cd9d Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 25 Jan 2024 01:05:01 +0100
Subject: [PATCH] ADD: ConfigSection component

---
 src/components/config/ConfigSection.vue       | 36 ++++++++
 .../config/{ => pages}/ProfileConfig.vue      | 92 +++++++------------
 2 files changed, 70 insertions(+), 58 deletions(-)
 create mode 100644 src/components/config/ConfigSection.vue
 rename src/components/config/{ => pages}/ProfileConfig.vue (61%)

diff --git a/src/components/config/ConfigSection.vue b/src/components/config/ConfigSection.vue
new file mode 100644
index 0000000..efe7007
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/config/ProfileConfig.vue b/src/components/config/pages/ProfileConfig.vue
similarity index 61%
rename from src/components/config/ProfileConfig.vue
rename to src/components/config/pages/ProfileConfig.vue
index 2c17c6f..ed663d3 100644
--- a/src/components/config/ProfileConfig.vue
+++ b/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">
-
-          <div class="flex-none">
-            <Cable class="h-4 w-4" />
-          </div>
-          <div class="flex-initial"><h2 class="text-sm px-2 py-4">
-            {{ $t('config_options.profile_settings.connection_type.title') }}</h2></div>
-
-        </div>
-        <Separator />
-
-        <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">
+        <ConfigSection :title="$t('config_options.profile_settings.title')" :icon-component="Cable">
+          <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
+                    class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
+                    }}</span>
                 </div>
-                <span
-                  class="text-xs leading-3 text-wrap">{{ $t('config_options.profile_settings.connection_type.usb')
-                  }}</span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="cd">
-              <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-midi-logo.svg" alt="midi-logo">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
+              </TabsTrigger>
+              <TabsTrigger value="cd">
+                <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-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>
-            </TabsTrigger>
-          </TabsList>
+                </div>
+              </TabsTrigger>
+            </TabsList>
 
-        </Tabs>
-
-
-        <Separator />
-
-        <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">
+          </Tabs>
+        </ConfigSection>
+        <ConfigSection :title="$t('config_options.profile_settings.profile_properties.title')" :icon-component="Type">
+          <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
-            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"
-            default-value="Oscillator 1" maxlength="20" />
+            <Input
+              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"
+              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,