Added delete stash icons and dialog.

assets/components/stashes/remove-stash.vue

@@ -0,0 +1,38 @@
+<template>
+	<Dialog
+		title="Remove stash"
+		@close="$emit('close', false)"
+	>
+		<form @submit.prevent="removeStash">
+			Are you sure you want to remove stash "{{ stash.name }}"?
+
+			<div class="dialog-actions right">
+				<button
+					type="submit"
+					class="button button-primary"
+				>Remove</button>
+			</div>
+		</form>
+	</Dialog>
+</template>
+
+<script>
+async function removeStash() {
+	await this.$store.dispatch('removeStash', this.stash.id);
+
+	this.$emit('close', true);
+}
+
+export default {
+	props: {
+		stash: {
+			type: Object,
+			default: null,
+		},
+	},
+	emits: ['close'],
+	methods: {
+		removeStash,
+	},
+};
+</script>

assets/components/stashes/stash.vue

@@ -7,6 +7,12 @@
 			<h2 class="stash-name">{{ stash.name }}</h2>
 
 			<span class="header-section">
+				<router-link
+					v-if="stash.user"
+					:to="{ name: 'user', params: { username: stash.user.username } }"
+					class="header-item stash-username nolink"
+				><Icon icon="user3" />{{ stash.user.username }}</router-link>
+
 				<label
 					v-if="isMine"
 					v-tooltip="'Public'"
@@ -30,11 +36,18 @@
 					/>
 				</label>
 
-				<router-link
-					v-if="stash.user"
-					:to="{ name: 'user', params: { username: stash.user.username } }"
-					class="header-item stash-username nolink"
-				><Icon icon="user3" />{{ stash.user.username }}</router-link>
+				<Icon
+					v-if="stash.deletable"
+					icon="bin"
+					class="stash-remove"
+					@click.native="showRemoveStash = true"
+				/>
+
+				<RemoveStash
+					v-if="showRemoveStash"
+					:stash="stash"
+					@close="removeStash"
+				/>
 			</span>
 		</div>
 
@@ -62,6 +75,7 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import RemoveStash from './remove-stash.vue';
 import Toggle from '../form/toggle.vue';
 
 async function fetchStash() {
@@ -78,6 +92,19 @@ async function publishStash(isPublic) {
 	this.fetchStash();
 }
 
+async function removeStash(removed) {
+	this.showRemoveStash = false;
+
+	if (removed && this.stash.user) {
+		this.$router.replace({ name: 'user', params: { username: this.stash.user.username } });
+		return;
+	}
+
+	if (removed) {
+		this.$router.replace({ name: 'home' });
+	}
+}
+
 async function mounted() {
 	this.fetchStash();
 }
@@ -86,11 +113,13 @@ export default {
 	components: {
 		Actor,
 		Releases,
+		RemoveStash,
 		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			showRemoveStash: false,
 			isMine: false,
 		};
 	},
@@ -98,6 +127,7 @@ export default {
 	methods: {
 		fetchStash,
 		publishStash,
+		removeStash,
 	},
 };
 </script>
@@ -136,6 +166,17 @@ export default {
 	}
 }
 
+.stash-remove.icon {
+	height: 100%;
+	padding: 0 1rem;
+	fill: var(--lighten-strong);
+
+	&:hover {
+		fill: var(--text-light);
+		cursor: pointer;
+	}
+}
+
 .stash-name,
 .stash-username {
 	display: inline-flex;