chahine/rebreak-monorepo
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

fix(magic): match current device by session deviceId, remove confusing overall status card

Browse Source
This commit is contained in:
chahinebrini 2026-06-17 03:06:38 +02:00
parent 4c46ac69c9
commit b829f9ba3e
2 changed files with 14 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
apps/rebreak-magic/app/composables/useDeviceStatus.ts
View File

@ -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,

70
apps/rebreak-magic/app/pages/status.vue
View File

@ -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;