Merge remote-branch 'misskey/develop'

2023-12-13 18:57:19 +09:00 · 2023-12-13 18:57:19 +09:00 · 9df37ca79a
parent d01696fb93 5472f4b934
commit 9df37ca79a
23 changed files with 218 additions and 267 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -19,6 +19,7 @@
 - Feat: メールアドレスの認証にverifymail.ioを使えるように (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/971ba07a44550f68d2ba31c62066db2d43a0caed)
 - Feat: モデレーターがユーザーのアイコンもしくはバナー画像を未設定状態にできる機能を追加 (cherry-pick from https://github.com/TeamNijimiss/misskey/commit/e0eb5a752f6e5616d6312bb7c9790302f9dbff83)
 - Feat: TL上からノートが見えなくなるワードミュートであるハードミュートを追加
+- Enhance: アイコンデコレーションを複数設定できるように
 - Fix: MFM `$[unixtime ]` に不正な値を入力した際に発生する各種エラーを修正

 ### Client
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@ -4,8 +4,6 @@
 export interface Locale {
    "_lang_": string;
    "cannotBeUsedFunc": string;
-    "maxinumLayerError": string;
-    "layer": string;
    "Xcoordinate": string;
    "Ycoordinate": string;
    "scale": string;
@ -337,6 +335,7 @@ export interface Locale {
    "removeAreYouSure": string;
    "deleteAreYouSure": string;
    "resetAreYouSure": string;
+    "areYouSure": string;
    "saved": string;
    "messaging": string;
    "upload": string;
@ -1265,6 +1264,7 @@ export interface Locale {
    "avatarDecorations": string;
    "attach": string;
    "detach": string;
+    "detachAll": string;
    "angle": string;
    "flip": string;
    "showAvatarDecorations": string;
@ -1278,6 +1278,7 @@ export interface Locale {
    "doReaction": string;
    "code": string;
    "reloadRequiredToApplySettings": string;
+    "remainingN": string;
    "showUnreadNotificationsCount": string;
    "showCatOnly": string;
    "additionalPermissionsForFlash": string;
@ -1919,6 +1920,7 @@ export interface Locale {
            "canHideAds": string;
            "canSearchNotes": string;
            "canUseTranslator": string;
+            "avatarDecorationLimit": string;
        };
        "_condition": {
            "isLocal": string;
@ -2500,6 +2502,7 @@ export interface Locale {
        "changeAvatar": string;
        "changeBanner": string;
        "verifiedLinkDescription": string;
+        "avatarDecorationMax": string;
    };
    "_exportOrImport": {
        "allNotes": string;
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -332,6 +332,7 @@ removed: "削除しました"
 removeAreYouSure: "「{x}」を削除しますか？"
 deleteAreYouSure: "「{x}」を削除しますか？"
 resetAreYouSure: "リセットしますか？"
+areYouSure: "よろしいですか？"
 saved: "保存しました"
 messaging: "チャット"
 upload: "アップロード"
@ -1260,6 +1261,7 @@ tosAndPrivacyPolicy: "利用規約・プライバシーポリシー"
 avatarDecorations: "アイコンデコレーション"
 attach: "付ける"
 detach: "外す"
+detachAll: "全て外す"
 angle: "角度"
 flip: "反転"
 showAvatarDecorations: "アイコンのデコレーションを表示"
@ -1273,6 +1275,7 @@ cwNotationRequired: "「内容を隠す」がオンの場合は注釈の記述
 doReaction: "リアクションする"
 code: "コード"
 reloadRequiredToApplySettings: "設定の反映にはリロードが必要です。"
+remainingN: "残り: {n}"
 showUnreadNotificationsCount: "未読の通知の数を表示する"
 showCatOnly: "キャット付きのみ"
 additionalPermissionsForFlash: "Playへの追加許可"
@ -1824,6 +1827,7 @@ _role:
    canHideAds: "広告の非表示"
    canSearchNotes: "ノート検索の利用"
    canUseTranslator: "翻訳機能の利用"
+    avatarDecorationLimit: "アイコンデコレーションの最大取付個数"
  _condition:
    isLocal: "ローカルユーザー"
    isRemote: "リモートユーザー"
@ -2397,6 +2401,7 @@ _profile:
  changeAvatar: "アイコン画像を変更"
  changeBanner: "バナー画像を変更"
  verifiedLinkDescription: "内容にURLを設定すると、リンク先のWebサイトに自分のプロフィールへのリンクが含まれている場合に所有者確認済みアイコンを表示させることができます。"
+  avatarDecorationMax: "最大{max}つまでデコレーションを付けられます。"

 _exportOrImport:
  allNotes: "全てのノート"
--- a/packages/backend/src/core/RoleService.ts
+++ b/packages/backend/src/core/RoleService.ts
@ -48,6 +48,7 @@ export type RolePolicies = {
 	userListLimit: number;
 	userEachUserListsLimit: number;
 	rateLimitFactor: number;
+	avatarDecorationLimit: number;
 };

 export const DEFAULT_POLICIES: RolePolicies = {
@ -75,6 +76,7 @@ export const DEFAULT_POLICIES: RolePolicies = {
 	userListLimit: 10,
 	userEachUserListsLimit: 50,
 	rateLimitFactor: 1,
+	avatarDecorationLimit: 1,
 };

@Injectable()
@ -329,6 +331,7 @@ export class RoleService implements OnApplicationShutdown {
 			userListLimit: calc('userListLimit', vs => Math.max(...vs)),
 			userEachUserListsLimit: calc('userEachUserListsLimit', vs => Math.max(...vs)),
 			rateLimitFactor: calc('rateLimitFactor', vs => Math.max(...vs)),
+			avatarDecorationLimit: calc('avatarDecorationLimit', vs => Math.max(...vs)),
 		};
 	}

--- a/packages/backend/src/models/json-schema/role.ts
+++ b/packages/backend/src/models/json-schema/role.ts
@ -145,6 +145,7 @@ export const packedRoleSchema = {
 						userEachUserListsLimit: rolePolicyValue,
 						canManageAvatarDecorations: rolePolicyValue,
 						canUseTranslator: rolePolicyValue,
+						avatarDecorationLimit: rolePolicyValue,
 					},
 				},
 				usersCount: {
--- a/packages/backend/src/models/json-schema/user.ts
+++ b/packages/backend/src/models/json-schema/user.ts
@ -693,6 +693,10 @@ export const packedMeDetailedOnlySchema = {
 					type: 'number',
 					nullable: false, optional: false,
 				},
+				avatarDecorationLimit: {
+					type: 'number',
+					nullable: false, optional: false,
+				},
 			},
 		},
 		//#region secrets
--- a/packages/backend/src/server/api/endpoints/i/update.ts
+++ b/packages/backend/src/server/api/endpoints/i/update.ts
@ -137,7 +137,7 @@ export const paramDef = {
 		birthday: { ...birthdaySchema, nullable: true },
 		lang: { type: 'string', enum: [null, ...Object.keys(langmap)] as string[], nullable: true },
 		avatarId: { type: 'string', format: 'misskey:id', nullable: true },
-		avatarDecorations: { type: 'array', maxItems: 1, items: {
+		avatarDecorations: { type: 'array', maxItems: 16, items: {
 			type: 'object',
 			properties: {
 				id: { type: 'string', format: 'misskey:id' },
@ -333,12 +333,14 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-

 			if (ps.avatarDecorations) {
 				const decorations = await this.avatarDecorationService.getAll(true);
-				const myRoles = await this.roleService.getUserRoles(user.id);
+				const [myRoles, myPolicies] = await Promise.all([this.roleService.getUserRoles(user.id), this.roleService.getUserPolicies(user.id)]);
 				const allRoles = await this.roleService.getRoles();
 				const decorationIds = decorations
 					.filter(d => d.roleIdsThatCanBeUsedThisDecoration.filter(roleId => allRoles.some(r => r.id === roleId)).length === 0 || myRoles.some(r => d.roleIdsThatCanBeUsedThisDecoration.includes(r.id)))
 					.map(d => d.id);

+				if (ps.avatarDecorations.length > myPolicies.avatarDecorationLimit) throw new ApiError(meta.errors.restrictedByRole);
+
 				updates.avatarDecorations = ps.avatarDecorations.filter(d => decorationIds.includes(d.id)).map(d => ({
 					id: d.id,
 					angle: d.angle ?? 0,
--- a/packages/cherrypick-js/src/autogen/apiClientJSDoc.ts
+++ b/packages/cherrypick-js/src/autogen/apiClientJSDoc.ts
@ -1,7 +1,7 @@
 /*
 * version: 4.6.0-beta.2
 * basedMisskeyVersion: 2023.12.0-beta.3
- * generatedAt: 2023-12-13T07:55:59.676Z
+ * generatedAt: 2023-12-13T08:44:16.948Z
 */

 import type { SwitchCaseResponseType } from '../api.js';
--- a/packages/cherrypick-js/src/autogen/endpoint.ts
+++ b/packages/cherrypick-js/src/autogen/endpoint.ts
@ -1,7 +1,7 @@
 /*
 * version: 4.6.0-beta.2
 * basedMisskeyVersion: 2023.12.0-beta.3
- * generatedAt: 2023-12-13T07:55:59.674Z
+ * generatedAt: 2023-12-13T08:44:16.944Z
 */

 import type {
--- a/packages/cherrypick-js/src/autogen/entities.ts
+++ b/packages/cherrypick-js/src/autogen/entities.ts
@ -1,7 +1,7 @@
 /*
 * version: 4.6.0-beta.2
 * basedMisskeyVersion: 2023.12.0-beta.3
- * generatedAt: 2023-12-13T07:55:59.673Z
+ * generatedAt: 2023-12-13T08:44:16.943Z
 */

 import { operations } from './types.js';
--- a/packages/cherrypick-js/src/autogen/models.ts
+++ b/packages/cherrypick-js/src/autogen/models.ts
@ -1,7 +1,7 @@
 /*
 * version: 4.6.0-beta.2
 * basedMisskeyVersion: 2023.12.0-beta.3
- * generatedAt: 2023-12-13T07:55:59.672Z
+ * generatedAt: 2023-12-13T08:44:16.941Z
 */

 import { components } from './types.js';
--- a/packages/cherrypick-js/src/autogen/types.ts
+++ b/packages/cherrypick-js/src/autogen/types.ts
@ -4,7 +4,7 @@
 /*
 * version: 4.6.0-beta.2
 * basedMisskeyVersion: 2023.12.0-beta.3
- * generatedAt: 2023-12-13T07:55:59.592Z
+ * generatedAt: 2023-12-13T08:44:16.816Z
 */

 /**
@ -3960,6 +3960,7 @@ export type components = {
        userListLimit: number;
        userEachUserListsLimit: number;
        rateLimitFactor: number;
+        avatarDecorationLimit: number;
      };
      email?: string | null;
      emailVerified?: boolean | null;
@ -4675,6 +4676,11 @@ export type components = {
          priority: number;
          useDefault: boolean;
        };
+        avatarDecorationLimit: {
+          value: number | boolean;
+          priority: number;
+          useDefault: boolean;
+        };
      };
      usersCount: number;
    });
--- a/packages/frontend/src/account.ts
+++ b/packages/frontend/src/account.ts
@ -323,7 +323,7 @@ export async function openAccountMenu(opts: {
 			text: i18n.ts.profile,
 			to: `/@${ $i.username }`,
 			avatar: $i,
-		}, null, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
+		}, { type: 'divider' }, ...(opts.includeCurrentAccount ? [createItem($i)] : []), ...accountItemPromises, {
 			type: 'parent' as const,
 			icon: 'ti ti-plus',
 			text: i18n.ts.addAccount,
--- a/packages/frontend/src/components/MkDrive.folder.vue
+++ b/packages/frontend/src/components/MkDrive.folder.vue
@ -39,6 +39,7 @@ import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 import { claimAchievement } from '@/scripts/achievements.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
+import { MenuItem } from '@/types/menu.js';

 const props = withDefaults(defineProps<{
 	folder: Misskey.entities.DriveFolder;
@ -250,7 +251,7 @@ function setAsUploadFolder() {
 }

 function onContextmenu(ev: MouseEvent) {
-	let menu;
+	let menu: MenuItem[];
 	menu = [{
 		text: i18n.ts.openInWindow,
 		icon: 'ti ti-app-window',
@ -260,18 +261,18 @@ function onContextmenu(ev: MouseEvent) {
 			}, {
 			}, 'closed');
 		},
-	}, null, {
+	}, { type: 'divider' }, {
 		text: i18n.ts.rename,
 		icon: 'ti ti-forms',
 		action: rename,
-	}, null, {
+	}, { type: 'divider' }, {
 		text: i18n.ts.delete,
 		icon: 'ti ti-trash',
 		danger: true,
 		action: deleteFolder,
 	}];
 	if (defaultStore.state.devMode) {
-		menu = menu.concat([null, {
+		menu = menu.concat([{ type: 'divider' }, {
 			icon: 'ti ti-id',
 			text: i18n.ts.copyFolderId,
 			action: () => {
--- a/packages/frontend/src/components/global/CPAvatar-Friendly.vue
+++ b/packages/frontend/src/components/global/CPAvatar-Friendly.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click="onClick">
+	<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click.stop="onClick">
 		<MkImgWithBlurhash
 			:class="[$style.inner, { [$style.reduceBlurEffect]: !defaultStore.state.useBlurEffect, [$style.noDrag]: noDrag }]"
 			:src="url"
@ -17,19 +17,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@touchstart="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''"
 			@touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
 		/>
+		<template v-if="showDecoration && defaultStore.state.friendlyShowAvatarDecorationsInNavBtn">
 			<img
-		v-if="showDecoration && (decoration || user.avatarDecorations.length > 0) && defaultStore.state.friendlyShowAvatarDecorationsInNavBtn"
+				v-for="decoration in decorations ?? user.avatarDecorations"
 				:class="[$style.decoration]"
-		:src="decoration?.url ?? user.avatarDecorations[0].url"
+				:src="decoration.url"
 				:style="{
-			rotate: getDecorationAngle(),
-			scale: getDecorationScale(),
-			transform: getDecorationTransform(),
-			opacity: getDecorationOpacity(),
+				rotate: getDecorationAngle(decoration),
+				scale: getDecorationScale(decoration),
+				transform: getDecorationTransform(decoration),
+				opacity: getDecorationOpacity(decoration),
 			}"
 				alt=""
 			>
-</component>
+		</template>
+	</component>
 </template>

 <script lang="ts" setup>
@ -47,22 +49,13 @@ const props = withDefaults(defineProps<{
 	target?: string | null;
 	link?: boolean;
 	preview?: boolean;
-	decoration?: {
-		url: string;
-		angle?: number;
-		flipH?: boolean;
-		flipV?: boolean;
-		scale?: number;
-		moveX?: number;
-		moveY?: number;
-		opacity?: number;
-	};
+	decorations?: Misskey.entities.UserDetailed['avatarDecorations'][number][];
 	forceShowDecoration?: boolean;
 }>(), {
 	target: null,
 	link: false,
 	preview: false,
-	decoration: undefined,
+	decorations: undefined,
 	forceShowDecoration: false,
 });

@ -88,59 +81,25 @@ function onClick(ev: MouseEvent): void {
 	emit('click', ev);
 }

-function getDecorationAngle() {
-	let angle;
-	if (props.decoration) {
-		angle = props.decoration.angle ?? 0;
-	} else if (props.user.avatarDecorations.length > 0) {
-		angle = props.user.avatarDecorations[0].angle ?? 0;
-	} else {
-		angle = 0;
-	}
+function getDecorationAngle(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const angle = decoration.angle ?? 0;
 	return angle === 0 ? undefined : `${angle * 360}deg`;
 }

-function getDecorationScale() {
-	let scaleX;
-	if (props.decoration) {
-		scaleX = props.decoration.flipH ? -1 : 1;
-	} else if (props.user.avatarDecorations.length > 0) {
-		scaleX = props.user.avatarDecorations[0].flipH ? -1 : 1;
-	} else {
-		scaleX = 1;
-	}
+function getDecorationScale(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const scaleX = decoration.flipH ? -1 : 1;
 	return scaleX === 1 ? undefined : `${scaleX} 1`;
 }

-function getDecorationTransform() {
-	let scale;
-	let moveX;
-	let moveY;
-	if (props.decoration) {
-		scale = props.decoration.scale ?? 1;
-		moveX = props.decoration.moveX ?? 0;
-		moveY = props.decoration.moveY ?? 0;
-	} else if (props.user.avatarDecorations.length > 0) {
-		scale = props.user.avatarDecorations[0].scale ?? 1;
-		moveX = props.user.avatarDecorations[0].moveX ?? 0;
-		moveY = props.user.avatarDecorations[0].moveY ?? 0;
-	} else {
-		scale = 1;
-		moveX = 0;
-		moveY = 0;
-	}
+function getDecorationTransform(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const scale = decoration.scale ?? 1;
+	const moveX = decoration.moveX ?? 0;
+	const moveY = decoration.moveY ?? 0;
 	return `${scale === 1 ? '' : `scale(${scale})`} ${moveX === 0 && moveY === 0 ? '' : `translate(${moveX}%, ${moveY}%)`}`;
 }

-function getDecorationOpacity() {
-	let opacity;
-	if (props.decoration) {
-		opacity = props.decoration.opacity ?? 1;
-	} else if (props.user.avatarDecorations.length > 0) {
-		opacity = props.user.avatarDecorations[0].opacity ?? 1;
-	} else {
-		opacity = 1;
-	}
+function getDecorationOpacity(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const opacity = decoration.opacity ?? 1;
 	return opacity === 1 ? undefined : opacity;
 }

--- a/packages/frontend/src/components/global/MkA.vue
+++ b/packages/frontend/src/components/global/MkA.vue
@ -58,7 +58,7 @@ function onContextmenu(ev) {
 		action: () => {
 			router.push(props.to, 'forcePage');
 		},
-	}, null, {
+	}, { type: 'divider' }, {
 		icon: 'ti ti-external-link',
 		text: i18n.ts.openInNewTab,
 		action: () => {
--- a/packages/frontend/src/components/global/MkAvatar.vue
+++ b/packages/frontend/src/components/global/MkAvatar.vue
@ -33,18 +33,20 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 	</div>
+	<template v-if="showDecoration">
 		<img
-		v-if="showDecoration && (decoration || user.avatarDecorations.length > 0)"
+			v-for="decoration in decorations ?? user.avatarDecorations"
 			:class="[$style.decoration]"
-		:src="decoration?.url ?? user.avatarDecorations[0].url"
+			:src="decoration.url"
 			:style="{
-			rotate: getDecorationAngle(),
-			scale: getDecorationScale(),
-			transform: getDecorationTransform(),
-			opacity: getDecorationOpacity(),
+				rotate: getDecorationAngle(decoration),
+				scale: getDecorationScale(decoration),
+				transform: getDecorationTransform(decoration),
+				opacity: getDecorationOpacity(decoration),
 			}"
 			alt=""
 		>
+	</template>
 </component>
 </template>

@ -69,23 +71,14 @@ const props = withDefaults(defineProps<{
 	link?: boolean;
 	preview?: boolean;
 	indicator?: boolean;
-	decoration?: {
-		url: string;
-		angle?: number;
-		flipH?: boolean;
-		flipV?: boolean;
-		scale?: number;
-		moveX?: number;
-		moveY?: number;
-		opacity?: number;
-	};
+	decorations?: Misskey.entities.UserDetailed['avatarDecorations'][number][];
 	forceShowDecoration?: boolean;
 }>(), {
 	target: null,
 	link: false,
 	preview: false,
 	indicator: false,
-	decoration: undefined,
+	decorations: undefined,
 	forceShowDecoration: false,
 });

@ -111,59 +104,25 @@ function onClick(ev: MouseEvent): void {
 	emit('click', ev);
 }

-function getDecorationAngle() {
-	let angle;
-	if (props.decoration) {
-		angle = props.decoration.angle ?? 0;
-	} else if (props.user.avatarDecorations.length > 0) {
-		angle = props.user.avatarDecorations[0].angle ?? 0;
-	} else {
-		angle = 0;
-	}
+function getDecorationAngle(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const angle = decoration.angle ?? 0;
 	return angle === 0 ? undefined : `${angle * 360}deg`;
 }

-function getDecorationScale() {
-	let scaleX;
-	if (props.decoration) {
-		scaleX = props.decoration.flipH ? -1 : 1;
-	} else if (props.user.avatarDecorations.length > 0) {
-		scaleX = props.user.avatarDecorations[0].flipH ? -1 : 1;
-	} else {
-		scaleX = 1;
-	}
+function getDecorationScale(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const scaleX = decoration.flipH ? -1 : 1;
 	return scaleX === 1 ? undefined : `${scaleX} 1`;
 }

-function getDecorationTransform() {
-	let scale;
-	let moveX;
-	let moveY;
-	if (props.decoration) {
-		scale = props.decoration.scale ?? 1;
-		moveX = props.decoration.moveX ?? 0;
-		moveY = props.decoration.moveY ?? 0;
-	} else if (props.user.avatarDecorations.length > 0) {
-		scale = props.user.avatarDecorations[0].scale ?? 1;
-		moveX = props.user.avatarDecorations[0].moveX ?? 0;
-		moveY = props.user.avatarDecorations[0].moveY ?? 0;
-	} else {
-		scale = 1;
-		moveX = 0;
-		moveY = 0;
-	}
+function getDecorationTransform(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const scale = decoration.scale ?? 1;
+	const moveX = decoration.moveX ?? 0;
+	const moveY = decoration.moveY ?? 0;
 	return `${scale === 1 ? '' : `scale(${scale})`} ${moveX === 0 && moveY === 0 ? '' : `translate(${moveX}%, ${moveY}%)`}`;
 }

-function getDecorationOpacity() {
-	let opacity;
-	if (props.decoration) {
-		opacity = props.decoration.opacity ?? 1;
-	} else if (props.user.avatarDecorations.length > 0) {
-		opacity = props.user.avatarDecorations[0].opacity ?? 1;
-	} else {
-		opacity = 1;
-	}
+function getDecorationOpacity(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const opacity = decoration.opacity ?? 1;
 	return opacity === 1 ? undefined : opacity;
 }

--- a/packages/frontend/src/components/global/ToastAvatar.vue
+++ b/packages/frontend/src/components/global/ToastAvatar.vue
@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->

 <template>
-<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click="onClick">
+	<component :is="link ? MkA : 'span'" v-user-preview="preview ? user.id : undefined" v-bind="bound" class="_noSelect" :class="$style.root" :style="{ color }" :title="acct(user)" @click.stop="onClick">
 		<MkImgWithBlurhash
 			:class="$style.inner"
 			:src="url"
@ -16,10 +16,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 			@touchstart="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = true : ''"
 			@touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
 		/>
+		<template v-if="showDecoration">
 			<img
-		v-if="showDecoration && (decoration || user.avatarDecorations.length > 0)"
+				v-for="decoration in decorations ?? user.avatarDecorations"
 				:class="[$style.decoration]"
-		:src="decoration?.url ?? user.avatarDecorations[0].url"
+				:src="decoration.url"
 				:style="{
 				rotate: getDecorationAngle(decoration),
 				scale: getDecorationScale(decoration),
@ -28,11 +29,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 			}"
 				alt=""
 			>
-</component>
+		</template>
+	</component>
 </template>

 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { onMounted, onUnmounted, watch, ref, computed } from 'vue';
 import * as Misskey from 'cherrypick-js';
 import MkA from '@/components/global/MkA.vue';
 import MkImgWithBlurhash from '@/components/MkImgWithBlurhash.vue';
@ -46,22 +48,13 @@ const props = withDefaults(defineProps<{
 	target?: string | null;
 	link?: boolean;
 	preview?: boolean;
-	decoration?: {
-		url: string;
-		angle?: number;
-		flipH?: boolean;
-		flipV?: boolean;
-    scale?: number;
-    moveX?: number;
-    moveY?: number;
-    opacity?: number;
-	};
+	decorations?: Misskey.entities.UserDetailed['avatarDecorations'][number][];
 	forceShowDecoration?: boolean;
 }>(), {
 	target: null,
 	link: false,
 	preview: false,
-	decoration: undefined,
+	decorations: undefined,
 	forceShowDecoration: false,
 });

@ -87,59 +80,25 @@ function onClick(ev: MouseEvent): void {
 	emit('click', ev);
 }

-function getDecorationAngle() {
-	let angle;
-	if (props.decoration) {
-		angle = props.decoration.angle ?? 0;
-	} else if (props.user.avatarDecorations.length > 0) {
-		angle = props.user.avatarDecorations[0].angle ?? 0;
-	} else {
-		angle = 0;
-	}
+function getDecorationAngle(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const angle = decoration.angle ?? 0;
 	return angle === 0 ? undefined : `${angle * 360}deg`;
 }

-function getDecorationScale() {
-	let scaleX;
-	if (props.decoration) {
-		scaleX = props.decoration.flipH ? -1 : 1;
-	} else if (props.user.avatarDecorations.length > 0) {
-		scaleX = props.user.avatarDecorations[0].flipH ? -1 : 1;
-	} else {
-		scaleX = 1;
-	}
+function getDecorationScale(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const scaleX = decoration.flipH ? -1 : 1;
 	return scaleX === 1 ? undefined : `${scaleX} 1`;
 }

-function getDecorationTransform() {
-	let scale;
-	let moveX;
-	let moveY;
-	if (props.decoration) {
-		scale = props.decoration.scale ?? 1;
-		moveX = props.decoration.moveX ?? 0;
-		moveY = props.decoration.moveY ?? 0;
-	} else if (props.user.avatarDecorations.length > 0) {
-		scale = props.user.avatarDecorations[0].scale ?? 1;
-		moveX = props.user.avatarDecorations[0].moveX ?? 0;
-		moveY = props.user.avatarDecorations[0].moveY ?? 0;
-	} else {
-		scale = 1;
-		moveX = 0;
-		moveY = 0;
-	}
+function getDecorationTransform(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const scale = decoration.scale ?? 1;
+	const moveX = decoration.moveX ?? 0;
+	const moveY = decoration.moveY ?? 0;
 	return `${scale === 1 ? '' : `scale(${scale})`} ${moveX === 0 && moveY === 0 ? '' : `translate(${moveX}%, ${moveY}%)`}`;
 }

-function getDecorationOpacity() {
-	let opacity;
-	if (props.decoration) {
-		opacity = props.decoration.opacity ?? 1;
-	} else if (props.user.avatarDecorations.length > 0) {
-		opacity = props.user.avatarDecorations[0].opacity ?? 1;
-	} else {
-		opacity = 1;
-	}
+function getDecorationOpacity(decoration: Misskey.entities.UserDetailed['avatarDecorations'][number]) {
+	const opacity = decoration.opacity ?? 1;
 	return opacity === 1 ? undefined : opacity;
 }

--- a/packages/frontend/src/const.ts
+++ b/packages/frontend/src/const.ts
@ -82,6 +82,7 @@ export const ROLE_POLICIES = [
 	'userListLimit',
 	'userEachUserListsLimit',
 	'rateLimitFactor',
+	'avatarDecorationLimit',
 ] as const;

 // なんか動かない
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@ -551,6 +551,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 					</MkRange>
 				</div>
 			</MkFolder>
+
+			<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
+				<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
+				<template #suffix>
+					<span v-if="role.policies.avatarDecorationLimit.useDefault" :class="$style.useDefaultLabel">{{ i18n.ts._role.useBaseValue }}</span>
+					<span v-else>{{ role.policies.avatarDecorationLimit.value }}</span>
+					<span :class="$style.priorityIndicator"><i :class="getPriorityIcon(role.policies.avatarDecorationLimit)"></i></span>
+				</template>
+				<div class="_gaps">
+					<MkSwitch v-model="role.policies.avatarDecorationLimit.useDefault" :readonly="readonly">
+						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
+					</MkSwitch>
+					<MkInput v-model="role.policies.avatarDecorationLimit.value" type="number" :min="0">
+						<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
+					</MkInput>
+					<MkRange v-model="role.policies.avatarDecorationLimit.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
+						<template #label>{{ i18n.ts._role.priority }}</template>
+					</MkRange>
+				</div>
+			</MkFolder>
 		</div>
 	</FormSlot>
 </div>
@ -569,7 +589,7 @@ import MkSwitch from '@/components/MkSwitch.vue';
 import MkRange from '@/components/MkRange.vue';
 import FormSlot from '@/components/form/slot.vue';
 import { i18n } from '@/i18n.js';
-import { ROLE_POLICIES } from '@/const';
+import { ROLE_POLICIES } from '@/const.js';
 import { instance } from '@/instance.js';
 import { deepClone } from '@/scripts/clone.js';

--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@ -200,6 +200,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 							</MkSwitch>
 						</MkFolder>

+						<MkFolder v-if="matchQuery([i18n.ts._role._options.avatarDecorationLimit, 'avatarDecorationLimit'])">
+							<template #label>{{ i18n.ts._role._options.avatarDecorationLimit }}</template>
+							<template #suffix>{{ policies.avatarDecorationLimit }}</template>
+							<MkInput v-model="policies.avatarDecorationLimit" type="number" :min="0">
+							</MkInput>
+						</MkFolder>
+
 						<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
 					</div>
 				</MkFolder>
--- a/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue
+++ b/packages/frontend/src/pages/settings/profile.avatar-decoration-dialog.vue
@ -7,7 +7,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <MkModalWindow
 	ref="dialog"
 	:width="400"
-	:height="700"
+	:height="450"
 	@close="cancel"
 	@closed="emit('closed')"
 >
@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<MkSpacer :marginMin="20" :marginMax="28">
 			<div style="text-align: center;">
 				<div :class="$style.name">{{ decoration.name }}</div>
-				<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decoration="{ url: decoration.url, angle, flipH, scale, moveX, moveY, opacity }" forceShowDecoration/>
+				<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decorations="[...$i.avatarDecorations, { url: decoration.url, angle, flipH, scale, moveX, moveY, opacity }]" forceShowDecoration/>
 			</div>
 			<div class="_gaps_s">
 				<MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`">
@ -66,6 +66,7 @@ const props = defineProps<{
 	decoration: {
 		id: string;
 		url: string;
+		name: string;
 	}
 }>();

@ -97,18 +98,18 @@ async function attach() {
 		opacity: opacity.value,
 	};
 	await os.apiWithDialog('i/update', {
-		avatarDecorations: [decoration],
+		avatarDecorations: [...$i.avatarDecorations, decoration],
 	});
-	$i.avatarDecorations = [decoration];
+	$i.avatarDecorations = [...$i.avatarDecorations, decoration];

 	dialog.value.close();
 }

 async function detach() {
 	await os.apiWithDialog('i/update', {
-		avatarDecorations: [],
+		avatarDecorations: $i.avatarDecorations.filter(x => x.id !== props.decoration.id),
 	});
-	$i.avatarDecorations = [];
+	$i.avatarDecorations = $i.avatarDecorations.filter(x => x.id !== props.decoration.id);

 	dialog.value.close();
 }
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@ -87,6 +87,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<template #icon><i class="ti ti-sparkles"></i></template>
 		<template #label>{{ i18n.ts.avatarDecorations }}</template>

+		<div class="_gaps">
+			<MkInfo>{{ i18n.t('_profile.avatarDecorationMax', { max: $i?.policies.avatarDecorationLimit }) }} ({{ i18n.t('remainingN', { n: $i?.policies.avatarDecorationLimit - $i.avatarDecorations.length }) }})</MkInfo>
+
+			<MkButton v-if="$i.avatarDecorations.length > 0" danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton>
+
 			<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); grid-gap: 12px;">
 				<div
 					v-for="avatarDecoration in avatarDecorations"
@ -95,10 +100,11 @@ SPDX-License-Identifier: AGPL-3.0-only
 					@click="openDecoration(avatarDecoration)"
 				>
 					<div :class="$style.avatarDecorationName"><MkCondensedLine :minScale="0.5">{{ avatarDecoration.name }}</MkCondensedLine></div>
-				<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decoration="{ url: avatarDecoration.url }" forceShowDecoration/>
+					<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[{ url: avatarDecoration.url }]" forceShowDecoration/>
 					<i v-if="avatarDecoration.roleIdsThatCanBeUsedThisDecoration.length > 0 && !$i.roles.some(r => avatarDecoration.roleIdsThatCanBeUsedThisDecoration.includes(r.id))" :class="$style.avatarDecorationLock" class="ti ti-lock"></i>
 				</div>
 			</div>
+		</div>
 	</MkFolder>

 	<MkFolder>
@ -285,6 +291,19 @@ function openDecoration(avatarDecoration) {
 	}, {}, 'closed');
 }

+function detachAllDecorations() {
+	os.confirm({
+		type: 'warning',
+		text: i18n.ts.areYouSure,
+	}).then(async ({ canceled }) => {
+		if (canceled) return;
+		await os.apiWithDialog('i/update', {
+			avatarDecorations: [],
+		});
+		$i.avatarDecorations = [];
+	});
+}
+
 async function reloadAsk() {
 	const { canceled } = await os.confirm({
 		type: 'info',