chore: update resource icons

web/src/components/MemoEditor/ResourceListView.tsx

@@ -21,11 +21,14 @@ const ResourceListView = (props: Props) => {
             return (
               <div
                 key={resource.id}
-                className="max-w-full flex flex-row justify-start items-center flex-nowrap bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"
+                className="max-w-full flex flex-row justify-start items-center flex-nowrap gap-x-1 bg-gray-100 dark:bg-zinc-800 px-2 py-1 rounded text-gray-500"
               >
-                <ResourceIcon resource={resource} className="w-4 h-auto mr-1" />
-                <span className="text-sm max-w-xs truncate">{resource.filename}</span>
-                <Icon.X className="w-4 h-auto ml-1 cursor-pointer hover:opacity-80" onClick={() => handleDeleteResource(resource.id)} />
+                <ResourceIcon resource={resource} className="!w-4 !h-auto !opacity-100" />
+                <span className="text-sm max-w-[8rem] truncate">{resource.filename}</span>
+                <Icon.X
+                  className="w-4 h-auto cursor-pointer opacity-60 hover:opacity-100"
+                  onClick={() => handleDeleteResource(resource.id)}
+                />
               </div>
             );
           })}

web/src/components/ResourceCard.tsx

@@ -1,34 +1,22 @@
-import { useState } from "react";
 import { getDateTimeString } from "@/helpers/datetime";
-import Icon from "./Icon";
-import ResourceCover from "./ResourceCover";
+import ResourceIcon from "./ResourceIcon";
 import ResourceItemDropdown from "./ResourceItemDropdown";
 import "@/less/resource-card.less";
 
-const ResourceCard = ({ resource, handleCheckClick, handleUncheckClick }: ResourceItemType) => {
-  const [isSelected, setIsSelected] = useState<boolean>(false);
-
-  const handleSelectBtnClick = () => {
-    if (isSelected) {
-      handleUncheckClick();
-    } else {
-      handleCheckClick();
-    }
-    setIsSelected(!isSelected);
-  };
+interface Props {
+  resource: Resource;
+}
 
+const ResourceCard = ({ resource }: Props) => {
   return (
     <div className="resource-card">
-      <div className="w-full p-2 flex flex-row justify-between items-center absolute top-0 left-0">
-        <div onClick={() => handleSelectBtnClick()}>
-          {isSelected ? <Icon.CheckCircle2 className="resource-checkbox !flex" /> : <Icon.Circle className="resource-checkbox" />}
-        </div>
+      <div className="w-full p-2 flex flex-row justify-end items-center absolute top-0 left-0">
         <div className="more-action-btn">
           <ResourceItemDropdown resource={resource} />
         </div>
       </div>
       <div className="w-full flex flex-row justify-center items-center pb-2 pt-4 px-2">
-        <ResourceCover resource={resource} />
+        <ResourceIcon resource={resource} strokeWidth={1} />
       </div>
       <div className="w-full flex flex-col justify-start items-center px-1 select-none">
         <div className="w-full text-base text-center text-ellipsis overflow-hidden line-clamp-3">{resource.filename}</div>

web/src/components/ResourceCover.tsx

@@ -1,49 +0,0 @@
-import React from "react";
-import { getResourceType, getResourceUrl } from "@/utils/resource";
-import Icon from "./Icon";
-import showPreviewImageDialog from "./PreviewImageDialog";
-import SquareDiv from "./kit/SquareDiv";
-import "@/less/resource-cover.less";
-
-interface ResourceCoverProps {
-  resource: Resource;
-}
-
-const ResourceCover = ({ resource }: ResourceCoverProps) => {
-  const resourceType = getResourceType(resource);
-  const resourceUrl = getResourceUrl(resource);
-  switch (resourceType) {
-    case "image/*":
-      return (
-        <SquareDiv className="h-20 w-20 flex items-center justify-center overflow-clip">
-          <img
-            className="max-w-full max-h-full object-cover shadow"
-            src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
-            onClick={() => showPreviewImageDialog(resourceUrl)}
-          />
-        </SquareDiv>
-      );
-    case "video/*":
-      return <Icon.FileVideo2 className="resource-cover" />;
-    case "audio/*":
-      return <Icon.FileAudio className="resource-cover" />;
-    case "text/*":
-      return <Icon.FileText className="resource-cover" />;
-    case "application/epub+zip":
-      return <Icon.Book className="resource-cover" />;
-    case "application/pdf":
-      return <Icon.Book className="resource-cover" />;
-    case "application/msword":
-      return <Icon.FileEdit className="resource-cover" />;
-    case "application/msexcel":
-      return <Icon.SheetIcon className="resource-cover" />;
-    case "application/zip":
-      return <Icon.FileArchiveIcon className="resource-cover" />;
-    case "application/x-java-archive":
-      return <Icon.BinaryIcon className="resource-cover" />;
-    default:
-      return <Icon.File className="resource-cover" />;
-  }
-};
-
-export default React.memo(ResourceCover);

web/src/components/ResourceIcon.tsx

@@ -1,34 +1,55 @@
 import classNames from "classnames";
+import React from "react";
 import { getResourceType, getResourceUrl } from "@/utils/resource";
 import Icon from "./Icon";
 import showPreviewImageDialog from "./PreviewImageDialog";
 import SquareDiv from "./kit/SquareDiv";
 
 interface Props {
-  className: string;
   resource: Resource;
+  className?: string;
+  strokeWidth?: number;
 }
 
 const ResourceIcon = (props: Props) => {
-  const { className, resource } = props;
+  const { resource } = props;
+  const resourceType = getResourceType(resource);
+  const resourceUrl = getResourceUrl(resource);
+  const className = classNames("w-full h-auto", props.className);
+  const strokeWidth = props.strokeWidth;
 
-  if (getResourceType(resource).startsWith("image")) {
-    const url = getResourceUrl(resource);
-    return (
-      <SquareDiv key={resource.id} className={classNames("cursor-pointer rounded hover:shadow", className)}>
-        <img
-          className="min-h-full min-w-full w-auto h-auto rounded"
-          src={resource.externalLink ? url : url + "?thumbnail=1"}
-          onClick={() => showPreviewImageDialog([url], 0)}
-          decoding="async"
-          loading="lazy"
-        />
-      </SquareDiv>
-    );
+  switch (resourceType) {
+    case "image/*":
+      return (
+        <SquareDiv className={classNames(className, "flex items-center justify-center overflow-clip")}>
+          <img
+            className="max-w-full max-h-full object-cover shadow"
+            src={resource.externalLink ? resourceUrl : resourceUrl + "?thumbnail=1"}
+            onClick={() => showPreviewImageDialog(resourceUrl)}
+          />
+        </SquareDiv>
+      );
+    case "video/*":
+      return <Icon.FileVideo2 strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "audio/*":
+      return <Icon.FileAudio strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "text/*":
+      return <Icon.FileText strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "application/epub+zip":
+      return <Icon.Book strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "application/pdf":
+      return <Icon.Book strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "application/msword":
+      return <Icon.FileEdit strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "application/msexcel":
+      return <Icon.SheetIcon strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "application/zip":
+      return <Icon.FileArchiveIcon strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    case "application/x-java-archive":
+      return <Icon.BinaryIcon strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
+    default:
+      return <Icon.File strokeWidth={strokeWidth} className={classNames(className, "opacity-50")} />;
   }
-
-  const ResourceIcon = Icon.FileText;
-  return <ResourceIcon className={className} />;
 };
 
-export default ResourceIcon;
+export default React.memo(ResourceIcon);

web/src/components/ResourceItem.tsx

@@ -1,31 +0,0 @@
-import { Checkbox } from "@mui/joy";
-import { useState } from "react";
-import ResourceItemDropdown from "./ResourceItemDropdown";
-
-const ResourceItem = ({ resource, handleCheckClick, handleUncheckClick }: ResourceItemType) => {
-  const [isSelected, setIsSelected] = useState<boolean>(false);
-
-  const handleSelectBtnClick = () => {
-    if (isSelected) {
-      handleUncheckClick();
-    } else {
-      handleCheckClick();
-    }
-    setIsSelected(!isSelected);
-  };
-
-  return (
-    <div key={resource.id} className="px-2 py-2 w-full grid grid-cols-10">
-      <span className="col-span-1 w-full flex justify-center m-auto truncate ">
-        <Checkbox checked={isSelected} onChange={handleSelectBtnClick} />
-      </span>
-      <span className="col-span-2 w-full m-auto truncate text-base pr-2">{resource.id}</span>
-      <span className="col-span-6 w-full m-auto truncate text-base pr-2">{resource.filename}</span>
-      <div className="col-span-1 w-full flex flex-row justify-end items-center pr-2">
-        <ResourceItemDropdown resource={resource} />
-      </div>
-    </div>
-  );
-};
-
-export default ResourceItem;