UPD: Key mapping types

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

@@ -47,7 +47,12 @@
                       () => {
                         typeInputValue = key
                         open = false
-                        deviceStore.updateKeyActionParameter(actionIndex - 1, { type: key })
+                        deviceStore.updateKeyActionParameter(
+                          actionIndex - 1,
+                          appStore.selectedKey,
+                          trigger,
+                          { type: key }
+                        )
                       }
                     "
                   >
@@ -83,20 +88,26 @@
         </template>
       </div>
     </div>
+    <template v-if="actionTypeOptions[typeInputValue]?.component">
       <Separator />
       <component
-      :is="
-        actionTypeOptions[typeInputValue]?.component
-          ? actionTypeOptions[typeInputValue]?.component
-          : WIP
-      "
+        :is="actionTypeOptions[typeInputValue]?.component"
         :action="action"
+        @update="
+          (updates) =>
+            deviceStore.updateKeyActionParameter(
+              actionIndex - 1,
+              appStore.selectedKey,
+              trigger,
+              updates
+            )
+        "
       />
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
-import WIP from '@renderer/components/WIP.vue'
 import { Popover, PopoverTrigger, PopoverContent } from '@renderer/components/ui/popover'
 import { Button } from '@renderer/components/ui/button'
 import { Separator } from '@renderer/components/ui/separator'
@@ -118,6 +129,7 @@ import { useElementSize } from '@vueuse/core'
 import { Action } from '@renderer/deviceStore'
 import { useDeviceStore } from '@renderer/deviceStore'
 import { useAppStore } from '@renderer/appStore'
+import SwitchProfileAction from './SwitchProfileAction.vue'
 
 const deviceStore = useDeviceStore()
 const appStore = useAppStore()
@@ -132,15 +144,19 @@ const props = defineProps({
   action: {
     type: Object as () => Action,
     required: true
+  },
+  trigger: {
+    type: Number,
+    required: true
   }
 })
 
 const actionTypeOptions = ref({
   key: { label: 'Press a Keyboard Key', component: SendKeyAction },
   midi: { label: 'Send a MIDI Control Change', component: SendMidiCCAction },
-  next_profile: { label: 'Go to the Next Profile', component: WIP },
-  prev_profile: { label: 'Go to the Previous Profile', component: WIP },
-  profile: { label: 'Go to a specific Profile', component: WIP }
+  next_profile: { label: 'Go to the Next Profile', component: null },
+  prev_profile: { label: 'Go to the Previous Profile', component: null },
+  profile: { label: 'Go to a specific Profile', component: SwitchProfileAction }
 })
 
 const actionType = computed(() => {

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

@@ -14,6 +14,7 @@
           <ActionCard
             :action-index="dragAction.index + 1"
             :action="dragAction.element"
+            :trigger="trigger"
             @delete="$emit('delete', dragAction.index)"
           />
         </div>
@@ -40,6 +41,10 @@ defineProps({
   actions: {
     type: Array,
     required: true
+  },
+  trigger: {
+    type: Number,
+    required: true
   }
 })
 const dragOptions = ref({

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

@@ -0,0 +1,34 @@
+<template>
+  <div class="flex flex-col p-4">
+    <div class="flex gap-2">
+      <div class="flex-1">
+        <span class="font-mono text-sm text-muted-foreground">Profile Name:</span>
+        <Input v-model="profileNameInput" class="my-2 uppercase" type="text" />
+        <!-- TODO: Make this a dropdown -->
+      </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 profileNameInput = ref(props.action.name)
+
+watch(profileNameInput, (profileName) => {
+  nextTick(() => {
+    profileNameInput.value = profileName?.toUpperCase() || ''
+  })
+  emit('update', { name: profileNameInput.value })
+})
+</script>

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

@@ -6,6 +6,7 @@
     <ActionGroup
       :actions="pressedActions"
       class="p-2"
+      :trigger="0"
       @add="deviceStore.addKeyAction(null, appStore.selectedKey, 0)"
       @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 0)"
     />
@@ -17,6 +18,7 @@
     <ActionGroup
       :actions="releasedActions"
       class="p-2"
+      :trigger="1"
       @add="deviceStore.addKeyAction(null, appStore.selectedKey, 1)"
       @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 1)"
     />
@@ -28,6 +30,7 @@
     <ActionGroup
       :actions="heldActions"
       class="p-2"
+      :trigger="2"
       @add="deviceStore.addKeyAction(null, appStore.selectedKey, 2)"
       @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 2)"
     />

src/renderer/src/deviceStore.ts

@@ -51,6 +51,7 @@ export interface Action {
   cc?: number
   val?: number
   buttons?: number
+  name?: string
 }
 
 export interface Value {
@@ -600,8 +601,21 @@ export const useDeviceStore = defineStore('device', {
         this.setDirtyState(true)
       }
     },
-    updateKeyActionParameter(index: number, updates: object, updateDevice: boolean = true) {
-      Object.assign(this.currentProfile!.keys[index], updates)
+    updateKeyActionParameter(
+      index: number,
+      key: string,
+      trigger: number,
+      updates: object,
+      updateDevice: boolean = true
+    ) {
+      const keyIndex = this.keyLabels.indexOf(key)
+      if (trigger === 0) {
+        Object.assign(this.currentProfile!.keys[keyIndex].pressed![index], updates)
+      } else if (trigger === 1) {
+        Object.assign(this.currentProfile!.keys[keyIndex].released![index], updates)
+      } else if (trigger === 2) {
+        Object.assign(this.currentProfile!.keys[keyIndex].held![index], updates)
+      }
       if (updateDevice) {
         sendDebounced(
           this.currentDeviceId!,