Added public visibility toggle to user page stashes.

assets/components/users/user.vue

@@ -19,12 +19,36 @@
 					:key="stash.id"
 					class="stash"
 				>
-					<router-link
-						:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
-						class="stash-link stash-section"
-					>
-						<h4 class="stash-name">{{ stash.name }}</h4>
-					</router-link>
+					<div class="stash-section stash-header">
+						<router-link
+							:to="{ name: 'stash', params: { stashId: stash.id, stashSlug: stash.slug } }"
+							class="stash-link nolink"
+						>
+							<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"
+							/>
+
+							<Icon
+								v-show="!stash.public"
+								icon="eye-blocked"
+							/>
+
+							<Toggle
+								:checked="stash.public"
+								@change="checked => publishStash(stash, checked)"
+							/>
+						</label>
+					</div>
 
 					<ul
 						v-if="stash.scenes?.length > 0"
@@ -68,12 +92,24 @@
 <script>
 import ActorPreview from './actor-preview.vue';
 import ScenePreview from './scene-preview.vue';
+import Toggle from '../form/toggle.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.pageTitle = this.user?.username;
 }
 
+async function publishStash(stash, isPublic) {
+	await this.$store.dispatch('updateStash', {
+		stashId: stash.id,
+		stash: { public: isPublic },
+	});
+
+	this.fetchUser();
+}
+
 async function mounted() {
 	await this.fetchUser();
 }
@@ -82,18 +118,21 @@ export default {
 	components: {
 		ActorPreview,
 		ScenePreview,
+		Toggle,
 	},
 	data() {
 		return {
 			user: this.$route.params.username === this.$store.state.auth.user?.username
 				? this.$store.state.auth.user
 				: null,
+			isMe: false,
 			pageTitle: null,
 		};
 	},
 	mounted,
 	methods: {
 		fetchUser,
+		publishStash,
 	},
 };
 </script>
@@ -133,17 +172,9 @@ export default {
 	box-shadow: 0 0 3px var(--shadow-weak);
 }
 
-.stash-link.stash-section {
-	display: block;
-	text-decoration: none;
-}
-
-.stash-name {
-	color: var(--shadow-strong);
-	margin: 0;
-}
-
 .stash-section {
+	display: flex;
+	align-items: center;
 	padding: .5rem;
 
 	&:not(:last-child) {
@@ -151,6 +182,34 @@ export default {
 	}
 }
 
+.stash-header {
+	justify-content: space-between;
+	padding: 0;
+}
+
+.stash-link.stash-section {
+	display: inline-block;
+	text-decoration: none;
+}
+
+.stash-public {
+	display: flex;
+	align-items: center;
+	padding: .5rem;
+	cursor: pointer;
+
+	.icon {
+		fill: var(--shadow-strong);
+		margin: 0 .5rem 0 0;
+	}
+}
+
+.stash-name {
+	color: var(--shadow-strong);
+	padding: .5rem;
+	margin: 0;
+}
+
 .stash-actors,
 .stash-scenes {
 	display: flex;