feat: smother link from modal to details

src/components/document-details.tsx

@@ -165,7 +165,7 @@ function DocumentDetailsInner(props: { id: number }) {
               href={`/paperless?query=${query}`}
               className={`${buttonVariants({ variant: "default" })}`}
             >
-              Back
+              Back to search
             </Link>
             {/* <a className={buttonVariants({ variant: "default" })}>
           Download

src/components/document-preview.tsx

@@ -10,6 +10,7 @@ import { Button, buttonVariants } from "@/components/ui/button";
 import { ChevronLeft } from "lucide-react";
 import { useRouter } from "next/navigation";
 import { useSearchParams } from "next/navigation";
+import Link from "next/link";
 
 const queryClient = new QueryClient();
 
@@ -95,12 +96,19 @@ export default function DocumentPreview(props: { id: number }) {
         <Button size="icon" className="bg-white" onClick={() => router.back()}>
           <ChevronLeft className="h-4 w-4" color="black" />
         </Button>
-        <a
+        <div
+          onClick={() =>
+            router.replace(`/paperless/details/${props.id}?query=${query}`)
+          }
+        >
+          testing
+        </div>
+        <Link
           className={`${buttonVariants({ variant: "default" })}`}
           href={`/paperless/details/${props.id}?query=${query}`}
         >
           Open full page
-        </a>
+        </Link>
       </div>
     </QueryClientProvider>
   );

src/components/modal.tsx

@@ -12,6 +12,23 @@ export function Modal({ children }: { children: React.ReactNode }) {
     if (!dialogRef.current?.open) {
       dialogRef.current?.showModal();
     }
+
+    const closeModal = () => {
+      if (dialogRef.current?.open) {
+        dialogRef.current.close();
+      }
+    };
+
+    const handleRouteChange = () => {
+      closeModal();
+    };
+
+    // Listen for route changes
+    window.addEventListener("popstate", handleRouteChange);
+
+    return () => {
+      window.removeEventListener("popstate", handleRouteChange);
+    };
   }, []);
 
   function onDismiss() {