ADD: Config section toggle

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,55 +41,41 @@
 
             <Label for="text" class="text-muted-foreground text-right mt-1 text-xs">16/20</Label>
           </div>
-        </ConfigSection>
-
-        <div class="flex flex-col p-8 py-4">
+          <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')
                         }}</span>
-          <Textarea
-            class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
-            :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
-            default-value="Adjust Korg Oscillator Waveform " rows="2"
-            maxlength="50" />
-          <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
-          <div class="flex items-center space-x-4 space-y-1">
-            <Switch id="airplane-mode" default-checked="true" />
-            <Label
-              for="airplane-mode"
-              class="text-xs text-muted-foreground">{{
-                $t('config_options.profile_settings.profile_properties.show_description')
-              }}</Label>
+            <Textarea
+              class="text-lg px-3 bg-inherit text-center focus-visible:outline-none border-b focus-visible:border-emerald-500 resize-none font-pixelsm text-muted-foreground uppercase"
+              :placeholder="$t('config_options.profile_settings.profile_properties.profile_description')"
+              default-value="Adjust Korg Oscillator Waveform " rows="2"
+              maxlength="50" />
+            <Label for="textarea" class="text-muted-foreground text-right mt-1 text-xs">24/50</Label>
+            <div class="flex items-center space-x-4 space-y-1">
+              <Switch id="airplane-mode" default-checked="true" />
+              <Label
+                for="airplane-mode"
+                class="text-xs text-muted-foreground">{{
+                  $t('config_options.profile_settings.profile_properties.show_description')
+                }}</Label>
+            </div>
           </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>
-        <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" />
-          <span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
-            }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
-              class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
-          <Separator class="my-4" />
-          <span>{{ $t('config_options.profile_settings.internal_profile_toggle.warning') }}</span>
-        </p>
+        <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" />
+            <span class="space-y-4">{{ $t('config_options.profile_settings.internal_profile_toggle.operation')
+              }}: <Badge class="bg-orange-500">SHIFT</Badge> + <Badge
+                class="bg-zinc-500">Fn3</Badge> + <Badge>Rotation</Badge></span>
+            <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,