improve link refresh logic + many changes and improvements

pages/preserved/[id].tsx

@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from "react";
 import useLinkStore from "@/store/links";
 import { useRouter } from "next/router";
-import { LinkIncludingShortenedCollectionAndTags } from "@/types/global";
+import {
+  ArchivedFormat,
+  LinkIncludingShortenedCollectionAndTags,
+} from "@/types/global";
 import ReadableView from "@/components/ReadableView";
 
 export default function Index() {
@@ -30,7 +33,22 @@ export default function Index() {
       {/* <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 && <ReadableView link={link} />}
+      {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="object-contain w-full h-screen"
+        />
+      )}
     </div>
   );
 }