From f7398faeac1d4deb56853f51db09eae077e535e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=8B=E3=81=A3=E3=81=93=E3=81=8B=E3=82=8A?=
 <67428053+kakkokari-gtyih@users.noreply.github.com>
Date: Fri, 6 Sep 2024 15:37:03 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=82=A2=E3=82=A4?=
 =?UTF-8?q?=E3=82=B3=E3=83=B3=E3=83=87=E3=82=B3=E3=83=AC=E3=83=BC=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E7=AE=A1=E7=90=86=E7=94=BB=E9=9D=A2=E3=81=AB?=
 =?UTF-8?q?=E3=83=97=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC=E3=82=92=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0=20(#14511)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* enhance(frontend): アイコンデコレーション管理画面にプレビューを追加

* Update Changelog

* tweak
---
 CHANGELOG.md                                  |  1 +
 .../frontend/src/pages/avatar-decorations.vue | 93 ++++++++++++++++---
 2 files changed, 81 insertions(+), 13 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe61d69823..398134436b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 
 ### Client
 - サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
+- Enhance: アイコンデコレーション管理画面にプレビューを追加
 - Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
 
 ### Server
diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index ad9ec3c4ee..b377314856 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -12,19 +12,31 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<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 :class="$style.editorRoot">
+					<div :class="$style.editorWrapper">
+						<div :class="$style.preview">
+							<div :class="[$style.previewItem, $style.light]">
+								<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
+							</div>
+							<div :class="[$style.previewItem, $style.dark]">
+								<MkAvatar style="width: 60px; height: 60px;" :user="$i" :decorations="[avatarDecoration]" forceShowDecoration/>
+							</div>
+						</div>
+						<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">
+								<MkButton inline primary @click="save(avatarDecoration)"><i class="ti ti-device-floppy"></i> {{ i18n.ts.save }}</MkButton>
+								<MkButton v-if="avatarDecoration.id != null" inline danger @click="del(avatarDecoration)"><i class="ti ti-trash"></i> {{ i18n.ts.delete }}</MkButton>
+							</div>
+						</div>
 					</div>
 				</div>
 			</MkFolder>
@@ -39,6 +51,7 @@ 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 { signinRequired } from '@/account.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { i18n } from '@/i18n.js';
@@ -47,6 +60,8 @@ import MkFolder from '@/components/MkFolder.vue';
 
 const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
+const $i = signinRequired();
+
 function add() {
 	avatarDecorations.value.unshift({
 		_id: Math.random().toString(36),
@@ -99,3 +114,55 @@ definePageMetadata(() => ({
 	icon: 'ti ti-sparkles',
 }));
 </script>
+
+<style lang="scss" module>
+.editorRoot {
+	container: editor / inline-size;
+}
+
+.editorWrapper {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto;
+	gap: var(--margin);
+}
+
+.preview {
+	display: grid;
+	place-items: center;
+	grid-template-columns: 1fr 1fr;
+	grid-template-rows: 1fr;
+	gap: var(--margin);
+}
+
+.previewItem {
+	width: 100%;
+	height: 100%;
+	min-height: 160px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: var(--radius);
+
+	&.light {
+		background: #eee;
+	}
+
+	&.dark {
+		background: #222;
+	}
+}
+
+@container editor (min-width: 600px) {
+	.editorWrapper {
+		grid-template-columns: 200px 1fr;
+		grid-template-rows: 1fr;
+		gap: calc(var(--margin) * 2);
+	}
+
+	.preview {
+		grid-template-columns: 1fr;
+		grid-template-rows: 1fr 1fr;
+	}
+}
+</style>