Added visibility toggle to stash tile. Collapsed stash page directory structure.

pages/users/@username/+Page.vue

@@ -16,18 +16,34 @@
 				:key="`stash-${stash.id}`"
 			>
 				<div class="stash">
-					<a
-						:href="`/stash/${profile.username}/${stash.slug}`"
-						class="stash-name nolink"
-					>
-						{{ stash.name }}
+					<div class="stash-header">
+						<a
+							:href="`/stash/${profile.username}/${stash.slug}`"
+							class="stash-name ellipsis nolink"
+						>
+							<span class="ellipsis">{{ stash.name }}</span>
+
+							<Icon
+								v-if="stash.primary"
+								icon="heart7"
+								class="primary"
+							/>
+						</a>
 
 						<Icon
-							v-if="stash.primary"
-							icon="heart7"
-							class="primary"
+							v-if="profile.id === user?.id && stash.public"
+							icon="eye"
+							class="public noselect"
+							@click="setStashPublic(stash, false)"
 						/>
-					</a>
+
+						<Icon
+							v-else-if="profile.id === user?.id"
+							icon="eye-blocked"
+							class="public noselect"
+							@click="setStashPublic(stash, true)"
+						/>
+					</div>
 
 					<div class="stash-counts">
 						<a
@@ -52,14 +68,48 @@
 </template>
 
 <script setup>
-import { inject } from 'vue';
+import { ref, inject } from 'vue';
+
+import { get, patch } from '#/src/api.js';
+import events from '#/src/events.js';
 
 const pageContext = inject('pageContext');
-const profile = pageContext.pageProps.profile;
+const profile = ref(pageContext.pageProps.profile);
+const user = pageContext.user;
+const done = ref(true);
 
 function abbreviateNumber(number) {
 	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
 }
+
+async function setStashPublic(stash, isPublic) {
+	if (done.value === false) {
+		return;
+	}
+
+	try {
+		done.value = false;
+
+		await patch(`/stashes/${stash.id}`, { public: isPublic });
+		profile.value = await get(`/users/${profile.value.id}`);
+
+		events.emit('feedback', {
+			type: isPublic ? 'success' : 'remove',
+			message: isPublic
+				? `Stash '${stash.name}' is public`
+				: `Stash '${stash.name}' is private`,
+		});
+	} catch (error) {
+		console.error(error);
+
+		events.emit('feedback', {
+			type: 'error',
+			message: 'Failed to update stash',
+		});
+	}
+
+	done.value = true;
+}
 </script>
 
 <style scoped>
@@ -73,11 +123,12 @@ function abbreviateNumber(number) {
 
 .username {
 	margin: 0;
+	font-size: 1.25rem;
 }
 
 .avatar {
-	width: 2rem;
-	height: 2rem;
+	width: 1.5rem;
+	height: 1.5rem;
 	border-radius: .25rem;
 	margin-right: 1rem;
 }
@@ -99,11 +150,30 @@ function abbreviateNumber(number) {
 	}
 }
 
-.stash-name {
+.stash-header {
 	display: flex;
-	padding: .5rem;
+	align-items: stretch;
 	border-bottom: solid 1px var(--shadow-weak-30);
 	font-weight: bold;
+}
+
+.icon.public {
+	display: flex;
+	height: auto;
+	padding: 0 .75rem;
+	fill: var(--shadow);
+
+	&:hover {
+		cursor: pointer;
+		fill: var(--shadow-strong-30);
+	}
+}
+
+.stash-name {
+	display: flex;
+	flex-grow: 1;
+	padding: .5rem;
+	overflow: hidden;
 
 	.icon {
 		margin-left: .75rem;
@@ -111,6 +181,7 @@ function abbreviateNumber(number) {
 
 	.icon.primary {
 		fill: var(--primary);
+		transform: translateY(1px);
 	}
 }
 

pages/users/@username/+onBeforeRender.js

@@ -3,7 +3,7 @@ import { render } from 'vike/abort'; /* eslint-disable-line import/extensions */
 import { fetchUser } from '#/src/users.js';
 
 export async function onBeforeRender(pageContext) {
-	const profile = await fetchUser(pageContext.routeParams.username);
+	const profile = await fetchUser(pageContext.routeParams.username, {}, pageContext.user);
 
 	if (!profile) {
 		throw render(404, `Cannot find user '${pageContext.routeParams.username}'.`);