update responsive

components/LinkViews/CompactGridView.tsx

@@ -1,4 +1,4 @@
-import LinkCardCompact from "@/components/LinkViews/LinkCardCompact";
+import LinkCardCompact from "@/components/LinkViews/LinkComponents/LinkCardCompact";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 
 export default function CompactGridView({

components/LinkViews/LinkComponents/LinkCardCompact.tsx

@@ -5,7 +5,6 @@ import {
 import { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import useCollectionStore from "@/store/collections";
-import Link from "next/link";
 import unescapeString from "@/lib/client/unescapeString";
 import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
 import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
@@ -47,36 +46,31 @@ export default function LinkCardCompact({ link, count, className }: Props) {
   }, [collections, links]);
 
   return (
-    <div
-      className={`h-fit border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative ${
-        className || ""
-      }`}
-    >
-      <div className={"rounded-2xl overflow-clip"}>
-        <div className={"flex items-center"}>
-          <div className="shrink-0">
-              <LinkIcon link={link} />
-          </div>
+    <div className="border border-solid border-neutral-content bg-base-200 shadow-md hover:shadow-none duration-100 rounded-2xl relative">
+      <div
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="flex items-center cursor-pointer p-3"
+      >
+        <div className="shrink-0">
+          <LinkIcon link={link} />
+        </div>
 
-          <Link
-            href={"/links/" + link.id}
-            className="flex flex-col justify-between cursor-pointer h-full w-full gap-1 p-3"
-          >
-            <div className={"flex items-center gap-2"}>
-              <div className="flex items-baseline gap-1">
-                <p className="text-sm text-neutral">{count + 1}</p>
-                <p className="text-lg truncate">
-                  {unescapeString(link.name || link.description) || link.url}
-                </p>
-              </div>
+        <div className="w-[calc(100%-56px)] ml-2">
+          <p className="line-clamp-1 mr-8">
+            {unescapeString(link.name || link.description) || link.url}
+          </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-2">
+              <LinkCollection link={link} collection={collection} />
+              &middot;
               {link.url ? (
                 <div
                   onClick={(e) => {
                     e.preventDefault();
                     window.open(link.url || "", "_blank");
                   }}
-                  className="flex items-center gap-1 max-w-full w-fit text-xs text-neutral hover:opacity-60 duration-100"
+                  className="flex items-center hover:opacity-60 cursor-pointer duration-100"
                 >
                   <p className="truncate w-full">{shortendURL}</p>
                 </div>
@@ -86,13 +80,9 @@ export default function LinkCardCompact({ link, count, className }: Props) {
                 </div>
               )}
             </div>
-
-            <div className={"flex items-center gap-2 text-xs"}>
-              <LinkCollection link={link} collection={collection} />
-              &middot;
-              <LinkDate link={link} />
-            </div>
-          </Link>
+            <span className="hidden sm:block">&middot;</span>
+            <LinkDate link={link} />
+          </div>
         </div>
       </div>
 

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -12,34 +12,29 @@ export default function LinkIcon({
   const url =
     isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
 
-  const iconClasses: string = "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10";
+  const iconClasses: string =
+    "w-12 bg-primary/20 text-primary shadow rounded-md p-2 select-none z-10";
 
   return (
     <div>
-        {link.url && url ? (
-            <Image
-                src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
-                width={64}
-                height={64}
-                alt=""
-                className={iconClasses}
-                draggable="false"
-                onError={(e) => {
-                    const target = e.target as HTMLElement;
-                    target.style.display = "none";
-                }}
-            />
-        ) : link.type === "pdf" ? (
-            <FontAwesomeIcon
-                icon={faFilePdf}
-                className={iconClasses}
-            />
-        ) : link.type === "image" ? (
-            <FontAwesomeIcon
-                icon={faFileImage}
-                className={iconClasses}
-            />
-        ) : undefined}
+      {link.url && url ? (
+        <Image
+          src={`https://t2.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=${link.url}&size=32`}
+          width={64}
+          height={64}
+          alt=""
+          className={iconClasses}
+          draggable="false"
+          onError={(e) => {
+            const target = e.target as HTMLElement;
+            target.style.display = "none";
+          }}
+        />
+      ) : link.type === "pdf" ? (
+        <FontAwesomeIcon icon={faFilePdf} className={iconClasses} />
+      ) : link.type === "image" ? (
+        <FontAwesomeIcon icon={faFileImage} className={iconClasses} />
+      ) : undefined}
     </div>
   );
 }

components/LinkViews/LinkComponents/LinkRow.tsx

@@ -0,0 +1,92 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import useCollectionStore from "@/store/collections";
+import unescapeString from "@/lib/client/unescapeString";
+import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
+import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
+import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
+import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
+
+type Props = {
+  link: LinkIncludingShortenedCollectionAndTags;
+  count: number;
+  className?: string;
+};
+
+export default function LinkCardCompact({ link, count, className }: Props) {
+  const { collections } = useCollectionStore();
+
+  const { links } = useLinkStore();
+
+  let shortendURL;
+
+  try {
+    shortendURL = new URL(link.url || "").host.toLowerCase();
+  } catch (error) {
+    console.log(error);
+  }
+
+  const [collection, setCollection] =
+    useState<CollectionIncludingMembersAndLinkCount>(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+
+  useEffect(() => {
+    setCollection(
+      collections.find(
+        (e) => e.id === link.collection.id,
+      ) as CollectionIncludingMembersAndLinkCount,
+    );
+  }, [collections, links]);
+
+  return (
+    <div className="border-b last:border-b-0 border-neutral-content relative">
+      <div
+        onClick={() => link.url && window.open(link.url || "", "_blank")}
+        className="flex items-center cursor-pointer p-3"
+      >
+        <div className="shrink-0">
+          <LinkIcon link={link} />
+        </div>
+
+        <div className="w-[calc(100%-56px)] ml-2">
+          <p className="line-clamp-1 mr-8">
+            {unescapeString(link.name || link.description) || link.url}
+          </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-2">
+              <LinkCollection link={link} collection={collection} />
+              &middot;
+              {link.url ? (
+                <div
+                  onClick={(e) => {
+                    e.preventDefault();
+                    window.open(link.url || "", "_blank");
+                  }}
+                  className="flex items-center hover:opacity-60 cursor-pointer duration-100"
+                >
+                  <p className="truncate w-full">{shortendURL}</p>
+                </div>
+              ) : (
+                <div className="badge badge-primary badge-sm my-1">
+                  {link.type}
+                </div>
+              )}
+            </div>
+            <span className="hidden sm:block">&middot;</span>
+            <LinkDate link={link} />
+          </div>
+        </div>
+      </div>
+
+      <LinkActions link={link} collection={collection} />
+    </div>
+  );
+}

components/LinkViews/LinkRow.tsx

@@ -1,172 +0,0 @@
-import {
-  CollectionIncludingMembersAndLinkCount,
-  LinkIncludingShortenedCollectionAndTags,
-} from "@/types/global";
-import {
-  faFolder,
-  faEllipsis,
-  faLink,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useEffect, useState } from "react";
-import Image from "next/image";
-import useLinkStore from "@/store/links";
-import useCollectionStore from "@/store/collections";
-import useAccountStore from "@/store/account";
-import {
-  faCalendarDays,
-  faFileImage,
-  faFilePdf,
-} from "@fortawesome/free-regular-svg-icons";
-import usePermissions from "@/hooks/usePermissions";
-import { toast } from "react-hot-toast";
-import isValidUrl from "@/lib/shared/isValidUrl";
-import Link from "next/link";
-import unescapeString from "@/lib/client/unescapeString";
-import { useRouter } from "next/router";
-import EditLinkModal from "../ModalContent/EditLinkModal";
-import DeleteLinkModal from "../ModalContent/DeleteLinkModal";
-import ExpandedLink from "../ModalContent/ExpandedLink";
-import PreservedFormatsModal from "../ModalContent/PreservedFormatsModal";
-import LinkActions from "@/components/LinkViews/LinkComponents/LinkActions";
-import LinkDate from "@/components/LinkViews/LinkComponents/LinkDate";
-import LinkCollection from "@/components/LinkViews/LinkComponents/LinkCollection";
-import LinkIcon from "@/components/LinkViews/LinkComponents/LinkIcon";
-
-type Props = {
-  link: LinkIncludingShortenedCollectionAndTags;
-  count: number;
-  className?: string;
-};
-
-export default function LinkRow({ link, count, className }: Props) {
-  const router = useRouter();
-
-  const permissions = usePermissions(link.collection.id as number);
-
-  const { collections } = useCollectionStore();
-
-  const { links } = useLinkStore();
-
-  const { account } = useAccountStore();
-
-  let shortendURL;
-
-  try {
-    shortendURL = new URL(link.url || "").host.toLowerCase();
-  } catch (error) {
-    console.log(error);
-  }
-
-  const [collection, setCollection] =
-    useState<CollectionIncludingMembersAndLinkCount>(
-      collections.find(
-        (e) => e.id === link.collection.id,
-      ) as CollectionIncludingMembersAndLinkCount,
-    );
-
-  useEffect(() => {
-    setCollection(
-      collections.find(
-        (e) => e.id === link.collection.id,
-      ) as CollectionIncludingMembersAndLinkCount,
-    );
-  }, [collections, links]);
-
-  const { removeLink, updateLink } = useLinkStore();
-
-  const pinLink = async () => {
-    const isAlreadyPinned = link?.pinnedBy && link.pinnedBy[0];
-
-    const load = toast.loading("Applying...");
-
-    const response = await updateLink({
-      ...link,
-      pinnedBy: isAlreadyPinned ? undefined : [{ id: account.id }],
-    });
-
-    toast.dismiss(load);
-
-    response.ok &&
-      toast.success(`Link ${isAlreadyPinned ? "Unpinned!" : "Pinned!"}`);
-  };
-
-  const deleteLink = async () => {
-    const load = toast.loading("Deleting...");
-
-    const response = await removeLink(link.id as number);
-
-    toast.dismiss(load);
-
-    response.ok && toast.success(`Link Deleted.`);
-  };
-
-  const url =
-    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
-
-  const formattedDate = new Date(link.createdAt as string).toLocaleString(
-    "en-US",
-    {
-      year: "numeric",
-      month: "short",
-      day: "numeric",
-    },
-  );
-
-  const iconClasses: string =
-    "w-20 bg-white shadow p-1 bottom-3 right-3 select-none z-10";
-
-  return (
-    <div
-      className={`h-fit border-b last:border-b-0 border-neutral-content duration-100 relative group ${
-        className || ""
-      }`}
-    >
-      <div className={"overflow-clip"}>
-        <div className={"flex items-center"}>
-          <Link
-            href={"/links/" + link.id}
-            className="group-first:rounded-tl-md group-last:rounded-bl-md overflow-clip"
-          >
-            <LinkIcon link={link} />
-          </Link>
-
-          <div className="p-3">
-            <Link
-              href={"/links/" + link.id}
-              className="inline-flex cursor-pointer mb-1"
-            >
-              <p className="text-lg truncate">
-                {unescapeString(link.name || link.description) || link.url}
-              </p>
-            </Link>
-
-            <div className="flex items-center gap-2 text-xs text-neutral">
-              <LinkCollection link={link} collection={collection} />
-              &middot;
-              {link.url ? (
-                <div
-                  onClick={(e) => {
-                    e.preventDefault();
-                    window.open(link.url || "", "_blank");
-                  }}
-                  className="flex items-center hover:opacity-60 cursor-pointer duration-100"
-                >
-                  <p className="truncate w-full">{shortendURL}</p>
-                </div>
-              ) : (
-                <div className="badge badge-primary badge-sm my-1">
-                  {link.type}
-                </div>
-              )}
-              &middot;
-              <LinkDate link={link} />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <LinkActions link={link} collection={collection} />
-    </div>
-  );
-}

components/LinkViews/ListView.tsx

@@ -1,4 +1,4 @@
-import LinkRow from "@/components/LinkViews/LinkRow";
+import LinkRow from "@/components/LinkViews/LinkComponents/LinkRow";
 import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
 
 export default function ListView({