Added dialog to add stashes.

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) {