🗃️ Improves UI filesystem interface

2025-05-24 19:23:46 +02:00
parent 01e174f337
commit 98262b2efc
9 changed files with 291 additions and 63 deletions
@@ -0,0 +1,44 @@
+<script lang="ts">
+  import { focusTrap } from 'svelte-focus-trap'
+  import { fly } from 'svelte/transition'
+  import { exitBeforeEnter, modals, type ModalProps } from 'svelte-modals'
+  import { Cancel, Check } from '$lib/components/icons'
+
+  let { isOpen, onConfirm }: ModalProps = $props()
+  let fileName = $state('')
+
+  const handleCreate = () => {
+    if (!fileName) return
+    onConfirm(fileName)
+    modals.close()
+  }
+</script>
+
+{#if isOpen}
+  <div
+    role="dialog"
+    class="pointer-events-none fixed inset-0 z-50 flex items-center justify-center"
+    transition:fly={{ y: 50 }}
+    use:exitBeforeEnter
+    use:focusTrap>
+    <div
+      class="rounded-box bg-base-100 pointer-events-auto flex min-w-fit max-w-md flex-col justify-between p-4 shadow-lg">
+      <h2 class="text-base-content text-start text-2xl font-bold">Create New File</h2>
+      <div class="divider my-2"></div>
+      <input
+        type="text"
+        class="input input-bordered w-full"
+        placeholder="File name"
+        bind:value={fileName} />
+      <div class="divider my-2"></div>
+      <div class="flex justify-end gap-2">
+        <button class="btn btn-error inline-flex items-center" onclick={() => modals.close()}>
+          <Cancel class="mr-2 h-5 w-5" /><span>Cancel</span>
+        </button>
+        <button class="btn btn-primary inline-flex items-center" onclick={handleCreate}>
+          <Check class="mr-2 h-5 w-5" /><span>Create</span>
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}