feat(settings): menu navigation (unanimated)

app/components/Settings/TopScreen/Calendar.vue

@@ -13,6 +13,8 @@ useRender((ctx) => {
   ctx.fillStyle = "black";
   ctx.font = "7px NDS7";
 
+  ctx.translate(0, -16);
+
   const CALENDAR_COLS = 7;
   const CALENDAR_ROWS = 5;
   const CALENDAR_LEFT = 128;

app/components/Settings/TopScreen/Clock.vue

@@ -52,6 +52,8 @@ function drawLine(
 }
 
 useRender((ctx) => {
+  ctx.translate(0, -16);
+
   ctx.drawImage(clockImage!, 13, 45);
 
   const now = new Date();

app/components/Settings/TopScreen/Notifications.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import TITLE_IMAGE from "/assets/images/settings/top-screen/notification-title.webp";
+
+const [titleImage] = useImages(TITLE_IMAGE);
+
+useRender((ctx) => {
+  ctx.drawImage(titleImage!, 0, 144);
+});
+
+defineOptions({
+  render: () => null,
+});
+</script>

app/components/Settings/TopScreen/TopScreen.vue

@@ -3,6 +3,7 @@ import Background from "./Background.vue";
 import Calendar from "./Calendar.vue";
 import Clock from "./Clock.vue";
 import StatusBar from "./StatusBar.vue";
+import Notifications from "./Notifications.vue";
 </script>
 
 <template>
@@ -10,4 +11,5 @@ import StatusBar from "./StatusBar.vue";
   <Calendar />
   <Clock />
   <StatusBar />
+  <Notifications />
 </template>