コントロールパネルの検索 (#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

3 files changed, 41 insertions, 11 deletions

diff --git a/packages/frontend/src/components/MkSuperMenu.vue b/packages/frontend/src/components/MkSuperMenu.vue
index 5c89a6530d..dbc673333c 100644
--- a/packages/frontend/src/components/MkSuperMenu.vue
+++ b/packages/frontend/src/components/MkSuperMenu.vue
@@ -52,9 +52,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						{{ item.label }}
 					</template>
 					<template v-else>
-						<span style="opacity: 0.7; font-size: 90%;">{{ item.parentLabels.join(' > ') }}</span>
+						<span style="opacity: 0.7; font-size: 90%; word-break: break-word;">{{ item.parentLabels.join(' > ') }}</span>
 						<br>
-						<span>{{ item.label }}</span>
+						<span style="word-break: break-word;">{{ item.label }}</span>
 					</template>
 				</span>
 			</MkA>
@@ -95,7 +95,7 @@ export type SuperMenuDef = {
 <script lang="ts" setup>
 import { useTemplateRef, ref, watch, nextTick, computed } from 'vue';
 import { getScrollContainer } from '@@/js/scroll.js';
-import type { SearchIndexItem } from '@/utility/settings-search-index.js';
+import type { SearchIndexItem } from '@/utility/inapp-search.js';
 import MkInput from '@/components/MkInput.vue';
 import { i18n } from '@/i18n.js';
 import { useRouter } from '@/router.js';
@@ -165,12 +165,28 @@ watch(rawSearchQuery, (value) => {
 			});
 		};
 
-		for (const item of searchIndexItemById.values()) {
-			if (
-				compareStringIncludes(item.label, value) ||
-				item.keywords.some((x) => compareStringIncludes(x, value))
-			) {
+		// label, keywords, texts の順に優先して表示
+
+		let items = Array.from(searchIndexItemById.values());
+
+		for (const item of items) {
+			if (compareStringIncludes(item.label, value)) {
+				addSearchResult(item);
+				items = items.filter(i => i.id !== item.id);
+			}
+		}
+
+		for (const item of items) {
+			if (item.keywords.some((x) => compareStringIncludes(x, value))) {
+				addSearchResult(item);
+				items = items.filter(i => i.id !== item.id);
+			}
+		}
+
+		for (const item of items) {
+			if (item.texts.some((x) => compareStringIncludes(x, value))) {
 				addSearchResult(item);
+				items = items.filter(i => i.id !== item.id);
 			}
 		}
 	}
diff --git a/packages/frontend/src/components/global/SearchText.vue b/packages/frontend/src/components/global/SearchText.vue
new file mode 100644
index 0000000000..27a284faf0
--- /dev/null
+++ b/packages/frontend/src/components/global/SearchText.vue
@@ -0,0 +1,14 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<slot></slot>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="scss" module>
+</style>
diff --git a/packages/frontend/src/components/index.ts b/packages/frontend/src/components/index.ts
index 19766e8575..6b1b80695f 100644
--- a/packages/frontend/src/components/index.ts
+++ b/packages/frontend/src/components/index.ts
@@ -31,7 +31,7 @@ import PageWithHeader from './global/PageWithHeader.vue';
 import PageWithAnimBg from './global/PageWithAnimBg.vue';
 import SearchMarker from './global/SearchMarker.vue';
 import SearchLabel from './global/SearchLabel.vue';
-import SearchKeyword from './global/SearchKeyword.vue';
+import SearchText from './global/SearchText.vue';
 import SearchIcon from './global/SearchIcon.vue';
 
 import type { App } from 'vue';
@@ -71,7 +71,7 @@ export const components = {
 	PageWithAnimBg: PageWithAnimBg,
 	SearchMarker: SearchMarker,
 	SearchLabel: SearchLabel,
-	SearchKeyword: SearchKeyword,
+	SearchText: SearchText,
 	SearchIcon: SearchIcon,
 };
 
@@ -105,7 +105,7 @@ declare module '@vue/runtime-core' {
 		PageWithAnimBg: typeof PageWithAnimBg;
 		SearchMarker: typeof SearchMarker;
 		SearchLabel: typeof SearchLabel;
-		SearchKeyword: typeof SearchKeyword;
+		SearchText: typeof SearchText;
 		SearchIcon: typeof SearchIcon;
 	}
 }