Added scene view toggle.

components/scenes/scenes.vue

@@ -1,6 +1,7 @@
 <template>
 	<div
 		class="scenes-page"
+		:class="{ [view]: true }"
 	>
 		<transition name="sidebar">
 			<Filters
@@ -66,6 +67,23 @@
 					:campaign="campaigns.meta"
 				/>
 
+				<div class="views">
+					<div class="view-toggles noselect">
+						<Icon
+							v-show="view === 'grid'"
+							icon="menu3"
+							class="view-toggle"
+							@click="setView('list')"
+						/>
+
+						<Icon
+							v-show="view === 'list'"
+							icon="grid6"
+							class="view-toggle"
+							@click="setView('grid')"
+						/>
+					</div>
+
 					<select
 						v-model="scope"
 						class="input"
@@ -90,11 +108,13 @@
 						<option value="likes">Popular</option>
 					</select>
 				</div>
+			</div>
 
 			<nav
 				v-if="showScopeTabs"
 				class="scopes"
 			>
+				<div class="views">
 					<div class="scopes-pills">
 						<Link
 							:href="getPath('latest')"
@@ -115,6 +135,23 @@
 						>New</Link>
 					</div>
 
+					<div class="view-toggles noselect">
+						<Icon
+							v-show="view === 'grid'"
+							icon="menu3"
+							class="view-toggle"
+							@click="setView('list')"
+						/>
+
+						<Icon
+							v-show="view === 'list'"
+							icon="grid6"
+							class="view-toggle"
+							@click="setView('grid')"
+						/>
+					</div>
+				</div>
+
 				<Campaign
 					v-if="campaigns?.scope"
 					:campaign="campaigns.scope"
@@ -135,7 +172,10 @@
 							v-else
 							:key="`scene-${item.id}`"
 						>
-							<SceneTile :scene="item" />
+							<SceneTile
+								:scene="item"
+								:class="{ [view]: true }"
+							/>
 						</li>
 					</template>
 				</ul>
@@ -161,6 +201,7 @@ import {
 	inject,
 } from 'vue';
 
+import Cookies from 'js-cookie';
 import { parse } from 'path-to-regexp';
 
 import navigate from '#/src/navigate.js';
@@ -203,6 +244,7 @@ const {
 	routeParams,
 	urlParsed,
 	campaigns,
+	env,
 } = inject('pageContext');
 
 const {
@@ -224,6 +266,8 @@ const total = ref(Number(pageProps.sceneTotal || pageProps.total));
 const loading = ref(false);
 const scenesContainer = ref(null);
 
+const view = ref(env.scenesView || 'grid');
+
 const actorIds = urlParsed.search.actors?.split(',').map((identifier) => parseActorIdentifier(identifier)?.id).filter(Boolean) || [];
 const queryActors = actorIds.map((urlActorId) => aggActors.value.find((aggActor) => aggActor.id === urlActorId)).filter(Boolean);
 
@@ -330,6 +374,11 @@ function updateFilter(prop, value, reload = true) {
 		search();
 	}
 }
+
+function setView(newView) {
+	view.value = newView;
+	Cookies.set('scenesView', newView);
+}
 </script>
 
 <style scoped>
@@ -402,6 +451,27 @@ function updateFilter(prop, value, reload = true) {
 	}
 }
 
+.views {
+	display: flex;
+	align-items: center;
+	justify-content: flex-end;
+}
+
+.view-toggles {
+	display: none;
+	margin-left: .5rem;
+}
+
+.view-toggle {
+	padding: .5rem 1rem;
+	fill: var(--glass);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--primary);
+	}
+}
+
 .scopes-pills {
 	display: flex;
 	align-items: center;
@@ -460,18 +530,29 @@ function updateFilter(prop, value, reload = true) {
 		width: 100%;
 		justify-content: center;
 	}
+
+	.scopes .views {
+		width: 100%;
+	}
 }
 
 @media(--small-20) {
-	/*
+	.list {
-	.scenes {
-		grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
-	}
-	*/
-
 		.scenes {
 			grid-template-columns: 1fr;
+		}
+	}
+
+	.scenes {
 		padding: .5rem .5rem 1rem .5rem;
 	}
+
+	.view-toggles {
+		display: flex;
+	}
+
+	.scopes-pills {
+		justify-content: flex-start;
+	}
 }
 </style>

components/scenes/tile.vue

@@ -273,6 +273,7 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 }
 
 @media(--small-20) {
+	.tile.list {
 		.tile-full {
 			flex-direction: row;
 		}
@@ -314,4 +315,5 @@ const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.id ===
 			margin-bottom: .6rem;
 		}
 	}
+}
 </style>

src/web/main.js

@@ -32,6 +32,7 @@ export default async function mainHandler(req, res, next) {
 		} : null,
 		env: {
 			theme: req.cookies.theme || req.headers['sec-ch-prefers-color-scheme'] || 'light',
+			scenesView: req.cookies.scenesView || 'list',
 			selectedTemplate: Number(req.cookies.selectedTemplate) || 0,
 			allowLogin: config.auth.login,
 			allowSignup: config.auth.signup,