choose to show which detail in each views

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 <></>;
+    return null;
-  } else return <IconComponent {...rest} />;
+  } else return <IconComponent ref={ref} {...rest} />;
 });
 
 export default Icon;

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">

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,6 +149,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
           !editMode && window.open(generateLinkHref(link, user), "_blank")
         }
       >
+        {show.image && (
           <div>
             <div className="relative rounded-t-2xl h-40 overflow-hidden">
               {previewAvailable(link) ? (
@@ -157,9 +159,7 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
                   height={720}
                   alt=""
                   className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-                style={
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
-                  link.type !== "image" ? { filter: "blur(1px)" } : undefined
-                }
                   draggable="false"
                   onError={(e) => {
                     const target = e.target as HTMLElement;
@@ -171,41 +171,48 @@ export default function LinkCard({ link, flipDropdown, editMode }: Props) {
               ) : (
                 <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">
+        <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>
+            )}
 
-            <LinkTypeBadge link={link} />
+            {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">
-                {collection && (
                     <LinkCollection link={link} collection={collection} />
+                  </div>
                 )}
-              </div>
+                {show.date && <LinkDate link={link} />}
-              <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>

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")
           }
         >
+          {show.icon && (
             <div className="shrink-0">
               <LinkIcon link={link} hideBackground />
             </div>
+          )}
 
           <div className="w-[calc(100%-56px)] ml-2">
+            {show.name && (
               <p className="line-clamp-1 mr-8 text-primary select-none">
-              {link.name ? (
+                {unescapeString(link.name)}
-                unescapeString(link.name)
-              ) : (
-                <div className="mt-2">
-                  <LinkTypeBadge link={link} />
-                </div>
-              )}
               </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} />}
+                {show.date && <LinkDate link={link} />}
-                <LinkDate link={link} />
               </div>
             </div>
           </div>

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,6 +135,8 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
             : undefined
       }
     >
+      <div>
+        {show.image && previewAvailable(link) && (
           <div
             className="rounded-2xl cursor-pointer"
             onClick={() =>
@@ -143,9 +151,7 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
                   height={720}
                   alt=""
                   className="rounded-t-2xl select-none object-cover z-10 h-40 w-full shadow opacity-80 scale-105"
-              style={
+                  style={show.icon ? { filter: "blur(1px)" } : undefined}
-                link.type !== "image" ? { filter: "blur(1px)" } : undefined
-              }
                   draggable="false"
                   onError={(e) => {
                     const target = e.target as HTMLElement;
@@ -155,29 +161,38 @@ export default function LinkMasonry({ link, flipDropdown, editMode }: Props) {
               ) : 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 border-t border-neutral-content h-[1px]" />
-          <hr className="divider my-0 last:hidden border-t border-neutral-content h-[1px]" />
+          </div>
         )}
 
-        <div className="p-3 flex flex-col gap-2">
+        <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 && (
+          {show.description && link.description && (
-            <p className="hyphens-auto text-sm">
+            <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>
 
+        {(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} />}
+              {show.collection && (
-          <LinkDate link={link} />
+                <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}
       />

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
+            settings.viewMode === ViewMode.List // Hide tags, image, icon, and description checkboxes in list view
-              ? e[0] !== "tags" && e[0] !== "image"
+              ? e[0] !== "tags" &&
-              : settings.viewMode === ViewMode.Card // Hide tags checkbox in card view
+                e[0] !== "image" &&
-                ? e[0] !== "tags"
+                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]) => (

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,