refactor serach index generator code (#15772)

* refactor: flatten search index

* chore: use Function() to simplify parsing attribute

* chore: remove comment handling

* chore: simplify processing SearchLabel and SearchKeyword element

* chore: use SearchLabel in mutedUsers

* chore: small improvements

* chore: remove a fallback path and simplify the entire code

* fix: result path is not correct

* chore: inline function

packages/frontend/src/components/MkSuperMenu.vue

@@ -93,11 +93,11 @@ export type SuperMenuDef = {
 </script>
 
 <script lang="ts" setup>
-import { useTemplateRef, ref, watch, nextTick } from 'vue';
+import { useTemplateRef, ref, watch, nextTick, computed } from 'vue';
+import { getScrollContainer } from '@@/js/scroll.js';
 import type { SearchIndexItem } from '@/utility/settings-search-index.js';
 import MkInput from '@/components/MkInput.vue';
 import { i18n } from '@/i18n.js';
-import { getScrollContainer } from '@@/js/scroll.js';
 import { useRouter } from '@/router.js';
 import { initIntlString, compareStringIncludes } from '@/utility/intl-string.js';
 
@@ -124,6 +124,7 @@ const searchResult = ref<{
 	isRoot: boolean;
 	parentLabels: string[];
 }[]>([]);
+const searchIndexItemByIdComputed = computed(() => props.searchIndex && new Map<string, SearchIndexItem>(props.searchIndex.map(i => [i.id, i])));
 
 watch(searchQuery, (value) => {
 	rawSearchQuery.value = value;
@@ -137,32 +138,41 @@ watch(rawSearchQuery, (value) => {
 		return;
 	}
 
-	const dive = (items: SearchIndexItem[], parents: SearchIndexItem[] = []) => {
-		for (const item of items) {
-			const matched = (
-				compareStringIncludes(item.label, value) ||
-				item.keywords.some((x) => compareStringIncludes(x, value))
-			);
+	const searchIndexItemById = searchIndexItemByIdComputed.value;
+	if (searchIndexItemById != null) {
+		const addSearchResult = (item: SearchIndexItem) => {
+			let path: string | undefined = item.path;
+			let icon: string | undefined = item.icon;
+			const parentLabels: string[] = [];
+
+			for (let current = searchIndexItemById.get(item.parentId ?? '');
+				current != null;
+				current = searchIndexItemById.get(current.parentId ?? '')) {
+				path ??= current.path;
+				icon ??= current.icon;
+				parentLabels.push(current.label);
+			}
+
+			if (_DEV_ && path == null) throw new Error('path is null for ' + item.id);
 
-			if (matched) {
 			searchResult.value.push({
 				id: item.id,
-					path: item.path ?? parents.find((x) => x.path != null)?.path ?? '/', // never gets `/`
+				path: path ?? '/', // never gets `/`
 				label: item.label,
-					parentLabels: parents.map((x) => x.label).toReversed(),
-					icon: item.icon ?? parents.find((x) => x.icon != null)?.icon,
-					isRoot: parents.length === 0,
+				parentLabels: parentLabels.toReversed(),
+				icon,
+				isRoot: item.parentId == null,
 			});
-			}
-
-			if (item.children) {
-				dive(item.children, [item, ...parents]);
-			}
-		}
 		};
 
-	if (props.searchIndex) {
-		dive(props.searchIndex);
+		for (const item of searchIndexItemById.values()) {
+			if (
+				compareStringIncludes(item.label, value) ||
+				item.keywords.some((x) => compareStringIncludes(x, value))
+			) {
+				addSearchResult(item);
+			}
+		}
 	}
 });
 

packages/frontend/src/pages/settings/mute-block.vue

@@ -62,12 +62,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</SearchMarker>
 
 			<SearchMarker
-				:label="`${i18n.ts.mutedUsers} (${ i18n.ts.renote })`"
 				:keywords="['renote', 'mute', 'hide', 'user']"
 			>
 				<MkFolder>
 					<template #icon><i class="ti ti-repeat-off"></i></template>
-					<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
+					<template #label><SearchLabel>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</SearchLabel></template>
 
 					<MkPagination :pagination="renoteMutingPagination">
 						<template #empty>

packages/frontend/src/utility/settings-search-index.ts

@@ -8,35 +8,27 @@ import type { GeneratedSearchIndexItem } from 'search-index:settings';
 
 export type SearchIndexItem = {
 	id: string;
+	parentId?: string;
 	path?: string;
 	label: string;
 	keywords: string[];
 	icon?: string;
-	children?: SearchIndexItem[];
 };
 
 const rootMods = new Map(generated.map(item => [item.id, item]));
 
-function walk(item: GeneratedSearchIndexItem) {
+// link inlining here
+for (const item of generated) {
 	if (item.inlining) {
 		for (const id of item.inlining) {
 			const inline = rootMods.get(id);
 			if (inline) {
-				(item.children ??= []).push(inline);
-				rootMods.delete(id);
+				inline.parentId = item.id;
 			} else {
 				console.log('[Settings Search Index] Failed to inline', id);
 			}
 		}
 	}
-
-	for (const child of item.children ?? []) {
-		walk(child);
-	}
-}
-
-for (const item of generated) {
-	walk(item);
 }
 
 export const searchIndexes: SearchIndexItem[] = generated;

packages/frontend/src/utility/virtual.d.ts

@@ -6,12 +6,12 @@
 declare module 'search-index:settings' {
 	export type GeneratedSearchIndexItem = {
 		id: string;
+		parentId?: string;
 		path?: string;
 		label: string;
 		keywords: string[];
 		icon?: string;
 		inlining?: string[];
-		children?: GeneratedSearchIndexItem[];
 	};
 
 	export const searchIndexes: GeneratedSearchIndexItem[];