many bug fixes and improvements

pages/public/collections/[id].tsx

@@ -96,11 +96,11 @@ export default function PublicCollections() {
 
   return collection ? (
     <div
-      className="h-screen"
+      className="h-96"
       style={{
         backgroundImage: `linear-gradient(${collection?.color}30 10%, ${
           settings.theme === "dark" ? "#262626" : "#f3f4f6"
-        } 18rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
+        } 13rem, ${settings.theme === "dark" ? "#171717" : "#ffffff"} 100%)`,
       }}
     >
       {collection ? (
@@ -208,6 +208,11 @@ export default function PublicCollections() {
             {links
               ?.filter((e) => e.collectionId === Number(router.query.id))
               .map((e, i) => {
+                const linkWithCollectionData = {
+                  ...e,
+                  collection: collection, // Append collection data
+                };
+
                 return (
                   <motion.div
                     key={i}
@@ -216,7 +221,10 @@ export default function PublicCollections() {
                     viewport={{ once: true, amount: 0.8 }}
                   >
                     <motion.div variants={cardVariants}>
-                      <PublicLinkCard link={e as any} count={i} />
+                      <PublicLinkCard
+                        link={linkWithCollectionData as any}
+                        count={i}
+                      />
                     </motion.div>
                   </motion.div>
                 );

pages/public/preserved/[id].tsx

@@ -0,0 +1,63 @@
+import React, { useEffect, useState } from "react";
+import useLinkStore from "@/store/links";
+import { useRouter } from "next/router";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
+import ReadableView from "@/components/ReadableView";
+
+export default function Index() {
+  const { links, getLink } = useLinkStore();
+
+  const [link, setLink] = useState<LinkIncludingShortenedCollectionAndTags>();
+
+  const router = useRouter();
+
+  let isPublic = router.pathname.startsWith("/public") ? true : false;
+
+  useEffect(() => {
+    const fetchLink = async () => {
+      if (router.query.id) {
+        await getLink(Number(router.query.id), isPublic);
+      }
+    };
+
+    fetchLink();
+  }, []);
+
+  useEffect(() => {
+    if (links[0]) setLink(links.find((e) => e.id === Number(router.query.id)));
+  }, [links]);
+
+  return (
+    <div className="relative">
+      {/* <div className="fixed left-1/2 transform -translate-x-1/2 w-fit py-1 px-3 bg-base-200 border border-neutral-content rounded-md">
+        Readable
+      </div> */}
+      {link && Number(router.query.format) === ArchivedFormat.readability && (
+        <ReadableView link={link} />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.pdf && (
+        <iframe
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.pdf}`}
+          className="w-full h-screen border-none"
+        ></iframe>
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.png && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.png}`}
+          className="w-fit mx-auto"
+        />
+      )}
+      {link && Number(router.query.format) === ArchivedFormat.jpeg && (
+        <img
+          alt=""
+          src={`/api/v1/archives/${link.id}?format=${ArchivedFormat.jpeg}`}
+          className="w-fit mx-auto"
+        />
+      )}
+    </div>
+  );
+}