feat(call): Discord-style screen-share UX

- Watch-gate lifted into CallContext. watchingShareUserIds /
  dismissedShareUserIds / screenShareAudioMutedIds as session-only state,
  cleared on CallState.idle and on TrackUnsubscribed for each sharer.
  Survives layout changes (grid <-> focus <-> fullscreen) without
  resetting which the old local-state viewer dropped on remount.
- ScreenShareAudio tracks tagged via data-track-source="screenshare" at
  attach-time; initial muted follows watching + manual mute mirrors so
  audio never plays before the user clicks "Bildschirm anschauen". Deafen
  still wins at the top of the priority chain.
- New screenShareVolumes store (session-only, keyed by participantId).
  attachTrack pulls the initial volume from this store for screenshare
  audio elements so the context-menu slider takes effect immediately.
- Screen shares are no longer auto-promoted to focus. They render as
  equal-size grid tiles like everyone else; user clicks to focus. The
  "Bildschirm anschauen" overlay replaces auto-play as the opt-in.
- Dismissed sharer-ids filter out of buildTiles, so "Zuschauen beenden"
  really hides the tile until the sharer stops + restarts.
- New ScreenShareContextMenu (portal, Esc / outside-click to close):
  volume slider + audio mute toggle when the share has audio + a
  destructive "Zuschauen beenden" row. Wired via a dispatcher in
  InCallPanel that picks between participant-volume and share-menu
  based on tile.kind.
- Fullscreen cinema gets a "Hide participant strip" toggle (top-right,
  session-only) so focused content reaches the full viewport when the
  bottom thumbnail row would otherwise steal 160px. Fades with the
  auto-hide controls; only surfaces when there's a focus + peers to hide.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/desktop/src/components/ScreenShareViewer.tsx

@@ -2,7 +2,7 @@ import type { RemoteTrack } from 'livekit-client';
 import { useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import type { RemoteScreenShare } from '../context/CallContext';
+import { type RemoteScreenShare, useCall } from '../context/CallContext';
 import { MonitorShareIcon } from './icons';
 
 interface ScreenShareViewerProps {
@@ -12,12 +12,21 @@ interface ScreenShareViewerProps {
 }
 
 // Click-to-watch gate, live <video> attach/detach, native fullscreen toggle.
-// Lifted out of the old InCallPanel so the new CallDock stays lean.
-export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShareViewerProps) {
+// The watch-state lives in CallContext (not local useState) so it survives
+// layout-mode changes (grid → focus → fullscreen) without resetting. Same
+// reason the ScreenShareAudio mute follows this state — see attachTrack.
+// Right-click handling happens one level up in TileRender — the wrapping
+// div catches the event before it reaches the viewer's inner content.
+export function ScreenShareViewer({
+  share,
+  avatarUrl,
+  displayName,
+}: ScreenShareViewerProps) {
   const { t } = useTranslation(['app']);
   const videoRef = useRef<HTMLVideoElement | null>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
-  const [watching, setWatching] = useState(false);
+  const { watchingShareUserIds, watchShare } = useCall();
+  const watching = watchingShareUserIds.has(share.participantId);
   const [isFullscreen, setIsFullscreen] = useState(false);
   const letter = displayName.trim().charAt(0).toUpperCase() || '?';
 
@@ -68,31 +77,15 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
           })}
         </span>
         {watching && (
-          <>
-            <button
-              type="button"
-              onClick={toggleFullscreen}
-              aria-label={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
-              title={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
-              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            >
-              <FullscreenIcon className="h-3.5 w-3.5" />
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                if (document.fullscreenElement === containerRef.current) {
-                  void document.exitFullscreen();
-                }
-                setWatching(false);
-              }}
-              aria-label={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
-              title={t('app:call.stop_watching', { defaultValue: 'Nicht mehr anschauen' })}
-              className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
-            >
-              <span aria-hidden="true" className="text-[14px] leading-none">×</span>
-            </button>
-          </>
+          <button
+            type="button"
+            onClick={toggleFullscreen}
+            aria-label={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
+            title={t('app:call.fullscreen', { defaultValue: 'Vollbild' })}
+            className="inline-flex h-6 w-6 cursor-pointer items-center justify-center rounded-md text-emerald-200 transition hover:bg-white/10 focus:outline-none focus-visible:ring-2 focus-visible:ring-emerald-400/40"
+          >
+            <FullscreenIcon className="h-3.5 w-3.5" />
+          </button>
         )}
       </div>
 
@@ -108,7 +101,7 @@ export function ScreenShareViewer({ share, avatarUrl, displayName }: ScreenShare
       ) : (
         <button
           type="button"
-          onClick={() => setWatching(true)}
+          onClick={() => watchShare(share.participantId)}
           aria-label={t('app:call.watch_screen', { defaultValue: 'Bildschirm anschauen' })}
           className="group relative block w-full cursor-pointer overflow-hidden bg-ink-900 focus:outline-none"
           style={{ aspectRatio: '16 / 9' }}