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,6 +2,7 @@
 	<div
 		class="scenes-page"
 	>
+		<transition name="sidebar">
 			<Filters
 				v-if="showFilters"
 				:class="{ loading }"
@@ -34,6 +35,7 @@
 					@update="updateFilter"
 				/>
 			</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';