Merge branch 'develop' into view-transition

CHANGELOG.md

@@ -7,6 +7,9 @@
 - Feat: 設定の管理が強化されました
   - 自動でバックアップされるように
 - Enhance: プラグインの管理が強化されました
+- Enhance: CWの注釈テキストが入力されていない場合, Postボタンを非アクティブに
+- Enhance: CWを無効にした場合, 注釈テキストが最大入力文字数を超えていても投稿できるように
+- Enhance: テーマ設定画面のデザインを改善
 - Fix: テーマ切り替え時に一部の色が変わらない問題を修正
 
 ### Server

locales/index.d.ts

@@ -5310,6 +5310,72 @@ export interface Locale extends ILocale {
      * 復元
      */
     "restore": string;
+    "_settings": {
+        /**
+         * ドライブの管理と設定、使用量の確認、ファイルをアップロードする際の設定を行えます。
+         */
+        "driveBanner": string;
+        /**
+         * プラグインを利用するとクライアントの機能を拡張することができます。プラグインのインストール、個別の設定と管理が行えます。
+         */
+        "pluginBanner": string;
+        /**
+         * サーバーからの受信する通知の種類と範囲や、プッシュ通知の設定が行えます。
+         */
+        "notificationsBanner": string;
+        /**
+         * API
+         */
+        "api": string;
+        /**
+         * Webhook
+         */
+        "webhook": string;
+        /**
+         * サービス連携
+         */
+        "serviceConnection": string;
+        /**
+         * 外部のアプリ・サービスと連携するためのアクセストークンやWebhookの管理と設定が行えます。
+         */
+        "serviceConnectionBanner": string;
+        /**
+         * アカウントのデータ
+         */
+        "accountData": string;
+        /**
+         * アカウントのデータをエクスポート/インポートして管理できます。
+         */
+        "accountDataBanner": string;
+        /**
+         * 非表示にするコンテンツの設定や、特定のユーザーからのアクションを制限する設定と管理を行えます。
+         */
+        "muteAndBlockBanner": string;
+        /**
+         * クライアントの視覚や動作に関するパーソナライズを行い、より最適に使用できるように設定できます。
+         */
+        "accessibilityBanner": string;
+        /**
+         * コンテンツの公開範囲、見つけやすさ、フォローの承認制などアカウントのプライバシーに関する設定を行えます。
+         */
+        "privacyBanner": string;
+        /**
+         * パスワード、ログイン方法、認証アプリ、パスキーなどアカウントのセキュリティに関する設定を行えます。
+         */
+        "securityBanner": string;
+        /**
+         * 好みに応じた、クライアントの全体的な動作の設定が行えます。
+         */
+        "preferencesBanner": string;
+        /**
+         * 好みに応じた、クライアントの見た目・表示方法に関する設定が行えます。
+         */
+        "appearanceBanner": string;
+        /**
+         * クライアントで再生するサウンドの設定が行えます。
+         */
+        "soundsBanner": string;
+    };
     "_preferencesProfile": {
         /**
          * プロファイル名
@@ -7746,6 +7812,10 @@ export interface Locale extends ILocale {
          * 標準のテーマ
          */
         "builtinThemes": string;
+        /**
+         * サーバーのテーマ
+         */
+        "instanceTheme": string;
         /**
          * そのテーマは既にインストールされています
          */

locales/ja-JP.yml

@@ -1324,6 +1324,24 @@ noName: "名前はありません"
 skip: "スキップ"
 restore: "復元"
 
+_settings:
+  driveBanner: "ドライブの管理と設定、使用量の確認、ファイルをアップロードする際の設定を行えます。"
+  pluginBanner: "プラグインを利用するとクライアントの機能を拡張することができます。プラグインのインストール、個別の設定と管理が行えます。"
+  notificationsBanner: "サーバーからの受信する通知の種類と範囲や、プッシュ通知の設定が行えます。"
+  api: "API"
+  webhook: "Webhook"
+  serviceConnection: "サービス連携"
+  serviceConnectionBanner: "外部のアプリ・サービスと連携するためのアクセストークンやWebhookの管理と設定が行えます。"
+  accountData: "アカウントのデータ"
+  accountDataBanner: "アカウントのデータをエクスポート/インポートして管理できます。"
+  muteAndBlockBanner: "非表示にするコンテンツの設定や、特定のユーザーからのアクションを制限する設定と管理を行えます。"
+  accessibilityBanner: "クライアントの視覚や動作に関するパーソナライズを行い、より最適に使用できるように設定できます。"
+  privacyBanner: "コンテンツの公開範囲、見つけやすさ、フォローの承認制などアカウントのプライバシーに関する設定を行えます。"
+  securityBanner: "パスワード、ログイン方法、認証アプリ、パスキーなどアカウントのセキュリティに関する設定を行えます。"
+  preferencesBanner: "好みに応じた、クライアントの全体的な動作の設定が行えます。"
+  appearanceBanner: "好みに応じた、クライアントの見た目・表示方法に関する設定が行えます。"
+  soundsBanner: "クライアントで再生するサウンドの設定が行えます。"
+
 _preferencesProfile:
   profileName: "プロファイル名"
   profileNameDescription: "このデバイスを識別する名前を設定してください。"
@@ -2031,6 +2049,7 @@ _theme:
   installed: "{name}をインストールしました"
   installedThemes: "インストールされたテーマ"
   builtinThemes: "標準のテーマ"
+  instanceTheme: "サーバーのテーマ"
   alreadyInstalled: "そのテーマは既にインストールされています"
   invalid: "テーマの形式が間違っています"
   make: "テーマを作る"

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "misskey",
-	"version": "2025.3.2-alpha.4",
+	"version": "2025.3.2-alpha.6",
 	"codename": "nasubi",
 	"repository": {
 		"type": "git",

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 () => {
+const _currentProfile = prefer.s['deck.profiles'].find(p => p.name === prefer.s['deck.profile']);
-	let deck;
+const __currentProfile = _currentProfile ? deepClone(_currentProfile) : null;
+export const columns = ref(__currentProfile ? __currentProfile.columns : []);
+export const layout = ref(__currentProfile ? __currentProfile.layout : []);
 
-	try {
+if (prefer.s['deck.profile'] == null) {
-		deck = await misskeyApi('i/registry/get', {
+	addProfile('Main');
-			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;
-			}
 
-			store.set('deck.columns', []);
+export function forceSaveCurrentDeckProfile() {
-			store.set('deck.layout', []);
+	const currentProfile = prefer.s['deck.profiles'].find(p => p.name === prefer.s['deck.profile']);
-			return;
+	if (currentProfile == null) return;
-		}
-		throw err;
-	}
 
-	store.set('deck.columns', deck.columns);
+	const newProfile = deepClone(currentProfile);
-	store.set('deck.layout', deck.layout);
+	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() {
+function switchProfile(profile: DeckProfile) {
-	await misskeyApi('i/registry/set', {
+	prefer.commit('deck.profile', profile.name);
-		scope: ['client', 'deck', 'profiles'],
+	const currentProfile = deepClone(profile);
-		key: store.s['deck.profile'],
+	columns.value = currentProfile.columns;
-		value: {
+	layout.value = currentProfile.layout;
-			columns: store.r['deck.columns'].value,
+	forceSaveCurrentDeckProfile();
-			layout: store.r['deck.layout'].value,
-		},
-	});
 }
 
-// TODO: deckがloadされていない状態でsaveすると意図せず上書きが発生するので対策する
+function addProfile(name: string) {
-export const saveDeck = throttle(1000, () => {
+	if (name.trim() === '') return;
-	forceSaveDeck();
+	if (prefer.s['deck.profiles'].find(p => p.name === name)) return;
-});
 
-export async function getProfiles(): Promise<string[]> {
+	const newProfile: DeckProfile = {
-	return await misskeyApi('i/registry/keys', {
+		id: uuid(),
-		scope: ['client', 'deck', 'profiles'],
+		name,
-	});
+		columns: [],
+		layout: [],
+	};
+	prefer.commit('deck.profiles', [...prefer.s['deck.profiles'], newProfile]);
+	switchProfile(newProfile);
 }
 
-export async function deleteProfile(key: string): Promise<void> {
+function createFirstProfile() {
-	return await misskeyApi('i/registry/remove', {
+	addProfile('Main');
-		scope: ['client', 'deck', 'profiles'],
+}
-		key: key,
+
-	});
+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);
+	columns.value.push(column);
-	store.push('deck.layout', [column.id]);
+	layout.value.push([column.id]);
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function removeColumn(id: Column['id']) {
-	store.set('deck.columns', store.s['deck.columns'].filter(c => c.id !== id));
+	columns.value = columns.value.filter(c => c.id !== id);
-	store.set('deck.layout', store.s['deck.layout']
+	layout.value = layout.value.map(ids => ids.filter(_id => _id !== id)).filter(ids => ids.length > 0);
-		.map(ids => ids.filter(_id => _id !== id))
+	saveCurrentDeckProfile();
-		.filter(ids => ids.length > 0));
-	saveDeck();
 }
 
 export function swapColumn(a: Column['id'], b: Column['id']) {
-	const aX = store.s['deck.layout'].findIndex(ids => ids.indexOf(a) !== -1);
+	const aX = layout.value.findIndex(ids => ids.indexOf(a) !== -1);
-	const aY = store.s['deck.layout'][aX].findIndex(id => id === a);
+	const aY = layout.value[aX].findIndex(id => id === a);
-	const bX = store.s['deck.layout'].findIndex(ids => ids.indexOf(b) !== -1);
+	const bX = layout.value.findIndex(ids => ids.indexOf(b) !== -1);
-	const bY = store.s['deck.layout'][bX].findIndex(id => id === b);
+	const bY = layout.value[bX].findIndex(id => id === b);
-	const layout = deepClone(store.s['deck.layout']);
+	const newLayout = deepClone(layout.value);
-	layout[aX][aY] = b;
+	newLayout[aX][aY] = b;
-	layout[bX][bY] = a;
+	newLayout[bX][bY] = a;
-	store.set('deck.layout', layout);
+	layout.value = newLayout;
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapLeftColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
+	const newLayout = deepClone(layout.value);
-	store.s['deck.layout'].some((ids, i) => {
+	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];
+				newLayout[i - 1] = layout.value[i];
-				layout[i] = left;
+				newLayout[i] = left;
-				store.set('deck.layout', layout);
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapRightColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
+	const newLayout = deepClone(layout.value);
-	store.s['deck.layout'].some((ids, i) => {
+	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];
+				newLayout[i + 1] = layout.value[i];
-				layout[i] = right;
+				newLayout[i] = right;
-				store.set('deck.layout', layout);
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapUpColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
+	const newLayout = deepClone(layout.value);
-	const idsIndex = store.s['deck.layout'].findIndex(ids => ids.includes(id));
+	const idsIndex = layout.value.findIndex(ids => ids.includes(id));
-	const ids = deepClone(store.s['deck.layout'][idsIndex]);
+	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;
+				newLayout[idsIndex] = ids;
-				store.set('deck.layout', layout);
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function swapDownColumn(id: Column['id']) {
-	const layout = deepClone(store.s['deck.layout']);
+	const newLayout = deepClone(layout.value);
-	const idsIndex = store.s['deck.layout'].findIndex(ids => ids.includes(id));
+	const idsIndex = layout.value.findIndex(ids => ids.includes(id));
-	const ids = deepClone(store.s['deck.layout'][idsIndex]);
+	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;
+				newLayout[idsIndex] = ids;
-				store.set('deck.layout', layout);
+				layout.value = newLayout;
 			}
 			return true;
 		}
 		return false;
 	});
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function stackLeftColumn(id: Column['id']) {
-	let layout = deepClone(store.s['deck.layout']);
+	let newLayout = deepClone(layout.value);
-	const i = store.s['deck.layout'].findIndex(ids => ids.includes(id));
+	const i = layout.value.findIndex(ids => ids.includes(id));
-	layout = layout.map(ids => ids.filter(_id => _id !== id));
+	newLayout = newLayout.map(ids => ids.filter(_id => _id !== id));
-	layout[i - 1].push(id);
+	newLayout[i - 1].push(id);
-	layout = layout.filter(ids => ids.length > 0);
+	newLayout = newLayout.filter(ids => ids.length > 0);
-	store.set('deck.layout', layout);
+	layout.value = newLayout;
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function popRightColumn(id: Column['id']) {
-	let layout = deepClone(store.s['deck.layout']);
+	let newLayout = deepClone(layout.value);
-	const i = store.s['deck.layout'].findIndex(ids => ids.includes(id));
+	const i = layout.value.findIndex(ids => ids.includes(id));
-	const affected = layout[i];
+	const affected = newLayout[i];
-	layout = layout.map(ids => ids.filter(_id => _id !== id));
+	newLayout = newLayout.map(ids => ids.filter(_id => _id !== id));
-	layout.splice(i + 1, 0, [id]);
+	newLayout.splice(i + 1, 0, [id]);
-	layout = layout.filter(ids => ids.length > 0);
+	newLayout = newLayout.filter(ids => ids.length > 0);
-	store.set('deck.layout', layout);
+	layout.value = newLayout;
 
-	const columns = deepClone(store.s['deck.columns']);
+	const newColumns = deepClone(columns.value);
-	for (const column of columns) {
+	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 newColumns = deepClone(columns.value);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	const column = deepClone(columns.value[columnIndex]);
 	if (column == null) return;
 	if (column.widgets == null) column.widgets = [];
 	column.widgets.unshift(widget);
-	columns[columnIndex] = column;
+	newColumns[columnIndex] = column;
-	store.set('deck.columns', columns);
+	columns.value = newColumns;
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function removeColumnWidget(id: Column['id'], widget: ColumnWidget) {
-	const columns = deepClone(store.s['deck.columns']);
+	const newColumns = deepClone(columns.value);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	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;
+	newColumns[columnIndex] = column;
-	store.set('deck.columns', columns);
+	columns.value = newColumns;
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function setColumnWidgets(id: Column['id'], widgets: ColumnWidget[]) {
-	const columns = deepClone(store.s['deck.columns']);
+	const newColumns = deepClone(columns.value);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	const column = deepClone(columns.value[columnIndex]);
 	if (column == null) return;
 	column.widgets = widgets;
-	columns[columnIndex] = column;
+	newColumns[columnIndex] = column;
-	store.set('deck.columns', columns);
+	columns.value = newColumns;
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function updateColumnWidget(id: Column['id'], widgetId: string, widgetData: any) {
-	const columns = deepClone(store.s['deck.columns']);
+	const newColumns = deepClone(columns.value);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
-	const column = deepClone(store.s['deck.columns'][columnIndex]);
+	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;
+	newColumns[columnIndex] = column;
-	store.set('deck.columns', columns);
+	columns.value = newColumns;
-	saveDeck();
+	saveCurrentDeckProfile();
 }
 
 export function updateColumn(id: Column['id'], column: Partial<Column>) {
-	const columns = deepClone(store.s['deck.columns']);
+	const newColumns = deepClone(columns.value);
-	const columnIndex = store.s['deck.columns'].findIndex(c => c.id === id);
+	const columnIndex = columns.value.findIndex(c => c.id === id);
-	const currentColumn = deepClone(store.s['deck.columns'][columnIndex]);
+	const currentColumn = deepClone(columns.value[columnIndex]);
 	if (currentColumn == null) return;
 	for (const [k, v] of Object.entries(column)) {
 		currentColumn[k] = v;
 	}
-	columns[columnIndex] = currentColumn;
+	newColumns[columnIndex] = currentColumn;
-	store.set('deck.columns', columns);
+	columns.value = newColumns;
-	saveDeck();
+	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',
+		icon: 'ti ti-link',
-		text: 'API',
+		text: i18n.ts._settings.serviceConnection,
-		to: '/settings/api',
+		to: '/settings/connect',
-		active: currentPage.value?.route.name === 'api',
+		active: currentPage.value?.route.name === 'connect',
-	}, {
-		icon: 'ti ti-webhook',
-		text: 'Webhook',
-		to: '/settings/webhook',
-		active: currentPage.value?.route.name === 'webhook',
 	}, {
 		icon: 'ti ti-package',
-		text: i18n.ts.importAndExport,
+		text: i18n.ts._settings.accountData,
-		to: '/settings/import-export',
+		to: '/settings/account-data',
-		active: currentPage.value?.route.name === 'import-export',
+		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
+		<MkFeatureBanner icon="/client-assets/prohibited_3d.png" color="#ff2600">
-			:label="i18n.ts.wordMute"
+			<SearchKeyword>{{ i18n.ts._settings.muteAndBlockBanner }}</SearchKeyword>
-			:keywords="['note', 'word', 'soft', 'mute', 'hide']"
+		</MkFeatureBanner>
-		>
-			<MkFolder>
-				<template #icon><i class="ti ti-message-off"></i></template>
-				<template #label>{{ i18n.ts.wordMute }}</template>
 
-				<div class="_gaps_m">
+		<div class="_gaps_s">
-					<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
+			<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
+					<div class="_gaps_m">
-						:label="i18n.ts.showMutedWord"
+						<MkInfo>{{ i18n.ts.wordMuteDescription }}</MkInfo>
-						:keywords="['show']"
-					>
-						<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
-					</SearchMarker>
 
-					<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
+						<SearchMarker
-				</div>
+							:label="i18n.ts.showMutedWord"
-			</MkFolder>
+							:keywords="['show']"
-		</SearchMarker>
+						>
+							<MkSwitch v-model="showSoftWordMutedWord">{{ i18n.ts.showMutedWord }}</MkSwitch>
+						</SearchMarker>
 
-		<SearchMarker
+						<XWordMute :muted="$i.mutedWords" @save="saveMutedWords"/>
-			:label="i18n.ts.hardWordMute"
+					</div>
-			:keywords="['note', 'word', 'hard', 'mute', 'hide']"
+				</MkFolder>
-		>
+			</SearchMarker>
-			<MkFolder>
-				<template #icon><i class="ti ti-message-off"></i></template>
-				<template #label>{{ i18n.ts.hardWordMute }}</template>
 
-				<div class="_gaps_m">
+			<SearchMarker
-					<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
+				:label="i18n.ts.hardWordMute"
-					<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
+				:keywords="['note', 'word', 'hard', 'mute', 'hide']"
-				</div>
+			>
-			</MkFolder>
+				<MkFolder>
-		</SearchMarker>
+					<template #icon><i class="ti ti-message-off"></i></template>
+					<template #label>{{ i18n.ts.hardWordMute }}</template>
 
-		<SearchMarker
+					<div class="_gaps_m">
-			:label="i18n.ts.instanceMute"
+						<MkInfo>{{ i18n.ts.hardWordMuteDescription }}</MkInfo>
-			:keywords="['note', 'server', 'instance', 'host', 'federation', 'mute', 'hide']"
+						<XWordMute :muted="$i.hardMutedWords" @save="saveHardMutedWords"/>
-		>
+					</div>
-			<MkFolder v-if="instance.federation !== 'none'">
+				</MkFolder>
-				<template #icon><i class="ti ti-planet-off"></i></template>
+			</SearchMarker>
-				<template #label>{{ i18n.ts.instanceMute }}</template>
 
-				<XInstanceMute/>
+			<SearchMarker
-			</MkFolder>
+				:label="i18n.ts.instanceMute"
-		</SearchMarker>
+				: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
+					<XInstanceMute/>
-			:label="`${i18n.ts.mutedUsers} (${ i18n.ts.renote })`"
+				</MkFolder>
-			:keywords="['renote', 'mute', 'hide', 'user']"
+			</SearchMarker>
-		>
-			<MkFolder>
-				<template #icon><i class="ti ti-repeat-off"></i></template>
-				<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
 
-				<MkPagination :pagination="renoteMutingPagination">
+			<SearchMarker
-					<template #empty>
+				:label="`${i18n.ts.mutedUsers} (${ i18n.ts.renote })`"
-						<div class="_fullinfo">
+				:keywords="['renote', 'mute', 'hide', 'user']"
-							<img :src="infoImageUrl" class="_ghost"/>
+			>
-							<div>{{ i18n.ts.noUsers }}</div>
+				<MkFolder>
-						</div>
+					<template #icon><i class="ti ti-repeat-off"></i></template>
-					</template>
+					<template #label>{{ i18n.ts.mutedUsers }} ({{ i18n.ts.renote }})</template>
 
-					<template #default="{ items }">
+					<MkPagination :pagination="renoteMutingPagination">
-						<div class="_gaps_s">
+						<template #empty>
-							<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
+							<div class="_fullinfo">
-								<div :class="$style.userItemMain">
+								<img :src="infoImageUrl" class="_ghost"/>
-									<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
+								<div>{{ i18n.ts.noUsers }}</div>
-										<MkUserCardMini :user="item.mutee"/>
+							</div>
-									</MkA>
+						</template>
-									<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>
+						<template #default="{ items }">
-								</div>
+							<div class="_gaps_s">
-								<div v-if="expandedRenoteMuteItems.includes(item.id)" :class="$style.userItemSub">
+								<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedRenoteMuteItems.includes(item.id) }]">
-									<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
+									<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>
-					</template>
+					</MkPagination>
-				</MkPagination>
+				</MkFolder>
-			</MkFolder>
+			</SearchMarker>
-		</SearchMarker>
 
-		<SearchMarker
+			<SearchMarker
-			:label="i18n.ts.mutedUsers"
+				:label="i18n.ts.mutedUsers"
-			:keywords="['note', 'mute', 'hide', 'user']"
+				:keywords="['note', 'mute', 'hide', 'user']"
-		>
+			>
-			<MkFolder>
+				<MkFolder>
-				<template #icon><i class="ti ti-eye-off"></i></template>
+					<template #icon><i class="ti ti-eye-off"></i></template>
-				<template #label>{{ i18n.ts.mutedUsers }}</template>
+					<template #label>{{ i18n.ts.mutedUsers }}</template>
 
-				<MkPagination :pagination="mutingPagination">
+					<MkPagination :pagination="mutingPagination">
-					<template #empty>
+						<template #empty>
-						<div class="_fullinfo">
+							<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost"/>
+								<img :src="infoImageUrl" class="_ghost"/>
-							<div>{{ i18n.ts.noUsers }}</div>
+								<div>{{ i18n.ts.noUsers }}</div>
-						</div>
+							</div>
-					</template>
+						</template>
 
-					<template #default="{ items }">
+						<template #default="{ items }">
-						<div class="_gaps_s">
+							<div class="_gaps_s">
-							<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
+								<div v-for="item in items" :key="item.mutee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedMuteItems.includes(item.id) }]">
-								<div :class="$style.userItemMain">
+									<div :class="$style.userItemMain">
-									<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
+										<MkA :class="$style.userItemMainBody" :to="userPage(item.mutee)">
-										<MkUserCardMini :user="item.mutee"/>
+											<MkUserCardMini :user="item.mutee"/>
-									</MkA>
+										</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.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>
+										<button class="_button" :class="$style.remove" @click="unmute(item.mutee, $event)"><i class="ti ti-x"></i></button>
-								</div>
+									</div>
-								<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
+									<div v-if="expandedMuteItems.includes(item.id)" :class="$style.userItemSub">
-									<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
+										<div>Muted at: <MkTime :time="item.createdAt" mode="detail"/></div>
-									<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
+										<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
-									<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+										<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+									</div>
 								</div>
 							</div>
-						</div>
+						</template>
-					</template>
+					</MkPagination>
-				</MkPagination>
+				</MkFolder>
-			</MkFolder>
+			</SearchMarker>
-		</SearchMarker>
 
-		<SearchMarker
+			<SearchMarker
-			:label="i18n.ts.blockedUsers"
+				:label="i18n.ts.blockedUsers"
-			:keywords="['block', 'user']"
+				:keywords="['block', 'user']"
-		>
+			>
-			<MkFolder>
+				<MkFolder>
-				<template #icon><i class="ti ti-ban"></i></template>
+					<template #icon><i class="ti ti-ban"></i></template>
-				<template #label>{{ i18n.ts.blockedUsers }}</template>
+					<template #label>{{ i18n.ts.blockedUsers }}</template>
 
-				<MkPagination :pagination="blockingPagination">
+					<MkPagination :pagination="blockingPagination">
-					<template #empty>
+						<template #empty>
-						<div class="_fullinfo">
+							<div class="_fullinfo">
-							<img :src="infoImageUrl" class="_ghost"/>
+								<img :src="infoImageUrl" class="_ghost"/>
-							<div>{{ i18n.ts.noUsers }}</div>
+								<div>{{ i18n.ts.noUsers }}</div>
-						</div>
+							</div>
-					</template>
+						</template>
 
-					<template #default="{ items }">
+						<template #default="{ items }">
-						<div class="_gaps_s">
+							<div class="_gaps_s">
-							<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
+								<div v-for="item in items" :key="item.blockee.id" :class="[$style.userItem, { [$style.userItemOpend]: expandedBlockItems.includes(item.id) }]">
-								<div :class="$style.userItemMain">
+									<div :class="$style.userItemMain">
-									<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
+										<MkA :class="$style.userItemMainBody" :to="userPage(item.blockee)">
-										<MkUserCardMini :user="item.blockee"/>
+											<MkUserCardMini :user="item.blockee"/>
-									</MkA>
+										</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.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>
+										<button class="_button" :class="$style.remove" @click="unblock(item.blockee, $event)"><i class="ti ti-x"></i></button>
-								</div>
+									</div>
-								<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
+									<div v-if="expandedBlockItems.includes(item.id)" :class="$style.userItemSub">
-									<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
+										<div>Blocked at: <MkTime :time="item.createdAt" mode="detail"/></div>
-									<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
+										<div v-if="item.expiresAt">Period: {{ new Date(item.expiresAt).toLocaleString() }}</div>
-									<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+										<div v-else>Period: {{ i18n.ts.indefinitely }}</div>
+									</div>
 								</div>
 							</div>
-						</div>
+						</template>
-					</template>
+					</MkPagination>
-				</MkPagination>
+				</MkFolder>
-			</MkFolder>
+			</SearchMarker>
-		</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="_gaps">
-			<div class="select">
+			<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>
+						<template #caption>{{ lightThemeName }}</template>
-					</MkSelect>
+
+						<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>
+			</template>
-			<div class="select">
+			<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>
+						<template #caption>{{ darkThemeName }}</template>
-					</MkSelect>
+
+						<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;
+		const v = JSON.parse(JSON.stringify(value)); // deep copy 兼 vueのプロキシ解除
-		this.emit('updated', { key, value });
+		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',
+		path: '/account-data',
-		name: 'import-export',
+		name: 'account-data',
-		component: page(() => import('@/pages/settings/import-export.vue')),
+		component: page(() => import('@/pages/settings/account-data.vue')),
 	}, {
 		path: '/mute-block',
 		name: 'mute-block',
 		component: page(() => import('@/pages/settings/mute-block.vue')),
 	}, {
-		path: '/api',
+		path: '/connect',
-		name: 'api',
+		name: 'connect',
-		component: page(() => import('@/pages/settings/api.vue')),
+		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 { columns, layout, columnTypes, switchProfileMenu, addColumn as addColumnToStore, deleteProfile as deleteProfile_ } from '@/deck.js';
-import { columnTypes, forceSaveDeck, getProfiles, loadDeck, 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 () => {
+	await deleteProfile_(prefer.s['deck.profile']);
-		if (store.s['deck.profile'] === 'default') {
+
-			await store.set('deck.columns', []);
+	os.success();
-			await store.set('deck.layout', []);
-			await forceSaveDeck();
-		} else {
-			await deleteProfile_(store.s['deck.profile']);
-		}
-		await store.set('deck.profile', 'default');
-	})(), () => {
-		unisonReload();
-	});
 }
+
 </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',
 	},

packages/misskey-js/package.json

@@ -1,7 +1,7 @@
 {
 	"type": "module",
 	"name": "misskey-js",
-	"version": "2025.3.2-alpha.4",
+	"version": "2025.3.2-alpha.6",
 	"description": "Misskey SDK for JavaScript",
 	"license": "MIT",
 	"main": "./built/index.js",