From e5e08bacbfea7a43061056dfc3821916e7d9acdb Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 25 Nov 2025 18:13:52 +0100
Subject: [PATCH] feat(settings): render title and menu image in notification

---
 .../settings/top-screen/notification.webp     | Bin 0 -> 146 bytes
 .../Settings/BottomScreen/Menus/ClockMenu.vue |  15 +++--
 .../Settings/BottomScreen/Menus/Menus.vue     |  45 ++++---------
 .../BottomScreen/Menus/OptionsMenu.vue        |  15 +++--
 .../BottomScreen/Menus/TouchScreenMenu.vue    |   9 ++-
 .../Settings/BottomScreen/Menus/UserMenu.vue  |  15 +++--
 .../Settings/TopScreen/Notifications.vue      |  60 +++++++++++++++++-
 app/stores/settings.ts                        |  22 ++++++-
 8 files changed, 128 insertions(+), 53 deletions(-)
 create mode 100644 app/assets/images/settings/top-screen/notification.webp

diff --git a/app/assets/images/settings/top-screen/notification.webp b/app/assets/images/settings/top-screen/notification.webp
new file mode 100644
index 0000000000000000000000000000000000000000..836c64fe5cedc8b459cef7c20bccbb1b0803e317
GIT binary patch
literal 146
zcmV;D0B!$LNk&GB00012MM6+kP&iC}0000l|G*0XRWOPqDGYLA5q*(>gh<E}1-De)
z@=EsD`Jey(3rGlJOoP4?{=T%a%IRJX9}XcOz*y<t3Lm|EQ#`{*#|^*(FaxLia`@=w
zo8uLHguDTxLAqCkk6yl2Ji$lDEn`B(1xW5t(F^dopkl|r|9mhbA1Yc4kg2E*5CUjF
AlmGw#

literal 0
HcmV?d00001

diff --git a/app/components/Settings/BottomScreen/Menus/ClockMenu.vue b/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
index 1628514..004662d 100644
--- a/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/ClockMenu.vue
@@ -9,10 +9,10 @@ import DATE_IMAGE from "/assets/images/settings/top-screen/clock/date.webp";
 const props = defineProps<{
   x: number;
   y: number;
-  isOpen: boolean;
-  isAnyOtherMenuOpen: boolean;
 }>();
 
+const settingsStore = useSettingsStore();
+
 const [
   menuImage,
   menuActiveImage,
@@ -29,12 +29,17 @@ const [
   DATE_IMAGE,
 );
 
-const animation = useMenuAnimation(toRef(() => props.isOpen));
+const isOpen = computed(() => settingsStore.isMenuOpen("clock"));
+const isAnyOtherMenuOpen = computed(() =>
+  settingsStore.isAnyOtherMenuOpen("clock"),
+);
+
+const animation = useMenuAnimation(isOpen);
 
 useRender((ctx) => {
   ctx.translate(props.x, props.y);
 
-  if (props.isOpen || animation.playing) {
+  if (isOpen.value || animation.playing) {
     ctx.drawImage(
       timeImage!,
       48 - animation.stage2Offset,
@@ -48,7 +53,7 @@ useRender((ctx) => {
     ctx.drawImage(alarmImage!, 0, -48 + animation.stage1Offset);
 
     ctx.drawImage(menuActiveImage!, 0, 0);
-  } else if (props.isAnyOtherMenuOpen) {
+  } else if (isAnyOtherMenuOpen.value) {
     ctx.drawImage(menuDisabledImage!, 0, 0);
   } else {
     ctx.drawImage(menuImage!, 0, 0);
diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index f7898cf..6cbf6ee 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -99,43 +99,22 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
   },
 });
 
-const isMenuOpen = (menu: string) => {
-  const regex = new RegExp(`^${menu}[A-Z]`);
-  return regex.test(selected.value);
-};
+const settingsStore = useSettingsStore();
 
-const isAnyOtherMenuOpen = (excludeMenu: string) => {
-  return ["options", "clock", "user"]
-    .filter((menu) => menu !== excludeMenu)
-    .some((menu) => isMenuOpen(menu));
-};
+watch(
+  selected,
+  (newSelected) => {
+    settingsStore.setActiveMenu(newSelected);
+  },
+  { immediate: true },
+);
 </script>
 
 <template>
-  <OptionsMenu
-    :x="33"
-    :y="121"
-    :is-open="isMenuOpen('options')"
-    :is-any-other-menu-open="isAnyOtherMenuOpen('options')"
-  />
-  <ClockMenu
-    :x="81"
-    :y="121"
-    :is-open="isMenuOpen('clock')"
-    :is-any-other-menu-open="isAnyOtherMenuOpen('clock')"
-  />
-  <UserMenu
-    :x="129"
-    :y="121"
-    :is-open="isMenuOpen('user')"
-    :is-any-other-menu-open="isAnyOtherMenuOpen('user')"
-  />
-  <TouchScreenMenu
-    :x="177"
-    :y="121"
-    :opacity="1"
-    :is-any-other-menu-open="isAnyOtherMenuOpen('touchScreen')"
-  />
+  <OptionsMenu :x="33" :y="121" />
+  <ClockMenu :x="81" :y="121" />
+  <UserMenu :x="129" :y="121" />
+  <TouchScreenMenu :x="177" :y="121" :opacity="1" />
 
   <Selector :rect="selectorPosition" :opacity="1" />
 </template>
diff --git a/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue b/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
index e8ddbf7..21d86ac 100644
--- a/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/OptionsMenu.vue
@@ -9,10 +9,10 @@ import START_UP_IMAGE from "/assets/images/settings/top-screen/options/start-up.
 const props = defineProps<{
   x: number;
   y: number;
-  isOpen: boolean;
-  isAnyOtherMenuOpen: boolean;
 }>();
 
+const settingsStore = useSettingsStore();
+
 const [
   menuImage,
   menuActiveImage,
@@ -29,12 +29,17 @@ const [
   START_UP_IMAGE,
 );
 
-const animation = useMenuAnimation(toRef(() => props.isOpen));
+const isOpen = computed(() => settingsStore.isMenuOpen("options"));
+const isAnyOtherMenuOpen = computed(() =>
+  settingsStore.isAnyOtherMenuOpen("options"),
+);
+
+const animation = useMenuAnimation(isOpen);
 
 useRender((ctx) => {
   ctx.translate(props.x, props.y);
 
-  if (props.isOpen || animation.playing) {
+  if (isOpen.value || animation.playing) {
     ctx.drawImage(languageImage!, 0, -48 + animation.stage1Offset);
     ctx.drawImage(
       gbaModeImage!,
@@ -48,7 +53,7 @@ useRender((ctx) => {
     );
 
     ctx.drawImage(menuActiveImage!, 0, 0);
-  } else if (props.isAnyOtherMenuOpen) {
+  } else if (isAnyOtherMenuOpen.value) {
     ctx.drawImage(menuDisabledImage!, 0, 0);
   } else {
     ctx.drawImage(menuImage!, 0, 0);
diff --git a/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue b/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
index 0b01080..ab05c68 100644
--- a/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/TouchScreenMenu.vue
@@ -5,16 +5,21 @@ import MENU_DISABLED_IMAGE from "/assets/images/settings/top-screen/touch_screen
 const props = defineProps<{
   x: number;
   y: number;
-  isAnyOtherMenuOpen: boolean;
 }>();
 
+const settingsStore = useSettingsStore();
+
 const [menuImage, menuDisabledImage] = useImages(
   MENU_IMAGE,
   MENU_DISABLED_IMAGE,
 );
 
+const isAnyOtherMenuOpen = computed(() =>
+  settingsStore.isAnyOtherMenuOpen("touchScreen"),
+);
+
 useRender((ctx) => {
-  if (props.isAnyOtherMenuOpen) {
+  if (isAnyOtherMenuOpen.value) {
     ctx.drawImage(menuDisabledImage!, props.x, props.y);
   } else {
     ctx.drawImage(menuImage!, props.x, props.y);
diff --git a/app/components/Settings/BottomScreen/Menus/UserMenu.vue b/app/components/Settings/BottomScreen/Menus/UserMenu.vue
index dea2d97..52ea109 100644
--- a/app/components/Settings/BottomScreen/Menus/UserMenu.vue
+++ b/app/components/Settings/BottomScreen/Menus/UserMenu.vue
@@ -10,10 +10,10 @@ import USER_NAME_IMAGE from "/assets/images/settings/top-screen/user/user-name.w
 const props = defineProps<{
   x: number;
   y: number;
-  isOpen: boolean;
-  isAnyOtherMenuOpen: boolean;
 }>();
 
+const settingsStore = useSettingsStore();
+
 const [
   menuImage,
   menuActiveImage,
@@ -32,12 +32,17 @@ const [
   USER_NAME_IMAGE,
 );
 
-const animation = useMenuAnimation(toRef(() => props.isOpen));
+const isOpen = computed(() => settingsStore.isMenuOpen("user"));
+const isAnyOtherMenuOpen = computed(() =>
+  settingsStore.isAnyOtherMenuOpen("user"),
+);
+
+const animation = useMenuAnimation(isOpen);
 
 useRender((ctx) => {
   ctx.translate(props.x, props.y);
 
-  if (props.isOpen || animation.playing) {
+  if (isOpen.value || animation.playing) {
     ctx.drawImage(
       birthdayImage!,
       -48 + animation.stage2Offset,
@@ -56,7 +61,7 @@ useRender((ctx) => {
     );
 
     ctx.drawImage(menuActiveImage!, 0, 0);
-  } else if (props.isAnyOtherMenuOpen) {
+  } else if (isAnyOtherMenuOpen.value) {
     ctx.drawImage(menuDisabledImage!, 0, 0);
   } else {
     ctx.drawImage(menuImage!, 0, 0);
diff --git a/app/components/Settings/TopScreen/Notifications.vue b/app/components/Settings/TopScreen/Notifications.vue
index 392305a..d244e7a 100644
--- a/app/components/Settings/TopScreen/Notifications.vue
+++ b/app/components/Settings/TopScreen/Notifications.vue
@@ -1,10 +1,66 @@
 <script setup lang="ts">
+import NOTIFICATION_IMAGE from "/assets/images/settings/top-screen/notification.webp";
 import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
+import OPTIONS_IMAGE from "/assets/images/settings/top-screen/options/options.webp";
+import CLOCK_IMAGE from "/assets/images/settings/top-screen/clock/clock.webp";
+import USER_IMAGE from "/assets/images/settings/top-screen/user/user.webp";
+import TOUCH_SCREEN_IMAGE from "/assets/images/settings/top-screen/touch_screen/touch-screen.webp";
 
-const [titleImage] = useImages(TITLE_IMAGE);
+const store = useSettingsStore();
+
+const [
+  notificationImage,
+  titleImage,
+  optionsImage,
+  clockImage,
+  userImage,
+  touchScreenImage,
+] = useImages(
+  NOTIFICATION_IMAGE,
+  TITLE_IMAGE,
+  OPTIONS_IMAGE,
+  CLOCK_IMAGE,
+  USER_IMAGE,
+  TOUCH_SCREEN_IMAGE,
+);
+
+const activeMenu = computed(() => {
+  if (!store.activeMenu) return null;
+
+  if (/^options[A-Z]/.test(store.activeMenu)) {
+    return { text: "Options", image: optionsImage };
+  }
+  if (/^clock[A-Z]/.test(store.activeMenu)) {
+    return { text: "Clock", image: clockImage };
+  }
+  if (/^user[A-Z]/.test(store.activeMenu)) {
+    return { text: "User", image: userImage };
+  }
+  if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
+    return { text: "Touch Screen", image: touchScreenImage };
+  }
+
+  return null;
+});
 
 useRender((ctx) => {
-  ctx.drawImage(titleImage!, 0, 144);
+  ctx.translate(0, activeMenu.value ? 144 - 16 : 144);
+
+  ctx.drawImage(titleImage!, 0, 0);
+
+  if (activeMenu.value) {
+    ctx.translate(0, 16);
+
+    ctx.drawImage(notificationImage!, 0, 0);
+    ctx.drawImage(activeMenu.value.image!, 2, 2);
+
+    ctx.font = "10px NDS10";
+    ctx.fillStyle = "#282828";
+    ctx.fillText(activeMenu.value.text, 52, 13);
+
+    ctx.fillStyle = "#fbfbfb";
+    ctx.fillText("TODO", 52, 36);
+  }
 });
 
 defineOptions({
diff --git a/app/stores/settings.ts b/app/stores/settings.ts
index ba53a9e..516ee57 100644
--- a/app/stores/settings.ts
+++ b/app/stores/settings.ts
@@ -1,3 +1,23 @@
 export const useSettingsStore = defineStore("settings", {
-  state: () => ({}),
+  state: () => ({
+    activeMenu: null as string | null,
+  }),
+  getters: {
+    isMenuOpen: (state) => (menu: string) => {
+      if (!state.activeMenu) return false;
+      return new RegExp(`^${menu}[A-Z]`).test(state.activeMenu);
+    },
+    isAnyOtherMenuOpen: (state) => (excludeMenu: string) => {
+      if (!state.activeMenu) return false;
+      const menus = ["options", "clock", "user", "touchScreen"];
+      return menus
+        .filter((m) => m !== excludeMenu)
+        .some((m) => new RegExp(`^${m}[A-Z]`).test(state.activeMenu!));
+    },
+  },
+  actions: {
+    setActiveMenu(menu: string | null) {
+      this.activeMenu = menu;
+    },
+  },
 });