enhance(frontend): ウィジェットの設定画面を改良 (#17033)

* enhance(frontend): ウィジェットの設定画面を改良

* Update Changelog

* fix lint

packages/frontend/src/components/MkForm.file.vue

@@ -0,0 +1,74 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<div>
+	<MkButton inline rounded primary @click="selectButton($event)">{{ i18n.ts.selectFile }}</MkButton>
+	<div :class="['_nowrap', !fileName && $style.fileNotSelected]">{{ friendlyFileName }}</div>
+</div>
+</template>
+
+<script setup lang="ts">
+import * as Misskey from 'misskey-js';
+import { computed, ref } from 'vue';
+import { i18n } from '@/i18n.js';
+import MkButton from '@/components/MkButton.vue';
+import { selectFile } from '@/utility/drive.js';
+import { misskeyApi } from '@/utility/misskey-api.js';
+
+const props = defineProps<{
+	fileId?: string | null;
+	validate?: (file: Misskey.entities.DriveFile) => Promise<boolean>;
+}>();
+
+const emit = defineEmits<{
+	(ev: 'update', result: Misskey.entities.DriveFile): void;
+}>();
+
+const fileUrl = ref('');
+const fileName = ref<string>('');
+
+const friendlyFileName = computed<string>(() => {
+	if (fileName.value) {
+		return fileName.value;
+	}
+	if (fileUrl.value) {
+		return fileUrl.value;
+	}
+
+	return i18n.ts.fileNotSelected;
+});
+
+if (props.fileId) {
+	misskeyApi('drive/files/show', {
+		fileId: props.fileId,
+	}).then((apiRes) => {
+		fileName.value = apiRes.name;
+		fileUrl.value = apiRes.url;
+	});
+}
+
+function selectButton(ev: MouseEvent) {
+	selectFile({
+		anchorElement: ev.currentTarget ?? ev.target,
+		multiple: false,
+	}).then(async (file) => {
+		if (!file) return;
+		if (props.validate && !await props.validate(file)) return;
+
+		emit('update', file);
+		fileName.value = file.name;
+		fileUrl.value = file.url;
+	});
+}
+
+</script>
+
+<style module>
+.fileNotSelected {
+	font-weight: 700;
+	color: var(--MI_THEME-infoWarnFg);
+}
+</style>