feat: add settings page and fix sidebar layout

- Add Settings route, component, and useSettings hook
- Add Settings link to nav
- Fix sidebar to use fixed positioning instead of flexbox
- Fix footer to stay within sidebar column
- Reset form after save in useGuideForm
- Use SubmitEvent type for handleSaveGuide

src/App.tsx

@@ -22,11 +22,14 @@ function App() {
               </li>
             ))}
           </ul>
+          <Link to="/settings">Settings</Link>
         </nav>
       </header>
+
       <main>
         <Outlet />
       </main>
+
       <footer>SnapSteps &copy; {new Date().getFullYear()}</footer>
     </>
   );

src/features/guides/hooks/useGuideForm.ts

@@ -117,7 +117,7 @@ export default function useGuideForm(initial?: CompiledGuideType) {
     );
   };
 
-  const handleSaveGuide = async (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSaveGuide = async (e: React.SubmitEvent<HTMLFormElement>) => {
     e.preventDefault();
     if (!db) return;
 
@@ -138,6 +138,8 @@ export default function useGuideForm(initial?: CompiledGuideType) {
       setGuide(makeEmptyGuide());
       setFrames([]);
     }
+
+    e.target.reset();
   };
 
   return {

src/features/guides/hooks/useSettings.ts

@@ -0,0 +1,17 @@
+import { useIDB } from "../../../lib/contexts/dbinit.context";
+import { useGuides } from "../../../lib/contexts/guide.context";
+
+export const useSettings = () => {
+  const { db } = useIDB();
+  const { setGuides } = useGuides();
+
+  const deleteAllGuides = () => {
+    if (!db) return;
+    db.clear("guides");
+    setGuides([]);
+  };
+
+  return {
+    deleteAllGuides,
+  };
+};

src/features/guides/routes/Settings.tsx

@@ -0,0 +1,11 @@
+import { useSettings } from "../hooks/useSettings";
+
+export default function Settings() {
+  const { deleteAllGuides } = useSettings();
+
+  return (
+    <div>
+      <button onClick={deleteAllGuides}>Delete All Guides</button>
+    </div>
+  );
+}

src/router.tsx

@@ -3,6 +3,7 @@ import App from "./App.tsx";
 import GuideForm from "./features/guides/routes/GuideForm.tsx";
 import NotFound from "./components/not-found/NotFound.tsx";
 import Guide from "./features/guides/routes/Guide.tsx";
+import Settings from "./features/guides/routes/Settings.tsx";
 
 export const router = createBrowserRouter([
   {
@@ -21,6 +22,10 @@ export const router = createBrowserRouter([
         path: "/edit-guide/:id",
         Component: GuideForm,
       },
+      {
+        path: "/settings",
+        Component: Settings,
+      },
     ],
   },
   {

src/styles/App.css

@@ -8,10 +8,10 @@
 html,
 body {
     font-family: system-ui, Arial, sans-serif;
+    position: relative;
 }
 
 #root {
-    display: flex;
     min-height: 100vh;
 }
 
@@ -21,7 +21,9 @@ body {
 }
 
 header {
-    flex: 0 0 var(--sidebar-width);
+    position: fixed;
+    height: 100%;
+    width: var(--sidebar-width);
     padding: 1rem;
     display: flex;
     flex-direction: column;
@@ -31,18 +33,19 @@ header {
 }
 
 main {
+    margin-left: var(--sidebar-width);
     flex: 1;
     padding: 1rem;
 }
 
 footer {
-    position: absolute;
+    position: fixed;
     bottom: 0;
     left: 0;
-    right: 0;
     margin: 0 auto;
-    padding-block: 0.5rem;
+    padding: 0.5rem;
     text-align: center;
+    width: var(--sidebar-width);
 }
 
 nav {