From 7d81a5316c03539f50fcc8ff38a4d09ec3d5996b Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 25 Jan 2024 02:25:57 +0100
Subject: [PATCH] UPD: Use config sections

---
 src/components/config/pages/HapticConfig.vue  | 294 +++++++--------
 src/components/config/pages/LEDsConfig.vue    | 182 +--------
 src/components/config/pages/MappingConfig.vue | 356 +++++++-----------
 3 files changed, 275 insertions(+), 557 deletions(-)

diff --git a/src/components/config/pages/HapticConfig.vue b/src/components/config/pages/HapticConfig.vue
index d14a0e4..d96ab7c 100644
--- a/src/components/config/pages/HapticConfig.vue
+++ b/src/components/config/pages/HapticConfig.vue
@@ -2,204 +2,163 @@
   <TabsContent value="haptic-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">
-            <GaugeCircle class="h-4 w-4" />
-          </div>
-          <div class="flex-initial"><h2 class="text-sm px-2 py-4">
-            {{ $t('config_options.feedback_designer.feedback_type.title') }}</h2></div>
-
-        </div>
-        <Separator />
-
-        <Tabs default-value="fd">
-          <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-            <TabsTrigger value="fd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-fd.svg">
-                </div>
-                <span
-                  class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
+        <ConfigSection
+          :title="$t('config_options.feedback_designer.feedback_type.title')"
+          :icon-component="GaugeCircle">
+          <Tabs default-value="fd">
+            <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+              <TabsTrigger value="fd">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-fd.svg">
+                  </div>
+                  <span
+                    class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.fine_detents')
                     }}</span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="cd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-cd.svg">
                 </div>
-                <span
-                  class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
+              </TabsTrigger>
+              <TabsTrigger value="cd">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-cd.svg">
+                  </div>
+                  <span
+                    class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.coarse_detents')
                     }}</span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="vr">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-vf.svg">
                 </div>
-                <span
-                  class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
+              </TabsTrigger>
+              <TabsTrigger value="vr">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-vf.svg">
+                  </div>
+                  <span
+                    class="text-xs leading-3 text-wrap">{{ $t('config_options.feedback_designer.feedback_type.viscous_rotation')
                     }}</span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="rt">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-rc.svg">
                 </div>
-                <span class="text-xs leading-3 text-wrap">
+              </TabsTrigger>
+              <TabsTrigger value="rt">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-rc.svg">
+                  </div>
+                  <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.feedback_designer.feedback_type.return_to_center') }}
                             </span>
-              </div>
-            </TabsTrigger>
-          </TabsList>
+                </div>
+              </TabsTrigger>
+            </TabsList>
 
-        </Tabs>
+          </Tabs>
 
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
+          <Separator />
+          <div class="flex flex-col p-8 pt-4">
                       <span
                         class="text-sm text-muted-foreground font-mono h-8 text-center">{{ $t('config_options.feedback_designer.total_positions')
                         }}</span>
 
-          <div class="flex w-full max-w-sm items-center gap-0">
-            <Button
-              type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
-              @click="count--">
-              -
-            </Button>
-            <Input
-              id="positions"
-              v-model="count"
-              class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
-              type="number" placeholder="10" max="65535" min="10" />
-            <Button
-              type="submit" class="rounded-none text-xl font-pixellg font-bold"
-              @click="count++">
-              +
-            </Button>
+            <div class="flex w-full max-w-sm items-center gap-0">
+              <Button
+                type="submit" class="rounded-none text-xl font-pixellg align-middle font-bold"
+                @click="count--">
+                -
+              </Button>
+              <Input
+                id="positions"
+                v-model="count"
+                class="rounded-none border-none text-5xl font-pixellg focus-visible:ring-0"
+                type="number" placeholder="10" max="65535" min="10" />
+              <Button
+                type="submit" class="rounded-none text-xl font-pixellg font-bold"
+                @click="count++">
+                +
+              </Button>
+            </div>
+
           </div>
-
-        </div>
-        <Separator />
-
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <AudioWaveform class="h-4 w-4" />
-          </div>
-          <div class="grow">
-            <h2 class="text-sm px-2 py-4">{{ $t('config_options.feedback_designer.haptic_response.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>
-        <Separator />
-
-        <div class="flex flex-col p-8 pt-4">
+          <Separator />
+        </ConfigSection>
+        <ConfigSection
+          :title="$t('config_options.feedback_designer.haptic_response.title')"
+          :icon-component="AudioWaveform"
+          :show-toggle="true">
+          <div class="flex flex-col p-8 pt-4">
                       <span
                         class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.feedback_strength')
                         }}</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
+            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
 
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
+          </div>
+          <Separator />
+          <div class="flex flex-col p-8 pt-4">
                       <span
                         class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.bounce_back_strength')
                         }}</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
           </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
+          <Separator />
+          <div class="flex flex-col p-8 pt-4">
                       <span
                         class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.output_ramp_dampening')
                         }}</span>
-          <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
+            <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
 
-        </div>
-        <Separator />
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <AudioLines class="h-4 w-4" />
           </div>
-          <div class="grow"><h2 class="text-sm px-2 py-4">
-            {{ $t('config_options.feedback_designer.auditory_response.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>
+        </ConfigSection>
+        <ConfigSection
+          :title="$t('config_options.feedback_designer.auditory_response.title')"
+          :icon-component="AudioLines" :show-toggle="true">
+          <div class="flex flex-col p-8 pt-4">
+            <span
+              class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level')
+              }}</span>
+            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
           </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.haptic_level')
-                        }}</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+          <Separator />
+          <div class="flex flex-col p-8 pt-4">
+            <span
+              class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
+              }}</span>
+            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
+            </div>
           </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-
-                      <span
-                        class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
-                        }}</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-          </div>
-
-
-        </div>
+        </ConfigSection>
       </ScrollArea>
       <Separator />
-
-
     </div>
   </TabsContent>
 </template>
@@ -207,7 +166,8 @@
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Tabs } from '@/components/ui/tabs/index.js'
 import { Slider } from '@/components/ui/slider/index.js'
-import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next'
+import { GaugeCircle, AudioLines, AudioWaveform } from 'lucide-vue-next'
+import ConfigSection from '@/components/config/ConfigSection.vue'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,
diff --git a/src/components/config/pages/LEDsConfig.vue b/src/components/config/pages/LEDsConfig.vue
index 75c4021..84bbcdf 100644
--- a/src/components/config/pages/LEDsConfig.vue
+++ b/src/components/config/pages/LEDsConfig.vue
@@ -2,191 +2,15 @@
   <TabsContent value="led-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">
-            <GaugeCircle class="h-4 w-4" />
-          </div>
-          <div class="flex-initial"><h2 class="text-sm px-2 py-4">Feedback Type</h2></div>
-
-        </div>
-        <Separator />
-
-        <Tabs default-value="fd">
-          <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-            <TabsTrigger value="fd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-fd.svg">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
-        Fine Detents
-      </span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="cd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-cd.svg">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
-        Coarse Detents
-      </span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="vr">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-vf.svg">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
-        Viscous Rotation
-      </span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="rt">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-rc.svg">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
-        Return to Center
-      </span>
-              </div>
-            </TabsTrigger>
-          </TabsList>
-
-        </Tabs>
-
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono h-8 text-center">Total Positions</span>
-
-          <div class="flex w-full max-w-sm items-center gap-0">
-            <Button type="submit" class="rounded-l-full text-xl font-mono align-middle font-bold">
-              -
-            </Button>
-            <Input
-              id="positions" class="rounded-none text-xl font-pixellg" type="number" placeholder="10"
-              default-value="60" max="65535" min="10" />
-            <Button type="submit" class="rounded-r-full text-xl font-mono font-bold">
-              +
-            </Button>
-          </div>
-
-        </div>
-        <Separator />
-
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <AudioWaveform class="h-4 w-4" />
-          </div>
-          <div class="grow">
-            <h2 class="text-sm px-2 py-4">Haptic Response</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>
-        <Separator />
-
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-          <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-
-        </div>
-        <Separator />
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <AudioLines class="h-4 w-4" />
-          </div>
-          <div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</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>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-
-          <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-          </div>
-
-
-        </div>
+        <ConfigSection title="TODO: THINK OF TITLE" :icon-component="Lightbulb" />
       </ScrollArea>
-      <Separator />
-
-
     </div>
   </TabsContent>
 </template>
 <script setup>
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
-import { Tabs } from '@/components/ui/tabs/index.js'
-import { Slider } from '@/components/ui/slider/index.js'
-import { GaugeCircle, AudioLines, AudioWaveform, Power } from 'lucide-vue-next'
+import { Lightbulb } from 'lucide-vue-next'
+import ConfigSection from '@/components/config/ConfigSection.vue'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,
diff --git a/src/components/config/pages/MappingConfig.vue b/src/components/config/pages/MappingConfig.vue
index 2cb102e..9a96df4 100644
--- a/src/components/config/pages/MappingConfig.vue
+++ b/src/components/config/pages/MappingConfig.vue
@@ -2,244 +2,177 @@
   <TabsContent value="map-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">
-            <Keyboard class="h-4 w-4" />
-          </div>
-          <div class="flex-initial"><h2 class="text-sm px-2 py-4">
-            {{ $t('config_options.mapping_configuration.key_mapping.title') }}</h2></div>
-
-        </div>
-        <Separator />
-
-        <Tabs default-value="fd">
-          <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
-            <TabsTrigger value="fd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center ">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-key-o.svg">
-                </div>
-                <span class="text-xs leading-3 text-wrap">
+        <ConfigSection :title="$t('config_options.mapping_configuration.key_mapping.title')" :icon-component="Keyboard">
+          <Tabs default-value="fd">
+            <TabsList class="grid grid-cols-4 h-auto text-muted-foreground">
+              <TabsTrigger value="fd">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center ">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-key-o.svg">
+                  </div>
+                  <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.a') }}
                               <Badge class="bg-orange-400 mt-2">Shift</Badge>
                             </span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="cd">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-key.svg">
                 </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="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-key.svg">
+                  </div>
+                  <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.b') }}
                               <Badge class="bg-zinc-400 mt-2">Fn1</Badge>
                             </span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="vr">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-key-g.svg">
                 </div>
-                <span class="text-xs leading-3 text-wrap">
+              </TabsTrigger>
+              <TabsTrigger value="vr">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-key-g.svg">
+                  </div>
+                  <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.c') }}
                               <Badge class="bg-zinc-400 mt-2">Fn2</Badge>
                             </span>
-              </div>
-            </TabsTrigger>
-            <TabsTrigger value="rt">
-              <div class="grid grid-flow-row auto-rows-max justify-items-center">
-                <div class="size-16 mb-2">
-                  <img src="../../../assets/gui-ico/ico-key-d.svg">
                 </div>
-                <span class="text-xs leading-3 text-wrap">
+              </TabsTrigger>
+              <TabsTrigger value="rt">
+                <div class="grid grid-flow-row auto-rows-max justify-items-center">
+                  <div class="size-16 mb-2">
+                    <img src="../../../assets/gui-ico/ico-key-d.svg">
+                  </div>
+                  <span class="text-xs leading-3 text-wrap">
                               {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
                               <Badge class="bg-zinc-400 mt-2">M0</Badge>
                             </span>
-              </div>
-            </TabsTrigger>
-          </TabsList>
+                </div>
+              </TabsTrigger>
+            </TabsList>
 
-        </Tabs>
+          </Tabs>
 
-        <Separator />
-        <Command>
+          <Separator />
+          <Command>
 
-          <CommandList>
-            <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
+            <CommandList>
+              <CommandEmpty>{{ $t('config_options.mapping_configuration.key_mapping.not_found') }}
 
-            </CommandEmpty>
-            <CommandInput
-              :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
-            <CommandGroup heading="Common">
-              <CommandItem value="backspace">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Backspace
-              </CommandItem>
-              <CommandItem value="delete">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Delete
-              </CommandItem>
-              <CommandItem value="enter">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Enter
-              </CommandItem>
-              <CommandItem value="end">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                End
-              </CommandItem>
-              <CommandItem value="arrow up">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Arrow Up
-              </CommandItem>
-              <CommandItem value="arrow down">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Arrow Down
-              </CommandItem>
-              <CommandItem value="arrow left">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Arrow Left
-              </CommandItem>
-              <CommandItem value="arrow right">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Arrow Right
-              </CommandItem>
-            </CommandGroup>
+              </CommandEmpty>
+              <CommandInput
+                :placeholder="$t('config_options.mapping_configuration.key_mapping.search_placeholder')" />
+              <CommandGroup heading="Common">
+                <CommandItem value="backspace">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Backspace
+                </CommandItem>
+                <CommandItem value="delete">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Delete
+                </CommandItem>
+                <CommandItem value="enter">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Enter
+                </CommandItem>
+                <CommandItem value="end">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  End
+                </CommandItem>
+                <CommandItem value="arrow up">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Arrow Up
+                </CommandItem>
+                <CommandItem value="arrow down">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Arrow Down
+                </CommandItem>
+                <CommandItem value="arrow left">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Arrow Left
+                </CommandItem>
+                <CommandItem value="arrow right">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Arrow Right
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="MIDI Control Changes">
+                <CommandItem value="cc0">
+                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                  Bank Select (CC0)
+                </CommandItem>
+                <CommandItem value="cc2">
+                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                  Modulation (CC1)
+                </CommandItem>
+                <CommandItem value="cc3">
+                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                  Foot Controller (CC4)
+                </CommandItem>
+                <CommandItem value="cc4">
+                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                  Portamento (CC5)
+                </CommandItem>
+                <CommandItem value="cc5">
+                  <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
+                  Volume (CC7)
+                </CommandItem>
+              </CommandGroup>
+              <CommandGroup heading="Macros">
+                <CommandItem value="Page Scroll">
+                  <Squircle color="grey" class="w-4 h-4 mr-2" />
+                  Page Scroller (M0)
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
             <CommandSeparator />
-            <CommandGroup heading="MIDI Control Changes">
-              <CommandItem value="cc0">
-                <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                Bank Select (CC0)
-              </CommandItem>
-              <CommandItem value="cc2">
-                <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                Modulation (CC1)
-              </CommandItem>
-              <CommandItem value="cc3">
-                <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                Foot Controller (CC4)
-              </CommandItem>
-              <CommandItem value="cc4">
-                <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                Portamento (CC5)
-              </CommandItem>
-              <CommandItem value="cc5">
-                <KeyboardMusic color="grey" class="w-4 h-4 mr-2" />
-                Volume (CC7)
-              </CommandItem>
-            </CommandGroup>
-            <CommandGroup heading="Macros">
-              <CommandItem value="Page Scroll">
-                <Squircle color="grey" class="w-4 h-4 mr-2" />
-                Page Scroller (M0)
-              </CommandItem>
-            </CommandGroup>
-          </CommandList>
-          <CommandSeparator />
 
-        </Command>
-        <Separator />
+          </Command>
+          <Separator />
+        </ConfigSection>
 
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+        <ConfigSection
+:title="$t('config_options.mapping_configuration.knob_mapping.title')"
+                       :icon-component="GaugeCircle">
+          <div class="flex flex-col p-8 pt-4">
+            <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
+            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
 
-          <div class="flex-none">
-            <GaugeCircle class="h-4 w-4" />
           </div>
-          <div class="grow">
-            <h2 class="text-sm px-2 py-4">{{ $t('config_options.mapping_configuration.knob_mapping.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>
+          <Separator />
+          <div class="flex flex-col p-8 pt-4">
+            <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
+            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
           </div>
+          <Separator />
+          <div class="flex flex-col p-8 pt-4">
+            <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
+            <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
+            <div class="flex flex-row px-1 py-1.5">
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
+              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
+            </div>
 
-        </div>
-        <Separator />
-
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Feedback Strength</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
           </div>
-
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Bounce Back Strength</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Output Ramp Dampening</span>
-          <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-
-        </div>
-        <Separator />
-        <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-          <div class="flex-none">
-            <AudioLines class="h-4 w-4" />
-          </div>
-          <div class="grow"><h2 class="text-sm px-2 py-4"> Auditory Response</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>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-          <span class="text-sm text-muted-foreground font-mono">Auditory Haptic Level</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-          </div>
-        </div>
-        <Separator />
-        <div class="flex flex-col p-8 pt-4">
-
-          <span class="text-sm text-muted-foreground font-mono">Auditory Magnitude</span>
-          <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-          <div class="flex flex-row px-1 py-1.5">
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-            <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-          </div>
-
-
-        </div>
+        </ConfigSection>
       </ScrollArea>
       <Separator />
 
@@ -261,6 +194,7 @@ import {
 } from '@/components/ui/command/index.js'
 import { Slider } from '@/components/ui/slider/index.js'
 import { KeyboardMusic, Squircle, Keyboard, GaugeCircle, AudioLines, Power } from 'lucide-vue-next'
+import ConfigSection from '@/components/config/ConfigSection.vue'
 </script>
 <style scoped>
 input::-webkit-outer-spin-button,