Changed stash routing.

assets/components/stashes/add.vue

@@ -7,6 +7,11 @@
 			class="dialog-body"
 			@submit.prevent="addStash"
 		>
+			<div
+				v-if="errorMsg"
+				class="form-error"
+			>{{ errorMsg }}</div>
+
 			<input
 				ref="name"
 				v-model="name"
@@ -27,11 +32,17 @@
 
 <script>
 async function addStash() {
-	await this.$store.dispatch('createStash', {
-		name: this.name,
-	});
+	this.errorMsg = null;
 
-	this.$emit('close', true);
+	try {
+		await this.$store.dispatch('createStash', {
+			name: this.name,
+		});
+
+		this.$emit('close', true);
+	} catch (error) {
+		this.errorMsg = error.message;
+	}
 }
 
 function mounted() {
@@ -39,15 +50,22 @@ function mounted() {
 }
 
 export default {
+	emits: ['close'],
 	data() {
 		return {
+			errorMsg: null,
 			name: null,
 		};
 	},
-	emits: ['close'],
 	mounted,
 	methods: {
 		addStash,
 	},
 };
 </script>
+
+<style lang="scss" scoped>
+.input {
+	width: 100%;
+}
+</style>

assets/components/stashes/stash.vue

@@ -115,6 +115,8 @@ import Pagination from '../pagination/pagination.vue';
 async function fetchStash() {
 	this.stash = await this.$store.dispatch('fetchStash', {
 		stashId: this.$route.params.stashId,
+		stashSlug: this.$route.params.stashSlug,
+		username: this.$route.params.username,
 		section: this.$route.params.range,
 		pageNumber: this.$route.params.pageNumber || 1,
 		limit: this.limit,

assets/components/users/stash.vue

@@ -1,13 +1,13 @@
 <template>
 	<div class="stash">
 		<div class="stash-section stash-header">
-			<router-link
+			<RouterLink
 				:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug, range: 'scenes', pageNumber: 1 } }"
 				class="stash-link nolink"
 			>
 				<h4 class="stash-name">{{ stash.name }}</h4>
 				<span class="stash-more">Browse</span>
-			</router-link>
+			</RouterLink>
 
 			<span class="header-actions noselect">
 				<label

assets/css/_forms.scss

@@ -3,3 +3,11 @@
 	font-size: 1rem;
 	font-weight: bold;
 }
+
+.form-error {
+	padding: .5rem;
+	margin-bottom: .5rem;
+	color: var(--text-light);
+	background: var(--error);
+	font-weight: bold;
+}

assets/css/_theme.scss

@@ -52,7 +52,7 @@ $breakpoint4: 1500px;
     --female: #f0a;
 
     --alert: #f00;
-    --error: #f00;
+    --error: #fd5555;
     --warn: #fa0;
     --success: #5c2;
 

assets/js/router.js

@@ -233,7 +233,7 @@ const routes = [
 		name: 'notifications',
 	},
 	{
-		path: '/stash/:stashId/:stashSlug',
+		path: '/user/:username/stash/:stashSlug',
 		redirect: (from) => ({
 			name: 'stash',
 			params: {
@@ -244,7 +244,7 @@ const routes = [
 		}),
 	},
 	{
-		path: '/stash/:stashId/:stashSlug?/:range/:pageNumber',
+		path: '/user/:username/stash/:stashSlug/:range/:pageNumber',
 		component: Stash,
 		name: 'stash',
 	},

assets/js/stashes/actions.js

@@ -10,14 +10,16 @@ import { curateStash } from '../curate';
 
 function initStashesActions(store, _router) {
 	async function fetchStash(context, {
-		stashId,
+		stashSlug,
+		username,
 		section = 'scenes',
 		pageNumber = 1,
 		limit = 20,
 	}) {
-		const { stash } = await graphql(`
+		const { stashes: [stash] } = await graphql(`
 			query Stash(
-				$stashId: Int!
+				$stashSlug: String!
+				$username: String!
 				$includeScenes: Boolean!
 				$includeActors: Boolean!
 				$includeMovies: Boolean!
@@ -26,7 +28,12 @@ function initStashesActions(store, _router) {
 				$hasAuth: Boolean!
 				$userId: Int
 			) {
-				stash(id: $stashId) {
+				stashes(
+					filter: {
+						user: { username: { equalTo: $username } }
+						slug: { equalTo: $stashSlug }
+					}
+				) {
 					id
 					name
 					slug
@@ -101,7 +108,8 @@ function initStashesActions(store, _router) {
 				}
 			}
 		`, {
-			stashId: Number(stashId),
+			stashSlug,
+			username,
 			includeScenes: section === 'scenes',
 			includeActors: section === 'actors',
 			includeMovies: section === 'movies',