Added delete stash icons and dialog.

assets/components/container/container.vue

@@ -44,7 +44,7 @@
 import Warning from './warning.vue';
 import Header from '../header/header.vue';
 import Sidebar from '../sidebar/sidebar.vue';
-import Filters from './filters.vue';
+import Filters from '../filters/filters.vue';
 
 function toggleSidebar(state) {
 	this.showSidebar = typeof state === 'boolean' ? state : !this.showSidebar;

assets/components/dialog/dialog.vue

@@ -76,7 +76,6 @@ export default {
 	color: var(--text-light);
 	font-size: 1.5rem;
 	font-weight: bold;
-	text-transform: capitalize;
 }
 
 .header-title {
@@ -106,7 +105,11 @@ export default {
 
 ::v-deep(.dialog-actions) {
 	display: flex;
-	padding: .5rem 0;
+	padding: 1rem 0 0 0;
+
+	&.center {
+		justify-content: center;
+	}
 
 	&.right {
 		justify-content: flex-end;

assets/components/filters/filters.vue

@@ -1,6 +1,6 @@
 <template>
 	<Dialog
-		title="filters"
+		title="Filters"
 		@close="$emit('close')"
 	>
 		<div class="filters">

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;

assets/components/users/stash.vue

@@ -8,27 +8,42 @@
 				<h4 class="stash-name">{{ stash.name }}</h4>
 			</router-link>
 
-			<label
-				v-if="isMe"
-				v-tooltip="'Public'"
-				:class="{ public: stash.public }"
-				class="stash-public"
-			>
-				<Icon
-					v-show="stash.public"
-					icon="eye"
-				/>
+			<span class="header-actions noselect">
+				<label
+					v-if="isMe"
+					v-tooltip="'Public'"
+					:class="{ public: stash.public }"
+					class="stash-public"
+				>
+					<Icon
+						v-show="stash.public"
+						icon="eye"
+					/>
+
+					<Icon
+						v-show="!stash.public"
+						icon="eye-blocked"
+					/>
+
+					<Toggle
+						:checked="stash.public"
+						@change="checked => publishStash(checked)"
+					/>
+				</label>
 
 				<Icon
-					v-show="!stash.public"
-					icon="eye-blocked"
+					v-if="stash.deletable"
+					icon="bin"
+					class="stash-remove"
+					@click.native="showRemoveStash = true"
 				/>
 
-				<Toggle
-					:checked="stash.public"
-					@change="checked => publishStash(stash, checked)"
+				<RemoveStash
+					v-if="showRemoveStash"
+					:stash="stash"
+					@close="removeStash"
 				/>
-			</label>
+			</span>
 		</div>
 
 		<ul
@@ -68,21 +83,31 @@
 <script>
 import ActorPreview from './actor-preview.vue';
 import ScenePreview from './scene-preview.vue';
+import RemoveStash from '../stashes/remove-stash.vue';
 import Toggle from '../form/toggle.vue';
 
-async function publishStash(stash, isPublic) {
+async function publishStash(isPublic) {
 	await this.$store.dispatch('updateStash', {
-		stashId: stash.id,
+		stashId: this.stash.id,
 		stash: { public: isPublic },
 	});
 
 	this.$emit('publish', isPublic);
 }
 
+async function removeStash(removed) {
+	this.showRemoveStash = false;
+
+	if (removed) {
+		this.$emit('remove');
+	}
+}
+
 export default {
 	components: {
 		ActorPreview,
 		ScenePreview,
+		RemoveStash,
 		Toggle,
 	},
 	props: {
@@ -95,9 +120,15 @@ export default {
 			default: false,
 		},
 	},
-	emits: ['publish'],
+	emits: ['publish', 'remove'],
+	data() {
+		return {
+			showRemoveStash: false,
+		};
+	},
 	methods: {
 		publishStash,
+		removeStash,
 	},
 };
 </script>
@@ -142,8 +173,13 @@ export default {
 	text-overflow: ellipsis;
 }
 
-.stash-public {
+.header-actions {
 	display: flex;
+	align-items: stretch;
+}
+
+.stash-public {
+	display: inline-flex;
 	align-items: center;
 	padding: .5rem;
 	cursor: pointer;
@@ -154,6 +190,17 @@ export default {
 	}
 }
 
+.stash-remove {
+	height: auto;
+	padding: 0 1rem 0 .75rem;
+	fill: var(--shadow);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--shadow-strong);
+	}
+}
+
 .stash-actors,
 .stash-scenes {
 	display: flex;

assets/components/users/user.vue

@@ -23,6 +23,7 @@
 						:stash="stash"
 						:is-me="isMe"
 						@publish="() => fetchUser()"
+						@remove="() => fetchUser()"
 					/>
 				</li>
 
@@ -131,20 +132,20 @@ export default {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	background: var(--shadow-hint);
+	background: var(--shadow-touch);
 
 	.icon {
 		width: 1.5rem;
 		height: 1.5rem;
-		fill: var(--shadow-weak);
+		fill: var(--shadow-hint);
 	}
 
 	&:hover {
-		background: var(--shadow-weak);
+		background: var(--shadow-hint);
 		cursor: pointer;
 
 		.icon {
-			fill: var(--shadow);
+			fill: var(--shadow-weak);
 		}
 	}
 }