ADD: Config section toggle

src/components/config/ConfigSection.vue

@@ -1,10 +1,21 @@
 <template>
   <Collapsible v-model:open="collapse" :default-open="true">
-    <CollapsibleTrigger class="w-full bg-zinc-900 flex items-center px-4">
+    <div class="w-full bg-zinc-900 flex">
+      <div
+        class="flex-1 flex items-center px-4"
+        :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
+        @click="toggle = !toggle">
         <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" />
+        <Switch
+          v-if="showToggle" :checked="toggle"
+          class="ml-auto" @click.stop="toggle=!toggle" />
+      </div>
+
+      <CollapsibleTrigger class="flex items-center justify-center h-12 aspect-square hover:bg-zinc-800">
+        <ChevronLeft class="chevrot h-4 w-4 mt-0.5 transition-transform text-muted-foreground" />
       </CollapsibleTrigger>
+    </div>
     <CollapsibleContent>
       <slot />
     </CollapsibleContent>
@@ -14,9 +25,15 @@
 import { ChevronLeft } from 'lucide-vue-next'
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible/index.js'
 import { ref } from 'vue'
+import { Switch } from '@/components/ui/switch/index.js'
 
 const collapse = ref(true)
 
+const toggle = defineModel({
+  type: Boolean,
+  default: true,
+})
+
 defineProps({
   title: {
     type: String,
@@ -26,6 +43,10 @@ defineProps({
     type: [String, Object],
     default: 'div',
   },
+  showToggle: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 </script>

src/components/config/pages/ProfileConfig.vue

@@ -2,7 +2,7 @@
   <TabsContent value="prog-config" class="mt-0">
     <div class="w-96 bg-zinc-900 bg-opacity-40">
       <ScrollArea class="h-[720px]">
-        <ConfigSection :title="$t('config_options.profile_settings.title')" :icon-component="Cable">
+        <ConfigSection :title="$t('config_options.profile_settings.connection_type.title')" :icon-component="Cable">
           <Tabs default-value="fd">
             <TabsList class="grid grid-cols-2 h-auto text-muted-foreground">
               <TabsTrigger value="fd">
@@ -41,8 +41,7 @@
 
             <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
           </div>
-        </ConfigSection>
-
+          <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')
@@ -62,25 +61,11 @@
                 }}</Label>
             </div>
           </div>
-        <Separator />
+        </ConfigSection>
 
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <Replace class="h-4 w-4" />
-          </div>
-          <div class="grow"><h2 class="text-sm px-2 py-4">
-            {{ $t('config_options.profile_settings.internal_profile_toggle.title') }}</h2></div>
-          <div class="flex-none">
-            <Toggle
-              class="data-[state=on]:ring-emerald-600 data-[state=on]:ring-1" variant="outline"
-              size="sm" :default-value="true" aria-label="EnablePrimary">
-              <Power class="w-4 h-4" />
-            </Toggle>
-          </div>
-
-
-        </div>
+        <ConfigSection
+          :title="$t('config_options.profile_settings.internal_profile_toggle.title')"
+          :icon-component="Replace" :show-toggle="true">
           <p class="flex flex-col p-8 py-4 text-muted-foreground text-xs">
             {{ $t('config_options.profile_settings.internal_profile_toggle.subtitle') }}
             <Separator class="mt-4" />
@@ -90,6 +75,7 @@
             <Separator class="my-4" />
             <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
           </p>
+        </ConfigSection>
 
 
       </ScrollArea>
@@ -106,6 +92,7 @@ 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'
+import { Separator } from '@/components/ui/separator/index.js'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,

src/lang/en.json

@@ -61,7 +61,7 @@
       "internal_profile_toggle": {
         "operation": "Operation",
         "subtitle": "Hardcoded macro that allows you to quickly toggle between stored profiles , comes handy if you want to operate device in Standalone mode.",
-        "title": "Internal Profile Toggle",
+        "title": "Internal Profile",
         "warning": "Warning: Overrides software defined macro if combination is the same"
       },
       "profile_properties": {