From 7ff2ecebe666b05fb7d47ca4c2ec45492885e55e Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Wed, 7 Sep 2022 15:09:23 -0700
Subject: [PATCH] feat: :sparkles: Better tabs for mobile

---
 package.json                                           | 2 +-
 packages/client/src/components/global/MkPageHeader.vue | 9 +++++----
 packages/client/src/pages/about.vue                    | 1 +
 packages/client/src/pages/explore.vue                  | 1 +
 packages/client/src/pages/notifications.vue            | 6 ++++++
 packages/client/src/pages/settings/privacy.vue         | 4 ++--
 6 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index a44247979..c5ab60481 100644
--- a/package.json
+++ b/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",
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 5f17e61cf..b9fa06029 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/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>
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index fc2337727..a1cbc2dc2 100644
--- a/packages/client/src/pages/about.vue
+++ b/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,
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index 1fac32c03..2b170a6ee 100644
--- a/packages/client/src/pages/explore.vue
+++ b/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,
 }]);
 
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index 368944135..104304ea8 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/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(() => ({
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 45a0358a9..fd73d86bf 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/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>