feat(settings): render top and bottom bar, implement notifications stack and submenu navigation

app/components/Settings/BottomScreen/Background.vue

@@ -1,10 +1,18 @@
 <script setup lang="ts">
 import BACKGROUND_IMAGE from "/assets/images/home/bottom-screen/background.webp";
+import TOP_BAR_IMAGE from "/assets/images/settings/bottom-screen/top-bar.webp";
+import BOTTOM_BAR_IMAGE from "/assets/images/settings/bottom-screen/bottom-bar.webp";
 
-const [backgroundImage] = useImages(BACKGROUND_IMAGE);
+const [backgroundImage, topBarImage, bottomBarImage] = useImages(
+  BACKGROUND_IMAGE,
+  TOP_BAR_IMAGE,
+  BOTTOM_BAR_IMAGE,
+);
 
 useRender((ctx) => {
   ctx.drawImage(backgroundImage!, 0, 0);
+  ctx.drawImage(topBarImage!, 0, 0);
+  ctx.drawImage(bottomBarImage!, 0, 168);
 });
 
 defineOptions({

app/components/Settings/BottomScreen/BottomScreen.vue

@@ -1,15 +1,44 @@
 <script setup lang="ts">
 import Background from "./Background.vue";
 import Menus from "./Menus/Menus.vue";
+import OptionsStartUp from "./Menus/Options/StartUp.vue";
+import OptionsLanguage from "./Menus/Options/Language.vue";
+import OptionsGbaMode from "./Menus/Options/GbaMode.vue";
 
 const store = useSettingsStore();
 
+const viewComponents: Record<string, Component> = {
+  optionsStartUp: OptionsStartUp,
+  optionsLanguage: OptionsLanguage,
+  optionsGbaMode: OptionsGbaMode,
+};
+
+const currentViewComponent = computed(() => {
+  if (store.currentView === "menu" || !store.currentView) return null;
+  return viewComponents[store.currentView] || null;
+});
+
+const handleBackNavigation = (event: KeyboardEvent) => {
+  if (event.key === "Escape" || event.key === "Backspace") {
+    if (store.navigationStack.length > 0) {
+      store.popNavigation();
+      event.preventDefault();
+    }
+  }
+};
+
 onMounted(() => {
   store.$reset();
+  window.addEventListener("keydown", handleBackNavigation);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", handleBackNavigation);
 });
 </script>
 
 <template>
   <Background />
-  <Menus />
+  <Menus v-if="store.currentView === 'menu'" />
+  <component :is="currentViewComponent" v-else-if="currentViewComponent" />
 </template>

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

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import OptionsMenu from "./OptionsMenu.vue";
-import ClockMenu from "./ClockMenu.vue";
-import UserMenu from "./UserMenu.vue";
-import TouchScreenMenu from "./TouchScreenMenu.vue";
+import OptionsMenu from "./Options/Menu.vue";
+import ClockMenu from "./Clock/Menu.vue";
+import UserMenu from "./User/Menu.vue";
+import TouchScreenMenu from "./TouchScreen/Menu.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
 const { selectedButton: selected, selectorPosition } = useButtonNavigation({
@@ -26,6 +26,11 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
     touchScreen: [175, 119, 49, 49],
   },
   initialButton: "options",
+  onButtonClick: (buttonName: string) => {
+    if (isSubmenu(buttonName)) {
+      settingsStore.pushNavigation(buttonName);
+    }
+  },
   navigation: {
     options: {
       right: "clock",
@@ -101,6 +106,13 @@ const { selectedButton: selected, selectorPosition } = useButtonNavigation({
 
 const settingsStore = useSettingsStore();
 
+const isSubmenu = (buttonName: string) => {
+  return (
+    /^(options|clock|user|touchScreen)[A-Z]/.test(buttonName) &&
+    !["options", "clock", "user", "touchScreen"].includes(buttonName)
+  );
+};
+
 watch(
   selected,
   (newSelected) => {

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText("GBA Mode", 10, 20);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText("Language", 10, 20);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

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

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+useRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#000000";
+  ctx.fillText("Startup", 10, 20);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>