enhance(frontend): add Ui:C:postForm to play

CHANGELOG.md

@@ -32,6 +32,7 @@
 - 投稿フォームのプレビューの表示状態を記憶するように
 - ノート詳細ページ読み込み時のパフォーマンスを改善
 - AiScriptからMisskeyサーバーAPIを呼び出す際の制限を撤廃
+- Playで直接投稿フォームを埋め込めるように(`Ui:C:postForm`)
 - Enhance: ユーザーメニューでスイッチでユーザーリストに追加・削除できるように
 - Enhance: 自分が押したリアクションのデザインを改善
 - Enhance: ノート検索にローカルのみ検索可能なオプションの追加

packages/frontend/src/components/MkAsUi.vue

@@ -38,6 +38,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<option v-for="item in c.items" :key="item.value" :value="item.value">{{ item.text }}</option>
 	</MkSelect>
 	<MkButton v-else-if="c.type === 'postFormButton'" :primary="c.primary" :rounded="c.rounded" :small="size === 'small'" inline @click="openPostForm">{{ c.text }}</MkButton>
+	<div v-else-if="c.type === 'postForm'" :class="$style.postForm">
+		<MkPostForm
+			fixed
+			:instant="true"
+			:initialText="c.form.text"
+		/>
+	</div>
 	<MkFolder v-else-if="c.type === 'folder'" :defaultOpen="c.opened">
 		<template #label>{{ c.title }}</template>
 		<template v-for="child in c.children" :key="child">
@@ -62,6 +69,7 @@ import MkTextarea from '@/components/MkTextarea.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import { AsUiComponent } from '@/scripts/aiscript/ui';
 import MkFolder from '@/components/MkFolder.vue';
+import MkPostForm from '@/components/MkPostForm.vue';
 
 const props = withDefaults(defineProps<{
 	component: AsUiComponent;
@@ -114,4 +122,9 @@ function openPostForm() {
 .fontMonospace {
 	font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
 }
+
+.postForm {
+	background: var(--bg);
+	border-radius: 8px;
+}
 </style>

packages/frontend/src/components/MkPostForm.vue

@@ -629,6 +629,8 @@ function onDrop(ev): void {
 }
 
 function saveDraft() {
+	if (props.instant) return;
+
 	const draftData = JSON.parse(miLocalStorage.getItem('drafts') ?? '{}');
 
 	draftData[draftKey] = {

packages/frontend/src/scripts/aiscript/ui.ts

@@ -124,7 +124,14 @@ export type AsUiPostFormButton = AsUiComponentBase & {
 	};
 };
 
-export type AsUiComponent = AsUiRoot | AsUiContainer | AsUiText | AsUiMfm | AsUiButton | AsUiButtons | AsUiSwitch | AsUiTextarea | AsUiTextInput | AsUiNumberInput | AsUiSelect | AsUiFolder | AsUiPostFormButton;
+export type AsUiPostForm = AsUiComponentBase & {
+	type: 'postForm';
+	form?: {
+		text: string;
+	};
+};
+
+export type AsUiComponent = AsUiRoot | AsUiContainer | AsUiText | AsUiMfm | AsUiButton | AsUiButtons | AsUiSwitch | AsUiTextarea | AsUiTextInput | AsUiNumberInput | AsUiSelect | AsUiFolder | AsUiPostFormButton | AsUiPostForm;
 
 export function patch(id: string, def: values.Value, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>) {
 	// TODO
@@ -462,6 +469,27 @@ function getPostFormButtonOptions(def: values.Value | undefined, call: (fn: valu
 	};
 }
 
+function getPostFormOptions(def: values.Value | undefined, call: (fn: values.VFn, args: values.Value[]) => Promise<values.Value>): Omit<AsUiPostForm, 'id' | 'type'> {
+	utils.assertObject(def);
+
+	const form = def.value.get('form');
+	if (form) utils.assertObject(form);
+
+	const getForm = () => {
+		const text = form!.value.get('text');
+		utils.assertString(text);
+		return {
+			text: text.value,
+		};
+	};
+
+	return {
+		form: form ? getForm() : {
+			text: '',
+		},
+	};
+}
+
 export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: Ref<AsUiRoot>) => void) {
 	const instances = {};
 
@@ -569,5 +597,9 @@ export function registerAsUiLib(components: Ref<AsUiComponent>[], done: (root: R
 		'Ui:C:postFormButton': values.FN_NATIVE(([def, id], opts) => {
 			return createComponentInstance('postFormButton', def, id, getPostFormButtonOptions, opts.call);
 		}),
+
+		'Ui:C:postForm': values.FN_NATIVE(([def, id], opts) => {
+			return createComponentInstance('postForm', def, id, getPostFormOptions, opts.call);
+		}),
 	};
 }