enhance(client): ボタンをヘッダーに移動

CHANGELOG_CHERRYPICK.md

@@ -63,6 +63,7 @@
 - 리노트 문구를 노트 최상단으로 배치
 - 특정 MFM 구문이 포함된 노트를 간략화 할지 선택할 수 있음(enhance: [aba0755](https://github.com/kokonect-link/cherrypick/commit/aba0755880d6797f49d34c8b7fe2c602d153e367))
 - 노트 사이를 띄우는 옵션 활성화 시 알림 페이지의 노트도 띄우도록
+- 안테나, 그룹, 리스트, 클립 페이지의 생성 버튼을 헤더로 이동
 - Fix: (Friendly) 위젯 영역에 safe-area-inset-bottom이 적용되지 않음
 - Fix: (Friendly) 플로팅 메뉴를 길게 눌렀을 때 프로필 이미지를 드래그 할 수 있는 문제
 - Fix: 위젯 편집 시 헤더 이외의 영역을 눌렀을 때 위젯 설정이 뜨는 문제

packages/frontend/src/pages/my-antennas/index.vue

@@ -3,8 +3,6 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
 		<div class="ieepwinx">
-			<MkButton :link="true" to="/my/antennas/create" primary class="add"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-
 			<div class="">
 				<MkPagination v-slot="{items}" ref="list" :pagination="pagination">
 					<MkA v-for="antenna in items" :key="antenna.id" class="ljoevbzj" :to="`/my/antennas/${antenna.id}`">
@@ -20,9 +18,11 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
+import { useRouter } from '@/router';
+
+const router = useRouter();
 
 const pagination = {
 	endpoint: 'antennas/list' as const,
@@ -30,7 +30,13 @@ const pagination = {
 	limit: 10,
 };
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.add,
+	handler: () => {
+		router.push('/my/antennas/create');
+	},
+}]);
 
 const headerTabs = $computed(() => []);
 

packages/frontend/src/pages/my-clips/index.vue

@@ -3,8 +3,6 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
 		<div v-if="tab === 'my'" class="_gaps">
-			<MkButton primary rounded class="add" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
-
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination" class="_gaps">
 				<MkA v-for="item in items" :key="item.id" :to="`/clips/${item.id}`">
 					<MkClipPreview :clip="item"/>
@@ -23,7 +21,6 @@
 <script lang="ts" setup>
 import { watch } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
 import MkClipPreview from '@/components/MkClipPreview.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -80,7 +77,11 @@ function onClipDeleted() {
 	pagingComponent.reload();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.add,
+	handler: create,
+}]);
 
 const headerTabs = $computed(() => [{
 	key: 'my',

packages/frontend/src/pages/my-groups/index.vue

@@ -3,8 +3,6 @@
 	<template #header><MkPageHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :content-max="700">
 		<div v-if="tab === 'owned'" class="_content">
-			<MkButton primary class="add" style="margin: 0 auto var(--margin) auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createGroup }}</MkButton>
-
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="ownedPagination" class="groups">
 				<MkA v-for="group in items" :key="group.id" class="group _panel" :to="`/my/groups/${ group.id }`">
 					<div class="name">{{ group.name }}</div>
@@ -108,7 +106,11 @@ async function leave(group) {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.createGroup,
+	handler: create,
+}]);
 
 const headerTabs = $computed(() => [{
 	key: 'owned',

packages/frontend/src/pages/my-lists/index.vue

@@ -3,8 +3,6 @@
 	<template #header><MkPageHeader :actions="headerActions" :tabs="headerTabs"/></template>
 	<MkSpacer :contentMax="700">
 		<div class="_gaps">
-			<MkButton primary rounded style="margin: 0 auto;" @click="create"><i class="ti ti-plus"></i> {{ i18n.ts.createList }}</MkButton>
-
 			<MkPagination v-slot="{items}" ref="pagingComponent" :pagination="pagination">
 				<div class="_gaps">
 					<MkA v-for="list in items" :key="list.id" class="_panel" :class="$style.list" :to="`/my/lists/${ list.id }`">
@@ -21,7 +19,6 @@
 <script lang="ts" setup>
 import { } from 'vue';
 import MkPagination from '@/components/MkPagination.vue';
-import MkButton from '@/components/MkButton.vue';
 import MkAvatars from '@/components/MkAvatars.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
@@ -46,7 +43,11 @@ async function create() {
 	pagingComponent.reload();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = $computed(() => [{
+	icon: 'ti ti-plus',
+	text: i18n.ts.createList,
+	handler: create,
+}]);
 
 const headerTabs = $computed(() => []);