From c88c18fdf4b083b6051a535f636d77e737f2cf07 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Sun, 16 Feb 2025 20:54:16 +0900
Subject: [PATCH] test

---
 .../src/components/MkSearchMarker.vue         |  4 ++-
 .../src/pages/settings/mute-block.vue         | 36 ++++++++++++++-----
 2 files changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/frontend/src/components/MkSearchMarker.vue b/packages/frontend/src/components/MkSearchMarker.vue
index 87049dbbfb..25734d7880 100644
--- a/packages/frontend/src/components/MkSearchMarker.vue
+++ b/packages/frontend/src/components/MkSearchMarker.vue
@@ -14,9 +14,11 @@ import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
 
 const props = defineProps<{
 	markerId: string;
+	children?: string[];
 }>();
 
-const highlighted = window.location.hash.slice(1) === props.markerId;
+const hash = window.location.hash.slice(1);
+const highlighted = hash === props.markerId || (props.children && props.children.includes(hash));
 </script>
 
 <style lang="scss" module>
diff --git a/packages/frontend/src/pages/settings/mute-block.vue b/packages/frontend/src/pages/settings/mute-block.vue
index 491676e0d0..01b96766a3 100644
--- a/packages/frontend/src/pages/settings/mute-block.vue
+++ b/packages/frontend/src/pages/settings/mute-block.vue
@@ -5,16 +5,33 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps_m">
-	<MkFolder>
-		<template #icon><i class="ti ti-message-off"></i></template>
-		<template #label>{{ i18n.ts.wordMute }}</template>
+	<MkSearchMarker
+		markerId="test"
+		:locationLabel="[i18n.ts.muteAndBlock]"
+		icon="ti ti-ban"
+		:keywords="['mute', i18n.ts.wordMute]"
+		:children="['test2']"
+	>
+		<MkFolder>
+			<template #icon><i class="ti ti-message-off"></i></template>
+			<template #label>{{ i18n.ts.wordMute }}</template>
 
-		<div class="_gaps_m">
-			<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
-			<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
-			<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
-		</div>
-	</MkFolder>
+			<div class="_gaps_m">
+				<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
+
+				<MkSearchMarker
+					markerId="test2"
+					:locationLabel="[i18n.ts.muteAndBlock, i18n.ts.wordMute]"
+					icon="ti ti-ban"
+					:keywords="['showMutedWord', i18n.ts.showMutedWord]"
+				>
+					<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
+				</MkSearchMarker>
+
+				<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
+			</div>
+		</MkFolder>
+	</MkSearchMarker>
 
 	<MkFolder>
 		<template #icon><i class="ti ti-message-off"></i></template>
@@ -149,6 +166,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { defaultStore } from '@/store';
 import { reloadAsk } from '@/scripts/reload-ask.js';
+import MkSearchMarker from '@/components/MkSearchMarker.vue';
 
 const $i = signinRequired();