UPD: Refactor App into vue components

broke quite a few things along the way

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>

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>

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>

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>

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>

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>

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>

src/main.js

@@ -15,6 +15,7 @@ const store = createStore({
   state() {
     return {}
   },
+  mutations: {},
 })
 
 // Create VueI18n instance with locales loaded from /lang directory