spec(profile): 相互リンクバナーのサイズ変更・ID付与 (MisskeyIO#696)

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;

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'],
 						},
 					},
 				},

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),

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-width: 200px;
-	max-height: 30px;
+	max-height: 40px;
 	object-fit: contain;
 }
 

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-width: 200px;
-	max-height: 30px;
+	max-height: 40px;
 }
 </style>

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;