From 0371695eb3635d8dd427b2538dd699a0472c6931 Mon Sep 17 00:00:00 2001
From: daniel31x13 <daniel31x13@gmail.com>
Date: Mon, 26 Aug 2024 19:56:04 -0400
Subject: [PATCH] choose to show which detail in each views

---
 components/Icon.tsx                           |   6 +-
 components/LinkDetails.tsx                    |   2 +-
 .../LinkViews/LinkComponents/LinkCard.tsx     | 105 ++++++++--------
 .../LinkViews/LinkComponents/LinkList.tsx     |  35 +++---
 .../LinkViews/LinkComponents/LinkMasonry.tsx  | 117 +++++++++++-------
 components/ViewDropdown.tsx                   |  11 +-
 store/localSettings.ts                        |   4 +-
 7 files changed, 158 insertions(+), 122 deletions(-)

diff --git a/components/Icon.tsx b/components/Icon.tsx
index 178b9e6..b179066 100644
--- a/components/Icon.tsx
+++ b/components/Icon.tsx
@@ -5,12 +5,12 @@ type Props = {
   icon: string;
 } & Icons.IconProps;
 
-const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }) => {
+const Icon = forwardRef<SVGSVGElement, Props>(({ icon, ...rest }, ref) => {
   const IconComponent: any = Icons[icon as keyof typeof Icons];
 
   if (!IconComponent) {
-    return <></>;
-  } else return <IconComponent {...rest} />;
+    return null;
+  } else return <IconComponent ref={ref} {...rest} />;
 });
 
 export default Icon;
diff --git a/components/LinkDetails.tsx b/components/LinkDetails.tsx
index 84aabe9..c9b1e59 100644
--- a/components/LinkDetails.tsx
+++ b/components/LinkDetails.tsx
@@ -192,7 +192,7 @@ export default function LinkDetails({ className, link }: Props) {
             <p className="text-sm mb-2 text-neutral">{t("tags")}</p>
           </div>
 
-          <div className="flex gap-2">
+          <div className="flex gap-2 flex-wrap">
             {link.tags.map((tag) =>
               isPublicRoute ? (
                 <div key={tag.id} className="rounded-lg px-3 py-1 bg-base-200">
diff --git a/components/LinkViews/LinkComponents/LinkCard.tsx b/components/LinkViews/LinkComponents/LinkCard.tsx
index 285437a..7d13b54 100644
--- a/components/LinkViews/LinkComponents/LinkCard.tsx
+++ b/components/LinkViews/LinkComponents/LinkCard.tsx
@@ -24,6 +24,7 @@ import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
 import { useRouter } from "next/router";
 import useLocalSettingsStore from "@/store/localSettings";
+import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -148,64 +149,70 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
-        <div>
-          <div className="relative rounded-t-2xl h-40 overflow-hidden">
-            {previewAvailable(link) ? (
-              <Image
-                src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-                width={1280}
-                height={720}
-                alt=""
-                className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-                style={
-                  link.type !== "image" ? { filter: "blur(1px)" } : undefined
-                }
-                draggable="false"
-                onError={(e) => {
-                  const target = e.target as HTMLElement;
-                  target.style.display = "none";
-                }}
-              />
-            ) : link.preview === "unavailable" ? (
-              <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
-            ) : (
-              <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-            )}
-            <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-              <LinkIcon link={link} />
-            </div>
-          </div>
-          <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
-        </div>
-
-        <div className="flex flex-col justify-between h-full">
-          <div className="p-3 flex flex-col gap-2">
-            <p className="truncate w-full pr-9 text-primary text-sm">
-              {unescapeString(link.name)}
-            </p>
-
-            <LinkTypeBadge link={link} />
-          </div>
-
+        {show.image && (
           <div>
-            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
-
-            <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
-              <div className="cursor-pointer truncate">
-                {collection && (
-                  <LinkCollection link={link} collection={collection} />
-                )}
-              </div>
-              <LinkDate link={link} />
+            <div className="relative rounded-t-2xl h-40 overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? (
+                <div className="bg-gray-50 duration-100 h-40 bg-opacity-80"></div>
+              ) : (
+                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
             </div>
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
           </div>
+        )}
+
+        <div className="flex flex-col justify-between h-full min-h-24">
+          <div className="p-3 flex flex-col gap-2">
+            {show.name && (
+              <p className="truncate w-full pr-9 text-primary text-sm">
+                {unescapeString(link.name)}
+              </p>
+            )}
+
+            {show.link && <LinkTypeBadge link={link} />}
+          </div>
+
+          {(show.collection || show.date) && (
+            <div>
+              <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+
+              <div className="flex justify-between text-xs text-neutral px-3 pb-1 gap-2">
+                {show.collection && (
+                  <div className="cursor-pointer truncate">
+                    <LinkCollection link={link} collection={collection} />
+                  </div>
+                )}
+                {show.date && <LinkDate link={link} />}
+              </div>
+            </div>
+          )}
         </div>
       </div>
 
       <LinkActions
         link={link}
         collection={collection}
-        position="top-[10.75rem] right-3"
+        position={clsx(show.image ? "top-[10.75rem]" : "top-3", "right-3")}
         flipDropdown={flipDropdown}
       />
     </div>
diff --git a/components/LinkViews/LinkComponents/LinkList.tsx b/components/LinkViews/LinkComponents/LinkList.tsx
index d4e32c7..90baa8b 100644
--- a/components/LinkViews/LinkComponents/LinkList.tsx
+++ b/components/LinkViews/LinkComponents/LinkList.tsx
@@ -18,6 +18,7 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useLinks } from "@/hooks/store/links";
+import useLocalSettingsStore from "@/store/localSettings";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -39,6 +40,10 @@ export default function LinkCardCompact({
   const { data: user = {} } = useUser();
   const { setSelectedLinks, selectedLinks } = useLinkStore();
 
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
   const { links } = useLinks();
 
   useEffect(() => {
@@ -105,33 +110,31 @@ export default function LinkCardCompact({
         }
       >
         <div
-          className="flex items-center cursor-pointer w-full"
+          className="flex items-center cursor-pointer w-full min-h-12"
           onClick={() =>
             !editMode && window.open(generateLinkHref(link, user), "_blank")
           }
         >
-          <div className="shrink-0">
-            <LinkIcon link={link} hideBackground />
-          </div>
+          {show.icon && (
+            <div className="shrink-0">
+              <LinkIcon link={link} hideBackground />
+            </div>
+          )}
 
           <div className="w-[calc(100%-56px)] ml-2">
-            <p className="line-clamp-1 mr-8 text-primary select-none">
-              {link.name ? (
-                unescapeString(link.name)
-              ) : (
-                <div className="mt-2">
-                  <LinkTypeBadge link={link} />
-                </div>
-              )}
-            </p>
+            {show.name && (
+              <p className="line-clamp-1 mr-8 text-primary select-none">
+                {unescapeString(link.name)}
+              </p>
+            )}
 
             <div className="mt-1 flex flex-col sm:flex-row sm:items-center gap-2 text-xs text-neutral">
               <div className="flex items-center gap-x-3 text-neutral flex-wrap">
-                {collection && (
+                {show.link && <LinkTypeBadge link={link} />}
+                {show.collection && (
                   <LinkCollection link={link} collection={collection} />
                 )}
-                {link.name && <LinkTypeBadge link={link} />}
-                <LinkDate link={link} />
+                {show.date && <LinkDate link={link} />}
               </div>
             </div>
           </div>
diff --git a/components/LinkViews/LinkComponents/LinkMasonry.tsx b/components/LinkViews/LinkComponents/LinkMasonry.tsx
index b63019a..b59233d 100644
--- a/components/LinkViews/LinkComponents/LinkMasonry.tsx
+++ b/components/LinkViews/LinkComponents/LinkMasonry.tsx
@@ -22,6 +22,8 @@ import { useTranslation } from "next-i18next";
 import { useCollections } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
 import { useGetLink, useLinks } from "@/hooks/store/links";
+import useLocalSettingsStore from "@/store/localSettings";
+import clsx from "clsx";
 
 type Props = {
   link: LinkIncludingShortenedCollectionAndTags;
@@ -39,6 +41,10 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
 
   const { setSelectedLinks, selectedLinks } = useLinkStore();
 
+  const {
+    settings: { show },
+  } = useLocalSettingsStore();
+
   const { links } = useLinks();
   const getLink = useGetLink();
 
@@ -129,55 +135,64 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
             : undefined
       }
     >
-      <div
-        className="rounded-2xl cursor-pointer"
-        onClick={() =>
-          !editMode && window.open(generateLinkHref(link, user), "_blank")
-        }
-      >
-        <div className="relative rounded-t-2xl overflow-hidden">
-          {previewAvailable(link) ? (
-            <Image
-              src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
-              width={1280}
-              height={720}
-              alt=""
-              className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={
-                link.type !== "image" ? { filter: "blur(1px)" } : undefined
-              }
-              draggable="false"
-              onError={(e) => {
-                const target = e.target as HTMLElement;
-                target.style.display = "none";
-              }}
-            />
-          ) : link.preview === "unavailable" ? null : (
-            <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
-          )}
-          <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
-            <LinkIcon link={link} />
-          </div>
-        </div>
+      <div>
+        {show.image && previewAvailable(link) && (
+          <div
+            className="rounded-2xl cursor-pointer"
+            onClick={() =>
+              !editMode && window.open(generateLinkHref(link, user), "_blank")
+            }
+          >
+            <div className="relative rounded-t-2xl overflow-hidden">
+              {previewAvailable(link) ? (
+                <Image
+                  src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}&preview=true`}
+                  width={1280}
+                  height={720}
+                  alt=""
+                  className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
+                  draggable="false"
+                  onError={(e) => {
+                    const target = e.target as HTMLElement;
+                    target.style.display = "none";
+                  }}
+                />
+              ) : link.preview === "unavailable" ? null : (
+                <div className="duration-100 h-40 bg-opacity-80 skeleton rounded-none"></div>
+              )}
+              {show.icon && (
+                <div className="absolute top-0 left-0 right-0 bottom-0 rounded-t-2xl flex items-center justify-center shadow rounded-md">
+                  <LinkIcon link={link} />
+                </div>
+              )}
+            </div>
 
-        {link.preview !== "unavailable" && (
-          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+            <hr className="divider my-0 border-t border-neutral-content h-[1px]" />
+          </div>
         )}
 
-        <div className="p-3 flex flex-col gap-2">
-          <p className="hyphens-auto w-full pr-9 text-primary text-sm">
-            {unescapeString(link.name)}
-          </p>
+        <div className="p-3 flex flex-col gap-2 h-full min-h-14">
+          {show.name && (
+            <p className="hyphens-auto w-full pr-9 text-primary text-sm">
+              {unescapeString(link.name)}
+            </p>
+          )}
 
-          <LinkTypeBadge link={link} />
+          {show.link && <LinkTypeBadge link={link} />}
 
-          {link.description && (
-            <p className="hyphens-auto text-sm">
+          {show.description && link.description && (
+            <p
+              className={clsx(
+                "hyphens-auto text-sm w-full",
+                ((!show.name && !show.link) || !link.name) && "pr-9"
+              )}
+            >
               {unescapeString(link.description)}
             </p>
           )}
 
-          {link.tags && link.tags[0] && (
+          {show.tags && link.tags && link.tags[0] && (
             <div className="flex gap-1 items-center flex-wrap">
               {link.tags.map((e, i) => (
                 <Link
@@ -195,21 +210,29 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
           )}
         </div>
 
-        <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
+        {(show.collection || show.date) && (
+          <div>
+            <hr className="divider mt-2 mb-1 last:hidden border-t border-neutral-content h-[1px]" />
 
-        <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
-          {collection && <LinkCollection link={link} collection={collection} />}
-          <LinkDate link={link} />
-        </div>
+            <div className="flex flex-wrap justify-between text-xs text-neutral px-3 pb-1 w-full gap-x-2">
+              {show.collection && (
+                <div className="cursor-pointer truncate">
+                  <LinkCollection link={link} collection={collection} />
+                </div>
+              )}
+              {show.date && <LinkDate link={link} />}
+            </div>
+          </div>
+        )}
       </div>
 
       <LinkActions
         link={link}
         collection={collection}
         position={
-          link.preview !== "unavailable"
+          previewAvailable(link) && show.image
             ? "top-[10.75rem] right-3"
-            : "top-[.75rem] right-3"
+            : "top-3 right-3"
         }
         flipDropdown={flipDropdown}
       />
diff --git a/components/ViewDropdown.tsx b/components/ViewDropdown.tsx
index a945065..f06c45d 100644
--- a/components/ViewDropdown.tsx
+++ b/components/ViewDropdown.tsx
@@ -89,10 +89,13 @@ export default function ViewDropdown({ viewMode, setViewMode }: Props) {
         <p className="my-1 text-sm text-neutral">{t("show")}</p>
         {Object.entries(settings.show)
           .filter((e) =>
-            settings.viewMode === ViewMode.List // Hide tags and image checkbox in list view
-              ? e[0] !== "tags" && e[0] !== "image"
-              : settings.viewMode === ViewMode.Card // Hide tags checkbox in card view
-                ? e[0] !== "tags"
+            settings.viewMode === ViewMode.List // Hide tags, image, icon, and description checkboxes in list view
+              ? e[0] !== "tags" &&
+                e[0] !== "image" &&
+                e[0] !== "icon" &&
+                e[0] !== "description"
+              : settings.viewMode === ViewMode.Card // Hide tags and description checkboxes in card view
+                ? e[0] !== "tags" && e[0] !== "description"
                 : true
           )
           .map(([key, value]) => (
diff --git a/store/localSettings.ts b/store/localSettings.ts
index cd8e6ca..9b576ce 100644
--- a/store/localSettings.ts
+++ b/store/localSettings.ts
@@ -6,7 +6,7 @@ type LocalSettings = {
   viewMode: string;
   show: {
     link: boolean;
-    title: boolean;
+    name: boolean;
     description: boolean;
     image: boolean;
     tags: boolean;
@@ -29,7 +29,7 @@ const useLocalSettingsStore = create<LocalSettingsStore>((set) => ({
     viewMode: "",
     show: {
       link: true,
-      title: true,
+      name: true,
       description: true,
       image: true,
       tags: true,