Added stash menu with remove and rename.

assets/css/inputs.css

@@ -26,7 +26,7 @@
 	flex-shrink: 0;
 	align-items: stretch;
 	box-sizing: border-box;
-    padding: .5rem 0 .5rem .5rem;
+    padding: .5rem;
     border: none;
     border-radius: .25rem;
     background: var(--background);
@@ -57,16 +57,30 @@
 }
 
 .button-label {
-	margin-right: .75rem;
+	margin-right: .25rem;
 }
 
 .button-submit {
-    color: var(--primary);
+    background: var(--primary);
+	color: var(--text-light);
+	justify-content: center;
+
+    &:hover:not(:disabled) {
+		background: var(--primary-dark-10);
+    }
+
+	&:disabled {
+		background: var(--shadow-weak-10);
+	}
+}
+
+.button-primary {
+    background: var(--primary);
+	color: var(--text-light);
 	justify-content: center;
 
     &:hover:not(:disabled) {
 		background: var(--primary);
-		cursor: pointer;
     }
 
 	&:disabled {

assets/css/theme.css

@@ -1,4 +1,5 @@
 :root {
+    --primary-dark-10: #e54485;
     --primary: #f65596;
     --primary-light-10: #f075a6;
     --primary-light-30: #f7c9dc;

assets/img/icons/pen6.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pen6</title>
+<path d="M16 2.5c0-1.381-1.119-2.5-2.5-2.5-0.818 0-1.544 0.393-2 1l-9 9 3.5 3.5 9-9c0.607-0.456 1-1.182 1-2z"></path>
+<path d="M0 16l1.5-5 3.5 3.5z"></path>
+</svg>

assets/img/icons/pencil5.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pencil5</title>
+<path d="M12 8.5v5.5h-10v-10h5.5l2-2h-8c-0.825 0-1.5 0.675-1.5 1.5v11c0 0.825 0.675 1.5 1.5 1.5h11c0.825 0 1.5-0.675 1.5-1.5v-8l-2 2z"></path>
+<path d="M13.5 0l-9.5 9.5v2.5h2.5l9.5-9.5c0-1.5-1-2.5-2.5-2.5z"></path>
+</svg>

assets/img/icons/pencil7.svg

@@ -0,0 +1,6 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>pencil7</title>
+<path d="M12 8.5v5.5h-10v-10h5.5l2-2h-8c-0.825 0-1.5 0.675-1.5 1.5v11c0 0.825 0.675 1.5 1.5 1.5h11c0.825 0 1.5-0.675 1.5-1.5v-8l-2 2z"></path>
+<path d="M13.5 0l-9.5 9.5v2.5h2.5l9.5-9.5c0-1.5-1-2.5-2.5-2.5zM6.5 10l-0.75-0.75 7.5-7.5 0.75 0.75-7.5 7.5z"></path>
+</svg>

components/actors/tile.vue

@@ -97,7 +97,7 @@ const pageStash = pageContext.pageProps.stash;
 
 // console.log(props.actor);
 
-const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
+const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.isPrimary) || false);
 
 async function stash() {
 	try {

components/footer/navigation.vue

@@ -68,6 +68,14 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 	font-weight: bold;
 	font-size: .9rem;
 
+	&:first-child {
+		padding-left: .5rem;
+	}
+
+	&:last-child {
+		padding-right: .5rem;
+	}
+
 	&:hover {
 		cursor: pointer;
 

components/header/header.vue

@@ -67,10 +67,13 @@
 					placeholder="Search"
 					class="input"
 					@focus="searchFocused = true"
-					@blur="searchFocused = false"
+					@blur="blurSearch"
 				>
 
-				<button class="search-button">
+				<button
+					class="search-button"
+					data-search
+				>
 					<Icon icon="search" />
 				</button>
 			</form>
@@ -104,7 +107,7 @@
 									class="menu-button nolink"
 								>
 									<Icon icon="user7" />
-									My profile
+									Profile
 								</a>
 							</li>
 
@@ -148,7 +151,12 @@
 </template>
 
 <script setup>
-import { ref, computed, inject } from 'vue';
+import {
+	ref,
+	computed,
+	inject,
+} from 'vue';
+
 import navigate from '#/src/navigate.js';
 import { del } from '#/src/api.js';
 
@@ -172,6 +180,12 @@ async function logout() {
 	del('/session');
 	navigate('/login', null, { redirect: true });
 }
+
+function blurSearch(event) {
+	if (!event.relatedTarget || !Object.hasOwn(event.relatedTarget?.dataset, 'search')) {
+		searchFocused.value = false;
+	}
+}
 </script>
 
 <style scoped>

components/movies/tile.vue

@@ -129,7 +129,7 @@ const pageStash = pageContext.pageProps.stash;
 const currentYear = new Date().getFullYear();
 const fbCutoff = 20;
 
-const favorited = ref(props.movie.stashes.some((sceneStash) => sceneStash.primary));
+const favorited = ref(props.movie.stashes.some((sceneStash) => sceneStash.isPrimary));
 
 async function stash() {
 	try {

components/scenes/tile.vue

@@ -8,15 +8,15 @@
 	>
 		<div class="poster-container">
 			<Link
-				:href="`/scene/${scene.id}/${scene.slug}`"
+				:href="`/scene/${scene.id}/${scene.slug || ''}`"
 				:title="scene.title"
 				target="_blank"
 				class="poster"
 			>
 				<img
 					v-if="scene.poster"
-					:src="scene.poster.isS3 ? `https://cdndev.traxxx.me/${scene.poster.thumbnail}` : `/media/${scene.poster.thumbnail}`"
+					:src="getPath(scene.poster, 'thumbnail')"
-					:style="{ 'background-image': scene.poster.isS3 ? `url(https://cdndev.traxxx.me/${scene.poster.lazy})` : `url(/media/${scene.poster.lazy})` }"
+					:style="{ 'background-image': `url(${getPath(scene.poster, 'lazy')})` }"
 					loading="lazy"
 					class="thumbnail"
 				>
@@ -73,7 +73,7 @@
 		</div>
 
 		<Link
-			:href="`/scene/${scene.id}/${scene.slug}`"
+			:href="`/scene/${scene.id}/${scene.slug || ''}`"
 			:title="scene.title"
 			target="_blank"
 			class="row title nolink"
@@ -119,6 +119,7 @@ import { format } from 'date-fns';
 
 import { post, del } from '#/src/api.js';
 import events from '#/src/events.js';
+import getPath from '#/src/get-path.js';
 import ellipsis from '#/utils/ellipsis.js';
 
 import Icon from '../icon/icon.vue';
@@ -134,7 +135,7 @@ const pageContext = inject('pageContext');
 const user = pageContext.user;
 const pageStash = pageContext.pageProps.stash;
 
-const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.primary));
+const favorited = ref(props.scene.stashes.some((sceneStash) => sceneStash.isPrimary));
 const fbCutoff = 20;
 
 async function stash() {

components/sidebar/sidebar.vue

@@ -7,6 +7,7 @@
 			class="sidebar"
 			@click.stop
 		>
+			<div class="nav">
 				<Link href="/updates">
 					<h1 class="title">
 						<div
@@ -68,6 +69,17 @@
 					</li>
 				</ul>
 			</div>
+
+			<div
+				class="footer"
+				@click="emit('sidebar')"
+			>
+				<Icon
+					icon="cross2"
+					class="close"
+				/>
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -96,6 +108,8 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 }
 
 .sidebar {
+	display: flex;
+	flex-direction: column;
 	width: 15rem;
 	max-width: 100%;
 	height: 100%;
@@ -104,6 +118,10 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 	box-shadow: 0 0 3px var(--shadow-strong-30);
 }
 
+.nav {
+	flex-grow: 1;
+}
+
 .title {
 	margin: 0;
 }
@@ -134,4 +152,27 @@ const activePage = computed(() => pageContext.urlParsed.pathname.split('/')[1]);
 		color: var(--primary);
 	}
 }
+
+.footer {
+	height: 3rem;
+	display: flex;
+	align-items: stretch;
+	justify-content: flex-end;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	.close {
+		width: 1rem;
+		padding: 0 1rem;
+		height: auto;
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		cursor: pointer;
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
 </style>

components/stashes/stash.vue

@@ -3,7 +3,7 @@
 		<div class="header">
 			<h2 class="title">
 				<Icon
-					v-if="stash.primary"
+					v-if="stash.isPrimary"
 					icon="heart7"
 				/>
 

components/stashes/tile.vue

@@ -0,0 +1,331 @@
+<template>
+	<div class="stash">
+		<div class="stash-header">
+			<a
+				:href="`/stash/${profile.username}/${stash.slug}`"
+				class="stash-name ellipsis nolink"
+			>
+				<span class="ellipsis">{{ stash.name }}</span>
+
+				<Icon
+					v-if="stash.isPrimary"
+					icon="heart7"
+					class="primary"
+				/>
+			</a>
+
+			<Icon
+				v-if="!stash.public"
+				v-tooltip="'This stash is private'"
+				icon="eye-blocked"
+				class="private noselect"
+			/>
+
+			<VDropdown>
+				<Icon
+					v-if="profile.id === user?.id"
+					icon="more2"
+					class="stash-more noselect"
+				/>
+
+				<template #popper>
+					<ul class="stash-menu nolist">
+						<li
+							v-if="stash.public"
+							class="menu-item"
+							@click="setPublic(false)"
+						>
+							<Icon
+								icon="eye-blocked"
+								class="noselect"
+							/>Set private
+						</li>
+
+						<li
+							v-else
+							class="menu-item"
+							@click="setPublic(true)"
+						>
+							<Icon
+								icon="eye"
+								class="noselect"
+							/>Set public
+						</li>
+
+						<li
+							v-if="!stash.isPrimary"
+							v-close-popper
+							class="menu-item"
+							@click="showRenameDialog = true"
+						>
+							<Icon
+								icon="pencil5"
+								class="noselect"
+							/>Rename
+						</li>
+
+						<li
+							v-if="!stash.isPrimary"
+							class="menu-item remove"
+							@click="remove()"
+						>
+							<Icon
+								icon="bin"
+								class="noselect"
+							/>Remove
+						</li>
+					</ul>
+				</template>
+			</VDropdown>
+		</div>
+
+		<div class="stash-counts">
+			<a
+				:href="`/stash/${profile.username}/${stash.slug}/scenes`"
+				class="stash-count nolink"
+			><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>
+
+			<a
+				:href="`/stash/${profile.username}/${stash.slug}/actors`"
+				class="stash-count nolink"
+			><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>
+
+			<a
+				:href="`/stash/${profile.username}/${stash.slug}/movies`"
+				class="stash-count nolink"
+			><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
+		</div>
+
+		<Dialog
+			v-if="showRenameDialog"
+			title="Rename stash"
+			@close="showRenameDialog = false"
+			@open="stashNameInput?.focus()"
+		>
+			<form
+				class="dialog-body"
+				@submit.prevent="rename"
+			>
+				<input
+					ref="stashNameInput"
+					v-model="stashName"
+					class="input"
+					placeholder="Stash name"
+					maxlength="24"
+				>
+
+				<button
+					class="button button-submit"
+				>Rename stash</button>
+			</form>
+		</Dialog>
+	</div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import { del, patch } from '#/src/api.js';
+
+import Dialog from '#/components/dialog/dialog.vue';
+
+const props = defineProps({
+	stash: {
+		type: Object,
+		default: null,
+	},
+	profile: {
+		type: Object,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['reload']);
+
+const pageContext = inject('pageContext');
+const user = pageContext.user;
+
+const stashName = ref(props.stash.name);
+const stashNameInput = ref(null);
+const showRenameDialog = ref(false);
+const done = ref(true);
+
+function abbreviateNumber(number) {
+	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
+}
+
+async function setPublic(isPublic) {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	await patch(`/stashes/${props.stash.id}`, { public: isPublic }, {
+		undoFeedback: !isPublic && `Stash '${props.stash.name}' set to private`,
+		successFeedback: isPublic && `Stash '${props.stash.name}' set to public`,
+		errorFeedback: 'Failed to update stash',
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+}
+
+async function remove() {
+	if (done.value === false) {
+		return;
+	}
+
+	if (!confirm(`Are you sure you want to remove the stash '${props.stash.name}' and all its scenes, movies and actors? This is permament, it cannot be undone by you or staff!`)) { // eslint-disable-line no-restricted-globals, no-alert
+		return;
+	}
+
+	done.value = false;
+
+	await del(`/stashes/${props.stash.id}`, {
+		undoFeedback: `Stash '${props.stash.name}' removed`,
+		errorFeedback: 'Failed to remove stash',
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+}
+
+async function rename() {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	await patch(`/stashes/${props.stash.id}`, { name: stashName.value }, {
+		successFeedback: `Stash renamed to ${stashName.value}`,
+		errorFeedback: 'Failed to rename stash',
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
+
+	emit('reload');
+
+	showRenameDialog.value = false;
+}
+</script>
+
+<style scoped>
+.stash {
+	width: 100%;
+	border-radius: .25rem;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+
+	&:hover {
+		box-shadow: 0 0 3px var(--shadow-weak-20);
+	}
+}
+
+.stash-header {
+	display: flex;
+	align-items: stretch;
+	border-bottom: solid 1px var(--shadow-weak-30);
+	font-weight: bold;
+}
+
+.stash-more {
+	display: flex;
+	height: 100%;
+	padding: 0 .75rem;
+	fill: var(--shadow);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--shadow-strong-30);
+	}
+}
+
+.stash-name {
+	display: flex;
+	flex-grow: 1;
+	padding: .5rem;
+	overflow: hidden;
+
+	.icon {
+		margin-left: .75rem;
+	}
+
+	.icon.primary {
+		fill: var(--primary);
+		transform: translateY(1px);
+	}
+}
+
+.stash-counts {
+	display: flex;
+	justify-content: space-between;
+}
+
+.stash-count {
+	display: inline-flex;
+	align-items: center;
+	padding: .5rem;
+	flex-grow: 1;
+	font-size: .9rem;
+
+	.icon {
+		margin-right: .5rem;
+		fill: var(--shadow);
+	}
+
+	&:hover {
+		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.icon.private {
+	display: flex;
+	height: auto;
+	fill: var(--shadow-weak-20);
+	padding-left: .5rem;
+}
+
+.menu-item {
+	display: flex;
+	align-items: center;
+	padding: .75rem;
+
+	.icon {
+		display: flex;
+		margin-right: .75rem;
+		fill: var(--shadow);
+	}
+
+	&.remove {
+		.icon {
+			fill: var(--error);
+		}
+	}
+
+	&:hover {
+		color: var(--primary);
+		cursor: pointer;
+
+		&.remove {
+			color: var(--error);
+		}
+
+		.icon {
+			fill: var(--primary);
+		}
+	}
+}
+
+.dialog-body {
+	padding: 1rem;
+
+	.input {
+		margin-bottom: .5rem;
+	}
+}
+</style>

components/tiles/actor.vue

@@ -1,275 +0,0 @@
-<template>
-	<div
-		class="tile"
-		:class="{
-			unstashed: !favorited && pageStash && user && pageStash.id === user.primaryStash?.id
-		}"
-	>
-		<span class="name">{{ actor.name }}</span>
-
-		<div class="avatar-container">
-			<Link
-				:href="`/actor/${actor.id}/${actor.slug}`"
-				class="avatar-link no-link"
-			>
-				<img
-					v-if="actor.avatar"
-					:src="actor.avatar.isS3 ? `https://cdndev.traxxx.me/${actor.avatar.thumbnail}` : `/media/${actor.avatar.thumbnail}`"
-					:style="{ 'background-image': actor.avatar.isS3 ? `url(https://cdndev.traxxx.me/${actor.avatar.lazy})` : `url(/media/${actor.avatar.lazy})` }"
-					loading="lazy"
-					class="avatar"
-				>
-
-				<img
-					v-else
-					:src="`/img/avatars/${actor.gender || 'female'}.svg`"
-					loading="lazy"
-					class="fallback"
-				>
-			</Link>
-
-			<Icon
-				v-show="favorited"
-				icon="heart7"
-				class="heart favorited"
-				@click.native.stop="unstash"
-			/>
-
-			<Icon
-				v-show="!favorited && user"
-				icon="heart8"
-				class="heart"
-				@click.native.stop="stash"
-			/>
-		</div>
-
-		<div class="details">
-			<span class="birth">
-				<Gender :gender="actor.gender" />
-
-				<span
-					v-if="actor.ageFromBirth"
-					:title="`Born ${formatDate(actor.dateOfBirth, 'MMMM d, yyyy')}`"
-					class="age"
-				>{{ actor.ageFromBirth }}</span>
-
-				<span
-					v-if="actor.ageThen && actor.ageThen < actor.ageFromBirth"
-					title="Age on date of release"
-					class="age age-then"
-				>{{ actor.ageThen }}</span>
-			</span>
-
-			<span
-				v-if="actor.origin?.country"
-				:title="`Born in ${actor.origin.country.name}`"
-				class="country"
-			>
-				{{ actor.origin.country.alpha2 }}
-				<img
-					:src="`/img/flags/${actor.origin.country.alpha2.toLowerCase()}.svg`"
-					class="flag"
-				>
-			</span>
-		</div>
-	</div>
-</template>
-
-<script setup>
-import { ref, inject } from 'vue';
-
-import { formatDate } from '#/utils/format.js';
-import { post, del } from '#/src/api.js';
-import events from '#/src/events.js';
-
-import Gender from './gender.vue';
-
-const props = defineProps({
-	actor: {
-		type: Object,
-		default: null,
-	},
-});
-
-const pageContext = inject('pageContext');
-const { user } = pageContext;
-const pageStash = pageContext.pageProps.stash;
-
-// console.log(props.actor);
-
-const favorited = ref(props.actor.stashes?.some((sceneStash) => sceneStash.primary) || false);
-
-async function stash() {
-	try {
-		favorited.value = true;
-		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: props.actor.id });
-
-		events.emit('feedback', {
-			type: 'success',
-			message: `${props.actor.name} stashed to ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = false;
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to stash ${props.actor.name} to ${user.primaryStash.name}`,
-		});
-	}
-}
-
-async function unstash() {
-	try {
-		favorited.value = false;
-		await del(`/stashes/${user.primaryStash.id}/actors/${props.actor.id}`);
-
-		events.emit('feedback', {
-			type: 'remove',
-			message: `${props.actor.name} unstashed from ${user.primaryStash.name}`,
-		});
-	} catch (error) {
-		favorited.value = true;
-
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to unstash ${props.actor.name} from ${user.primaryStash.name}`,
-		});
-	}
-}
-</script>
-
-<style scoped>
-.tile {
-	display: flex;
-	flex-direction: column;
-	width: 100%;
-	aspect-ratio: 2/3;
-	position: relative;
-	border-radius: .25rem;
-	margin: .25rem;
-	box-shadow: 0 0 3px var(--shadow-weak-30);
-	overflow: hidden;
-
-	&:hover {
-		box-shadow: 0 0 3px var(--shadow-weak-20);
-
-		.name {
-			color: var(--primary);
-		}
-	}
-
-	&.unstashed {
-		opacity: .5;
-	}
-}
-
-.name {
-	flex-shrink: 0;
-	padding: .25rem .5rem;
-	font-weight: bold;
-	font-size: .9rem;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	user-select: all;
-}
-
-.avatar-container {
-	position: relative;
-	flex-grow: 1;
-	overflow: hidden;
-	background: var(--grey-dark-40);
-}
-
-.avatar-link {
-	height: 100%;
-	display: block;
-	overflow: hidden;
-}
-
-.avatar {
-	height: 100%;
-	width: 100%;
-	object-fit: cover;
-	object-position: center 0;
-	background-size: cover;
-	background-position: center 0;
-}
-
-.fallback {
-	height: 100%;
-	width: 100%;
-	display: block;
-	object-fit: contain;
-	opacity: .1;
-}
-
-.icon.heart {
-	width: 2rem;
-	height: 1.5rem;
-	position: absolute;
-	top: 0;
-	right: 0;
-	padding: .5rem .5rem 1rem 1rem;
-	fill: var(--highlight-strong-10);
-	filter: drop-shadow(0 0 3px var(--shadow));
-
-	&:hover {
-		cursor: pointer;
-		fill: var(--primary);
-	}
-
-	&.favorited {
-		fill: var(--primary);
-	}
-}
-
-.details {
-	width: 100%;
-	height: 1.5rem;
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	position: absolute;
-	bottom: 0;
-	box-sizing: border-box;
-	padding: 0 .5rem;
-	color: var(--text-light);
-	background: var(--shadow);
-	font-size: .9rem;
-	font-weight: bold;
-}
-
-.gender {
-	display: inline-block;
-	padding: .25rem 0;
-	margin-right: .25rem;
-	transform: translateY(1px);
-}
-
-.birth {
-	display: flex;
-	align-items: center;
-}
-
-.age {
-	margin-right: .25rem;
-}
-
-.age-then {
-	color: var(--grey-light-20);
-	font-weight: normal;
-}
-
-.country {
-	display: flex;
-	align-items: center;
-}
-
-.flag {
-	height: .75rem;
-	margin-left: .25rem;
-}
-</style>

components/tiles/gender.vue

@@ -1,39 +0,0 @@
-<template>
-	<span
-		v-if="gender"
-		class="gender"
-		:class="{ [gender]: true }"
-	>
-		<Icon :icon="gender" />
-	</span>
-</template>
-
-<script setup>
-defineProps({
-	gender: {
-		type: String,
-		default: null,
-	},
-});
-</script>
-
-<style scoped>
-.gender {
-    &.female .icon {
-        fill: var(--female);
-        filter: drop-shadow(0 0 1px var(--shadow-weak-20));
-    }
-
-    &.male .icon {
-        fill: var(--male);
-        filter: drop-shadow(0 0 1px var(--shadow-weak-20));
-    }
-
-    &.transsexual .icon {
-        fill: var(--text-light);
-        filter: drop-shadow(1px 0 0 var(--female)) drop-shadow(-1px 0 0 var(--female)) drop-shadow(0 1px 0 var(--female)) drop-shadow(0 -1px 0 var(--female))
-            drop-shadow(1px 0 0 var(--male)) drop-shadow(-1px 0 0 var(--male)) drop-shadow(0 1px 0 var(--male)) drop-shadow(0 -1px 0 var(--male))
-            drop-shadow(0 0 1px var(--shadow-weak-20))
-    }
-}
-</style>

config/default.cjs

@@ -66,7 +66,7 @@ module.exports = {
 	},
 	stashes: {
 		nameLength: [2, 24],
-		namePattern: /^[a-zA-Z0-9_-]+$/,
+		namePattern: /^[a-zA-Z0-9!?$&\s_-]+$/,
 		viewRefreshCooldown: 60, // minutes
 	},
 	media: {

pages/users/@username/+Page.vue

@@ -12,7 +12,7 @@
 					<h2 class="username ellipsis">{{ profile.username }}</h2>
 				</div>
 
-				<span class="age"><Icon icon="cake" />{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
+				<span class="age">{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
 			</div>
 
 			<section class="profile-section">
@@ -41,8 +41,9 @@
 						<input
 							ref="stashNameInput"
 							v-model="stashName"
-							class="input"
+							maxlength="24"
 							placeholder="Stash name"
+							class="input"
 						>
 
 						<button
@@ -56,53 +57,11 @@
 						v-for="stash in profile.stashes"
 						:key="`stash-${stash.id}`"
 					>
-						<div class="stash">
+						<StashTile
-							<div class="stash-header">
+							:stash="stash"
-								<a
+							:profile="profile"
-									:href="`/stash/${profile.username}/${stash.slug}`"
+							@reload="reloadProfile"
-									class="stash-name ellipsis nolink"
-								>
-									<span class="ellipsis">{{ stash.name }}</span>
-
-									<Icon
-										v-if="stash.primary"
-										icon="heart7"
-										class="primary"
 						/>
-								</a>
-
-								<Icon
-									v-if="profile.id === user?.id && stash.public"
-									icon="eye"
-									class="public noselect"
-									@click="setStashPublic(stash, false)"
-								/>
-
-								<Icon
-									v-else-if="profile.id === user?.id"
-									icon="eye-blocked"
-									class="public noselect"
-									@click="setStashPublic(stash, true)"
-								/>
-							</div>
-
-							<div class="stash-counts">
-								<a
-									:href="`/stash/${profile.username}/${stash.slug}/scenes`"
-									class="stash-count nolink"
-								><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>
-
-								<a
-									:href="`/stash/${profile.username}/${stash.slug}/actors`"
-									class="stash-count nolink"
-								><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>
-
-								<a
-									:href="`/stash/${profile.username}/${stash.slug}/movies`"
-									class="stash-count nolink"
-								><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
-							</div>
-						</div>
 					</li>
 				</ul>
 			</section>
@@ -114,14 +73,13 @@
 import { ref, inject } from 'vue';
 import { formatDistanceStrict } from 'date-fns';
 
-import { get, post, patch } from '#/src/api.js';
+import { get, post } from '#/src/api.js';
-import events from '#/src/events.js';
 
+import StashTile from '#/components/stashes/tile.vue';
 import Dialog from '#/components/dialog/dialog.vue';
 
 const pageContext = inject('pageContext');
 const profile = ref(pageContext.pageProps.profile);
-const user = pageContext.user;
 
 const stashName = ref(null);
 const stashNameInput = ref(null);
@@ -129,8 +87,8 @@ const stashNameInput = ref(null);
 const done = ref(true);
 const showStashDialog = ref(false);
 
-function abbreviateNumber(number) {
+async function reloadProfile() {
-	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
+	profile.value = await get(`/users/${profile.value.id}`);
 }
 
 async function createStash() {
@@ -140,56 +98,19 @@ async function createStash() {
 
 	done.value = false;
 
-	try {
 	await post('/stashes', {
 		name: stashName.value,
 		public: false,
-		});
+	}, {
+		successFeedback: `Created stash '${stashName.value}'`,
+		errorFeedback: `Failed to create stash '${stashName.value}'`,
+		appendErrorMessage: true,
+	}).finally(() => { done.value = true; });
 
-		profile.value = await get(`/users/${profile.value.id}`);
 	showStashDialog.value = false;
+	stashName.value = null;
 
-		events.emit('feedback', {
+	await reloadProfile();
-			type: 'success',
-			message: `Created stash '${stashName.value}'`,
-		});
-	} catch (error) {
-		events.emit('feedback', {
-			type: 'error',
-			message: `Failed to create stash '${stashName.value}': ${error.message}`,
-		});
-	}
-
-	done.value = true;
-}
-
-async function setStashPublic(stash, isPublic) {
-	if (done.value === false) {
-		return;
-	}
-
-	try {
-		done.value = false;
-
-		await patch(`/stashes/${stash.id}`, { public: isPublic });
-		profile.value = await get(`/users/${profile.value.id}`);
-
-		events.emit('feedback', {
-			type: isPublic ? 'success' : 'remove',
-			message: isPublic
-				? `Stash '${stash.name}' set to public`
-				: `Stash '${stash.name}' set to private`,
-		});
-	} catch (error) {
-		console.error(error);
-
-		events.emit('feedback', {
-			type: 'error',
-			message: 'Failed to update stash',
-		});
-	}
-
-	done.value = true;
 }
 </script>
 
@@ -229,8 +150,10 @@ async function setStashPublic(stash, isPublic) {
 .age {
 	display: flex;
 	flex-shrink: 0;
+	font-size: .9rem;
 
 	.icon {
+		width: .9rem;
 		fill: var(--highlight-strong-20);
 		margin-right: .75rem;
 		transform: translateY(-1px);
@@ -268,78 +191,6 @@ async function setStashPublic(stash, isPublic) {
 	padding: 0 .5rem 1rem .5rem;
 }
 
-.stash {
-	width: 100%;
-	border-radius: .25rem;
-	background: var(--background);
-	box-shadow: 0 0 3px var(--shadow-weak-30);
-
-	&:hover {
-		box-shadow: 0 0 3px var(--shadow-weak-20);
-	}
-}
-
-.stash-header {
-	display: flex;
-	align-items: stretch;
-	border-bottom: solid 1px var(--shadow-weak-30);
-	font-weight: bold;
-}
-
-.icon.public {
-	display: flex;
-	height: auto;
-	padding: 0 .75rem;
-	fill: var(--shadow);
-
-	&:hover {
-		cursor: pointer;
-		fill: var(--shadow-strong-30);
-	}
-}
-
-.stash-name {
-	display: flex;
-	flex-grow: 1;
-	padding: .5rem;
-	overflow: hidden;
-
-	.icon {
-		margin-left: .75rem;
-	}
-
-	.icon.primary {
-		fill: var(--primary);
-		transform: translateY(1px);
-	}
-}
-
-.stash-counts {
-	display: flex;
-	justify-content: space-between;
-}
-
-.stash-count {
-	display: inline-flex;
-	align-items: center;
-	padding: .5rem;
-	flex-grow: 1;
-	font-size: .9rem;
-
-	.icon {
-		margin-right: .5rem;
-		fill: var(--shadow);
-	}
-
-	&:hover {
-		color: var(--primary);
-
-		.icon {
-			fill: var(--primary);
-		}
-	}
-}
-
 .dialog-body {
 	padding: 1rem;
 

renderer/container.vue

@@ -164,7 +164,8 @@ onMounted(() => {
 		background: var(--error);
 	}
 
-	&.remove {
+	&.remove,
+	&.undo {
 		background: var(--warn);
 	}
 }

src/api.js

@@ -1,4 +1,5 @@
 import { parse } from '@brillout/json-serializer/parse'; /* eslint-disable-line import/extensions */
+import events from '#/src/events.js';
 
 const postHeaders = {
 	mode: 'cors',
@@ -18,39 +19,69 @@ function getQuery(data) {
 	return `?${encodeURI(decodeURIComponent(new URLSearchParams(curatedQuery).toString()))}`; // recode so commas aren't encoded
 }
 
-export async function get(path, query = {}) {
+function showFeedback(isSuccess, options = {}, errorMessage) {
+	if (!isSuccess && typeof options.errorFeedback) {
+		events.emit('feedback', {
+			type: 'error',
+			message: options.appendErrorMessage && errorMessage
+				? `${options.errorFeedback}: ${errorMessage}`
+				: options.errorFeedback,
+		});
+	}
+
+	if (isSuccess && options.successFeedback) {
+		events.emit('feedback', {
+			type: 'success',
+			message: options.successFeedback,
+		});
+	}
+
+	if (isSuccess && options.undoFeedback) {
+		events.emit('feedback', {
+			type: 'undo',
+			message: options.undoFeedback,
+		});
+	}
+}
+
+export async function get(path, query = {}, options = {}) {
 	const res = await fetch(`/api${path}${getQuery(query)}`);
 	const body = parse(await res.text());
 
 	if (res.ok) {
+		showFeedback(true, options);
 		return body;
 	}
 
+	showFeedback(false, options, body.statusMessage);
 	throw new Error(body.statusMessage);
 }
 
-export async function post(path, data, { query } = {}) {
+export async function post(path, data, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(query)}`, {
+	const res = await fetch(`/api${path}${getQuery(options.query)}`, {
 		method: 'POST',
 		body: JSON.stringify(data),
 		...postHeaders,
 	});
 
 	if (res.status === 204) {
+		showFeedback(true, options);
 		return null;
 	}
 
 	const body = parse(await res.text());
 
 	if (res.ok) {
+		showFeedback(true, options);
 		return body;
 	}
 
+	showFeedback(false, options, body.statusMessage);
 	throw new Error(body.statusMessage);
 }
 
-export async function patch(path, data, { query } = {}) {
+export async function patch(path, data, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(query)}`, {
+	const res = await fetch(`/api${path}${getQuery(options.query)}`, {
 		method: 'PATCH',
 		body: JSON.stringify(data),
 		...postHeaders,
@@ -63,28 +94,33 @@ export async function patch(path, data, { query } = {}) {
 	const body = parse(await res.text());
 
 	if (res.ok) {
+		showFeedback(true, options);
 		return body;
 	}
 
+	showFeedback(false, options, body.statusMessage);
 	throw new Error(body.statusMessage);
 }
 
-export async function del(path, { data, query } = {}) {
+export async function del(path, options = {}) {
-	const res = await fetch(`/api${path}${getQuery(query)}`, {
+	const res = await fetch(`/api${path}${getQuery(options.query)}`, {
 		method: 'DELETE',
-		body: JSON.stringify(data),
+		body: JSON.stringify(options.data),
 		...postHeaders,
 	});
 
 	if (res.status === 204) {
+		showFeedback(true, options);
 		return null;
 	}
 
 	const body = parse(await res.text());
 
 	if (res.ok) {
+		showFeedback(true, options);
 		return body;
 	}
 
+	showFeedback(false, options, body.statusMessage);
 	throw new Error(body.statusMessage);
 }

src/stashes.js

@@ -19,7 +19,7 @@ export function curateStash(stash, assets = {}) {
 		id: stash.id,
 		name: stash.name,
 		slug: stash.slug,
-		primary: stash.primary,
+		isPrimary: stash.primary,
 		public: stash.public,
 		createdAt: stash.created_at,
 		stashedScenes: stash.stashed_scenes ?? null,
@@ -38,10 +38,10 @@ export function curateStash(stash, assets = {}) {
 
 function curateStashEntry(stash, user) {
 	const curatedStashEntry = {
-		user_id: user.id,
+		user_id: user?.id || undefined,
-		name: stash.name,
+		name: stash.name || undefined,
-		slug: slugify(stash.name),
+		slug: slugify(stash.name) || undefined,
-		public: false,
+		public: stash.public ?? false,
 	};
 
 	return curatedStashEntry;
@@ -94,26 +94,30 @@ export async function fetchStashes(domain, itemId, sessionUser) {
 	return stashes.map((stash) => curateStash(stash));
 }
 
+function verifyStashName(stash) {
+	if (!stash.name) {
+		throw new HttpError('Stash name required', 400);
+	}
+
+	if (stash.name.length < config.stashes.nameLength[0]) {
+		throw new HttpError('Stash name is too short', 400);
+	}
+
+	if (stash.name.length > config.stashes.nameLength[1]) {
+		throw new HttpError('Stash name is too long', 400);
+	}
+
+	if (!config.stashes.namePattern.test(stash.name)) {
+		throw new HttpError('Stash name contains invalid characters', 400);
+	}
+}
+
 export async function createStash(newStash, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
 	}
 
-	if (!newStash.name) {
+	verifyStashName(newStash);
-		throw new HttpError('Stash name required', 400);
-	}
-
-	if (newStash.name.length < config.stashes.nameLength[0]) {
-		throw new HttpError('Stash name is too short', 400);
-	}
-
-	if (newStash.name.length > config.stashes.nameLength[1]) {
-		throw new HttpError('Stash name is too long', 400);
-	}
-
-	if (!config.stashes.namePattern.test(newStash.name)) {
-		throw new HttpError('Stash name contains invalid characters', 400);
-	}
 
 	try {
 		const stash = await knex('stashes')
@@ -130,17 +134,22 @@ export async function createStash(newStash, sessionUser) {
 	}
 }
 
-export async function updateStash(stashId, newStash, sessionUser) {
+export async function updateStash(stashId, updatedStash, sessionUser) {
 	if (!sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
 	}
 
+	if (updatedStash.name) {
+		verifyStashName(updatedStash);
+	}
+
+	try {
 		const stash = await knex('stashes')
 			.where({
 				id: stashId,
 				user_id: sessionUser.id,
 			})
-		.update(newStash)
+			.update(curateStashEntry(updatedStash))
 			.returning('*');
 
 		if (!stash) {
@@ -148,6 +157,13 @@ export async function updateStash(stashId, newStash, sessionUser) {
 		}
 
 		return curateStash(stash);
+	} catch (error) {
+		if (error.routine === '_bt_check_unique') {
+			throw new HttpError('Stash name should be unique', 409);
+		}
+
+		throw error;
+	}
 }
 
 export async function removeStash(stashId, sessionUser) {

src/users.js

@@ -18,7 +18,7 @@ export function curateUser(user, assets = {}) {
 		avatar: `/media/avatars/${user.id}_${user.username}.png`,
 		createdAt: user.created_at,
 		stashes: curatedStashes,
-		primaryStash: curatedStashes.find((stash) => stash.primary),
+		primaryStash: curatedStashes.find((stash) => stash.isPrimary),
 	};
 
 	return curatedUser;

src/users/curate.js

@@ -1,21 +0,0 @@
-export function curateUser(user, assets = {}) {
-	if (!user) {
-		return null;
-	}
-
-	const curatedStashes = assets.stashes?.filter(Boolean).map((stash) => curateStash(stash)) || [];
-
-	const curatedUser = {
-		id: user.id,
-		username: user.username,
-		email: user.email,
-		emailVerified: user.email_verified,
-		identityVerified: user.identity_verified,
-		avatar: `/media/avatars/${user.id}_${user.username}.png`,
-		createdAt: user.created_at,
-		stashes: curatedStashes,
-		primaryStash: curatedStashes.find((stash) => stash.primary),
-	};
-
-	return curatedUser;
-}