feat: add media save guide

src/components/messageStream/AttachmentDownloadPill.tsx

@@ -3,8 +3,12 @@ import { DownloadCloudIcon } from "../icons/DownloadCloudIcon";
 import { useState, type MouseEvent } from "react";
 import { useI18n } from "../../i18n";
 import type { Attachment } from "../../types/post";
-import { downloadAttachment } from "./utils/downloadFile";
+import { downloadAttachment, pauseActiveVideos } from "./utils/downloadFile";
 import { formatBytes } from "./utils/formatBytes";
+import {
+  mediaSaveKindFromAttachment,
+  useSaveToAlbumGuide,
+} from "../SaveToAlbumGuide";
 import { useToast } from "../Toast";
 
 type AttachmentDownloadPillProps = {
@@ -40,14 +44,18 @@ export function AttachmentDownloadPill({
 }: AttachmentDownloadPillProps) {
   const { t } = useI18n();
   const { showToast } = useToast();
+  const { showSaveToAlbumGuide } = useSaveToAlbumGuide();
   const [isDownloading, setIsDownloading] = useState(false);
 
   const handleDownload = async (e: MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
     if (isDownloading) return;
+    pauseActiveVideos();
     setIsDownloading(true);
     try {
       await downloadAttachment(postId, attachment.id, attachment.filename);
+      const mediaKind = mediaSaveKindFromAttachment(attachment);
+      if (mediaKind) showSaveToAlbumGuide(mediaKind);
     } catch {
       showToast(t("downloadFail"), "error");
     } finally {
@@ -84,6 +92,7 @@ export function AttachmentDownloadPill({
   return (
     <button
       type="button"
+      onPointerDown={(e) => e.stopPropagation()}
       onClick={handleDownload}
       disabled={isDownloading}
       className={`group z-10 inline-flex overflow-hidden rounded-full bg-black/80 ${fontCls} text-white shadow-lg ring-1 ring-inset ring-white/20 backdrop-blur-md transition hover:bg-black/90 disabled:cursor-wait ${className}`}