Merge tag '2025.4.0' into merge/2025-03-24

# Conflicts:
#	.github/workflows/storybook.yml
#	locales/index.d.ts
#	package.json
#	packages/backend/src/models/json-schema/role.ts
#	packages/frontend/src/components/MkPageWindow.vue
#	packages/frontend/src/pages/admin/roles.editor.vue
#	packages/frontend/src/pages/admin/roles.vue
#	packages/frontend/src/pages/settings/preferences.vue
#	packages/frontend/src/pages/settings/privacy.vue
#	packages/frontend/src/pages/timeline.vue
#	packages/frontend/src/pref-migrate.ts
#	packages/frontend/src/ui/_common_/common.vue
#	packages/frontend/src/ui/deck.vue
#	packages/frontend/src/ui/universal.vue
#	packages/misskey-js/src/autogen/types.ts

packages/frontend/src/components/MkAntennaEditor.vue

@@ -39,7 +39,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkSwitch v-model="localOnly">{{ i18n.ts.localOnly }}</MkSwitch>
 			<MkSwitch v-model="caseSensitive">{{ i18n.ts.caseSensitive }}</MkSwitch>
 			<MkSwitch v-model="withFile">{{ i18n.ts.withFileAntenna }}</MkSwitch>
-			<MkSwitch v-model="hideNotesInSensitiveChannel">{{ i18n.ts.hideNotesInSensitiveChannel }}</MkSwitch>
+			<MkSwitch v-model="excludeNotesInSensitiveChannel">{{ i18n.ts.excludeNotesInSensitiveChannel }}</MkSwitch>
 		</div>
 		<div :class="$style.actions">
 			<div class="_buttons">
@@ -54,6 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { watch, ref } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { DeepPartial } from '@/utility/merge.js';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
@@ -63,7 +64,6 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { deepMerge } from '@/utility/merge.js';
-import type { DeepPartial } from '@/utility/merge.js';
 
 type PartialAllowedAntenna = Omit<Misskey.entities.Antenna, 'id' | 'createdAt' | 'updatedAt'> & {
 	id?: string;
@@ -87,7 +87,7 @@ const initialAntenna = deepMerge<PartialAllowedAntenna>(props.antenna ?? {}, {
 	caseSensitive: false,
 	localOnly: false,
 	withFile: false,
-	hideNotesInSensitiveChannel: false,
+	excludeNotesInSensitiveChannel: false,
 	isActive: true,
 	hasUnreadNote: false,
 	notify: false,
@@ -110,7 +110,7 @@ const localOnly = ref<boolean>(initialAntenna.localOnly);
 const excludeBots = ref<boolean>(initialAntenna.excludeBots);
 const withReplies = ref<boolean>(initialAntenna.withReplies);
 const withFile = ref<boolean>(initialAntenna.withFile);
-const hideNotesInSensitiveChannel = ref<boolean>(initialAntenna.hideNotesInSensitiveChannel);
+const excludeNotesInSensitiveChannel = ref<boolean>(initialAntenna.excludeNotesInSensitiveChannel);
 const userLists = ref<Misskey.entities.UserList[] | null>(null);
 
 watch(() => src.value, async () => {
@@ -127,7 +127,7 @@ async function saveAntenna() {
 		excludeBots: excludeBots.value,
 		withReplies: withReplies.value,
 		withFile: withFile.value,
-		hideNotesInSensitiveChannel: hideNotesInSensitiveChannel.value,
+		excludeNotesInSensitiveChannel: excludeNotesInSensitiveChannel.value,
 		caseSensitive: caseSensitive.value,
 		localOnly: localOnly.value,
 		users: users.value.trim().split('\n').map(x => x.trim()),

packages/frontend/src/components/MkMenu.vue

@@ -473,7 +473,7 @@ onBeforeUnmount(() => {
 		}
 	}
 
-	&:not(.widthSpecified) {
+	&:not(.asDrawer):not(.widthSpecified) {
 		> .menu {
 			max-width: 400px;
 		}

packages/frontend/src/components/MkNotification.vue

@@ -28,6 +28,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				[$style.t_exportCompleted]: notification.type === 'exportCompleted',
 				[$style.t_login]: notification.type === 'login',
 				[$style.t_createToken]: notification.type === 'createToken',
+				[$style.t_chatRoomInvitationReceived]: notification.type === 'chatRoomInvitationReceived',
 				[$style.t_roleAssigned]: notification.type === 'roleAssigned' && notification.role.iconUrl == null,
 				[$style.t_pollEnded]: notification.type === 'edited',
 				[$style.t_roleAssigned]: notification.type === 'scheduledNoteFailed',
@@ -424,6 +425,12 @@ function getActualReactedUsersCount(notification: Misskey.entities.Notification)
 	pointer-events: none;
 }
 
+.t_chatRoomInvitationReceived {
+	padding: 3px;
+	background: var(--eventOther);
+	pointer-events: none;
+}
+
 .tail {
 	flex: 1;
 	min-width: 0;

packages/frontend/src/components/MkPageWindow.vue

@@ -113,7 +113,7 @@ windowRouter.addListener('change', ctx => {
 windowRouter.init();
 
 provide(DI.router, windowRouter);
-provide('inAppSearchMarkerId', searchMarkerId);
+provide(DI.inAppSearchMarkerId, searchMarkerId);
 provideMetadataReceiver((metadataGetter) => {
 	const info = metadataGetter();
 	pageMetadata.value = info;
@@ -121,7 +121,7 @@ provideMetadataReceiver((metadataGetter) => {
 provideReactiveMetadata(pageMetadata);
 provide('shouldOmitHeaderTitle', true);
 provide('shouldHeaderThin', true);
-provide('forceSpacerMin', true);
+provide(DI.forceSpacerMin, true);
 provide('shouldBackButton', false);
 
 const contextmenu = computed(() => ([{

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 = (
+	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);
+
+			searchResult.value.push({
+				id: item.id,
+				path: path ?? '/', // never gets `/`
+				label: item.label,
+				parentLabels: parentLabels.toReversed(),
+				icon,
+				isRoot: item.parentId == null,
+			});
+		};
+
+		for (const item of searchIndexItemById.values()) {
+			if (
 				compareStringIncludes(item.label, value) ||
 				item.keywords.some((x) => compareStringIncludes(x, value))
-			);
-
-			if (matched) {
-				searchResult.value.push({
-					id: item.id,
-					path: item.path ?? parents.find((x) => x.path != null)?.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,
-				});
-			}
-
-			if (item.children) {
-				dive(item.children, [item, ...parents]);
+			) {
+				addSearchResult(item);
 			}
 		}
-	};
-
-	if (props.searchIndex) {
-		dive(props.searchIndex);
 	}
 });
 

packages/frontend/src/components/MkWaitingDialog.vue

@@ -22,7 +22,7 @@ const modal = useTemplateRef('modal');
 const props = defineProps<{
 	success: boolean;
 	showing: boolean;
-	text?: string;
+	text?: string | null;
 }>();
 
 const emit = defineEmits<{

packages/frontend/src/components/global/MkSpacer.vue

@@ -14,6 +14,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <script lang="ts" setup>
 import { inject } from 'vue';
 import { deviceKind } from '@/utility/device-kind.js';
+import { DI } from '@/di.js';
 
 const props = withDefaults(defineProps<{
 	contentMax?: number | null;
@@ -25,7 +26,7 @@ const props = withDefaults(defineProps<{
 	marginMax: 24,
 });
 
-const forceSpacerMin = inject('forceSpacerMin', false) || deviceKind === 'smartphone';
+const forceSpacerMin = inject(DI.forceSpacerMin, false) || deviceKind === 'smartphone';
 </script>
 
 <style lang="scss" module>

packages/frontend/src/components/global/SearchIcon.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>

packages/frontend/src/components/global/SearchMarker.vue

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div ref="root" :class="[$style.root, { [$style.highlighted]: highlighted }]">
-	<slot></slot>
+	<slot :isParentOfTarget="isParentOfTarget"></slot>
 </div>
 </template>
 
@@ -21,7 +21,7 @@ import {
 	useTemplateRef,
 	inject,
 } from 'vue';
-import type { Ref } from 'vue';
+import { DI } from '@/di.js';
 
 const props = defineProps<{
 	markerId?: string;
@@ -36,12 +36,13 @@ const rootEl = useTemplateRef('root');
 const rootElMutationObserver = new MutationObserver(() => {
 	checkChildren();
 });
-const injectedSearchMarkerId = inject<Ref<string | null> | null>('inAppSearchMarkerId', null);
+const injectedSearchMarkerId = inject(DI.inAppSearchMarkerId, null);
 const searchMarkerId = computed(() => injectedSearchMarkerId?.value ?? window.location.hash.slice(1));
 const highlighted = ref(props.markerId === searchMarkerId.value);
+const isParentOfTarget = computed(() => props.children?.includes(searchMarkerId.value));
 
 function checkChildren() {
-	if (props.children?.includes(searchMarkerId.value)) {
+	if (isParentOfTarget.value) {
 		const el = window.document.querySelector(`[data-in-app-search-marker-id="${searchMarkerId.value}"]`);
 		highlighted.value = el == null;
 	}
@@ -105,8 +106,8 @@ onBeforeUnmount(dispose);
 
 @keyframes blink {
 	0%, 100% {
-		background: color(from var(--MI_THEME-accent) srgb r g b / 0.05);
-		border: 1px solid color(from var(--MI_THEME-accent) srgb r g b / 0.7);
+		background: color(from var(--MI_THEME-accent) srgb r g b / 0.1);
+		border: 1px solid color(from var(--MI_THEME-accent) srgb r g b / 0.75);
 	}
 	50% {
 		background: transparent;

packages/frontend/src/components/index.ts

@@ -30,6 +30,7 @@ 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 SearchIcon from './global/SearchIcon.vue';
 
 import type { App } from 'vue';
 
@@ -67,6 +68,7 @@ export const components = {
 	SearchMarker: SearchMarker,
 	SearchLabel: SearchLabel,
 	SearchKeyword: SearchKeyword,
+	SearchIcon: SearchIcon,
 };
 
 declare module '@vue/runtime-core' {
@@ -98,5 +100,6 @@ declare module '@vue/runtime-core' {
 		SearchMarker: typeof SearchMarker;
 		SearchLabel: typeof SearchLabel;
 		SearchKeyword: typeof SearchKeyword;
+		SearchIcon: typeof SearchIcon;
 	}
 }

packages/frontend/src/di.ts

@@ -16,4 +16,6 @@ export const DI = {
 	currentStickyBottom: Symbol() as InjectionKey<Ref<number>>,
 	mfmEmojiReactCallback: Symbol() as InjectionKey<(emoji: string) => void>,
 	inModal: Symbol() as InjectionKey<boolean>,
+	inAppSearchMarkerId: Symbol() as InjectionKey<Ref<string | null>>,
+	forceSpacerMin: Symbol() as InjectionKey<boolean>,
 };

packages/frontend/src/lib/nirax.ts

@@ -266,18 +266,20 @@ export class Nirax<DEF extends RouteDef[]> extends EventEmitter<RouterEvents> {
 			throw new Error('no route found for: ' + fullPath);
 		}
 
-		if ('redirect' in res.route) {
-			let redirectPath: string;
-			if (typeof res.route.redirect === 'function') {
-				redirectPath = res.route.redirect(res.props);
-			} else {
-				redirectPath = res.route.redirect + (res._parsedRoute.queryString ? '?' + res._parsedRoute.queryString : '') + (res._parsedRoute.hash ? '#' + res._parsedRoute.hash : '');
+		for (let current: PathResolvedResult | undefined = res; current; current = current.child) {
+			if ('redirect' in current.route) {
+				let redirectPath: string;
+				if (typeof current.route.redirect === 'function') {
+					redirectPath = current.route.redirect(current.props);
+				} else {
+					redirectPath = current.route.redirect + (current._parsedRoute.queryString ? '?' + current._parsedRoute.queryString : '') + (current._parsedRoute.hash ? '#' + current._parsedRoute.hash : '');
+				}
+				if (_DEV_) console.log('Redirecting to: ', redirectPath);
+				if (_redirected && this.redirectCount++ > 10) {
+					throw new Error('redirect loop detected');
+				}
+				return this.navigate(redirectPath, emitChange, true);
 			}
-			if (_DEV_) console.log('Redirecting to: ', redirectPath);
-			if (_redirected && this.redirectCount++ > 10) {
-				throw new Error('redirect loop detected');
-			}
-			return this.navigate(redirectPath, emitChange, true);
 		}
 
 		if (res.route.loginRequired && !this.isLoggedIn) {

packages/frontend/src/navbar.ts

@@ -134,6 +134,7 @@ export const navbarItemDef = reactive({
 		title: i18n.ts.chat,
 		icon: 'ti ti-messages',
 		to: '/chat',
+		show: computed(() => $i != null && $i.policies.chatAvailability !== 'unavailable'),
 		indicated: computed(() => $i != null && $i.hasUnreadChatMessages),
 	},
 	achievements: {

packages/frontend/src/os.ts

@@ -562,12 +562,13 @@ export function success(): Promise<void> {
 	});
 }
 
-export function waiting(): Promise<void> {
+export function waiting(text?: string | null): Promise<void> {
 	return new Promise(resolve => {
 		const showing = ref(true);
 		const { dispose } = popup(MkWaitingDialog, {
 			success: false,
 			showing: showing,
+			text,
 		}, {
 			done: () => resolve(),
 			closed: () => dispose(),

packages/frontend/src/pages/admin/index.vue

@@ -363,7 +363,7 @@ defineExpose({
 			box-sizing: border-box;
 			border-right: solid 0.5px var(--MI_THEME-divider);
 			overflow: auto;
-			height: 100dvh;
+			height: 100cqh;
 		}
 
 		> .main {

packages/frontend/src/pages/admin/roles.editor.vue

@@ -224,21 +224,24 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</MkFolder>
 
-			<MkFolder v-if="matchQuery([i18n.ts._role._options.canChat, 'canChat'])">
-				<template #label>{{ i18n.ts._role._options.canChat }}</template>
+			<MkFolder v-if="matchQuery([i18n.ts._role._options.chatAvailability, 'chatAvailability'])">
+				<template #label>{{ i18n.ts._role._options.chatAvailability }}</template>
 				<template #suffix>
-					<span v-if="role.policies.canChat.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
-					<span v-else>{{ role.policies.canChat.value ? i18n.ts.yes : i18n.ts.no }}</span>
-					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.canChat)"></i></span>
+					<span v-if="role.policies.chatAvailability.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
+					<span v-else>{{ role.policies.chatAvailability.value === 'available' ? i18n.ts.yes : role.policies.chatAvailability.value === 'readonly' ? i18n.ts.readonly : i18n.ts.no }}</span>
+					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.chatAvailability)"></i></span>
 				</template>
 				<div class="_gaps">
-					<MkSwitch v-model="role.policies.canChat.useDefault" :readonly="readonly">
+					<MkSwitch v-model="role.policies.chatAvailability.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
-					<MkSwitch v-model="role.policies.canChat.value" :disabled="role.policies.canChat.useDefault" :readonly="readonly">
+					<MkSelect v-model="role.policies.chatAvailability.value" :disabled="role.policies.chatAvailability.useDefault" :readonly="readonly">
 						<template #label>{{ i18n.ts.enable }}</template>
-					</MkSwitch>
-					<MkRange v-model="role.policies.canChat.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<option value="available">{{ i18n.ts.enabled }}</option>
+						<option value="readonly">{{ i18n.ts.readonly }}</option>
+						<option value="unavailable">{{ i18n.ts.disabled }}</option>
+					</MkSelect>
+					<MkRange v-model="role.policies.chatAvailability.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
 						<template #label>{{ i18n.ts._role.priority }}</template>
 					</MkRange>
 				</div>

packages/frontend/src/pages/admin/roles.vue

@@ -78,12 +78,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkInput>
 						</MkFolder>
 
-						<MkFolder v-if="matchQuery([i18n.ts._role._options.canChat, 'canChat'])">
-							<template #label>{{ i18n.ts._role._options.canChat }}</template>
-							<template #suffix>{{ policies.canChat ? i18n.ts.yes : i18n.ts.no }}</template>
-							<MkSwitch v-model="policies.canChat">
+						<MkFolder v-if="matchQuery([i18n.ts._role._options.chatAvailability, 'chatAvailability'])">
+							<template #label>{{ i18n.ts._role._options.chatAvailability }}</template>
+							<template #suffix>{{ policies.chatAvailability === 'available' ? i18n.ts.yes : policies.chatAvailability === 'readonly' ? i18n.ts.readonly : i18n.ts.no }}</template>
+							<MkSelect v-model="policies.chatAvailability">
 								<template #label>{{ i18n.ts.enable }}</template>
-							</MkSwitch>
+								<option value="available">{{ i18n.ts.enabled }}</option>
+								<option value="readonly">{{ i18n.ts.readonly }}</option>
+								<option value="unavailable">{{ i18n.ts.disabled }}</option>
+							</MkSelect>
 						</MkFolder>
 
 						<MkFolder v-if="matchQuery([i18n.ts._role._options.mentionMax, 'mentionLimit'])">
@@ -322,6 +325,7 @@ import MkInput from '@/components/MkInput.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkSelect from '@/components/MkSelect.vue';
 import MkRange from '@/components/MkRange.vue';
 import MkInfo from '@/components/MkInfo.vue';
 import MkRolePreview from '@/components/MkRolePreview.vue';

packages/frontend/src/pages/chat/XMessage.vue

@@ -85,7 +85,7 @@ const isMe = computed(() => props.message.fromUserId === $i.id);
 const urls = computed(() => props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : []);
 
 provide(DI.mfmEmojiReactCallback, (reaction) => {
-	if (!$i.policies.canChat) return;
+	if ($i.policies.chatAvailability !== 'available') return;
 
 	sound.playMisskeySfx('reaction');
 	misskeyApi('chat/messages/react', {
@@ -95,7 +95,7 @@ provide(DI.mfmEmojiReactCallback, (reaction) => {
 });
 
 function react(ev: MouseEvent) {
-	if (!$i.policies.canChat) return;
+	if ($i.policies.chatAvailability !== 'available') return;
 
 	const targetEl = getHTMLElementOrNull(ev.currentTarget ?? ev.target);
 	if (!targetEl) return;
@@ -110,7 +110,7 @@ function react(ev: MouseEvent) {
 }
 
 function onReactionClick(record: Misskey.entities.ChatMessage['reactions'][0]) {
-	if (!$i.policies.canChat) return;
+	if ($i.policies.chatAvailability !== 'available') return;
 
 	if (record.user.id === $i.id) {
 		misskeyApi('chat/messages/unreact', {
@@ -138,7 +138,7 @@ function onContextmenu(ev: MouseEvent) {
 function showMenu(ev: MouseEvent, contextmenu = false) {
 	const menu: MenuItem[] = [];
 
-	if (!isMe.value && $i.policies.canChat) {
+	if (!isMe.value && $i.policies.chatAvailability === 'available') {
 		menu.push({
 			text: i18n.ts.reaction,
 			icon: 'ti ti-mood-plus',
@@ -164,7 +164,7 @@ function showMenu(ev: MouseEvent, contextmenu = false) {
 		type: 'divider',
 	});
 
-	if (isMe.value && $i.policies.canChat) {
+	if (isMe.value && $i.policies.chatAvailability === 'available') {
 		menu.push({
 			text: i18n.ts.delete,
 			icon: 'ti ti-trash',

packages/frontend/src/pages/chat/home.home.vue

@@ -5,9 +5,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_gaps">
-	<MkButton v-if="$i.policies.canChat" primary gradate rounded :class="$style.start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startChat }}</MkButton>
+	<MkButton v-if="$i.policies.chatAvailability === 'available'" primary gradate rounded :class="$style.start" @click="start"><i class="ti ti-plus"></i> {{ i18n.ts.startChat }}</MkButton>
 
-	<MkInfo v-else>{{ i18n.ts._chat.chatNotAvailableForThisAccountOrServer }}</MkInfo>
+	<MkInfo v-else>{{ $i.policies.chatAvailability === 'readonly' ? i18n.ts._chat.chatIsReadOnlyForThisAccountOrServer : i18n.ts._chat.chatNotAvailableForThisAccountOrServer }}</MkInfo>
 
 	<MkAd :preferForms="['horizontal', 'horizontal-big']"/>
 

packages/frontend/src/pages/chat/room.vue

@@ -6,54 +6,56 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader v-model:tab="tab" :reversed="tab === 'chat'" :tabs="headerTabs" :actions="headerActions">
 	<MkSpacer v-if="tab === 'chat'" :contentMax="700">
-		<div v-if="initializing">
-			<MkLoading/>
-		</div>
-
-		<div v-else-if="messages.length === 0">
-			<div class="_gaps" style="text-align: center;">
-				<div>{{ i18n.ts._chat.noMessagesYet }}</div>
-				<template v-if="user">
-					<div v-if="user.chatScope === 'followers'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromFollowers }}</div>
-					<div v-else-if="user.chatScope === 'following'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromFollowing }}</div>
-					<div v-else-if="user.chatScope === 'mutual'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromMutualFollowing }}</div>
-					<div v-else-if="user.chatScope === 'none'">{{ i18n.ts._chat.thisUserNotAllowedChatAnyone }}</div>
-				</template>
-				<template v-else-if="room">
-					<div>{{ i18n.ts._chat.inviteUserToChat }}</div>
-				</template>
-			</div>
-		</div>
-
-		<div v-else ref="timelineEl" class="_gaps">
-			<div v-if="canFetchMore">
-				<MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
+		<div class="_gaps">
+			<div v-if="initializing">
+				<MkLoading/>
 			</div>
 
-			<TransitionGroup
-				:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
-				:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
-				:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
-				:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
-				:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
-				tag="div" class="_gaps"
-			>
-				<template v-for="item in timeline.toReversed()" :key="item.id">
-					<XMessage v-if="item.type === 'item'" :message="item.data"/>
-					<div v-else-if="item.type === 'date'" :class="$style.dateDivider">
-						<span><i class="ti ti-chevron-up"></i> {{ item.nextText }}</span>
-						<span style="height: 1em; width: 1px; background: var(--MI_THEME-divider);"></span>
-						<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
-					</div>
-				</template>
-			</TransitionGroup>
-		</div>
+			<div v-else-if="messages.length === 0">
+				<div class="_gaps" style="text-align: center;">
+					<div>{{ i18n.ts._chat.noMessagesYet }}</div>
+					<template v-if="user">
+						<div v-if="user.chatScope === 'followers'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromFollowers }}</div>
+						<div v-else-if="user.chatScope === 'following'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromFollowing }}</div>
+						<div v-else-if="user.chatScope === 'mutual'">{{ i18n.ts._chat.thisUserAllowsChatOnlyFromMutualFollowing }}</div>
+						<div v-else-if="user.chatScope === 'none'">{{ i18n.ts._chat.thisUserNotAllowedChatAnyone }}</div>
+					</template>
+					<template v-else-if="room">
+						<div>{{ i18n.ts._chat.inviteUserToChat }}</div>
+					</template>
+				</div>
+			</div>
 
-		<div v-if="user && (!user.canChat || user.host !== null)">
-			<MkInfo warn>{{ i18n.ts._chat.chatNotAvailableInOtherAccount }}</MkInfo>
-		</div>
+			<div v-else ref="timelineEl" class="_gaps">
+				<div v-if="canFetchMore">
+					<MkButton :class="$style.more" :wait="moreFetching" primary rounded @click="fetchMore">{{ i18n.ts.loadMore }}</MkButton>
+				</div>
 
-		<MkInfo v-if="!$i.policies.canChat" warn>{{ i18n.ts._chat.chatNotAvailableForThisAccountOrServer }}</MkInfo>
+				<TransitionGroup
+					:enterActiveClass="prefer.s.animation ? $style.transition_x_enterActive : ''"
+					:leaveActiveClass="prefer.s.animation ? $style.transition_x_leaveActive : ''"
+					:enterFromClass="prefer.s.animation ? $style.transition_x_enterFrom : ''"
+					:leaveToClass="prefer.s.animation ? $style.transition_x_leaveTo : ''"
+					:moveClass="prefer.s.animation ? $style.transition_x_move : ''"
+					tag="div" class="_gaps"
+				>
+					<template v-for="item in timeline.toReversed()" :key="item.id">
+						<XMessage v-if="item.type === 'item'" :message="item.data"/>
+						<div v-else-if="item.type === 'date'" :class="$style.dateDivider">
+							<span><i class="ti ti-chevron-up"></i> {{ item.nextText }}</span>
+							<span style="height: 1em; width: 1px; background: var(--MI_THEME-divider);"></span>
+							<span>{{ item.prevText }} <i class="ti ti-chevron-down"></i></span>
+						</div>
+					</template>
+				</TransitionGroup>
+			</div>
+
+			<div v-if="user && (!user.canChat || user.host !== null)">
+				<MkInfo warn>{{ i18n.ts._chat.chatNotAvailableInOtherAccount }}</MkInfo>
+			</div>
+
+			<MkInfo v-if="$i.policies.chatAvailability !== 'available'" warn>{{ $i.policies.chatAvailability === 'readonly' ? i18n.ts._chat.chatIsReadOnlyForThisAccountOrServer : i18n.ts._chat.chatNotAvailableForThisAccountOrServer }}</MkInfo>
+		</div>
 	</MkSpacer>
 
 	<MkSpacer v-else-if="tab === 'search'" :contentMax="700">

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/pages/settings/navbar.vue

@@ -103,7 +103,6 @@ function removeItem(index: number) {
 
 async function save() {
 	prefer.commit('menu', items.value.map(x => x.type));
-	await reloadAsk({ reason: i18n.ts.reloadToApplySetting, unison: true });
 }
 
 function reset() {

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

@@ -4,64 +4,66 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps_m">
-	<MkFeatureBanner icon="/client-assets/bell_3d.png" color="#ffff00">
-		<SearchKeyword>{{ i18n.ts._settings.notificationsBanner }}</SearchKeyword>
-	</MkFeatureBanner>
+<SearchMarker path="/settings/notifications" :label="i18n.ts.notifications" :keywords="['notifications']" icon="ti ti-bell">
+	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/bell_3d.png" color="#ffff00">
+			<SearchKeyword>{{ i18n.ts._settings.notificationsBanner }}</SearchKeyword>
+		</MkFeatureBanner>
 
-	<FormSection first>
-		<template #label>{{ i18n.ts.notificationRecieveConfig }}</template>
-		<div class="_gaps_s">
-			<MkFolder v-for="type in notificationTypes.filter(x => !nonConfigurableNotificationTypes.includes(x))" :key="type">
-				<template #label>{{ i18n.ts._notification._types[type] }}</template>
-				<template #suffix>
-					{{
-						$i.notificationRecieveConfig[type]?.type === 'never' ? i18n.ts.none :
-						$i.notificationRecieveConfig[type]?.type === 'following' ? i18n.ts.following :
-						$i.notificationRecieveConfig[type]?.type === 'follower' ? i18n.ts.followers :
-						$i.notificationRecieveConfig[type]?.type === 'mutualFollow' ? i18n.ts.mutualFollow :
-						$i.notificationRecieveConfig[type]?.type === 'followingOrFollower' ? i18n.ts.followingOrFollower :
-						$i.notificationRecieveConfig[type]?.type === 'list' ? i18n.ts.userList :
-						i18n.ts.all
-					}}
-				</template>
+		<FormSection first>
+			<template #label>{{ i18n.ts.notificationRecieveConfig }}</template>
+			<div class="_gaps_s">
+				<MkFolder v-for="type in notificationTypes.filter(x => !nonConfigurableNotificationTypes.includes(x))" :key="type">
+					<template #label>{{ i18n.ts._notification._types[type] }}</template>
+					<template #suffix>
+						{{
+							$i.notificationRecieveConfig[type]?.type === 'never' ? i18n.ts.none :
+							$i.notificationRecieveConfig[type]?.type === 'following' ? i18n.ts.following :
+							$i.notificationRecieveConfig[type]?.type === 'follower' ? i18n.ts.followers :
+							$i.notificationRecieveConfig[type]?.type === 'mutualFollow' ? i18n.ts.mutualFollow :
+							$i.notificationRecieveConfig[type]?.type === 'followingOrFollower' ? i18n.ts.followingOrFollower :
+							$i.notificationRecieveConfig[type]?.type === 'list' ? i18n.ts.userList :
+							i18n.ts.all
+						}}
+					</template>
 
-				<XNotificationConfig
-					:userLists="userLists"
-					:value="$i.notificationRecieveConfig[type] ?? { type: 'all' }"
-					:configurableTypes="onlyOnOrOffNotificationTypes.includes(type) ? ['all', 'never'] : undefined"
-					@update="(res) => updateReceiveConfig(type, res)"
-				/>
-			</MkFolder>
-		</div>
-	</FormSection>
-	<FormSection>
-		<div class="_gaps_m">
-			<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
-		</div>
-	</FormSection>
-	<FormSection>
-		<div class="_gaps_m">
-			<FormLink @click="testNotification">{{ i18n.ts._notification.sendTestNotification }}</FormLink>
-			<FormLink @click="flushNotification">{{ i18n.ts._notification.flushNotification }}</FormLink>
-		</div>
-	</FormSection>
-	<FormSection>
-		<template #label>{{ i18n.ts.pushNotification }}</template>
+					<XNotificationConfig
+						:userLists="userLists"
+						:value="$i.notificationRecieveConfig[type] ?? { type: 'all' }"
+						:configurableTypes="onlyOnOrOffNotificationTypes.includes(type) ? ['all', 'never'] : undefined"
+						@update="(res) => updateReceiveConfig(type, res)"
+					/>
+				</MkFolder>
+			</div>
+		</FormSection>
+		<FormSection>
+			<div class="_gaps_m">
+				<FormLink @click="readAllNotifications">{{ i18n.ts.markAsReadAllNotifications }}</FormLink>
+			</div>
+		</FormSection>
+		<FormSection>
+			<div class="_gaps_m">
+				<FormLink @click="testNotification">{{ i18n.ts._notification.sendTestNotification }}</FormLink>
+				<FormLink @click="flushNotification">{{ i18n.ts._notification.flushNotification }}</FormLink>
+			</div>
+		</FormSection>
+		<FormSection>
+			<template #label>{{ i18n.ts.pushNotification }}</template>
 
-		<div class="_gaps_m">
-			<MkPushNotificationAllowButton ref="allowButton"/>
-			<MkSwitch :disabled="!pushRegistrationInServer" :modelValue="sendReadMessage" @update:modelValue="onChangeSendReadMessage">
-				<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
-				<template #caption>
-					<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
-						<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
-					</I18n>
-				</template>
-			</MkSwitch>
-		</div>
-	</FormSection>
-</div>
+			<div class="_gaps_m">
+				<MkPushNotificationAllowButton ref="allowButton"/>
+				<MkSwitch :disabled="!pushRegistrationInServer" :modelValue="sendReadMessage" @update:modelValue="onChangeSendReadMessage">
+					<template #label>{{ i18n.ts.sendPushNotificationReadMessage }}</template>
+					<template #caption>
+						<I18n :src="i18n.ts.sendPushNotificationReadMessageCaption">
+							<template #emptyPushNotificationMessage>{{ i18n.ts._notification.emptyPushNotificationMessage }}</template>
+						</I18n>
+					</template>
+				</MkSwitch>
+			</div>
+		</FormSection>
+	</div>
+</SearchMarker>
 </template>
 
 <script lang="ts" setup>

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

@@ -19,7 +19,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div class="_gaps_s">
 			<SearchMarker :keywords="['account', 'info']">
 				<MkFolder>
-					<template #icon><i class="ti ti-info-circle"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-info-circle"></i></SearchIcon></template>
 					<template #label><SearchLabel>{{ i18n.ts.accountInfo }}</SearchLabel></template>
 
 					<div class="_gaps_m">
@@ -33,23 +33,25 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<template #value><MkTime :time="$i.createdAt" mode="detail"/></template>
 						</MkKeyValue>
 
-						<MkFolder>
-							<template #icon><i class="ti ti-badges"></i></template>
-							<template #label><SearchLabel>{{ i18n.ts._role.policies }}</SearchLabel></template>
+						<SearchMarker :keywords="['role', 'policy']">
+							<MkFolder>
+								<template #icon><i class="ti ti-badges"></i></template>
+								<template #label><SearchLabel>{{ i18n.ts._role.policies }}</SearchLabel></template>
 
-							<div class="_gaps_s">
-								<div v-for="policy in Object.keys($i.policies)" :key="policy">
-									{{ policy }} ... {{ $i.policies[policy] }}
+								<div class="_gaps_s">
+									<div v-for="policy in Object.keys($i.policies)" :key="policy">
+										{{ policy }} ... {{ $i.policies[policy] }}
+									</div>
 								</div>
-							</div>
-						</MkFolder>
+							</MkFolder>
+						</SearchMarker>
 					</div>
 				</MkFolder>
 			</SearchMarker>
 
 			<SearchMarker :keywords="['roles']">
 				<MkFolder>
-					<template #icon><i class="ti ti-badges"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-badges"></i></SearchIcon></template>
 					<template #label><SearchLabel>{{ i18n.ts.rolesAssignedToMe }}</SearchLabel></template>
 
 					<MkRolePreview v-for="role in $i.roles" :key="role.id" :role="role" :forModeration="false"/>
@@ -58,7 +60,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<SearchMarker :keywords="['account', 'move', 'migration']">
 				<MkFolder>
-					<template #icon><i class="ti ti-plane"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-plane"></i></SearchIcon></template>
 					<template #label><SearchLabel>{{ i18n.ts.accountMigration }}</SearchLabel></template>
 
 					<XMigration/>
@@ -80,7 +82,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<SearchMarker :keywords="['account', 'close', 'delete']">
 				<MkFolder>
-					<template #icon><i class="ti ti-alert-triangle"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-alert-triangle"></i></SearchIcon></template>
 					<template #label><SearchLabel>{{ i18n.ts.closeAccount }}</SearchLabel></template>
 
 					<div class="_gaps_m">
@@ -94,7 +96,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<SearchMarker :keywords="['experimental', 'feature', 'flags']">
 				<MkFolder>
-					<template #icon><i class="ti ti-flask"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-flask"></i></SearchIcon></template>
 					<template #label><SearchLabel>{{ i18n.ts.experimentalFeatures }}</SearchLabel></template>
 
 					<div class="_gaps_m">
@@ -113,7 +115,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 			<SearchMarker :keywords="['developer', 'mode', 'debug']">
 				<MkFolder>
-					<template #icon><i class="ti ti-code"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-code"></i></SearchIcon></template>
 					<template #label><SearchLabel>{{ i18n.ts.developer }}</SearchLabel></template>
 
 					<div class="_gaps_m">
@@ -208,7 +210,6 @@ async function deleteAccount() {
 }
 
 function migrate() {
-	os.waiting();
 	migrateOldSettings();
 }
 

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

@@ -11,10 +11,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkFeatureBanner>
 
 		<div class="_gaps_s">
-			<SearchMarker :keywords="['general']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['general']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.general }}</SearchLabel></template>
-					<template #icon><i class="ti ti-settings"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-settings"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<SearchMarker :keywords="['language']">
@@ -108,10 +108,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['timeline', 'note']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['timeline', 'note']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts._settings.timelineAndNote }}</SearchLabel></template>
-					<template #icon><i class="ti ti-notes"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-notes"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<div class="_gaps_s">
@@ -338,10 +338,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['post', 'form']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['post', 'form']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.postForm }}</SearchLabel></template>
-					<template #icon><i class="ti ti-edit"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-edit"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<div class="_gaps_s">
@@ -400,10 +400,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['notification']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['notification']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.notifications }}</SearchLabel></template>
-					<template #icon><i class="ti ti-bell"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-bell"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<SearchMarker :keywords="['group']">
@@ -462,49 +462,51 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['chat', 'messaging']">
-				<MkFolder>
-					<template #label><SearchLabel>{{ i18n.ts.chat }}</SearchLabel></template>
-					<template #icon><i class="ti ti-messages"></i></template>
+			<template v-if="$i.policies.chatAvailability !== 'unavailable'">
+				<SearchMarker v-slot="slotProps" :keywords="['chat', 'messaging']">
+					<MkFolder :defaultOpen="slotProps.isParentOfTarget">
+						<template #label><SearchLabel>{{ i18n.ts.chat }}</SearchLabel></template>
+						<template #icon><SearchIcon><i class="ti ti-messages"></i></SearchIcon></template>
 
-					<div class="_gaps_s">
-						<SearchMarker :keywords="['show', 'sender', 'name']">
-							<MkPreferenceContainer k="chat.showSenderName">
-								<MkSwitch v-model="chatShowSenderName">
-									<template #label><SearchLabel>{{ i18n.ts._settings._chat.showSenderName }}</SearchLabel></template>
-								</MkSwitch>
-							</MkPreferenceContainer>
-						</SearchMarker>
+						<div class="_gaps_s">
+							<SearchMarker :keywords="['show', 'sender', 'name']">
+								<MkPreferenceContainer k="chat.showSenderName">
+									<MkSwitch v-model="chatShowSenderName">
+										<template #label><SearchLabel>{{ i18n.ts._settings._chat.showSenderName }}</SearchLabel></template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
 
-						<SearchMarker :keywords="['send', 'enter', 'newline']">
-							<MkPreferenceContainer k="chat.sendOnEnter">
-								<MkSwitch v-model="chatSendOnEnter">
-									<template #label><SearchLabel>{{ i18n.ts._settings._chat.sendOnEnter }}</SearchLabel></template>
-									<template #caption>
-										<div class="_gaps_s">
-											<div>
-												<b>{{ i18n.ts._settings.ifOn }}:</b>
-												<div>{{ i18n.ts._chat.send }}: Enter</div>
-												<div>{{ i18n.ts._chat.newline }}: Shift + Enter</div>
+							<SearchMarker :keywords="['send', 'enter', 'newline']">
+								<MkPreferenceContainer k="chat.sendOnEnter">
+									<MkSwitch v-model="chatSendOnEnter">
+										<template #label><SearchLabel>{{ i18n.ts._settings._chat.sendOnEnter }}</SearchLabel></template>
+										<template #caption>
+											<div class="_gaps_s">
+												<div>
+													<b>{{ i18n.ts._settings.ifOn }}:</b>
+													<div>{{ i18n.ts._chat.send }}: Enter</div>
+													<div>{{ i18n.ts._chat.newline }}: Shift + Enter</div>
+												</div>
+												<div>
+													<b>{{ i18n.ts._settings.ifOff }}:</b>
+													<div>{{ i18n.ts._chat.send }}: Ctrl + Enter</div>
+													<div>{{ i18n.ts._chat.newline }}: Enter</div>
+												</div>
 											</div>
-											<div>
-												<b>{{ i18n.ts._settings.ifOff }}:</b>
-												<div>{{ i18n.ts._chat.send }}: Ctrl + Enter</div>
-												<div>{{ i18n.ts._chat.newline }}: Enter</div>
-											</div>
-										</div>
-									</template>
-								</MkSwitch>
-							</MkPreferenceContainer>
-						</SearchMarker>
-					</div>
-				</MkFolder>
-			</SearchMarker>
+										</template>
+									</MkSwitch>
+								</MkPreferenceContainer>
+							</SearchMarker>
+						</div>
+					</MkFolder>
+				</SearchMarker>
+			</template>
 
-			<SearchMarker :keywords="['accessibility']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['accessibility']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.accessibility }}</SearchLabel></template>
-					<template #icon><i class="ti ti-accessible"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-accessible"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<MkFeatureBanner icon="/client-assets/mens_room_3d.png" color="#0011ff">
@@ -611,17 +613,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['performance']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['performance']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.performance }}</SearchLabel></template>
-					<template #icon><i class="ti ti-battery-vertical-eco"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-battery-vertical-eco"></i></SearchIcon></template>
 
 					<div class="_gaps_s">
 						<SearchMarker :keywords="['blur']">
 							<MkPreferenceContainer k="useBlurEffect">
 								<MkSwitch v-model="useBlurEffect">
 									<template #label><SearchLabel>{{ i18n.ts.useBlurEffect }}</SearchLabel></template>
-									<template #caption><SearchLabel>{{ i18n.ts.turnOffToImprovePerformance }}</SearchLabel></template>
+									<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
 								</MkSwitch>
 							</MkPreferenceContainer>
 						</SearchMarker>
@@ -630,7 +632,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkPreferenceContainer k="useBlurEffectForModal">
 								<MkSwitch v-model="useBlurEffectForModal">
 									<template #label><SearchLabel>{{ i18n.ts.useBlurEffectForModal }}</SearchLabel></template>
-									<template #caption><SearchLabel>{{ i18n.ts.turnOffToImprovePerformance }}</SearchLabel></template>
+									<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
 								</MkSwitch>
 							</MkPreferenceContainer>
 						</SearchMarker>
@@ -639,7 +641,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkPreferenceContainer k="useStickyIcons">
 								<MkSwitch v-model="useStickyIcons">
 									<template #label><SearchLabel>{{ i18n.ts._settings.useStickyIcons }}</SearchLabel></template>
-									<template #caption><SearchLabel>{{ i18n.ts.turnOffToImprovePerformance }}</SearchLabel></template>
+									<template #caption><SearchKeyword>{{ i18n.ts.turnOffToImprovePerformance }}</SearchKeyword></template>
 								</MkSwitch>
 							</MkPreferenceContainer>
 						</SearchMarker>
@@ -647,10 +649,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['datasaver']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['datasaver']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.dataSaver }}</SearchLabel></template>
-					<template #icon><i class="ti ti-antenna-bars-3"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-antenna-bars-3"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<MkInfo>{{ i18n.ts.reloadRequiredToApplySettings }}</MkInfo>
@@ -681,10 +683,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</MkFolder>
 			</SearchMarker>
 
-			<SearchMarker :keywords="['other']">
-				<MkFolder>
+			<SearchMarker v-slot="slotProps" :keywords="['other']">
+				<MkFolder :defaultOpen="slotProps.isParentOfTarget">
 					<template #label><SearchLabel>{{ i18n.ts.other }}</SearchLabel></template>
-					<template #icon><i class="ti ti-settings-cog"></i></template>
+					<template #icon><SearchIcon><i class="ti ti-settings-cog"></i></SearchIcon></template>
 
 					<div class="_gaps_m">
 						<div class="_gaps_s">
@@ -861,12 +863,13 @@ import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 import { globalEvents } from '@/events.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { instance } from '@/instance.js';
+import { ensureSignin } from '@/i.js';
 import MkDisableSection from '@/components/MkDisableSection.vue';
-
-// Sharkey imports
 import { searchEngineMap } from '@/utility/search-engine-map.js';
 import { worksOnInstance } from '@/utility/favicon-dot.js';
 
+const $i = ensureSignin();
+
 const lang = ref(miLocalStorage.getItem('lang'));
 const dataSaver = ref(prefer.s.dataSaver);
 

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

@@ -92,19 +92,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSwitch>
 		</SearchMarker>
 
-		<FormSection>
-			<SearchMarker :keywords="['chat']">
-				<MkSelect v-model="chatScope" @update:modelValue="save()">
-					<template #label><SearchLabel>{{ i18n.ts._chat.chatAllowedUsers }}</SearchLabel></template>
-					<option value="everyone">{{ i18n.ts._chat._chatAllowedUsers.everyone }}</option>
-					<option value="followers">{{ i18n.ts._chat._chatAllowedUsers.followers }}</option>
-					<option value="following">{{ i18n.ts._chat._chatAllowedUsers.following }}</option>
-					<option value="mutual">{{ i18n.ts._chat._chatAllowedUsers.mutual }}</option>
-					<option value="none">{{ i18n.ts._chat._chatAllowedUsers.none }}</option>
-					<template #caption>{{ i18n.ts._chat.chatAllowedUsers_note }}</template>
-				</MkSelect>
-			</SearchMarker>
-		</FormSection>
+		<SearchMarker :keywords="['chat']">
+			<FormSection>
+				<template #label><SearchLabel>{{ i18n.ts.chat }}</SearchLabel></template>
+
+				<div class="_gaps_m">
+					<MkInfo v-if="$i.policies.chatAvailability === 'unavailable'">{{ i18n.ts._chat.chatNotAvailableForThisAccountOrServer }}</MkInfo>
+					<SearchMarker :keywords="['chat']">
+						<MkSelect v-model="chatScope" @update:modelValue="save()">
+							<template #label><SearchLabel>{{ i18n.ts._chat.chatAllowedUsers }}</SearchLabel></template>
+							<option value="everyone">{{ i18n.ts._chat._chatAllowedUsers.everyone }}</option>
+							<option value="followers">{{ i18n.ts._chat._chatAllowedUsers.followers }}</option>
+							<option value="following">{{ i18n.ts._chat._chatAllowedUsers.following }}</option>
+							<option value="mutual">{{ i18n.ts._chat._chatAllowedUsers.mutual }}</option>
+							<option value="none">{{ i18n.ts._chat._chatAllowedUsers.none }}</option>
+							<template #caption>{{ i18n.ts._chat.chatAllowedUsers_note }}</template>
+						</MkSelect>
+					</SearchMarker>
+				</div>
+			</FormSection>
+		</SearchMarker>
 
 		<SearchMarker :keywords="['lockdown']">
 			<FormSection>

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

@@ -211,15 +211,12 @@ import FormLink from '@/components/form/link.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkThemePreview from '@/components/MkThemePreview.vue';
 import { getBuiltinThemesRef, getThemesRef } from '@/theme.js';
-import { selectFile } from '@/utility/select-file.js';
 import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
 import { store } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { uniqueBy } from '@/utility/array.js';
 import { definePage } from '@/page.js';
-import { miLocalStorage } from '@/local-storage.js';
-import { reloadAsk } from '@/utility/reload-ask.js';
 import { prefer } from '@/preferences.js';
 
 const installedThemes = getThemesRef();

packages/frontend/src/pages/timeline.vue

@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div ref="rootEl" class="_pageScrollable">
 	<MkStickyContainer>
-		<template #header><MkPageHeader v-model:tab="src" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin" :displayMyAvatar="true"/></template>
+		<template #header><MkPageHeader v-model:tab="src" :displayMyAvatar="true" :actions="headerActions" :tabs="$i ? headerTabs : headerTabsWhenNotLogin"/></template>
 		<MkSpacer :contentMax="800">
 			<MkInfo v-if="isBasicTimeline(src) && !store.r.timelineTutorials.value[src]" style="margin-bottom: var(--MI-margin);" closable @close="closeTutorial()">
 				{{ i18n.ts._timelineDescription[src] }}

packages/frontend/src/pref-migrate.ts

@@ -11,14 +11,19 @@ import { prefer } from '@/preferences.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { unisonReload } from '@/utility/unison-reload.js';
+import * as os from '@/os.js';
+import { i18n } from '@/i18n.js';
 
 // TODO: そのうち消す
 export function migrateOldSettings() {
+	os.waiting(i18n.ts.settingsMigrating);
+
 	store.loaded.then(async () => {
-		const themes = await misskeyApi('i/registry/get', { scope: ['client'], key: 'themes' }).catch(() => []) as Theme[];
-		if (themes.length > 0) {
-			prefer.commit('themes', themes);
-		}
+		misskeyApi('i/registry/get', { scope: ['client'], key: 'themes' }).catch(() => []).then((themes: Theme[]) => {
+			if (themes.length > 0) {
+				prefer.commit('themes', themes);
+			}
+		});
 
 		const plugins = ColdDeviceStorage.get('plugins');
 		prefer.commit('plugins', plugins.map(p => ({
@@ -154,6 +159,6 @@ export function migrateOldSettings() {
 
 		window.setTimeout(() => {
 			unisonReload();
-		}, 5000);
+		}, 10000);
 	});
 }

packages/frontend/src/router.definition.ts

@@ -16,6 +16,10 @@ export const page = (loader: AsyncComponentLoader) => defineAsyncComponent({
 	errorComponent: MkError,
 });
 
+function chatPage(...args: Parameters<typeof page>) {
+	return $i?.policies.chatAvailability !== 'unavailable' ? page(...args) : page(() => import('@/pages/not-found.vue'));
+}
+
 export const ROUTE_DEF = [{
 	path: '/@:username/pages/:pageName(*)',
 	component: page(() => import('@/pages/page.vue')),
@@ -42,19 +46,19 @@ export const ROUTE_DEF = [{
 	component: page(() => import('@/pages/clip.vue')),
 }, {
 	path: '/chat',
-	component: page(() => import('@/pages/chat/home.vue')),
+	component: chatPage(() => import('@/pages/chat/home.vue')),
 	loginRequired: true,
 }, {
 	path: '/chat/user/:userId',
-	component: page(() => import('@/pages/chat/room.vue')),
+	component: chatPage(() => import('@/pages/chat/room.vue')),
 	loginRequired: true,
 }, {
 	path: '/chat/room/:roomId',
-	component: page(() => import('@/pages/chat/room.vue')),
+	component: chatPage(() => import('@/pages/chat/room.vue')),
 	loginRequired: true,
 }, {
 	path: '/chat/messages/:messageId',
-	component: page(() => import('@/pages/chat/message.vue')),
+	component: chatPage(() => import('@/pages/chat/message.vue')),
 	loginRequired: true,
 }, {
 	path: '/instance-info/:host',

packages/frontend/src/signout.ts

@@ -19,8 +19,10 @@ export async function signout() {
 	localStorage.clear();
 	defaultMemoryStorage.clear();
 
-	const idbPromises = ['MisskeyClient', 'keyval-store'].map((name, i, arr) => new Promise((res, rej) => {
-		indexedDB.deleteDatabase(name);
+	const idbPromises = ['MisskeyClient', 'keyval-store'].map((name, i, arr) => new Promise<void>((res, rej) => {
+		const delidb = indexedDB.deleteDatabase(name);
+		delidb.onsuccess = () => res();
+		delidb.onerror = e => rej(e);
 	}));
 
 	await Promise.all(idbPromises);

packages/frontend/src/ui/_common_/common.vue

@@ -4,6 +4,59 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
+>
+	<div
+		v-if="drawerMenuShowing"
+		:class="$style.menuDrawerBg"
+		class="_modalBg"
+		@click="drawerMenuShowing = false"
+		@touchstart.passive="drawerMenuShowing = false"
+	></div>
+</Transition>
+
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawer_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawer_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_menuDrawer_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_menuDrawer_leaveTo : ''"
+>
+	<div v-if="drawerMenuShowing" :class="$style.menuDrawer">
+		<XDrawerMenu/>
+	</div>
+</Transition>
+
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
+>
+	<div
+		v-if="widgetsShowing"
+		:class="$style.widgetsDrawerBg"
+		class="_modalBg"
+		@click="widgetsShowing = false"
+		@touchstart.passive="widgetsShowing = false"
+	></div>
+</Transition>
+
+<Transition
+	:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterActive : ''"
+	:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
+	:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
+	:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
+>
+	<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
+		<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button>
+		<XWidgets/>
+	</div>
+</Transition>
+
 <component
 	:is="popup.component"
 	v-for="popup in popups"
@@ -61,11 +114,16 @@ import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
 import { globalEvents } from '@/events.js';
+import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import { store } from '@/store.js';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
 const XUpload = defineAsyncComponent(() => import('./upload.vue'));
 const SkOneko = defineAsyncComponent(() => import('@/components/SkOneko.vue'));
+const XWidgets = defineAsyncComponent(() => import('./widgets.vue'));
+
+const drawerMenuShowing = defineModel<boolean>('drawerMenuShowing');
+const widgetsShowing = defineModel<boolean>('widgetsShowing');
 
 const dev = _DEV_;
 
@@ -108,6 +166,50 @@ function getPointerEvents() {
 </script>
 
 <style lang="scss" module>
+.transition_menuDrawerBg_enterActive,
+.transition_menuDrawerBg_leaveActive {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_menuDrawerBg_enterFrom,
+.transition_menuDrawerBg_leaveTo {
+	opacity: 0;
+}
+
+.transition_menuDrawer_enterActive,
+.transition_menuDrawer_leaveActive {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_menuDrawer_enterFrom,
+.transition_menuDrawer_leaveTo {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
+.transition_widgetsDrawerBg_enterActive,
+.transition_widgetsDrawerBg_leaveActive {
+	opacity: 1;
+	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_widgetsDrawerBg_enterFrom,
+.transition_widgetsDrawerBg_leaveTo {
+	opacity: 0;
+}
+
+.transition_widgetsDrawer_enterActive,
+.transition_widgetsDrawer_leaveActive {
+	opacity: 1;
+	transform: translateX(0);
+	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+.transition_widgetsDrawer_enterFrom,
+.transition_widgetsDrawer_leaveTo {
+	opacity: 0;
+	transform: translateX(-240px);
+}
+
 .transition_notification_move,
 .transition_notification_enterActive,
 .transition_notification_leaveActive {
@@ -122,6 +224,54 @@ function getPointerEvents() {
 	transform: translateX(-250px);
 }
 
+.menuDrawerBg {
+	z-index: 1001;
+}
+
+.menuDrawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	height: 100dvh;
+	width: 240px;
+	box-sizing: border-box;
+	contain: strict;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--MI_THEME-navBg);
+}
+
+.widgetsDrawerBg {
+	z-index: 1001;
+}
+
+.widgetsDrawer {
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 1001;
+	width: 310px;
+	height: 100dvh;
+	padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
+	box-sizing: border-box;
+	overflow: auto;
+	overscroll-behavior: contain;
+	background: var(--MI_THEME-bg);
+}
+
+.widgetsCloseButton {
+	padding: 8px;
+	display: block;
+	margin: 0 auto;
+}
+
+@media (min-width: 370px) {
+	.widgetsCloseButton {
+		display: none;
+	}
+}
+
 .notifications {
 	position: fixed;
 	z-index: 3900000;

packages/frontend/src/ui/_common_/mobile-footer-menu.vue

@@ -0,0 +1,144 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div ref="rootEl" :class="$style.root">
+	<button :class="$style.item" class="_button" @click="drawerMenuShowing = true">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.itemIndicator" class="_blink"><i class="_indicatorCircle"></i></span>
+		</div>
+	</button>
+
+	<button :class="$style.item" class="_button" @click="mainRouter.push('/')">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-home"></i>
+		</div>
+	</button>
+
+	<button :class="$style.item" class="_button" @click="mainRouter.push('/my/notifications')">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-bell"></i>
+			<span v-if="$i?.hasUnreadNotification" :class="$style.itemIndicator" class="_blink">
+				<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
+			</span>
+		</div>
+	</button>
+
+	<button :class="$style.item" class="_button" @click="widgetsShowing = true">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-apps"></i>
+		</div>
+	</button>
+
+	<button :class="[$style.item, $style.post]" class="_button" @click="os.post()">
+		<div :class="$style.itemInner">
+			<i :class="$style.itemIcon" class="ti ti-pencil"></i>
+		</div>
+	</button>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, useTemplateRef, watch } from 'vue';
+import { $i } from '@/i.js';
+import * as os from '@/os.js';
+import { mainRouter } from '@/router.js';
+import { navbarItemDef } from '@/navbar.js';
+
+const drawerMenuShowing = defineModel<boolean>('drawerMenuShowing');
+const widgetsShowing = defineModel<boolean>('widgetsShowing');
+
+const rootEl = useTemplateRef('rootEl');
+
+const menuIndicated = computed(() => {
+	for (const def in navbarItemDef) {
+		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
+		if (navbarItemDef[def].indicated) return true;
+	}
+	return false;
+});
+
+const rootElHeight = ref(0);
+
+watch(rootEl, () => {
+	if (rootEl.value) {
+		rootElHeight.value = rootEl.value.offsetHeight;
+		window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
+	} else {
+		rootElHeight.value = 0;
+		window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
+	}
+}, {
+	immediate: true,
+});
+</script>
+
+<style lang="scss" module>
+.root {
+	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
+	grid-gap: 8px;
+	width: 100%;
+	box-sizing: border-box;
+	background: var(--MI_THEME-bg);
+	border-top: solid 0.5px var(--MI_THEME-divider);
+}
+
+.item {
+	&.post {
+		.itemInner {
+			background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
+			color: var(--MI_THEME-fgOnAccent);
+
+			&:hover {
+				background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			}
+
+			&:active {
+				background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
+			}
+		}
+	}
+}
+
+.itemInner {
+	position: relative;
+	padding: 0;
+	aspect-ratio: 1;
+	width: 100%;
+	max-width: 50px;
+	margin: auto;
+	align-content: center;
+	border-radius: 100%;
+	background: var(--MI_THEME-panel);
+	color: var(--MI_THEME-fg);
+
+	&:hover {
+		background: var(--MI_THEME-panelHighlight);
+	}
+
+	&:active {
+		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
+	}
+}
+
+.itemIcon {
+	font-size: 14px;
+}
+
+.itemIndicator {
+	position: absolute;
+	top: 0;
+	left: 0;
+	color: var(--MI_THEME-indicator);
+	font-size: 16px;
+
+	&:has(.itemIndicateValueIcon) {
+		animation: none;
+		font-size: 12px;
+	}
+}
+</style>

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkA :class="$style.item" :activeClass="$style.active" to="/" exact>
 			<i :class="$style.itemIcon" class="ti ti-home ti-fw"></i><span :class="$style.itemText">{{ i18n.ts.timeline }}</span>
 		</MkA>
-		<template v-for="item in menu">
+		<template v-for="item in prefer.r.menu.value">
 			<div v-if="item === '-'" :class="$style.divider"></div>
 			<component :is="navbarItemDef[item].to ? 'MkA' : 'button'" v-else-if="navbarItemDef[item] && (navbarItemDef[item].show !== false)" class="_button" :class="[$style.item, { [$style.active]: navbarItemDef[item].active }]" :activeClass="$style.active" :to="navbarItemDef[item].to" v-on="navbarItemDef[item].action ? { click: navbarItemDef[item].action } : {}">
 				<i class="ti-fw" :class="[$style.itemIcon, navbarItemDef[item].icon]"></i><span :class="$style.itemText">{{ navbarItemDef[item].title }}</span>
@@ -49,7 +49,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, toRef } from 'vue';
+import { computed, defineAsyncComponent } from 'vue';
 import { openInstanceMenu } from './common.js';
 import * as os from '@/os.js';
 import { navbarItemDef } from '@/navbar.js';
@@ -59,10 +59,9 @@ import { instance } from '@/instance.js';
 import { openAccountMenu as openAccountMenu_ } from '@/accounts.js';
 import { $i } from '@/i.js';
 
-const menu = toRef(prefer.s, 'menu');
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
+		if (prefer.r.menu.value.includes(def)) continue;
 		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;

packages/frontend/src/ui/_common_/navbar.vue

@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkA v-tooltip.noDelay.right="i18n.ts.timeline" :class="$style.item" :activeClass="$style.active" to="/" exact>
 				<i :class="$style.itemIcon" class="ti ti-home ti-fw" style="viewTransitionName: navbar-homeIcon;"></i><span :class="$style.itemText">{{ i18n.ts.timeline }}</span>
 			</MkA>
-			<template v-for="item in menu">
+			<template v-for="item in prefer.r.menu.value">
 				<div v-if="item === '-'" :class="$style.divider"></div>
 				<component
 					:is="navbarItemDef[item].to ? 'MkA' : 'button'"
@@ -120,10 +120,9 @@ const iconOnly = computed(() => {
 	return forceIconOnly.value || (store.r.menuDisplay.value === 'sideIcon');
 });
 
-const menu = computed(() => prefer.s.menu);
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
-		if (menu.value.includes(def)) continue;
+		if (prefer.r.menu.value.includes(def)) continue;
 		if (navbarItemDef[def].indicated) return true;
 	}
 	return false;

packages/frontend/src/ui/deck.vue

@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<XAnnouncements v-if="$i"/>
 		<XStatusBars/>
 		<div :class="$style.columnsWrapper">
-		  <!-- passive: https://bugs.webkit.org/show_bug.cgi?id=281300 -->
+			<!-- passive: https://bugs.webkit.org/show_bug.cgi?id=281300 -->
 			<div ref="columnsEl" :class="[$style.columns, { [$style.center]: prefer.r['deck.columnAlign'].value === 'center', [$style.snapScroll]: snapScroll }]" @contextmenu.self.prevent="onContextmenu" @wheel.passive.self="onWheel">
 				<!-- sectionを利用しているのは、deck.vue側でcolumnに対してfirst-of-typeを効かせるため -->
 				<section
@@ -73,58 +73,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 		<XNavbarH v-if="!isMobile && prefer.r['deck.navbarPosition'].value === 'bottom'"/>
 
-		<div v-if="isMobile" :class="$style.nav">
-			<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
-			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
-			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
-				<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
-				<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
-					<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
-				</span>
-			</button>
-			<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
-		</div>
+		<XMobileFooterMenu v-if="isMobile" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 	</div>
 
-	<Transition
-		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
-		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
-		:enterFromClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
-		:leaveToClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
-	>
-		<div
-			v-if="drawerMenuShowing"
-			:class="$style.menuBg"
-			class="_modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</Transition>
-
-	<Transition
-		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawer_enterActive : ''"
-		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawer_leaveActive : ''"
-		:enterFromClass="prefer.s.animation ? $style.transition_menuDrawer_enterFrom : ''"
-		:leaveToClass="prefer.s.animation ? $style.transition_menuDrawer_leaveTo : ''"
-	>
-		<div v-if="drawerMenuShowing" :class="$style.menu">
-			<XDrawerMenu/>
-		</div>
-	</Transition>
-
-	<XCommon/>
+	<XCommon v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent, ref, useTemplateRef } from 'vue';
+import { defineAsyncComponent, ref, useTemplateRef } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XNavbarH from '@/ui/_common_/navbar-h.vue';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
+import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
 import * as os from '@/os.js';
-import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/i.js';
 import { i18n } from '@/i18n.js';
 import { deviceKind } from '@/utility/device-kind.js';
@@ -179,6 +142,7 @@ window.addEventListener('resize', () => {
 const snapScroll = ref(deviceKind === 'smartphone' || deviceKind === 'tablet');
 const withWallpaper = prefer.s['deck.wallpaper'] != null;
 const drawerMenuShowing = ref(false);
+const widgetsShowing = ref(false);
 const gap = prefer.r['deck.columnGap'];
 
 /*
@@ -188,14 +152,6 @@ watch(route, () => {
 });
 */
 
-const menuIndicated = computed(() => {
-	if ($i == null) return false;
-	for (const def in navbarItemDef) {
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
 function showSettings() {
 	os.pageWindow('/settings/deck');
 }
@@ -235,8 +191,8 @@ function pointerEvent(ev: PointerEvent) {
 window.document.addEventListener('pointerdown', pointerEvent, { passive: true });
 
 function onWheel(ev: WheelEvent) {
-  // WheelEvent はマウスからしか発火しないのでスナップスクロールは無効化する
-  snapScroll.value = false;
+	// WheelEvent はマウスからしか発火しないのでスナップスクロールは無効化する
+	snapScroll.value = false;
 	if (ev.deltaX === 0 && columnsEl.value != null) {
 		columnsEl.value.scrollLeft += ev.deltaY;
 	}
@@ -265,28 +221,6 @@ if (prefer.s['deck.wallpaper'] != null) {
 </script>
 
 <style lang="scss" module>
-.transition_menuDrawerBg_enterActive,
-.transition_menuDrawerBg_leaveActive {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transition_menuDrawerBg_enterFrom,
-.transition_menuDrawerBg_leaveTo {
-	opacity: 0;
-}
-
-.transition_menuDrawer_enterActive,
-.transition_menuDrawer_leaveActive {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transition_menuDrawer_enterFrom,
-.transition_menuDrawer_leaveTo {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
 .root {
 	$nav-hide-threshold: 650px; // TODO: どこかに集約したい
 
@@ -318,6 +252,9 @@ if (prefer.s['deck.wallpaper'] != null) {
 	flex: 1;
 	display: flex;
 	flex-direction: row;
+
+	// これがないと狭い画面でマージンが広いデッキを表示したときにナビゲーションフッターが画面の外に追いやられて操作不能になる場合がある
+	min-height: 0;
 }
 
 .columns {
@@ -415,90 +352,4 @@ if (prefer.s['deck.wallpaper'] != null) {
 .bottomMenuRight {
 	margin-left: auto;
 }
-
-.menuBg {
-	z-index: 1001;
-}
-
-.menu {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
-	height: 100dvh;
-	width: 240px;
-	box-sizing: border-box;
-	contain: strict;
-	overflow: auto;
-	overscroll-behavior: contain;
-	background: var(--MI_THEME-navBg);
-}
-
-.nav {
-	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr;
-	grid-gap: 8px;
-	width: 100%;
-	box-sizing: border-box;
-	-webkit-backdrop-filter: var(--MI-blur, blur(32px));
-	backdrop-filter: var(--MI-blur, blur(32px));
-	background-color: var(--MI_THEME-header);
-	border-top: solid 0.5px var(--MI_THEME-divider);
-}
-
-.navButton {
-	position: relative;
-	padding: 0;
-	height: 32px;
-	width: 100%;
-	max-width: 60px;
-	margin: auto;
-	border-radius: var(--MI-radius-lg);
-	background: transparent;
-	color: var(--MI_THEME-fg);
-
-	&:hover {
-		color: var(--MI_THEME-accent);
-	}
-
-	&:active {
-		color: var(--MI_THEME-accent);
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
-	}
-}
-
-.postButton {
-	composes: navButton;
-	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
-	color: var(--MI_THEME-fgOnAccent);
-
-	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-		color: var(--MI_THEME-fgOnAccent);
-	}
-
-	&:active {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-		color: var(--MI_THEME-fgOnAccent);
-	}
-}
-
-.navButtonIcon {
-	font-size: 16px;
-	vertical-align: middle;
-}
-
-.navButtonIndicator {
-	position: absolute;
-	top: 0;
-	left: 0;
-	color: var(--MI_THEME-indicator);
-	font-size: 16px;
-
-	&:has(.itemIndicateValueIcon) {
-		animation: none;
-		font-size: 12px;
-	}
-}
 </style>

packages/frontend/src/ui/deck/column.vue

@@ -49,10 +49,11 @@ import { updateColumn, swapLeftColumn, swapRightColumn, swapUpColumn, swapDownCo
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
+import { DI } from '@/di.js';
 
 provide('shouldHeaderThin', true);
 provide('shouldOmitHeaderTitle', true);
-provide('forceSpacerMin', true);
+provide(DI.forceSpacerMin, true);
 
 const withWallpaper = prefer.s['deck.wallpaper'] != null;
 

packages/frontend/src/ui/universal.vue

@@ -15,90 +15,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 		<StackingRouterView v-if="prefer.s['experimental.stackingRouterView']" :class="$style.content"/>
 		<RouterView v-else :class="$style.content"/>
-		<div v-if="isMobile" ref="navFooter" :class="$style.nav">
-			<button :class="$style.navButton" class="_button" @click="drawerMenuShowing = true"><i :class="$style.navButtonIcon" class="ti ti-menu-2"></i><span v-if="menuIndicated" :class="$style.navButtonIndicator" class="_blink"><i class="_indicatorCircle"></i></span></button>
-			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/')"><i :class="$style.navButtonIcon" class="ti ti-home"></i></button>
-			<button :class="$style.navButton" class="_button" @click="mainRouter.push('/my/notifications')">
-				<i :class="$style.navButtonIcon" class="ti ti-bell"></i>
-				<span v-if="$i?.hasUnreadNotification" :class="$style.navButtonIndicator" class="_blink">
-					<span class="_indicateCounter" :class="$style.itemIndicateValueIcon">{{ $i.unreadNotificationsCount > 99 ? '99+' : $i.unreadNotificationsCount }}</span>
-				</span>
-			</button>
-			<button :class="$style.navButton" class="_button" @click="widgetsShowing = true"><i :class="$style.navButtonIcon" class="ti ti-apps"></i></button>
-			<button :class="$style.postButton" class="_button" @click="os.post()"><i :class="$style.navButtonIcon" class="ti ti-pencil"></i></button>
-		</div>
+		<XMobileFooterMenu v-if="isMobile" ref="navFooter" v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 	</div>
 
 	<div v-if="isDesktop && !pageMetadata?.needWideArea" :class="$style.widgets">
 		<XWidgets/>
 	</div>
 
-	<Transition
-		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterActive : ''"
-		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveActive : ''"
-		:enterFromClass="prefer.s.animation ? $style.transition_menuDrawerBg_enterFrom : ''"
-		:leaveToClass="prefer.s.animation ? $style.transition_menuDrawerBg_leaveTo : ''"
-	>
-		<div
-			v-if="drawerMenuShowing"
-			:class="$style.menuDrawerBg"
-			class="_modalBg"
-			@click="drawerMenuShowing = false"
-			@touchstart.passive="drawerMenuShowing = false"
-		></div>
-	</Transition>
-
-	<Transition
-		:enterActiveClass="prefer.s.animation ? $style.transition_menuDrawer_enterActive : ''"
-		:leaveActiveClass="prefer.s.animation ? $style.transition_menuDrawer_leaveActive : ''"
-		:enterFromClass="prefer.s.animation ? $style.transition_menuDrawer_enterFrom : ''"
-		:leaveToClass="prefer.s.animation ? $style.transition_menuDrawer_leaveTo : ''"
-	>
-		<div v-if="drawerMenuShowing" :class="$style.menuDrawer">
-			<XDrawerMenu/>
-		</div>
-	</Transition>
-
-	<Transition
-		:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterActive : ''"
-		:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveActive : ''"
-		:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_enterFrom : ''"
-		:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawerBg_leaveTo : ''"
-	>
-		<div
-			v-if="widgetsShowing"
-			:class="$style.widgetsDrawerBg"
-			class="_modalBg"
-			@click="widgetsShowing = false"
-			@touchstart.passive="widgetsShowing = false"
-		></div>
-	</Transition>
-
-	<Transition
-		:enterActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterActive : ''"
-		:leaveActiveClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveActive : ''"
-		:enterFromClass="prefer.s.animation ? $style.transition_widgetsDrawer_enterFrom : ''"
-		:leaveToClass="prefer.s.animation ? $style.transition_widgetsDrawer_leaveTo : ''"
-	>
-		<div v-if="widgetsShowing" :class="$style.widgetsDrawer">
-			<button class="_button" :class="$style.widgetsCloseButton" @click="widgetsShowing = false"><i class="ti ti-x"></i></button>
-			<XWidgets/>
-		</div>
-	</Transition>
-
-	<XCommon/>
+	<XCommon v-model:drawerMenuShowing="drawerMenuShowing" v-model:widgetsShowing="widgetsShowing"/>
 </div>
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue';
+import { defineAsyncComponent, provide, onMounted, computed, ref } from 'vue';
 import { instanceName } from '@@/js/config.js';
 import { isLink } from '@@/js/is-link.js';
 import XCommon from './_common_/common.vue';
 import type { PageMetadata } from '@/page.js';
-import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
+import XMobileFooterMenu from '@/ui/_common_/mobile-footer-menu.vue';
+import XPreferenceRestore from '@/ui/_common_/PreferenceRestore.vue';
 import * as os from '@/os.js';
-import { navbarItemDef } from '@/navbar.js';
 import { i18n } from '@/i18n.js';
 import { $i } from '@/i.js';
 import { provideMetadataReceiver, provideReactiveMetadata } from '@/page.js';
@@ -109,11 +45,10 @@ import { prefer } from '@/preferences.js';
 import { shouldSuggestRestoreBackup } from '@/preferences/utility.js';
 import { DI } from '@/di.js';
 
-const XWidgets = defineAsyncComponent(() => import('./universal.widgets.vue'));
+const XWidgets = defineAsyncComponent(() => import('./_common_/widgets.vue'));
 const XSidebar = defineAsyncComponent(() => import('@/ui/_common_/navbar.vue'));
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
-const XPreferenceRestore = defineAsyncComponent(() => import('@/ui/_common_/PreferenceRestore.vue'));
 
 const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
@@ -129,7 +64,6 @@ window.addEventListener('resize', () => {
 
 const pageMetadata = ref<null | PageMetadata>(null);
 const widgetsShowing = ref(false);
-const navFooter = useTemplateRef('navFooter');
 
 provide(DI.router, mainRouter);
 provideMetadataReceiver((metadataGetter) => {
@@ -145,14 +79,6 @@ provideMetadataReceiver((metadataGetter) => {
 });
 provideReactiveMetadata(pageMetadata);
 
-const menuIndicated = computed(() => {
-	for (const def in navbarItemDef) {
-		if (def === 'notifications') continue; // 通知は下にボタンとして表示されてるから
-		if (navbarItemDef[def].indicated) return true;
-	}
-	return false;
-});
-
 const drawerMenuShowing = ref(false);
 
 mainRouter.on('change', () => {
@@ -192,70 +118,12 @@ const onContextmenu = (ev) => {
 		},
 	}], ev);
 };
-
-const navFooterHeight = ref(0);
-
-watch(navFooter, () => {
-	if (navFooter.value) {
-		navFooterHeight.value = navFooter.value.offsetHeight;
-		window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)');
-	} else {
-		navFooterHeight.value = 0;
-		window.document.body.style.setProperty('--MI-minBottomSpacing', '0px');
-	}
-}, {
-	immediate: true,
-});
 </script>
 
 <style lang="scss" module>
 $ui-font-size: 1em; // TODO: どこかに集約したい
 $widgets-hide-threshold: 1090px;
 
-.transition_menuDrawerBg_enterActive,
-.transition_menuDrawerBg_leaveActive {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transition_menuDrawerBg_enterFrom,
-.transition_menuDrawerBg_leaveTo {
-	opacity: 0;
-}
-
-.transition_menuDrawer_enterActive,
-.transition_menuDrawer_leaveActive {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transition_menuDrawer_enterFrom,
-.transition_menuDrawer_leaveTo {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
-.transition_widgetsDrawerBg_enterActive,
-.transition_widgetsDrawerBg_leaveActive {
-	opacity: 1;
-	transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transition_widgetsDrawerBg_enterFrom,
-.transition_widgetsDrawerBg_leaveTo {
-	opacity: 0;
-}
-
-.transition_widgetsDrawer_enterActive,
-.transition_widgetsDrawer_leaveActive {
-	opacity: 1;
-	transform: translateX(0);
-	transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1);
-}
-.transition_widgetsDrawer_enterFrom,
-.transition_widgetsDrawer_leaveTo {
-	opacity: 0;
-	transform: translateX(-240px);
-}
-
 .root {
 	height: 100dvh;
 	overflow: clip;
@@ -282,91 +150,6 @@ $widgets-hide-threshold: 1090px;
 	min-height: 0;
 }
 
-.nav {
-	padding: 12px 12px max(12px, env(safe-area-inset-bottom, 0px)) 12px;
-	display: grid;
-	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-	grid-gap: 8px;
-	width: 100%;
-	box-sizing: border-box;
-	background: var(--MI_THEME-bg);
-	border-top: solid 0.5px var(--MI_THEME-divider);
-}
-
-.navButton {
-	position: relative;
-	padding: 0;
-	height: 32px;
-	width: 100%;
-	max-width: 60px;
-	margin: auto;
-	border-radius: var(--MI-radius-lg);
-	background: transparent;
-	color: var(--MI_THEME-fg);
-
-	&:hover {
-		background: var(--MI_THEME-panelHighlight);
-		color: var(--MI_THEME-accent);
-	}
-
-	&:active {
-		background: hsl(from var(--MI_THEME-panel) h s calc(l - 2));
-		color: var(--MI_THEME-accent);
-	}
-}
-
-.postButton {
-	composes: navButton;
-	background: linear-gradient(90deg, var(--MI_THEME-buttonGradateA), var(--MI_THEME-buttonGradateB));
-	color: var(--MI_THEME-fgOnAccent);
-
-	&:hover {
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-		color: var(--MI_THEME-fgOnAccent);
-	}
-
-	&:active {
-		color: var(--MI_THEME-fgOnAccent);
-		background: linear-gradient(90deg, hsl(from var(--MI_THEME-accent) h s calc(l + 5)), hsl(from var(--MI_THEME-accent) h s calc(l + 5)));
-	}
-}
-
-.navButtonIcon {
-	font-size: 16px;
-	vertical-align: middle;
-}
-
-.navButtonIndicator {
-	position: absolute;
-	top: 0;
-	left: 0;
-	color: var(--MI_THEME-indicator);
-	font-size: 16px;
-
-	&:has(.itemIndicateValueIcon) {
-		animation: none;
-		font-size: 12px;
-	}
-}
-
-.menuDrawerBg {
-	z-index: 1001;
-}
-
-.menuDrawer {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
-	height: 100dvh;
-	width: 240px;
-	box-sizing: border-box;
-	contain: strict;
-	overflow: auto;
-	overscroll-behavior: contain;
-	background: var(--MI_THEME-navBg);
-}
-
 .statusbars {
 	position: sticky;
 	top: 0;
@@ -386,34 +169,4 @@ $widgets-hide-threshold: 1090px;
 		display: none;
 	}
 }
-
-.widgetsDrawerBg {
-	z-index: 1001;
-}
-
-.widgetsDrawer {
-	position: fixed;
-	top: 0;
-	left: 0;
-	z-index: 1001;
-	width: 310px;
-	height: 100dvh;
-	padding: var(--MI-margin) var(--MI-margin) calc(var(--MI-margin) + env(safe-area-inset-bottom, 0px)) !important;
-	box-sizing: border-box;
-	overflow: auto;
-	overscroll-behavior: contain;
-	background: var(--MI_THEME-bg);
-}
-
-.widgetsCloseButton {
-	padding: 8px;
-	display: block;
-	margin: 0 auto;
-}
-
-@media (min-width: 370px) {
-	.widgetsCloseButton {
-		display: none;
-	}
-}
 </style>

packages/frontend/src/ui/zen.vue

@@ -6,16 +6,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <div :class="$style.root">
 	<div :class="$style.contents">
-		<div style="flex: 1; min-height: 0;">
-			<RouterView/>
-		</div>
-
 		<!--
 			デッキUIが設定されている場合はデッキUIに戻れるようにする (ただし?zenが明示された場合は表示しない)
 			See https://github.com/misskey-dev/misskey/issues/10905
 		-->
-		<div v-if="showBottom" :class="$style.bottom">
-			<button v-tooltip="i18n.ts.goToMisskey" :class="['_button', '_shadow', $style.button]" @click="goToMisskey"><i class="ti ti-home"></i></button>
+		<button v-if="showDeckNav" class="_buttonPrimary" :class="$style.deckNav" @click="goToDeck">{{ i18n.ts.goToDeck }}</button>
+
+		<div style="flex: 1; min-height: 0;">
+			<RouterView/>
 		</div>
 	</div>
 
@@ -37,7 +35,7 @@ const isRoot = computed(() => mainRouter.currentRoute.value.name === 'index');
 
 const pageMetadata = ref<null | PageMetadata>(null);
 
-const showBottom = !(new URLSearchParams(window.location.search)).has('zen') && ui === 'deck';
+const showDeckNav = !(new URLSearchParams(window.location.search)).has('zen') && ui === 'deck';
 
 provide(DI.router, mainRouter);
 provideMetadataReceiver((metadataGetter) => {
@@ -53,7 +51,7 @@ provideMetadataReceiver((metadataGetter) => {
 });
 provideReactiveMetadata(pageMetadata);
 
-function goToMisskey() {
+function goToDeck() {
 	window.location.href = '/';
 }
 </script>
@@ -68,10 +66,8 @@ function goToMisskey() {
 	height: 100dvh;
 }
 
-.bottom {
-	height: calc(60px + (var(--MI-margin) * 2) + env(safe-area-inset-bottom, 0px));
-	width: 100%;
-	margin-top: auto;
+.deckNav {
+	padding: 4px;
 }
 
 .button {

packages/frontend/src/utility/get-user-menu.ts

@@ -363,7 +363,7 @@ export function getUserMenu(user: Misskey.entities.UserDetailed, router: Router
 			},
 		});
 
-		if ($i.policies.canChat && user.canChat && user.host == null) {
+		if ($i.policies.chatAvailability === 'available' && user.canChat && user.host == null) {
 			menuItems.push({
 				type: 'link',
 				icon: 'ti ti-messages',

packages/frontend/src/utility/intl-string.ts

@@ -65,10 +65,11 @@ const hyphens = [
 ];
 
 const hyphensCodePoints = hyphens.map(code => `\\u{${code.toString(16).padStart(4, '0')}}`);
+const hyphensRegex = new RegExp(`[${hyphensCodePoints.join('')}]`, 'ug');
 
 /** ハイフンを統一（ローマ字半角入力時に`ー`と`-`が判定できない問題の調整） */
 export function normalizeHyphens(str: string) {
-	return str.replace(new RegExp(`[${hyphensCodePoints.join('')}]`, 'ug'), '\u002d');
+	return str.replace(hyphensRegex, '\u002d');
 }
 
 /**

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[];