Fixed pagination. Added entity page channel tile expand.

components/scenes/scenes.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="page"
+		class="scenes-page"
 	>
 		<Filters
 			v-if="showFilters"
@@ -34,9 +34,23 @@
 				class="scenes-header"
 			>
 				<div class="meta">{{ total }} results</div>
+
+				<select
+					v-model="scope"
+					class="input"
+					@change="search"
+				>
+					<option value="likes">Likes</option>
+					<option value="latest">Latest</option>
+					<option value="upcoming">Upcoming</option>
+					<option value="new">New</option>
+				</select>
 			</div>
 
-			<nav class="scopes">
+			<nav
+				v-if="showScopeTabs"
+				class="scopes"
+			>
 				<Link
 					:href="getPath('latest')"
 					class="scope nolink"
@@ -103,15 +117,18 @@ defineProps({
 		type: Boolean,
 		default: true,
 	},
+	showScopeTabs: {
+		type: Boolean,
+		default: false,
+	},
 });
 
 const { pageProps, routeParams, urlParsed } = inject('pageContext');
-const { scope } = routeParams;
 
 const {
 	actor: pageActor,
 	tag: pageTag,
-	channel: pageChannel,
+	entity: pageEntity,
 } = pageProps;
 
 const scenes = ref(pageProps.scenes);
@@ -120,6 +137,7 @@ const aggTags = ref(pageProps.aggTags || []);
 const aggChannels = ref(pageProps.aggChannels || []);
 
 const currentPage = ref(Number(routeParams.page));
+const scope = ref(routeParams.scope);
 const total = ref(Number(pageProps.total));
 const loading = ref(false);
 
@@ -138,19 +156,17 @@ const filters = ref({
 });
 
 function getPath(targetScope, preserveQuery) {
-	const path = parse(routeParams.path)
-		.map((segment) => {
-			if (segment.name === 'scope') {
-				return targetScope;
-			}
+	const path = parse(routeParams.path).map((segment) => {
+		if (segment.name === 'scope') {
+			return `${segment.prefix}${targetScope}`;
+		}
 
-			if (segment.name === 'page') {
-				return 1;
-			}
+		if (segment.name === 'page') {
+			return `${segment.prefix}${1}`;
+		}
 
-			return routeParams[segment.name] || segment;
-		})
-		.join('/');
+		return `${segment.prefix || ''}${routeParams[segment.name] || segment}`;
+	}).join('');
 
 	if (preserveQuery && urlParsed.searchOriginal) {
 		return `${path}${urlParsed.searchOriginal}`;
@@ -166,7 +182,7 @@ async function search(resetPage = true) {
 
 	const query = {};
 
-	const entity = filters.value.entity || pageChannel;
+	const entity = filters.value.entity || pageEntity;
 	const entitySlug = entity?.type === 'network' ? `_${entity.slug}` : entity?.slug;
 
 	loading.value = true;
@@ -176,7 +192,7 @@ async function search(resetPage = true) {
 		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
 		tags: [pageTag?.slug, ...filters.value.tags].filter(Boolean).join(','),
 		e: entitySlug,
-		scope,
+		scope: scope.value,
 		page: currentPage.value, // client uses param rather than query pagination
 	});
 
@@ -184,12 +200,13 @@ async function search(resetPage = true) {
 	aggActors.value = res.aggActors;
 	aggTags.value = res.aggTags;
 	aggChannels.value = res.aggChannels;
-	total.value = res.total;
 
+	total.value = res.total;
 	loading.value = false;
+
 	events.emit('scrollUp');
 
-	navigate(getPath(scope, false), {
+	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,
@@ -207,7 +224,7 @@ function updateFilter(prop, value, reload = true) {
 </script>
 
 <style scoped>
-.page {
+.scenes-page {
 	display: flex;
 	background: var(--background-base-10);
 	position: relative;
@@ -216,7 +233,7 @@ function updateFilter(prop, value, reload = true) {
 .scenes-header {
 	display: flex;
 	align-items: center;
-	padding: 1rem 0 .25rem 3rem;
+	padding: .5rem 1rem .25rem 3rem;
 }
 
 .scenes-container {
@@ -236,7 +253,7 @@ function updateFilter(prop, value, reload = true) {
 	display: grid;
     grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr));
 	gap: .75rem .5rem;
-	padding: 1rem;
+	padding: .5rem 1rem 1rem 1rem;
 }
 
 .scopes {