feat(settings/user/userName): implement

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>