Fixed pagination not updating with async requests.

components/filters/countries.vue

@@ -73,4 +73,15 @@ const emit = defineEmits(['country']);
 	text-overflow: ellipsis;
 	padding: .25rem .5rem;
 }
+
+.filter-remove {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	fill: var(--shadow);
+
+	&:hover {
+		fill: var(--error);
+	}
+}
 </style>

components/pagination/pagination.vue

@@ -169,8 +169,12 @@ function go(page, event) {
 }
 
 function getPath(page) {
-	if (!routeParams.path && props.includeQuery) {
+	const query = typeof window === 'undefined'
-		return `${pageContext.urlParsed.pathname}${page}${urlParsed.searchOriginal}`;
+		? urlParsed.searchOriginal
+		: window.location.search;
+
+	if (!routeParams.path && props.includeQuery && query) {
+		return `${pageContext.urlParsed.pathname}${page}${query}`;
 	}
 
 	if (!routeParams.path) {
@@ -187,8 +191,8 @@ function getPath(page) {
 		})
 		.join('');
 
-	if (props.includeQuery && urlParsed.searchOriginal) {
+	if (props.includeQuery && query) {
-		return `${path}${urlParsed.searchOriginal}`;
+		return `${path}${query}`;
 	}
 
 	return path;

components/scenes/scenes.vue

@@ -2,38 +2,40 @@
 	<div
 		class="scenes-page"
 	>
-		<Filters
+		<transition name="sidebar">
-			v-if="showFilters"
+			<Filters
-			:class="{ loading }"
+				v-if="showFilters"
-		>
+				:class="{ loading }"
-			<div class="filter">
+			>
-				<input
+				<div class="filter">
-					v-model="filters.search"
+					<input
-					type="search"
+						v-model="filters.search"
-					placeholder="Search scenes"
+						type="search"
-					class="search input"
+						placeholder="Search scenes"
-					@search="search"
+						class="search input"
-				>
+						@search="search"
-			</div>
+					>
+				</div>
 
-			<TagsFilter
+				<TagsFilter
-				:filters="filters"
+					:filters="filters"
-				:tags="aggTags"
+					:tags="aggTags"
-				@update="updateFilter"
+					@update="updateFilter"
-			/>
+				/>
 
-			<ChannelsFilter
+				<ChannelsFilter
-				:filters="filters"
+					:filters="filters"
-				:channels="aggChannels"
+					:channels="aggChannels"
-				@update="updateFilter"
+					@update="updateFilter"
-			/>
+				/>
 
-			<ActorsFilter
+				<ActorsFilter
-				:filters="filters"
+					:filters="filters"
-				:actors="aggActors"
+					:actors="aggActors"
-				@update="updateFilter"
+					@update="updateFilter"
-			/>
+				/>
-		</Filters>
+			</Filters>
+		</transition>
 
 		<div
 			class="scenes-container"
@@ -104,7 +106,10 @@
 				</li>
 			</ul>
 
-			<Pagination />
+			<Pagination
+				:total="total"
+				:page="currentPage"
+			/>
 		</div>
 
 		<Ellipsis

pages/movies/+Page.vue

@@ -145,7 +145,10 @@
 				</li>
 			</ul>
 
-			<Pagination />
+			<Pagination
+				:total="total"
+				:page="currentPage"
+			/>
 		</div>
 	</div>
 </template>
@@ -354,6 +357,7 @@ function updateFilter(prop, value, reload = true) {
 .tile-info {
 	flex-shrink: 0;
 	font-size: 0;
+	overflow: hidden;
 }
 
 .tile-meta {

src/scenes.js

@@ -498,7 +498,7 @@ async function queryManticoreSql(filters, options, _reqUser) {
 		?.data.map((row) => ({ key: row.channel_id || row['scenes.channel_id'], doc_count: row['count(*)'] }))
 		|| [];
 
-	const total = results.at(-1).data.find((entry) => entry.Variable_name === 'total_found').Value;
+	const total = Number(results.at(-1).data.find((entry) => entry.Variable_name === 'total_found').Value);
 
 	return {
 		scenes: results[0].data,

src/web/server.js

@@ -1,16 +1,3 @@
-// This file isn't processed by Vite, see https://github.com/vikejs/vike/issues/562
-// Consequently:
-//  - When changing this file, you needed to manually restart your server for your changes to take effect.
-//  - To use your environment variables defined in your .env files, you need to install dotenv, see https://vike.dev/env
-//  - To use your path aliases defined in your vite.config.js, you need to tell Node.js about them, see https://vike.dev/path-aliases
-
-// If you want Vite to process your server code then use one of these:
-//  - vavite (https://github.com/cyco130/vavite)
-//     - See vavite + Vike examples at https://github.com/cyco130/vavite/tree/main/examples
-//  - vite-node (https://github.com/antfu/vite-node)
-//  - HatTip (https://github.com/hattipjs/hattip)
-//    - You can use Bati (https://batijs.github.io/) to scaffold a Vike + HatTip app. Note that Bati generates apps that use the V1 design (https://vike.dev/migration/v1-design) and Vike packages (https://vike.dev/vike-packages)
-
 import config from 'config';
 import express from 'express';
 import boolParser from 'express-query-boolean';