route interceptor to public view

src/app/(protected)/(dashboard)/@modal/(...)view-whiteboard/[id]/page.tsx

@@ -0,0 +1,21 @@
+import { IntercepModal } from '@/app/_shared/components/modal/intercep-modal'
+import { getPublicWhiteboard } from '@/app/_whiteboards/actions/public-whiteboard'
+import { WhiterboardFromCompressed } from '@/app/_whiteboards/components/whiteboard'
+
+export default async function Page({ params }: {params: {id: string}}) {
+  const whiteboardId = Number(params.id)
+
+  const whiteboard = await getPublicWhiteboard(whiteboardId)
+
+  return (
+    <IntercepModal title={whiteboard.name}>
+      <section className="h-[calc(100dvh-300px)] w-full">
+        <WhiterboardFromCompressed
+          viewModeEnabled
+          id={whiteboard?.id} 
+          initialRawCompressed={whiteboard.compressedRawContent} 
+        />
+      </section>
+    </IntercepModal>
+  )
+}

src/app/(protected)/(dashboard)/@modal/default.tsx

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

src/app/(protected)/(dashboard)/layout.tsx

@@ -3,13 +3,15 @@ import React from 'react'
 import { SideNavigation } from '@/app/_shared/components/navigation/sidebar'
 
 const LayoutPage = ({
-  children
-}: {children: React.ReactNode}) => {
+  children,
+  modal
+}: {children: React.ReactNode, modal: React.ReactNode}) => {
   return (
     <div className="min-h-screen relative flex flex-col items-start justify-between overflow-y-auto w-full">
       <SideNavigation />
       <div className="md:pl-[200px] w-full">
         {children}
+        {modal}
       </div>
     </div>
   )

src/app/_shared/components/modal/intercep-modal.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useRouter } from 'next/navigation'
+
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/app/_shared/components/ui/dialog'
+
+interface Props {
+    title: string
+    children: React.ReactNode
+}
+
+export const IntercepModal = ({ title, children }: Props) => {
+  const router = useRouter()
+  const [isOpen, setIsOpen] = useState(true) 
+
+  const onOpenChangeHandler = (value: boolean) => {
+    if (!value) {
+      setIsOpen(false)
+      router.back()
+
+      return
+    }
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onOpenChangeHandler}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        {children}
+      </DialogContent>
+    </Dialog>
+  )
+}

src/app/_whiteboards/actions/public-whiteboard.ts

@@ -0,0 +1,16 @@
+import { redirect } from 'next/navigation'
+
+import findWhiteboardContent from '@/server/api/whiteboard/usecases/find-whiteboard-content'
+import { db } from '@/server/db'
+
+export const getPublicWhiteboard = async (id: number) => {
+  'use server'
+  const whiteboard = await findWhiteboardContent(db, { id, isPublic: true })
+
+  if (!whiteboard){
+    redirect('/not-found')
+  }
+
+  return whiteboard
+}
+

src/app/_whiteboards/components/whiteboard-card.tsx

@@ -45,27 +45,23 @@ export const WhiteboardCard = ({ whiteboard, children }: ListItemProps) => {
             <WhiteboardPreview name={name} previewUrl={previewUrl} />
             <div 
               className="h-full  transition ease-in bg-gradient-to-br from-gray-900 to-secondary/60 absolute bottom-0 w-full px-2 flex flex-col justify-between gap-2 break-words text-ellipsis"
-
             >
               <div className="flex flex-col gap-2 pt-2">
                 <Link href={`/whiteboard/${whiteboard.id}`} className="cursor-pointer transition ease-in w-full">
                   <h4 className="text-secondary dark:text-primary text-lg font-bold select-none flex items-center line-clamp-1 text-ellipsis hover:underline tracking-tight">
                     {name}
                   </h4>
                 </Link>
-
-
                 <p className="font-medium text-sm text-ellipsis text-pretty text-secondary/85 dark:text-primary/70">
                   {description}
                 </p>
               </div>
 
               <div className="inline-flex justify-start mb-2 gap-2 items-center">
                 { whiteboard.space && <Link href={`/spaces/${whiteboard.space.id}`} className="hover:scale-105 transition ease-in hover:border-primary"> <SpaceBadge space={whiteboard.space} /></Link>}
-
               </div>
               {
-                whiteboard.isPublic && <Link target="_blank" href={`${window.location.origin}/view-whiteboard/${whiteboard.id}`} className="absolute bottom-0 right-0 hover:underline self-end transition ease-in hover:border-primary bg-[#63e] rounded-tl-sm px-4 flex items-center gap-1 py-1">
+                whiteboard.isPublic && <Link href={`${window.location.origin}/view-whiteboard/${whiteboard.id}`} className="absolute bottom-0 right-0 hover:underline self-end transition ease-in hover:border-primary bg-[#63e] text-white rounded-tl-sm px-4 flex items-center gap-1 py-1">
                   <ExternalLink className="h-4 w-4" /> <span className="text-sm">Public</span>
                 </Link>
               }

src/app/view-whiteboard/[id]/page.tsx

@@ -1,30 +1,16 @@
 'use server'
 
 import React from 'react'
-import { redirect } from 'next/navigation'
 
+import { getPublicWhiteboard } from '@/app/_whiteboards/actions/public-whiteboard'
 import { WhiterboardFromCompressed } from '@/app/_whiteboards/components/whiteboard'
 import { WhiteboardHeader } from '@/app/_whiteboards/components/whiteboard-header'
-import findWhiteboardContent from '@/server/api/whiteboard/usecases/find-whiteboard-content'
-import { db } from '@/server/db'
-
-
-const getWhiteboard = async (id: number) => {
-  const whiteboard = await findWhiteboardContent(db, { id, isPublic: true })
-
-  if (!whiteboard){
-    redirect('/not-found')
-  }
-
-  return whiteboard
-}
-
 
 
 const WhitebardViewPage = async ({ params }: {params: {id: string}}) => {
   const whiteboardId = Number(params.id)
 
-  const whiteboard = await getWhiteboard(whiteboardId)
+  const whiteboard = await getPublicWhiteboard(whiteboardId)
 
   return (
     <main className="h-screen w-screen">