From b294c553fd329322b1a61f434b58fe54fc7b46cf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 24 Sep 2025 15:25:31 +0530
Subject: [PATCH] update: ui; fix: clicks not working on mobile.

---
 .../project-[region]-[project]/+layout.svelte |  2 +-
 .../databases/+page.svelte                    | 35 ++++++---------
 .../(suggestions)/empty.svelte                | 43 ++++++++++---------
 .../(suggestions)/options.svelte              | 11 ++++-
 .../storage/+page.svelte                      | 39 +++++++----------
 .../storage/bucket-[bucket]/+page.svelte      |  5 ++-
 6 files changed, 66 insertions(+), 69 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/+layout.svelte
index b48424eef..a7679879d 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+layout.svelte
@@ -138,7 +138,7 @@
 
     @media (max-width: 768px) {
         .layout-level-progress-bars {
-            position: relative;
+            width: 100%;
             align-items: center;
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
index 67681bddc..093653103 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -2,9 +2,9 @@
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
+    import { Empty, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import type { Models } from '@appwrite.io/console';
 
     import type { PageData } from './$types';
@@ -46,25 +46,18 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector
-                ui="new"
-                {columns}
-                view={data.view}
-                hideColumns={!data.databases.total}
-                hideView={!data.databases.total} />
-            {#if $canWriteDatabases}
-                <Button event="create_database" on:click={() => (showCreate = true)}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create database
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        hasSearch
+        {columns}
+        bind:view={data.view}
+        searchPlaceholder="Search by name or ID">
+        {#if $canWriteDatabases}
+            <Button event="create_database" on:click={() => (showCreate = true)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create database
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.databases.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
index 49deeb8e0..bcbeacf20 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
@@ -11,7 +11,7 @@
         Popover
     } from '@appwrite.io/pink-svelte';
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { isSmallViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
     import type { Column } from '$lib/helpers/types';
     import { expandTabs } from '../table-[table]/store';
     import SpreadsheetContainer from '../table-[table]/layout/spreadsheet.svelte';
@@ -334,7 +334,7 @@
 
             trackError(error, Submit.ColumnSuggestions);
         } finally {
-            $tableColumnSuggestions.table = null;
+            // $tableColumnSuggestions.table = null;
             $tableColumnSuggestions.context = null;
             // $tableColumnSuggestions.enabled = false;
             $tableColumnSuggestions.thinking = false;
@@ -612,8 +612,7 @@
                                 <Spreadsheet.Header.Cell
                                     {root}
                                     column={column.id}
-                                    on:contextmenu={toggle}
-                                    openEditOnTap={$isSmallViewport}>
+                                    on:contextmenu={toggle}>
                                     <Layout.Stack
                                         direction="row"
                                         alignItems="center"
@@ -667,23 +666,25 @@
                                     </Layout.Stack>
 
                                     <svelte:fragment slot="cell-editor">
-                                        <div class="cell-editor">
-                                            <InputText
-                                                id="key"
-                                                autofocus
-                                                required
-                                                bind:value={columnObj.key}
-                                                pattern="^[A-Za-z0-9][A-Za-z0-9._\-]*$">
-                                                <svelte:fragment slot="end">
-                                                    {#if columnIcon}
-                                                        <Icon
-                                                            size="s"
-                                                            icon={columnIcon}
-                                                            color={columnIconColor} />
-                                                    {/if}
-                                                </svelte:fragment>
-                                            </InputText>
-                                        </div>
+                                        {#if !$isTabletViewport}
+                                            <div class="cell-editor">
+                                                <InputText
+                                                    id="key"
+                                                    autofocus
+                                                    required
+                                                    bind:value={columnObj.key}
+                                                    pattern="^[A-Za-z0-9][A-Za-z0-9._\-]*$">
+                                                    <svelte:fragment slot="end">
+                                                        {#if columnIcon}
+                                                            <Icon
+                                                                size="s"
+                                                                icon={columnIcon}
+                                                                color={columnIconColor} />
+                                                        {/if}
+                                                    </svelte:fragment>
+                                                </InputText>
+                                            </div>
+                                        {/if}
                                     </svelte:fragment>
                                 </Spreadsheet.Header.Cell>
                             {/snippet}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte
index 9af78bc93..094aa6840 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte
@@ -1,14 +1,17 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
     import { Popover } from '@appwrite.io/pink-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     let {
         children,
         tooltipChildren,
+        toggleOnTapClick = true,
         onShowStateChanged = null
     }: {
         children: Snippet<[toggle: (event: Event) => void]>;
         tooltipChildren: Snippet<[toggle: (event: Event) => void]>;
+        toggleOnTapClick: boolean;
         onShowStateChanged?: (showing: boolean) => void;
     } = $props();
 </script>
@@ -16,7 +19,13 @@
 <Popover let:toggle let:showing placement="bottom-start" portal>
     {onShowStateChanged?.(showing)}
 
-    {@render children(toggle)}
+    {#if toggleOnTapClick && $isSmallViewport}
+        <button onclick={toggle} aria-label="Open column review modal">
+            {@render children(toggle)}
+        </button>
+    {:else}
+        {@render children(toggle)}
+    {/if}
 
     <div slot="tooltip" let:toggle style:width="480px" style:padding="16px">
         {@render tooltipChildren(toggle)}
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
index d53830b6f..b9c29bc76 100644
--- a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -4,20 +4,19 @@
 
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { Empty, PaginationWithLimit, SearchQuery } from '$lib/components';
+    import { Empty, PaginationWithLimit } from '$lib/components';
     import Create from './create.svelte';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import type { Models } from '@appwrite.io/console';
     import { writable } from 'svelte/store';
     import { canWriteBuckets } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { columns } from './store';
     import Grid from './grid.svelte';
     import Table from './table.svelte';
-    import ViewSelector from '$lib/components/viewSelector.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data;
@@ -33,25 +32,19 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector
-                ui="new"
-                {columns}
-                view={data.view}
-                hideColumns={!data.buckets.total}
-                hideView={!data.buckets.total} />
-            {#if $canWriteBuckets}
-                <Button on:click={() => ($showCreateBucket = true)} event="create_bucket" size="s">
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create bucket
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        {columns}
+        hasSearch
+        bind:view={data.view}
+        searchPlaceholder="Search by name or ID">
+        {#if $canWriteBuckets}
+            <Button on:click={() => ($showCreateBucket = true)} event="create_bucket" size="s">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create bucket
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
+
     {#if data.buckets.total}
         {#if data.view === 'grid'}
             <Grid {data} bind:showCreate={$showCreateBucket} />
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 2d8524fc4..198daff57 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
@@ -33,6 +33,7 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     export let data;
 
@@ -60,7 +61,7 @@
 
     async function fileDeleted(event: CustomEvent<Models.File>) {
         showDelete = false;
-        uploader.removeFile(event.detail);
+        await uploader.removeFile(event.detail);
         await invalidate(Dependencies.FILES);
     }
 
@@ -150,7 +151,7 @@
             allowSelection
             bind:selectedRows={selectedFiles}
             columns={[
-                { id: 'filename' },
+                { id: 'filename', width: $isSmallViewport ? 24 : undefined },
                 { id: 'type', width: { min: 140 } },
                 { id: 'size', width: { min: 100 } },
                 { id: 'created', width: { min: 120 } },