enhance(frontend): 絵文字管理画面β（ローカル）のUI・UX改善 (#15349)

* enhance(frontend): 絵文字管理画面β（ローカル）のUI・UX改善

* fix

* 🎨

* 表示件数をメニューから変更するように

* 確認ダイアログ

* fix i18n

* needWideArea: trueならwidgetの開閉ボタンを表示しないように

* fix: 検索ウィンドウは一つしか開けないように

packages/frontend/src/pages/admin/custom-emojis-manager.local.vue

@@ -4,33 +4,32 @@ SPDX-License-Identifier: AGPL-3.0-only
 -->
 
 <template>
-<div class="_gaps" :class="$style.root">
-	<MkTab v-model="modeTab" style="margin-bottom: var(--margin);">
-		<option value="list">{{ i18n.ts._customEmojisManager._local.tabTitleList }}</option>
-		<option value="register">{{ i18n.ts._customEmojisManager._local.tabTitleRegister }}</option>
-	</MkTab>
-
-	<div>
-		<XListComponent v-if="modeTab === 'list'"/>
-		<XRegisterComponent v-else/>
-	</div>
-</div>
+<MkStickyContainer>
+	<template #header>
+		<MkPageHeader v-model:tab="headerTab" :tabs="headerTabs" hideTitle thin/>
+	</template>
+	<XListComponent v-if="headerTab === 'list'" key="localList"/>
+	<MkSpacer v-else key="localRegister">
+		<XRegisterComponent/>
+	</MkSpacer>
+</MkStickyContainer>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, computed } from 'vue';
 import { i18n } from '@/i18n.js';
-import MkTab from '@/components/MkTab.vue';
 import XListComponent from '@/pages/admin/custom-emojis-manager.local.list.vue';
 import XRegisterComponent from '@/pages/admin/custom-emojis-manager.local.register.vue';
 
 type PageMode = 'list' | 'register';
 
-const modeTab = ref<PageMode>('list');
-</script>
+const headerTab = ref<PageMode>('list');
 
-<style module lang="scss">
-.root {
-	padding: var(--MI-margin);
-}
-</style>
+const headerTabs = computed(() => [{
+	key: 'list',
+	title: i18n.ts._customEmojisManager._local.tabTitleList,
+}, {
+	key: 'register',
+	title: i18n.ts._customEmojisManager._local.tabTitleRegister,
+}]);
+</script>