ADD: Add and delete actions

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

@@ -72,6 +72,7 @@
         <template v-else>
           <Button
             class="aspect-square bg-orange-950 p-1 text-zinc-200 hover:bg-orange-900 hover:text-zinc-100"
+            @click="$emit('delete')"
             ><Check class="size-4"
           /></Button>
           <Button
@@ -121,6 +122,8 @@ import { useAppStore } from '@renderer/appStore'
 const deviceStore = useDeviceStore()
 const appStore = useAppStore()
 
+defineEmits(['delete'])
+
 const props = defineProps({
   actionIndex: {
     type: Number,

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

@@ -11,12 +11,17 @@
     >
       <template #item="dragAction">
         <div :key="dragAction.element.id">
-          <ActionCard :action-index="dragAction.index + 1" :action="dragAction.element" />
+          <ActionCard
+            :action-index="dragAction.index + 1"
+            :action="dragAction.element"
+            @delete="$emit('delete', dragAction.index)"
+          />
         </div>
       </template>
     </draggable>
     <button
       class="flex flex-1 items-center justify-center rounded-lg border border-zinc-800 bg-zinc-900/50 p-2 text-sm text-muted-foreground hover:bg-zinc-800 hover:text-zinc-200"
+      @click="$emit('add')"
     >
       <Plus class="mr-2" /> Add an action
     </button>
@@ -28,6 +33,9 @@ import { Plus } from 'lucide-vue-next'
 import ActionCard from '@renderer/components/config/actions/ActionCard.vue'
 import draggable from 'vuedraggable'
 import { ref } from 'vue'
+
+defineEmits(['add', 'delete'])
+
 defineProps({
   actions: {
     type: Array,

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

@@ -3,19 +3,34 @@
     <template #title>
       <span class="text-zinc-500">&nbsp;({{ pressedActions.length }})</span></template
     >
-    <ActionGroup :actions="pressedActions" class="p-2" />
+    <ActionGroup
+      :actions="pressedActions"
+      class="p-2"
+      @add="deviceStore.addKeyAction(null, appStore.selectedKey, 0)"
+      @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 0)"
+    />
   </ConfigSection>
   <ConfigSection :title="`${appStore.selectedKey} Released`" :icon-component="PanelBottomOpen">
     <template #title>
       <span class="text-zinc-500">&nbsp;({{ releasedActions.length }})</span></template
     >
-    <ActionGroup :actions="releasedActions" class="p-2" />
+    <ActionGroup
+      :actions="releasedActions"
+      class="p-2"
+      @add="deviceStore.addKeyAction(null, appStore.selectedKey, 1)"
+      @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 1)"
+    />
   </ConfigSection>
   <ConfigSection :title="`${appStore.selectedKey} Held`" :icon-component="Clock2">
     <template #title>
       <span class="text-zinc-500">&nbsp;({{ heldActions.length }})</span></template
     >
-    <ActionGroup :actions="heldActions" class="p-2" />
+    <ActionGroup
+      :actions="heldActions"
+      class="p-2"
+      @add="deviceStore.addKeyAction(null, appStore.selectedKey, 2)"
+      @delete="(index) => deviceStore.removeKeyAction(index, appStore.selectedKey, 3)"
+    />
   </ConfigSection>
 </template>
 <script setup lang="ts">

src/renderer/src/deviceStore.ts

@@ -149,6 +149,7 @@ export const useDeviceStore = defineStore('device', {
         vernier: 10
       }
     } as Value,
+    defaultKeyAction: { type: 'next_profile' } as Action,
     orientationLabels: [270, 0, 90, 180]
   }),
   getters: {
@@ -542,6 +543,63 @@ export const useDeviceStore = defineStore('device', {
         this.setDirtyState(true)
       }
     },
+    addKeyAction(
+      action: Action | null = null,
+      key: string,
+      trigger: number,
+      updateDevice: boolean = true
+    ) {
+      if (!action) {
+        action = JSON.parse(JSON.stringify(this.defaultKeyAction)) as Action
+      }
+      const keyIndex = this.keyLabels.indexOf(key)
+      if (trigger === 0) {
+        if (!this.currentProfile!.keys[keyIndex].pressed) {
+          this.currentProfile!.keys[keyIndex].pressed = []
+        }
+        this.currentProfile!.keys[keyIndex].pressed!.push(action)
+      } else if (trigger === 1) {
+        if (!this.currentProfile!.keys[keyIndex].released) {
+          this.currentProfile!.keys[keyIndex].released = []
+        }
+        this.currentProfile!.keys[keyIndex].released!.push(action)
+      } else if (trigger === 2) {
+        if (!this.currentProfile!.keys[keyIndex].held) {
+          this.currentProfile!.keys[keyIndex].held = []
+        }
+        this.currentProfile!.keys[keyIndex].held!.push(action)
+      }
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { keys: this.currentProfile!.keys }
+          })
+        )
+        this.setDirtyState(true)
+      }
+    },
+    removeKeyAction(index: number, key: string, trigger: number, updateDevice: boolean = true) {
+      const keyIndex = this.keyLabels.indexOf(key)
+      if (trigger === 0) {
+        this.currentProfile!.keys[keyIndex].pressed!.splice(index, 1)
+      } else if (trigger === 1) {
+        this.currentProfile!.keys[keyIndex].released!.splice(index, 1)
+      } else if (trigger === 2) {
+        this.currentProfile!.keys[keyIndex].held!.splice(index, 1)
+      }
+      if (updateDevice) {
+        sendDebounced(
+          this.currentDeviceId!,
+          JSON.stringify({
+            profile: this.currentProfileName,
+            updates: { keys: this.currentProfile!.keys }
+          })
+        )
+        this.setDirtyState(true)
+      }
+    },
     updateKeyActionParameter(index: number, updates: object, updateDevice: boolean = true) {
       Object.assign(this.currentProfile!.keys[index], updates)
       if (updateDevice) {