feat: ✨ help menu in navbar

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "13.2.0-dev19",
+	"version": "13.2.0-dev20",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/navbar.ts

@@ -148,73 +148,4 @@ export const navbarItemDef = reactive({
 			location.reload();
 		},
 	},
-	help: {
-		title: "help",
-		icon: "ph-question ph-bold ph-lg",
-		action: (ev) => {
-			os.popupMenu(
-				[
-					{
-						text: instance.name ?? host,
-						type: "label",
-					},
-					{
-						type: "link",
-						text: i18n.ts.instanceInfo,
-						icon: "ph-info ph-bold ph-lg",
-						to: "/about",
-					},
-					{
-						type: "link",
-						text: i18n.ts.aboutMisskey,
-						icon: "ph-lightbulb ph-bold ph-lg",
-						to: "/about-calckey",
-					},
-					{
-						type: "link",
-						text: i18n.ts._apps.apps,
-						icon: "ph-device-mobile ph-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 ph-bold ph-lg",
-					},
-					null,
-					{
-						type: "parent",
-						text: i18n.ts.developer,
-						icon: "ph-code ph-bold ph-lg",
-						children: [
-							{
-								type: "link",
-								to: "/api-console",
-								text: "API Console",
-								icon: "ph-terminal-window ph-bold ph-lg",
-							},
-							{
-								text: i18n.ts.document,
-								icon: "ph-file-doc ph-bold ph-lg",
-								action: () => {
-									window.open("/api-doc", "_blank");
-								},
-							},
-							{
-								type: "link",
-								to: "/scratchpad",
-								text: "AiScript Scratchpad",
-								icon: "ph-scribble-loop ph-bold ph-lg",
-							},
-						],
-					},
-				],
-				ev.currentTarget ?? ev.target,
-			);
-		},
-	},
 });

packages/client/src/scripts/helpMenu.ts

@@ -0,0 +1,72 @@
+import { defaultStore } from "@/store";
+import { instance } from "@/instance";
+import { host } from "@/config";
+import * as os from "@/os";
+import XTutorial from "../components/MkTutorialDialog.vue";
+import { i18n } from "@/i18n";
+
+export function openHelpMenu_(ev: MouseEvent) {
+	os.popupMenu(
+		[
+			{
+				text: instance.name ?? host,
+				type: "label",
+			},
+			{
+				type: "link",
+				text: i18n.ts.instanceInfo,
+				icon: "ph-info ph-bold ph-lg",
+				to: "/about",
+			},
+			{
+				type: "link",
+				text: i18n.ts.aboutMisskey,
+				icon: "ph-lightbulb ph-bold ph-lg",
+				to: "/about-calckey",
+			},
+			{
+				type: "link",
+				text: i18n.ts._apps.apps,
+				icon: "ph-device-mobile ph-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 ph-bold ph-lg",
+			},
+			null,
+			{
+				type: "parent",
+				text: i18n.ts.developer,
+				icon: "ph-code ph-bold ph-lg",
+				children: [
+					{
+						type: "link",
+						to: "/api-console",
+						text: "API Console",
+						icon: "ph-terminal-window ph-bold ph-lg",
+					},
+					{
+						text: i18n.ts.document,
+						icon: "ph-file-doc ph-bold ph-lg",
+						action: () => {
+							window.open("/api-doc", "_blank");
+						},
+					},
+					{
+						type: "link",
+						to: "/scratchpad",
+						text: "AiScript Scratchpad",
+						icon: "ph-scribble-loop ph-bold ph-lg",
+					},
+				],
+			},
+		],
+		ev.currentTarget ?? ev.target
+	);
+}

packages/client/src/store.ts

@@ -91,6 +91,7 @@ export const defaultStore = markRaw(
 				"favorites",
 				"channels",
 				"search",
+				"ui",
 			],
 		},
 		visibility: {

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

@@ -34,6 +34,9 @@
 			<button class="item _button post" data-cy-open-post-form @click="os.post">
 				<i class="icon ph-pencil ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
 			</button>
+			<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" @click="openHelpMenu">
+				<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
+			</button>
 		</div>
 	</div>
 </div>
@@ -44,6 +47,7 @@ import { computed, defineAsyncComponent, defineComponent, ref, toRef, watch } fr
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { openAccountMenu as openAccountMenu_ } from '@/account';
+import { openHelpMenu_ } from '@/scripts/helpMenu'
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 
@@ -62,6 +66,10 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }
 
+function openHelpMenu(ev: MouseEvent) {
+	openHelpMenu_(ev);
+}
+
 function more() {
 	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {}, {
 	}, 'closed');
@@ -160,6 +168,19 @@ function more() {
 				}
 			}
 
+			> .help {
+					position: relative;
+					display: block;
+					text-align: center;
+					width: 100%;
+
+					> .icon {
+						display: inline-block;
+						width: 38px;
+						aspect-ratio: 1;
+					}
+				}
+
 			> .instance {
 				position: relative;
 				display: flex;

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

@@ -9,7 +9,7 @@
 		</div>
 		<div class="middle">
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.timeline" class="item index" active-class="active" to="/" exact>
-				<i class="icon ph-house ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
+				<i class="icon ph-house ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.timeline }}</span>
 			</MkA>
 			<template v-for="item in menu">
 				<div v-if="item === '-'" class="divider"></div>
@@ -30,25 +30,23 @@
 			</template>
 			<div class="divider"></div>
 			<MkA v-if="$i.isAdmin || $i.isModerator" v-click-anime v-tooltip.noDelay.right="i18n.ts.controlPanel" class="item _button" active-class="active" to="/admin">
-				<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
+				<span v-if="thereIsUnresolvedAbuseReport || noMaintainerInformation || noBotProtection || noEmailServer || updateAvailable" class="indicator"></span><i class="icon ph-door ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.controlPanel }}</span>
 			</MkA>
 			<button v-click-anime class="item _button" @click="more">
-				<i class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
+				<i class="icon ph-dots-three-outline ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.more }}</span>
 				<span v-if="otherMenuItemIndicated" class="indicator"><i class="icon ph-circle ph-fill"></i></span>
 			</button>
 			<MkA v-click-anime v-tooltip.noDelay.right="i18n.ts.settings" class="item _button" active-class="active" to="/settings">
-				<i class="icon ph-gear-six ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
+				<i class="icon ph-gear-six ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.settings }}</span>
 			</MkA>
 		</div>
 		<div class="bottom">
 			<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 ph-bold ph-lg ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
+				<i class="icon ph-pencil ph-bold ph-fw ph-lg"></i><span class="text">{{ i18n.ts.note }}</span>
+			</button>
+			<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button help" @click="openHelpMenu">
+				<i class="help icon ph-info ph-bold ph-xl ph-fw"></i>
 			</button>
-			<!-- <div class="help">
-				<button v-tooltip.noDelay.right="i18n.ts.help" class="item _button" @click="openHelpMenu">
-					<i class="icon ph-info ph-bold ph-xl ph-fw ph-lg"></i>
-				</button>
-			</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> -->
@@ -65,6 +63,7 @@ import { computed, defineAsyncComponent, ref, watch } from 'vue';
 import * as os from '@/os';
 import { navbarItemDef } from '@/navbar';
 import { $i, openAccountMenu as openAccountMenu_ } from '@/account';
+import { openHelpMenu_ } from '@/scripts/helpMenu'
 import { defaultStore } from '@/store';
 import { i18n } from '@/i18n';
 import { instance } from '@/instance';
@@ -126,6 +125,10 @@ function openAccountMenu(ev: MouseEvent) {
 	}, ev);
 }
 
+function openHelpMenu(ev: MouseEvent) {
+	openHelpMenu_(ev);
+}
+
 function more(ev: MouseEvent) {
 	os.popup(defineAsyncComponent(() => import('@/components/MkLaunchPad.vue')), {
 		src: ev.currentTarget ?? ev.target,
@@ -265,7 +268,7 @@ function more(ev: MouseEvent) {
 					}
 				}
 
-				> .account {
+				> .help {
 					position: relative;
 					display: block;
 					text-align: center;