From 8fa07a8394bc54731c62e8f5b225cb5a9afb8bb6 Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Mon, 24 Aug 2026 11:44:43 +0530
Subject: [PATCH 1/2] fix(tables): clear row selection when the visible rows
 change

Selection state in MultiSelectionTable stuck around across pagination
and search, keyed only on row id. Selecting rows, then paginating to a
different page and hitting "select all" would carry the old ids into
the new batch delete, silently deleting rows the user never saw
selected. Reported from Storage and Databases in production.

Reset selection whenever the URL changes, and key the previously
unkeyed row each-blocks (files, users, memberships, platforms,
backups) so Svelte doesn't reuse row elements across renders.
---
 .../components/__tests__/appState.svelte.ts   |  7 +++
 .../__tests__/multiSelectTable.svelte.test.ts | 61 +++++++++++++++++++
 .../__tests__/multiSelectTableHarness.svelte  | 35 +++++++++++
 src/lib/components/multiSelectTable.svelte    | 16 ++++-
 .../auth/+page.svelte                         |  2 +-
 .../auth/user-[user]/memberships/+page.svelte |  2 +-
 .../database-[database]/backups/table.svelte  |  2 +-
 .../overview/platforms/+page.svelte           |  2 +-
 .../storage/bucket-[bucket]/+page.svelte      |  2 +-
 vitest-setup-client.ts                        | 38 ++++++++++++
 10 files changed, 161 insertions(+), 6 deletions(-)
 create mode 100644 src/lib/components/__tests__/appState.svelte.ts
 create mode 100644 src/lib/components/__tests__/multiSelectTable.svelte.test.ts
 create mode 100644 src/lib/components/__tests__/multiSelectTableHarness.svelte

diff --git a/src/lib/components/__tests__/appState.svelte.ts b/src/lib/components/__tests__/appState.svelte.ts
new file mode 100644
index 0000000000..de29f732a5
--- /dev/null
+++ b/src/lib/components/__tests__/appState.svelte.ts
@@ -0,0 +1,7 @@
+const BUCKET_URL = 'http://localhost/console/storage/bucket-a';
+
+export const page = $state({ url: new URL(BUCKET_URL) });
+
+export function navigateTo(href: string) {
+    page.url = new URL(href, BUCKET_URL);
+}
diff --git a/src/lib/components/__tests__/multiSelectTable.svelte.test.ts b/src/lib/components/__tests__/multiSelectTable.svelte.test.ts
new file mode 100644
index 0000000000..1ac69df9ad
--- /dev/null
+++ b/src/lib/components/__tests__/multiSelectTable.svelte.test.ts
@@ -0,0 +1,61 @@
+import '@testing-library/jest-dom/vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+import Harness from './multiSelectTableHarness.svelte';
+import { navigateTo } from './appState.svelte';
+
+vi.mock('$app/state', () => import('./appState.svelte'));
+
+vi.mock('$lib/stores/sdk', () => ({
+    sdk: {
+        forConsole: { account: { getPrefs: () => Promise.resolve({}) } },
+        forProject: () => ({})
+    }
+}));
+
+vi.mock('$lib/actions/analytics', () => ({
+    trackEvent: vi.fn(),
+    trackError: vi.fn(),
+    Click: {},
+    Submit: {}
+}));
+
+const pages = { '1': ['a', 'b', 'c'], '2': ['d', 'e', 'f'] };
+
+async function goToPageTwo() {
+    navigateTo('?page=2');
+    await tick();
+}
+
+describe('MultiSelectionTable', () => {
+    beforeEach(() => navigateTo('?page=1'));
+
+    it('drops the selection when another page of rows is loaded', async () => {
+        const user = userEvent.setup();
+        render(Harness, { props: { pages, onDeleteIds: vi.fn() } });
+
+        const [, firstRow] = screen.getAllByRole('checkbox');
+        await user.click(firstRow);
+        expect(screen.getByText('file selected')).toBeInTheDocument();
+
+        await goToPageTwo();
+
+        expect(screen.queryByText('file selected')).not.toBeInTheDocument();
+    });
+
+    it('selects only the rows on screen after paginating', async () => {
+        const user = userEvent.setup();
+        const onDeleteIds = vi.fn();
+        render(Harness, { props: { pages, onDeleteIds } });
+
+        await goToPageTwo();
+
+        const [selectAll] = screen.getAllByRole('checkbox');
+        await user.click(selectAll);
+        await user.click(screen.getByRole('button', { name: 'Delete' }));
+
+        expect(onDeleteIds).toHaveBeenCalledWith(['d', 'e', 'f']);
+    });
+});
diff --git a/src/lib/components/__tests__/multiSelectTableHarness.svelte b/src/lib/components/__tests__/multiSelectTableHarness.svelte
new file mode 100644
index 0000000000..d8da677b6d
--- /dev/null
+++ b/src/lib/components/__tests__/multiSelectTableHarness.svelte
@@ -0,0 +1,35 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { Table } from '@appwrite.io/pink-svelte';
+    import MultiSelectionTable from '../multiSelectTable.svelte';
+
+    let {
+        pages,
+        onDeleteIds
+    }: { pages: Record<string, string[]>; onDeleteIds: (ids: string[]) => void } = $props();
+
+    // rows follow the url the way a `+page.ts` load function does
+    const rows = $derived(pages[page.url.searchParams.get('page') ?? '1']);
+</script>
+
+<MultiSelectionTable
+    resource="file"
+    confirmDeletion={false}
+    columns={[{ id: 'id' }]}
+    onDelete={(_batchDelete, selectedRows) => {
+        onDeleteIds([...selectedRows]);
+        return { deleted: [] };
+    }}>
+    {#snippet header(root)}
+        <Table.Header.Cell column="id" {root}>Id</Table.Header.Cell>
+    {/snippet}
+
+    {#snippet children(root)}
+        <!-- deliberately unkeyed, the way the console rendered file rows when this bug landed -->
+        {#each rows as id}
+            <Table.Row.Base {root} {id}>
+                <Table.Cell column="id" {root}>{id}</Table.Cell>
+            </Table.Row.Base>
+        {/each}
+    {/snippet}
+</MultiSelectionTable>
diff --git a/src/lib/components/multiSelectTable.svelte b/src/lib/components/multiSelectTable.svelte
index ce0196e342..7b92b5e5de 100644
--- a/src/lib/components/multiSelectTable.svelte
+++ b/src/lib/components/multiSelectTable.svelte
@@ -12,6 +12,7 @@
 
 <script lang="ts">
     import type { Snippet } from 'svelte';
+    import { page } from '$app/state';
     import {
         Table,
         Badge,
@@ -64,6 +65,19 @@
     let onDeleteError: string | null = $state(null);
     let showConfirmDeletion: boolean = $state(false);
 
+    // paginating, searching or switching resource swaps the rows out from under the
+    // selection, and deleting what is no longer on screen is silent data loss
+    const selectionKey = $derived(`${page.url.href}|${computeKey}`);
+
+    let renderedUrl: string | undefined;
+
+    $effect.pre(() => {
+        if (renderedUrl === page.url.href) return;
+
+        renderedUrl = page.url.href;
+        selectedRows = [];
+    });
+
     function notifySuccess(count: number) {
         if (!showSuccessNotification) return;
         if (count === 0) return;
@@ -155,7 +169,7 @@
     }
 </script>
 
-{#key computeKey}
+{#key selectionKey}
     <Table.Root let:root {columns} {allowSelection} bind:selectedRows>
         <svelte:fragment slot="header" let:root>
             {@render header?.(root)}
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
index e32114a8b6..e2ff9ba590 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -106,7 +106,7 @@
             {/snippet}
 
             {#snippet children(root)}
-                {#each data.users.users as user}
+                {#each data.users.users as user (user.$id)}
                     <Table.Row.Link
                         href={`${base}/project-${page.params.region}-${page.params.project}/auth/user-${user.$id}`}
                         {root}
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
index 6f2b293555..6633c262c3 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/memberships/+page.svelte
@@ -71,7 +71,7 @@
             {/snippet}
 
             {#snippet children(root)}
-                {#each data.memberships.memberships as membership}
+                {#each data.memberships.memberships as membership (membership.$id)}
                     <Table.Row.Link
                         {root}
                         href={`${base}/project-${page.params.region}-${page.params.project}/auth/teams/team-${membership.teamId}`}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
index 9170eee9ba..c8157afb04 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/table.svelte
@@ -221,7 +221,7 @@
     {/snippet}
 
     {#snippet children(root)}
-        {#each data.backups.archives as backup, index}
+        {#each data.backups.archives as backup, index (backup.$id)}
             {@const policy = getPolicyDetails(backup.policyId)}
             {@const retainedUntil = new Date(
                 new Date(policy?.$createdAt).getTime() + policy?.retention * 24 * 60 * 60 * 1000
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
index d0798f371a..673bb9329d 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/+page.svelte
@@ -176,7 +176,7 @@
         {/snippet}
 
         {#snippet children(root)}
-            {#each data.platforms.platforms as platform}
+            {#each data.platforms.platforms as platform (platform.$id)}
                 <Table.Row.Link href={getPlatformPath(platform)} {root} id={platform.$id}>
                     <Table.Cell {root}>
                         {platform.name}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
index 7e18d3e1f9..ff4fa14df6 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/+page.svelte
@@ -238,7 +238,7 @@
                 {/snippet}
 
                 {#snippet children(root)}
-                    {#each data.files.files as file}
+                    {#each data.files.files as file (file.$id)}
                         {#if file.chunksTotal / file.chunksUploaded !== 1}
                             <Table.Row.Base {root} id={file.$id}>
                                 <Table.Cell column="filename" {root}>
diff --git a/vitest-setup-client.ts b/vitest-setup-client.ts
index 88edcb4580..e2866666a9 100644
--- a/vitest-setup-client.ts
+++ b/vitest-setup-client.ts
@@ -1,6 +1,33 @@
 import '@testing-library/jest-dom/vitest';
 import { beforeAll, vi } from 'vitest';
 
+// jsdom hands back a bare object for web storage under this runtime, so the
+// console's `localStorage` reads blow up before any component renders
+function createStorage(): Storage {
+    const entries = new Map<string, string>();
+
+    return {
+        get length() {
+            return entries.size;
+        },
+        key: (index: number) => [...entries.keys()][index] ?? null,
+        getItem: (key: string) => entries.get(key) ?? null,
+        setItem: (key: string, value: string) => void entries.set(key, String(value)),
+        removeItem: (key: string) => void entries.delete(key),
+        clear: () => entries.clear()
+    };
+}
+
+for (const name of ['localStorage', 'sessionStorage'] as const) {
+    if (typeof window[name]?.getItem === 'function') continue;
+
+    Object.defineProperty(window, name, {
+        writable: true,
+        configurable: true,
+        value: createStorage()
+    });
+}
+
 // required for svelte5 + jsdom as jsdom does not support matchMedia
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
@@ -15,6 +42,17 @@ Object.defineProperty(window, 'matchMedia', {
     }))
 });
 
+// jsdom ships no ResizeObserver, which pink-svelte's FloatingActionBar constructs on mount
+Object.defineProperty(window, 'ResizeObserver', {
+    writable: true,
+    configurable: true,
+    value: class ResizeObserver {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+    }
+});
+
 beforeAll(() => {
     vi.mock('$app/environment', () => ({
         dev: true,

From 1d24c957a6cc36f250905706b44c73521f1949cf Mon Sep 17 00:00:00 2001
From: harsh mahajan <harshmahajan2345@gmail.com>
Date: Mon, 24 Aug 2026 11:58:43 +0530
Subject: [PATCH 2/2] revert: drop the new component-test scaffolding

This repo has no existing Svelte component test pattern, so covering
the fix meant inventing one from scratch: jsdom localStorage/
ResizeObserver shims plus a harness component, none of which serves
anything else here. Not warranted for a bug fix. The fix itself
(selection reset on URL change + keyed row loops) stands on its own.
---
 .../components/__tests__/appState.svelte.ts   |  7 ---
 .../__tests__/multiSelectTable.svelte.test.ts | 61 -------------------
 .../__tests__/multiSelectTableHarness.svelte  | 35 -----------
 vitest-setup-client.ts                        | 38 ------------
 4 files changed, 141 deletions(-)
 delete mode 100644 src/lib/components/__tests__/appState.svelte.ts
 delete mode 100644 src/lib/components/__tests__/multiSelectTable.svelte.test.ts
 delete mode 100644 src/lib/components/__tests__/multiSelectTableHarness.svelte

diff --git a/src/lib/components/__tests__/appState.svelte.ts b/src/lib/components/__tests__/appState.svelte.ts
deleted file mode 100644
index de29f732a5..0000000000
--- a/src/lib/components/__tests__/appState.svelte.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-const BUCKET_URL = 'http://localhost/console/storage/bucket-a';
-
-export const page = $state({ url: new URL(BUCKET_URL) });
-
-export function navigateTo(href: string) {
-    page.url = new URL(href, BUCKET_URL);
-}
diff --git a/src/lib/components/__tests__/multiSelectTable.svelte.test.ts b/src/lib/components/__tests__/multiSelectTable.svelte.test.ts
deleted file mode 100644
index 1ac69df9ad..0000000000
--- a/src/lib/components/__tests__/multiSelectTable.svelte.test.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-import '@testing-library/jest-dom/vitest';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { render, screen } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import { tick } from 'svelte';
-import Harness from './multiSelectTableHarness.svelte';
-import { navigateTo } from './appState.svelte';
-
-vi.mock('$app/state', () => import('./appState.svelte'));
-
-vi.mock('$lib/stores/sdk', () => ({
-    sdk: {
-        forConsole: { account: { getPrefs: () => Promise.resolve({}) } },
-        forProject: () => ({})
-    }
-}));
-
-vi.mock('$lib/actions/analytics', () => ({
-    trackEvent: vi.fn(),
-    trackError: vi.fn(),
-    Click: {},
-    Submit: {}
-}));
-
-const pages = { '1': ['a', 'b', 'c'], '2': ['d', 'e', 'f'] };
-
-async function goToPageTwo() {
-    navigateTo('?page=2');
-    await tick();
-}
-
-describe('MultiSelectionTable', () => {
-    beforeEach(() => navigateTo('?page=1'));
-
-    it('drops the selection when another page of rows is loaded', async () => {
-        const user = userEvent.setup();
-        render(Harness, { props: { pages, onDeleteIds: vi.fn() } });
-
-        const [, firstRow] = screen.getAllByRole('checkbox');
-        await user.click(firstRow);
-        expect(screen.getByText('file selected')).toBeInTheDocument();
-
-        await goToPageTwo();
-
-        expect(screen.queryByText('file selected')).not.toBeInTheDocument();
-    });
-
-    it('selects only the rows on screen after paginating', async () => {
-        const user = userEvent.setup();
-        const onDeleteIds = vi.fn();
-        render(Harness, { props: { pages, onDeleteIds } });
-
-        await goToPageTwo();
-
-        const [selectAll] = screen.getAllByRole('checkbox');
-        await user.click(selectAll);
-        await user.click(screen.getByRole('button', { name: 'Delete' }));
-
-        expect(onDeleteIds).toHaveBeenCalledWith(['d', 'e', 'f']);
-    });
-});
diff --git a/src/lib/components/__tests__/multiSelectTableHarness.svelte b/src/lib/components/__tests__/multiSelectTableHarness.svelte
deleted file mode 100644
index d8da677b6d..0000000000
--- a/src/lib/components/__tests__/multiSelectTableHarness.svelte
+++ /dev/null
@@ -1,35 +0,0 @@
-<script lang="ts">
-    import { page } from '$app/state';
-    import { Table } from '@appwrite.io/pink-svelte';
-    import MultiSelectionTable from '../multiSelectTable.svelte';
-
-    let {
-        pages,
-        onDeleteIds
-    }: { pages: Record<string, string[]>; onDeleteIds: (ids: string[]) => void } = $props();
-
-    // rows follow the url the way a `+page.ts` load function does
-    const rows = $derived(pages[page.url.searchParams.get('page') ?? '1']);
-</script>
-
-<MultiSelectionTable
-    resource="file"
-    confirmDeletion={false}
-    columns={[{ id: 'id' }]}
-    onDelete={(_batchDelete, selectedRows) => {
-        onDeleteIds([...selectedRows]);
-        return { deleted: [] };
-    }}>
-    {#snippet header(root)}
-        <Table.Header.Cell column="id" {root}>Id</Table.Header.Cell>
-    {/snippet}
-
-    {#snippet children(root)}
-        <!-- deliberately unkeyed, the way the console rendered file rows when this bug landed -->
-        {#each rows as id}
-            <Table.Row.Base {root} {id}>
-                <Table.Cell column="id" {root}>{id}</Table.Cell>
-            </Table.Row.Base>
-        {/each}
-    {/snippet}
-</MultiSelectionTable>
diff --git a/vitest-setup-client.ts b/vitest-setup-client.ts
index e2866666a9..88edcb4580 100644
--- a/vitest-setup-client.ts
+++ b/vitest-setup-client.ts
@@ -1,33 +1,6 @@
 import '@testing-library/jest-dom/vitest';
 import { beforeAll, vi } from 'vitest';
 
-// jsdom hands back a bare object for web storage under this runtime, so the
-// console's `localStorage` reads blow up before any component renders
-function createStorage(): Storage {
-    const entries = new Map<string, string>();
-
-    return {
-        get length() {
-            return entries.size;
-        },
-        key: (index: number) => [...entries.keys()][index] ?? null,
-        getItem: (key: string) => entries.get(key) ?? null,
-        setItem: (key: string, value: string) => void entries.set(key, String(value)),
-        removeItem: (key: string) => void entries.delete(key),
-        clear: () => entries.clear()
-    };
-}
-
-for (const name of ['localStorage', 'sessionStorage'] as const) {
-    if (typeof window[name]?.getItem === 'function') continue;
-
-    Object.defineProperty(window, name, {
-        writable: true,
-        configurable: true,
-        value: createStorage()
-    });
-}
-
 // required for svelte5 + jsdom as jsdom does not support matchMedia
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
@@ -42,17 +15,6 @@ Object.defineProperty(window, 'matchMedia', {
     }))
 });
 
-// jsdom ships no ResizeObserver, which pink-svelte's FloatingActionBar constructs on mount
-Object.defineProperty(window, 'ResizeObserver', {
-    writable: true,
-    configurable: true,
-    value: class ResizeObserver {
-        observe() {}
-        unobserve() {}
-        disconnect() {}
-    }
-});
-
 beforeAll(() => {
     vi.mock('$app/environment', () => ({
         dev: true,