feat: remove query based routing

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);