UPD: Keyboard + CC actions

src/renderer/src/components/config/actions/SendKeyAction.vue

@@ -1,35 +1,44 @@
 <template>
   <div class="flex flex-col p-4">
+    <span class="font-mono text-sm text-muted-foreground">Keycode:</span>
+    <div class="flex gap-2">
       <Button
-      class="flex-1"
         :class="{ 'bg-orange-700 hover:bg-orange-600': isCapturing }"
+        class="my-2 flex-1"
         @click="toggleCapture"
         >⬤
-      {{ isCapturing ? 'Capturing Keyboard Input' : 'Capture Keyboard Input' }}
+        {{ isCapturing ? 'Capturing' : 'Capture' }}
       </Button>
-    <div v-if="lastEvent" class="mt-6 text-center font-mono text-sm text-muted-foreground">
+      <Input v-model="keyCodeInput" class="my-2 flex-1 uppercase" type="number" />
-      Key: {{ lastEvent?.key }} | Code: {{ lastEvent?.keyCode }} | Type: {{ lastEvent?.type }}
-    </div>
-    <div class="mt-6 text-center font-mono text-sm text-muted-foreground">
-      Keycode: {{ action.keyCodes ? action.keyCodes.join(', ') : 'None' }}
     </div>
   </div>
 </template>
 <script setup lang="ts">
-import { Button } from '@renderer/components/ui/button'
-import { ref, Ref } from 'vue'
 import { Action } from '@renderer/deviceStore'
+import { Button } from '@renderer/components/ui/button'
+import { ref, watch, Ref } from 'vue'
+import { Input } from '@renderer/components/ui/input'
 
-defineProps({
+const emit = defineEmits(['update'])
+
+const props = defineProps({
   action: {
     type: Object as () => Action,
     required: true
   }
 })
 
+const keyCodeInput = ref(props.action.keyCodes ? props.action.keyCodes[0] : '')
+
+watch(keyCodeInput, (keyCode) => {
+  emit('update', { keyCodes: [keyCode] })
+})
+
 const isCapturing = ref(false)
 const listener = (e: KeyboardEvent) => {
   lastEvent.value = e
+  keyCodeInput.value = e.keyCode
+  toggleCapture()
 }
 
 const toggleCapture = () => {

src/renderer/src/components/config/actions/SendMidiCCAction.vue

@@ -1,8 +1,59 @@
 <template>
-  <div class="p-4">
+  <div class="flex flex-col p-4">
-    <Input type="text" placeholder="CC to be sent" />
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <span class="font-mono text-sm text-muted-foreground">CC:</span>
+        <Input v-model="ccInput" class="my-2 uppercase" type="number" />
+      </div>
+      <div class="flex-1">
+        <span class="font-mono text-sm text-muted-foreground">Channel:</span>
+        <Input v-model="channelInput" class="my-2 uppercase" type="number" />
+      </div>
+    </div>
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <span class="font-mono text-sm text-muted-foreground">Value:</span>
+        <Input v-model="valueInput" class="my-2 uppercase" type="number" />
+      </div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
+import { Action } from '@renderer/deviceStore'
+import { ref, watch, nextTick } from 'vue'
 import { Input } from '@renderer/components/ui/input'
+
+const emit = defineEmits(['update'])
+
+const props = defineProps({
+  action: {
+    type: Object as () => Action,
+    required: true
+  }
+})
+
+const ccInput = ref(props.action.cc)
+const channelInput = ref(props.action.channel)
+const valueInput = ref(props.action.val)
+
+watch(ccInput, (cc) => {
+  nextTick(() => {
+    ccInput.value = Math.max(0, Math.min(Number(cc), 127))
+  })
+  emit('update', { cc: ccInput.value })
+})
+
+watch(channelInput, (channel) => {
+  nextTick(() => {
+    channelInput.value = Math.max(1, Math.min(Number(channel), 16))
+  })
+  emit('update', { channel: channelInput.value })
+})
+
+watch(valueInput, (val) => {
+  nextTick(() => {
+    valueInput.value = Math.max(0, Math.min(Number(val), 127))
+  })
+  emit('update', { val: valueInput.value })
+})
 </script>

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

@@ -11,7 +11,11 @@
       @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 0)"
     />
   </ConfigSection>
-  <ConfigSection :title="`${appStore.selectedKey} Released`" :icon-component="PanelBottomOpen">
+  <ConfigSection
+    v-if="false"
+    :title="`${appStore.selectedKey} Released`"
+    :icon-component="PanelBottomOpen"
+  >
     <template #title>
       <span class="text-zinc-500">&nbsp;({{ releasedActions.length }})</span></template
     >
@@ -23,7 +27,7 @@
       @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 1)"
     />
   </ConfigSection>
-  <ConfigSection :title="`${appStore.selectedKey} Held`" :icon-component="Clock2">
+  <ConfigSection v-if="false" :title="`${appStore.selectedKey} Held`" :icon-component="Clock2">
     <template #title>
       <span class="text-zinc-500">&nbsp;({{ heldActions.length }})</span></template
     >