Add new folder button, and confirm when overwriting

Author: curiousdannii

src/dialog/browser/browser.ts

@@ -15,7 +15,7 @@ import type {AsyncDialog, DialogDirectories, DialogOptions} from '../common/inte
 import {type DownloadOptions, DownloadProvider, type ProgressCallback} from './download.js'
 import type {Provider} from './interface.js'
 import {WebStorageProvider} from './storage.js'
-import DialogUI from './ui/Dialog.svelte'
+import DialogUI from './ui/FileDialog.svelte'
 
 export class BrowserDialog implements AsyncDialog {
     'async' = true as const

src/dialog/browser/common.ts

@@ -65,7 +65,7 @@ export class CachingDirBrowser implements DirBrowser {
         }
     }
 
-    async browse(dir_path: string, _filter?: string[]): Promise<DirEntry[]> {
+    async browse(dir_path: string): Promise<DirEntry[]> {
         if (!dir_path.startsWith('/usr')) {
             throw new Error('Can only browse /usr')
         }

src/dialog/browser/interface.ts

@@ -27,7 +27,7 @@ export interface Provider {
 
 /** Browse a directory; may cache all the files or request each time you change directory */
 export interface DirBrowser {
-    browse(path: string, filter?: string[]): Promise<DirEntry[]>
+    browse(path: string): Promise<DirEntry[]>
 }
 
 export interface DirEntry {

src/dialog/browser/ui/AlertDialog.svelte

@@ -0,0 +1,78 @@
+<script context="module" lang="ts">
+    export const enum AlertMode {
+        ALERT = 0,
+        CONFIRM = 1,
+        PROMPT = 2,
+    }
+</script>
+
+<style>
+    #val_input {
+        box-sizing: border-box;
+        width: 100%;
+    }
+</style>
+
+<script lang="ts">
+    import BaseDialog from './BaseDialog.svelte'
+
+    let base_dialog: BaseDialog
+    let message: string
+    let mode: AlertMode
+    let val_input: HTMLInputElement
+
+    export function open(_mode: AlertMode, title: string, _message: string): Promise<string | boolean> {
+        message = _message
+        mode = _mode
+        const promise = base_dialog.open(title)
+        if (val_input) {
+            val_input.value = ''
+            val_input.focus()
+        }
+        return promise
+    }
+
+    function on_cancel() {
+        base_dialog.resolve(false)
+    }
+
+    function on_create_input(node: HTMLInputElement) {
+        val_input = node
+        val_input.focus()
+        val_input.value = ''
+    }
+
+    function on_input_keydown(ev: KeyboardEvent) {
+        if (ev.code === 'Enter') {
+            on_submit()
+            ev.preventDefault()
+        }
+    }
+
+    function on_submit() {
+        if (mode === AlertMode.PROMPT) {
+            const val = val_input.value.trim()
+            base_dialog.resolve(val || false)
+        }
+        else {
+            base_dialog.resolve(true)
+        }
+    }
+</script>
+
+<BaseDialog bind:this={base_dialog}>
+    <p>{message}</p>
+    <div>
+        {#if mode === AlertMode.PROMPT}
+            <input id="val_input" on:keydown={on_input_keydown} use:on_create_input>
+        {/if}
+    </div>
+    <div class="foot">
+        <div>
+            {#if mode !== AlertMode.ALERT}
+                <button class="close" on:click={on_cancel}>Cancel</button>
+            {/if}
+            <button class="submit" on:click={on_submit}>Ok</button>
+        </div>
+    </div>
+</BaseDialog>

src/dialog/browser/ui/BaseDialog.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    let dialog: HTMLDialogElement
+    export let extra_class = ''
+    export let max_height = '200px'
+    export let max_width = '300px'
+    let promise_resolve: (res: string | boolean) => void
+    let title = ''
+
+    export async function open(_title: string): Promise<string | boolean> {
+        title = _title
+        const promise: Promise<string | boolean> = new Promise((resolve) => promise_resolve = resolve)
+        dialog.showModal()
+        return promise
+    }
+
+    export function resolve(val: string | boolean) {
+        dialog.close()
+        promise_resolve(val)
+    }
+
+    function on_close() {
+        resolve(false)
+    }
+</script>
+
+<style>
+    dialog {
+        box-sizing: border-box;
+        font-family: sans-serif;
+        height: 100%;
+        user-select: none;
+        width: 100%;
+    }
+
+    dialog::backdrop {
+        background: linear-gradient(rgba(64, 64, 64, 25%), rgba(64, 64, 64, 40%));
+    }
+
+    .inner {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        width: 100%;
+    }
+
+    .inner > :global(div) {
+        padding: 5px 0;
+    }
+
+    .head h1 {
+        margin: 0;
+    }
+
+    .head .close {
+        background: none;
+        border: none;
+        padding: 10px;
+        position: absolute;
+        right: 10px;
+        top: 10px;
+    }
+</style>
+
+<dialog bind:this={dialog}
+    class={extra_class}
+    on:close={on_close}
+    style="max-height: {max_height}; max-width: {max_width}"
+>
+    <div class="inner">
+        <div class="head">
+            <h1>{title}</h1>
+            <button class="close" aria-label="Close" on:click={on_close}>✖</button>
+        </div>
+        <slot></slot>
+    </div>
+</dialog>