enhance: アバターデコレーションへのカテゴリの導入 (#17034)

* feat(backend): AvatarDecorationにcategoryを追加し、関連APIのプロパティ・戻り値にも反映

* feat(frontend): アバターデコレーションのカテゴリ設定機能

* chore(frontend): 管理画面とユーザー側の画面で、アバターデコレーションのグループ化のコードをある程度統一

* CHANGELOGを更新

* fix: group-avatar-decorations.tsを使用するよう修正

* chore: コーディング規約への準拠

* 型エラーを解消

packages/frontend/src/pages/avatar-decoration-edit-dialog.vue

@@ -32,6 +32,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkInput v-model="url">
 					<template #label>{{ i18n.ts.imageUrl }}</template>
 				</MkInput>
+				<MkInput v-model="category" :datalist="props.categories || []">
+					<template #label>{{ i18n.ts.category }}</template>
+				</MkInput>
 				<MkTextarea v-model="description">
 					<template #label>{{ i18n.ts.description }}</template>
 				</MkTextarea>
@@ -79,6 +82,7 @@ const $i = ensureSignin();
 
 const props = defineProps<{
 	avatarDecoration?: Misskey.entities.AdminAvatarDecorationsListResponse[number],
+	categories?: string[],
 }>();
 
 const emit = defineEmits<{
@@ -89,6 +93,7 @@ const emit = defineEmits<{
 const windowEl = useTemplateRef('windowEl');
 const url = ref<string>(props.avatarDecoration ? props.avatarDecoration.url : '');
 const name = ref<string>(props.avatarDecoration ? props.avatarDecoration.name : '');
+const category = ref<string>(props.avatarDecoration?.category ? props.avatarDecoration.category : '');
 const description = ref<string>(props.avatarDecoration ? props.avatarDecoration.description : '');
 const roleIdsThatCanBeUsedThisDecoration = ref(props.avatarDecoration ? props.avatarDecoration.roleIdsThatCanBeUsedThisDecoration : []);
 const rolesThatCanBeUsedThisDecoration = ref<Misskey.entities.Role[]>([]);
@@ -118,6 +123,7 @@ async function done() {
 		url: url.value,
 		name: name.value,
 		description: description.value,
+		category: category.value,
 		roleIdsThatCanBeUsedThisDecoration: rolesThatCanBeUsedThisDecoration.value.map(x => x.id),
 	};