feat(P5A.T5): composer Watch-Together button + bubble dispatch

apps/desktop/src/pages/ConversationPage.tsx

@@ -46,9 +46,11 @@ import {
   collectConversationAttachments,
   createPollPayload,
   createWhiteboardPayload,
+  createWatchTogetherPayload,
 } from '../lib/conversationFeatures';
 import { WhiteboardModal } from '../components/WhiteboardModal';
-import { createWhiteboard } from '@chat-app/shared/chat';
+import { WatchTogetherModal } from '../components/WatchTogetherModal';
+import { createWhiteboard, createWatchSession, parseYouTubeUrl } from '@chat-app/shared/chat';
 import { compressImages } from '../lib/imageCompress';
 import { ensureInstallId } from '../lib/installId';
 import { searchCachedMessages } from '../lib/messageCache';
@@ -169,6 +171,11 @@ 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 [pollError, setPollError] = useState<string | null>(null);
   const [replyTo, setReplyTo] = useState<DecryptedMessage | null>(null);
   const [forwardTarget, setForwardTarget] = useState<DecryptedMessage | null>(null);
@@ -472,6 +479,15 @@ 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(() => {
     if (id && messages.length > 0) markRead(id);
   }, [id, messages.length, markRead]);
@@ -622,6 +638,31 @@ 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]);
+
   async function ingestFiles(files: File[]) {
     const compressed = await compressImages(files);
     const next: File[] = [];
@@ -1025,6 +1066,15 @@ 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>
           <div className="relative">
             <button
               type="button"
@@ -1231,6 +1281,59 @@ export function ConversationPage() {
           onClose={() => setOpenWhiteboardId(null)}
         />
       )}
+
+      {openWatchSessionId && (
+        <WatchTogetherModal
+          sessionId={openWatchSessionId}
+          onClose={() => setOpenWatchSessionId(null)}
+        />
+      )}
+
+      {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 +1623,13 @@ 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>
+  );
+}