feat: redesign + avatars + theme + call presence fixes (v0.6.0)

Visual: - Light/dark theme via ThemeContext + CSS vars - New design tokens (surface/fg/accent/line/etc.) across all pages - Reusable Avatar component (img + letter fallback) wired into UserBar, ConversationHeader, ChatsPage, FriendsPage, GroupInfoPanel, IncomingCallPanel Calls: - Split call UI: IncomingCallPanel, InCallPanel, CallControls, CallParticipantTile, ScreenShareViewer - Active speaker hook (useActiveSpeakers) - Fix: ActiveCallBanner stayed hidden after hangup while peers in room. - useCallPresence: bind presence callbacks only when we own subscribe (Supabase forbids .on() after .subscribe() on shared dedup'd channels) - useCallPresence: never removeChannel — channel is shared with CallContext so tearing it down on ConversationHeader unmount killed live tracking - ActiveCallBanner: lastCallConversationId fallback so banner shows instantly after hangup, auto-dismiss when room confirmed empty - Drop unused useAnyActiveCall Bump tauri version 0.5.0 -> 0.6.0
2026-04-20 00:26:19 +02:00
parent 0ca29952ba
commit 4db65993d5
33 changed files with 2459 additions and 1094 deletions
@@ -7,6 +7,7 @@ import {
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';

+import { Avatar } from '../components/Avatar';
 import { LockIcon } from '../components/icons';
 import { useAuth } from '../context/AuthContext';
 import { loadDevicePrivateKey, saveDevicePrivateKey } from '@chat-app/shared/auth';
@@ -75,9 +76,10 @@ export function SettingsPage() {
  }

  return (
-    <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
+    <div className="h-full bg-surface-3 text-fg">
+      <div className="mx-auto flex max-w-3xl flex-col gap-6 px-6 py-8">
      <header className="mb-2">
-        <h1 className="font-display text-2xl font-semibold tracking-tight text-white">
+        <h1 className="font-display text-2xl font-semibold tracking-tight text-fg">
          {t('app:settings.title')}
        </h1>
      </header>
@@ -96,7 +98,7 @@ export function SettingsPage() {
      {/* Appearance */}
      <Section title={t('app:settings.section_appearance')}>
        <SettingRow label={t('app:settings.language')}>
-          <div className="inline-flex rounded-lg border border-white/10 bg-ink-800 p-1">
+          <div className="inline-flex rounded-lg border border-line bg-surface-3 p-1">
            {SUPPORTED_LOCALES.map((locale) => {
              const active = (i18n.resolvedLanguage ?? i18n.language) === locale;
              return (
@@ -106,10 +108,10 @@ export function SettingsPage() {
                  disabled={busy}
                  onClick={() => void handleLocaleChange(locale)}
                  className={
-                    'cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+                    'cursor-pointer rounded-md px-3 py-1.5 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                    (active
-                      ? 'bg-brand-500/25 text-white ring-1 ring-brand-400/40'
-                      : 'text-neutral-400 hover:text-neutral-200')
+                      ? 'bg-accent text-accent-fg'
+                      : 'text-fg-muted hover:text-fg')
                  }
                >
                  {LOCALE_LABELS[locale]}
@@ -141,10 +143,10 @@ export function SettingsPage() {
      {/* Voice / Push-to-Talk + Audio Quality + E2EE */}
      <Section title={t('app:settings.section_voice', { defaultValue: 'Sprache' })}>
        <AudioQualityControls />
-        <div className="mt-3 border-t border-white/5 pt-3">
+        <div className="mt-3 border-t border-line pt-3">
          <PttControls />
        </div>
-        <div className="mt-3 border-t border-white/5 pt-3">
+        <div className="mt-3 border-t border-line pt-3">
          <CallE2EEControls />
        </div>
      </Section>
@@ -157,8 +159,8 @@ export function SettingsPage() {
      {/* Devices */}
      <Section title={t('app:settings.section_devices')}>
        {device && (
-          <div className="rounded-xl border border-emerald-500/20 bg-emerald-500/5 p-4">
-            <div className="flex items-center gap-2 text-sm font-semibold text-emerald-200">
+          <div className="rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-4">
+            <div className="flex items-center gap-2 text-sm font-semibold text-emerald-700 dark:text-emerald-200">
              <LockIcon className="h-4 w-4" />
              {t('app:settings.this_device')}
            </div>
@@ -177,11 +179,12 @@ export function SettingsPage() {
        <button
          type="button"
          onClick={() => void signOut()}
-          className="cursor-pointer rounded-lg border border-rose-500/30 bg-rose-500/10 px-4 py-2.5 text-sm font-semibold text-rose-200 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/50"
+          className="cursor-pointer rounded-lg border border-rose-500/40 bg-rose-500/10 px-4 py-2.5 text-sm font-semibold text-rose-600 transition hover:bg-rose-500/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-400/50 dark:text-rose-300"
        >
          {t('app:settings.sign_out')}
        </button>
      </Section>
+      </div>
    </div>
  );
 }
@@ -228,10 +231,10 @@ function PttControls() {
          type="button"
          onClick={() => setCapturing((v) => !v)}
          className={
-            'inline-flex min-w-[7rem] cursor-pointer items-center justify-center rounded-lg border px-3 py-1.5 text-xs font-mono font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+            'inline-flex min-w-[7rem] cursor-pointer items-center justify-center rounded-lg border px-3 py-1.5 text-xs font-mono font-semibold transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
            (capturing
-              ? 'border-brand-400 bg-brand-500/20 text-white animate-pulse'
-              : 'border-white/10 bg-ink-800 text-neutral-200 hover:bg-ink-700')
+              ? 'border-accent bg-accent/20 text-fg animate-pulse'
+              : 'border-line bg-surface-3 text-fg hover:brightness-95')
          }
        >
          {capturing
@@ -288,7 +291,7 @@ function AudioQualityControls() {
  return (
    <>
      <SettingRow label={t('app:settings.audio_quality', { defaultValue: 'Audio-Qualität' })}>
-        <div className="inline-flex rounded-lg border border-white/10 bg-ink-800 p-1">
+        <div className="inline-flex rounded-lg border border-line bg-surface-2 p-1">
          {AUDIO_QUALITY_ORDER.map((q) => {
            const active = cfg.quality === q;
            return (
@@ -297,10 +300,10 @@ function AudioQualityControls() {
                type="button"
                onClick={() => updateAudioSettings({ quality: q })}
                className={
-                  'cursor-pointer rounded-md px-3 py-1 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 ' +
+                  'cursor-pointer rounded-md px-3 py-1 text-xs font-medium transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                  (active
-                    ? 'bg-brand-500/25 text-white ring-1 ring-brand-400/40'
-                    : 'text-neutral-400 hover:text-neutral-200')
+                    ? 'bg-accent text-accent-fg'
+                    : 'text-fg-muted hover:text-fg')
                }
              >
                {labels[q]}
@@ -309,7 +312,7 @@ function AudioQualityControls() {
          })}
        </div>
      </SettingRow>
-      <div className="rounded-lg border border-white/5 bg-ink-900/40 p-3 text-[11px] text-neutral-400">
+      <div className="rounded-lg border border-line bg-surface-3 p-3 text-[11px] text-fg-muted">
        <div className="grid grid-cols-4 gap-3">
          <Stat label="Bitrate" value={params.bitrateKbps + ' kbps'} />
          <Stat label="Channels" value={params.stereo ? 'Stereo' : 'Mono'} />
@@ -317,7 +320,7 @@ function AudioQualityControls() {
          <Stat label="DSP" value={params.echoCancellation ? 'On' : 'Off'} />
        </div>
      </div>
-      <p className="text-xs text-neutral-500">
+      <p className="text-xs text-fg-muted">
        {cfg.quality === 'hifi'
          ? t('app:settings.audio_hifi_hint', {
              defaultValue:
@@ -346,10 +349,6 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {

  const userId = profile?.userId;
  const url = profile?.avatarUrl ?? null;
-  const letter = (profile?.displayName ?? profile?.username ?? '?')
-    .trim()
-    .charAt(0)
-    .toUpperCase() || '?';

  async function handleFile(file: File) {
    if (!userId) return;
@@ -389,27 +388,23 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {

  return (
    <div className="flex items-center gap-4">
-      <div className="relative h-16 w-16 overflow-hidden rounded-full bg-brand-500/30 ring-1 ring-brand-400/30">
-        {url ? (
-          <img src={url} alt="" className="h-full w-full object-cover" />
-        ) : (
-          <div className="flex h-full w-full items-center justify-center text-2xl font-semibold text-white">
-            {letter}
-          </div>
-        )}
-      </div>
+      <Avatar
+        url={url}
+        displayName={profile?.displayName ?? profile?.username}
+        className="h-16 w-16 text-2xl"
+      />

      <div className="flex flex-1 flex-col gap-1">
-        <div className="text-sm font-medium text-neutral-200">
+        <div className="text-sm font-medium text-fg">
          {t('app:settings.avatar', { defaultValue: 'Avatar' })}
        </div>
-        <div className="text-xs text-neutral-500">
+        <div className="text-xs text-fg-muted">
          {t('app:settings.avatar_hint', {
            defaultValue: 'Quadratisch, max 512×512, WebP. Sichtbar für deine Freunde.',
          })}
        </div>
        {error && (
-          <div className="text-xs text-rose-300">{error}</div>
+          <div className="text-xs text-rose-500 dark:text-rose-300">{error}</div>
        )}
      </div>

@@ -427,7 +422,7 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
        type="button"
        onClick={() => inputRef.current?.click()}
        disabled={busy || uploading}
-        className="cursor-pointer rounded-lg bg-brand-500/80 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-brand-400 disabled:cursor-not-allowed disabled:opacity-50"
+        className="cursor-pointer rounded-lg bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
      >
        {uploading
          ? t('app:settings.avatar_uploading', { defaultValue: 'Lade…' })
@@ -440,7 +435,7 @@ function AvatarControls({ patchProfile, busy }: AvatarControlsProps) {
          type="button"
          onClick={() => void handleRemove()}
          disabled={busy || uploading}
-          className="cursor-pointer rounded-lg border border-rose-500/30 bg-rose-500/10 px-3 py-1.5 text-xs font-semibold text-rose-200 transition hover:bg-rose-500/20 disabled:cursor-not-allowed disabled:opacity-50"
+          className="cursor-pointer rounded-lg 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-not-allowed disabled:opacity-50 dark:text-rose-300"
        >
          {t('app:settings.avatar_remove', { defaultValue: 'Entfernen' })}
        </button>
@@ -514,11 +509,11 @@ function DeviceKeyBackupControls() {
  }

  return (
-    <div className="mt-4 rounded-xl border border-white/10 bg-ink-900/40 p-4">
-      <div className="text-sm font-semibold text-white">
+    <div className="mt-4 rounded-xl border border-line bg-surface-3 p-4">
+      <div className="text-sm font-semibold text-fg">
        {t('app:settings.device_key_backup', { defaultValue: 'Geräteschlüssel-Backup' })}
      </div>
-      <p className="mt-1 text-xs text-neutral-400">
+      <p className="mt-1 text-xs text-fg-muted">
        {t('app:settings.device_key_backup_hint', {
          defaultValue:
            'Sichere deinen privaten Schlüssel passwortgeschützt, damit du auf neuen Geräten alte Nachrichten weiter lesen kannst.',
@@ -526,7 +521,7 @@ function DeviceKeyBackupControls() {
      </p>

      <div className="mt-4 space-y-2">
-        <div className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
+        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
          {t('app:settings.backup_export', { defaultValue: 'Export' })}
        </div>
        <div className="flex gap-2">
@@ -535,13 +530,13 @@ function DeviceKeyBackupControls() {
            value={exportPass}
            onChange={(e) => setExportPass(e.target.value)}
            placeholder={t('app:settings.backup_passphrase', { defaultValue: 'Passphrase (min 8)' })}
-            className="flex-1 rounded-lg border border-white/10 bg-ink-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-brand-400 focus:outline-none"
+            className="flex-1 rounded-lg border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
          />
          <button
            type="button"
            disabled={busy || exportPass.length < 8 || !canRun}
            onClick={() => void handleExport()}
-            className="cursor-pointer rounded-lg bg-brand-500/80 px-4 text-sm font-semibold text-white transition hover:bg-brand-400 disabled:cursor-not-allowed disabled:opacity-50"
+            className="cursor-pointer rounded-lg bg-accent px-4 text-sm font-semibold text-accent-fg transition hover:brightness-110 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {t('app:settings.backup_create', { defaultValue: 'Erstellen' })}
          </button>
@@ -552,13 +547,13 @@ function DeviceKeyBackupControls() {
            value={backupOut}
            onClick={(e) => (e.target as HTMLTextAreaElement).select()}
            rows={3}
-            className="w-full rounded-lg border border-emerald-500/30 bg-ink-950/60 p-2 font-mono text-[10px] text-emerald-200"
+            className="w-full rounded-lg border border-emerald-500/30 bg-emerald-500/5 p-2 font-mono text-[10px] text-emerald-700 dark:text-emerald-200"
          />
        )}
      </div>

-      <div className="mt-4 space-y-2 border-t border-white/5 pt-4">
-        <div className="text-xs font-semibold uppercase tracking-wide text-neutral-500">
+      <div className="mt-4 space-y-2 border-t border-line pt-4">
+        <div className="text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
          {t('app:settings.backup_import', { defaultValue: 'Import' })}
        </div>
        <textarea
@@ -568,7 +563,7 @@ function DeviceKeyBackupControls() {
          placeholder={t('app:settings.backup_blob_placeholder', {
            defaultValue: 'chatapp-backup-v1.…',
          })}
-          className="w-full rounded-lg border border-white/10 bg-ink-800 p-2 font-mono text-[11px] text-white placeholder-neutral-500 focus:border-brand-400 focus:outline-none"
+          className="w-full rounded-lg border border-line bg-surface-3 p-2 font-mono text-[11px] text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
        />
        <div className="flex gap-2">
          <input
@@ -576,13 +571,13 @@ function DeviceKeyBackupControls() {
            value={importPass}
            onChange={(e) => setImportPass(e.target.value)}
            placeholder={t('app:settings.backup_passphrase', { defaultValue: 'Passphrase' })}
-            className="flex-1 rounded-lg border border-white/10 bg-ink-800 px-3 py-2 text-sm text-white placeholder-neutral-500 focus:border-brand-400 focus:outline-none"
+            className="flex-1 rounded-lg border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none"
          />
          <button
            type="button"
            disabled={busy || !importBlob || !importPass || !canRun}
            onClick={() => void handleImport()}
-            className="cursor-pointer rounded-lg bg-emerald-500/80 px-4 text-sm font-semibold text-white transition hover:bg-emerald-400 disabled:cursor-not-allowed disabled:opacity-50"
+            className="cursor-pointer rounded-lg bg-emerald-600 px-4 text-sm font-semibold text-white transition hover:bg-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
          >
            {t('app:settings.backup_restore', { defaultValue: 'Wiederherstellen' })}
          </button>
@@ -593,7 +588,9 @@ function DeviceKeyBackupControls() {
        <p
          className={
            'mt-3 text-xs ' +
-            (msg.kind === 'ok' ? 'text-emerald-300' : 'text-rose-300')
+            (msg.kind === 'ok'
+              ? 'text-emerald-600 dark:text-emerald-300'
+              : 'text-rose-600 dark:text-rose-300')
          }
        >
          {msg.text}
@@ -619,7 +616,7 @@ function ScreenShareControls() {
          onChange={(e) =>
            updateScreenShareSettings({ preset: e.target.value as ScreenSharePreset })
          }
-          className="cursor-pointer rounded-lg border border-white/10 bg-ink-800 px-3 py-1.5 text-xs text-neutral-200 focus:border-brand-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
+          className="cursor-pointer rounded-lg border border-line bg-surface-3 px-3 py-1.5 text-xs text-fg focus:border-accent focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
        >
          {PRESET_ORDER.map((p) => (
            <option key={p} value={p}>
@@ -628,7 +625,7 @@ function ScreenShareControls() {
          ))}
        </select>
      </SettingRow>
-      <div className="rounded-lg border border-white/5 bg-ink-900/40 p-3 text-[11px] text-neutral-400">
+      <div className="rounded-lg border border-line bg-surface-3 p-3 text-[11px] text-fg-muted">
        <div className="grid grid-cols-3 gap-3">
          <Stat label="Bitrate (max)" value={formatBitrate(params.bitrateKbps)} />
          <Stat
@@ -638,7 +635,7 @@ function ScreenShareControls() {
          <Stat label="Framerate" value={params.framerate + ' fps'} />
        </div>
      </div>
-      <p className="text-xs text-neutral-500">
+      <p className="text-xs text-fg-muted">
        {t('app:settings.screen_share_hint', {
          defaultValue:
            'WebRTC passt Bitrate + Auflösung dynamisch an die Netzwerkqualität an (SVC/VP9). Die Werte sind Obergrenzen. Änderungen greifen beim nächsten Call.',
@@ -651,8 +648,8 @@ function ScreenShareControls() {
 function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div>
-      <div className="text-[10px] uppercase tracking-wide text-neutral-500">{label}</div>
-      <div className="mt-0.5 font-mono text-neutral-200">{value}</div>
+      <div className="text-[10px] uppercase tracking-[0.1em] text-fg-muted">{label}</div>
+      <div className="mt-0.5 font-mono text-fg">{value}</div>
    </div>
  );
 }
@@ -666,8 +663,8 @@ function formatBitrate(kbps: number): string {

 function Section({ title, children }: { title: string; children: React.ReactNode }) {
  return (
-    <section className="rounded-2xl border border-white/10 bg-ink-900/60 p-5 backdrop-blur-xl">
-      <h2 className="mb-4 text-xs font-semibold uppercase tracking-wide text-neutral-400">
+    <section className="rounded-2xl border border-line bg-surface-2 p-5">
+      <h2 className="mb-4 text-xs font-semibold uppercase tracking-[0.1em] text-fg-muted">
        {title}
      </h2>
      <div className="space-y-3">{children}</div>
@@ -678,10 +675,10 @@ function Section({ title, children }: { title: string; children: React.ReactNode
 function Row({ label, value, mono }: { label: string; value: string; mono?: boolean }) {
  return (
    <div className="flex items-center justify-between gap-4">
-      <dt className="text-sm text-neutral-500">{label}</dt>
+      <dt className="text-sm text-fg-muted">{label}</dt>
      <dd
        className={
-          'max-w-[60%] truncate text-right text-sm text-neutral-200 ' +
+          'max-w-[60%] truncate text-right text-sm text-fg ' +
          (mono ? 'font-mono text-xs' : '')
        }
        title={value}
@@ -695,7 +692,7 @@ function Row({ label, value, mono }: { label: string; value: string; mono?: bool
 function SettingRow({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <div className="flex items-center justify-between gap-4">
-      <span className="text-sm text-neutral-200">{label}</span>
+      <span className="text-sm text-fg">{label}</span>
      {children}
    </div>
  );
@@ -717,8 +714,8 @@ function Toggle({
  return (
    <label className="flex cursor-pointer items-start justify-between gap-4">
      <span className="min-w-0 flex-1">
-        <span className="block text-sm text-neutral-200">{label}</span>
-        {hint && <span className="mt-1 block text-xs text-neutral-500">{hint}</span>}
+        <span className="block text-sm text-fg">{label}</span>
+        {hint && <span className="mt-1 block text-xs text-fg-muted">{hint}</span>}
      </span>
      <span className="relative mt-0.5 inline-flex h-6 w-11 shrink-0">
        <input
@@ -728,8 +725,8 @@ function Toggle({
          onChange={(e) => onChange(e.target.checked)}
          className="peer sr-only"
        />
-        <span className="inline-block h-6 w-11 rounded-full bg-neutral-700 transition peer-checked:bg-brand-500/70 peer-disabled:opacity-50" />
-        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white transition peer-checked:translate-x-5" />
+        <span className="inline-block h-6 w-11 rounded-full bg-surface transition peer-checked:bg-accent peer-disabled:opacity-50" />
+        <span className="absolute left-0.5 top-0.5 h-5 w-5 rounded-full bg-white shadow transition peer-checked:translate-x-5" />
      </span>
    </label>
  );