From 3d5d326e53f740be537a7e7f21b6dde2ef06e2c7 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Tue, 25 Nov 2025 19:52:35 +0100
Subject: [PATCH] feat(settings): compose title notification instead of using
 image

---
 .../images/settings/top-screen/settings.webp  | Bin 0 -> 220 bytes
 .../Settings/TopScreen/Notifications.vue      |  57 ++++++++++++------
 i18n/locales/en.json                          |  23 +++++--
 3 files changed, 58 insertions(+), 22 deletions(-)
 create mode 100644 app/assets/images/settings/top-screen/settings.webp

diff --git a/app/assets/images/settings/top-screen/settings.webp b/app/assets/images/settings/top-screen/settings.webp
new file mode 100644
index 0000000000000000000000000000000000000000..0ace11e0e5e55b1f5a8180b9758c903d851084f3
GIT binary patch
literal 220
zcmV<203-iWNk&H000012MM6+kP&iD-0000lEC34t1*6)wsu0II4qp`N7=a2e0uhLD
zhu-(q01^F1n6_<_p?2FRqq*qp?=z)E8@XEaDPBU#{}Djx1BfYo{08?q#ffkeafs8z
z`2d_YOq!rrZZ_Zs8I!!2`{lC(#4})1w)>pYdEO4@lGSIw)Jkk(zZ64Ii28Ft!*d$<
z(t(>CY5@`e7Nw{IkN|K{A5eX02Xb(HXa^FcpP!#ROV%`5BeV^Zms$zV(kZigWXjY<
WEV)`-4s{(?TPaUpF$Ow2nhO9d9bIz(

literal 0
HcmV?d00001

diff --git a/app/components/Settings/TopScreen/Notifications.vue b/app/components/Settings/TopScreen/Notifications.vue
index d244e7a..5bd2ecc 100644
--- a/app/components/Settings/TopScreen/Notifications.vue
+++ b/app/components/Settings/TopScreen/Notifications.vue
@@ -1,6 +1,6 @@
 <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 SETTINGS_IMAGE from "/assets/images/settings/top-screen/settings.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";
@@ -10,14 +10,14 @@ const store = useSettingsStore();
 
 const [
   notificationImage,
-  titleImage,
+  settingsImage,
   optionsImage,
   clockImage,
   userImage,
   touchScreenImage,
 ] = useImages(
   NOTIFICATION_IMAGE,
-  TITLE_IMAGE,
+  SETTINGS_IMAGE,
   OPTIONS_IMAGE,
   CLOCK_IMAGE,
   USER_IMAGE,
@@ -28,38 +28,61 @@ const activeMenu = computed(() => {
   if (!store.activeMenu) return null;
 
   if (/^options[A-Z]/.test(store.activeMenu)) {
-    return { text: "Options", image: optionsImage };
+    return { id: "options", image: optionsImage };
   }
   if (/^clock[A-Z]/.test(store.activeMenu)) {
-    return { text: "Clock", image: clockImage };
+    return { id: "clock", image: clockImage };
   }
   if (/^user[A-Z]/.test(store.activeMenu)) {
-    return { text: "User", image: userImage };
+    return { id: "user", image: userImage };
   }
   if (/^touchScreen[A-Z]/.test(store.activeMenu)) {
-    return { text: "Touch Screen", image: touchScreenImage };
+    return { id: "touchScreen", image: touchScreenImage };
   }
 
   return null;
 });
 
+const renderNotification = (
+  ctx: CanvasRenderingContext2D,
+  image: HTMLImageElement,
+  title: string,
+  description: string,
+) => {
+  ctx.drawImage(notificationImage!, 0, 0);
+  ctx.drawImage(image, 2, 2);
+
+  ctx.font = "10px NDS10";
+  ctx.fillStyle = "#282828";
+  ctx.fillText(title, 52, 13);
+
+  ctx.fillStyle = "#fbfbfb";
+  const lines = description.split("\n");
+  const textY = lines.length === 1 ? 36 : 28;
+  for (let i = 0; i < lines.length; i += 1) {
+    ctx.fillText(lines[i]!, 52, textY + 14 * i);
+  }
+};
+
 useRender((ctx) => {
   ctx.translate(0, activeMenu.value ? 144 - 16 : 144);
 
-  ctx.drawImage(titleImage!, 0, 0);
+  renderNotification(
+    ctx,
+    settingsImage!,
+    $t(`settings.title`),
+    $t(`settings.description`),
+  );
 
   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);
+    renderNotification(
+      ctx,
+      activeMenu.value.image!,
+      $t(`settings.${activeMenu.value.id}.title`),
+      $t(`settings.${activeMenu.value.id}.description`),
+    );
   }
 });
 
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 4a7e454..fc838b4 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -1,10 +1,23 @@
 {
   "settings": {
-    "menus": {
-      "options": "Options",
-      "clock": "Clock",
-      "user": "User",
-      "touchScreen": "Touch Screen"
+    "title": "Settings",
+    "description": "Change system settings here. Select\nthe settings you'd like to change.",
+
+    "options": {
+      "title": "Options",
+      "description": "Change other settings."
+    },
+    "clock": {
+      "title": "Clock",
+      "description": "Change date, time, and alarm settings."
+    },
+    "user": {
+      "title": "User",
+      "description": "Enter user informations."
+    },
+    "touchScreen": {
+      "title": "Touch Screen",
+      "description": "TODO"
     }
   }
 }