From 18c050d93571aa8e185c7f02ff4a955b835bf36c Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Tue, 28 May 2024 23:28:27 +0200
Subject: [PATCH] FIX: Mapping tabs not updating correctly when switching
 profiles

---
 src/renderer/src/App.vue                                  | 2 +-
 src/renderer/src/components/config/actions/ActionCard.vue | 7 ++++++-
 src/renderer/src/components/config/values/ValueCard.vue   | 5 ++++-
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/App.vue b/src/renderer/src/App.vue
index 8116c04..f57d269 100644
--- a/src/renderer/src/App.vue
+++ b/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">
diff --git a/src/renderer/src/components/config/actions/ActionCard.vue b/src/renderer/src/components/config/actions/ActionCard.vue
index 4c32b69..0c3261c 100644
--- a/src/renderer/src/components/config/actions/ActionCard.vue
+++ b/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: {
diff --git a/src/renderer/src/components/config/values/ValueCard.vue b/src/renderer/src/components/config/values/ValueCard.vue
index aa631e1..7c1577b 100644
--- a/src/renderer/src/components/config/values/ValueCard.vue
+++ b/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