enhance(client): 一部のコントロールパネルページのヘッダーを改善

CHANGELOG_CHERRYPICK.md

@@ -54,6 +54,7 @@
 - OGP 미리보기 추가 ([misskey.design 4eb0a6d](https://github.com/kiyo4act/misskey.design/commit/4eb0a6d8467c0c601e6fe37b0170c6c36f4bc8f2))
 - 더 보기! 메뉴에 도움말 추가
 - 노트를 자세히 볼 때 역할 배지를 표시하도록
+- 일부 제어판 페이지의 헤더 개선
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: (Friendly) 타임라인이 변경되었을 때 네비게이션 바의 인디케이터가 사라지지 않는 문제
 - Fix: (Friendly) 모바일에서 헤더가 사라졌을 때 프로필 아이콘의 높이가 잘못 설정되는 문제

packages/frontend/src/pages/admin/overview.vue

@@ -1,66 +1,72 @@
 <template>
-<MkSpacer :contentMax="1000">
+<div>
-	<div ref="rootEl" :class="$style.root">
+	<MkStickyContainer>
-		<MkFoldableSection class="item">
+		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
-			<template #header>Stats</template>
+		<MkSpacer :contentMax="1000">
-			<XStats/>
+			<div ref="rootEl" :class="$style.root">
-		</MkFoldableSection>
+				<MkFoldableSection class="item">
+					<template #header>Stats</template>
+					<XStats/>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Active users</template>
+					<template #header>Active users</template>
-			<XActiveUsers/>
+					<XActiveUsers/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Heatmap</template>
+					<template #header>Heatmap</template>
-			<XHeatmap/>
+					<XHeatmap/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Retention rate</template>
+					<template #header>Retention rate</template>
-			<XRetention/>
+					<XRetention/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Moderators</template>
+					<template #header>Moderators</template>
-			<XModerators/>
+					<XModerators/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Federation</template>
+					<template #header>Federation</template>
-			<XFederation/>
+					<XFederation/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 		
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Instances</template>
+					<template #header>Instances</template>
-			<XInstances/>
+					<XInstances/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Ap requests</template>
+					<template #header>Ap requests</template>
-			<XApRequests/>
+					<XApRequests/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>New users</template>
+					<template #header>New users</template>
-			<XUsers/>
+					<XUsers/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Deliver queue</template>
+					<template #header>Deliver queue</template>
-			<XQueue domain="deliver"/>
+					<XQueue domain="deliver"/>
-		</MkFoldableSection>
+				</MkFoldableSection>
 
-		<MkFoldableSection class="item">
+				<MkFoldableSection class="item">
-			<template #header>Inbox queue</template>
+					<template #header>Inbox queue</template>
-			<XQueue domain="inbox"/>
+					<XQueue domain="inbox"/>
-		</MkFoldableSection>
+				</MkFoldableSection>
-	</div>
+			</div>
-</MkSpacer>
+		</MkSpacer>
+	</MkStickyContainer>
+</div>
 </template>
 
 <script lang="ts" setup>
 import { markRaw, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import XHeader from './_header_.vue';
 import XFederation from './overview.federation.vue';
 import XInstances from './overview.instances.vue';
 import XQueue from './overview.queue.vue';

packages/frontend/src/pages/admin/queue.vue

@@ -1,6 +1,6 @@
 <template>
 <MkStickyContainer>
-	<template #header><XHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
+	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="800">
 		<XQueue v-if="tab === 'deliver'" domain="deliver"/>
 		<XQueue v-else-if="tab === 'inbox'" domain="inbox"/>
@@ -12,7 +12,7 @@
 
 <script lang="ts" setup>
 import XQueue from './queue.chart.vue';
-import XHeader from './_header_.vue';
+import type { Tab } from '@/components/global/MkPageHeader.tabs.vue';
 import * as os from '@/os';
 import * as config from '@/config';
 import { i18n } from '@/i18n';
@@ -60,7 +60,7 @@ const headerTabs = $computed(() => [{
 }, {
 	key: 'inbox',
 	title: 'Inbox',
-}]);
+}] as Tab[]);
 
 definePageMetadata({
 	title: i18n.ts.jobQueue,

packages/frontend/src/pages/admin/roles.vue

@@ -151,7 +151,6 @@
 						<MkButton primary rounded @click="updateBaseRole">{{ i18n.ts.save }}</MkButton>
 					</div>
 				</MkFolder>
-				<MkButton primary rounded @click="create"><i class="ti ti-plus"></i> {{ i18n.ts._role.new }}</MkButton>
 				<div class="_gaps_s">
 					<MkFoldableSection>
 						<template #header>Manual roles</template>
@@ -214,7 +213,11 @@ function create() {
 	router.push('/admin/roles/new');
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts._role.new,
+	handler: create,
+}]);
 
 const headerTabs = $computed(() => []);
 

packages/frontend/src/pages/admin/users.vue

@@ -119,7 +119,6 @@ const headerActions = $computed(() => [{
 	text: i18n.ts.search,
 	handler: searchUser,
 }, {
-	asFullButton: true,
 	icon: 'ti ti-plus',
 	text: i18n.ts.addUser,
 	handler: addUser,