feat: remove query based routing

app/components/Settings/BottomScreen/Menus/Menus.vue

@@ -11,8 +11,27 @@ import UserMenu from "./User/Menu.vue";
 import TouchScreenMenu from "./TouchScreen/Menu.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
+const app = useAppStore();
 const settingsStore = useSettingsStore();
 
+type Menu = "options" | "clock" | "user" | "touchScreen";
+
+const MAIN_MENUS: Menu[] = ["options", "clock", "user", "touchScreen"];
+
+const isMainMenu = (button: string): button is Menu => {
+  return MAIN_MENUS.includes(button as Menu);
+};
+
+const isSubMenu = (button: string): boolean => {
+  return /^(options|clock|user|touchScreen)[A-Z]/.test(button);
+};
+
+const getParentMenu = (submenu: string): Menu => {
+  const match = submenu.match(/^(options|clock|user|touchScreen)/);
+  if (!match?.[1]) throw new Error(`Invalid submenu: '${submenu}'`);
+  return match[1] as Menu;
+};
+
 const { selectedButton: selected, selectorPosition } = useButtonNavigation({
   buttons: {
     options: [31, 119, 49, 49],
@@ -35,13 +54,8 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
   },
   initialButton: "options",
   onButtonClick: (buttonName: string) => {
-    if (isSubmenu(buttonName)) {
-      router.push({
-        query: {
-          screen: "settings",
-          menu: buttonName,
-        },
-      });
+    if (isSubMenu(buttonName)) {
+      settingsStore.openSubMenu(buttonName);
     }
   },
   navigation: {
@@ -118,51 +132,27 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
   disabled: computed(() => settingsStore.currentSubMenu !== null),
 });
 
-const isSubmenu = (buttonName: string) => {
-  return (
-    /^(options|clock|user|touchScreen)[A-Z]/.test(buttonName) &&
-    !["options", "clock", "user", "touchScreen"].includes(buttonName)
-  );
-};
+const isSubmenuSelected = computed(() => isSubMenu(selected.value));
+const selectedSubmenuParent = computed(() =>
+  isSubmenuSelected.value ? getParentMenu(selected.value) : null,
+);
 
-const router = useRouter();
-
-onBeforeRouteUpdate((to, from) => {
-  const fromMenu = from.query.menu?.toString();
-  const toMenu = to.query.menu?.toString();
-
-  if (!fromMenu && toMenu) {
-    settingsStore.setActiveMenu(selected.value);
-  } else if (fromMenu && !toMenu) {
-    if (fromMenu === "options" || fromMenu === "clock" || fromMenu === "user") {
-      selected.value = fromMenu;
-      settingsStore.setActiveMenu(null);
-    } else {
-      throw new Error("Unreachable");
-    }
-  } else if (fromMenu && toMenu) {
-    if (toMenu === "options" || toMenu === "clock" || toMenu === "user") {
-      settingsStore.setCurrentSubMenu(null);
-      settingsStore.setActiveMenu(selected.value);
-    } else {
-      settingsStore.setCurrentSubMenu(toMenu);
-    }
-  }
+provide("menusContext", {
+  isSubmenuSelected,
+  selectedSubmenuParent,
 });
 
 watch(
   selected,
   (newSelected) => {
     if (settingsStore.currentSubMenu === null) {
-      if (isSubmenu(newSelected)) {
-        router.push({
-          query: {
-            screen: "settings",
-            menu: newSelected.split(/[A-Z]/)[0],
-          },
-        });
-      } else {
-        router.push({ query: { screen: "settings", menu: undefined } });
+      if (isMainMenu(newSelected)) {
+        settingsStore.openMenu(newSelected, false);
+      } else if (isSubMenu(newSelected)) {
+        const parentMenu = getParentMenu(newSelected);
+        if (parentMenu) {
+          settingsStore.openMenu(parentMenu, true);
+        }
       }
     }
   },
@@ -186,6 +176,21 @@ const viewComponents: Record<string, Component> = {
     <TouchScreenMenu :x="177" :y="121" :opacity="1" />
 
     <Selector :rect="selectorPosition" :opacity="1" />
+
+    <CommonButtons
+      v-if="isSubmenuSelected"
+      :y-offset="0"
+      b-label="Go back"
+      a-label="Select"
+      @activate-b="selected = getParentMenu(selected)"
+    />
+    <CommonButtons
+      v-else
+      :y-offset="0"
+      b-label="Quit"
+      a-label="Select"
+      @activate-b="app.navigateTo('home')"
+    />
   </template>
   <component :is="viewComponents[settingsStore.currentSubMenu]" v-else />
 </template>