From 263e328fe84577344e0d7fbcb9dcb40878619069 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 27 Jul 2023 15:36:57 +0100
Subject: [PATCH 1/7] basic db selection

---
 src/lib/elements/forms/inputCheckbox.svelte   | 15 +++++---
 src/lib/helpers/array.ts                      |  8 +++++
 src/lib/helpers/types.ts                      |  8 +++++
 .../project-[project]/databases/table.svelte  | 36 +++++++++++++++++++
 .../project-[project]/databases/test.svelte   |  5 +++
 5 files changed, 67 insertions(+), 5 deletions(-)
 create mode 100644 src/routes/console/project-[project]/databases/test.svelte

diff --git a/src/lib/elements/forms/inputCheckbox.svelte b/src/lib/elements/forms/inputCheckbox.svelte
index b8c601635b..601607e594 100644
--- a/src/lib/elements/forms/inputCheckbox.svelte
+++ b/src/lib/elements/forms/inputCheckbox.svelte
@@ -1,11 +1,12 @@
 <script lang="ts">
     import { FormItem, Helper, Label } from '.';
 
-    export let label: string;
+    export let label: string | undefined = undefined;
     export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = false;
+    export let indeterminate = false;
     export let required = false;
     export let disabled = false;
 
@@ -27,19 +28,23 @@
 </script>
 
 <FormItem>
-    <Label {required} {optionalText} hide={!showLabel} for={id}>
-        {label}
-    </Label>
+    {#if label}
+        <Label {required} {optionalText} hide={!showLabel} for={id}>
+            {label}
+        </Label>
+    {/if}
 
     <div class="input-text-wrapper">
         <input
             {id}
             {disabled}
             {required}
+            {indeterminate}
             type="checkbox"
             bind:this={element}
             bind:checked={value}
-            on:invalid={handleInvalid} />
+            on:invalid={handleInvalid}
+            on:click />
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
diff --git a/src/lib/helpers/array.ts b/src/lib/helpers/array.ts
index a325e33f5c..6690dd1dfc 100644
--- a/src/lib/helpers/array.ts
+++ b/src/lib/helpers/array.ts
@@ -88,3 +88,11 @@ export function excludeArray<T, E extends T>(
 export function includesAll<T>(arr1: T[], arr2: T[]): boolean {
     return arr2.every((elem) => arr1.includes(elem));
 }
+
+export function toggle<T>(arr: T[], elem: T): T[] {
+    if (arr.includes(elem)) {
+        return arr.filter((e) => e !== elem);
+    }
+    arr.push(elem);
+    return arr;
+}
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 344bc6af50..322fc6cb3e 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -4,3 +4,11 @@ export type DeepKeys<T extends Record<string, any>> = {
     [K in keyof T]: T[K] extends Record<string, any> ? `${K}.${DeepKeys<T[K]>}` : K;
 }[keyof T];
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
+
+export function isHTMLElement(el: unknown): el is HTMLElement {
+    return el instanceof HTMLElement;
+}
+
+export function isHTMLInputElement(el: unknown): el is HTMLInputElement {
+    return el instanceof HTMLInputElement;
+}
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index ac63aa1848..911de6182e 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -2,6 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { Id } from '$lib/components';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
     import {
         TableBody,
         TableCell,
@@ -11,16 +12,32 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
+    import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { isHTMLInputElement } from '$lib/helpers/types';
     import type { PageData } from './$types';
     import { columns } from './store';
 
     export let data: PageData;
     const projectId = $page.params.project;
+
+    let selected: string[] = [];
 </script>
 
 <TableScroll>
     <TableHeader>
+        <TableCellHead width={10}>
+            <InputCheckbox
+                id="select-all"
+                indeterminate={selected.length > 0 && selected.length < data.databases.total}
+                value={selected.length === data.databases.total}
+                on:click={(e) => {
+                    if (!isHTMLInputElement(e.target)) return;
+                    selected = e.target.checked
+                        ? data.databases.databases.map((database) => database.$id)
+                        : [];
+                }} />
+        </TableCellHead>
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
@@ -31,6 +48,25 @@
         {#each data.databases.databases as database}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${database.$id}`}>
+                <TableCell>
+                    <InputCheckbox
+                        id="select-{database.$id}"
+                        value={selected.includes(database.$id)}
+                        on:click={(e) => {
+                            // Prevent the link from being followed
+                            e.preventDefault();
+                            const el = e.currentTarget;
+                            if (!isHTMLInputElement(el)) return;
+
+                            selected = toggle(selected, database.$id);
+
+                            // Hack to make sure the checkbox is checked, independent of the
+                            // preventDefault() call above
+                            window.setTimeout(() => {
+                                el.checked = selected.includes(database.$id);
+                            });
+                        }} />
+                </TableCell>
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
diff --git a/src/routes/console/project-[project]/databases/test.svelte b/src/routes/console/project-[project]/databases/test.svelte
new file mode 100644
index 0000000000..b0cf3e6c35
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/test.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+    export let id;
+</script>
+
+<input type="checkbox" {id} on:click />

From 92af191e5a3570dfc69ed87b9c0181108c72eade Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 27 Jul 2023 16:34:25 +0100
Subject: [PATCH 2/7] bulk db deletion

---
 src/lib/components/floatingActionBar.svelte   | 37 ++++++++
 src/lib/components/index.ts                   |  2 +-
 src/lib/helpers/types.ts                      |  2 +
 .../project-[project]/databases/+page.ts      |  5 +-
 .../project-[project]/databases/table.svelte  | 84 ++++++++++++++++++-
 5 files changed, 126 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/components/floatingActionBar.svelte

diff --git a/src/lib/components/floatingActionBar.svelte b/src/lib/components/floatingActionBar.svelte
new file mode 100644
index 0000000000..50ddb0fd8a
--- /dev/null
+++ b/src/lib/components/floatingActionBar.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    import { portal } from '$lib/actions/portal';
+    import { fly } from 'svelte/transition';
+
+    export let show = false;
+</script>
+
+{#if show}
+    <div class="floating-action-bar" transition:fly={{ y: '6rem' }} use:portal>
+        <slot />
+    </div>
+{/if}
+
+<style lang="scss">
+    .floating-action-bar {
+        position: fixed;
+        bottom: 2rem;
+        left: 50%;
+        transform: translateX(-50%);
+        z-index: 100;
+
+        border-radius: 0.5rem;
+        padding: 0.75rem 1rem;
+    }
+
+    :global(.theme-dark) .floating-action-bar {
+        border: 1px solid hsl(var(--color-neutral-200));
+        background: hsl(var(--color-neutral-300));
+        box-shadow: 0px 6px 16px 8px #14141f;
+    }
+
+    :global(.theme-light) .floating-action-bar {
+        border: 1px solid hsl(var(--color-neutral-30));
+        background: hsl(var(--color-neutral-0));
+        box-shadow: 0px 6px 16px 0px rgba(55, 59, 77, 0.14);
+    }
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index a2ba5ea688..3f59e53a14 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -57,5 +57,5 @@ export { default as ClickableListItem } from './clickableListItem.svelte';
 export { default as Id } from './id.svelte';
 export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
-
 export { default as MigrationBox } from './migrationBox.svelte';
+export { default as FloatingActionBar } from './floatingActionBar.svelte';
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 322fc6cb3e..5c5ffec06d 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -1,6 +1,8 @@
 import type { Writable } from 'svelte/store';
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type DeepKeys<T extends Record<string, any>> = {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     [K in keyof T]: T[K] extends Record<string, any> ? `${K}.${DeepKeys<T[K]>}` : K;
 }[keyof T];
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
diff --git a/src/routes/console/project-[project]/databases/+page.ts b/src/routes/console/project-[project]/databases/+page.ts
index 2a9e3446a2..477e86419c 100644
--- a/src/routes/console/project-[project]/databases/+page.ts
+++ b/src/routes/console/project-[project]/databases/+page.ts
@@ -1,10 +1,11 @@
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
-export const load: PageLoad = async ({ url, route }) => {
+export const load: PageLoad = async ({ url, route, depends }) => {
+    depends(Dependencies.DATABASES);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index 911de6182e..76bde33b11 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -1,7 +1,12 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Id, Modal } from '$lib/components';
+    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    import { Dependencies } from '$lib/constants';
+    import Button from '$lib/elements/forms/button.svelte';
     import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
     import {
         TableBody,
@@ -15,6 +20,8 @@
     import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { isHTMLInputElement } from '$lib/helpers/types';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
     import { columns } from './store';
 
@@ -22,6 +29,32 @@
     const projectId = $page.params.project;
 
     let selected: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selected.map((databaseId) => sdk.forProject.databases.delete(databaseId));
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.DatabaseDelete);
+            addNotification({
+                type: 'success',
+                message: `${selected.length} database${selected.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.DATABASES);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DatabaseDelete);
+        } finally {
+            selected = [];
+            showDelete = false;
+        }
+    }
 </script>
 
 <TableScroll>
@@ -92,3 +125,52 @@
         {/each}
     </TableBody>
 </TableScroll>
+
+<FloatingActionBar show={selected.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selected.length}</span>
+            <span>
+                {selected.length > 1 ? 'databases' : 'database'} selected
+            </span>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <svelte:fragment slot="header">Delete Database</svelte:fragment>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selected.length}</b>
+        {selected.length > 1 ? 'databases' : 'database'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .actions {
+        width: 31.25rem;
+
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>

From 382b473ceb43d3d2b9f57cfbd6d8c90397e41cba Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Thu, 27 Jul 2023 17:06:06 +0100
Subject: [PATCH 3/7] collection deletion

---
 src/lib/components/floatingActionBar.svelte   |   2 +-
 src/lib/constants.ts                          |   3 +-
 .../databases/database-[database]/+page.ts    |   5 +-
 .../database-[database]/table.svelte          | 122 +++++++++++++++++-
 4 files changed, 127 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/floatingActionBar.svelte b/src/lib/components/floatingActionBar.svelte
index 50ddb0fd8a..5f25bad40a 100644
--- a/src/lib/components/floatingActionBar.svelte
+++ b/src/lib/components/floatingActionBar.svelte
@@ -6,7 +6,7 @@
 </script>
 
 {#if show}
-    <div class="floating-action-bar" transition:fly={{ y: '6rem' }} use:portal>
+    <div class="floating-action-bar" transition:fly|local={{ y: '6rem' }} use:portal>
         <slot />
     </div>
 {/if}
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index ccdf6c6a09..e2bb2fb6f9 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -34,7 +34,8 @@ export enum Dependencies {
     DOMAINS = 'dependency:domains',
     WEBHOOK = 'dependency:webhook',
     WEBHOOKS = 'dependency:webhooks',
-    MIGRATIONS = 'dependency:migrations'
+    MIGRATIONS = 'dependency:migrations',
+    COLLECTIONS = 'dependency:collections'
 }
 
 export const scopes: {
diff --git a/src/routes/console/project-[project]/databases/database-[database]/+page.ts b/src/routes/console/project-[project]/databases/database-[database]/+page.ts
index 1a2e91a3b1..dff27da836 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/console/project-[project]/databases/database-[database]/+page.ts
@@ -2,9 +2,10 @@ import { Query } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 import { getLimit, getPage, getView, pageToOffset, View } from '$lib/helpers/load';
 import type { PageLoad } from './$types';
-import { CARD_LIMIT } from '$lib/constants';
+import { CARD_LIMIT, Dependencies } from '$lib/constants';
 
-export const load: PageLoad = async ({ params, url, route }) => {
+export const load: PageLoad = async ({ params, url, route, depends }) => {
+    depends(Dependencies.COLLECTIONS);
     const page = getPage(url);
     const limit = getLimit(url, route, CARD_LIMIT);
     const view = getView(url, route, View.Grid);
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index 458baaa62b..f453cd26ef 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -1,7 +1,13 @@
 <script lang="ts">
+    import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Id } from '$lib/components';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Id, Modal } from '$lib/components';
+    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    import { Dependencies } from '$lib/constants';
+    import { Button } from '$lib/elements/forms';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
     import {
         TableBody,
         TableCell,
@@ -11,17 +17,63 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
+    import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
+    import { isHTMLInputElement } from '$lib/helpers/types';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
     import { columns } from './store';
 
     export let data: PageData;
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
+
+    let selected: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selected.map((collectionId) =>
+            sdk.forProject.databases.deleteCollection(databaseId, collectionId)
+        );
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.CollectionDelete);
+            addNotification({
+                type: 'success',
+                message: `${selected.length} collection${selected.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.COLLECTIONS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.CollectionDelete);
+        } finally {
+            selected = [];
+            showDelete = false;
+        }
+    }
 </script>
 
 <TableScroll>
     <TableHeader>
+        <TableCellHead width={10}>
+            <InputCheckbox
+                id="select-all"
+                indeterminate={selected.length > 0 && selected.length < data.collections.total}
+                value={selected.length === data.collections.total}
+                on:click={(e) => {
+                    if (!isHTMLInputElement(e.target)) return;
+                    selected = e.target.checked
+                        ? data.collections.collections.map((database) => database.$id)
+                        : [];
+                }} />
+        </TableCellHead>
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
@@ -32,6 +84,25 @@
         {#each data.collections.collections as collection}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
+                <TableCell>
+                    <InputCheckbox
+                        id="select-{collection.$id}"
+                        value={selected.includes(collection.$id)}
+                        on:click={(e) => {
+                            // Prevent the link from being followed
+                            e.preventDefault();
+                            const el = e.currentTarget;
+                            if (!isHTMLInputElement(el)) return;
+
+                            selected = toggle(selected, collection.$id);
+
+                            // Hack to make sure the checkbox is checked, independent of the
+                            // preventDefault() call above
+                            window.setTimeout(() => {
+                                el.checked = selected.includes(collection.$id);
+                            });
+                        }} />
+                </TableCell>
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
@@ -55,3 +126,52 @@
         {/each}
     </TableBody>
 </TableScroll>
+
+<FloatingActionBar show={selected.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selected.length}</span>
+            <span>
+                {selected.length > 1 ? 'collections' : 'collection'} selected
+            </span>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <svelte:fragment slot="header">Delete Collections</svelte:fragment>
+    <p class="text" data-private>
+        Are you sure you want to delete <b>{selected.length}</b>
+        {selected.length > 1 ? 'collections' : 'collection'}?
+    </p>
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting}>Delete</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .actions {
+        width: 31.25rem;
+
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>

From 8d8d690fe1bd1dac00c6dff53fce8adf18dcc6d9 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 28 Jul 2023 21:35:59 +0100
Subject: [PATCH 4/7] feat: document bulk deletion

---
 src/lib/elements/table/tableScroll.svelte     |   3 +-
 .../collection-[collection]/table.svelte      | 186 +++++++++++++++++-
 2 files changed, 187 insertions(+), 2 deletions(-)

diff --git a/src/lib/elements/table/tableScroll.svelte b/src/lib/elements/table/tableScroll.svelte
index 814fe00e51..7a4017c0a6 100644
--- a/src/lib/elements/table/tableScroll.svelte
+++ b/src/lib/elements/table/tableScroll.svelte
@@ -2,6 +2,7 @@
     import type { Action } from 'svelte/action';
 
     export let isSticky = false;
+    export let noMargin = false;
 
     const hasOverflow: Action<HTMLDivElement, (value: boolean) => void> = (node, callback) => {
         const observer = new ResizeObserver((entries) => {
@@ -22,7 +23,7 @@
     let isOverflowing = false;
 </script>
 
-<div class="table-with-scroll u-margin-block-start-32" data-private>
+<div class="table-with-scroll {noMargin ? '' : 'u-margin-block-start-32'}" data-private>
     <div class="table-wrapper" use:hasOverflow={(v) => (isOverflowing = v)}>
         <table class="table" class:is-sticky-scroll={isSticky && isOverflowing}>
             <slot />
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 727be175c9..0ab5070f99 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
+    import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
     import { tooltip } from '$lib/actions/tooltip';
@@ -8,7 +8,9 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellText,
         TableHeader,
+        TableRow,
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
@@ -19,11 +21,24 @@
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
+    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
+    import { isHTMLInputElement } from '$lib/helpers/types';
+    import { toggle } from '$lib/helpers/array';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Dependencies } from '$lib/constants';
+    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Modal from '$lib/components/modal.svelte';
+    import Alert from '$lib/components/alert.svelte';
+    import InputChoice from '$lib/elements/forms/inputChoice.svelte';
 
     export let data: PageData;
 
     const projectId = $page.params.project;
     const databaseId = $page.params.database;
+    const collectionId = $page.params.collection;
     let showRelationships = false;
     let selectedRelationship: Models.AttributeRelationship = null;
     let relationshipData: [];
@@ -81,10 +96,64 @@
             show: selected?.includes(attribute.key) ?? true
         }))
     );
+
+    let selectedDb: string[] = [];
+    let showDelete = false;
+    let deleting = false;
+
+    async function handleDelete() {
+        showDelete = false;
+
+        const promises = selectedDb.map((documentId) =>
+            sdk.forProject.databases.deleteDocument(databaseId, collectionId, documentId)
+        );
+        try {
+            await Promise.all(promises);
+            trackEvent(Submit.DocumentDelete);
+            addNotification({
+                type: 'success',
+                message: `${selected.length} document${selected.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.DOCUMENTS);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.DocumentDelete);
+        } finally {
+            selected = [];
+            showDelete = false;
+        }
+    }
+
+    enum Deletion {
+        'setNull' = 'Set document ID as NULL in all related documents',
+        'cascade' = 'All related documents will be deleted',
+        'restrict' = 'Document can not be deleted'
+    }
+
+    $: relAttributes = $attributes?.filter((attribute) =>
+        isRelationship(attribute)
+    ) as Models.AttributeRelationship[];
+
+    let checked = false;
 </script>
 
 <TableScroll isSticky>
     <TableHeader>
+        <TableCellHead width={10}>
+            <InputCheckbox
+                id="select-all"
+                indeterminate={selectedDb.length > 0 && selectedDb.length < data.documents.total}
+                value={selectedDb.length === data.documents.total}
+                on:click={(e) => {
+                    if (!isHTMLInputElement(e.target)) return;
+                    selectedDb = e.target.checked
+                        ? data.documents.documents.map((database) => database.$id)
+                        : [];
+                }} />
+        </TableCellHead>
         <TableCellHead width={150} eyebrow={false}>Document ID</TableCellHead>
         {#each $columns.filter((n) => n.show) as column}
             {#if column.show}
@@ -96,6 +165,26 @@
         {#each data.documents.documents as document}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
+                <TableCell>
+                    <InputCheckbox
+                        id="select-{document.$id}"
+                        value={selectedDb.includes(document.$id)}
+                        on:click={(e) => {
+                            // Prevent the link from being followed
+                            e.preventDefault();
+                            const el = e.currentTarget;
+                            if (!isHTMLInputElement(el)) return;
+
+                            selectedDb = toggle(selectedDb, document.$id);
+
+                            // Hack to make sure the checkbox is checked, independent of the
+                            // preventDefault() call above
+                            window.setTimeout(() => {
+                                el.checked = selectedDb.includes(document.$id);
+                            });
+                        }} />
+                </TableCell>
+
                 <TableCell width={150}>
                     <Id value={document.$id}>
                         {document.$id}
@@ -165,3 +254,98 @@
 </TableScroll>
 
 <RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
+
+<FloatingActionBar show={selectedDb.length > 0}>
+    <div class="u-flex u-cross-center u-main-space-between actions">
+        <div class="u-flex u-cross-center u-gap-8">
+            <span class="indicator body-text-2 u-bold">{selectedDb.length}</span>
+            <span>
+                {selected.length > 1 ? 'documents' : 'document'} selected
+            </span>
+        </div>
+
+        <div class="u-flex u-cross-center u-gap-8">
+            <Button text on:click={() => (selected = [])}>Cancel</Button>
+            <Button secondary on:click={() => (showDelete = true)}>Delete selection</Button>
+        </div>
+    </div>
+</FloatingActionBar>
+
+<Modal
+    icon="exclamation"
+    state="warning"
+    bind:show={showDelete}
+    onSubmit={handleDelete}
+    headerDivider={false}
+    closable={!deleting}>
+    <svelte:fragment slot="header">Delete Documents</svelte:fragment>
+
+    <div>
+        <p class="text" data-private>
+            Are you sure you want to delete <b>{selectedDb.length}</b>
+            {selectedDb.length > 1 ? 'documents' : 'document'}?
+        </p>
+
+        {#if relAttributes?.length}
+            <TableScroll noMargin>
+                <TableHeader>
+                    <TableCellHead width={50}>Relation</TableCellHead>
+                    <TableCellHead width={50}>Setting</TableCellHead>
+                    <TableCellHead width={200} />
+                </TableHeader>
+                <TableBody>
+                    {#each relAttributes as attr}
+                        <TableRow>
+                            <TableCell title="relation">
+                                <span class="u-flex u-cross-center u-gap-8">
+                                    {#if attr.twoWay}
+                                        <span class="icon-switch-horizontal" />
+                                    {:else}
+                                        <span class="icon-arrow-sm-right" />
+                                    {/if}
+                                    <span data-private>{attr.key}</span>
+                                </span>
+                            </TableCell>
+                            <TableCellText title="Settings">
+                                {attr.onDelete}
+                            </TableCellText>
+                            <TableCellText title="description">
+                                {Deletion[attr.onDelete]}
+                            </TableCellText>
+                        </TableRow>
+                    {/each}
+                </TableBody>
+            </TableScroll>
+            <div class="u-flex u-flex-vertical u-gap-16">
+                <Alert>To change the selection edit the relationship settings.</Alert>
+
+                <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
+                    Delete document from <span data-private>{$collection.name}</span>
+                </InputChoice>
+            </div>
+        {:else}
+            <p class="u-bold">This action is irreversible.</p>
+        {/if}
+    </div>
+
+    <svelte:fragment slot="footer">
+        <Button text on:click={() => (showDelete = false)} disabled={deleting}>Cancel</Button>
+        <Button secondary submit disabled={deleting || (relAttributes?.length && !checked)}
+            >Delete</Button>
+    </svelte:fragment>
+</Modal>
+
+<style lang="scss">
+    .actions {
+        width: 31.25rem;
+
+        .indicator {
+            border-radius: 0.25rem;
+            background: hsl(var(--color-information-100));
+            color: hsl(var(--color-neutral-0));
+
+            padding: 0rem 0.375rem;
+            display: inline-block;
+        }
+    }
+</style>

From d5e26ca1832f4a06e8609ccf3a781abc0e7bc788 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 7 Aug 2023 18:24:21 +0100
Subject: [PATCH 5/7] fix multiple selection checkbox

---
 .../collection-[collection]/table.svelte      | 41 ++++++++++++-------
 .../project-[project]/databases/test.svelte   |  5 ---
 2 files changed, 26 insertions(+), 20 deletions(-)
 delete mode 100644 src/routes/console/project-[project]/databases/test.svelte

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 0ab5070f99..0af982e7d8 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -88,14 +88,16 @@
 
     $: selected = preferences.getCustomCollectionColumns($page.params.collection);
 
-    $: columns.set(
-        $collection.attributes.map((attribute) => ({
-            id: attribute.key,
-            title: attribute.key,
-            type: attribute.type,
-            show: selected?.includes(attribute.key) ?? true
-        }))
-    );
+    $: {
+        columns.set(
+            $collection.attributes.map((attribute) => ({
+                id: attribute.key,
+                title: attribute.key,
+                type: attribute.type,
+                show: selected?.includes(attribute.key) ?? true
+            }))
+        );
+    }
 
     let selectedDb: string[] = [];
     let showDelete = false;
@@ -112,7 +114,7 @@
             trackEvent(Submit.DocumentDelete);
             addNotification({
                 type: 'success',
-                message: `${selected.length} document${selected.length > 1 ? 's' : ''} deleted`
+                message: `${selectedDb.length} document${selectedDb.length > 1 ? 's' : ''} deleted`
             });
             invalidate(Dependencies.DOCUMENTS);
         } catch (error) {
@@ -122,7 +124,7 @@
             });
             trackError(error, Submit.DocumentDelete);
         } finally {
-            selected = [];
+            selectedDb = [];
             showDelete = false;
         }
     }
@@ -138,6 +140,9 @@
     ) as Models.AttributeRelationship[];
 
     let checked = false;
+
+    $: someSelectedDb = data.documents.documents.some((doc) => selectedDb.includes(doc.$id));
+    $: allSelectedDb = data.documents.documents.every((doc) => selectedDb.includes(doc.$id));
 </script>
 
 <TableScroll isSticky>
@@ -145,13 +150,19 @@
         <TableCellHead width={10}>
             <InputCheckbox
                 id="select-all"
-                indeterminate={selectedDb.length > 0 && selectedDb.length < data.documents.total}
-                value={selectedDb.length === data.documents.total}
+                indeterminate={someSelectedDb && !allSelectedDb}
+                value={allSelectedDb}
                 on:click={(e) => {
                     if (!isHTMLInputElement(e.target)) return;
-                    selectedDb = e.target.checked
-                        ? data.documents.documents.map((database) => database.$id)
-                        : [];
+                    if (e.target.checked) {
+                        const set = new Set(selectedDb);
+                        data.documents.documents.forEach((doc) => set.add(doc.$id));
+                        selectedDb = Array.from(set);
+                    } else {
+                        selectedDb = selectedDb.filter((id) => {
+                            return !data.documents.documents.map((doc) => doc.$id).includes(id);
+                        });
+                    }
                 }} />
         </TableCellHead>
         <TableCellHead width={150} eyebrow={false}>Document ID</TableCellHead>
diff --git a/src/routes/console/project-[project]/databases/test.svelte b/src/routes/console/project-[project]/databases/test.svelte
deleted file mode 100644
index b0cf3e6c35..0000000000
--- a/src/routes/console/project-[project]/databases/test.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script lang="ts">
-    export let id;
-</script>
-
-<input type="checkbox" {id} on:click />

From c8b60487d74003fd273ef03164ed4e2543267fd7 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 7 Aug 2023 18:42:34 +0100
Subject: [PATCH 6/7] tableCellHeadCheck cmp

---
 src/lib/elements/table/cellHeadCheck.svelte   | 33 +++++++++++++++++++
 src/lib/elements/table/index.ts               |  1 +
 .../collection-[collection]/table.svelte      | 25 +++-----------
 .../database-[database]/table.svelte          | 16 +++------
 .../project-[project]/databases/table.svelte  | 16 +++------
 5 files changed, 46 insertions(+), 45 deletions(-)
 create mode 100644 src/lib/elements/table/cellHeadCheck.svelte

diff --git a/src/lib/elements/table/cellHeadCheck.svelte b/src/lib/elements/table/cellHeadCheck.svelte
new file mode 100644
index 0000000000..9ef8a22d70
--- /dev/null
+++ b/src/lib/elements/table/cellHeadCheck.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+    import { isHTMLInputElement } from '$lib/helpers/types';
+
+    import { TableCellHead } from '.';
+    import { InputCheckbox } from '../forms';
+
+    export let selected: string[] = [];
+    export let pageItemsIds: string[] = [];
+
+    function handleClick(e: MouseEvent) {
+        if (!isHTMLInputElement(e.target)) return;
+        if (e.target.checked) {
+            const set = new Set(selected);
+            pageItemsIds.forEach((id) => set.add(id));
+            selected = Array.from(set);
+        } else {
+            selected = selected.filter((id) => {
+                return !pageItemsIds.includes(id);
+            });
+        }
+    }
+
+    $: someSelected = pageItemsIds.some((id) => selected.includes(id));
+    $: allSelected = pageItemsIds.every((id) => selected.includes(id));
+</script>
+
+<TableCellHead width={10}>
+    <InputCheckbox
+        id="select-all"
+        indeterminate={someSelected && !allSelected}
+        value={allSelected}
+        on:click={handleClick} />
+</TableCellHead>
diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index c702ca6450..90c7b65e24 100644
--- a/src/lib/elements/table/index.ts
+++ b/src/lib/elements/table/index.ts
@@ -9,6 +9,7 @@ export { default as TableRowLink } from './rowLink.svelte';
 export { default as TableRowButton } from './rowButton.svelte';
 export { default as TableCell } from './cell.svelte';
 export { default as TableCellHead } from './cellHead.svelte';
+export { default as TableCellHeadCheck } from './cellHeadCheck.svelte';
 export { default as TableCellLink } from './cellLink.svelte';
 export { default as TableCellAvatar } from './cellAvatar.svelte';
 export { default as TableCellText } from './cellText.svelte';
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 0af982e7d8..38dcee9af7 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -8,6 +8,7 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRow,
@@ -140,31 +141,13 @@
     ) as Models.AttributeRelationship[];
 
     let checked = false;
-
-    $: someSelectedDb = data.documents.documents.some((doc) => selectedDb.includes(doc.$id));
-    $: allSelectedDb = data.documents.documents.every((doc) => selectedDb.includes(doc.$id));
 </script>
 
 <TableScroll isSticky>
     <TableHeader>
-        <TableCellHead width={10}>
-            <InputCheckbox
-                id="select-all"
-                indeterminate={someSelectedDb && !allSelectedDb}
-                value={allSelectedDb}
-                on:click={(e) => {
-                    if (!isHTMLInputElement(e.target)) return;
-                    if (e.target.checked) {
-                        const set = new Set(selectedDb);
-                        data.documents.documents.forEach((doc) => set.add(doc.$id));
-                        selectedDb = Array.from(set);
-                    } else {
-                        selectedDb = selectedDb.filter((id) => {
-                            return !data.documents.documents.map((doc) => doc.$id).includes(id);
-                        });
-                    }
-                }} />
-        </TableCellHead>
+        <TableCellHeadCheck
+            bind:selected={selectedDb}
+            pageItemsIds={data.documents.documents.map((d) => d.$id)} />
         <TableCellHead width={150} eyebrow={false}>Document ID</TableCellHead>
         {#each $columns.filter((n) => n.show) as column}
             {#if column.show}
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index f453cd26ef..e045bdbcb5 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -12,6 +12,7 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
@@ -62,18 +63,9 @@
 
 <TableScroll>
     <TableHeader>
-        <TableCellHead width={10}>
-            <InputCheckbox
-                id="select-all"
-                indeterminate={selected.length > 0 && selected.length < data.collections.total}
-                value={selected.length === data.collections.total}
-                on:click={(e) => {
-                    if (!isHTMLInputElement(e.target)) return;
-                    selected = e.target.checked
-                        ? data.collections.collections.map((database) => database.$id)
-                        : [];
-                }} />
-        </TableCellHead>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.collections.collections.map((c) => c.$id)} />
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index 76bde33b11..7b636eb689 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -12,6 +12,7 @@
         TableBody,
         TableCell,
         TableCellHead,
+        TableCellHeadCheck,
         TableCellText,
         TableHeader,
         TableRowLink,
@@ -59,18 +60,9 @@
 
 <TableScroll>
     <TableHeader>
-        <TableCellHead width={10}>
-            <InputCheckbox
-                id="select-all"
-                indeterminate={selected.length > 0 && selected.length < data.databases.total}
-                value={selected.length === data.databases.total}
-                on:click={(e) => {
-                    if (!isHTMLInputElement(e.target)) return;
-                    selected = e.target.checked
-                        ? data.databases.databases.map((database) => database.$id)
-                        : [];
-                }} />
-        </TableCellHead>
+        <TableCellHeadCheck
+            bind:selected
+            pageItemsIds={data.databases.databases.map((c) => c.$id)} />
         {#each $columns as column}
             {#if column.show}
                 <TableCellHead width={column.width}>{column.title}</TableCellHead>

From 87a4ef3758f4454b3403d4b82f19e6f6957daf0e Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Tue, 8 Aug 2023 13:25:18 +0100
Subject: [PATCH 7/7] refactor: pr changes

---
 src/lib/elements/table/cellCheck.svelte       | 29 ++++++++++++++
 src/lib/elements/table/index.ts               |  1 +
 .../collection-[collection]/table.svelte      | 40 ++++---------------
 .../database-[database]/table.svelte          | 24 +----------
 .../project-[project]/databases/table.svelte  | 28 ++-----------
 5 files changed, 44 insertions(+), 78 deletions(-)
 create mode 100644 src/lib/elements/table/cellCheck.svelte

diff --git a/src/lib/elements/table/cellCheck.svelte b/src/lib/elements/table/cellCheck.svelte
new file mode 100644
index 0000000000..3c55aa395e
--- /dev/null
+++ b/src/lib/elements/table/cellCheck.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { toggle } from '$lib/helpers/array';
+    import { isHTMLInputElement } from '$lib/helpers/types';
+    import { TableCell } from '.';
+    import { InputCheckbox } from '../forms';
+
+    export let id: string;
+    export let selectedIds: string[] = [];
+</script>
+
+<TableCell>
+    <InputCheckbox
+        id="select-{id}"
+        value={selectedIds.includes(id)}
+        on:click={(e) => {
+            // Prevent the link from being followed
+            e.preventDefault();
+            const el = e.currentTarget;
+            if (!isHTMLInputElement(el)) return;
+
+            selectedIds = toggle(selectedIds, id);
+
+            // Hack to make sure the checkbox is checked, independent of the
+            // preventDefault() call above
+            window.setTimeout(() => {
+                el.checked = selectedIds.includes(id);
+            });
+        }} />
+</TableCell>
diff --git a/src/lib/elements/table/index.ts b/src/lib/elements/table/index.ts
index 90c7b65e24..ca4752e8af 100644
--- a/src/lib/elements/table/index.ts
+++ b/src/lib/elements/table/index.ts
@@ -13,3 +13,4 @@ export { default as TableCellHeadCheck } from './cellHeadCheck.svelte';
 export { default as TableCellLink } from './cellLink.svelte';
 export { default as TableCellAvatar } from './cellAvatar.svelte';
 export { default as TableCellText } from './cellText.svelte';
+export { default as TableCellCheck } from './cellCheck.svelte';
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
index 38dcee9af7..953a3d3924 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/table.svelte
@@ -2,11 +2,15 @@
     import { goto, invalidate } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { tooltip } from '$lib/actions/tooltip';
-    import { Id } from '$lib/components';
+    import { Alert, FloatingActionBar, Id, Modal } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, InputChoice } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
+        TableCellCheck,
         TableCellHead,
         TableCellHeadCheck,
         TableCellText,
@@ -15,25 +19,15 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
+    import { addNotification } from '$lib/stores/notifications';
     import { preferences } from '$lib/stores/preferences';
+    import { sdk } from '$lib/stores/sdk';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import type { PageData } from './$types';
     import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import { attributes, collection, columns } from './store';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
-    import { isHTMLInputElement } from '$lib/helpers/types';
-    import { toggle } from '$lib/helpers/array';
-    import { sdk } from '$lib/stores/sdk';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { Dependencies } from '$lib/constants';
-    import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import Modal from '$lib/components/modal.svelte';
-    import Alert from '$lib/components/alert.svelte';
-    import InputChoice from '$lib/elements/forms/inputChoice.svelte';
 
     export let data: PageData;
 
@@ -159,25 +153,7 @@
         {#each data.documents.documents as document}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
-                <TableCell>
-                    <InputCheckbox
-                        id="select-{document.$id}"
-                        value={selectedDb.includes(document.$id)}
-                        on:click={(e) => {
-                            // Prevent the link from being followed
-                            e.preventDefault();
-                            const el = e.currentTarget;
-                            if (!isHTMLInputElement(el)) return;
-
-                            selectedDb = toggle(selectedDb, document.$id);
-
-                            // Hack to make sure the checkbox is checked, independent of the
-                            // preventDefault() call above
-                            window.setTimeout(() => {
-                                el.checked = selectedDb.includes(document.$id);
-                            });
-                        }} />
-                </TableCell>
+                <TableCellCheck bind:selectedIds={selectedDb} id={document.$id} />
 
                 <TableCell width={150}>
                     <Id value={document.$id}>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/table.svelte b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
index e045bdbcb5..22305fee2b 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/table.svelte
@@ -7,10 +7,10 @@
     import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
     import {
         TableBody,
         TableCell,
+        TableCellCheck,
         TableCellHead,
         TableCellHeadCheck,
         TableCellText,
@@ -18,9 +18,7 @@
         TableRowLink,
         TableScroll
     } from '$lib/elements/table';
-    import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { isHTMLInputElement } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
@@ -76,25 +74,7 @@
         {#each data.collections.collections as collection}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${databaseId}/collection-${collection.$id}`}>
-                <TableCell>
-                    <InputCheckbox
-                        id="select-{collection.$id}"
-                        value={selected.includes(collection.$id)}
-                        on:click={(e) => {
-                            // Prevent the link from being followed
-                            e.preventDefault();
-                            const el = e.currentTarget;
-                            if (!isHTMLInputElement(el)) return;
-
-                            selected = toggle(selected, collection.$id);
-
-                            // Hack to make sure the checkbox is checked, independent of the
-                            // preventDefault() call above
-                            window.setTimeout(() => {
-                                el.checked = selected.includes(collection.$id);
-                            });
-                        }} />
-                </TableCell>
+                <TableCellCheck bind:selectedIds={selected} id={collection.$id} />
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}
diff --git a/src/routes/console/project-[project]/databases/table.svelte b/src/routes/console/project-[project]/databases/table.svelte
index 7b636eb689..0477187a4f 100644
--- a/src/routes/console/project-[project]/databases/table.svelte
+++ b/src/routes/console/project-[project]/databases/table.svelte
@@ -6,8 +6,7 @@
     import { Id, Modal } from '$lib/components';
     import FloatingActionBar from '$lib/components/floatingActionBar.svelte';
     import { Dependencies } from '$lib/constants';
-    import Button from '$lib/elements/forms/button.svelte';
-    import InputCheckbox from '$lib/elements/forms/inputCheckbox.svelte';
+    import { Button } from '$lib/elements/forms';
     import {
         TableBody,
         TableCell,
@@ -16,11 +15,10 @@
         TableCellText,
         TableHeader,
         TableRowLink,
-        TableScroll
+        TableScroll,
+        TableCellCheck
     } from '$lib/elements/table';
-    import { toggle } from '$lib/helpers/array';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { isHTMLInputElement } from '$lib/helpers/types';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import type { PageData } from './$types';
@@ -73,25 +71,7 @@
         {#each data.databases.databases as database}
             <TableRowLink
                 href={`${base}/console/project-${projectId}/databases/database-${database.$id}`}>
-                <TableCell>
-                    <InputCheckbox
-                        id="select-{database.$id}"
-                        value={selected.includes(database.$id)}
-                        on:click={(e) => {
-                            // Prevent the link from being followed
-                            e.preventDefault();
-                            const el = e.currentTarget;
-                            if (!isHTMLInputElement(el)) return;
-
-                            selected = toggle(selected, database.$id);
-
-                            // Hack to make sure the checkbox is checked, independent of the
-                            // preventDefault() call above
-                            window.setTimeout(() => {
-                                el.checked = selected.includes(database.$id);
-                            });
-                        }} />
-                </TableCell>
+                <TableCellCheck bind:selectedIds={selected} id={database.$id} />
                 {#each $columns as column}
                     {#if column.show}
                         {#if column.id === '$id'}