Merge branch 'develop' into view-transition

packages/frontend/src/account.ts

@@ -17,6 +17,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { unisonReload, reloadChannel } from '@/utility/unison-reload.js';
 
 // TODO: 他のタブと永続化されたstateを同期
+// TODO: accountsはpreferences管理にする(tokenは別管理)
 
 type Account = Misskey.entities.MeDetailed & { token: string };
 

packages/frontend/src/boot/main-boot.ts

@@ -6,9 +6,11 @@
 import { createApp, defineAsyncComponent, markRaw } from 'vue';
 import { ui } from '@@/js/config.js';
 import * as Misskey from 'misskey-js';
+import { v4 as uuid } from 'uuid';
 import { common } from './common.js';
 import type { Component } from 'vue';
 import type { Keymap } from '@/utility/hotkey.js';
+import type { DeckProfile } from '@/deck.js';
 import { i18n } from '@/i18n.js';
 import { alert, confirm, popup, post, toast } from '@/os.js';
 import { useStream } from '@/stream.js';
@@ -143,12 +145,34 @@ export async function mainBoot() {
 				if (themes.length > 0) {
 					prefer.commit('themes', themes);
 				}
+
 				const plugins = ColdDeviceStorage.get('plugins');
 				prefer.commit('plugins', plugins.map(p => ({
 					...p,
 					installId: (p as any).id,
 					id: undefined,
 				})));
+
+				prefer.commit('deck.profile', deckStore.s.profile);
+				misskeyApi('i/registry/keys', {
+					scope: ['client', 'deck', 'profiles'],
+				}).then(async keys => {
+					const profiles: DeckProfile[] = [];
+					for (const key of keys) {
+						const deck = await misskeyApi('i/registry/get', {
+							scope: ['client', 'deck', 'profiles'],
+							key: key,
+						});
+						profiles.push({
+							id: uuid(),
+							name: key,
+							columns: deck.columns,
+							layout: deck.layout,
+						});
+					}
+					prefer.commit('deck.profiles', profiles);
+				});
+
 				prefer.commit('lightTheme', ColdDeviceStorage.get('lightTheme'));
 				prefer.commit('darkTheme', ColdDeviceStorage.get('darkTheme'));
 				prefer.commit('syncDeviceDarkMode', ColdDeviceStorage.get('syncDeviceDarkMode'));
@@ -223,9 +247,6 @@ export async function mainBoot() {
 				prefer.commit('sound.on.noteMy', store.s.sound_noteMy as any);
 				prefer.commit('sound.on.notification', store.s.sound_notification as any);
 				prefer.commit('sound.on.reaction', store.s.sound_reaction as any);
-				store.set('deck.profile', deckStore.s.profile);
-				store.set('deck.columns', deckStore.s.columns);
-				store.set('deck.layout', deckStore.s.layout);
 				store.set('menu', []);
 			}
 

packages/frontend/src/components/MkFeatureBanner.vue

@@ -0,0 +1,43 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div v-panel :class="$style.root">
+	<img :class="$style.img" :src="icon"/>
+	<div :class="$style.text">
+		<slot></slot>
+	</div>
+</div>
+</template>
+
+<script setup lang="ts">
+withDefaults(defineProps<{
+	icon: string;
+	color: string;
+}>(), {
+});
+</script>
+
+<style module lang="scss">
+.root {
+	padding: 20px 24px;
+	text-align: center;
+	border-radius: var(--MI-radius);
+	background: linear-gradient(180deg, color(from v-bind(color) srgb r g b / 0.1), color(from v-bind(color) srgb r g b / 0));
+}
+
+.img {
+	display: block;
+	margin: 0 auto;
+	width: 40px;
+	aspect-ratio: 1;
+}
+
+.text {
+	margin-top: 12px;
+	font-size: 85%;
+	mix-blend-mode: luminosity;
+}
+</style>

packages/frontend/src/components/MkPasswordDialog.vue

@@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<MkSpacer :marginMin="20" :marginMax="28">
 		<div style="padding: 0 0 16px 0; text-align: center;">
-			<img src="/fluent-emoji/1f510.png" alt="🔐" style="display: block; margin: 0 auto; width: 48px;">
+			<img src="/client-assets/locked_with_key_3d.png" alt="🔐" style="display: block; margin: 0 auto; width: 48px;">
 			<div style="margin-top: 16px;">{{ i18n.ts.authenticationRequiredToContinue }}</div>
 		</div>
 

packages/frontend/src/components/MkPostForm.vue

@@ -265,7 +265,13 @@ const canPost = computed((): boolean => {
 			quoteId.value != null
 		) &&
 		(textLength.value <= maxTextLength.value) &&
-		(cwTextLength.value <= maxCwTextLength) &&
+		(
+			useCw.value ?
+				(
+					cw.value != null && cw.value.trim() !== '' &&
+					cwTextLength.value <= maxCwTextLength
+				) : true
+		) &&
 		(files.value.length <= 16) &&
 		(!poll.value || poll.value.choices.length >= 2);
 });
@@ -744,14 +750,6 @@ function isAnnoying(text: string): boolean {
 }
 
 async function post(ev?: MouseEvent) {
-	if (useCw.value && (cw.value == null || cw.value.trim() === '')) {
-		os.alert({
-			type: 'error',
-			text: i18n.ts.cwNotationRequired,
-		});
-		return;
-	}
-
 	if (ev) {
 		const el = (ev.currentTarget ?? ev.target) as HTMLElement | null;
 

packages/frontend/src/components/MkThemePreview.vue

@@ -0,0 +1,96 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<svg
+	version="1.1"
+	viewBox="0 0 203.2 152.4"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+>
+	<g fill-rule="evenodd">
+		<rect width="203.2" height="152.4" :fill="themeVariables.bg" stroke-width=".26458" />
+		<rect width="65.498" height="152.4" :fill="themeVariables.panel" stroke-width=".26458" />
+		<rect x="65.498" width="137.7" height="40.892" :fill="themeVariables.acrylicBg" stroke-width=".265" />
+		<path transform="scale(.26458)" d="m439.77 247.19c-43.673 0-78.832 35.157-78.832 78.83v249.98h407.06v-328.81z" :fill="themeVariables.panel" />
+	</g>
+	<circle cx="32.749" cy="83.054" r="21.132" :fill="themeVariables.accentedBg" stroke-dasharray="0.319256, 0.319256" stroke-width=".15963" style="paint-order:stroke fill markers" />
+	<circle cx="136.67" cy="106.76" r="23.876" :fill="themeVariables.fg" fill-opacity="0.5" stroke-dasharray="0.352425, 0.352425" stroke-width=".17621" style="paint-order:stroke fill markers" />
+	<g :fill="themeVariables.fg" fill-rule="evenodd" stroke-width=".26458">
+		<rect x="171.27" y="87.815" width="48.576" height="6.8747" ry="3.4373"/>
+		<rect x="171.27" y="105.09" width="48.576" height="6.875" ry="3.4375"/>
+		<rect x="171.27" y="121.28" width="48.576" height="6.875" ry="3.4375"/>
+		<rect x="171.27" y="137.47" width="48.576" height="6.875" ry="3.4375"/>
+	</g>
+	<path d="m65.498 40.892h137.7" :stroke="themeVariables.divider" stroke-width="0.75" />
+	<g transform="matrix(.60823 0 0 .60823 25.45 75.755)" fill="none" :stroke="themeVariables.accent" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+		<path d="m0 0h24v24h-24z" fill="none" stroke="none" />
+		<path d="m5 12h-2l9-9 9 9h-2" />
+		<path d="m5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7" />
+		<path d="m9 21v-6a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v6" />
+	</g>
+	<g transform="matrix(.61621 0 0 .61621 25.354 117.92)" fill="none" :stroke="themeVariables.fg" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+		<path d="m0 0h24v24h-24z" fill="none" stroke="none" />
+		<path d="m10 5a2 2 0 1 1 4 0 7 7 0 0 1 4 6v3a4 4 0 0 0 2 3h-16a4 4 0 0 0 2-3v-3a7 7 0 0 1 4-6" />
+		<path d="m9 17v1a3 3 0 0 0 6 0v-1" />
+	</g>
+	<image x="20.948" y="18.388" width="23.602" height="23.602" image-rendering="optimizeSpeed" preserveAspectRatio="xMidYMid meet" v-bind="{ 'xlink:href': instance.iconUrl || '/favicon.ico' }" />
+</svg>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from 'vue';
+import { instance } from '@/instance.js';
+import { compile } from '@/theme.js';
+import type { Theme } from '@/theme.js';
+import { deepClone } from '@/utility/clone.js';
+import lightTheme from '@@/themes/_light.json5';
+import darkTheme from '@@/themes/_dark.json5';
+
+const props = defineProps<{
+	theme: Theme;
+}>();
+
+const themeVariables = ref<{
+	bg: string;
+	acrylicBg: string;
+	panel: string;
+	fg: string;
+	divider: string;
+	accent: string;
+	accentedBg: string;
+}>({
+	bg: 'var(--MI_THEME-bg)',
+	acrylicBg: 'var(--MI_THEME-acrylicBg)',
+	panel: 'var(--MI_THEME-panel)',
+	fg: 'var(--MI_THEME-fg)',
+	divider: 'var(--MI_THEME-divider)',
+	accent: 'var(--MI_THEME-accent)',
+	accentedBg: 'var(--MI_THEME-accentedBg)',
+});
+
+watch(() => props.theme, (theme) => {
+	if (theme == null) return;
+
+	const _theme = deepClone(theme);
+
+	if (_theme?.base != null) {
+		const base = [lightTheme, darkTheme].find(x => x.id === _theme.base);
+		if (base) _theme.props = Object.assign({}, base.props, _theme.props);
+	}
+
+	const compiled = compile(_theme);
+
+	themeVariables.value = {
+		bg: compiled.bg ?? 'var(--MI_THEME-bg)',
+		acrylicBg: compiled.acrylicBg ?? 'var(--MI_THEME-acrylicBg)',
+		panel: compiled.panel ?? 'var(--MI_THEME-panel)',
+		fg: compiled.fg ?? 'var(--MI_THEME-fg)',
+		divider: compiled.divider ?? 'var(--MI_THEME-divider)',
+		accent: compiled.accent ?? 'var(--MI_THEME-accent)',
+		accentedBg: compiled.accentedBg ?? 'var(--MI_THEME-accentedBg)',
+	};
+}, { immediate: true });
+</script>

packages/frontend/src/deck.ts

@@ -3,13 +3,23 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { throttle } from 'throttle-debounce';
 import { notificationTypes } from 'misskey-js';
+import { ref } from 'vue';
+import { v4 as uuid } from 'uuid';
+import { i18n } from './i18n.js';
 import type { BasicTimelineType } from '@/timelines.js';
 import type { SoundStore } from '@/preferences/def.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
+import type { MenuItem } from '@/types/menu.js';
 import { deepClone } from '@/utility/clone.js';
-import { store } from '@/store.js';
+import { prefer } from '@/preferences.js';
+import * as os from '@/os.js';
+
+export type DeckProfile = {
+	name: string;
+	id: string;
+	columns: Column[];
+	layout: Column['id'][][];
+};
 
 type ColumnWidget = {
 	name: string;
@@ -53,127 +63,132 @@ export type Column = {
 	soundSetting?: SoundStore;
 };
 
-export const loadDeck = async () => {
-	let deck;
+const _currentProfile = prefer.s['deck.profiles'].find(p => p.name === prefer.s['deck.profile']);
+const __currentProfile = _currentProfile ? deepClone(_currentProfile) : null;
+export const columns = ref(__currentProfile ? __currentProfile.columns : []);
+export const layout = ref(__currentProfile ? __currentProfile.layout : []);
 
-	try {
-		deck = await misskeyApi('i/registry/get', {
-			scope: ['client', 'deck', 'profiles'],
-			key: store.s['deck.profile'],
-		});
-	} catch (err) {
-		if (typeof err === 'object' && err != null && 'code' in err && err.code === 'NO_SUCH_KEY') {
-			// 後方互換性のため
-			if (store.s['deck.profile'] === 'default') {
-				saveDeck();
-				return;
-			}
+if (prefer.s['deck.profile'] == null) {
+	addProfile('Main');
+}
 
-			store.set('deck.columns', []);
-			store.set('deck.layout', []);
-			return;
-		}
-		throw err;
-	}
+export function forceSaveCurrentDeckProfile() {
+	const currentProfile = prefer.s['deck.profiles'].find(p => p.name === prefer.s['deck.profile']);
+	if (currentProfile == null) return;
 
-	store.set('deck.columns', deck.columns);
-	store.set('deck.layout', deck.layout);
+	const newProfile = deepClone(currentProfile);
+	newProfile.columns = columns.value;
+	newProfile.layout = layout.value;
+
+	const newProfiles = prefer.s['deck.profiles'].filter(p => p.name !== prefer.s['deck.profile']);
+	newProfiles.push(newProfile);
+	prefer.commit('deck.profiles', newProfiles);
+}
+
+export const saveCurrentDeckProfile = () => {
+	forceSaveCurrentDeckProfile();
 };
 
-export async function forceSaveDeck() {
-	await misskeyApi('i/registry/set', {
-		scope: ['client', 'deck', 'profiles'],
-		key: store.s['deck.profile'],
-		value: {
-			columns: store.r['deck.columns'].value,
-			layout: store.r['deck.layout'].value,
-		},
-	});
+function switchProfile(profile: DeckProfile) {
+	prefer.commit('deck.profile', profile.name);
+	const currentProfile = deepClone(profile);
+	columns.value = currentProfile.columns;
+	layout.value = currentProfile.layout;
+	forceSaveCurrentDeckProfile();
 }
 
-// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
-export const saveDeck = throttle(1000, () => {
-	forceSaveDeck();
-});
+function addProfile(name: string) {
+	if (name.trim() === '') return;
+	if (prefer.s['deck.profiles'].find(p => p.name === name)) return;
 
-export async function getProfiles(): Promise<string[]> {
-	return await misskeyApi('i/registry/keys', {
-		scope: ['client', 'deck', 'profiles'],
-	});
+	const newProfile: DeckProfile = {
+		id: uuid(),
+		name,
+		columns: [],
+		layout: [],
+	};
+	prefer.commit('deck.profiles', [...prefer.s['deck.profiles'], newProfile]);
+	switchProfile(newProfile);
 }
 
-export async function deleteProfile(key: string): Promise<void> {
-	return await misskeyApi('i/registry/remove', {
-		scope: ['client', 'deck', 'profiles'],
-		key: key,
-	});
+function createFirstProfile() {
+	addProfile('Main');
+}
+
+export function deleteProfile(name: string): void {
+	const newProfiles = prefer.s['deck.profiles'].filter(p => p.name !== name);
+	prefer.commit('deck.profiles', newProfiles);
+
+	if (prefer.s['deck.profiles'].length === 0) {
+		createFirstProfile();
+	} else {
+		switchProfile(prefer.s['deck.profiles'][0]);
+	}
 }
 
 export function addColumn(column: Column) {
 	if (column.name === undefined) column.name = null;
-	store.push('deck.columns', column);
-	store.push('deck.layout', [column.id]);
-	saveDeck();
+	columns.value.push(column);
+	layout.value.push([column.id]);
+	saveCurrentDeckProfile();
 }
 
 export function removeColumn(id: Column['id']) {
-	store.set('deck.columns', store.s['deck.columns'].filter(c => c.id !== id));
-	store.set('deck.layout', store.s['deck.layout']
-		.map(ids => ids.filter(_id => _id !== id))
-		.filter(ids => ids.length > 0));
-	saveDeck();
+	columns.value = columns.value.filter(c => c.id !== id);
+	layout.value = layout.value.map(ids => ids.filter(_id => _id !== id)).filter(ids => ids.length > 0);
+	saveCurrentDeckProfile();
 }
 
 export function swapColumn(a: Column['id'], b: Column['id']) {
-	const aX = store.s['deck.layout'].findIndex(ids => ids.indexOf(a) !== -1);
-	const aY = store.s['deck.layout'][aX].findIndex(id => id === a);
-	const bX = store.s['deck.layout'].findIndex(ids => ids.indexOf(b) !== -1);
-	const bY = store.s['deck.layout'][bX].findIndex(id => id === b);
-	const layout = deepClone(store.s['deck.layout']);
-	layout[aX][aY] = b;
-	layout[bX][bY] = a;
-	store.set('deck.layout', layout);
-	saveDeck();
+	const aX = layout.value.findIndex(ids => ids.indexOf(a) !== -1);
+	const aY = layout.value[aX].findIndex(id => id === a);
+	const bX = layout.value.findIndex(ids => ids.indexOf(b) !== -1);
+	const bY = layout.value[bX].findIndex(id => id === b);
+	const newLayout = deepClone(layout.value);
+	newLayout[aX][aY] = b;
+	newLayout[bX][bY] = a;
+	layout.value = newLayout;
+	saveCurrentDeckProfile();
 }
 
 export function swapLeftColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
-	store.s['deck.layout'].some((ids, i) => {
+	const newLayout = deepClone(layout.value);
+	layout.value.some((ids, i) => {
 		if (ids.includes(id)) {
-			const left = store.s['deck.layout'][i - 1];
+			const left = layout.value[i - 1];
 			if (left) {
-				layout[i - 1] = store.s['deck.layout'][i];
-				layout[i] = left;
-				store.set('deck.layout', layout);
+				newLayout[i - 1] = layout.value[i];
+				newLayout[i] = left;
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapRightColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
-	store.s['deck.layout'].some((ids, i) => {
+	const newLayout = deepClone(layout.value);
+	layout.value.some((ids, i) => {
 		if (ids.includes(id)) {
-			const right = store.s['deck.layout'][i + 1];
+			const right = layout.value[i + 1];
 			if (right) {
-				layout[i + 1] = store.s['deck.layout'][i];
-				layout[i] = right;
-				store.set('deck.layout', layout);
+				newLayout[i + 1] = layout.value[i];
+				newLayout[i] = right;
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapUpColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
-	const idsIndex = store.s['deck.layout'].findIndex(ids => ids.includes(id));
-	const ids = deepClone(store.s['deck.layout'][idsIndex]);
+	const newLayout = deepClone(layout.value);
+	const idsIndex = layout.value.findIndex(ids => ids.includes(id));
+	const ids = deepClone(layout.value[idsIndex]);
 	ids.some((x, i) => {
 		if (x === id) {
 			const up = ids[i - 1];
@@ -181,20 +196,20 @@ export function swapUpColumn(id: Column['id']) {
 				ids[i - 1] = id;
 				ids[i] = up;
 
-				layout[idsIndex] = ids;
-				store.set('deck.layout', layout);
+				newLayout[idsIndex] = ids;
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapDownColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
-	const idsIndex = store.s['deck.layout'].findIndex(ids => ids.includes(id));
-	const ids = deepClone(store.s['deck.layout'][idsIndex]);
+	const newLayout = deepClone(layout.value);
+	const idsIndex = layout.value.findIndex(ids => ids.includes(id));
+	const ids = deepClone(layout.value[idsIndex]);
 	ids.some((x, i) => {
 		if (x === id) {
 			const down = ids[i + 1];
@@ -202,105 +217,137 @@ export function swapDownColumn(id: Column['id']) {
 				ids[i + 1] = id;
 				ids[i] = down;
 
-				layout[idsIndex] = ids;
-				store.set('deck.layout', layout);
+				newLayout[idsIndex] = ids;
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function stackLeftColumn(id: Column['id']) {
-	let layout = deepClone(store.s['deck.layout']);
-	const i = store.s['deck.layout'].findIndex(ids => ids.includes(id));
-	layout = layout.map(ids => ids.filter(_id => _id !== id));
-	layout[i - 1].push(id);
-	layout = layout.filter(ids => ids.length > 0);
-	store.set('deck.layout', layout);
-	saveDeck();
+	let newLayout = deepClone(layout.value);
+	const i = layout.value.findIndex(ids => ids.includes(id));
+	newLayout = newLayout.map(ids => ids.filter(_id => _id !== id));
+	newLayout[i - 1].push(id);
+	newLayout = newLayout.filter(ids => ids.length > 0);
+	layout.value = newLayout;
+	saveCurrentDeckProfile();
 }
 
 export function popRightColumn(id: Column['id']) {
-	let layout = deepClone(store.s['deck.layout']);
-	const i = store.s['deck.layout'].findIndex(ids => ids.includes(id));
-	const affected = layout[i];
-	layout = layout.map(ids => ids.filter(_id => _id !== id));
-	layout.splice(i + 1, 0, [id]);
-	layout = layout.filter(ids => ids.length > 0);
-	store.set('deck.layout', layout);
+	let newLayout = deepClone(layout.value);
+	const i = layout.value.findIndex(ids => ids.includes(id));
+	const affected = newLayout[i];
+	newLayout = newLayout.map(ids => ids.filter(_id => _id !== id));
+	newLayout.splice(i + 1, 0, [id]);
+	newLayout = newLayout.filter(ids => ids.length > 0);
+	layout.value = newLayout;
 
-	const columns = deepClone(store.s['deck.columns']);
-	for (const column of columns) {
+	const newColumns = deepClone(columns.value);
+	for (const column of newColumns) {
 		if (affected.includes(column.id)) {
 			column.active = true;
 		}
 	}
-	store.set('deck.columns', columns);
+	columns.value = newColumns;
 
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function addColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = deepClone(store.s['deck.columns']);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	const newColumns = deepClone(columns.value);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
+	const column = deepClone(columns.value[columnIndex]);
 	if (column == null) return;
 	if (column.widgets == null) column.widgets = [];
 	column.widgets.unshift(widget);
-	columns[columnIndex] = column;
-	store.set('deck.columns', columns);
-	saveDeck();
+	newColumns[columnIndex] = column;
+	columns.value = newColumns;
+	saveCurrentDeckProfile();
 }
 
 export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = deepClone(store.s['deck.columns']);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	const newColumns = deepClone(columns.value);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
+	const column = deepClone(columns.value[columnIndex]);
 	if (column == null) return;
 	if (column.widgets == null) column.widgets = [];
 	column.widgets = column.widgets.filter(w => w.id !== widget.id);
-	columns[columnIndex] = column;
-	store.set('deck.columns', columns);
-	saveDeck();
+	newColumns[columnIndex] = column;
+	columns.value = newColumns;
+	saveCurrentDeckProfile();
 }
 
 export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
-	const columns = deepClone(store.s['deck.columns']);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	const newColumns = deepClone(columns.value);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
+	const column = deepClone(columns.value[columnIndex]);
 	if (column == null) return;
 	column.widgets = widgets;
-	columns[columnIndex] = column;
-	store.set('deck.columns', columns);
-	saveDeck();
+	newColumns[columnIndex] = column;
+	columns.value = newColumns;
+	saveCurrentDeckProfile();
 }
 
 export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
-	const columns = deepClone(store.s['deck.columns']);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	const newColumns = deepClone(columns.value);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
+	const column = deepClone(columns.value[columnIndex]);
 	if (column == null) return;
 	if (column.widgets == null) column.widgets = [];
 	column.widgets = column.widgets.map(w => w.id === widgetId ? {
 		...w,
 		data: widgetData,
 	} : w);
-	columns[columnIndex] = column;
-	store.set('deck.columns', columns);
-	saveDeck();
+	newColumns[columnIndex] = column;
+	columns.value = newColumns;
+	saveCurrentDeckProfile();
 }
 
 export function updateColumn(id: Column['id'], column: Partial<Column>) {
-	const columns = deepClone(store.s['deck.columns']);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
-	const currentColumn = deepClone(store.s['deck.columns'][columnIndex]);
+	const newColumns = deepClone(columns.value);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
+	const currentColumn = deepClone(columns.value[columnIndex]);
 	if (currentColumn == null) return;
 	for (const [k, v] of Object.entries(column)) {
 		currentColumn[k] = v;
 	}
-	columns[columnIndex] = currentColumn;
-	store.set('deck.columns', columns);
-	saveDeck();
+	newColumns[columnIndex] = currentColumn;
+	columns.value = newColumns;
+	saveCurrentDeckProfile();
+}
+
+export function switchProfileMenu(ev: MouseEvent) {
+	const items: MenuItem[] = prefer.s['deck.profile'] ? [{
+		text: prefer.s['deck.profile'],
+		active: true,
+		action: () => {},
+	}] : [];
+
+	const profiles = prefer.s['deck.profiles'];
+
+	items.push(...(profiles.filter(p => p.name !== prefer.s['deck.profile']).map(p => ({
+		text: p.name,
+		action: () => {
+			switchProfile(p);
+		},
+	}))), { type: 'divider' as const }, {
+		text: i18n.ts._deck.newProfile,
+		icon: 'ti ti-plus',
+		action: async () => {
+			const { canceled, result: name } = await os.inputText({
+				title: i18n.ts._deck.profile,
+				minLength: 1,
+			});
+
+			if (canceled || name == null || name.trim() === '') return;
+
+			addProfile(name);
+		},
+	});
+
+	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/accessibility" :label="i18n.ts.accessibility" :keywords="['accessibility']" icon="ti ti-accessible">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/mens_room_3d.png" color="#0011ff">
+			<SearchKeyword>{{ i18n.ts._settings.accessibilityBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<div class="_gaps_s">
 			<SearchMarker :keywords="['animation', 'motion', 'reduce']">
 				<MkPreferenceContainer k="animation">
@@ -79,6 +83,7 @@ import { reloadAsk } from '@/utility/reload-ask.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const reduceAnimation = prefer.model('animation', v => !v, v => !v);
 const animatedMfm = prefer.model('animatedMfm');

packages/frontend/src/pages/settings/account-data.vue

@@ -0,0 +1,277 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<SearchMarker path="/settings/account-data" :label="i18n.ts._settings.accountData" :keywords="['import', 'export', 'data']" icon="ti ti-package">
+	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/package_3d.png" color="#ff9100">
+			<SearchKeyword>{{ i18n.ts._settings.accountDataBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
+		<div class="_gaps_s">
+			<SearchMarker :keywords="['notes']">
+				<MkFolder>
+					<template #icon><i class="ti ti-pencil"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.allNotes }}</SearchLabel></template>
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts.export }}</template>
+						<template #icon><i class="ti ti-download"></i></template>
+						<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+					</MkFolder>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['favorite', 'notes']">
+				<MkFolder>
+					<template #icon><i class="ti ti-star"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.favoritedNotes }}</SearchLabel></template>
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts.export }}</template>
+						<template #icon><i class="ti ti-download"></i></template>
+						<MkButton primary :class="$style.button" inline @click="exportFavorites()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+					</MkFolder>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['clip', 'notes']">
+				<MkFolder>
+					<template #icon><i class="ti ti-star"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.clips }}</SearchLabel></template>
+					<MkFolder :defaultOpen="true">
+						<template #label>{{ i18n.ts.export }}</template>
+						<template #icon><i class="ti ti-download"></i></template>
+						<MkButton primary :class="$style.button" inline @click="exportClips()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+					</MkFolder>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['following', 'users']">
+				<MkFolder>
+					<template #icon><i class="ti ti-users"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.followingList }}</SearchLabel></template>
+					<div class="_gaps_s">
+						<MkFolder :defaultOpen="true">
+							<template #label>{{ i18n.ts.export }}</template>
+							<template #icon><i class="ti ti-download"></i></template>
+							<div class="_gaps_s">
+								<MkSwitch v-model="excludeMutingUsers">
+									{{ i18n.ts._exportOrImport.excludeMutingUsers }}
+								</MkSwitch>
+								<MkSwitch v-model="excludeInactiveUsers">
+									{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
+								</MkSwitch>
+								<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+							</div>
+						</MkFolder>
+						<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing" :defaultOpen="true">
+							<template #label>{{ i18n.ts.import }}</template>
+							<template #icon><i class="ti ti-upload"></i></template>
+							<MkSwitch v-model="withReplies">
+								{{ i18n.ts._exportOrImport.withReplies }}
+							</MkSwitch>
+							<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+						</MkFolder>
+					</div>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['user', 'lists']">
+				<MkFolder>
+					<template #icon><i class="ti ti-users"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.userLists }}</SearchLabel></template>
+					<div class="_gaps_s">
+						<MkFolder :defaultOpen="true">
+							<template #label>{{ i18n.ts.export }}</template>
+							<template #icon><i class="ti ti-download"></i></template>
+							<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+						</MkFolder>
+						<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists" :defaultOpen="true">
+							<template #label>{{ i18n.ts.import }}</template>
+							<template #icon><i class="ti ti-upload"></i></template>
+							<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+						</MkFolder>
+					</div>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['mute', 'users']">
+				<MkFolder>
+					<template #icon><i class="ti ti-user-off"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.muteList }}</SearchLabel></template>
+					<div class="_gaps_s">
+						<MkFolder :defaultOpen="true">
+							<template #label>{{ i18n.ts.export }}</template>
+							<template #icon><i class="ti ti-download"></i></template>
+							<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+						</MkFolder>
+						<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting" :defaultOpen="true">
+							<template #label>{{ i18n.ts.import }}</template>
+							<template #icon><i class="ti ti-upload"></i></template>
+							<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+						</MkFolder>
+					</div>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['block', 'users']">
+				<MkFolder>
+					<template #icon><i class="ti ti-user-off"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts._exportOrImport.blockingList }}</SearchLabel></template>
+					<div class="_gaps_s">
+						<MkFolder :defaultOpen="true">
+							<template #label>{{ i18n.ts.export }}</template>
+							<template #icon><i class="ti ti-download"></i></template>
+							<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+						</MkFolder>
+						<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking" :defaultOpen="true">
+							<template #label>{{ i18n.ts.import }}</template>
+							<template #icon><i class="ti ti-upload"></i></template>
+							<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+						</MkFolder>
+					</div>
+				</MkFolder>
+			</SearchMarker>
+
+			<SearchMarker :keywords="['antennas']">
+				<MkFolder>
+					<template #icon><i class="ti ti-antenna"></i></template>
+					<template #label><SearchLabel>{{ i18n.ts.antennas }}</SearchLabel></template>
+					<div class="_gaps_s">
+						<MkFolder :defaultOpen="true">
+							<template #label>{{ i18n.ts.export }}</template>
+							<template #icon><i class="ti ti-download"></i></template>
+							<MkButton primary :class="$style.button" inline @click="exportAntennas()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
+						</MkFolder>
+						<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas" :defaultOpen="true">
+							<template #label>{{ i18n.ts.import }}</template>
+							<template #icon><i class="ti ti-upload"></i></template>
+							<MkButton primary :class="$style.button" inline @click="importAntennas($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
+						</MkFolder>
+					</div>
+				</MkFolder>
+			</SearchMarker>
+		</div>
+	</div>
+</SearchMarker>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed } from 'vue';
+import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkSwitch from '@/components/MkSwitch.vue';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import { selectFile } from '@/utility/select-file.js';
+import { i18n } from '@/i18n.js';
+import { definePage } from '@/page.js';
+import { $i } from '@/account.js';
+import { store } from '@/store.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
+
+const excludeMutingUsers = ref(false);
+const excludeInactiveUsers = ref(false);
+const withReplies = ref(store.s.defaultWithReplies);
+
+const onExportSuccess = () => {
+	os.alert({
+		type: 'info',
+		text: i18n.ts.exportRequested,
+	});
+};
+
+const onImportSuccess = () => {
+	os.alert({
+		type: 'info',
+		text: i18n.ts.importRequested,
+	});
+};
+
+const onError = (ev) => {
+	os.alert({
+		type: 'error',
+		text: ev.message,
+	});
+};
+
+const exportNotes = () => {
+	misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportFavorites = () => {
+	misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportClips = () => {
+	misskeyApi('i/export-clips', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportFollowing = () => {
+	misskeyApi('i/export-following', {
+		excludeMuting: excludeMutingUsers.value,
+		excludeInactive: excludeInactiveUsers.value,
+	})
+		.then(onExportSuccess).catch(onError);
+};
+
+const exportBlocking = () => {
+	misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportUserLists = () => {
+	misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportMuting = () => {
+	misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError);
+};
+
+const exportAntennas = () => {
+	misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError);
+};
+
+const importFollowing = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	misskeyApi('i/import-following', {
+		fileId: file.id,
+		withReplies: withReplies.value,
+	}).then(onImportSuccess).catch(onError);
+};
+
+const importUserLists = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const importMuting = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const importBlocking = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const importAntennas = async (ev) => {
+	const file = await selectFile(ev.currentTarget ?? ev.target);
+	misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
+};
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+
+definePage(() => ({
+	title: i18n.ts._settings.accountData,
+	icon: 'ti ti-package',
+}));
+</script>
+
+<style module>
+.button {
+	margin-right: 16px;
+}
+</style>

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

@@ -1,53 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<MkButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</MkButton>
-	<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
-	<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { defineAsyncComponent, ref, computed } from 'vue';
-import FormLink from '@/components/form/link.vue';
-import MkButton from '@/components/MkButton.vue';
-import * as os from '@/os.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { i18n } from '@/i18n.js';
-import { definePage } from '@/page.js';
-
-const isDesktop = ref(window.innerWidth >= 1100);
-
-function generateToken() {
-	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
-		done: async result => {
-			const { name, permissions } = result;
-			const { token } = await misskeyApi('miauth/gen-token', {
-				session: null,
-				name: name,
-				permission: permissions,
-			});
-
-			os.alert({
-				type: 'success',
-				title: i18n.ts.token,
-				text: token,
-			});
-		},
-		closed: () => dispose(),
-	});
-}
-
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
-definePage(() => ({
-	title: 'API',
-	icon: 'ti ti-api',
-}));
-</script>

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/appearance" :label="i18n.ts.appearance" :keywords="['appearance']" icon="ti ti-device-desktop">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/desktop_computer_3d.png" color="#eaff00">
+			<SearchKeyword>{{ i18n.ts._settings.appearanceBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<FormSection first>
 			<div class="_gaps_m">
 				<div class="_gaps_s">
@@ -227,6 +231,7 @@ import MkButton from '@/components/MkButton.vue';
 import FormSection from '@/components/form/section.vue';
 import { instance } from '@/instance.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const fontSize = ref(miLocalStorage.getItem('fontSize'));
 const useSystemFont = ref(miLocalStorage.getItem('useSystemFont') != null);

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

@@ -0,0 +1,112 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<SearchMarker path="/settings/connect" :label="i18n.ts._settings.serviceConnection" :keywords="['app', 'service', 'connect', 'webhook', 'api', 'token']" icon="ti ti-link">
+	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/link_3d.png" color="#ff0088">
+			<SearchKeyword>{{ i18n.ts._settings.serviceConnectionBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
+		<SearchMarker :keywords="['api', 'app', 'token', 'accessToken']">
+			<FormSection>
+				<template #label><i class="ti ti-api"></i> <SearchLabel>{{ i18n.ts._settings.api }}</SearchLabel></template>
+
+				<div class="_gaps_m">
+					<MkButton primary @click="generateToken">{{ i18n.ts.generateAccessToken }}</MkButton>
+					<FormLink to="/settings/apps">{{ i18n.ts.manageAccessTokens }}</FormLink>
+					<FormLink to="/api-console" :behavior="isDesktop ? 'window' : null">API console</FormLink>
+				</div>
+			</FormSection>
+		</SearchMarker>
+
+		<SearchMarker :keywords="['webhook']">
+			<FormSection>
+				<template #label><i class="ti ti-webhook"></i> <SearchLabel>{{ i18n.ts._settings.webhook }}</SearchLabel></template>
+
+				<div class="_gaps_m">
+					<FormLink :to="`/settings/webhook/new`">
+						{{ i18n.ts._webhookSettings.createWebhook }}
+					</FormLink>
+
+					<MkFolder :defaultOpen="true">
+						<template #label><SearchLabel>{{ i18n.ts.manage }}</SearchLabel></template>
+
+						<MkPagination :pagination="pagination">
+							<template #default="{items}">
+								<div class="_gaps">
+									<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`">
+										<template #icon>
+											<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
+											<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
+											<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--MI_THEME-success)' }"></i>
+											<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--MI_THEME-error)' }"></i>
+										</template>
+										{{ webhook.name || webhook.url }}
+										<template #suffix>
+											<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
+										</template>
+									</FormLink>
+								</div>
+							</template>
+						</MkPagination>
+					</MkFolder>
+				</div>
+			</FormSection>
+		</SearchMarker>
+	</div>
+</SearchMarker>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, defineAsyncComponent } from 'vue';
+import MkPagination from '@/components/MkPagination.vue';
+import FormSection from '@/components/form/section.vue';
+import FormLink from '@/components/form/link.vue';
+import { definePage } from '@/page.js';
+import { i18n } from '@/i18n.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
+import * as os from '@/os.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
+
+const isDesktop = ref(window.innerWidth >= 1100);
+
+const pagination = {
+	endpoint: 'i/webhooks/list' as const,
+	limit: 100,
+	noPaging: true,
+};
+
+function generateToken() {
+	const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkTokenGenerateWindow.vue')), {}, {
+		done: async result => {
+			const { name, permissions } = result;
+			const { token } = await misskeyApi('miauth/gen-token', {
+				session: null,
+				name: name,
+				permission: permissions,
+			});
+
+			os.alert({
+				type: 'success',
+				title: i18n.ts.token,
+				text: token,
+			});
+		},
+		closed: () => dispose(),
+	});
+}
+
+const headerActions = computed(() => []);
+
+const headerTabs = computed(() => []);
+
+definePage(() => ({
+	title: i18n.ts._settings.serviceConnection,
+	icon: 'ti ti-link',
+}));
+</script>

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/drive" :label="i18n.ts.drive" :keywords="['drive']" icon="ti ti-cloud">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/cloud_3d.png" color="#0059ff">
+			<SearchKeyword>{{ i18n.ts._settings.driveBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<SearchMarker :keywords="['capacity', 'usage']">
 			<FormSection first>
 				<template #label><SearchLabel>{{ i18n.ts.usageAmount }}</SearchLabel></template>
@@ -103,6 +107,7 @@ import { definePage } from '@/page.js';
 import { signinRequired } from '@/account.js';
 import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const $i = signinRequired();
 

packages/frontend/src/pages/settings/import-export.vue

@@ -1,263 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<SearchMarker path="/settings/import-export" :label="i18n.ts.importAndExport" :keywords="['import', 'export', 'data']" icon="ti ti-package">
-	<div class="_gaps_m">
-		<SearchMarker :keywords="['notes']">
-			<FormSection first>
-				<template #label><i class="ti ti-pencil"></i> <SearchLabel>{{ i18n.ts._exportOrImport.allNotes }}</SearchLabel></template>
-				<MkFolder>
-					<template #label>{{ i18n.ts.export }}</template>
-					<template #icon><i class="ti ti-download"></i></template>
-					<MkButton primary :class="$style.button" inline @click="exportNotes()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-				</MkFolder>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['favorite', 'notes']">
-			<FormSection>
-				<template #label><i class="ti ti-star"></i> <SearchLabel>{{ i18n.ts._exportOrImport.favoritedNotes }}</SearchLabel></template>
-				<MkFolder>
-					<template #label>{{ i18n.ts.export }}</template>
-					<template #icon><i class="ti ti-download"></i></template>
-					<MkButton primary :class="$style.button" inline @click="exportFavorites()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-				</MkFolder>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['clip', 'notes']">
-			<FormSection>
-				<template #label><i class="ti ti-star"></i> <SearchLabel>{{ i18n.ts._exportOrImport.clips }}</SearchLabel></template>
-				<MkFolder>
-					<template #label>{{ i18n.ts.export }}</template>
-					<template #icon><i class="ti ti-download"></i></template>
-					<MkButton primary :class="$style.button" inline @click="exportClips()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-				</MkFolder>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['following', 'users']">
-			<FormSection>
-				<template #label><i class="ti ti-users"></i> <SearchLabel>{{ i18n.ts._exportOrImport.followingList }}</SearchLabel></template>
-				<div class="_gaps_s">
-					<MkFolder>
-						<template #label>{{ i18n.ts.export }}</template>
-						<template #icon><i class="ti ti-download"></i></template>
-						<div class="_gaps_s">
-							<MkSwitch v-model="excludeMutingUsers">
-								{{ i18n.ts._exportOrImport.excludeMutingUsers }}
-							</MkSwitch>
-							<MkSwitch v-model="excludeInactiveUsers">
-								{{ i18n.ts._exportOrImport.excludeInactiveUsers }}
-							</MkSwitch>
-							<MkButton primary :class="$style.button" inline @click="exportFollowing()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-						</div>
-					</MkFolder>
-					<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportFollowing">
-						<template #label>{{ i18n.ts.import }}</template>
-						<template #icon><i class="ti ti-upload"></i></template>
-						<MkSwitch v-model="withReplies">
-							{{ i18n.ts._exportOrImport.withReplies }}
-						</MkSwitch>
-						<MkButton primary :class="$style.button" inline @click="importFollowing($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-					</MkFolder>
-				</div>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['user', 'lists']">
-			<FormSection>
-				<template #label><i class="ti ti-users"></i> <SearchLabel>{{ i18n.ts._exportOrImport.userLists }}</SearchLabel></template>
-				<div class="_gaps_s">
-					<MkFolder>
-						<template #label>{{ i18n.ts.export }}</template>
-						<template #icon><i class="ti ti-download"></i></template>
-						<MkButton primary :class="$style.button" inline @click="exportUserLists()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-					</MkFolder>
-					<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportUserLists">
-						<template #label>{{ i18n.ts.import }}</template>
-						<template #icon><i class="ti ti-upload"></i></template>
-						<MkButton primary :class="$style.button" inline @click="importUserLists($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-					</MkFolder>
-				</div>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['mute', 'users']">
-			<FormSection>
-				<template #label><i class="ti ti-user-off"></i> <SearchLabel>{{ i18n.ts._exportOrImport.muteList }}</SearchLabel></template>
-				<div class="_gaps_s">
-					<MkFolder>
-						<template #label>{{ i18n.ts.export }}</template>
-						<template #icon><i class="ti ti-download"></i></template>
-						<MkButton primary :class="$style.button" inline @click="exportMuting()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-					</MkFolder>
-					<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportMuting">
-						<template #label>{{ i18n.ts.import }}</template>
-						<template #icon><i class="ti ti-upload"></i></template>
-						<MkButton primary :class="$style.button" inline @click="importMuting($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-					</MkFolder>
-				</div>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['block', 'users']">
-			<FormSection>
-				<template #label><i class="ti ti-user-off"></i> <SearchLabel>{{ i18n.ts._exportOrImport.blockingList }}</SearchLabel></template>
-				<div class="_gaps_s">
-					<MkFolder>
-						<template #label>{{ i18n.ts.export }}</template>
-						<template #icon><i class="ti ti-download"></i></template>
-						<MkButton primary :class="$style.button" inline @click="exportBlocking()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-					</MkFolder>
-					<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportBlocking">
-						<template #label>{{ i18n.ts.import }}</template>
-						<template #icon><i class="ti ti-upload"></i></template>
-						<MkButton primary :class="$style.button" inline @click="importBlocking($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-					</MkFolder>
-				</div>
-			</FormSection>
-		</SearchMarker>
-
-		<SearchMarker :keywords="['antennas']">
-			<FormSection>
-				<template #label><i class="ti ti-antenna"></i> <SearchLabel>{{ i18n.ts.antennas }}</SearchLabel></template>
-				<div class="_gaps_s">
-					<MkFolder>
-						<template #label>{{ i18n.ts.export }}</template>
-						<template #icon><i class="ti ti-download"></i></template>
-						<MkButton primary :class="$style.button" inline @click="exportAntennas()"><i class="ti ti-download"></i> {{ i18n.ts.export }}</MkButton>
-					</MkFolder>
-					<MkFolder v-if="$i && !$i.movedTo && $i.policies.canImportAntennas">
-						<template #label>{{ i18n.ts.import }}</template>
-						<template #icon><i class="ti ti-upload"></i></template>
-						<MkButton primary :class="$style.button" inline @click="importAntennas($event)"><i class="ti ti-upload"></i> {{ i18n.ts.import }}</MkButton>
-					</MkFolder>
-				</div>
-			</FormSection>
-		</SearchMarker>
-	</div>
-</SearchMarker>
-</template>
-
-<script lang="ts" setup>
-import { ref, computed } from 'vue';
-import MkButton from '@/components/MkButton.vue';
-import FormSection from '@/components/form/section.vue';
-import MkFolder from '@/components/MkFolder.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import * as os from '@/os.js';
-import { misskeyApi } from '@/utility/misskey-api.js';
-import { selectFile } from '@/utility/select-file.js';
-import { i18n } from '@/i18n.js';
-import { definePage } from '@/page.js';
-import { $i } from '@/account.js';
-import { store } from '@/store.js';
-
-const excludeMutingUsers = ref(false);
-const excludeInactiveUsers = ref(false);
-const withReplies = ref(store.s.defaultWithReplies);
-
-const onExportSuccess = () => {
-	os.alert({
-		type: 'info',
-		text: i18n.ts.exportRequested,
-	});
-};
-
-const onImportSuccess = () => {
-	os.alert({
-		type: 'info',
-		text: i18n.ts.importRequested,
-	});
-};
-
-const onError = (ev) => {
-	os.alert({
-		type: 'error',
-		text: ev.message,
-	});
-};
-
-const exportNotes = () => {
-	misskeyApi('i/export-notes', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportFavorites = () => {
-	misskeyApi('i/export-favorites', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportClips = () => {
-	misskeyApi('i/export-clips', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportFollowing = () => {
-	misskeyApi('i/export-following', {
-		excludeMuting: excludeMutingUsers.value,
-		excludeInactive: excludeInactiveUsers.value,
-	})
-		.then(onExportSuccess).catch(onError);
-};
-
-const exportBlocking = () => {
-	misskeyApi('i/export-blocking', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportUserLists = () => {
-	misskeyApi('i/export-user-lists', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportMuting = () => {
-	misskeyApi('i/export-mute', {}).then(onExportSuccess).catch(onError);
-};
-
-const exportAntennas = () => {
-	misskeyApi('i/export-antennas', {}).then(onExportSuccess).catch(onError);
-};
-
-const importFollowing = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	misskeyApi('i/import-following', {
-		fileId: file.id,
-		withReplies: withReplies.value,
-	}).then(onImportSuccess).catch(onError);
-};
-
-const importUserLists = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	misskeyApi('i/import-user-lists', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const importMuting = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	misskeyApi('i/import-muting', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const importBlocking = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	misskeyApi('i/import-blocking', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const importAntennas = async (ev) => {
-	const file = await selectFile(ev.currentTarget ?? ev.target);
-	misskeyApi('i/import-antennas', { fileId: file.id }).then(onImportSuccess).catch(onError);
-};
-
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
-definePage(() => ({
-	title: i18n.ts.importAndExport,
-	icon: 'ti ti-package',
-}));
-</script>
-
-<style module>
-.button {
-	margin-right: 16px;
-}
-</style>

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

@@ -156,20 +156,15 @@ const menuDef = computed<SuperMenuDef[]>(() => [{
 		to: '/settings/mute-block',
 		active: currentPage.value?.route.name === 'mute-block',
 	}, {
-		icon: 'ti ti-api',
-		text: 'API',
-		to: '/settings/api',
-		active: currentPage.value?.route.name === 'api',
-	}, {
-		icon: 'ti ti-webhook',
-		text: 'Webhook',
-		to: '/settings/webhook',
-		active: currentPage.value?.route.name === 'webhook',
+		icon: 'ti ti-link',
+		text: i18n.ts._settings.serviceConnection,
+		to: '/settings/connect',
+		active: currentPage.value?.route.name === 'connect',
 	}, {
 		icon: 'ti ti-package',
-		text: i18n.ts.importAndExport,
-		to: '/settings/import-export',
-		active: currentPage.value?.route.name === 'import-export',
+		text: i18n.ts._settings.accountData,
+		to: '/settings/account-data',
+		active: currentPage.value?.route.name === 'account-data',
 	}, {
 		icon: 'ti ti-dots',
 		text: i18n.ts.other,

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

@@ -6,167 +6,173 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/mute-block" :label="i18n.ts.muteAndBlock" icon="ti ti-ban" :keywords="['mute', 'block']">
 	<div class="_gaps_m">
-		<SearchMarker
-			:label="i18n.ts.wordMute"
-			:keywords="['note', 'word', 'soft', 'mute', 'hide']"
-		>
-			<MkFolder>
-				<template #icon><i class="ti ti-message-off"></i></template>
-				<template #label>{{ i18n.ts.wordMute }}</template>
+		<MkFeatureBanner icon="/client-assets/prohibited_3d.png" color="#ff2600">
+			<SearchKeyword>{{ i18n.ts._settings.muteAndBlockBanner }}</SearchKeyword>
+		</MkFeatureBanner>
 
-				<div class="_gaps_m">
-					<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
+		<div class="_gaps_s">
+			<SearchMarker
+				:label="i18n.ts.wordMute"
+				:keywords="['note', 'word', 'soft', 'mute', 'hide']"
+			>
+				<MkFolder>
+					<template #icon><i class="ti ti-message-off"></i></template>
+					<template #label>{{ i18n.ts.wordMute }}</template>
 
-					<SearchMarker
-						:label="i18n.ts.showMutedWord"
-						:keywords="['show']"
-					>
-						<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
-					</SearchMarker>
+					<div class="_gaps_m">
+						<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
 
-					<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
-				</div>
-			</MkFolder>
-		</SearchMarker>
+						<SearchMarker
+							:label="i18n.ts.showMutedWord"
+							:keywords="['show']"
+						>
+							<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
+						</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.hardWordMute"
-			:keywords="['note', 'word', 'hard', 'mute', 'hide']"
-		>
-			<MkFolder>
-				<template #icon><i class="ti ti-message-off"></i></template>
-				<template #label>{{ i18n.ts.hardWordMute }}</template>
+						<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
+					</div>
+				</MkFolder>
+			</SearchMarker>
 
-				<div class="_gaps_m">
-					<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
-					<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
-				</div>
-			</MkFolder>
-		</SearchMarker>
+			<SearchMarker
+				:label="i18n.ts.hardWordMute"
+				:keywords="['note', 'word', 'hard', 'mute', 'hide']"
+			>
+				<MkFolder>
+					<template #icon><i class="ti ti-message-off"></i></template>
+					<template #label>{{ i18n.ts.hardWordMute }}</template>
 
-		<SearchMarker
-			:label="i18n.ts.instanceMute"
-			:keywords="['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide']"
-		>
-			<MkFolder v-if="instance.federation !== 'none'">
-				<template #icon><i class="ti ti-planet-off"></i></template>
-				<template #label>{{ i18n.ts.instanceMute }}</template>
+					<div class="_gaps_m">
+						<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
+						<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
+					</div>
+				</MkFolder>
+			</SearchMarker>
 
-				<XInstanceMute/>
-			</MkFolder>
-		</SearchMarker>
+			<SearchMarker
+				:label="i18n.ts.instanceMute"
+				:keywords="['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide']"
+			>
+				<MkFolder v-if="instance.federation !== 'none'">
+					<template #icon><i class="ti ti-planet-off"></i></template>
+					<template #label>{{ i18n.ts.instanceMute }}</template>
 
-		<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>
+					<XInstanceMute/>
+				</MkFolder>
+			</SearchMarker>
 
-				<MkPagination :pagination="renoteMutingPagination">
-					<template #empty>
-						<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost"/>
-							<div>{{ i18n.ts.noUsers }}</div>
-						</div>
-					</template>
+			<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 #default="{ items }">
-						<div class="_gaps_s">
-							<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
-								<div :class="$style.userItemMain">
-									<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
-										<MkUserCardMini :user="item.mutee"/>
-									</MkA>
-									<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
-									<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
-								</div>
-								<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
-									<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
+					<MkPagination :pagination="renoteMutingPagination">
+						<template #empty>
+							<div class="_fullinfo">
+								<img :src="infoImageUrl" class="_ghost"/>
+								<div>{{ i18n.ts.noUsers }}</div>
+							</div>
+						</template>
+
+						<template #default="{ items }">
+							<div class="_gaps_s">
+								<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
+									<div :class="$style.userItemMain">
+										<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
+											<MkUserCardMini :user="item.mutee"/>
+										</MkA>
+										<button class="_button" :class="$style.userToggle" @click="toggleRenoteMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
+										<button class="_button" :class="$style.remove" @click="unrenoteMute(item.mutee, $event)"><i class="ti ti-x"></i></button>
+									</div>
+									<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
+										<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
+									</div>
 								</div>
 							</div>
-						</div>
-					</template>
-				</MkPagination>
-			</MkFolder>
-		</SearchMarker>
+						</template>
+					</MkPagination>
+				</MkFolder>
+			</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.mutedUsers"
-			:keywords="['note', 'mute', 'hide', 'user']"
-		>
-			<MkFolder>
-				<template #icon><i class="ti ti-eye-off"></i></template>
-				<template #label>{{ i18n.ts.mutedUsers }}</template>
+			<SearchMarker
+				:label="i18n.ts.mutedUsers"
+				:keywords="['note', 'mute', 'hide', 'user']"
+			>
+				<MkFolder>
+					<template #icon><i class="ti ti-eye-off"></i></template>
+					<template #label>{{ i18n.ts.mutedUsers }}</template>
 
-				<MkPagination :pagination="mutingPagination">
-					<template #empty>
-						<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost"/>
-							<div>{{ i18n.ts.noUsers }}</div>
-						</div>
-					</template>
+					<MkPagination :pagination="mutingPagination">
+						<template #empty>
+							<div class="_fullinfo">
+								<img :src="infoImageUrl" class="_ghost"/>
+								<div>{{ i18n.ts.noUsers }}</div>
+							</div>
+						</template>
 
-					<template #default="{ items }">
-						<div class="_gaps_s">
-							<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
-								<div :class="$style.userItemMain">
-									<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
-										<MkUserCardMini :user="item.mutee"/>
-									</MkA>
-									<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
-									<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
-								</div>
-								<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
-									<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
-									<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
-									<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+						<template #default="{ items }">
+							<div class="_gaps_s">
+								<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
+									<div :class="$style.userItemMain">
+										<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
+											<MkUserCardMini :user="item.mutee"/>
+										</MkA>
+										<button class="_button" :class="$style.userToggle" @click="toggleMuteItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
+										<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
+									</div>
+									<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
+										<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
+										<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
+										<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+									</div>
 								</div>
 							</div>
-						</div>
-					</template>
-				</MkPagination>
-			</MkFolder>
-		</SearchMarker>
+						</template>
+					</MkPagination>
+				</MkFolder>
+			</SearchMarker>
 
-		<SearchMarker
-			:label="i18n.ts.blockedUsers"
-			:keywords="['block', 'user']"
-		>
-			<MkFolder>
-				<template #icon><i class="ti ti-ban"></i></template>
-				<template #label>{{ i18n.ts.blockedUsers }}</template>
+			<SearchMarker
+				:label="i18n.ts.blockedUsers"
+				:keywords="['block', 'user']"
+			>
+				<MkFolder>
+					<template #icon><i class="ti ti-ban"></i></template>
+					<template #label>{{ i18n.ts.blockedUsers }}</template>
 
-				<MkPagination :pagination="blockingPagination">
-					<template #empty>
-						<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost"/>
-							<div>{{ i18n.ts.noUsers }}</div>
-						</div>
-					</template>
+					<MkPagination :pagination="blockingPagination">
+						<template #empty>
+							<div class="_fullinfo">
+								<img :src="infoImageUrl" class="_ghost"/>
+								<div>{{ i18n.ts.noUsers }}</div>
+							</div>
+						</template>
 
-					<template #default="{ items }">
-						<div class="_gaps_s">
-							<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
-								<div :class="$style.userItemMain">
-									<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
-										<MkUserCardMini :user="item.blockee"/>
-									</MkA>
-									<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
-									<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
-								</div>
-								<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
-									<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
-									<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
-									<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+						<template #default="{ items }">
+							<div class="_gaps_s">
+								<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
+									<div :class="$style.userItemMain">
+										<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
+											<MkUserCardMini :user="item.blockee"/>
+										</MkA>
+										<button class="_button" :class="$style.userToggle" @click="toggleBlockItem(item)"><i :class="$style.chevron" class="ti ti-chevron-down"></i></button>
+										<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
+									</div>
+									<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
+										<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
+										<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
+										<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+									</div>
 								</div>
 							</div>
-						</div>
-					</template>
-				</MkPagination>
-			</MkFolder>
-		</SearchMarker>
+						</template>
+					</MkPagination>
+				</MkFolder>
+			</SearchMarker>
+		</div>
 	</div>
 </SearchMarker>
 </template>
@@ -188,6 +194,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
 import { reloadAsk } from '@/utility/reload-ask.js';
 import { prefer } from '@/preferences.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const $i = signinRequired();
 

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

@@ -5,6 +5,10 @@ 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>
+
 	<FormSection first>
 		<template #label>{{ i18n.ts.notificationRecieveConfig }}</template>
 		<div class="_gaps_s">
@@ -63,6 +67,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { shallowRef, computed } from 'vue';
+import { notificationTypes } from '@@/js/const.js';
 import XNotificationConfig from './notifications.notification-config.vue';
 import type { NotificationConfig } from './notifications.notification-config.vue';
 import FormLink from '@/components/form/link.vue';
@@ -75,7 +80,7 @@ import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import MkPushNotificationAllowButton from '@/components/MkPushNotificationAllowButton.vue';
-import { notificationTypes } from '@@/js/const.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const $i = signinRequired();
 

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

@@ -4,8 +4,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<SearchMarker path="/settings/plugin" :label="i18n.ts.plugins" :keywords="['plugin']" icon="ti ti-plug">
+<SearchMarker path="/settings/plugin" :label="i18n.ts.plugins" :keywords="['plugin', 'addon', 'extension']" icon="ti ti-plug">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/electric_plug_3d.png" color="#ffbb00">
+			<SearchKeyword>{{ i18n.ts._settings.pluginBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<FormLink to="/settings/plugin/install"><template #icon><i class="ti ti-download"></i></template>{{ i18n.ts._plugin.install }}</FormLink>
 
 		<FormSection>
@@ -98,6 +102,7 @@ import MkButton from '@/components/MkButton.vue';
 import MkCode from '@/components/MkCode.vue';
 import MkFolder from '@/components/MkFolder.vue';
 import MkKeyValue from '@/components/MkKeyValue.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { changePluginActive, configPlugin, pluginLogs, uninstallPlugin, reloadPlugin } from '@/plugin.js';

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/preferences" :label="i18n.ts.preferences" :keywords="['general', 'preferences']" icon="ti ti-adjustments">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/gear_3d.png" color="#00ff9d">
+			<SearchKeyword>{{ i18n.ts._settings.preferencesBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<SearchMarker :keywords="['language']">
 			<MkSelect v-model="lang">
 				<template #label><SearchLabel>{{ i18n.ts.uiLanguage }}</SearchLabel></template>
@@ -381,6 +385,7 @@ import { definePage } from '@/page.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { prefer } from '@/preferences.js';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const lang = ref(miLocalStorage.getItem('lang'));
 const dataSaver = ref(prefer.s.dataSaver);

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/privacy" :label="i18n.ts.privacy" :keywords="['privacy']" icon="ti ti-lock-open">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/unlocked_3d.png" color="#aeff00">
+			<SearchKeyword>{{ i18n.ts._settings.privacyBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<SearchMarker :keywords="['follow', 'lock']">
 			<MkSwitch v-model="isLocked" @update:modelValue="save()">
 				<template #label><SearchLabel>{{ i18n.ts.makeFollowManuallyApprove }}</SearchLabel></template>
@@ -189,6 +193,7 @@ import MkInput from '@/components/MkInput.vue';
 import * as os from '@/os.js';
 import MkDisableSection from '@/components/MkDisableSection.vue';
 import MkInfo from '@/components/MkInfo.vue';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const $i = signinRequired();
 

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/security" :label="i18n.ts.security" :keywords="['security']" icon="ti ti-lock" :inlining="['2fa']">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/locked_with_key_3d.png" color="#ffbf00">
+			<SearchKeyword>{{ i18n.ts._settings.securityBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<SearchMarker :keywords="['password']">
 			<FormSection first>
 				<template #label><SearchLabel>{{ i18n.ts.password }}</SearchLabel></template>
@@ -59,6 +63,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const pagination = {
 	endpoint: 'i/signin-history' as const,

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

@@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <SearchMarker path="/settings/sounds" :label="i18n.ts.sounds" :keywords="['sounds']" icon="ti ti-music">
 	<div class="_gaps_m">
+		<MkFeatureBanner icon="/client-assets/speaker_high_volume_3d.png" color="#ff006f">
+			<SearchKeyword>{{ i18n.ts._settings.soundsBanner }}</SearchKeyword>
+		</MkFeatureBanner>
+
 		<SearchMarker :keywords="['mute']">
 			<MkPreferenceContainer k="sound.notUseSound">
 				<MkSwitch v-model="notUseSound">
@@ -70,6 +74,7 @@ import { operationTypes } from '@/utility/sound.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkPreferenceContainer from '@/components/MkPreferenceContainer.vue';
 import { PREF_DEF } from '@/preferences/def.js';
+import MkFeatureBanner from '@/components/MkFeatureBanner.vue';
 
 const notUseSound = prefer.model('sound.notUseSound');
 const useSoundOnlyWhenActive = prefer.model('sound.useSoundOnlyWhenActive');

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

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <SearchMarker path="/settings/theme" :label="i18n.ts.theme" :keywords="['theme']" icon="ti ti-palette">
-	<div class="_gaps_m rsljpzjq">
+	<div class="_gaps_m">
 		<div v-adaptive-border class="rfqxtzch _panel">
 			<div class="toggle">
 				<div class="toggleWrapper">
@@ -36,23 +36,149 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 
-		<div class="selects">
-			<div class="select">
+		<div class="_gaps">
+			<template v-if="!darkMode">
 				<SearchMarker :keywords="['light', 'theme']">
-					<MkSelect v-model="lightThemeId" large :items="lightThemeSelectorItems">
+					<MkFolder :defaultOpen="true" :max-height="500">
+						<template #icon><i class="ti ti-sun"></i></template>
 						<template #label><SearchLabel>{{ i18n.ts.themeForLightMode }}</SearchLabel></template>
-						<template #prefix><i class="ti ti-sun"></i></template>
-					</MkSelect>
+						<template #caption>{{ lightThemeName }}</template>
+
+						<div class="_gaps_m">
+							<FormSection v-if="instanceLightTheme != null" first>
+								<template #label>{{ i18n.ts._theme.instanceTheme }}</template>
+								<div :class="$style.themeSelect">
+									<div :class="$style.themeItemOuter">
+										<input
+											:id="`themeRadio_${instanceLightTheme.id}`"
+											v-model="lightThemeId"
+											type="radio"
+											name="lightTheme"
+											:class="$style.themeRadio"
+											:value="instanceLightTheme.id"
+										/>
+										<label :for="`themeRadio_${instanceLightTheme.id}`" :class="$style.themeItemRoot" class="_button">
+											<MkThemePreview :theme="instanceLightTheme" :class="$style.themeItemPreview"/>
+											<div :class="$style.themeItemCaption">{{ instanceLightTheme.name }}</div>
+										</label>
+									</div>
+								</div>
+							</FormSection>
+
+							<FormSection v-if="installedLightThemes.length > 0" :first="instanceLightTheme == null">
+								<template #label>{{ i18n.ts._theme.installedThemes }}</template>
+								<div :class="$style.themeSelect">
+									<div v-for="theme in installedLightThemes" :class="$style.themeItemOuter">
+										<input
+											:id="`themeRadio_${theme.id}`"
+											v-model="lightThemeId"
+											type="radio"
+											name="lightTheme"
+											:class="$style.themeRadio"
+											:value="theme.id"
+										/>
+										<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
+											<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
+											<div :class="$style.themeItemCaption">{{ theme.name }}</div>
+										</label>
+									</div>
+								</div>
+							</FormSection>
+
+							<FormSection :first="installedLightThemes.length === 0 && instanceLightTheme == null">
+								<template #label>{{ i18n.ts._theme.builtinThemes }}</template>
+								<div :class="$style.themeSelect">
+									<div v-for="theme in builtinLightThemes" :class="$style.themeItemOuter">
+										<input
+											:id="`themeRadio_${theme.id}`"
+											v-model="lightThemeId"
+											type="radio"
+											name="lightTheme"
+											:class="$style.themeRadio"
+											:value="theme.id"
+										/>
+										<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
+											<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
+											<div :class="$style.themeItemCaption">{{ theme.name }}</div>
+										</label>
+									</div>
+								</div>
+							</FormSection>
+						</div>
+					</MkFolder>
 				</SearchMarker>
-			</div>
-			<div class="select">
+			</template>
+			<template v-else>
 				<SearchMarker :keywords="['dark', 'theme']">
-					<MkSelect v-model="darkThemeId" large :items="darkThemeSelectorItems">
+					<MkFolder :defaultOpen="true" :max-height="500">
+						<template #icon><i class="ti ti-moon"></i></template>
 						<template #label><SearchLabel>{{ i18n.ts.themeForDarkMode }}</SearchLabel></template>
-						<template #prefix><i class="ti ti-moon"></i></template>
-					</MkSelect>
+						<template #caption>{{ darkThemeName }}</template>
+
+						<div class="_gaps_m">
+							<FormSection v-if="instanceDarkTheme != null" first>
+								<template #label>{{ i18n.ts._theme.instanceTheme }}</template>
+								<div :class="$style.themeSelect">
+									<div :class="$style.themeItemOuter">
+										<input
+											:id="`themeRadio_${instanceDarkTheme.id}`"
+											v-model="darkThemeId"
+											type="radio"
+											name="darkTheme"
+											:class="$style.themeRadio"
+											:value="instanceDarkTheme.id"
+										/>
+										<label :for="`themeRadio_${instanceDarkTheme.id}`" :class="$style.themeItemRoot" class="_button">
+											<MkThemePreview :theme="instanceDarkTheme" :class="$style.themeItemPreview"/>
+											<div :class="$style.themeItemCaption">{{ instanceDarkTheme.name }}</div>
+										</label>
+									</div>
+								</div>
+							</FormSection>
+
+							<FormSection v-if="installedDarkThemes.length > 0" :first="instanceDarkTheme == null">
+								<template #label>{{ i18n.ts._theme.installedThemes }}</template>
+								<div :class="$style.themeSelect">
+									<div v-for="theme in installedDarkThemes" :class="$style.themeItemOuter">
+										<input
+											:id="`themeRadio_${theme.id}`"
+											v-model="darkThemeId"
+											type="radio"
+											name="darkTheme"
+											:class="$style.themeRadio"
+											:value="theme.id"
+										/>
+										<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
+											<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
+											<div :class="$style.themeItemCaption">{{ theme.name }}</div>
+										</label>
+									</div>
+								</div>
+							</FormSection>
+
+							<FormSection :first="installedDarkThemes.length === 0 && instanceDarkTheme == null">
+								<template #label>{{ i18n.ts._theme.builtinThemes }}</template>
+								<div :class="$style.themeSelect">
+									<div v-for="theme in builtinDarkThemes" :class="$style.themeItemOuter">
+										<input
+											:id="`themeRadio_${theme.id}`"
+											v-model="darkThemeId"
+											type="radio"
+											name="darkTheme"
+											:class="$style.themeRadio"
+											:value="theme.id"
+										/>
+										<label :for="`themeRadio_${theme.id}`" :class="$style.themeItemRoot" class="_button">
+											<MkThemePreview :theme="theme" :class="$style.themeItemPreview"/>
+											<div :class="$style.themeItemCaption">{{ theme.name }}</div>
+										</label>
+									</div>
+								</div>
+							</FormSection>
+						</div>
+					</MkFolder>
 				</SearchMarker>
-			</div>
+			</template>
 		</div>
 
 		<FormSection>
@@ -77,12 +203,13 @@ import { computed, onActivated, ref, watch } from 'vue';
 import JSON5 from 'json5';
 import defaultLightTheme from '@@/themes/l-light.json5';
 import defaultDarkTheme from '@@/themes/d-green-lime.json5';
-import type { MkSelectItem } from '@/components/MkSelect.vue';
+import type { Theme } from '@/theme.js';
 import MkSwitch from '@/components/MkSwitch.vue';
-import MkSelect from '@/components/MkSelect.vue';
 import FormSection from '@/components/form/section.vue';
 import FormLink from '@/components/form/link.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkFolder from '@/components/MkFolder.vue';
+import MkThemePreview from '@/components/MkThemePreview.vue';
 import { getBuiltinThemesRef } from '@/theme.js';
 import { selectFile } from '@/utility/select-file.js';
 import { isDeviceDarkmode } from '@/utility/is-device-darkmode.js';
@@ -99,79 +226,16 @@ import { prefer } from '@/preferences.js';
 const installedThemes = ref(getThemes());
 const builtinThemes = getBuiltinThemesRef();
 
-const instanceDarkTheme = computed(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
+const instanceDarkTheme = computed<Theme | null>(() => instance.defaultDarkTheme ? JSON5.parse(instance.defaultDarkTheme) : null);
 const installedDarkThemes = computed(() => installedThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
 const builtinDarkThemes = computed(() => builtinThemes.value.filter(t => t.base === 'dark' || t.kind === 'dark'));
-const instanceLightTheme = computed(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
+const instanceLightTheme = computed<Theme | null>(() => instance.defaultLightTheme ? JSON5.parse(instance.defaultLightTheme) : null);
 const installedLightThemes = computed(() => installedThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
 const builtinLightThemes = computed(() => builtinThemes.value.filter(t => t.base === 'light' || t.kind === 'light'));
 const themes = computed(() => uniqueBy([instanceDarkTheme.value, instanceLightTheme.value, ...builtinThemes.value, ...installedThemes.value].filter(x => x != null), theme => theme.id));
 
-const lightThemeSelectorItems = computed(() => {
-	const items = [] as MkSelectItem[];
-	if (instanceLightTheme.value) {
-		items.push({
-			type: 'option',
-			value: instanceLightTheme.value.id,
-			label: instanceLightTheme.value.name,
-		});
-	}
-	if (installedLightThemes.value.length > 0) {
-		items.push({
-			type: 'group',
-			label: i18n.ts._theme.installedThemes,
-			items: installedLightThemes.value.map(x => ({
-				type: 'option',
-				value: x.id,
-				label: x.name,
-			})),
-		});
-	}
-	items.push({
-		type: 'group',
-		label: i18n.ts._theme.builtinThemes,
-		items: builtinLightThemes.value.map(x => ({
-			type: 'option',
-			value: x.id,
-			label: x.name,
-		})),
-	});
-	return items;
-});
-
-const darkThemeSelectorItems = computed(() => {
-	const items = [] as MkSelectItem[];
-	if (instanceDarkTheme.value) {
-		items.push({
-			type: 'option',
-			value: instanceDarkTheme.value.id,
-			label: instanceDarkTheme.value.name,
-		});
-	}
-	if (installedDarkThemes.value.length > 0) {
-		items.push({
-			type: 'group',
-			label: i18n.ts._theme.installedThemes,
-			items: installedDarkThemes.value.map(x => ({
-				type: 'option',
-				value: x.id,
-				label: x.name,
-			})),
-		});
-	}
-	items.push({
-		type: 'group',
-		label: i18n.ts._theme.builtinThemes,
-		items: builtinDarkThemes.value.map(x => ({
-			type: 'option',
-			value: x.id,
-			label: x.name,
-		})),
-	});
-	return items;
-});
-
 const darkTheme = prefer.r.darkTheme;
+const darkThemeName = computed(() => darkTheme.value?.name ?? defaultDarkTheme.name);
 const darkThemeId = computed({
 	get() {
 		return darkTheme.value ? darkTheme.value.id : defaultDarkTheme.id;
@@ -184,6 +248,7 @@ const darkThemeId = computed({
 	},
 });
 const lightTheme = prefer.r.lightTheme;
+const lightThemeName = computed(() => lightTheme.value?.name ?? defaultLightTheme.name);
 const lightThemeId = computed({
 	get() {
 		return lightTheme.value ? lightTheme.value.id : defaultLightTheme.id;
@@ -236,6 +301,57 @@ definePage(() => ({
 }));
 </script>
 
+<style module>
+.themeSelect {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+	gap: var(--MI-margin);
+}
+
+.themeItemOuter {
+	position: relative;
+}
+
+.themeRadio {
+	position: absolute;
+	clip: rect(0, 0, 0, 0);
+	pointer-events: none;
+}
+
+.themeItemRoot {
+	position: relative;
+	display: block;
+	overflow: clip;
+	box-sizing: border-box;
+	border: 2px solid var(--MI_THEME-divider);
+	border-radius: var(--MI-radius);
+}
+
+.themeRadio:focus-visible + .themeItemRoot {
+	outline: 2px solid var(--MI_THEME-focus);
+	outline-offset: 2px;
+}
+
+.themeRadio:checked + .themeItemRoot {
+	border-color: var(--MI_THEME-accent);
+}
+
+.themeItemPreview {
+	display: block;
+	width: calc(100% + 2px);
+	height: auto;
+	margin-left: -1px;
+	border-bottom: 1px solid var(--MI_THEME-divider);
+}
+
+.themeItemCaption {
+	box-sizing: border-box;
+	padding: 8px 12px;
+	text-align: center;
+	font-size: 80%;
+}
+</style>
+
 <style lang="scss" scoped>
 .rfqxtzch {
 	border-radius: 6px;
@@ -471,17 +587,4 @@ definePage(() => ({
 		border-top: solid 0.5px var(--MI_THEME-divider);
 	}
 }
-
-.rsljpzjq {
-	> .selects {
-		display: flex;
-		gap: 1.5em var(--MI-margin);
-		flex-wrap: wrap;
-
-		> .select {
-			flex: 1;
-			min-width: 280px;
-		}
-	}
-}
 </style>

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

@@ -1,57 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="_gaps_m">
-	<FormLink :to="`/settings/webhook/new`">
-		{{ i18n.ts._webhookSettings.createWebhook }}
-	</FormLink>
-
-	<FormSection>
-		<MkPagination :pagination="pagination">
-			<template #default="{items}">
-				<div class="_gaps">
-					<FormLink v-for="webhook in items" :key="webhook.id" :to="`/settings/webhook/edit/${webhook.id}`">
-						<template #icon>
-							<i v-if="webhook.active === false" class="ti ti-player-pause"></i>
-							<i v-else-if="webhook.latestStatus === null" class="ti ti-circle"></i>
-							<i v-else-if="[200, 201, 204].includes(webhook.latestStatus)" class="ti ti-check" :style="{ color: 'var(--MI_THEME-success)' }"></i>
-							<i v-else class="ti ti-alert-triangle" :style="{ color: 'var(--MI_THEME-error)' }"></i>
-						</template>
-						{{ webhook.name || webhook.url }}
-						<template #suffix>
-							<MkTime v-if="webhook.latestSentAt" :time="webhook.latestSentAt"></MkTime>
-						</template>
-					</FormLink>
-				</div>
-			</template>
-		</MkPagination>
-	</FormSection>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import MkPagination from '@/components/MkPagination.vue';
-import FormSection from '@/components/form/section.vue';
-import FormLink from '@/components/form/link.vue';
-import { definePage } from '@/page.js';
-import { i18n } from '@/i18n.js';
-
-const pagination = {
-	endpoint: 'i/webhooks/list' as const,
-	limit: 100,
-	noPaging: true,
-};
-
-const headerActions = computed(() => []);
-
-const headerTabs = computed(() => []);
-
-definePage(() => ({
-	title: 'Webhook',
-	icon: 'ti ti-webhook',
-}));
-</script>

packages/frontend/src/preferences/def.ts

@@ -9,6 +9,7 @@ import type { Theme } from '@/theme.js';
 import type { SoundType } from '@/utility/sound.js';
 import type { Plugin } from '@/plugin.js';
 import type { DeviceKind } from '@/utility/device-kind.js';
+import type { Column, DeckProfile } from '@/deck.js';
 import { DEFAULT_DEVICE_KIND } from '@/utility/device-kind.js';
 
 /** サウンド設定 */
@@ -45,6 +46,14 @@ export const PREF_DEF = {
 			data: Record<string, any>;
 		}[],
 	},
+	'deck.profile': {
+		accountDependent: true,
+		default: null as string | null,
+	},
+	'deck.profiles': {
+		accountDependent: true,
+		default: [] as DeckProfile[],
+	},
 
 	overridedDeviceKind: {
 		default: null as DeviceKind | null,

packages/frontend/src/preferences/profile.ts

@@ -42,6 +42,8 @@ export type PreferencesProfile = {
 	syncByAccount: [Account, keyof PREF][],
 };
 
+// TODO: 任意のプロパティをデバイス間で同期できるようにする？
+
 export class ProfileManager extends EventEmitter<{
 	updated: (ctx: {
 		profile: PreferencesProfile

packages/frontend/src/preferences/store.ts

@@ -45,12 +45,14 @@ export class Store<Data extends Record<string, any>> extends EventEmitter<StoreE
 	}
 
 	public commit<K extends keyof Data>(key: K, value: Data[K]) {
-		this.r[key].value = this.s[key] = value;
-		this.emit('updated', { key, value });
+		const v = JSON.parse(JSON.stringify(value)); // deep copy 兼 vueのプロキシ解除
+		this.r[key].value = this.s[key] = v;
+		this.emit('updated', { key, value: v });
 	}
 
 	public rewrite<K extends keyof Data>(key: K, value: Data[K]) {
-		this.r[key].value = this.s[key] = value;
+		const v = JSON.parse(JSON.stringify(value)); // deep copy 兼 vueのプロキシ解除
+		this.r[key].value = this.s[key] = v;
 	}
 
 	/**

packages/frontend/src/router/definition.ts

@@ -134,33 +134,29 @@ const routes: RouteDef[] = [{
 		name: 'plugin',
 		component: page(() => import('@/pages/settings/plugin.vue')),
 	}, {
-		path: '/import-export',
-		name: 'import-export',
-		component: page(() => import('@/pages/settings/import-export.vue')),
+		path: '/account-data',
+		name: 'account-data',
+		component: page(() => import('@/pages/settings/account-data.vue')),
 	}, {
 		path: '/mute-block',
 		name: 'mute-block',
 		component: page(() => import('@/pages/settings/mute-block.vue')),
 	}, {
-		path: '/api',
-		name: 'api',
-		component: page(() => import('@/pages/settings/api.vue')),
+		path: '/connect',
+		name: 'connect',
+		component: page(() => import('@/pages/settings/connect.vue')),
 	}, {
 		path: '/apps',
-		name: 'api',
+		name: 'connect',
 		component: page(() => import('@/pages/settings/apps.vue')),
 	}, {
 		path: '/webhook/edit/:webhookId',
-		name: 'webhook',
+		name: 'connect',
 		component: page(() => import('@/pages/settings/webhook.edit.vue')),
 	}, {
 		path: '/webhook/new',
-		name: 'webhook',
+		name: 'connect',
 		component: page(() => import('@/pages/settings/webhook.new.vue')),
-	}, {
-		path: '/webhook',
-		name: 'webhook',
-		component: page(() => import('@/pages/settings/webhook.vue')),
 	}, {
 		path: '/deck',
 		name: 'deck',

packages/frontend/src/store.ts

@@ -10,7 +10,6 @@ import darkTheme from '@@/themes/d-green-lime.json5';
 import { hemisphere } from '@@/js/intl-const.js';
 import type { DeviceKind } from '@/utility/device-kind.js';
 import type { Plugin } from '@/plugin.js';
-import type { Column } from '@/deck.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { Storage } from '@/pizzax.js';
 import { DEFAULT_DEVICE_KIND } from '@/utility/device-kind.js';
@@ -117,18 +116,6 @@ export const store = markRaw(new Storage('base', {
 		where: 'deviceAccount',
 		default: {} as Record<string, string>, // plugin id, token
 	},
-	'deck.profile': {
-		where: 'deviceAccount',
-		default: 'default',
-	},
-	'deck.columns': {
-		where: 'deviceAccount',
-		default: [] as Column[],
-	},
-	'deck.layout': {
-		where: 'deviceAccount',
-		default: [] as Column['id'][][],
-	},
 
 	enablePreferencesAutoCloudBackup: {
 		where: 'device',

packages/frontend/src/theme.ts

@@ -114,7 +114,7 @@ export function applyTheme(theme: Theme, persist = true) {
 	globalEvents.emit('themeChanging');
 }
 
-function compile(theme: Theme): Record<string, string> {
+export function compile(theme: Theme): Record<string, string> {
 	function getColor(val: string): tinycolor.Instance {
 		if (val[0] === '@') { // ref (prop)
 			return getColor(theme.props[val.substring(1)]);

packages/frontend/src/ui/deck.vue

@@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 			<div :class="$style.sideMenu">
 				<div :class="$style.sideMenuTop">
-					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${store.s['deck.profile']}`" :class="$style.sideMenuButton" class="_button" @click="changeProfile"><i class="ti ti-caret-down"></i></button>
+					<button v-tooltip.noDelay.left="`${i18n.ts._deck.profile}: ${prefer.s['deck.profile']}`" :class="$style.sideMenuButton" class="_button" @click="switchProfileMenu"><i class="ti ti-caret-down"></i></button>
 					<button v-tooltip.noDelay.left="i18n.ts._deck.deleteProfile" :class="$style.sideMenuButton" class="_button" @click="deleteProfile"><i class="ti ti-trash"></i></button>
 				</div>
 				<div :class="$style.sideMenuMiddle">
@@ -95,7 +95,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 import { computed, defineAsyncComponent, ref, watch, shallowRef } from 'vue';
 import { v4 as uuid } from 'uuid';
 import XCommon from './_common_/common.vue';
-import type { MenuItem } from '@/types/menu.js';
 import XSidebar from '@/ui/_common_/navbar.vue';
 import XDrawerMenu from '@/ui/_common_/navbar-for-mobile.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -103,7 +102,6 @@ import * as os from '@/os.js';
 import { navbarItemDef } from '@/navbar.js';
 import { $i } from '@/account.js';
 import { i18n } from '@/i18n.js';
-import { unisonReload } from '@/utility/unison-reload.js';
 import { deviceKind } from '@/utility/device-kind.js';
 import { prefer } from '@/preferences.js';
 import XMainColumn from '@/ui/deck/main-column.vue';
@@ -117,8 +115,7 @@ import XMentionsColumn from '@/ui/deck/mentions-column.vue';
 import XDirectColumn from '@/ui/deck/direct-column.vue';
 import XRoleTimelineColumn from '@/ui/deck/role-timeline-column.vue';
 import { mainRouter } from '@/router/main.js';
-import { store } from '@/store.js';
-import { columnTypes, forceSaveDeck, getProfiles, loadDeck, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
+import { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
 const XStatusBars = defineAsyncComponent(() => import('@/ui/_common_/statusbars.vue'));
 const XAnnouncements = defineAsyncComponent(() => import('@/ui/_common_/announcements.vue'));
 
@@ -137,7 +134,7 @@ const columnComponents = {
 
 mainRouter.navHook = (path, flag): boolean => {
 	if (flag === 'forcePage') return false;
-	const noMainColumn = !store.s['deck.columns'].some(x => x.type === 'main');
+	const noMainColumn = !columns.value.some(x => x.type === 'main');
 	if (prefer.s['deck.navWindow'] || noMainColumn) {
 		os.pageWindow(path);
 		return true;
@@ -160,8 +157,6 @@ watch(route, () => {
 });
 */
 
-const columns = store.r['deck.columns'];
-const layout = store.r['deck.layout'];
 const menuIndicated = computed(() => {
 	if ($i == null) return false;
 	for (const def in navbarItemDef) {
@@ -210,65 +205,20 @@ function onWheel(ev: WheelEvent) {
 document.documentElement.style.overflowY = 'hidden';
 document.documentElement.style.scrollBehavior = 'auto';
 
-loadDeck();
-
-function changeProfile(ev: MouseEvent) {
-	let items: MenuItem[] = [{
-		text: store.s['deck.profile'],
-		active: true,
-		action: () => {},
-	}];
-	getProfiles().then(profiles => {
-		items.push(...(profiles.filter(k => k !== store.s['deck.profile']).map(k => ({
-			text: k,
-			action: () => {
-				store.set('deck.profile', k);
-				unisonReload();
-			},
-		}))), { type: 'divider' as const }, {
-			text: i18n.ts._deck.newProfile,
-			icon: 'ti ti-plus',
-			action: async () => {
-				const { canceled, result: name } = await os.inputText({
-					title: i18n.ts._deck.profile,
-					minLength: 1,
-				});
-
-				if (canceled || name == null) return;
-
-				os.promiseDialog((async () => {
-					await store.set('deck.profile', name);
-					await forceSaveDeck();
-				})(), () => {
-					unisonReload();
-				});
-			},
-		});
-	}).then(() => {
-		os.popupMenu(items, ev.currentTarget ?? ev.target);
-	});
-}
-
 async function deleteProfile() {
+	if (prefer.s['deck.profile'] == null) return;
+
 	const { canceled } = await os.confirm({
 		type: 'warning',
-		text: i18n.tsx.deleteAreYouSure({ x: store.s['deck.profile'] }),
+		text: i18n.tsx.deleteAreYouSure({ x: prefer.s['deck.profile'] }),
 	});
 	if (canceled) return;
 
-	os.promiseDialog((async () => {
-		if (store.s['deck.profile'] === 'default') {
-			await store.set('deck.columns', []);
-			await store.set('deck.layout', []);
-			await forceSaveDeck();
-		} else {
-			await deleteProfile_(store.s['deck.profile']);
-		}
-		await store.set('deck.profile', 'default');
-	})(), () => {
-		unisonReload();
-	});
+	await deleteProfile_(prefer.s['deck.profile']);
+
+	os.success();
 }
+
 </script>
 
 <style>

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

@@ -100,7 +100,7 @@ function onOtherDragEnd() {
 function toggleActive() {
 	if (!props.isStacked) return;
 	updateColumn(props.column.id, {
-		active: !props.column.active,
+		active: props.column.active == null ? false : !props.column.active,
 	});
 }
 

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

@@ -33,12 +33,12 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['light', 'theme'],
 			},
 			{
-				id: 'eLOwK5Ia2',
+				id: 'CsSVILKpX',
 				label: i18n.ts.themeForDarkMode,
 				keywords: ['dark', 'theme'],
 			},
 			{
-				id: 'ujvMfyzUr',
+				id: '8wcoRp76b',
 				label: i18n.ts.setWallpaper,
 				keywords: ['wallpaper'],
 			},
@@ -52,23 +52,23 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: '6fFIRXUww',
 		children: [
 			{
-				id: 'nO7NnzqiC',
+				id: 'EcwZE7dCl',
 				label: i18n.ts.notUseSound,
 				keywords: ['mute'],
 			},
 			{
-				id: 'oALW4ja7U',
+				id: '9MxYVIf7k',
 				label: i18n.ts.useSoundOnlyWhenActive,
 				keywords: ['active', 'mute'],
 			},
 			{
-				id: 'BbJK2SKT2',
+				id: '94afQxKat',
 				label: i18n.ts.masterVolume,
 				keywords: ['volume', 'master'],
 			},
 		],
 		label: i18n.ts.sounds,
-		keywords: ['sounds'],
+		keywords: ['sounds', i18n.ts._settings.soundsBanner],
 		path: '/settings/sounds',
 		icon: 'ti ti-music',
 	},
@@ -76,10 +76,10 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: '5BjnxMfYV',
 		children: [
 			{
-				id: '3UqdSCaFw',
+				id: '75QPEg57v',
 				children: [
 					{
-						id: '75QPEg57v',
+						id: 'CiHijRkGG',
 						label: i18n.ts.changePassword,
 						keywords: [],
 					},
@@ -111,7 +111,7 @@ export const searchIndexes: SearchIndexItem[] = [
 			},
 		],
 		label: i18n.ts.security,
-		keywords: ['security'],
+		keywords: ['security', i18n.ts._settings.securityBanner],
 		path: '/settings/security',
 		icon: 'ti ti-lock',
 	},
@@ -195,65 +195,65 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: '2rp9ka5Ht',
 		children: [
 			{
-				id: 'qBUSKPxLW',
+				id: 'BhAQiHogN',
 				label: i18n.ts.makeFollowManuallyApprove,
 				keywords: ['follow', 'lock', i18n.ts.lockedAccountInfo],
 			},
 			{
-				id: '3LZBlZCej',
+				id: '4DeWGsPaD',
 				label: i18n.ts.autoAcceptFollowed,
 				keywords: ['follow', 'auto', 'accept'],
 			},
 			{
-				id: '9gOp28wKG',
+				id: 'iaM6zUmO9',
 				label: i18n.ts.makeReactionsPublic,
 				keywords: ['reaction', 'public', i18n.ts.makeReactionsPublicDescription],
 			},
 			{
-				id: 'CjAkqMhct',
+				id: '5Q6uhghzV',
 				label: i18n.ts.followingVisibility,
 				keywords: ['following', 'visibility'],
 			},
 			{
-				id: '4nEwI6LYt',
+				id: 'pZ9q65FX5',
 				label: i18n.ts.followersVisibility,
 				keywords: ['follower', 'visibility'],
 			},
 			{
-				id: 'naMp37wTL',
+				id: 'DMS4yvAGg',
 				label: i18n.ts.hideOnlineStatus,
 				keywords: ['online', 'status', i18n.ts.hideOnlineStatusDescription],
 			},
 			{
-				id: 'p0dCVR0UP',
+				id: '8rEsGuN8w',
 				label: i18n.ts.noCrawle,
 				keywords: ['crawle', 'index', 'search', i18n.ts.noCrawleDescription],
 			},
 			{
-				id: 'aceURmNPq',
+				id: 's7LdSpiLn',
 				label: i18n.ts.preventAiLearning,
 				keywords: ['crawle', 'ai', i18n.ts.preventAiLearningDescription],
 			},
 			{
-				id: 'ahABA0j7u',
+				id: 'l2Wf1s2ad',
 				label: i18n.ts.makeExplorable,
 				keywords: ['explore', i18n.ts.makeExplorableDescription],
 			},
 			{
-				id: 'cyeDbLN8N',
+				id: '7vr04wKol',
 				children: [
 					{
-						id: 'xEYlOghao',
+						id: 'Av7fAaHv8',
 						label: i18n.ts._accountSettings.requireSigninToViewContents,
 						keywords: ['login', 'signin'],
 					},
 					{
-						id: 'sMmYFCS60',
+						id: 'lUtOQbnwi',
 						label: i18n.ts._accountSettings.makeNotesFollowersOnlyBefore,
 						keywords: ['follower', i18n.ts._accountSettings.makeNotesFollowersOnlyBeforeDescription],
 					},
 					{
-						id: 'ebJ9IUbik',
+						id: '83WWcjwS9',
 						label: i18n.ts._accountSettings.makeNotesHiddenBefore,
 						keywords: ['hidden', i18n.ts._accountSettings.makeNotesHiddenBeforeDescription],
 					},
@@ -263,7 +263,7 @@ export const searchIndexes: SearchIndexItem[] = [
 			},
 		],
 		label: i18n.ts.privacy,
-		keywords: ['privacy'],
+		keywords: ['privacy', i18n.ts._settings.privacyBanner],
 		path: '/settings/privacy',
 		icon: 'ti ti-lock-open',
 	},
@@ -271,75 +271,75 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: '3yCAv0IsZ',
 		children: [
 			{
-				id: 'x1GWSQnPw',
+				id: 'kMJ5laK3n',
 				label: i18n.ts.uiLanguage,
 				keywords: ['language'],
 			},
 			{
-				id: 'EOSa4rtt3',
+				id: 'dlKebHH6k',
 				label: i18n.ts.overridedDeviceKind,
 				keywords: ['device', 'type', 'kind', 'smartphone', 'tablet', 'desktop'],
 			},
 			{
-				id: 'm9LhX8BG8',
+				id: 'nxvMUir3T',
 				label: i18n.ts.showFixedPostForm,
 				keywords: ['post', 'form', 'timeline'],
 			},
 			{
-				id: 'snyCQ5oKE',
+				id: '84MdeDWL1',
 				label: i18n.ts.showFixedPostFormInChannel,
 				keywords: ['post', 'form', 'timeline', 'channel'],
 			},
 			{
-				id: '8j36S4Ev6',
+				id: 'dOig3ye4Z',
 				label: i18n.ts.pinnedList,
 				keywords: ['pinned', 'list'],
 			},
 			{
-				id: 'CWpyT9vLK',
+				id: '4huRldNp5',
 				label: i18n.ts.enableQuickAddMfmFunction,
 				keywords: ['mfm', 'enable', 'show', 'advanced', 'picker', 'form', 'function', 'fn'],
 			},
 			{
-				id: '1yhown1Xc',
+				id: '1x3JNXj8N',
 				label: i18n.ts.rememberNoteVisibility,
 				keywords: ['remember', 'keep', 'note', 'visibility'],
 			},
 			{
-				id: 'wUeAI5QBV',
+				id: 'CfAg0Qekq',
 				label: i18n.ts.defaultNoteVisibility,
 				keywords: ['default', 'note', 'visibility'],
 			},
 			{
-				id: '6kMj4HVOg',
+				id: 'tMm9kH9gy',
 				children: [
 					{
-						id: 'DQIcvf64G',
+						id: 'hDdVkBFJP',
 						label: i18n.ts.collapseRenotes,
 						keywords: ['renote', i18n.ts.collapseRenotesDescription],
 					},
 					{
-						id: 'igFN7RIUa',
+						id: 'uJJyDABGu',
 						label: i18n.ts.showNoteActionsOnlyHover,
 						keywords: ['hover', 'show', 'footer', 'action'],
 					},
 					{
-						id: '9uxocbLO0',
+						id: 'ufc2X9voy',
 						label: i18n.ts.showClipButtonInNoteFooter,
 						keywords: ['footer', 'action', 'clip', 'show'],
 					},
 					{
-						id: 'eaT1O1Fao',
+						id: '7Jwvu8bK6',
 						label: i18n.ts.enableAdvancedMfm,
 						keywords: ['mfm', 'enable', 'show', 'advanced'],
 					},
 					{
-						id: 'omxZk3eET',
+						id: 'yb11lSY1G',
 						label: i18n.ts.showReactionsCount,
 						keywords: ['reaction', 'count', 'show'],
 					},
 					{
-						id: 'epvi2Nv2G',
+						id: 'fL49Zxe9i',
 						label: i18n.ts.loadRawImages,
 						keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'quality', 'raw', 'attachment'],
 					},
@@ -348,10 +348,10 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['note'],
 			},
 			{
-				id: 'jb3HUeyrx',
+				id: 'bUOs2UKY4',
 				children: [
 					{
-						id: 'ykifk3NHS',
+						id: 'c8gA9Xj2a',
 						label: i18n.ts.useGroupedNotifications,
 						keywords: ['group'],
 					},
@@ -360,60 +360,60 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['notification'],
 			},
 			{
-				id: 'abEAdSpYY',
+				id: 'tjGzqy3qa',
 				children: [
 					{
-						id: 'lBbtAg0Hm',
+						id: '3OeHscv45',
 						label: i18n.ts.openImageInNewTab,
 						keywords: ['image', 'photo', 'picture', 'media', 'thumbnail', 'new', 'tab'],
 					},
 					{
-						id: 'E9whefUtX',
+						id: 'bFsNusspF',
 						label: i18n.ts.useReactionPickerForContextMenu,
 						keywords: ['reaction', 'picker', 'contextmenu', 'open'],
 					},
 					{
-						id: 'iQaBbJBva',
+						id: '2h3rY1izt',
 						label: i18n.ts.enableInfiniteScroll,
 						keywords: ['load', 'auto', 'more'],
 					},
 					{
-						id: 'hgEVGgJa1',
+						id: 'pkK3eeFKm',
 						label: i18n.ts.disableStreamingTimeline,
 						keywords: ['disable', 'streaming', 'timeline'],
 					},
 					{
-						id: 'yxehrHZ6x',
+						id: 'y2v7CV9zs',
 						label: i18n.ts.alwaysConfirmFollow,
 						keywords: ['follow', 'confirm', 'always'],
 					},
 					{
-						id: 'DdoFLaSG8',
+						id: 'A8a5hcLce',
 						label: i18n.ts.confirmWhenRevealingSensitiveMedia,
 						keywords: ['sensitive', 'nsfw', 'media', 'image', 'photo', 'picture', 'attachment', 'confirm'],
 					},
 					{
-						id: 'uIMCIK7kG',
+						id: 'utFrfuW7X',
 						label: i18n.ts.confirmOnReact,
 						keywords: ['reaction', 'confirm'],
 					},
 					{
-						id: 'zvM13vl26',
+						id: 'kmdsnVIQX',
 						label: i18n.ts.keepCw,
 						keywords: ['remember', 'keep', 'note', 'cw'],
 					},
 					{
-						id: 'm75VEWI3S',
+						id: 'mNRK0pt8L',
 						label: i18n.ts.whenServerDisconnected,
 						keywords: ['server', 'disconnect', 'reconnect', 'reload', 'streaming'],
 					},
 					{
-						id: 'bLO9vCyKW',
+						id: 'vE7KeV4U4',
 						label: i18n.ts.numberOfPageCache,
 						keywords: ['cache', 'page'],
 					},
 					{
-						id: 'iQ7Er89l5',
+						id: 'eJ2jme16W',
 						label: i18n.ts.dataSaver,
 						keywords: ['datasaver'],
 					},
@@ -422,20 +422,20 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['behavior'],
 			},
 			{
-				id: 'C2WYcVM1d',
+				id: 'F3kpUNvSQ',
 				children: [
 					{
-						id: 'Cu7ErCM7C',
+						id: '4bfFRM0UD',
 						label: i18n.ts.forceShowAds,
 						keywords: ['ad', 'show'],
 					},
 					{
-						id: 'BBxwy4F6E',
+						id: '2pB0jWBHo',
 						label: i18n.ts.hemisphere,
 						keywords: [],
 					},
 					{
-						id: '9YdUwDC8d',
+						id: 'eIvnR6Xxo',
 						label: i18n.ts.additionalEmojiDictionary,
 						keywords: ['emoji', 'dictionary', 'additional', 'extra'],
 					},
@@ -445,14 +445,14 @@ export const searchIndexes: SearchIndexItem[] = [
 			},
 		],
 		label: i18n.ts.preferences,
-		keywords: ['general', 'preferences'],
+		keywords: ['general', 'preferences', i18n.ts._settings.preferencesBanner],
 		path: '/settings/preferences',
 		icon: 'ti ti-adjustments',
 	},
 	{
 		id: 'mwkwtw83Y',
 		label: i18n.ts.plugins,
-		keywords: ['plugin'],
+		keywords: ['plugin', 'addon', 'extension', i18n.ts._settings.pluginBanner],
 		path: '/settings/plugin',
 		icon: 'ti ti-plug',
 	},
@@ -494,10 +494,10 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: '3icEvyv2D',
 		children: [
 			{
-				id: 'Tyt3gZTy',
+				id: 'lO3uFTkPN',
 				children: [
 					{
-						id: '9b7ZURyAt',
+						id: '5JKaXRqyt',
 						label: i18n.ts.showMutedWord,
 						keywords: ['show'],
 					},
@@ -506,85 +506,36 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['note', 'word', 'soft', 'mute', 'hide'],
 			},
 			{
-				id: 'kdMk41II0',
+				id: 'fMkjL3dK4',
 				label: i18n.ts.hardWordMute,
 				keywords: ['note', 'word', 'hard', 'mute', 'hide'],
 			},
 			{
-				id: 'mjORQamAK',
+				id: 'cimSzQXN0',
 				label: i18n.ts.instanceMute,
 				keywords: ['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide'],
 			},
 			{
-				id: '1ZT7S9FZd',
+				id: 'gq8rPy3Du',
 				label: `${i18n.ts.mutedUsers} (${ i18n.ts.renote })`,
 				keywords: ['renote', 'mute', 'hide', 'user'],
 			},
 			{
-				id: 'ANrPit3kQ',
+				id: 'mh2r7EUbF',
 				label: i18n.ts.mutedUsers,
 				keywords: ['note', 'mute', 'hide', 'user'],
 			},
 			{
-				id: 'bPAE4lfno',
+				id: 'AUS1OgHrn',
 				label: i18n.ts.blockedUsers,
 				keywords: ['block', 'user'],
 			},
 		],
 		label: i18n.ts.muteAndBlock,
-		keywords: ['mute', 'block'],
+		keywords: ['mute', 'block', i18n.ts._settings.muteAndBlockBanner],
 		path: '/settings/mute-block',
 		icon: 'ti ti-ban',
 	},
-	{
-		id: 'qE2vLlMkF',
-		children: [
-			{
-				id: 'hPPEzjvZC',
-				label: i18n.ts._exportOrImport.allNotes,
-				keywords: ['notes'],
-			},
-			{
-				id: 'AFaeHsCUB',
-				label: i18n.ts._exportOrImport.favoritedNotes,
-				keywords: ['favorite', 'notes'],
-			},
-			{
-				id: 'xyCPmQiRo',
-				label: i18n.ts._exportOrImport.clips,
-				keywords: ['clip', 'notes'],
-			},
-			{
-				id: 'Ch7hWAGUy',
-				label: i18n.ts._exportOrImport.followingList,
-				keywords: ['following', 'users'],
-			},
-			{
-				id: 'AwPgFboEx',
-				label: i18n.ts._exportOrImport.userLists,
-				keywords: ['user', 'lists'],
-			},
-			{
-				id: 'nporiHshC',
-				label: i18n.ts._exportOrImport.muteList,
-				keywords: ['mute', 'users'],
-			},
-			{
-				id: 'BsCzR7vNw',
-				label: i18n.ts._exportOrImport.blockingList,
-				keywords: ['block', 'users'],
-			},
-			{
-				id: 'dvf4IgYrQ',
-				label: i18n.ts.antennas,
-				keywords: ['antennas'],
-			},
-		],
-		label: i18n.ts.importAndExport,
-		keywords: ['import', 'export', 'data'],
-		path: '/settings/import-export',
-		icon: 'ti ti-package',
-	},
 	{
 		id: '3Tcxw4Fwl',
 		children: [
@@ -613,46 +564,65 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: 'tnYoppRiv',
 		children: [
 			{
-				id: 'ncIq6TAR2',
+				id: 'cN3dsGNxu',
 				label: i18n.ts.usageAmount,
 				keywords: ['capacity', 'usage'],
 			},
 			{
-				id: '2c4CQSvSr',
+				id: 'rOAOU2P6C',
 				label: i18n.ts.statistics,
 				keywords: ['statistics', 'usage'],
 			},
 			{
-				id: 'pepHELHMt',
+				id: 'uXGlQXATx',
 				label: i18n.ts.uploadFolder,
 				keywords: ['default', 'upload', 'folder'],
 			},
 			{
-				id: 'xqOWrABxV',
+				id: 'goQdtf3dD',
 				label: i18n.ts.keepOriginalUploading,
 				keywords: ['keep', 'original', 'raw', 'upload', i18n.ts.keepOriginalUploadingDescription],
 			},
 			{
-				id: 'D8HUTGWE1',
+				id: '83xRo0XJl',
 				label: i18n.ts.keepOriginalFilename,
 				keywords: ['keep', 'original', 'filename', i18n.ts.keepOriginalFilenameDescription],
 			},
 			{
-				id: '6xAvsWSZi',
+				id: 'wf77yRQQq',
 				label: i18n.ts.alwaysMarkSensitive,
 				keywords: ['always', 'default', 'mark', 'nsfw', 'sensitive', 'media', 'file'],
 			},
 			{
-				id: 'csNNPF1KX',
+				id: '3pxwNB8e4',
 				label: i18n.ts.enableAutoSensitive,
 				keywords: ['auto', 'nsfw', 'sensitive', 'media', 'file', i18n.ts.enableAutoSensitiveDescription],
 			},
 		],
 		label: i18n.ts.drive,
-		keywords: ['drive'],
+		keywords: ['drive', i18n.ts._settings.driveBanner],
 		path: '/settings/drive',
 		icon: 'ti ti-cloud',
 	},
+	{
+		id: 'BlJ2rsw9h',
+		children: [
+			{
+				id: '9bLU1nIjt',
+				label: i18n.ts._settings.api,
+				keywords: ['api', 'app', 'token', 'accessToken'],
+			},
+			{
+				id: '5VSGOVYR0',
+				label: i18n.ts.manage,
+				keywords: ['webhook'],
+			},
+		],
+		label: i18n.ts._settings.serviceConnection,
+		keywords: ['app', 'service', 'connect', 'webhook', 'api', 'token', i18n.ts._settings.serviceConnectionBanner],
+		path: '/settings/connect',
+		icon: 'ti ti-link',
+	},
 	{
 		id: 'gtaOSdIJB',
 		label: i18n.ts.avatarDecorations,
@@ -664,85 +634,85 @@ export const searchIndexes: SearchIndexItem[] = [
 		id: 'AqPvMgn3A',
 		children: [
 			{
-				id: 'j5gTtuMWP',
+				id: '1wtOIwAdm',
 				label: i18n.ts.useBlurEffect,
 				keywords: ['blur'],
 			},
 			{
-				id: 'C05WQNSIJ',
+				id: '6fLNMTwNt',
 				label: i18n.ts.useBlurEffectForModal,
 				keywords: ['blur', 'modal'],
 			},
 			{
-				id: 'snVKNr7Bw',
+				id: 'E0WXhhRB1',
 				label: i18n.ts.highlightSensitiveMedia,
 				keywords: ['highlight', 'sensitive', 'nsfw', 'image', 'photo', 'picture', 'media', 'thumbnail'],
 			},
 			{
-				id: 'DsS2CwjYE',
+				id: '7iZsGkplG',
 				label: i18n.ts.squareAvatars,
 				keywords: ['avatar', 'icon', 'square'],
 			},
 			{
-				id: 'xCcTDl651',
+				id: 'AfRMcC6IM',
 				label: i18n.ts.showAvatarDecorations,
 				keywords: ['avatar', 'icon', 'decoration', 'show'],
 			},
 			{
-				id: '3dHw723VD',
+				id: 'i7aSaEWaT',
 				label: i18n.ts.showGapBetweenNotesInTimeline,
 				keywords: ['note', 'timeline', 'gap'],
 			},
 			{
-				id: 'AWi72xbrl',
+				id: 'knj98Mx84',
 				label: i18n.ts.seasonalScreenEffect,
 				keywords: ['effect', 'show'],
 			},
 			{
-				id: 'Ces8FsJws',
+				id: 'Bzg77rYNd',
 				label: i18n.ts.menuStyle,
 				keywords: ['menu', 'style', 'popup', 'drawer'],
 			},
 			{
-				id: 'wDr9xSXCv',
+				id: '7AOZ1ZgDv',
 				label: i18n.ts.emojiStyle,
 				keywords: ['emoji', 'style', 'native', 'system', 'fluent', 'twemoji'],
 			},
 			{
-				id: 'vFB0pLzck',
+				id: 'fDelHUrBi',
 				label: i18n.ts.fontSize,
 				keywords: ['font', 'size'],
 			},
 			{
-				id: '23BhvYXPC',
+				id: 'siOW5aSwp',
 				label: i18n.ts.useSystemFont,
 				keywords: ['font', 'system', 'native'],
 			},
 			{
-				id: 'EeNLndAOa',
+				id: 's05dHQ1dW',
 				children: [
 					{
-						id: 'rAAPoaodS',
+						id: 'zoMbYCvP0',
 						label: i18n.ts.reactionsDisplaySize,
 						keywords: ['reaction', 'size', 'scale', 'display'],
 					},
 					{
-						id: 'qTLAvNWsc',
+						id: 'lGFzLnWfB',
 						label: i18n.ts.limitWidthOfReaction,
 						keywords: ['reaction', 'size', 'scale', 'display', 'width', 'limit'],
 					},
 					{
-						id: '2lWgzAm13',
+						id: '9E0v8VKIY',
 						label: i18n.ts.mediaListWithOneImageAppearance,
 						keywords: ['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'list', 'size', 'height'],
 					},
 					{
-						id: 'EU7HbxOR5',
+						id: 'xB7MPEF4Q',
 						label: i18n.ts.instanceTicker,
 						keywords: ['ticker', 'information', 'label', 'instance', 'server', 'host', 'federation'],
 					},
 					{
-						id: 'AEtM0FAp1',
+						id: '7siYCSodm',
 						label: i18n.ts.displayOfSensitiveMedia,
 						keywords: ['attachment', 'image', 'photo', 'picture', 'media', 'thumbnail', 'nsfw', 'sensitive', 'display', 'show', 'hide', 'visibility'],
 					},
@@ -751,15 +721,15 @@ export const searchIndexes: SearchIndexItem[] = [
 				keywords: ['note', 'display'],
 			},
 			{
-				id: 'A1FMC2Zon',
+				id: 'uQfyiHMSs',
 				children: [
 					{
-						id: 'CB37G5ZDo',
+						id: 'y3uTXsSQ6',
 						label: i18n.ts.position,
 						keywords: ['position'],
 					},
 					{
-						id: 'gGS2i19hS',
+						id: 'PILAdkVM',
 						label: i18n.ts.stackAxis,
 						keywords: ['stack', 'axis', 'direction'],
 					},
@@ -769,51 +739,100 @@ export const searchIndexes: SearchIndexItem[] = [
 			},
 		],
 		label: i18n.ts.appearance,
-		keywords: ['appearance'],
+		keywords: ['appearance', i18n.ts._settings.appearanceBanner],
 		path: '/settings/appearance',
 		icon: 'ti ti-device-desktop',
 	},
+	{
+		id: '330Q4mf8E',
+		children: [
+			{
+				id: 'eGSjUDIKu',
+				label: i18n.ts._exportOrImport.allNotes,
+				keywords: ['notes'],
+			},
+			{
+				id: 'iMDgUVgRu',
+				label: i18n.ts._exportOrImport.favoritedNotes,
+				keywords: ['favorite', 'notes'],
+			},
+			{
+				id: '3y6KgkVbT',
+				label: i18n.ts._exportOrImport.clips,
+				keywords: ['clip', 'notes'],
+			},
+			{
+				id: 'cKiHkj8HE',
+				label: i18n.ts._exportOrImport.followingList,
+				keywords: ['following', 'users'],
+			},
+			{
+				id: '3zzmQXn0t',
+				label: i18n.ts._exportOrImport.userLists,
+				keywords: ['user', 'lists'],
+			},
+			{
+				id: '3ZGXcEqWZ',
+				label: i18n.ts._exportOrImport.muteList,
+				keywords: ['mute', 'users'],
+			},
+			{
+				id: '84oL7B1Dr',
+				label: i18n.ts._exportOrImport.blockingList,
+				keywords: ['block', 'users'],
+			},
+			{
+				id: 'ckqi48Kbl',
+				label: i18n.ts.antennas,
+				keywords: ['antennas'],
+			},
+		],
+		label: i18n.ts._settings.accountData,
+		keywords: ['import', 'export', 'data', i18n.ts._settings.accountDataBanner],
+		path: '/settings/account-data',
+		icon: 'ti ti-package',
+	},
 	{
 		id: 'f08Mi1Uwn',
 		children: [
 			{
-				id: '7ov7ceoij',
+				id: 'C5dRH2Ypy',
 				label: i18n.ts.reduceUiAnimation,
 				keywords: ['animation', 'motion', 'reduce'],
 			},
 			{
-				id: 'cXr3tFdpa',
+				id: '5mZxz2cru',
 				label: i18n.ts.disableShowingAnimatedImages,
 				keywords: ['disable', 'animation', 'image', 'photo', 'picture', 'media', 'thumbnail', 'gif'],
 			},
 			{
-				id: 'Ok1UBwtP',
+				id: 'c0Iy5hL5o',
 				label: i18n.ts.enableAnimatedMfm,
 				keywords: ['mfm', 'enable', 'show', 'animated'],
 			},
 			{
-				id: 'yPEpJigqY',
+				id: '4HYFjs2Nv',
 				label: i18n.ts.enableHorizontalSwipe,
 				keywords: ['swipe', 'horizontal', 'tab'],
 			},
 			{
-				id: 'h7iZtdTU3',
+				id: 'kYVJ3SVNq',
 				label: i18n.ts.keepScreenOn,
 				keywords: ['keep', 'screen', 'display', 'on'],
 			},
 			{
-				id: 'gP1BY3PDy',
+				id: 'w4Bv0meAt',
 				label: i18n.ts.useNativeUIForVideoAudioPlayer,
 				keywords: ['native', 'system', 'video', 'audio', 'player', 'media'],
 			},
 			{
-				id: 'jnMK3M6rs',
+				id: '1fV9WINCQ',
 				label: i18n.ts._contextMenu.title,
 				keywords: ['contextmenu', 'system', 'native'],
 			},
 		],
 		label: i18n.ts.accessibility,
-		keywords: ['accessibility'],
+		keywords: ['accessibility', i18n.ts._settings.accessibilityBanner],
 		path: '/settings/accessibility',
 		icon: 'ti ti-accessible',
 	},