From 6dc2f2b03af1554427b83de83e5730ffa518c628 Mon Sep 17 00:00:00 2001
From: Pihkaal <hello@pihkaal.me>
Date: Fri, 6 Feb 2026 13:12:39 +0100
Subject: [PATCH] feat(settings/clock/date): intro and outro animation

---
 .../BottomScreen/Menus/Clock/Date.vue         | 33 +++++++++++++++++--
 1 file changed, 31 insertions(+), 2 deletions(-)

diff --git a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
index ea0701b..ca7cb41 100644
--- a/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
+++ b/app/components/Settings/BottomScreen/Menus/Clock/Date.vue
@@ -12,11 +12,37 @@ useIntervalFn(() => {
   now.value = new Date();
 }, 1000);
 
-const handleCancel = () => {
+const monthRef = useTemplateRef<InstanceType<typeof NumberInput>>("month");
+const dayRef = useTemplateRef<InstanceType<typeof NumberInput>>("day");
+const yearRef = useTemplateRef<InstanceType<typeof NumberInput>>("year");
+
+const animateIntro = async () => {
+  await Promise.all([
+    monthRef.value?.animateIntro(),
+    dayRef.value?.animateIntro(),
+    yearRef.value?.animateIntro(),
+  ]);
+};
+
+const animateOutro = async () => {
+  await Promise.all([
+    monthRef.value?.animateOutro(),
+    dayRef.value?.animateOutro(),
+    yearRef.value?.animateOutro(),
+  ]);
+};
+
+onMounted(() => {
+  animateIntro();
+});
+
+const handleCancel = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
-const handleConfirm = () => {
+const handleConfirm = async () => {
+  await animateOutro();
   store.closeSubMenu();
 };
 
@@ -29,18 +55,21 @@ defineOptions({ render: () => null });
 
 <template>
   <NumberInput
+    ref="month"
     :model-value="now.getMonth() + 1"
     :title="$t('settings.clock.date.month')"
     :x="1 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
+    ref="day"
     :model-value="now.getDate()"
     :title="$t('settings.clock.date.day')"
     :x="5 * 16 - 1"
     :disabled="true"
   />
   <NumberInput
+    ref="year"
     :model-value="now.getFullYear()"
     :title="$t('settings.clock.date.year')"
     :digits="4"