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>