feat: add media overflow pickers

src/components/messageStream/bubbles/AlbumBubble.tsx

@@ -1,7 +1,12 @@
+import { ArrowDownToLine, LoaderCircle, X } from "lucide-react";
+import { useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
 import { useLightbox } from "../overlays/ImageLightbox";
 import { autolink } from "../utils/autolink";
+import { downloadAttachment } from "../utils/downloadFile";
+import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 const MAX_VISIBLE = 4;
@@ -10,9 +15,130 @@ function imageRatio(att: Attachment) {
   return att.width && att.height ? `${att.width} / ${att.height}` : "4 / 3";
 }
 
+function ImageListDownloadButton({
+  postId,
+  attachment,
+}: {
+  postId: string;
+  attachment: Attachment;
+}) {
+  const { t } = useI18n();
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    void downloadAttachment(postId, attachment.id, attachment.filename)
+      .finally(() => setIsDownloading(false))
+      .catch(() => {});
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        handleDownload();
+      }}
+      disabled={isDownloading}
+      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20 disabled:cursor-wait"
+      aria-label={
+        isDownloading ? t("downloading") : `Download ${attachment.filename}`
+      }
+      aria-busy={isDownloading}
+    >
+      {isDownloading ? (
+        <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
+      ) : (
+        <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
+      )}
+    </button>
+  );
+}
+
+function ImageListDialog({
+  postId,
+  images,
+  onClose,
+  onPick,
+}: {
+  postId: string;
+  images: Attachment[];
+  onClose: () => void;
+  onPick: (index: number) => void;
+}) {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/75 px-4 backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Image list"
+    >
+      <div
+        className="w-full max-w-md overflow-hidden rounded-2xl border border-ark-line bg-ark-panel shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-ark-line px-4 py-3">
+          <div className="text-sm font-semibold text-neutral-100">选择图片</div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto p-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {images.map((image, index) => (
+            <div
+              key={image.id}
+              className="flex w-full items-center gap-3 rounded-xl p-2 text-left transition hover:bg-white/5"
+            >
+              <button
+                type="button"
+                onClick={() => onPick(index)}
+                className="flex min-w-0 flex-1 items-center gap-3 text-left"
+              >
+                <div className="h-16 w-16 shrink-0 overflow-hidden rounded-lg bg-black">
+                  <img
+                    src={image.thumbnailUrl ?? image.url}
+                    alt=""
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className="truncate text-sm font-medium text-neutral-100">
+                    图片 {index + 1}
+                  </div>
+                  <div className="mt-1 truncate text-xs text-neutral-400">
+                    {formatBytes(image.sizeBytes)}
+                  </div>
+                </div>
+              </button>
+              <ImageListDownloadButton postId={postId} attachment={image} />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 export function AlbumBubble({ post }: { post: Post }) {
   const { openLightbox } = useLightbox();
   const { lang } = useI18n();
+  const [listOpen, setListOpen] = useState(false);
   const images = post.attachments;
   const text = postDisplayText(post, lang);
   const shouldMerge = images.length > MAX_VISIBLE;
@@ -58,9 +184,12 @@ export function AlbumBubble({ post }: { post: Post }) {
             <button
               key={att.id}
               type="button"
-              onClick={() => openLightbox(images, i, text, post.id)}
+              onClick={() => {
+                if (isLastSlot) setListOpen(true);
+                else openLightbox(images, i, text, post.id);
+              }}
               className="relative block h-full w-full overflow-hidden"
-              aria-label={att.filename}
+              aria-label={isLastSlot ? "Open image list" : att.filename}
             >
               <img
                 src={att.thumbnailUrl ?? att.url}
@@ -84,6 +213,17 @@ export function AlbumBubble({ post }: { post: Post }) {
           {autolink(text)}
         </div>
       ) : null}
+      {listOpen ? (
+        <ImageListDialog
+          postId={post.id}
+          images={images}
+          onClose={() => setListOpen(false)}
+          onPick={(index) => {
+            setListOpen(false);
+            openLightbox(images, index, text, post.id);
+          }}
+        />
+      ) : null}
     </div>
   );
 }

src/components/messageStream/bubbles/VideoBubble.tsx

@@ -1,10 +1,13 @@
-import { Play } from "lucide-react";
+import { ArrowDownToLine, LoaderCircle, Play, X } from "lucide-react";
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 import { useI18n } from "../../../i18n";
 import type { Attachment, Post } from "../../../types/post";
 import { AttachmentDownloadPill } from "../AttachmentDownloadPill";
 import { useVideoPlayer } from "../overlays/VideoPlayer";
 import { autolink } from "../utils/autolink";
+import { downloadAttachment } from "../utils/downloadFile";
+import { formatBytes } from "../utils/formatBytes";
 import { postDisplayText } from "../utils/postText";
 
 const MAX_VISIBLE = 4;
@@ -29,11 +32,13 @@ function VideoAttachmentCard({
   attachment,
   compact = false,
   overlayCount,
+  onMoreClick,
 }: {
   postId: string;
   attachment: Attachment;
   compact?: boolean;
   overlayCount?: number;
+  onMoreClick?: () => void;
 }) {
   const { openVideo } = useVideoPlayer();
   const [playing, setPlaying] = useState(false);
@@ -103,10 +108,10 @@ function VideoAttachmentCard({
               type="button"
               onClick={(e) => {
                 e.stopPropagation();
-                openVideo(attachment, 0);
+                onMoreClick?.();
               }}
               className="absolute inset-0 flex items-center justify-center bg-black/45 text-3xl font-semibold text-white"
-              aria-label="Open more videos"
+              aria-label="Open video list"
             >
               +{overlayCount}
             </button>
@@ -140,8 +145,156 @@ function VideoAttachmentCard({
   );
 }
 
+function AttachmentListDownloadButton({
+  postId,
+  attachment,
+}: {
+  postId: string;
+  attachment: Attachment;
+}) {
+  const { t } = useI18n();
+  const [isDownloading, setIsDownloading] = useState(false);
+
+  const handleDownload = () => {
+    if (isDownloading) return;
+    setIsDownloading(true);
+    void downloadAttachment(postId, attachment.id, attachment.filename)
+      .finally(() => setIsDownloading(false))
+      .catch(() => {});
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={(e) => {
+        e.stopPropagation();
+        handleDownload();
+      }}
+      disabled={isDownloading}
+      className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20 disabled:cursor-wait"
+      aria-label={
+        isDownloading ? t("downloading") : `Download ${attachment.filename}`
+      }
+      aria-busy={isDownloading}
+    >
+      {isDownloading ? (
+        <LoaderCircle className="h-4 w-4 animate-spin" strokeWidth={2.3} />
+      ) : (
+        <ArrowDownToLine className="h-4 w-4" strokeWidth={2.3} />
+      )}
+    </button>
+  );
+}
+
+function VideoListDialog({
+  postId,
+  videos,
+  onClose,
+  onPick,
+}: {
+  postId: string;
+  videos: Attachment[];
+  onClose: () => void;
+  onPick: (attachment: Attachment) => void;
+}) {
+  useEffect(() => {
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[100] flex items-center justify-center bg-black/75 px-4 backdrop-blur-sm"
+      onClick={onClose}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Video list"
+    >
+      <div
+        className="w-full max-w-md overflow-hidden rounded-2xl border border-ark-line bg-ark-panel shadow-2xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <div className="flex items-center justify-between border-b border-ark-line px-4 py-3">
+          <div className="text-sm font-semibold text-neutral-100">选择视频</div>
+          <button
+            type="button"
+            onClick={onClose}
+            className="flex h-8 w-8 items-center justify-center rounded-full bg-white/10 text-white transition hover:bg-white/20"
+            aria-label="Close"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+        <div className="max-h-[70vh] overflow-y-auto p-2 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+          {videos.map((video, index) => {
+            const thumb = video.posterUrl ?? video.thumbnailUrl;
+            const previewVideoUrl = video.url.includes("#")
+              ? video.url
+              : `${video.url}#t=0.1`;
+            const duration = formatDuration(video.durationSec);
+            return (
+              <div
+                key={video.id}
+                className="flex w-full items-center gap-3 rounded-xl p-2 text-left transition hover:bg-white/5"
+              >
+                <button
+                  type="button"
+                  onClick={() => onPick(video)}
+                  className="flex min-w-0 flex-1 items-center gap-3 text-left"
+                >
+                  <div className="relative h-16 w-24 shrink-0 overflow-hidden rounded-lg bg-black">
+                    {thumb ? (
+                      <img
+                        src={thumb}
+                        alt=""
+                        className="h-full w-full object-cover"
+                      />
+                    ) : (
+                      <video
+                        src={previewVideoUrl}
+                        preload="metadata"
+                        muted
+                        playsInline
+                        className="h-full w-full object-cover"
+                        aria-hidden="true"
+                      />
+                    )}
+                    <div className="absolute inset-0 flex items-center justify-center bg-black/20 text-white">
+                      <Play className="h-4 w-4 fill-white" />
+                    </div>
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="truncate text-sm font-medium text-neutral-100">
+                      视频 {index + 1}
+                    </div>
+                    <div className="mt-1 truncate text-xs text-neutral-400">
+                      {[duration, formatBytes(video.sizeBytes)]
+                        .filter(Boolean)
+                        .join(" · ")}
+                    </div>
+                  </div>
+                </button>
+                <AttachmentListDownloadButton
+                  postId={postId}
+                  attachment={video}
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
 export function VideoBubble({ post }: { post: Post }) {
   const { lang } = useI18n();
+  const { openVideo } = useVideoPlayer();
+  const [listOpen, setListOpen] = useState(false);
   const videos = post.attachments.filter(isVideoAttachment);
   const text = postDisplayText(post, lang);
   const shouldMerge = videos.length > MAX_VISIBLE;
@@ -163,6 +316,7 @@ export function VideoBubble({ post }: { post: Post }) {
                 attachment={att}
                 compact
                 overlayCount={isLastSlot ? extra : undefined}
+                onMoreClick={() => setListOpen(true)}
               />
             );
           })}
@@ -172,6 +326,17 @@ export function VideoBubble({ post }: { post: Post }) {
             {autolink(text)}
           </div>
         ) : null}
+        {listOpen ? (
+          <VideoListDialog
+            postId={post.id}
+            videos={videos}
+            onClose={() => setListOpen(false)}
+            onPick={(att) => {
+              setListOpen(false);
+              openVideo(att, 0);
+            }}
+          />
+        ) : null}
       </div>
     );
   }