From 2a38ccc2e4103f40b753a433c0386046d5c69517 Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Thu, 15 Jan 2026 19:59:11 +0100
Subject: [PATCH] feat(settings/user/userName): implement

---
 .../Settings/BottomScreen/Menus/Menus.vue     |  16 +++--
 .../BottomScreen/Menus/User/UserName.vue      |  64 ++++++++++++++++++
 app/utils/settings.ts                         |   2 +-
 i18n/locales/en.json                          |   8 ++-
 .../settings/bottom-screen/background.webp    | Bin 0 -> 94 bytes
 .../bottom-screen/user/name-field.png         | Bin 0 -> 13351 bytes
 .../bottom-screen/user/name-title.webp        | Bin 0 -> 74 bytes
 7 files changed, 81 insertions(+), 9 deletions(-)
 create mode 100644 app/components/Settings/BottomScreen/Menus/User/UserName.vue
 create mode 100644 public/nds/images/settings/bottom-screen/background.webp
 create mode 100644 public/nds/images/settings/bottom-screen/user/name-field.png
 create mode 100644 public/nds/images/settings/bottom-screen/user/name-title.webp

diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index 1a0df1d..2876094 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/app/components/Settings/BottomScreen/Menus/Menus.vue
@@ -7,6 +7,7 @@ import OptionsGbaMode from "./Options/GbaMode.vue";
 import UserMenu from "./User/Menu.vue";
 import UserColor from "./User/Color.vue";
 import UserBirthday from "./User/Birthday.vue";
+import UserUserName from "./User/UserName.vue";
 
 import ClockMenu from "./Clock/Menu.vue";
 import ClockDate from "./Clock/Date.vue";
@@ -43,7 +44,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
 
     user: [127, 119, 49, 49],
     userBirthday: [79, 71, 49, 49],
-    userName: [127, 71, 49, 49],
+    userUserName: [127, 71, 49, 49],
     userMessage: [175, 71, 49, 49],
     userColor: [127, 23, 49, 49],
 
@@ -56,7 +57,7 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     } else {
       if (buttonName === "options") select("optionsLanguage");
       if (buttonName === "clock") select("clockAlarm");
-      if (buttonName === "user") select("userName");
+      if (buttonName === "user") select("userUserName");
       if (buttonName === "touchScreen") throw new Error("Not implemented");
     }
   },
@@ -103,14 +104,14 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     user: {
       left: "clock",
       right: "touchScreen",
-      up: "userName",
+      up: "userUserName",
     },
     userBirthday: {
       down: ["user", false],
       up: ["userColor", false],
-      right: "userName",
+      right: "userUserName",
     },
-    userName: {
+    userUserName: {
       down: "user",
       left: "userBirthday",
       right: "userMessage",
@@ -118,13 +119,13 @@ const { select, selected, selectorPosition } = useButtonNavigation({
     },
     userMessage: {
       down: ["user", false],
-      left: "userName",
+      left: "userUserName",
       up: ["userColor", false],
     },
     userColor: {
       left: ["userBirthday", false],
       right: ["userMessage", false],
-      down: "userName",
+      down: "userUserName",
     },
 
     touchScreen: {
@@ -171,6 +172,7 @@ const viewComponents: Record<string, Component> = {
 
   userColor: UserColor,
   userBirthday: UserBirthday,
+  userUserName: UserUserName,
 };
 </script>
 
diff --git a/app/components/Settings/BottomScreen/Menus/User/UserName.vue b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
new file mode 100644
index 0000000..e562b1e
--- /dev/null
+++ b/app/components/Settings/BottomScreen/Menus/User/UserName.vue
@@ -0,0 +1,64 @@
+<script setup lang="ts">
+const store = useSettingsStore();
+
+const { onRender } = useScreen();
+const { assets: atlas } = useAssets();
+const assets = atlas.images.settings.bottomScreen;
+
+const USER_NAME = "pihkaal";
+const REAL_NAME = "Stevan";
+
+const handleCancel = () => {
+  store.closeSubMenu();
+};
+
+const handleConfirm = () => {
+  store.closeSubMenu();
+};
+
+onRender((ctx) => {
+  ctx.font = "10px NDS10";
+  ctx.textBaseline = "top";
+
+  assets.background.draw(ctx, 0, 0);
+
+  const drawTextField = (
+    title: string,
+    text: string,
+    x: number,
+    y: number,
+  ): void => {
+    // title
+    ctx.fillStyle = "#282828";
+    assets.user.nameTitle.draw(ctx, x + 12, y);
+    fillTextHCentered(ctx, title, x + 12, y + 4, 169);
+
+    // field
+    ctx.fillStyle = "#fbfbfb";
+    assets.user.nameField.draw(
+      ctx,
+      x,
+      y + assets.user.nameTitle.rect.height - 1,
+    );
+
+    for (let i = 0; i < text.length; i += 1, x += 16) {
+      ctx.fillText(text[i]!, x + 20, y + assets.user.nameTitle.rect.height + 3);
+    }
+  };
+
+  drawTextField($t("settings.user.userName.userName"), USER_NAME, 31, 48);
+  drawTextField($t("settings.user.userName.firstName"), REAL_NAME, 31, 96);
+});
+
+defineOptions({ render: () => null });
+</script>
+
+<template>
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleCancel"
+    @activate-a="handleConfirm"
+  />
+</template>
diff --git a/app/utils/settings.ts b/app/utils/settings.ts
index 3be3b33..0908d61 100644
--- a/app/utils/settings.ts
+++ b/app/utils/settings.ts
@@ -13,7 +13,7 @@ export const SETTINGS_SUB_MENUS = [
   "clockTime",
   "clockDate",
   "userBirthday",
-  "userName",
+  "userUserName",
   "userMessage",
   "userColor",
 ] as const;
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 77c4838..505361a 100644
--- a/i18n/locales/en.json
+++ b/i18n/locales/en.json
@@ -59,8 +59,14 @@
         "description": "This is my birthday.",
         "confirmation": {
           "today": "Yes, it's today!",
-          "future": "Don’t forget to wish me in {days} days!"
+          "future": "Don't forget to wish me in {days} days!"
         }
+      },
+      "userName": {
+        "title": "User Name",
+        "description": "My user name and first name.",
+        "userName": "User Name",
+        "firstName": "First Name"
       }
     },
     "touchScreen": {
diff --git a/public/nds/images/settings/bottom-screen/background.webp b/public/nds/images/settings/bottom-screen/background.webp
new file mode 100644
index 0000000000000000000000000000000000000000..6fbb151fd12c0512ee591f17a54b7aee62b3394b
GIT binary patch
literal 94
zcmWIYbaM-1U|<M$bqWXzu<-E$vi1KT&}V3kber^NC*M;;xd*4T)ffGDyS*)N_rs+5
w6Mp`jcF=lV>U%y0+kd;6|KDx=|L#D2`Gft|AMVTkc+dBzoE;+k@7)C<0Ayz`g#Z8m

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/user/name-field.png b/public/nds/images/settings/bottom-screen/user/name-field.png
new file mode 100644
index 0000000000000000000000000000000000000000..e0f27bbcab0197401587ffa47fc623b1196e5c16
GIT binary patch
literal 13351
zcmeHNPl!@M82?^8TX#cJ_7HSZYD4J{QkRS*-r}};P*S>d+X|}V##W?(EfPwnu0>tD
zCS5!PA>l!S4$?(C>2cYMk{8LK-fw7L`gY0f?c2A$w=>|I`R4!pzVDm)z8RliOD%im
zj?WR1ClQZj)cBM7^SKWbN%Kzz3o0S4WtJDEZ=cURRSEg7l2nM^zc}*qrc0&$x8s>4
zQSKDc`ZJ;*YS#J&(Zev&<_giJmqf=_-+V}4RtsiV<2Tlb&Yi$ddi?gvBQ<m8K_a;{
zvnd^&JsXs--nyuENr{+p{hmv@bK%t&saC7~Qmauk8bxGkQ2S>6$@q4=T}A|hK?;RJ
z)ND3)9k*I7*00a!BTH7YXM<=^dA(lp`~3u%%nadhm^z&f$-Q2W8jS`4J2M0NL|_nM
z743GL6h$GA$1}DX&U`-je$xP=-|thkTBSfBKmh0vpPZdzO<4IN_Cm*b-)6*I33y*J
zR|c@AUayad5wA2&aivnBNF>6<9?E8WF|z#vY_9{_b_zMi!2n%Az}8wU7O7M!{ZlXW
z+be54@;T_`*#5KGEah^!F>Il~2#z@p*lKM2vHf0TW9+r53npk#>|bKbp{Ae8v>ST*
z`A!?HH$?UGlW`EkIOR?cysL7#%<AD_PN&n%!PPeejRO|}4)AtCl!wL)9bh?%vpA5q
zlNyWj#5rIw;QHYN1N4YkObZ5B47h$c!2mrX7Sn<O76YyyPWS<OL`<e9`2map@C9I#
zBF3c=((nghv*OVU{s1oRkPllHegbU&LZLt|my6|@Ja5sRKww7*Ko*C?A?5RV=9hB$
zgm25`7LTi3p810e<Q!?l>~(iXqfMwZ7z`%V*jns%yR}Tw{(taW*iawm=kMdc0Dlk^
zSpJnIO{fecgk59+G||La2nZ!`7C*&m3?LwszyN5XiL($8O5iMhiq#lEKq!F$&_okw
tAz<1~(dbQu5r{<l-Q9E?bo`9S9B=dbeCq4T(;vTsPAsKj?-o}IzX6Gbd-ebT

literal 0
HcmV?d00001

diff --git a/public/nds/images/settings/bottom-screen/user/name-title.webp b/public/nds/images/settings/bottom-screen/user/name-title.webp
new file mode 100644
index 0000000000000000000000000000000000000000..e146a3a388d640cb0a0e14edde6af4ef0b17a0aa
GIT binary patch
literal 74
zcmWIYbaQiJU|<M$bqWXzu<$Vhvh`Omun4eDGMi)~=KtN(%F3VJwqr(pljkhm`HT%W
e%YW?I{cifi5EW6+zl)s{+m5(A{mW?Zo(TXkY#Q_c

literal 0
HcmV?d00001