refactor: 通常投稿ボタン用のハンドラを分離

Co-authored-by: LIVE THE@TER NET <contact@live-theater.net>

packages/frontend/src/boot/main-boot.ts

@@ -21,6 +21,7 @@ import { initializeSw } from '@/scripts/initialize-sw.js';
 import { deckStore } from '@/ui/deck/deck-store.js';
 import { emojiPicker } from '@/scripts/emoji-picker.js';
 import { mainRouter } from '@/router/main.js';
+import { postButtonHandler } from '@/scripts/post-button-handler.js';
 
 export async function mainBoot() {
 	const { isClientUpdated } = await common(() => createApp(
@@ -104,7 +105,7 @@ export async function mainBoot() {
 
 	if ($i) {
 		// only add post shortcuts if logged in
-		hotkeys['p|n'] = post;
+		hotkeys['p|n'] = () => postButtonHandler(mainRouter.currentRef.value);
 
 		defaultStore.loaded.then(() => {
 			if (defaultStore.state.accountSetupWizard !== -1) {

packages/frontend/src/local-storage.ts

@@ -32,6 +32,7 @@ type Keys =
 	'message_drafts' |
 	'scratchpad' |
 	'debug' |
+	`channel:${string}` |
 	`miux:${string}` |
 	`ui:folder:${string}` |
 	`themes:${string}` |

packages/frontend/src/os.ts

@@ -24,7 +24,6 @@ import MkContextMenu from '@/components/MkContextMenu.vue';
 import { MenuItem } from '@/types/menu.js';
 import copyToClipboard from '@/scripts/copy-to-clipboard.js';
 import { showMovedDialog } from '@/scripts/show-moved-dialog.js';
-import { mainRouter } from '@/router/main.js';
 
 export const openingWindowsCount = ref(0);
 
@@ -657,31 +656,6 @@ export function post(props: Record<string, any> = {}): Promise<void> {
 		//       Vueが渡されたコンポーネントに内部的に__propsというプロパティを生やす影響で、
 		//       複数のpost formを開いたときに場合によってはエラーになる
 		//       もちろん複数のpost formを開けること自体Misskeyサイドのバグなのだが
-
-		const route = mainRouter.getCurrentPath().split('/');
-		if (route[1] === 'channels' && !props.channel) {
-			misskeyApi('channels/show', {
-				channelId: route[2],
-			}).then(channel => {
-				props = {
-					...props,
-					channel: { ...channel },
-				};
-				return makePostFormPopup(props);
-			}).catch(err => {
-				console.error(err);
-				alert({
-					type: 'error',
-					text: err.message,
-				});
-			});
-		} else {
-			makePostFormPopup(props);
-		}
-	});
-}
-
-function makePostFormPopup(props) {
 		let dispose;
 		popup(MkPostFormDialog, props, {
 			closed: () => {
@@ -691,6 +665,7 @@ function makePostFormPopup(props) {
 		}).then(res => {
 			dispose = res.dispose;
 		});
+	});
 }
 
 export const deckGlobalEvents = new EventEmitter();

packages/frontend/src/pages/channel.vue

@@ -122,6 +122,7 @@ watch(() => props.channelId, async () => {
 	channel.value = await misskeyApi('channels/show', {
 		channelId: props.channelId,
 	});
+	miLocalStorage.setItem(`channel:${props.channelId}`, JSON.stringify(channel.value));
 	favorited.value = channel.value.isFavorited ?? false;
 	if (favorited.value || channel.value.isFollowing) {
 		tab.value = 'timeline';

packages/frontend/src/router/definition.ts

@@ -317,6 +317,7 @@ const routes: RouteDef[] = [{
 	component: page(() => import('@/pages/channel-editor.vue')),
 	loginRequired: true,
 }, {
+	name: 'channel',
 	path: '/channels/:channelId',
 	component: page(() => import('@/pages/channel.vue')),
 }, {

packages/frontend/src/scripts/post-button-handler.ts

@@ -0,0 +1,34 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import type { Resolved } from '@/nirax.js';
+import { post } from '@/os.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
+import { miLocalStorage } from '@/local-storage.js';
+
+/** 「ノート」というボタンを押させるときはこっちを呼ぶ */
+export async function postButtonHandler(currentRef: Resolved) {
+	if (currentRef.route.name === 'channel') {
+		const channelId = currentRef.props.get('channelId');
+		if (typeof channelId === 'string') {
+			// NOTE: チャンネルを開いているならば、チャンネルの情報がキャッシュされていることを期待できるはずである
+			const channelJSON = miLocalStorage.getItem(`channel:${channelId}`);
+			if (channelJSON) {
+				const channel = JSON.parse(channelJSON);
+				if (channel) {
+					await post({ channel });
+					return;
+				}
+				miLocalStorage.removeItem(`channel:${channelId}`);
+			}
+			const channel = await misskeyApi('channels/show', { channelId });
+			await post({ channel });
+			return;
+		}
+	}
+
+	await post();
+}
+

packages/frontend/src/ui/_common_/navbar-for-mobile.vue

@@ -38,7 +38,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</MkA>
 	</div>
 	<div :class="$style.bottom">
-		<button class="_button" :class="$style.post" data-cy-open-post-form @click="os.post">
+		<button class="_button" :class="$style.post" data-cy-open-post-form @click="post">
 			<i :class="$style.postIcon" class="ti ti-pencil ti-fw"></i><span style="position: relative;">{{ i18n.ts.note }}</span>
 		</button>
 		<button class="_button" :class="$style.account" @click="openAccountMenu">
@@ -57,7 +57,10 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { useRouter } from '@/router/supplier.js';
+import { postButtonHandler } from '@/scripts/post-button-handler.js';
 
+const router = useRouter();
 const menu = toRef(defaultStore.state, 'menu');
 const otherMenuItemIndicated = computed(() => {
 	for (const def in navbarItemDef) {
@@ -77,6 +80,10 @@ function more() {
 	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
 	}, 'closed');
 }
+
+function post() {
+	postButtonHandler(router.currentRef.value);
+}
 </script>
 
 <style lang="scss" module>

packages/frontend/src/ui/_common_/navbar.vue

@@ -48,7 +48,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkA>
 		</div>
 		<div :class="$style.bottom">
-			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="os.post">
+			<button v-tooltip.noDelay.right="i18n.ts.note" class="_button" :class="[$style.post]" data-cy-open-post-form @click="post">
 				<i class="ti ti-pencil ti-fw" :class="$style.postIcon"></i><span :class="$style.postText">{{ i18n.ts.note }}</span>
 			</button>
 			<button v-tooltip.noDelay.right="`${i18n.ts.account}: @${$i.username}`" class="_button" :class="[$style.account]" @click="openAccountMenu">
@@ -68,7 +68,10 @@ import { $i, openAccountMenu as openAccountMenu_ } from '@/account.js';
 import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
+import { useRouter } from '@/router/supplier.js';
+import { postButtonHandler } from '@/scripts/post-button-handler.js';
 
+const router = useRouter();
 const iconOnly = ref(false);
 
 const menu = computed(() => defaultStore.state.menu);
@@ -104,6 +107,10 @@ function more(ev: MouseEvent) {
 	}, {
 	}, 'closed');
 }
+
+function post() {
+	postButtonHandler(router.currentRef.value);
+}
 </script>
 
 <style lang="scss" module>