From 6286e94f66215d8d26fbaebbe7c62ad15db3727d Mon Sep 17 00:00:00 2001
From: mattyatea <mattyatea@pm.me>
Date: Wed, 24 Jan 2024 01:14:06 +0900
Subject: [PATCH] ui fix

---
 packages/frontend/src/components/MkDrive.vue  | 18 +++++++++--------
 .../components/global/MkPageHeader.tabs.vue   |  3 ++-
 .../src/components/global/MkPageHeader.vue    |  5 +++--
 packages/frontend/src/pages/notifications.vue | 15 +++++---------
 packages/frontend/src/pages/timeline.vue      | 20 +++++++++----------
 5 files changed, 30 insertions(+), 31 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 660072f478..2c80a5bafa 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -10,7 +10,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<XNavFolder
 				:class="[$style.navPathItem, { [$style.navCurrent]: folder == null }]"
 				:parentFolder="folder"
-        :selectedFiles="selectedFiles"
+				:selectedFiles="selectedFiles"
 				@move="move"
 				@upload="upload"
 				@removeFile="removeFile"
@@ -35,9 +35,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<span v-if="folder != null" :class="[$style.navPathItem, $style.navCurrent]">{{ folder.name }}</span>
 		</div>
 		<button v-if="!multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード</button>
-    <span   v-if="multiple && selectedFiles.length > 0"   style="padding-right: 12px; margin-top: auto; margin-bottom: auto;opacity: 0.5;">
-      ({{ number(selectedFiles.length) }})
-    </span>
+		<span v-if="multiple && selectedFiles.length > 0" style="padding-right: 12px; margin-top: auto; margin-bottom: auto;opacity: 0.5;">
+			({{ number(selectedFiles.length) }})
+		</span>
 		<button v-if="multiple" class="_button" :class="$style.navMenu" @click="filesSelect">複数選択モード解除</button>
 		<button v-if="multiple && selectedFiles.length === 0" style="padding-right: 12px;" class="_button" @click="filesAllSelect">
 			全選択
@@ -66,7 +66,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:folder="f"
 					:selectMode="select === 'folder'"
 					:isSelected="selectedFolders.some(x => x.id === f.id)"
-          :selectedFiles="selectedFiles"
+					:selectedFiles="selectedFiles"
 					@chosen="chooseFolder"
 					@move="move"
 					@upload="upload"
@@ -90,7 +90,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					:selectMode="select === 'file'"
 					:SelectFiles="selectedFiles"
 					:isSelected="selectedFiles.some(x => x.id === file.id)"
-          @click.shift.left.exact="filesSelect"
+					@click.shift.left.exact="filesSelect"
 					@chosen="chooseFile"
 					@dragstart="isDragSource = true"
 					@dragend="isDragSource = false"
@@ -133,7 +133,7 @@ import { defaultStore } from '@/store.js';
 import { i18n } from '@/i18n.js';
 import { uploadFile, uploads } from '@/scripts/upload.js';
 import { claimAchievement } from '@/scripts/achievements.js';
-import number from "@/filters/number.js";
+import number from '@/filters/number.js';
 
 const props = withDefaults(defineProps<{
   initialFolder?: Misskey.entities.DriveFolder;
@@ -525,7 +525,7 @@ function removeFolder(folderToRemove: Misskey.entities.DriveFolder | string) {
 function removeFile(file: Misskey.entities.DriveFile | string) {
 	const fileId = typeof file === 'object' ? file.id : file;
 	files.value = files.value.filter(f => f.id !== fileId);
-  selectedFiles.value = selectedFiles.value.filter(f => f.id !== fileId);
+	selectedFiles.value = selectedFiles.value.filter(f => f.id !== fileId);
 }
 
 function appendFile(file: Misskey.entities.DriveFile) {
@@ -834,6 +834,7 @@ onBeforeUnmount(() => {
   font-size: 0.9em;
   box-shadow: 0 1px 0 var(--divider);
   user-select: none;
+  height: 55px;
 }
 
 .navPath {
@@ -841,6 +842,7 @@ onBeforeUnmount(() => {
   vertical-align: bottom;
   line-height: 42px;
   white-space: nowrap;
+  margin: auto 0;
 }
 
 .navPathItem {
diff --git a/packages/frontend/src/components/global/MkPageHeader.tabs.vue b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
index adbb270b14..bda76a2c2e 100644
--- a/packages/frontend/src/components/global/MkPageHeader.tabs.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.tabs.vue
@@ -53,7 +53,7 @@ export type Tab = {
 </script>
 
 <script lang="ts" setup>
-import {onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed} from 'vue';
+import { onMounted, onUnmounted, watch, nextTick, shallowRef, ref, computed } from 'vue';
 import { defaultStore } from '@/store.js';
 
 const gamingType = computed(defaultStore.makeGetterSetter('gamingType'));
@@ -232,6 +232,7 @@ onUnmounted(() => {
 
 .tabIcon + .tabTitle {
 	padding-left: 4px;
+	font-weight: 900;
 }
 
 .tabTitle {
diff --git a/packages/frontend/src/components/global/MkPageHeader.vue b/packages/frontend/src/components/global/MkPageHeader.vue
index 8624aebdcf..16e2eb877f 100644
--- a/packages/frontend/src/components/global/MkPageHeader.vue
+++ b/packages/frontend/src/components/global/MkPageHeader.vue
@@ -12,7 +12,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div v-else-if="!thin_ && narrow && !hideTitle" :class="$style.buttonsLeft"/>
 
 		<template v-if="metadata">
-			<div v-if="!hideTitle" :class="$style.titleContainer" @click="top">
+			<div v-if="!hideTitle && !hide" :class="$style.titleContainer" @click="top">
 				<div v-if="metadata.avatar" :class="$style.titleAvatarContainer">
 					<MkAvatar :class="$style.titleAvatar" :user="metadata.avatar" indicator/>
 				</div>
@@ -56,6 +56,7 @@ const props = withDefaults(defineProps<{
 	actions?: PageHeaderItem[] | null;
 	thin?: boolean;
 	displayMyAvatar?: boolean;
+    hide?:boolean;
 }>(), {
 	tabs: () => ([] as Tab[]),
 });
@@ -143,7 +144,7 @@ onUnmounted(() => {
 }
 
 .upper {
-	--height: 50px;
+	--height: 55px;
 	display: flex;
 	gap: var(--margin);
 	height: var(--height);
diff --git a/packages/frontend/src/pages/notifications.vue b/packages/frontend/src/pages/notifications.vue
index e6098c90b3..cc32ef51d0 100644
--- a/packages/frontend/src/pages/notifications.vue
+++ b/packages/frontend/src/pages/notifications.vue
@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <MkStickyContainer>
-	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :tabs="headerTabs" hide="true" :actions="headerActions"/></template>
 	<MkSpacer :contentMax="800">
 		<MkHorizontalSwipe v-model:tab="tab" :tabs="headerTabs">
 			<div v-if="tab === 'all'" key="all">
@@ -31,6 +31,7 @@ import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import { notificationTypes } from '@/const.js';
+import { misskeyApi } from '@/scripts/misskey-api.js';
 
 const tab = ref('all');
 const includeTypes = ref<string[] | null>(null);
@@ -67,19 +68,13 @@ function setFilter(ev) {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-const headerActions = computed(() => [tab.value === 'all' ? {
+const headerActions = computed(() => [{
 	text: i18n.ts.filter,
 	icon: 'ti ti-filter',
 	highlighted: includeTypes.value != null,
 	handler: setFilter,
-} : undefined, tab.value === 'all' ? {
-	text: i18n.ts.markAllAsRead,
-	icon: 'ti ti-check',
-	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
-	},
-} : undefined].filter(x => x !== undefined));
-
+} ].filter(x => x !== undefined));
+misskeyApi('notifications/mark-all-as-read');
 const headerTabs = computed(() => [{
 	key: 'all',
 	title: i18n.ts.all,
diff --git a/packages/frontend/src/pages/timeline.vue b/packages/frontend/src/pages/timeline.vue
index aea1fa9d7e..4e10304892 100644
--- a/packages/frontend/src/pages/timeline.vue
+++ b/packages/frontend/src/pages/timeline.vue
@@ -253,10 +253,10 @@ const headerActions = computed(() => {
 						disabled: onlyFiles } : undefined, {
 						type: 'switch',
 						text: i18n.ts.withSensitive,
-					ref: withSensitive,
-				}, {
-					type: 'switch',
-					text: i18n.ts.fileAttachedOnly,
+						ref: withSensitive,
+					}, {
+						type: 'switch',
+						text: i18n.ts.fileAttachedOnly,
 
 						ref: onlyFiles,
 						disabled: src.value === 'local' || src.value === 'social' ? withReplies : false,
@@ -280,27 +280,27 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
 	key: 'list:' + l.id,
 	title: l.name,
 	icon: 'ti ti-star',
-	iconOnly: true,
+	iconOnly: false,
 }))), {
 	key: 'home',
 	title: i18n.ts._timelines.home,
 	icon: 'ti ti-home',
-	iconOnly: true,
+	iconOnly: false,
 }, ...(isLocalTimelineAvailable ? [{
 	key: 'local',
 	title: i18n.ts._timelines.local,
 	icon: 'ti ti-planet',
-	iconOnly: true,
+	iconOnly: false,
 }, ...(isShowMediaTimeline.value ? [{
 	key: 'media',
 	title: i18n.ts._timelines.media,
 	icon: 'ti ti-photo',
-	iconOnly: true,
+	iconOnly: false,
 }] : []), {
 	key: 'social',
 	title: i18n.ts._timelines.social,
 	icon: 'ti ti-universe',
-	iconOnly: true,
+	iconOnly: false,
 }] : []), ...(remoteLocalTimelineEnable1.value ? [{
 	key: 'custom-timeline-1',
 	title: defaultStore.state.remoteLocalTimelineName1,
@@ -330,7 +330,7 @@ const headerTabs = computed(() => [...(defaultStore.reactiveState.pinnedUserList
 	key: 'global',
 	title: i18n.ts._timelines.global,
 	icon: 'ti ti-whirl',
-	iconOnly: true,
+	iconOnly: false,
 }] : []), {
 	icon: 'ti ti-list',
 	title: i18n.ts.lists,