move help menu to middle navbar (more!)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.1.3-beta6",
+	"version": "13.1.3-beta7",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/navbar.ts

@@ -5,6 +5,10 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { ui } from "@/config";
 import { unisonReload } from "@/scripts/unison-reload";
+import { defaultStore } from '@/store';
+import { instance } from '@/instance';
+import { host } from '@/config';
+import XTutorial from '@/components/MkTutorialDialog.vue';
 
 export const navbarItemDef = reactive({
 	notifications: {
@@ -144,4 +148,59 @@ export const navbarItemDef = reactive({
 			location.reload();
 		},
 	},
+	help: {
+		title: "help",
+		icon: "ph-question-bold ph-lg",
+		action: (ev) => {
+			os.popupMenu([{
+				text: instance.name ?? host,
+				type: 'label',
+			}, {
+				type: 'link',
+				text: i18n.ts.instanceInfo,
+				icon: 'ph-info-bold ph-lg',
+				to: '/about',
+			}, {
+				type: 'link',
+				text: i18n.ts.aboutMisskey,
+				icon: 'ph-lightbulb-bold ph-lg',
+				to: '/about-calckey',
+			}, {
+				type: 'link',
+				text: i18n.ts._apps.apps,
+				icon: 'ph-device-mobile-bold ph-lg',
+				to: '/apps',
+			}, {
+					type: 'button',
+					action: async () => {
+						defaultStore.set('tutorial', 0);
+						os.popup(XTutorial, {}, {}, 'closed');
+					},
+					text: i18n.ts.replayTutorial,
+					icon: 'ph-circle-wavy-question-bold ph-lg',
+				}, null, {
+					type: 'parent',
+					text: i18n.ts.developer,
+					icon: 'ph-code-bold ph-lg',
+					children: [{
+						type: 'link',
+						to: '/api-console',
+						text: 'API Console',
+						icon: 'ph-terminal-window-bold ph-lg',
+					}, {
+						text: i18n.ts.document,
+						icon: 'ph-file-doc-bold ph-lg',
+						action: () => {
+							window.open('/api-doc', '_blank');
+						},
+					}, {
+						type: 'link',
+						to: '/scratchpad',
+						text: 'AiScript Scratchpad',
+						icon: 'ph-scribble-loop-bold ph-lg',
+					}]
+				}], ev.currentTarget ?? ev.target,
+			);
+		},
+	},
 });

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

@@ -46,12 +46,10 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } from 'vue';
-import { host } from '@/config';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
-import { instance } from '@/instance';
 import { i18n } from '@/i18n';
 
 const menu = toRef(defaultStore.state, 'menu');
@@ -69,59 +67,6 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }
 
-function openHelpMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info-bold ph-lg',
-		to: '/about',
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		icon: 'ph-lightbulb-bold ph-lg',
-		to: '/about-calckey',
-	}, {
-		type: 'link',
-		text: i18n.ts._apps.apps,
-		icon: 'ph-device-mobile-bold ph-lg',
-		to: '/apps',
-	}, {
-			type: 'button',
-			action: async () => {
-				defaultStore.set('tutorial', 0);
-				os.popup(XTutorial, {}, {}, 'closed');
-			},
-			text: i18n.ts.replayTutorial,
-			icon: 'ph-circle-wavy-question-bold ph-lg',
-		}, null, {
-			type: 'parent',
-			text: i18n.ts.developer,
-			icon: 'ph-code-bold ph-lg',
-			children: [{
-				type: 'link',
-				to: '/api-console',
-				text: 'API Console',
-				icon: 'ph-terminal-window-bold ph-lg',
-			}, {
-				text: i18n.ts.document,
-				icon: 'ph-file-doc-bold ph-lg',
-				action: () => {
-					window.open('/api-doc', '_blank');
-				},
-			}, {
-				type: 'link',
-				to: '/scratchpad',
-				text: 'AiScript Scratchpad',
-				icon: 'ph-scribble-loop-bold ph-lg',
-			}]
-		}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
-}
-
 function more() {
 	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
 	}, 'closed');
@@ -219,13 +164,6 @@ function more() {
 				}
 			}
 
-			> .help {
-				align-items: center;
-				display: flex;
-				padding: 10px;
-				justify-content: center;
-			}
-
 			> .instance {
 				position: relative;
 				display: flex;

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

@@ -44,11 +44,11 @@
 			<button v-tooltip.noDelay.right="i18n.ts.note" class="item _button post" data-cy-open-post-form @click="os.post">
 				<i class="icon ph-pencil-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
-			<div class="help">
+			<!-- <div class="help">
 				<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button" @click="openHelpMenu">
 					<i class="icon ph-info-bold ph-xl ph-fw ph-lg"></i>
 				</button>
-			</div>
+			</div> -->
 			<!-- <button v-click-anime v-tooltip.noDelay.right="$instance.name ?? i18n.ts.instance" class="item _button instance" @click="openInstanceMenu">
 				<img :src="$instance.iconUrl || $instance.faviconUrl || '/favicon.ico'" alt="" class="icon"/>
 			</button> -->
@@ -62,14 +62,13 @@
 
 <script lang="ts" setup>
 import { computed, defineAsyncComponent, ref, watch } from 'vue';
-import XTutorial from '@/components/MkTutorialDialog.vue';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
-import { host, version } from '@/config';
+import { version } from '@/config';
 
 const isEmpty = (x: string | null) => x == null || x === '';
 
@@ -127,59 +126,6 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }
 
-function openHelpMenu(ev: MouseEvent) {
-	os.popupMenu([{
-		text: instance.name ?? host,
-		type: 'label',
-	}, {
-		type: 'link',
-		text: i18n.ts.instanceInfo,
-		icon: 'ph-info-bold ph-lg',
-		to: '/about',
-	}, {
-		type: 'link',
-		text: i18n.ts.aboutMisskey,
-		icon: 'ph-lightbulb-bold ph-lg',
-		to: '/about-calckey',
-	}, {
-		type: 'link',
-		text: i18n.ts._apps.apps,
-		icon: 'ph-device-mobile-bold ph-lg',
-		to: '/apps',
-	}, {
-			type: 'button',
-			action: async () => {
-				defaultStore.set('tutorial', 0);
-				os.popup(XTutorial, {}, {}, 'closed');
-			},
-			text: i18n.ts.replayTutorial,
-			icon: 'ph-circle-wavy-question-bold ph-lg',
-		}, null, {
-			type: 'parent',
-			text: i18n.ts.developer,
-			icon: 'ph-code-bold ph-lg',
-			children: [{
-				type: 'link',
-				to: '/api-console',
-				text: 'API Console',
-				icon: 'ph-terminal-window-bold ph-lg',
-			}, {
-				text: i18n.ts.document,
-				icon: 'ph-file-doc-bold ph-lg',
-				action: () => {
-					window.open('/api-doc', '_blank');
-				},
-			}, {
-				type: 'link',
-				to: '/scratchpad',
-				text: 'AiScript Scratchpad',
-				icon: 'ph-scribble-loop-bold ph-lg',
-			}]
-		}], ev.currentTarget ?? ev.target, {
-		align: 'left',
-	});
-}
-
 function more(ev: MouseEvent) {
 	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
 		src: ev.currentTarget ?? ev.target,
@@ -303,12 +249,6 @@ function more(ev: MouseEvent) {
 						margin-left: 1rem;
 					}
 				}
-				> .help {
-					align-items: center;
-					display: flex;
-					padding: 10px;
-					justify-content: center;
-				}
 
 				> .instance {
 					position: relative;