feat: remove query based routing

app/stores/app.ts

@@ -15,36 +15,35 @@ const defaultSettings = (): Settings => ({
   color: { col: 0, row: 0 },
 });
 
-const loadSettings = (): Settings => {
-  const stored = localStorage.getItem(STORAGE_ID);
-  try {
-    const result = settingsSchema.safeParse(JSON.parse(stored ?? ""));
-    if (result.success) {
-      return result.data;
-    }
-  } catch {
-    // JSON.parse failed
-  }
-
-  const settings = defaultSettings();
-  saveSettings(settings);
-  return settings;
-};
-
-const saveSettings = (settings: Settings) => {
-  localStorage.setItem(STORAGE_ID, JSON.stringify(settings));
-};
-
 export const useAppStore = defineStore("app", {
-  state: () => ({
-    booted: false,
-    settings: loadSettings(),
-  }),
+  state: () => {
+    let settings: Settings;
+    const stored = localStorage.getItem(STORAGE_ID);
+    try {
+      settings = settingsSchema.parse(JSON.parse(stored ?? ""));
+    } catch {
+      settings = defaultSettings();
+    }
+
+    return {
+      booted: false,
+      settings,
+      screen: "home" as AppScreen,
+    };
+  },
 
   actions: {
     setColor(col: number, row: number) {
       this.settings.color = { col, row };
     },
+
+    navigateTo(screen: AppScreen) {
+      this.screen = screen;
+    },
+
+    save() {
+      localStorage.setItem(STORAGE_ID, JSON.stringify(this.settings));
+    },
   },
 
   getters: {

app/stores/contact.ts

@@ -90,8 +90,9 @@ export const useContactStore = defineStore("contact", {
       const timeline = gsap.timeline({
         onComplete: () => {
           setTimeout(() => {
-            const router = useRouter();
-            router.push({ query: {} });
+            this.isOutro = false;
+            const app = useAppStore();
+            app.navigateTo("home");
           }, 2000);
         },
       });

app/stores/home.ts

@@ -54,15 +54,15 @@ export const useHomeStore = defineStore("home", {
         );
     },
 
-    animateOutro(to: "contact" | "projects" | "theme" | "settings" | "alarm") {
+    animateOutro(to: AppScreen) {
       this.isOutro = true;
       this.outro.animateTop = to !== "settings";
 
       const timeline = gsap.timeline({
         onComplete: () => {
           this.isOutro = true;
-          const router = useRouter();
-          router.push({ query: { screen: to } });
+          const app = useAppStore();
+          app.navigateTo(to);
         },
       });
 

app/stores/projects.ts

@@ -141,8 +141,9 @@ export const useProjectsStore = defineStore("projects", {
           ease: "none",
           onComplete: () => {
             setTimeout(() => {
-              const router = useRouter();
-              router.push({ query: {} });
+              this.isOutro = false;
+              const app = useAppStore();
+              app.navigateTo("home");
             }, 3000);
           },
         },

app/stores/settings.ts

@@ -1,28 +1,25 @@
+type Menu = "options" | "clock" | "user" | "touchScreen";
+
 export const useSettingsStore = defineStore("settings", {
   state: () => ({
-    currentMenu: null as string | null,
+    currentMenu: null as Menu | null,
     currentSubMenu: null as string | null,
+    menuExpanded: false,
   }),
-  getters: {
-    isMenuOpen: (state) => (menu: string) => {
-      if (!state.currentMenu) return false;
-      return new RegExp(`^${menu}[A-Z]`).test(state.currentMenu);
-    },
 
-    isAnyOtherMenuOpen: (state) => (excludeMenu: string) => {
-      if (!state.currentMenu) return false;
-      return ["options", "clock", "user", "touchScreen"]
-        .filter((m) => m !== excludeMenu)
-        .some((m) => new RegExp(`^${m}[A-Z]`).test(state.currentMenu!));
-    },
-  },
   actions: {
-    setActiveMenu(menu: string | null) {
+    openMenu(menu: Menu, expanded: boolean = false) {
       this.currentMenu = menu;
+      this.menuExpanded = expanded;
+      this.currentSubMenu = null;
     },
 
-    setCurrentSubMenu(submenu: string | null) {
+    openSubMenu(submenu: string) {
       this.currentSubMenu = submenu;
     },
+
+    closeSubMenu() {
+      this.currentSubMenu = null;
+    },
   },
 });