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

apps/desktop/src/components/ConversationHeader.tsx

@@ -1,18 +1,27 @@
 import type { ConversationSummary } from '@chat-app/shared/chat';
 import type { PresenceState } from '@chat-app/shared/supabase';
+import { useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { useAuth } from '../context/AuthContext';
 import { useCall } from '../context/CallContext';
 import { useCallPresence } from '../lib/useCallPresence';
-import { InfoIcon, PhoneIcon, SpinnerIcon, UsersIcon } from './icons';
+import { Avatar } from './Avatar';
+import {
+  InfoIcon,
+  PhoneIcon,
+  SearchIcon,
+  SpinnerIcon,
+  UsersIcon,
+  VideoIcon,
+} from './icons';
 
 const PRESENCE_DOT: Record<PresenceState, string> = {
-  online: 'bg-emerald-400',
+  online: 'bg-emerald-500',
   idle: 'bg-amber-400',
   dnd: 'bg-rose-500',
   invisible: 'bg-neutral-500',
-  offline: 'bg-neutral-600',
+  offline: 'bg-neutral-400 dark:bg-neutral-600',
 };
 
 interface Props {
@@ -23,9 +32,7 @@ interface Props {
 
 export function ConversationHeader({ conversation, peerPresence, onInfoClick }: Props) {
   if (!conversation) {
-    return (
-      <header className="h-[57px] border-b border-white/5 px-6 py-3" aria-busy="true" />
-    );
+    return <header className="h-[57px] border-b border-line px-6 py-3" aria-busy="true" />;
   }
 
   return (
@@ -52,35 +59,43 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
   const isDm = conversation.type === 'dm';
   const title = isDm ? (conversation.peer?.displayName ?? '?') : (conversation.name ?? '?');
   const handle = isDm ? '@' + (conversation.peer?.username ?? '?') : '';
-  const letter = title.trim().charAt(0).toUpperCase() || '?';
+  const peerAvatar = isDm ? (conversation.peer?.avatarUrl ?? null) : (conversation.avatarUrl ?? null);
 
   // Hide presence when peer chose invisible — reciprocal privacy.
   const showPresence = isDm && peerPresence && peerPresence !== 'invisible';
   const presenceLabel = peerPresence ? t('app:presence.' + peerPresence) : '';
 
   return (
-    <header className="flex items-center gap-3 border-b border-white/5 px-6 py-3">
-      <div className="relative flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-brand-500/30 text-base font-semibold text-white ring-1 ring-brand-400/30">
-        {isDm ? letter : <UsersIcon className="h-5 w-5" />}
+    <header className="flex items-center gap-3 border-b border-line bg-surface-3 px-6 py-3">
+      <div className="relative">
+        {isDm ? (
+          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" />
+        ) : peerAvatar ? (
+          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" />
+        ) : (
+          <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/20 text-accent">
+            <UsersIcon className="h-5 w-5" />
+          </div>
+        )}
         {showPresence && peerPresence && (
           <span
             aria-hidden="true"
             className={
-              'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-ink-950 ' +
+              'absolute -bottom-0.5 -right-0.5 h-3 w-3 rounded-full ring-2 ring-surface-3 ' +
               PRESENCE_DOT[peerPresence]
             }
           />
         )}
       </div>
       <div className="min-w-0 flex-1">
-        <p className="truncate font-display text-base font-semibold text-white">{title}</p>
-        <p className="truncate text-xs text-neutral-500">
+        <p className="truncate font-display text-base font-semibold text-fg">{title}</p>
+        <p className="truncate text-xs text-fg-muted">
           {isDm ? (
             <>
               <span>{handle}</span>
               {showPresence && (
                 <>
-                  <span className="mx-1.5 text-neutral-700">·</span>
+                  <span className="mx-1.5 text-fg-muted/50">·</span>
                   <span>{presenceLabel}</span>
                 </>
               )}
@@ -93,75 +108,132 @@ function HeaderBar({ conversation, peerPresence, onInfoClick }: HeaderBarProps)
         </p>
       </div>
 
-      <CallHeaderButton conversationId={conversation.id} />
+      <HeaderActionButton label={t('app:chats.search', { defaultValue: 'Suche' })} icon={SearchIcon} />
+      <CallHeaderButton conversationId={conversation.id} kind="audio" />
+      <CallHeaderButton conversationId={conversation.id} kind="video" />
       {!isDm && onInfoClick && (
-        <button
-          type="button"
+        <HeaderActionButton
+          label={t('app:group.info_title')}
+          icon={InfoIcon}
           onClick={onInfoClick}
-          aria-label={t('app:group.info_title')}
-          title={t('app:group.info_title')}
-          className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-neutral-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40"
-        >
-          <InfoIcon className="h-4 w-4" />
-        </button>
+        />
       )}
     </header>
   );
 }
 
-function CallHeaderButton({ conversationId }: { conversationId: string }) {
-  const { t } = useTranslation(['app']);
-  const { state, startCall } = useCall();
-  const busy = state.kind !== 'idle';
+interface HeaderActionButtonProps {
+  label: string;
+  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  onClick?: () => void;
+  disabled?: boolean;
+  tone?: 'default' | 'accent';
+}
+
+function HeaderActionButton({
+  label,
+  icon: Icon,
+  onClick,
+  disabled,
+  tone = 'default',
+}: HeaderActionButtonProps) {
+  const toneClass =
+    tone === 'accent'
+      ? 'text-accent hover:bg-accent/10'
+      : 'text-fg-muted hover:bg-surface-2 hover:text-fg';
   return (
     <button
       type="button"
-      onClick={() => void startCall(conversationId, 'audio')}
-      disabled={busy}
-      aria-label={t('app:call.start_audio')}
-      title={busy ? t('app:call.busy') : t('app:call.start_audio')}
-      className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg text-neutral-400 transition hover:bg-white/10 hover:text-brand-200 focus:outline-none focus-visible:ring-2 focus-visible:ring-brand-400/40 disabled:cursor-not-allowed disabled:opacity-50"
+      onClick={onClick}
+      disabled={disabled}
+      aria-label={label}
+      title={label}
+      className={
+        'flex h-9 w-9 cursor-pointer items-center justify-center rounded-lg transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 disabled:cursor-not-allowed disabled:opacity-50 ' +
+        toneClass
+      }
     >
-      <PhoneIcon className="h-4 w-4" />
+      <Icon className="h-4 w-4" />
     </button>
   );
 }
 
+function CallHeaderButton({
+  conversationId,
+  kind,
+}: {
+  conversationId: string;
+  kind: 'audio' | 'video';
+}) {
+  const { t } = useTranslation(['app']);
+  const { state, startCall } = useCall();
+  const busy = state.kind !== 'idle';
+  const label =
+    kind === 'video'
+      ? t('app:call.start_video', { defaultValue: 'Video-Anruf' })
+      : t('app:call.start_audio');
+  const Icon = kind === 'video' ? VideoIcon : PhoneIcon;
+  return (
+    <HeaderActionButton
+      label={busy ? t('app:call.busy') : label}
+      icon={Icon}
+      onClick={() => void startCall(conversationId, kind)}
+      disabled={busy}
+    />
+  );
+}
+
 function ActiveCallBanner({ conversationId }: { conversationId: string }) {
   const { t } = useTranslation(['app']);
   const { session } = useAuth();
-  const { state, joinActiveCall } = useCall();
+  const { state, joinActiveCall, lastCallConversationId, dismissLastCall } = useCall();
   const active = useCallPresence(conversationId);
 
   const myId = session?.user.id;
-  // Source of truth for "am I in this call" is the CallContext state, not
-  // presence — my own presence entry can lag behind the room join, which
-  // would otherwise make the banner flash while I'm already connected.
   const iAmIn =
     (state.kind === 'connected' ||
       state.kind === 'connecting' ||
       state.kind === 'outgoing') &&
     state.conversationId === conversationId;
 
-  // Only show banner when other people are in it and I'm not.
   const othersIn = active.filter((u) => u !== myId);
-  if (iAmIn || othersIn.length === 0) return null;
+  // Fallback signal: I just left this conv with peers still inside. Covers the
+  // brief window after hangup where presence may not have re-synced yet (the
+  // realtime channel can churn while ConversationHeader remounts).
+  const justLeft = state.kind === 'idle' && lastCallConversationId === conversationId;
 
+  // Once presence confirms the room is empty, drop the "just left" hint so the
+  // banner hides cleanly instead of sticking forever.
+  useEffect(() => {
+    if (!justLeft) return;
+    if (active.length === 0) return;
+    if (othersIn.length === 0) {
+      // Active reports only us (or something stale) — wait, then dismiss.
+      const id = window.setTimeout(() => dismissLastCall(), 3000);
+      return () => window.clearTimeout(id);
+    }
+    return undefined;
+  }, [justLeft, active.length, othersIn.length, dismissLastCall]);
+
+  if (iAmIn) return null;
+  if (othersIn.length === 0 && !justLeft) return null;
+
+  const count = Math.max(othersIn.length, justLeft ? 1 : 0);
   const busy = state.kind !== 'idle';
   return (
-    <div className="flex items-center gap-3 border-b border-emerald-500/20 bg-emerald-500/10 px-6 py-2.5 text-sm text-emerald-100">
-      <PhoneIcon className="h-4 w-4 text-emerald-300" />
+    <div className="flex items-center gap-3 border-b border-emerald-500/30 bg-emerald-500/10 px-6 py-2.5 text-sm text-emerald-700 dark:text-emerald-100">
+      <PhoneIcon className="h-4 w-4 text-emerald-600 dark:text-emerald-300" />
       <span className="flex-1">
         {t('app:call.active_in_conv', {
           defaultValue: 'Active call · {{count}} in room',
-          count: othersIn.length,
+          count,
         })}
       </span>
       <button
         type="button"
         onClick={() => void joinActiveCall(conversationId, 'audio')}
         disabled={busy}
-        className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-emerald-500/90 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40 disabled:cursor-not-allowed disabled:opacity-60"
+        className="inline-flex cursor-pointer items-center gap-1.5 rounded-md bg-emerald-600 px-3 py-1.5 text-xs font-semibold text-white transition hover:bg-emerald-500 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40 disabled:cursor-not-allowed disabled:opacity-60"
       >
         {busy ? (
           <SpinnerIcon className="h-3.5 w-3.5" />