Merge branch 'settings-search' into settings-search-index

packages/frontend/src/components/MkSearchMarker.vue

@@ -0,0 +1,40 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div :class="[$style.root, { [$style.highlighted]: highlighted }]">
+	<slot></slot>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, shallowRef } from 'vue';
+
+const props = defineProps<{
+	markerId: string;
+	children?: string[];
+}>();
+
+const hash = window.location.hash.slice(1);
+const highlighted = hash === props.markerId || (props.children && props.children.includes(hash));
+</script>
+
+<style lang="scss" module>
+.root {
+}
+
+.highlighted {
+	animation: blink 1s infinite;
+}
+
+@keyframes blink {
+	0%, 100% {
+		box-shadow: 0 0 0 2px color(from var(--MI_THEME-accent) srgb r g b / 0.3);
+	}
+	50% {
+		box-shadow: 0 0 0 2px transparent;
+	}
+}
+</style>

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

@@ -188,6 +188,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();
 

packages/frontend/src/pages/settings/privacy.vue

@@ -258,6 +258,7 @@ import FormSlot from '@/components/form/slot.vue';
 import { formatDateTimeString } from '@/scripts/format-time-string.js';
 import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
+import MkSearchMarker from '@/components/MkSearchMarker.vue';
 
 const $i = signinRequired();
 

packages/frontend/src/pages/settings/profile.vue

@@ -176,6 +176,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
+import MkSearchMarker from '@/components/MkSearchMarker.vue';
 import FormSplit from '@/components/form/split.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import FormSlot from '@/components/form/slot.vue';