enhance(frontend): アイコン画像・バナー画像を外せるように

CHANGELOG.md

@@ -26,6 +26,7 @@
 - Enhance: ノートについているリアクションの「もっと！」から、リアクションの一覧を表示できるように
 - Enhance: リプライにて引用がある場合テキストが空でもノートできるように
   - 引用したいノートのURLをコピーしリプライ投稿画面にペーストして添付することで達成できます
+- Enhance: アイコン画像・バナー画像を外せるように	
 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
 - Fix: 周年の実績が閏年を考慮しない問題を修正
 - Fix: ローカルURLのプレビューポップアップが左上に表示される

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

@@ -204,7 +204,23 @@ function save() {
 }
 
 function changeAvatar(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar, true).then(async (file) => {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.avatar, true, $i.avatarId ? [
+		{ type: 'divider' },
+		{
+			type: 'button',
+			text: i18n.ts.detach,
+			icon: 'ti ti-circle-x',
+			action: () => {
+				os.apiWithDialog('i/update', {
+					avatarId: null,
+				}).then(() => {
+					$i.avatarId = null;
+					$i.avatarUrl = null;
+					globalEvents.emit('requestClearPageCache');
+				});
+			},
+		},
+	] : undefined).then(async (file) => {
 		let originalOrCropped = file;
 
 		const { canceled } = await os.confirm({
@@ -231,7 +247,23 @@ function changeAvatar(ev) {
 }
 
 function changeBanner(ev) {
-	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner, true).then(async (file) => {
+	selectFile(ev.currentTarget ?? ev.target, i18n.ts.banner, true, $i.bannerId ? [
+		{ type: 'divider' },
+		{
+			type: 'button',
+			text: i18n.ts.detach,
+			icon: 'ti ti-circle-x',
+			action: () => {
+				os.apiWithDialog('i/update', {
+					bannerId: null,
+				}).then(() => {
+					$i.bannerId = null;
+					$i.bannerUrl = null;
+					globalEvents.emit('requestClearPageCache');
+				});
+			},
+		},
+	] : undefined).then(async (file) => {
 		let originalOrCropped = file;
 
 		const { canceled } = await os.confirm({

packages/frontend/src/scripts/select-file.ts

@@ -5,6 +5,7 @@
 
 import { ref } from 'vue';
 import * as Misskey from 'misskey-js';
+import type { MenuItem } from '@/types/menu.js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { useStream } from '@/stream.js';
@@ -80,7 +81,7 @@ export function chooseFileFromUrl(): Promise<Misskey.entities.DriveFile> {
 	});
 }
 
-function select(src: any, label: string | null, multiple: boolean, excludeSensitive: boolean): Promise<Misskey.entities.DriveFile[]> {
+function select(src: any, label: string | null, multiple: boolean, excludeSensitive: boolean, additionalMenu: MenuItem[] = []): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise((res, rej) => {
 		const keepOriginal = ref(defaultStore.state.keepOriginalUploading);
 
@@ -116,14 +117,14 @@ function select(src: any, label: string | null, multiple: boolean, excludeSensit
 			text: i18n.ts.fromUrl,
 			icon: 'ti ti-link',
 			action: () => chooseFileFromUrl().then(file => _resolve([file])),
-		}], src);
+		}, ...additionalMenu], src);
 	});
 }
 
-export function selectFile(src: any, label: string | null = null, excludeSensitive = false): Promise<Misskey.entities.DriveFile> {
+export function selectFile(src: any, label: string | null = null, excludeSensitive = false, additionalMenu?: MenuItem[]): Promise<Misskey.entities.DriveFile> {
-	return select(src, label, false, excludeSensitive).then(files => files[0]);
+	return select(src, label, false, excludeSensitive, additionalMenu).then(files => files[0]);
 }
 
-export function selectFiles(src: any, label: string | null = null, excludeSensitive = false): Promise<Misskey.entities.DriveFile[]> {
+export function selectFiles(src: any, label: string | null = null, excludeSensitive = false, additionalMenu?: MenuItem[]): Promise<Misskey.entities.DriveFile[]> {
-	return select(src, label, true, excludeSensitive);
+	return select(src, label, true, excludeSensitive, additionalMenu);
 }