enhance(profile): 相互リンクの機能改善 (MisskeyIO#703)

locales/index.d.ts

@@ -5095,6 +5095,10 @@ export interface Locale extends ILocale {
      * 相互リンク
      */
     "mutualLink": string;
+    /**
+     * このファイルをドライブに保存する
+     */
+    "saveThisFile": string;
     "_bubbleGame": {
         /**
          * 遊び方

locales/ja-JP.yml

@@ -1269,6 +1269,7 @@ blockThisUser: "このユーザーをブロックする"
 muteThisUser: "このユーザーをミュートする"
 here: "こちら"
 mutualLink: "相互リンク"
+saveThisFile: "このファイルをドライブに保存する"
 
 _bubbleGame:
   howToPlay: "遊び方"

packages/backend/src/server/api/endpoints/admin/unset-user-mutual-link.ts

@@ -19,8 +19,9 @@ export const paramDef = {
 	type: 'object',
 	properties: {
 		userId: { type: 'string', format: 'misskey:id' },
+		itemId: { type: 'string', format: 'misskey:id' },
 	},
-	required: ['userId'],
+	required: ['userId', 'itemId'],
 } as const;
 
 // eslint-disable-next-line import/no-default-export
@@ -43,7 +44,10 @@ export default class extends Endpoint<typeof meta, typeof paramDef> {
 			}
 
 			await this.userProfilesRepository.update(user.id, {
-				mutualLinkSections: [],
+				mutualLinkSections: userProfile.mutualLinkSections.map(section => ({
+					...section,
+					mutualLinks: section.mutualLinks.filter(item => item.id !== ps.itemId),
+				})),
 			});
 
 			this.moderationLogService.log(me, 'unsetUserMutualLink', {

packages/frontend/src/components/MkMediaImage.vue

@@ -62,6 +62,7 @@ import { i18n } from '@/i18n.js';
 import * as os from '@/os.js';
 import { pleaseLogin } from '@/scripts/please-login.js';
 import { $i, iAmModerator } from '@/account.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const props = withDefaults(defineProps<{
 	image: Misskey.entities.DriveFile;
@@ -92,6 +93,20 @@ function showMenu(ev: MouseEvent) {
 		action: () => {
 			hide.value = true;
 		},
+	}, {
+		text: i18n.ts.saveThisFile,
+		icon: 'ti ti-cloud-upload',
+		action: () => {
+			os.selectDriveFolder(false).then(async folder => {
+				if (folder[0] == null) {
+					return;
+				}
+				misskeyApi('drive/files/upload-from-url', {
+					url: props.image.url,
+					folderId: folder ? folder[0].id : undefined,
+				});
+			});
+		},
 	}];
 
 	if ($i?.id === props.image.userId || iAmModerator) {

packages/frontend/src/pages/admin-user.vue

@@ -66,7 +66,19 @@ SPDX-License-Identifier: AGPL-3.0-only
 								<MkButton v-if="user.host == null" @click="resetPassword"><i class="ti ti-key"></i> {{ i18n.ts.resetPassword }}</MkButton>
 								<MkButton inline danger @click="unsetUserAvatar"><i class="ti ti-user-circle"></i> {{ i18n.ts.unsetUserAvatar }}</MkButton>
 								<MkButton inline danger @click="unsetUserBanner"><i class="ti ti-photo"></i> {{ i18n.ts.unsetUserBanner }}</MkButton>
-								<MkButton inline danger @click="unsetUserMutualLink"><i class="ti ti-photo"></i> {{ i18n.ts.unsetUserMutualLink }}</MkButton>
+								<MkFolder v-if="user?.mutualLinkSections && user?.mutualLinkSections.reduce((acc, section) => acc + section.mutualLinks.length, 0) > 0">
+									<template #icon><i class="ti ti-link"></i></template>
+									<template #label>{{ i18n.ts._profile.mutualLinksEdit }}</template>
+
+									<div v-for="mutualLinkSection in user?.mutualLinkSections">
+										<div v-for="mutualLink in mutualLinkSection.mutualLinks" :key="mutualLink.id" :class="$style.fields">
+											<p> {{ mutualLink.url }} </p>
+											<img :class="$style.mutualLinkImg" :src="mutualLink.imgSrc" :alt="mutualLink.description"/>
+											<p> {{ mutualLink.description }} </p>
+											<MkButton inline danger @click="unsetUserMutualLink(mutualLink.id)"><i class="ti ti-link"></i> {{ i18n.ts.unsetUserMutualLink }}</MkButton>
+										</div>
+									</div>
+								</MkFolder>
 							</div>
 						</MkFolder>
 
@@ -365,15 +377,16 @@ async function unsetUserBanner() {
 	}).then(refreshUser);
 }
 
-async function unsetUserMutualLink() {
+async function unsetUserMutualLink(mutualLinkid: string) {
 	const confirm = await os.confirm({
 		type: 'warning',
 		text: i18n.ts.unsetUserMutualLinkConfirm,
 	});
 	if (confirm.canceled) return;
 
-	await os.apiWithDialog('admin/unset-user-mutual-banner', {
+	await os.apiWithDialog('admin/unset-user-mutual-link', {
 		userId: user.value.id,
+		itemId: mutualLinkid,
 	}).then(refreshUser);
 }
 
@@ -705,4 +718,16 @@ definePageMetadata(() => ({
 	border-radius: 6px;
 	cursor: pointer;
 }
+
+.mutualLinkImg {
+	max-width: 200px;
+	max-height: 40px;
+}
+.fields {
+	padding: 24px;
+	border-bottom: solid 0.5px var(--divider);
+	&:last-child {
+		border-bottom: none;
+	}
+}
 </style>

packages/frontend/src/pages/settings/profile.vue

@@ -112,7 +112,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<template #item="{ element: sectionElement, index: sectionIndex }">
 						<div :class="$style.mutualLinkSectionRoot">
 							<button v-if="!mutualLinkSectionEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1"><i class="ti ti-menu"></i></button>
-							<button v-if="mutualLinkSectionEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteMutualLinkSection(sectionIndex)"><i class="ti ti-x"></i></button>
+
+							{{sectionElement.length }}
+							<button v-if="mutualLinkSectionEditMode" :disabled="sectionElement.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteMutualLinkSection(sectionIndex)"><i class="ti ti-x"></i></button>
 							<FormSlot :style="{flexGrow: 1}">
 								<MkFolder>
 									<template #label>{{ sectionElement.name || i18n.ts._profile.sectionNameNone }}</template>
@@ -136,7 +138,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 										<template #item="{ element: linkElement, index: linkIndex }">
 											<div :class="$style.mutualLinkRoot">
 												<button v-if="!mutualLinkSectionEditMode" class="_button" :class="$style.dragItemHandle" tabindex="-1"><i class="ti ti-menu"></i></button>
-												<button v-if="mutualLinkSectionEditMode" :disabled="fields.length <= 1" class="_button" :class="$style.dragItemRemove" @click="deleteMutualLink(sectionIndex,linkIndex)"><i class="ti ti-x"></i></button>
+												<button v-if="mutualLinkSectionEditMode" class="_button" :class="$style.dragItemRemove" @click="deleteMutualLink(sectionIndex,linkIndex)"><i class="ti ti-x"></i></button>
 
 												<div class="_gaps_s" :style="{flex: 1}">
 													<MkInfo v-if="linkIndex >= $i.policies.mutualLinkLimit" warn><Mfm :text="i18n.tsx._profile.policyDisplayLimitExceeded({ max: $i.policies.mutualLinkLimit })"/></MkInfo>

packages/frontend/src/pages/user/home.vue

@@ -624,6 +624,7 @@ onUnmounted(() => {
 					padding: 24px;
 					font-size: 0.9em;
 					border-top: solid 0.5px var(--divider);
+					margin-top: 0.5px;
 
 					> .field {
 						display: flex;

packages/misskey-js/src/autogen/types.ts

@@ -6855,6 +6855,8 @@ export type operations = {
         'application/json': {
           /** Format: misskey:id */
           userId: string;
+          /** Format: misskey:id */
+          itemId: string;
         };
       };
     };