Improve navbar

locales/en-US.yml

@@ -275,7 +275,7 @@ currentPassword: "Current password"
 newPassword: "New password"
 newPasswordRetype: "Retype new password"
 attachFile: "Attach files"
-more: "More!"
+more: "More"
 featured: "Featured"
 usernameOrUserId: "Username or user id"
 noSuchUser: "User not found"

packages/client/src/navbar.ts

@@ -9,6 +9,7 @@ import { defaultStore } from "@/store";
 import { instance } from "@/instance";
 import { host } from "@/config";
 import XTutorial from "@/components/MkTutorialDialog.vue";
+import { openHelpMenu_ } from "@/scripts/helpMenu";
 
 export const navbarItemDef = reactive({
 	notifications: {
@@ -40,7 +41,7 @@ export const navbarItemDef = reactive({
 	},
 	explore: {
 		title: "explore",
-		icon: "ph-compass ph-bold ph-lg",
+		icon: "ph-hash ph-bold ph-lg",
 		to: "/explore",
 	},
 	announcements: {
@@ -141,11 +142,22 @@ export const navbarItemDef = reactive({
 			);
 		},
 	},
+	help: {
+		title: "help",
+		icon: "ph-info ph-bold ph-lg",
+		action: (ev) => {
+			openHelpMenu(ev);
+		},
+	},
 	reload: {
 		title: "reload",
 		icon: "ph-arrows-clockwise ph-bold ph-lg",
-		action: (ev) => {
+		action: () => {
 			location.reload();
-		},
+		}
-	},
+	}
 });
+
+function openHelpMenu(ev: MouseEvent) {
+	openHelpMenu_(ev);
+}

packages/client/src/store.ts

@@ -12,9 +12,10 @@ const menuOptions = [
 	"notifications",
 	"followRequests",
 	"messaging",
-	"explore",
+	"-",
 	"favorites",
-	"channels",
+	"announcements",
+	"explore",
 	"search",
 ];
 

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

@@ -80,6 +80,7 @@
 					<i class="icon ph-door ph-bold ph-lg ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
 				</MkA>
+				<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
 				<button v-click-anime class="item _button" @click="more">
 					<i
 						class="icon ph-dots-three-outline ph-bold ph-lg ph-fw ph-lg"
@@ -111,13 +112,6 @@
 					<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>
@@ -135,7 +129,6 @@ import {
 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";
 
@@ -157,10 +150,6 @@ function openAccountMenu(ev: MouseEvent) {
 	);
 }
 
-function openHelpMenu(ev: MouseEvent) {
-	openHelpMenu_(ev);
-}
-
 function more() {
 	os.popup(
 		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),

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

@@ -92,6 +92,7 @@
 					><i class="icon ph-door ph-bold ph-fw ph-lg"></i
 					><span class="text">{{ i18n.ts.controlPanel }}</span>
 				</MkA>
+				<div class="divider" v-if="$i.isAdmin || $i.isModerator"></div>
 				<button
 					v-click-anime
 					v-tooltip.noDelay.right="i18n.ts.more"
@@ -127,13 +128,6 @@
 					<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>
 				<!-- <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> -->
@@ -150,7 +144,6 @@ 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";
@@ -221,10 +214,6 @@ function openAccountMenu(ev: MouseEvent) {
 	);
 }
 
-function openHelpMenu(ev: MouseEvent) {
-	openHelpMenu_(ev);
-}
-
 function more(ev: MouseEvent) {
 	os.popup(
 		defineAsyncComponent(() => import("@/components/MkLaunchPad.vue")),