From 5b26ad5953b2c877ab796f64bd52abca8b956a4a Mon Sep 17 00:00:00 2001
From: taiy <53635909+taiyme@users.noreply.github.com>
Date: Fri, 1 Nov 2024 20:56:35 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=E3=83=87=E3=82=B3=E3=83=AC=E3=83=BC?=
 =?UTF-8?q?=E3=82=B7=E3=83=A7=E3=83=B3=E3=82=92=E4=BB=98=E3=81=91=E3=82=8B?=
 =?UTF-8?q?=E3=81=A8MkAvatar=E3=81=A7=E3=82=A8=E3=83=A9=E3=83=BC=E3=81=AB?=
 =?UTF-8?q?=E3=81=AA=E3=82=8B=E5=95=8F=E9=A1=8C=20(#300)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../settings/avatar-decoration.dialog.vue     | 36 +++++++---------
 .../src/pages/settings/avatar-decoration.vue  | 42 ++++++++++---------
 2 files changed, 38 insertions(+), 40 deletions(-)

diff --git a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
index 853e536ea30b..2d186cf132fd 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.dialog.vue
@@ -46,6 +46,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { shallowRef, ref, computed } from 'vue';
+import * as Misskey from 'misskey-js';
 import MkButton from '@/components/MkButton.vue';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -53,39 +54,32 @@ import { i18n } from '@/i18n.js';
 import MkRange from '@/components/MkRange.vue';
 import { signinRequired } from '@/account.js';
 
+type AvatarDecoration = Misskey.entities.GetAvatarDecorationsResponse[number];
+type AvatarDecorationWithPosition = Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id' | 'url'>;
+
 const $i = signinRequired();
 
 const props = defineProps<{
 	usingIndex: number | null;
-	decoration: {
-		id: string;
-		url: string;
-		name: string;
-	};
+	decoration: AvatarDecoration;
 }>();
 
 const emit = defineEmits<{
 	(ev: 'closed'): void;
-	(ev: 'attach', payload: {
-		angle: number;
-		flipH: boolean;
-		offsetX: number;
-		offsetY: number;
-	}): void;
-	(ev: 'update', payload: {
-		angle: number;
-		flipH: boolean;
-		offsetX: number;
-		offsetY: number;
-	}): void;
+	(ev: 'attach', payload: AvatarDecorationWithPosition): void;
+	(ev: 'update', payload: AvatarDecorationWithPosition): void;
 	(ev: 'detach'): void;
 }>();
 
 const dialog = shallowRef<InstanceType<typeof MkModalWindow>>();
 const exceeded = computed(() => ($i.policies.avatarDecorationLimit - $i.avatarDecorations.length) <= 0);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const angle = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].angle : null) ?? 0);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const flipH = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].flipH : null) ?? false);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const offsetX = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].offsetX : null) ?? 0);
+// eslint-disable-next-line vue/no-setup-props-reactivity-loss
 const offsetY = ref((props.usingIndex != null ? $i.avatarDecorations[props.usingIndex].offsetY : null) ?? 0);
 
 const decorationsForPreview = computed(() => {
@@ -108,7 +102,7 @@ const decorationsForPreview = computed(() => {
 });
 
 function cancel() {
-	dialog.value.close();
+	dialog.value?.close();
 }
 
 async function update() {
@@ -118,7 +112,7 @@ async function update() {
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
 	});
-	dialog.value.close();
+	dialog.value?.close();
 }
 
 async function attach() {
@@ -128,12 +122,12 @@ async function attach() {
 		offsetX: offsetX.value,
 		offsetY: offsetY.value,
 	});
-	dialog.value.close();
+	dialog.value?.close();
 }
 
 async function detach() {
 	emit('detach');
-	dialog.value.close();
+	dialog.value?.close();
 }
 </script>
 
diff --git a/packages/frontend/src/pages/settings/avatar-decoration.vue b/packages/frontend/src/pages/settings/avatar-decoration.vue
index 3233817551c1..c81b75f19504 100644
--- a/packages/frontend/src/pages/settings/avatar-decoration.vue
+++ b/packages/frontend/src/pages/settings/avatar-decoration.vue
@@ -19,13 +19,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div :class="$style.decorations">
 						<XDecoration
 							v-for="(avatarDecoration, i) in $i.avatarDecorations"
-							:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)"
+							:key="avatarDecoration.id"
+							:decoration="avatarDecorations.find(d => d.id === avatarDecoration.id)!"
 							:angle="avatarDecoration.angle"
 							:flipH="avatarDecoration.flipH"
 							:offsetX="avatarDecoration.offsetX"
 							:offsetY="avatarDecoration.offsetY"
 							:active="true"
-							@click="openDecoration(avatarDecoration, i)"
+							@click="openDecoration(avatarDecorations.find(d => d.id === avatarDecoration.id)!, i)"
 						/>
 					</div>
 
@@ -61,55 +62,58 @@ import { signinRequired } from '@/account.js';
 import MkInfo from '@/components/MkInfo.vue';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 
+type AvatarDecoration = Misskey.entities.GetAvatarDecorationsResponse[number];
+type AvatarDecorationWithPosition = Omit<Misskey.entities.UserDetailed['avatarDecorations'][number], 'id' | 'url'>;
+
 const $i = signinRequired();
 
 const loading = ref(true);
-const avatarDecorations = ref<Misskey.entities.GetAvatarDecorationsResponse>([]);
+const avatarDecorations = ref<AvatarDecoration[]>([]);
 
 misskeyApi('get-avatar-decorations').then(_avatarDecorations => {
 	avatarDecorations.value = _avatarDecorations;
 	loading.value = false;
 });
 
-function openDecoration(avatarDecoration, index?: number) {
+function openDecoration(avatarDecoration: AvatarDecoration, index?: number) {
 	const { dispose } = os.popup(defineAsyncComponent(() => import('./avatar-decoration.dialog.vue')), {
 		decoration: avatarDecoration,
-		usingIndex: index,
+		usingIndex: index ?? null,
 	}, {
-		'attach': async (payload) => {
+		'attach': async (payload: AvatarDecorationWithPosition) => {
 			const decoration = {
+				...payload,
 				id: avatarDecoration.id,
-				angle: payload.angle,
-				flipH: payload.flipH,
-				offsetX: payload.offsetX,
-				offsetY: payload.offsetY,
-			};
+				url: avatarDecoration.url,
+			} as const satisfies AvatarDecorationWithPosition & Pick<AvatarDecoration, 'id' | 'url'>;
 			const update = [...$i.avatarDecorations, decoration];
 			await os.apiWithDialog('i/update', {
 				avatarDecorations: update,
 			});
 			$i.avatarDecorations = update;
 		},
-		'update': async (payload) => {
+		'update': async (payload: AvatarDecorationWithPosition) => {
+			if (index == null) return;
 			const decoration = {
+				...payload,
 				id: avatarDecoration.id,
-				angle: payload.angle,
-				flipH: payload.flipH,
-				offsetX: payload.offsetX,
-				offsetY: payload.offsetY,
-			};
+				url: avatarDecoration.url,
+			} as const satisfies AvatarDecorationWithPosition & Pick<AvatarDecoration, 'id' | 'url'>;
 			const update = [...$i.avatarDecorations];
 			update[index] = decoration;
 			await os.apiWithDialog('i/update', {
-				avatarDecorations: update,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				avatarDecorations: update.map(({ url, ...d }) => d),
 			});
 			$i.avatarDecorations = update;
 		},
 		'detach': async () => {
+			if (index == null) return;
 			const update = [...$i.avatarDecorations];
 			update.splice(index, 1);
 			await os.apiWithDialog('i/update', {
-				avatarDecorations: update,
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+				avatarDecorations: update.map(({ url, ...d }) => d),
 			});
 			$i.avatarDecorations = update;
 		},