feat: paperless documents modal

src/app/@modal/(.)/paperless-documents/modal.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { type ElementRef, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { createPortal } from 'react-dom';
+
+export function Modal({ children }: { children: React.ReactNode }) {
+  const router = useRouter();
+  const dialogRef = useRef<ElementRef<'dialog'>>(null);
+
+  useEffect(() => {
+    if (!dialogRef.current?.open) {
+      dialogRef.current?.showModal();
+    }
+  }, []);
+
+  function onDismiss() {
+    router.back();
+  }
+
+  return createPortal(
+    <div className="modal-backdrop">
+      <dialog ref={dialogRef} className="modal" onClose={onDismiss}>
+        {children}
+        <button onClick={onDismiss} className="close-button" />
+      </dialog>
+    </div>,
+    document.getElementById('modal-root')!
+  );
+}

src/app/@modal/(.)/paperless-documents/page.tsx

@@ -0,0 +1,9 @@
+import { Modal } from './modal';
+
+export default function PhotoModal({
+    params: { id: photoId },
+  }: {
+    params: { id: string };
+  }) {
+    return <Modal>{photoId}</Modal>;
+  }

src/app/@modal/default.tsx

@@ -0,0 +1,3 @@
+export default function Default() {
+    return null;
+  }