resolve file deletion navigation issue and improve delete modal

Author: HarshMN2345

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte

@@ -169,7 +169,15 @@
                         </Table.Cell>
                         <Table.Cell column="actions" {root}>
                             <Popover let:toggle placement="bottom-start" padding="none">
-                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                <Button
+                                    text
+                                    icon
+                                    ariaLabel="more options"
+                                    on:click={(e) => {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        toggle();
+                                    }}>
                                     <Icon icon={IconDotsHorizontal} size="s" />
                                 </Button>
                                 <ActionMenu.Root slot="tooltip">
@@ -178,7 +186,9 @@
                                     </ActionMenu.Item.Anchor>
                                     <ActionMenu.Item.Button
                                         leadingIcon={IconTrash}
-                                        on:click={() => {
+                                        on:click={(e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
                                             selectedFile = file;
                                             showDelete = true;
                                         }}>

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/deleteFile.svelte

@@ -6,6 +6,8 @@
     import { createEventDispatcher } from 'svelte';
     import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
+    import { calculateSize } from '$lib/helpers/sizeConvertion';
+    import { Typography, Layout } from '@appwrite.io/pink-svelte';
 
     export let file: Models.File;
     export let showDelete = false;
@@ -32,5 +34,30 @@
 </script>
 
 <Confirm {onSubmit} title="Delete file" bind:open={showDelete} bind:error>
-    Are you sure you want to delete <b>{file.name}</b>?
+    <Layout.Stack gap="l">
+        <Typography.Text variant="m-400">
+            Are you sure you want to delete the following file?
+        </Typography.Text>
+
+        <div
+            class="u-flex u-flex-wrap u-gap-8 u-main-space-between u-cross-center u-padding-16 u-border u-radius">
+            <Layout.Stack gap="xs">
+                <Typography.Text variant="m-600" data-private>{file.name}</Typography.Text>
+                <Layout.Stack direction="row" gap="s" alignItems="center">
+                    <Typography.Text variant="m-400" class="u-color-text-secondary">
+                        {file.mimeType}
+                    </Typography.Text>
+                    <span class="u-color-text-secondary">•</span>
+                    <Typography.Text variant="m-400" class="u-color-text-secondary">
+                        {calculateSize(file.sizeOriginal)}
+                    </Typography.Text>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+
+        <Typography.Text variant="m-400" class="u-color-text-secondary">
+            This action cannot be undone. The file will be permanently deleted from your storage
+            bucket.
+        </Typography.Text>
+    </Layout.Stack>
 </Confirm>