feat(web): fullscreen media preview/viewer and fix media context menu

web/src/components/MessageList.tsx

@@ -28,6 +28,11 @@ type PendingDeleteState = {
   timerId: number;
 } | null;
 
+type MediaViewerState = {
+  items: Array<{ url: string; type: "image" | "video" }>;
+  index: number;
+} | null;
+
 const QUICK_REACTIONS = ["👍", "❤️", "🔥", "😂", "😮", "😢"];
 
 export function MessageList() {
@@ -60,6 +65,7 @@ export function MessageList() {
   const [pendingDelete, setPendingDelete] = useState<PendingDeleteState>(null);
   const [undoTick, setUndoTick] = useState(0);
   const [reactionsByMessage, setReactionsByMessage] = useState<Record<number, MessageReaction[]>>({});
+  const [mediaViewer, setMediaViewer] = useState<MediaViewerState>(null);
 
   const messages = useMemo(() => {
     if (!activeChatId) {
@@ -100,6 +106,7 @@ export function MessageList() {
       setForwardSelectedChatIds(new Set());
       setDeleteMessageId(null);
       setSelectedIds(new Set());
+      setMediaViewer(null);
     };
     window.addEventListener("keydown", onKeyDown);
     return () => window.removeEventListener("keydown", onKeyDown);
@@ -415,7 +422,14 @@ export function MessageList() {
                       void ensureReactionsLoaded(message.id);
                       const pos = getSafeContextPosition(event.clientX, event.clientY, 220, 280);
                       setCtx({ x: pos.x, y: pos.y, messageId: message.id, attachmentUrl: url });
-                    }
+                    },
+                    onOpenMedia: (url, type) => {
+                      const items = messages
+                        .filter((m) => (m.type === "image" || m.type === "video" || m.type === "circle_video") && !!m.text)
+                        .map((m) => ({ url: m.text as string, type: (m.type === "image" ? "image" : "video") as "image" | "video" }));
+                      const idx = items.findIndex((i) => i.url === url && i.type === type);
+                      setMediaViewer({ items, index: idx >= 0 ? idx : 0 });
+                    },
                   })}
 
                   {messageReactions.length > 0 ? (
@@ -620,6 +634,75 @@ export function MessageList() {
         </div>
       ) : null}
 
+      {mediaViewer ? (
+        <div className="fixed inset-0 z-[170] flex items-center justify-center bg-slate-950/90 p-2 md:p-4" onClick={() => setMediaViewer(null)}>
+          <div className="relative flex h-full w-full max-w-5xl items-center justify-center" onClick={(event) => event.stopPropagation()}>
+            <button
+              className="absolute left-1 top-1 z-10 rounded-full bg-slate-900/80 px-3 py-2 text-xs text-slate-200 hover:bg-slate-800 md:left-3 md:top-3"
+              onClick={() => setMediaViewer(null)}
+              type="button"
+            >
+              Close
+            </button>
+
+            {mediaViewer.items.length > 1 ? (
+              <>
+                <button
+                  className="absolute left-1/2 top-3 z-10 -translate-x-1/2 rounded-full bg-slate-900/80 px-2 py-1 text-xs text-slate-200 md:top-4"
+                  type="button"
+                >
+                  {mediaViewer.index + 1} / {mediaViewer.items.length}
+                </button>
+                <button
+                  className="absolute left-1 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 px-3 py-3 text-lg text-slate-200 hover:bg-slate-800 md:left-3"
+                  onClick={() =>
+                    setMediaViewer((prev) =>
+                      prev ? { ...prev, index: prev.index <= 0 ? prev.items.length - 1 : prev.index - 1 } : prev
+                    )
+                  }
+                  type="button"
+                >
+                  ‹
+                </button>
+                <button
+                  className="absolute right-1 top-1/2 z-10 -translate-y-1/2 rounded-full bg-slate-900/80 px-3 py-3 text-lg text-slate-200 hover:bg-slate-800 md:right-3"
+                  onClick={() =>
+                    setMediaViewer((prev) =>
+                      prev ? { ...prev, index: prev.index >= prev.items.length - 1 ? 0 : prev.index + 1 } : prev
+                    )
+                  }
+                  type="button"
+                >
+                  ›
+                </button>
+              </>
+            ) : null}
+
+            <button
+              className="absolute right-1 top-1 z-10 rounded-full bg-slate-900/80 px-3 py-2 text-xs text-slate-200 hover:bg-slate-800 md:right-3 md:top-3"
+              onClick={async () => {
+                const current = mediaViewer.items[mediaViewer.index];
+                try {
+                  await downloadFileFromUrl(current.url);
+                  showToast("File downloaded");
+                } catch {
+                  showToast("Download failed");
+                }
+              }}
+              type="button"
+            >
+              Download
+            </button>
+
+            {mediaViewer.items[mediaViewer.index]?.type === "image" ? (
+              <img className="max-h-full max-w-full rounded-xl object-contain" src={mediaViewer.items[mediaViewer.index].url} alt="media" />
+            ) : (
+              <video className="max-h-full max-w-full rounded-xl" controls src={mediaViewer.items[mediaViewer.index].url} />
+            )}
+          </div>
+        </div>
+      ) : null}
+
       {deleteMessageId ? (
         <div className="absolute inset-0 z-50 flex items-end justify-center bg-slate-950/55 p-3" onClick={() => setDeleteMessageId(null)}>
           <div className="w-full rounded-xl border border-slate-700/80 bg-slate-900 p-3" onClick={(event) => event.stopPropagation()}>
@@ -663,29 +746,52 @@ export function MessageList() {
 function renderMessageContent(
   messageType: string,
   text: string | null,
-  opts: { onAttachmentContextMenu: (event: MouseEvent<HTMLElement>, url: string) => void }
+  opts: {
+    onAttachmentContextMenu: (event: MouseEvent<HTMLElement>, url: string) => void;
+    onOpenMedia: (url: string, type: "image" | "video") => void;
+  }
 ) {
   if (!text) return <p className="opacity-80">[empty]</p>;
 
   if (messageType === "image") {
     return (
-      <div className="overflow-hidden rounded-xl bg-slate-950/30" onContextMenu={(event) => opts.onAttachmentContextMenu(event, text)}>
+      <button
+        className="block overflow-hidden rounded-xl bg-slate-950/30"
+        onClick={() => opts.onOpenMedia(text, "image")}
+        onContextMenu={(event) => {
+          event.stopPropagation();
+          opts.onAttachmentContextMenu(event, text);
+        }}
+        type="button"
+      >
         <img alt="attachment" className="max-h-80 rounded-xl object-cover" draggable={false} src={text} />
-      </div>
+      </button>
     );
   }
 
   if (messageType === "video" || messageType === "circle_video") {
     return (
-      <div className="overflow-hidden rounded-xl bg-slate-950/30" onContextMenu={(event) => opts.onAttachmentContextMenu(event, text)}>
-        <video className="max-h-80 rounded-xl" controls src={text} />
-      </div>
+      <button
+        className="relative block overflow-hidden rounded-xl bg-slate-950/30"
+        onClick={() => opts.onOpenMedia(text, "video")}
+        onContextMenu={(event) => {
+          event.stopPropagation();
+          opts.onAttachmentContextMenu(event, text);
+        }}
+        type="button"
+      >
+        <video className="max-h-80 rounded-xl" muted src={text} />
+        <span className="absolute inset-0 flex items-center justify-center text-3xl text-white/85">▶</span>
+      </button>
     );
   }
 
   if (messageType === "voice") {
     return (
-      <div className="rounded-xl border border-slate-700/60 bg-slate-950/30 p-2" onContextMenu={(event) => opts.onAttachmentContextMenu(event, text)}>
+      <div className="rounded-xl border border-slate-700/60 bg-slate-950/30 p-2" onContextMenu={(event) => {
+        event.stopPropagation();
+        opts.onAttachmentContextMenu(event, text);
+      }}>
         <div className="mb-1 flex items-center gap-2 text-xs text-slate-300">
           <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-slate-700/80">🎤</span>
           <span className="font-semibold">Voice message</span>
@@ -697,7 +803,10 @@ function renderMessageContent(
 
   if (messageType === "audio") {
     return (
-      <div className="rounded-xl border border-slate-700/60 bg-slate-950/30 p-2" onContextMenu={(event) => opts.onAttachmentContextMenu(event, text)}>
+      <div className="rounded-xl border border-slate-700/60 bg-slate-950/30 p-2" onContextMenu={(event) => {
+        event.stopPropagation();
+        opts.onAttachmentContextMenu(event, text);
+      }}>
         <div className="mb-1 flex items-center gap-2 text-xs text-slate-300">
           <span className="inline-flex h-7 w-7 items-center justify-center rounded-full bg-slate-700/80">🎵</span>
           <div className="min-w-0">
@@ -714,7 +823,10 @@ function renderMessageContent(
     return (
         <button
           className="w-full rounded-xl border border-slate-600/60 bg-slate-800/70 px-3 py-2 text-left"
-          onContextMenu={(event) => opts.onAttachmentContextMenu(event, text)}
+          onContextMenu={(event) => {
+            event.stopPropagation();
+            opts.onAttachmentContextMenu(event, text);
+          }}
           onClick={() => window.open(text, "_blank", "noopener,noreferrer")}
           type="button"
         >