FIX: Mapping tabs not updating correctly when switching profiles

src/renderer/src/App.vue

@@ -17,7 +17,7 @@ onDeviceMessage((title, message) => {
 })
 </script>
 <template>
-  <main class="flex h-screen w-screen select-none flex-col">
+  <main class="flex h-screen w-screen select-none flex-col bg-[#050506]">
     <Navbar class="flex-none" />
     <div class="flex min-h-0 flex-1 flex-row justify-center">
       <div class="flex min-w-60 flex-1 basis-1/3 overflow-hidden">

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50">
+  <div
+    :key="appStore.selectedKey || 'no-key'"
+    class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50"
+  >
     <div class="p-4">
       <span class="font-mono text-sm text-muted-foreground"
         >Action{{ actionIndex ? ` ${actionIndex}` : '' }}:</span
@@ -113,8 +116,10 @@ import { ChevronsUpDown, Check, GripHorizontal, Trash2, X } from 'lucide-vue-nex
 import { useElementSize } from '@vueuse/core'
 import { Action } from '@renderer/deviceStore'
 import { useDeviceStore } from '@renderer/deviceStore'
+import { useAppStore } from '@renderer/appStore'
 
 const deviceStore = useDeviceStore()
+const appStore = useAppStore()
 
 const props = defineProps({
   actionIndex: {

src/renderer/src/components/config/values/ValueCard.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50">
+  <div
+    :key="deviceStore.currentProfileName || 'no-profile'"
+    class="overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900/50"
+  >
     <div class="p-4">
       <span class="font-mono text-sm text-muted-foreground"
         >Value{{ valueIndex ? ` ${valueIndex}` : '' }}:</span