merge: upstream

packages/frontend/src/pages/flash/flash-edit.vue

@@ -15,9 +15,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 				<template #label>{{ i18n.ts._play.summary }}</template>
 			</MkTextarea>
 			<MkButton primary @click="selectPreset">{{ i18n.ts.selectFromPresets }}<i class="ph-caret-down ph-bold ph-lg"></i></MkButton>
-			<MkTextarea v-model="script" class="_monospace" tall spellcheck="false">
+			<MkCodeEditor v-model="script" lang="is">
 				<template #label>{{ i18n.ts._play.script }}</template>
-			</MkTextarea>
+			</MkCodeEditor>
 			<div class="_buttons">
 				<MkButton primary @click="save"><i class="ph-check ph-bold ph-lg"></i> {{ i18n.ts.save }}</MkButton>
 				<MkButton @click="show"><i class="ph-eye ph-bold ph-lg"></i> {{ i18n.ts.show }}</MkButton>
@@ -34,12 +34,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkTextarea from '@/components/MkTextarea.vue';
+import MkCodeEditor from '@/components/MkCodeEditor.vue';
 import MkInput from '@/components/MkInput.vue';
 import MkSelect from '@/components/MkSelect.vue';
 import { useRouter } from '@/router.js';
@@ -363,79 +364,79 @@ const props = defineProps<{
 	id?: string;
 }>();
 
-let flash = $ref(null);
-let visibility = $ref('public');
+const flash = ref(null);
+const visibility = ref('public');
 
 if (props.id) {
-	flash = await os.api('flash/show', {
+	flash.value = await os.api('flash/show', {
 		flashId: props.id,
 	});
 }
 
-let title = $ref(flash?.title ?? 'New Play');
-let summary = $ref(flash?.summary ?? '');
-let permissions = $ref(flash?.permissions ?? []);
-let script = $ref(flash?.script ?? PRESET_DEFAULT);
+const title = ref(flash.value?.title ?? 'New Play');
+const summary = ref(flash.value?.summary ?? '');
+const permissions = ref(flash.value?.permissions ?? []);
+const script = ref(flash.value?.script ?? PRESET_DEFAULT);
 
 function selectPreset(ev: MouseEvent) {
 	os.popupMenu([{
 		text: 'Omikuji',
 		action: () => {
-			script = PRESET_OMIKUJI;
+			script.value = PRESET_OMIKUJI;
 		},
 	}, {
 		text: 'Shuffle',
 		action: () => {
-			script = PRESET_SHUFFLE;
+			script.value = PRESET_SHUFFLE;
 		},
 	}, {
 		text: 'Quiz',
 		action: () => {
-			script = PRESET_QUIZ;
+			script.value = PRESET_QUIZ;
 		},
 	}, {
 		text: 'Timeline viewer',
 		action: () => {
-			script = PRESET_TIMELINE;
+			script.value = PRESET_TIMELINE;
 		},
 	}], ev.currentTarget ?? ev.target);
 }
 
 async function save() {
-	if (flash) {
+	if (flash.value) {
 		os.apiWithDialog('flash/update', {
 			flashId: props.id,
-			title,
-			summary,
-			permissions,
-			script,
-			visibility,
+			title: title.value,
+			summary: summary.value,
+			permissions: permissions.value,
+			script: script.value,
+			visibility: visibility.value,
 		});
 	} else {
 		const created = await os.apiWithDialog('flash/create', {
-			title,
-			summary,
-			permissions,
-			script,
+			title: title.value,
+			summary: summary.value,
+			permissions: permissions.value,
+			script: script.value,
 		});
 		router.push('/play/' + created.id + '/edit');
 	}
 }
 
 function show() {
-	if (flash == null) {
+	if (flash.value == null) {
 		os.alert({
 			text: 'Please save',
 		});
 	} else {
-		os.pageWindow(`/play/${flash.id}`);
+		os.pageWindow(`/play/${flash.value.id}`);
 	}
 }
 
 async function del() {
 	const { canceled } = await os.confirm({
 		type: 'warning',
-		text: i18n.t('deleteAreYouSure', { x: flash.title }),
+		text: i18n.t('deleteAreYouSure', { x: flash.value.title }),
 	});
 	if (canceled) return;
 
@@ -445,12 +446,12 @@ async function del() {
 	router.push('/play');
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
-definePageMetadata(computed(() => flash ? {
-	title: i18n.ts._play.edit + ': ' + flash.title,
+definePageMetadata(computed(() => flash.value ? {
+	title: i18n.ts._play.edit + ': ' + flash.value.title,
 } : {
 	title: i18n.ts._play.new,
 }));

packages/frontend/src/pages/flash/flash-index.vue

@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed } from 'vue';
+import { computed, ref } from 'vue';
 import MkFlashPreview from '@/components/MkFlashPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
@@ -48,7 +48,7 @@ import { definePageMetadata } from '@/scripts/page-metadata.js';
 
 const router = useRouter();
 
-let tab = $ref('featured');
+const tab = ref('featured');
 
 const featuredFlashsPagination = {
 	endpoint: 'flash/featured' as const,
@@ -67,13 +67,13 @@ function create() {
 	router.push('/play/new');
 }
 
-const headerActions = $computed(() => [{
+const headerActions = computed(() => [{
 	icon: 'ph-plus ph-bold ph-lg',
 	text: i18n.ts.create,
 	handler: create,
 }]);
 
-const headerTabs = $computed(() => [{
+const headerTabs = computed(() => [{
 	key: 'featured',
 	title: i18n.ts._play.featured,
 	icon: 'ph-fire ph-bold ph-lg',

packages/frontend/src/pages/flash/flash.vue

@@ -18,7 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 							<MkButton v-if="flash.isLiked" v-tooltip="i18n.ts.unlike" asLike class="button" rounded primary @click="unlike()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="flash.likedCount > 0" style="margin-left: 6px;">{{ flash.likedCount }}</span></MkButton>
 							<MkButton v-else v-tooltip="i18n.ts.like" asLike class="button" rounded @click="like()"><i class="ph-heart ph-bold ph-lg"></i><span v-if="flash.likedCount > 0" style="margin-left: 6px;">{{ flash.likedCount }}</span></MkButton>
 							<MkButton v-tooltip="i18n.ts.shareWithNote" class="button" rounded @click="shareWithNote"><i class="ph-repeat ph-bold ph-lg ti-fw"></i></MkButton>
-							<MkButton v-tooltip="i18n.ts.share" class="button" rounded @click="share"><i class="ph-share-network ph-bold ph-lg ti-fw"></i></MkButton>
+							<MkButton v-tooltip="i18n.ts.copyLink" class="button" rounded @click="copyLink"><i class="ph-share-network ph-bold ph-lg ti-fw"></i></MkButton>
+							<MkButton v-if="isSupportShare()" v-tooltip="i18n.ts.share" class="button" rounded @click="share"><i class="ph-share-network ph-bold ph-lg ti-fw"></i></MkButton>
 						</div>
 					</div>
 					<div v-else :class="$style.ready">
@@ -56,7 +57,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, onDeactivated, onUnmounted, Ref, ref, watch } from 'vue';
+import { computed, onDeactivated, onUnmounted, Ref, ref, watch, shallowRef } from 'vue';
 import { Interpreter, Parser, values } from '@syuilo/aiscript';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
@@ -70,45 +71,52 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkCode from '@/components/MkCode.vue';
 import { defaultStore } from '@/store.js';
 import { $i } from '@/account.js';
+import { isSupportShare } from '@/scripts/navigator.js';
+import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 
 const props = defineProps<{
 	id: string;
 }>();
 
-let flash = $ref(null);
-let error = $ref(null);
+const flash = ref(null);
+const error = ref(null);
 
 function fetchFlash() {
-	flash = null;
+	flash.value = null;
 	os.api('flash/show', {
 		flashId: props.id,
 	}).then(_flash => {
-		flash = _flash;
+		flash.value = _flash;
 	}).catch(err => {
-		error = err;
+		error.value = err;
 	});
 }
 
+function copyLink() {
+	copyToClipboard(`${url}/play/${flash.value.id}`);
+	os.success();
+}
+
 function share() {
 	navigator.share({
-		title: flash.title,
-		text: flash.summary,
-		url: `${url}/play/${flash.id}`,
+		title: flash.value.title,
+		text: flash.value.summary,
+		url: `${url}/play/${flash.value.id}`,
 	});
 }
 
 function shareWithNote() {
 	os.post({
-		initialText: `${flash.title} ${url}/play/${flash.id}`,
+		initialText: `${flash.value.title} ${url}/play/${flash.value.id}`,
 	});
 }
 
 function like() {
 	os.apiWithDialog('flash/like', {
-		flashId: flash.id,
+		flashId: flash.value.id,
 	}).then(() => {
-		flash.isLiked = true;
-		flash.likedCount++;
+		flash.value.isLiked = true;
+		flash.value.likedCount++;
 	});
 }
 
@@ -119,10 +127,10 @@ async function unlike() {
 	});
 	if (confirm.canceled) return;
 	os.apiWithDialog('flash/unlike', {
-		flashId: flash.id,
+		flashId: flash.value.id,
 	}).then(() => {
-		flash.isLiked = false;
-		flash.likedCount--;
+		flash.value.isLiked = false;
+		flash.value.likedCount--;
 	});
 }
 
@@ -130,39 +138,35 @@ watch(() => props.id, fetchFlash, { immediate: true });
 
 const parser = new Parser();
 
-let started = $ref(false);
-let aiscript = $shallowRef<Interpreter | null>(null);
+const started = ref(false);
+const aiscript = shallowRef<Interpreter | null>(null);
 const root = ref<AsUiRoot>();
-const components: Ref<AsUiComponent>[] = $ref([]);
+const components = ref<Ref<AsUiComponent>[]>([]);
 
 function start() {
-	started = true;
+	started.value = true;
 	run();
 }
 
 async function run() {
-	if (aiscript) aiscript.abort();
+	if (aiscript.value) aiscript.value.abort();
 
-	aiscript = new Interpreter({
+	aiscript.value = new Interpreter({
 		...createAiScriptEnv({
-			storageKey: 'flash:' + flash.id,
+			storageKey: 'flash:' + flash.value.id,
 		}),
-		...registerAsUiLib(components, (_root) => {
+		...registerAsUiLib(components.value, (_root) => {
 			root.value = _root.value;
 		}),
-		THIS_ID: values.STR(flash.id),
-		THIS_URL: values.STR(`${url}/play/${flash.id}`),
+		THIS_ID: values.STR(flash.value.id),
+		THIS_URL: values.STR(`${url}/play/${flash.value.id}`),
 	}, {
 		in: (q) => {
 			return new Promise(ok => {
 				os.inputText({
 					title: q,
-				}).then(({ canceled, result: a }) => {
-					if (canceled) {
-						ok('');
-					} else {
-						ok(a);
-					}
+				}).then(({ result: a }) => {
+					ok(a ?? '');
 				});
 			});
 		},
@@ -176,7 +180,7 @@ async function run() {
 
 	let ast;
 	try {
-		ast = parser.parse(flash.script);
+		ast = parser.parse(flash.value.script);
 	} catch (err) {
 		os.alert({
 			type: 'error',
@@ -185,7 +189,7 @@ async function run() {
 		return;
 	}
 	try {
-		await aiscript.exec(ast);
+		await aiscript.value.exec(ast);
 	} catch (err) {
 		os.alert({
 			type: 'error',
@@ -196,24 +200,24 @@ async function run() {
 }
 
 onDeactivated(() => {
-	if (aiscript) aiscript.abort();
+	if (aiscript.value) aiscript.value.abort();
 });
 
 onUnmounted(() => {
-	if (aiscript) aiscript.abort();
+	if (aiscript.value) aiscript.value.abort();
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
-definePageMetadata(computed(() => flash ? {
-	title: flash.title,
-	avatar: flash.user,
-	path: `/play/${flash.id}`,
+definePageMetadata(computed(() => flash.value ? {
+	title: flash.value.title,
+	avatar: flash.value.user,
+	path: `/play/${flash.value.id}`,
 	share: {
-		title: flash.title,
-		text: flash.summary,
+		title: flash.value.title,
+		text: flash.value.summary,
 	},
 } : null));
 </script>