feat: Playを検索できるように

#13115

1 files changed, 43 insertions, 3 deletions

diff --git a/packages/frontend/src/pages/flash/flash-index.vue b/packages/frontend/src/pages/flash/flash-index.vue
index 6e25df2df8..43632f55ca 100644
--- a/packages/frontend/src/pages/flash/flash-index.vue
+++ b/packages/frontend/src/pages/flash/flash-index.vue
@@ -6,7 +6,21 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <PageWithHeader v-model:tab="tab" :actions="headerActions" :tabs="headerTabs" :swipable="true">
 	<div class="_spacer" style="--MI_SPACER-w: 700px;">
-		<div v-if="tab === 'featured'">
+		<div v-if="tab === 'search'">
+			<div class="_gaps">
+				<MkInput v-model="searchQuery" :large="true" type="search">
+					<template #prefix><i class="ti ti-search"></i></template>
+				</MkInput>
+				<MkButton large primary gradate rounded style="margin: 0 auto;" @click="search">{{ i18n.ts.search }}</MkButton>
+				<MkPagination v-if="searchPaginator" v-slot="{items}" :key="searchKey" :paginator="searchPaginator">
+					<div class="_gaps_s">
+						<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
+					</div>
+				</MkPagination>
+			</div>
+		</div>
+
+		<div v-else-if="tab === 'featured'">
 			<MkPagination v-slot="{items}" :paginator="featuredFlashsPaginator">
 				<div class="_gaps_s">
 					<MkFlashPreview v-for="flash in items" :key="flash.id" :flash="flash"/>
@@ -26,7 +40,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		</div>
 
 		<div v-else-if="tab === 'liked'">
-			<MkPagination v-slot="{items}" :paginator="likedFlashsPaginator">
+			<MkPagination v-slot="{items}" :paginator="likedFlashsPaginator" withControl>
 				<div class="_gaps_s">
 					<MkFlashPreview v-for="like in items" :key="like.flash.id" :flash="like.flash"/>
 				</div>
@@ -37,10 +51,12 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { computed, markRaw, ref } from 'vue';
+import { computed, markRaw, ref, shallowRef } from 'vue';
+import type { IPaginator } from '@/utility/paginator.js';
 import MkFlashPreview from '@/components/MkFlashPreview.vue';
 import MkPagination from '@/components/MkPagination.vue';
 import MkButton from '@/components/MkButton.vue';
+import MkInput from '@/components/MkInput.vue';
 import { i18n } from '@/i18n.js';
 import { definePage } from '@/page.js';
 import { useRouter } from '@/router.js';
@@ -50,6 +66,10 @@ const router = useRouter();
 
 const tab = ref('featured');
 
+const searchQuery = ref('');
+const searchPaginator = shallowRef<IPaginator | null>(null);
+const searchKey = ref(0);
+
 const featuredFlashsPaginator = markRaw(new Paginator('flash/featured', {
 	limit: 5,
 	offsetMode: true,
@@ -59,12 +79,28 @@ const myFlashsPaginator = markRaw(new Paginator('flash/my', {
 }));
 const likedFlashsPaginator = markRaw(new Paginator('flash/my-likes', {
 	limit: 5,
+	canSearch: true,
+	searchParamName: 'search',
 }));
 
 function create() {
 	router.push('/play/new');
 }
 
+function search() {
+	if (searchQuery.value.trim() === '') {
+		return;
+	}
+
+	searchPaginator.value = markRaw(new Paginator('flash/search', {
+		params: {
+			query: searchQuery.value,
+		},
+	}));
+
+	searchKey.value++;
+}
+
 const headerActions = computed(() => [{
 	icon: 'ti ti-plus',
 	text: i18n.ts.create,
@@ -72,6 +108,10 @@ const headerActions = computed(() => [{
 }]);
 
 const headerTabs = computed(() => [{
+	key: 'search',
+	title: i18n.ts.search,
+	icon: 'ti ti-search',
+}, {
 	key: 'featured',
 	title: i18n.ts._play.featured,
 	icon: 'ti ti-flare',