Separated stash create dialog component.

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;