feat(settings): compose title notification instead of using image

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);
+    renderNotification(
-    ctx.drawImage(activeMenu.value.image!, 2, 2);
+      ctx,
-
+      activeMenu.value.image!,
-    ctx.font = "10px NDS10";
+      $t(`settings.${activeMenu.value.id}.title`),
-    ctx.fillStyle = "#282828";
+      $t(`settings.${activeMenu.value.id}.description`),
-    ctx.fillText(activeMenu.value.text, 52, 13);
+    );
-
-    ctx.fillStyle = "#fbfbfb";
-    ctx.fillText("TODO", 52, 36);
   }
 });
 

i18n/locales/en.json

@@ -1,10 +1,23 @@
 {
   "settings": {
-    "menus": {
+    "title": "Settings",
-      "options": "Options",
+    "description": "Change system settings here. Select\nthe settings you'd like to change.",
-      "clock": "Clock",
+
-      "user": "User",
+    "options": {
-      "touchScreen": "Touch Screen"
+      "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"
     }
   }
 }