Added public visibility toggle to stash page.

assets/components/form/toggle.vue

@@ -53,6 +53,16 @@ export default {
 .toggle-container {
 	display: inline-block;
 	cursor: pointer;
+
+	&.light {
+		.toggle {
+			background: var(--lighten-weak);
+		}
+
+		.toggle-input:checked + .toggle {
+			background: var(--lighten);
+		}
+	}
 }
 
 .toggle {

assets/components/stashes/stash.vue

@@ -6,11 +6,36 @@
 		<div class="stash-header">
 			<h2 class="stash-name">{{ stash.name }}</h2>
 
-			<router-link
+			<span class="header-section">
-				v-if="stash.user"
+				<label
-				:to="{ name: 'user', params: { username: stash.user.username } }"
+					v-if="isMine"
-				class="stash-username nolink"
+					v-tooltip="'Public'"
-			><Icon icon="user3" />{{ stash.user.username }}</router-link>
+					:class="{ public: stash.public }"
+					class="header-item stash-public"
+				>
+					<Icon
+						v-show="stash.public"
+						icon="eye"
+					/>
+
+					<Icon
+						v-show="!stash.public"
+						icon="eye-blocked"
+					/>
+
+					<Toggle
+						:checked="stash.public"
+						class="light"
+						@change="checked => publishStash(checked)"
+					/>
+				</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>
+			</span>
 		</div>
 
 		<div class="content-inner">
@@ -38,9 +63,20 @@
 <script>
 import Actor from '../actors/tile.vue';
 import Releases from '../releases/releases.vue';
+import Toggle from '../form/toggle.vue';
 
 async function fetchStash() {
 	this.stash = await this.$store.dispatch('fetchStash', this.$route.params.stashId);
+	this.isMine = this.stash.user?.id === this.$store.state.auth.user?.id;
+}
+
+async function publishStash(isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: this.stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.fetchStash();
 }
 
 async function mounted() {
@@ -51,15 +87,18 @@ export default {
 	components: {
 		Actor,
 		Releases,
+		Toggle,
 	},
 	data() {
 		return {
 			stash: null,
+			isMine: false,
 		};
 	},
 	mounted,
 	methods: {
 		fetchStash,
+		publishStash,
 	},
 };
 </script>
@@ -71,6 +110,26 @@ export default {
 	align-items: center;
 	background: var(--profile);
 	color: var(--text-light);
+
+	.icon {
+		fill: var(--text-light);
+		margin: -.1rem .5rem 0 0;
+	}
+}
+
+.header-section,
+.header-item {
+	display: flex;
+	align-items: center;
+}
+
+.header-item:not(:last-child) {
+	margin: 0 1rem 0 0;
+}
+
+.stash-public .icon {
+	margin: 0 .75rem 0 0;
+	cursor: pointer;
 }
 
 .stash-name,
@@ -80,11 +139,6 @@ export default {
 	padding: .5rem 1rem;
 	margin: 0;
 	font-weight: bold;
-
-	.icon {
-		fill: var(--text-light);
-		margin: -.1rem .5rem 0 0;
-	}
 }
 
 .stash-section:not(:last-child) {