feat: ✨ Better tabs for mobile

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "calckey",
-	"version": "12.118.1-calc.2-beta.2-rc.9",
+	"version": "12.118.1-calc.2-beta.2-rc.10",
 	"codename": "aqua",
 	"repository": {
 		"type": "git",

packages/client/src/components/global/MkPageHeader.vue

@@ -14,16 +14,17 @@
 				<div v-if="!narrow && metadata.subtitle" class="subtitle">
 					{{ metadata.subtitle }}
 				</div>
-				<div v-if="narrow && hasTabs" class="subtitle activeTab">
+				<!-- <div v-if="narrow && hasTabs" class="subtitle activeTab">
 					{{ tabs.find(tab => tab.key === props.tab)?.title }}
 					<i class="chevron fas fa-chevron-down"></i>
-				</div>
+				</div> -->
 			</div>
 		</div>
-		<div v-if="!narrow || hideTitle" class="tabs">
+		<div v-if="hideTitle" class="tabs"> <!-- v-if="!narrow || hideTitle" -->
+			<!-- eslint-disable-next-line vue/require-v-for-key -->
 			<button v-for="tab in tabs" :ref="(el) => tabRefs[tab.key] = el" v-tooltip.noDelay="tab.title" class="tab _button" :class="{ active: tab.key != null && tab.key === props.tab }" @mousedown="(ev) => onTabMousedown(tab, ev)" @click="(ev) => onTabClick(tab, ev)">
 				<i v-if="tab.icon" class="icon" :class="tab.icon"></i>
-				<span v-if="!tab.iconOnly" class="title">{{ tab.title }}</span>
+				<span v-if="!tab.iconOnly && !narrow" class="title">{{ tab.title }}</span>
 			</button>
 			<div ref="tabHighlightEl" class="highlight"></div>
 		</div>

packages/client/src/pages/about.vue

@@ -115,6 +115,7 @@ const headerActions = $computed(() => []);
 let theTabs = [{
 	key: 'overview',
 	title: i18n.ts.overview,
+	icon: 'fas fa-sitemap',
 }, {
 	key: 'emojis',
 	title: i18n.ts.customEmojis,

packages/client/src/pages/explore.vue

@@ -77,6 +77,7 @@ const headerTabs = $computed(() => [{
 	title: i18n.ts.users,
 }, {
 	key: 'search',
+	icon: 'fas fa-magnifying-glass',
 	title: i18n.ts.search,
 }]);
 

packages/client/src/pages/notifications.vue

@@ -93,17 +93,23 @@ const headerActions = $computed(() => [tab === 'all' ? {
 const headerTabs = $computed(() => [{
 	key: 'all',
 	title: i18n.ts.all,
+	icon: 'fas fa-bell',
+	iconOnly: true,
 }, {
 	key: 'unread',
 	title: i18n.ts.unread,
+	icon: 'fas fa-exclamation',
+	iconOnly: true,
 }, {
 	key: 'mentions',
 	title: i18n.ts.mentions,
 	icon: 'fas fa-at',
+	iconOnly: true,
 }, {
 	key: 'directNotes',
 	title: i18n.ts.directNotes,
 	icon: 'fas fa-envelope',
+	iconOnly: true,
 }]);
 
 definePageMetadata(computed(() => ({

packages/client/src/pages/settings/privacy.vue

@@ -7,7 +7,7 @@
 		{{ i18n.ts.makeReactionsPublic }}
 		<template #caption>{{ i18n.ts.makeReactionsPublicDescription }}</template>
 	</FormSwitch>
-		
+
 	<FormSelect v-model="ffVisibility" class="_formBlock" @update:modelValue="save()">
 		<template #label>{{ i18n.ts.ffVisibility }}</template>
 		<option value="public">{{ i18n.ts._ffVisibility.public }}</option>
@@ -15,7 +15,7 @@
 		<option value="private">{{ i18n.ts._ffVisibility.private }}</option>
 		<template #caption>{{ i18n.ts.ffVisibilityDescription }}</template>
 	</FormSelect>
-		
+
 	<FormSwitch v-model="hideOnlineStatus" class="_formBlock" @update:modelValue="save()">
 		{{ i18n.ts.hideOnlineStatus }}
 		<template #caption>{{ i18n.ts.hideOnlineStatusDescription }}</template>