added details drawer

components/ModalContent/EditCollectionSharingModal.tsx

@@ -11,6 +11,7 @@ import { dropdownTriggerer } from "@/lib/client/utils";
 import { useTranslation } from "next-i18next";
 import { useUpdateCollection } from "@/hooks/store/collections";
 import { useUser } from "@/hooks/store/user";
+import CopyButton from "../CopyButton";
 
 type Props = {
   onClose: Function;
@@ -133,21 +134,11 @@ export default function EditCollectionSharingModal({
         )}
 
         {collection.isPublic ? (
-          <div className={permissions === true ? "pl-5" : ""}>
+          <div>
             <p className="mb-2">{t("sharable_link_guide")}</p>
-            <div
-              onClick={() => {
-                try {
-                  navigator.clipboard
-                    .writeText(publicCollectionURL)
-                    .then(() => toast.success(t("copied")));
-                } catch (err) {
-                  console.log(err);
-                }
-              }}
-              className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border outline-none hover:border-primary dark:hover:border-primary duration-100 cursor-text"
-            >
+            <div className="w-full hide-scrollbar overflow-x-auto whitespace-nowrap rounded-md p-2 bg-base-200 border-neutral-content border-solid border flex items-center gap-2 justify-between">
               {publicCollectionURL}
+              <CopyButton text={publicCollectionURL} />
             </div>
           </div>
         ) : null}

components/ModalContent/LinkDetailModal.tsx

@@ -0,0 +1,145 @@
+import React, { useEffect, useState } from "react";
+import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import getPublicUserData from "@/lib/client/getPublicUserData";
+import { useTranslation } from "next-i18next";
+import { useUser } from "@/hooks/store/user";
+import { useGetLink } from "@/hooks/store/links";
+import Drawer from "../Drawer";
+import LinkDetails from "../LinkDetails";
+import Link from "next/link";
+import usePermissions from "@/hooks/usePermissions";
+import { useRouter } from "next/router";
+
+type Props = {
+  onClose: Function;
+  onEdit: Function;
+  link: LinkIncludingShortenedCollectionAndTags;
+};
+
+export default function LinkDetailModal({ onClose, onEdit, link }: Props) {
+  const { t } = useTranslation();
+  const getLink = useGetLink();
+  const { data: user = {} } = useUser();
+
+  const [collectionOwner, setCollectionOwner] = useState({
+    id: null as unknown as number,
+    name: "",
+    username: "",
+    image: "",
+    archiveAsScreenshot: undefined as unknown as boolean,
+    archiveAsMonolith: undefined as unknown as boolean,
+    archiveAsPDF: undefined as unknown as boolean,
+  });
+
+  useEffect(() => {
+    const fetchOwner = async () => {
+      if (link.collection.ownerId !== user.id) {
+        const owner = await getPublicUserData(
+          link.collection.ownerId as number
+        );
+        setCollectionOwner(owner);
+      } else if (link.collection.ownerId === user.id) {
+        setCollectionOwner({
+          id: user.id as number,
+          name: user.name,
+          username: user.username as string,
+          image: user.image as string,
+          archiveAsScreenshot: user.archiveAsScreenshot as boolean,
+          archiveAsMonolith: user.archiveAsScreenshot as boolean,
+          archiveAsPDF: user.archiveAsPDF as boolean,
+        });
+      }
+    };
+
+    fetchOwner();
+  }, [link.collection.ownerId]);
+
+  const isReady = () => {
+    return (
+      link &&
+      (collectionOwner.archiveAsScreenshot === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsMonolith === true
+        ? link.monolith && link.monolith !== "pending"
+        : true) &&
+      (collectionOwner.archiveAsPDF === true
+        ? link.pdf && link.pdf !== "pending"
+        : true) &&
+      link.readable &&
+      link.readable !== "pending"
+    );
+  };
+
+  useEffect(() => {
+    (async () => {
+      await getLink.mutateAsync({
+        id: link.id as number,
+      });
+    })();
+
+    let interval: any;
+
+    if (!isReady()) {
+      interval = setInterval(async () => {
+        await getLink.mutateAsync({
+          id: link.id as number,
+        });
+      }, 5000);
+    } else {
+      if (interval) {
+        clearInterval(interval);
+      }
+    }
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, [link?.monolith]);
+
+  const permissions = usePermissions(link.collection.id as number);
+
+  const router = useRouter();
+
+  const isPublicRoute = router.pathname.startsWith("/public") ? true : false;
+
+  return (
+    <Drawer toggleDrawer={onClose} className="sm:h-screen sm:flex relative">
+      <div
+        className="bi-x text-xl text-neutral btn btn-sm btn-square btn-ghost hidden sm:block absolute top-3 left-3"
+        onClick={() => onClose()}
+      ></div>
+      <Link
+        href={isPublicRoute ? `/public/links/${link.id}` : `/links/${link.id}`}
+        target="_blank"
+        className="bi-box-arrow-up-right text-xl text-neutral btn btn-sm btn-square btn-ghost absolute top-3 right-3 select-none"
+      ></Link>
+
+      <div className="sm:m-auto sm:w-5/6">
+        <LinkDetails link={link} />
+
+        {permissions === true ||
+          (permissions?.canUpdate && (
+            <>
+              <br />
+              <br />
+
+              <div className="mx-auto text-center">
+                <div
+                  className="btn btn-sm btn-ghost"
+                  onClick={() => {
+                    onEdit();
+                    onClose();
+                  }}
+                >
+                  {t("edit_link")}
+                </div>
+              </div>
+            </>
+          ))}
+      </div>
+    </Drawer>
+  );
+}

components/ModalContent/NewLinkModal.tsx

@@ -61,7 +61,7 @@ export default function NewLinkModal({ onClose }: Props) {
   };
 
   useEffect(() => {
-    if (router.query.id) {
+    if (router.pathname.startsWith("/collections/") && router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );

components/ModalContent/PreservedFormatsModal.tsx

@@ -96,14 +96,14 @@ export default function PreservedFormatsModal({ onClose, link }: Props) {
 
   useEffect(() => {
     (async () => {
-      await getLink.mutateAsync(link.id as number);
+      await getLink.mutateAsync({ id: link.id as number });
     })();
 
     let interval: any;
 
     if (!isReady()) {
       interval = setInterval(async () => {
-        await getLink.mutateAsync(link.id as number);
+        await getLink.mutateAsync({ id: link.id as number });
       }, 5000);
     } else {
       if (interval) {
@@ -129,7 +129,7 @@ export default function PreservedFormatsModal({ onClose, link }: Props) {
     toast.dismiss(load);
 
     if (response.ok) {
-      await getLink.mutateAsync(link?.id as number);
+      await getLink.mutateAsync({ id: link.id as number });
 
       toast.success(t("link_being_archived"));
     } else toast.error(data.response);

components/ModalContent/UploadFileModal.tsx

@@ -70,7 +70,7 @@ export default function UploadFileModal({ onClose }: Props) {
 
   useEffect(() => {
     setOptionsExpanded(false);
-    if (router.query.id) {
+    if (router.pathname.startsWith("/collections/") && router.query.id) {
       const currentCollection = collections.find(
         (e) => e.id == Number(router.query.id)
       );