feat(call): shared annotation overlay on screen share

apps/desktop/src/components/ScreenShareViewer.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'react-i18next';
 
 import { type RemoteScreenShare, useCall } from '../context/CallContext';
 import { MonitorShareIcon } from './icons';
+import { ScreenShareAnnotations } from './ScreenShareAnnotations';
 
 interface ScreenShareViewerProps {
   share: RemoteScreenShare;
@@ -34,6 +35,7 @@ export function ScreenShareViewer({
   const { watchingShareUserIds, watchShare } = useCall();
   const watching = watchingShareUserIds.has(share.participantId);
   const [isFullscreen, setIsFullscreen] = useState(false);
+  const [annotateEnabled, setAnnotateEnabled] = useState(false);
   const letter = displayName.trim().charAt(0).toUpperCase() || '?';
 
   useEffect(() => {
@@ -96,21 +98,28 @@ export function ScreenShareViewer({
       </div>
 
       {watching ? (
-        <video
-          ref={videoRef}
-          autoPlay
-          playsInline
-          muted
-          // Suppress the browser's built-in <video> context menu
-          // ("Save Video As…", PiP, …) so the right-click event bubbles
-          // to the wrapping tile div in InCallPanel — that's where the
-          // app's volume / mute menu is wired up. Without this, the
-          // native menu opens on top of ours in focus + fullscreen
-          // modes (where the video covers the whole tile).
-          onContextMenu={(e) => e.preventDefault()}
-          onDoubleClick={toggleFullscreen}
-          className="block h-full w-full flex-1 cursor-zoom-in bg-black object-contain"
-        />
+        <div className="relative h-full w-full flex-1">
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            muted
+            // Suppress the browser's built-in <video> context menu
+            // ("Save Video As…", PiP, …) so the right-click event bubbles
+            // to the wrapping tile div in InCallPanel — that's where the
+            // app's volume / mute menu is wired up. Without this, the
+            // native menu opens on top of ours in focus + fullscreen
+            // modes (where the video covers the whole tile).
+            onContextMenu={(e) => e.preventDefault()}
+            onDoubleClick={toggleFullscreen}
+            className="block h-full w-full cursor-zoom-in bg-black object-contain"
+          />
+          <ScreenShareAnnotations
+            shareKey={share.participantId}
+            enabled={annotateEnabled}
+            onToggleEnabled={setAnnotateEnabled}
+          />
+        </div>
       ) : (
         <button
           type="button"