Added dialog to add stashes.

assets/components/dialog/dialog.vue

@@ -103,4 +103,13 @@ export default {
 	flex-grow: 1;
 	overflow: auto;
 }
+
+::v-deep(.dialog-actions) {
+	display: flex;
+	padding: .5rem 0;
+
+	&.right {
+		justify-content: flex-end;
+	}
+}
 </style>

assets/components/stashes/add-stash.vue

@@ -0,0 +1,49 @@
+<template>
+	<Dialog
+		title="Add stash"
+		@close="$emit('close')"
+	>
+		<form @submit.prevent="addStash">
+			<input
+				ref="name"
+				v-model="name"
+				type="input"
+				placeholder="Name"
+				class="input"
+			>
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Add</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function addStash() {
+	await this.$store.dispatch('createStash', {
+		name: this.name,
+	});
+
+	this.$emit('close');
+}
+
+function mounted() {
+	this.$refs.name.focus();
+}
+
+export default {
+	data() {
+		return {
+			name: null,
+		};
+	},
+	mounted,
+	methods: {
+		addStash,
+	},
+};
+</script>

assets/components/users/stash.vue

@@ -103,12 +103,20 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.stash {
+	min-width: 0;
+	height: 100%;
+	background: var(--background);
+	box-shadow: 0 0 3px var(--shadow-weak);
+}
+
 .stash-section {
 	display: flex;
 	align-items: center;
 	padding: .5rem;
 
-	&:not(:last-child) {
+	&:not(:last-child),
+	&.stash-header {
 		border-bottom: solid 1px var(--shadow-hint);
 	}
 }

assets/components/users/user.vue

@@ -17,7 +17,6 @@
 				<li
 					v-for="stash in user.stashes"
 					:key="stash.id"
-					class="stash"
 				>
 					<Stash
 						:stash="stash"
@@ -25,18 +24,33 @@
 						@publish="() => fetchUser()"
 					/>
 				</li>
+
+				<li
+					v-if="isMe"
+					class="stashes-add"
+					@click="showAddStash = true"
+				>
+					<Icon icon="plus2" />
+				</li>
 			</ul>
 		</section>
+
+		<AddStash
+			v-if="showAddStash"
+			@close="fetchUser"
+		/>
 	</div>
 </template>
 
 <script>
 import Stash from './stash.vue';
+import AddStash from '../stashes/add-stash.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.showAddStash = false;
 	this.pageTitle = this.user?.username;
 }
 
@@ -46,6 +60,7 @@ async function mounted() {
 
 export default {
 	components: {
+		AddStash,
 		Stash,
 	},
 	data() {
@@ -55,6 +70,7 @@ export default {
 				: null,
 			isMe: false,
 			pageTitle: null,
+			showAddStash: false,
 		};
 	},
 	mounted,
@@ -86,17 +102,35 @@ export default {
 .stashes {
 	display: grid;
 	grid-template-columns: 1fr 1fr;
+	grid-auto-rows: 15fr;
+	grid-gap: 1rem;
 }
 
 .heading {
 	color: var(--primary);
 }
 
-.stash {
-	min-width: 0;
-	background: var(--background);
-	margin: 0 0 1rem 0;
-	box-shadow: 0 0 3px var(--shadow-weak);
+.stashes-add {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background: var(--shadow-hint);
+
+	.icon {
+		width: 1.5rem;
+		height: 1.5rem;
+		fill: var(--shadow-weak);
+	}
+
+	&:hover {
+		background: var(--shadow-weak);
+		cursor: pointer;
+
+		.icon {
+			fill: var(--shadow);
+		}
+	}
 }
 
 @media(max-width: $breakpoint-kilo) {

assets/css/_inputs.scss

@@ -29,6 +29,7 @@
 	border: none;
 	background: none;
 	padding: .5rem;
+	font-size: .9rem;
 	font-weight: bold;
 
 	&:hover {

assets/img/icons/checkmark2.svg

@@ -0,0 +1,5 @@
+<!-- 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>checkmark2</title>
+<path d="M6.21 14.339l-6.217-6.119 3.084-3.035 3.133 3.083 6.713-6.607 3.084 3.035-9.797 9.643zM1.686 8.22l4.524 4.453 8.104-7.976-1.391-1.369-6.713 6.607-3.133-3.083-1.391 1.369z"></path>
+</svg>

assets/img/icons/minus.svg

@@ -0,0 +1,5 @@
+<!-- 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>minus</title>
+<path d="M0 5h16v6h-16z"></path>
+</svg>

assets/img/icons/minus2.svg

@@ -0,0 +1,5 @@
+<!-- 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>minus2</title>
+<path d="M0 6.5v3c0 0.276 0.224 0.5 0.5 0.5h15c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5h-15c-0.276 0-0.5 0.224-0.5 0.5z"></path>
+</svg>

assets/img/icons/minus3.svg

@@ -0,0 +1,5 @@
+<!-- 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>minus3</title>
+<path d="M1 7h14v2h-14v-2z"></path>
+</svg>

assets/img/icons/plus.svg

@@ -0,0 +1,5 @@
+<!-- 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>plus</title>
+<path d="M16 5h-5v-5h-6v5h-5v6h5v5h6v-5h5z"></path>
+</svg>

assets/img/icons/plus2.svg

@@ -0,0 +1,5 @@
+<!-- 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>plus2</title>
+<path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z"></path>
+</svg>

assets/img/icons/plus3.svg

@@ -0,0 +1,5 @@
+<!-- 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>plus3</title>
+<path d="M15 7h-6v-6h-2v6h-6v2h6v6h2v-6h6z"></path>
+</svg>