0.42.0

components/filters/filters.vue

@@ -385,15 +385,15 @@ function toggleFilters(state) {
 }
 
 .filters-toggle {
-	min-width: 2rem;
+	min-width: 2.75rem;
-	height: 2.5rem;
+	height: 3rem;
 	display: none;
 	justify-content: center;
 	align-items: center;
 	padding: 0 .25rem;
 	position: absolute;
 	top: .35rem;
-	right: -2.5rem;
+	right: -3.25rem;
 	border-radius: 0 .5rem .5rem 0;
 	background: var(--background);
 	color: var(--glass);

components/header/header.vue

@@ -21,6 +21,14 @@
 				</li>
 				-->
 
+				<li class="nav-item">
+					<Link
+						class="link"
+						:class="{ active: activePage === 'scenes' }"
+						href="/scenes"
+					>Scenes</Link>
+				</li>
+
 				<li class="nav-item">
 					<Link
 						class="link"

components/scenes/scenes.vue

@@ -393,7 +393,7 @@ function setView(newView) {
 	display: flex;
 	align-items: flex-end;
 	justify-content: space-between;
-	padding: .5rem 1rem .25rem 3rem;
+	padding: .5rem 1rem .25rem 4rem;
 
 	.campaign {
 		max-height: 6rem;

components/sidebar/sidebar.vue

@@ -20,12 +20,12 @@
 				<ul class="nolist menu">
 					<li
 						class="menu-item"
-						:class="{ active: activePage === 'updates' }"
+						:class="{ active: activePage === 'scenes' }"
 					>
 						<a
-							href="/updates"
+							href="/scenes"
 							class="menu-link nolink"
-						>Updates</a>
+						>Scenes</a>
 					</li>
 
 					<li

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "traxxx-web",
-  "version": "0.41.25",
+  "version": "0.42.0",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.41.25",
+      "version": "0.42.0",
       "dependencies": {
         "@brillout/json-serializer": "^0.5.8",
         "@dicebear/collection": "^7.0.5",

package.json

@@ -87,7 +87,7 @@
   "overrides": {
     "vite": "$vite"
   },
-  "version": "0.41.25",
+  "version": "0.42.0",
   "imports": {
     "#/*": "./*.js"
   }

pages/scenes/+Page.vue

@@ -0,0 +1,24 @@
+<template>
+	<div class="updates">
+		<Scenes
+			:show-filters="true"
+			:show-meta="true"
+			:show-scope-tabs="false"
+		/>
+	</div>
+</template>
+
+<script setup>
+// import { inject } from 'vue';
+
+import Scenes from '#/components/scenes/scenes.vue';
+
+// const pageContext = inject('pageContext');
+</script>
+
+<style scoped>
+.updates {
+	display: flex;
+	flex-grow: 1;
+}
+</style>

pages/scenes/+onBeforeRender.js

@@ -0,0 +1,47 @@
+import { fetchScenes } from '#/src/scenes.js';
+import { curateScenesQuery } from '#/src/web/scenes.js';
+import { getRandomCampaigns, getCampaignIndex } from '#/src/campaigns.js';
+
+export async function onBeforeRender(pageContext) {
+	const [
+		sceneResults,
+		campaigns,
+	] = await Promise.all([
+		fetchScenes(await curateScenesQuery({
+			...pageContext.urlQuery,
+			scope: pageContext.routeParams.scope || 'latest',
+			isShowcased: null,
+			tagFilter: pageContext.tagFilter,
+		}), {
+			page: Number(pageContext.routeParams.page) || 1,
+			limit: Number(pageContext.urlParsed.search.limit) || 29,
+			aggregate: true,
+			dedupe: true,
+		}, pageContext.user),
+		getRandomCampaigns([
+			{ minRatio: 0.75, maxRatio: 1.25 },
+			{ minRatio: 1.5 },
+		], { tagFilter: pageContext.tagFilter }),
+	]);
+
+	const {
+		scenes,
+	} = sceneResults;
+
+	const campaignIndex = getCampaignIndex(scenes.length);
+	const [sceneCampaign, paginationCampaign] = campaigns;
+
+	return {
+		pageContext: {
+			title: pageContext.routeParams.scope,
+			pageProps: {
+				...sceneResults,
+			},
+			campaigns: {
+				index: campaignIndex,
+				scenes: scenes.length > 5 && sceneCampaign,
+				pagination: paginationCampaign,
+			},
+		},
+	};
+}

pages/scenes/+route.js

@@ -0,0 +1,21 @@
+import { match } from 'path-to-regexp';
+// import { resolveRoute } from 'vike/routing'; // eslint-disable-line import/extensions
+
+const path = '/scenes/:scope?/:page?';
+const urlMatch = match(path, { decode: decodeURIComponent });
+
+export default (pageContext) => {
+	const matched = urlMatch(pageContext.urlPathname);
+
+	if (matched) {
+		return {
+			routeParams: {
+				scope: matched.params.scope || 'latest',
+				page: matched.params.page || '1',
+				path,
+			},
+		};
+	}
+
+	return false;
+};

pages/updates/+Page.vue

@@ -1,20 +1,20 @@
 <template>
 	<div class="updates">
 		<Scenes
-			:show-filters="!!query"
+			:show-filters="false"
-			:show-meta="!!query"
+			:show-meta="false"
-			:show-scope-tabs="!query"
+			:show-scope-tabs="true"
 		/>
 	</div>
 </template>
 
 <script setup>
-import { inject } from 'vue';
+// import { inject } from 'vue';
 
 import Scenes from '#/components/scenes/scenes.vue';
 
-const pageContext = inject('pageContext');
+// const pageContext = inject('pageContext');
-const query = Object.hasOwn(pageContext.urlParsed.search, 'q');
+// const query = Object.hasOwn(pageContext.urlParsed.search, 'q');
 </script>
 
 <style scoped>

static

@@ -1 +1 @@
-Subproject commit 475141c733eb1f1a76c179f4f9bbacadbad0186a
+Subproject commit 9b190cb9c7114b0bbb51b90672526022143bf33b