コントロールパネルの検索 (#16343)

* Update settings.vue

* Update settings.vue

* Update settings.vue

* Update settings.vue

* Update settings.vue

* Update performance.vue

* Update performance.vue

* Update performance.vue

* Update external-services.vue

* wip

* wip

* Update security.vue

* Update settings.vue

* Update CHANGELOG.md

* wip

* Update moderation.vue

* wip

* Update branding.vue

* wip

* Update email-settings.vue

* Update system-webhook.vue

* Update MkSuperMenu.vue

* Update index.vue

1 files changed, 142 insertions, 110 deletions

diff --git a/packages/frontend/src/pages/admin/performance.vue b/packages/frontend/src/pages/admin/performance.vue
index ff3a5b9d7f..e3021778e7 100644
--- a/packages/frontend/src/pages/admin/performance.vue
+++ b/packages/frontend/src/pages/admin/performance.vue
@@ -6,131 +6,163 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader :actions="headerActions" :tabs="headerTabs">
 	<div class="_spacer" style="--MI_SPACER-w: 700px; --MI_SPACER-min: 16px; --MI_SPACER-max: 32px;">
-		<div class="_gaps">
-			<div class="_panel" style="padding: 16px;">
-				<MkSwitch v-model="enableServerMachineStats" @change="onChange_enableServerMachineStats">
-					<template #label>{{ i18n.ts.enableServerMachineStats }}</template>
-					<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
-				</MkSwitch>
-			</div>
-
-			<div class="_panel" style="padding: 16px;">
-				<MkSwitch v-model="enableIdenticonGeneration" @change="onChange_enableIdenticonGeneration">
-					<template #label>{{ i18n.ts.enableIdenticonGeneration }}</template>
-					<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
-				</MkSwitch>
-			</div>
+		<SearchMarker path="/admin/performance" :label="i18n.ts.performance" :keywords="['performance']" icon="ti ti-bolt">
+			<div class="_gaps">
+				<SearchMarker>
+					<div class="_panel" style="padding: 16px;">
+						<MkSwitch v-model="enableServerMachineStats" @change="onChange_enableServerMachineStats">
+							<template #label><SearchLabel>{{ i18n.ts.enableServerMachineStats }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
+						</MkSwitch>
+					</div>
+				</SearchMarker>
 
-			<div class="_panel" style="padding: 16px;">
-				<MkSwitch v-model="enableChartsForRemoteUser" @change="onChange_enableChartsForRemoteUser">
-					<template #label>{{ i18n.ts.enableChartsForRemoteUser }}</template>
-					<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
-				</MkSwitch>
-			</div>
+				<SearchMarker>
+					<div class="_panel" style="padding: 16px;">
+						<MkSwitch v-model="enableIdenticonGeneration" @change="onChange_enableIdenticonGeneration">
+							<template #label><SearchLabel>{{ i18n.ts.enableIdenticonGeneration }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
+						</MkSwitch>
+					</div>
+				</SearchMarker>
 
-			<div class="_panel" style="padding: 16px;">
-				<MkSwitch v-model="enableStatsForFederatedInstances" @change="onChange_enableStatsForFederatedInstances">
-					<template #label>{{ i18n.ts.enableStatsForFederatedInstances }}</template>
-					<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
-				</MkSwitch>
-			</div>
+				<SearchMarker>
+					<div class="_panel" style="padding: 16px;">
+						<MkSwitch v-model="enableChartsForRemoteUser" @change="onChange_enableChartsForRemoteUser">
+							<template #label><SearchLabel>{{ i18n.ts.enableChartsForRemoteUser }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
+						</MkSwitch>
+					</div>
+				</SearchMarker>
 
-			<div class="_panel" style="padding: 16px;">
-				<MkSwitch v-model="enableChartsForFederatedInstances" @change="onChange_enableChartsForFederatedInstances">
-					<template #label>{{ i18n.ts.enableChartsForFederatedInstances }}</template>
-					<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
-				</MkSwitch>
-			</div>
+				<SearchMarker>
+					<div class="_panel" style="padding: 16px;">
+						<MkSwitch v-model="enableStatsForFederatedInstances" @change="onChange_enableStatsForFederatedInstances">
+							<template #label><SearchLabel>{{ i18n.ts.enableStatsForFederatedInstances }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
+						</MkSwitch>
+					</div>
+				</SearchMarker>
 
-			<MkFolder :defaultOpen="true">
-				<template #icon><i class="ti ti-bolt"></i></template>
-				<template #label>Misskey® Fan-out Timeline Technology™ (FTT)</template>
-				<template v-if="fttForm.savedState.enableFanoutTimeline" #suffix>Enabled</template>
-				<template v-else #suffix>Disabled</template>
-				<template v-if="fttForm.modified.value" #footer>
-					<MkFormFooter :form="fttForm"/>
-				</template>
+				<SearchMarker>
+					<div class="_panel" style="padding: 16px;">
+						<MkSwitch v-model="enableChartsForFederatedInstances" @change="onChange_enableChartsForFederatedInstances">
+							<template #label><SearchLabel>{{ i18n.ts.enableChartsForFederatedInstances }}</SearchLabel></template>
+							<template #caption>{{ i18n.ts.turnOffToImprovePerformance }}</template>
+						</MkSwitch>
+					</div>
+				</SearchMarker>
 
-				<div class="_gaps">
-					<MkSwitch v-model="fttForm.state.enableFanoutTimeline">
-						<template #label>{{ i18n.ts.enable }}<span v-if="fttForm.modifiedStates.enableFanoutTimeline" class="_modified">{{ i18n.ts.modified }}</span></template>
-						<template #caption>
-							<div>{{ i18n.ts._serverSettings.fanoutTimelineDescription }}</div>
-							<div><MkLink target="_blank" url="https://misskey-hub.net/docs/for-admin/features/ftt/">{{ i18n.ts.details }}</MkLink></div>
+				<SearchMarker>
+					<MkFolder :defaultOpen="true">
+						<template #icon><SearchIcon><i class="ti ti-bolt"></i></SearchIcon></template>
+						<template #label><SearchLabel>Misskey® Fan-out Timeline Technology™ (FTT)</SearchLabel></template>
+						<template v-if="fttForm.savedState.enableFanoutTimeline" #suffix>Enabled</template>
+						<template v-else #suffix>Disabled</template>
+						<template v-if="fttForm.modified.value" #footer>
+							<MkFormFooter :form="fttForm"/>
 						</template>
-					</MkSwitch>
 
-					<template v-if="fttForm.state.enableFanoutTimeline">
-						<MkSwitch v-model="fttForm.state.enableFanoutTimelineDbFallback">
-							<template #label>{{ i18n.ts._serverSettings.fanoutTimelineDbFallback }}<span v-if="fttForm.modifiedStates.enableFanoutTimelineDbFallback" class="_modified">{{ i18n.ts.modified }}</span></template>
-							<template #caption>{{ i18n.ts._serverSettings.fanoutTimelineDbFallbackDescription }}</template>
-						</MkSwitch>
+						<div class="_gaps">
+							<SearchMarker>
+								<MkSwitch v-model="fttForm.state.enableFanoutTimeline">
+									<template #label><SearchLabel>{{ i18n.ts.enable }}</SearchLabel><span v-if="fttForm.modifiedStates.enableFanoutTimeline" class="_modified">{{ i18n.ts.modified }}</span></template>
+									<template #caption>
+										<div><SearchText>{{ i18n.ts._serverSettings.fanoutTimelineDescription }}</SearchText></div>
+										<div><MkLink target="_blank" url="https://misskey-hub.net/docs/for-admin/features/ftt/">{{ i18n.ts.details }}</MkLink></div>
+									</template>
+								</MkSwitch>
+							</SearchMarker>
 
-						<MkInput v-model="fttForm.state.perLocalUserUserTimelineCacheMax" type="number">
-							<template #label>perLocalUserUserTimelineCacheMax<span v-if="fttForm.modifiedStates.perLocalUserUserTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
-						</MkInput>
+							<template v-if="fttForm.state.enableFanoutTimeline">
+								<SearchMarker :keywords="['db', 'database', 'fallback']">
+									<MkSwitch v-model="fttForm.state.enableFanoutTimelineDbFallback">
+										<template #label><SearchLabel>{{ i18n.ts._serverSettings.fanoutTimelineDbFallback }}</SearchLabel><span v-if="fttForm.modifiedStates.enableFanoutTimelineDbFallback" class="_modified">{{ i18n.ts.modified }}</span></template>
+										<template #caption><SearchText>{{ i18n.ts._serverSettings.fanoutTimelineDbFallbackDescription }}</SearchText></template>
+									</MkSwitch>
+								</SearchMarker>
 
-						<MkInput v-model="fttForm.state.perRemoteUserUserTimelineCacheMax" type="number">
-							<template #label>perRemoteUserUserTimelineCacheMax<span v-if="fttForm.modifiedStates.perRemoteUserUserTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
-						</MkInput>
+								<SearchMarker>
+									<MkInput v-model="fttForm.state.perLocalUserUserTimelineCacheMax" type="number">
+										<template #label><SearchLabel>perLocalUserUserTimelineCacheMax</SearchLabel><span v-if="fttForm.modifiedStates.perLocalUserUserTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
+									</MkInput>
+								</SearchMarker>
 
-						<MkInput v-model="fttForm.state.perUserHomeTimelineCacheMax" type="number">
-							<template #label>perUserHomeTimelineCacheMax<span v-if="fttForm.modifiedStates.perUserHomeTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
-						</MkInput>
+								<SearchMarker>
+									<MkInput v-model="fttForm.state.perRemoteUserUserTimelineCacheMax" type="number">
+										<template #label><SearchLabel>perRemoteUserUserTimelineCacheMax</SearchLabel><span v-if="fttForm.modifiedStates.perRemoteUserUserTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
+									</MkInput>
+								</SearchMarker>
 
-						<MkInput v-model="fttForm.state.perUserListTimelineCacheMax" type="number">
-							<template #label>perUserListTimelineCacheMax<span v-if="fttForm.modifiedStates.perUserListTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
-						</MkInput>
-					</template>
-				</div>
-			</MkFolder>
+								<SearchMarker>
+									<MkInput v-model="fttForm.state.perUserHomeTimelineCacheMax" type="number">
+										<template #label><SearchLabel>perUserHomeTimelineCacheMax</SearchLabel><span v-if="fttForm.modifiedStates.perUserHomeTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
+									</MkInput>
+								</SearchMarker>
 
-			<MkFolder :defaultOpen="true">
-				<template #icon><i class="ti ti-bolt"></i></template>
-				<template #label>Misskey® Reactions Boost Technology™ (RBT)<span class="_beta">{{ i18n.ts.beta }}</span></template>
-				<template v-if="rbtForm.savedState.enableReactionsBuffering" #suffix>Enabled</template>
-				<template v-else #suffix>Disabled</template>
-				<template v-if="rbtForm.modified.value" #footer>
-					<MkFormFooter :form="rbtForm"/>
-				</template>
+								<SearchMarker>
+									<MkInput v-model="fttForm.state.perUserListTimelineCacheMax" type="number">
+										<template #label><SearchLabel>perUserListTimelineCacheMax</SearchLabel><span v-if="fttForm.modifiedStates.perUserListTimelineCacheMax" class="_modified">{{ i18n.ts.modified }}</span></template>
+									</MkInput>
+								</SearchMarker>
+							</template>
+						</div>
+					</MkFolder>
+				</SearchMarker>
 
-				<div class="_gaps_m">
-					<MkSwitch v-model="rbtForm.state.enableReactionsBuffering">
-						<template #label>{{ i18n.ts.enable }}<span v-if="rbtForm.modifiedStates.enableReactionsBuffering" class="_modified">{{ i18n.ts.modified }}</span></template>
-						<template #caption>{{ i18n.ts._serverSettings.reactionsBufferingDescription }}</template>
-					</MkSwitch>
-				</div>
-			</MkFolder>
+				<SearchMarker>
+					<MkFolder :defaultOpen="true">
+						<template #icon><SearchIcon><i class="ti ti-bolt"></i></SearchIcon></template>
+						<template #label><SearchLabel>Misskey® Reactions Boost Technology™ (RBT)</SearchLabel><span class="_beta">{{ i18n.ts.beta }}</span></template>
+						<template v-if="rbtForm.savedState.enableReactionsBuffering" #suffix>Enabled</template>
+						<template v-else #suffix>Disabled</template>
+						<template v-if="rbtForm.modified.value" #footer>
+							<MkFormFooter :form="rbtForm"/>
+						</template>
+
+						<div class="_gaps_m">
+							<SearchMarker>
+								<MkSwitch v-model="rbtForm.state.enableReactionsBuffering">
+									<template #label><SearchLabel>{{ i18n.ts.enable }}</SearchLabel><span v-if="rbtForm.modifiedStates.enableReactionsBuffering" class="_modified">{{ i18n.ts.modified }}</span></template>
+									<template #caption><SearchText>{{ i18n.ts._serverSettings.reactionsBufferingDescription }}</SearchText></template>
+								</MkSwitch>
+							</SearchMarker>
+						</div>
+					</MkFolder>
+				</SearchMarker>
 
-			<MkFolder :defaultOpen="true">
-				<template #icon><i class="ti ti-recycle"></i></template>
-				<template #label>Remote Notes Cleaning (仮)</template>
-				<template v-if="remoteNotesCleaningForm.savedState.enableRemoteNotesCleaning" #suffix>Enabled</template>
-				<template v-else #suffix>Disabled</template>
-				<template v-if="remoteNotesCleaningForm.modified.value" #footer>
-					<MkFormFooter :form="remoteNotesCleaningForm"/>
-				</template>
+				<SearchMarker>
+					<MkFolder :defaultOpen="true">
+						<template #icon><SearchIcon><i class="ti ti-recycle"></i></SearchIcon></template>
+						<template #label><SearchLabel>Remote Notes Cleaning (仮)</SearchLabel></template>
+						<template v-if="remoteNotesCleaningForm.savedState.enableRemoteNotesCleaning" #suffix>Enabled</template>
+						<template v-else #suffix>Disabled</template>
+						<template v-if="remoteNotesCleaningForm.modified.value" #footer>
+							<MkFormFooter :form="remoteNotesCleaningForm"/>
+						</template>
 
-				<div class="_gaps_m">
-					<MkSwitch v-model="remoteNotesCleaningForm.state.enableRemoteNotesCleaning">
-						<template #label>{{ i18n.ts.enable }}<span v-if="remoteNotesCleaningForm.modifiedStates.enableRemoteNotesCleaning" class="_modified">{{ i18n.ts.modified }}</span></template>
-						<template #caption>{{ i18n.ts._serverSettings.remoteNotesCleaning_description }}</template>
-					</MkSwitch>
+						<div class="_gaps_m">
+							<MkSwitch v-model="remoteNotesCleaningForm.state.enableRemoteNotesCleaning">
+								<template #label><SearchLabel>{{ i18n.ts.enable }}</SearchLabel><span v-if="remoteNotesCleaningForm.modifiedStates.enableRemoteNotesCleaning" class="_modified">{{ i18n.ts.modified }}</span></template>
+								<template #caption><SearchText>{{ i18n.ts._serverSettings.remoteNotesCleaning_description }}</SearchText></template>
+							</MkSwitch>
 
-					<template v-if="remoteNotesCleaningForm.state.enableRemoteNotesCleaning">
-						<MkInput v-model="remoteNotesCleaningForm.state.remoteNotesCleaningExpiryDaysForEachNotes" type="number">
-							<template #label>{{ i18n.ts._serverSettings.remoteNotesCleaningExpiryDaysForEachNotes }} ({{ i18n.ts.inDays }})<span v-if="remoteNotesCleaningForm.modifiedStates.remoteNotesCleaningExpiryDaysForEachNotes" class="_modified">{{ i18n.ts.modified }}</span></template>
-							<template #suffix>{{ i18n.ts._time.day }}</template>
-						</MkInput>
+							<template v-if="remoteNotesCleaningForm.state.enableRemoteNotesCleaning">
+								<MkInput v-model="remoteNotesCleaningForm.state.remoteNotesCleaningExpiryDaysForEachNotes" type="number">
+									<template #label><SearchLabel>{{ i18n.ts._serverSettings.remoteNotesCleaningExpiryDaysForEachNotes }}</SearchLabel> ({{ i18n.ts.inDays }})<span v-if="remoteNotesCleaningForm.modifiedStates.remoteNotesCleaningExpiryDaysForEachNotes" class="_modified">{{ i18n.ts.modified }}</span></template>
+									<template #suffix>{{ i18n.ts._time.day }}</template>
+								</MkInput>
 
-						<MkInput v-model="remoteNotesCleaningForm.state.remoteNotesCleaningMaxProcessingDurationInMinutes" type="number">
-							<template #label>{{ i18n.ts._serverSettings.remoteNotesCleaningMaxProcessingDuration }} ({{ i18n.ts.inMinutes }})<span v-if="remoteNotesCleaningForm.modifiedStates.remoteNotesCleaningMaxProcessingDurationInMinutes" class="_modified">{{ i18n.ts.modified }}</span></template>
-							<template #suffix>{{ i18n.ts._time.minute }}</template>
-						</MkInput>
-					</template>
-				</div>
-			</MkFolder>
-		</div>
+								<MkInput v-model="remoteNotesCleaningForm.state.remoteNotesCleaningMaxProcessingDurationInMinutes" type="number">
+									<template #label><SearchLabel>{{ i18n.ts._serverSettings.remoteNotesCleaningMaxProcessingDuration }}</SearchLabel> ({{ i18n.ts.inMinutes }})<span v-if="remoteNotesCleaningForm.modifiedStates.remoteNotesCleaningMaxProcessingDurationInMinutes" class="_modified">{{ i18n.ts.modified }}</span></template>
+									<template #suffix>{{ i18n.ts._time.minute }}</template>
+								</MkInput>
+							</template>
+						</div>
+					</MkFolder>
+				</SearchMarker>
+			</div>
+		</SearchMarker>
 	</div>
 </PageWithHeader>
 </template>
@@ -243,7 +275,7 @@ const headerActions = computed(() => []);
 const headerTabs = computed(() => []);
 
 definePage(() => ({
-	title: i18n.ts.other,
-	icon: 'ti ti-adjustments',
+	title: i18n.ts.performance,
+	icon: 'ti ti-bolt',
 }));
 </script>