chore: update resource view

web/src/components/MemoResourceListView.tsx

@@ -1,9 +1,9 @@
 import { memo } from "react";
 import { Resource } from "@/types/proto/api/v1/resource_service";
+import { cn } from "@/utils";
 import { getResourceType, getResourceUrl } from "@/utils/resource";
 import MemoResource from "./MemoResource";
 import showPreviewImageDialog from "./PreviewImageDialog";
-import SquareDiv from "./kit/SquareDiv";
 
 const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) => {
   const mediaResources: Resource[] = [];
@@ -27,14 +27,14 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
     showPreviewImageDialog(imgUrls, index);
   };
 
-  const MediaCard = ({ resource }: { resource: Resource }) => {
+  const MediaCard = ({ resource, className }: { resource: Resource; className?: string }) => {
     const type = getResourceType(resource);
     const resourceUrl = getResourceUrl(resource);
 
     if (type === "image/*") {
       return (
         <img
-          className="cursor-pointer min-h-full w-auto object-cover"
+          className={cn("cursor-pointer h-full w-auto rounded-lg border dark:border-zinc-800 object-contain hover:opacity-80", className)}
           src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=true"}
           onClick={() => handleImageClick(resourceUrl)}
           decoding="async"
@@ -44,7 +44,10 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
     } else if (type === "video/*") {
       return (
         <video
-          className="cursor-pointer w-full h-full object-contain bg-zinc-100 dark:bg-zinc-800"
+          className={cn(
+            "cursor-pointer h-full w-auto rounded-lg border dark:border-zinc-800 object-contain bg-zinc-100 dark:bg-zinc-800",
+            className,
+          )}
           preload="metadata"
           crossOrigin="anonymous"
           src={resourceUrl}
@@ -57,37 +60,31 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
   };
 
   const MediaList = ({ resources = [] }: { resources: Resource[] }) => {
-    if (resources.length === 0) return <></>;
-
     if (resources.length === 1) {
+      const resource = mediaResources[0];
       return (
-        <div className="max-w-full flex justify-center items-center border dark:border-zinc-800 rounded overflow-hidden hide-scrollbar hover:shadow-md">
-          <MediaCard resource={mediaResources[0]} />
+        <div className="max-w-full flex flex-col justify-start items-start overflow-hidden hide-scrollbar">
+          <MediaCard className="max-h-64" resource={resource} />
+          <span className="max-w-full text-xs pl-1 text-gray-400 dark:text-zinc-500 truncate">{resource.filename}</span>
         </div>
       );
     }
 
     const cards = resources.map((resource) => (
-      <SquareDiv
-        key={resource.name}
-        className="flex justify-center items-center border dark:border-zinc-900 rounded overflow-hidden hide-scrollbar hover:shadow-md"
-      >
-        <MediaCard resource={resource} />
-      </SquareDiv>
+      <div key={resource.name} className="max-w-[70%] flex flex-col justify-start items-start shrink-0">
+        <MediaCard className="max-h-64" resource={resource} />
+        <span className="max-w-full text-xs pl-1 text-gray-400 dark:text-zinc-500 truncate">{resource.filename}</span>
+      </div>
     ));
 
-    if (resources.length === 2 || resources.length === 4) {
-      return <div className="w-full grid gap-2 grid-cols-2">{cards}</div>;
-    }
-
-    return <div className="w-full grid gap-2 grid-cols-2 sm:grid-cols-3">{cards}</div>;
+    return <div className="w-full flex flex-row justify-start overflow-auto gap-2">{cards}</div>;
   };
 
   const OtherList = ({ resources = [] }: { resources: Resource[] }) => {
     if (resources.length === 0) return <></>;
 
     return (
-      <div className="w-full flex flex-row justify-start flex-wrap gap-2">
+      <div className="w-full flex flex-row justify-start overflow-auto gap-2">
         {otherResources.map((resource) => (
           <MemoResource key={resource.name} resource={resource} />
         ))}
@@ -97,7 +94,7 @@ const MemoResourceListView = ({ resources = [] }: { resources: Resource[] }) =>
 
   return (
     <>
-      <MediaList resources={mediaResources} />
+      {mediaResources.length > 0 && <MediaList resources={mediaResources} />}
       <OtherList resources={otherResources} />
     </>
   );