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 {