feat: remove query based routing

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

@@ -5,13 +5,25 @@ const props = defineProps<{
 }>();
 
 const settingsStore = useSettingsStore();
+const menusContext = inject<{
+  isSubmenuSelected: ComputedRef<boolean>;
+  selectedSubmenuParent: ComputedRef<string | null>;
+}>("menusContext")!;
 
 const { assets } = useAssets();
 
-const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
-const isAnyOtherMenuOpen = computed(() =>
-  settingsStore.isAnyOtherMenuOpen("clock"),
+const isOpen = computed(
+  () => settingsStore.currentMenu === "clock" && settingsStore.menuExpanded,
 );
+const isAnyOtherMenuOpen = computed(() => {
+  if (settingsStore.currentSubMenu) {
+    return !settingsStore.currentSubMenu.startsWith("clock");
+  }
+  if (menusContext.isSubmenuSelected.value) {
+    return menusContext.selectedSubmenuParent.value !== "clock";
+  }
+  return false;
+});
 
 const animation = useMenuAnimation("clock", isOpen);
 

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>

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

@@ -5,13 +5,25 @@ const props = defineProps<{
 }>();
 
 const settingsStore = useSettingsStore();
+const menusContext = inject<{
+  isSubmenuSelected: ComputedRef<boolean>;
+  selectedSubmenuParent: ComputedRef<string | null>;
+}>("menusContext")!;
 
 const { assets } = useAssets();
 
-const isOpen = computed(() => settingsStore.isMenuOpen("options"));
-const isAnyOtherMenuOpen = computed(() =>
-  settingsStore.isAnyOtherMenuOpen("options"),
+const isOpen = computed(
+  () => settingsStore.currentMenu === "options" && settingsStore.menuExpanded,
 );
+const isAnyOtherMenuOpen = computed(() => {
+  if (settingsStore.currentSubMenu) {
+    return !settingsStore.currentSubMenu.startsWith("options");
+  }
+  if (menusContext.isSubmenuSelected.value) {
+    return menusContext.selectedSubmenuParent.value !== "options";
+  }
+  return false;
+});
 
 const animation = useMenuAnimation("options", isOpen);
 

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

@@ -5,12 +5,23 @@ const props = defineProps<{
 }>();
 
 const settingsStore = useSettingsStore();
+const menusContext = inject<{
+  isSubmenuSelected: ComputedRef<boolean>;
+  selectedSubmenuParent: ComputedRef<string | null>;
+}>("menusContext")!;
 
 const { assets } = useAssets();
 
-const isAnyOtherMenuOpen = computed(() =>
-  settingsStore.isAnyOtherMenuOpen("touchScreen"),
-);
+// TODO: i don't like this
+const isAnyOtherMenuOpen = computed(() => {
+  if (settingsStore.currentSubMenu) {
+    return !settingsStore.currentSubMenu.startsWith("touchScreen");
+  }
+  if (menusContext.isSubmenuSelected.value) {
+    return menusContext.selectedSubmenuParent.value !== "touchScreen";
+  }
+  return false;
+});
 
 useRender((ctx) => {
   if (isAnyOtherMenuOpen.value) {

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

@@ -7,8 +7,12 @@ const SPACING = 16;
 const ANIMATION_SPEED = 475;
 
 const app = useAppStore();
+const store = useSettingsStore();
 const { assets } = useAssets();
 
+const originalSelectedCol = app.color.col;
+const originalSelectedRow = app.color.row;
+
 let selectedCol = app.color.col;
 let selectedRow = app.color.row;
 let selectorX = GRID_START_X + selectedCol * (CELL_SIZE + SPACING) - 4;
@@ -94,7 +98,32 @@ useRender((ctx, deltaTime) => {
   ctx.fillRect(192, 96, 32, 32);
 });
 
-defineOptions({
-  render: () => null,
-});
+const handleCancel = () => {
+  select(originalSelectedCol, originalSelectedRow);
+  store.closeSubMenu();
+};
+
+const { open: openModal, close: closeModal } = useConfirmationModal();
+
+const handleConfirm = () => {
+  app.save();
+  openModal({
+    text: "hey",
+    showButtons: false,
+  });
+  setTimeout(() => {
+    closeModal();
+    store.closeSubMenu();
+  }, 2000);
+};
 </script>
+
+<template>
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+</template>

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

@@ -5,13 +5,25 @@ const props = defineProps<{
 }>();
 
 const settingsStore = useSettingsStore();
+const menusContext = inject<{
+  isSubmenuSelected: ComputedRef<boolean>;
+  selectedSubmenuParent: ComputedRef<string | null>;
+}>("menusContext")!;
 
 const { assets } = useAssets();
 
-const isOpen = computed(() => settingsStore.isMenuOpen("user"));
-const isAnyOtherMenuOpen = computed(() =>
-  settingsStore.isAnyOtherMenuOpen("user"),
+const isOpen = computed(
+  () => settingsStore.currentMenu === "user" && settingsStore.menuExpanded,
 );
+const isAnyOtherMenuOpen = computed(() => {
+  if (settingsStore.currentSubMenu) {
+    return !settingsStore.currentSubMenu.startsWith("user");
+  }
+  if (menusContext.isSubmenuSelected.value) {
+    return menusContext.selectedSubmenuParent.value !== "user";
+  }
+  return false;
+});
 
 const animation = useMenuAnimation("user", isOpen);
 

app/components/Settings/TopScreen/Notifications.vue

@@ -30,36 +30,24 @@ const mainNotification = computed(() => ({
   description: $t("settings.description"),
 }));
 
+// TODO: this could be computed instead
+const MENU_IMAGES: Record<string, HTMLImageElement> = {
+  options: assets.settings.topScreen.options.options,
+  clock: assets.settings.topScreen.clock.clock,
+  user: assets.settings.topScreen.user.user,
+  touchScreen: assets.settings.topScreen.touchScreen.touchScreen,
+};
+
 const menuNotification = computed(() => {
-  if (!store.currentMenu) return null;
-
-  let image: HTMLImageElement | null = null;
-  let id = "";
-
-  if (/^options[A-Z]/.test(store.currentMenu)) {
-    image = assets.settings.topScreen.options.options;
-    id = "options";
-  } else if (/^clock[A-Z]/.test(store.currentMenu)) {
-    image = assets.settings.topScreen.clock.clock;
-    id = "clock";
-  } else if (/^user[A-Z]/.test(store.currentMenu)) {
-    image = assets.settings.topScreen.user.user;
-    id = "user";
-  } else if (/^touchScreen[A-Z]/.test(store.currentMenu)) {
-    image = assets.settings.topScreen.touchScreen.touchScreen;
-    id = "touchScreen";
-  }
-
-  if (!image) return null;
+  if (!store.currentMenu || !store.menuExpanded) return null;
 
   return {
-    image,
-    title: $t(`settings.${id}.title`),
-    description: $t(`settings.${id}.description`),
+    image: MENU_IMAGES[store.currentMenu]!,
+    title: $t(`settings.${store.currentMenu}.title`),
+    description: $t(`settings.${store.currentMenu}.description`),
   };
 });
 
-// TODO: this could be computed instead
 const IMAGES_MAP: Record<string, HTMLImageElement> = {
   optionsStartUp: assets.settings.topScreen.options.startUp,
   optionsLanguage: assets.settings.topScreen.options.language,