implement a non-working version of the app, with no database and no

messages yet

references/settings-dialog.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import * as Dialog from "$lib/components/ui/dialog/index.js";
+
+  export let open: boolean = false;
+</script>
+
+<Dialog.Root bind:open>
+  <Dialog.Content class="sm:max-w-[425px]">
+    <Dialog.Header>
+      <Dialog.Title>Settings</Dialog.Title>
+      <Dialog.Description>
+        Configure your application settings
+      </Dialog.Description>
+    </Dialog.Header>
+
+    <div class="py-4">
+      <h1 class="text-lg font-medium">hi</h1>
+    </div>
+
+    <Dialog.Footer>
+      <Dialog.Close asChild let:builder>
+        <button use:builder class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-medium py-2 px-4 rounded">
+          Close
+        </button>
+      </Dialog.Close>
+    </Dialog.Footer>
+  </Dialog.Content>
+</Dialog.Root>