feat: add message editing

This commit adds message editing as a feature. To accomplish this, the settings
dialog was refactored into a singleton and now the message edit and settings
use the singleton where appropriate.

app/components/Dialog/index.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Textbox from './Textbox.vue';
+import Settings from './Settings.vue';
+
+import { DialogType } from '~/composables/useDialog';
+
+const { open, page, data, close, confirm } = useDialog();
+
+const handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+        close();
+    }
+};
+
+watch(open, (value) => {
+    if (value) {
+        document.body.addEventListener('keydown', handleKeyDown);
+    } else {
+        document.body.removeEventListener('keydown', handleKeyDown);
+    }
+});
+
+onUnmounted(() => {
+    if (open.value) {
+        document.body.removeEventListener('keydown', handleKeyDown);
+    }
+});
+</script>
+
+<template>
+    <Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]" enter-from-class="opacity-0"
+        enter-to-class="opacity-100" leave-from-class="opacity-100" leave-to-class="opacity-0">
+        <div v-if="open" class="fixed inset-0 z-45 bg-black/80 backdrop-blur-md" @click.self="close">
+        </div>
+    </Transition>
+
+    <Transition class="transition-all duration-200 ease-[cubic-bezier(0.5,_1,_0.89,_1)]"
+        enter-from-class="opacity-0 scale-95 translate-y-2" leave-from-class="opacity-100 scale-100 translate-y-0"
+        enter-to-class="opacity-100 scale-100 translate-y-0" leave-to-class="opacity-0 scale-95 -translate-y-2">
+        <div v-if="open" class="z-50 fixed top-1/2 left-1/2 -translate-x-1/2 flex items-center justify-center">
+            <div class="absolute w-[85vw] max-w-6xl h-[70vh] bg-[var(--bg-base)] rounded-2xl shadow-2xl border border-[var(--color-border)]
+        overflow-hidden flex max-h-[90vh]">
+                <KeepAlive>
+                    <Settings v-if="page === DialogType.Settings" />
+
+                    <Textbox v-else-if="page === DialogType.Textbox" v-bind="data" @confirm="confirm" @cancel="close" />
+                </KeepAlive>
+            </div>
+        </div>
+    </Transition>
+</template>