From d7ce212095f969e267de592186c096ea42521c1b Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 24 Jul 2026 12:17:48 +0200
Subject: [PATCH] fix(settings): prevent setting input done button from
 animating initially when mounting

---
 src/features/settings/components/SettingsInput.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/features/settings/components/SettingsInput.vue b/src/features/settings/components/SettingsInput.vue
index 18b7367..88bf6b5 100644
--- a/src/features/settings/components/SettingsInput.vue
+++ b/src/features/settings/components/SettingsInput.vue
@@ -38,6 +38,8 @@ const store = useSettingsStore();
 const inputModel = ref(store.get(props.path));
 let oldInputValue = inputModel.value;
 
+const doneButtonInitial = ref(true);
+
 const inputId = useId();
 const inputLabelId = useId();
 
@@ -59,6 +61,10 @@ watch(store, (newValue) => {
     };
 });
 
+watch(inputModel, () => {
+    doneButtonInitial.value = false;
+});
+
 const apply = function apply () {
     store.set(props.path, inputModel.value);
 };
@@ -82,7 +88,9 @@ const apply = function apply () {
                 class="input"
             />
             <button
+                ref="doneButton"
                 class="done-button button"
+                :class="{ initial: doneButtonInitial }"
                 type="submit"
                 :title="t('settings.input.done.title')"
                 :aria-label="t('settings.input.done.ariaLabel')"
@@ -141,6 +149,9 @@ const apply = function apply () {
     border-radius: calc(var(--input-padding) + 13px);
     font-size: 1em;
     font-family: inherit;
+}
+
+.done-button:not(.initial) {
     animation: done-button-disappear var(--total-animation-duration);
 }