From 3d94932da6d0828fc02c11e602eec88fdb7a7b38 Mon Sep 17 00:00:00 2001
From: Dannii Willis <curiousdannii@gmail.com>
Date: Mon, 7 Oct 2024 14:38:21 +1000
Subject: [PATCH] Use a controller to work between the dialog and storage, the
 dialog is now much more polished

---
 src/dialog/browser/browser.ts             | 128 ++++++++++++---
 src/dialog/browser/common.ts              |  95 +----------
 src/dialog/browser/download.ts            |  11 +-
 src/dialog/browser/interface.ts           |  10 +-
 src/dialog/browser/storage.ts             |  51 +++---
 src/dialog/browser/ui/AlertDialog.svelte  |  14 +-
 src/dialog/browser/ui/DirTree.svelte      |   9 +-
 src/dialog/browser/ui/FileDialog.svelte   | 185 +++++++++++++++-------
 src/dialog/browser/ui/FileList.svelte     |  60 -------
 src/dialog/browser/ui/FileListItem.svelte |  38 ++++-
 10 files changed, 323 insertions(+), 278 deletions(-)
 delete mode 100644 src/dialog/browser/ui/FileList.svelte

diff --git a/src/dialog/browser/browser.ts b/src/dialog/browser/browser.ts
index b0f4e41..121ab86 100644
--- a/src/dialog/browser/browser.ts
+++ b/src/dialog/browser/browser.ts
@@ -9,17 +9,18 @@ https://github.com/curiousdannii/asyncglk
 
 */
 
+import {saveAs as filesave_saveAs} from 'file-saver'
 import path from 'path-browserify-esm'
 
 import type {DialogDirectories, DialogOptions} from '../common/interface.js'
-import {DownloadProvider} from './download.js'
-import type {BrowserDialog, DownloadOptions, ProgressCallback, Provider} from './interface.js'
+import {DownloadProvider, read_uploaded_file} from './download.js'
+import type {BrowserDialog, DirEntry, DownloadOptions, FilesMetadata, ProgressCallback, Provider} from './interface.js'
 import {WebStorageProvider} from './storage.js'
-import DialogUI from './ui/FileDialog.svelte'
+import FileDialog from './ui/FileDialog.svelte'
 
 export class ProviderBasedBrowserDialog implements BrowserDialog {
     'async' = true as const
-    private dialog: DialogUI | undefined
+    private controller!: DialogController
     private dirs: DialogDirectories = {
         storyfile: '',
         system_cwd: '/',
@@ -43,16 +44,11 @@ export class ProviderBasedBrowserDialog implements BrowserDialog {
             if (next) {
                 provider.next = next
             }
+            // Set up the Svelte UI
+            if (provider.browseable) {
+                this.controller = new DialogController(provider)
+            }
         }
-
-        // Set up the Svelte UI
-        const dir_browser = await this.providers[0].browse()
-        this.dialog = new DialogUI({
-            target: document.body,
-            props: {
-                dir_browser,
-            },
-        })
     }
 
     async download(url: string, progress_callback?: ProgressCallback): Promise<string> {
@@ -65,16 +61,8 @@ export class ProviderBasedBrowserDialog implements BrowserDialog {
         return this.dirs
     }
 
-    async prompt(extension: string, save: boolean): Promise<string | null> {
-        const action = save ? 'Save' : 'Restore'
-        const filter = extension_to_filter(extension)
-        return this.dialog!.prompt({
-            dir_browser: await this.providers[0].browse(),
-            filter,
-            save,
-            submit_label: action,
-            title: `${action} a ${filter?.title}`,
-        })
+    prompt(extension: string, save: boolean): Promise<string | null> {
+        return this.controller.prompt(extension, save)
     }
 
     set_storyfile_dir(path: string): Partial<DialogDirectories> {
@@ -109,7 +97,99 @@ export class ProviderBasedBrowserDialog implements BrowserDialog {
         const parsed_path = path.parse(file_path)
         this.dirs.storyfile = parsed_path.dir
         this.dirs.working = '/usr/' + parsed_path.name.toLowerCase().trim()
-        this.dialog!.update_direntry(this.dirs.working)
+        this.controller.update_working(this.dirs.working)
+    }
+}
+
+/** Controller for FileDialog */
+export class DialogController {
+    private dialog: FileDialog
+    private metadata: FilesMetadata = {}
+    private provider: Provider
+
+    constructor(provider: Provider) {
+        this.dialog = new FileDialog({
+            target: document.body,
+            props: {
+                controller: this,
+            },
+        })
+        this.provider = provider
+    }
+
+    async prompt(extension: string, save: boolean): Promise<string | null> {
+        const action = save ? 'Save' : 'Restore'
+        const filter = extension_to_filter(extension)
+        this.metadata = await this.provider.metadata()
+        return this.dialog.prompt({
+            filter,
+            metadata: this.metadata,
+            save,
+            submit_label: action,
+            title: `${action} a ${filter?.title}`,
+        })
+    }
+
+    async delete(file: DirEntry) {
+        if (file.dir) {
+            const dir_path = file.full_path + '/'
+            for (const path of Object.keys(this.metadata)) {
+                if (path.startsWith(dir_path)) {
+                    delete this.metadata[path]
+                    if (!path.endsWith('.fakefile')) {
+                        await this.provider.delete(path)
+                    }
+                }
+            }
+        }
+        else {
+            await this.provider.delete(file.full_path)
+            delete this.metadata[file.full_path]
+        }
+        await this.update()
+    }
+
+    async download(file: DirEntry) {
+        const data = (await this.provider.read(file.full_path))!
+        filesave_saveAs(new Blob([data]), file.name)
+    }
+
+    new_folder(path: string) {
+        this.metadata[path + '/.fakefile'] = {atime: 0, mtime: 0}
+        this.dialog.$set({
+            cur_dir: path,
+            metadata: this.metadata,
+        })
+    }
+
+    async rename(file: DirEntry, new_file_name: string) {
+        const parsed_path = path.parse(file.full_path)
+        const new_path = parsed_path.dir + '/' + new_file_name
+        await this.provider.rename(file.dir, file.full_path, new_path)
+        await this.update(true)
+    }
+
+    async update(refresh: boolean = false) {
+        if (refresh) {
+            this.metadata = await this.provider.metadata()
+        }
+        this.dialog.$set({metadata: this.metadata})
+    }
+
+    update_working(path: string) {
+        this.dialog.$set({cur_dir: path})
+    }
+
+    async upload(files: Record<string, File>) {
+        const now = Date.now()
+        for (const [path, data] of Object.entries(files)) {
+            await this.provider.write(path, await read_uploaded_file(data))
+            this.metadata[path] = {
+                atime: now,
+                mtime: now,
+            }
+        }
+        await this.update()
     }
 }
 
diff --git a/src/dialog/browser/common.ts b/src/dialog/browser/common.ts
index bf31f82..77b07f9 100644
--- a/src/dialog/browser/common.ts
+++ b/src/dialog/browser/common.ts
@@ -9,16 +9,11 @@ https://github.com/curiousdannii/asyncglk
 
 */
 
-import path from 'path-browserify-esm'
-import {saveAs as filesave_saveAs} from 'file-saver'
-
-import type {DirEntry, FileData, FilesMetadata, Provider} from './interface.js'
+import type {FilesMetadata, Provider} from './interface.js'
 
 export class NullProvider implements Provider {
+    browseable = false
     next: Provider = this
-    async browse(): Promise<DirBrowser> {
-        throw new Error('A NullProvider should not be browsed')
-    }
     async delete(_path: string) {
         return null
     }
@@ -31,90 +26,10 @@ export class NullProvider implements Provider {
     async read(_path: string) {
         return null
     }
+    rename(): Promise<void> {
+        throw new Error('Invalid method')
+    }
     async write(_path: string, _data: Uint8Array) {
         return null
     }
-}
-
-interface NestableDirEntry extends DirEntry {
-    children?: NestableDirEntry[]
-    dir: boolean
-    name: string
-    meta?: FileData
-}
-
-/** A caching directory browser that receives the list of files once and remembers for as long as the dialog is open */
-export class DirBrowser {
-    files!: NestableDirEntry
-    provider: Provider
-
-    constructor(files: FilesMetadata, provider: Provider) {
-        this.provider = provider
-        this.update(files)
-    }
-
-    async add_files(files: Record<string, Uint8Array>) {
-        for (const [path, data] of Object.entries(files)) {
-            await this.provider.write(path, data)
-        }
-        this.update(await this.provider.metadata())
-    }
-
-    browse(dir_path: string): DirEntry[] {
-        if (!dir_path.startsWith('/usr')) {
-            throw new Error('Can only browse /usr')
-        }
-        return this.cd(dir_path).children!
-    }
-
-    private cd(path: string): NestableDirEntry {
-        const dirs = path.substring(1).split('/')
-        dirs.shift()
-        let dir_entry = this.files
-        for (const subdir of dirs) {
-            let new_subdir = dir_entry.children!.find(child => child.name === subdir)!
-            if (!new_subdir) {
-                new_subdir = {
-                    children: [],
-                    dir: true,
-                    full_path: dir_entry.full_path + '/' + subdir,
-                    name: subdir,
-                }
-                dir_entry.children!.push(new_subdir)
-            }
-            dir_entry = new_subdir
-        }
-        return dir_entry
-    }
-
-    async delete(file: DirEntry) {
-        await this.provider.delete(file.full_path)
-        this.update(await this.provider.metadata())
-    }
-
-    async download(file: DirEntry) {
-        const data = (await this.provider.read(file.full_path))!
-        filesave_saveAs(new Blob([data]), file.name)
-    }
-
-    private update(metadata: FilesMetadata) {
-        this.files = {
-            children: [],
-            dir: true,
-            full_path: '/usr',
-            name: 'usr',
-        }
-        for (const [file_path, meta] of Object.entries(metadata)) {
-            if (file_path.startsWith('/usr/')) {
-                const parsed_path = path.parse(file_path)
-                const dir_entry = this.cd(parsed_path.dir)
-                dir_entry.children!.push({
-                    dir: false,
-                    full_path: file_path,
-                    name: parsed_path.base,
-                    meta,
-                })
-            }
-        }
-    }
 }
\ No newline at end of file
diff --git a/src/dialog/browser/download.ts b/src/dialog/browser/download.ts
index 7663d5f..f032b77 100644
--- a/src/dialog/browser/download.ts
+++ b/src/dialog/browser/download.ts
@@ -11,11 +11,12 @@ https://github.com/curiousdannii/asyncglk
 
 // The download provider stores its own files just in a map (maybe to be cached in the future), but if files are written next to them, then they need to be done so in another provider
 
-import {DirBrowser, NullProvider} from './common.js'
+import {NullProvider} from './common.js'
 import type {DownloadOptions, FilesMetadata, ProgressCallback, Provider} from './interface.js'
 import {utf8decoder} from '../../common/misc.js'
 
 export class DownloadProvider implements Provider {
+    browseable = false
     next = new NullProvider()
     private options: DownloadOptions
     private store: Map<string, Uint8Array> = new Map()
@@ -38,10 +39,6 @@ export class DownloadProvider implements Provider {
         return path
     }
 
-    async browse(): Promise<DirBrowser> {
-        return this.next.browse()
-    }
-
     async delete(path: string): Promise<void | null> {
         if (this.store.has(path)) {
             this.store.delete(path)
@@ -74,6 +71,10 @@ export class DownloadProvider implements Provider {
         // TODO: try downloading a sibling file
     }
 
+    rename(): Promise<void> {
+        throw new Error('Invalid method')
+    }
+
     async write(path: string, data: Uint8Array): Promise<void | null> {
         return this.next.write(path, data)
     }
diff --git a/src/dialog/browser/interface.ts b/src/dialog/browser/interface.ts
index da68333..43a2e18 100644
--- a/src/dialog/browser/interface.ts
+++ b/src/dialog/browser/interface.ts
@@ -11,8 +11,6 @@ https://github.com/curiousdannii/asyncglk
 
 import type {AsyncDialog} from '../common/interface.js'
 
-import {DirBrowser} from './common.js'
-
 export type ProgressCallback = (bytes: number) => void
 
 export interface BrowserDialog extends AsyncDialog {
@@ -31,10 +29,10 @@ export interface DownloadOptions {
 
 /** A provider handles part of the filesystem, and can cascade down to another provider for files it doesn't handle */
 export interface Provider {
+    /** Whether we can browse this provider */
+    browseable: boolean
     /** A link to the next provider */
     next: Provider
-    /** Get a `DirBrowser` instance for browsing */
-    browse(): Promise<DirBrowser>
     /** Delete a file */
     delete(path: string): Promise<void | null>
     /** Check if a file exists */
@@ -43,6 +41,8 @@ export interface Provider {
     metadata(): Promise<FilesMetadata>
     /** Read a file */
     read(path: string): Promise<Uint8Array | null>
+    /** Rename a file or folder */
+    rename(dir: boolean, path: string, new_name: string): Promise<void>
     /** Write a file */
     write(path: string, data: Uint8Array): Promise<void | null>
 }
@@ -50,8 +50,8 @@ export interface Provider {
 export interface DirEntry {
     dir: boolean
     full_path: string
-    name: string
     meta?: FileData
+    name: string
 }
 
 export type FilesMetadata = Record<string, FileData>
diff --git a/src/dialog/browser/storage.ts b/src/dialog/browser/storage.ts
index 5ac4159..65fef50 100644
--- a/src/dialog/browser/storage.ts
+++ b/src/dialog/browser/storage.ts
@@ -11,7 +11,7 @@ https://github.com/curiousdannii/asyncglk
 
 import {decode as base32768_decode, encode as base32768_encode} from 'base32768'
 
-import {DirBrowser, NullProvider} from './common.js'
+import {NullProvider} from './common.js'
 import type {FilesMetadata, Provider} from './interface.js'
 
 //type WebStorageFileMetadata = Pick<FileData, 'atime' | 'mtime'>
@@ -22,11 +22,12 @@ const STORAGE_VERSION_KEY = 'dialog_storage_version'
 const enum MetadataUpdateOperation {
     DELETE = 1,
     READ = 2,
-    WRITE = 3,
+    RENAME = 3,
+    WRITE = 4,
 }
 
 export class WebStorageProvider implements Provider {
-    private browseable: boolean
+    browseable: boolean
     next = new NullProvider()
     private prefix: string
     private store: Storage
@@ -41,20 +42,10 @@ export class WebStorageProvider implements Provider {
         }
     }
 
-    async browse(): Promise<DirBrowser> {
-        if (this.browseable) {
-            const metadata = this.metadata()
-            return new DirBrowser(metadata, this)
-        }
-        else {
-            return this.next.browse()
-        }
-    }
-
     async delete(path: string): Promise<void | null> {
         if (path.startsWith(this.prefix)) {
             this.store.removeItem(path)
-            this.update_metadata(path, MetadataUpdateOperation.DELETE)
+            await this.update_metadata(path, MetadataUpdateOperation.DELETE)
         }
         else {
             return this.next.delete(path)
@@ -70,7 +61,7 @@ export class WebStorageProvider implements Provider {
         }
     }
 
-    metadata() {
+    async metadata(): Promise<FilesMetadata> {
         return JSON.parse(this.store.getItem(METADATA_KEY) || '{}')
     }
 
@@ -78,7 +69,7 @@ export class WebStorageProvider implements Provider {
         if (path.startsWith(this.prefix)) {
             const res = this.store.getItem(path)
             if (res !== null) {
-                this.update_metadata(path, MetadataUpdateOperation.READ)
+                await this.update_metadata(path, MetadataUpdateOperation.READ)
                 return base32768_decode(res)
             }
             return null
@@ -88,11 +79,29 @@ export class WebStorageProvider implements Provider {
         }
     }
 
+    async rename(dir: boolean, old_path: string, new_path: string): Promise<void> {
+        if (dir) {
+            const metadata = await this.metadata()
+            for (const path of Object.keys(metadata)) {
+                if (path.startsWith(old_path)) {
+                    const new_file_path = path.replace(old_path, new_path)
+                    await this.rename(false, path, new_file_path)
+                }
+            }
+        }
+        else {
+            const data = await this.read(old_path)
+            await this.write(new_path, data!)
+            await this.update_metadata(new_path, MetadataUpdateOperation.RENAME, old_path)
+            await this.delete(old_path)
+        }
+    }
+
     async write(path: string, data: Uint8Array): Promise<void | null> {
         if (path.startsWith(this.prefix)) {
             // TODO: detect out of space
             this.store.setItem(path, base32768_encode(data))
-            this.update_metadata(path, MetadataUpdateOperation.WRITE)
+            await this.update_metadata(path, MetadataUpdateOperation.WRITE)
             return null
         }
         else {
@@ -100,9 +109,9 @@ export class WebStorageProvider implements Provider {
         }
     }
 
-    private update_metadata(path: string, op: MetadataUpdateOperation) {
+    private async update_metadata(path: string, op: MetadataUpdateOperation, old_path?: string) {
         const now = Date.now()
-        const metadata: FilesMetadata = this.metadata()
+        const metadata: FilesMetadata = await this.metadata()
         switch (op) {
             case MetadataUpdateOperation.DELETE:
                 delete metadata[path]
@@ -110,6 +119,10 @@ export class WebStorageProvider implements Provider {
             case MetadataUpdateOperation.READ:
                 metadata[path].atime = now
                 break
+            case MetadataUpdateOperation.RENAME:
+                metadata[path] = metadata[old_path!]
+                delete metadata[old_path!]
+                break
             case MetadataUpdateOperation.WRITE:
                 if (!metadata[path]) {
                     metadata[path] = {
diff --git a/src/dialog/browser/ui/AlertDialog.svelte b/src/dialog/browser/ui/AlertDialog.svelte
index 3654e07..8020433 100644
--- a/src/dialog/browser/ui/AlertDialog.svelte
+++ b/src/dialog/browser/ui/AlertDialog.svelte
@@ -9,16 +9,16 @@
     import BaseDialog from './BaseDialog.svelte'
 
     let base_dialog: BaseDialog
-    let message: string
-    let mode: AlertMode
+    export let initial: string | undefined
+    export let message: string
+    export let mode: AlertMode
+    export let title: string
     let val_input: HTMLTextAreaElement
 
-    export function open(_mode: AlertMode, title: string, _message: string): Promise<string | boolean> {
-        message = _message
-        mode = _mode
+    export function open(): Promise<string | boolean> {
         const promise = base_dialog.open(title)
         if (val_input) {
-            val_input.value = ''
+            val_input.value = initial || ''
             val_input.focus()
         }
         return promise
@@ -31,7 +31,7 @@
     function on_create_input(node: HTMLTextAreaElement) {
         val_input = node
         val_input.focus()
-        val_input.value = ''
+        val_input.value = initial || ''
     }
 
     function on_input_keydown(ev: KeyboardEvent) {
diff --git a/src/dialog/browser/ui/DirTree.svelte b/src/dialog/browser/ui/DirTree.svelte
index cfbe631..e31322f 100644
--- a/src/dialog/browser/ui/DirTree.svelte
+++ b/src/dialog/browser/ui/DirTree.svelte
@@ -1,13 +1,12 @@
 <script lang="ts">
-    import {createEventDispatcher} from 'svelte'
+    export let cur_dir: string
+    let dir_tree: string[]
 
-    const dispatch = createEventDispatcher()
-
-    export let dir_tree: string[]
+    $: dir_tree = cur_dir.substring(1).split('/')
 
     const on_click = (ev: MouseEvent) => {
         const target = ev.target as HTMLButtonElement
-        dispatch('change_dir', target.dataset.path)
+        cur_dir = target.dataset.path!
     }
 </script>
 
diff --git a/src/dialog/browser/ui/FileDialog.svelte b/src/dialog/browser/ui/FileDialog.svelte
index 9287e8c..8110d55 100644
--- a/src/dialog/browser/ui/FileDialog.svelte
+++ b/src/dialog/browser/ui/FileDialog.svelte
@@ -1,11 +1,10 @@
 <script context="module" lang="ts">
     import type {Filter} from '../browser.js'
-    import type {DirBrowser} from '../common.js'
-    import type {DirEntry} from '../interface.js'
+    import type {DirEntry, FilesMetadata} from '../interface.js'
 
     export interface PromptOptions {
-        dir_browser: DirBrowser
         filter?: Filter
+        metadata: FilesMetadata
         save: boolean
         submit_label: string,
         title: string
@@ -13,36 +12,39 @@
 </script>
 
 <script lang="ts">
-    import {read_uploaded_file} from '../download.js'
+    import path from 'path-browserify-esm'
 
-    import AlertDialog, {ALERT_MODE_CONFIRM, ALERT_MODE_PROMPT} from './AlertDialog.svelte'
+    import {DialogController} from '../browser.js'
+
+    import AlertDialog, {type AlertMode, ALERT_MODE_CONFIRM, ALERT_MODE_PROMPT} from './AlertDialog.svelte'
     import BaseDialog from './BaseDialog.svelte'
     import DirTree from './DirTree.svelte'
-    import FileList from './FileList.svelte'
+    import FileListItem from './FileListItem.svelte'
 
-    let upload_files: HTMLInputElement
-    let alert_dialog: AlertDialog
     let base_dialog: BaseDialog
-    let cur_dir: string
+    export let controller: DialogController
+    export let cur_dir: string = '/usr'
     let cur_direntry: DirEntry[] = []
     let cur_filter: string = ''
-    export let dir_browser: DirBrowser
-    let dir_tree: string[] = ['usr']
-    let file_list: FileList
     let filename_input: HTMLTextAreaElement
     let filter: Filter | undefined
+    export let metadata: FilesMetadata = {}
     let saving: boolean
-    let selected_filename: string | undefined
+    let selected_file: DirEntry | undefined
     let submit_label = ''
+    let upload_files: HTMLInputElement
+
+    $: selected_file = (cur_dir, undefined)
+    $: cur_direntry = filter_files(cur_dir, cur_filter, metadata)
 
     $: {
-        if (saving && filename_input && selected_filename) {
-            filename_input.value = selected_filename
+        if (saving && filename_input && selected_file && !selected_file.dir) {
+            filename_input.value = selected_file.name
         }
     }
 
     export function prompt(opts: PromptOptions): Promise<string | null> {
-        dir_browser = opts.dir_browser
+        metadata = opts.metadata
         if (opts.filter?.extensions.join() !== filter?.extensions.join()) {
             if (cur_filter !== '*') {
                 cur_filter = opts.filter?.extensions.join() ?? '*'
@@ -54,9 +56,8 @@
         }
         saving = opts.save
         submit_label = opts.submit_label
-        update_direntry(cur_dir)
+        selected_file = undefined
         const promise = base_dialog.open(opts.title)
-        file_list.clear()
         if (saving && filename_input) {
             filename_input.focus()
             filename_input.value = ''
@@ -66,22 +67,77 @@
         })
     }
 
-    export function update_direntry(path: string) {
-        file_list.clear()
-        cur_dir = path
-        cur_direntry = (dir_browser.browse(path)).sort((a, b) => {
+    // Filter the metadata down to the current directory
+    function filter_files(cur_dir: string, filter: string, metadata: FilesMetadata): DirEntry[] {
+        const files: Record<string, DirEntry> = {}
+        const working = cur_dir + '/'
+        const working_length = working.length
+        for (const [full_path, meta] of Object.entries(metadata)) {
+            if (full_path.startsWith(working)) {
+                const subset_file_path = full_path.substring(working_length)
+                const parsed_path = path.parse(subset_file_path)
+                if (parsed_path.dir) {
+                    if (!parsed_path.dir.includes('/') && !files[parsed_path.dir]) {
+                        files[parsed_path.dir] = {
+                            dir: true,
+                            full_path: working + parsed_path.dir,
+                            name: parsed_path.dir,
+                        }
+                    }
+                }
+                else {
+                    files[parsed_path.base] = {
+                        dir: false,
+                        full_path,
+                        meta,
+                        name: parsed_path.base,
+                    }
+                }
+            }
+        }
+        const files_list = Object.values(files).filter(file => {
+            if (file.name.endsWith('.fakefile')) {
+                return false
+            }
+            if (file.dir || filter === '*') {
+                return true
+            }
+            const filters = filter.split(',')
+            for (const ext of filters) {
+                if (file.name.endsWith(ext)) {
+                    return true
+                }
+            }
+            return false
+        }).sort((a, b) => {
             if (a.dir !== b.dir) {
                 return +b.dir - +a.dir
             }
             return a.name.localeCompare(b.name)
         })
-        dir_tree = path.substring(1).split('/')
+        return files_list
+    }
+
+    export async function open_alert_dialog(mode: AlertMode, title: string, message: string, initial?: string): Promise<string | boolean> {
+        const dialog = new AlertDialog({
+            target: document.body,
+            props: {
+                initial,
+                message,
+                mode,
+                title,
+            },
+        })
+        const result = await dialog.open()
+        await dialog.$destroy()
+        return result
     }
 
     async function check_overwrite(filename: string) {
+        // TODO: also check with default extension
         for (const entry of cur_direntry) {
-            if (!entry.dir && filename === entry.name) {
-                return !!(await alert_dialog.open(ALERT_MODE_CONFIRM, 'Overwrite file', `Are you sure you want to overwrite ${filename}?`))
+            if (filename === entry.name) {
+                return !!(await open_alert_dialog(ALERT_MODE_CONFIRM, 'Overwrite file', `Are you sure you want to overwrite ${filename}?`))
             }
         }
         return true
@@ -91,11 +147,6 @@
         upload_files.click()
     }
 
-    function on_change_dir(ev: CustomEvent) {
-        const path: string = ev.detail
-        update_direntry(path)
-    }
-
     function on_close() {
         base_dialog.resolve(false)
     }
@@ -107,17 +158,16 @@
     }
 
     async function on_file_delete(ev: CustomEvent) {
-        const file = ev.detail
-        if (await alert_dialog.open(ALERT_MODE_CONFIRM, 'Delete file', `Are you sure you want to delete ${file.name}?`)) {
-            await dir_browser.delete(file)
-            update_direntry(cur_dir)
+        const file: DirEntry = ev.detail
+        if (await open_alert_dialog(ALERT_MODE_CONFIRM, 'Delete file', `Are you sure you want to delete ${file.dir ? 'the folder ' : ''}${file.name}?`)) {
+            controller.delete(file)
         }
     }
 
     function on_file_doubleclicked(ev: CustomEvent) {
         const file: DirEntry = ev.detail
         if (file.dir) {
-            update_direntry(file.full_path)
+            cur_dir = file.full_path
         }
         else {
             filename_input.value = file.name
@@ -126,7 +176,19 @@
     }
 
     function on_file_download(ev: CustomEvent) {
-        dir_browser.download(ev.detail)
+        const file: DirEntry = ev.detail
+        controller.download(file)
+    }
+
+    async function on_file_rename(ev: CustomEvent) {
+        const file: DirEntry = ev.detail
+        const file_type = file.dir ? 'folder' : 'file'
+        const new_file_name = await open_alert_dialog(ALERT_MODE_PROMPT, `Rename ${file_type}`, `Enter new ${file_type} name`, file.name) as string | undefined
+        if (new_file_name) {
+            if (await check_overwrite(new_file_name)) {
+                controller.rename(file, new_file_name)
+            }
+        }
     }
 
     function on_input_keydown(ev: KeyboardEvent) {
@@ -137,9 +199,10 @@
     }
 
     async function on_new_folder() {
-        const new_folder_name = await alert_dialog.open(ALERT_MODE_PROMPT, 'New folder', 'Enter new folder name')
+        const new_folder_name = await open_alert_dialog(ALERT_MODE_PROMPT, 'New folder', 'Enter new folder name')
         if (new_folder_name) {
-            update_direntry(cur_dir + '/' + new_folder_name)
+            const path = cur_dir + '/' + new_folder_name
+            controller.new_folder(path)
         }
     }
 
@@ -151,27 +214,25 @@
             }
         }
         else {
-            base_dialog.resolve(selected_filename ? cur_dir + '/' + selected_filename : false)
+            base_dialog.resolve(selected_file?.full_path ?? false)
         }
     }
 
     async function on_upload_files() {
         if (upload_files.files) {
-            const files: Record<string, Uint8Array> = {}
+            const files: Record<string, File> = {}
             let have_files = false
             for (const file of upload_files.files) {
                 if (await check_overwrite(file.name)) {
-                    files[cur_dir + '/' + file.name] = await read_uploaded_file(file)
+                    files[cur_dir + '/' + file.name] = file
                     have_files = true
                 }
             }
             if (have_files) {
-                await dir_browser.add_files(files)
+                controller.upload(files)
             }
         }
         upload_files.value = ''
-        // Update the current file list
-        update_direntry(cur_dir)
     }
 </script>
 
@@ -187,6 +248,13 @@
         text-align: right;
     }
 
+    #filelist {
+        border: 2px solid var(--asyncglk-ui-border);
+        flex: 1;
+        overflow-y: scroll;
+        padding: 6px;
+    }
+
     .filename {
         display: flex;
     }
@@ -216,21 +284,21 @@
             <button on:click={on_add_file}>Add file</button>
             <button on:click={on_new_folder}>New Folder</button>
         </div>
-        <DirTree
-            dir_tree={dir_tree}
-            on:change_dir={on_change_dir}
-        />
+        <DirTree bind:cur_dir/>
+    </div>
+    <div id="filelist" role="listbox">
+        {#each cur_direntry as file}
+            <FileListItem
+                data={file}
+                bind:selected_file
+                selected={file.full_path === selected_file?.full_path}
+                on:file_delete={on_file_delete}
+                on:file_doubleclicked={on_file_doubleclicked}
+                on:file_download={on_file_download}
+                on:file_rename={on_file_rename}
+            />
+        {/each}
     </div>
-    {#key cur_filter}
-        <FileList bind:this={file_list}
-            bind:selected_filename={selected_filename}
-            files={cur_direntry}
-            filter={cur_filter}
-            on:file_delete={on_file_delete}
-            on:file_doubleclicked={on_file_doubleclicked}
-            on:file_download={on_file_download}
-        />
-    {/key}
     {#if saving}
         <div class="filename">
             <label for="filename_input">File name:</label>
@@ -257,5 +325,4 @@
         </div>
     </div>
     <input bind:this={upload_files} id="add_file" type="file" multiple on:change={on_upload_files}>
-    <AlertDialog bind:this={alert_dialog}></AlertDialog>
 </BaseDialog>
\ No newline at end of file
diff --git a/src/dialog/browser/ui/FileList.svelte b/src/dialog/browser/ui/FileList.svelte
deleted file mode 100644
index 7656d4d..0000000
--- a/src/dialog/browser/ui/FileList.svelte
+++ /dev/null
@@ -1,60 +0,0 @@
-<script lang="ts">
-    import type {DirEntry} from '../interface.js'
-
-    import FileListItem from './FileListItem.svelte'
-
-    const file_elems: FileListItem[] = []
-    export let files: DirEntry[]
-    export let filter: string
-    export let selected_filename: string | undefined
-    let selected_item: DirEntry | undefined
-
-    export function clear() {
-        selected_filename = undefined
-        selected_item = undefined
-    }
-
-    function filter_file(file: DirEntry): boolean {
-        const filters = filter.split(',')
-        if (file.dir || filter === '*') {
-            return true
-        }
-        for (const ext of filters) {
-            if (file.name.endsWith(ext)) {
-                return true
-            }
-        }
-        return false
-    }
-
-    function on_file_selected(ev: CustomEvent) {
-        selected_item = ev.detail
-        if (selected_item && !selected_item.dir) {
-            selected_filename = selected_item.name
-        }
-    }
-</script>
-
-<style>
-    #filelist {
-        border: 2px solid var(--asyncglk-ui-border);
-        flex: 1;
-        overflow-y: scroll;
-        padding: 6px;
-    }
-</style>
-
-<div id="filelist" role="listbox">
-    {#each files as file, i}
-        {#if filter_file(file)}
-            <FileListItem bind:this={file_elems[i]}
-                data={file}
-                selected={file.full_path === selected_item?.full_path}
-                on:file_delete
-                on:file_doubleclicked
-                on:file_download
-                on:file_selected={on_file_selected}
-            />
-        {/if}
-    {/each}
-</div>
\ No newline at end of file
diff --git a/src/dialog/browser/ui/FileListItem.svelte b/src/dialog/browser/ui/FileListItem.svelte
index 33cfc64..668d2c5 100644
--- a/src/dialog/browser/ui/FileListItem.svelte
+++ b/src/dialog/browser/ui/FileListItem.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+    // Icons from Heroicons: https://heroicons.com/outline
+
     import {createEventDispatcher} from 'svelte'
 
     import type {DirEntry} from '../interface.js'
@@ -7,6 +9,7 @@
 
     export let data: DirEntry
     export let selected: boolean
+    export let selected_file: DirEntry | undefined
 
     /*function file_icon(filename: string) {
         if (filename.endsWith('.glksave') || filename.endsWith('.sav')) {
@@ -19,7 +22,7 @@
     }*/
 
     const on_click = () => {
-        dispatch('file_selected', data)
+        selected_file = data
     }
 
     const on_delete = () => {
@@ -54,6 +57,10 @@
             ev.preventDefault()
         }
     }
+
+    const on_rename = () => {
+        dispatch('file_rename', data)
+    }
 </script>
 
 <style>
@@ -64,12 +71,17 @@
 
     div.filelistitem button.flat {
         display: flex;
-        padding: 3px 0;
+        padding: 0;
         width: 100%;
     }
 
+    .icon svg {
+        display: block;
+    }
+
     .name {
         flex: 1;
+        padding: 3px 0 3px 8px;
         text-align: left;
     }
 
@@ -90,7 +102,25 @@
         on:keydown={on_keydown}
         role="option"
     >
-        <!--<div class="icon" aria-hidden="true">{data.dir ? '📁' : file_icon(data.name)}</div>-->
+        <div class="icon" aria-hidden="true">
+            {#if data.dir}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="20px" width="20px" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 0 1 4.5 9.75h15A2.25 2.25 0 0 1 21.75 12v.75m-8.69-6.44-2.12-2.12a1.5 1.5 0 0 0-1.061-.44H4.5A2.25 2.25 0 0 0 2.25 6v12a2.25 2.25 0 0 0 2.25 2.25h15A2.25 2.25 0 0 0 21.75 18V9a2.25 2.25 0 0 0-2.25-2.25h-5.379a1.5 1.5 0 0 1-1.06-.44Z" />
+                </svg>
+            {:else if data.name.endsWith('.glksave') || data.name.endsWith('.sav')}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="20px" width="20px" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.125 2.25h-4.5c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125v-9M10.125 2.25h.375a9 9 0 0 1 9 9v.375M10.125 2.25A3.375 3.375 0 0 1 13.5 5.625v1.5c0 .621.504 1.125 1.125 1.125h1.5a3.375 3.375 0 0 1 3.375 3.375M9 15l2.25 2.25L15 12" />
+                </svg>
+            {:else if data.name.endsWith('.txt')}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="20px" width="20px" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m0 12.75h7.5m-7.5 3H12M10.5 2.25H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+                </svg>
+            {:else}
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" height="20px" width="20px" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Z" />
+                </svg>
+            {/if}
+        </div>
         <div class="name">{data.name}</div>
     </button>
     {#if selected}
@@ -101,7 +131,7 @@
             {#if !data.dir}
                 <button on:click={on_download}>Download</button>
             {/if}
-            <button>Rename</button>
+            <button on:click={on_rename}>Rename</button>
             <button on:click={on_delete}>Delete</button>
         </div>
     {/if}