change: structure a bit.

src/lib/components/index.ts

@@ -88,3 +88,4 @@ export { default as EstimatedCard } from './estimatedCard.svelte';
 export { default as SortButton, type SortDirection } from './sortButton.svelte';
 export { default as SendVerificationEmailModal } from './account/sendVerificationEmailModal.svelte';
 export { default as MultiSelectionTable } from './multiSelectTable.svelte';
+export * from './multiSelectTable.svelte';

src/lib/components/multiSelectTable.svelte

@@ -1,3 +1,7 @@
+<script lang="ts" module>
+    export type DeleteOperationState = true | string | void;
+</script>
+
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import {
@@ -6,7 +10,7 @@
         Typography,
         FloatingActionBar,
         type TableColumn,
-        type TableRootProps,
+        type TableRootProps
     } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { Confirm } from '$lib/components/index';
@@ -27,12 +31,13 @@
         columns: Array<TableColumn> | number;
         header: Snippet<[root: TableRootProps]>;
         children: Snippet<[root: TableRootProps]>;
-        onDelete?: (selectedRows: string[]) => Promise<void> | void;
+        onDelete?: (selectedRows: string[]) => Promise<DeleteOperationState> | DeleteOperationState;
         onCancel?: () => Promise<void> | void;
     } = $props();
 
-    let disableModal: boolean = $state(false);
     let selectedRows: string[] = $state([]);
+    let disableModal: boolean = $state(false);
+    let onDeleteError: string | null = $state(null);
     let showConfirmDeletion: boolean = $state(false);
 </script>
 
@@ -66,29 +71,45 @@
                     if (confirmDeletion) {
                         showConfirmDeletion = true;
                     } else {
-                        await onDelete?.(selectedRows);
+                        const state = await onDelete?.(selectedRows);
+                        if (typeof state === 'string') {
+                            // user should handle error on their own!
+                        } else {
+                            selectedRows = [];
+                        }
                     }
                 }}>Delete</Button>
         </svelte:fragment>
     </FloatingActionBar>
 {/if}
 
-<Confirm
-    confirmDeletion
-    disabled={disableModal}
-    title="Delete {resource}s"
-    bind:open={showConfirmDeletion}
-    submissionLoader
-    onSubmit={async () => {
-        disableModal = true;
-        await onDelete?.(selectedRows);
-        disableModal = false;
-        showConfirmDeletion = false;
-    }}>
-    <Typography.Text>
-        Are you sure you want to delete <strong>{selectedRows.length}</strong>
-        {selectedRows.length > 1 ? `${resource}s` : resource}.
-    </Typography.Text>
+{#if allowSelection}
+    <Confirm
+        submissionLoader
+        confirmDeletion
+        error={onDeleteError}
+        disabled={disableModal}
+        title="Delete {resource}s"
+        bind:open={showConfirmDeletion}
+        onSubmit={async () => {
+            disableModal = true;
+            onDeleteError = null;
 
-    <Typography.Text variant="m-500">This action is irreversible.</Typography.Text>
-</Confirm>
+            const state = await onDelete?.(selectedRows);
+            if (typeof state === 'string') {
+                disableModal = false;
+                onDeleteError = state || `Failed to delete ${resource}s`;
+            } else {
+                selectedRows = [];
+                disableModal = false;
+                showConfirmDeletion = false;
+            }
+        }}>
+        <Typography.Text>
+            Are you sure you want to delete <strong>{selectedRows.length}</strong>
+            {selectedRows.length > 1 ? `${resource}s` : resource}.
+        </Typography.Text>
+
+        <Typography.Text variant="m-500">This action is irreversible.</Typography.Text>
+    </Confirm>
+{/if}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte

@@ -3,7 +3,7 @@
     import { resolve } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Id, MultiSelectionTable } from '$lib/components';
+    import { Id, MultiSelectionTable, type DeleteOperationState } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
     import { addNotification } from '$lib/stores/notifications';
@@ -17,7 +17,7 @@
 
     let { data }: PageProps = $props();
 
-    async function onDelete(selectedTables: string[]) {
+    async function onDelete(selectedTables: string[]): Promise<DeleteOperationState> {
         const promises = selectedTables.map((tableId) =>
             sdk.forProject(page.params.region, page.params.project).tablesDB.deleteTable({
                 databaseId: page.params.database,
@@ -26,19 +26,19 @@
         );
         try {
             await Promise.all(promises);
+            await invalidate(Dependencies.TABLES);
+            subNavigation.update();
+
             trackEvent(Submit.TableDelete);
             addNotification({
                 type: 'success',
                 message: `${selectedTables.length} table${selectedTables.length > 1 ? 's' : ''} deleted`
             });
-            await invalidate(Dependencies.TABLES);
-            subNavigation.update();
+
+            return true;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
             trackError(error, Submit.TableDelete);
+            return error.message;
         }
     }
 

src/routes/(console)/project-[region]-[project]/sites/site-[site]/logs/table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Id, MultiSelectionTable } from '$lib/components';
+    import { type DeleteOperationState, Id, MultiSelectionTable } from '$lib/components';
     import type { Column } from '$lib/helpers/types';
     import type { Models } from '@appwrite.io/console';
     import { Badge, Table, Typography } from '@appwrite.io/pink-svelte';
@@ -27,29 +27,28 @@
     let selectedLogId = $state<string | null>(null);
     const filteredColumns = $derived(columns.filter((c) => !c.exclude));
 
-    async function deleteLogs(selectedRows: string[]) {
+    async function deleteLogs(selectedRows: string[]): Promise<DeleteOperationState> {
         const promises = selectedRows.map((logId) =>
             sdk.forProject(page.params.region, page.params.project).sites.deleteLog({
                 siteId: page.params.site,
                 logId
             })
         );
+
         try {
             await Promise.all(promises);
-            trackEvent(Submit.LogDelete);
+            await invalidate(Dependencies.EXECUTIONS);
+
             addNotification({
                 type: 'success',
                 message: `${selectedRows.length} log${selectedRows.length > 1 ? 's' : ''} deleted`
             });
+
+            trackEvent(Submit.LogDelete);
+            return true;
         } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
             trackError(error, Submit.LogDelete);
-        } finally {
-            selectedRows = [];
-            invalidate(Dependencies.EXECUTIONS);
+            return error.message;
         }
     }
 </script>