feat: add delete file modal in files list

src/routes/console/[project]/storage/bucket/[bucket]/_deleteFile.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Modal } from '$lib/components';
+    import { Button, Form } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdkForProject } from '$lib/stores/sdk';
+    import type { Models } from 'src/sdk';
+
+    export let file: Models.File;
+    export let showDelete = false;
+
+    const deleteFile = async () => {
+        try {
+            await sdkForProject.storage.deleteFile(file.bucketId, file.$id);
+            showDelete = false;
+            await goto(`${base}/console/${$page.params.project}/storage/bucket/${file.bucketId}`);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+        }
+    };
+</script>
+
+<Form on:submit={deleteFile}>
+    <Modal bind:show={showDelete}>
+        <svelte:fragment slot="header">Delete File</svelte:fragment>
+        <p>Are you sure you want to delete <b>{file.name}</b>?</p>
+        <svelte:fragment slot="footer">
+            <Button text on:click={() => (showDelete = false)}>Cancel</Button>
+            <Button secondary submit>Delete</Button>
+        </svelte:fragment>
+    </Modal>
+</Form>

src/routes/console/[project]/storage/bucket/[bucket]/file/[file]/_deleteFile.svelte

@@ -10,7 +10,7 @@
 
     export let showDelete = false;
 
-    const deleteUser = async () => {
+    const deleteFile = async () => {
         try {
             await sdkForProject.storage.deleteFile($file.response.bucketId, $file.response.$id);
             showDelete = false;
@@ -26,7 +26,7 @@
     };
 </script>
 
-<Form on:submit={deleteUser}>
+<Form on:submit={deleteFile}>
     <Modal bind:show={showDelete}>
         <svelte:fragment slot="header">Delete File</svelte:fragment>
         <p>Are you sure you want to delete <b>{$file.response.name}</b>?</p>

src/routes/console/[project]/storage/bucket/[bucket]/index.svelte

@@ -4,6 +4,7 @@
     import { Button } from '$lib/elements/forms';
     import { Empty, Pagination } from '$lib/components';
     import Create from './_create.svelte';
+    import Delete from './_deleteFile.svelte';
     import {
         Table,
         TableHeader,
@@ -18,9 +19,13 @@
     import { Container } from '$lib/layout';
     import { base } from '$app/paths';
     import { files } from './store';
+    import type { Models } from 'src/sdk';
 
     let search = '';
     let showCreate = false;
+    let showDropdown = false;
+    let showDelete = false;
+    let selectedFile: Models.File = null;
     let offset = 0;
 
     const limit = 5;
@@ -88,7 +93,7 @@
                                 class="button is-only-icon is-text"
                                 aria-label="Delete item"
                                 on:click={() => {
-                                    console.log('test');
+                                    showDropdown = !showDropdown;
                                 }}>
                                 <span class="icon-dots-horizontal" aria-hidden="true" />
                             </button>
@@ -137,3 +142,6 @@
 </Container>
 
 <Create bind:showCreate on:created={fileCreated} />
+{#if selectedFile}
+    <Delete file={selectedFile} bind:showDelete />
+{/if}