Added stash creation. Added dialog framework.

components/dialog/dialog.vue

@@ -0,0 +1,98 @@
+<template>
+	<Teleport to="body">
+		<div
+			class="dialog-container"
+			@click="emit('close')"
+		>
+			<div
+				class="dialog"
+				@click.stop
+			>
+				<div class="dialog-header">
+					<span class="dialog-title ellipsis">{{ title }}</span>
+
+					<Icon
+						icon="cross2"
+						class="dialog-close"
+						@click="emit('close')"
+					/>
+				</div>
+
+				<slot />
+			</div>
+		</div>
+	</Teleport>
+</template>
+
+<script setup>
+import { onMounted } from 'vue';
+
+defineProps({
+	title: {
+		type: String,
+		default: null,
+	},
+});
+
+const emit = defineEmits(['open', 'close']);
+
+onMounted(() => emit('open'));
+</script>
+
+<style>
+.dialog-body {
+	display: flex;
+	flex-direction: column;
+	border-radius: 0 0 .25rem .25rem;
+	background: var(--background);
+}
+</style>
+
+<style scoped>
+.dialog-container {
+	width: 100%;
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 900;
+	background: var(--shadow-strong-10);
+}
+
+.dialog {
+	border-radius: .25rem;
+	box-shadow: 0 0 3px var(--shadow);
+	overflow: hidden;
+	max-width: 100%;
+	margin: 1rem;
+}
+
+.dialog-header {
+	display: flex;
+	justify-content: space-between;
+	align-items: stretch;
+	background: var(--primary);
+	border-radius: .25rem .25rem 0 0;
+}
+
+.dialog-title {
+	padding: .5rem 1rem;
+	color: var(--text-light);
+	font-size: 1.1rem;
+	font-weight: bold;
+}
+
+.dialog-close {
+	height: auto;
+	padding: 0 .75rem;
+	fill: var(--highlight);
+
+	&:hover {
+		fill: var(--text-light);
+		cursor: pointer;
+	}
+}
+</style>