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/components/Loader.tsx

@@ -1,41 +0,0 @@
-import { blackA } from '@radix-ui/colors';
-import { Flex, Spinner, Text } from '@radix-ui/themes';
-import { theme } from '../../../stitches.config';
-
-const NAV_HEIGHT = 52.65;
-
-interface LoaderProps {
-  naked?: boolean;
-  progress?: number;
-}
-
-export function Loader({ naked, progress }: LoaderProps) {
-  const animation = (
-    <Flex align="center" gap="2">
-      <Spinner />
-      {progress !== undefined && (
-        <Text color="gray">{Math.round(progress * 100)}%</Text>
-      )}
-    </Flex>
-  );
-
-  if (naked) return animation;
-
-  return (
-    <Flex
-      style={{
-        backgroundColor: blackA.blackA10,
-        position: 'fixed',
-        top: NAV_HEIGHT,
-        left: 0,
-        width: '100%',
-        height: `calc(100% - ${NAV_HEIGHT}px)`,
-        padding: theme.spaces.paddingMajor,
-      }}
-      align="center"
-      justify="center"
-    >
-      {animation}
-    </Flex>
-  );
-}

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();