From f6375138cf3e0a995a57c2b604d656b87f38d812 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Fri, 14 Nov 2025 18:52:14 +1300
Subject: [PATCH] Update to icon buttons

---
 .../table-[table]/+page.svelte                | 97 +++++++++----------
 1 file changed, 44 insertions(+), 53 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 8099f5411..c7a2fab72 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
@@ -8,7 +8,7 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteTables, canWriteRows } from '$lib/stores/roles';
-    import { Icon, Layout, Divider, Tooltip, Popover, ActionMenu } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Divider, Tooltip } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import {
         table,
@@ -179,13 +179,6 @@
                     justifyContent="flex-end"
                     style="padding-right: 40px;">
                     <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}
                             <Button
                                 secondary
@@ -196,45 +189,52 @@
                                 Create row
                             </Button>
 
-                            <Button
-                                icon
-                                size="s"
-                                secondary
-                                class="small-button-dimensions"
-                                on:click={() => {
-                                    $expandTabs = !$expandTabs;
-                                    preferences.setKey('tableHeaderExpanded', $expandTabs);
+                            <Tooltip placement="top">
+                                <Button
+                                    icon
+                                    size="s"
+                                    secondary
+                                    class="small-button-dimensions"
+                                    on:click={() => (showImportCSV = true)}>
+                                    <Icon icon={IconUpload} size="s" />
+                                </Button>
+
+                                <svelte:fragment slot="tooltip">Import CSV</svelte:fragment>
+                            </Tooltip>
+
+                            <Tooltip placement="top">
+                                <Button
+                                    icon
+                                    size="s"
+                                    secondary
+                                    class="small-button-dimensions"
+                                    on:click={() => {
+                                    trackEvent(Click.DatabaseExportCsv);
+                                    goto(getTableExportUrl());
                                 }}>
-                                <Icon
-                                    icon={!$expandTabs ? IconChevronDown : IconChevronUp}
-                                    size="s" />
-                            </Button>
+                                    <Icon icon={IconDownload} size="s" />
+                                </Button>
 
-                    <Popover padding="none" placement="bottom-start" let:toggle let:showing>
-                        <Button
-                            secondary
-                            disabled={!(hasColumns && hasValidColumns)}
-                            on:click={toggle}>
-                            Manage rows
-                            <span slot="end" class="chevron-wrapper" class:rotate={showing}>
-                                <Icon icon={IconChevronDown} size="s" />
-                            </span>
-                        </Button>
-               
-                        <Button
-                            leadingIcon={IconUpload}
-                            on:click={() => (showImportCSV = true)}>
-                            Import CSV
-                        </Button>
+                                <svelte:fragment slot="tooltip">Export CSV</svelte:fragment>
+                            </Tooltip>
 
-                        <Button
-                            leadingIcon={IconDownload}
-                            on:click={() => {
-                                trackEvent(Click.DatabaseExportCsv);
-                                goto(getTableExportUrl());
-                            }}>
-                            Export CSV
-                        </Button>
+                            <Tooltip placement="top">
+                                <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>
+
+                                <svelte:fragment slot="tooltip">{!$expandTabs ? 'Expand' : 'Collapse'}</svelte:fragment>
+                            </Tooltip>
 
                             <Tooltip disabled={isRefreshing || !data.rows.total} placement="top">
                                 <Button
@@ -365,15 +365,6 @@
         height: 32px !important;
     }
 
-    .chevron-wrapper {
-        display: inline-flex;
-        transition: transform 0.15s ease-out;
-    }
-
-    .chevron-wrapper.rotate {
-        transform: rotate(180deg);
-    }
-
     :global(.rotating) {
         animation: rotate 1s linear infinite;
     }