Implement image upload and viewer in v2

front/src/App.tsx

@@ -5,11 +5,12 @@ import { MainLayout } from './layouts/MainLayout';
 import About from './components/About';
 import CreatePost from './components/CreatePost';
 import PostCard from './components/PostCard';
+import ImageViewer from './components/ImageViewer';
 import { fetchArticles, type Article } from './api';
 import { useLayout } from './context/LayoutContext';
 import './App.css';
 
-const Home: React.FC = () => {
+const Home: React.FC<{ onPreviewImage: (src: string, alt?: string) => void }> = ({ onPreviewImage }) => {
   const { refreshTrigger } = useLayout();
   const { toasterId } = useLayout();
   const { dispatchToast } = useToastController(toasterId);
@@ -113,6 +114,7 @@ const Home: React.FC = () => {
                   content={article.content}
                   upvotes={article.upvotes}
                   downvotes={article.downvotes}
+                  onPreviewImage={onPreviewImage}
                 />
               </div>
             );
@@ -124,6 +126,7 @@ const Home: React.FC = () => {
               content={article.content}
               upvotes={article.upvotes}
               downvotes={article.downvotes}
+              onPreviewImage={onPreviewImage}
             />
           );
         })}
@@ -145,11 +148,29 @@ const Home: React.FC = () => {
 const NotFound = () => <h1>404 Not Found</h1>;
 
 function App() {
+  const [imageViewer, setImageViewer] = useState<{ open: boolean; src?: string; alt?: string }>({ open: false });
+  const openImageViewer = (src?: string, alt?: string) => {
+    if (!src) return;
+    setImageViewer({ open: true, src, alt });
+  };
+  const closeImageViewer = () => setImageViewer({ open: false });
+
   return (
     <BrowserRouter>
       <Routes>
-        <Route path="/" element={<MainLayout />}>
-          <Route index element={<Home />} />
+        <Route
+          path="/"
+          element={
+            <MainLayout
+              imageViewer={
+                imageViewer.open && imageViewer.src ? (
+                  <ImageViewer src={imageViewer.src!} alt={imageViewer.alt} onClose={closeImageViewer} />
+                ) : null
+              }
+            />
+          }
+        >
+          <Route index element={<Home onPreviewImage={openImageViewer} />} />
           <Route path="create" element={<CreatePost />} />
           <Route path="about" element={<About />} />
           <Route path="*" element={<NotFound />} />