Added public visibility toggle to user page stashes.

assets/components/container/container.vue

@@ -150,7 +150,6 @@ export default {
 	flex-grow: 1;
 	overflow-y: auto;
 	overflow-x: hidden;
-	box-shadow: 0 0 3px var(--shadow-weak);
 	z-index: 1;
 }
 

assets/components/footer/footer.vue

@@ -16,6 +16,7 @@
 	font-size: .8rem;
 	font-weight: bold;
 	text-align: center;
+	box-shadow: inset -3px 0 3px var(--shadow-hint);
 }
 
 .segment {

assets/components/form/toggle.vue

@@ -0,0 +1,102 @@
+<template>
+	<label class="toggle-container noselect">
+		<input
+			:id="`toggle-${id}`"
+			:checked="checked"
+			:true-value="trueValue"
+			:false-value="falseValue"
+			:disabled="disabled"
+			type="checkbox"
+			class="toggle-input"
+			@change="$emit('change', $event.target.checked)"
+		>
+
+		<label
+			:for="`toggle-${id}`"
+			class="toggle"
+		/>
+	</label>
+</template>
+
+<script>
+export default {
+	props: {
+		checked: {
+			type: Boolean,
+			default: false,
+		},
+		trueValue: {
+			type: null,
+			default: true,
+		},
+		falseValue: {
+			type: null,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	emits: ['change'],
+	data() {
+		return {
+			id: Math.floor(new Date().getTime() * Math.random()),
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import 'breakpoints';
+
+.toggle-container {
+	display: inline-block;
+	cursor: pointer;
+}
+
+.toggle {
+	width: 2rem;
+	height: .9rem;
+	display: flex;
+	align-items: center;
+	position: relative;
+	background: var(--shadow-hint);
+	border-radius: 1rem;
+	cursor: pointer;
+
+	&::after {
+		content: '';
+		background-color: var(--background-light);
+		width: 1rem;
+		height: 1rem;
+		display: inline-block;
+		position: absolute;
+		left: 0;
+		border-radius: 50%;
+		box-shadow: 0 0 2px var(--darken-strong);
+		transition: background-color .2s ease, left .2s ease;
+	}
+}
+
+.toggle-input {
+	display: none;
+
+	&:checked + .toggle {
+		background: var(--primary-faded);
+
+		&::after {
+			background: var(--primary);
+			left: calc(100% - 1rem);
+		}
+	}
+
+	&[disabled] + .toggle {
+		background: var(--shadow-weak);
+
+		&::after {
+			background: var(--shadow);
+		}
+	}
+}
+</style>

assets/components/header/menu.vue

@@ -164,10 +164,10 @@ export default {
 .menu-username {
 	display: block;
 	font-weight: bold;
-	color: var(--shadow-strong);
+	color: var(--darken-strong);
 	font-size: .9rem;
 	padding: .75rem 1rem;
-	border-bottom: solid 1px var(--shadow-hint);
+	border-bottom: solid 1px var(--darken-hint);
 	text-align: center;
 	text-decoration: none;
 }

assets/components/users/user.vue

@@ -19,12 +19,36 @@
 					:key="stash.id"
 					class="stash"
 				>
-					<router-link
-						:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
-						class="stash-link stash-section"
-					>
-						<h4 class="stash-name">{{ stash.name }}</h4>
-					</router-link>
+					<div class="stash-section stash-header">
+						<router-link
+							:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+							class="stash-link nolink"
+						>
+							<h4 class="stash-name">{{ stash.name }}</h4>
+						</router-link>
+
+						<label
+							v-if="isMe"
+							v-tooltip="'Public'"
+							:class="{ public: stash.public }"
+							class="stash-public"
+						>
+							<Icon
+								v-show="stash.public"
+								icon="eye"
+							/>
+
+							<Icon
+								v-show="!stash.public"
+								icon="eye-blocked"
+							/>
+
+							<Toggle
+								:checked="stash.public"
+								@change="checked => publishStash(stash, checked)"
+							/>
+						</label>
+					</div>
 
 					<ul
 						v-if="stash.scenes?.length > 0"
@@ -68,12 +92,24 @@
 <script>
 import ActorPreview from './actor-preview.vue';
 import ScenePreview from './scene-preview.vue';
+import Toggle from '../form/toggle.vue';
 
 async function fetchUser() {
 	this.user = await this.$store.dispatch('fetchUser', this.$route.params.username);
+	this.isMe = this.user.id === this.$store.state.auth.user?.id;
+
 	this.pageTitle = this.user?.username;
 }
 
+async function publishStash(stash, isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.fetchUser();
+}
+
 async function mounted() {
 	await this.fetchUser();
 }
@@ -82,18 +118,21 @@ export default {
 	components: {
 		ActorPreview,
 		ScenePreview,
+		Toggle,
 	},
 	data() {
 		return {
 			user: this.$route.params.username === this.$store.state.auth.user?.username
 				? this.$store.state.auth.user
 				: null,
+			isMe: false,
 			pageTitle: null,
 		};
 	},
 	mounted,
 	methods: {
 		fetchUser,
+		publishStash,
 	},
 };
 </script>
@@ -133,17 +172,9 @@ export default {
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
-.stash-link.stash-section {
-	display: block;
-	text-decoration: none;
-}
-
-.stash-name {
-	color: var(--shadow-strong);
-	margin: 0;
-}
-
 .stash-section {
+	display: flex;
+	align-items: center;
 	padding: .5rem;
 
 	&:not(:last-child) {
@@ -151,6 +182,34 @@ export default {
 	}
 }
 
+.stash-header {
+	justify-content: space-between;
+	padding: 0;
+}
+
+.stash-link.stash-section {
+	display: inline-block;
+	text-decoration: none;
+}
+
+.stash-public {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	cursor: pointer;
+
+	.icon {
+		fill: var(--shadow-strong);
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.stash-name {
+	color: var(--shadow-strong);
+	padding: .5rem;
+	margin: 0;
+}
+
 .stash-actors,
 .stash-scenes {
 	display: flex;

assets/css/_theme.scss

@@ -92,7 +92,7 @@ $breakpoint4: 1500px;
     --background-dim: #181818;
     --background-soft: #111;
 
-    --profile: #222;
+    --profile: #000;
     --tile: #2a2a2a;
 
     --link: #dd6688;

assets/js/api.js

@@ -25,9 +25,9 @@ async function get(endpoint, query = {}) {
 	throw new Error(errorMsg);
 }
 
-async function post(endpoint, data) {
+async function post(endpoint, data, method = 'POST') {
 	const res = await fetch(`${config.api.url}${endpoint}`, {
-		method: 'POST',
+		method,
 		mode: 'cors',
 		headers: {
 			'Content-Type': 'application/json',
@@ -51,6 +51,14 @@ async function post(endpoint, data) {
 	throw new Error(errorMsg);
 }
 
+async function patch(endpoint, data) {
+	return post(endpoint, data, 'PATCH');
+}
+
+async function put(endpoint, data) {
+	return post(endpoint, data, 'PUT');
+}
+
 async function del(endpoint) {
 	const res = await fetch(`${config.api.url}${endpoint}`, {
 		method: 'DELETE',
@@ -97,4 +105,6 @@ export {
 	post,
 	del,
 	graphql,
+	patch,
+	put,
 };

assets/js/stashes/actions.js

@@ -1,4 +1,10 @@
-import { graphql, post, del } from '../api';
+import {
+	graphql,
+	post,
+	del,
+	patch,
+} from '../api';
+
 import { releaseFields } from '../fragments';
 import { curateStash } from '../curate';
 
@@ -61,6 +67,12 @@ function initStashesActions(store, _router) {
 		return curateStash(stash);
 	}
 
+	async function updateStash(context, { stashId, stash }) {
+		const newStash = await patch(`/stashes/${stashId}`, stash);
+
+		return newStash;
+	}
+
 	async function stashActor(context, { actorId, stashId }) {
 		await post(`/stashes/${stashId}/actors`, { actorId });
 	}
@@ -93,6 +105,7 @@ function initStashesActions(store, _router) {
 		unstashActor,
 		unstashScene,
 		unstashMovie,
+		updateStash,
 	};
 }
 

src/stashes.js

@@ -29,11 +29,31 @@ async function fetchStash(stashId, sessionUser) {
 		})
 		.first();
 
+	if (!stash) {
+		throw new HttpError('You are not authorized to access this stash', 403);
+	}
+
+	return curateStash(stash);
+}
+
+async function updateStash(stashId, newStash, sessionUser) {
+	if (!sessionUser) {
+		throw new HttpError('You are not authenthicated', 401);
+	}
+
+	const stash = await knex('stashes')
+		.where({
+			id: stashId,
+			user_id: sessionUser.id,
+		})
+		.update(newStash)
+		.returning('*');
+
 	if (!stash) {
 		throw new HttpError('You are not authorized to modify this stash', 403);
 	}
 
-	return stash;
+	return curateStash(stash);
 }
 
 async function stashActor(actorId, stashId, sessionUser) {
@@ -110,4 +130,5 @@ module.exports = {
 	unstashScene,
 	unstashActor,
 	unstashMovie,
+	updateStash,
 };

src/web/server.js

@@ -50,6 +50,7 @@ const {
 	unstashActor,
 	unstashScene,
 	unstashMovie,
+	updateStash,
 } = require('./stashes');
 
 async function initServer() {
@@ -83,6 +84,8 @@ async function initServer() {
 
 	router.post('/api/users', signup);
 
+	router.patch('/api/stashes/:stashId', updateStash);
+
 	router.post('/api/stashes/:stashId/actors', stashActor);
 	router.post('/api/stashes/:stashId/scenes', stashScene);
 	router.post('/api/stashes/:stashId/movies', stashMovie);

src/web/stashes.js

@@ -7,8 +7,15 @@ const {
 	unstashActor,
 	unstashScene,
 	unstashMovie,
+	updateStash,
 } = require('../stashes');
 
+async function updateStashApi(req, res) {
+	const stash = await updateStash(req.params.stashId, req.body, req.session.user);
+
+	res.send(stash);
+}
+
 async function stashActorApi(req, res) {
 	await stashActor(req.body.actorId, req.params.stashId, req.session.user);
 
@@ -52,4 +59,5 @@ module.exports = {
 	unstashActor: unstashActorApi,
 	unstashScene: unstashSceneApi,
 	unstashMovie: unstashMovieApi,
+	updateStash: updateStashApi,
 };