From 4c6e594ff0c2e2ddc2dce942f6fbbd0058f4ad58 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=81=BE=E3=81=A3=E3=81=A1=E3=82=83=E3=81=A8=E3=83=BC?=
 =?UTF-8?q?=E3=81=AB=E3=82=85?=
 <17376330+u1-liquid@users.noreply.github.com>
Date: Wed, 14 Aug 2024 13:20:07 +0900
Subject: [PATCH] =?UTF-8?q?spec(profile):=20=E7=9B=B8=E4=BA=92=E3=83=AA?=
 =?UTF-8?q?=E3=83=B3=E3=82=AF=E3=83=90=E3=83=8A=E3=83=BC=E3=81=AE=E3=82=B5?=
 =?UTF-8?q?=E3=82=A4=E3=82=BA=E5=A4=89=E6=9B=B4=E3=83=BBID=E4=BB=98?=
 =?UTF-8?q?=E4=B8=8E=20(MisskeyIO#696)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/backend/src/models/UserProfile.ts           |  1 +
 packages/backend/src/models/json-schema/user.ts      |  3 ++-
 .../backend/src/server/api/endpoints/i/update.ts     |  3 +++
 packages/frontend/src/pages/settings/profile.vue     | 12 +++++++-----
 packages/frontend/src/pages/user/home.vue            |  6 +++---
 packages/misskey-js/src/autogen/types.ts             |  2 ++
 6 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/packages/backend/src/models/UserProfile.ts b/packages/backend/src/models/UserProfile.ts
index 550e70a3f..c493ebfcc 100644
--- a/packages/backend/src/models/UserProfile.ts
+++ b/packages/backend/src/models/UserProfile.ts
@@ -49,6 +49,7 @@ export class MiUserProfile {
 	public mutualLinkSections: {
 		name: string | null;
 		mutualLinks: {
+			id: string;
 			fileId: MiDriveFile['id'];
 			description: string | null;
 			imgSrc: string;
diff --git a/packages/backend/src/models/json-schema/user.ts b/packages/backend/src/models/json-schema/user.ts
index a87383f91..409212749 100644
--- a/packages/backend/src/models/json-schema/user.ts
+++ b/packages/backend/src/models/json-schema/user.ts
@@ -397,12 +397,13 @@ export const packedUserDetailedNotMeOnlySchema = {
 						items: {
 							type: 'object',
 							properties: {
+								id: { type: 'string', format: 'misskey:id' },
 								url: { type: 'string' },
 								fileId: { type: 'string', format: 'misskey:id' },
 								description: { type: 'string', nullable: true },
 								imgSrc: { type: 'string' },
 							},
-							required: ['url', 'fileId'],
+							required: ['id', 'url', 'fileId'],
 						},
 					},
 				},
diff --git a/packages/backend/src/server/api/endpoints/i/update.ts b/packages/backend/src/server/api/endpoints/i/update.ts
index 4ccf94e18..96395f0a5 100644
--- a/packages/backend/src/server/api/endpoints/i/update.ts
+++ b/packages/backend/src/server/api/endpoints/i/update.ts
@@ -35,6 +35,7 @@ import { AvatarDecorationService } from '@/core/AvatarDecorationService.js';
 import { notificationRecieveConfig } from '@/models/json-schema/user.js';
 import { ApiLoggerService } from '../../ApiLoggerService.js';
 import { ApiError } from '../../error.js';
+import { IdService } from "@/core/IdService.js";
 
 export const meta = {
 	tags: ['account'],
@@ -268,6 +269,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 		@Inject(DI.pagesRepository)
 		private pagesRepository: PagesRepository,
 
+		private idService: IdService,
 		private userEntityService: UserEntityService,
 		private driveFileEntityService: DriveFileEntityService,
 		private globalEventService: GlobalEventService,
@@ -377,6 +379,7 @@ export default class extends Endpoint<typeof meta, typeof paramDef> { // eslint-
 						}
 
 						return {
+							id: this.idService.gen(),
 							url: mutualLink.url,
 							fileId: file.id,
 							imgSrc: this.driveFileEntityService.getPublicUrl(file),
diff --git a/packages/frontend/src/pages/settings/profile.vue b/packages/frontend/src/pages/settings/profile.vue
index c18e388aa..95df3a5c8 100644
--- a/packages/frontend/src/pages/settings/profile.vue
+++ b/packages/frontend/src/pages/settings/profile.vue
@@ -183,7 +183,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, reactive, ref, watch, defineAsyncComponent, Ref } from 'vue';
+import { computed, reactive, ref, watch, defineAsyncComponent } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSwitch from '@/components/MkSwitch.vue';
@@ -202,7 +202,6 @@ import { defaultStore } from '@/store.js';
 import { globalEvents } from '@/events.js';
 import MkInfo from '@/components/MkInfo.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
-import * as Misskey from "misskey-js";
 
 const $i = signinRequired();
 
@@ -225,7 +224,7 @@ watch(() => profile, () => {
 	deep: true,
 });
 
-const mutualLinkSections = ref($i.mutualLinkSections ?? []) as Ref<Misskey.entities.UserDetailed['mutualLinkSections']>;
+const mutualLinkSections = ref($i.mutualLinkSections.map(section => ({ ...section, id: Math.random().toString(), none: !section.name })) ?? []);
 const fields = ref($i.fields.map(field => ({ id: Math.random().toString(), name: field.name, value: field.value })) ?? []);
 const fieldEditMode = ref(false);
 const mutualLinkSectionEditMode = ref(false);
@@ -240,6 +239,7 @@ function addField() {
 
 function addMutualLinks(index:number) {
 	mutualLinkSections.value[index].mutualLinks.push({
+		id: Math.random().toString(),
 		fileId: '',
 		url: '',
 		imgSrc: '',
@@ -249,7 +249,9 @@ function addMutualLinks(index:number) {
 
 function addMutualLinkSections() {
 	mutualLinkSections.value.push({
+		id: Math.random().toString(),
 		name: 'New Section',
+		none: false,
 		mutualLinks: [],
 	});
 }
@@ -495,8 +497,8 @@ definePageMetadata(() => ({
 }
 
 .mutualLinkImg {
-	max-width: 150px;
-	max-height: 30px;
+	max-width: 200px;
+	max-height: 40px;
 	object-fit: contain;
 }
 
diff --git a/packages/frontend/src/pages/user/home.vue b/packages/frontend/src/pages/user/home.vue
index 654e2cf65..fdf4e3c7c 100644
--- a/packages/frontend/src/pages/user/home.vue
+++ b/packages/frontend/src/pages/user/home.vue
@@ -84,7 +84,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div v-for="(section, index) in user?.mutualLinkSections" :key="index" :class="$style.mutualLinkSections">
 							<span v-if="section.name">{{ section.name }}</span>
 							<div :class="$style.mutualLinks">
-								<div v-for="(mutualLink, i) in section.mutualLinks" :key="i">
+								<div v-for="mutualLink in section.mutualLinks" :key="mutualLink.id">
 									<MkLink :hideIcon="true" :url="mutualLink.url">
 										<img :class="$style.mutualLinkImg" :src="mutualLink.imgSrc" :alt="mutualLink.description"/>
 									</MkLink>
@@ -832,7 +832,7 @@ onUnmounted(() => {
 }
 
 .mutualLinkImg {
-	max-width: 150px;
-	max-height: 30px;
+	max-width: 200px;
+	max-height: 40px;
 }
 </style>
diff --git a/packages/misskey-js/src/autogen/types.ts b/packages/misskey-js/src/autogen/types.ts
index 58a9b2cee..f428942bf 100644
--- a/packages/misskey-js/src/autogen/types.ts
+++ b/packages/misskey-js/src/autogen/types.ts
@@ -3845,6 +3845,8 @@ export type components = {
       mutualLinkSections: ({
           name: string | null;
           mutualLinks: ({
+              /** Format: misskey:id */
+              id: string;
               url: string;
               /** Format: misskey:id */
               fileId: string;