From 04d9909e92716ef6d2e5c734ce30b8921ec6d664 Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 19:13:31 +0200
Subject: [PATCH] =?UTF-8?q?feat(P3.T6):=20Settings=20'Ger=C3=A4te'=20tab?=
 =?UTF-8?q?=20with=20revoke=20+=20this-device=20badge?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/settings/DeviceListTab.tsx | 126 ++++++++++++++++++
 apps/desktop/src/pages/SettingsPage.tsx       |  15 ++-
 2 files changed, 140 insertions(+), 1 deletion(-)
 create mode 100644 apps/desktop/src/components/settings/DeviceListTab.tsx

diff --git a/apps/desktop/src/components/settings/DeviceListTab.tsx b/apps/desktop/src/components/settings/DeviceListTab.tsx
new file mode 100644
index 0000000..bc75727
--- /dev/null
+++ b/apps/desktop/src/components/settings/DeviceListTab.tsx
@@ -0,0 +1,126 @@
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useOwnDevices } from '../../hooks/useOwnDevices';
+import { getDeviceRowId } from '../../lib/deviceRowId';
+import { SpinnerIcon } from '../icons';
+
+function formatLastSeen(iso: string, locale: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleString(locale, { dateStyle: 'medium', timeStyle: 'short' });
+  } catch {
+    return iso;
+  }
+}
+
+export function DeviceListTab() {
+  const { t, i18n } = useTranslation();
+  const { devices, loading, error, revoke } = useOwnDevices();
+  const ownId = getDeviceRowId();
+  const [busy, setBusy] = useState<string | null>(null);
+  const [opError, setOpError] = useState<string | null>(null);
+
+  const handleRevoke = async (id: string) => {
+    setOpError(null);
+    setBusy(id);
+    try {
+      await revoke(id);
+    } catch (err) {
+      setOpError(err instanceof Error ? err.message : 'revoke failed');
+    } finally {
+      setBusy(null);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-10 text-fg-muted">
+        <SpinnerIcon className="h-5 w-5" />
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <p className="rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-3 text-sm text-rose-600 dark:text-rose-300">
+        {t('app:settings.devices.error', { defaultValue: 'Geräteliste konnte nicht geladen werden.' })}
+      </p>
+    );
+  }
+
+  if (devices.length === 0) {
+    return (
+      <p className="text-sm text-fg-muted">
+        {t('app:settings.devices.empty', { defaultValue: 'Noch keine Geräte angemeldet.' })}
+      </p>
+    );
+  }
+
+  return (
+    <div className="space-y-3">
+      {opError && (
+        <p className="rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-2 text-sm text-rose-600 dark:text-rose-300">
+          {opError}
+        </p>
+      )}
+      <ul className="space-y-2">
+        {devices.map((d) => {
+          const isOwn = d.id === ownId;
+          const isRevoked = d.revokedAt !== null;
+          return (
+            <li
+              key={d.id}
+              className="flex items-center gap-3 rounded-lg border border-line bg-surface-2 px-4 py-3"
+            >
+              <div className="min-w-0 flex-1">
+                <div className="flex items-center gap-2">
+                  <span className="truncate text-sm font-medium text-fg">{d.name}</span>
+                  {isOwn && (
+                    <span className="rounded-md bg-accent/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-accent">
+                      {t('app:settings.devices.this_device', { defaultValue: 'Dieses Gerät' })}
+                    </span>
+                  )}
+                  {isRevoked && (
+                    <span className="rounded-md bg-rose-500/15 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-rose-600 dark:text-rose-300">
+                      {t('app:settings.devices.revoked', { defaultValue: 'Abgemeldet' })}
+                    </span>
+                  )}
+                </div>
+                <p className="mt-0.5 text-xs text-fg-muted">
+                  {d.platform} · {t('app:settings.devices.last_seen', { defaultValue: 'zuletzt' })}{' '}
+                  {formatLastSeen(d.lastSeenAt, i18n.language)}
+                </p>
+              </div>
+              {isOwn ? (
+                <button
+                  type="button"
+                  disabled
+                  title={t('app:settings.devices.use_sign_out', { defaultValue: 'Nutze Sign-out' })}
+                  className="cursor-not-allowed rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg-muted opacity-60"
+                >
+                  {t('app:settings.devices.use_sign_out', { defaultValue: 'Nutze Sign-out' })}
+                </button>
+              ) : isRevoked ? (
+                <span className="text-xs text-fg-muted">
+                  {t('app:settings.devices.already_revoked', { defaultValue: '—' })}
+                </span>
+              ) : (
+                <button
+                  type="button"
+                  onClick={() => void handleRevoke(d.id)}
+                  disabled={busy === d.id}
+                  className="cursor-pointer rounded-md border border-rose-500/40 bg-rose-500/10 px-3 py-1.5 text-xs font-semibold text-rose-600 transition hover:bg-rose-500/20 disabled:cursor-wait disabled:opacity-60 dark:text-rose-300"
+                >
+                  {busy === d.id
+                    ? t('app:settings.devices.revoking', { defaultValue: 'Wird abgemeldet…' })
+                    : t('app:settings.devices.revoke', { defaultValue: 'Abmelden' })}
+                </button>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}
diff --git a/apps/desktop/src/pages/SettingsPage.tsx b/apps/desktop/src/pages/SettingsPage.tsx
index 49b4da0..5a7b991 100644
--- a/apps/desktop/src/pages/SettingsPage.tsx
+++ b/apps/desktop/src/pages/SettingsPage.tsx
@@ -23,6 +23,7 @@ import {
 import { MicTestSection } from '../components/MicTestSection';
 import { NotificationSoundSettings } from '../components/NotificationSoundSettings';
 import { RingtoneSettings } from '../components/RingtoneSettings';
+import { DeviceListTab } from '../components/settings/DeviceListTab';
 import { SecurityCenter } from '../components/SecurityCenter';
 import { SoundboardSettings } from '../components/SoundboardSettings';
 import { useAuth } from '../context/AuthContext';
@@ -117,7 +118,7 @@ export function SettingsPage() {
   // routing conflict with HashRouter.
   type TabId =
     | 'profile' | 'appearance' | 'privacy' | 'notifications'
-    | 'voice' | 'screen-share' | 'soundboard' | 'security' | 'account';
+    | 'voice' | 'screen-share' | 'soundboard' | 'security' | 'devices' | 'account';
 
   const tabs: Array<{ id: TabId; label: string; Icon: typeof UsersIcon }> = [
     { id: 'profile',       label: t('app:settings.nav_profile',       { defaultValue: 'Profil' }),               Icon: UsersIcon },
@@ -128,6 +129,7 @@ export function SettingsPage() {
     { id: 'screen-share',  label: t('app:settings.nav_screen_share',  { defaultValue: 'Bildschirmfreigabe' }), Icon: MonitorShareIcon },
     { id: 'soundboard',    label: t('app:settings.nav_soundboard',    { defaultValue: 'Soundboard' }),          Icon: MusicIcon },
     { id: 'security',      label: t('app:settings.nav_security',      { defaultValue: 'Sicherheit' }),          Icon: LockIcon },
+    { id: 'devices',       label: t('app:settings.nav_devices',       { defaultValue: 'Geräte' }),             Icon: MonitorShareIcon },
     { id: 'account',       label: t('app:settings.nav_account',       { defaultValue: 'Konto' }),               Icon: SignOutIcon },
   ];
 
@@ -352,6 +354,17 @@ export function SettingsPage() {
               </Section>
             )}
 
+            {activeTab === 'devices' && (
+              <Section
+                title={t('app:settings.section_devices', { defaultValue: 'Geräte' })}
+                description={t('app:settings.section_devices_hint', {
+                  defaultValue: 'Übersicht aller Geräte, die mit deinem Konto angemeldet sind.',
+                })}
+              >
+                <DeviceListTab />
+              </Section>
+            )}
+
             {activeTab === 'account' && (
               <Section
                 title={t('app:settings.section_account_mgmt', { defaultValue: 'Konto verwalten' })}