feat: seperate paperless viewer into preview and details pages

.vscode/settings.json

@@ -3,5 +3,6 @@
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnPaste": true,
   "editor.formatOnSave": true,
-  "editor.tabSize": 2
+  "editor.tabSize": 2,
+  "typescript.preferences.importModuleSpecifier": "non-relative"
 }

src/app/@modal/(.)paperless/document/[id]/page.tsx

@@ -0,0 +1,9 @@
+import DocumentModal from "@/components/document-modal";
+
+export default function ModalDocumentPage({
+  params,
+}: {
+  params: { id: number };
+}) {
+  return <DocumentModal params={params} />;
+}

src/app/actions.ts

@@ -47,34 +47,4 @@ export async function getUserData() {
   });
 
   return userData;
-}
-
-/*
-Paperless
-|  _ \ __ _ _ __   ___ _ __| | ___ ___ ___
-| |_) / _` | '_ \ / _ | '__| |/ _ / __/ __|
-|  __| (_| | |_) |  __| |  | |  __\__ \__ \
-|_|   \__,_| .__/ \___|_|  |_|\___|___|___/
-           |_|
-*/
-
-export async function getPaperlessDocuments(query: string) {
-  const userData = await getUserData();
-
-  if (!query || query == "null" || query.length < 3 || !userData) return null;
-
-  const response = await fetch(
-    `${userData.paperlessURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
-    {
-      method: "GET",
-      headers: {
-        "Content-Type": "application/json",
-        Authorization: `Token ${userData.paperlessToken}`,
-      },
-    },
-  );
-
-  const data = (await response.json()) as PaperlessDocumentsType;
-
-  return data;
-}
+}

src/app/paperless/details/[id]/page.tsx

@@ -0,0 +1,9 @@
+import DocumentDetails from "@/components/document-details";
+
+export default function FullPageDocumentPage({
+  params,
+}: {
+  params: { id: number };
+}) {
+  return <DocumentDetails id={params.id} />;
+}

src/app/paperless/document/[id]/page.tsx

@@ -1,13 +1,19 @@
-import DocumentViewer from "@/components/document-viewer";
+"use client";
+
+import DocumentPreview from "@/components/document-preview";
 
 export default function FullPageDocumentPage({
   params,
 }: {
   params: { id: number };
 }) {
   return (
-    <main className="h-full w-full">
-      <DocumentViewer id={params.id} />
+    <main className="flex h-full w-full min-w-0 justify-center">
+      <div className="flex h-fit flex-col rounded-xl bg-slate-600/50 md:w-1/2">
+        <div className="m-4 flex flex-grow flex-col justify-center gap-8 md:m-8 md:flex-row md:gap-16">
+          <DocumentPreview id={params.id} />
+        </div>
+      </div>
     </main>
   );
 }

src/app/paperless/page.tsx

@@ -22,12 +22,35 @@ import {
   QueryClient,
 } from "@tanstack/react-query";
 import LoadingSpinner from "@/components/loading-spinner";
-import { getPaperlessDocuments, getUserData } from "@/app/actions";
+import { getUserData } from "@/app/actions";
 import Link from "next/link";
 import OpenInternalLink from "@/components/internal-link";
+import type { PaperlessDocumentsType } from "@/types";
 
 const queryClient = new QueryClient();
 
+async function getPaperlessDocuments(query: string) {
+  const userData = await getUserData();
+
+  if (!query || query == "null" || query.length < 3 || !userData) return null;
+
+  const response = await fetch(
+    `${userData.paperlessURL}/api/documents/?query=${query}&page=1&page_size=10&truncate_content=true`,
+    {
+      method: "GET",
+      headers: {
+        "Content-Type": "application/json",
+        Authorization: `Token ${userData.paperlessToken}`,
+      },
+    },
+  );
+
+  const data = (await response.json()) as PaperlessDocumentsType;
+
+  return data;
+}
+
+
 function DocumentsSearch() {
   const formSchema = z.object({
     query: z.string().min(3).max(256),
@@ -97,6 +120,8 @@ function DocumentsPage() {
     },
     // This ensures the query does not run if there's no query string
     enabled: !!query,
+    staleTime: 60 * 1000, // 1 minute in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   const userData = useQuery({
@@ -105,6 +130,8 @@ function DocumentsPage() {
       const data = await getUserData();
       return data;
     },
+    staleTime: 24 * 60 * 60 * 1000, // 1 day in milliseconds
+    refetchOnWindowFocus: false,
   });
 
   if (!query) {

src/components/audio-preview.tsx

@@ -10,7 +10,7 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import { useRouter } from "next/navigation";
 import { ChevronLeft } from "lucide-react";
 import { useState } from "react";
-import OpenExternalLink from "./external-link";
+import OpenExternalLink from "@/components/external-link";
 import type { WhishperRecordingType } from "@/types";
 import {
   AlertDialog,
@@ -30,6 +30,7 @@ import {
   TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { toast } from "sonner";
+import BodyMessage from "@/components/body-message";
 
 const queryClient = new QueryClient();
 
@@ -123,31 +124,15 @@ function AudioInfo({ id }: AudioInfoProps) {
   }
 
   if (userDataError ?? !userData) {
-    return (
-      <div className="flex justify-center">
-        <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
-          <h1 className="w-full text-center text-2xl font-bold">
-            Error loading user data
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Error loading user data</BodyMessage>;
   }
 
   if (isRecordingDataLoading) {
     return <SkeletonLoader />;
   }
 
   if (recordingDataError ?? !recordingData) {
-    return (
-      <div className="flex justify-center">
-        <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
-          <h1 className="w-full text-center text-2xl font-bold">
-            Error loading recording data
-          </h1>
-        </div>
-      </div>
-    );
+    return <BodyMessage>Error loading recording data</BodyMessage>;
   }
 
   const decodedName = decodeURIComponent(recordingData.fileName);

src/components/body-message.tsx

@@ -0,0 +1,13 @@
+export default function BodyMessage({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="flex justify-center">
+      <div className="mx-auto max-w-sm rounded-lg bg-slate-700 p-4 shadow-md">
+        <h1 className="w-full text-center text-2xl font-bold">{children}</h1>
+      </div>
+    </div>
+  );
+}