refactor(frontend): MkTabの指定をpropsから行うように (#16596)

* refactor(frontend): MkTabの指定をpropsから行うように

* Update explore.featured.vue

5 files changed, 50 insertions, 24 deletions

diff --git a/packages/frontend/src/pages/explore.featured.vue b/packages/frontend/src/pages/explore.featured.vue
index abb816a956..3158b384d2 100644
--- a/packages/frontend/src/pages/explore.featured.vue
+++ b/packages/frontend/src/pages/explore.featured.vue
@@ -5,9 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_spacer" style="--MI_SPACER-w: 800px;">
-	<MkTab v-model="tab" style="margin-bottom: var(--MI-margin);">
-		<option value="notes">{{ i18n.ts.notes }}</option>
-		<option value="polls">{{ i18n.ts.poll }}</option>
+	<MkTab
+		v-model="tab"
+		:tabs="[
+			{ key: 'notes', label: i18n.ts.notes },
+			{ key: 'polls', label: i18n.ts.poll },
+		]"
+		style="margin-bottom: var(--MI-margin);"
+	>
 	</MkTab>
 	<MkNotesTimeline v-if="tab === 'notes'" :paginator="paginatorForNotes"/>
 	<MkNotesTimeline v-else-if="tab === 'polls'" :paginator="paginatorForPolls"/>
@@ -33,5 +38,5 @@ const paginatorForPolls = markRaw(new Paginator('notes/polls/recommendation', {
 	},
 }));
 
-const tab = ref('notes');
+const tab = ref<'notes' | 'polls'>('notes');
 </script>
diff --git a/packages/frontend/src/pages/explore.users.vue b/packages/frontend/src/pages/explore.users.vue
index 08f9f5e582..4e3fb16b5a 100644
--- a/packages/frontend/src/pages/explore.users.vue
+++ b/packages/frontend/src/pages/explore.users.vue
@@ -5,9 +5,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <template>
 <div class="_spacer" style="--MI_SPACER-w: 1200px;">
-	<MkTab v-if="instance.federation !== 'none'" v-model="origin" style="margin-bottom: var(--MI-margin);">
-		<option value="local">{{ i18n.ts.local }}</option>
-		<option value="remote">{{ i18n.ts.remote }}</option>
+	<MkTab
+		v-if="instance.federation !== 'none'"
+		v-model="origin"
+		:tabs="[
+			{ key: 'local', label: i18n.ts.local },
+			{ key: 'remote', label: i18n.ts.remote },
+		]"
+		style="margin-bottom: var(--MI-margin);"
+	>
 	</MkTab>
 	<div v-if="origin === 'local'">
 		<template v-if="tag == null">
@@ -77,7 +83,7 @@ const props = defineProps<{
 	tag?: string;
 }>();
 
-const origin = ref('local');
+const origin = ref<'local' | 'remote'>('local');
 const tagsLocal = ref<Misskey.entities.Hashtag[]>([]);
 const tagsRemote = ref<Misskey.entities.Hashtag[]>([]);
 
diff --git a/packages/frontend/src/pages/qr.read.vue b/packages/frontend/src/pages/qr.read.vue
index e4c475196a..251dccd0f0 100644
--- a/packages/frontend/src/pages/qr.read.vue
+++ b/packages/frontend/src/pages/qr.read.vue
@@ -39,10 +39,15 @@ SPDX-License-Identifier: AGPL-3.0-only
 		>
 			<MkStickyContainer>
 				<template #header>
-					<MkTab v-model="tab" :class="$style.tab">
-						<option value="users">{{ i18n.ts.users }}</option>
-						<option value="notes">{{ i18n.ts.notes }}</option>
-						<option value="all">{{ i18n.ts.all }}</option>
+					<MkTab
+						v-model="tab"
+						:tabs="[
+							{ key: 'users', label: i18n.ts.users },
+							{ key: 'notes', label: i18n.ts.notes },
+							{ key: 'all', label: i18n.ts.all },
+						]"
+						:class="$style.tab"
+					>
 					</MkTab>
 				</template>
 				<div v-if="tab === 'users'" :class="[$style.users, '_margin']" style="padding-bottom: var(--MI-margin);">
diff --git a/packages/frontend/src/pages/user/index.timeline.vue b/packages/frontend/src/pages/user/index.timeline.vue
index 5e9e671252..6d74de14a0 100644
--- a/packages/frontend/src/pages/user/index.timeline.vue
+++ b/packages/frontend/src/pages/user/index.timeline.vue
@@ -6,11 +6,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkStickyContainer>
 	<template #header>
-		<MkTab v-model="tab" :class="$style.tab">
-			<option value="featured">{{ i18n.ts.featured }}</option>
-			<option value="notes">{{ i18n.ts.notes }}</option>
-			<option value="all">{{ i18n.ts.all }}</option>
-			<option value="files">{{ i18n.ts.withFiles }}</option>
+		<MkTab
+			v-model="tab"
+			:tabs="[
+				{ key: 'featured', label: i18n.ts.featured },
+				{ key: 'notes', label: i18n.ts.notes },
+				{ key: 'all', label: i18n.ts.all },
+				{ key: 'files', label: i18n.ts.withFiles },
+			]"
+			:class="$style.tab"
+		>
 		</MkTab>
 	</template>
 	<MkNotesTimeline v-if="tab === 'featured'" :noGap="true" :paginator="featuredPaginator" :pullToRefresh="false" :class="$style.tl"/>
@@ -30,7 +35,7 @@ const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
-const tab = ref<string>('all');
+const tab = ref<'featured' | 'notes' | 'all' | 'files'>('all');
 
 const featuredPaginator = markRaw(new Paginator('users/featured-notes', {
 	limit: 10,
diff --git a/packages/frontend/src/pages/user/notes.vue b/packages/frontend/src/pages/user/notes.vue
index b5e600da92..1e6dba73bd 100644
--- a/packages/frontend/src/pages/user/notes.vue
+++ b/packages/frontend/src/pages/user/notes.vue
@@ -8,11 +8,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.root">
 		<MkStickyContainer>
 			<template #header>
-				<MkTab v-model="tab" :class="$style.tab">
-					<option value="featured">{{ i18n.ts.featured }}</option>
-					<option value="notes">{{ i18n.ts.notes }}</option>
-					<option value="all">{{ i18n.ts.all }}</option>
-					<option value="files">{{ i18n.ts.withFiles }}</option>
+				<MkTab
+					v-model="tab"
+					:tabs="[
+						{ key: 'featured', label: i18n.ts.featured },
+						{ key: 'notes', label: i18n.ts.notes },
+						{ key: 'all', label: i18n.ts.all },
+						{ key: 'files', label: i18n.ts.withFiles },
+					]"
+					:class="$style.tab"
+				>
 				</MkTab>
 			</template>
 			<MkNotesTimeline v-if="tab === 'featured'" :noGap="true" :paginator="featuredPaginator" :class="$style.tl"/>
@@ -34,7 +39,7 @@ const props = defineProps<{
 	user: Misskey.entities.UserDetailed;
 }>();
 
-const tab = ref<string>('all');
+const tab = ref<'featured' | 'notes' | 'all' | 'files'>('all');
 
 const featuredPaginator = markRaw(new Paginator('users/featured-notes', {
 	limit: 10,