feat: a few settings

src/app/layout.tsx

@@ -5,9 +5,10 @@ import '@radix-ui/themes/styles.css';
 import { config } from 'dotenv';
 import { Roboto_Flex } from 'next/font/google';
 import { usePathname } from 'next/navigation';
-import { ReactNode, useEffect, useState } from 'react';
+import { ReactNode, Suspense, useEffect, useState } from 'react';
 import { Footer } from '../components/Footer';
 import { Google } from '../components/Google';
+import { Loader } from '../components/Loader';
 import Navbar from '../components/Navbar';
 import isDev from '../core/blitzkrieg/isDev';
 import { isLocalhost } from '../core/blitzkrieg/isLocalhost';
@@ -31,6 +32,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
   const pathname = usePathname();
   const isEmbed = pathname.split('/')[1] === 'embeds';
   const isRoot = pathname === '/';
+  const darkMode = useApp((state) => state.darkMode);
   const [showDevBuildAlert, setShowDevBuildAlert] = useState(false);
   const isFullScreen = useFullScreen();
 
@@ -46,11 +48,15 @@ export default function RootLayout({ children }: RootLayoutProps) {
   return (
     <html lang="en" className={robotoFlex.className}>
       <head>
-        {isRoot && <title>Blitzkrieg</title>}
-        <meta
-          name="description"
-          content="🎉 Tools for everything World of Tanks Blitz"
-        />
+        {isRoot && (
+          <>
+            <title>Blitzkrieg</title>
+            <meta
+              name="description"
+              content="🎉 Tools for everything World of Tanks Blitz"
+            />
+          </>
+        )}
         <meta property="og:site_name" content="Blitzkrieg" />
         <link rel="icon" type="image/x-icon" href="/favicon.ico" />
 
@@ -64,7 +70,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         }}
       >
         <Theme
-          appearance="dark"
+          appearance={darkMode ? 'dark' : 'light'}
           panelBackground="solid"
           radius="full"
           suppressHydrationWarning
@@ -104,7 +110,15 @@ export default function RootLayout({ children }: RootLayoutProps) {
               </AlertDialog.Content>
             </AlertDialog.Root>
 
-            {children}
+            <Suspense
+              fallback={
+                <div style={{ flex: 1 }}>
+                  <Loader />
+                </div>
+              }
+            >
+              {children}
+            </Suspense>
 
             {!isEmbed && !isFullScreen && <Footer />}
           </Flex>

src/app/settings/page.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Flex, Heading, Switch, Text } from '@radix-ui/themes';
+import PageWrapper from '../../components/PageWrapper';
+import { useApp } from '../../stores/app';
+
+export default function Page() {
+  const developerMode = useApp((state) => state.developerMode);
+  const darkMode = useApp((state) => state.darkMode);
+
+  return (
+    <PageWrapper justify="center" align="center">
+      <Flex direction="column" gap="4">
+        <Flex gap="3" direction="column">
+          <Heading size="5">Appearance</Heading>
+
+          <Flex align="center" gap="2">
+            <Text>Dark mode</Text>
+            <Switch
+              checked={darkMode}
+              onCheckedChange={(checked) =>
+                useApp.setState({ darkMode: checked })
+              }
+            />
+          </Flex>
+        </Flex>
+
+        <Flex gap="3" direction="column">
+          <Heading size="5">Advanced</Heading>
+
+          <Flex align="center" gap="2">
+            <Text>Developer mode</Text>
+            <Switch
+              checked={developerMode}
+              onCheckedChange={(checked) =>
+                useApp.setState({ developerMode: checked })
+              }
+            />
+          </Flex>
+        </Flex>
+
+        <Text color="gray">
+          <i>Not a lot here, eh?</i>
+        </Text>
+      </Flex>
+    </PageWrapper>
+  );
+}

src/app/tools/layout.tsx

@@ -2,10 +2,9 @@
 
 import Link from 'next/link';
 import { usePathname } from 'next/navigation';
-import { ReactNode, Suspense } from 'react';
+import { ReactNode } from 'react';
 import { TOOLS } from '../../constants/tools';
 import { theme } from '../../stitches.config';
-import { Loader } from './components/Loader';
 
 interface ToolsLayoutProps {
   children: ReactNode;
@@ -90,15 +89,7 @@ export default function ToolsLayout({ children }: ToolsLayoutProps) {
         </div>
       )}
 
-      <Suspense
-        fallback={
-          <div style={{ flex: 1 }}>
-            <Loader />
-          </div>
-        }
-      >
-        {children}
-      </Suspense>
+      {children}
     </>
   );
 }

src/app/tools/tankopedia/[id]/components/Model/components/ModelLoader.tsx

@@ -1,5 +1,5 @@
 import { Html, useProgress } from '@react-three/drei';
-import { Loader } from '../../../../../components/Loader';
+import { Loader } from '../../../../../../../components/Loader';
 
 export function ModelLoader() {
   const { progress } = useProgress();

src/components/Loader.tsx

@@ -1,6 +1,6 @@
 import { blackA } from '@radix-ui/colors';
 import { Flex, Spinner, Text } from '@radix-ui/themes';
-import { theme } from '../../../stitches.config';
+import { theme } from '../stitches.config';
 
 const NAV_HEIGHT = 52.65;
 

src/components/PageWrapper.tsx

@@ -10,6 +10,7 @@ export default function PageWrapper({
   style,
   color,
   size = 800,
+  children,
   ...props
 }: PageWrapperProps) {
   return (
@@ -31,11 +32,12 @@ export default function PageWrapper({
           padding: 16,
           boxSizing: 'border-box',
           flex: 1,
-
           ...style,
         }}
         {...props}
-      />
+      >
+        {children}
+      </Flex>
     </Theme>
   );
 }

src/stores/app.ts

@@ -4,12 +4,16 @@ import { persist } from 'zustand/middleware';
 
 export interface App {
   devBuildAgreementTime: number;
+  developerMode: boolean;
+  darkMode: boolean;
 }
 
 export const useApp = create<App>()(
   persist(
     (set) => ({
       devBuildAgreementTime: 0,
+      developerMode: false,
+      darkMode: true,
     }),
     { name: 'app', merge: (a, b) => merge(b, a) },
   ),