Added delete stash icons and dialog.

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);
 		}
 	}
 }