From dad1d3d21e7600e424404a872cb772621c02b79d Mon Sep 17 00:00:00 2001
From: Pihkaal <pihkaal@proton.me>
Date: Tue, 30 Dec 2025 18:11:50 +0100
Subject: [PATCH] feat(settings/user/birthday): implement

---
 .../Settings/BottomScreen/Menus/Menus.vue     |  4 +-
 .../BottomScreen/Menus/User/Birthday.vue      | 84 +++++++++++++++++++
 i18n/locales/en.json                          |  8 ++
 3 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 app/components/Settings/BottomScreen/Menus/User/Birthday.vue

diff --git a/app/components/Settings/BottomScreen/Menus/Menus.vue b/app/components/Settings/BottomScreen/Menus/Menus.vue
index 58fc39a..edc2c31 100644
--- a/app/components/Settings/BottomScreen/Menus/Menus.vue
+++ b/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>
 
diff --git a/app/components/Settings/BottomScreen/Menus/User/Birthday.vue b/app/components/Settings/BottomScreen/Menus/User/Birthday.vue
new file mode 100644
index 0000000..4627bf9
--- /dev/null
+++ b/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>
diff --git a/i18n/locales/en.json b/i18n/locales/en.json
index 7b5b889..9634291 100644
--- a/i18n/locales/en.json
+++ b/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": {