From 077e3f48b88d7fb7c13e6800ab630ded191031a5 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Wed, 24 Jan 2024 00:52:04 +0100
Subject: [PATCH] UPD: Refactor App into vue components broke quite a few
 things along the way

---
 src/App.vue           | 1058 +----------------------------------------
 src/ConfigPane.vue    |   25 +
 src/DevicePreview.vue |   25 +
 src/HapticConfig.vue  |  240 ++++++++++
 src/LEDsConfig.vue    |  214 +++++++++
 src/MappingConfig.vue |  279 +++++++++++
 src/Navbar.vue        |   41 ++
 src/ProgramConfig.vue |  156 ++++++
 src/main.js           |    1 +
 9 files changed, 1000 insertions(+), 1039 deletions(-)
 create mode 100644 src/ConfigPane.vue
 create mode 100644 src/DevicePreview.vue
 create mode 100644 src/HapticConfig.vue
 create mode 100644 src/LEDsConfig.vue
 create mode 100644 src/MappingConfig.vue
 create mode 100644 src/Navbar.vue
 create mode 100644 src/ProgramConfig.vue

diff --git a/src/App.vue b/src/App.vue
index a15fd7e..67a4f50 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,1046 +1,26 @@
-<script setup lang="ts">
-import { Button } from '@/components/ui/button'
-import { Badge } from '@/components/ui/badge'
-import { Input } from '@/components/ui/input'
-import { Label } from '@/components/ui/label'
-import { Switch } from '@/components/ui/switch'
-import { Slider } from '@/components/ui/slider'
-import { Textarea } from '@/components/ui/textarea'
-import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
-import { Separator } from '@/components/ui/separator'
-import {
-  Replace,
-  Type,
-  Cable,
-  KeyboardMusic,
-  Squircle,
-  Keyboard,
-  Bolt,
-  GaugeCircle,
-  AudioLines,
-  AudioWaveform,
-  Power,
+<script setup>
+import ProfileManager from '@/components/ProfileManager.vue'
+import DevicePreview from '@/DevicePreview.vue'
+import ConfigPane from '@/ConfigPane.vue'
+import Navbar from '@/Navbar.vue'
+import ConfigSelect from '@/ConfigSelect.vue'
+import { ref } from 'vue'
 
-} from 'lucide-vue-next'
-
-import { ScrollArea } from '@/components/ui/scroll-area'
-import { Toggle } from '@/components/ui/toggle'
-import Pop from '@/components/patterns/Pop.vue'
-import QuickPreview from '@/components/patterns/QuickPreview.vue'
-
-import {
-  Menubar,
-  MenubarContent,
-  MenubarItem,
-  MenubarMenu,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarTrigger,
-} from '@/components/ui/menubar'
-
-import {
-  Command,
-  CommandEmpty,
-  CommandGroup,
-  CommandInput,
-  CommandItem,
-  CommandList,
-  CommandSeparator,
-
-} from '@/components/ui/command'
-
-import { reactive } from 'vue'
-
-const state = reactive({ count: 12 })
-
-
-// TODO: Import JSON & make it available for all components and views -> vuex
+const currentConfigPage = ref('program_settings')
 
 </script>
-
 <template>
-
-
-  <main>
-
-    <div class="select-none ">
-      <div class="flex">
-        <Menubar class="w-full rounded-none bg-zinc-950">
-          <MenubarMenu>
-            <MenubarTrigger v-t="'navbar.device.title'" />
-            <MenubarContent>
-              <!-- TODO: Switch keyboard shortcut icons based on platform -->
-              <MenubarItem>
-                {{ $t('navbar.device.disconnect') }}
-                <MenubarShortcut>⌘D</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>{{ $t('navbar.device.export') }}
-                <MenubarShortcut>⌘E</MenubarShortcut>
-              </MenubarItem>
-              <MenubarItem>{{ $t('navbar.device.import') }}
-                <MenubarShortcut>⌘I</MenubarShortcut>
-              </MenubarItem>
-              <MenubarSeparator />
-              <MenubarItem>{{ $t('navbar.device.quit') }}
-                <MenubarShortcut>⌘Q</MenubarShortcut>
-              </MenubarItem>
-            </MenubarContent>
-          </MenubarMenu>
-        </Menubar>
-      </div>
-      <div class="flex flex-row">
-        <div class="border-solid border-0 border-r w-80 flex-none bg-zinc-900 bg-opacity-30">
-          <div>
-            <div class="space-y-1 p-6 pb-0">
-              <h2 class="text-md leading-none">
-                {{ $t('profiles.title') }}
-              </h2>
-              <p class="text-xs text-muted-foreground">
-                {{ $t('profiles.subtitle') }}
-              </p>
-            </div>
-            <Separator class="my-4" />
-          </div>
-          <Pop />
-
-        </div>
-        <div class="border-0 shrink-0 border-r bg-zinc-900 bg-opacity-30">
-
-
-          <Tabs default-value="haptic-config" orientation="vertical" class="flex flex-row">
-
-
-            <!-- Tab Col 1 -->
-            <div id="tablistmid" class="flex">
-              <TabsList class="flex flex-col px-0 gap-0 w-96 py-0">
-                <div class="flex flex-col">
-                  <div class="space-y-1 p-6">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('preview.title') }}
-                    </h1>
-                    <!-- <p class="text-xs text-muted-foreground">
-                      Pre-rendered preview with live feedback from current position.
-                    </p> -->
-                  </div>
-                  <QuickPreview />
-
-                </div>
-                <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
-
-                  <div class="flex-none">
-                    <Bolt class="h-4 w-4" />
-                  </div>
-                  <div class="flex-initial"><h2 class="text-sm px-2 py-4">{{ $t('config_options.title') }}</h2></div>
-
-                </div>
-
-                <TabsTrigger
-                  value="prog-config"
-                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-                  <div class="p-4">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.program_settings.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.program_settings.subtitle') }}
-                    </p>
-
-                  </div>
-                </TabsTrigger>
-
-                <TabsTrigger
-                  value="haptic-config"
-                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-                  <div class="p-4">
-                    <h1 class="leading-none text-lg pb-1">
-                      {{ $t('config_options.feedback_designer.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.feedback_designer.subtitle') }}
-                    </p>
-
-                  </div>
-                </TabsTrigger>
-                <TabsTrigger
-                  value="map-config"
-                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-                  <div class="p-4">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.mapping_configuration.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.mapping_configuration.subtitle') }}
-                    </p>
-
-                  </div>
-                </TabsTrigger>
-
-
-                <TabsTrigger
-                  value="led-config"
-                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none">
-                  <div class="p-4">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.light_designer.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.light_designer.subtitle') }}
-                    </p>
-
-                  </div>
-                </TabsTrigger>
-                <TabsTrigger
-                  value="gui-config"
-                  class="text-left rounded-none border-solid border-t data-[state=active]:bg-zinc-100 data-[state=active]:text-zinc-900 data-[state=active]:ring-none"
-                  disabled>
-                  <div class="p-4">
-                    <Badge class="font-mono h-4 mb-1 rounded-full">{{ $t('common.coming_soon') }}</badge>
-                    <h1 class="leading-none text-muted-foreground text-lg">
-                      {{ $t('config_options.gui_designer.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.gui_designer.subtitle') }}
-                    </p>
-
-                  </div>
-                </TabsTrigger>
-              </TabsList>
-            </div>
-            <!-- End Tab Col 1 -->
-            <!-- Tab Col 2 -->
-            <div id="tabcontentend" class="flex border-l-1 border-solid border-l">
-              <TabsContent value="haptic-config" class="mt-0">
-                <div class="w-96 bg-zinc-900 bg-opacity-40">
-
-                  <div class="space-y-1 p-6">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.feedback_designer.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.feedback_designer.subtitle') }}
-                    </p>
-
-                  </div>
-
-                  <Separator />
-                  <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')
-                              }}</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')
-                              }}</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')
-                              }}</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">
-                              {{ $t('config_options.feedback_designer.feedback_type.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">{{ $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="state.count--">
-                          -
-                        </Button>
-                        <Input
-                          id="positions"
-                          v-model="state.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="state.count++">
-                          +
-                        </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">{{ $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">
-                      <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>
-
-                    </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>
-                      </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.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>
-
-                    </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>
-                      </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>
-                      </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>
-                  </ScrollArea>
-                  <Separator />
-
-
-                </div>
-              </TabsContent>
-              <TabsContent value="map-config" class="mt-0">
-                <div class="w-96 bg-zinc-900 bg-opacity-40">
-
-                  <div class="space-y-1 p-6">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.mapping_configuration.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.mapping_configuration.subtitle') }}
-                    </p>
-
-                  </div>
-
-                  <Separator />
-                  <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">
-                              {{ $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">
-                              {{ $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">
-                              {{ $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">
-                              {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
-                              <Badge class="bg-zinc-400 mt-2">M0</Badge>
-                            </span>
-                          </div>
-                        </TabsTrigger>
-                      </TabsList>
-
-                    </Tabs>
-
-                    <Separator />
-                    <Command>
-
-                      <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>
-                        <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 />
-
-                    <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="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>
-                      </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>
-                  </ScrollArea>
-                  <Separator />
-
-
-                </div>
-              </TabsContent>
-              <TabsContent value="prog-config" class="mt-0">
-                <div class="w-96 bg-zinc-900 bg-opacity-40">
-
-                  <div class="space-y-1 p-6">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.program_settings.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.program_settings.subtitle') }}
-                    </p>
-
-                  </div>
-
-                  <Separator />
-                  <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.program_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">
-                            </div>
-                            <span
-                              class="text-xs leading-3 text-wrap">{{ $t('config_options.program_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">
-                              {{ $t('config_options.program_settings.connection_type.midi') }}
-                            </span>
-                          </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.program_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.program_settings.profile_properties.program_name')
-                        }}</span>
-                      <Input
-                        type="text" :placeholder="$t('config_options.program_settings.profile_properties.program_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>
-                    <Separator />
-                    <div class="flex flex-col p-8 py-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_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.program_settings.profile_properties.program_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.program_settings.profile_properties.show_description')
-                          }}</Label>
-                      </div>
-                    </div>
-                    <Separator />
-
-                    <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.program_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.program_settings.internal_profile_toggle.subtitle') }}
-                      <Separator class="mt-4" />
-                      <span class="space-y-4">{{ $t('config_options.program_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.program_settings.internal_profile_toggle.warning') }}</span>
-                    </p>
-
-
-                  </ScrollArea>
-                  <Separator />
-
-
-                </div>
-              </TabsContent>
-              <TabsContent value="led-config" class="mt-0">
-                <div class="w-96 bg-zinc-900 bg-opacity-40">
-
-                  <div class="space-y-1 p-6">
-                    <h1 class="leading-none text-lg">
-                      {{ $t('config_options.light_designer.title') }}
-                    </h1>
-                    <p class="text-xs text-muted-foreground">
-                      {{ $t('config_options.light_designer.subtitle') }}
-                    </p>
-
-                  </div>
-
-                  <Separator />
-                  <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>
-                  </ScrollArea>
-                  <Separator />
-
-
-                </div>
-              </TabsContent>
-            </div>
-          </Tabs>
-
-        </div>
-
-
+  <main class="select-none">
+    <Navbar />
+    <div class="flex flex-row">
+      <ProfileManager class="border-solid border-0 border-r w-80 bg-zinc-900 bg-opacity-30" />
+      <div class="border-solid border-0 border-r">
+        <DevicePreview />
+        <ConfigSelect v-model="currentConfigPage" />
       </div>
+      <ConfigPane
+        :page="currentConfigPage"
+        class="border-solid border-0 border-r bg-zinc-900 bg-opacity-30" />
     </div>
-
   </main>
-</template>
-
-<script>
-</script>
-
-<style scoped>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-  text-align: center;
-}
-</style>
+</template>
\ No newline at end of file
diff --git a/src/ConfigPane.vue b/src/ConfigPane.vue
new file mode 100644
index 0000000..1fc9186
--- /dev/null
+++ b/src/ConfigPane.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <component :is="configPages[page]" />
+  </div>
+</template>
+<script setup>
+import LEDsConfig from '@/LEDsConfig.vue'
+import ProgramConfig from '@/ProgramConfig.vue'
+import MappingConfig from '@/MappingConfig.vue'
+import HapticConfig from '@/HapticConfig.vue'
+
+const props = defineProps({
+  page: {
+    type: String,
+    default: 'program_settings',
+  },
+})
+
+const configPages = {
+  program_settings: ProgramConfig,
+  feedback_designer: HapticConfig,
+  mapping_configuration: MappingConfig,
+  light_designer: LEDsConfig,
+}
+</script>
\ No newline at end of file
diff --git a/src/DevicePreview.vue b/src/DevicePreview.vue
new file mode 100644
index 0000000..6e1c07e
--- /dev/null
+++ b/src/DevicePreview.vue
@@ -0,0 +1,25 @@
+<template>
+  <div>
+    <div>
+      <div class="p-4">
+        <h1 class="text-lg">
+          <ScrambleReveal :text="$t('preview.title')" />
+        </h1>
+      </div>
+      <QuickPreview />
+    </div>
+    <div class="flex flex-row h-12 items-center px-4 text-sm bg-zinc-900">
+      <h2>{{ $t('config_options.title') }}</h2>
+    </div>
+  </div>
+</template>
+<script>
+import QuickPreview from '@/components/patterns/QuickPreview.vue'
+import ScrambleReveal from '@/components/ScrambleText.vue'
+import ConfigSelect from '@/ConfigSelect.vue'
+
+export default {
+  name: 'DevicePreview',
+  components: { ConfigSelect, ScrambleReveal, QuickPreview },
+}
+</script>
\ No newline at end of file
diff --git a/src/HapticConfig.vue b/src/HapticConfig.vue
new file mode 100644
index 0000000..2693ba6
--- /dev/null
+++ b/src/HapticConfig.vue
@@ -0,0 +1,240 @@
+<template>
+  <TabsContent value="haptic-config" class="mt-0">
+    <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+      <div class="space-y-1 p-6">
+        <h1 class="leading-none text-lg">
+          {{ $t('config_options.feedback_designer.title') }}
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          {{ $t('config_options.feedback_designer.subtitle') }}
+        </p>
+
+      </div>
+
+      <Separator />
+      <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')
+                    }}</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')
+                    }}</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')
+                    }}</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">
+                              {{ $t('config_options.feedback_designer.feedback_type.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">{{ $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>
+
+        </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">
+                      <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>
+
+        </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>
+          </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.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>
+
+        </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>
+          </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>
+          </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>
+      </ScrollArea>
+      <Separator />
+
+
+    </div>
+  </TabsContent>
+</template>
+<script>
+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'
+
+export default {
+  name: 'HapticConfig',
+  components: { Slider, Tabs, ScrollArea },
+}
+</script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/LEDsConfig.vue b/src/LEDsConfig.vue
new file mode 100644
index 0000000..5611f65
--- /dev/null
+++ b/src/LEDsConfig.vue
@@ -0,0 +1,214 @@
+<template>
+  <TabsContent value="led-config" class="mt-0">
+    <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+      <div class="space-y-1 p-6">
+        <h1 class="leading-none text-lg">
+          {{ $t('config_options.light_designer.title') }}
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          {{ $t('config_options.light_designer.subtitle') }}
+        </p>
+
+      </div>
+
+      <Separator />
+      <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>
+      </ScrollArea>
+      <Separator />
+
+
+    </div>
+  </TabsContent>
+</template>
+<script>
+export default {
+  name: 'LEDsConfig',
+}
+</script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/MappingConfig.vue b/src/MappingConfig.vue
new file mode 100644
index 0000000..25a864a
--- /dev/null
+++ b/src/MappingConfig.vue
@@ -0,0 +1,279 @@
+<template>
+  <TabsContent value="map-config" class="mt-0">
+    <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+      <div class="space-y-1 p-6">
+        <h1 class="leading-none text-lg">
+          {{ $t('config_options.mapping_configuration.title') }}
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          {{ $t('config_options.mapping_configuration.subtitle') }}
+        </p>
+
+      </div>
+
+      <Separator />
+      <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">
+                              {{ $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">
+                              {{ $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">
+                              {{ $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">
+                              {{ $t('config_options.mapping_configuration.key_mapping.switch.d') }}
+                              <Badge class="bg-zinc-400 mt-2">M0</Badge>
+                            </span>
+              </div>
+            </TabsTrigger>
+          </TabsList>
+
+        </Tabs>
+
+        <Separator />
+        <Command>
+
+          <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>
+            <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 />
+
+        <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="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>
+          </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>
+      </ScrollArea>
+      <Separator />
+
+
+    </div>
+  </TabsContent>
+</template>
+<script>
+export default {
+  name: 'MappingConfig',
+}
+</script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/Navbar.vue b/src/Navbar.vue
new file mode 100644
index 0000000..351fd1d
--- /dev/null
+++ b/src/Navbar.vue
@@ -0,0 +1,41 @@
+<template>
+  <div class="flex">
+    <Menubar class="w-full rounded-none bg-zinc-950">
+      <MenubarMenu>
+        <MenubarTrigger v-t="'navbar.device.title'" />
+        <MenubarContent>
+          <!-- TODO: Switch keyboard shortcut icons based on platform -->
+          <MenubarItem>
+            {{ $t('navbar.device.disconnect') }}
+            <MenubarShortcut>⌘D</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>{{ $t('navbar.device.about') }}</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>{{ $t('navbar.device.preferences') }}</MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>{{ $t('navbar.device.export') }}
+            <MenubarShortcut>⌘E</MenubarShortcut>
+          </MenubarItem>
+          <MenubarItem>{{ $t('navbar.device.import') }}
+            <MenubarShortcut>⌘I</MenubarShortcut>
+          </MenubarItem>
+          <MenubarSeparator />
+          <MenubarItem>{{ $t('navbar.device.quit') }}
+            <MenubarShortcut>⌘Q</MenubarShortcut>
+          </MenubarItem>
+        </MenubarContent>
+      </MenubarMenu>
+    </Menubar>
+  </div>
+</template>
+<script setup>
+import {
+  Menubar,
+  MenubarMenu,
+  MenubarShortcut,
+  MenubarSeparator,
+  MenubarItem,
+  MenubarTrigger,
+  MenubarContent,
+} from '@/components/ui/menubar/index.js'
+</script>
\ No newline at end of file
diff --git a/src/ProgramConfig.vue b/src/ProgramConfig.vue
new file mode 100644
index 0000000..57a8e99
--- /dev/null
+++ b/src/ProgramConfig.vue
@@ -0,0 +1,156 @@
+<template>
+  <TabsContent value="prog-config" class="mt-0">
+    <div class="w-96 bg-zinc-900 bg-opacity-40">
+
+      <div class="space-y-1 p-6">
+        <h1 class="leading-none text-lg">
+          {{ $t('config_options.program_settings.title') }}
+        </h1>
+        <p class="text-xs text-muted-foreground">
+          {{ $t('config_options.program_settings.subtitle') }}
+        </p>
+
+      </div>
+
+      <Separator />
+      <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.program_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">
+                </div>
+                <span
+                  class="text-xs leading-3 text-wrap">{{ $t('config_options.program_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">
+                              {{ $t('config_options.program_settings.connection_type.midi') }}
+                            </span>
+              </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.program_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.program_settings.profile_properties.program_name')
+                        }}</span>
+          <Input
+            type="text" :placeholder="$t('config_options.program_settings.profile_properties.program_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>
+        <Separator />
+        <div class="flex flex-col p-8 py-4">
+                      <span
+                        class="text-sm text-muted-foreground font-mono pb-4">{{ $t('config_options.program_settings.profile_properties.program_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.program_settings.profile_properties.program_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.program_settings.profile_properties.show_description')
+              }}</Label>
+          </div>
+        </div>
+        <Separator />
+
+        <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.program_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.program_settings.internal_profile_toggle.subtitle') }}
+          <Separator class="mt-4" />
+          <span class="space-y-4">{{ $t('config_options.program_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.program_settings.internal_profile_toggle.warning') }}</span>
+        </p>
+
+
+      </ScrollArea>
+      <Separator />
+
+
+    </div>
+  </TabsContent>
+</template>
+<script>
+export default {
+  name: 'ProgramConfig',
+}
+</script>
+<style scoped>
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index ff7371c..1c2abd1 100644
--- a/src/main.js
+++ b/src/main.js
@@ -15,6 +15,7 @@ const store = createStore({
   state() {
     return {}
   },
+  mutations: {},
 })
 
 // Create VueI18n instance with locales loaded from /lang directory