From e67c035d92e44b31264dbd86b5b8d355c7e8a718 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 1 Aug 2025 13:51:22 +0200
Subject: [PATCH] feat(settings): show save button only when something was
 changed

---
 frontend/src/views/user/settings/General.vue | 58 +++++++++++++++++---
 1 file changed, 49 insertions(+), 9 deletions(-)

diff --git a/frontend/src/views/user/settings/General.vue b/frontend/src/views/user/settings/General.vue
index dfba069b5..5266f99dc 100644
--- a/frontend/src/views/user/settings/General.vue
+++ b/frontend/src/views/user/settings/General.vue
@@ -312,26 +312,31 @@
 	</Card>
 
 	<div class="sticky-save">
-		<XButton
-			v-cy="'saveGeneralSettings'"
-			:loading="loading"
-			class="is-fullwidth"
-			@click="updateSettings()"
-		>
-			{{ $t('misc.save') }}
-		</XButton>
+		<CustomTransition name="fade">
+			<XButton
+				v-if="isDirty"
+				v-cy="'saveGeneralSettings'"
+				:loading="loading"
+				class="is-fullwidth"
+				@click="updateSettings()"
+			>
+				{{ $t('misc.save') }}
+			</XButton>
+		</CustomTransition>
 	</div>
 </template>
 
 
 <script setup lang="ts">
-import {computed, watch, ref} from 'vue'
+import {computed, watch, ref, onBeforeMount} from 'vue'
 import {useI18n} from 'vue-i18n'
+import isEqual from 'fast-deep-equal'
 
 import {PrefixMode} from '@/modules/parseTaskText'
 
 import ProjectSearch from '@/components/tasks/partials/ProjectSearch.vue'
 import Multiselect from '@/components/input/Multiselect.vue'
+import CustomTransition from '@/components/misc/CustomTransition.vue'
 
 import {SUPPORTED_LOCALES} from '@/i18n'
 import {createRandomID} from '@/helpers/randomId'
@@ -391,6 +396,39 @@ const settings = ref<IUserSettings>({
 	},
 })
 
+const initialSettings = ref<IUserSettings>()
+const isDirty = ref(false)
+
+onBeforeMount(() => {
+	initialSettings.value = JSON.parse(JSON.stringify(settings.value))
+	isDirty.value = false
+})
+
+watch(
+	() => settings.value,
+	() => {
+		isDirty.value = !isEqual(settings.value, initialSettings.value)
+	},
+	{deep: true},
+)
+
+watch(
+	() => authStore.settings,
+	(newVal) => {
+		if (Object.keys(settings.value).length !== 0) {
+			return
+		}
+		initialSettings.value = JSON.parse(JSON.stringify({
+			...newVal,
+			frontendSettings: {
+				...newVal.frontendSettings,
+			},
+		}))
+		isDirty.value = !isEqual(settings.value, initialSettings.value)
+	},
+	{deep: true},
+)
+
 function useAvailableTimezones(settingsRef: Ref<IUserSettings>) {
 	const availableTimezones = ref<{value: string, label: string}[]>([])
 	const searchResults = ref<{value: string, label: string}[]>([])
@@ -495,6 +533,8 @@ async function updateSettings() {
 	await authStore.saveUserSettings({
 		settings: {...settings.value},
 	})
+	initialSettings.value = JSON.parse(JSON.stringify(settings.value))
+	isDirty.value = false
 }
 </script>