link compact list view

components/LinkViews/LinkComponents/LinkActions.tsx

@@ -0,0 +1,165 @@
+import { useState } from "react";
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import usePermissions from "@/hooks/usePermissions";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEllipsis } from "@fortawesome/free-solid-svg-icons";
+import EditLinkModal from "@/components/ModalContent/EditLinkModal";
+import DeleteLinkModal from "@/components/ModalContent/DeleteLinkModal";
+import PreservedFormatsModal from "@/components/ModalContent/PreservedFormatsModal";
+import useLinkStore from "@/store/links";
+import { toast } from "react-hot-toast";
+import useAccountStore from "@/store/account";
+
+export default function LinkActions({
+  link,
+  collection,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const permissions = usePermissions(link.collection.id as number);
+
+  const [editLinkModal, setEditLinkModal] = useState(false);
+  const [deleteLinkModal, setDeleteLinkModal] = useState(false);
+  const [preservedFormatsModal, setPreservedFormatsModal] = useState(false);
+  const [expandedLink, setExpandedLink] = useState(false);
+
+  const { account } = useAccountStore();
+
+  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.`);
+  };
+
+  return (
+    <div>
+      {permissions === true ||
+      permissions?.canUpdate ||
+      permissions?.canDelete ? (
+        <div className="dropdown dropdown-left absolute top-3 right-3 z-20">
+          <div
+            tabIndex={0}
+            role="button"
+            className="btn btn-ghost btn-sm btn-square text-neutral"
+          >
+            <FontAwesomeIcon
+              icon={faEllipsis}
+              title="More"
+              className="w-5 h-5"
+              id={"expand-dropdown" + collection.id}
+            />
+          </div>
+          <ul className="dropdown-content z-[20] menu shadow bg-base-200 border border-neutral-content rounded-box w-44 mr-1">
+            {permissions === true ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    pinLink();
+                  }}
+                >
+                  {link?.pinnedBy && link.pinnedBy[0]
+                    ? "Unpin"
+                    : "Pin to Dashboard"}
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true || permissions?.canUpdate ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setEditLinkModal(true);
+                  }}
+                >
+                  Edit
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={() => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    setPreservedFormatsModal(true);
+                    // updateArchive();
+                  }}
+                >
+                  Preserved Formats
+                </div>
+              </li>
+            ) : undefined}
+            {permissions === true || permissions?.canDelete ? (
+              <li>
+                <div
+                  role="button"
+                  tabIndex={0}
+                  onClick={(e) => {
+                    (document?.activeElement as HTMLElement)?.blur();
+                    e.shiftKey ? deleteLink() : setDeleteLinkModal(true);
+                  }}
+                >
+                  Delete
+                </div>
+              </li>
+            ) : undefined}
+          </ul>
+        </div>
+      ) : undefined}
+
+      {editLinkModal ? (
+        <EditLinkModal
+          onClose={() => setEditLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {deleteLinkModal ? (
+        <DeleteLinkModal
+          onClose={() => setDeleteLinkModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {preservedFormatsModal ? (
+        <PreservedFormatsModal
+          onClose={() => setPreservedFormatsModal(false)}
+          activeLink={link}
+        />
+      ) : undefined}
+      {/* {expandedLink ? (
+                <ExpandedLink onClose={() => setExpandedLink(false)} link={link} />
+              ) : undefined} */}
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkCollection.tsx

@@ -0,0 +1,34 @@
+import {
+  CollectionIncludingMembersAndLinkCount,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFolder } from "@fortawesome/free-solid-svg-icons";
+import { useRouter } from "next/router";
+
+export default function LinkCollection({
+  link,
+  collection,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+  collection: CollectionIncludingMembersAndLinkCount;
+}) {
+  const router = useRouter();
+
+  return (
+    <div
+      onClick={(e) => {
+        e.preventDefault();
+        router.push(`/collections/${link.collection.id}`);
+      }}
+      className="flex items-center gap-1 max-w-full w-fit hover:opacity-70 duration-100"
+    >
+      <FontAwesomeIcon
+        icon={faFolder}
+        className="w-4 h-4"
+        style={{ color: collection?.color }}
+      />
+      <p className="truncate capitalize">{collection?.name}</p>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkDate.tsx

@@ -0,0 +1,25 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCalendarDays } from "@fortawesome/free-regular-svg-icons";
+
+export default function LinkDate({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const formattedDate = new Date(link.createdAt as string).toLocaleString(
+    "en-US",
+    {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    },
+  );
+
+  return (
+    <div className="flex items-center gap-1 text-neutral">
+      <FontAwesomeIcon icon={faCalendarDays} className="w-4 h-4" />
+      <p>{formattedDate}</p>
+    </div>
+  );
+}

components/LinkViews/LinkComponents/LinkIcon.tsx

@@ -0,0 +1,45 @@
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faFileImage, faFilePdf } from "@fortawesome/free-regular-svg-icons";
+import Image from "next/image";
+import isValidUrl from "@/lib/shared/isValidUrl";
+
+export default function LinkIcon({
+  link,
+}: {
+  link: LinkIncludingShortenedCollectionAndTags;
+}) {
+  const url =
+    isValidUrl(link.url || "") && link.url ? new URL(link.url) : undefined;
+
+  const iconClasses: string = "w-20 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}
+    </div>
+  );
+}