Added global search.

components/scenes/scenes.vue

@@ -6,6 +6,16 @@
 			v-if="showFilters"
 			:class="{ loading }"
 		>
+			<div class="filter">
+				<input
+					v-model="filters.search"
+					type="search"
+					placeholder="Search scenes"
+					class="search input"
+					@search="search"
+				>
+			</div>
+
 			<TagsFilter
 				:filters="filters"
 				:tags="aggTags"
@@ -38,12 +48,16 @@
 				<select
 					v-model="scope"
 					class="input"
-					@change="search"
+					@change="search({ autoScope: false })"
 				>
 					<option value="likes">Likes</option>
 					<option value="latest">Latest</option>
 					<option value="upcoming">Upcoming</option>
 					<option value="new">New</option>
+					<option
+						value="results"
+						:disabled="!filters.search"
+					>Relevance</option>
 				</select>
 			</div>
 
@@ -108,7 +122,7 @@ import Scene from '#/components/scenes/tile.vue';
 import Pagination from '#/components/pagination/pagination.vue';
 import Ellipsis from '#/components/loading/ellipsis.vue';
 
-defineProps({
+const props = defineProps({
 	showFilters: {
 		type: Boolean,
 		default: true,
@@ -121,6 +135,10 @@ defineProps({
 		type: Boolean,
 		default: false,
 	},
+	defaultScope: {
+		type: String,
+		default: 'latest',
+	},
 });
 
 const { pageProps, routeParams, urlParsed } = inject('pageContext');
@@ -137,7 +155,7 @@ const aggTags = ref(pageProps.aggTags || []);
 const aggChannels = ref(pageProps.aggChannels || []);
 
 const currentPage = ref(Number(routeParams.page));
-const scope = ref(routeParams.scope);
+const scope = ref(routeParams.scope || props.defaultScope);
 const total = ref(Number(pageProps.total));
 const loading = ref(false);
 
@@ -150,6 +168,7 @@ const channels = Object.fromEntries(aggChannels.value.filter((channel) => channe
 const queryEntity = networks[urlParsed.search.e] || channels[urlParsed.search.e];
 
 const filters = ref({
+	search: urlParsed.search.q,
 	tags: urlParsed.search.tags?.split(',').filter(Boolean) || [],
 	entity: queryEntity,
 	actors: queryActors,
@@ -175,18 +194,37 @@ function getPath(targetScope, preserveQuery) {
 	return path;
 }
 
-async function search(resetPage = true) {
-	if (resetPage) {
+async function search(options = {}) {
+	if (options.resetPage !== false) {
 		currentPage.value = 1;
 	}
 
-	const query = {};
+	if (options.autoScope !== false) {
+		if (filters.value.search) {
+			scope.value = 'results';
+		}
+
+		if (!filters.value.search && scope.value === 'results') {
+			scope.value = 'latest';
+		}
+	}
+
+	const query = {
+		q: filters.value.search || undefined,
+	};
 
 	const entity = filters.value.entity || pageEntity;
 	const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug;
 
 	loading.value = true;
 
+	navigate(getPath(scope.value, false), {
+		...query,
+		actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
+		tags: filters.value.tags.join(',') || undefined,
+		e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
+	}, { redirect: false });
+
 	const res = await get('/scenes', {
 		...query,
 		actors: [pageActor, ...filters.value.actors].filter(Boolean).map((filterActor) => getActorIdentifier(filterActor)).join(','), // if we're on an actor page, that actor ID needs to be included
@@ -205,13 +243,6 @@ async function search(resetPage = true) {
 	loading.value = false;
 
 	events.emit('scrollUp');
-
-	navigate(getPath(scope.value, false), {
-		...query,
-		actors: filters.value.actors.map((filterActor) => getActorIdentifier(filterActor)).join(',') || undefined, // don't include page actor ID in query, already a parameter
-		tags: filters.value.tags.join(',') || undefined,
-		e: filters.value.entity?.type === 'network' ? `_${filters.value.entity.slug}` : (filters.value.entity?.slug || undefined),
-	}, { redirect: false });
 }
 
 function updateFilter(prop, value, reload = true) {