Split profile sections into different pages.

components/stashes/create.vue

@@ -40,7 +40,7 @@ async function createStash() {
 		name: stashName.value,
 		public: false,
 	}, {
-		successFeedback: `Created stash '${stashName.value}'`,
+		successFeedback: `Stash '${stashName.value}' created`,
 		errorFeedback: `Failed to create stash '${stashName.value}'`,
 		appendErrorMessage: true,
 	});

components/stashes/stashes.vue

@@ -0,0 +1,72 @@
+<template>
+	<section class="profile-section">
+		<div class="section-header">
+			<h3 class="heading">Stashes</h3>
+
+			<button
+				v-if="profile.id === user?.id"
+				class="button"
+				@click="showStashDialog = true"
+			>
+				<Icon icon="folder-plus2" />
+				<span class="button-label">New stash</span>
+			</button>
+		</div>
+
+		<StashDialog
+			v-if="showStashDialog"
+			@created="showStashDialog = false; reloadStashes();"
+			@close="showStashDialog = false"
+		/>
+
+		<ul class="stashes nolist">
+			<li
+				v-for="stash in stashes"
+				:key="`stash-${stash.id}`"
+			>
+				<StashTile
+					:stash="stash"
+					:profile="profile"
+					@reload="reloadStashes"
+				/>
+			</li>
+		</ul>
+	</section>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue';
+
+import StashTile from '#/components/stashes/tile.vue';
+import StashDialog from '#/components/stashes/create.vue';
+
+import { get } from '#/src/api.js';
+
+const pageContext = inject('pageContext');
+
+const user = pageContext.user;
+const stashes = ref(pageContext.pageProps.stashes);
+const profile = ref(pageContext.pageProps.profile);
+
+const showStashDialog = ref(false);
+
+async function reloadStashes() {
+	// profile.value = await get(`/users/${profile.value.id}`);
+	stashes.value = await get(`/users/${profile.value.id}/stashes`);
+}
+</script>
+
+<style scoped>
+.stashes {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
+	gap: 1rem;
+	padding: 0 .5rem 1rem .5rem;
+}
+
+@media(--small-30) {
+	.stashes {
+		padding: 0 .5rem 1rem .5rem;
+	}
+}
+</style>