From b829f9ba3e772216342052023c91d6708e6e1a5f Mon Sep 17 00:00:00 2001
From: chahinebrini <chahinebrini@gmail.com>
Date: Wed, 17 Jun 2026 03:06:38 +0200
Subject: [PATCH] fix(magic): match current device by session deviceId, remove
 confusing overall status card

---
 .../app/composables/useDeviceStatus.ts        | 14 +++-
 apps/rebreak-magic/app/pages/status.vue       | 70 +------------------
 2 files changed, 14 insertions(+), 70 deletions(-)

diff --git a/apps/rebreak-magic/app/composables/useDeviceStatus.ts b/apps/rebreak-magic/app/composables/useDeviceStatus.ts
index 81efc6e..5a8257a 100644
--- a/apps/rebreak-magic/app/composables/useDeviceStatus.ts
+++ b/apps/rebreak-magic/app/composables/useDeviceStatus.ts
@@ -37,11 +37,19 @@ export function useDeviceStatus(
   devices: Ref<MagicDeviceInfo[]>,
   localHostname: Ref<string | null>,
   iphone: Ref<IphoneDeviceState | null>,
+  currentDeviceId?: Ref<string | null>,
 ) {
-  const currentBackendDevice = computed<ComputedDevice | null>(() => {
-    if (!localHostname.value) return null;
+  function isCurrentDevice(d: MagicDeviceInfo): boolean {
+    if (currentDeviceId?.value) {
+      return d.deviceId === currentDeviceId.value;
+    }
+    if (!localHostname.value) return false;
     const local = normalizeHostname(localHostname.value);
-    const found = devices.value.find((d) => normalizeHostname(d.hostname) === local);
+    return normalizeHostname(d.hostname) === local;
+  }
+
+  const currentBackendDevice = computed<ComputedDevice | null>(() => {
+    const found = devices.value.find(isCurrentDevice);
     if (!found) return null;
     return {
       deviceId: found.deviceId,
diff --git a/apps/rebreak-magic/app/pages/status.vue b/apps/rebreak-magic/app/pages/status.vue
index cfac7dd..56b51d9 100644
--- a/apps/rebreak-magic/app/pages/status.vue
+++ b/apps/rebreak-magic/app/pages/status.vue
@@ -33,41 +33,6 @@
     </div>
 
     <div class="max-w-3xl mx-auto px-6 py-8 space-y-6">
-      <!-- Overall status card -->
-      <UCard class="shadow-sm border-gray-100 overflow-hidden">
-        <div class="flex items-start gap-4">
-          <div
-            class="w-14 h-14 rounded-2xl bg-gradient-to-br flex items-center justify-center shrink-0"
-            :class="statusCardClass"
-          >
-            <UIcon
-              :name="protection.status.value.overall === 'protected'
-                ? 'i-heroicons-shield-check'
-                : protection.status.value.overall === 'partial'
-                  ? 'i-heroicons-shield-exclamation'
-                  : 'i-heroicons-shield-slash'"
-              class="w-7 h-7 text-white"
-            />
-          </div>
-          <div class="flex-1 min-w-0">
-            <div class="flex items-center gap-2 flex-wrap">
-              <h2 class="text-lg font-bold text-gray-900">{{ protection.status.value.label }}</h2>
-              <UBadge
-                :color="badgeColorForOverall"
-                variant="subtle"
-                size="xs"
-              >
-                {{ overallBadgeLabel }}
-              </UBadge>
-            </div>
-            <p class="text-sm text-gray-500 mt-0.5">{{ protection.status.value.message }}</p>
-          </div>
-          <div v-if="protection.lastUpdated.value" class="hidden sm:block text-xs text-gray-400 text-right">
-            Aktualisiert<br>{{ formatTime(protection.lastUpdated.value) }}
-          </div>
-        </div>
-      </UCard>
-
       <!-- Hero section -->
       <section>
         <h2 class="text-sm font-bold text-gray-500 uppercase tracking-wider mb-3">Aktives Gerät</h2>
@@ -169,6 +134,8 @@ const devices = useMagicDevices();
 const iphone = useIphoneDevice();
 const protection = useProtectionStatus();
 
+const currentDeviceId = computed(() => session.value?.deviceId ?? null);
+
 const profile = ref<UserProfile | null>(null);
 const loading = ref(false);
 const error = ref<string | null>(null);
@@ -178,34 +145,7 @@ const platformInfo = ref<{ platform: string } | null>(null);
 
 // Share localHostname from protection composable with device status logic.
 const localHostname = protection.localHostname;
-const { currentBackendDevice, otherDevices, iosStars } = useDeviceStatus(devices, localHostname, iphone);
-
-const statusCardClass = computed(() => {
-  switch (protection.status.value.overall) {
-    case "protected": return "from-emerald-500 to-teal-500";
-    case "partial": return "from-amber-500 to-orange-500";
-    case "unprotected": return "from-slate-400 to-slate-500";
-    default: return "from-blue-500 to-indigo-500";
-  }
-});
-
-const badgeColorForOverall = computed(() => {
-  switch (protection.status.value.overall) {
-    case "protected": return "success";
-    case "partial": return "warning";
-    case "unprotected": return "neutral";
-    default: return "primary";
-  }
-});
-
-const overallBadgeLabel = computed(() => {
-  switch (protection.status.value.overall) {
-    case "protected": return "Aktiv";
-    case "partial": return "Teilweise";
-    case "unprotected": return "Inaktiv";
-    default: return "Unbekannt";
-  }
-});
+const { currentBackendDevice, otherDevices, iosStars } = useDeviceStatus(devices, localHostname, iphone, currentDeviceId);
 
 onMounted(async () => {
   await loadProfile();
@@ -239,10 +179,6 @@ async function refresh() {
   }
 }
 
-function formatTime(date: Date) {
-  return date.toLocaleTimeString("de-DE", { hour: "2-digit", minute: "2-digit", second: "2-digit" });
-}
-
 function openDevice(device: ComputedDevice) {
   selectedDevice.value = device;
   sheetOpen.value = true;