From bb812ed07a2528528416c5d058cb71ba767781ac Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 3 Mar 2025 10:26:49 +0900
Subject: [PATCH] wip

---
 .../frontend/src/pages/settings/privacy.vue   | 122 ++++++------------
 .../frontend/src/pages/settings/profile.vue   |  82 +++++-------
 2 files changed, 72 insertions(+), 132 deletions(-)

diff --git a/packages/frontend/src/pages/settings/privacy.vue b/packages/frontend/src/pages/settings/privacy.vue
index a85342bb69..25c3a354e6 100644
--- a/packages/frontend/src/pages/settings/privacy.vue
+++ b/packages/frontend/src/pages/settings/privacy.vue
@@ -13,98 +13,73 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.autoAcceptFollowed"
-			:keywords="['follow', 'auto', 'accept']"
-		>
-			<MkSwitch v-if="isLocked" v-model="autoAcceptFollowed" @update:modelValue="save()">{{ i18n.ts.autoAcceptFollowed }}</MkSwitch>
+		<SearchMarker :keywords="['follow', 'auto', 'accept']">
+			<MkSwitch v-if="isLocked" v-model="autoAcceptFollowed" @update:modelValue="save()">
+				<template #label><SearchLabel>{{ i18n.ts.autoAcceptFollowed }}</SearchLabel></template>
+			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.makeReactionsPublic"
-			:keywords="['reaction', 'public', i18n.ts.makeReactionsPublicDescription]"
-		>
+		<SearchMarker :keywords="['reaction', 'public']">
 			<MkSwitch v-model="publicReactions" @update:modelValue="save()">
-				{{ i18n.ts.makeReactionsPublic }}
-				<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.makeReactionsPublic }}</SearchLabel></template>
+				<template #caption><SearchKeyword>{{ i18n.ts.makeReactionsPublicDescription }}</SearchKeyword></template>
 			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.followingVisibility"
-			:keywords="['following', 'visibility']"
-		>
+		<SearchMarker :keywords="['following', 'visibility']">
 			<MkSelect v-model="followingVisibility" @update:modelValue="save()">
-				<template #label>{{ i18n.ts.followingVisibility }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.followingVisibility }}</SearchLabel></template>
 				<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
 				<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
 				<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
 			</MkSelect>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.followersVisibility"
-			:keywords="['follower', 'visibility']"
-		>
+		<SearchMarker :keywords="['follower', 'visibility']">
 			<MkSelect v-model="followersVisibility" @update:modelValue="save()">
-				<template #label>{{ i18n.ts.followersVisibility }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.followersVisibility }}</SearchLabel></template>
 				<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
 				<option value="followers">{{ i18n.ts._ffVisibility.followers }}</option>
 				<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
 			</MkSelect>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.hideOnlineStatus"
-			:keywords="['online', 'status', i18n.ts.hideOnlineStatusDescription]"
-		>
+		<SearchMarker :keywords="['online', 'status']">
 			<MkSwitch v-model="hideOnlineStatus" @update:modelValue="save()">
-				{{ i18n.ts.hideOnlineStatus }}
-				<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.hideOnlineStatus }}</SearchLabel></template>
+				<template #caption><SearchKeyword>{{ i18n.ts.hideOnlineStatusDescription }}</SearchKeyword></template>
 			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.noCrawle"
-			:keywords="['crawle', 'index', 'search', i18n.ts.noCrawleDescription]"
-		>
+		<SearchMarker :keywords="['crawle', 'index', 'search']">
 			<MkSwitch v-model="noCrawle" @update:modelValue="save()">
-				{{ i18n.ts.noCrawle }}
-				<template #caption>{{ i18n.ts.noCrawleDescription }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.noCrawle }}</SearchLabel></template>
+				<template #caption><SearchKeyword>{{ i18n.ts.noCrawleDescription }}</SearchKeyword></template>
 			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.preventAiLearning"
-			:keywords="['crawle', 'ai', i18n.ts.preventAiLearningDescription]"
-		>
+		<SearchMarker :keywords="['crawle', 'ai']">
 			<MkSwitch v-model="preventAiLearning" @update:modelValue="save()">
-				{{ i18n.ts.preventAiLearning }}
-				<template #caption>{{ i18n.ts.preventAiLearningDescription }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.preventAiLearning }}</SearchLabel></template>
+				<template #caption><SearchKeyword>{{ i18n.ts.preventAiLearningDescription }}</SearchKeyword></template>
 			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.makeExplorable"
-			:keywords="['explore', i18n.ts.makeExplorableDescription]"
-		>
+		<SearchMarker :keywords="['explore']">
 			<MkSwitch v-model="isExplorable" @update:modelValue="save()">
-				{{ i18n.ts.makeExplorable }}
-				<template #caption>{{ i18n.ts.makeExplorableDescription }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.makeExplorable }}</SearchLabel></template>
+				<template #caption><SearchKeyword>{{ i18n.ts.makeExplorableDescription }}</SearchKeyword></template>
 			</MkSwitch>
 		</SearchMarker>
 
-		<SearchMarker :label="i18n.ts.lockdown" :keywords="['lockdown']">
+		<SearchMarker :keywords="['lockdown']">
 			<FormSection>
-				<template #label>{{ i18n.ts.lockdown }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
+				<template #label><SearchLabel>{{ i18n.ts.lockdown }}</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
 
 				<div class="_gaps_m">
-					<SearchMarker
-						:label="i18n.ts._accountSettings.requireSigninToViewContents"
-						:keywords="['login', 'signin', i18n.ts._accountSettings.requireSigninToViewContentsDescription1, i18n.ts._accountSettings.requireSigninToViewContentsDescription2, i18n.ts._accountSettings.requireSigninToViewContentsDescription3]"
-					>
+					<SearchMarker :keywords="['login', 'signin']">
 						<MkSwitch :modelValue="requireSigninToViewContents" @update:modelValue="update_requireSigninToViewContents">
-							{{ i18n.ts._accountSettings.requireSigninToViewContents }}
+							<template #label><SearchLabel>{{ i18n.ts.requireSigninToViewContents }}</SearchLabel></template>
 							<template #caption>
 								<div>{{ i18n.ts._accountSettings.requireSigninToViewContentsDescription1 }}</div>
 								<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.requireSigninToViewContentsDescription2 }}</div>
@@ -113,12 +88,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</MkSwitch>
 					</SearchMarker>
 
-					<SearchMarker
-						:label="i18n.ts._accountSettings.makeNotesFollowersOnlyBefore"
-						:keywords="['follower', i18n.ts._accountSettings.makeNotesFollowersOnlyBeforeDescription]"
-					>
+					<SearchMarker :keywords="['follower']">
 						<FormSlot>
-							<template #label>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBefore }}</template>
+							<template #label><SearchLabel>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBefore }}</SearchLabel></template>
 
 							<div class="_gaps_s">
 								<MkSelect :modelValue="makeNotesFollowersOnlyBefore_type" @update:modelValue="makeNotesFollowersOnlyBefore = $event === 'relative' ? -604800 : $event === 'absolute' ? Math.floor(Date.now() / 1000) : null">
@@ -148,18 +120,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</div>
 
 							<template #caption>
-								<div>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBeforeDescription }}</div>
+								<div><SearchKeyword>{{ i18n.ts._accountSettings.makeNotesFollowersOnlyBeforeDescription }}</SearchKeyword></div>
 								<div v-if="instance.federation !== 'none'"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.mayNotEffectForFederatedNotes }}</div>
 							</template>
 						</FormSlot>
 					</SearchMarker>
 
-					<SearchMarker
-						:label="i18n.ts._accountSettings.makeNotesHiddenBefore"
-						:keywords="['hidden', i18n.ts._accountSettings.makeNotesHiddenBeforeDescription]"
-					>
+					<SearchMarker :keywords="['hidden']">
 						<FormSlot>
-							<template #label>{{ i18n.ts._accountSettings.makeNotesHiddenBefore }}</template>
+							<template #label><SearchLabel>{{ i18n.ts._accountSettings.makeNotesHiddenBefore }}</SearchLabel></template>
 
 							<div class="_gaps_s">
 								<MkSelect :modelValue="makeNotesHiddenBefore_type" @update:modelValue="makeNotesHiddenBefore = $event === 'relative' ? -604800 : $event === 'absolute' ? Math.floor(Date.now() / 1000) : null">
@@ -189,7 +158,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</div>
 
 							<template #caption>
-								<div>{{ i18n.ts._accountSettings.makeNotesHiddenBeforeDescription }}</div>
+								<div><SearchKeyword>{{ i18n.ts._accountSettings.makeNotesHiddenBeforeDescription }}</SearchKeyword></div>
 								<div v-if="instance.federation !== 'none'"><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.ts._accountSettings.mayNotEffectForFederatedNotes }}</div>
 							</template>
 						</FormSlot>
@@ -200,19 +169,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<FormSection>
 			<div class="_gaps_m">
-				<SearchMarker
-					:label="i18n.ts.rememberNoteVisibility"
-					:keywords="['remember', 'keep', 'note', 'visibility']"
-				>
-					<MkSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">{{ i18n.ts.rememberNoteVisibility }}</MkSwitch>
+				<SearchMarker :keywords="['remember', 'keep', 'note', 'visibility']">
+					<MkSwitch v-model="rememberNoteVisibility" @update:modelValue="save()">
+						<template #label><SearchLabel>{{ i18n.ts.rememberNoteVisibility }}</SearchLabel></template>
+					</MkSwitch>
 				</SearchMarker>
 
-				<SearchMarker
-					:label="i18n.ts.defaultNoteVisibility"
-					:keywords="['default', 'note', 'visibility']"
-				>
+				<SearchMarker :keywords="['default', 'note', 'visibility']">
 					<MkFolder v-if="!rememberNoteVisibility">
-						<template #label>{{ i18n.ts.defaultNoteVisibility }}</template>
+						<template #label><SearchLabel>{{ i18n.ts.defaultNoteVisibility }}</SearchLabel></template>
 						<template v-if="defaultNoteVisibility === 'public'" #suffix>{{ i18n.ts._visibility.public }}</template>
 						<template v-else-if="defaultNoteVisibility === 'home'" #suffix>{{ i18n.ts._visibility.home }}</template>
 						<template v-else-if="defaultNoteVisibility === 'followers'" #suffix>{{ i18n.ts._visibility.followers }}</template>
@@ -232,11 +197,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</FormSection>
 
-		<SearchMarker
-			:label="i18n.ts.keepCw"
-			:keywords="['remember', 'keep', 'note', 'cw']"
-		>
-			<MkSwitch v-model="keepCw" @update:modelValue="save()">{{ i18n.ts.keepCw }}</MkSwitch>
+		<SearchMarker :keywords="['remember', 'keep', 'note', 'cw']">
+			<MkSwitch v-model="keepCw" @update:modelValue="save()">
+				<template #label><SearchLabel>{{ i18n.ts.keepCw }}</SearchLabel></template>
+			</MkSwitch>
 		</SearchMarker>
 	</div>
 </SearchMarker>
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index 8e72d98888..80db15d8a5 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -19,63 +19,45 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 
-		<SearchMarker
-			:label="i18n.ts._profile.name"
-			:keywords="['name']"
-		>
+		<SearchMarker :keywords="['name']">
 			<MkInput v-model="profile.name" :max="30" manualSave :mfmAutocomplete="['emoji']">
-				<template #label>{{ i18n.ts._profile.name }}</template>
+				<template #label><SearchLabel>{{ i18n.ts._profile.name }}</SearchLabel></template>
 			</MkInput>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts._profile.description"
-			:keywords="['description', 'bio']"
-		>
+		<SearchMarker :keywords="['description', 'bio']">
 			<MkTextarea v-model="profile.description" :max="500" tall manualSave mfmAutocomplete :mfmPreview="true">
-				<template #label>{{ i18n.ts._profile.description }}</template>
+				<template #label><SearchLabel>{{ i18n.ts._profile.description }}</SearchLabel></template>
 				<template #caption>{{ i18n.ts._profile.youCanIncludeHashtags }}</template>
 			</MkTextarea>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.location"
-			:keywords="['location', 'locale']"
-		>
+		<SearchMarker :keywords="['location', 'locale']">
 			<MkInput v-model="profile.location" manualSave>
-				<template #label>{{ i18n.ts.location }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.location }}</SearchLabel></template>
 				<template #prefix><i class="ti ti-map-pin"></i></template>
 			</MkInput>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.birthday"
-			:keywords="['birthday', 'birthdate', 'age']"
-		>
+		<SearchMarker :keywords="['birthday', 'birthdate', 'age']">
 			<MkInput v-model="profile.birthday" type="date" manualSave>
-				<template #label>{{ i18n.ts.birthday }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.birthday }}</SearchLabel></template>
 				<template #prefix><i class="ti ti-cake"></i></template>
 			</MkInput>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.language"
-			:keywords="['language', 'locale']"
-		>
+		<SearchMarker :keywords="['language', 'locale']">
 			<MkSelect v-model="profile.lang">
-				<template #label>{{ i18n.ts.language }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.language }}</SearchLabel></template>
 				<option v-for="x in Object.keys(langmap)" :key="x" :value="x">{{ langmap[x].nativeName }}</option>
 			</MkSelect>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts._profile.metadataEdit"
-			:keywords="['metadata']"
-		>
+		<SearchMarker :keywords="['metadata']">
 			<FormSlot>
 				<MkFolder>
 					<template #icon><i class="ti ti-list"></i></template>
-					<template #label>{{ i18n.ts._profile.metadataEdit }}</template>
+					<template #label><SearchLabel>{{ i18n.ts._profile.metadataEdit }}</SearchLabel></template>
 					<template #footer>
 						<div class="_buttons">
 							<MkButton primary @click="saveFields"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
@@ -118,25 +100,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</FormSlot>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts._profile.followedMessage"
-			:keywords="['follow', 'message', i18n.ts._profile.followedMessageDescription]"
-		>
+		<SearchMarker :keywords="['follow', 'message']">
 			<MkInput v-model="profile.followedMessage" :max="200" manualSave :mfmPreview="false">
-				<template #label>{{ i18n.ts._profile.followedMessage }}<span class="_beta">{{ i18n.ts.beta }}</span></template>
+				<template #label><SearchLabel>{{ i18n.ts._profile.followedMessage }}</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
 				<template #caption>
-					<div>{{ i18n.ts._profile.followedMessageDescription }}</div>
+					<div><SearchKeyword>{{ i18n.ts._profile.followedMessageDescription }}</SearchKeyword></div>
 					<div>{{ i18n.ts._profile.followedMessageDescriptionForLockedAccount }}</div>
 				</template>
 			</MkInput>
 		</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.reactionAcceptance"
-			:keywords="['reaction']"
-		>
+		<SearchMarker :keywords="['reaction']">
 			<MkSelect v-model="reactionAcceptance">
-				<template #label>{{ i18n.ts.reactionAcceptance }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.reactionAcceptance }}</SearchLabel></template>
 				<option :value="null">{{ i18n.ts.all }}</option>
 				<option value="likeOnlyForRemote">{{ i18n.ts.likeOnlyForRemote }}</option>
 				<option value="nonSensitiveOnly">{{ i18n.ts.nonSensitiveOnly }}</option>
@@ -145,23 +121,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSelect>
 		</SearchMarker>
 
-		<SearchMarker :label="i18n.ts.advancedSettings">
+		<SearchMarker>
 			<MkFolder>
-				<template #label>{{ i18n.ts.advancedSettings }}</template>
+				<template #label><SearchLabel>{{ i18n.ts.advancedSettings }}</SearchLabel></template>
 
 				<div class="_gaps_m">
-					<SearchMarker
-						:label="i18n.ts.flagAsCat"
-						:keywords="['cat', i18n.ts.flagAsCatDescription]"
-					>
-						<MkSwitch v-model="profile.isCat">{{ i18n.ts.flagAsCat }}<template #caption>{{ i18n.ts.flagAsCatDescription }}</template></MkSwitch>
+					<SearchMarker :keywords="['cat']">
+						<MkSwitch v-model="profile.isCat">
+							<template #label><SearchLabel>{{ i18n.ts.flagAsCat }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.flagAsCatDescription }}</template>
+						</MkSwitch>
 					</SearchMarker>
 
-					<SearchMarker
-						:label="i18n.ts.flagAsBot"
-						:keywords="['bot', i18n.ts.flagAsBotDescription]"
-					>
-						<MkSwitch v-model="profile.isBot">{{ i18n.ts.flagAsBot }}<template #caption>{{ i18n.ts.flagAsBotDescription }}</template></MkSwitch>
+					<SearchMarker :keywords="['bot']">
+						<MkSwitch v-model="profile.isBot">
+							<template #label><SearchLabel>{{ i18n.ts.flagAsBot }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.flagAsBotDescription }}</template>
+						</MkSwitch>
 					</SearchMarker>
 				</div>
 			</MkFolder>