enhance: コントロールパネルのアイコンデコレーションページから直接ファイルをアップロードおよび設定できるように

CHANGELOG.md

@@ -30,7 +30,8 @@
 - Enhance: Shareページで投稿を完了すると、親ウィンドウ（親フレーム）にpostMessageするように
 - Enhance: チャンネル、クリップ、ページ、Play、ギャラリーにURLのコピーボタンを設置 #11305
 - Enhance: ノートプレビューに「内容を隠す」が反映されるように
-- fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
+- Enhance: コントロールパネルのアイコンデコレーションページから直接ファイルをアップロードおよび設定できるように
+- Fix: 「設定のバックアップ」で一部の項目がバックアップに含まれていなかった問題を修正
 - Fix: ウィジェットのジョブキューにて音声の発音方法変更に追従できていなかったのを修正 #12367
 - Fix: コードエディタが正しく表示されない問題を修正
 - Fix: プロフィールの「ファイル」にセンシティブな画像がある際のデザインを修正

packages/frontend/src/pages/avatar-decorations.vue

@@ -13,6 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #caption>{{ avatarDecoration.description }}</template>
 
 				<div class="_gaps_m">
+					<MkButton rounded style="margin: 0 auto;" @click="selectImage(avatarDecoration, $event)">{{ i18n.ts.selectFile }}</MkButton>
 					<MkInput v-model="avatarDecoration.name">
 						<template #label>{{ i18n.ts.name }}</template>
 					</MkInput>
@@ -38,16 +39,20 @@ import { } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkTextarea from '@/components/MkTextarea.vue';
-import MkSwitch from '@/components/MkSwitch.vue';
-import MkRadios from '@/components/MkRadios.vue';
-import MkInfo from '@/components/MkInfo.vue';
+import { selectFile } from '@/scripts/select-file.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkFolder from '@/components/MkFolder.vue';
 
 let avatarDecorations: any[] = $ref([]);
 
+async function selectImage(decoration, ev) {
+	const file = await selectFile(ev.currentTarget ?? ev.target, null);
+	decoration.name = file.name.replace(/\.(.+)$/, '');
+	decoration.url = file.url;
+}
+
 function add() {
 	avatarDecorations.unshift({
 		_id: Math.random().toString(36),