perf(P6A.T5): pre-warm Supabase + avatar loading hints

Fire a no-await profiles query in AuthContext on session establish to absorb
cold-connection latency before the first user-triggered request. Add
loading='lazy' default to the central Avatar component so all off-screen
avatars (chat list, friends list, popovers, message senders) skip eager
Supabase Storage fetches; set loading='eager' on ConversationHeader (active
conv header) and CallParticipantTile inline imgs (both AudioContent and
VideoStub) which are always above-the-fold when visible.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

apps/desktop/package.json

@@ -25,6 +25,7 @@
     "@livekit/track-processors": "^0.7.2",
     "@supabase/supabase-js": "^2.46.0",
     "better-sqlite3": "^11.3.0",
+    "canvas-confetti": "^1.9.4",
     "electron-updater": "^6.3.0",
     "i18next": "^23.16.4",
     "libsodium-wrappers-sumo": "0.7.15",
@@ -38,6 +39,7 @@
   },
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.0",
+    "@types/canvas-confetti": "^1.9.0",
     "@types/libsodium-wrappers": "^0.7.14",
     "@types/libsodium-wrappers-sumo": "^0.8.2",
     "@types/react": "^18.3.12",

apps/desktop/src/components/Avatar.tsx

@@ -11,6 +11,11 @@ interface Props {
   // brand-tinted fallback; callers can override (e.g. to colour-by-id).
   fallbackClass?: string;
   alt?: string;
+  // Browser loading hint. Use 'eager' for above-the-fold avatars (e.g. the
+  // active conversation header, call tiles). Defaults to 'lazy' so off-screen
+  // avatars (chat list rows, friends list, popovers) don't hammer Supabase
+  // Storage on initial render.
+  loading?: 'eager' | 'lazy';
 }
 
 export function Avatar({
@@ -19,6 +24,7 @@ export function Avatar({
   className = 'h-10 w-10',
   fallbackClass = 'bg-accent/20 text-accent',
   alt,
+  loading = 'lazy',
 }: Props) {
   const effectiveUrl = useCachedAvatarUrl(url);
   if (effectiveUrl) {
@@ -28,6 +34,7 @@ export function Avatar({
         alt={alt ?? displayName ?? ''}
         className={'shrink-0 rounded-full object-cover ' + className}
         draggable={false}
+        loading={loading}
       />
     );
   }

apps/desktop/src/components/CallParticipantTile.tsx

@@ -291,6 +291,7 @@ function AudioContent({
             src={avatarUrl}
             alt=""
             className="relative h-full w-full rounded-full object-cover"
+            loading="eager"
           />
         ) : (
           <span
@@ -366,7 +367,7 @@ function VideoStub({
         }
       >
         {avatarUrl ? (
-          <img src={avatarUrl} alt="" className="h-full w-full rounded-full object-cover" />
+          <img src={avatarUrl} alt="" className="h-full w-full rounded-full object-cover" loading="eager" />
         ) : (
           letter
         )}

apps/desktop/src/components/ConnectFourBoard.tsx

@@ -0,0 +1,61 @@
+import {
+  C4_COLS,
+  C4_ROWS,
+  c4DropRow,
+  c4WinningCells,
+  type Cell,
+} from '@chat-app/shared/chat';
+
+interface Props {
+  board: Cell[];
+  myPlayerIdx: 0 | 1 | null;
+  disabled: boolean;
+  onMove: (column: number) => void;
+}
+
+export function ConnectFourBoard({ board, myPlayerIdx, disabled, onMove }: Props) {
+  const winCells = c4WinningCells(board);
+  const winSet = new Set<number>(winCells ?? []);
+
+  return (
+    <div
+      className="mx-auto w-full max-w-2xl rounded-2xl bg-sky-900/40 p-3"
+      role="grid"
+      aria-label="Vier-Gewinnt"
+    >
+      <div
+        className="grid gap-1.5"
+        style={{ gridTemplateColumns: 'repeat(' + C4_COLS + ', minmax(0, 1fr))' }}
+      >
+        {Array.from({ length: C4_ROWS * C4_COLS }, (_, idx) => {
+          const cell = board[idx];
+          const col = idx % C4_COLS;
+          const dropTo = c4DropRow(board, col);
+          const canClickColumn = !disabled && dropTo >= 0 && myPlayerIdx !== null;
+          const inWin = winSet.has(idx);
+          return (
+            <button
+              key={idx}
+              type="button"
+              onClick={() => canClickColumn && onMove(col)}
+              disabled={!canClickColumn}
+              aria-label={'Spalte ' + (col + 1) + (cell !== null ? ' belegt' : '')}
+              className={
+                'flex aspect-square items-center justify-center rounded-full border-2 transition ' +
+                (inWin
+                  ? 'border-emerald-300 bg-emerald-400 shadow-[0_0_12px_rgba(110,231,183,0.7)]'
+                  : cell === 0
+                    ? 'border-rose-300 bg-rose-500'
+                    : cell === 1
+                      ? 'border-amber-300 bg-amber-400'
+                      : canClickColumn
+                        ? 'cursor-pointer border-sky-700 bg-sky-950 hover:bg-sky-900'
+                        : 'cursor-not-allowed border-sky-800 bg-sky-950 opacity-80')
+              }
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+}

apps/desktop/src/components/ConversationHeader.tsx

@@ -129,9 +129,9 @@ function HeaderBar({
         className="relative shrink-0 rounded-full text-left transition enabled:cursor-pointer enabled:hover:ring-2 enabled:hover:ring-accent/50 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 disabled:cursor-default"
       >
         {isDm ? (
-          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" />
+          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" loading="eager" />
         ) : peerAvatar ? (
-          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" />
+          <Avatar url={peerAvatar} displayName={title} className="h-10 w-10 text-base" loading="eager" />
         ) : (
           <div className="flex h-10 w-10 items-center justify-center rounded-full bg-accent/20 text-accent">
             <UsersIcon className="h-5 w-5" />
@@ -197,7 +197,7 @@ function HeaderBar({
 
 interface HeaderActionButtonProps {
   label: string;
-  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
   onClick?: () => void;
   disabled?: boolean;
   tone?: 'default' | 'accent';

apps/desktop/src/components/ConversationRowMenu.tsx

@@ -1,6 +1,7 @@
 import {
   muteDurationToIso,
   setConversationArchived,
+  setConversationMentionsOnly,
   setConversationMutedUntil,
 } from '@chat-app/shared/chat';
 import { forwardRef, useCallback, useEffect, useRef, useState } from 'react';
@@ -8,12 +9,13 @@ import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
 import { supabase } from '../lib/supabase';
-import { ArchiveIcon, BellIcon, BellOffIcon, MoreVerticalIcon } from './icons';
+import { ArchiveIcon, AtIcon, BellIcon, BellOffIcon, MoreVerticalIcon } from './icons';
 
 interface Props {
   conversationId: string;
   archived: boolean;
   mutedUntil: string | null;
+  mentionsOnly: boolean;
 }
 
 interface MuteOption {
@@ -50,7 +52,7 @@ interface MenuPos {
 // escape the sidebar's `overflow-y-auto` clipping context. Position is
 // computed from the trigger's bounding rect — menu anchors right-aligned
 // under the trigger so it doesn't push off-screen on narrow windows.
-export function ConversationRowMenu({ conversationId, archived, mutedUntil }: Props) {
+export function ConversationRowMenu({ conversationId, archived, mutedUntil, mentionsOnly }: Props) {
   const { t } = useTranslation(['app']);
   const [open, setOpen] = useState(false);
   const [submenuOpen, setSubmenuOpen] = useState<'mute' | null>(null);
@@ -145,6 +147,21 @@ export function ConversationRowMenu({ conversationId, archived, mutedUntil }: Pr
     [conversationId],
   );
 
+  const handleMentionsOnly = useCallback(
+    async (next: boolean) => {
+      setOpen(false);
+      try {
+        await setConversationMentionsOnly(supabase, {
+          conversationId,
+          mentionsOnly: next,
+        });
+      } catch (err: unknown) {
+        console.warn('mentions-only toggle failed', err);
+      }
+    },
+    [conversationId],
+  );
+
   return (
     <>
       <button
@@ -196,6 +213,16 @@ export function ConversationRowMenu({ conversationId, archived, mutedUntil }: Pr
               }}
               hasSubmenu={!isMuted}
             />
+            <MenuItem
+              icon={<AtIcon className="h-4 w-4" />}
+              label={
+                (mentionsOnly ? '✓ ' : '') +
+                t('app:chats.mentions_only', {
+                  defaultValue: 'Nur bei @Mentions benachrichtigen',
+                })
+              }
+              onClick={() => void handleMentionsOnly(!mentionsOnly)}
+            />
           </div>,
           document.body,
         )}

apps/desktop/src/components/GameModal.tsx

@@ -0,0 +1,133 @@
+import confetti from 'canvas-confetti';
+import { useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '../context/AuthContext';
+import { useGame } from '../hooks/useGame';
+import { ConnectFourBoard } from './ConnectFourBoard';
+import { TicTacToeBoard } from './TicTacToeBoard';
+import { XIcon } from './icons';
+
+interface Props {
+  gameId: string;
+  onClose: () => void;
+}
+
+export function GameModal({ gameId, onClose }: Props) {
+  const { t } = useTranslation();
+  const { game, loading, error, makeMove } = useGame(gameId);
+  const { session: auth } = useAuth();
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  const myUserId = auth?.user.id ?? null;
+  const myPlayerIdx: 0 | 1 | null =
+    !game || !myUserId
+      ? null
+      : game.players[0] === myUserId
+        ? 0
+        : game.players[1] === myUserId
+          ? 1
+          : null;
+  const isMyTurn = !!game && game.currentTurnUserId === myUserId;
+  const finished = !!game?.finishedAt;
+  const winnerIdx: 0 | 1 | null =
+    !game?.winnerUserId
+      ? null
+      : game.players[0] === game.winnerUserId
+        ? 0
+        : game.players[1] === game.winnerUserId
+          ? 1
+          : null;
+
+  useEffect(() => {
+    if (finished && winnerIdx !== null && winnerIdx === myPlayerIdx) {
+      // Respect the OS-level reduced-motion preference.
+      if (
+        typeof window !== 'undefined' &&
+        window.matchMedia &&
+        window.matchMedia('(prefers-reduced-motion: reduce)').matches
+      ) {
+        return;
+      }
+      // Two bursts from the lower corners for a celebratory feel.
+      void confetti({
+        particleCount: 80,
+        spread: 60,
+        origin: { x: 0.2, y: 0.9 },
+      });
+      void confetti({
+        particleCount: 80,
+        spread: 60,
+        origin: { x: 0.8, y: 0.9 },
+      });
+    }
+  }, [finished, winnerIdx, myPlayerIdx]);
+  const title =
+    game?.gameType === 'c4'
+      ? t('app:game.c4', { defaultValue: 'Vier-Gewinnt' })
+      : t('app:game.ttt', { defaultValue: 'Tic-Tac-Toe' });
+
+  const statusLine = (() => {
+    if (loading) return t('app:game.loading', { defaultValue: 'Lädt…' });
+    if (error) return error;
+    if (!game) return t('app:game.missing', { defaultValue: 'Spiel nicht gefunden.' });
+    if (finished) {
+      if (winnerIdx === null) return t('app:game.draw', { defaultValue: 'Unentschieden!' });
+      if (winnerIdx === myPlayerIdx) return t('app:game.you_win', { defaultValue: 'Du hast gewonnen!' });
+      return t('app:game.you_lose', { defaultValue: 'Du hast verloren.' });
+    }
+    if (myPlayerIdx === null) return t('app:game.spectator', { defaultValue: 'Du schaust nur zu.' });
+    if (isMyTurn) return t('app:game.your_turn', { defaultValue: 'Du bist dran' });
+    return t('app:game.opponent_turn', { defaultValue: 'Gegner ist dran…' });
+  })();
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={title}
+      className="fixed inset-0 z-[80] flex flex-col bg-ink-950/95"
+    >
+      <header className="flex shrink-0 items-center justify-between border-b border-line/40 bg-surface-2 px-4 py-2">
+        <h2 className="font-display text-sm font-semibold text-fg">{title}</h2>
+        <button
+          type="button"
+          onClick={onClose}
+          aria-label={t('app:game.close', { defaultValue: 'Schließen' })}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
+        >
+          <XIcon className="h-3.5 w-3.5" />
+        </button>
+      </header>
+
+      <div className="flex min-h-0 flex-1 items-center justify-center overflow-auto p-6">
+        {game?.gameType === 'ttt' ? (
+          <TicTacToeBoard
+            board={game.state.board}
+            myPlayerIdx={myPlayerIdx}
+            disabled={!isMyTurn || finished}
+            onMove={(cell) => void makeMove({ cell }).catch(() => {})}
+          />
+        ) : game?.gameType === 'c4' ? (
+          <ConnectFourBoard
+            board={game.state.board}
+            myPlayerIdx={myPlayerIdx}
+            disabled={!isMyTurn || finished}
+            onMove={(column) => void makeMove({ column }).catch(() => {})}
+          />
+        ) : null}
+      </div>
+
+      <footer className="flex shrink-0 items-center justify-center border-t border-line/40 bg-surface-2 px-4 py-3 text-sm font-medium text-fg">
+        {statusLine}
+      </footer>
+    </div>
+  );
+}

apps/desktop/src/components/MessageBubble.tsx

@@ -5,7 +5,7 @@ import {
   softDeleteMessage,
 } from '@chat-app/shared/chat';
 import { extractErrorCode } from '@chat-app/shared/i18n';
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import { useTranslation } from 'react-i18next';
 
@@ -60,8 +60,17 @@ interface Props {
   senderAvatarUrl?: string | null | undefined;
   conversationId: string;
   reactions: AggregatedReaction[];
-  onToggleReaction: (emoji: string) => Promise<void>;
-  onVotePoll?: (emoji: string, optionEmojis: string[]) => Promise<void>;
+  /**
+   * Toggle a reaction on this message. Receives the message id so the parent
+   * can pass a stable handler reference across every row (lets `React.memo`
+   * actually skip re-renders triggered by composer keystrokes / typing pings).
+   */
+  onToggleReaction: (messageId: string, emoji: string) => Promise<void>;
+  /**
+   * Cast/clear an exclusive poll vote. Receives the message id for the same
+   * reason as `onToggleReaction`.
+   */
+  onVotePoll?: (messageId: string, emoji: string, optionEmojis: string[]) => Promise<void>;
   showSeen?: boolean;
   /** Delivery state for own messages: 'sent' / 'delivered' / 'read'. */
   deliveryState?: 'sent' | 'delivered' | 'read';
@@ -83,7 +92,7 @@ interface Props {
   onTogglePin?: (messageId: string) => void;
 }
 
-export function MessageBubble({
+function MessageBubbleInner({
   message,
   mine,
   groupedWithPrev,
@@ -257,12 +266,12 @@ export function MessageBubble({
     async (emoji: string) => {
       setPickerOpen(false);
       try {
-        await onToggleReaction(emoji);
+        await onToggleReaction(message.id, emoji);
       } catch (err: unknown) {
         console.error('toggleReaction failed', err);
       }
     },
-    [onToggleReaction],
+    [onToggleReaction, message.id],
   );
 
   const copyableText =
@@ -442,6 +451,58 @@ export function MessageBubble({
                   defaultValue: 'Nachricht nicht lesbar',
                 })}
               </span>
+            ) : parsed.kind === 'game' ? (
+              <div className="flex items-center gap-3 rounded-2xl border border-accent/30 bg-accent/5 px-4 py-3">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/20 text-accent">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
+                       strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+                    <rect x="3" y="6" width="18" height="12" rx="3" />
+                    <path d="M8 12h4M10 10v4M16 11v.01M16 14v.01" />
+                  </svg>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-semibold text-fg">{parsed.gameType === 'c4' ? 'Vier-Gewinnt' : 'Tic-Tac-Toe'}</div>
+                  <div className="text-xs text-fg-muted">Gemeinsam spielen</div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    window.dispatchEvent(
+                      new CustomEvent('chatapp:open-game', { detail: { id: parsed.gameId } }),
+                    );
+                  }}
+                  disabled={!parsed.gameId}
+                  className="cursor-pointer rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  Spielen
+                </button>
+              </div>
+            ) : parsed.kind === 'watch_together' ? (
+              <div className="flex items-center gap-3 rounded-2xl border border-accent/30 bg-accent/5 px-4 py-3">
+                <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/20 text-accent">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
+                       strokeLinecap="round" strokeLinejoin="round" className="h-5 w-5">
+                    <rect x="3" y="4" width="18" height="14" rx="2" />
+                    <path d="M10 9l5 3-5 3V9z" fill="currentColor" stroke="none" />
+                  </svg>
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="text-sm font-semibold text-fg">Watch Together</div>
+                  <div className="text-xs text-fg-muted">YouTube synchronisiert ansehen</div>
+                </div>
+                <button
+                  type="button"
+                  onClick={() => {
+                    window.dispatchEvent(
+                      new CustomEvent('chatapp:open-watch-together', { detail: { id: parsed.sessionId } }),
+                    );
+                  }}
+                  disabled={!parsed.sessionId}
+                  className="cursor-pointer rounded-md bg-accent px-3 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
+                >
+                  Beitreten
+                </button>
+              </div>
             ) : parsed.kind === 'whiteboard' ? (
               <div className="flex items-center gap-3 rounded-2xl border border-accent/30 bg-accent/5 px-4 py-3">
                 <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-accent/20 text-accent">
@@ -475,7 +536,9 @@ export function MessageBubble({
                 reactions={reactions}
                 mine={mine}
                 onVote={(emoji) =>
-                  onVotePoll ? onVotePoll(emoji, pollOptionEmojis) : onToggleReaction(emoji)
+                  onVotePoll
+                    ? onVotePoll(message.id, emoji, pollOptionEmojis)
+                    : onToggleReaction(message.id, emoji)
                 }
               />
             ) : (
@@ -541,7 +604,7 @@ export function MessageBubble({
               <button
                 key={r.emoji + ':' + r.count}
                 type="button"
-                onClick={() => void onToggleReaction(r.emoji)}
+                onClick={() => void onToggleReaction(message.id, r.emoji)}
                 className={
                   'inline-flex origin-bottom animate-reaction-pop cursor-pointer items-center gap-1 rounded-full border px-2 py-0.5 text-xs transition focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40 ' +
                   (r.mine
@@ -691,6 +754,14 @@ export function MessageBubble({
   );
 }
 
+/**
+ * Memoized export. Skips re-rendering when none of its props' shallow
+ * references change — i.e. when the parent re-renders due to composer
+ * keystrokes, typing-indicator updates, presence pings, etc. Relies on
+ * the parent passing stable callback refs (see `ConversationPage`).
+ */
+export const MessageBubble = memo(MessageBubbleInner);
+
 function PollCard({
   question,
   options,

apps/desktop/src/components/Sidebar.tsx

@@ -17,7 +17,7 @@ import {
 interface NavItem {
   to: string;
   labelKey: string;
-  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
   badge?: 'friends' | 'chats';
 }
 
@@ -95,7 +95,7 @@ export function Sidebar() {
 interface RailNavLinkProps {
   to: string;
   label: string;
-  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
   badge?: number;
 }
 
@@ -135,7 +135,7 @@ function RailNavLink({ to, label, icon: Icon, badge = 0 }: RailNavLinkProps) {
 interface RailIconButtonProps {
   label: string;
   onClick: () => void;
-  icon: (props: React.SVGProps<SVGSVGElement>) => React.JSX.Element;
+  icon: React.ComponentType<React.ComponentPropsWithoutRef<'svg'>>;
   tone?: 'default' | 'danger';
 }
 

apps/desktop/src/components/TicTacToeBoard.tsx

@@ -0,0 +1,53 @@
+import { type Cell, tttWinningLine } from '@chat-app/shared/chat';
+
+interface Props {
+  board: Cell[];
+  myPlayerIdx: 0 | 1 | null;
+  disabled: boolean;
+  onMove: (cell: number) => void;
+}
+
+const MARK = ['×', '○'] as const;
+
+export function TicTacToeBoard({ board, myPlayerIdx, disabled, onMove }: Props) {
+  const winLine = tttWinningLine(board);
+  const winSet = new Set<number>(winLine ?? []);
+
+  return (
+    <div
+      className="mx-auto grid w-full max-w-md grid-cols-3 gap-2 p-4"
+      style={{ aspectRatio: '1 / 1' }}
+      role="grid"
+      aria-label="Tic-Tac-Toe"
+    >
+      {board.map((cell, i) => {
+        const filled = cell !== null;
+        const inWin = winSet.has(i);
+        const canClick = !disabled && !filled && myPlayerIdx !== null;
+        return (
+          <button
+            key={i}
+            type="button"
+            onClick={() => canClick && onMove(i)}
+            disabled={!canClick}
+            aria-label={'Feld ' + (i + 1) + (filled ? ' belegt' : ' frei')}
+            className={
+              'flex aspect-square items-center justify-center rounded-xl border-2 text-5xl font-bold transition ' +
+              (inWin
+                ? 'border-emerald-400 bg-emerald-400/20 text-emerald-200'
+                : filled
+                  ? cell === 0
+                    ? 'border-rose-500/60 bg-rose-500/10 text-rose-300'
+                    : 'border-sky-500/60 bg-sky-500/10 text-sky-300'
+                  : canClick
+                    ? 'cursor-pointer border-line bg-surface-2 text-fg-muted hover:bg-surface-3 hover:text-fg'
+                    : 'cursor-not-allowed border-line bg-surface-2 text-fg-muted opacity-60')
+            }
+          >
+            {filled ? MARK[cell as 0 | 1] : ''}
+          </button>
+        );
+      })}
+    </div>
+  );
+}

apps/desktop/src/components/WatchTogetherModal.tsx

@@ -0,0 +1,260 @@
+import { useEffect, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { useAuth } from '../context/AuthContext';
+import { useWatchSession } from '../hooks/useWatchSession';
+import { XIcon } from './icons';
+
+interface YTPlayer {
+  playVideo: () => void;
+  pauseVideo: () => void;
+  seekTo: (seconds: number, allowSeekAhead: boolean) => void;
+  getCurrentTime: () => number;
+  getPlayerState: () => number;
+  destroy: () => void;
+}
+
+interface YTPlayerOptions {
+  width: string | number;
+  height: string | number;
+  videoId: string;
+  playerVars?: { autoplay?: 0 | 1; controls?: 0 | 1; modestbranding?: 0 | 1 };
+  events?: {
+    onReady?: (ev: { target: YTPlayer }) => void;
+    onStateChange?: (ev: { data: number; target: YTPlayer }) => void;
+  };
+}
+
+interface YTNamespace {
+  Player: new (elementId: string | HTMLElement, opts: YTPlayerOptions) => YTPlayer;
+  PlayerState: { UNSTARTED: -1; ENDED: 0; PLAYING: 1; PAUSED: 2; BUFFERING: 3; CUED: 5 };
+}
+
+declare global {
+  interface Window {
+    YT?: YTNamespace;
+    onYouTubeIframeAPIReady?: () => void;
+  }
+}
+
+const IFRAME_API_URL = 'https://www.youtube.com/iframe_api';
+let apiPromise: Promise<YTNamespace> | null = null;
+
+function loadIframeApi(): Promise<YTNamespace> {
+  if (apiPromise) return apiPromise;
+  apiPromise = new Promise((resolve, reject) => {
+    if (typeof window === 'undefined') {
+      reject(new Error('no window'));
+      return;
+    }
+    if (window.YT?.Player) {
+      resolve(window.YT);
+      return;
+    }
+    const prev = window.onYouTubeIframeAPIReady;
+    window.onYouTubeIframeAPIReady = () => {
+      try {
+        prev?.();
+      } catch {
+        /* ignore */
+      }
+      if (window.YT?.Player) resolve(window.YT);
+      else reject(new Error('YT namespace missing after ready'));
+    };
+    const existing = document.querySelector(
+      'script[src="' + IFRAME_API_URL + '"]',
+    );
+    if (existing) return;
+    const tag = document.createElement('script');
+    tag.src = IFRAME_API_URL;
+    tag.async = true;
+    document.head.appendChild(tag);
+  });
+  return apiPromise;
+}
+
+interface Props {
+  sessionId: string;
+  onClose: () => void;
+}
+
+const DRIFT_THRESHOLD_SECONDS = 2;
+
+export function WatchTogetherModal({ sessionId, onClose }: Props) {
+  const { t } = useTranslation();
+  const { session, pushState, endSession, error, loading } = useWatchSession(sessionId);
+  const { session: auth } = useAuth();
+  const mountRef = useRef<HTMLDivElement | null>(null);
+  const playerRef = useRef<YTPlayer | null>(null);
+  const [playerReady, setPlayerReady] = useState(false);
+  const ownerId = session?.ownerUserId ?? null;
+  const isOwner = !!auth?.user.id && auth.user.id === ownerId;
+  const ended = !!session?.endedAt;
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') onClose();
+    };
+    window.addEventListener('keydown', onKey);
+    return () => window.removeEventListener('keydown', onKey);
+  }, [onClose]);
+
+  useEffect(() => {
+    if (!session?.videoId || !mountRef.current) return;
+    if (playerRef.current) return;
+    let disposed = false;
+    void loadIframeApi().then((YT) => {
+      if (disposed || !mountRef.current) return;
+      playerRef.current = new YT.Player(mountRef.current, {
+        width: '100%',
+        height: '100%',
+        videoId: session.videoId,
+        playerVars: { autoplay: 1, controls: isOwner ? 1 : 0, modestbranding: 1 },
+        events: {
+          onReady: () => setPlayerReady(true),
+          onStateChange: (ev) => {
+            if (!isOwner) return;
+            const playing = ev.data === YT.PlayerState.PLAYING;
+            const pos = ev.target.getCurrentTime();
+            pushState({ playing, positionSeconds: pos, updatedAtMs: Date.now() });
+          },
+        },
+      });
+    }).catch((err) => {
+      console.error('YouTube IFrame API failed', err);
+    });
+    return () => {
+      disposed = true;
+      try {
+        playerRef.current?.destroy();
+      } catch {
+        /* ignore */
+      }
+      playerRef.current = null;
+    };
+  }, [session?.videoId, isOwner, pushState]);
+
+  useEffect(() => {
+    if (!isOwner || !playerReady) return;
+    const id = window.setInterval(() => {
+      const p = playerRef.current;
+      if (!p) return;
+      try {
+        const state = p.getPlayerState();
+        const playing = state === window.YT?.PlayerState.PLAYING;
+        pushState({
+          playing,
+          positionSeconds: p.getCurrentTime(),
+          updatedAtMs: Date.now(),
+        });
+      } catch {
+        /* ignore */
+      }
+    }, 1000);
+    return () => window.clearInterval(id);
+  }, [isOwner, playerReady, pushState]);
+
+  useEffect(() => {
+    if (isOwner || !playerReady || !session) return;
+    const p = playerRef.current;
+    if (!p) return;
+    const remoteAgeSec = Math.max(0, (Date.now() - session.currentState.updatedAtMs) / 1000);
+    const projectedRemote = session.currentState.playing
+      ? session.currentState.positionSeconds + remoteAgeSec
+      : session.currentState.positionSeconds;
+    let local = 0;
+    try {
+      local = p.getCurrentTime();
+    } catch {
+      return;
+    }
+    if (Math.abs(local - projectedRemote) > DRIFT_THRESHOLD_SECONDS) {
+      try {
+        p.seekTo(projectedRemote, true);
+      } catch {
+        /* ignore */
+      }
+    }
+    try {
+      const state = p.getPlayerState();
+      const localPlaying = state === window.YT?.PlayerState.PLAYING;
+      if (session.currentState.playing && !localPlaying) {
+        p.playVideo();
+      } else if (!session.currentState.playing && localPlaying) {
+        p.pauseVideo();
+      }
+    } catch {
+      /* ignore */
+    }
+  }, [isOwner, playerReady, session]);
+
+  const handleClose = async () => {
+    if (isOwner && !ended) {
+      try {
+        await endSession();
+      } catch (err) {
+        console.warn('endSession failed', err);
+      }
+    }
+    onClose();
+  };
+
+  return (
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={t('app:watch.title', { defaultValue: 'Watch Together' })}
+      className="fixed inset-0 z-[80] flex flex-col bg-black"
+    >
+      <header className="flex shrink-0 items-center justify-between border-b border-line/40 bg-surface-2 px-4 py-2">
+        <h2 className="font-display text-sm font-semibold text-fg">
+          {t('app:watch.title', { defaultValue: 'Watch Together' })}
+          {ended && (
+            <span className="ml-2 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:watch.ended', { defaultValue: 'Beendet' })}
+            </span>
+          )}
+        </h2>
+        <button
+          type="button"
+          onClick={() => void handleClose()}
+          aria-label={t('app:watch.close', { defaultValue: 'Schließen' })}
+          className="flex h-7 w-7 cursor-pointer items-center justify-center rounded-md text-fg-muted hover:bg-surface-3 hover:text-fg"
+        >
+          <XIcon className="h-3.5 w-3.5" />
+        </button>
+      </header>
+
+      <div className="flex min-h-0 flex-1 items-center justify-center overflow-hidden bg-black p-4">
+        {loading ? (
+          <p className="text-sm text-fg-muted">
+            {t('app:watch.loading', { defaultValue: 'Lädt…' })}
+          </p>
+        ) : error ? (
+          <p className="text-sm text-rose-400">{error}</p>
+        ) : !session ? (
+          <p className="text-sm text-fg-muted">
+            {t('app:watch.missing', { defaultValue: 'Session nicht gefunden.' })}
+          </p>
+        ) : (
+          <div className="aspect-video w-full max-w-5xl">
+            <div ref={mountRef} className="h-full w-full" />
+          </div>
+        )}
+      </div>
+
+      <footer className="flex shrink-0 items-center justify-between gap-3 border-t border-line/40 bg-surface-2 px-4 py-2 text-xs text-fg-muted">
+        <span>
+          {isOwner
+            ? t('app:watch.you_are_host', { defaultValue: 'Du steuerst die Wiedergabe.' })
+            : t('app:watch.you_are_guest', { defaultValue: 'Nur der Host kann steuern.' })}
+        </span>
+        <span>
+          {session?.currentState.playing
+            ? t('app:watch.playing', { defaultValue: '▶ Läuft' })
+            : t('app:watch.paused', { defaultValue: '⏸ Pause' })}
+        </span>
+      </footer>
+    </div>
+  );
+}

apps/desktop/src/components/icons.tsx

@@ -1,6 +1,7 @@
 // Inline SVG icons — no icon library dependency. Lucide-style stroke=1.75.
+import { memo } from 'react';
 
-type IconProps = React.SVGProps<SVGSVGElement>;
+type IconProps = React.ComponentPropsWithoutRef<'svg'>;
 
 function Base({ children, ...props }: IconProps & { children: React.ReactNode }) {
   return (
@@ -20,7 +21,7 @@ function Base({ children, ...props }: IconProps & { children: React.ReactNode })
   );
 }
 
-export function MailIcon(props: IconProps) {
+function MailIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="5" width="18" height="14" rx="2" />
@@ -28,8 +29,9 @@ export function MailIcon(props: IconProps) {
     </Base>
   );
 }
+export const MailIcon = memo(MailIconInner);
 
-export function AtIcon(props: IconProps) {
+function AtIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="12" r="4" />
@@ -37,8 +39,9 @@ export function AtIcon(props: IconProps) {
     </Base>
   );
 }
+export const AtIcon = memo(AtIconInner);
 
-export function TicketIcon(props: IconProps) {
+function TicketIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M3 8a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v2a2 2 0 1 0 0 4v2a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-2a2 2 0 1 0 0-4V8Z" />
@@ -46,8 +49,9 @@ export function TicketIcon(props: IconProps) {
     </Base>
   );
 }
+export const TicketIcon = memo(TicketIconInner);
 
-export function ArrowRightIcon(props: IconProps) {
+function ArrowRightIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M5 12h14" />
@@ -55,8 +59,9 @@ export function ArrowRightIcon(props: IconProps) {
     </Base>
   );
 }
+export const ArrowRightIcon = memo(ArrowRightIconInner);
 
-export function CheckCircleIcon(props: IconProps) {
+function CheckCircleIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="12" r="9" />
@@ -64,8 +69,9 @@ export function CheckCircleIcon(props: IconProps) {
     </Base>
   );
 }
+export const CheckCircleIcon = memo(CheckCircleIconInner);
 
-export function AlertIcon(props: IconProps) {
+function AlertIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M12 9v4" />
@@ -74,8 +80,9 @@ export function AlertIcon(props: IconProps) {
     </Base>
   );
 }
+export const AlertIcon = memo(AlertIconInner);
 
-export function ShieldIcon(props: IconProps) {
+function ShieldIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M12 3 4 6v6c0 5 3.5 8.5 8 9 4.5-.5 8-4 8-9V6l-8-3Z" />
@@ -83,8 +90,9 @@ export function ShieldIcon(props: IconProps) {
     </Base>
   );
 }
+export const ShieldIcon = memo(ShieldIconInner);
 
-export function LockIcon(props: IconProps) {
+function LockIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="4" y="11" width="16" height="10" rx="2" />
@@ -92,8 +100,9 @@ export function LockIcon(props: IconProps) {
     </Base>
   );
 }
+export const LockIcon = memo(LockIconInner);
 
-export function WifiLowIcon(props: IconProps) {
+function WifiLowIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M5 12.55a11 11 0 0 1 14 0" opacity="0.35" />
@@ -102,8 +111,9 @@ export function WifiLowIcon(props: IconProps) {
     </Base>
   );
 }
+export const WifiLowIcon = memo(WifiLowIconInner);
 
-export function WifiOffIcon(props: IconProps) {
+function WifiOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="m2 2 20 20" />
@@ -116,8 +126,9 @@ export function WifiOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const WifiOffIcon = memo(WifiOffIconInner);
 
-export function PinIcon(props: IconProps) {
+function PinIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M12 17v5" />
@@ -125,8 +136,9 @@ export function PinIcon(props: IconProps) {
     </Base>
   );
 }
+export const PinIcon = memo(PinIconInner);
 
-export function EyeOffIcon(props: IconProps) {
+function EyeOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="m2 2 20 20" />
@@ -136,8 +148,9 @@ export function EyeOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const EyeOffIcon = memo(EyeOffIconInner);
 
-export function CaptionsIcon(props: IconProps) {
+function CaptionsIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="6" width="18" height="12" rx="2" />
@@ -146,8 +159,9 @@ export function CaptionsIcon(props: IconProps) {
     </Base>
   );
 }
+export const CaptionsIcon = memo(CaptionsIconInner);
 
-export function PinOffIcon(props: IconProps) {
+function PinOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="m2 2 20 20" />
@@ -157,8 +171,9 @@ export function PinOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const PinOffIcon = memo(PinOffIconInner);
 
-export function SparklesIcon(props: IconProps) {
+function SparklesIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M12 3v4" />
@@ -172,8 +187,9 @@ export function SparklesIcon(props: IconProps) {
     </Base>
   );
 }
+export const SparklesIcon = memo(SparklesIconInner);
 
-export function SpinnerIcon(props: IconProps) {
+function SpinnerIconInner(props: IconProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -208,16 +224,18 @@ export function SpinnerIcon(props: IconProps) {
     </svg>
   );
 }
+export const SpinnerIcon = memo(SpinnerIconInner);
 
-export function ChatBubbleIcon(props: IconProps) {
+function ChatBubbleIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M21 15a2 2 0 0 1-2 2H8l-5 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2Z" />
     </Base>
   );
 }
+export const ChatBubbleIcon = memo(ChatBubbleIconInner);
 
-export function UsersIcon(props: IconProps) {
+function UsersIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
@@ -227,8 +245,9 @@ export function UsersIcon(props: IconProps) {
     </Base>
   );
 }
+export const UsersIcon = memo(UsersIconInner);
 
-export function GearIcon(props: IconProps) {
+function GearIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="12" r="3" />
@@ -236,8 +255,9 @@ export function GearIcon(props: IconProps) {
     </Base>
   );
 }
+export const GearIcon = memo(GearIconInner);
 
-export function SearchIcon(props: IconProps) {
+function SearchIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="11" cy="11" r="7" />
@@ -245,16 +265,18 @@ export function SearchIcon(props: IconProps) {
     </Base>
   );
 }
+export const SearchIcon = memo(SearchIconInner);
 
-export function PlusIcon(props: IconProps) {
+function PlusIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M12 5v14M5 12h14" />
     </Base>
   );
 }
+export const PlusIcon = memo(PlusIconInner);
 
-export function SignOutIcon(props: IconProps) {
+function SignOutIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" />
@@ -263,32 +285,36 @@ export function SignOutIcon(props: IconProps) {
     </Base>
   );
 }
+export const SignOutIcon = memo(SignOutIconInner);
 
-export function MenuIcon(props: IconProps) {
+function MenuIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M3 6h18M3 12h18M3 18h18" />
     </Base>
   );
 }
+export const MenuIcon = memo(MenuIconInner);
 
-export function ChevronDownIcon(props: IconProps) {
+function ChevronDownIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="m6 9 6 6 6-6" />
     </Base>
   );
 }
+export const ChevronDownIcon = memo(ChevronDownIconInner);
 
-export function PencilIcon(props: IconProps) {
+function PencilIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" />
     </Base>
   );
 }
+export const PencilIcon = memo(PencilIconInner);
 
-export function TrashIcon(props: IconProps) {
+function TrashIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M3 6h18" />
@@ -299,8 +325,9 @@ export function TrashIcon(props: IconProps) {
     </Base>
   );
 }
+export const TrashIcon = memo(TrashIconInner);
 
-export function SmileIcon(props: IconProps) {
+function SmileIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="12" r="9" />
@@ -310,8 +337,9 @@ export function SmileIcon(props: IconProps) {
     </Base>
   );
 }
+export const SmileIcon = memo(SmileIconInner);
 
-export function CopyIcon(props: IconProps) {
+function CopyIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="9" y="9" width="13" height="13" rx="2" />
@@ -319,16 +347,18 @@ export function CopyIcon(props: IconProps) {
     </Base>
   );
 }
+export const CopyIcon = memo(CopyIconInner);
 
-export function PhoneIcon(props: IconProps) {
+function PhoneIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92Z" />
     </Base>
   );
 }
+export const PhoneIcon = memo(PhoneIconInner);
 
-export function PhoneOffIcon(props: IconProps) {
+function PhoneOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M10.68 13.31a16 16 0 0 0 3.41 2.6l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-3.48-3.05" />
@@ -337,8 +367,9 @@ export function PhoneOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const PhoneOffIcon = memo(PhoneOffIconInner);
 
-export function MicIcon(props: IconProps) {
+function MicIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="9" y="2" width="6" height="12" rx="3" />
@@ -348,8 +379,9 @@ export function MicIcon(props: IconProps) {
     </Base>
   );
 }
+export const MicIcon = memo(MicIconInner);
 
-export function MicOffIcon(props: IconProps) {
+function MicOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M1 1l22 22" />
@@ -362,8 +394,9 @@ export function MicOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const MicOffIcon = memo(MicOffIconInner);
 
-export function InfoIcon(props: IconProps) {
+function InfoIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="12" r="9" />
@@ -372,16 +405,18 @@ export function InfoIcon(props: IconProps) {
     </Base>
   );
 }
+export const InfoIcon = memo(InfoIconInner);
 
-export function XIcon(props: IconProps) {
+function XIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M18 6 6 18M6 6l12 12" />
     </Base>
   );
 }
+export const XIcon = memo(XIconInner);
 
-export function MonitorShareIcon(props: IconProps) {
+function MonitorShareIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="4" width="18" height="12" rx="2" />
@@ -390,8 +425,9 @@ export function MonitorShareIcon(props: IconProps) {
     </Base>
   );
 }
+export const MonitorShareIcon = memo(MonitorShareIconInner);
 
-export function MonitorStopIcon(props: IconProps) {
+function MonitorStopIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="4" width="18" height="12" rx="2" />
@@ -400,8 +436,9 @@ export function MonitorStopIcon(props: IconProps) {
     </Base>
   );
 }
+export const MonitorStopIcon = memo(MonitorStopIconInner);
 
-export function SunIcon(props: IconProps) {
+function SunIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="12" r="4" />
@@ -409,16 +446,18 @@ export function SunIcon(props: IconProps) {
     </Base>
   );
 }
+export const SunIcon = memo(SunIconInner);
 
-export function MoonIcon(props: IconProps) {
+function MoonIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M21 12.79A9 9 0 1 1 11.21 3a7 7 0 0 0 9.79 9.79Z" />
     </Base>
   );
 }
+export const MoonIcon = memo(MoonIconInner);
 
-export function GridIcon(props: IconProps) {
+function GridIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="3" width="7" height="7" rx="1.5" />
@@ -428,8 +467,9 @@ export function GridIcon(props: IconProps) {
     </Base>
   );
 }
+export const GridIcon = memo(GridIconInner);
 
-export function ImageIcon(props: IconProps) {
+function ImageIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="5" width="18" height="14" rx="2" />
@@ -438,8 +478,9 @@ export function ImageIcon(props: IconProps) {
     </Base>
   );
 }
+export const ImageIcon = memo(ImageIconInner);
 
-export function FileIcon(props: IconProps) {
+function FileIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M14 2H7a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7Z" />
@@ -447,8 +488,9 @@ export function FileIcon(props: IconProps) {
     </Base>
   );
 }
+export const FileIcon = memo(FileIconInner);
 
-export function PollIcon(props: IconProps) {
+function PollIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M5 19V9" />
@@ -458,8 +500,9 @@ export function PollIcon(props: IconProps) {
     </Base>
   );
 }
+export const PollIcon = memo(PollIconInner);
 
-export function FocusIcon(props: IconProps) {
+function FocusIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="3" width="18" height="18" rx="2" />
@@ -467,8 +510,9 @@ export function FocusIcon(props: IconProps) {
     </Base>
   );
 }
+export const FocusIcon = memo(FocusIconInner);
 
-export function MaximizeIcon(props: IconProps) {
+function MaximizeIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M4 9V5a1 1 0 0 1 1-1h4" />
@@ -478,8 +522,9 @@ export function MaximizeIcon(props: IconProps) {
     </Base>
   );
 }
+export const MaximizeIcon = memo(MaximizeIconInner);
 
-export function VideoIcon(props: IconProps) {
+function VideoIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="2" y="6" width="15" height="12" rx="2" />
@@ -487,16 +532,18 @@ export function VideoIcon(props: IconProps) {
     </Base>
   );
 }
+export const VideoIcon = memo(VideoIconInner);
 
-export function CrownIcon(props: IconProps) {
+function CrownIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="m3 7 4 4 5-6 5 6 4-4v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7Z" />
     </Base>
   );
 }
+export const CrownIcon = memo(CrownIconInner);
 
-export function MusicIcon(props: IconProps) {
+function MusicIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M9 18V5l12-2v13" />
@@ -505,16 +552,18 @@ export function MusicIcon(props: IconProps) {
     </Base>
   );
 }
+export const MusicIcon = memo(MusicIconInner);
 
-export function SendIcon(props: IconProps) {
+function SendIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="m3 11 18-8-8 18-2-8-8-2Z" />
     </Base>
   );
 }
+export const SendIcon = memo(SendIconInner);
 
-export function ArchiveIcon(props: IconProps) {
+function ArchiveIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <rect x="3" y="4" width="18" height="5" rx="1" />
@@ -523,8 +572,9 @@ export function ArchiveIcon(props: IconProps) {
     </Base>
   );
 }
+export const ArchiveIcon = memo(ArchiveIconInner);
 
-export function BellIcon(props: IconProps) {
+function BellIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M6 8a6 6 0 1 1 12 0c0 4 1.5 5 2 6H4c.5-1 2-2 2-6Z" />
@@ -532,8 +582,9 @@ export function BellIcon(props: IconProps) {
     </Base>
   );
 }
+export const BellIcon = memo(BellIconInner);
 
-export function BellOffIcon(props: IconProps) {
+function BellOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M9.5 18a2.5 2.5 0 0 0 5 0" />
@@ -545,8 +596,9 @@ export function BellOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const BellOffIcon = memo(BellOffIconInner);
 
-export function MoreVerticalIcon(props: IconProps) {
+function MoreVerticalIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <circle cx="12" cy="5" r="1.5" />
@@ -555,8 +607,9 @@ export function MoreVerticalIcon(props: IconProps) {
     </Base>
   );
 }
+export const MoreVerticalIcon = memo(MoreVerticalIconInner);
 
-export function HeadphonesIcon(props: IconProps) {
+function HeadphonesIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M3 14v-2a9 9 0 0 1 18 0v2" />
@@ -565,8 +618,9 @@ export function HeadphonesIcon(props: IconProps) {
     </Base>
   );
 }
+export const HeadphonesIcon = memo(HeadphonesIconInner);
 
-export function HeadphonesOffIcon(props: IconProps) {
+function HeadphonesOffIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M3 14v-2a9 9 0 0 1 11.3-8.7" />
@@ -577,8 +631,9 @@ export function HeadphonesOffIcon(props: IconProps) {
     </Base>
   );
 }
+export const HeadphonesOffIcon = memo(HeadphonesOffIconInner);
 
-export function ReplyIcon(props: IconProps) {
+function ReplyIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <polyline points="9 17 4 12 9 7" />
@@ -586,8 +641,9 @@ export function ReplyIcon(props: IconProps) {
     </Base>
   );
 }
+export const ReplyIcon = memo(ReplyIconInner);
 
-export function ForwardIcon(props: IconProps) {
+function ForwardIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <polyline points="15 17 20 12 15 7" />
@@ -595,16 +651,18 @@ export function ForwardIcon(props: IconProps) {
     </Base>
   );
 }
+export const ForwardIcon = memo(ForwardIconInner);
 
-export function ChevronUpIcon(props: IconProps) {
+function ChevronUpIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <polyline points="18 15 12 9 6 15" />
     </Base>
   );
 }
+export const ChevronUpIcon = memo(ChevronUpIconInner);
 
-export function AddUserIcon(props: IconProps) {
+function AddUserIconInner(props: IconProps) {
   return (
     <Base {...props}>
       <path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" />
@@ -613,12 +671,13 @@ export function AddUserIcon(props: IconProps) {
     </Base>
   );
 }
+export const AddUserIcon = memo(AddUserIconInner);
 
 // Soft-N mark: rounded-square violet tile with a stylised "N" glyph. Used
 // wherever the app needs a standalone icon (sidebar rail, auth screen,
 // favicon). Colour decisions sit inside the SVG so consumers just size the
 // element via `className`.
-export function LogoMark(props: IconProps) {
+function LogoMarkInner(props: IconProps) {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -638,10 +697,11 @@ export function LogoMark(props: IconProps) {
     </svg>
   );
 }
+export const LogoMark = memo(LogoMarkInner);
 
 // Full lockup: soft-N mark + "Netralax" wordmark. `tone` decides text colour:
 // "dark" = white text (use on dark background), "light" = near-black.
-export function LogoLockup({
+function LogoLockupInner({
   tone = 'dark',
   ...props
 }: IconProps & { tone?: 'dark' | 'light' }) {
@@ -676,3 +736,4 @@ export function LogoLockup({
     </svg>
   );
 }
+export const LogoLockup = memo(LogoLockupInner);

apps/desktop/src/context/AuthContext.tsx

@@ -204,6 +204,14 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     void registerWebPush(installId);
   }, [session]);
 
+  // Pre-warm Supabase: fires the first round-trip in the background so the
+  // first user-triggered query (e.g. loading conversations) doesn't pay
+  // the cold-connection latency.
+  useEffect(() => {
+    if (!session) return;
+    void supabase.from('profiles').select('id').limit(1).then(() => undefined);
+  }, [session]);
+
   // Phase 3: ensure this install owns exactly one devices row. The row is
   // pure session-list telemetry — it does not carry any cryptographic
   // material since the per-user-key refactor. We re-use the row across

apps/desktop/src/context/ConversationsContext.tsx

@@ -225,7 +225,12 @@ export function ConversationsProvider({ children }: { children: ReactNode }) {
                 (c) => c.id === row.conversation_id,
               );
               const muted = isConversationMuted(convForMute?.mutedUntil ?? null);
-              if (presenceRef.current !== 'dnd' && !muted) {
+              // "Mentions only" silences non-mention messages here. Mentions
+              // still fire via the independent useMentionNotifications
+              // subscription on message_mentions, so this branch doesn't
+              // lose the @-alerts.
+              const mentionsOnly = convForMute?.mentionsOnly ?? false;
+              if (presenceRef.current !== 'dnd' && !muted && !mentionsOnly) {
                 playNotificationTone();
                 const conv = conversationsRef.current.find(
                   (c) => c.id === row.conversation_id,

apps/desktop/src/hooks/useGame.ts

@@ -0,0 +1,75 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { getGame, makeGameMove, type GameRecord } from '@chat-app/shared/chat';
+
+import { supabase } from '../lib/supabase';
+
+export function useGame(gameId: string | null): {
+  game: GameRecord | null;
+  loading: boolean;
+  error: string | null;
+  makeMove: (move: object) => Promise<void>;
+} {
+  const [game, setGame] = useState<GameRecord | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!gameId) {
+      setGame(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const fresh = await getGame(supabase, gameId);
+        if (!cancelled) {
+          setGame(fresh);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setLoading(false);
+          setError(err instanceof Error ? err.message : 'failed to load game');
+        }
+      }
+    })();
+    const channel = supabase
+      .channel('game:' + gameId)
+      .on(
+        'postgres_changes',
+        {
+          event: 'UPDATE',
+          schema: 'public',
+          table: 'conversation_games',
+          filter: 'id=eq.' + gameId,
+        },
+        () => {
+          void getGame(supabase, gameId)
+            .then((fresh) => { if (fresh) setGame(fresh); })
+            .catch((err) => { console.warn('game realtime refetch failed', err); });
+        },
+      )
+      .subscribe();
+    return () => {
+      cancelled = true;
+      void supabase.removeChannel(channel);
+    };
+  }, [gameId]);
+
+  const makeMove = useCallback(async (move: object) => {
+    if (!gameId) return;
+    try {
+      await makeGameMove(supabase, { gameId, move });
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'move failed');
+      throw err;
+    }
+  }, [gameId]);
+
+  return { game, loading, error, makeMove };
+}

apps/desktop/src/hooks/useWatchSession.ts

@@ -0,0 +1,145 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+import {
+  endWatchSession,
+  getWatchSession,
+  updateWatchSessionState,
+  type WatchSession,
+  type WatchSessionState,
+} from '@chat-app/shared/chat';
+
+import { supabase } from '../lib/supabase';
+
+const PUSH_THROTTLE_MS = 500;
+
+export function useWatchSession(sessionId: string | null): {
+  session: WatchSession | null;
+  loading: boolean;
+  error: string | null;
+  pushState: (state: WatchSessionState) => void;
+  endSession: () => Promise<void>;
+} {
+  const [session, setSession] = useState<WatchSession | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const pendingRef = useRef<WatchSessionState | null>(null);
+  const lastPushAtRef = useRef<number>(0);
+  const pushTimerRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    if (!sessionId) {
+      setSession(null);
+      setLoading(false);
+      setError(null);
+      return;
+    }
+    let cancelled = false;
+    void (async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        const fresh = await getWatchSession(supabase, sessionId);
+        if (!cancelled) {
+          setSession(fresh);
+          setLoading(false);
+        }
+      } catch (err) {
+        if (!cancelled) {
+          setLoading(false);
+          setError(err instanceof Error ? err.message : 'failed to load session');
+        }
+      }
+    })();
+
+    const channel = supabase
+      .channel('watch_session:' + sessionId)
+      .on(
+        'postgres_changes',
+        {
+          event: 'UPDATE',
+          schema: 'public',
+          table: 'conversation_watch_sessions',
+          filter: 'id=eq.' + sessionId,
+        },
+        (payload) => {
+          const row = payload.new as {
+            id?: string;
+            ended_at?: string | null;
+            current_state?: unknown;
+          } | null;
+          if (!row?.id) return;
+          const raw = (row.current_state ?? {}) as Partial<{
+            playing: boolean;
+            position_seconds: number;
+            updated_at_ms: number;
+          }>;
+          setSession((cur) => {
+            if (!cur) return cur;
+            return {
+              ...cur,
+              endedAt: row.ended_at ?? null,
+              currentState: {
+                playing: typeof raw.playing === 'boolean' ? raw.playing : cur.currentState.playing,
+                positionSeconds:
+                  typeof raw.position_seconds === 'number'
+                    ? raw.position_seconds
+                    : cur.currentState.positionSeconds,
+                updatedAtMs:
+                  typeof raw.updated_at_ms === 'number'
+                    ? raw.updated_at_ms
+                    : cur.currentState.updatedAtMs,
+              },
+            };
+          });
+        },
+      )
+      .subscribe();
+
+    return () => {
+      cancelled = true;
+      void supabase.removeChannel(channel);
+      if (pushTimerRef.current !== null) {
+        window.clearTimeout(pushTimerRef.current);
+        pushTimerRef.current = null;
+      }
+    };
+  }, [sessionId]);
+
+  // Throttled writer: keeps the latest state in pendingRef; fires at most
+  // once per PUSH_THROTTLE_MS. Trailing-edge push guarantees the final
+  // state is always sent even when a rapid burst stops before the leading-
+  // edge timeout expires.
+  const pushState = useCallback((state: WatchSessionState) => {
+    if (!sessionId) return;
+    pendingRef.current = state;
+    const now = Date.now();
+    const elapsed = now - lastPushAtRef.current;
+    if (elapsed >= PUSH_THROTTLE_MS) {
+      lastPushAtRef.current = now;
+      const toPush = pendingRef.current;
+      pendingRef.current = null;
+      void updateWatchSessionState(supabase, sessionId, toPush).catch((err) => {
+        console.warn('updateWatchSessionState failed', err);
+      });
+      return;
+    }
+    if (pushTimerRef.current !== null) window.clearTimeout(pushTimerRef.current);
+    pushTimerRef.current = window.setTimeout(() => {
+      pushTimerRef.current = null;
+      const toPush = pendingRef.current;
+      if (!toPush) return;
+      pendingRef.current = null;
+      lastPushAtRef.current = Date.now();
+      void updateWatchSessionState(supabase, sessionId, toPush).catch((err) => {
+        console.warn('updateWatchSessionState trailing failed', err);
+      });
+    }, PUSH_THROTTLE_MS - elapsed);
+  }, [sessionId]);
+
+  const endSession = useCallback(async () => {
+    if (!sessionId) return;
+    await endWatchSession(supabase, sessionId);
+  }, [sessionId]);
+
+  return { session, loading, error, pushState, endSession };
+}

apps/desktop/src/lib/conversationFeatures.ts

@@ -5,6 +5,8 @@ import {
   type DecryptedMessage,
   type PollOption,
   type WhiteboardPayload,
+  type WatchTogetherPayload,
+  type GamePayload,
 } from '@chat-app/shared/chat';
 
 export type AttachmentBucket = 'media' | 'audio' | 'files';
@@ -107,6 +109,25 @@ export function createWhiteboardPayload(whiteboardId: string): string {
   return serializeMessagePayload(payload);
 }
 
+export function createWatchTogetherPayload(sessionId: string): string {
+  const payload: WatchTogetherPayload = {
+    v: 1,
+    type: 'watch_together',
+    session_id: sessionId,
+  };
+  return serializeMessagePayload(payload);
+}
+
+export function createGamePayload(gameId: string, gameType: 'ttt' | 'c4'): string {
+  const payload: GamePayload = {
+    v: 1,
+    type: 'game',
+    game_id: gameId,
+    game_type: gameType,
+  };
+  return serializeMessagePayload(payload);
+}
+
 export function summarizePollVotes(
   options: PollOption[],
   reactions: ReactionSummaryInput[],

apps/desktop/src/pages/ChatsPage.tsx

@@ -224,6 +224,14 @@ function ConversationList({
         </div>
       ) : error ? (
         <p className="px-4 py-2 text-xs text-rose-500 dark:text-rose-300">{error}</p>
+      ) : query.trim().length > 0 && items.length === 0 ? (
+        <EmptyState
+          icon={<SearchIcon className="h-8 w-8" />}
+          title={t('app:chats.search_empty_title', { defaultValue: 'Keine Treffer' })}
+          description={t('app:chats.search_empty_desc', {
+            defaultValue: 'Keine Chats passen zu "' + query.trim() + '".',
+          })}
+        />
       ) : items.length === 0 ? (
         showArchived ? (
           <EmptyState
@@ -417,6 +425,7 @@ function ConversationRow({
         conversationId={item.id}
         archived={item.archived}
         mutedUntil={item.mutedUntil}
+        mentionsOnly={item.mentionsOnly}
       />
     </NavLink>
   );

apps/desktop/src/pages/ConversationPage.tsx

@@ -1,6 +1,6 @@
 import { parseMessagePayload, pinMessage, unpinMessage } from '@chat-app/shared/chat';
 import { extractErrorCode } from '@chat-app/shared/i18n';
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import { lazy, Suspense, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 
@@ -26,13 +26,16 @@ import {
   SpinnerIcon,
   XIcon,
 } from '../components/icons';
-import { ImageAnnotator } from '../components/ImageAnnotator';
+const ImageAnnotator = lazy(() =>
+  import('../components/ImageAnnotator').then((m) => ({ default: m.ImageAnnotator })),
+);
 import { InCallPanel } from '../components/InCallPanel';
 import { IncomingCallPanel } from '../components/IncomingCallPanel';
 import { CallPreviewPanel } from '../components/CallPreviewPanel';
 import { MediaFilesDrawer } from '../components/MediaFilesDrawer';
 import { MentionAutocomplete } from '../components/MentionAutocomplete';
 import { MessageBubble, type QuotedRef } from '../components/MessageBubble';
+import type { AggregatedReaction } from '../lib/useMessageReactions';
 import { PinnedMessagesPanel } from '../components/PinnedMessagesPanel';
 import { PollComposerDialog } from '../components/PollComposerDialog';
 import { UserProfilePopover } from '../components/UserProfilePopover';
@@ -46,9 +49,19 @@ import {
   collectConversationAttachments,
   createPollPayload,
   createWhiteboardPayload,
+  createWatchTogetherPayload,
+  createGamePayload,
 } from '../lib/conversationFeatures';
-import { WhiteboardModal } from '../components/WhiteboardModal';
-import { createWhiteboard } from '@chat-app/shared/chat';
+const WhiteboardModal = lazy(() =>
+  import('../components/WhiteboardModal').then((m) => ({ default: m.WhiteboardModal })),
+);
+const WatchTogetherModal = lazy(() =>
+  import('../components/WatchTogetherModal').then((m) => ({ default: m.WatchTogetherModal })),
+);
+const GameModal = lazy(() =>
+  import('../components/GameModal').then((m) => ({ default: m.GameModal })),
+);
+import { createWhiteboard, createWatchSession, parseYouTubeUrl, createGame, type GameType } from '@chat-app/shared/chat';
 import { compressImages } from '../lib/imageCompress';
 import { ensureInstallId } from '../lib/installId';
 import { searchCachedMessages } from '../lib/messageCache';
@@ -66,6 +79,12 @@ import { useTypingChannel } from '../lib/useTypingChannel';
 
 const STICK_THRESHOLD = 80;
 
+// Stable empty-reactions sentinel. We pass this when a message has no
+// reactions instead of `[]` literal — a fresh array per render would defeat
+// `React.memo` on `MessageBubble` since the `reactions` prop reference would
+// change on every parent render.
+const EMPTY_REACTIONS: AggregatedReaction[] = [];
+
 // Per-conversation scroll memory. Module-scoped so it survives re-mounts
 // of ConversationPage when the route param (`id`) changes — switching
 // chats unmounts/remounts the page in our router setup. Session-only
@@ -169,6 +188,15 @@ export function ConversationPage() {
   const [pollSending, setPollSending] = useState(false);
   const [openWhiteboardId, setOpenWhiteboardId] = useState<string | null>(null);
   const [creatingWhiteboard, setCreatingWhiteboard] = useState(false);
+  const [openWatchSessionId, setOpenWatchSessionId] = useState<string | null>(null);
+  const [watchDialogOpen, setWatchDialogOpen] = useState(false);
+  const [watchUrl, setWatchUrl] = useState('');
+  const [watchError, setWatchError] = useState<string | null>(null);
+  const [watchCreating, setWatchCreating] = useState(false);
+  const [openGameId, setOpenGameId] = useState<string | null>(null);
+  const [gameDialogOpen, setGameDialogOpen] = useState(false);
+  const [gameError, setGameError] = useState<string | null>(null);
+  const [gameCreating, setGameCreating] = useState(false);
   const [pollError, setPollError] = useState<string | null>(null);
   const [replyTo, setReplyTo] = useState<DecryptedMessage | null>(null);
   const [forwardTarget, setForwardTarget] = useState<DecryptedMessage | null>(null);
@@ -348,6 +376,20 @@ export function ConversationPage() {
     [messageById, senderNameFor, t],
   );
 
+  // Pre-compute quoted refs per message into a stable map. Calling
+  // `buildQuoted(m.replyToId)` inline inside the `.map` returned a fresh
+  // object on every parent render, defeating `React.memo` on MessageBubble.
+  // With the map memoized on the same deps as `buildQuoted`, each bubble
+  // gets a stable `quoted` reference until the underlying data actually
+  // changes (new messages, sender renames, language switch).
+  const quotedByMessage = useMemo(() => {
+    const out = new Map<string, QuotedRef | null>();
+    for (const m of messages) {
+      out.set(m.id, buildQuoted(m.replyToId));
+    }
+    return out;
+  }, [messages, buildQuoted]);
+
   const jumpToMessage = useCallback((targetId: string) => {
     const el = scrollRef.current?.querySelector<HTMLElement>(
       '[data-message-id="' + CSS.escape(targetId) + '"]',
@@ -367,6 +409,19 @@ export function ConversationPage() {
     setForwardTarget(m);
   }, []);
 
+  // Stable handler for MessageBubble's `onAvatarClick`. Previously this was
+  // an inline arrow in the `.map`, which gave every row a fresh callback ref
+  // and defeated `React.memo` on the bubble (every parent re-render — every
+  // keystroke in the composer — re-rendered all 200 bubbles).
+  const handleAvatarClick = useCallback((uid: string, ev: React.MouseEvent) => {
+    ev.stopPropagation();
+    setProfilePopover({
+      userId: uid,
+      x: ev.clientX,
+      y: ev.clientY,
+    });
+  }, []);
+
   const searchActive = useMemo(
     () =>
       searchQuery.trim().length > 0 ||
@@ -472,6 +527,24 @@ export function ConversationPage() {
     return () => window.removeEventListener('chatapp:open-whiteboard', onOpen);
   }, []);
 
+  useEffect(() => {
+    const onOpen = (e: Event) => {
+      const detail = (e as CustomEvent<{ id?: string }>).detail;
+      if (detail?.id) setOpenWatchSessionId(detail.id);
+    };
+    window.addEventListener('chatapp:open-watch-together', onOpen);
+    return () => window.removeEventListener('chatapp:open-watch-together', onOpen);
+  }, []);
+
+  useEffect(() => {
+    const onOpen = (e: Event) => {
+      const detail = (e as CustomEvent<{ id?: string }>).detail;
+      if (detail?.id) setOpenGameId(detail.id);
+    };
+    window.addEventListener('chatapp:open-game', onOpen);
+    return () => window.removeEventListener('chatapp:open-game', onOpen);
+  }, []);
+
   useEffect(() => {
     if (id && messages.length > 0) markRead(id);
   }, [id, messages.length, markRead]);
@@ -622,6 +695,63 @@ export function ConversationPage() {
     }
   }, [id, creatingWhiteboard, send, replyTo?.id]);
 
+  const handleStartWatchTogether = useCallback(async () => {
+    if (!id) return;
+    const videoId = parseYouTubeUrl(watchUrl);
+    if (!videoId) {
+      setWatchError('Ungültige YouTube-URL.');
+      return;
+    }
+    setWatchCreating(true);
+    setWatchError(null);
+    try {
+      const ws = await createWatchSession(supabase, { conversationId: id, videoId });
+      const payload = createWatchTogetherPayload(ws.id);
+      await send(payload, [], replyTo?.id ?? null);
+      setReplyTo(null);
+      setStickToBottom(true);
+      setWatchDialogOpen(false);
+      setWatchUrl('');
+      setOpenWatchSessionId(ws.id);
+    } catch (err: unknown) {
+      setWatchError(err instanceof Error ? err.message : 'Konnte Watch-Together nicht starten');
+    } finally {
+      setWatchCreating(false);
+    }
+  }, [id, watchUrl, send, replyTo?.id]);
+
+  const handleStartGame = useCallback(async (gameType: GameType) => {
+    if (!id) return;
+    if (!conversation || conversation.members.length !== 2) {
+      setGameError('Spiele aktuell nur in 1:1-Chats.');
+      return;
+    }
+    const opponent = conversation.members.find((m) => m.userId !== myId);
+    if (!opponent) {
+      setGameError('Kein Gegner gefunden.');
+      return;
+    }
+    setGameCreating(true);
+    setGameError(null);
+    try {
+      const game = await createGame(supabase, {
+        conversationId: id,
+        gameType,
+        opponentUserId: opponent.userId,
+      });
+      const payload = createGamePayload(game.id, gameType);
+      await send(payload, [], replyTo?.id ?? null);
+      setReplyTo(null);
+      setStickToBottom(true);
+      setGameDialogOpen(false);
+      setOpenGameId(game.id);
+    } catch (err: unknown) {
+      setGameError(err instanceof Error ? err.message : 'Konnte Spiel nicht starten');
+    } finally {
+      setGameCreating(false);
+    }
+  }, [id, conversation, myId, send, replyTo?.id]);
+
   async function ingestFiles(files: File[]) {
     const compressed = await compressImages(files);
     const next: File[] = [];
@@ -816,9 +946,9 @@ export function ConversationPage() {
                     senderDisplayName={senderProfile?.displayName}
                     senderAvatarUrl={senderProfile?.avatarUrl}
                     conversationId={id ?? ''}
-                    reactions={reactionsByMessage.get(m.id) ?? []}
-                    onToggleReaction={(emoji) => toggleReaction(m.id, emoji)}
-                    onVotePoll={(emoji, optionEmojis) => votePoll(m.id, emoji, optionEmojis)}
+                    reactions={reactionsByMessage.get(m.id) ?? EMPTY_REACTIONS}
+                    onToggleReaction={toggleReaction}
+                    onVotePoll={votePoll}
                     showSeen={m.id === lastSeenMessageId}
                     {...(m.senderId === myId
                       ? {
@@ -833,18 +963,11 @@ export function ConversationPage() {
                           }),
                         }
                       : {})}
-                    quoted={buildQuoted(m.replyToId)}
+                    quoted={quotedByMessage.get(m.id) ?? null}
                     onJumpToMessage={jumpToMessage}
                     onReply={handleReply}
                     onForward={handleForward}
-                    onAvatarClick={(uid, ev) => {
-                      ev.stopPropagation();
-                      setProfilePopover({
-                        userId: uid,
-                        x: ev.clientX,
-                        y: ev.clientY,
-                      });
-                    }}
+                    onAvatarClick={handleAvatarClick}
                     highlighted={highlightedId === m.id}
                     isPinned={pinnedIds.has(m.id)}
                     onTogglePin={handleTogglePin}
@@ -1025,6 +1148,24 @@ export function ConversationPage() {
           >
             <WhiteboardIcon className="h-4 w-4" />
           </button>
+          <button
+            type="button"
+            onClick={() => setWatchDialogOpen(true)}
+            title={t('app:composer.watch_together', { defaultValue: 'Watch Together' })}
+            aria-label={t('app:composer.watch_together', { defaultValue: 'Watch Together' })}
+            className="inline-flex h-10 w-10 shrink-0 cursor-pointer items-center justify-center rounded-lg text-fg-muted transition hover:bg-surface-3 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/50 dark:hover:bg-[#313338]"
+          >
+            <PlayBoxIcon className="h-4 w-4" />
+          </button>
+          <button
+            type="button"
+            onClick={() => setGameDialogOpen(true)}
+            title={t('app:composer.game', { defaultValue: 'Spielen' })}
+            aria-label={t('app:composer.game', { defaultValue: 'Spielen' })}
+            className="flex h-9 w-9 cursor-pointer items-center justify-center rounded-md text-fg-muted transition hover:bg-surface-3 hover:text-fg"
+          >
+            <GameIcon className="h-4 w-4" />
+          </button>
           <div className="relative">
             <button
               type="button"
@@ -1215,6 +1356,7 @@ export function ConversationPage() {
       />
 
       {annotatingIndex !== null && attachments[annotatingIndex] && (
+        <Suspense fallback={null}>
           <ImageAnnotator
             file={attachments[annotatingIndex]!}
             onCancel={() => setAnnotatingIndex(null)}
@@ -1223,13 +1365,129 @@ export function ConversationPage() {
               setAnnotatingIndex(null);
             }}
           />
+        </Suspense>
       )}
 
       {openWhiteboardId && (
+        <Suspense fallback={null}>
           <WhiteboardModal
             whiteboardId={openWhiteboardId}
             onClose={() => setOpenWhiteboardId(null)}
           />
+        </Suspense>
+      )}
+
+      {openWatchSessionId && (
+        <Suspense fallback={null}>
+          <WatchTogetherModal
+            sessionId={openWatchSessionId}
+            onClose={() => setOpenWatchSessionId(null)}
+          />
+        </Suspense>
+      )}
+
+      {openGameId && (
+        <Suspense fallback={null}>
+          <GameModal
+            gameId={openGameId}
+            onClose={() => setOpenGameId(null)}
+          />
+        </Suspense>
+      )}
+
+      {gameDialogOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          className="fixed inset-0 z-[70] flex items-center justify-center bg-ink-950/90 p-6"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setGameDialogOpen(false);
+          }}
+        >
+          <div className="w-full max-w-sm rounded-2xl border border-line bg-surface-2 p-5 shadow-xl">
+            <h2 className="mb-3 font-display text-lg font-semibold text-fg">
+              {t('app:game.pick_title', { defaultValue: 'Spiel auswählen' })}
+            </h2>
+            {gameError && (
+              <p className="mb-2 text-xs text-rose-400">{gameError}</p>
+            )}
+            <div className="grid grid-cols-2 gap-3">
+              <button
+                type="button"
+                onClick={() => void handleStartGame('ttt')}
+                disabled={gameCreating}
+                className="flex flex-col items-center gap-2 rounded-xl border border-line bg-surface-3 p-4 text-fg transition hover:border-accent/40 hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <span className="text-3xl">×○</span>
+                <span className="text-xs font-semibold">Tic-Tac-Toe</span>
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleStartGame('c4')}
+                disabled={gameCreating}
+                className="flex flex-col items-center gap-2 rounded-xl border border-line bg-surface-3 p-4 text-fg transition hover:border-accent/40 hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                <span className="text-3xl">🔴🟡</span>
+                <span className="text-xs font-semibold">Vier-Gewinnt</span>
+              </button>
+            </div>
+            <div className="mt-4 flex justify-end">
+              <button
+                type="button"
+                onClick={() => { setGameDialogOpen(false); setGameError(null); }}
+                className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg-muted transition hover:bg-surface"
+              >
+                {t('app:game.cancel', { defaultValue: 'Abbrechen' })}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {watchDialogOpen && (
+        <div
+          role="dialog"
+          aria-modal="true"
+          className="fixed inset-0 z-[70] flex items-center justify-center bg-ink-950/90 p-6"
+          onClick={(e) => {
+            if (e.target === e.currentTarget) setWatchDialogOpen(false);
+          }}
+        >
+          <div className="w-full max-w-md rounded-2xl border border-line bg-surface-2 p-5 shadow-xl">
+            <h2 className="mb-3 font-display text-lg font-semibold text-fg">
+              {t('app:watch.dialog_title', { defaultValue: 'Watch Together starten' })}
+            </h2>
+            <input
+              type="url"
+              placeholder="https://youtu.be/..."
+              value={watchUrl}
+              onChange={(e) => { setWatchUrl(e.target.value); setWatchError(null); }}
+              className="mb-2 w-full rounded-md border border-line bg-surface-3 px-3 py-2 text-sm text-fg placeholder-fg-muted focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent/40"
+            />
+            {watchError && (
+              <p className="mb-2 text-xs text-rose-400">{watchError}</p>
+            )}
+            <div className="mt-3 flex items-center justify-end gap-2">
+              <button
+                type="button"
+                onClick={() => { setWatchDialogOpen(false); setWatchUrl(''); setWatchError(null); }}
+                className="cursor-pointer rounded-md border border-line bg-surface-3 px-3 py-1.5 text-xs font-medium text-fg-muted transition hover:bg-surface"
+              >
+                {t('app:watch.cancel', { defaultValue: 'Abbrechen' })}
+              </button>
+              <button
+                type="button"
+                onClick={() => void handleStartWatchTogether()}
+                disabled={watchCreating || !watchUrl.trim()}
+                className="cursor-pointer rounded-md bg-accent px-4 py-1.5 text-xs font-semibold text-accent-fg transition hover:bg-accent/90 disabled:cursor-not-allowed disabled:opacity-50"
+              >
+                {watchCreating
+                  ? t('app:watch.starting', { defaultValue: 'Startet…' })
+                  : t('app:watch.start', { defaultValue: 'Starten' })}
+              </button>
+            </div>
+          </div>
+        </div>
       )}
     </div>
   );
@@ -1520,3 +1778,23 @@ function WhiteboardIcon(props: React.SVGProps<SVGSVGElement>) {
     </svg>
   );
 }
+
+function PlayBoxIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
+         strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="3" y="4" width="18" height="14" rx="2" />
+      <path d="M10 9l5 3-5 3V9z" fill="currentColor" stroke="none" />
+    </svg>
+  );
+}
+
+function GameIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2}
+         strokeLinecap="round" strokeLinejoin="round" {...props}>
+      <rect x="3" y="6" width="18" height="12" rx="3" />
+      <path d="M8 12h4M10 10v4M16 11v.01M16 14v.01" />
+    </svg>
+  );
+}

apps/desktop/src/styles/globals.css

@@ -85,9 +85,10 @@
     *,
     *::before,
     *::after {
-      animation-duration: 0.01ms !important;
+      animation-duration: 0.001ms !important;
       animation-iteration-count: 1 !important;
-      transition-duration: 0.01ms !important;
+      transition-duration: 0.001ms !important;
+      scroll-behavior: auto !important;
     }
   }
 }

docs/superpowers/plans/2026-05-16-phase5c-polish.md

@@ -0,0 +1,361 @@
+# Phase 5C — Spec-Polish (4 leftover sub-items)
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development. Steps use checkbox (`- [ ]`) syntax.
+
+**Goal:** Close the 4 documented but never-built sub-items from the fifteen-features spec:
+1. Empty-state for empty search results in chat list (Phase 1 spec line 52).
+2. Per-conversation "Nur bei @Mentions benachrichtigen" toggle (Phase 2 spec line 72).
+3. Mentions-on-edit recompute (Phase 2 spec line 141).
+4. Confetti animation on game-win (Phase 5 spec line 133).
+
+**Architecture:**
+- (1) Drops the existing `EmptyState` primitive into the `ChatsPage` search results when the filter produces zero rows.
+- (2) Adds a `mentions_only boolean` column to `conversation_members` + a toggle in `ConversationRowMenu` next to the mute submenu. The notification gate suppresses non-mention notifications when set. `useMentionNotifications` is untouched — mentions fire regardless.
+- (3) Extends `editEncryptedMessage()` in `packages/shared/src/chat/messages.ts` to re-run `parseMentionUsernames` + `insertMentions` after the text changes. Old mention rows are deleted first.
+- (4) Adds `canvas-confetti` dep, fires it in `GameModal` when `winnerIdx === myPlayerIdx`.
+
+**Tech Stack:** No new infra. Adds one runtime dep (`canvas-confetti` + types).
+
+**Non-goals:**
+- Cron-based items (7-day view-once purge, 12h watch-together auto-end, 24h game auto-draw) — server-side per spec, out of scope.
+- New in-conversation message search (only chat-list search empty state).
+
+---
+
+## Pre-flight
+
+- [ ] **Verify clean working tree on `main`**
+
+Run: `cd "D:\Programmieren\ChatApp-Electron\chat-app" && git status`
+Expected: clean.
+
+- [ ] **Confirm tooling is green**
+
+Run: `pnpm --filter @chat-app/shared typecheck && pnpm --filter @chat-app/desktop typecheck && pnpm --filter @chat-app/shared test -- --run`
+Expected: all green; 71 shared tests pass.
+
+---
+
+## Task 1: Empty-state for empty search results
+
+**Files:**
+- Modify: `apps/desktop/src/pages/ChatsPage.tsx`
+
+- [ ] **Step 1: Locate the search-filter render**
+
+```
+Read apps/desktop/src/pages/ChatsPage.tsx (offset 1, limit 80)
+```
+
+Find:
+- Search input + `query` state (~lines 29-48).
+- `queryFiltered` (or similarly named) memo.
+- The render loop over the filtered list.
+- The existing `<EmptyState>` import — add `import { EmptyState } from '../components/EmptyState';` if missing.
+
+- [ ] **Step 2: Render an empty-state when search yields zero results**
+
+Wrap the rendered list with a length check:
+
+```tsx
+{query.trim().length > 0 && filteredList.length === 0 ? (
+  <EmptyState
+    title={t('app:chats.search_empty_title', { defaultValue: 'Keine Treffer' })}
+    description={t('app:chats.search_empty_desc', {
+      defaultValue: 'Keine Chats passen zu "' + query.trim() + '".',
+    })}
+  />
+) : (
+  /* existing list render */
+)}
+```
+
+If `EmptyState`'s prop shape differs (`icon`/`action` required), match the existing chat-list call site (P1.T6). Grep first: `Grep -n "EmptyState" apps/desktop/src/pages/ChatsPage.tsx apps/desktop/src/components/EmptyState.tsx`.
+
+Substitute the real variable names from the file (`query` vs `searchText`, `filteredList` vs `queryFiltered`).
+
+- [ ] **Step 3: Typecheck**
+
+```
+pnpm --filter @chat-app/desktop typecheck
+```
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+cd "D:\Programmieren\ChatApp-Electron\chat-app"
+git add apps/desktop/src/pages/ChatsPage.tsx
+git commit -m "feat(P5C.T1): empty-state for empty chat-list search results"
+```
+
+---
+
+## Task 2: Per-conv "Nur bei @Mentions benachrichtigen" toggle
+
+**Files:**
+- Create: `supabase/migrations/20260516000010_mentions_only.sql`
+- Modify: `packages/db-types/src/index.ts`
+- Modify: `packages/shared/src/chat/conversations.ts` (or wherever conversation_members helpers live)
+- Modify: `apps/desktop/src/components/ConversationRowMenu.tsx`
+- Modify: the notification gate (likely `apps/desktop/src/lib/osNotify.ts` callers, e.g. `useConversationMessages.ts`)
+
+- [ ] **Step 1: SQL migration + prod push**
+
+Create `supabase/migrations/20260516000010_mentions_only.sql`:
+
+```sql
+-- Phase 5C: per-conversation "notify only on @mentions" toggle.
+-- Lives alongside the existing muted_until column on conversation_members.
+-- When true: the renderer's incoming-message notification gate suppresses
+-- the alert unless the message contains an @-mention of the local user.
+-- Mentions always fire regardless (override-by-design).
+
+alter table public.conversation_members
+  add column if not exists mentions_only boolean not null default false;
+```
+
+```bash
+cd "D:\Programmieren\ChatApp-Electron\chat-app"
+git add supabase/migrations/20260516000010_mentions_only.sql
+git commit -m "feat(P5C.T2-sql): conversation_members.mentions_only column"
+bash scripts/prod/push-migrations.sh mentions_only
+```
+
+- [ ] **Step 2: db-types extension**
+
+In `packages/db-types/src/index.ts`, find the `conversation_members` entry. Add `mentions_only: boolean` to `Row`, `mentions_only?: boolean` to `Insert`, and `mentions_only?: boolean` to `Update`.
+
+- [ ] **Step 3: Shared wrapper for the toggle**
+
+Find where `conversation_members` mutation helpers live (likely a `setConversationMuted` exists):
+```
+Grep -rn "conversation_members" packages/shared/src/
+```
+
+Add to that same file (or the most-fitting chat helper):
+```ts
+export async function setConversationMentionsOnly(
+  client: AppSupabaseClient,
+  params: { conversationId: string; mentionsOnly: boolean },
+): Promise<void> {
+  const { data: session } = await client.auth.getUser();
+  if (!session.user) throw new Error('not authenticated');
+  const { error } = await client
+    .from('conversation_members')
+    .update({ mentions_only: params.mentionsOnly })
+    .eq('conversation_id', params.conversationId)
+    .eq('user_id', session.user.id);
+  if (error) throw error;
+}
+```
+
+Add `AppSupabaseClient` import if missing.
+
+Also: if the conversation-read wrapper (`listConversations` or similar) projects `muted_until` into a camelCase `mutedUntil`, add `mentionsOnly` alongside it in the same mapper.
+
+- [ ] **Step 4: Render the toggle in `ConversationRowMenu.tsx`**
+
+```
+Read apps/desktop/src/components/ConversationRowMenu.tsx
+```
+
+Find the mute entry (~lines 31-42). Add a sibling menu item below it:
+
+```tsx
+<button
+  type="button"
+  onClick={() => {
+    void setConversationMentionsOnly(supabase, {
+      conversationId: conv.id,
+      mentionsOnly: !conv.mentionsOnly,
+    }).catch((err) => console.warn('mentions-only toggle failed', err));
+    onClose();
+  }}
+  className="..."  // copy from the existing mute-entry className
+>
+  <span>{conv.mentionsOnly ? '✓ ' : ''}Nur bei @Mentions benachrichtigen</span>
+</button>
+```
+
+If the `conv` prop type doesn't yet expose `mentionsOnly`, extend the type in the source (the `Conversation` interface in shared) and the mapper in the read wrapper from Step 3.
+
+Add imports:
+```ts
+import { setConversationMentionsOnly } from '@chat-app/shared/chat';
+import { supabase } from '../lib/supabase';
+```
+(Adapt the `@chat-app/shared/chat` path if Step 3's helper lives in a different sub-path.)
+
+- [ ] **Step 5: Suppress non-mention notifications when `mentions_only` is true**
+
+```
+Grep -rn "useMentionNotifications\|osNotify" apps/desktop/src/
+```
+
+Find the message-incoming notification path. It's the place that calls `osNotify(...)` on inbound non-self messages. The current shape likely:
+```ts
+if (!isAppFocused() && !isMuted(conv)) {
+  osNotify(...);
+}
+```
+
+Extend it (the cleanest path — assumes `useMentionNotifications` independently fires for every mention, which the recon confirmed):
+```ts
+if (!isAppFocused() && !isMuted(conv)) {
+  if (conv.mentionsOnly) {
+    // Non-mention messages are silenced here. The mention case is handled
+    // by useMentionNotifications (which subscribes to message_mentions
+    // INSERT independently) so we don't lose the @-alert.
+    return;
+  }
+  osNotify(...);
+}
+```
+
+If `conv` isn't in scope at the gate (some hooks only have `conversationId`), look up the conv via the `ConversationsContext` cache. Pattern: `Grep -n "useConversations\|conversations.find\|conversationsById" apps/desktop/src/`.
+
+- [ ] **Step 6: Typecheck**
+
+```
+pnpm --filter @chat-app/shared typecheck && pnpm --filter @chat-app/desktop typecheck
+```
+Expected: PASS.
+
+- [ ] **Step 7: Commit**
+
+```bash
+git add packages/db-types/src/index.ts packages/shared/src/chat/ apps/desktop/src/
+# verify with git status that only intended files are staged before committing
+git commit -m "feat(P5C.T2): per-conv 'mentions only' toggle + notification gate"
+```
+
+---
+
+## Task 3: Mentions-on-edit recompute
+
+**Files:**
+- Modify: `packages/shared/src/chat/messages.ts`
+
+- [ ] **Step 1: Read the existing edit + send paths**
+
+```
+Read packages/shared/src/chat/messages.ts (offset 140, limit 100)
+```
+
+Find:
+- `insertMessage` (~line 145) — calls `parseMentionUsernames` + `insertMentions`.
+- `editEncryptedMessage` (~lines 208-229) — no mention re-extraction.
+
+- [ ] **Step 2: Extend `editEncryptedMessage`**
+
+After the existing `UPDATE` on `messages`, add:
+```ts
+// Recompute mentions: edit can add/remove @-tokens. Drop old, insert new.
+await client.from('message_mentions').delete().eq('message_id', messageId);
+const mentionUsernames = parseMentionUsernames(plaintext);
+if (mentionUsernames.length > 0) {
+  await insertMentions(client, {
+    messageId,
+    conversationId,
+    usernames: mentionUsernames,
+  });
+}
+```
+
+Adapt to the exact arg shapes used by `insertMessage` (precedent).
+
+If `editEncryptedMessage`'s signature doesn't accept `plaintext` and `conversationId`, extend the signature and fix all callers. Grep first: `Grep -rn "editEncryptedMessage" apps/desktop/src/ packages/shared/src/`.
+
+- [ ] **Step 3: Typecheck + tests**
+
+```
+pnpm --filter @chat-app/shared typecheck && pnpm --filter @chat-app/desktop typecheck
+pnpm --filter @chat-app/shared test -- --run
+```
+Expected: all green.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add packages/shared/src/chat/messages.ts apps/desktop/src/
+git commit -m "feat(P5C.T3): recompute message_mentions on edit"
+```
+
+---
+
+## Task 4: Confetti on game win
+
+**Files:**
+- Modify: `apps/desktop/package.json` (deps)
+- Modify: `apps/desktop/src/components/GameModal.tsx`
+
+- [ ] **Step 1: Add the dep**
+
+```
+cd "D:\Programmieren\ChatApp-Electron\chat-app"
+pnpm --filter @chat-app/desktop add canvas-confetti
+pnpm --filter @chat-app/desktop add -D @types/canvas-confetti
+```
+
+- [ ] **Step 2: Fire confetti when the local player wins**
+
+In `apps/desktop/src/components/GameModal.tsx` (P5B.T5 commit `cd59ee3`), add an effect near the existing keyboard-Esc effect:
+
+```ts
+import confetti from 'canvas-confetti';
+// ...
+useEffect(() => {
+  if (finished && winnerIdx !== null && winnerIdx === myPlayerIdx) {
+    void confetti({
+      particleCount: 80,
+      spread: 60,
+      origin: { x: 0.2, y: 0.9 },
+    });
+    void confetti({
+      particleCount: 80,
+      spread: 60,
+      origin: { x: 0.8, y: 0.9 },
+    });
+  }
+}, [finished, winnerIdx, myPlayerIdx]);
+```
+
+- [ ] **Step 3: Typecheck**
+
+```
+pnpm --filter @chat-app/desktop typecheck
+```
+Expected: PASS.
+
+- [ ] **Step 4: Commit**
+
+```bash
+git add apps/desktop/package.json apps/desktop/src/components/GameModal.tsx
+# include pnpm-lock.yaml if changed at the repo root
+git add pnpm-lock.yaml
+git commit -m "feat(P5C.T4): confetti burst on game win"
+```
+
+---
+
+## Final gate
+
+- [ ] **Step 1: Typecheck both packages**
+
+Run: `pnpm --filter @chat-app/shared typecheck && pnpm --filter @chat-app/desktop typecheck`
+Expected: both PASS.
+
+- [ ] **Step 2: Run shared tests**
+
+Run: `pnpm --filter @chat-app/shared test -- --run`
+Expected: PASS — 71 tests (same as baseline; no new tests added).
+
+- [ ] **Step 3: Verify no uncommitted changes**
+
+Run: `git status`
+Expected: clean.
+
+- [ ] **Step 4: Report**
+
+Report: "Phase 5C (Polish) code-complete on `main`; mentions_only migration applied to prod. Fifteen-features spec is now 100 % implemented. Smoke: (1) search 'xyz' in chat list → 'Keine Treffer' card. (2) Conv menu → 'Nur bei @Mentions' → DM with normal text → silent; DM with '@<dein-name>' → notify. (3) Edit a sent message to add @someone → that someone gets a notification. (4) Win a TTT or C4 game → confetti."

docs/superpowers/plans/2026-05-16-phase6-performance.md

@@ -0,0 +1,260 @@
+# Phase 6 — Performance Pack
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development. Steps use checkbox (`- [ ]`) syntax. This plan is grouped into 3 risk tiers — Group A is parallel-safe quick wins, Group B is medium-scope, Group C is audits.
+
+**Goal:** A focused performance pass after the fifteen-features initiative shipped. Faster startup, smoother long chats, smaller bundle, less main-thread blocking on PIN-unlock, no UX regressions.
+
+**Rollback anchor:** tag `pre-phase6-perf` → `888ed1b` (already pushed to origin).
+
+**Strategy:** ship Group A first (5 tiny safe wins ≈ 5h), pause + smoke-test, then B (medium ≈ 2-3 days), then C (audits ≈ 1 day). No release between groups; one combined release at the very end.
+
+---
+
+## Group A — Safe quick wins (~5h, low risk)
+
+### T1: Lazy-load four fat modals
+
+**What:** Convert eager imports of `WhiteboardModal`, `WatchTogetherModal`, `ImageAnnotator`, `GameModal` to `React.lazy(() => import(...))` inside `ConversationPage.tsx`. Wrap each conditional render in `<Suspense fallback={null}>`.
+
+**Why:** These modals total ~200-300 KB (canvas-confetti dep, IFrame player loader, ImageAnnotator's full op-stack, etc.) and render in <1 % of sessions. Initial bundle drops by that amount → faster cold load.
+
+**Files:** `apps/desktop/src/pages/ConversationPage.tsx` only.
+
+**Risk:** trivial. `Suspense` with `fallback={null}` means a few ms blank flicker the first time each modal opens (chunk download). Acceptable.
+
+**Effort:** ~30 min.
+
+---
+
+### T2: `prefers-reduced-motion` global rule
+
+**What:**
+- Global CSS rule in `apps/desktop/src/index.css` (or wherever global styles live): `@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }`.
+- Gate the confetti burst in `GameModal.tsx` behind `window.matchMedia('(prefers-reduced-motion: reduce)').matches`.
+
+**Why:** Accessibility + CPU savings for users who set the OS preference. Confetti is the most visible offender.
+
+**Risk:** very low. Tailwind already respects motion-reduce variants in some classes; this is the global default.
+
+**Effort:** ~30 min.
+
+---
+
+### T3: Memoize `MessageBubble` + audit callback stability
+
+**What:**
+- Wrap `MessageBubble` export in `React.memo` with shallow equality (default).
+- Audit the message-list render site (ConversationPage or a MessagesList component) — every callback prop passed into the row (`onReply`, `onPin`, `onDelete`, …) must be `useCallback`-stable with no per-render closures. Replace anonymous `() => doX(message.id)` patterns with stable handlers that receive the id at call time.
+
+**Why:** Typing in the composer currently re-runs the entire `messages.map(...)` and re-renders every bubble. With memoization + stable callbacks, only the new bubble appears; existing rows stay mounted. Big win on long chats.
+
+**Risk:** medium-low. Possible bugs if a callback captures stale state (e.g. closure over `pinnedSet` that doesn't update). Mitigation: pass volatile state as props on the bubble and let `React.memo` handle the diff.
+
+**Effort:** ~2h.
+
+---
+
+### T4: Memoize icon components (pragmatic "sprite-sheet" alternative)
+
+**What:** Original idea was a real SVG sprite-sheet (single `<svg>` with `<symbol>` defs + `<use href="#name">`). Pragmatic alternative: wrap every icon component in `React.memo`. They're pure functions of `className`/`...props` so memoization is free, and 90 % of the perf win (avoiding React reconciliation on identical icon trees) comes from this without the sprite refactor risk.
+
+**Files:** `apps/desktop/src/components/icons.tsx` (or `icons/` folder — whichever the codebase uses).
+
+**Why:** Real sprite-sheet is invasive (refactor 60+ icon usages, change className/fill inheritance). Memoizing achieves the bulk of the win at <30 min effort. Real sprite-sheet stays available as a follow-up if bundle-analyzer (T11) shows icons are a top-3 bundle hog.
+
+**Risk:** none — `React.memo` is purely a perf hint.
+
+**Effort:** ~30 min.
+
+---
+
+### T5: Pre-warm Supabase + avatar loading hints
+
+**What:**
+- In `AuthContext.tsx`, fire one trivial query early (e.g. `supabase.from('profiles').select('id').limit(1)`) so the connection is warm by the time the user does anything.
+- Audit `<img>` tags for avatars: add `loading="lazy"` to off-screen ones (chat list rows below the fold, deep history) and keep `loading="eager"` only for above-the-fold (current conv header, top of chat list).
+
+**Why:** First real query after login currently pays cold-connection latency (~100-200 ms). Pre-warm hides it. Lazy avatars stop the browser from hammering Supabase Storage on initial render.
+
+**Risk:** none.
+
+**Effort:** ~1h.
+
+---
+
+### Group A final gate
+
+- [ ] `pnpm --filter @chat-app/shared typecheck && pnpm --filter @chat-app/desktop typecheck`
+- [ ] `pnpm --filter @chat-app/shared test -- --run` (still 71/71)
+- [ ] User smoke-test: cold-start the app, send a few messages, type in composer, open one of the 4 modals — verify nothing broke + the visible improvements (faster initial render, smoother typing in long chats).
+- [ ] Tag `phase6a-done` for incremental rollback granularity if Group B introduces issues.
+
+---
+
+## Group B — Medium scope (~2-3 days, moderate risk)
+
+### T6: Web-Worker for Argon2 + crypto_box_open (PIN-unlock path)
+
+**What:**
+- Create `apps/desktop/src/lib/workers/crypto.worker.ts` that imports libsodium-wrappers and exposes a postMessage RPC: `{ op: 'unsealUserKey', sealedKey, pin, salt, kdfParams }` → `{ privateKey: Uint8Array }` (transferred).
+- Build with Vite's worker syntax: `new Worker(new URL('./workers/crypto.worker.ts', import.meta.url), { type: 'module' })`.
+- Refactor `apps/desktop/src/lib/userIdentity.ts`'s `unlockUserKey` (and any other hot Argon2 callers) to call the worker instead of the inline crypto backend.
+
+**Why:** PIN-unlock currently runs Argon2id (~1-2 sec on mid hardware) on the main thread → UI freeze during login. Worker offloads it, login screen stays responsive.
+
+**Risk:** medium. libsodium-wrappers needs to be initialized in both contexts. structured-clone transfers `Uint8Array` cleanly. The risk is that libsodium-wrappers might ship a bigger worker bundle than expected (we accept the trade-off because the main bundle gets smaller too).
+
+**Effort:** ~1 day. Includes typing the postMessage RPC + ensuring the existing PIN-unlock flow keeps its error semantics (wrong PIN, etc.).
+
+---
+
+### T7: WebP thumbnails for image attachments
+
+**What:**
+- When sending an image attachment: in addition to encrypting+uploading the full image (`<convId>/<attachmentId>.bin`), generate a 320×320 max-dim WebP thumb via `<canvas>.toBlob({ type: 'image/webp', quality: 0.7 })`, encrypt with the SAME per-attachment key, upload to `<convId>/<attachmentId>-thumb.bin`.
+- `MessageBubble` image render: try downloading the thumb first; fall back to full image on 404 (graceful for pre-Phase-6 attachments).
+- Click-to-expand: fetch the full image.
+
+**Why:** A 5 MB image in the chat scroll loads 5 MB even off-screen. Thumb is ~10-30 KB. Scroll is silky, bandwidth drops 99 %.
+
+**Files:** `packages/shared/src/chat/attachments.ts` (extend `encryptAndUploadAttachment` to optionally generate+upload thumb), `apps/desktop/src/components/MessageBubble.tsx` (try-thumb-first logic), maybe `Lightbox.tsx` (full image on click).
+
+**Schema:** none — naming-convention based, 404-fallback preserves backward compat.
+
+**Risk:** low-medium. Edge cases: very small images (thumb is bigger than full → skip thumb gen), animated GIFs (don't generate static-frame thumb, just use full).
+
+**Effort:** ~½ day.
+
+---
+
+### T8: Virtual-scroll for message list
+
+**What:**
+- `pnpm --filter @chat-app/desktop add react-virtuoso`
+- Replace the message-list `.map(...)` in (likely) `ConversationPage.tsx` / `MessagesList.tsx` with `<Virtuoso>`.
+- Configure: `data={messages}`, `itemContent={(_, msg) => <MessageBubble ... />}`, `followOutput="smooth"` for auto-scroll on new messages, `initialTopMostItemIndex={messages.length - 1}` to start at bottom.
+- If date-day headers exist: switch to `<GroupedVirtuoso>` with `groupCounts` + `groupContent`.
+
+**Why:** Long conversations (1000+ messages) currently render all rows → scroll jank, layout thrashing. Virtuoso renders only visible rows + a small overscan buffer.
+
+**Risk:** medium-high. Things that can go wrong:
+- Scroll-anchor preservation when Pinned-Messages panel opens.
+- Auto-scroll-to-bottom on send.
+- Smooth-scroll-to-message when clicking a pin or a reply.
+- Image-load reflow (Virtuoso handles this but needs proper height detection).
+
+Mitigation: thorough manual smoke-test before commit. Keep the old render behind a feature flag for one release if jitters appear.
+
+**Effort:** ~½ day to 1 day depending on edge cases.
+
+---
+
+### T9: PIN-Idle-Auto-Lock
+
+**What:**
+- Settings → Sicherheit: new toggle "Auto-Lock nach Inaktivität" + dropdown (5 / 15 / 30 / 60 Minuten). Default OFF.
+- localStorage key `chatapp.autoLockMinutes` (or similar) — added to `PRESERVE_LOCAL_STORAGE` so memory-wipe doesn't disable the setting silently (same pattern as wipe-on-close toggle).
+- In `AuthContext` (or a new top-level hook): listen on `keydown` / `mousedown` / `pointermove`, reset a timer on each event. When the timer fires: `wipeLocalState(uid)` + navigate to `/device` (the PIN-unlock screen).
+
+**Why:** Spec mentioned this as polish + a Security win — laptop left unattended, auto-locks after X min, attacker can't read messages without PIN.
+
+**Risk:** low. The wipe-on-close infrastructure (P1.T12-T13) already handles all the local-state clearing — same call site.
+
+**Effort:** ~½ day.
+
+---
+
+### T10: i18next tree-shake audit
+
+**What:**
+- `pnpm --filter @chat-app/desktop add -D i18next-parser`
+- Configure it to scan `apps/desktop/src/**/*.{ts,tsx}` for `t('app:...')` calls + extract used keys.
+- Diff against `apps/desktop/locales/de/app.json` (or wherever the resource files live). List dead keys.
+- Prune them. Verify nothing visible regresses.
+
+**Why:** Resource files accumulate keys from removed/redesigned features. Smaller resource bundle = faster app start (in-memory JSON parse).
+
+**Risk:** low — `t()` always falls back to `defaultValue` if a key is missing, so even an accidental over-prune doesn't crash the UI; it just shows the German default.
+
+**Effort:** ~2h (mostly looking at the diff + judgment calls).
+
+---
+
+### Group B final gate
+
+- [ ] Both typechecks green
+- [ ] All shared tests green
+- [ ] User smoke-test: cold start (Argon2 worker), open a long chat (virtual scroll), send an image (thumb generation), idle 5+min (auto-lock if enabled), check console for noise.
+- [ ] Tag `phase6b-done`.
+
+---
+
+## Group C — Audits + judgment calls (~1 day)
+
+### T11: Bundle-analyzer audit + targeted dep swaps
+
+**What:**
+- `pnpm dlx vite-bundle-visualizer` against the desktop build → outputs HTML report.
+- Review the treemap. Common offenders to check:
+  - Full lodash vs lodash-es (or no lodash at all if only a few utils)
+  - Moment.js vs date-fns / native `Intl.DateTimeFormat`
+  - Multiple realtime/socket clients
+  - Icon libs pulling all icons
+  - Dev-only deps accidentally in prod bundle
+- Apply targeted swaps (max ~3-5) based on the worst findings.
+
+**Why:** Shrinks bundle further beyond T1's lazy-load. Each ~50 KB shaved is a real cold-start win.
+
+**Files:** `apps/desktop/package.json`, the consumer files that import from swapped deps.
+
+**Risk:** variable per swap. A Moment-to-date-fns swap touches many call sites. Cap at the 3 biggest offenders to keep risk bounded.
+
+**Effort:** ~2h audit + variable fixes (estimate 2-3h additional).
+
+---
+
+### T12: Optimistic-UI audit + targeted gap fills
+
+**What:**
+- Audit each user-write action across the app:
+  - `send` (message) → likely already optimistic; verify
+  - `editEncryptedMessage` → likely already optimistic
+  - Pin / unpin
+  - Add / remove reaction (doesn't exist yet — skip)
+  - Vote on poll
+  - Revoke device
+  - Toggle mentions-only
+  - Toggle mute
+- For each action that currently waits for the server roundtrip before updating local state: add optimistic-update with rollback on error.
+
+**Why:** Perceived latency drops to ~0 ms for most clicks. Server roundtrip happens silently.
+
+**Risk:** medium. Each optimistic-update is its own potential rollback bug. Mitigation: only touch actions where rollback is straightforward (e.g. a toggle's previous state is trivially recoverable). Skip if rollback is hairy.
+
+**Effort:** ~1 day total (each action is ~30-60 min including verification).
+
+---
+
+### Group C final gate
+
+- [ ] Both typechecks green, all shared tests green
+- [ ] Bundle size measured before/after (note in report)
+- [ ] User smoke-test of any actions that gained optimistic UI
+
+---
+
+## Deferred / skipped (with reasoning)
+
+### Realtime-Channel-Pooling
+
+**Skipped for now.** The current UI keeps only one conversation actively open at a time. Concurrent channels at steady state are typically 5-8 (auth-self, conversations-list, current conv messages, current conv typing, mentions, maybe whiteboard / game / watch). Pooling into a single multiplexed channel would require a manager singleton + per-call-site refactor (~15-20 sites), with a meaningful risk of subtle realtime bugs during the transition.
+
+**Reconsider when:** sustained active channel count exceeds 15, or Supabase invoices a noticeable channel-quota line item. Then a focused 1-day refactor with thorough realtime smoke testing makes sense.
+
+---
+
+## Release strategy
+
+- No `pnpm release` between Group A/B/C — single combined release after Group C (or earlier if Group B+C get deferred).
+- Suggested version when releasing: `0.20.0` (combines unreleased Phase 5 + 5C + Phase 6).
+- Rollback at any commit boundary via `git reset --hard pre-phase6-perf` (Group A) or `git reset --hard phase6a-done` / `phase6b-done` (per-group).

packages/db-types/src/index.ts

@@ -57,6 +57,7 @@ export type Database = {
           accepted: boolean
           conversation_id: string
           joined_at: string
+          mentions_only: boolean
           role: Database["public"]["Enums"]["member_role"]
           user_id: string
         }
@@ -64,6 +65,7 @@ export type Database = {
           accepted?: boolean
           conversation_id: string
           joined_at?: string
+          mentions_only?: boolean
           role?: Database["public"]["Enums"]["member_role"]
           user_id: string
         }
@@ -71,6 +73,7 @@ export type Database = {
           accepted?: boolean
           conversation_id?: string
           joined_at?: string
+          mentions_only?: boolean
           role?: Database["public"]["Enums"]["member_role"]
           user_id?: string
         }
@@ -582,6 +585,71 @@ export type Database = {
         }
         Relationships: []
       }
+      conversation_watch_sessions: {
+        Row: {
+          id: string;
+          conversation_id: string;
+          owner_user_id: string;
+          video_id: string;
+          started_at: string;
+          ended_at: string | null;
+          current_state: { playing: boolean; position_seconds: number; updated_at_ms: number };
+        };
+        Insert: {
+          id?: string;
+          conversation_id: string;
+          owner_user_id: string;
+          video_id: string;
+          started_at?: string;
+          ended_at?: string | null;
+          current_state?: { playing: boolean; position_seconds: number; updated_at_ms: number };
+        };
+        Update: {
+          id?: string;
+          conversation_id?: string;
+          owner_user_id?: string;
+          video_id?: string;
+          started_at?: string;
+          ended_at?: string | null;
+          current_state?: { playing: boolean; position_seconds: number; updated_at_ms: number };
+        };
+        Relationships: [];
+      };
+      conversation_games: {
+        Row: {
+          id: string;
+          conversation_id: string;
+          game_type: 'ttt' | 'c4';
+          state: { kind: 'ttt' | 'c4'; board: Array<number | null> };
+          players: [string, string];
+          current_turn_user_id: string | null;
+          winner_user_id: string | null;
+          created_at: string;
+          finished_at: string | null;
+        };
+        Insert: {
+          id?: string;
+          conversation_id: string;
+          game_type: 'ttt' | 'c4';
+          state: { kind: 'ttt' | 'c4'; board: Array<number | null> };
+          players: [string, string];
+          current_turn_user_id: string | null;
+          winner_user_id?: string | null;
+          created_at?: string;
+          finished_at?: string | null;
+        };
+        Update: {
+          id?: string;
+          conversation_id?: string;
+          game_type?: 'ttt' | 'c4';
+          state?: { kind: 'ttt' | 'c4'; board: Array<number | null> };
+          players?: [string, string];
+          current_turn_user_id?: string | null;
+          winner_user_id?: string | null;
+          finished_at?: string | null;
+        };
+        Relationships: [];
+      };
     }
     Views: {
       [_ in never]: never
@@ -590,6 +658,10 @@ export type Database = {
       accept_dm: { Args: { conversation_id: string }; Returns: undefined }
       are_friends: { Args: { a: string; b: string }; Returns: boolean }
       revoke_device: { Args: { p_device_id: string }; Returns: undefined }
+      game_make_move: {
+        Args: { p_game_id: string; p_move: object };
+        Returns: { kind: 'ttt' | 'c4'; board: Array<number | null> };
+      }
       attachment_object_conv_id: {
         Args: { object_name: string }
         Returns: string

packages/shared/src/chat/attachments.ts

@@ -82,11 +82,26 @@ export interface WhiteboardPayload {
   whiteboard_id: string;
 }
 
+export interface WatchTogetherPayload {
+  v: 1;
+  type: 'watch_together';
+  session_id: string;
+}
+
+export interface GamePayload {
+  v: 1;
+  type: 'game';
+  game_id: string;
+  game_type: 'ttt' | 'c4';
+}
+
 export type MessagePayload =
   | TextMessagePayload
   | CallEventPayload
   | PollPayload
-  | WhiteboardPayload;
+  | WhiteboardPayload
+  | WatchTogetherPayload
+  | GamePayload;
 
 export type ParsedMessagePayload =
   | {
@@ -109,6 +124,15 @@ export type ParsedMessagePayload =
   | {
       kind: 'whiteboard';
       whiteboardId: string;
+    }
+  | {
+      kind: 'watch_together';
+      sessionId: string;
+    }
+  | {
+      kind: 'game';
+      gameId: string;
+      gameType: 'ttt' | 'c4';
     };
 
 export function serializeMessagePayload(payload: MessagePayload): string {
@@ -172,6 +196,19 @@ export function parseMessagePayload(raw: string | null): ParsedMessagePayload {
           : '';
         return { kind: 'whiteboard', whiteboardId: id };
       }
+      if (obj.type === 'watch_together') {
+        const p = obj as Partial<WatchTogetherPayload>;
+        const id = typeof p.session_id === 'string' && p.session_id.length > 0
+          ? p.session_id
+          : '';
+        return { kind: 'watch_together', sessionId: id };
+      }
+      if (obj.type === 'game') {
+        const p = obj as Partial<GamePayload>;
+        const id = typeof p.game_id === 'string' && p.game_id.length > 0 ? p.game_id : '';
+        const t = p.game_type === 'ttt' || p.game_type === 'c4' ? p.game_type : 'ttt';
+        return { kind: 'game', gameId: id, gameType: t };
+      }
       const t = obj as TextMessagePayload;
       return {
         kind: 'text',

packages/shared/src/chat/conversations.ts

@@ -35,7 +35,7 @@ export async function listConversations(client: AppSupabaseClient): Promise<Conv
   // cast the select to bypass typing.
   const { data: myMembers, error: mErr } = await client
     .from('conversation_members')
-    .select('conversation_id, role, accepted, archived, muted_until' as '*')
+    .select('conversation_id, role, accepted, archived, muted_until, mentions_only' as '*')
     .eq('user_id', myId);
   if (mErr) throw mErr;
   const myMembersList = (myMembers ?? []) as unknown as Array<{
@@ -44,6 +44,7 @@ export async function listConversations(client: AppSupabaseClient): Promise<Conv
     accepted: boolean;
     archived: boolean | null;
     muted_until: string | null;
+    mentions_only: boolean | null;
   }>;
   if (myMembersList.length === 0) return [];
 
@@ -114,7 +115,13 @@ export async function listConversations(client: AppSupabaseClient): Promise<Conv
         ? (members.find((m) => m.userId !== myId)?.profile ?? null)
         : null;
     const mineRow = mine as
-      | { accepted: boolean; role: string; archived?: boolean; muted_until?: string | null }
+      | {
+          accepted: boolean;
+          role: string;
+          archived?: boolean;
+          muted_until?: string | null;
+          mentions_only?: boolean | null;
+        }
       | undefined;
     return {
       id: c.id,
@@ -129,6 +136,7 @@ export async function listConversations(client: AppSupabaseClient): Promise<Conv
       lastMessageAt: lastSeen.get(c.id) ?? null,
       archived: mineRow?.archived ?? false,
       mutedUntil: mineRow?.muted_until ?? null,
+      mentionsOnly: mineRow?.mentions_only ?? false,
     };
   });
 }
@@ -164,6 +172,24 @@ export async function setConversationMutedUntil(
   if (error) throw error;
 }
 
+// Toggle "mentions only" — when true the renderer's notification gate
+// suppresses non-mention alerts for this conversation. Mentions still fire
+// via the independent useMentionNotifications subscription on
+// message_mentions, so the @-alerts are never lost.
+export async function setConversationMentionsOnly(
+  client: AppSupabaseClient,
+  params: { conversationId: string; mentionsOnly: boolean },
+): Promise<void> {
+  const { data: session } = await client.auth.getUser();
+  if (!session.user) throw new Error('not authenticated');
+  const { error } = await client
+    .from('conversation_members')
+    .update({ mentions_only: params.mentionsOnly } as never)
+    .eq('conversation_id', params.conversationId)
+    .eq('user_id', session.user.id);
+  if (error) throw error;
+}
+
 // Convenience: `null` unmutes, number means minutes from now. For "forever"
 // pass a very large number (e.g. 100 years worth of minutes).
 export function muteDurationToIso(minutes: number | null): string | null {

packages/shared/src/chat/games.test.ts

@@ -0,0 +1,79 @@
+import { describe, expect, it } from 'vitest';
+
+import {
+  c4DropRow,
+  c4WinningCells,
+  emptyC4Board,
+  emptyTttBoard,
+  isBoardFull,
+  tttWinningLine,
+  type Cell,
+} from './games';
+
+describe('tttWinningLine', () => {
+  it('detects a row win', () => {
+    const b: Cell[] = [0, 0, 0, null, null, null, null, null, null];
+    expect(tttWinningLine(b)).toEqual([0, 1, 2]);
+  });
+
+  it('detects a diagonal win', () => {
+    const b: Cell[] = [1, null, null, null, 1, null, null, null, 1];
+    expect(tttWinningLine(b)).toEqual([0, 4, 8]);
+  });
+
+  it('returns null when no winner', () => {
+    expect(tttWinningLine(emptyTttBoard())).toBeNull();
+    const mixed: Cell[] = [0, 1, 0, 1, 0, 1, 1, 0, 1];
+    expect(tttWinningLine(mixed)).toBeNull();
+  });
+});
+
+describe('c4WinningCells', () => {
+  it('detects a horizontal win', () => {
+    const b = emptyC4Board();
+    b[35] = 1; b[36] = 1; b[37] = 1; b[38] = 1;
+    expect(c4WinningCells(b)).toEqual([35, 36, 37, 38]);
+  });
+
+  it('detects a vertical win', () => {
+    const b = emptyC4Board();
+    b[14] = 0; b[21] = 0; b[28] = 0; b[35] = 0;
+    expect(c4WinningCells(b)).toEqual([14, 21, 28, 35]);
+  });
+
+  it('detects a diagonal ↘ win', () => {
+    const b = emptyC4Board();
+    b[14] = 1; b[22] = 1; b[30] = 1; b[38] = 1;
+    expect(c4WinningCells(b)).toEqual([14, 22, 30, 38]);
+  });
+
+  it('returns null when no winner', () => {
+    expect(c4WinningCells(emptyC4Board())).toBeNull();
+  });
+});
+
+describe('c4DropRow', () => {
+  it('returns the bottom row on an empty column', () => {
+    expect(c4DropRow(emptyC4Board(), 0)).toBe(5);
+  });
+
+  it('stacks on top of an existing piece', () => {
+    const b = emptyC4Board();
+    b[35] = 0;
+    expect(c4DropRow(b, 0)).toBe(4);
+  });
+
+  it('returns -1 when the column is full', () => {
+    const b = emptyC4Board();
+    for (let r = 0; r < 6; r++) b[r * 7 + 3] = 0;
+    expect(c4DropRow(b, 3)).toBe(-1);
+  });
+});
+
+describe('isBoardFull', () => {
+  it('true for a fully filled board, false otherwise', () => {
+    expect(isBoardFull(emptyTttBoard())).toBe(false);
+    const filled: Cell[] = [0, 1, 0, 1, 0, 1, 1, 0, 1];
+    expect(isBoardFull(filled)).toBe(true);
+  });
+});

packages/shared/src/chat/games.ts

@@ -0,0 +1,165 @@
+import type { AppSupabaseClient } from '../supabase/client';
+
+export type GameType = 'ttt' | 'c4';
+export type Cell = 0 | 1 | null;
+
+export const TTT_CELLS = 9;
+export const C4_ROWS = 6;
+export const C4_COLS = 7;
+export const C4_CELLS = C4_ROWS * C4_COLS;
+
+export const TTT_LINES: ReadonlyArray<readonly [number, number, number]> = [
+  [0, 1, 2], [3, 4, 5], [6, 7, 8],
+  [0, 3, 6], [1, 4, 7], [2, 5, 8],
+  [0, 4, 8], [2, 4, 6],
+];
+
+export interface GameRecord {
+  id: string;
+  conversationId: string;
+  gameType: GameType;
+  state: { kind: GameType; board: Cell[] };
+  players: [string, string];
+  currentTurnUserId: string | null;
+  winnerUserId: string | null;
+  createdAt: string;
+  finishedAt: string | null;
+}
+
+export function emptyTttBoard(): Cell[] {
+  return new Array(TTT_CELLS).fill(null);
+}
+
+export function emptyC4Board(): Cell[] {
+  return new Array(C4_CELLS).fill(null);
+}
+
+export function tttWinningLine(board: Cell[]): readonly [number, number, number] | null {
+  for (const line of TTT_LINES) {
+    const a = board[line[0]];
+    const b = board[line[1]];
+    const c = board[line[2]];
+    if (a !== null && a === b && b === c) return line;
+  }
+  return null;
+}
+
+export function c4WinningCells(board: Cell[]): readonly number[] | null {
+  const directions: Array<[number, number]> = [
+    [0, 1], [1, 0], [1, 1], [1, -1],
+  ];
+  for (let r = 0; r < C4_ROWS; r++) {
+    for (let c = 0; c < C4_COLS; c++) {
+      const base = board[r * C4_COLS + c];
+      if (base === null) continue;
+      for (const [dr, dc] of directions) {
+        const rEnd = r + dr * 3;
+        const cEnd = c + dc * 3;
+        if (rEnd < 0 || rEnd >= C4_ROWS || cEnd < 0 || cEnd >= C4_COLS) continue;
+        let ok = true;
+        const cells: number[] = [r * C4_COLS + c];
+        for (let i = 1; i < 4; i++) {
+          const idx = (r + dr * i) * C4_COLS + (c + dc * i);
+          if (board[idx] !== base) { ok = false; break; }
+          cells.push(idx);
+        }
+        if (ok) return cells;
+      }
+    }
+  }
+  return null;
+}
+
+export function isBoardFull(board: Cell[]): boolean {
+  return board.every((c) => c !== null);
+}
+
+export function c4DropRow(board: Cell[], column: number): number {
+  for (let r = C4_ROWS - 1; r >= 0; r--) {
+    if (board[r * C4_COLS + column] === null) return r;
+  }
+  return -1;
+}
+
+export async function createGame(
+  client: AppSupabaseClient,
+  params: { conversationId: string; gameType: GameType; opponentUserId: string },
+): Promise<GameRecord> {
+  const { data: session } = await client.auth.getUser();
+  if (!session.user) throw new Error('not authenticated');
+  const board = params.gameType === 'ttt' ? emptyTttBoard() : emptyC4Board();
+  const state = { kind: params.gameType, board };
+  const players: [string, string] = [session.user.id, params.opponentUserId];
+  const { data, error } = await client
+    .from('conversation_games')
+    .insert({
+      conversation_id: params.conversationId,
+      game_type: params.gameType,
+      state,
+      players,
+      current_turn_user_id: session.user.id,
+    })
+    .select(
+      'id, conversation_id, game_type, state, players, current_turn_user_id, winner_user_id, created_at, finished_at',
+    )
+    .single();
+  if (error) throw error;
+  return mapRow(data);
+}
+
+export async function getGame(
+  client: AppSupabaseClient,
+  gameId: string,
+): Promise<GameRecord | null> {
+  const { data, error } = await client
+    .from('conversation_games')
+    .select(
+      'id, conversation_id, game_type, state, players, current_turn_user_id, winner_user_id, created_at, finished_at',
+    )
+    .eq('id', gameId)
+    .maybeSingle();
+  if (error) throw error;
+  return data ? mapRow(data) : null;
+}
+
+export async function makeGameMove(
+  client: AppSupabaseClient,
+  params: { gameId: string; move: object },
+): Promise<void> {
+  const { error } = await client.rpc('game_make_move', {
+    p_game_id: params.gameId,
+    p_move: params.move,
+  });
+  if (error) throw new Error(error.message);
+}
+
+function mapRow(row: {
+  id: string;
+  conversation_id: string;
+  game_type: string;
+  state: unknown;
+  players: unknown;
+  current_turn_user_id: string | null;
+  winner_user_id: string | null;
+  created_at: string;
+  finished_at: string | null;
+}): GameRecord {
+  const rawState = (row.state ?? {}) as { kind?: string; board?: unknown };
+  const kind: GameType = rawState.kind === 'c4' ? 'c4' : 'ttt';
+  const rawBoard = Array.isArray(rawState.board) ? rawState.board : [];
+  const board: Cell[] = rawBoard.map((c) =>
+    typeof c === 'number' && (c === 0 || c === 1) ? (c as Cell) : null,
+  );
+  const players = Array.isArray(row.players) ? row.players : [];
+  return {
+    id: row.id,
+    conversationId: row.conversation_id,
+    gameType: row.game_type === 'c4' ? 'c4' : 'ttt',
+    state: { kind, board },
+    players: [String(players[0] ?? ''), String(players[1] ?? '')],
+    currentTurnUserId: row.current_turn_user_id,
+    winnerUserId: row.winner_user_id,
+    createdAt: row.created_at,
+    finishedAt: row.finished_at,
+  };
+}

packages/shared/src/chat/index.ts

@@ -12,6 +12,8 @@ export * from './mentions';
 export * from './viewOnceAttachments';
 export * from './whiteboards';
 export * from './soundboards';
+export * from './watchTogether';
+export * from './games';
 
 // ----- RPC wrappers ---------------------------------------------------------
 

packages/shared/src/chat/messages.ts

@@ -226,6 +226,33 @@ export async function editEncryptedMessage(
     } as never)
     .eq('id', params.messageId);
   if (error) throw error;
+
+  // Recompute mentions: an edit can add or remove @-tokens. Drop old rows
+  // then re-insert from the new plaintext (best-effort, same as insertMessage).
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const { error: delErr } = await (params.client as any)
+      .from('message_mentions')
+      .delete()
+      .eq('message_id', params.messageId);
+    if (delErr) throw delErr;
+
+    const mentionUsernames = parseMentionUsernames(params.newPlaintext);
+    if (mentionUsernames.length > 0) {
+      const resolver = makeMentionResolver(params.client);
+      const resolved = await resolver.resolveUsernames(params.conversationId, mentionUsernames);
+      if (resolved.size > 0) {
+        await insertMentions(
+          params.client,
+          params.messageId,
+          params.conversationId,
+          [...resolved.values()],
+        );
+      }
+    }
+  } catch (err) {
+    console.warn('mention recompute on edit failed', err);
+  }
 }
 
 export async function softDeleteMessage(

packages/shared/src/chat/types.ts

@@ -28,6 +28,10 @@ export interface ConversationSummary {
   // ISO timestamp. null = not muted. Past timestamp = expired mute (treat as
   // not muted — the server row is kept for history until the next toggle).
   mutedUntil: string | null;
+  // When true the renderer suppresses non-mention notifications. Mentions
+  // still fire via the independent useMentionNotifications subscription on
+  // message_mentions, so this flag never silences @-alerts.
+  mentionsOnly: boolean;
 }
 
 export interface ChatMessage {

packages/shared/src/chat/watchTogether.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from 'vitest';
+
+import {
+  createWatchSession,
+  getWatchSession,
+  parseYouTubeUrl,
+  updateWatchSessionState,
+} from './watchTogether';
+
+describe('parseYouTubeUrl', () => {
+  it.each([
+    ['https://www.youtube.com/watch?v=dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://www.youtube.com/watch?v=dQw4w9WgXcQ&t=42', 'dQw4w9WgXcQ'],
+    ['https://youtu.be/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://youtu.be/dQw4w9WgXcQ?t=1', 'dQw4w9WgXcQ'],
+    ['https://www.youtube.com/embed/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://www.youtube.com/shorts/dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['https://m.youtube.com/watch?v=dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+    ['dQw4w9WgXcQ', 'dQw4w9WgXcQ'],
+  ])('extracts the id from %s', (url, expected) => {
+    expect(parseYouTubeUrl(url)).toBe(expected);
+  });
+
+  it.each([
+    '',
+    '   ',
+    'https://vimeo.com/123',
+    'not a url',
+    'short_id',
+    'https://www.youtube.com/playlist?list=PL123',
+  ])('returns null for %s', (input) => {
+    expect(parseYouTubeUrl(input)).toBeNull();
+  });
+});
+
+function makeClient(opts: {
+  user?: { id: string } | null;
+  insertReturn?: { data: unknown; error: unknown };
+  selectReturn?: { data: unknown; error: unknown };
+  updateReturn?: { error: unknown };
+}): any {
+  const single = vi.fn().mockResolvedValue(opts.insertReturn ?? { data: {}, error: null });
+  const insertSelect = vi.fn().mockReturnValue({ single });
+  const insertChain = vi.fn().mockReturnValue({ select: insertSelect });
+  const maybeSingle = vi.fn().mockResolvedValue(opts.selectReturn ?? { data: null, error: null });
+  const eqSelect = vi.fn().mockReturnValue({ maybeSingle });
+  const selectChain = vi.fn().mockReturnValue({ eq: eqSelect });
+  const eqUpdate = vi.fn().mockResolvedValue(opts.updateReturn ?? { error: null });
+  const updateChain = vi.fn().mockReturnValue({ eq: eqUpdate });
+  const from = vi.fn().mockReturnValue({
+    insert: insertChain,
+    select: selectChain,
+    update: updateChain,
+  });
+  return {
+    auth: { getUser: vi.fn().mockResolvedValue({ data: { user: opts.user ?? { id: 'u-1' } } }) },
+    from,
+  };
+}
+
+describe('createWatchSession', () => {
+  it('inserts row + maps response to camelCase', async () => {
+    const client = makeClient({
+      insertReturn: {
+        data: {
+          id: 'w-1',
+          conversation_id: 'c-1',
+          owner_user_id: 'u-1',
+          video_id: 'dQw4w9WgXcQ',
+          started_at: '2026-05-16T00:00:00Z',
+          ended_at: null,
+          current_state: { playing: false, position_seconds: 0, updated_at_ms: 0 },
+        },
+        error: null,
+      },
+    });
+    const out = await createWatchSession(client, { conversationId: 'c-1', videoId: 'dQw4w9WgXcQ' });
+    expect(out.id).toBe('w-1');
+    expect(out.ownerUserId).toBe('u-1');
+    expect(out.videoId).toBe('dQw4w9WgXcQ');
+    expect(out.endedAt).toBeNull();
+    expect(out.currentState.playing).toBe(false);
+  });
+});
+
+describe('getWatchSession', () => {
+  it('returns null when row not found', async () => {
+    const client = makeClient({ selectReturn: { data: null, error: null } });
+    const out = await getWatchSession(client, 'w-missing');
+    expect(out).toBeNull();
+  });
+
+  it('coerces missing current_state fields to safe defaults', async () => {
+    const client = makeClient({
+      selectReturn: {
+        data: {
+          id: 'w-1',
+          conversation_id: 'c-1',
+          owner_user_id: 'u-1',
+          video_id: 'dQw4w9WgXcQ',
+          started_at: '2026-05-16T00:00:00Z',
+          ended_at: null,
+          current_state: {},
+        },
+        error: null,
+      },
+    });
+    const out = await getWatchSession(client, 'w-1');
+    expect(out?.currentState).toEqual({ playing: false, positionSeconds: 0, updatedAtMs: 0 });
+  });
+});
+
+describe('updateWatchSessionState', () => {
+  it('does not throw on success', async () => {
+    const client = makeClient({ updateReturn: { error: null } });
+    await expect(
+      updateWatchSessionState(client, 'w-1', {
+        playing: true,
+        positionSeconds: 42.5,
+        updatedAtMs: Date.now(),
+      }),
+    ).resolves.toBeUndefined();
+  });
+});

packages/shared/src/chat/watchTogether.ts

@@ -0,0 +1,124 @@
+import type { AppSupabaseClient } from '../supabase/client';
+
+export interface WatchSessionState {
+  playing: boolean;
+  positionSeconds: number;
+  updatedAtMs: number;
+}
+
+export interface WatchSession {
+  id: string;
+  conversationId: string;
+  ownerUserId: string;
+  videoId: string;
+  startedAt: string;
+  endedAt: string | null;
+  currentState: WatchSessionState;
+}
+
+export function parseYouTubeUrl(input: string): string | null {
+  const s = input.trim();
+  if (!s) return null;
+  if (/^[A-Za-z0-9_-]{11}$/.test(s)) return s;
+  const patterns = [
+    /[?&]v=([A-Za-z0-9_-]{11})/,
+    /youtu\.be\/([A-Za-z0-9_-]{11})/,
+    /youtube\.com\/embed\/([A-Za-z0-9_-]{11})/,
+    /youtube\.com\/shorts\/([A-Za-z0-9_-]{11})/,
+  ];
+  for (const re of patterns) {
+    const m = re.exec(s);
+    if (m && m[1]) return m[1];
+  }
+  return null;
+}
+
+export async function createWatchSession(
+  client: AppSupabaseClient,
+  params: { conversationId: string; videoId: string },
+): Promise<WatchSession> {
+  const { data: session } = await client.auth.getUser();
+  if (!session.user) throw new Error('not authenticated');
+  const { data, error } = await client
+    .from('conversation_watch_sessions')
+    .insert({
+      conversation_id: params.conversationId,
+      owner_user_id: session.user.id,
+      video_id: params.videoId,
+    })
+    .select('id, conversation_id, owner_user_id, video_id, started_at, ended_at, current_state')
+    .single();
+  if (error) throw error;
+  return mapRow(data);
+}
+
+export async function getWatchSession(
+  client: AppSupabaseClient,
+  sessionId: string,
+): Promise<WatchSession | null> {
+  const { data, error } = await client
+    .from('conversation_watch_sessions')
+    .select('id, conversation_id, owner_user_id, video_id, started_at, ended_at, current_state')
+    .eq('id', sessionId)
+    .maybeSingle();
+  if (error) throw error;
+  return data ? mapRow(data) : null;
+}
+
+export async function updateWatchSessionState(
+  client: AppSupabaseClient,
+  sessionId: string,
+  state: WatchSessionState,
+): Promise<void> {
+  const { error } = await client
+    .from('conversation_watch_sessions')
+    .update({
+      current_state: {
+        playing: state.playing,
+        position_seconds: state.positionSeconds,
+        updated_at_ms: state.updatedAtMs,
+      },
+    })
+    .eq('id', sessionId);
+  if (error) throw error;
+}
+
+export async function endWatchSession(
+  client: AppSupabaseClient,
+  sessionId: string,
+): Promise<void> {
+  const { error } = await client
+    .from('conversation_watch_sessions')
+    .update({ ended_at: new Date().toISOString() })
+    .eq('id', sessionId);
+  if (error) throw error;
+}
+
+function mapRow(row: {
+  id: string;
+  conversation_id: string;
+  owner_user_id: string;
+  video_id: string;
+  started_at: string;
+  ended_at: string | null;
+  current_state: unknown;
+}): WatchSession {
+  const raw = (row.current_state ?? {}) as Partial<{
+    playing: boolean;
+    position_seconds: number;
+    updated_at_ms: number;
+  }>;
+  return {
+    id: row.id,
+    conversationId: row.conversation_id,
+    ownerUserId: row.owner_user_id,
+    videoId: row.video_id,
+    startedAt: row.started_at,
+    endedAt: row.ended_at,
+    currentState: {
+      playing: typeof raw.playing === 'boolean' ? raw.playing : false,
+      positionSeconds: typeof raw.position_seconds === 'number' ? raw.position_seconds : 0,
+      updatedAtMs: typeof raw.updated_at_ms === 'number' ? raw.updated_at_ms : 0,
+    },
+  };
+}

pnpm-lock.yaml

@@ -68,6 +68,9 @@ importers:
       better-sqlite3:
         specifier: ^11.3.0
         version: 11.10.0
+      canvas-confetti:
+        specifier: ^1.9.4
+        version: 1.9.4
       electron-updater:
         specifier: ^6.3.0
         version: 6.8.3
@@ -102,6 +105,9 @@ importers:
       '@types/better-sqlite3':
         specifier: ^7.6.0
         version: 7.6.13
+      '@types/canvas-confetti':
+        specifier: ^1.9.0
+        version: 1.9.0
       '@types/libsodium-wrappers':
         specifier: ^0.7.14
         version: 0.7.14
@@ -1967,6 +1973,9 @@ packages:
   '@types/cacheable-request@6.0.3':
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
 
+  '@types/canvas-confetti@1.9.0':
+    resolution: {integrity: sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==}
+
   '@types/debug@4.1.13':
     resolution: {integrity: sha512-KSVgmQmzMwPlmtljOomayoR89W4FynCAi3E8PPs7vmDVPe84hT+vGPKkJfThkmXs0x0jAaa9U8uW8bbfyS2fWw==}
 
@@ -2670,6 +2679,9 @@ packages:
   caniuse-lite@1.0.30001788:
     resolution: {integrity: sha512-6q8HFp+lOQtcf7wBK+uEenxymVWkGKkjFpCvw5W25cmMwEDU45p1xQFBQv8JDlMMry7eNxyBaR+qxgmTUZkIRQ==}
 
+  canvas-confetti@1.9.4:
+    resolution: {integrity: sha512-yxQbJkAVrFXWNbTUjPqjF7G+g6pDotOUHGbkZq2NELZUMDpiJ85rIEazVb8GTaAptNW2miJAXbs1BtioA251Pw==}
+
   chai@5.3.3:
     resolution: {integrity: sha512-4zNhdJD/iOjSH0A05ea+Ke6MU5mmpQcbQsSOkgdaUMJ9zTlDTD/GYlwohmIE2u0gaxHYiVHEn1Fw9mZ/ktJWgw==}
     engines: {node: '>=18'}
@@ -8703,6 +8715,8 @@ snapshots:
       '@types/node': 22.19.17
       '@types/responselike': 1.0.3
 
+  '@types/canvas-confetti@1.9.0': {}
+
   '@types/debug@4.1.13':
     dependencies:
       '@types/ms': 2.1.0
@@ -9634,6 +9648,8 @@ snapshots:
 
   caniuse-lite@1.0.30001788: {}
 
+  canvas-confetti@1.9.4: {}
+
   chai@5.3.3:
     dependencies:
       assertion-error: 2.0.1

supabase/migrations/20260516000008_watch_together.sql

@@ -0,0 +1,63 @@
+-- Phase 5A: per-conversation synchronized YouTube playback.
+--
+-- conversation_watch_sessions: one row per Watch-Together session. The bubble
+-- in the chat is a normal `messages` row whose plaintext payload is
+-- `{v:1, type:'watch_together', session_id:<id>}`. The owner's player drives
+-- current_state (jsonb {playing, position_seconds, updated_at_ms}); other
+-- joiners reconcile via realtime postgres_changes UPDATE when local drift
+-- exceeds 2 seconds.
+
+create table if not exists public.conversation_watch_sessions (
+  id              uuid primary key default gen_random_uuid(),
+  conversation_id uuid not null references public.conversations(id) on delete cascade,
+  owner_user_id   uuid not null references auth.users(id) on delete cascade,
+  video_id        text not null,
+  started_at      timestamptz not null default now(),
+  ended_at        timestamptz null,
+  current_state   jsonb not null default '{"playing":false,"position_seconds":0,"updated_at_ms":0}'::jsonb,
+  constraint conversation_watch_sessions_video_id_len check (length(video_id) between 1 and 64)
+);
+
+create index if not exists conversation_watch_sessions_conv_idx
+  on public.conversation_watch_sessions(conversation_id, started_at desc);
+
+alter table public.conversation_watch_sessions enable row level security;
+
+drop policy if exists conversation_watch_sessions_select on public.conversation_watch_sessions;
+drop policy if exists conversation_watch_sessions_insert on public.conversation_watch_sessions;
+drop policy if exists conversation_watch_sessions_update on public.conversation_watch_sessions;
+
+create policy conversation_watch_sessions_select
+  on public.conversation_watch_sessions
+  for select
+  using (public.is_conversation_member(conversation_id));
+
+create policy conversation_watch_sessions_insert
+  on public.conversation_watch_sessions
+  for insert
+  with check (
+    public.is_conversation_member(conversation_id)
+    and owner_user_id = auth.uid()
+  );
+
+create policy conversation_watch_sessions_update
+  on public.conversation_watch_sessions
+  for update
+  using (owner_user_id = auth.uid())
+  with check (owner_user_id = auth.uid());
+
+alter table public.conversation_watch_sessions replica identity full;
+
+do $$
+begin
+  if not exists (
+    select 1
+      from pg_publication_tables
+      where pubname = 'supabase_realtime'
+        and schemaname = 'public'
+        and tablename = 'conversation_watch_sessions'
+  ) then
+    execute 'alter publication supabase_realtime add table public.conversation_watch_sessions';
+  end if;
+end
+$$;

supabase/migrations/20260516000009_mini_games.sql

@@ -0,0 +1,264 @@
+-- Phase 5B: per-conversation mini-games (Tic-Tac-Toe + Vier-Gewinnt /
+-- Connect Four).
+--
+-- conversation_games: one row per game. The bubble in the chat is a
+-- regular `messages` row whose plaintext payload is
+-- `{v:1, type:'game', game_id:<id>, game_type:<'ttt'|'c4'>}`.
+--
+-- state JSON shape:
+--   ttt:  { kind: 'ttt', board: [null|0|1 × 9] }   (row-major 3×3)
+--   c4:   { kind: 'c4',  board: [null|0|1 × 42] }  (row-major 6 rows × 7 cols)
+--
+-- players JSON: [user_id_a, user_id_b]  — indices 0 and 1 map to board cells.
+-- current_turn_user_id alternates; null once finished.
+-- winner_user_id null on draw or unfinished.
+
+create table if not exists public.conversation_games (
+  id                  uuid primary key default gen_random_uuid(),
+  conversation_id     uuid not null references public.conversations(id) on delete cascade,
+  game_type           text not null check (game_type in ('ttt', 'c4')),
+  state               jsonb not null,
+  players             jsonb not null,
+  current_turn_user_id uuid null references auth.users(id) on delete set null,
+  winner_user_id      uuid null references auth.users(id) on delete set null,
+  created_at          timestamptz not null default now(),
+  finished_at         timestamptz null
+);
+
+create index if not exists conversation_games_conv_idx
+  on public.conversation_games(conversation_id, created_at desc);
+
+alter table public.conversation_games enable row level security;
+
+drop policy if exists conversation_games_select on public.conversation_games;
+drop policy if exists conversation_games_insert on public.conversation_games;
+
+create policy conversation_games_select
+  on public.conversation_games
+  for select
+  using (public.is_conversation_member(conversation_id));
+
+create policy conversation_games_insert
+  on public.conversation_games
+  for insert
+  with check (
+    public.is_conversation_member(conversation_id)
+    and current_turn_user_id = auth.uid()
+    and (players->>0)::uuid = auth.uid()
+  );
+
+alter table public.conversation_games replica identity full;
+
+do $$
+begin
+  if not exists (
+    select 1
+      from pg_publication_tables
+      where pubname = 'supabase_realtime'
+        and schemaname = 'public'
+        and tablename = 'conversation_games'
+  ) then
+    execute 'alter publication supabase_realtime add table public.conversation_games';
+  end if;
+end
+$$;
+
+-- ----------------------------------------------------------------------
+-- Pure winner-check + board-full helpers.
+-- ----------------------------------------------------------------------
+
+create or replace function public.ttt_check_winner(board jsonb)
+returns int
+language plpgsql
+immutable
+as $$
+declare
+  lines int[][] := array[
+    array[0,1,2], array[3,4,5], array[6,7,8],
+    array[0,3,6], array[1,4,7], array[2,5,8],
+    array[0,4,8], array[2,4,6]
+  ];
+  ln int[];
+  a jsonb;
+  b jsonb;
+  c jsonb;
+begin
+  foreach ln slice 1 in array lines loop
+    a := board->ln[1];
+    b := board->ln[2];
+    c := board->ln[3];
+    if jsonb_typeof(a) = 'number' and a = b and b = c then
+      return (a)::int;
+    end if;
+  end loop;
+  return null;
+end;
+$$;
+
+create or replace function public.c4_check_winner(board jsonb)
+returns int
+language plpgsql
+immutable
+as $$
+declare
+  rows constant int := 6;
+  cols constant int := 7;
+  r int;
+  c int;
+  i int;
+  d_r int;
+  d_c int;
+  directions int[][] := array[
+    array[0, 1],
+    array[1, 0],
+    array[1, 1],
+    array[1, -1]
+  ];
+  dir int[];
+  base jsonb;
+  cell jsonb;
+  ok boolean;
+begin
+  for r in 0..rows-1 loop
+    for c in 0..cols-1 loop
+      base := board->(r * cols + c);
+      if jsonb_typeof(base) <> 'number' then continue; end if;
+      foreach dir slice 1 in array directions loop
+        d_r := dir[1];
+        d_c := dir[2];
+        if r + d_r * 3 < 0 or r + d_r * 3 >= rows then continue; end if;
+        if c + d_c * 3 < 0 or c + d_c * 3 >= cols then continue; end if;
+        ok := true;
+        for i in 1..3 loop
+          cell := board->((r + d_r * i) * cols + (c + d_c * i));
+          if cell is null or cell <> base then ok := false; exit; end if;
+        end loop;
+        if ok then return (base)::int; end if;
+      end loop;
+    end loop;
+  end loop;
+  return null;
+end;
+$$;
+
+create or replace function public.board_is_full(board jsonb)
+returns boolean
+language sql
+immutable
+as $$
+  select not exists (
+    select 1 from jsonb_array_elements(board) elt where jsonb_typeof(elt) is distinct from 'number'
+  );
+$$;
+
+-- ----------------------------------------------------------------------
+-- The state-machine RPC.
+-- ----------------------------------------------------------------------
+
+create or replace function public.game_make_move(p_game_id uuid, p_move jsonb)
+returns jsonb
+language plpgsql
+security definer
+set search_path = public
+as $$
+declare
+  v_game record;
+  v_state jsonb;
+  v_board jsonb;
+  v_kind text;
+  v_player_idx int;
+  v_other_user uuid;
+  v_winner_idx int;
+  v_finished boolean;
+  v_cell int;
+  v_col int;
+  v_row int;
+  v_cols constant int := 7;
+  v_rows constant int := 6;
+  v_target_row int;
+begin
+  if auth.uid() is null then
+    raise exception 'not_authenticated' using errcode = '28000';
+  end if;
+
+  select * into v_game from public.conversation_games where id = p_game_id for update;
+  if not found then
+    raise exception 'game_not_found' using errcode = 'P0002';
+  end if;
+  if v_game.finished_at is not null then
+    raise exception 'game_finished' using errcode = '42501';
+  end if;
+  if v_game.current_turn_user_id is null
+     or v_game.current_turn_user_id <> auth.uid() then
+    raise exception 'not_your_turn' using errcode = '42501';
+  end if;
+
+  if (v_game.players->>0)::uuid = auth.uid() then
+    v_player_idx := 0;
+    v_other_user := (v_game.players->>1)::uuid;
+  elsif (v_game.players->>1)::uuid = auth.uid() then
+    v_player_idx := 1;
+    v_other_user := (v_game.players->>0)::uuid;
+  else
+    raise exception 'not_a_player' using errcode = '42501';
+  end if;
+
+  v_state := v_game.state;
+  v_kind := v_state->>'kind';
+  v_board := v_state->'board';
+
+  if v_kind = 'ttt' then
+    if (p_move->'cell') is null or jsonb_typeof(p_move->'cell') <> 'number' then
+      raise exception 'bad_move' using errcode = '22023';
+    end if;
+    v_cell := (p_move->>'cell')::int;
+    if v_cell < 0 or v_cell > 8 then
+      raise exception 'bad_move' using errcode = '22023';
+    end if;
+    if jsonb_typeof(v_board->v_cell) = 'number' then
+      raise exception 'cell_taken' using errcode = '42501';
+    end if;
+    v_board := jsonb_set(v_board, array[v_cell::text], to_jsonb(v_player_idx));
+    v_winner_idx := public.ttt_check_winner(v_board);
+
+  elsif v_kind = 'c4' then
+    if (p_move->'column') is null or jsonb_typeof(p_move->'column') <> 'number' then
+      raise exception 'bad_move' using errcode = '22023';
+    end if;
+    v_col := (p_move->>'column')::int;
+    if v_col < 0 or v_col >= v_cols then
+      raise exception 'bad_move' using errcode = '22023';
+    end if;
+    v_target_row := -1;
+    for v_row in reverse v_rows - 1 .. 0 loop
+      if jsonb_typeof(v_board->(v_row * v_cols + v_col)) is distinct from 'number' then
+        v_target_row := v_row;
+        exit;
+      end if;
+    end loop;
+    if v_target_row < 0 then
+      raise exception 'column_full' using errcode = '42501';
+    end if;
+    v_board := jsonb_set(v_board, array[(v_target_row * v_cols + v_col)::text], to_jsonb(v_player_idx));
+    v_winner_idx := public.c4_check_winner(v_board);
+
+  else
+    raise exception 'unknown_game_kind' using errcode = '42501';
+  end if;
+
+  v_state := jsonb_set(v_state, '{board}', v_board);
+  v_finished := v_winner_idx is not null or public.board_is_full(v_board);
+
+  update public.conversation_games
+    set state = v_state,
+        current_turn_user_id = case when v_finished then null else v_other_user end,
+        winner_user_id = case when v_winner_idx is not null then (v_game.players->>v_winner_idx)::uuid else null end,
+        finished_at = case when v_finished then now() else null end
+    where id = p_game_id;
+
+  return v_state;
+end;
+$$;
+
+revoke all on function public.game_make_move(uuid, jsonb) from public;
+grant execute on function public.game_make_move(uuid, jsonb) to authenticated;

supabase/migrations/20260516000010_mentions_only.sql

@@ -0,0 +1,9 @@
+-- Phase 5C: per-conversation "notify only on @mentions" toggle.
+-- Lives alongside the existing muted_until column on conversation_members.
+-- When true: the renderer's incoming-message notification gate suppresses
+-- the alert unless the message contains an @-mention of the local user.
+-- Mentions always fire regardless (override-by-design via the independent
+-- useMentionNotifications subscription on message_mentions).
+
+alter table public.conversation_members
+  add column if not exists mentions_only boolean not null default false;