choose to show which detail in each views

2024-08-26 19:56:04 -04:00 · 2024-08-26 19:56:04 -04:00 · 0371695eb3
parent 9ae9c7c81a
commit 0371695eb3
7 changed files with 158 additions and 122 deletions
--- 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;
--- 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">
--- 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>
--- 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>
--- 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}
      />
--- 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]) => (
--- 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,