From d12547cf10100f4c1721d1e5ec7dffaef80ece2c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Nov 2025 11:33:04 +0530
Subject: [PATCH 1/4] add: refresh support.

---
 .../table-[table]/+page.svelte                | 103 +++++++++++++-----
 1 file changed, 77 insertions(+), 26 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index df77376faa..38e04ff9bf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -26,16 +26,24 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { IconChevronDown, IconChevronUp, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconChevronDown,
+        IconChevronUp,
+        IconPlus,
+        IconRefresh
+    } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRow from './rows/create.svelte';
     import { onDestroy } from 'svelte';
     import { isCloud } from '$lib/system';
     import { Empty as SuggestionsEmptySheet, tableColumnSuggestions } from '../(suggestions)';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     export let data: PageData;
 
+    let isRefreshing = false;
     let showImportCSV = false;
 
     // todo: might need a type fix here.
@@ -147,36 +155,66 @@
                         <svelte:fragment slot="tooltip">Filters</svelte:fragment>
                     </Tooltip>
                 </Layout.Stack>
-                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-                    <Button
-                        secondary
-                        event={Click.DatabaseImportCsv}
-                        disabled={!(hasColumns && hasValidColumns)}
-                        on:click={() => (showImportCSV = true)}>
-                        Import CSV
-                    </Button>
-                    {#if !$isSmallViewport}
+                <Layout.Stack
+                    direction="row"
+                    alignItems="center"
+                    justifyContent="flex-end"
+                    style="padding-right: 40px;">
+                    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                         <Button
                             secondary
-                            event="create_row"
+                            event={Click.DatabaseImportCsv}
                             disabled={!(hasColumns && hasValidColumns)}
-                            on:click={() => ($showRowCreateSheet.show = true)}>
-                            <Icon icon={IconPlus} slot="start" size="s" />
-                            Create row
+                            on:click={() => (showImportCSV = true)}>
+                            Import CSV
                         </Button>
+                        {#if !$isSmallViewport}
+                            <Button
+                                secondary
+                                event="create_row"
+                                disabled={!(hasColumns && hasValidColumns)}
+                                on:click={() => ($showRowCreateSheet.show = true)}>
+                                <Icon icon={IconPlus} slot="start" size="s" />
+                                Create row
+                            </Button>
 
-                        <Button
-                            icon
-                            size="s"
-                            secondary
-                            class="small-button-dimensions"
-                            on:click={() => {
-                                $expandTabs = !$expandTabs;
-                                preferences.setKey('tableHeaderExpanded', $expandTabs);
-                            }}>
-                            <Icon icon={!$expandTabs ? IconChevronDown : IconChevronUp} size="s" />
-                        </Button>
-                    {/if}
+                            <Button
+                                icon
+                                size="s"
+                                secondary
+                                class="small-button-dimensions"
+                                on:click={() => {
+                                    $expandTabs = !$expandTabs;
+                                    preferences.setKey('tableHeaderExpanded', $expandTabs);
+                                }}>
+                                <Icon
+                                    icon={!$expandTabs ? IconChevronDown : IconChevronUp}
+                                    size="s" />
+                            </Button>
+
+                            <Tooltip disabled={isRefreshing || !data.rows.total} placement="top">
+                                <Button
+                                    icon
+                                    size="s"
+                                    secondary
+                                    disabled={isRefreshing || !data.rows.total}
+                                    class="small-button-dimensions"
+                                    on:click={async () => {
+                                        isRefreshing = true;
+                                        await invalidate(Dependencies.TABLE);
+                                        isRefreshing = false;
+                                    }}>
+                                    <div
+                                        class={isRefreshing ? 'rotating' : ''}
+                                        style:line-height="0px">
+                                        <Icon icon={IconRefresh} size="s" />
+                                    </div>
+                                </Button>
+
+                                <svelte:fragment slot="tooltip">Refresh</svelte:fragment>
+                            </Tooltip>
+                        {/if}
+                    </Layout.Stack>
                 </Layout.Stack>
             </Layout.Stack>
             {#if $isSmallViewport}
@@ -282,4 +320,17 @@
         width: 32px !important;
         height: 32px !important;
     }
+
+    :global(.rotating) {
+        animation: rotate 1s linear infinite;
+    }
+
+    @keyframes rotate {
+        from {
+            transform: rotate(0deg);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
 </style>

From be635788f1ed11c70ad8cb52b2cad909d343d1c5 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Nov 2025 11:42:33 +0530
Subject: [PATCH 2/4] fix: disable logic.

---
 .../databases/database-[database]/table-[table]/+page.svelte  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index 38e04ff9bf..f99cf9d32f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -197,7 +197,9 @@
                                     icon
                                     size="s"
                                     secondary
-                                    disabled={isRefreshing || !data.rows.total}
+                                    disabled={isRefreshing ||
+                                        !data.rows.total ||
+                                        !(hasColumns && hasValidColumns)}
                                     class="small-button-dimensions"
                                     on:click={async () => {
                                         isRefreshing = true;

From b0ead443e1bd0ce042fcfc7436c97f8d9da5bc30 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Nov 2025 11:51:15 +0530
Subject: [PATCH 3/4] address comment.

---
 .../databases/database-[database]/table-[table]/+page.svelte  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index f99cf9d32f..5cb7f1ec43 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -207,8 +207,8 @@
                                         isRefreshing = false;
                                     }}>
                                     <div
-                                        class={isRefreshing ? 'rotating' : ''}
-                                        style:line-height="0px">
+                                        style:line-height="0px"
+                                        class:rotating={isRefreshing}>
                                         <Icon icon={IconRefresh} size="s" />
                                     </div>
                                 </Button>

From c6cd27debeae074b47a45ef9754c22131469f807 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 10 Nov 2025 11:52:06 +0530
Subject: [PATCH 4/4] lint.

---
 .../databases/database-[database]/table-[table]/+page.svelte  | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
index 5cb7f1ec43..57811ebb60 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.svelte
@@ -206,9 +206,7 @@
                                         await invalidate(Dependencies.TABLE);
                                         isRefreshing = false;
                                     }}>
-                                    <div
-                                        style:line-height="0px"
-                                        class:rotating={isRefreshing}>
+                                    <div style:line-height="0px" class:rotating={isRefreshing}>
                                         <Icon icon={IconRefresh} size="s" />
                                     </div>
                                 </Button>