From 7abf25aa19500b59a34f4aeb52340a97d1ebb6f9 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 24 Jul 2026 11:36:50 +0200
Subject: [PATCH 1/5] feat(tests): add pinia options to mountComponent test
 utility

---
 src/test-utils/mountComponent.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/test-utils/mountComponent.js b/src/test-utils/mountComponent.js
index 5f796cc..e381b3b 100644
--- a/src/test-utils/mountComponent.js
+++ b/src/test-utils/mountComponent.js
@@ -20,7 +20,7 @@ import { mount } from '@vue/test-utils';
 import { createI18n } from 'vue-i18n';
 import { createMemoryHistory, createRouter } from 'vue-router';
 
-export const mountComponent = function mountComponent (component, options = {}, i18nMessages = {}, routes = []) {
+export const mountComponent = function mountComponent (component, options = {}, i18nMessages = {}, routes = [], piniaOptions = {}) {
     const i18n = createI18n({
         legacy: false,
         locale: 'en',
@@ -40,6 +40,7 @@ export const mountComponent = function mountComponent (component, options = {},
                 i18n,
                 router,
                 createTestingPinia({
+                    ...piniaOptions,
                     stubActions: false,
                     createSpy: vi.fn
                 })

From f81ce63062f05799e73fe99f3b96dcc3afea8123 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 24 Jul 2026 11:59:08 +0200
Subject: [PATCH 2/5] feat(settings): make setting input reactive to stored
 setting

---
 .../settings/components/SettingsInput.vue         | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/features/settings/components/SettingsInput.vue b/src/features/settings/components/SettingsInput.vue
index b46d7eb..18b7367 100644
--- a/src/features/settings/components/SettingsInput.vue
+++ b/src/features/settings/components/SettingsInput.vue
@@ -19,7 +19,7 @@ import Icon from '@/features/icons/components/Icon.vue';
 
 import { useSettingsStore } from '../stores/settingsStore';
 
-import { computed, useId } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -35,8 +35,9 @@ const props = defineProps({
 
 const store = useSettingsStore();
 
-const inputModel = defineModel();
-inputModel.value = store.get(props.path);
+const inputModel = ref(store.get(props.path));
+let oldInputValue = inputModel.value;
+
 const inputId = useId();
 const inputLabelId = useId();
 
@@ -50,6 +51,14 @@ const hasChanged = computed(() =>
     inputModel.value !== store.get(props.path)
 );
 
+watch(store, (newValue) => {
+    const newInputValue = newValue.get(props.path);
+    if (inputModel.value === oldInputValue) {
+        inputModel.value = newInputValue;
+        oldInputValue = newInputValue;
+    };
+});
+
 const apply = function apply () {
     store.set(props.path, inputModel.value);
 };

From 9ce4cec0bf857b05f22941953452268d64f4257c 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 3/5] 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);
 }
 

From f2d228c24e4aaef08d3407929e44eb5060ac4436 Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 24 Jul 2026 12:19:17 +0200
Subject: [PATCH 4/5] feat(test-utils): add store setup functionality to
 mountComponent utility

---
 src/test-utils/mountComponent.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/src/test-utils/mountComponent.js b/src/test-utils/mountComponent.js
index e381b3b..3f8a0a4 100644
--- a/src/test-utils/mountComponent.js
+++ b/src/test-utils/mountComponent.js
@@ -21,6 +21,11 @@ import { createI18n } from 'vue-i18n';
 import { createMemoryHistory, createRouter } from 'vue-router';
 
 export const mountComponent = function mountComponent (component, options = {}, i18nMessages = {}, routes = [], piniaOptions = {}) {
+    const {
+        setupStores,
+        ...testingPiniaOptions
+    } = piniaOptions;
+
     const i18n = createI18n({
         legacy: false,
         locale: 'en',
@@ -34,16 +39,22 @@ export const mountComponent = function mountComponent (component, options = {},
         routes
     });
 
+    const testingPinia = createTestingPinia({
+        ...testingPiniaOptions,
+        stubActions: false,
+        createSpy: vi.fn
+    });
+
+    if (setupStores) {
+        setupStores();
+    }
+
     return mount(component, {
         global: {
             plugins: [
                 i18n,
                 router,
-                createTestingPinia({
-                    ...piniaOptions,
-                    stubActions: false,
-                    createSpy: vi.fn
-                })
+                testingPinia
             ],
         },
         ...options

From 99393c08f7403b30da84a95ad6e6b942c5e7fbbe Mon Sep 17 00:00:00 2001
From: Jakob Scheid <jakob.scheid@icloud.com>
Date: Fri, 24 Jul 2026 12:49:17 +0200
Subject: [PATCH 5/5] test(settings): add settings input tests

---
 .../__tests__/SettingsInput.test.js           | 174 ++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 src/features/settings/components/__tests__/SettingsInput.test.js

diff --git a/src/features/settings/components/__tests__/SettingsInput.test.js b/src/features/settings/components/__tests__/SettingsInput.test.js
new file mode 100644
index 0000000..c08f92d
--- /dev/null
+++ b/src/features/settings/components/__tests__/SettingsInput.test.js
@@ -0,0 +1,174 @@
+/*
+Copyright 2026 Seekra
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import SettingsInput from '../SettingsInput.vue';
+import { mountComponent } from '@/test-utils/mountComponent';
+import { useSettingsStore } from '../../stores/settingsStore.js';
+import { describe, expect, test } from 'vitest';
+import { nextTick } from 'vue';
+
+const getWrapper = function getWrapper(type = 'string', i18n = 'input', piniaOptions = {}) {
+    return mountComponent(SettingsInput, {
+        attrs: {
+            setting: {
+                name: 'input',
+                i18n,
+                type
+            },
+            path: 'input'
+        }
+    }, {}, [], piniaOptions);
+}
+
+describe('SettingsInput', () => {
+    test('uses correct input type', () => {
+        const stringSettingWrapper = getWrapper();
+
+        const stringInputElement = stringSettingWrapper.find('input');
+        expect(stringInputElement.attributes('type')).toBe('text');
+
+        const numberSettingWrapper = getWrapper('number');
+
+        const numberInputElement = numberSettingWrapper.find('input');
+        expect(numberInputElement.attributes('type')).toBe('number');
+    });
+
+    test('shows empty value', () => {
+        const stringSettingWrapper = getWrapper();
+
+        const inputElement = stringSettingWrapper.find('input');
+        expect(inputElement.attributes('value')).toBeUndefined();
+    });
+
+    test('shows value from store', () => {
+        const value = 'example value';
+        const stringSettingWrapper = getWrapper('string', 'input', {
+            setupStores: () => {
+                const store = useSettingsStore();
+                store.settings.input = value;
+            }
+        });
+        const inputElement = stringSettingWrapper.find('input');
+
+        expect(inputElement.element.value).toBe(value);
+    });
+
+    test('stores value', async () => {
+        const value = 'example value';
+        const wrapper = getWrapper();
+
+        const store = useSettingsStore();
+        expect(store.get('input')).toBeUndefined();
+
+        const inputElement = wrapper.find('input');
+        await inputElement.setValue(value);
+
+        const form = wrapper.find('form');
+        await form.trigger('submit');
+
+        expect(store.get('input')).toBe(value);
+    });
+
+    test('reacts on store change', async () => {
+        const value = 'example value';
+        const value2 = 'example value 2';
+        const anotherValue = 'another value';
+        const wrapper = getWrapper();
+
+        const inputElement = wrapper.find('input');
+        expect(inputElement.element.value).toBe('');
+
+        const store = useSettingsStore();
+        store.set('input', value);
+        await nextTick();
+        expect(inputElement.element.value).toBe(value);
+
+        await inputElement.setValue(anotherValue);
+        expect(inputElement.element.value).toBe(anotherValue);
+
+        // input does not update if there are unsaved changes
+        store.set('input', value2);
+        expect(inputElement.element.value).toBe(anotherValue);
+
+        const form = wrapper.find('form');
+        expect(form.classes('done-button-shown')).toBeTruthy();
+
+        await form.trigger('submit');
+        expect(store.get('input')).toBe(anotherValue);
+
+        expect(form.classes('done-button-shown')).toBeFalsy();
+    });
+
+    test('shows done button correctly', async () => {
+        const wrapper = getWrapper();
+
+        const form = wrapper.find('form');
+        const inputElement = wrapper.find('input');
+
+        expect(form.classes('done-button-shown')).toBeFalsy();
+
+        await inputElement.setValue('value');
+        expect(form.classes('done-button-shown')).toBeTruthy();
+
+        await form.trigger('submit');
+        expect(form.classes('done-button-shown')).toBeFalsy();
+
+        await inputElement.setValue('Hello, World!');
+        expect(form.classes('done-button-shown')).toBeTruthy();
+
+        await form.trigger('submit');
+        expect(form.classes('done-button-shown')).toBeFalsy();
+
+        await inputElement.setValue('');
+        expect(form.classes('done-button-shown')).toBeTruthy();
+
+        await form.trigger('submit');
+        expect(form.classes('done-button-shown')).toBeFalsy();
+        
+        await inputElement.setValue('a');
+        expect(form.classes('done-button-shown')).toBeTruthy();
+        
+        const store = useSettingsStore();
+        store.set('input', 'a');
+        await nextTick();
+        expect(form.classes('done-button-shown')).toBeFalsy();
+        
+        await inputElement.setValue('');
+        store.set('input', '');
+        await nextTick();
+        expect(form.classes('done-button-shown')).toBeFalsy();
+    });
+
+    test('shows correct translation', () => {
+        const translation = 'Text input';
+
+        const wrapper = mountComponent(SettingsInput, {
+            attrs: {
+                setting: {
+                    name: 'input',
+                    i18n: 'input',
+                    type: 'string',
+                },
+                path: 'input'
+            }
+        }, {
+            input: translation
+        });
+
+        const label = wrapper.find('label');
+        expect(label.text()).toBe(translation);
+    });
+});
\ No newline at end of file