ui fix

packages/frontend/src/components/MkDrive.vue

@@ -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;
@@ -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 {

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 {

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);

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' ? {
+} ].filter(x => x !== undefined));
-	text: i18n.ts.markAllAsRead,
+misskeyApi('notifications/mark-all-as-read');
-	icon: 'ti ti-check',
-	handler: () => {
-		os.apiWithDialog('notifications/mark-all-as-read');
-	},
-} : undefined].filter(x => x !== undefined));
-
 const headerTabs = computed(() => [{
 	key: 'all',
 	title: i18n.ts.all,

packages/frontend/src/pages/timeline.vue

@@ -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,