Added stash creation. Added dialog framework.

assets/css/inputs.css

@@ -23,17 +23,22 @@
 
 .button {
 	display: inline-flex;
-	align-items: center;
+	flex-shrink: 0;
+	align-items: stretch;
 	box-sizing: border-box;
-    padding: .5rem 1rem;
+    padding: .5rem 0 .5rem .5rem;
     border: none;
     border-radius: .25rem;
-    background: var(--grey-light-30);
+    background: var(--background);
-    font-size: 1rem;
+	box-shadow: 0 0 3px var(--shadow-weak-30);
+	color: var(--shadow-strong-30);
+    font-size: .9rem;
     font-weight: bold;
 
 	.icon {
-		padding: .5rem;
+		height: auto;
+		padding: 0 .75rem 0 .25rem;
+		fill: var(--shadow-strong-20);
 	}
 
 	&:hover {
@@ -51,9 +56,13 @@
     }
 }
 
+.button-label {
+	margin-right: .75rem;
+}
+
 .button-submit {
-    background: var(--primary-light-10);
+    color: var(--primary);
-    color: var(--text-light);
+	justify-content: center;
 
     &:hover:not(:disabled) {
 		background: var(--primary);

components/dialog/dialog.vue

@@ -0,0 +1,98 @@
+<template>
+	<Teleport to="body">
+		<div
+			class="dialog-container"
+			@click="emit('close')"
+		>
+			<div
+				class="dialog"
+				@click.stop
+			>
+				<div class="dialog-header">
+					<span class="dialog-title ellipsis">{{ title }}</span>
+
+					<Icon
+						icon="cross2"
+						class="dialog-close"
+						@click="emit('close')"
+					/>
+				</div>
+
+				<slot />
+			</div>
+		</div>
+	</Teleport>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+defineProps({
+	title: {
+		type: String,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['open', 'close']);
+
+onMounted(() => emit('open'));
+</script>
+
+<style>
+.dialog-body {
+	display: flex;
+	flex-direction: column;
+	border-radius: 0 0 .25rem .25rem;
+	background: var(--background);
+}
+</style>
+
+<style scoped>
+.dialog-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 900;
+	background: var(--shadow-strong-10);
+}
+
+.dialog {
+	border-radius: .25rem;
+	box-shadow: 0 0 3px var(--shadow);
+	overflow: hidden;
+	max-width: 100%;
+	margin: 1rem;
+}
+
+.dialog-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: stretch;
+	background: var(--primary);
+	border-radius: .25rem .25rem 0 0;
+}
+
+.dialog-title {
+	padding: .5rem 1rem;
+	color: var(--text-light);
+	font-size: 1.1rem;
+	font-weight: bold;
+}
+
+.dialog-close {
+	height: auto;
+	padding: 0 .75rem;
+	fill: var(--highlight);
+
+	&:hover {
+		fill: var(--text-light);
+		cursor: pointer;
+	}
+}
+</style>

config/default.cjs

@@ -65,6 +65,8 @@ module.exports = {
 		usernamePattern: /^[a-zA-Z0-9_-]+$/,
 	},
 	stashes: {
+		nameLength: [2, 24],
+		namePattern: /^[a-zA-Z0-9_-]+$/,
 		viewRefreshCooldown: 60, // minutes
 	},
 	media: {

pages/users/@username/+Page.vue

@@ -1,15 +1,56 @@
 <template>
+	<div class="page">
 		<div class="profile">
 			<div class="profile-header">
+				<div class="user">
 					<img
 						v-if="profile.avatar"
 						:src="profile.avatar"
 						class="avatar"
 					>
 
-			<h2 class="username">{{ profile.username }}</h2>
+					<h2 class="username ellipsis">{{ profile.username }}</h2>
 				</div>
 
+				<span class="age"><Icon icon="cake" />{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
+			</div>
+
+			<section class="profile-section">
+				<div class="section-header">
+					<h3 class="heading">Stashes</h3>
+
+					<button
+						class="button"
+						@click="showStashDialog = true"
+					>
+						<Icon icon="plus3" />
+						<span class="button-label">New stash</span>
+					</button>
+				</div>
+
+				<Dialog
+					v-if="showStashDialog"
+					title="New stash"
+					@close="showStashDialog = false"
+					@open="stashNameInput?.focus()"
+				>
+					<form
+						class="dialog-body"
+						@submit.prevent="createStash"
+					>
+						<input
+							ref="stashNameInput"
+							v-model="stashName"
+							class="input"
+							placeholder="Stash name"
+						>
+
+						<button
+							class="button button-submit"
+						>Create stash</button>
+					</form>
+				</Dialog>
+
 				<ul class="stashes nolist">
 					<li
 						v-for="stash in profile.stashes"
@@ -64,24 +105,64 @@
 						</div>
 					</li>
 				</ul>
+			</section>
+		</div>
 	</div>
 </template>
 
 <script setup>
 import { ref, inject } from 'vue';
+import { formatDistanceStrict } from 'date-fns';
 
-import { get, patch } from '#/src/api.js';
+import { get, post, patch } from '#/src/api.js';
 import events from '#/src/events.js';
 
+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);
+
 const done = ref(true);
+const showStashDialog = ref(false);
 
 function abbreviateNumber(number) {
 	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
 }
 
+async function createStash() {
+	if (done.value === false) {
+		return;
+	}
+
+	done.value = false;
+
+	try {
+		await post('/stashes', {
+			name: stashName.value,
+			public: false,
+		});
+
+		profile.value = await get(`/users/${profile.value.id}`);
+		showStashDialog.value = false;
+
+		events.emit('feedback', {
+			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;
@@ -96,8 +177,8 @@ async function setStashPublic(stash, isPublic) {
 		events.emit('feedback', {
 			type: isPublic ? 'success' : 'remove',
 			message: isPublic
-				? `Stash '${stash.name}' is public`
+				? `Stash '${stash.name}' set to public`
-				: `Stash '${stash.name}' is private`,
+				: `Stash '${stash.name}' set to private`,
 		});
 	} catch (error) {
 		console.error(error);
@@ -113,12 +194,31 @@ async function setStashPublic(stash, isPublic) {
 </script>
 
 <style scoped>
+.page {
+	display: flex;
+	flex-grow: 1;
+	justify-content: center;
+	background: var(--background-base-10);
+}
+
+.profile {
+	width: 1200px;
+	max-width: 100%;
+}
+
 .profile-header {
 	display: flex;
+	justify-content: space-between;
 	align-items: center;
 	padding: .5rem 1rem;
     color: var(--highlight-strong-30);
     background: var(--grey-dark-40);
+	border-radius: 0 0 .5rem .5rem;
+}
+
+.user {
+	display: flex;
+	overflow: hidden;
 }
 
 .username {
@@ -126,6 +226,17 @@ async function setStashPublic(stash, isPublic) {
 	font-size: 1.25rem;
 }
 
+.age {
+	display: flex;
+	flex-shrink: 0;
+
+	.icon {
+		fill: var(--highlight-strong-20);
+		margin-right: .75rem;
+		transform: translateY(-1px);
+	}
+}
+
 .avatar {
 	width: 1.5rem;
 	height: 1.5rem;
@@ -133,15 +244,33 @@ async function setStashPublic(stash, isPublic) {
 	margin-right: 1rem;
 }
 
+.section-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: .5rem .5rem .5rem .5rem;
+
+	.button {
+		margin-left: 1rem;
+	}
+}
+
+.heading {
+	margin: 0;
+	font-size: 1.1rem;
+	color: var(--primary);
+}
+
 .stashes {
 	display: grid;
 	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
 	gap: 1rem;
-	padding: 1rem;
+	padding: 0 .5rem 1rem .5rem;
 }
 
 .stash {
 	width: 100%;
+	border-radius: .25rem;
 	background: var(--background);
 	box-shadow: 0 0 3px var(--shadow-weak-30);
 
@@ -210,4 +339,46 @@ async function setStashPublic(stash, isPublic) {
 		}
 	}
 }
+
+.dialog-body {
+	padding: 1rem;
+
+	.input {
+		margin-bottom: .5rem;
+	}
+}
+
+@media(--compact) {
+	.profile-header {
+		border-radius: 0;
+	}
+
+	.section-header {
+		padding: .5rem 1rem .5rem 1rem;
+	}
+
+	.stashes {
+		padding: 0 1rem 1rem 1rem;
+	}
+}
+
+@media(--small-30) {
+	.section-header {
+		padding: .5rem .5rem .5rem .5rem;
+	}
+
+	.stashes {
+		padding: 0 .5rem 1rem .5rem;
+	}
+
+	.age .icon {
+		display: none;
+	}
+}
+
+@media(--small-50) {
+	.age {
+		display: none;
+	}
+}
 </style>

renderer/container.vue

@@ -61,8 +61,6 @@ onMounted(() => {
 	events.on('scrollUp', () => { content.value.scrollTop = 0; });
 
 	events.on('feedback', async (event) => {
-		console.log(event);
-
 		feedback.value = event;
 
 		await nextTick();
@@ -87,7 +85,7 @@ onMounted(() => {
 				opacity: 0,
 			},
 		], {
-			duration: 3000,
+			duration: event.type === 'error' ? 5000 : 3000,
 			easing: 'ease-in-out',
 		});
 	});

src/auth.js

@@ -47,6 +47,7 @@ export async function login(credentials, userIp) {
 	const { user, stashes } = await fetchUser(credentials.username.trim(), {
 		email: true,
 		raw: true,
+		includeStashes: true,
 	}).catch(() => {
 		throw new HttpError('Username or password incorrect', 401);
 	});

src/stashes.js

@@ -22,9 +22,9 @@ export function curateStash(stash, assets = {}) {
 		primary: stash.primary,
 		public: stash.public,
 		createdAt: stash.created_at,
-		stashedScenes: stash.stashed_scenes || null,
+		stashedScenes: stash.stashed_scenes ?? null,
-		stashedMovies: stash.stashed_movies || null,
+		stashedMovies: stash.stashed_movies ?? null,
-		stashedActors: stash.stashed_actors || null,
+		stashedActors: stash.stashed_actors ?? null,
 		user: assets.user ? {
 			id: assets.user.id,
 			username: assets.user.username,
@@ -99,6 +99,22 @@ export async function createStash(newStash, sessionUser) {
 		throw new HttpError('You are not authenthicated', 401);
 	}
 
+	if (!newStash.name) {
+		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')
 			.insert(curateStashEntry(newStash, sessionUser))

src/users.js

@@ -53,7 +53,7 @@ export async function fetchUser(userId, options = {}, reqUser) {
 	const stashes = await knex('stashes')
 		.where('user_id', user.id)
 		.modify((builder) => {
-			if (reqUser?.id !== user.id) {
+			if (reqUser?.id !== user.id && !options.includeStashes) {
 				builder.where('public', true);
 			}
 		})

src/web/server.js

@@ -25,7 +25,7 @@ import {
 } from './auth.js';
 
 import {
-	fetchUserApi
+	fetchUserApi,
 } from './users.js';
 
 import {