UPD: Mapping config and muted text

src/components/common/ConfigSection.vue

@@ -6,7 +6,7 @@
         :class="{'cursor-pointer hover:bg-zinc-800': showToggle}"
         @click="toggle = !toggle">
         <component :is="iconComponent" v-if="iconComponent" class="h-4 w-4 mr-2" />
-        <h2 class="text-sm py-4">{{ title }}</h2>
+        <h2 class="text-sm py-4">{{ title }}<slot name="title"/></h2>
         <Switch
           v-if="showToggle" :checked="toggle"
           class="ml-auto" @click.stop="toggle=!toggle" />

src/components/config/keys/KeyMappingConfig.vue

@@ -1,5 +1,6 @@
 <template>
   <ConfigSection title="Key Mapping" :icon-component="PlusSquare">
+    <template #title><span class="text-zinc-500"> ({{ store.selectedKey}})</span></template>
     <div class="px-8 my-4">
       <span class="text-sm text-muted-foreground font-mono">Action:</span>
       <Popover v-model:open="open">
@@ -10,22 +11,26 @@
             role="combobox"
             :aria-expanded="open"
             class="my-2 w-full justify-between">
-            {{ value ? actionOptions[value] : 'Select an action...' }}
+            <ScrambleText :text="value ? actionOptions[value] : 'Select an action...'" />
             <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
           </Button>
         </PopoverTrigger>
         <PopoverContent class="p-0" :style="{width: $refs.comboboxButton?.$el.offsetWidth}">
           <Command>
-            <CommandInput class="h-9" placeholder="Search framework..." />
+            <CommandInput class="h-9" placeholder="Search actions..." />
-            <CommandEmpty>No framework found.</CommandEmpty>
+            <CommandEmpty>
+              <ScrambleText
+                scramble-on-mount
+                text="No actions found." />
+            </CommandEmpty>
             <CommandList>
               <CommandGroup>
                 <CommandItem
                   v-for="(action, key) in actionOptions"
                   :key="key"
-                  :value="key"
+                  :value="action"
-                  @select="(event) => {
+                  @select="() => {
-                    value = event.detail.value
+                    value = key
                     open = false
                   }">
                   {{ action }}
@@ -50,17 +55,21 @@ import { Button } from '@/components/ui/button'
 import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
 import { ref } from 'vue'
 import { cn } from '@/lib/utils'
+import ScrambleText from '@/components/common/ScrambleText.vue'
+import { useStore } from '@/store'
+
+const store = useStore()
 
 const actionOptions = ref({
-  sendKey: 'Trigger a Key Press or Combination',
+  sendKey: 'Press Key or Combination',
   sendString: 'Type a String',
-  sendMouse: 'Move, scroll or click the Mouse',
+  sendMouse: 'Move, Scroll or Click',
   sendGamepad: 'Send a Gamepad Input',
   sendMidi: 'Send a MIDI Message',
   sendOsc: 'Send an OSC Message',
   sendSerial: 'Send a Serial Message',
   controlMedia: 'Control Media Playback',
-  controlSystem: 'Control your Operating System',
+  controlSystem: 'Control your OS',
   runProgram: 'Start a Program',
 })
 

src/components/config/knob/KnobMappingConfig.vue

@@ -1,10 +1,72 @@
 <template>
   <ConfigSection title="Knob Mapping" :icon-component="PlusCircle">
+    <div class="px-8 my-4">
+      <span class="text-sm text-muted-foreground font-mono">Control:</span>
+      <Popover v-model:open="open">
+        <PopoverTrigger as-child>
+          <Button
+            ref="comboboxButton"
+            variant="outline"
+            role="combobox"
+            :aria-expanded="open"
+            class="my-2 w-full justify-between">
+            <ScrambleText :text="value ? knobMappingOptions[value] : 'Select an action...'" />
+            <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-0" :style="{width: $refs.comboboxButton?.$el.offsetWidth}">
+          <Command>
+            <CommandInput class="h-9" placeholder="Search actions..." />
+            <CommandEmpty>
+              <ScrambleText
+                scramble-on-mount
+                text="No actions found." />
+            </CommandEmpty>
+            <CommandList>
+              <CommandGroup>
+                <CommandItem
+                  v-for="(action, key) in knobMappingOptions"
+                  :key="key"
+                  :value="action"
+                  @select="() => {
+                    value = key
+                    open = false
+                  }">
+                  {{ action }}
+                  <Check
+                    :class="cn('ml-auto h-4 w-4',value === key ? 'opacity-100' : 'opacity-0')" />
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </div>
     <WIP />
   </ConfigSection>
 </template>
 <script setup>
-import { PlusCircle } from 'lucide-vue-next'
+import { PlusCircle, ChevronsUpDown, Check } from 'lucide-vue-next'
 import ConfigSection from '@/components/common/ConfigSection.vue'
 import WIP from '@/components/WIP.vue'
+import { Popover, PopoverTrigger, PopoverContent } from '@/components/ui/popover'
+import { Button } from '@/components/ui/button'
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '@/components/ui/command'
+import { ref } from 'vue'
+import { cn } from '@/lib/utils'
+import ScrambleText from '@/components/common/ScrambleText.vue'
+
+const knobMappingOptions = ref({
+  sendKey: 'Send a Key for each Step',
+  controlMidi: 'Control a MIDI Value',
+  controlOsc: 'Control an OSC Value',
+  controlVolume: 'Control your OS Volume',
+  moveMouse: 'Move the Mouse',
+  scrollMouse: 'Scroll the Mouse',
+})
+
+const comboboxButton = ref(null)
+
+const open = ref(false)
+const value = ref('')
 </script>

src/components/navbar/Navbar.vue

@@ -27,7 +27,7 @@
         <MenubarMenu>
           <MenubarTrigger class="app-titlebar-button">
             <template v-if="store.multipleDevicesConnected">
-              Devices<span class="text-zinc-600">&nbsp;(2)</span>
+              Devices<span class="text-zinc-500">&nbsp;(2)</span>
             </template>
             <template v-else>
               Device