From ec799fb6ef7e300de108de8762ad4fffd949203a 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                                  |   4 +-
 .../frontend/src/pages/avatar-decorations.vue | 109 +++++++++++-------
 2 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 66f3fd12f4..d538d6c634 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -4,7 +4,9 @@
 -
 
 ### Client
--
+- サイズ制限を超過するファイルをアップロードしようとした際にエラーを出すように
+- Enhance: アイコンデコレーション管理画面にプレビューを追加
+- Fix: サーバーメトリクスが2つ以上あるとリロード直後の表示がおかしくなる問題を修正
 
 ### Server
 - Fix: WSの`readAllNotifications` メッセージが `body` を持たない場合に動作しない問題 #14374
diff --git a/packages/frontend/src/pages/avatar-decorations.vue b/packages/frontend/src/pages/avatar-decorations.vue
index 20bdd36e67..bd1e6b4617 100644
--- a/packages/frontend/src/pages/avatar-decorations.vue
+++ b/packages/frontend/src/pages/avatar-decorations.vue
@@ -12,27 +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>
-					<div :class="$style.imageSelectdiv">
-						<p>{{ i18n.ts.image }}</p>
-						<MkButton @click="ev => changeImage(ev, avatarDecoration)">{{ i18n.ts.selectFile }}</MkButton>
-					</div>
-					<MkInput v-model="avatarDecoration.url">
-						<template #label>{{ i18n.ts.imageUrl }}</template>
-					</MkInput>
-					<div v-if="avatarDecoration.url !== ''" :class="$style.imgContainer">
-						<img src="https://misskey-hub.net/avatar-decoration-template.png" :class="$style.img" style="opacity: .5;"/>
-						<img :src="avatarDecoration.url" :class="$style.img"/>
-					</div>
-					<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>
@@ -47,6 +51,7 @@ import * as Misskey from 'cherrypick-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';
@@ -56,6 +61,8 @@ import { selectFile } from '@/scripts/select-file.js';
 
 const avatarDecorations = ref<Misskey.entities.AdminAvatarDecorationsListResponse>([]);
 
+const $i = signinRequired();
+
 async function changeImage(ev, avatarDecoration) {
 	const file = await selectFile(ev.currentTarget ?? ev.target, null);
 	if (file != null) {
@@ -117,35 +124,53 @@ definePageMetadata(() => ({
 </script>
 
 <style lang="scss" module>
-.imageSelectdiv {
-	display: flex;
-	align-items: center;
-	gap: 1em;
-
-	> p {
-		margin: 0;
-	}
+.editorRoot {
+	container: editor / inline-size;
 }
 
-.imgContainer {
-	position: relative;
-	margin: 8px;
-	width: 128px;
-	height: 128px;
+.editorWrapper {
+	display: grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: auto auto;
+	gap: var(--margin);
 }
 
-.img {
-	display: block;
-
-	position: absolute;
-	left: 0;
-	top: 0;
+.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);
 
-	object-fit: contain;
-	pointer-events: none;
+	&.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>