refactor App, add /shared/id page

frontend/src/App.tsx

@@ -1,4 +1,5 @@
 import { Routes, Route } from 'react-router-dom';
+import { ReactElement, useEffect } from 'react';
 import Navigation from './Navigation';
 import Conversation from './conversation/Conversation';
 import About from './About';
@@ -8,29 +9,93 @@ import { useMediaQuery } from './hooks';
 import { useState } from 'react';
 import Setting from './settings';
 import './locale/i18n';
-
+import SharedConversation from './conversation/SharedConversation';
+import { useDarkTheme } from './hooks';
 inject();
 
-export default function App() {
+function MainLayout({ children }: { children: ReactElement }) {
   const { isMobile } = useMediaQuery();
   const [navOpen, setNavOpen] = useState(!isMobile);
   return (
-    <div className="min-h-full min-w-full dark:bg-raisin-black">
+    <>
       <Navigation navOpen={navOpen} setNavOpen={setNavOpen} />
       <div
-        className={`transition-all duration-200 ${
+        className={` h-full dark:bg-raisin-black ${
           !isMobile
             ? `ml-0 ${!navOpen ? 'md:mx-auto lg:mx-auto' : 'md:ml-72'}`
             : 'ml-0 md:ml-16'
         }`}
       >
-        <Routes>
-          <Route path="/" element={<Conversation />} />
-          <Route path="/about" element={<About />} />
-          <Route path="*" element={<PageNotFound />} />
-          <Route path="/settings" element={<Setting />} />
-        </Routes>
+        {children}
       </div>
-    </div>
+    </>
+  );
+}
+
+function Layout({ children }: { children: ReactElement }) {
+  return (
+    <>
+      <div className={`h-full dark:bg-raisin-black`}>{children}</div>
+    </>
+  );
+}
+export default function App() {
+  const [isDarkTheme] = useDarkTheme();
+  useEffect(() => {
+    localStorage.setItem('selectedTheme', isDarkTheme ? 'Dark' : 'Light');
+    if (isDarkTheme) {
+      document
+        .getElementById('root')
+        ?.classList.add('dark', 'dark:bg-raisin-black');
+    } else {
+      document.getElementById('root')?.classList.remove('dark');
+    }
+  }, [isDarkTheme]);
+  return (
+    <>
+      <Routes>
+        <Route
+          path="/"
+          element={
+            <MainLayout>
+              <Conversation />
+            </MainLayout>
+          }
+        />
+        <Route
+          path="/about"
+          element={
+            <MainLayout>
+              <About />
+            </MainLayout>
+          }
+        />
+        <Route
+          path="/settings"
+          element={
+            <MainLayout>
+              <Setting />
+            </MainLayout>
+          }
+        />
+        <Route
+          path="/share/:identifier"
+          element={
+            <Layout>
+              <SharedConversation />
+            </Layout>
+          }
+        />
+        {/* default page */}
+        <Route
+          path="/*"
+          element={
+            <Layout>
+              <PageNotFound />
+            </Layout>
+          }
+        />
+      </Routes>
+    </>
   );
 }