From a5e7a6b68b79a2b24025eb093372705b9eb0449a Mon Sep 17 00:00:00 2001
From: piuvas <mail@piuvas.net>
Date: Fri, 30 May 2025 20:06:16 -0300
Subject: [PATCH] improve attributionDomain settings.

---
 ...> profile.attribution-domains-setting.vue} | 52 ++++++++-----------
 .../frontend/src/pages/settings/profile.vue   |  9 +++-
 2 files changed, 30 insertions(+), 31 deletions(-)
 rename packages/frontend/src/pages/settings/{attribution-domains-setting.vue => profile.attribution-domains-setting.vue} (54%)

diff --git a/packages/frontend/src/pages/settings/attribution-domains-setting.vue b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
similarity index 54%
rename from packages/frontend/src/pages/settings/attribution-domains-setting.vue
rename to packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
index 59922a4e0f..683bf9f8f5 100644
--- a/packages/frontend/src/pages/settings/attribution-domains-setting.vue
+++ b/packages/frontend/src/pages/settings/profile.attribution-domains-setting.vue
@@ -4,23 +4,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps_m">
-	<SearchMarker :keywords="['attribution', 'domains', 'preview', 'url']">
-		<MkTextarea v-model="attributionDomains">
-			<template #label>{{ i18n.ts.attributionDomains }}</template>
-			<template #caption>
-				{{ i18n.ts.attributionDomainsDescription }}
-				<br/>
-				<Mfm :text="tutorialTag"/>
-			</template>
-		</MkTextarea>
-	</SearchMarker>
-	<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-</div>
+<MkTextarea v-model="attributionDomains">
+	<template #label><SearchLabel>{{ i18n.ts.attributionDomains }}</SearchLabel></template>
+	<template #caption>
+		{{ i18n.ts.attributionDomainsDescription }}
+		<br/>
+		<Mfm :text="tutorialTag"/>
+	</template>
+</MkTextarea>
+<MkButton primary :disabled="!changed" @click="save()"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
+import { ref, watch, computed } from 'vue';
 import { host as hostRaw } from '@@/js/config.js';
 import { toUnicode } from 'punycode.js';
 import MkTextarea from '@/components/MkTextarea.vue';
@@ -33,31 +29,29 @@ import { i18n } from '@/i18n.js';
 const $i = ensureSignin();
 
 const attributionDomains = ref($i.attributionDomains.join('\n'));
-const changed = ref(false);
-const autochange = ref(false);
-const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`';
-
-async function save() {
-	const domains = attributionDomains.value
+const domainArray = computed(() => {
+	return attributionDomains.value
 		.trim().split('\n')
 		.map(el => el.trim().toLowerCase())
 		.filter(el => el);
+});
+const changed = ref(false);
+const tutorialTag = '`<meta name="fediverse:creator" content="' + $i.username + '@' + toUnicode(hostRaw) + '" />`';
 
+async function save() {
 	await misskeyApi('i/update', {
-		attributionDomains: domains,
+		attributionDomains: domainArray.value,
 	});
 
-	changed.value = false;
-
 	// Refresh filtered list to signal to the user how they've been saved
-	if (attributionDomains.value !== domains.join('\n')) {
-		attributionDomains.value = domains.join('\n');
-		autochange.value = true;
-	} else { autochange.value = false; }
+	attributionDomains.value = domainArray.value.join('\n');
+
+	changed.value = false;
 }
 
-watch(attributionDomains, () => {
-	if (!autochange.value) {
+watch(domainArray, (newArray, oldArray) => {
+	// compare arrays
+	if (newArray.length !== oldArray.length || !newArray.every((a, i) => a === oldArray[i])) {
 		changed.value = true;
 	}
 });
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 4cc13a2552..be4ef5a867 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -162,7 +162,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkSwitch>
 					</SearchMarker>
 
-					<AttributionDomainsSettings/>
+					<SearchMarker
+						:label="i18n.ts.attributionDomains"
+						:keywords="['attribution', 'domains', 'preview', 'url']"
+					>
+						<AttributionDomainsSettings/>
+					</SearchMarker>
 				</div>
 			</MkFolder>
 		</SearchMarker>
@@ -172,7 +177,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { computed, reactive, ref, watch, defineAsyncComponent } from 'vue';
-import AttributionDomainsSettings from './attribution-domains-setting.vue';
+import AttributionDomainsSettings from './profile.attribution-domains-setting.vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';