Separated stash create dialog component.

components/stashes/create.vue

@@ -0,0 +1,61 @@
+<template>
+	<Dialog
+		title="New stash"
+		@close="emit('close')"
+		@open="stashNameInput?.focus()"
+	>
+		<form
+			class="dialog-body"
+			@submit.prevent="createStash"
+		>
+			<input
+				ref="stashNameInput"
+				v-model="stashName"
+				maxlength="24"
+				placeholder="Stash name"
+				class="input"
+			>
+
+			<button
+				class="button button-submit"
+			>Create stash</button>
+		</form>
+	</Dialog>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+import { post } from '#/src/api.js';
+
+import Dialog from '#/components/dialog/dialog.vue';
+
+const emit = defineEmits(['created', 'close']);
+
+const stashName = ref(null);
+const stashNameInput = ref(null);
+
+async function createStash() {
+	const newStash = await post('/stashes', {
+		name: stashName.value,
+		public: false,
+	}, {
+		successFeedback: `Created stash '${stashName.value}'`,
+		errorFeedback: `Failed to create stash '${stashName.value}'`,
+		appendErrorMessage: true,
+	});
+
+	emit('created', newStash);
+	stashName.value = null;
+}
+</script>
+
+<style scoped>
+.dialog-body {
+	padding: 1rem;
+
+	.input {
+		margin-bottom: .5rem;
+	}
+}
+</style>

components/stashes/heart.vue

@@ -21,6 +21,7 @@
 					:item-stashes="itemStashes"
 					@stash="(stash) => stashItem(stash)"
 					@unstash="(stash) => unstashItem(stash)"
+					@create="showStashDialog = true"
 				/>
 			</template>
 		</VDropdown>
@@ -74,20 +75,27 @@
 					:item-stashes="itemStashes"
 					@stash="(stash) => stashItem(stash)"
 					@unstash="(stash) => unstashItem(stash)"
+					@create="showStashDialog = true"
 				/>
 			</template>
 		</VDropdown>
+
+		<StashDialog
+			v-if="showStashDialog"
+			@created="showStashDialog = false; reloadStashes();"
+		/>
 	</div>
 </template>
 
 <script setup>
 import { ref, computed, inject } from 'vue';
 
-import { post, del } from '#/src/api.js';
+import { get, post, del } from '#/src/api.js';
 import ellipsis from '#/utils/ellipsis.js';
 
 import Icon from '#/components/icon/icon.vue';
 import StashMenu from '#/components/stashes/menu.vue';
+import StashDialog from '#/components/stashes/create.vue';
 
 const props = defineProps({
 	domain: {
@@ -114,6 +122,7 @@ const hasSecondaryStash = computed(() => itemStashes.value.some((itemStash) => !
 
 const done = ref(true);
 const showStashes = ref(false);
+const showStashDialog = ref(false);
 const feedbackCutoff = 20;
 
 const itemKeys = {
@@ -182,6 +191,12 @@ function toggleShowStashes(state) {
 
 	showStashes.value = !showStashes.value;
 }
+
+async function reloadStashes() {
+	const profile = await get(`/users/${user.id}`);
+
+	console.log(profile);
+}
 </script>
 
 <style scoped>

components/stashes/menu.vue

@@ -12,6 +12,16 @@
 				/>{{ userStash.name }}
 			</label>
 		</li>
+
+		<li class="menu-item create">
+			<label
+				class="menu-stash"
+				@click="emit('create')"
+			>
+				<Icon icon="plus3" />
+				New
+			</label>
+		</li>
 	</ul>
 </template>
 
@@ -29,22 +39,32 @@ defineProps({
 	},
 });
 
-const emit = defineEmits(['stash', 'unstash']);
+const emit = defineEmits(['stash', 'unstash', 'create']);
 </script>
 
 <style scoped>
 .menu-item {
-	display: block;
+	display: flex;
+
+	.icon {
+		fill: var(--shadow-weak-10);
+		padding: 0 .55rem 0 .2rem;
+	}
 }
 
 .menu-stash {
 	display: flex;
+	width: 100%;
 	align-items: center;
 	padding: .5rem;
 
 	&:hover {
 		cursor: pointer;
 		color: var(--primary);
+
+		.icon {
+			fill: var(--primary);
+		}
 	}
 
 	.check-container {

pages/entities/@entitySlug/+Page.vue

@@ -18,7 +18,7 @@
 					>
 
 					<img
-						v-else-if="entity.parent && !entity.independent"
+						v-else-if="entity.parent && !entity.isIndependent"
 						class="logo logo-child"
 						:src="`/logos/${entity.parent.slug}/thumbs/${entity.slug}.png`"
 					>

pages/scene/+Page.vue

@@ -432,6 +432,7 @@ function copySummary() {
 .page {
 	display: flex;
 	justify-content: center;
+	flex-grow: 1;
 	background: var(--background-base-10);
 }
 

pages/users/@username/+Page.vue

@@ -29,29 +29,11 @@
 					</button>
 				</div>
 
-				<Dialog
+				<StashDialog
 					v-if="showStashDialog"
-					title="New stash"
+					@created="showStashDialog = false; reloadProfile();"
 					@close="showStashDialog = false"
-					@open="stashNameInput?.focus()"
+				/>
-				>
-					<form
-						class="dialog-body"
-						@submit.prevent="createStash"
-					>
-						<input
-							ref="stashNameInput"
-							v-model="stashName"
-							maxlength="24"
-							placeholder="Stash name"
-							class="input"
-						>
-
-						<button
-							class="button button-submit"
-						>Create stash</button>
-					</form>
-				</Dialog>
 
 				<ul class="stashes nolist">
 					<li
@@ -233,10 +215,10 @@
 import { ref, inject } from 'vue';
 import { formatDistanceStrict } from 'date-fns';
 
-import { get, post, del } from '#/src/api.js';
+import { get, del } from '#/src/api.js';
 
 import StashTile from '#/components/stashes/tile.vue';
-import Dialog from '#/components/dialog/dialog.vue';
+import StashDialog from '#/components/stashes/create.vue';
 import AlertDialog from '#/components/alerts/create.vue';
 
 const pageContext = inject('pageContext');
@@ -244,9 +226,6 @@ const user = pageContext.user;
 const profile = ref(pageContext.pageProps.profile);
 const alerts = ref(pageContext.pageProps.alerts);
 
-const stashName = ref(null);
-const stashNameInput = ref(null);
-
 const done = ref(true);
 const showStashDialog = ref(false);
 const showAlertDialog = ref(false);
@@ -255,32 +234,6 @@ async function reloadProfile() {
 	profile.value = await get(`/users/${profile.value.id}`);
 }
 
-async function createStash() {
-	if (done.value === false) {
-		return;
-	}
-
-	done.value = false;
-
-	try {
-		await post('/stashes', {
-			name: stashName.value,
-			public: false,
-		}, {
-			successFeedback: `Created stash '${stashName.value}'`,
-			errorFeedback: `Failed to create stash '${stashName.value}'`,
-			appendErrorMessage: true,
-		});
-	} finally {
-		done.value = true;
-	}
-
-	showStashDialog.value = false;
-	stashName.value = null;
-
-	await reloadProfile();
-}
-
 async function reloadAlerts() {
 	alerts.value = await get('/alerts');
 }
@@ -488,14 +441,6 @@ async function removeAlert(alert) {
 	}
 }
 
-.dialog-body {
-	padding: 1rem;
-
-	.input {
-		margin-bottom: .5rem;
-	}
-}
-
 @media(--compact) {
 	.profile-header {
 		border-radius: 0;

src/stashes.js

@@ -146,7 +146,9 @@ export async function createStash(newStash, sessionUser) {
 			.insert(curateStashEntry(newStash, sessionUser))
 			.returning('*');
 
-		return curateStash(stash);
+		const curatedStash = curateStash(stash);
+
+		return curatedStash;
 	} catch (error) {
 		if (error.routine === '_bt_check_unique') {
 			throw new HttpError('Stash name should be unique', 409);

static

@@ -1 +1 @@
-Subproject commit 32b1ad8cfa8c6f3a0bcb42472f51b50273cd8866
+Subproject commit 86446006a785c63e9c7a65431e9563f4a78e7ac5