UPD: Display the actual knob values

src/renderer/src/components/config/keys/KeyMappingConfig.vue

@@ -31,6 +31,7 @@ import { storeToRefs } from 'pinia'
 const appStore = useAppStore()
 const deviceStore = useDeviceStore()
 const { keyActions } = storeToRefs(deviceStore)
+// TODO: Only set the actions if they are different, only send those actions to the device
 const pressedActions = computed({
   get() {
     return (keyActions.value(appStore.selectedKey).pressed as Action[]) || []

src/renderer/src/components/config/knob/KnobMappingConfig.vue

@@ -1,23 +1,30 @@
 <template>
   <ConfigSection title="Knob Values" :icon-component="PlusCircle">
     <template #title>
-      <span class="text-zinc-500">&nbsp;({{ values.length }})</span></template
+      <span class="text-zinc-500">&nbsp;({{ knobValues.length }})</span></template
     >
-    <ValueGroup :values="values" class="p-2" />
+    <ValueGroup :values="knobValues" class="p-2" />
   </ConfigSection>
 </template>
-<script setup>
+<script setup lang="ts">
 import { PlusCircle } from 'lucide-vue-next'
 import ConfigSection from '@renderer/components/common/ConfigSection.vue'
-import { ref } from 'vue'
 import ValueGroup from '@renderer/components/config/values/ValueGroup.vue'
+import { useDeviceStore } from '@renderer/deviceStore'
+import { computed } from 'vue'
 
-const values = ref([
-  {
-    id: '1'
+const deviceStore = useDeviceStore()
+
+const knobValues = computed({
+  get() {
+    return Object.values(deviceStore.currentProfile.knob).map((value, index) => ({
+      id: index.toString(),
+      value: value
+    }))
   },
-  {
-    id: '2'
+  set(newValues) {
+    //TODO: Update deviceStore & device
+    //deviceStore.setValues(newValues)
   }
-])
+})
 </script>