add settings tab for easier testing

src/components/App.tsx

@@ -1,13 +1,11 @@
 import { For } from "solid-js";
-import { A } from "solid-start";
 import { Motion, Presence } from "@motionone/solid";
 
 import logo from '~/assets/icons/mutiny-logo.svg';
-import mutiny_m from '~/assets/icons/m.svg';
-import scan from '~/assets/icons/scan.svg';
-import settings from '~/assets/icons/settings.svg';
 import send from '~/assets/icons/send.svg';
 import BalanceBox from "./BalanceBox";
+import SafeArea from "./SafeArea";
+import NavBar from "./NavBar";
 
 // TODO: use this reload prompt for real
 // import ReloadPrompt from "./Reload";
@@ -28,8 +26,7 @@ function ActivityItem() {
 
 export default function App() {
     return (
-        <div class="safe-top safe-left safe-right safe-bottom">
-            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll">
+        <SafeArea>
             <main class='flex flex-col gap-4 py-8 px-4'>
                 <header>
                     <img src={logo} class="App-logo" alt="logo" />
@@ -63,22 +60,7 @@ export default function App() {
                 {/* safety div */}
                 <div class="h-32" />
             </main>
-                <nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
-                    <ul class='h-16 flex justify-between px-16 items-center'>
-                        <li class='h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'>
-                            <img src={mutiny_m} alt="home" />
-                        </li>
-                        <li>
-                            <A href="/scanner">
-                                <img src={scan} alt="scan" />
-                            </A>
-                        </li>
-                        <li>
-                            <img src={settings} alt="settings" />
-                        </li>
-                    </ul>
-                </nav>
-            </div>
-        </div >
+            <NavBar activeTab="home" />
+        </SafeArea>
     );
 }

src/components/NavBar.tsx

@@ -0,0 +1,28 @@
+import mutiny_m from '~/assets/icons/m.svg';
+import scan from '~/assets/icons/scan.svg';
+import settings from '~/assets/icons/settings.svg';
+
+import { A } from "solid-start";
+
+type ActiveTab = 'home' | 'scan' | 'settings';
+
+export default function NavBar(props: { activeTab: ActiveTab }) {
+    const activeStyle = 'h-full border-t-2 border-b-2 border-b-black flex flex-col justify-center'
+    return (<nav class='bg-black fixed bottom-0 shadow-lg z-40 w-full safe-bottom'>
+        <ul class='h-16 flex justify-between px-16 items-center'>
+            <li class={props.activeTab === "home" ? activeStyle : ""}>
+                <img src={mutiny_m} alt="home" />
+            </li>
+            <li class={props.activeTab === "scan" ? activeStyle : ""}>
+                <A href="/scanner">
+                    <img src={scan} alt="scan" />
+                </A>
+            </li>
+            <li class={props.activeTab === "settings" ? activeStyle : ""}>
+                <A href="/settings">
+                    <img src={settings} alt="settings" />
+                </A>
+            </li>
+        </ul>
+    </nav>)
+}

src/components/SafeArea.tsx

@@ -0,0 +1,9 @@
+export default function SafeArea(props) {
+    return (
+        <div class="safe-top safe-left safe-right safe-bottom">
+            <div class="disable-scrollbars max-h-screen h-full overflow-y-scroll">
+                {props.children}
+            </div>
+        </div >
+    )
+}

src/routes/Settings.tsx

@@ -0,0 +1,27 @@
+import { Button } from "~/components/Button";
+import NavBar from "~/components/NavBar";
+import SafeArea from "~/components/SafeArea";
+
+export default function Settings() {
+
+    function clearWaitlistId() {
+        localStorage.removeItem('waitlist_id');
+        window.location.reload();
+    }
+
+    function setTestWaitlistId() {
+        localStorage.setItem('waitlist_id', 'npub17zcnktw7svnechf5g666t33d7slw36sz8el3ep4c7kmyfwjhxn9qjvavs6');
+        // reload the window
+        window.location.reload();
+    }
+
+    return (
+        <SafeArea>
+            <main class='flex flex-col gap-4 py-8 px-4'>
+                <Button onClick={clearWaitlistId}>Clear waitlist_id</Button>
+                <Button onClick={setTestWaitlistId}>Use test waitlist_id</Button>
+            </main>
+            <NavBar activeTab="settings" />
+        </SafeArea>
+    )
+}

vite.config.ts

@@ -9,7 +9,7 @@ const pwaOptions: Partial<VitePWAOptions> = {
   base: '/',
   registerType: "autoUpdate",
   devOptions: {
-    enabled: true
+    enabled: false
   },
   includeAssets: ['favicon.ico', 'robots.txt'],
   manifest: {