Implement image upload and viewer in v2

front/src/layouts/MainLayout.tsx

@@ -1,4 +1,5 @@
 import { makeStyles, tokens, FluentProvider, webLightTheme, webDarkTheme, Toaster, useId } from '@fluentui/react-components';
+import type { ReactNode } from 'react';
 import { Outlet } from 'react-router-dom';
 import Header from './components/Header';
 import Sidebar from './components/Sidebar';
@@ -51,7 +52,7 @@ const useStyles = makeStyles({
   }
 });
 
-const LayoutContent = ({ toasterId }: { toasterId: string }) => {
+const LayoutContent = ({ toasterId, imageViewer }: { toasterId: string; imageViewer?: ReactNode }) => {
   const styles = useStyles();
   const { isDarkMode } = useLayout();
 
@@ -70,16 +71,17 @@ const LayoutContent = ({ toasterId }: { toasterId: string }) => {
         </div>
         <Footer />
         <Toaster toasterId={toasterId} position="top-end" />
+        {imageViewer}
       </div>
     </FluentProvider>
   );
 };
 
-export const MainLayout = () => {
+export const MainLayout = ({ imageViewer }: { imageViewer?: ReactNode }) => {
   const toasterId = useId('toaster');
   return (
     <LayoutProvider toasterId={toasterId}>
-      <LayoutContent toasterId={toasterId} />
+      <LayoutContent toasterId={toasterId} imageViewer={imageViewer} />
     </LayoutProvider>
   );
 };