fix(web): refine attachment media layout

web/src/components/MemoMetadata/Attachment/AttachmentCard.tsx

 import { cn } from "@/lib/utils";
 import type { Attachment } from "@/types/proto/api/v1/attachment_service_pb";
-import { getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
+import { getAttachmentThumbnailUrl, getAttachmentType, getAttachmentUrl } from "@/utils/attachment";
 
 interface AttachmentCardProps {
   attachment: Attachment;
@@ -15,10 +15,17 @@ const AttachmentCard = ({ attachment, onClick, className }: AttachmentCardProps)
   if (attachmentType === "image/*") {
     return (
       <img
-        src={sourceUrl}
+        src={getAttachmentThumbnailUrl(attachment)}
         alt={attachment.filename}
         className={cn("w-full h-full object-cover rounded-lg cursor-pointer", className)}
         onClick={onClick}
+        onError={(e) => {
+          const target = e.currentTarget;
+          if (target.src.includes("?thumbnail=true")) {
+            target.src = sourceUrl;
+          }
+        }}
+        decoding="async"
         loading="lazy"
       />
     );

web/src/components/MemoMetadata/Attachment/AttachmentListView.tsx

-import { FileIcon, PaperclipIcon } from "lucide-react";
+import { DownloadIcon, FileIcon, Maximize2Icon, PaperclipIcon, PlayIcon } from "lucide-react";
 import { useMemo } from "react";
 import { cn } from "@/lib/utils";
 import type { Attachment } from "@/types/proto/api/v1/attachment_service_pb";
@@ -6,75 +6,144 @@ import { getAttachmentUrl } from "@/utils/attachment";
 import SectionHeader from "../SectionHeader";
 import AttachmentCard from "./AttachmentCard";
 import AudioAttachmentItem from "./AudioAttachmentItem";
-import { getAttachmentMetadata, isImageAttachment, separateAttachments } from "./attachmentViewHelpers";
+import { getAttachmentMetadata, isImageAttachment, isVideoAttachment, separateAttachments } from "./attachmentViewHelpers";
 
 interface AttachmentListViewProps {
   attachments: Attachment[];
   onImagePreview?: (urls: string[], index: number) => void;
 }
 
-const DocumentItem = ({ attachment }: { attachment: Attachment }) => {
+const AttachmentMeta = ({ attachment }: { attachment: Attachment }) => {
   const { fileTypeLabel, fileSizeLabel } = getAttachmentMetadata(attachment);
 
   return (
-    <div className="flex items-center gap-1 px-1 py-1 rounded text-xs text-muted-foreground hover:text-foreground hover:bg-accent/20 transition-colors whitespace-nowrap">
-      <div className="shrink-0 w-5 h-5 rounded overflow-hidden bg-muted/40 flex items-center justify-center">
-        <FileIcon className="w-3 h-3 text-muted-foreground" />
-      </div>
-      <div className="flex items-center gap-1 min-w-0">
-        <span className="text-xs truncate" title={attachment.filename}>
-          {attachment.filename}
-        </span>
-        <div className="flex items-center gap-1 text-xs text-muted-foreground shrink-0">
-          <span className="text-muted-foreground/50">•</span>
+    <div className="mt-1 flex flex-wrap items-center gap-x-1.5 gap-y-0.5 text-xs text-muted-foreground">
       <span>{fileTypeLabel}</span>
       {fileSizeLabel && (
         <>
-              <span className="text-muted-foreground/50">•</span>
+          <span className="text-muted-foreground/40">•</span>
           <span>{fileSizeLabel}</span>
         </>
       )}
     </div>
+  );
+};
+
+const DocumentItem = ({ attachment }: { attachment: Attachment }) => {
+  return (
+    <div className="group flex items-center justify-between gap-3 rounded-xl border border-border/70 bg-background/65 px-3 py-2.5 transition-colors hover:bg-accent/20">
+      <div className="flex min-w-0 items-center gap-3">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl bg-muted/50 text-muted-foreground">
+          <FileIcon className="h-4 w-4" />
+        </div>
+        <div className="min-w-0">
+          <div className="truncate text-sm font-medium leading-tight text-foreground" title={attachment.filename}>
+            {attachment.filename}
+          </div>
+          <AttachmentMeta attachment={attachment} />
+        </div>
       </div>
+      <DownloadIcon className="h-4 w-4 shrink-0 text-muted-foreground/60 transition-colors group-hover:text-foreground/70" />
     </div>
   );
 };
 
 interface VisualItemProps {
   attachment: Attachment;
-  onImageClick?: (url: string) => void;
+  featured?: boolean;
 }
 
-const VisualItem = ({ attachment, onImageClick }: VisualItemProps) => {
-  const isInteractive = isImageAttachment(attachment) && Boolean(onImageClick);
-
+const ImageItem = ({ attachment, onImageClick, featured = false }: VisualItemProps & { onImageClick?: (url: string) => void }) => {
   const handleClick = () => {
-    if (isInteractive) {
     onImageClick?.(getAttachmentUrl(attachment));
-    }
   };
 
   return (
+    <button
+      type="button"
+      className={cn("group block w-full text-left", featured ? "max-w-[18rem] sm:max-w-[20rem]" : "")}
+      onClick={handleClick}
+    >
       <div
         className={cn(
-        "aspect-square rounded-lg overflow-hidden bg-muted/40 border border-border hover:border-accent/50 transition-all group",
-        isInteractive && "cursor-pointer",
+          "relative overflow-hidden rounded-xl border border-border/70 bg-muted/30 transition-colors hover:border-accent/40",
+          featured ? "aspect-[4/3]" : "aspect-square",
         )}
-      onClick={handleClick}
       >
-      <AttachmentCard attachment={attachment} className="rounded-none" />
+        <AttachmentCard
+          attachment={attachment}
+          className="h-full w-full rounded-none transition-transform duration-300 group-hover:scale-[1.02]"
+        />
+
+        <div className="pointer-events-none absolute inset-0 bg-gradient-to-t from-black/15 via-transparent to-transparent opacity-0 transition-opacity group-hover:opacity-100" />
+        <span className="pointer-events-none absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-background/80 text-foreground/70 backdrop-blur-sm">
+          <Maximize2Icon className="h-3.5 w-3.5" />
+        </span>
+      </div>
+    </button>
+  );
+};
+
+const ImageGallery = ({ attachments, onImageClick }: { attachments: Attachment[]; onImageClick?: (url: string) => void }) => {
+  if (attachments.length === 1) {
+    return (
+      <div className="flex">
+        <ImageItem attachment={attachments[0]} featured onImageClick={onImageClick} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid max-w-[22rem] grid-cols-2 gap-1.5 sm:max-w-[24rem]">
+      {attachments.map((attachment) => (
+        <ImageItem key={attachment.name} attachment={attachment} onImageClick={onImageClick} />
+      ))}
     </div>
   );
 };
 
-const VisualGrid = ({ attachments, onImageClick }: { attachments: Attachment[]; onImageClick?: (url: string) => void }) => (
-  <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-2">
+const VideoItem = ({ attachment }: VisualItemProps) => (
+  <div className="w-full max-w-[20rem] overflow-hidden rounded-xl border border-border/70 bg-background/80">
+    <div className="relative aspect-video bg-muted/40">
+      <AttachmentCard attachment={attachment} className="h-full w-full rounded-none" />
+      <span className="pointer-events-none absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-full bg-background/80 text-foreground/70 backdrop-blur-sm">
+        <PlayIcon className="h-3.5 w-3.5 fill-current" />
+      </span>
+    </div>
+    <div className="border-t border-border/60 px-3 py-2.5">
+      <div className="truncate text-sm font-medium leading-tight text-foreground" title={attachment.filename}>
+        {attachment.filename}
+      </div>
+      <AttachmentMeta attachment={attachment} />
+    </div>
+  </div>
+);
+
+const VideoList = ({ attachments }: { attachments: Attachment[] }) => (
+  <div className="flex flex-wrap gap-2">
     {attachments.map((attachment) => (
-      <VisualItem key={attachment.name} attachment={attachment} onImageClick={onImageClick} />
+      <VideoItem key={attachment.name} attachment={attachment} />
     ))}
   </div>
 );
 
+const VisualSection = ({ attachments, onImageClick }: { attachments: Attachment[]; onImageClick?: (url: string) => void }) => {
+  const images = attachments.filter(isImageAttachment);
+  const videos = attachments.filter(isVideoAttachment);
+
+  return (
+    <div className="flex flex-col gap-2">
+      {images.length > 0 && <ImageGallery attachments={images} onImageClick={onImageClick} />}
+      {videos.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {images.length > 0 && <Divider />}
+          <VideoList attachments={videos} />
+        </div>
+      )}
+    </div>
+  );
+};
+
 const AudioList = ({ attachments }: { attachments: Attachment[] }) => (
   <div className="flex flex-col gap-2">
     {attachments.map((attachment) => (
@@ -84,7 +153,7 @@ const AudioList = ({ attachments }: { attachments: Attachment[] }) => (
 );
 
 const DocsList = ({ attachments }: { attachments: Attachment[] }) => (
-  <div className="flex flex-col gap-0.5">
+  <div className="flex flex-col gap-2">
     {attachments.map((attachment) => (
       <a key={attachment.name} href={getAttachmentUrl(attachment)} download title={`Download ${attachment.filename}`}>
         <DocumentItem attachment={attachment} />
@@ -93,7 +162,7 @@ const DocsList = ({ attachments }: { attachments: Attachment[] }) => (
   </div>
 );
 
-const Divider = () => <div className="border-t mt-1 border-border opacity-60" />;
+const Divider = () => <div className="border-t border-border/70 opacity-80" />;
 
 const AttachmentListView = ({ attachments, onImagePreview }: AttachmentListViewProps) => {
   const { visual, audio, docs } = useMemo(() => separateAttachments(attachments), [attachments]);
@@ -117,8 +186,8 @@ const AttachmentListView = ({ attachments, onImagePreview }: AttachmentListViewP
     <div className="w-full rounded-lg border border-border bg-muted/20 overflow-hidden">
       <SectionHeader icon={PaperclipIcon} title="Attachments" count={attachments.length} />
 
-      <div className="p-1.5 flex flex-col gap-1">
-        {visual.length > 0 && <VisualGrid attachments={visual} onImageClick={handleImageClick} />}
+      <div className="flex flex-col gap-2 p-2">
+        {visual.length > 0 && <VisualSection attachments={visual} onImageClick={handleImageClick} />}
 
         {visual.length > 0 && sectionCount > 1 && <Divider />}