From 4cdf048a7cd5891579152759c1f0686abb5c47da Mon Sep 17 00:00:00 2001
From: mattyatea <mattyatea@pm.me>
Date: Wed, 3 Jan 2024 01:25:54 +0900
Subject: [PATCH] =?UTF-8?q?=E3=82=A2=E3=82=A4=E3=82=B3=E3=83=B3=E3=83=87?=
 =?UTF-8?q?=E3=82=B3=E3=83=AC=E3=83=BC=E3=82=B7=E3=83=A7=E3=83=B3=E3=81=AE?=
 =?UTF-8?q?=E3=82=AB=E3=83=86=E3=82=B4=E3=83=AA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../backend/src/models/AvatarDecoration.ts    |   5 +
 .../admin/avatar-decorations/update.ts        |   2 +
 .../api/endpoints/get-avatar-decorations.ts   |   1 +
 .../src/components/MkAvatarDecoEditDialog.vue | 164 ++++++++++++++++++
 .../frontend/src/pages/avatar-decorations.vue |  74 ++++----
 .../settings/avatar-decoration.dialog.vue     |   3 +
 .../src/pages/settings/avatar-decoration.vue  |  28 ++-
 7 files changed, 228 insertions(+), 49 deletions(-)
 create mode 100644 packages/frontend/src/components/MkAvatarDecoEditDialog.vue

diff --git a/packages/backend/src/models/AvatarDecoration.ts b/packages/backend/src/models/AvatarDecoration.ts
index 08ebbdeac1..f658663e68 100644
--- a/packages/backend/src/models/AvatarDecoration.ts
+++ b/packages/backend/src/models/AvatarDecoration.ts
@@ -31,6 +31,11 @@ export class MiAvatarDecoration {
 	})
 	public description: string;
 
+	@Column('varchar', {
+		length: 256,
+	})
+	public category: string;
+
 	// TODO: 定期ジョブで存在しなくなったロールIDを除去するようにする
 	@Column('varchar', {
 		array: true, length: 128, default: '{}',
diff --git a/packages/backend/src/server/api/endpoints/admin/avatar-decorations/update.ts b/packages/backend/src/server/api/endpoints/admin/avatar-decorations/update.ts
index 6211345f96..3d424c68de 100644
--- a/packages/backend/src/server/api/endpoints/admin/avatar-decorations/update.ts
+++ b/packages/backend/src/server/api/endpoints/admin/avatar-decorations/update.ts
@@ -30,6 +30,7 @@ export const paramDef = {
 		roleIdsThatCanBeUsedThisDecoration: { type: 'array', items: {
 			type: 'string',
 		} },
+		category: { type: 'string', nullable: true },
 	},
 	required: ['id'],
 } as const;
@@ -45,6 +46,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				description: ps.description,
 				url: ps.url,
 				roleIdsThatCanBeUsedThisDecoration: ps.roleIdsThatCanBeUsedThisDecoration,
+				category: ps.category ?? '',
 			}, me);
 		});
 	}
diff --git a/packages/backend/src/server/api/endpoints/get-avatar-decorations.ts b/packages/backend/src/server/api/endpoints/get-avatar-decorations.ts
index dbe1626149..028d647393 100644
--- a/packages/backend/src/server/api/endpoints/get-avatar-decorations.ts
+++ b/packages/backend/src/server/api/endpoints/get-avatar-decorations.ts
@@ -75,6 +75,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 				name: decoration.name,
 				description: decoration.description,
 				url: decoration.url,
+				category: decoration.category,
 				roleIdsThatCanBeUsedThisDecoration: decoration.roleIdsThatCanBeUsedThisDecoration.filter(roleId => allRoles.some(role => role.id === roleId)),
 			}));
 		});
diff --git a/packages/frontend/src/components/MkAvatarDecoEditDialog.vue b/packages/frontend/src/components/MkAvatarDecoEditDialog.vue
new file mode 100644
index 0000000000..9ef5be1df2
--- /dev/null
+++ b/packages/frontend/src/components/MkAvatarDecoEditDialog.vue
@@ -0,0 +1,164 @@
+<!--
+SPDX-FileCopyrightText: syuilo and other misskey contributors
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="400"
+	@close="dialog.close()"
+	@closed="$emit('closed')"
+>
+	<template v-if="avatarDecoration" #header>:{{ avatarDecoration.name }}</template>
+	<template v-else #header>New create</template>
+
+	<div>
+		<MkSpacer :marginMin="20" :marginMax="28">
+			<div class="_gaps_m">
+				<div class="_gaps_m">
+					<XDecoration
+						v-if="avatarDecoration"
+						:key="avatarDecoration.id"
+						:decoration="avatarDecoration"
+					/>
+					<MkInput v-model="name">
+						<template #label>{{ i18n.ts.name }}</template>
+					</MkInput>
+					<MkTextarea v-model="description">
+						<template #label>{{ i18n.ts.description }}</template>
+					</MkTextarea>
+					<MkInput v-model="url">
+						<template #label>{{ i18n.ts.imageUrl }}</template>
+					</MkInput>
+					<MkInput v-model="category">
+						<template #label>{{ i18n.ts.category }}</template>
+					</MkInput>
+				</div>
+			</div>
+		</MkSpacer>
+		<div :class="$style.footer">
+			<div :class="$style.footerButtons">
+				<MkButton danger rounded style="margin: 0 auto;" @click="del()"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+				<MkButton primary rounded style="margin: 0 auto;" @click="save"><i class="ti ti-check"></i> {{ props.avatarDecoration ? i18n.ts.update : i18n.ts.create }}</MkButton>
+			</div>
+		</div>
+	</div>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import MkButton from '@/components/MkButton.vue';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+import MkInput from '@/components/MkInput.vue';
+import MkTextarea from '@/components/MkTextarea.vue';
+import XDecoration from '@/pages/settings/avatar-decoration.decoration.vue';
+const props = defineProps<{
+    avatarDecoration?: {
+				id: string | null;
+				name: string;
+				description: string;
+				url: string;
+				category: string;
+		};
+}>();
+let name = ref(props.avatarDecoration?.name ?? '');
+let category = ref(props.avatarDecoration?.category ?? '');
+let description = ref(props.avatarDecoration?.description ?? '');
+let url = ref(props.avatarDecoration?.url ?? '');
+const emit = defineEmits<{
+    (ev: 'del'): void
+}>();
+
+let dialog = ref<InstanceType<typeof MkModalWindow> | null>(null);
+
+function del() {
+	os.confirm({
+		type: 'warning',
+		text: i18n.t('deleteAreYouSure', { x: props.avatarDecoration?.name }),
+	}).then(({ canceled }) => {
+		if (canceled) return;
+		os.api('admin/avatar-decorations/delete', { id: props.avatarDecoration?.id }).then(() => {
+
+		});
+	});
+	emit('del');
+}
+
+async function save() {
+	if (props.avatarDecoration == null) {
+		await os.apiWithDialog('admin/avatar-decorations/create', {
+			name: name.value,
+			description: description.value,
+			url: url.value,
+			category: category.value,
+		});
+	} else {
+		await os.apiWithDialog('admin/avatar-decorations/update', {
+			id: props.avatarDecoration.id ?? '',
+			name: name.value,
+			description: description.value,
+			url: url.value,
+			category: category.value,
+		});
+	}
+	emit('del');
+}
+
+</script>
+
+<style lang="scss" module>
+.imgs {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.imgContainer {
+  padding: 8px;
+  border-radius: 6px;
+}
+
+.img {
+  display: block;
+  height: 64px;
+  width: 64px;
+  object-fit: contain;
+}
+
+.roleItem {
+  display: flex;
+}
+
+.role {
+  flex: 1;
+}
+
+.roleUnassign {
+  width: 32px;
+  height: 32px;
+  margin-left: 8px;
+  align-self: center;
+}
+
+.footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  padding: 12px;
+  border-top: solid 0.5px var(--divider);
+  -webkit-backdrop-filter: var(--blur, blur(15px));
+  backdrop-filter: var(--blur, blur(15px));
+}
+
+.footerButtons {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+</style>
diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index 87964ac697..eae411fd0d 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -8,41 +8,26 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="900">
 		<div class="_gaps">
-			<MkFolder v-for="avatarDecoration in avatarDecorations" :key="avatarDecoration.id ?? avatarDecoration._id" :defaultOpen="avatarDecoration.id == null">
-				<template #label>{{ avatarDecoration.name }}</template>
-				<template #caption>{{ avatarDecoration.description }}</template>
-
-				<div class="_gaps_m">
-					<MkInput v-model="avatarDecoration.name">
-						<template #label>{{ i18n.ts.name }}</template>
-					</MkInput>
-					<MkTextarea v-model="avatarDecoration.description">
-						<template #label>{{ i18n.ts.description }}</template>
-					</MkTextarea>
-					<MkInput v-model="avatarDecoration.url">
-						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
-					<div class="buttons _buttons">
-						<MkButton class="button" inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
-						<MkButton v-if="avatarDecoration.id != null" class="button" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
-					</div>
-				</div>
-			</MkFolder>
+			<div :class="$style.decorations">
+				<XDecoration
+					v-for="avatarDecoration in avatarDecorations"
+					:key="avatarDecoration.id"
+					:decoration="avatarDecoration"
+					@click="openDecorationEdit(avatarDecoration)"
+				/>
+			</div>
 		</div>
 	</MkSpacer>
 </MkStickyContainer>
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+import { ref, computed, defineAsyncComponent } from 'vue';
 import * as Misskey from 'misskey-js';
-import MkButton from '@/components/MkButton.vue';
-import MkInput from '@/components/MkInput.vue';
-import MkTextarea from '@/components/MkTextarea.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
-import MkFolder from '@/components/MkFolder.vue';
+import XDecoration from '@/pages/settings/avatar-decoration.decoration.vue';
 
 const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
@@ -53,27 +38,27 @@ function add() {
 		name: '',
 		description: '',
 		url: '',
+		category: '',
 	});
 }
 
-function del(avatarDecoration) {
-	os.confirm({
-		type: 'warning',
-		text: i18n.t('deleteAreYouSure', { x: avatarDecoration.name }),
-	}).then(({ canceled }) => {
-		if (canceled) return;
-		avatarDecorations.value = avatarDecorations.value.filter(x => x !== avatarDecoration);
-		os.api('admin/avatar-decorations/delete', avatarDecoration);
+function openDecorationEdit(avatarDecoration) {
+	os.popup(defineAsyncComponent(() => import('@/components/MkAvatarDecoEditDialog.vue')), {
+		avatarDecoration: avatarDecoration,
+	}, {
+		del: () => {
+			window.location.reload();
+		},
 	});
 }
 
-async function save(avatarDecoration) {
-	if (avatarDecoration.id == null) {
-		await os.apiWithDialog('admin/avatar-decorations/create', avatarDecoration);
-		load();
-	} else {
-		os.apiWithDialog('admin/avatar-decorations/update', avatarDecoration);
-	}
+function openDecorationCreate() {
+	os.popup(defineAsyncComponent(() => import('@/components/MkAvatarDecoEditDialog.vue')), {
+	}, {
+		del: result => {
+			window.location.reload();
+		},
+	});
 }
 
 function load() {
@@ -88,7 +73,7 @@ const headerActions = computed(() => [{
 	asFullButton: true,
 	icon: 'ti ti-plus',
 	text: i18n.ts.add,
-	handler: add,
+	handler: openDecorationCreate,
 }]);
 
 const headerTabs = computed(() => []);
@@ -98,3 +83,10 @@ definePageMetadata({
 	icon: 'ti ti-sparkles',
 });
 </script>
+<style module>
+.decorations {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    grid-gap: 12px;
+}
+</style>
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
index 329ab4d47a..544f1dc9ac 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
@@ -20,6 +20,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<MkAvatar style="width: 64px; height: 64px; margin-bottom: 20px;" :user="$i" :decorations="decorationsForPreview" forceShowDecoration/>
 			</div>
 			<div class="_gaps_s">
+				{{ i18n.ts.description }}
+				<p style="white-space: pre-wrap;">{{ decoration.description }}</p>
 				<MkRange v-model="angle" continuousUpdate :min="-0.5" :max="0.5" :step="0.025" :textConverter="(v) => `${Math.floor(v * 360)}°`">
 					<template #label>{{ i18n.ts.angle }}</template>
 				</MkRange>
@@ -59,6 +61,7 @@ const props = defineProps<{
 		id: string;
 		url: string;
 		name: string;
+        description: string;
 	};
 }>();
 
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue
index 6551fc917e..34920e1ae3 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.vue
@@ -29,13 +29,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkButton danger @click="detachAllDecorations">{{ i18n.ts.detachAll }}</MkButton>
 		</div>
 
-		<div :class="$style.decorations">
-			<XDecoration
-				v-for="avatarDecoration in avatarDecorations"
-				:key="avatarDecoration.id"
-				:decoration="avatarDecoration"
-				@click="openDecoration(avatarDecoration)"
-			/>
+		<div v-for="category in categories">
+			<MkFoldableSection>
+				<template #header> {{ (category !== '') ? category : i18n.ts.other }}</template>
+				<div :class="$style.decorations">
+					<div v-for="avatarDecoration in avatarDecorations.filter(ad => ad.category === category)">
+						<XDecoration
+							:key="avatarDecoration.id"
+							:decoration="avatarDecoration"
+							@click="openDecoration(avatarDecoration)"
+						/>
+					</div>
+				</div>
+			</MkFoldableSection>
 		</div>
 	</div>
 	<div v-else>
@@ -54,14 +60,20 @@ import { i18n } from '@/i18n.js';
 import { $i } from '@/account.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
+import MkFoldableSection from '@/components/MkFoldableSection.vue';
 
 const loading = ref(true);
-const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
+const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse & { category:string }>([]);
 
 os.api('get-avatar-decorations').then(_avatarDecorations => {
 	avatarDecorations.value = _avatarDecorations;
 	loading.value = false;
 });
+const categories = computed(() => {
+	const allCategories = avatarDecorations.value.map(ad => ad.category);
+	const uniqueCategories = [...new Set(allCategories)];
+	return uniqueCategories.sort();
+});
 
 function openDecoration(avatarDecoration, index?: number) {
 	os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {