Add PDF modal and selectedPost setter

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

src/App.tsx

@@ -6,6 +6,7 @@ import CreateUser from './routes/CreateUser'
 import PostDetail from './routes/PostDetail'
 import Navbar from './components/Navbar'
 import CreatePostModal from './components/CreatePostModal'
+import PDFModal from './components/PDFModal'
 import useAppStore from './store/useAppStore'
 
 const App: React.FC = () => {
@@ -20,6 +21,7 @@ const App: React.FC = () => {
         <Navbar />
       </div>
       <CreatePostModal />
+      <PDFModal />
       <main>
         <Routes>
           <Route path="/" element={<Home />} />

src/components/PDFModal.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import useAppStore from '../store/useAppStore'
+import PDFPreview from './PDFPreview'
+
+const PDFModal: React.FC = () => {
+  const selectedPostId = useAppStore((s) => s.selectedPostId)
+  const setSelectedPost = useAppStore((s) => s.setSelectedPost)
+  const post = useAppStore((s) => s.posts.find((p) => p.id === selectedPostId))
+
+  if (!selectedPostId || !post?.attachedPDF) return null
+
+  return (
+    <div className="modal-backdrop" onClick={() => setSelectedPost(null)}>
+      <div className="modal" onClick={(e) => e.stopPropagation()}>
+        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
+          <h3>{post.attachedPDF.name}</h3>
+          <button onClick={() => setSelectedPost(null)}>Close</button>
+        </div>
+        <div style={{marginTop:8}}>
+          <PDFPreview url={post.attachedPDF.url} name={post.attachedPDF.name} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default PDFModal

src/components/PostCard.tsx

@@ -8,6 +8,7 @@ import PDFPreview from './PDFPreview'
 const PostCard: React.FC<{ post: Post }> = ({ post }) => {
   const author = useAppStore((s) => s.users.find((u) => u.id === post.authorId))
   const endorsePost = useAppStore((s) => s.endorsePost)
+  const setSelectedPost = useAppStore((s) => s.setSelectedPost)
 
   if (!author) return null
 
@@ -27,7 +28,11 @@ const PostCard: React.FC<{ post: Post }> = ({ post }) => {
       <p style={{marginTop:8}}>{post.content}</p>
       {post.attachedPDF && (
         <div style={{marginTop:8}}>
-          <PDFPreview url={post.attachedPDF.url} name={post.attachedPDF.name} />
+          <div className="small">{post.attachedPDF.name}</div>
+          <div style={{marginTop:6,display:'flex',gap:8}}>
+            <button className="button" onClick={() => setSelectedPost(post.id)}>Open PDF</button>
+            <PDFPreview url={post.attachedPDF.url} name={post.attachedPDF.name} />
+          </div>
         </div>
       )}
       <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginTop:8}}>

src/store/useAppStore.ts

@@ -18,6 +18,7 @@ type AppState = {
   endorseUser: (userId: string, specialty: string) => void
   endorsePost: (postId: string) => void
   attachPDFToPost: (postId: string, file: File) => void
+  setSelectedPost: (id: string | null) => void
   toggleCreatePost: () => void
 }
 
@@ -91,6 +92,8 @@ const useAppStore = create<AppState>((set, get) => ({
     }))
   },
 
+  setSelectedPost: (id) => set(() => ({ selectedPostId: id })),
+
   toggleCreatePost: () => set((state) => ({ ui: { isCreatePostOpen: !state.ui.isCreatePostOpen } })),
 }))