feat(settings/user/birthday): implement

app/components/Settings/BottomScreen/Menus/Menus.vue

@@ -4,10 +4,11 @@ import OptionsStartUp from "./Options/StartUp.vue";
 import OptionsLanguage from "./Options/Language.vue";
 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 ClockMenu from "./Clock/Menu.vue";
-import UserMenu from "./User/Menu.vue";
 import TouchScreenMenu from "./TouchScreen/Menu.vue";
 import Selector from "~/components/Common/ButtonSelector.vue";
 
@@ -164,6 +165,7 @@ const viewComponents: Record<string, Component> = {
   optionsGbaMode: OptionsGbaMode,
 
   userColor: UserColor,
+  userBirthday: UserBirthday,
 };
 </script>
 

app/components/Settings/BottomScreen/Menus/User/Birthday.vue

@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { SettingsBottomScreenNumberInput as NumberInput } from "#components";
+
+const store = useSettingsStore();
+const confirmationModal = useConfirmationModal();
+
+const BIRTHDAY_DAY = 25;
+const BIRTHDAY_MONTH = 4;
+const BIRTHDAY_YEAR = 2002;
+
+const handleActivateB = () => {
+  store.closeSubMenu();
+};
+
+const handleActivateA = () => {
+  const today = new Date();
+  const currentYear = today.getFullYear();
+
+  const isBirthdayToday =
+    today.getMonth() === BIRTHDAY_MONTH - 1 && today.getDate() === BIRTHDAY_DAY;
+
+  let text: string;
+  if (isBirthdayToday) {
+    text = $t("settings.user.birthday.confirmation.today");
+  } else {
+    let nextBirthday = new Date(currentYear, BIRTHDAY_MONTH - 1, BIRTHDAY_DAY);
+    if (nextBirthday < today) {
+      nextBirthday = new Date(
+        currentYear + 1,
+        BIRTHDAY_MONTH - 1,
+        BIRTHDAY_DAY,
+      );
+    }
+
+    const diffTime = nextBirthday.getTime() - today.getTime();
+    const daysUntilBirthday = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+
+    text = $t("settings.user.birthday.confirmation.future", {
+      days: daysUntilBirthday,
+    });
+  }
+
+  confirmationModal.open({
+    text,
+    onClosed: () => store.closeSubMenu(),
+  });
+  setTimeout(() => {
+    confirmationModal.close();
+  }, 2000);
+};
+
+defineOptions({ render: () => null });
+</script>
+
+<template>
+  <!-- date format may change based on the language (d/m/y is superior btw) -->
+  <NumberInput
+    :model-value="BIRTHDAY_MONTH"
+    title="Month"
+    :x="1 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="BIRTHDAY_DAY"
+    title="Day"
+    :x="5 * 16"
+    :disabled="true"
+  />
+  <NumberInput
+    :model-value="BIRTHDAY_YEAR"
+    title="Day"
+    :digits="4"
+    :x="9 * 16"
+    :disabled="true"
+  />
+
+  <CommonButtons
+    :y-offset="0"
+    b-label="Cancel"
+    a-label="Confirm"
+    @activate-b="handleActivateB"
+    @activate-a="handleActivateA"
+  />
+</template>

i18n/locales/en.json

@@ -35,6 +35,14 @@
         "title": "Color",
         "description": "Select your favorite color.",
         "confirmation": "Color setting saved."
+      },
+      "birthday": {
+        "title": "Birthday",
+        "description": "This is my birthday.",
+        "confirmation": {
+          "today": "Yes, it's today!",
+          "future": "Don’t forget to wish me in {days} days!"
+        }
       }
     },
     "touchScreen": {