From 1dd8d68348ce4280b30ffcfdd15ef74b5a3c4236 Mon Sep 17 00:00:00 2001
From: Robert Kossessa <github@kosro.de>
Date: Thu, 1 Feb 2024 17:36:56 +0100
Subject: [PATCH] UPD: Show profile name in preview

---
 src/components/device/DevicePreview.vue  | 12 ++++++++++--
 src/components/profile/ProfileButton.vue |  2 +-
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/device/DevicePreview.vue b/src/components/device/DevicePreview.vue
index 4380f47..9af5b3d 100644
--- a/src/components/device/DevicePreview.vue
+++ b/src/components/device/DevicePreview.vue
@@ -3,8 +3,13 @@
     <div
       class="bg-contain bg-top bg-no-repeat h-full w-full relative"
       :style="{backgroundImage: `linear-gradient(to bottom, black, rgba(0,0,0,0.2) 10%, rgba(0,0,0,0.2) 95%, black), url(${RenderNano})`}">
-      <div class="flex px-4 pt-5 pb-3 items-baseline font-heading text-lg">
-        {{ $t('preview.title') }}
+      <div class="px-4 pt-5 pb-3 flex justify-between items-baseline">
+        <div class="font-heading text-lg">
+          {{ $t('preview.title') }}
+        </div>
+        <div class="font-mono">
+          <span class="text-muted-foreground">Profile: </span>{{ store.selectedProfile.name }}
+        </div>
       </div>
       <div
         class="rounded-full aspect-square absolute h-[30%] top-[30.5%]  left-0 right-0 mx-auto flex flex-col justify-center items-center overflow-hidden"
@@ -27,4 +32,7 @@
 import RenderNano from '@/assets/images/renderNano.png'
 import LogoMidi from '@/assets/logos/logoMidi.svg'
 import DeviceBar from '@/components/device/DeviceBar.vue'
+import { useStore } from '@/store'
+
+const store = useStore()
 </script>
\ No newline at end of file
diff --git a/src/components/profile/ProfileButton.vue b/src/components/profile/ProfileButton.vue
index 6e201e0..540b805 100644
--- a/src/components/profile/ProfileButton.vue
+++ b/src/components/profile/ProfileButton.vue
@@ -117,7 +117,7 @@ const props = defineProps({
   },
   showId: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   nameEditable: {
     type: Boolean,