From e4b0e60d3e20a882977e337e5e41780334e3d210 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Wed, 18 Jun 2025 16:25:14 +0530
Subject: [PATCH 001/118] added session invalidation card in the auth>security

---
 src/lib/actions/analytics.ts                  |  1 +
 .../auth/security/+page.svelte                |  2 +
 .../security/updateSessionInvalidation.svelte | 55 +++++++++++++++++++
 3 files changed, 58 insertions(+)
 create mode 100644 src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte

diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
index d9c86e0d95..3b3fe2f902 100644
--- a/src/lib/actions/analytics.ts
+++ b/src/lib/actions/analytics.ts
@@ -265,6 +265,7 @@ export enum Submit {
     AuthSessionAlertsUpdate = 'submit_auth_session_alerts_update',
     AuthMembershipPrivacyUpdate = 'submit_auth_membership_privacy_update',
     AuthMockNumbersUpdate = 'submit_auth_mock_numbers_update',
+    AuthInvalidateSesssion = 'submit_auth_invalidate_session',
     SessionsLengthUpdate = 'submit_sessions_length_update',
     SessionsLimitUpdate = 'submit_sessions_limit_update',
     SessionDelete = 'submit_session_delete',
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte
index 9d4575b66b..23ff36489e 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte
@@ -9,6 +9,7 @@
     import UpdateSessionsLimit from './updateSessionsLimit.svelte';
     import UpdateMembershipPrivacy from './updateMembershipPrivacy.svelte';
     import UpdateUsersLimit from './updateUsersLimit.svelte';
+    import UpdateSessionInvalidation from './updateSessionInvalidation.svelte';
 </script>
 
 <Container>
@@ -19,6 +20,7 @@
     <UpdatePasswordDictionary />
     <UpdatePersonalDataCheck />
     <UpdateSessionAlerts />
+    <UpdateSessionInvalidation/>
     <UpdateMockNumbers />
     <UpdateMembershipPrivacy />
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte
new file mode 100644
index 0000000000..c179d5f81a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte
@@ -0,0 +1,55 @@
+<script lang="ts">
+    import { invalidate } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { CardGrid } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button, Form, InputSwitch } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { sdk } from '$lib/stores/sdk';
+    import { Typography } from '@appwrite.io/pink-svelte';
+    import { project } from '../../store';
+
+    let sessionInvalidation = $project?.authInvalidateSessions ?? false;
+
+    async function updateSessionInvalidation() {
+        try {
+            await sdk.forConsole.projects.updateAuthPasswordDictionary(
+                $project.$id,
+                sessionInvalidation
+            );
+            await invalidate(Dependencies.PROJECT);
+            addNotification({
+                type: 'success',
+                message: 'Updated session invalidation check.'
+            });
+            trackEvent(Submit.AuthInvalidateSesssion);
+        } catch (error) {
+            addNotification({
+                type: 'error',
+                message: error.message
+            });
+            trackError(error, Submit.AuthInvalidateSesssion);
+        }
+    }
+</script>
+
+<Form onSubmit={updateSessionInvalidation}>
+    <CardGrid>
+        <svelte:fragment slot="title">Invalidate sessions</svelte:fragment>
+        <svelte:fragment slot="aside">
+            <InputSwitch
+                bind:value={sessionInvalidation}
+                id="passwordDictionary"
+                label="Password dictionary" />
+            <Typography.Text>
+                Enabling this option will clear all existing sessions when the user changes their password.
+            </Typography.Text>
+        </svelte:fragment>
+
+        <svelte:fragment slot="actions">
+            <Button disabled={sessionInvalidation === $project?.authInvalidateSessions} submit>
+                Update
+            </Button>
+        </svelte:fragment>
+    </CardGrid>
+</Form>

From 26baefef063065618ab0ecb8d0f15c04b7fa0eec Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Thu, 19 Jun 2025 14:37:49 +0530
Subject: [PATCH 002/118] added session invalidation

---
 package.json                                          |  2 +-
 pnpm-lock.yaml                                        | 11 ++++++-----
 .../auth/security/+page.svelte                        |  2 +-
 .../auth/security/updateSessionInvalidation.svelte    |  9 +++++----
 4 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index f12341aefc..cd85da95cb 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "^1.9.0",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2181",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a3664a807f..8c6b954201 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: ^1.9.0
-        version: 1.9.0
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2181
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2181
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -257,8 +257,9 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@1.9.0':
-    resolution: {integrity: sha512-g8+zfdBF8mz7tRUER4CGVe5FHWQVLp8TlY/UOGCZ2TgUF1qnpNu/DhiQgph8uF+QZ9jDKCLAAZlP5//9t7ckWA==}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2181':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2181}
+    version: 1.9.0
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870':
     resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870}
@@ -3635,7 +3636,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@1.9.0': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2181': {}
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(svelte@5.25.3)':
     dependencies:
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte
index 23ff36489e..48718cba38 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/+page.svelte
@@ -20,7 +20,7 @@
     <UpdatePasswordDictionary />
     <UpdatePersonalDataCheck />
     <UpdateSessionAlerts />
-    <UpdateSessionInvalidation/>
+    <UpdateSessionInvalidation />
     <UpdateMockNumbers />
     <UpdateMembershipPrivacy />
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte
index c179d5f81a..318706bc2a 100644
--- a/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/auth/security/updateSessionInvalidation.svelte
@@ -13,7 +13,7 @@
 
     async function updateSessionInvalidation() {
         try {
-            await sdk.forConsole.projects.updateAuthPasswordDictionary(
+            await sdk.forConsole.projects.updateSessionInvalidation(
                 $project.$id,
                 sessionInvalidation
             );
@@ -39,10 +39,11 @@
         <svelte:fragment slot="aside">
             <InputSwitch
                 bind:value={sessionInvalidation}
-                id="passwordDictionary"
-                label="Password dictionary" />
+                id="invalidateSessions"
+                label="Invalidate sessions" />
             <Typography.Text>
-                Enabling this option will clear all existing sessions when the user changes their password.
+                Enabling this option will clear all existing sessions when the user changes their
+                password.
             </Typography.Text>
         </svelte:fragment>
 

From 41428aceaa5e624c3b9073c6dc8a6d77e26229ba Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 10 Jul 2025 16:40:10 +0530
Subject: [PATCH 003/118] bump: pink.

---
 package.json   |  2 +-
 pnpm-lock.yaml | 34 +++++++++++++++++++++++++---------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 20a81f48a1..ad1efae3c2 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9acaa26d28..7c904f8465 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -261,8 +261,8 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c}
     version: 1.9.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d521606fc63e0800b996f0fbb1a8d1f6907480ed':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d521606fc63e0800b996f0fbb1a8d1f6907480ed}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -282,8 +282,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -1266,6 +1266,14 @@ packages:
   '@swc/helpers@0.5.15':
     resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
 
+  '@tanstack/svelte-virtual@3.13.12':
+    resolution: {integrity: sha512-SsOinCktvpMFbdSW61X6jeUNaJvD1tmt30AFVSLe1FQxGxjdPkZo0gAsoVPqM9FFZqidvvXQ4gpadDaTz/yGxA==}
+    peerDependencies:
+      svelte: ^3.48.0 || ^4.0.0 || ^5.0.0
+
+  '@tanstack/virtual-core@3.13.12':
+    resolution: {integrity: sha512-1YBOJfRHV4sXUmWsFSf5rQor4Ss82G8dQWLRbnk3GA4jeP8hQt1hxXh0tmflpC0dz3VgEv/1+qwPyLeWkQuPFA==}
+
   '@testing-library/dom@10.4.0':
     resolution: {integrity: sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==}
     engines: {node: '>=18'}
@@ -3638,7 +3646,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d521606fc63e0800b996f0fbb1a8d1f6907480ed(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3655,12 +3663,13 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@d521606(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@d521606fc63e0800b996f0fbb1a8d1f6907480ed(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
+      '@tanstack/svelte-virtual': 3.13.12(svelte@5.25.3)
       ansicolor: 2.0.3
       d3: 7.9.0
       fuse.js: 7.1.0
@@ -4711,6 +4720,13 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  '@tanstack/svelte-virtual@3.13.12(svelte@5.25.3)':
+    dependencies:
+      '@tanstack/virtual-core': 3.13.12
+      svelte: 5.25.3
+
+  '@tanstack/virtual-core@3.13.12': {}
+
   '@testing-library/dom@10.4.0':
     dependencies:
       '@babel/code-frame': 7.26.2

From e64b51a0a831fc92e6c0dbf10d3a535140500f3a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 11 Jul 2025 19:27:42 +0530
Subject: [PATCH 004/118] bump: spreadsheet logic.

---
 package.json                                  |   4 +-
 pnpm-lock.yaml                                |  18 +-
 src/lib/components/filters/filters.svelte     |   4 +-
 src/lib/helpers/types.ts                      |  25 +-
 src/lib/layout/container.svelte               |  11 +-
 src/lib/layout/footer.svelte                  |  10 +-
 src/lib/layout/shell.svelte                   |   9 +
 .../project-[region]-[project]/+layout.svelte |   2 +-
 .../collection-[collection]/+page.svelte      |  48 +-
 .../spreadsheet.svelte                        | 456 ++++++++++++++++++
 .../collection-[collection]/store.ts          |   4 +-
 .../collection-[collection]/table.svelte      | 365 --------------
 12 files changed, 545 insertions(+), 411 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
 delete mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte

diff --git a/package.json b/package.json
index ad1efae3c2..156fda3325 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
@@ -94,5 +94,5 @@
             "svelte-preprocess"
         ]
     },
-    "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
+    "packageManager": "pnpm@10.13.1"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7c904f8465..6f1a295c14 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -261,8 +261,8 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c}
     version: 1.9.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -282,8 +282,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3646,7 +3646,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3663,9 +3663,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@74cf26b(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@74cf26b287cc937f03e15bf1cda855e867acecaf(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index f8c9a3e6ed..32b7834835 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -2,7 +2,7 @@
     import { beforeNavigate } from '$app/navigation';
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import type { Column } from '$lib/helpers/types';
+    import type { PinkSheetColumn } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
     import Content from './content.svelte';
     import {
@@ -19,7 +19,7 @@
     import { Click, Submit, trackEvent } from '$lib/actions/analytics';
 
     export let query = '[]';
-    export let columns: Writable<Column[]>;
+    export let columns: Writable<PinkSheetColumn[]>;
     export let disabled = false;
     export let fullWidthMobile = false;
     export let singleCondition = false;
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 961c992d06..3bae857e0b 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -14,6 +14,25 @@ export type PinkColumn = {
     hide?: boolean;
 };
 
+export type PinkSheetColumn = {
+    id: string;
+    width?:
+        | {
+              min: number;
+              max: number;
+          }
+        | {
+              min: number;
+          }
+        | number;
+    hide?: boolean;
+    fixed?: boolean;
+    resizable?: boolean;
+    draggable?: boolean;
+    resizedWidth?: number;
+    isAction?: boolean;
+};
+
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
 
 export function isHTMLElement(el: unknown): el is HTMLElement {
@@ -35,10 +54,10 @@ const columnTypes = [
     'relationship',
     'enum'
 ] as const;
-export type ColumnType = (typeof columnTypes)[number];
-export type Column = PinkColumn & {
+export type SheetColumnType = (typeof columnTypes)[number];
+export type SheetColumn = PinkSheetColumn & {
     title: string;
-    type: ColumnType;
+    type: SheetColumnType;
     filter?: boolean;
     array?: boolean;
     format?: string;
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index abe25a4a98..7c0750c8c2 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
+
     export let overlapCover = false;
+    export let expanded = false;
     export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
 
     $: style = size
@@ -8,8 +10,8 @@
         : '';
 </script>
 
-<div style:container-type="inline-size" class:overlap-cover={overlapCover}>
-    <div class="console-container" {style}>
+<div style:container-type="inline-size" class:overlap-cover={overlapCover} {...$$restProps}>
+    <div class="console-container" class:expanded {style}>
         <Layout.Stack gap="l">
             <slot />
         </Layout.Stack>
@@ -23,6 +25,11 @@
     :global(.console-container) {
         margin-block: var(--base-32);
 
+        &.expanded {
+            padding-inline-end: 0 !important;
+            margin-block: var(--base-8) !important;
+        }
+
         @media (min-width: 360px) {
             margin-inline: 1rem;
         }
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index c6552477fa..1104f7904c 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -12,11 +12,15 @@
         Badge
     } from '@appwrite.io/pink-svelte';
     import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
+    import { page } from '$app/state';
 
     const currentYear = new Date().getFullYear();
+
+    // for spreadsheet ui
+    const hideFooter = $derived(page.route.id?.includes('collection-[collection]'));
 </script>
 
-<footer>
+<footer class:hide={hideFooter}>
     <Divider />
     <Layout.Stack direction={$isSmallViewport ? 'column-reverse' : 'row'}>
         <Layout.Stack
@@ -161,6 +165,10 @@
         flex-direction: column;
         gap: var(--gap-l);
         margin-inline: 2rem;
+
+        &.hide {
+            display: none;
+        }
     }
 
     :global(main:has(.sub-navigation)) footer {
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 997fc3e492..6aab786626 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -230,6 +230,15 @@
         }
     }
 
+    :global(main:has(.databases-spreadsheet)) {
+        @media (min-width: 1024px) {
+            .main-content {
+                height: auto;
+                padding-left: 210px;
+            }
+        }
+    }
+
     .overlay {
         position: fixed;
         width: 100vw;
diff --git a/src/routes/(console)/project-[region]-[project]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/+layout.svelte
index 0254a8cdc2..b48424eeff 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/+layout.svelte
@@ -126,7 +126,7 @@
 <style>
     .layout-level-progress-bars {
         gap: 1rem;
-        z-index: 1;
+        z-index: 2;
         display: flex;
         flex-direction: column;
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 15a3506502..d50dc364af 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -1,19 +1,19 @@
 <script lang="ts">
-    import { Empty, EmptySearch, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
-    import type { Column, ColumnType } from '$lib/helpers/types';
+    import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
+    import { Card, Icon, Layout, Empty as PinkEmpty, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
     import { collection, columns, isCsvImportInProgress } from './store';
-    import Table from './table.svelte';
+    import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
     import FilePicker from '$lib/components/filePicker.svelte';
     import { page } from '$app/state';
@@ -31,7 +31,7 @@
     let showCreateAttribute = false;
     let selectedAttribute: Option['name'] = null;
 
-    const filterColumns = writable<Column[]>([]);
+    const filterColumns = writable<SheetColumn[]>([]);
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
@@ -39,22 +39,15 @@
         $collection.attributes.map((attribute) => ({
             id: attribute.key,
             title: attribute.key,
-            type: attribute.type as ColumnType,
+            type: attribute.type as SheetColumnType,
             hide: !!selected?.includes(attribute.key),
             array: attribute?.array,
             format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
             elements: 'elements' in attribute ? attribute.elements : null
         }))
     );
-    $: filterColumns.set([
-        ...$columns,
-        ...['$id', '$createdAt', '$updatedAt'].map((id) => ({
-            id,
-            title: id,
-            show: true,
-            type: (id === '$id' ? 'string' : 'datetime') as ColumnType
-        }))
-    ]);
+
+    $: filterColumns.set([...$columns.filter((column) => !column.isAction)]);
 
     $: hasAttributes = !!$collection.attributes.length;
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
@@ -90,7 +83,7 @@
 </script>
 
 {#key page.params.collection}
-    <Container>
+    <Container expanded style="background: var(--bgcolor-neutral-primary)">
         <Layout.Stack direction="column" gap="xl">
             <Layout.Stack direction="row" justifyContent="space-between">
                 <Filters
@@ -99,7 +92,11 @@
                     disabled={!(hasAttributes && hasValidAttributes)}
                     analyticsSource="database_documents" />
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-                    <ViewSelector view={data.view} {columns} hideView isCustomCollection />
+                    <ViewSelector
+                        view={data.view}
+                        columns={filterColumns}
+                        hideView
+                        isCustomCollection />
                     <Button
                         secondary
                         event={Click.DatabaseImportCsv}
@@ -109,6 +106,7 @@
                     </Button>
                     {#if !$isSmallViewport}
                         <Button
+                            secondary
                             disabled={!(hasAttributes && hasValidAttributes)}
                             href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
                             event="create_document">
@@ -120,6 +118,7 @@
             </Layout.Stack>
             {#if $isSmallViewport}
                 <Button
+                    secondary
                     disabled={!(hasAttributes && hasValidAttributes)}
                     href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
                     event="create_document">
@@ -131,13 +130,7 @@
 
         {#if hasAttributes && hasValidAttributes}
             {#if data.documents.total}
-                <Table {data} />
-
-                <PaginationWithLimit
-                    name="Documents"
-                    limit={data.limit}
-                    offset={data.offset}
-                    total={data.documents.total} />
+                <!-- nothing for now -->
             {:else if $hasPageQueries}
                 <EmptySearch hidePages>
                     <div class="common-section">
@@ -211,6 +204,13 @@
             </Card.Base>
         {/if}
     </Container>
+
+    {#if hasAttributes && hasValidAttributes && data.documents.total}
+        <Divider />
+        <div class="databases-spreadsheet">
+            <SpreadSheet {data} />
+        </div>
+    {/if}
 {/key}
 
 {#if showCreateAttribute}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
new file mode 100644
index 0000000000..c01de102c3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -0,0 +1,456 @@
+<script lang="ts">
+    import { goto, invalidate } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { Alert, Confirm, Id } from '$lib/components';
+    import { Dependencies } from '$lib/constants';
+    import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
+    import { preferences } from '$lib/stores/preferences';
+    import { sdk } from '$lib/stores/sdk';
+    import { type Models, Query } from '@appwrite.io/console';
+    import { onMount } from 'svelte';
+    import type { PageData } from './$types';
+    import {
+        isRelationship,
+        isRelationshipToMany,
+        isString
+    } from './document-[document]/attributes/store';
+    import RelationshipsModal from './relationshipsModal.svelte';
+    import { attributes, collection, columns } from './store';
+    import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
+    import {
+        Tooltip,
+        Spreadsheet,
+        Table,
+        Button,
+        Layout,
+        Link,
+        Badge,
+        FloatingActionBar,
+        Icon,
+        InteractiveText,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { toLocaleDateTime } from '$lib/helpers/date';
+    import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { IconDotsHorizontal, IconPlus, IconText } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+
+    export let data: PageData;
+
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
+
+    let displayNames = {};
+    let showRelationships = false;
+    let selectedRelationship: Models.AttributeRelationship = null;
+    let relationshipData: Partial<Models.Document>[];
+
+    let spreadsheetHeight = '75vh';
+    let spreadsheetWrapper: HTMLDivElement;
+
+    function resizeSheet() {
+        if (!spreadsheetWrapper) return;
+        const rect = spreadsheetWrapper.getBoundingClientRect();
+
+        document.body.style.overflow = 'hidden';
+        document.documentElement.style.overflow = 'hidden';
+        spreadsheetHeight = window.innerHeight - rect.top + 'px';
+    }
+
+    onMount(async () => {
+        resizeSheet();
+        displayNames = preferences.getDisplayNames();
+    });
+
+    function formatArray(array: unknown[]) {
+        if (array.length === 0) return '[ ]';
+
+        let formattedFields: string[] = [];
+        for (const item of array) {
+            if (typeof item === 'string') {
+                formattedFields.push(`"${item}"`);
+            } else {
+                formattedFields.push(`${item}`);
+            }
+        }
+
+        return `[${formattedFields.join(', ')}]`;
+    }
+
+    function formatColumn(column: unknown) {
+        let formattedColumn: string;
+
+        if (typeof column === 'string') {
+            formattedColumn = column;
+        } else if (Array.isArray(column)) {
+            formattedColumn = formatArray(column);
+        } else if (column === null) {
+            formattedColumn = 'null';
+        } else {
+            formattedColumn = `${column}`;
+        }
+
+        return {
+            value:
+                formattedColumn.length > 20
+                    ? `${formattedColumn.slice(0, 20)}...`
+                    : formattedColumn,
+            truncated: formattedColumn.length > 20,
+            whole: `${formattedColumn.slice(0, 100)}...`
+        };
+    }
+
+    $: selected = preferences.getCustomCollectionColumns(page.params.collection);
+
+    $: {
+        const baseColumns = $collection.attributes.map((attribute) => ({
+            id: attribute.key,
+            title: attribute.key,
+            type: attribute.type as SheetColumnType,
+            hide: !!selected?.includes(attribute.key),
+            array: attribute?.array,
+            width: { min: 168 },
+            draggable: true,
+            format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
+            elements: 'elements' in attribute ? attribute.elements : null
+        }));
+
+        const staticColumns: SheetColumn[] = [
+            { id: '$id', title: 'Document ID', width: 200, draggable: false, type: 'string' },
+            {
+                id: '$created',
+                title: 'Created',
+                width: { min: 200 },
+                draggable: false,
+                type: 'datetime'
+            },
+            {
+                id: '$updated',
+                title: 'Updated',
+                width: { min: 200 },
+                draggable: false,
+                type: 'datetime'
+            },
+            {
+                id: 'actions',
+                title: '',
+                width: 40,
+                isAction: true,
+                draggable: false,
+                type: 'string'
+            }
+        ];
+
+        columns.set([
+            staticColumns[0],
+            ...baseColumns,
+            staticColumns[1],
+            staticColumns[2],
+            staticColumns[3],
+        ]);
+    }
+
+    let selectedRows: string[] = [];
+    let showDelete = false;
+
+    async function handleDelete() {
+        showDelete = false;
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .databases.deleteDocuments(databaseId, collectionId, [
+                    Query.equal('$id', selectedRows)
+                ]);
+
+            trackEvent(Submit.DocumentDelete);
+            addNotification({
+                type: 'success',
+                message: `${selectedRows.length} document${selectedRows.length > 1 ? 's' : ''} deleted`
+            });
+            invalidate(Dependencies.DOCUMENTS);
+        } catch (error) {
+            addNotification({ type: 'error', message: error.message });
+            trackError(error, Submit.DocumentDelete);
+        } finally {
+            selectedRows = [];
+            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) &&
+            // One-to-One are always included
+            (attribute.relationType === 'oneToOne' ||
+                // One-to-Many: Only if parent is deleted
+                (attribute.relationType === 'oneToMany' && attribute.side === 'parent') ||
+                // Many-to-One: Only include if child is deleted
+                (attribute.relationType === 'manyToOne' && attribute.side === 'child') ||
+                // Many-to-Many: Only include if the parent is being deleted
+                (isRelationshipToMany(attribute) && attribute.side === 'parent'))
+    ) as Models.AttributeRelationship[];
+
+    let checked = false;
+
+    const emptyCellsLimit = $isSmallViewport ? 12 : 18;
+
+    $: emptyCellsCount =
+        data.documents.documents.length >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - data.documents.documents.length;
+</script>
+
+<svelte:window on:resize={resizeSheet} />
+
+<div bind:this={spreadsheetWrapper} style:height={spreadsheetHeight} style:position="relative">
+    <Spreadsheet.Root
+        let:root
+        height="100%"
+        allowSelection
+        bind:selectedRows
+        bind:columns={$columns}
+        emptyCells={emptyCellsCount}
+        bottomActionClick={() => {
+            // do something
+        }}>
+        <svelte:fragment slot="header" let:root>
+            {#each $columns as column (column.id)}
+                {#if column.isAction}
+                    <Spreadsheet.Header.Cell column="actions" {root}>
+                        <Button.Button icon variant="extra-compact" on:click={() => {}}>
+                            <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
+                        </Button.Button>
+                    </Spreadsheet.Header.Cell>
+                {:else}
+                    <Spreadsheet.Header.Cell column={column.id} {root} icon={IconText}>
+                        {column.title}
+                    </Spreadsheet.Header.Cell>
+                {/if}
+            {/each}
+        </svelte:fragment>
+
+        {#each data.documents.documents as document (document.$id)}
+            <!-- TODO: open sheet on click -->
+            <Spreadsheet.Row.Base {root} id={document.$id}>
+                <Spreadsheet.Cell column="$id" {root}>
+                    {#key document.$id}
+                        <Id value={document.$id}>
+                            {document.$id}
+                        </Id>
+                    {/key}
+                </Spreadsheet.Cell>
+
+                {#each $columns as { id } (id)}
+                    {@const attr = $attributes.find((n) => n.key === id)}
+                    {#if attr}
+                        {@const formatted = formatColumn(document[id])}
+                        <Spreadsheet.Cell column={id} {root} value={formatted.value}>
+                            {#if isRelationship(attr)}
+                                {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
+                                {#if !isRelationshipToMany(attr)}
+                                    {#if document[id]}
+                                        {@const related = document[id]}
+                                        <Link.Button
+                                            variant="muted"
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                goto(
+                                                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
+                                                );
+                                            }}>
+                                            {#each args as arg, i}
+                                                {#if arg !== undefined}
+                                                    {#if i}
+                                                        &nbsp;|
+                                                    {/if}
+                                                    <span class="text" data-private>
+                                                        {related?.[arg]}
+                                                    </span>
+                                                {/if}
+                                            {/each}
+                                        </Link.Button>
+                                    {:else}
+                                        <span class="text">n/a</span>
+                                    {/if}
+                                {:else}
+                                    {@const itemsNum = document[id]?.length}
+                                    <Button.Button
+                                        variant="extra-compact"
+                                        disabled={!itemsNum}
+                                        badge={itemsNum ?? 0}
+                                        on:click={(e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            relationshipData = document[id];
+                                            showRelationships = true;
+                                            selectedRelationship = attr;
+                                        }}>
+                                        Items
+                                    </Button.Button>
+                                {/if}
+                            {:else}
+                                {@const datetime = document[id]}
+                                {@const isDatetimeAttribute = attr.type === 'datetime'}
+                                {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
+                                {#if isDatetimeAttribute}
+                                    <DualTimeView time={datetime}>
+                                        <span slot="title">Timestamp</span>
+                                        {toLocaleDateTime(datetime, true)}
+                                    </DualTimeView>
+                                {:else if isEncryptedAttribute}
+                                    <button on:click={(e) => e.preventDefault()}>
+                                        <InteractiveText
+                                            copy={false}
+                                            variant="secret"
+                                            isVisible={false}
+                                            text={formatted.value} />
+                                    </button>
+                                {:else if formatted.truncated}
+                                    <Tooltip placement="bottom" disabled={!formatted.truncated}>
+                                        <Typography.Text truncate
+                                            >{formatted.value}</Typography.Text>
+                                        <span
+                                            let:showing
+                                            slot="tooltip"
+                                            style:white-space="pre-wrap"
+                                            style:word-break="break-all">
+                                            {#if showing}
+                                                {formatted.whole}
+                                            {/if}
+                                        </span>
+                                    </Tooltip>
+                                {:else}
+                                    <Typography.Text truncate>{formatted.value}</Typography.Text>
+                                {/if}
+                            {/if}
+                        </Spreadsheet.Cell>
+                    {/if}
+                {/each}
+                <Spreadsheet.Cell column="$created" {root}>
+                    <DualTimeView time={document.$createdAt} />
+                </Spreadsheet.Cell>
+                <Spreadsheet.Cell column="$updated" {root}>
+                    <DualTimeView time={document.$updatedAt} />
+                </Spreadsheet.Cell>
+                <Spreadsheet.Cell column="actions" {root}>
+                    <Button.Button icon variant="extra-compact">
+                        <Icon icon={IconDotsHorizontal} color="--fgcolor-neutral-primary" />
+                    </Button.Button>
+                </Spreadsheet.Cell>
+            </Spreadsheet.Row.Base>
+        {/each}
+
+        <svelte:fragment slot="footer">
+            <Layout.Stack
+                direction="row"
+                alignContent="center"
+                alignItems="center"
+                justifyContent="space-between">
+                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                    {selectedRows.length
+                        ? `${selectedRows.length} records selected`
+                        : `${data.documents.documents.length} records`}
+                </Typography.Text>
+
+                <Button.Button variant="extra-compact">Generate random data</Button.Button>
+            </Layout.Stack>
+        </svelte:fragment>
+    </Spreadsheet.Root>
+
+    {#if selectedRows.length > 0}
+        <div class="floating-action-bar">
+            <FloatingActionBar>
+                <svelte:fragment slot="start">
+                    <Layout.Stack direction="row" alignItems="center" gap="m">
+                        <Badge content={selectedRows.length.toString()} />
+                        <span>
+                            {selectedRows.length > 1 ? 'documents' : 'document'}
+                            selected
+                        </span>
+                    </Layout.Stack>
+                </svelte:fragment>
+                <svelte:fragment slot="end">
+                    <ConsoleButton text on:click={() => (selectedRows = [])}>Cancel</ConsoleButton>
+                    <ConsoleButton secondary on:click={() => (showDelete = true)}
+                        >Delete</ConsoleButton>
+                </svelte:fragment>
+            </FloatingActionBar>
+        </div>
+    {/if}
+</div>
+
+<RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
+
+<Confirm title="Delete Documents" bind:open={showDelete} onSubmit={handleDelete}>
+    <div>
+        Are you sure you want to delete <b>{selectedRows.length}</b>
+        {selectedRows.length > 1 ? 'documents' : 'document'}?
+
+        {#if relAttributes?.length}
+            <Table.Root
+                let:root
+                columns={[
+                    { id: 'relation', width: 150 },
+                    { id: 'setting', width: 150 },
+                    { id: 'desc' }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="relation" {root}>Relation</Table.Header.Cell>
+                    <Table.Header.Cell column="setting" {root}>Setting</Table.Header.Cell>
+                    <Table.Header.Cell column="desc" {root} />
+                </svelte:fragment>
+                {#each relAttributes as attr}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="relation" {root}>
+                            <span class="u-flex u-cross-center u-gap-8">
+                                {#if attr.twoWay}
+                                    <span class="icon-switch-horizontal"></span>
+                                {:else}
+                                    <span class="icon-arrow-sm-right"></span>
+                                {/if}
+                                <span data-private>{attr.key}</span>
+                            </span>
+                        </Table.Cell>
+                        <Table.Cell column="setting" {root}>
+                            {attr.onDelete}
+                        </Table.Cell>
+                        <Table.Cell column="desc" {root}>
+                            {Deletion[attr.onDelete]}
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+            <div class="u-flex u-flex-vertical u-gap-16">
+                <Alert>To change the selection edit the relationship settings.</Alert>
+
+                <ul>
+                    <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
+                        Delete document from <span data-private>{$collection.name}</span>
+                    </InputChoice>
+                </ul>
+            </div>
+        {:else}
+            <p class="u-bold">This action is irreversible.</p>
+        {/if}
+    </div>
+</Confirm>
+
+<style lang="scss">
+    .floating-action-bar {
+        left: 50%;
+        width: 100%;
+        z-index: 14;
+        position: absolute;
+        transform: translateX(-50%);
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 374adf90fe..c6b612ea30 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -1,5 +1,5 @@
 import { page } from '$app/stores';
-import type { Column } from '$lib/helpers/types';
+import type { SheetColumn } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 
@@ -25,6 +25,6 @@ export const attributes = derived(
 );
 export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]);
 
-export const columns = writable<Column[]>([]);
+export const columns = writable<SheetColumn[]>([]);
 
 export const isCsvImportInProgress = writable(false);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
deleted file mode 100644
index d8530b13ed..0000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/table.svelte
+++ /dev/null
@@ -1,365 +0,0 @@
-<script lang="ts">
-    import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, Confirm, Id } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
-    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,
-        isString
-    } from './document-[document]/attributes/store';
-    import RelationshipsModal from './relationshipsModal.svelte';
-    import { attributes, collection, columns } from './store';
-    import type { ColumnType } from '$lib/helpers/types';
-    import {
-        Tooltip,
-        Table,
-        Button,
-        Link,
-        Badge,
-        FloatingActionBar,
-        InteractiveText,
-        Typography
-    } from '@appwrite.io/pink-svelte';
-    import { toLocaleDateTime } from '$lib/helpers/date';
-    import DualTimeView from '$lib/components/dualTimeView.svelte';
-
-    export let data: PageData;
-
-    const databaseId = page.params.database;
-    const collectionId = page.params.collection;
-
-    let displayNames = {};
-    let showRelationships = false;
-    let selectedRelationship: Models.AttributeRelationship = null;
-    let relationshipData: Partial<Models.Document>[];
-
-    onMount(async () => {
-        displayNames = preferences.getDisplayNames();
-    });
-
-    function formatArray(array: unknown[]) {
-        if (array.length === 0) return '[ ]';
-
-        let formattedFields: string[] = [];
-        for (const item of array) {
-            if (typeof item === 'string') {
-                formattedFields.push(`"${item}"`);
-            } else {
-                formattedFields.push(`${item}`);
-            }
-        }
-
-        return `[${formattedFields.join(', ')}]`;
-    }
-
-    function formatColumn(column: unknown) {
-        let formattedColumn: string;
-
-        if (typeof column === 'string') {
-            formattedColumn = column;
-        } else if (Array.isArray(column)) {
-            formattedColumn = formatArray(column);
-        } else if (column === null) {
-            formattedColumn = 'null';
-        } else {
-            formattedColumn = `${column}`;
-        }
-
-        return {
-            value:
-                formattedColumn.length > 20
-                    ? `${formattedColumn.slice(0, 20)}...`
-                    : formattedColumn,
-            truncated: formattedColumn.length > 20,
-            whole: `${formattedColumn.slice(0, 100)}...`
-        };
-    }
-
-    $: selected = preferences.getCustomCollectionColumns(page.params.collection);
-
-    $: {
-        columns.set(
-            $collection.attributes.map((attribute) => ({
-                id: attribute.key,
-                title: attribute.key,
-                type: attribute.type as ColumnType,
-                hide: !!selected?.includes(attribute.key),
-                array: attribute?.array,
-                width: { min: 168 },
-                format:
-                    'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
-                elements: 'elements' in attribute ? attribute.elements : null
-            }))
-        );
-    }
-
-    let selectedRows: string[] = [];
-    let showDelete = false;
-
-    async function handleDelete() {
-        showDelete = false;
-
-        const promises = selectedRows.map((documentId) =>
-            sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.deleteDocument(databaseId, collectionId, documentId)
-        );
-        try {
-            await Promise.all(promises);
-            trackEvent(Submit.DocumentDelete);
-            addNotification({
-                type: 'success',
-                message: `${selectedRows.length} document${selectedRows.length > 1 ? 's' : ''} deleted`
-            });
-            invalidate(Dependencies.DOCUMENTS);
-        } catch (error) {
-            addNotification({
-                type: 'error',
-                message: error.message
-            });
-            trackError(error, Submit.DocumentDelete);
-        } finally {
-            selectedRows = [];
-            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) &&
-            // One-to-One are always included
-            (attribute.relationType === 'oneToOne' ||
-                // One-to-Many: Only if parent is deleted
-                (attribute.relationType === 'oneToMany' && attribute.side === 'parent') ||
-                // Many-to-One: Only include if child is deleted
-                (attribute.relationType === 'manyToOne' && attribute.side === 'child') ||
-                // Many-to-Many: Only include if the parent is being deleted
-                (isRelationshipToMany(attribute) && attribute.side === 'parent'))
-    ) as Models.AttributeRelationship[];
-
-    let checked = false;
-</script>
-
-<Table.Root
-    let:root
-    allowSelection
-    bind:selectedRows
-    columns={[
-        { id: '$id', width: 200 },
-        ...$columns,
-        { id: '$created', width: 200 },
-        { id: '$updated', width: 200 }
-    ]}>
-    <svelte:fragment slot="header" let:root>
-        <Table.Header.Cell column="$id" {root}>Document ID</Table.Header.Cell>
-        {#each $columns as column}
-            <Table.Header.Cell column={column.id} {root}>{column.title}</Table.Header.Cell>
-        {/each}
-        <Table.Header.Cell column="$created" {root}>Created</Table.Header.Cell>
-        <Table.Header.Cell column="$updated" {root}>Updated</Table.Header.Cell>
-    </svelte:fragment>
-    {#each data.documents.documents as document (document.$id)}
-        <Table.Row.Link
-            {root}
-            id={document.$id}
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${$collection.$id}/document-${document.$id}`}>
-            <Table.Cell column="$id" {root}>
-                {#key document.$id}
-                    <Id value={document.$id}>
-                        {document.$id}
-                    </Id>
-                {/key}
-            </Table.Cell>
-
-            {#each $columns as { id } (id)}
-                {@const attr = $attributes.find((n) => n.key === id)}
-                {#if attr}
-                    <Table.Cell column={id} {root}>
-                        {#if isRelationship(attr)}
-                            {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
-                            {#if !isRelationshipToMany(attr)}
-                                {#if document[id]}
-                                    {@const related = document[id]}
-                                    <Link.Button
-                                        variant="muted"
-                                        on:click={(e) => {
-                                            e.preventDefault();
-                                            e.stopPropagation();
-                                            goto(
-                                                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
-                                            );
-                                        }}>
-                                        {#each args as arg, i}
-                                            {#if arg !== undefined}
-                                                {#if i}
-                                                    &nbsp;|
-                                                {/if}
-                                                <span class="text" data-private>
-                                                    {related?.[arg]}
-                                                </span>
-                                            {/if}
-                                        {/each}
-                                    </Link.Button>
-                                {:else}
-                                    <span class="text">n/a</span>
-                                {/if}
-                            {:else}
-                                {@const itemsNum = document[id]?.length}
-                                <Button.Button
-                                    variant="extra-compact"
-                                    disabled={!itemsNum}
-                                    badge={itemsNum ?? 0}
-                                    on:click={(e) => {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                        relationshipData = document[id];
-                                        showRelationships = true;
-                                        selectedRelationship = attr;
-                                    }}>
-                                    Items
-                                </Button.Button>
-                            {/if}
-                        {:else}
-                            {@const datetime = document[id]}
-                            {@const formatted = formatColumn(document[id])}
-                            {@const isDatetimeAttribute = attr.type === 'datetime'}
-                            {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
-                            {#if isDatetimeAttribute}
-                                <DualTimeView time={datetime}>
-                                    <span slot="title">Timestamp</span>
-                                    {toLocaleDateTime(datetime, true)}
-                                </DualTimeView>
-                            {:else if isEncryptedAttribute}
-                                <button on:click={(e) => e.preventDefault()}>
-                                    <InteractiveText
-                                        copy={false}
-                                        variant="secret"
-                                        isVisible={false}
-                                        text={formatted.value} />
-                                </button>
-                            {:else if formatted.truncated}
-                                <Tooltip placement="bottom" disabled={!formatted.truncated}>
-                                    <Typography.Text truncate>{formatted.value}</Typography.Text>
-                                    <span
-                                        let:showing
-                                        slot="tooltip"
-                                        style:white-space="pre-wrap"
-                                        style:word-break="break-all">
-                                        {#if showing}
-                                            {formatted.whole}
-                                        {/if}
-                                    </span>
-                                </Tooltip>
-                            {:else}
-                                <Typography.Text truncate>{formatted.value}</Typography.Text>
-                            {/if}
-                        {/if}
-                    </Table.Cell>
-                {/if}
-            {/each}
-            <Table.Cell column="$created" {root}>
-                <DualTimeView time={document.$createdAt} />
-            </Table.Cell>
-            <Table.Cell column="$updated" {root}>
-                <DualTimeView time={document.$updatedAt} />
-            </Table.Cell>
-        </Table.Row.Link>
-    {/each}
-</Table.Root>
-
-<RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
-
-{#if selectedRows.length > 0}
-    <div class="floating-action-bar">
-        <FloatingActionBar>
-            <svelte:fragment slot="start">
-                <Badge content={selectedRows.length.toString()} />
-                <span>
-                    {selectedRows.length > 1 ? 'documents' : 'document'}
-                    selected
-                </span>
-            </svelte:fragment>
-            <svelte:fragment slot="end">
-                <ConsoleButton text on:click={() => (selectedRows = [])}>Cancel</ConsoleButton>
-                <ConsoleButton secondary on:click={() => (showDelete = true)}>Delete</ConsoleButton>
-            </svelte:fragment>
-        </FloatingActionBar>
-    </div>
-{/if}
-
-<Confirm title="Delete Documents" bind:open={showDelete} onSubmit={handleDelete}>
-    <div>
-        Are you sure you want to delete <b>{selectedRows.length}</b>
-        {selectedRows.length > 1 ? 'documents' : 'document'}?
-
-        {#if relAttributes?.length}
-            <Table.Root
-                let:root
-                columns={[
-                    { id: 'relation', width: 150 },
-                    { id: 'setting', width: 150 },
-                    { id: 'desc' }
-                ]}>
-                <svelte:fragment slot="header" let:root>
-                    <Table.Header.Cell column="relation" {root}>Relation</Table.Header.Cell>
-                    <Table.Header.Cell column="setting" {root}>Setting</Table.Header.Cell>
-                    <Table.Header.Cell column="desc" {root} />
-                </svelte:fragment>
-                {#each relAttributes as attr}
-                    <Table.Row.Base {root}>
-                        <Table.Cell column="relation" {root}>
-                            <span class="u-flex u-cross-center u-gap-8">
-                                {#if attr.twoWay}
-                                    <span class="icon-switch-horizontal"></span>
-                                {:else}
-                                    <span class="icon-arrow-sm-right"></span>
-                                {/if}
-                                <span data-private>{attr.key}</span>
-                            </span>
-                        </Table.Cell>
-                        <Table.Cell column="setting" {root}>
-                            {attr.onDelete}
-                        </Table.Cell>
-                        <Table.Cell column="desc" {root}>
-                            {Deletion[attr.onDelete]}
-                        </Table.Cell>
-                    </Table.Row.Base>
-                {/each}
-            </Table.Root>
-            <div class="u-flex u-flex-vertical u-gap-16">
-                <Alert>To change the selection edit the relationship settings.</Alert>
-
-                <ul>
-                    <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
-                        Delete document from <span data-private>{$collection.name}</span>
-                    </InputChoice>
-                </ul>
-            </div>
-        {:else}
-            <p class="u-bold">This action is irreversible.</p>
-        {/if}
-    </div>
-</Confirm>
-
-<style>
-    .floating-action-bar :global(div:first-of-type) {
-        /* 50% > 60% because we have sub-navigation */
-        left: calc(60% - var(--p-floating-action-bar-width) / 2);
-    }
-</style>

From 585e918f5880931641a137fa9f5297baa799d67b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 15 Jul 2025 13:29:42 +0530
Subject: [PATCH 005/118] updates: to spreadsheet.

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  18 +-
 src/lib/components/dualTimeView.svelte        |  79 +--
 src/lib/helpers/types.ts                      |   3 +
 src/lib/layout/notifications.svelte           |   2 +-
 src/lib/layout/shell.svelte                   |   6 +
 .../collection-[collection]/+page.svelte      |  80 +--
 .../collection-[collection]/+page.ts          |   4 +-
 .../attributes/edit.svelte                    | 119 +++--
 .../create/+page.svelte                       |  32 +-
 .../createRecord.svelte                       | 175 +++++++
 .../collection-[collection]/emptySheet.svelte | 173 +++++++
 .../sheetOptions.svelte                       |  94 ++++
 .../spreadsheet.svelte                        | 490 +++++++++++++-----
 .../collection-[collection]/store.ts          |  18 +
 15 files changed, 1002 insertions(+), 293 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte

diff --git a/package.json b/package.json
index 156fda3325..00b5dcd328 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6f1a295c14..75c75e2295 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -261,8 +261,8 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c}
     version: 1.9.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639}
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -282,8 +282,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3646,7 +3646,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3663,9 +3663,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@373d6a6(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@373d6a659d4abe1318f9f4f415a560b969b27639(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
diff --git a/src/lib/components/dualTimeView.svelte b/src/lib/components/dualTimeView.svelte
index 810e8e50f4..740d992fe5 100644
--- a/src/lib/components/dualTimeView.svelte
+++ b/src/lib/components/dualTimeView.svelte
@@ -88,51 +88,54 @@
 
     <div
         let:hide
+        let:showing
         slot="tooltip"
         role="tooltip"
         style:padding="1rem"
         style:margin="-1rem"
         on:mouseenter={() => (isMouseOverTooltip = true)}
         on:mouseleave={() => hidePopover(hide, false)}>
-        <Layout.Stack gap="s" alignContent="flex-start">
-            <!-- `Raw time` as per design -->
-            <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
-                {#if $$slots.title}
-                    <slot name="title" />
-                {:else}
-                    {timeToString}
-                {/if}
-            </Typography.Caption>
-
-            <!-- `Absolute time` as per design -->
-            <Layout.Stack gap="xxs">
-                <Layout.Stack
-                    direction="row"
-                    alignItems="center"
-                    alignContent="center"
-                    justifyContent="space-between">
-                    <InteractiveText
-                        isVisible
-                        variant="copy"
-                        text={toLocaleDateTime(time, false, 'UTC')}
-                        value={toISOString(time)} />
-
-                    <Badge variant="secondary" content="UTC" size="xs" />
-                </Layout.Stack>
-
-                <Layout.Stack
-                    direction="row"
-                    alignItems="center"
-                    alignContent="center"
-                    justifyContent="space-between">
-                    <InteractiveText
-                        isVisible
-                        variant="copy"
-                        text={toLocaleDateTime(time)}
-                        value={toLocalDateTimeISO(time)} />
-                    <Badge variant="secondary" content="Local" size="xs" />
+        {#if showing}
+            <Layout.Stack gap="s" alignContent="flex-start">
+                <!-- `Raw time` as per design -->
+                <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
+                    {#if $$slots.title}
+                        <slot name="title" />
+                    {:else}
+                        {timeToString}
+                    {/if}
+                </Typography.Caption>
+
+                <!-- `Absolute time` as per design -->
+                <Layout.Stack gap="xxs">
+                    <Layout.Stack
+                        direction="row"
+                        alignItems="center"
+                        alignContent="center"
+                        justifyContent="space-between">
+                        <InteractiveText
+                            isVisible
+                            variant="copy"
+                            text={toLocaleDateTime(time, false, 'UTC')}
+                            value={toISOString(time)} />
+
+                        <Badge variant="secondary" content="UTC" size="xs" />
+                    </Layout.Stack>
+
+                    <Layout.Stack
+                        direction="row"
+                        alignItems="center"
+                        alignContent="center"
+                        justifyContent="space-between">
+                        <InteractiveText
+                            isVisible
+                            variant="copy"
+                            text={toLocaleDateTime(time)}
+                            value={toLocalDateTimeISO(time)} />
+                        <Badge variant="secondary" content="Local" size="xs" />
+                    </Layout.Stack>
                 </Layout.Stack>
             </Layout.Stack>
-        </Layout.Stack>
+        {/if}
     </div>
 </Popover>
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 3bae857e0b..c56e2ccdc2 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -1,3 +1,4 @@
+import type { ComponentType } from 'svelte';
 import type { Writable } from 'svelte/store';
 
 export type PinkColumn = {
@@ -64,6 +65,8 @@ export type SheetColumn = PinkSheetColumn & {
     exclude?: boolean;
     elements?: string[] | { value: string | number; label: string }[];
     encrypt?: boolean;
+    icon?: ComponentType;
+    isPrimary?: boolean;
 };
 
 export function isValueOfStringEnum<T extends Record<string, string>>(
diff --git a/src/lib/layout/notifications.svelte b/src/lib/layout/notifications.svelte
index a1306f3d1b..ef072472bf 100644
--- a/src/lib/layout/notifications.svelte
+++ b/src/lib/layout/notifications.svelte
@@ -31,7 +31,7 @@
         position: fixed;
         top: calc(var(--main-header-height) + 12px);
         right: 12px;
-        z-index: 1000;
+        z-index: 1001;
     }
 
     @media (min-width: 768px) {
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 6aab786626..5b594e367b 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -237,6 +237,12 @@
                 padding-left: 210px;
             }
         }
+
+        @media (max-width: 768px) {
+            .main-content {
+                position: fixed;
+            }
+        }
     }
 
     .overlay {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index d50dc364af..e097213a17 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -1,15 +1,14 @@
 <script lang="ts">
-    import { Empty, EmptySearch } from '$lib/components';
+    import { EmptySearch } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
     import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
-    import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { Card, Icon, Layout, Empty as PinkEmpty, Divider } from '@appwrite.io/pink-svelte';
+    // import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
+    import { Icon, Layout, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
-    import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
     import { collection, columns, isCsvImportInProgress } from './store';
@@ -24,11 +23,14 @@
     import { base } from '$app/paths';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
+    import EmptySheet from './emptySheet.svelte';
+    import CreateRecord from './createRecord.svelte';
 
     export let data: PageData;
 
     let showImportCSV = false;
     let showCreateAttribute = false;
+    let showRecordsCreateSheet = false;
     let selectedAttribute: Option['name'] = null;
 
     const filterColumns = writable<SheetColumn[]>([]);
@@ -108,7 +110,7 @@
                         <Button
                             secondary
                             disabled={!(hasAttributes && hasValidAttributes)}
-                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                            on:click={() => (showRecordsCreateSheet = true)}
                             event="create_document">
                             <Icon icon={IconPlus} slot="start" size="s" />
                             Create document
@@ -120,17 +122,20 @@
                 <Button
                     secondary
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
+                    on:click={() => (showRecordsCreateSheet = true)}
                     event="create_document">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create document
                 </Button>
             {/if}
         </Layout.Stack>
+    </Container>
 
+    <div class="databases-spreadsheet">
         {#if hasAttributes && hasValidAttributes}
             {#if data.documents.total}
-                <!-- nothing for now -->
+                <Divider />
+                <SpreadSheet {data} />
             {:else if $hasPageQueries}
                 <EmptySearch hidePages>
                     <div class="common-section">
@@ -154,63 +159,12 @@
                     </div>
                 </EmptySearch>
             {:else}
-                <Empty
-                    allowCreate={$canWriteDocuments}
-                    single
-                    href="https://appwrite.io/docs/products/databases/documents"
-                    target="document">
-                    <svelte:fragment slot="actions">
-                        <Button
-                            external
-                            href="https://appwrite.io/docs/products/databases/documents"
-                            text
-                            event="empty_documentation"
-                            size="s"
-                            ariaLabel="create document">Documentation</Button>
-                        <Button
-                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/create`}
-                            secondary
-                            disabled={!$canWriteDocuments}
-                            size="s">
-                            Create document
-                        </Button>
-                    </svelte:fragment>
-                </Empty>
+                <EmptySheet on:record={() => (showRecordsCreateSheet = true)} />
             {/if}
         {:else}
-            <Card.Base padding="none">
-                <PinkEmpty
-                    title="Create an attribute to get started."
-                    description="Need a hand? Learn more in our documentation.">
-                    <slot name="actions" slot="actions">
-                        <Button
-                            external
-                            href="https://appwrite.io/docs/products/databases/collections#attributes"
-                            text
-                            event="empty_documentation"
-                            size="s">Documentation</Button>
-                        {#if $canWriteCollections}
-                            <CreateAttributeDropdown
-                                bind:selectedOption={selectedAttribute}
-                                bind:showCreate={showCreateAttribute}
-                                let:toggle>
-                                <Button secondary event="create_attribute" on:click={toggle}>
-                                    Create attribute
-                                </Button>
-                            </CreateAttributeDropdown>
-                        {/if}
-                    </slot>
-                </PinkEmpty>
-            </Card.Base>
+            <EmptySheet on:record={() => (showRecordsCreateSheet = true)} />
         {/if}
-    </Container>
-
-    {#if hasAttributes && hasValidAttributes && data.documents.total}
-        <Divider />
-        <div class="databases-spreadsheet">
-            <SpreadSheet {data} />
-        </div>
-    {/if}
+    </div>
 {/key}
 
 {#if showCreateAttribute}
@@ -231,3 +185,7 @@
             imageWidth: 32
         }} />
 {/if}
+
+{#if showRecordsCreateSheet}
+    <CreateRecord collection={$collection} bind:showSheet={showRecordsCreateSheet} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
index 107d096f6b..2f22ca60f4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
@@ -1,4 +1,4 @@
-import { Dependencies, PAGE_LIMIT } from '$lib/constants';
+import { Dependencies /*PAGE_LIMIT*/ } from '$lib/constants';
 import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { Query } from '@appwrite.io/console';
@@ -8,7 +8,7 @@ import { queries, queryParamToMap } from '$lib/components/filters';
 export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.DOCUMENTS);
     const page = getPage(url);
-    const limit = getLimit(url, route, PAGE_LIMIT);
+    const limit = getLimit(url, route, 18 /*PAGE_LIMIT*/);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 8b23bb11fd..9a1b9b3d00 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -8,19 +8,31 @@
     import { Button, InputText } from '$lib/elements/forms';
     import deepEqual from 'deep-equal';
     import { addNotification } from '$lib/stores/notifications';
-    import type { Attributes } from '../store';
+    import { type Attributes, databaseSheetOptions } from '../store';
     import { attributeOptions, type Option } from './store';
+    import { onMount } from 'svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
+    export let isModal = true;
     export let showEdit = false;
     export let selectedAttribute: Attributes;
 
+    let originalKey = '';
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
-    let originalKey = '';
 
     let error: string;
     let currentAttr: Attributes;
 
+    onMount(() => {
+        if (!isModal) {
+            databaseSheetOptions.update((opts) => ({
+                ...opts,
+                submitAction: () => submit()
+            }));
+        }
+    });
+
     $: option = attributeOptions.find((option) => {
         if (selectedAttribute) {
             if ('format' in selectedAttribute && selectedAttribute.format) {
@@ -35,20 +47,33 @@
         try {
             await option.update(databaseId, collectionId, selectedAttribute, originalKey);
             await invalidate(Dependencies.COLLECTION);
-            if (!page.url.pathname.includes('attributes')) {
+
+            if (isModal && !page.url.pathname.includes('attributes')) {
                 await goto(
                     `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
                 );
             }
+
             addNotification({
                 type: 'success',
                 message: `Attribute ${selectedAttribute.key} has been updated`
             });
             showEdit = false;
             trackEvent(Submit.AttributeUpdate);
+
+            if (!isModal) {
+                invalidate(Dependencies.DOCUMENTS);
+                $databaseSheetOptions.show = false;
+            }
         } catch (e) {
             error = e.message;
             trackError(e, Submit.AttributeUpdate);
+            if (!isModal) {
+                addNotification({
+                    type: 'error',
+                    message: error
+                });
+            }
         }
     }
 
@@ -64,40 +89,64 @@
             currentAttr = null;
         }
     }
+
+    $: $databaseSheetOptions.disableSubmit = deepEqual(currentAttr, selectedAttribute);
 </script>
 
-<Modal {error} bind:show={showEdit} onSubmit={submit} {title}>
-    <svelte:fragment slot="title">
-        <div class="u-flex u-cross-center u-gap-8">
-            {option?.name}
-            {#if option?.type === 'relationship'}
-                <div class="tag eyebrow-heading-3">
-                    <span class="text u-x-small">Experimental</span>
-                </div>
-            {/if}
-        </div>
-    </svelte:fragment>
+{#if isModal}
+    <Modal {error} bind:show={showEdit} onSubmit={submit} {title}>
+        <svelte:fragment slot="title">
+            <div class="u-flex u-cross-center u-gap-8">
+                {option?.name}
+                {#if option?.type === 'relationship'}
+                    <div class="tag eyebrow-heading-3">
+                        <span class="text u-x-small">Experimental</span>
+                    </div>
+                {/if}
+            </div>
+        </svelte:fragment>
 
-    {#if selectedAttribute}
-        {#if selectedAttribute?.type !== 'relationship'}
-            <InputText
-                id="key"
-                label="Attribute Key"
-                placeholder="Enter Key"
-                bind:value={selectedAttribute.key}
-                autofocus />
-        {/if}
-        {#if option}
-            <svelte:component
-                this={option.component}
-                editing
-                bind:data={selectedAttribute}
-                onclose={() => (option = null)} />
+        {#if selectedAttribute}
+            {#if selectedAttribute?.type !== 'relationship'}
+                <InputText
+                    id="key"
+                    label="Attribute Key"
+                    placeholder="Enter Key"
+                    bind:value={selectedAttribute.key}
+                    autofocus />
+            {/if}
+            {#if option}
+                <svelte:component
+                    this={option.component}
+                    editing
+                    bind:data={selectedAttribute}
+                    onclose={() => (option = null)} />
+            {/if}
         {/if}
-    {/if}
 
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
-        <Button submit disabled={deepEqual(currentAttr, selectedAttribute)}>Update</Button>
-    </svelte:fragment>
-</Modal>
+        <svelte:fragment slot="footer">
+            <Button secondary on:click={() => (showEdit = false)}>Cancel</Button>
+            <Button submit disabled={deepEqual(currentAttr, selectedAttribute)}>Update</Button>
+        </svelte:fragment>
+    </Modal>
+{:else if selectedAttribute}
+    <Layout.Stack gap="xxxl">
+        <Layout.Stack gap="l">
+            {#if selectedAttribute?.type !== 'relationship'}
+                <InputText
+                    id="key"
+                    label="Attribute Key"
+                    placeholder="Enter Key"
+                    bind:value={selectedAttribute.key}
+                    autofocus />
+            {/if}
+            {#if option}
+                <svelte:component
+                    this={option.component}
+                    editing
+                    bind:data={selectedAttribute}
+                    onclose={() => (option = null)} />
+            {/if}
+        </Layout.Stack>
+    </Layout.Stack>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
index f41ee8067c..4390fc5907 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
@@ -2,7 +2,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Wizard } from '$lib/layout';
-    import { Alert, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Alert, Fieldset, Layout, Sheet, Typography } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { sdk } from '$lib/stores/sdk';
@@ -83,13 +83,9 @@
     }
 </script>
 
-<Wizard
-    title="Create document"
-    href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/`}
-    bind:showExitModal
-    column
-    columnSize="s"
-    confirmExit>
+<Sheet bind:open={showExitModal}>
+    <div slot="header">Create document</div>
+
     <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
         <Layout.Stack gap="xxl">
             <Fieldset legend="Data">
@@ -127,13 +123,13 @@
         </Layout.Stack>
     </Form>
 
-    <svelte:fragment slot="footer">
-        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
-        <Button
-            fullWidthMobile
-            on:click={() => formComponent.triggerSubmit()}
-            disabled={$isSubmitting}>
-            Create
-        </Button>
-    </svelte:fragment>
-</Wizard>
+    <!--    <svelte:fragment slot="footer">-->
+    <!--        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>-->
+    <!--        <Button-->
+    <!--            fullWidthMobile-->
+    <!--            on:click={() => formComponent.triggerSubmit()}-->
+    <!--            disabled={$isSubmitting}>-->
+    <!--            Create-->
+    <!--        </Button>-->
+    <!--    </svelte:fragment>-->
+</Sheet>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
new file mode 100644
index 0000000000..f082fb3f0a
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
@@ -0,0 +1,175 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import Form from '$lib/elements/forms/form.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import AttributeForm from './document-[document]/attributeForm.svelte';
+    import { Permissions } from '$lib/components/permissions';
+    import type { Attributes } from './store';
+    import { ID, type Models } from '@appwrite.io/console';
+    import { Alert, Divider, Layout, Sheet, Typography } from '@appwrite.io/pink-svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let showSheet = false;
+    export let collection: Models.Collection;
+
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    type CreateDocument = {
+        id?: string;
+        document: object;
+        permissions: string[];
+        attributes: Attributes[];
+    };
+
+    function createDocumentWritable() {
+        const availableAttributes = collection.attributes.filter((a) => a.status === 'available');
+        const initial = {
+            id: null,
+            document: availableAttributes.reduce((acc, attr) => {
+                acc[attr.key] = attr.array ? [] : null;
+
+                return acc;
+            }, {}),
+            permissions: [],
+            attributes: availableAttributes
+        };
+
+        const store = writable<CreateDocument>({ ...initial });
+
+        return store;
+    }
+
+    const createDocument = createDocumentWritable();
+
+    async function create() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .databases.createDocument(
+                    page.params.database,
+                    page.params.collection,
+                    $createDocument.id ?? ID.unique(),
+                    $createDocument.document,
+                    $createDocument.permissions
+                );
+
+            showSheet = false;
+            addNotification({
+                message: 'Document has been created',
+                type: 'success'
+            });
+            invalidate(Dependencies.DOCUMENTS);
+            trackEvent(Submit.DocumentCreate, {
+                customId: !!$createDocument.id
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.DocumentCreate);
+        }
+    }
+</script>
+
+<div class="sheet-container">
+    <Sheet bind:open={showSheet} closeOnBlur={false}>
+        <svelte:fragment slot="header">
+            <Layout.Stack>
+                Create document
+
+                <!-- TODO: add a ID badge-->
+            </Layout.Stack>
+        </svelte:fragment>
+
+        <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+            <Layout.Stack direction="column" justifyContent="space-evenly">
+                <Layout.Stack gap="xxl">
+                    <AttributeForm
+                        bind:formValues={$createDocument.document}
+                        attributes={$createDocument.attributes}
+                        bind:customId={$createDocument.id} />
+
+                    <Layout.Stack gap="xl">
+                        <Typography.Text>
+                            Choose which permission scopes to grant your application. It is best
+                            practice to allow only the permissions you need to meet your project
+                            goals.
+                        </Typography.Text>
+                        {#if collection.documentSecurity}
+                            <Alert.Inline status="info">
+                                <svelte:fragment slot="title"
+                                    >Document security is enabled</svelte:fragment>
+                                Users will be able to access this document if they have been granted
+                                <b>either document or collection permissions</b>.
+                            </Alert.Inline>
+                            <Permissions bind:permissions={$createDocument.permissions} />
+                        {:else}
+                            <Alert.Inline status="info">
+                                <svelte:fragment slot="title"
+                                    >Document security is disabled</svelte:fragment>
+                                If you want to assign document permissions, navigate to Collection settings
+                                and enable document security. Otherwise, only collection permissions
+                                will be used.
+                            </Alert.Inline>
+                        {/if}
+                    </Layout.Stack>
+                </Layout.Stack>
+
+                <div class="sheet-footer">
+                    <Layout.Stack gap="l">
+                        <Divider />
+
+                        <div class="sheet-footer-actions">
+                            <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
+                                <Button
+                                    size="s"
+                                    secondary
+                                    fullWidthMobile
+                                    on:click={() => (showSheet = false)}>Cancel</Button>
+
+                                <Button
+                                    size="s"
+                                    fullWidthMobile
+                                    disabled={$isSubmitting}
+                                    on:click={() => formComponent.triggerSubmit()}>
+                                    Create
+                                </Button>
+                            </Layout.Stack>
+                        </div>
+                    </Layout.Stack>
+                </div>
+            </Layout.Stack>
+        </Form>
+    </Sheet>
+</div>
+
+<style>
+    .sheet-container {
+        top: 0;
+        position: absolute;
+
+        & :global(aside header) {
+            @media (max-width: 768px) {
+                margin-top: 6rem;
+            }
+        }
+    }
+
+    .sheet-footer {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+
+        & .sheet-footer-actions {
+            padding: var(--space-8);
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte
new file mode 100644
index 0000000000..03a1a53320
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte
@@ -0,0 +1,173 @@
+<script lang="ts">
+    import { createEventDispatcher } from 'svelte';
+    import {
+        Button,
+        Icon,
+        Layout,
+        Spreadsheet,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
+
+    const staticColumns = [
+        {
+            id: '$id',
+            title: 'ID',
+            width: 200,
+            draggable: false,
+            type: 'string',
+            icon: IconFingerPrint
+        },
+        {
+            id: '$createdAt',
+            title: 'createdAt',
+            width: { min: 180 },
+            draggable: false,
+            type: 'datetime',
+            icon: IconCalendar
+        },
+        {
+            id: '$updatedAt',
+            title: 'updatedAt',
+            width: { min: 180 },
+            draggable: false,
+            type: 'datetime',
+            icon: IconCalendar
+        },
+        {
+            id: 'actions',
+            title: '',
+            width: 555,
+            draggable: false,
+            type: 'string',
+            icon: IconPlus
+        },
+        {
+            id: 'empty',
+            title: '',
+            width: 40,
+            isAction: true,
+            draggable: false,
+            type: 'string'
+        }
+    ];
+
+    const dispatch = createEventDispatcher();
+</script>
+
+<div class="spreadsheet-container-outer">
+    <Spreadsheet.Root allowSelection emptyCells={20} height="fit-content" columns={staticColumns}>
+        <svelte:fragment slot="header" let:root>
+            {#each staticColumns as column (column.id)}
+                {#if column.isAction}
+                    <Spreadsheet.Header.Cell column="actions" {root}>
+                        <Button.Button icon variant="extra-compact" on:click={() => {}}>
+                            <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
+                        </Button.Button>
+                    </Spreadsheet.Header.Cell>
+                {:else}
+                    <Spreadsheet.Header.Cell
+                        {root}
+                        column={column.id}
+                        icon={column.icon ?? undefined}>
+                        {column.title}
+                    </Spreadsheet.Header.Cell>
+                {/if}
+            {/each}
+        </svelte:fragment>
+    </Spreadsheet.Root>
+
+    <div class="spreadsheet-fade-bottom">
+        <div class="empty-actions">
+            <Layout.Stack gap="xl">
+                <Typography.Title>You have no records yet</Typography.Title>
+
+                <Layout.Stack>
+                    <Button.Button
+                        icon
+                        size="s"
+                        variant="secondary"
+                        on:click={() => dispatch('record')}>
+                        <Icon icon={IconPlus} size="s" />
+                        Create record
+                    </Button.Button>
+
+                    <Tooltip>
+                        <Button.Button
+                            size="s"
+                            variant="secondary"
+                            on:click={() => dispatch('random')}>
+                            Generate random data
+                        </Button.Button>
+
+                        <span slot="tooltip"> Yet to be added </span>
+                    </Tooltip>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .spreadsheet-container-outer {
+        width: 100%;
+        overflow: hidden;
+        position: fixed;
+
+        @media (max-width: 768px) {
+            position: unset;
+        }
+
+        & :global(.spreadsheet-container) {
+            overflow-x: hidden;
+            overflow-y: hidden;
+        }
+
+        & :global([data-select='true']) {
+            opacity: 0.85;
+            pointer-events: none;
+        }
+    }
+
+    .spreadsheet-fade-bottom {
+        bottom: 0;
+        width: 100%;
+        height: 70vh;
+        position: fixed;
+        background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.855) 21%,
+            #ffffff 100%
+        );
+
+        z-index: 20;
+        display: flex;
+        justify-content: center;
+
+        @media (max-width: 768px) {
+            height: 50vh;
+        }
+    }
+
+    :global(.theme-dark) .spreadsheet-fade-bottom {
+        background: linear-gradient(
+            180deg,
+            rgba(25, 25, 28, 0.38) 13%,
+            rgba(25, 25, 28, 0.7) 21%,
+            rgba(25, 25, 28, 0.95) 38%,
+            var(--bgcolor-neutral-default, #19191c) 100%
+        );
+    }
+
+    .empty-actions {
+        bottom: 30%;
+        position: fixed;
+
+        @media (min-width: 1024px) {
+            left: 55%;
+            bottom: 40%;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
new file mode 100644
index 0000000000..45038080ce
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
@@ -0,0 +1,94 @@
+<script lang="ts" module>
+    export type Action =
+        | 'update'
+        | 'column-left'
+        | 'column-right'
+        | 'duplicate-row'
+        | 'create-index'
+        | 'sort-asc'
+        | 'sort-desc'
+        | 'delete';
+</script>
+
+<script lang="ts">
+    import type { ComponentType, Snippet } from 'svelte';
+    import { Divider, Popover, ActionMenu } from '@appwrite.io/pink-svelte';
+    import {
+        IconArrowLeft,
+        IconArrowRight,
+        IconDuplicate,
+        IconPencil,
+        IconSortAscending,
+        IconSortDescending,
+        IconTrash
+    } from '@appwrite.io/pink-icons-svelte';
+    import { type Attributes, databaseSheetOptions } from './store';
+
+    interface MenuItem {
+        label?: string;
+        action?: Action;
+        danger?: boolean;
+        divider?: boolean;
+        icon?: ComponentType;
+    }
+
+    // Only allow sort for these columns
+    const internalColumns = ['$id', '$createdAt', '$updatedAt'];
+
+    const menuItems: MenuItem[] = [
+        { label: 'Update', icon: IconPencil, action: 'update' },
+        { label: 'Insert column left', icon: IconArrowLeft, action: 'column-left' },
+        { label: 'Insert column right', icon: IconArrowRight, action: 'column-right' },
+        { label: 'Duplicate', icon: IconDuplicate, action: 'duplicate-row' },
+        { divider: true },
+        { label: 'Create index', icon: IconPencil, action: 'create-index' },
+        { label: 'Sort ascending', icon: IconSortAscending, action: 'sort-asc' },
+        { label: 'Sort descending', icon: IconSortDescending, action: 'sort-desc' },
+        { divider: true },
+        { label: 'Delete', icon: IconTrash, action: 'delete', danger: true }
+    ];
+
+    let {
+        column,
+        children,
+        onSelect
+    }: {
+        column: Attributes;
+        onSelect: (option: Action) => void;
+        children: Snippet<[toggle: (event: Event) => void]>;
+    } = $props();
+
+    function handleSelect(action: Action, hide: () => void) {
+        hide();
+        onSelect(action);
+        $databaseSheetOptions.column = column;
+    }
+
+    function shouldShow(item: MenuItem) {
+        if (item.action === 'sort-asc' || item.action === 'sort-desc') {
+            return internalColumns.includes(column?.key);
+        }
+        return true;
+    }
+</script>
+
+<Popover let:toggle padding="none" placement="bottom">
+    {@render children(toggle)}
+
+    <svelte:fragment slot="tooltip" let:hide>
+        <ActionMenu.Root width="180px" noPadding>
+            {#each menuItems as item, index (index)}
+                {#if item.divider}
+                    <Divider />
+                {:else if shouldShow(item)}
+                    <ActionMenu.Item.Button
+                        leadingIcon={item.icon}
+                        status={item.danger ? 'danger' : undefined}
+                        on:click={() => item.action && handleSelect(item.action, hide)}>
+                        {item.label}
+                    </ActionMenu.Item.Button>
+                {/if}
+            {/each}
+        </ActionMenu.Root>
+    </svelte:fragment>
+</Popover>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index c01de102c3..071003b738 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -10,15 +10,15 @@
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import { type Models, Query } from '@appwrite.io/console';
-    import { onMount } from 'svelte';
+    import { type ComponentType, onMount } from 'svelte';
     import type { PageData } from './$types';
     import {
         isRelationship,
         isRelationshipToMany,
         isString
     } from './document-[document]/attributes/store';
+    import { attributes, collection, columns, databaseSheetOptions } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
-    import { attributes, collection, columns } from './store';
     import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
     import {
         Tooltip,
@@ -31,11 +31,32 @@
         FloatingActionBar,
         Icon,
         InteractiveText,
-        Typography
+        Typography,
+        Sheet,
+        Divider
     } from '@appwrite.io/pink-svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
-    import { IconDotsHorizontal, IconPlus, IconText } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconCalendar,
+        IconDotsHorizontal,
+        IconPlus,
+        IconRelationship,
+        IconFingerPrint,
+        IconHashtag,
+        IconLink,
+        IconLocationMarker,
+        IconMail,
+        IconText,
+        IconToggle,
+        IconViewList,
+        IconSelector,
+        IconChevronUp,
+        IconChevronDown
+    } from '@appwrite.io/pink-icons-svelte';
+    import SheetOptions from './sheetOptions.svelte';
+    import { type Action } from './sheetOptions.svelte';
+    import EditAttribute from './attributes/edit.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
 
     export let data: PageData;
@@ -51,12 +72,11 @@
     let spreadsheetHeight = '75vh';
     let spreadsheetWrapper: HTMLDivElement;
 
+    $: documents = data.documents;
+
     function resizeSheet() {
         if (!spreadsheetWrapper) return;
         const rect = spreadsheetWrapper.getBoundingClientRect();
-
-        document.body.style.overflow = 'hidden';
-        document.documentElement.style.overflow = 'hidden';
         spreadsheetHeight = window.innerHeight - rect.top + 'px';
     }
 
@@ -103,6 +123,30 @@
         };
     }
 
+    function getAppropriateIcon(type: string): ComponentType {
+        switch (type) {
+            case 'string':
+                return IconText;
+            case 'float':
+            case 'integer':
+                return IconHashtag;
+            case 'boolean':
+                return IconToggle;
+            case 'datetime':
+                return IconCalendar;
+            case 'email':
+                return IconMail;
+            case 'ip':
+                return IconLocationMarker;
+            case 'url':
+                return IconLink;
+            case 'enum':
+                return IconViewList;
+            case 'relationship':
+                return IconRelationship;
+        }
+    }
+
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
     $: {
@@ -114,25 +158,35 @@
             array: attribute?.array,
             width: { min: 168 },
             draggable: true,
+            icon: getAppropriateIcon(attribute.type),
             format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
             elements: 'elements' in attribute ? attribute.elements : null
         }));
 
         const staticColumns: SheetColumn[] = [
-            { id: '$id', title: 'Document ID', width: 200, draggable: false, type: 'string' },
             {
-                id: '$created',
-                title: 'Created',
-                width: { min: 200 },
+                id: '$id',
+                title: 'ID',
+                width: 200,
                 draggable: false,
-                type: 'datetime'
+                type: 'string',
+                icon: IconFingerPrint
             },
             {
-                id: '$updated',
-                title: 'Updated',
+                id: '$createdAt',
+                title: 'createdAt',
                 width: { min: 200 },
-                draggable: false,
-                type: 'datetime'
+                draggable: true,
+                type: 'datetime',
+                icon: IconCalendar
+            },
+            {
+                id: '$updatedAt',
+                title: 'updatedAt',
+                width: { min: 200 },
+                draggable: true,
+                type: 'datetime',
+                icon: IconCalendar
             },
             {
                 id: 'actions',
@@ -149,12 +203,43 @@
             ...baseColumns,
             staticColumns[1],
             staticColumns[2],
-            staticColumns[3],
+            staticColumns[3]
         ]);
     }
 
-    let selectedRows: string[] = [];
+    let loading = false;
     let showDelete = false;
+    let showColumnDelete = false;
+    let selectedRows: string[] = [];
+
+    let sortBy: string | null = null;
+    let sortDir: 'asc' | 'desc' | null = null;
+
+    async function sort(columnId: string) {
+        loading = true;
+        if (sortBy !== columnId) {
+            sortBy = columnId;
+            sortDir = 'asc';
+        } else if (sortDir === 'asc') {
+            sortDir = 'desc';
+        } else if (sortDir === 'desc') {
+            sortBy = null;
+            sortDir = null;
+        } else {
+            sortDir = 'asc';
+        }
+
+        let query: string[] = [];
+        if (sortBy && sortDir) {
+            query = [sortDir === 'asc' ? Query.orderAsc(sortBy) : Query.orderDesc(sortBy)];
+        }
+
+        documents = await sdk
+            .forProject(page.params.region, page.params.project)
+            .databases.listDocuments(databaseId, collectionId, query);
+
+        loading = false;
+    }
 
     async function handleDelete() {
         showDelete = false;
@@ -180,6 +265,32 @@
         }
     }
 
+    async function handleColumnDelete() {
+        showColumnDelete = false;
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .databases.deleteAttribute(
+                    databaseId,
+                    collectionId,
+                    $databaseSheetOptions.column.key
+                );
+
+            trackEvent(Submit.AttributeDelete);
+            addNotification({
+                type: 'success',
+                message: 'Attribute deleted'
+            });
+            invalidate(Dependencies.COLLECTION);
+            invalidate(Dependencies.DOCUMENTS);
+        } catch (error) {
+            addNotification({ type: 'error', message: error.message });
+            trackError(error, Submit.AttributeDelete);
+        } finally {
+            showColumnDelete = false;
+        }
+    }
+
     enum Deletion {
         'setNull' = 'Set document ID as NULL in all related documents',
         'cascade' = 'All related documents will be deleted',
@@ -201,6 +312,25 @@
 
     let checked = false;
 
+    function onSelectSheetOption(type: Action) {
+        if (type === 'update') {
+            $databaseSheetOptions.show = true;
+            $databaseSheetOptions.isEdit = true;
+            $databaseSheetOptions.title = 'update column';
+        }
+
+        if (type === 'column-left' || type === 'column-right') {
+            $databaseSheetOptions.show = true;
+            $databaseSheetOptions.title = 'New column';
+        }
+
+        if (type === 'delete') {
+            showColumnDelete = true;
+        }
+
+        $databaseSheetOptions.column = null;
+    }
+
     const emptyCellsLimit = $isSmallViewport ? 12 : 18;
 
     $: emptyCellsCount =
@@ -211,9 +341,14 @@
 
 <svelte:window on:resize={resizeSheet} />
 
-<div bind:this={spreadsheetWrapper} style:height={spreadsheetHeight} style:position="relative">
+<div
+    bind:this={spreadsheetWrapper}
+    style:height={spreadsheetHeight}
+    style:position="relative"
+    style:width="100%">
     <Spreadsheet.Root
         let:root
+        {loading}
         height="100%"
         allowSelection
         bind:selectedRows
@@ -231,122 +366,149 @@
                         </Button.Button>
                     </Spreadsheet.Header.Cell>
                 {:else}
-                    <Spreadsheet.Header.Cell column={column.id} {root} icon={IconText}>
-                        {column.title}
-                    </Spreadsheet.Header.Cell>
+                    <SheetOptions
+                        column={$attributes.find((attr) => attr.key === column.id)}
+                        onSelect={onSelectSheetOption}>
+                        {#snippet children(toggle)}
+                            <Spreadsheet.Header.Cell
+                                {root}
+                                column={column.id}
+                                icon={column.icon ?? IconText}
+                                on:contextmenu={toggle}>
+                                <Layout.Stack
+                                    gap="xxxs"
+                                    direction="row"
+                                    alignItems="center"
+                                    alignContent="center">
+                                    {column.title}
+                                    <Button.Button
+                                        icon
+                                        variant="extra-compact"
+                                        on:click={() => sort(column.id)}>
+                                        <Icon
+                                            size="s"
+                                            icon={sortBy === column.id
+                                                ? sortDir === 'asc'
+                                                    ? IconChevronUp
+                                                    : IconChevronDown
+                                                : IconSelector} />
+                                    </Button.Button>
+                                </Layout.Stack>
+                            </Spreadsheet.Header.Cell>
+                        {/snippet}
+                    </SheetOptions>
                 {/if}
             {/each}
         </svelte:fragment>
 
-        {#each data.documents.documents as document (document.$id)}
-            <!-- TODO: open sheet on click -->
+        {#each documents.documents as document (document.$id)}
+            <!-- TODO: add `value` for user attributes -->
             <Spreadsheet.Row.Base {root} id={document.$id}>
-                <Spreadsheet.Cell column="$id" {root}>
-                    {#key document.$id}
-                        <Id value={document.$id}>
-                            {document.$id}
-                        </Id>
-                    {/key}
-                </Spreadsheet.Cell>
-
                 {#each $columns as { id } (id)}
-                    {@const attr = $attributes.find((n) => n.key === id)}
-                    {#if attr}
-                        {@const formatted = formatColumn(document[id])}
-                        <Spreadsheet.Cell column={id} {root} value={formatted.value}>
-                            {#if isRelationship(attr)}
-                                {@const args = displayNames?.[attr.relatedCollection] ?? ['$id']}
-                                {#if !isRelationshipToMany(attr)}
-                                    {#if document[id]}
-                                        {@const related = document[id]}
-                                        <Link.Button
-                                            variant="muted"
+                    {@const formatted = formatColumn(document[id])}
+                    <Spreadsheet.Cell
+                        {root}
+                        column={id}
+                        value={id.includes('$') || formatted.value === 'null'
+                            ? undefined
+                            : formatted.value}>
+                        {#if id === '$id'}
+                            <Id value={document.$id}>{document.$id}</Id>
+                        {:else if id === '$createdAt' || id === '$updatedAt'}
+                            <DualTimeView time={document[id]} />
+                        {:else if id === 'actions'}
+                            <Button.Button icon variant="extra-compact">
+                                <Icon icon={IconDotsHorizontal} color="--fgcolor-neutral-primary" />
+                            </Button.Button>
+                        {:else}
+                            {@const attr = $attributes.find((n) => n.key === id)}
+                            {#if attr}
+                                {#if isRelationship(attr)}
+                                    {@const args = displayNames?.[attr.relatedCollection] ?? [
+                                        '$id'
+                                    ]}
+                                    {#if !isRelationshipToMany(attr)}
+                                        {#if document[id]}
+                                            {@const related = document[id]}
+                                            <Link.Button
+                                                variant="muted"
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    goto(
+                                                        `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection/${attr.relatedCollection}/document/${related.$id}`
+                                                    );
+                                                }}>
+                                                {#each args as arg, i}
+                                                    {#if arg !== undefined}
+                                                        {#if i}&nbsp;|{/if}
+                                                        <span class="text" data-private
+                                                            >{related?.[arg]}</span>
+                                                    {/if}
+                                                {/each}
+                                            </Link.Button>
+                                        {:else}
+                                            <span class="text">n/a</span>
+                                        {/if}
+                                    {:else}
+                                        {@const itemsNum = document[id]?.length}
+                                        <Button.Button
+                                            variant="extra-compact"
+                                            disabled={!itemsNum}
+                                            badge={itemsNum ?? 0}
                                             on:click={(e) => {
-                                                e.preventDefault();
                                                 e.stopPropagation();
-                                                goto(
-                                                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attr.relatedCollection}/document-${related.$id}`
-                                                );
+                                                e.preventDefault();
+                                                relationshipData = document[id];
+                                                showRelationships = true;
+                                                selectedRelationship = attr;
                                             }}>
-                                            {#each args as arg, i}
-                                                {#if arg !== undefined}
-                                                    {#if i}
-                                                        &nbsp;|
-                                                    {/if}
-                                                    <span class="text" data-private>
-                                                        {related?.[arg]}
-                                                    </span>
-                                                {/if}
-                                            {/each}
-                                        </Link.Button>
-                                    {:else}
-                                        <span class="text">n/a</span>
+                                            Items
+                                        </Button.Button>
                                     {/if}
                                 {:else}
-                                    {@const itemsNum = document[id]?.length}
-                                    <Button.Button
-                                        variant="extra-compact"
-                                        disabled={!itemsNum}
-                                        badge={itemsNum ?? 0}
-                                        on:click={(e) => {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            relationshipData = document[id];
-                                            showRelationships = true;
-                                            selectedRelationship = attr;
-                                        }}>
-                                        Items
-                                    </Button.Button>
-                                {/if}
-                            {:else}
-                                {@const datetime = document[id]}
-                                {@const isDatetimeAttribute = attr.type === 'datetime'}
-                                {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
-                                {#if isDatetimeAttribute}
-                                    <DualTimeView time={datetime}>
-                                        <span slot="title">Timestamp</span>
-                                        {toLocaleDateTime(datetime, true)}
-                                    </DualTimeView>
-                                {:else if isEncryptedAttribute}
-                                    <button on:click={(e) => e.preventDefault()}>
-                                        <InteractiveText
-                                            copy={false}
-                                            variant="secret"
-                                            isVisible={false}
-                                            text={formatted.value} />
-                                    </button>
-                                {:else if formatted.truncated}
-                                    <Tooltip placement="bottom" disabled={!formatted.truncated}>
+                                    {@const value = document[id]}
+                                    {@const formatted = formatColumn(document[id])}
+                                    {@const isDatetimeAttribute = attr.type === 'datetime'}
+                                    {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
+                                    {#if isDatetimeAttribute}
+                                        <DualTimeView time={value}>
+                                            <span slot="title">Timestamp</span>
+                                            {toLocaleDateTime(value, true)}
+                                        </DualTimeView>
+                                    {:else if isEncryptedAttribute}
+                                        <button on:click={(e) => e.preventDefault()}>
+                                            <InteractiveText
+                                                copy={false}
+                                                variant="secret"
+                                                isVisible={false}
+                                                text={formatted.value} />
+                                        </button>
+                                    {:else if formatted.truncated}
+                                        <Tooltip placement="bottom" disabled={!formatted.truncated}>
+                                            <Typography.Text truncate
+                                                >{formatted.value}</Typography.Text>
+                                            <span
+                                                let:showing
+                                                slot="tooltip"
+                                                style:white-space="pre-wrap"
+                                                style:word-break="break-all">
+                                                {#if showing}
+                                                    {formatted.whole}
+                                                {/if}
+                                            </span>
+                                        </Tooltip>
+                                    {:else if formatted.value === 'null'}
+                                        <Badge variant="secondary" content="NULL" size="xs" />
+                                    {:else}
                                         <Typography.Text truncate
                                             >{formatted.value}</Typography.Text>
-                                        <span
-                                            let:showing
-                                            slot="tooltip"
-                                            style:white-space="pre-wrap"
-                                            style:word-break="break-all">
-                                            {#if showing}
-                                                {formatted.whole}
-                                            {/if}
-                                        </span>
-                                    </Tooltip>
-                                {:else}
-                                    <Typography.Text truncate>{formatted.value}</Typography.Text>
+                                    {/if}
                                 {/if}
                             {/if}
-                        </Spreadsheet.Cell>
-                    {/if}
+                        {/if}
+                    </Spreadsheet.Cell>
                 {/each}
-                <Spreadsheet.Cell column="$created" {root}>
-                    <DualTimeView time={document.$createdAt} />
-                </Spreadsheet.Cell>
-                <Spreadsheet.Cell column="$updated" {root}>
-                    <DualTimeView time={document.$updatedAt} />
-                </Spreadsheet.Cell>
-                <Spreadsheet.Cell column="actions" {root}>
-                    <Button.Button icon variant="extra-compact">
-                        <Icon icon={IconDotsHorizontal} color="--fgcolor-neutral-primary" />
-                    </Button.Button>
-                </Spreadsheet.Cell>
             </Spreadsheet.Row.Base>
         {/each}
 
@@ -359,10 +521,12 @@
                 <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                     {selectedRows.length
                         ? `${selectedRows.length} records selected`
-                        : `${data.documents.documents.length} records`}
+                        : `${documents.documents.length} records`}
                 </Typography.Text>
 
-                <Button.Button variant="extra-compact">Generate random data</Button.Button>
+                <div style:margin-right="var(--space-6)">
+                    <Button.Button variant="extra-compact">Generate random data</Button.Button>
+                </div>
             </Layout.Stack>
         </svelte:fragment>
     </Spreadsheet.Root>
@@ -371,13 +535,15 @@
         <div class="floating-action-bar">
             <FloatingActionBar>
                 <svelte:fragment slot="start">
-                    <Layout.Stack direction="row" alignItems="center" gap="m">
-                        <Badge content={selectedRows.length.toString()} />
-                        <span>
-                            {selectedRows.length > 1 ? 'documents' : 'document'}
-                            selected
-                        </span>
-                    </Layout.Stack>
+                    <div style:width="max-content">
+                        <Layout.Stack direction="row" alignItems="center" gap="m">
+                            <Badge content={selectedRows.length.toString()} />
+                            <span style:font-size="14px">
+                                {selectedRows.length > 1 ? 'documents' : 'document'}
+                                selected
+                            </span>
+                        </Layout.Stack>
+                    </div>
                 </svelte:fragment>
                 <svelte:fragment slot="end">
                     <ConsoleButton text on:click={() => (selectedRows = [])}>Cancel</ConsoleButton>
@@ -445,6 +611,63 @@
     </div>
 </Confirm>
 
+<Confirm
+    title="Delete column"
+    bind:open={showColumnDelete}
+    onSubmit={handleColumnDelete}
+    confirmDeletion>
+    <p>Are you sure you want to delete "<b>{$databaseSheetOptions.column.key}</b>"?</p>
+
+    <p>
+        This will permanently remove all data stored in this column across all records. This action
+        is irreversible.
+    </p>
+</Confirm>
+
+<div style="position: absolute; top: 0; ">
+    <Sheet bind:open={$databaseSheetOptions.show} closeOnBlur={false}>
+        <div slot="header" style:width="100%">
+            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Layout.Stack direction="row" gap="m" alignItems="center">
+                    <Typography.Text variant="m-400">{$databaseSheetOptions.title}</Typography.Text>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+
+        <Layout.Stack direction="column" justifyContent="space-evenly">
+            <Layout.Stack gap="xl">
+                <EditAttribute
+                    isModal={false}
+                    showEdit={$databaseSheetOptions.isEdit}
+                    selectedAttribute={$databaseSheetOptions.column} />
+            </Layout.Stack>
+
+            <div class="sheet-footer">
+                <Layout.Stack gap="l">
+                    <Divider />
+
+                    <div class="sheet-footer-actions">
+                        <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
+                            <Button.Button
+                                size="s"
+                                variant="secondary"
+                                on:click={() => ($databaseSheetOptions.show = false)}
+                                >Cancel</Button.Button>
+
+                            <Button.Button
+                                size="s"
+                                disabled={$databaseSheetOptions.disableSubmit}
+                                on:click={() => $databaseSheetOptions.submitAction()}>
+                                Update
+                            </Button.Button>
+                        </Layout.Stack>
+                    </div>
+                </Layout.Stack>
+            </div>
+        </Layout.Stack>
+    </Sheet>
+</div>
+
 <style lang="scss">
     .floating-action-bar {
         left: 50%;
@@ -453,4 +676,15 @@
         position: absolute;
         transform: translateX(-50%);
     }
+
+    .sheet-footer {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+
+        & .sheet-footer-actions {
+            padding: var(--space-8);
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index c6b612ea30..167e570ebe 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -28,3 +28,21 @@ export const indexes = derived(page, ($page) => $page.data.collection.indexes as
 export const columns = writable<SheetColumn[]>([]);
 
 export const isCsvImportInProgress = writable(false);
+
+type DatabaseSheetOptions = {
+    show: boolean;
+    title?: string;
+    column?: Attributes;
+    isEdit?: boolean;
+    disableSubmit?: boolean;
+    submitAction?: () => Promise<void>;
+};
+
+export const databaseSheetOptions = writable<DatabaseSheetOptions>({
+    title: null,
+    show: false,
+    column: null,
+    isEdit: false,
+    disableSubmit: false,
+    submitAction: null
+});

From 380b241a78a75dcadd25bf805484fe09eb7fdf4c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 15 Jul 2025 18:21:02 +0530
Subject: [PATCH 006/118] updates: to spreadsheet.

---
 src/lib/components/filters/store.ts           |  14 +-
 .../collection-[collection]/+page.svelte      |  35 +-
 .../collection-[collection]/+page.ts          |   3 +-
 .../attributes/+page.svelte                   | 357 ++++++++++--------
 .../attributes/createAttributeDropdown.svelte |   6 +-
 .../attributes/edit.svelte                    |   3 +-
 .../create/+page.svelte                       | 135 -------
 .../createRecord.svelte                       | 143 +++----
 .../collection-[collection]/emptySheet.svelte | 173 ---------
 .../indexes/+page.svelte                      | 224 +++++------
 .../layout/emptySheet.svelte                  | 241 ++++++++++++
 .../layout/sidesheet.svelte                   |  91 +++++
 .../layout/spreadsheet.svelte                 |  24 ++
 .../spreadsheet.svelte                        | 103 ++---
 14 files changed, 775 insertions(+), 777 deletions(-)
 delete mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
 delete mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte

diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts
index 6be45f6a0f..970874334d 100644
--- a/src/lib/components/filters/store.ts
+++ b/src/lib/components/filters/store.ts
@@ -1,10 +1,10 @@
 import { goto } from '$app/navigation';
-import { derived, get, writable } from 'svelte/store';
 import { page } from '$app/stores';
 import deepEqual from 'deep-equal';
-import type { Column, ColumnType } from '$lib/helpers/types';
 import { Query } from '@appwrite.io/console';
 import { toLocaleDateTime } from '$lib/helpers/date';
+import { derived, get, writable } from 'svelte/store';
+import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
 
 export type TagValue = {
     tag: string;
@@ -14,7 +14,7 @@ export type TagValue = {
 export type Operator = {
     toTag: (attribute: string, input?: string | number | string[], type?: string) => TagValue;
     toQuery: (attribute: string, input?: string | number | string[]) => string;
-    types: ColumnType[];
+    types: SheetColumnType[];
     hideInput?: boolean;
 };
 
@@ -33,7 +33,7 @@ function initQueries(initialValue = new Map<TagValue, string>()) {
 
     type AddFilterArgs = {
         operator: Operator;
-        column: Column;
+        column: SheetColumn;
         value: string | number | string[];
     };
 
@@ -91,14 +91,14 @@ export const tags = derived(queries, ($queries) => Array.from($queries.keys()));
 
 /* eslint  @typescript-eslint/no-explicit-any: 'off' */
 export function addFilter(
-    columns: Column[],
+    columns: SheetColumn[],
     columnId: string,
     operatorKey: string,
     value: any, // We cast to any to not cause type errors in the input components
     arrayValues: string[] = []
 ) {
     const operator = operatorKey ? operators[operatorKey] : null;
-    const column = columns.find((c) => c.id === columnId) as Column;
+    const column = columns.find((c) => c.id === columnId) as SheetColumn;
     if (!column || !operator) return;
     if (column.array) {
         queries.addFilter({ column, operator, value: arrayValues });
@@ -135,7 +135,7 @@ const operatorsDefault = new Map<
     ValidOperators,
     {
         query: (attr: string, input: string | number | string[]) => string;
-        types: ColumnType[];
+        types: SheetColumnType[];
         hideInput?: boolean;
     }
 >([
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index e097213a17..ab482f31bc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -20,11 +20,12 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { base } from '$app/paths';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
-    import EmptySheet from './emptySheet.svelte';
+    import EmptySheet from './layout/emptySheet.svelte';
     import CreateRecord from './createRecord.svelte';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
 
     export let data: PageData;
 
@@ -135,7 +136,7 @@
         {#if hasAttributes && hasValidAttributes}
             {#if data.documents.total}
                 <Divider />
-                <SpreadSheet {data} />
+                <SpreadSheet {data} bind:showRecordsCreateSheet />
             {:else if $hasPageQueries}
                 <EmptySearch hidePages>
                     <div class="common-section">
@@ -159,10 +160,30 @@
                     </div>
                 </EmptySearch>
             {:else}
-                <EmptySheet on:record={() => (showRecordsCreateSheet = true)} />
+                <EmptySheet
+                    mode="records"
+                    cta={{
+                        primary: {
+                            onClick: () => {
+                                showRecordsCreateSheet = true;
+                            }
+                        }
+                    }} />
             {/if}
         {:else}
-            <EmptySheet on:record={() => (showRecordsCreateSheet = true)} />
+            <EmptySheet
+                mode="records"
+                title="You have no columns yet"
+                cta={{
+                    primary: {
+                        text: 'Create column',
+                        onClick: async () => {
+                            await goto(
+                                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/attributes`
+                            );
+                        }
+                    }
+                }} />
         {/if}
     </div>
 {/key}
@@ -186,6 +207,4 @@
         }} />
 {/if}
 
-{#if showRecordsCreateSheet}
-    <CreateRecord collection={$collection} bind:showSheet={showRecordsCreateSheet} />
-{/if}
+<CreateRecord collection={$collection} bind:showSheet={showRecordsCreateSheet} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
index 2f22ca60f4..a8a40b4c1a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
@@ -8,7 +8,8 @@ import { queries, queryParamToMap } from '$lib/components/filters';
 export const load: PageLoad = async ({ params, depends, url, route }) => {
     depends(Dependencies.DOCUMENTS);
     const page = getPage(url);
-    const limit = getLimit(url, route, 18 /*PAGE_LIMIT*/);
+    // TODO: apply pagination
+    const limit = getLimit(url, route, 96 /*PAGE_LIMIT*/);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index e94163b7b7..211b1dcad4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -1,7 +1,4 @@
 <script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Empty } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { canWriteCollections } from '$lib/stores/roles';
@@ -12,7 +9,8 @@
         Layout,
         Link,
         Popover,
-        Table,
+        Selector,
+        Spreadsheet,
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
@@ -20,10 +18,10 @@
     import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
-    import { attributes, type Attributes, isCsvImportInProgress } from '../store';
+    import { attributes, type Attributes, indexes, isCsvImportInProgress } from '../store';
     import CreateAttributeDropdown from './createAttributeDropdown.svelte';
     import Delete from './deleteAttribute.svelte';
-    import Edit from './edit.svelte';
+    import EditAttribute from './edit.svelte';
     import { attributeOptions, type Option } from './store';
     import {
         IconArrowSmRight,
@@ -40,19 +38,23 @@
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import CsvDisabled from '../csvDisabled.svelte';
-
-    const databaseId = page.params.database;
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import SideSheet from '../layout/sidesheet.svelte';
+    import SpreadsheetContainer from '../layout/spreadsheet.svelte';
+    import EmptySheet from '../layout/emptySheet.svelte';
 
     let showDropdown = [];
     let selectedOption: Option['name'] = null;
     let selectedAttribute: Attributes = null;
     let showCreate = false;
     let showDelete = false;
-    let showEdit = false;
     let showCreateIndex = false;
     let showFailed = false;
     let error = '';
 
+    let showEdit = false;
+    let editAttribute: EditAttribute;
+
     const attributeFormatIcon = {
         ip: IconLocationMarker,
         url: IconLink,
@@ -72,181 +74,197 @@
                 return undefined;
         }
     }
+
+    const emptyCellsLimit = $isSmallViewport ? 14 : 16;
+
+    $: emptyCellsCount =
+        $attributes.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $attributes.length;
 </script>
 
-<Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Typography.Title>Attributes</Typography.Title>
+<Container expanded style="background: var(--bgcolor-neutral-primary)">
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        <!-- TODO: filters? -->
         {#if $canWriteCollections}
             <CreateAttributeDropdown bind:selectedOption bind:showCreate />
         {/if}
     </Layout.Stack>
+</Container>
 
+<div class="databases-spreadsheet">
     {#if $attributes.length}
-        <Table.Root
-            let:root
-            columns={[
-                { id: 'key' },
-                { id: 'type' },
-                { id: 'default' },
-                { id: 'actions', width: 40 }
-            ]}>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
-                <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
-                <Table.Header.Cell column="default" {root}>Default value</Table.Header.Cell>
-                <Table.Header.Cell column="actions" {root} />
-            </svelte:fragment>
-            {#each $attributes as attribute, index}
-                {@const option = attributeOptions.find((option) => option.type === attribute.type)}
-                <Table.Row.Base {root}>
-                    <Table.Cell column="key" {root}>
-                        <Layout.Stack direction="row" alignItems="center">
-                            {#if isRelationship(attribute)}
-                                <Icon
-                                    size="s"
-                                    icon={attribute?.twoWay
-                                        ? IconSwitchHorizontal
-                                        : IconArrowSmRight} />
-                            {:else if 'format' in attribute && attribute.format}
-                                {@const icon = attributeFormatIcon[attribute?.format]}
-                                <Icon {icon} size="s" />
-                            {:else}
-                                <Icon icon={option.icon} size="s" />
-                            {/if}
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Layout.Stack inline direction="row" alignItems="center" gap="xxs">
-                                    <span class="text u-trim-1" data-private>{attribute.key}</span>
-                                    {#if isString(attribute) && attribute.encrypt}
-                                        <Tooltip>
-                                            <Icon
-                                                size="s"
-                                                icon={IconLockClosed}
-                                                color="--fgcolor-neutral-tertiary" />
-                                            <div slot="tooltip">Encrypted</div>
-                                        </Tooltip>
-                                    {/if}
-                                </Layout.Stack>
-                                {#if attribute.status !== 'available'}
-                                    <Badge
+        <SpreadsheetContainer>
+            <Spreadsheet.Root
+                let:root
+                height="100%"
+                emptyCells={emptyCellsCount}
+                columns={[
+                    { id: 'key', width: { min: 200 } },
+                    { id: 'indexed', width: { min: 150 } },
+                    { id: 'default', width: { min: 200 } },
+                    { id: 'actions', width: 40, isAction: true }
+                ]}>
+                <svelte:fragment slot="header" let:root>
+                    <Spreadsheet.Header.Cell column="key" {root}
+                        >Column name</Spreadsheet.Header.Cell>
+                    <Spreadsheet.Header.Cell column="indexed" {root}
+                        >Indexed</Spreadsheet.Header.Cell>
+                    <Spreadsheet.Header.Cell column="default" {root}
+                        >Default value</Spreadsheet.Header.Cell>
+                    <Spreadsheet.Header.Cell column="actions" {root} />
+                </svelte:fragment>
+
+                {#each $attributes as attribute, index}
+                    {@const option = attributeOptions.find(
+                        (option) => option.type === attribute.type
+                    )}
+                    <Spreadsheet.Row.Base {root}>
+                        <Spreadsheet.Cell column="key" {root} isEditable={false}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                {#if isRelationship(attribute)}
+                                    <Icon
                                         size="s"
-                                        variant="secondary"
-                                        content={attribute.status}
-                                        type={getAttributeStatusBadge(attribute.status)} />
-                                    {#if attribute.error}
-                                        <Link.Button
-                                            variant="muted"
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                error = attribute.error;
-                                                showFailed = true;
-                                            }}>Details</Link.Button>
-                                    {/if}
-                                {:else if attribute.required}
-                                    <Badge size="xs" variant="secondary" content="required" />
+                                        icon={attribute?.twoWay
+                                            ? IconSwitchHorizontal
+                                            : IconArrowSmRight} />
+                                {:else if 'format' in attribute && attribute.format}
+                                    {@const icon = attributeFormatIcon[attribute?.format]}
+                                    <Icon {icon} size="s" />
+                                {:else}
+                                    <Icon icon={option.icon} size="s" />
                                 {/if}
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Layout.Stack
+                                        inline
+                                        direction="row"
+                                        alignItems="center"
+                                        gap="xxs">
+                                        <span class="text u-trim-1" data-private
+                                            >{attribute.key}</span>
+                                        {#if isString(attribute) && attribute.encrypt}
+                                            <Tooltip>
+                                                <Icon
+                                                    size="s"
+                                                    icon={IconLockClosed}
+                                                    color="--fgcolor-neutral-tertiary" />
+                                                <div slot="tooltip">Encrypted</div>
+                                            </Tooltip>
+                                        {/if}
+                                    </Layout.Stack>
+                                    {#if attribute.status !== 'available'}
+                                        <Badge
+                                            size="s"
+                                            variant="secondary"
+                                            content={attribute.status}
+                                            type={getAttributeStatusBadge(attribute.status)} />
+                                        {#if attribute.error}
+                                            <Link.Button
+                                                variant="muted"
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    error = attribute.error;
+                                                    showFailed = true;
+                                                }}>Details</Link.Button>
+                                        {/if}
+                                    {:else if attribute.required}
+                                        <Badge size="xs" variant="secondary" content="required" />
+                                    {/if}
+                                </Layout.Stack>
                             </Layout.Stack>
-                        </Layout.Stack>
-                    </Table.Cell>
-                    <Table.Cell column="type" {root}>
-                        {#if 'format' in attribute && attribute.format}
-                            <span class="u-capitalize">{attribute.format}</span>
-                        {:else}
-                            <p>
-                                <span class="u-capitalize">{attribute.type}</span>
-                                {#if isRelationship(attribute)}
-                                    <span>
-                                        with <a
-                                            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${attribute?.relatedCollection}`}
-                                            ><b data-private>{attribute?.key}</b></a>
-                                    </span>
-                                {/if}
-                            </p>
-                        {/if}
-                        <span>
-                            {attribute.array ? '[]' : ''}
-                        </span>
-                    </Table.Cell>
-                    <Table.Cell column="default" {root}>
-                        {attribute?.default !== null && attribute?.default !== undefined
-                            ? attribute?.default
-                            : '-'}
-                    </Table.Cell>
-                    <Table.Cell column="actions" {root}>
-                        {#if $isCsvImportInProgress}
-                            <CsvDisabled>
-                                <Button disabled text icon ariaLabel="more options">
-                                    <Icon icon={IconDotsHorizontal} size="s" />
-                                </Button>
-                            </CsvDisabled>
-                        {:else}
-                            <Popover let:toggle padding="none" placement="bottom-end">
-                                <Button text icon ariaLabel="more options" on:click={toggle}>
-                                    <Icon icon={IconDotsHorizontal} size="s" />
-                                </Button>
-                                <ActionMenu.Root slot="tooltip" let:toggle>
-                                    <ActionMenu.Item.Button
-                                        leadingIcon={IconPencil}
-                                        on:click={(event) => {
-                                            toggle(event);
-                                            showEdit = true;
-                                            selectedAttribute = attribute;
-                                            showDropdown[index] = false;
-                                        }}>
-                                        Update
-                                    </ActionMenu.Item.Button>
-                                    {#if !isRelationship(attribute)}
+                        </Spreadsheet.Cell>
+                        <Spreadsheet.Cell column="indexed" {root}>
+                            {@const isIndexed = $indexes.some((index) =>
+                                index.attributes.includes(attribute.key)
+                            )}
+                            <Selector.Checkbox size="s" checked={isIndexed} disabled />
+                        </Spreadsheet.Cell>
+                        <Spreadsheet.Cell column="default" {root}>
+                            {@const _default =
+                                attribute?.default !== null && attribute?.default !== undefined
+                                    ? attribute?.default
+                                    : null}
+
+                            {#if _default === null}
+                                <Badge variant="secondary" content="NULL" size="xs" />
+                            {:else}
+                                {_default}
+                            {/if}
+                        </Spreadsheet.Cell>
+                        <Spreadsheet.Cell column="actions" {root}>
+                            {#if $isCsvImportInProgress}
+                                <CsvDisabled>
+                                    <Button disabled text icon ariaLabel="more options">
+                                        <Icon icon={IconDotsHorizontal} size="s" />
+                                    </Button>
+                                </CsvDisabled>
+                            {:else}
+                                <!-- TODO: no portal, rather see if we can fix the cell -->
+                                <Popover let:toggle padding="none" placement="bottom-end" portal>
+                                    <Button text icon ariaLabel="more options" on:click={toggle}>
+                                        <Icon icon={IconDotsHorizontal} size="s" />
+                                    </Button>
+                                    <ActionMenu.Root slot="tooltip" let:toggle>
                                         <ActionMenu.Item.Button
-                                            leadingIcon={IconPlus}
+                                            leadingIcon={IconPencil}
                                             on:click={(event) => {
                                                 toggle(event);
+                                                showEdit = true;
                                                 selectedAttribute = attribute;
-                                                showCreateIndex = true;
                                                 showDropdown[index] = false;
                                             }}>
-                                            Create index
+                                            Update
                                         </ActionMenu.Item.Button>
-                                    {/if}
-                                    {#if attribute.status !== 'processing'}
-                                        <ActionMenu.Item.Button
-                                            leadingIcon={IconTrash}
-                                            on:click={(event) => {
-                                                toggle(event);
-                                                showDelete = true;
-                                                showDropdown[index] = false;
-                                                selectedAttribute = attribute;
-                                                trackEvent(Click.DatabaseAttributeDelete);
-                                            }}>
-                                            Delete
-                                        </ActionMenu.Item.Button>
-                                    {/if}
-                                </ActionMenu.Root>
-                            </Popover>
-                        {/if}
-                    </Table.Cell>
-                </Table.Row.Base>
-            {/each}
-        </Table.Root>
+                                        {#if !isRelationship(attribute)}
+                                            <ActionMenu.Item.Button
+                                                leadingIcon={IconPlus}
+                                                on:click={(event) => {
+                                                    toggle(event);
+                                                    selectedAttribute = attribute;
+                                                    showCreateIndex = true;
+                                                    showDropdown[index] = false;
+                                                }}>
+                                                Create index
+                                            </ActionMenu.Item.Button>
+                                        {/if}
+                                        {#if attribute.status !== 'processing'}
+                                            <ActionMenu.Item.Button
+                                                status="danger"
+                                                leadingIcon={IconTrash}
+                                                on:click={(event) => {
+                                                    toggle(event);
+                                                    showDelete = true;
+                                                    showDropdown[index] = false;
+                                                    selectedAttribute = attribute;
+                                                    trackEvent(Click.DatabaseAttributeDelete);
+                                                }}>
+                                                Delete
+                                            </ActionMenu.Item.Button>
+                                        {/if}
+                                    </ActionMenu.Root>
+                                </Popover>
+                            {/if}
+                        </Spreadsheet.Cell>
+                    </Spreadsheet.Row.Base>
+                {/each}
+
+                <svelte:fragment slot="footer">
+                    <Layout.Stack
+                        direction="row"
+                        alignContent="center"
+                        alignItems="center"
+                        justifyContent="space-between">
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                            {$attributes.length} columns
+                        </Typography.Text>
+                    </Layout.Stack>
+                </svelte:fragment>
+            </Spreadsheet.Root>
+        </SpreadsheetContainer>
     {:else}
-        <Empty single target="attribute">
-            <svelte:fragment slot="actions">
-                <Button
-                    external
-                    href="https://appwrite.io/docs/products/databases/collections#attributes"
-                    text
-                    event="empty_documentation"
-                    ariaLabel={`create {target}`}>Documentation</Button>
-                {#if $canWriteCollections}
-                    <CreateAttributeDropdown bind:selectedOption bind:showCreate let:toggle>
-                        <Button secondary event="create_attribute" on:click={toggle}>
-                            Create attribute
-                        </Button>
-                    </CreateAttributeDropdown>
-                {/if}
-            </svelte:fragment>
-        </Empty>
+        <!-- TODO: handle these cases -->
+        <!--{#if $canWriteCollections}-->
+        <EmptySheet mode="columns" />
     {/if}
-</Container>
+</div>
 
 {#if showCreate}
     <Create bind:showCreate bind:selectedOption />
@@ -255,8 +273,17 @@
     <Delete bind:showDelete {selectedAttribute} />
 {/if}
 {#if showEdit}
-    <Edit bind:showEdit {selectedAttribute} />
+    <SideSheet
+        title="Edit column"
+        bind:show={showEdit}
+        submit={{
+            text: 'Update',
+            onClick: async () => await editAttribute.submit()
+        }}>
+        <EditAttribute showEdit isModal={false} {selectedAttribute} bind:this={editAttribute} />
+    </SideSheet>
 {/if}
+
 {#if showCreateIndex}
     <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
index 201ef960f8..06a15f7cee 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/createAttributeDropdown.svelte
@@ -6,8 +6,8 @@
     import CsvDisabled from '../csvDisabled.svelte';
     import { isCsvImportInProgress } from '../store';
 
-    export let selectedOption: Option['name'] = null;
     export let showCreate = false;
+    export let selectedOption: Option['name'] = null;
 </script>
 
 {#if $isCsvImportInProgress}
@@ -20,9 +20,9 @@
 {:else}
     <Popover let:toggle padding="none" placement="bottom-start">
         <slot {toggle}>
-            <Button on:click={toggle} event="create_attribute">
+            <Button secondary on:click={toggle} event="create_attribute">
                 <Icon icon={IconPlus} slot="start" size="s" />
-                Create attribute
+                Create column
             </Button>
         </slot>
         <ActionMenu.Root slot="tooltip">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 9a1b9b3d00..9de4c89435 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -43,7 +43,7 @@
         }
     }) as Option;
 
-    async function submit() {
+    export async function submit() {
         try {
             await option.update(databaseId, collectionId, selectedAttribute, originalKey);
             await invalidate(Dependencies.COLLECTION);
@@ -58,6 +58,7 @@
                 type: 'success',
                 message: `Attribute ${selectedAttribute.key} has been updated`
             });
+
             showEdit = false;
             trackEvent(Submit.AttributeUpdate);
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
deleted file mode 100644
index 4390fc5907..0000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/create/+page.svelte
+++ /dev/null
@@ -1,135 +0,0 @@
-<script lang="ts">
-    import { base } from '$app/paths';
-    import { page } from '$app/state';
-    import { Wizard } from '$lib/layout';
-    import { Alert, Fieldset, Layout, Sheet, Typography } from '@appwrite.io/pink-svelte';
-    import Button from '$lib/elements/forms/button.svelte';
-    import Form from '$lib/elements/forms/form.svelte';
-    import { sdk } from '$lib/stores/sdk';
-    import { goto } from '$app/navigation';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { addNotification } from '$lib/stores/notifications';
-    import { writable } from 'svelte/store';
-    import AttributeForm from '../document-[document]/attributeForm.svelte';
-    import { Permissions } from '$lib/components/permissions';
-    import type { PageData } from './$types';
-    import type { Attributes } from '../store';
-    import { ID } from '@appwrite.io/console';
-
-    export let data: PageData;
-
-    let showExitModal = false;
-    let formComponent: Form;
-    let isSubmitting = writable(false);
-
-    type CreateDocument = {
-        id?: string;
-        document: object;
-        permissions: string[];
-        attributes: Attributes[];
-    };
-
-    function createDocumentWritable() {
-        const availableAttributes = (data.collection.attributes as unknown as Attributes[]).filter(
-            (a) => a.status === 'available'
-        );
-        const initial = {
-            id: null,
-            document: availableAttributes.reduce((acc, attr) => {
-                acc[attr.key] = attr.array ? [] : null;
-
-                return acc;
-            }, {}),
-            permissions: [],
-            attributes: availableAttributes
-        };
-
-        const store = writable<CreateDocument>({ ...initial });
-
-        return store;
-    }
-
-    const createDocument = createDocumentWritable();
-
-    async function create() {
-        try {
-            const { $id } = await sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.createDocument(
-                    page.params.database,
-                    page.params.collection,
-                    $createDocument.id ?? ID.unique(),
-                    $createDocument.document,
-                    $createDocument.permissions
-                );
-
-            addNotification({
-                message: 'Document has been created',
-                type: 'success'
-            });
-            trackEvent(Submit.DocumentCreate, {
-                customId: !!$createDocument.id
-            });
-            goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/document-${$id}`
-            );
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.DocumentCreate);
-        }
-    }
-</script>
-
-<Sheet bind:open={showExitModal}>
-    <div slot="header">Create document</div>
-
-    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
-        <Layout.Stack gap="xxl">
-            <Fieldset legend="Data">
-                <AttributeForm
-                    bind:formValues={$createDocument.document}
-                    attributes={$createDocument.attributes}
-                    bind:customId={$createDocument.id} />
-            </Fieldset>
-
-            <Fieldset legend="Permissions">
-                <Layout.Stack gap="xl">
-                    <Typography.Text>
-                        Choose which permission scopes to grant your application. It is best
-                        practice to allow only the permissions you need to meet your project goals.
-                    </Typography.Text>
-                    {#if data.collection.documentSecurity}
-                        <Alert.Inline status="info">
-                            <svelte:fragment slot="title"
-                                >Document security is enabled</svelte:fragment>
-                            Users will be able to access this document if they have been granted
-                            <b>either document or collection permissions</b>.
-                        </Alert.Inline>
-                        <Permissions bind:permissions={$createDocument.permissions} />
-                    {:else}
-                        <Alert.Inline status="info">
-                            <svelte:fragment slot="title"
-                                >Document security is disabled</svelte:fragment>
-                            If you want to assign document permissions, navigate to Collection settings
-                            and enable document security. Otherwise, only collection permissions will
-                            be used.
-                        </Alert.Inline>
-                    {/if}
-                </Layout.Stack>
-            </Fieldset>
-        </Layout.Stack>
-    </Form>
-
-    <!--    <svelte:fragment slot="footer">-->
-    <!--        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>-->
-    <!--        <Button-->
-    <!--            fullWidthMobile-->
-    <!--            on:click={() => formComponent.triggerSubmit()}-->
-    <!--            disabled={$isSubmitting}>-->
-    <!--            Create-->
-    <!--        </Button>-->
-    <!--    </svelte:fragment>-->
-</Sheet>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
index f082fb3f0a..025f0a7ff7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import Form from '$lib/elements/forms/form.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
@@ -10,15 +8,15 @@
     import { Permissions } from '$lib/components/permissions';
     import type { Attributes } from './store';
     import { ID, type Models } from '@appwrite.io/console';
-    import { Alert, Divider, Layout, Sheet, Typography } from '@appwrite.io/pink-svelte';
+    import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import SideSheet from './layout/sidesheet.svelte';
 
     export let showSheet = false;
     export let collection: Models.Collection;
 
-    let formComponent: Form;
-    let isSubmitting = writable(false);
+    let isSubmitting = false;
 
     type CreateDocument = {
         id?: string;
@@ -48,6 +46,8 @@
     const createDocument = createDocumentWritable();
 
     async function create() {
+        isSubmitting = true;
+
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
@@ -74,102 +74,51 @@
                 type: 'error'
             });
             trackError(error, Submit.DocumentCreate);
+        } finally {
+            isSubmitting = false;
         }
     }
 </script>
 
 <div class="sheet-container">
-    <Sheet bind:open={showSheet} closeOnBlur={false}>
-        <svelte:fragment slot="header">
-            <Layout.Stack>
-                Create document
-
-                <!-- TODO: add a ID badge-->
-            </Layout.Stack>
-        </svelte:fragment>
-
-        <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
-            <Layout.Stack direction="column" justifyContent="space-evenly">
-                <Layout.Stack gap="xxl">
-                    <AttributeForm
-                        bind:formValues={$createDocument.document}
-                        attributes={$createDocument.attributes}
-                        bind:customId={$createDocument.id} />
-
-                    <Layout.Stack gap="xl">
-                        <Typography.Text>
-                            Choose which permission scopes to grant your application. It is best
-                            practice to allow only the permissions you need to meet your project
-                            goals.
-                        </Typography.Text>
-                        {#if collection.documentSecurity}
-                            <Alert.Inline status="info">
-                                <svelte:fragment slot="title"
-                                    >Document security is enabled</svelte:fragment>
-                                Users will be able to access this document if they have been granted
-                                <b>either document or collection permissions</b>.
-                            </Alert.Inline>
-                            <Permissions bind:permissions={$createDocument.permissions} />
-                        {:else}
-                            <Alert.Inline status="info">
-                                <svelte:fragment slot="title"
-                                    >Document security is disabled</svelte:fragment>
-                                If you want to assign document permissions, navigate to Collection settings
-                                and enable document security. Otherwise, only collection permissions
-                                will be used.
-                            </Alert.Inline>
-                        {/if}
-                    </Layout.Stack>
-                </Layout.Stack>
-
-                <div class="sheet-footer">
-                    <Layout.Stack gap="l">
-                        <Divider />
-
-                        <div class="sheet-footer-actions">
-                            <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
-                                <Button
-                                    size="s"
-                                    secondary
-                                    fullWidthMobile
-                                    on:click={() => (showSheet = false)}>Cancel</Button>
-
-                                <Button
-                                    size="s"
-                                    fullWidthMobile
-                                    disabled={$isSubmitting}
-                                    on:click={() => formComponent.triggerSubmit()}>
-                                    Create
-                                </Button>
-                            </Layout.Stack>
-                        </div>
-                    </Layout.Stack>
-                </div>
+    <!-- TODO: add a ID badge-->
+    <SideSheet
+        spaced
+        title="Create record"
+        bind:show={showSheet}
+        closeOnBlur={false}
+        submit={{
+            text: 'Create',
+            disabled: isSubmitting,
+            onClick: () => create()
+        }}>
+        <Layout.Stack gap="xxl">
+            <AttributeForm
+                bind:formValues={$createDocument.document}
+                attributes={$createDocument.attributes}
+                bind:customId={$createDocument.id} />
+
+            <Layout.Stack gap="xl">
+                <Typography.Text>
+                    Choose which permission scopes to grant your application. It is best practice to
+                    allow only the permissions you need to meet your project goals.
+                </Typography.Text>
+                {#if collection.documentSecurity}
+                    <Alert.Inline status="info">
+                        <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
+                        Users will be able to access this document if they have been granted
+                        <b>either document or collection permissions</b>.
+                    </Alert.Inline>
+                    <Permissions bind:permissions={$createDocument.permissions} />
+                {:else}
+                    <Alert.Inline status="info">
+                        <svelte:fragment slot="title"
+                            >Document security is disabled</svelte:fragment>
+                        If you want to assign document permissions, navigate to Collection settings and
+                        enable document security. Otherwise, only collection permissions will be used.
+                    </Alert.Inline>
+                {/if}
             </Layout.Stack>
-        </Form>
-    </Sheet>
+        </Layout.Stack>
+    </SideSheet>
 </div>
-
-<style>
-    .sheet-container {
-        top: 0;
-        position: absolute;
-
-        & :global(aside header) {
-            @media (max-width: 768px) {
-                margin-top: 6rem;
-            }
-        }
-    }
-
-    .sheet-footer {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-
-        & .sheet-footer-actions {
-            padding: var(--space-8);
-        }
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte
deleted file mode 100644
index 03a1a53320..0000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/emptySheet.svelte
+++ /dev/null
@@ -1,173 +0,0 @@
-<script lang="ts">
-    import { createEventDispatcher } from 'svelte';
-    import {
-        Button,
-        Icon,
-        Layout,
-        Spreadsheet,
-        Tooltip,
-        Typography
-    } from '@appwrite.io/pink-svelte';
-    import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
-
-    const staticColumns = [
-        {
-            id: '$id',
-            title: 'ID',
-            width: 200,
-            draggable: false,
-            type: 'string',
-            icon: IconFingerPrint
-        },
-        {
-            id: '$createdAt',
-            title: 'createdAt',
-            width: { min: 180 },
-            draggable: false,
-            type: 'datetime',
-            icon: IconCalendar
-        },
-        {
-            id: '$updatedAt',
-            title: 'updatedAt',
-            width: { min: 180 },
-            draggable: false,
-            type: 'datetime',
-            icon: IconCalendar
-        },
-        {
-            id: 'actions',
-            title: '',
-            width: 555,
-            draggable: false,
-            type: 'string',
-            icon: IconPlus
-        },
-        {
-            id: 'empty',
-            title: '',
-            width: 40,
-            isAction: true,
-            draggable: false,
-            type: 'string'
-        }
-    ];
-
-    const dispatch = createEventDispatcher();
-</script>
-
-<div class="spreadsheet-container-outer">
-    <Spreadsheet.Root allowSelection emptyCells={20} height="fit-content" columns={staticColumns}>
-        <svelte:fragment slot="header" let:root>
-            {#each staticColumns as column (column.id)}
-                {#if column.isAction}
-                    <Spreadsheet.Header.Cell column="actions" {root}>
-                        <Button.Button icon variant="extra-compact" on:click={() => {}}>
-                            <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
-                        </Button.Button>
-                    </Spreadsheet.Header.Cell>
-                {:else}
-                    <Spreadsheet.Header.Cell
-                        {root}
-                        column={column.id}
-                        icon={column.icon ?? undefined}>
-                        {column.title}
-                    </Spreadsheet.Header.Cell>
-                {/if}
-            {/each}
-        </svelte:fragment>
-    </Spreadsheet.Root>
-
-    <div class="spreadsheet-fade-bottom">
-        <div class="empty-actions">
-            <Layout.Stack gap="xl">
-                <Typography.Title>You have no records yet</Typography.Title>
-
-                <Layout.Stack>
-                    <Button.Button
-                        icon
-                        size="s"
-                        variant="secondary"
-                        on:click={() => dispatch('record')}>
-                        <Icon icon={IconPlus} size="s" />
-                        Create record
-                    </Button.Button>
-
-                    <Tooltip>
-                        <Button.Button
-                            size="s"
-                            variant="secondary"
-                            on:click={() => dispatch('random')}>
-                            Generate random data
-                        </Button.Button>
-
-                        <span slot="tooltip"> Yet to be added </span>
-                    </Tooltip>
-                </Layout.Stack>
-            </Layout.Stack>
-        </div>
-    </div>
-</div>
-
-<style lang="scss">
-    .spreadsheet-container-outer {
-        width: 100%;
-        overflow: hidden;
-        position: fixed;
-
-        @media (max-width: 768px) {
-            position: unset;
-        }
-
-        & :global(.spreadsheet-container) {
-            overflow-x: hidden;
-            overflow-y: hidden;
-        }
-
-        & :global([data-select='true']) {
-            opacity: 0.85;
-            pointer-events: none;
-        }
-    }
-
-    .spreadsheet-fade-bottom {
-        bottom: 0;
-        width: 100%;
-        height: 70vh;
-        position: fixed;
-        background: linear-gradient(
-            180deg,
-            rgba(255, 255, 255, 0) 0%,
-            rgba(255, 255, 255, 0.855) 21%,
-            #ffffff 100%
-        );
-
-        z-index: 20;
-        display: flex;
-        justify-content: center;
-
-        @media (max-width: 768px) {
-            height: 50vh;
-        }
-    }
-
-    :global(.theme-dark) .spreadsheet-fade-bottom {
-        background: linear-gradient(
-            180deg,
-            rgba(25, 25, 28, 0.38) 13%,
-            rgba(25, 25, 28, 0.7) 21%,
-            rgba(25, 25, 28, 0.95) 38%,
-            var(--bgcolor-neutral-default, #19191c) 100%
-        );
-    }
-
-    .empty-actions {
-        bottom: 30%;
-        position: fixed;
-
-        @media (min-width: 1024px) {
-            left: 55%;
-            bottom: 40%;
-        }
-    }
-</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index f9258a35bc..bd33d72999 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-    import { Empty } from '$lib/components';
     import { Container } from '$lib/layout';
     import { collection } from '../store';
     import Delete from './deleteIndex.svelte';
@@ -8,7 +7,7 @@
     import CreateAttribute from '../createAttribute.svelte';
     import type { Models } from '@appwrite.io/console';
     import { Button } from '$lib/elements/forms';
-    import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
+    // import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
     import type { Option } from '../attributes/store';
     import FailedModal from '../failedModal.svelte';
     import { canWriteCollections } from '$lib/stores/roles';
@@ -19,8 +18,7 @@
         Layout,
         Link,
         Popover,
-        Table,
-        Typography
+        Spreadsheet
     } from '@appwrite.io/pink-svelte';
     import {
         IconDotsHorizontal,
@@ -30,6 +28,11 @@
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import EmptySheet from '../layout/emptySheet.svelte';
+    import SpreadsheetContainer from '../layout/spreadsheet.svelte';
+    import { goto } from '$app/navigation';
+    import { base } from '$app/paths';
+    import { page } from '$app/state';
 
     export let data;
 
@@ -56,11 +59,11 @@
     }
 </script>
 
-<Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Typography.Title>Indexes</Typography.Title>
+<Container expanded style="background: var(--bgcolor-neutral-primary)">
+    <Layout.Stack direction="row" justifyContent="flex-end">
         {#if $canWriteCollections}
             <Button
+                secondary
                 event="create_index"
                 disabled={!$collection?.attributes?.length}
                 on:click={() => (showCreateIndex = true)}>
@@ -69,116 +72,119 @@
             </Button>
         {/if}
     </Layout.Stack>
+</Container>
 
+<div class="databases-spreadsheet">
     {#if data.collection?.attributes?.length}
         {#if data.collection.indexes.length}
-            <Table.Root
-                let:root
-                columns={[
-                    { id: 'key' },
-                    { id: 'type' },
-                    { id: 'attributes' },
-                    { id: 'orders' },
-                    { id: 'lengths' },
-                    { id: 'actions', width: 40 }
-                ]}>
-                <svelte:fragment slot="header" let:root>
-                    <Table.Header.Cell column="key" {root}>Key</Table.Header.Cell>
-                    <Table.Header.Cell column="type" {root}>Type</Table.Header.Cell>
-                    <Table.Header.Cell column="attributes" {root}>Attributes</Table.Header.Cell>
-                    <Table.Header.Cell column="orders" {root}>Orders</Table.Header.Cell>
-                    <Table.Header.Cell column="lengths" {root}>Lengths</Table.Header.Cell>
-                    <Table.Header.Cell column="actions" {root} />
-                </svelte:fragment>
-                {#each data.collection.indexes as index}
-                    <Table.Row.Base {root}>
-                        <Table.Cell column="key" {root}>
-                            <Layout.Stack direction="row" alignItems="center">
-                                {index.key}
-                                {#if index.status !== 'available'}
-                                    <Badge
-                                        size="s"
-                                        variant="secondary"
-                                        content={index.status}
-                                        type={getAttributeStatusBadge(index.status)} />
-                                    {#if index.error}
-                                        <Link.Button
-                                            variant="muted"
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                error = index.error;
-                                                showFailed = true;
-                                            }}>Details</Link.Button>
+            <SpreadsheetContainer>
+                <Spreadsheet.Root
+                    let:root
+                    columns={[
+                        { id: 'key' },
+                        { id: 'type' },
+                        { id: 'attributes' },
+                        { id: 'orders' },
+                        { id: 'lengths' },
+                        { id: 'actions', width: 40 }
+                    ]}>
+                    <svelte:fragment slot="header" let:root>
+                        <Spreadsheet.Header.Cell column="key" {root}>Key</Spreadsheet.Header.Cell>
+                        <Spreadsheet.Header.Cell column="type" {root}>Type</Spreadsheet.Header.Cell>
+                        <Spreadsheet.Header.Cell column="attributes" {root}
+                            >Attributes</Spreadsheet.Header.Cell>
+                        <Spreadsheet.Header.Cell column="orders" {root}
+                            >Orders</Spreadsheet.Header.Cell>
+                        <Spreadsheet.Header.Cell column="lengths" {root}
+                            >Lengths</Spreadsheet.Header.Cell>
+                        <Spreadsheet.Header.Cell column="actions" {root} />
+                    </svelte:fragment>
+                    {#each data.collection.indexes as index}
+                        <Spreadsheet.Row.Base {root}>
+                            <Spreadsheet.Cell column="key" {root}>
+                                <Layout.Stack direction="row" alignItems="center">
+                                    {index.key}
+                                    {#if index.status !== 'available'}
+                                        <Badge
+                                            size="s"
+                                            variant="secondary"
+                                            content={index.status}
+                                            type={getAttributeStatusBadge(index.status)} />
+                                        {#if index.error}
+                                            <Link.Button
+                                                variant="muted"
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    error = index.error;
+                                                    showFailed = true;
+                                                }}>Details</Link.Button>
+                                        {/if}
                                     {/if}
-                                {/if}
-                            </Layout.Stack>
-                        </Table.Cell>
-                        <Table.Cell column="type" {root}>{index.type}</Table.Cell>
-                        <Table.Cell column="attributes" {root}>
-                            {index.attributes}
-                        </Table.Cell>
-                        <Table.Cell column="orders" {root}>
-                            {index.orders}
-                        </Table.Cell>
-                        <Table.Cell column="lengths" {root}>
-                            {index.lengths}
-                        </Table.Cell>
-                        <Table.Cell column="actions" {root}>
-                            <Popover let:toggle padding="none" placement="bottom-end">
-                                <Button text icon ariaLabel="more options" on:click={toggle}>
-                                    <Icon icon={IconDotsHorizontal} size="s" />
-                                </Button>
-                                <ActionMenu.Root slot="tooltip">
-                                    <ActionMenu.Item.Button
-                                        leadingIcon={IconEye}
-                                        on:click={() => {
-                                            selectedIndex = index;
-                                            showOverview = true;
-                                        }}>Overview</ActionMenu.Item.Button>
-                                    <ActionMenu.Item.Button
-                                        leadingIcon={IconTrash}
-                                        on:click={() => {
-                                            selectedIndex = index;
-                                            showDelete = true;
-                                            trackEvent(Click.DatabaseIndexDelete);
-                                        }}>Delete</ActionMenu.Item.Button>
-                                </ActionMenu.Root>
-                            </Popover>
-                        </Table.Cell>
-                    </Table.Row.Base>
-                {/each}
-            </Table.Root>
+                                </Layout.Stack>
+                            </Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="type" {root}>{index.type}</Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="attributes" {root}>
+                                {index.attributes}
+                            </Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="orders" {root}>
+                                {index.orders}
+                            </Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="lengths" {root}>
+                                {index.lengths}
+                            </Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="actions" {root}>
+                                <Popover let:toggle padding="none" placement="bottom-end">
+                                    <Button text icon ariaLabel="more options" on:click={toggle}>
+                                        <Icon icon={IconDotsHorizontal} size="s" />
+                                    </Button>
+                                    <ActionMenu.Root slot="tooltip">
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconEye}
+                                            on:click={() => {
+                                                selectedIndex = index;
+                                                showOverview = true;
+                                            }}>Overview</ActionMenu.Item.Button>
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconTrash}
+                                            on:click={() => {
+                                                selectedIndex = index;
+                                                showDelete = true;
+                                                trackEvent(Click.DatabaseIndexDelete);
+                                            }}>Delete</ActionMenu.Item.Button>
+                                    </ActionMenu.Root>
+                                </Popover>
+                            </Spreadsheet.Cell>
+                        </Spreadsheet.Row.Base>
+                    {/each}
+                </Spreadsheet.Root>
+            </SpreadsheetContainer>
         {:else}
-            <Empty
-                allowCreate={$canWriteCollections}
-                single
-                href="https://appwrite.io/docs/products/databases/collections#indexes"
-                target="index"
-                on:click={() => (showCreateIndex = true)} />
+            <EmptySheet
+                mode="indexes"
+                cta={{
+                    primary: {
+                        onClick: () => (showCreateIndex = true),
+                        disabled: !$collection?.attributes?.length
+                    }
+                }} />
         {/if}
     {:else}
-        <Empty single target="attribute">
-            <svelte:fragment slot="actions">
-                <Button
-                    external
-                    href="https://appwrite.io/docs/products/databases/collections#attributes"
-                    text
-                    event="empty_documentation"
-                    ariaLabel={`create {target}`}>Documentation</Button>
-                {#if $canWriteCollections}
-                    <CreateAttributeDropdown
-                        bind:selectedOption={selectedAttribute}
-                        bind:showCreate={showCreateAttribute}
-                        let:toggle>
-                        <Button secondary event="create_attribute" on:click={toggle}>
-                            Create attribute
-                        </Button>
-                    </CreateAttributeDropdown>
-                {/if}
-            </svelte:fragment>
-        </Empty>
+        <!-- todo: show create attribute if one doesn't exist -->
+        <EmptySheet
+            mode="indexes"
+            title="You have no columns yet"
+            cta={{
+                primary: {
+                    text: 'Create columns',
+                    onClick: async () => {
+                        await goto(
+                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/attributes`
+                        );
+                    }
+                }
+            }} />
     {/if}
-</Container>
+</div>
 
 <Create bind:showCreateIndex />
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
new file mode 100644
index 0000000000..7cf96f59bc
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -0,0 +1,241 @@
+<script lang="ts">
+    import {
+        Button,
+        Icon,
+        Layout,
+        Spreadsheet,
+        Tooltip,
+        Typography
+    } from '@appwrite.io/pink-svelte';
+    import type { SheetColumn } from '$lib/helpers/types';
+    import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
+
+    type Mode = 'records' | 'columns' | 'indexes';
+
+    type ColumnsMap = Record<Mode, SheetColumn[]>;
+
+    type CTA = {
+        text?: string;
+        disabled?: boolean;
+        onClick?: () => void;
+    };
+
+    export let mode: Mode;
+    export let title: string | undefined = undefined;
+    export let cta:
+        | {
+              primary?: CTA;
+              random?: CTA;
+          }
+        | undefined = undefined;
+
+    function makeColumns(...middle: SheetColumn[]): SheetColumn[] {
+        return [
+            {
+                id: '$id',
+                title: 'ID',
+                type: 'string',
+                width: 250,
+                icon: IconFingerPrint
+            },
+            ...middle,
+            {
+                id: 'actions',
+                title: '',
+                width: 555,
+                draggable: false,
+                type: 'string',
+                icon: IconPlus
+            },
+            {
+                id: 'empty',
+                title: '',
+                width: 40,
+                isAction: true,
+                draggable: false,
+                type: 'string'
+            }
+        ];
+    }
+
+    const columnsMap: ColumnsMap = {
+        records: makeColumns(
+            {
+                id: '$createdAt',
+                title: 'Created',
+                type: 'datetime',
+                width: { min: 180 },
+                draggable: false,
+                icon: IconCalendar
+            },
+            {
+                id: '$updatedAt',
+                title: 'Updated',
+                type: 'datetime',
+                width: { min: 180 },
+                draggable: false,
+                icon: IconCalendar
+            }
+        ),
+        columns: makeColumns(
+            {
+                id: 'indexed',
+                title: 'Indexed',
+                type: 'boolean',
+                width: { min: 180 },
+                draggable: false,
+                isAction: false
+            },
+            {
+                id: 'default',
+                title: 'Default',
+                type: 'string',
+                width: { min: 180 },
+                draggable: false,
+                isAction: false
+            }
+        ),
+        indexes: makeColumns(
+            {
+                id: 'type',
+                title: 'Type',
+                type: 'string',
+                width: { min: 150 },
+                draggable: false,
+                isAction: false
+            },
+            {
+                id: 'attributes',
+                title: 'Columns',
+                type: 'string',
+                width: { min: 200 },
+                draggable: false,
+                isAction: false
+            }
+        )
+    };
+
+    $: spreadsheetColumns = columnsMap[mode];
+</script>
+
+<div class="spreadsheet-container-outer">
+    <Spreadsheet.Root
+        allowSelection
+        emptyCells={20}
+        height="fit-content"
+        columns={spreadsheetColumns}>
+        <svelte:fragment slot="header" let:root>
+            {#each spreadsheetColumns as column (column.id)}
+                <Spreadsheet.Header.Cell {root} column={column.id} icon={column.icon ?? undefined}>
+                    {#if column.isAction}
+                        <Button.Button icon variant="extra-compact">
+                            <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
+                        </Button.Button>
+                    {:else}
+                        {column.title}
+                    {/if}
+                </Spreadsheet.Header.Cell>
+            {/each}
+        </svelte:fragment>
+    </Spreadsheet.Root>
+
+    <div class="spreadsheet-fade-bottom">
+        <div class="empty-actions">
+            <Layout.Stack gap="xl" alignItems="center">
+                <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
+
+                <Layout.Stack
+                    inline
+                    alignItems="center"
+                    direction={$isSmallViewport ? 'column' : 'row'}
+                    gap="s">
+                    <Button.Button
+                        icon
+                        size="s"
+                        variant="secondary"
+                        disabled={cta?.primary?.disabled}
+                        on:click={cta?.primary?.onClick}>
+                        <Icon icon={IconPlus} size="s" />
+                        {cta?.primary?.text ?? `Create ${mode}`}
+                    </Button.Button>
+
+                    {#if mode === 'records'}
+                        <Tooltip>
+                            <Button.Button
+                                disabled={cta?.random?.disabled}
+                                size="s"
+                                variant="secondary"
+                                on:click={cta?.random.onClick}>
+                                {cta?.random?.text ?? `Generate random data`}
+                            </Button.Button>
+                            <span slot="tooltip">Yet to be added</span>
+                        </Tooltip>
+                    {/if}
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+    </div>
+</div>
+
+<style lang="scss">
+    .spreadsheet-container-outer {
+        width: 100%;
+        overflow: hidden;
+        position: fixed;
+
+        @media (max-width: 768px) {
+            position: unset;
+        }
+
+        & :global(.spreadsheet-container) {
+            overflow-x: hidden;
+            overflow-y: hidden;
+        }
+
+        & :global([data-select='true']) {
+            opacity: 0.85;
+            pointer-events: none;
+        }
+    }
+
+    .spreadsheet-fade-bottom {
+        bottom: 0;
+        width: 100%;
+        height: 70vh;
+        position: fixed;
+        background: linear-gradient(
+            180deg,
+            rgba(255, 255, 255, 0) 0%,
+            rgba(255, 255, 255, 0.855) 21%,
+            #ffffff 100%
+        );
+        z-index: 20;
+        display: flex;
+        justify-content: center;
+
+        @media (max-width: 768px) {
+            height: 50vh;
+        }
+    }
+
+    :global(.theme-dark) .spreadsheet-fade-bottom {
+        background: linear-gradient(
+            180deg,
+            rgba(25, 25, 28, 0.38) 13%,
+            rgba(25, 25, 28, 0.7) 21%,
+            rgba(25, 25, 28, 0.95) 38%,
+            var(--bgcolor-neutral-default, #19191c) 100%
+        );
+    }
+
+    .empty-actions {
+        bottom: 30%;
+        position: fixed;
+
+        @media (min-width: 1024px) {
+            left: 55%; /* TODO: if both sidebars open, use 55%, else 50% */
+            bottom: 40%;
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
new file mode 100644
index 0000000000..058a7bac4d
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
@@ -0,0 +1,91 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { Button } from '$lib/elements/forms';
+    import { Divider, Layout, Sheet, Typography } from '@appwrite.io/pink-svelte';
+
+    let {
+        show = $bindable(false),
+        title,
+        spaced = false,
+        closeOnBlur = false,
+        submit,
+        children
+    }: {
+        show: boolean;
+        title: string;
+        spaced?: boolean;
+        closeOnBlur?: boolean;
+        submit: {
+            text: string;
+            disabled?: boolean;
+            onClick: () => void | Promise<void>;
+        };
+        children: Snippet;
+    } = $props();
+</script>
+
+<div class="sheet-container" class:spaced>
+    <Sheet bind:open={show} {closeOnBlur}>
+        <div slot="header" style:width="100%">
+            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                <Layout.Stack direction="row" gap="m" alignItems="center">
+                    <Typography.Text variant="m-400">{title}</Typography.Text>
+                </Layout.Stack>
+            </Layout.Stack>
+        </div>
+
+        <Layout.Stack direction="column" justifyContent="space-evenly">
+            <Layout.Stack gap="xl">
+                {@render children()}
+            </Layout.Stack>
+
+            <div class="sheet-footer">
+                <Layout.Stack gap="l">
+                    <Divider />
+
+                    <div class="sheet-footer-actions">
+                        <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
+                            <Button size="s" secondary on:click={() => (show = false)}
+                                >Cancel</Button>
+
+                            <Button
+                                size="s"
+                                disabled={submit.disabled}
+                                on:click={async () => {
+                                    await submit.onClick();
+                                    show = false;
+                                }}>
+                                {submit.text}
+                            </Button>
+                        </Layout.Stack>
+                    </div>
+                </Layout.Stack>
+            </div>
+        </Layout.Stack>
+    </Sheet>
+</div>
+
+<style lang="scss">
+    .sheet-container {
+        top: 0;
+        position: absolute;
+
+        @media (max-width: 768px) {
+            &.spaced :global(aside header) {
+                margin-top: 6rem;
+            }
+        }
+    }
+
+    .sheet-footer {
+        left: 0;
+        right: 0;
+        bottom: 0;
+        position: absolute;
+
+        & .sheet-footer-actions {
+            padding-inline: var(--space-8);
+            padding-block-end: var(--space-6);
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte
new file mode 100644
index 0000000000..34d70515e3
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte
@@ -0,0 +1,24 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+
+    let spreadsheetHeight = '75vh';
+    let spreadsheetWrapper: HTMLDivElement;
+
+    function resizeSheet() {
+        if (!spreadsheetWrapper) return;
+        const rect = spreadsheetWrapper.getBoundingClientRect();
+        spreadsheetHeight = window.innerHeight - rect.top + 'px';
+    }
+
+    onMount(resizeSheet);
+</script>
+
+<svelte:window on:resize={resizeSheet} />
+
+<div
+    bind:this={spreadsheetWrapper}
+    style:height={spreadsheetHeight}
+    style:position="relative"
+    style:width="100%">
+    <slot />
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 071003b738..3d55795e8b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -31,9 +31,7 @@
         FloatingActionBar,
         Icon,
         InteractiveText,
-        Typography,
-        Sheet,
-        Divider
+        Typography
     } from '@appwrite.io/pink-svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
@@ -58,30 +56,23 @@
     import { type Action } from './sheetOptions.svelte';
     import EditAttribute from './attributes/edit.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
+    import SideSheet from './layout/sidesheet.svelte';
+    import SpreadsheetContainer from './layout/spreadsheet.svelte';
 
     export let data: PageData;
+    export let showRecordsCreateSheet: boolean;
 
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
 
     let displayNames = {};
     let showRelationships = false;
-    let selectedRelationship: Models.AttributeRelationship = null;
     let relationshipData: Partial<Models.Document>[];
-
-    let spreadsheetHeight = '75vh';
-    let spreadsheetWrapper: HTMLDivElement;
+    let selectedRelationship: Models.AttributeRelationship = null;
 
     $: documents = data.documents;
 
-    function resizeSheet() {
-        if (!spreadsheetWrapper) return;
-        const rect = spreadsheetWrapper.getBoundingClientRect();
-        spreadsheetHeight = window.innerHeight - rect.top + 'px';
-    }
-
     onMount(async () => {
-        resizeSheet();
         displayNames = preferences.getDisplayNames();
     });
 
@@ -316,7 +307,7 @@
         if (type === 'update') {
             $databaseSheetOptions.show = true;
             $databaseSheetOptions.isEdit = true;
-            $databaseSheetOptions.title = 'update column';
+            $databaseSheetOptions.title = 'Update column';
         }
 
         if (type === 'column-left' || type === 'column-right') {
@@ -339,13 +330,7 @@
             : emptyCellsLimit - data.documents.documents.length;
 </script>
 
-<svelte:window on:resize={resizeSheet} />
-
-<div
-    bind:this={spreadsheetWrapper}
-    style:height={spreadsheetHeight}
-    style:position="relative"
-    style:width="100%">
+<SpreadsheetContainer>
     <Spreadsheet.Root
         let:root
         {loading}
@@ -361,7 +346,10 @@
             {#each $columns as column (column.id)}
                 {#if column.isAction}
                     <Spreadsheet.Header.Cell column="actions" {root}>
-                        <Button.Button icon variant="extra-compact" on:click={() => {}}>
+                        <Button.Button
+                            icon
+                            variant="extra-compact"
+                            on:click={() => (showRecordsCreateSheet = true)}>
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
                         </Button.Button>
                     </Spreadsheet.Header.Cell>
@@ -553,7 +541,7 @@
             </FloatingActionBar>
         </div>
     {/if}
-</div>
+</SpreadsheetContainer>
 
 <RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
 
@@ -624,49 +612,19 @@
     </p>
 </Confirm>
 
-<div style="position: absolute; top: 0; ">
-    <Sheet bind:open={$databaseSheetOptions.show} closeOnBlur={false}>
-        <div slot="header" style:width="100%">
-            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Layout.Stack direction="row" gap="m" alignItems="center">
-                    <Typography.Text variant="m-400">{$databaseSheetOptions.title}</Typography.Text>
-                </Layout.Stack>
-            </Layout.Stack>
-        </div>
-
-        <Layout.Stack direction="column" justifyContent="space-evenly">
-            <Layout.Stack gap="xl">
-                <EditAttribute
-                    isModal={false}
-                    showEdit={$databaseSheetOptions.isEdit}
-                    selectedAttribute={$databaseSheetOptions.column} />
-            </Layout.Stack>
-
-            <div class="sheet-footer">
-                <Layout.Stack gap="l">
-                    <Divider />
-
-                    <div class="sheet-footer-actions">
-                        <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
-                            <Button.Button
-                                size="s"
-                                variant="secondary"
-                                on:click={() => ($databaseSheetOptions.show = false)}
-                                >Cancel</Button.Button>
-
-                            <Button.Button
-                                size="s"
-                                disabled={$databaseSheetOptions.disableSubmit}
-                                on:click={() => $databaseSheetOptions.submitAction()}>
-                                Update
-                            </Button.Button>
-                        </Layout.Stack>
-                    </div>
-                </Layout.Stack>
-            </div>
-        </Layout.Stack>
-    </Sheet>
-</div>
+<SideSheet
+    title={$databaseSheetOptions.title}
+    bind:show={$databaseSheetOptions.show}
+    submit={{
+        text: 'Update',
+        disabled: $databaseSheetOptions.disableSubmit,
+        onClick: () => $databaseSheetOptions.submitAction()
+    }}>
+    <EditAttribute
+        isModal={false}
+        showEdit={$databaseSheetOptions.isEdit}
+        selectedAttribute={$databaseSheetOptions.column} />
+</SideSheet>
 
 <style lang="scss">
     .floating-action-bar {
@@ -676,15 +634,4 @@
         position: absolute;
         transform: translateX(-50%);
     }
-
-    .sheet-footer {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-
-        & .sheet-footer-actions {
-            padding: var(--space-8);
-        }
-    }
 </style>

From 33a9e0c17f4565c17147ee32d36fafcb3c73c40b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 15 Jul 2025 18:27:24 +0530
Subject: [PATCH 007/118] update: misc.

---
 .../collection-[collection]/layout/emptySheet.svelte            | 2 +-
 .../collection-[collection]/spreadsheet.svelte                  | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 7cf96f59bc..51cc890b24 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -36,7 +36,7 @@
                 id: '$id',
                 title: 'ID',
                 type: 'string',
-                width: 250,
+                width: 200,
                 icon: IconFingerPrint
             },
             ...middle,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 3d55795e8b..9b73bf34c9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -235,6 +235,7 @@
     async function handleDelete() {
         showDelete = false;
         try {
+            // TODO: maybe this isn't working?
             await sdk
                 .forProject(page.params.region, page.params.project)
                 .databases.deleteDocuments(databaseId, collectionId, [

From 96db5f2764a4e0ac8748f28593cefda88faf4944 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 15 Jul 2025 18:51:07 +0530
Subject: [PATCH 008/118] update: misc.

---
 src/lib/components/dualTimeView.svelte        | 96 +++++++++----------
 src/lib/helpers/types.ts                      |  1 +
 .../spreadsheet.svelte                        | 15 ++-
 3 files changed, 59 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/dualTimeView.svelte b/src/lib/components/dualTimeView.svelte
index 553ec4dae2..8a018ed722 100644
--- a/src/lib/components/dualTimeView.svelte
+++ b/src/lib/components/dualTimeView.svelte
@@ -90,55 +90,55 @@
         <div
             let:hide
             let:showing
-        slot="tooltip"
-        role="tooltip"
-        style:padding="1rem"
-        style:margin="-1rem"
-        on:mouseenter={() => (isMouseOverTooltip = true)}
-        on:mouseleave={() => hidePopover(hide, false)}>
-        {#if showing}
-            <Layout.Stack gap="s" alignContent="flex-start">
-                <!-- `Raw time` as per design -->
-                <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
-                    {#if $$slots.title}
-                        <slot name="title" />
-                    {:else}
-                        {timeToString}
-                    {/if}
-                </Typography.Caption>
-
-                <!-- `Absolute time` as per design -->
-                <Layout.Stack gap="xxs">
-                    <Layout.Stack
-                        direction="row"
-                        alignItems="center"
-                        alignContent="center"
-                        justifyContent="space-between">
-                        <InteractiveText
-                            isVisible
-                            variant="copy"
-                            text={toLocaleDateTime(time, false, 'UTC')}
-                            value={toISOString(time)} />
-
-                        <Badge variant="secondary" content="UTC" size="xs" />
-                    </Layout.Stack>
-
-                    <Layout.Stack
-                        direction="row"
-                        alignItems="center"
-                        alignContent="center"
-                        justifyContent="space-between">
-                        <InteractiveText
-                            isVisible
-                            variant="copy"
-                            text={toLocaleDateTime(time)}
-                            value={toLocalDateTimeISO(time)} />
-                        <Badge variant="secondary" content="Local" size="xs" />
+            slot="tooltip"
+            role="tooltip"
+            style:padding="1rem"
+            style:margin="-1rem"
+            on:mouseenter={() => (isMouseOverTooltip = true)}
+            on:mouseleave={() => hidePopover(hide, false)}>
+            {#if showing}
+                <Layout.Stack gap="s" alignContent="flex-start">
+                    <!-- `Raw time` as per design -->
+                    <Typography.Caption color="--fgcolor-neutral-tertiary" variant="400">
+                        {#if $$slots.title}
+                            <slot name="title" />
+                        {:else}
+                            {timeToString}
+                        {/if}
+                    </Typography.Caption>
+
+                    <!-- `Absolute time` as per design -->
+                    <Layout.Stack gap="xxs">
+                        <Layout.Stack
+                            direction="row"
+                            alignItems="center"
+                            alignContent="center"
+                            justifyContent="space-between">
+                            <InteractiveText
+                                isVisible
+                                variant="copy"
+                                text={toLocaleDateTime(time, false, 'UTC')}
+                                value={toISOString(time)} />
+
+                            <Badge variant="secondary" content="UTC" size="xs" />
+                        </Layout.Stack>
+
+                        <Layout.Stack
+                            direction="row"
+                            alignItems="center"
+                            alignContent="center"
+                            justifyContent="space-between">
+                            <InteractiveText
+                                isVisible
+                                variant="copy"
+                                text={toLocaleDateTime(time)}
+                                value={toLocalDateTimeISO(time)} />
+                            <Badge variant="secondary" content="Local" size="xs" />
+                        </Layout.Stack>
                     </Layout.Stack>
                 </Layout.Stack>
-            </Layout.Stack>
-        {/if}
-    </div>
-</Popover>{:else}
+            {/if}
+        </div>
+    </Popover>{:else}
     <Typography.Text>{time === null || time === undefined ? 'null' : time}</Typography.Text>
 {/if}
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index c56e2ccdc2..ec08ec6433 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -67,6 +67,7 @@ export type SheetColumn = PinkSheetColumn & {
     encrypt?: boolean;
     icon?: ComponentType;
     isPrimary?: boolean;
+    isEditable?: boolean;
 };
 
 export function isValueOfStringEnum<T extends Record<string, string>>(
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 9b73bf34c9..f82f017fca 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -161,7 +161,8 @@
                 width: 200,
                 draggable: false,
                 type: 'string',
-                icon: IconFingerPrint
+                icon: IconFingerPrint,
+                isEditable: false
             },
             {
                 id: '$createdAt',
@@ -169,7 +170,8 @@
                 width: { min: 200 },
                 draggable: true,
                 type: 'datetime',
-                icon: IconCalendar
+                icon: IconCalendar,
+                isEditable: false
             },
             {
                 id: '$updatedAt',
@@ -177,7 +179,8 @@
                 width: { min: 200 },
                 draggable: true,
                 type: 'datetime',
-                icon: IconCalendar
+                icon: IconCalendar,
+                isEditable: false
             },
             {
                 id: 'actions',
@@ -185,7 +188,8 @@
                 width: 40,
                 isAction: true,
                 draggable: false,
-                type: 'string'
+                type: 'string',
+                isEditable: false
             }
         ];
 
@@ -393,11 +397,12 @@
         {#each documents.documents as document (document.$id)}
             <!-- TODO: add `value` for user attributes -->
             <Spreadsheet.Row.Base {root} id={document.$id}>
-                {#each $columns as { id } (id)}
+                {#each $columns as { id, isEditable } (id)}
                     {@const formatted = formatColumn(document[id])}
                     <Spreadsheet.Cell
                         {root}
                         column={id}
+                        {isEditable}
                         value={id.includes('$') || formatted.value === 'null'
                             ? undefined
                             : formatted.value}>

From 33326e0e3a9309d9d6043f84ce9d2e2bea74ac6e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 13:27:18 +0530
Subject: [PATCH 009/118] new: attribute creation flow.

---
 .../attributes/+page.svelte                   |  63 ++++++----
 .../createAttribute.svelte                    | 116 ++++++++++--------
 .../layout/emptySheet.svelte                  |  67 +++++-----
 .../layout/sidesheet.svelte                   |  48 ++++----
 4 files changed, 166 insertions(+), 128 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 211b1dcad4..ca4725c0cc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -14,12 +14,11 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import Create from '../createAttribute.svelte';
+    import CreateAttribute from '../createAttribute.svelte';
     import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import { attributes, type Attributes, indexes, isCsvImportInProgress } from '../store';
-    import CreateAttributeDropdown from './createAttributeDropdown.svelte';
     import Delete from './deleteAttribute.svelte';
     import EditAttribute from './edit.svelte';
     import { attributeOptions, type Option } from './store';
@@ -44,7 +43,7 @@
     import EmptySheet from '../layout/emptySheet.svelte';
 
     let showDropdown = [];
-    let selectedOption: Option['name'] = null;
+    let selectedOption: Option['name'] = 'String';
     let selectedAttribute: Attributes = null;
     let showCreate = false;
     let showDelete = false;
@@ -54,6 +53,7 @@
 
     let showEdit = false;
     let editAttribute: EditAttribute;
+    let createAttribute: CreateAttribute;
 
     const attributeFormatIcon = {
         ip: IconLocationMarker,
@@ -83,9 +83,16 @@
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
     <Layout.Stack direction="row" justifyContent="flex-end">
-        <!-- TODO: filters? -->
         {#if $canWriteCollections}
-            <CreateAttributeDropdown bind:selectedOption bind:showCreate />
+            <Button
+                size="s"
+                secondary
+                disabled={$isCsvImportInProgress}
+                on:click={() => (showCreate = true)}
+                event="create_attribute">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create column
+            </Button>
         {/if}
     </Layout.Stack>
 </Container>
@@ -260,29 +267,41 @@
             </Spreadsheet.Root>
         </SpreadsheetContainer>
     {:else}
-        <!-- TODO: handle these cases -->
-        <!--{#if $canWriteCollections}-->
-        <EmptySheet mode="columns" />
+        <EmptySheet
+            mode="columns"
+            showActions={$canWriteCollections}
+            actions={{
+                primary: {
+                    onClick: () => (showCreate = true)
+                }
+            }} />
     {/if}
 </div>
 
-{#if showCreate}
-    <Create bind:showCreate bind:selectedOption />
-{/if}
+<SideSheet
+    title="Insert column"
+    bind:show={showCreate}
+    submit={{
+        text: 'Insert',
+        onClick: async () => await createAttribute.submit(),
+        disabled: !selectedOption
+    }}>
+    <CreateAttribute {showCreate} bind:selectedOption bind:this={createAttribute} />
+</SideSheet>
+
 {#if showDelete}
     <Delete bind:showDelete {selectedAttribute} />
 {/if}
-{#if showEdit}
-    <SideSheet
-        title="Edit column"
-        bind:show={showEdit}
-        submit={{
-            text: 'Update',
-            onClick: async () => await editAttribute.submit()
-        }}>
-        <EditAttribute showEdit isModal={false} {selectedAttribute} bind:this={editAttribute} />
-    </SideSheet>
-{/if}
+
+<SideSheet
+    title="Edit column"
+    bind:show={showEdit}
+    submit={{
+        text: 'Update',
+        onClick: async () => await editAttribute.submit()
+    }}>
+    <EditAttribute showEdit isModal={false} {selectedAttribute} bind:this={editAttribute} />
+</SideSheet>
 
 {#if showCreateIndex}
     <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 058024a106..0f4dfe2627 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -1,85 +1,101 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
-    import { option, attributeOptions, type Option } from './attributes/store';
-    import { Button, InputText } from '$lib/elements/forms';
-    import { goto, invalidate } from '$app/navigation';
-    import { Dependencies } from '$lib/constants';
     import { page } from '$app/state';
-    import { addNotification } from '$lib/stores/notifications';
-    import { base } from '$app/paths';
     import type { Attributes } from './store';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { InputSelect, InputText } from '$lib/elements/forms';
+    import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { option, attributeOptions, type Option } from './attributes/store';
+
+    let {
+        showCreate = false,
+        selectedOption = $bindable('String')
+    }: {
+        showCreate: boolean;
+        selectedOption: Option['name'];
+    } = $props();
 
-    export let showCreate = false;
-    export let selectedOption: Option['name'] = null;
     const databaseId = page.params.database;
-    $: collectionId = page.params.collection;
+    const collectionId = page.params.collection;
 
-    let key: string = null;
-    let data: Partial<Attributes> = {
+    let key: string = $state(null);
+    let data: Partial<Attributes> = $state({
         required: false,
         array: false,
         default: null
-    };
-    let error: string;
+    });
+
+    let AttributeComponent = $derived(
+        attributeOptions.find((option) => option.name === selectedOption).component
+    );
 
-    async function submit() {
+    export async function submit() {
         try {
             await $option.create(databaseId, collectionId, key, data);
             await invalidate(Dependencies.COLLECTION);
 
-            if (!page.url.pathname.includes('attributes')) {
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${collectionId}/attributes`
-                );
-            }
             addNotification({
                 type: 'success',
-                message: `Attribute ${key ?? data?.key} has been created`
+                message: `Column ${key ?? data?.key} has been created`
             });
-            showCreate = false;
             trackEvent(Submit.AttributeCreate);
         } catch (e) {
-            error = e.message;
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
             trackError(e, Submit.AttributeCreate);
         }
     }
 
-    $: if (selectedOption) {
-        $option = attributeOptions.find((option) => option.name === selectedOption);
-    }
-
-    $: if (!showCreate) {
-        error = null;
-        key = null;
-        selectedOption = null;
-        $option = null;
-        data = {
-            required: false,
-            array: false,
-            default: null
-        };
-    }
+    $effect(() => {
+        // correct view
+        if (selectedOption) {
+            $option = attributeOptions.find((option) => option.name === selectedOption);
+        }
 
-    $: title = `Create ${attributeOptions.find((option) => option.name === selectedOption)?.sentenceName ?? ''} attribute`;
+        // cleanup
+        if (!showCreate) {
+            key = null;
+            $option = null;
+            selectedOption = null;
+            data = {
+                required: false,
+                array: false,
+                default: null
+            };
+        }
+    });
 </script>
 
-<Modal {error} bind:show={showCreate} onSubmit={submit} {title}>
-    {#if selectedOption !== 'Relationship'}
+<Layout.Stack gap="xl">
+    <Layout.Stack direction="row">
         <InputText
             id="key"
-            label="Attribute key"
+            label="Key"
             placeholder="Enter key"
             bind:value={key}
             autofocus
-            helper="Allowed characters: alphanumeric, hyphen, non-leading underscore, period."
+            disabled={selectedOption === 'Relationship'}
             required />
-    {/if}
+
+        <InputSelect
+            id="type"
+            label="Type"
+            bind:value={selectedOption}
+            options={attributeOptions.map((attr) => {
+                return {
+                    label: attr.name,
+                    value: attr.name,
+                    leadingIcon: attr.icon
+                };
+            })}
+            required />
+    </Layout.Stack>
+
     {#if selectedOption}
-        <svelte:component this={$option.component} bind:data onclose={() => ($option = null)} />
+        <AttributeComponent bind:data onclose={() => ($option = null)} />
     {/if}
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
-        <Button submit disabled={!selectedOption}>Create</Button>
-    </svelte:fragment>
-</Modal>
+</Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 51cc890b24..42fee30cc9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -15,18 +15,19 @@
 
     type ColumnsMap = Record<Mode, SheetColumn[]>;
 
-    type CTA = {
+    type Action = {
         text?: string;
         disabled?: boolean;
         onClick?: () => void;
     };
 
     export let mode: Mode;
+    export let showActions: boolean = true;
     export let title: string | undefined = undefined;
-    export let cta:
+    export let actions:
         | {
-              primary?: CTA;
-              random?: CTA;
+              primary?: Action;
+              random?: Action;
           }
         | undefined = undefined;
 
@@ -145,34 +146,36 @@
             <Layout.Stack gap="xl" alignItems="center">
                 <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
 
-                <Layout.Stack
-                    inline
-                    alignItems="center"
-                    direction={$isSmallViewport ? 'column' : 'row'}
-                    gap="s">
-                    <Button.Button
-                        icon
-                        size="s"
-                        variant="secondary"
-                        disabled={cta?.primary?.disabled}
-                        on:click={cta?.primary?.onClick}>
-                        <Icon icon={IconPlus} size="s" />
-                        {cta?.primary?.text ?? `Create ${mode}`}
-                    </Button.Button>
-
-                    {#if mode === 'records'}
-                        <Tooltip>
-                            <Button.Button
-                                disabled={cta?.random?.disabled}
-                                size="s"
-                                variant="secondary"
-                                on:click={cta?.random.onClick}>
-                                {cta?.random?.text ?? `Generate random data`}
-                            </Button.Button>
-                            <span slot="tooltip">Yet to be added</span>
-                        </Tooltip>
-                    {/if}
-                </Layout.Stack>
+                {#if showActions}
+                    <Layout.Stack
+                        inline
+                        alignItems="center"
+                        direction={$isSmallViewport ? 'column' : 'row'}
+                        gap="s">
+                        <Button.Button
+                            icon
+                            size="s"
+                            variant="secondary"
+                            disabled={actions?.primary?.disabled}
+                            on:click={actions?.primary?.onClick}>
+                            <Icon icon={IconPlus} size="s" />
+                            {actions?.primary?.text ?? `Create ${mode}`}
+                        </Button.Button>
+
+                        {#if mode === 'records'}
+                            <Tooltip>
+                                <Button.Button
+                                    disabled={actions?.random?.disabled}
+                                    size="s"
+                                    variant="secondary"
+                                    on:click={actions?.random.onClick}>
+                                    {actions?.random?.text ?? `Generate random data`}
+                                </Button.Button>
+                                <span slot="tooltip">Yet to be added</span>
+                            </Tooltip>
+                        {/if}
+                    </Layout.Stack>
+                {/if}
             </Layout.Stack>
         </div>
     </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
index 058a7bac4d..34cc487fcd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import type { Snippet } from 'svelte';
-    import { Button } from '$lib/elements/forms';
+    import { Button, Form } from '$lib/elements/forms';
     import { Divider, Layout, Sheet, Typography } from '@appwrite.io/pink-svelte';
 
     let {
@@ -35,32 +35,32 @@
         </div>
 
         <Layout.Stack direction="column" justifyContent="space-evenly">
-            <Layout.Stack gap="xl">
-                {@render children()}
-            </Layout.Stack>
+            <Form
+                onSubmit={async () => {
+                    await submit.onClick();
+                    show = false;
+                }}>
+                <Layout.Stack gap="xl">
+                    {@render children()}
+                </Layout.Stack>
 
-            <div class="sheet-footer">
-                <Layout.Stack gap="l">
-                    <Divider />
+                <div class="sheet-footer">
+                    <Layout.Stack gap="l">
+                        <Divider />
 
-                    <div class="sheet-footer-actions">
-                        <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
-                            <Button size="s" secondary on:click={() => (show = false)}
-                                >Cancel</Button>
+                        <div class="sheet-footer-actions">
+                            <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
+                                <Button size="s" secondary on:click={() => (show = false)}
+                                    >Cancel</Button>
 
-                            <Button
-                                size="s"
-                                disabled={submit.disabled}
-                                on:click={async () => {
-                                    await submit.onClick();
-                                    show = false;
-                                }}>
-                                {submit.text}
-                            </Button>
-                        </Layout.Stack>
-                    </div>
-                </Layout.Stack>
-            </div>
+                                <Button size="s" submit disabled={submit.disabled}>
+                                    {submit.text}
+                                </Button>
+                            </Layout.Stack>
+                        </div>
+                    </Layout.Stack>
+                </div>
+            </Form>
         </Layout.Stack>
     </Sheet>
 </div>

From 797f3f7cc3cebce98b60c8fa2fb862eaba305533 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 16:42:03 +0530
Subject: [PATCH 010/118] fix: types.

---
 src/lib/components/filters/filters.svelte     |  4 +--
 src/lib/components/filters/store.ts           | 12 +++----
 src/lib/helpers/types.ts                      | 30 +++++-------------
 .../collection-[collection]/+page.svelte      | 31 ++++++++++---------
 .../indexes/+page.svelte                      | 22 ++++++-------
 .../layout/emptySheet.svelte                  |  6 ++--
 .../spreadsheet.svelte                        |  6 ++--
 .../collection-[collection]/store.ts          |  4 +--
 8 files changed, 52 insertions(+), 63 deletions(-)

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index 32b7834835..f8c9a3e6ed 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -2,7 +2,7 @@
     import { beforeNavigate } from '$app/navigation';
     import { Modal } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import type { PinkSheetColumn } from '$lib/helpers/types';
+    import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
     import Content from './content.svelte';
     import {
@@ -19,7 +19,7 @@
     import { Click, Submit, trackEvent } from '$lib/actions/analytics';
 
     export let query = '[]';
-    export let columns: Writable<PinkSheetColumn[]>;
+    export let columns: Writable<Column[]>;
     export let disabled = false;
     export let fullWidthMobile = false;
     export let singleCondition = false;
diff --git a/src/lib/components/filters/store.ts b/src/lib/components/filters/store.ts
index 970874334d..d3df550cec 100644
--- a/src/lib/components/filters/store.ts
+++ b/src/lib/components/filters/store.ts
@@ -4,7 +4,7 @@ import deepEqual from 'deep-equal';
 import { Query } from '@appwrite.io/console';
 import { toLocaleDateTime } from '$lib/helpers/date';
 import { derived, get, writable } from 'svelte/store';
-import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
+import type { Column, ColumnType } from '$lib/helpers/types';
 
 export type TagValue = {
     tag: string;
@@ -14,7 +14,7 @@ export type TagValue = {
 export type Operator = {
     toTag: (attribute: string, input?: string | number | string[], type?: string) => TagValue;
     toQuery: (attribute: string, input?: string | number | string[]) => string;
-    types: SheetColumnType[];
+    types: ColumnType[];
     hideInput?: boolean;
 };
 
@@ -33,7 +33,7 @@ function initQueries(initialValue = new Map<TagValue, string>()) {
 
     type AddFilterArgs = {
         operator: Operator;
-        column: SheetColumn;
+        column: Column;
         value: string | number | string[];
     };
 
@@ -91,14 +91,14 @@ export const tags = derived(queries, ($queries) => Array.from($queries.keys()));
 
 /* eslint  @typescript-eslint/no-explicit-any: 'off' */
 export function addFilter(
-    columns: SheetColumn[],
+    columns: Column[],
     columnId: string,
     operatorKey: string,
     value: any, // We cast to any to not cause type errors in the input components
     arrayValues: string[] = []
 ) {
     const operator = operatorKey ? operators[operatorKey] : null;
-    const column = columns.find((c) => c.id === columnId) as SheetColumn;
+    const column = columns.find((c) => c.id === columnId) as Column;
     if (!column || !operator) return;
     if (column.array) {
         queries.addFilter({ column, operator, value: arrayValues });
@@ -135,7 +135,7 @@ const operatorsDefault = new Map<
     ValidOperators,
     {
         query: (attr: string, input: string | number | string[]) => string;
-        types: SheetColumnType[];
+        types: ColumnType[];
         hideInput?: boolean;
     }
 >([
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index ec08ec6433..73e9a9f95c 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -15,25 +15,6 @@ export type PinkColumn = {
     hide?: boolean;
 };
 
-export type PinkSheetColumn = {
-    id: string;
-    width?:
-        | {
-              min: number;
-              max: number;
-          }
-        | {
-              min: number;
-          }
-        | number;
-    hide?: boolean;
-    fixed?: boolean;
-    resizable?: boolean;
-    draggable?: boolean;
-    resizedWidth?: number;
-    isAction?: boolean;
-};
-
 export type WritableValue<T> = T extends Writable<infer U> ? U : never;
 
 export function isHTMLElement(el: unknown): el is HTMLElement {
@@ -55,10 +36,10 @@ const columnTypes = [
     'relationship',
     'enum'
 ] as const;
-export type SheetColumnType = (typeof columnTypes)[number];
-export type SheetColumn = PinkSheetColumn & {
+export type ColumnType = (typeof columnTypes)[number];
+export type Column = PinkColumn & {
     title: string;
-    type: SheetColumnType;
+    type: ColumnType;
     filter?: boolean;
     array?: boolean;
     format?: string;
@@ -68,6 +49,11 @@ export type SheetColumn = PinkSheetColumn & {
     icon?: ComponentType;
     isPrimary?: boolean;
     isEditable?: boolean;
+    fixed?: boolean;
+    resizable?: boolean;
+    draggable?: boolean;
+    resizedWidth?: number;
+    isAction?: boolean;
 };
 
 export function isValueOfStringEnum<T extends Record<string, string>>(
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index ab482f31bc..9f19b55aee 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -3,14 +3,15 @@
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
-    import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
+    import type { Column, ColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
+    // TODO: use these for actions
     // import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
     import { Icon, Layout, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
-    import type { Option } from './attributes/store';
-    import CreateAttribute from './createAttribute.svelte';
+    // import type { Option } from './attributes/store';
+    // import CreateAttribute from './createAttribute.svelte';
     import { collection, columns, isCsvImportInProgress } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
@@ -30,11 +31,12 @@
     export let data: PageData;
 
     let showImportCSV = false;
-    let showCreateAttribute = false;
     let showRecordsCreateSheet = false;
-    let selectedAttribute: Option['name'] = null;
 
-    const filterColumns = writable<SheetColumn[]>([]);
+    // let showCreateAttribute = false;
+    // let selectedAttribute: Option['name'] = null;
+
+    const filterColumns = writable<Column[]>([]);
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
@@ -42,7 +44,7 @@
         $collection.attributes.map((attribute) => ({
             id: attribute.key,
             title: attribute.key,
-            type: attribute.type as SheetColumnType,
+            type: attribute.type as ColumnType,
             hide: !!selected?.includes(attribute.key),
             array: attribute?.array,
             format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
@@ -162,7 +164,7 @@
             {:else}
                 <EmptySheet
                     mode="records"
-                    cta={{
+                    actions={{
                         primary: {
                             onClick: () => {
                                 showRecordsCreateSheet = true;
@@ -174,7 +176,7 @@
             <EmptySheet
                 mode="records"
                 title="You have no columns yet"
-                cta={{
+                actions={{
                     primary: {
                         text: 'Create column',
                         onClick: async () => {
@@ -188,11 +190,12 @@
     </div>
 {/key}
 
-{#if showCreateAttribute}
-    <CreateAttribute
-        bind:showCreate={showCreateAttribute}
-        bind:selectedOption={selectedAttribute} />
-{/if}
+<!-- TODO: goto attributes page -->
+<!--{#if showCreateAttribute}-->
+<!--    <CreateAttribute-->
+<!--        bind:showCreate={showCreateAttribute}-->
+<!--        bind:selectedOption={selectedAttribute} />-->
+<!--{/if}-->
 
 {#if showImportCSV}
     <!-- CSVs can be text/plain or text/csv sometimes! -->
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index bd33d72999..0f2657b5cb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -4,11 +4,11 @@
     import Delete from './deleteIndex.svelte';
     import Create from './createIndex.svelte';
     import Overview from './overviewIndex.svelte';
-    import CreateAttribute from '../createAttribute.svelte';
+    // import CreateAttribute from '../createAttribute.svelte';
     import type { Models } from '@appwrite.io/console';
     import { Button } from '$lib/elements/forms';
     // import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
-    import type { Option } from '../attributes/store';
+    // import type { Option } from '../attributes/store';
     import FailedModal from '../failedModal.svelte';
     import { canWriteCollections } from '$lib/stores/roles';
     import {
@@ -40,8 +40,8 @@
     let showCreateIndex = false;
     let showOverview = false;
     let showDelete = false;
-    let showCreateAttribute = false;
-    let selectedAttribute: Option['name'] = null;
+    // let showCreateAttribute = false;
+    // let selectedAttribute: Option['name'] = null;
     let showFailed = false;
     let error = '';
 
@@ -161,7 +161,7 @@
         {:else}
             <EmptySheet
                 mode="indexes"
-                cta={{
+                actions={{
                     primary: {
                         onClick: () => (showCreateIndex = true),
                         disabled: !$collection?.attributes?.length
@@ -173,7 +173,7 @@
         <EmptySheet
             mode="indexes"
             title="You have no columns yet"
-            cta={{
+            actions={{
                 primary: {
                     text: 'Create columns',
                     onClick: async () => {
@@ -193,10 +193,10 @@
     <Overview bind:showOverview {selectedIndex} />
 {/if}
 
-{#if showCreateAttribute}
-    <CreateAttribute
-        bind:showCreate={showCreateAttribute}
-        bind:selectedOption={selectedAttribute} />
-{/if}
+<!--{#if showCreateAttribute}-->
+<!--    <CreateAttribute-->
+<!--        bind:showCreate={showCreateAttribute}-->
+<!--        bind:selectedOption={selectedAttribute} />-->
+<!--{/if}-->
 
 <FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 42fee30cc9..124e0355f2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -7,13 +7,13 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import type { SheetColumn } from '$lib/helpers/types';
+    import type { Column } from '$lib/helpers/types';
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
 
     type Mode = 'records' | 'columns' | 'indexes';
 
-    type ColumnsMap = Record<Mode, SheetColumn[]>;
+    type ColumnsMap = Record<Mode, Column[]>;
 
     type Action = {
         text?: string;
@@ -31,7 +31,7 @@
           }
         | undefined = undefined;
 
-    function makeColumns(...middle: SheetColumn[]): SheetColumn[] {
+    function makeColumns(...middle: Column[]): Column[] {
         return [
             {
                 id: '$id',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index f82f017fca..0c29361763 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -19,7 +19,7 @@
     } from './document-[document]/attributes/store';
     import { attributes, collection, columns, databaseSheetOptions } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
-    import type { SheetColumn, SheetColumnType } from '$lib/helpers/types';
+    import type { Column, ColumnType } from '$lib/helpers/types';
     import {
         Tooltip,
         Spreadsheet,
@@ -144,7 +144,7 @@
         const baseColumns = $collection.attributes.map((attribute) => ({
             id: attribute.key,
             title: attribute.key,
-            type: attribute.type as SheetColumnType,
+            type: attribute.type as ColumnType,
             hide: !!selected?.includes(attribute.key),
             array: attribute?.array,
             width: { min: 168 },
@@ -154,7 +154,7 @@
             elements: 'elements' in attribute ? attribute.elements : null
         }));
 
-        const staticColumns: SheetColumn[] = [
+        const staticColumns: Column[] = [
             {
                 id: '$id',
                 title: 'ID',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 167e570ebe..5eb0c431ce 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -1,5 +1,5 @@
 import { page } from '$app/stores';
-import type { SheetColumn } from '$lib/helpers/types';
+import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 
@@ -25,7 +25,7 @@ export const attributes = derived(
 );
 export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]);
 
-export const columns = writable<SheetColumn[]>([]);
+export const columns = writable<Column[]>([]);
 
 export const isCsvImportInProgress = writable(false);
 

From e0b36ce7a851227e92a5ec5072474e94f8127fe6 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 18:53:13 +0530
Subject: [PATCH 011/118] add: sort button.

---
 src/lib/components/index.ts                   |  1 +
 src/lib/components/sortButton.svelte          | 73 +++++++++++++++++++
 .../collection-[collection]/+page.svelte      | 18 +----
 .../attributes/store.ts                       |  6 +-
 .../spreadsheet.svelte                        | 50 +++----------
 .../collection-[collection]/store.ts          |  8 +-
 6 files changed, 96 insertions(+), 60 deletions(-)
 create mode 100644 src/lib/components/sortButton.svelte

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 3f451a4bfe..166165cffb 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -84,3 +84,4 @@ export { default as UsageCard } from './usageCard.svelte';
 export { default as ViewToggle } from './viewToggle.svelte';
 export { default as RegionEndpoint } from './regionEndpoint.svelte';
 export { default as ExpirationInput } from './expirationInput.svelte';
+export { default as SortButton } from './sortButton.svelte';
diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
new file mode 100644
index 0000000000..b3cab28ec3
--- /dev/null
+++ b/src/lib/components/sortButton.svelte
@@ -0,0 +1,73 @@
+<script module lang="ts">
+    export type SortDirection = 'asc' | 'desc' | 'default';
+</script>
+
+<script lang="ts">
+    import { Query } from '@appwrite.io/console';
+    import { Button } from '$lib/elements/forms';
+    import { Icon } from '@appwrite.io/pink-svelte';
+    import { IconChevronDown, IconChevronUp, IconSelector } from '@appwrite.io/pink-icons-svelte';
+    import type { Writable } from 'svelte/store';
+
+    let {
+        column,
+        state,
+        onSort = () => {}
+    }: {
+        column: string;
+        onSort: (query: string[]) => void | Promise<void>;
+        state: Writable<{ column: string | null; direction: SortDirection }>;
+    } = $props();
+
+    function sort() {
+        const isCurrent = $state.column === column;
+        const nextDir: SortDirection = !isCurrent
+            ? 'asc'
+            : $state.direction === 'asc'
+              ? 'desc'
+              : $state.direction === 'desc'
+                ? 'default'
+                : 'asc';
+
+        state.set({
+            direction: nextDir,
+            column: nextDir === 'default' ? null : column
+        });
+
+        if (nextDir === 'default') {
+            onSort([]);
+        } else if (nextDir === 'asc') {
+            onSort([Query.orderAsc(column)]);
+        } else {
+            onSort([Query.orderDesc(column)]);
+        }
+    }
+</script>
+
+<Button extraCompact on:click={sort} class="hoverable-compact">
+    <Icon
+        size="s"
+        icon={$state.column !== column || $state.direction === 'default'
+            ? IconSelector
+            : $state.direction === 'asc'
+              ? IconChevronUp
+              : IconChevronDown}
+        color="--fgcolor-neutral-secondary" />
+</Button>
+
+<style lang="scss">
+    :global(.hoverable-compact) {
+        width: 20px;
+        height: 20px;
+        --p-button-padding-inline: var(--space-0);
+
+        &:hover {
+            background-color: var(--bgcolor-neutral-secondary);
+            border: var(--border-width-s) solid var(--bgcolor-neutral-secondary);
+        }
+        &:active {
+            background-color: var(--bgcolor-neutral-tertiary);
+            border: var(--border-width-s) solid var(--bgcolor-neutral-tertiary);
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 9f19b55aee..713408ca4f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -6,12 +6,9 @@
     import type { Column, ColumnType } from '$lib/helpers/types';
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
-    // TODO: use these for actions
-    // import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
+    import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
     import { Icon, Layout, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
-    // import type { Option } from './attributes/store';
-    // import CreateAttribute from './createAttribute.svelte';
     import { collection, columns, isCsvImportInProgress } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
@@ -32,10 +29,6 @@
 
     let showImportCSV = false;
     let showRecordsCreateSheet = false;
-
-    // let showCreateAttribute = false;
-    // let selectedAttribute: Option['name'] = null;
-
     const filterColumns = writable<Column[]>([]);
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
@@ -164,6 +157,7 @@
             {:else}
                 <EmptySheet
                     mode="records"
+                    showActions={$canWriteDocuments}
                     actions={{
                         primary: {
                             onClick: () => {
@@ -176,6 +170,7 @@
             <EmptySheet
                 mode="records"
                 title="You have no columns yet"
+                showActions={$canWriteCollections}
                 actions={{
                     primary: {
                         text: 'Create column',
@@ -190,13 +185,6 @@
     </div>
 {/key}
 
-<!-- TODO: goto attributes page -->
-<!--{#if showCreateAttribute}-->
-<!--    <CreateAttribute-->
-<!--        bind:showCreate={showCreateAttribute}-->
-<!--        bind:selectedOption={selectedAttribute} />-->
-<!--{/if}-->
-
 {#if showImportCSV}
     <!-- CSVs can be text/plain or text/csv sometimes! -->
     <FilePicker
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
index f6c02240eb..439d3482a2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/store.ts
@@ -15,12 +15,12 @@ import {
     IconCalendar,
     IconHashtag,
     IconLink,
+    IconList,
     IconLocationMarker,
     IconMail,
     IconRelationship,
     IconText,
-    IconToggle,
-    IconViewList
+    IconToggle
 } from '@appwrite.io/pink-icons-svelte';
 import type { ComponentType } from 'svelte';
 
@@ -139,7 +139,7 @@ export const attributeOptions: Option[] = [
         format: 'enum',
         create: submitEnum,
         update: updateEnum,
-        icon: IconViewList
+        icon: IconList
     },
     {
         name: 'Relationship',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 0c29361763..bfe0ae251c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -3,7 +3,7 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, Confirm, Id } from '$lib/components';
+    import { Alert, Confirm, Id, SortButton } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -17,7 +17,7 @@
         isRelationshipToMany,
         isString
     } from './document-[document]/attributes/store';
-    import { attributes, collection, columns, databaseSheetOptions } from './store';
+    import { attributes, collection, columns, databaseSheetOptions, sortState } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
     import {
@@ -47,10 +47,7 @@
         IconMail,
         IconText,
         IconToggle,
-        IconViewList,
-        IconSelector,
-        IconChevronUp,
-        IconChevronDown
+        IconViewList
     } from '@appwrite.io/pink-icons-svelte';
     import SheetOptions from './sheetOptions.svelte';
     import { type Action } from './sheetOptions.svelte';
@@ -207,32 +204,11 @@
     let showColumnDelete = false;
     let selectedRows: string[] = [];
 
-    let sortBy: string | null = null;
-    let sortDir: 'asc' | 'desc' | null = null;
-
-    async function sort(columnId: string) {
+    async function sort(query: string[]) {
         loading = true;
-        if (sortBy !== columnId) {
-            sortBy = columnId;
-            sortDir = 'asc';
-        } else if (sortDir === 'asc') {
-            sortDir = 'desc';
-        } else if (sortDir === 'desc') {
-            sortBy = null;
-            sortDir = null;
-        } else {
-            sortDir = 'asc';
-        }
-
-        let query: string[] = [];
-        if (sortBy && sortDir) {
-            query = [sortDir === 'asc' ? Query.orderAsc(sortBy) : Query.orderDesc(sortBy)];
-        }
-
         documents = await sdk
             .forProject(page.params.region, page.params.project)
             .databases.listDocuments(databaseId, collectionId, query);
-
         loading = false;
     }
 
@@ -369,23 +345,15 @@
                                 icon={column.icon ?? IconText}
                                 on:contextmenu={toggle}>
                                 <Layout.Stack
-                                    gap="xxxs"
+                                    gap="xs"
                                     direction="row"
                                     alignItems="center"
                                     alignContent="center">
                                     {column.title}
-                                    <Button.Button
-                                        icon
-                                        variant="extra-compact"
-                                        on:click={() => sort(column.id)}>
-                                        <Icon
-                                            size="s"
-                                            icon={sortBy === column.id
-                                                ? sortDir === 'asc'
-                                                    ? IconChevronUp
-                                                    : IconChevronDown
-                                                : IconSelector} />
-                                    </Button.Button>
+                                    <SortButton
+                                        onSort={sort}
+                                        column={column.id}
+                                        state={sortState} />
                                 </Layout.Stack>
                             </Spreadsheet.Header.Cell>
                         {/snippet}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 5eb0c431ce..facee35b3e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -1,7 +1,8 @@
 import { page } from '$app/stores';
+import { derived, writable } from 'svelte/store';
 import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
-import { derived, writable } from 'svelte/store';
+import type { SortDirection } from '$lib/components/sortButton.svelte';
 
 export type Attributes =
     | Models.AttributeBoolean
@@ -46,3 +47,8 @@ export const databaseSheetOptions = writable<DatabaseSheetOptions>({
     disableSubmit: false,
     submitAction: null
 });
+
+export const sortState = writable({
+    column: null as string,
+    direction: 'default' as SortDirection
+});

From b24b4633dd6998b29e33fc9b52ffefe819c4d609 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 18:59:32 +0530
Subject: [PATCH 012/118] fix: colors.

---
 src/lib/components/sortButton.svelte | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
index b3cab28ec3..11ee9d17da 100644
--- a/src/lib/components/sortButton.svelte
+++ b/src/lib/components/sortButton.svelte
@@ -52,7 +52,7 @@
             : $state.direction === 'asc'
               ? IconChevronUp
               : IconChevronDown}
-        color="--fgcolor-neutral-secondary" />
+        color="--fgcolor-neutral-weak" />
 </Button>
 
 <style lang="scss">
@@ -64,7 +64,12 @@
         &:hover {
             background-color: var(--bgcolor-neutral-secondary);
             border: var(--border-width-s) solid var(--bgcolor-neutral-secondary);
+
+            & :global(i) {
+                --icon-fill: var(--fgcolor-neutral-secondary) !important;
+            }
         }
+
         &:active {
             background-color: var(--bgcolor-neutral-tertiary);
             border: var(--border-width-s) solid var(--bgcolor-neutral-tertiary);

From 317fce6e868e34221b0a0d140d5b4b8b4e3415b9 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 19:34:39 +0530
Subject: [PATCH 013/118] fix: indexes page.

---
 .../indexes/+page.svelte                      | 135 +++++++++++------
 .../indexes/createIndex.svelte                | 139 ++++++++----------
 2 files changed, 158 insertions(+), 116 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 0f2657b5cb..000e72ac8c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -2,18 +2,16 @@
     import { Container } from '$lib/layout';
     import { collection } from '../store';
     import Delete from './deleteIndex.svelte';
-    import Create from './createIndex.svelte';
+    import CreateIndex from './createIndex.svelte';
     import Overview from './overviewIndex.svelte';
-    // import CreateAttribute from '../createAttribute.svelte';
     import type { Models } from '@appwrite.io/console';
     import { Button } from '$lib/elements/forms';
-    // import CreateAttributeDropdown from '../attributes/createAttributeDropdown.svelte';
-    // import type { Option } from '../attributes/store';
     import FailedModal from '../failedModal.svelte';
     import { canWriteCollections } from '$lib/stores/roles';
     import {
         ActionMenu,
         Badge,
+        FloatingActionBar,
         Icon,
         Layout,
         Link,
@@ -26,24 +24,37 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import type { ComponentProps } from 'svelte';
+    import { type ComponentProps, onMount } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
     import { page } from '$app/state';
+    import SideSheet from '../layout/sidesheet.svelte';
+    import { flags } from '$lib/flags';
 
     export let data;
 
-    let selectedIndex: Models.Index = null;
     let showCreateIndex = false;
-    let showOverview = false;
-    let showDelete = false;
-    // let showCreateAttribute = false;
-    // let selectedAttribute: Option['name'] = null;
-    let showFailed = false;
+    let selectedIndex: Models.Index = null;
+
+    let selectedIndexes = [];
+    let createIndex: CreateIndex;
+
     let error = '';
+    let showFailed = false;
+    let showDelete = false;
+    let showOverview = false;
+
+    let columns = [
+        { id: 'key' },
+        { id: 'type' },
+        { id: 'columns' },
+        // { id: 'orders' }, // design doesn't have orders atm
+        { id: 'lengths' },
+        { id: 'actions', width: 40, isAction: true }
+    ];
 
     function getAttributeStatusBadge(status: string): ComponentProps<Badge>['type'] {
         switch (status) {
@@ -57,6 +68,14 @@
                 return undefined;
         }
     }
+
+    const showLengths = flags.showIndexLengths(page.data);
+
+    onMount(() => {
+        if (!showLengths) {
+            columns = columns.filter((col) => col.id !== 'lengths');
+        }
+    });
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -80,27 +99,24 @@
             <SpreadsheetContainer>
                 <Spreadsheet.Root
                     let:root
-                    columns={[
-                        { id: 'key' },
-                        { id: 'type' },
-                        { id: 'attributes' },
-                        { id: 'orders' },
-                        { id: 'lengths' },
-                        { id: 'actions', width: 40 }
-                    ]}>
+                    {columns}
+                    allowSelection
+                    bind:selectedRows={selectedIndexes}>
                     <svelte:fragment slot="header" let:root>
                         <Spreadsheet.Header.Cell column="key" {root}>Key</Spreadsheet.Header.Cell>
                         <Spreadsheet.Header.Cell column="type" {root}>Type</Spreadsheet.Header.Cell>
-                        <Spreadsheet.Header.Cell column="attributes" {root}
-                            >Attributes</Spreadsheet.Header.Cell>
-                        <Spreadsheet.Header.Cell column="orders" {root}
-                            >Orders</Spreadsheet.Header.Cell>
-                        <Spreadsheet.Header.Cell column="lengths" {root}
-                            >Lengths</Spreadsheet.Header.Cell>
+                        <Spreadsheet.Header.Cell column="columns" {root}
+                            >Columns</Spreadsheet.Header.Cell>
+                        <!--                        <Spreadsheet.Header.Cell column="orders" {root}-->
+                        <!--                            >Orders</Spreadsheet.Header.Cell>-->
+                        {#if showLengths}
+                            <Spreadsheet.Header.Cell column="lengths" {root}
+                                >Lengths</Spreadsheet.Header.Cell>
+                        {/if}
                         <Spreadsheet.Header.Cell column="actions" {root} />
                     </svelte:fragment>
                     {#each data.collection.indexes as index}
-                        <Spreadsheet.Row.Base {root}>
+                        <Spreadsheet.Row.Base {root} id={index.key}>
                             <Spreadsheet.Cell column="key" {root}>
                                 <Layout.Stack direction="row" alignItems="center">
                                     {index.key}
@@ -123,15 +139,17 @@
                                 </Layout.Stack>
                             </Spreadsheet.Cell>
                             <Spreadsheet.Cell column="type" {root}>{index.type}</Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="attributes" {root}>
+                            <Spreadsheet.Cell column="columns" {root}>
                                 {index.attributes}
                             </Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="orders" {root}>
-                                {index.orders}
-                            </Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="lengths" {root}>
-                                {index.lengths}
-                            </Spreadsheet.Cell>
+                            <!--                            <Spreadsheet.Cell column="orders" {root}>-->
+                            <!--                                {index.orders}-->
+                            <!--                            </Spreadsheet.Cell>-->
+                            {#if showLengths}
+                                <Spreadsheet.Cell column="lengths" {root}>
+                                    {index.lengths}
+                                </Spreadsheet.Cell>
+                            {/if}
                             <Spreadsheet.Cell column="actions" {root}>
                                 <Popover let:toggle padding="none" placement="bottom-end">
                                     <Button text icon ariaLabel="more options" on:click={toggle}>
@@ -145,6 +163,7 @@
                                                 showOverview = true;
                                             }}>Overview</ActionMenu.Item.Button>
                                         <ActionMenu.Item.Button
+                                            status="danger"
                                             leadingIcon={IconTrash}
                                             on:click={() => {
                                                 selectedIndex = index;
@@ -169,7 +188,6 @@
                 }} />
         {/if}
     {:else}
-        <!-- todo: show create attribute if one doesn't exist -->
         <EmptySheet
             mode="indexes"
             title="You have no columns yet"
@@ -184,19 +202,54 @@
                 }
             }} />
     {/if}
+
+    {#if selectedIndexes.length > 0}
+        <div class="floating-action-bar">
+            <FloatingActionBar>
+                <svelte:fragment slot="start">
+                    <div style:width="max-content">
+                        <Layout.Stack direction="row" alignItems="center" gap="m">
+                            <Badge content={selectedIndexes.length.toString()} />
+                            <span style:font-size="14px">
+                                {selectedIndexes.length > 1 ? 'indexex' : 'index'}
+                                selected
+                            </span>
+                        </Layout.Stack>
+                    </div>
+                </svelte:fragment>
+                <svelte:fragment slot="end">
+                    <Button text on:click={() => (selectedIndexes = [])}>Cancel</Button>
+                    <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
+                </svelte:fragment>
+            </FloatingActionBar>
+        </div>
+    {/if}
 </div>
 
-<Create bind:showCreateIndex />
+<SideSheet
+    title="Create index"
+    bind:show={showCreateIndex}
+    submit={{
+        text: 'Create',
+        onClick: async () => await createIndex.create()
+    }}>
+    <CreateIndex {showCreateIndex} bind:this={createIndex} />
+</SideSheet>
 
 {#if selectedIndex}
+    <!-- TODO: delete multiple indexes -->
     <Delete bind:showDelete {selectedIndex} />
     <Overview bind:showOverview {selectedIndex} />
 {/if}
 
-<!--{#if showCreateAttribute}-->
-<!--    <CreateAttribute-->
-<!--        bind:showCreate={showCreateAttribute}-->
-<!--        bind:selectedOption={selectedAttribute} />-->
-<!--{/if}-->
-
 <FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />
+
+<style lang="scss">
+  .floating-action-bar {
+    left: 50%;
+    width: 100%;
+    z-index: 14;
+    position: absolute;
+    transform: translateX(-50%);
+  }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index 1d6858eac2..cf958c777d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -3,7 +3,6 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputNumber, InputSelect, InputText } from '$lib/elements/forms';
     import { remove } from '$lib/helpers/array';
@@ -13,7 +12,7 @@
     import { isRelationship } from '../document-[document]/attributes/store';
     import { type Attributes, collection, indexes } from '../store';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
     import { flags } from '$lib/flags';
 
     export let showCreateIndex = false;
@@ -22,12 +21,12 @@
     const databaseId = page.params.database;
 
     let key = '';
-    let error: string;
     let types = [
         { value: IndexType.Key, label: 'Key' },
         { value: IndexType.Unique, label: 'Unique' },
         { value: IndexType.Fulltext, label: 'FullText' }
     ];
+
     let selectedType = IndexType.Key;
 
     let attributeOptions = $collection.attributes
@@ -61,16 +60,14 @@
     }
 
     $: if (showCreateIndex) {
-        error = null;
         initialize();
         key = generateIndexKey();
     }
 
     $: addAttributeDisabled = !attributeList.at(-1)?.value || !attributeList.at(-1)?.order;
 
-    async function create() {
+    export async function create() {
         if (!(key && selectedType && !addAttributeDisabled)) {
-            error = 'All fields are required';
             return;
         }
 
@@ -101,7 +98,10 @@
             trackEvent(Submit.IndexCreate);
             showCreateIndex = false;
         } catch (err) {
-            error = err.message;
+            addNotification({
+                type: 'error',
+                message: err.message
+            });
             trackError(err, Submit.IndexCreate);
         }
     }
@@ -114,72 +114,61 @@
     }
 </script>
 
-<Modal title="Create index" bind:error onSubmit={create} bind:show={showCreateIndex}>
-    <InputText
-        required
-        id="key"
-        label="Index Key"
-        placeholder="Enter Key"
-        bind:value={key}
-        autofocus />
-    <InputSelect required options={types} id="type" label="Index type" bind:value={selectedType} />
-
-    <Layout.Stack gap="s">
-        {#each attributeList as attribute, i}
-            <Layout.Stack direction="row">
-                <InputSelect
-                    required
-                    options={[
-                        { value: '$id', label: '$id' },
-                        { value: '$createdAt', label: '$createdAt' },
-                        { value: '$updatedAt', label: '$updatedAt' },
-                        ...attributeOptions
-                    ]}
-                    id={`attribute-${i}`}
-                    label={i === 0 ? 'Attribute' : undefined}
-                    placeholder="Select Attribute"
-                    bind:value={attribute.value} />
-
-                <InputSelect
-                    options={[
-                        { value: 'ASC', label: 'ASC' },
-                        { value: 'DESC', label: 'DESC' }
-                    ]}
-                    required
-                    id={`order-${i}`}
-                    label={i === 0 ? 'Order' : undefined}
-                    bind:value={attribute.order}
-                    placeholder="Select Order" />
-
-                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
-                    {#if selectedType === IndexType.Key && showLengths}
-                        <InputNumber
-                            id={`length-${i}`}
-                            label={i === 0 ? 'Length' : undefined}
-                            placeholder="Enter Length"
-                            bind:value={attribute.length} />
-                    {/if}
-                    <Button
-                        icon
-                        compact
-                        disabled={attributeList.length <= 1}
-                        on:click={() => {
-                            attributeList = remove(attributeList, i);
-                        }}>
-                        <span class="icon-x" aria-hidden="true"></span>
-                    </Button>
-                </Layout.Stack>
+<InputText required id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
+<InputSelect required options={types} id="type" label="Index type" bind:value={selectedType} />
+
+<Layout.Stack gap="s">
+    {#each attributeList as attribute, i}
+        <Layout.Stack direction="row">
+            <InputSelect
+                required
+                options={[
+                    { value: '$id', label: '$id' },
+                    { value: '$createdAt', label: '$createdAt' },
+                    { value: '$updatedAt', label: '$updatedAt' },
+                    ...attributeOptions
+                ]}
+                id={`attribute-${i}`}
+                label={i === 0 ? 'Column' : undefined}
+                placeholder="Select column"
+                bind:value={attribute.value} />
+
+            <InputSelect
+                options={[
+                    { value: 'ASC', label: 'ASC' },
+                    { value: 'DESC', label: 'DESC' }
+                ]}
+                required
+                id={`order-${i}`}
+                label={i === 0 ? 'Order' : undefined}
+                bind:value={attribute.order}
+                placeholder="Select Order" />
+
+            {#if selectedType === IndexType.Key && showLengths}
+                <InputNumber
+                    id={`length-${i}`}
+                    label={i === 0 ? 'Length' : undefined}
+                    placeholder="Enter Length"
+                    bind:value={attribute.length} />
+            {/if}
+
+            <Layout.Stack direction="row" alignItems="flex-end" inline>
+                <Button
+                    icon
+                    secondary
+                    disabled={attributeList.length <= 1}
+                    on:click={() => {
+                        attributeList = remove(attributeList, i);
+                    }}>
+                    <Icon icon={IconX} size="s" />
+                </Button>
             </Layout.Stack>
-        {/each}
-        <div>
-            <Button compact on:click={addAttribute} disabled={addAttributeDisabled}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Add attribute
-            </Button>
-        </div>
-    </Layout.Stack>
-    <svelte:fragment slot="footer">
-        <Button secondary on:click={() => (showCreateIndex = false)}>Cancel</Button>
-        <Button submit>Create</Button>
-    </svelte:fragment>
-</Modal>
+        </Layout.Stack>
+    {/each}
+    <div>
+        <Button compact on:click={addAttribute} disabled={addAttributeDisabled}>
+            <Icon icon={IconPlus} slot="start" size="s" />
+            Add column
+        </Button>
+    </div>
+</Layout.Stack>

From c390661adcd0ccc9f28f2b67b87bbcafec5991c4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 19:37:52 +0530
Subject: [PATCH 014/118] update: improve value.

---
 .../collection-[collection]/indexes/+page.svelte                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 000e72ac8c..57c3502bb4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -140,7 +140,7 @@
                             </Spreadsheet.Cell>
                             <Spreadsheet.Cell column="type" {root}>{index.type}</Spreadsheet.Cell>
                             <Spreadsheet.Cell column="columns" {root}>
-                                {index.attributes}
+                                {index.attributes.join(', ')}
                             </Spreadsheet.Cell>
                             <!--                            <Spreadsheet.Cell column="orders" {root}>-->
                             <!--                                {index.orders}-->

From cc9472f63f5a406524b5d5b8663432251429c83c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 19:40:59 +0530
Subject: [PATCH 015/118] update: inline index preview/overview with sheet.

---
 .../indexes/+page.svelte                      | 19 +++--
 .../indexes/overviewIndex.svelte              | 78 +++++++++----------
 .../layout/sidesheet.svelte                   | 44 ++++++-----
 3 files changed, 72 insertions(+), 69 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 57c3502bb4..159d5ad4c1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -239,17 +239,20 @@
 {#if selectedIndex}
     <!-- TODO: delete multiple indexes -->
     <Delete bind:showDelete {selectedIndex} />
-    <Overview bind:showOverview {selectedIndex} />
 {/if}
 
+<SideSheet title="Preview index" bind:show={showOverview}>
+    <Overview {selectedIndex} />
+</SideSheet>
+
 <FailedModal bind:show={showFailed} title="Create index" header="Creation failed" {error} />
 
 <style lang="scss">
-  .floating-action-bar {
-    left: 50%;
-    width: 100%;
-    z-index: 14;
-    position: absolute;
-    transform: translateX(-50%);
-  }
+    .floating-action-bar {
+        left: 50%;
+        width: 100%;
+        z-index: 14;
+        position: absolute;
+        transform: translateX(-50%);
+    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
index f7318b6eaf..734ca0d14c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
@@ -1,57 +1,53 @@
 <script lang="ts">
-    import { Modal } from '$lib/components';
     import { InputText } from '$lib/elements/forms';
     import { Layout } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
     import { page } from '$app/state';
     import { flags } from '$lib/flags';
 
-    export let showOverview = false;
     export let selectedIndex: Models.Index = null;
 
     const showLengths = flags.showIndexLengths(page.data);
 </script>
 
-<Modal title="Overview" bind:show={showOverview}>
-    <InputText
-        required
-        id="key"
-        label="Index Key"
-        placeholder="Enter Key"
-        value={selectedIndex.key}
-        readonly />
-    <InputText
-        required
-        id="type"
-        label="Index type"
-        placeholder="Select type"
-        value={selectedIndex.type}
-        readonly />
+<InputText
+    required
+    id="key"
+    label="Index Key"
+    placeholder="Enter Key"
+    value={selectedIndex.key}
+    readonly />
+<InputText
+    required
+    id="type"
+    label="Index type"
+    placeholder="Select type"
+    value={selectedIndex.type}
+    readonly />
 
-    {#if selectedIndex?.attributes?.length}
-        {#each selectedIndex.attributes as attribute, i}
-            <Layout.Stack direction="row">
+{#if selectedIndex?.attributes?.length}
+    {#each selectedIndex.attributes as attribute, i}
+        <Layout.Stack direction="row">
+            <InputText
+                required
+                label={i === 0 ? 'Attribute' : ''}
+                id={`value-${attribute}`}
+                value={attribute}
+                readonly />
+            <InputText
+                required
+                label={i === 0 ? 'Order' : ''}
+                id={`value-${selectedIndex.orders[i]}`}
+                value={selectedIndex.orders[i]}
+                readonly />
+            {#if showLengths}
                 <InputText
                     required
-                    label={i === 0 ? 'Attribute' : ''}
-                    id={`value-${attribute}`}
-                    value={attribute}
+                    label={i === 0 ? 'Length' : ''}
+                    id={`value-${selectedIndex.lengths[i]}`}
+                    value={selectedIndex.lengths[i]?.toString() ?? null}
                     readonly />
-                <InputText
-                    required
-                    label={i === 0 ? 'Order' : ''}
-                    id={`value-${selectedIndex.orders[i]}`}
-                    value={selectedIndex.orders[i]}
-                    readonly />
-                {#if showLengths}
-                    <InputText
-                        required
-                        label={i === 0 ? 'Length' : ''}
-                        id={`value-${selectedIndex.lengths[i]}`}
-                        value={selectedIndex.lengths[i]?.toString() ?? null}
-                        readonly />
-                {/if}
-            </Layout.Stack>
-        {/each}
-    {/if}
-</Modal>
+            {/if}
+        </Layout.Stack>
+    {/each}
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
index 34cc487fcd..e98c9e5b8e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
@@ -15,11 +15,13 @@
         title: string;
         spaced?: boolean;
         closeOnBlur?: boolean;
-        submit: {
-            text: string;
-            disabled?: boolean;
-            onClick: () => void | Promise<void>;
-        };
+        submit?:
+            | {
+                  text: string;
+                  disabled?: boolean;
+                  onClick: () => void | Promise<void>;
+              }
+            | undefined;
         children: Snippet;
     } = $props();
 </script>
@@ -37,29 +39,31 @@
         <Layout.Stack direction="column" justifyContent="space-evenly">
             <Form
                 onSubmit={async () => {
-                    await submit.onClick();
+                    await submit?.onClick();
                     show = false;
                 }}>
                 <Layout.Stack gap="xl">
                     {@render children()}
                 </Layout.Stack>
 
-                <div class="sheet-footer">
-                    <Layout.Stack gap="l">
-                        <Divider />
+                {#if submit}
+                    <div class="sheet-footer">
+                        <Layout.Stack gap="l">
+                            <Divider />
 
-                        <div class="sheet-footer-actions">
-                            <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
-                                <Button size="s" secondary on:click={() => (show = false)}
-                                    >Cancel</Button>
+                            <div class="sheet-footer-actions">
+                                <Layout.Stack gap="m" direction="row" justifyContent="flex-end">
+                                    <Button size="s" secondary on:click={() => (show = false)}
+                                        >Cancel</Button>
 
-                                <Button size="s" submit disabled={submit.disabled}>
-                                    {submit.text}
-                                </Button>
-                            </Layout.Stack>
-                        </div>
-                    </Layout.Stack>
-                </div>
+                                    <Button size="s" submit disabled={submit.disabled}>
+                                        {submit.text}
+                                    </Button>
+                                </Layout.Stack>
+                            </div>
+                        </Layout.Stack>
+                    </div>
+                {/if}
             </Form>
         </Layout.Stack>
     </Sheet>

From 0c86c2a4df82965105c2a8fb46ca0f387b7ee825 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 19:45:59 +0530
Subject: [PATCH 016/118] update: inline index creation on columns page.

---
 .../attributes/+page.svelte                        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index ca4725c0cc..53d14f3479 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -52,6 +52,7 @@
     let error = '';
 
     let showEdit = false;
+    let createIndex: CreateIndex;
     let editAttribute: EditAttribute;
     let createAttribute: CreateAttribute;
 
@@ -303,9 +304,16 @@
     <EditAttribute showEdit isModal={false} {selectedAttribute} bind:this={editAttribute} />
 </SideSheet>
 
-{#if showCreateIndex}
-    <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} />
-{/if}
+<SideSheet
+    title="Create index"
+    bind:show={showCreateIndex}
+    submit={{
+        text: 'Create',
+        onClick: async () => await createIndex.create()
+    }}>
+    <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} bind:this={createIndex} />
+</SideSheet>
+
 {#if showFailed}
     <FailedModal bind:show={showFailed} title="Create attribute" header="Creation failed" {error} />
 {/if}

From be0fdeea3d30faefd086a0c3d743d29fc6715007 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 16 Jul 2025 19:47:09 +0530
Subject: [PATCH 017/118] update: inline index creation on columns page.

---
 .../collection-[collection]/attributes/+page.svelte          | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 53d14f3479..5c5110126f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -311,7 +311,10 @@
         text: 'Create',
         onClick: async () => await createIndex.create()
     }}>
-    <CreateIndex bind:showCreateIndex externalAttribute={selectedAttribute} bind:this={createIndex} />
+    <CreateIndex
+        bind:showCreateIndex
+        externalAttribute={selectedAttribute}
+        bind:this={createIndex} />
 </SideSheet>
 
 {#if showFailed}

From 40a9dd95b46b9a9b318abc9cf174ff74ece50024 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Jul 2025 11:49:32 +0530
Subject: [PATCH 018/118] fix: nullable click.

---
 .../collection-[collection]/layout/emptySheet.svelte         | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 124e0355f2..dc1e57ca03 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -165,10 +165,11 @@
                         {#if mode === 'records'}
                             <Tooltip>
                                 <Button.Button
-                                    disabled={actions?.random?.disabled}
                                     size="s"
                                     variant="secondary"
-                                    on:click={actions?.random.onClick}>
+                                    disabled={actions?.random?.disabled}
+                                    on:click={actions?.random?.onClick}
+                                >
                                     {actions?.random?.text ?? `Generate random data`}
                                 </Button.Button>
                                 <span slot="tooltip">Yet to be added</span>

From d5a1e7d1d91467b93d46ae043542429571a83b58 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Jul 2025 11:50:22 +0530
Subject: [PATCH 019/118] lint.

---
 .../collection-[collection]/layout/emptySheet.svelte           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index dc1e57ca03..5656c05e84 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -168,8 +168,7 @@
                                     size="s"
                                     variant="secondary"
                                     disabled={actions?.random?.disabled}
-                                    on:click={actions?.random?.onClick}
-                                >
+                                    on:click={actions?.random?.onClick}>
                                     {actions?.random?.text ?? `Generate random data`}
                                 </Button.Button>
                                 <span slot="tooltip">Yet to be added</span>

From 7ca72570f470954625a55e63a271570db1fd7768 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Jul 2025 13:07:28 +0530
Subject: [PATCH 020/118] fix: make cells non-editable. should be changed on
 pink though.

---
 .../attributes/+page.svelte                   |  6 +--
 .../indexes/+page.svelte                      | 17 ++++----
 .../indexes/deleteIndex.svelte                | 43 +++++++++++++++----
 .../indexes/overviewIndex.svelte              |  2 +-
 4 files changed, 47 insertions(+), 21 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 5c5110126f..0a042943a0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -179,13 +179,13 @@
                                 </Layout.Stack>
                             </Layout.Stack>
                         </Spreadsheet.Cell>
-                        <Spreadsheet.Cell column="indexed" {root}>
+                        <Spreadsheet.Cell column="indexed" {root} isEditable={false}>
                             {@const isIndexed = $indexes.some((index) =>
                                 index.attributes.includes(attribute.key)
                             )}
                             <Selector.Checkbox size="s" checked={isIndexed} disabled />
                         </Spreadsheet.Cell>
-                        <Spreadsheet.Cell column="default" {root}>
+                        <Spreadsheet.Cell column="default" {root} isEditable={false}>
                             {@const _default =
                                 attribute?.default !== null && attribute?.default !== undefined
                                     ? attribute?.default
@@ -197,7 +197,7 @@
                                 {_default}
                             {/if}
                         </Spreadsheet.Cell>
-                        <Spreadsheet.Cell column="actions" {root}>
+                        <Spreadsheet.Cell column="actions" {root} isEditable={false}>
                             {#if $isCsvImportInProgress}
                                 <CsvDisabled>
                                     <Button disabled text icon ariaLabel="more options">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 159d5ad4c1..eb165ab965 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -117,7 +117,7 @@
                     </svelte:fragment>
                     {#each data.collection.indexes as index}
                         <Spreadsheet.Row.Base {root} id={index.key}>
-                            <Spreadsheet.Cell column="key" {root}>
+                            <Spreadsheet.Cell column="key" {root} isEditable={false}>
                                 <Layout.Stack direction="row" alignItems="center">
                                     {index.key}
                                     {#if index.status !== 'available'}
@@ -138,15 +138,15 @@
                                     {/if}
                                 </Layout.Stack>
                             </Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="type" {root}>{index.type}</Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="columns" {root}>
+                            <Spreadsheet.Cell column="type" {root} isEditable={false}>{index.type}</Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="columns" {root} isEditable={false}>
                                 {index.attributes.join(', ')}
                             </Spreadsheet.Cell>
-                            <!--                            <Spreadsheet.Cell column="orders" {root}>-->
+                            <!--                            <Spreadsheet.Cell column="orders" {root} isEditable={false}>-->
                             <!--                                {index.orders}-->
                             <!--                            </Spreadsheet.Cell>-->
                             {#if showLengths}
-                                <Spreadsheet.Cell column="lengths" {root}>
+                                <Spreadsheet.Cell column="lengths" {root} isEditable={false}>
                                     {index.lengths}
                                 </Spreadsheet.Cell>
                             {/if}
@@ -211,7 +211,7 @@
                         <Layout.Stack direction="row" alignItems="center" gap="m">
                             <Badge content={selectedIndexes.length.toString()} />
                             <span style:font-size="14px">
-                                {selectedIndexes.length > 1 ? 'indexex' : 'index'}
+                                {selectedIndexes.length > 1 ? 'indexes' : 'index'}
                                 selected
                             </span>
                         </Layout.Stack>
@@ -237,8 +237,9 @@
 </SideSheet>
 
 {#if selectedIndex}
-    <!-- TODO: delete multiple indexes -->
-    <Delete bind:showDelete {selectedIndex} />
+    <Delete bind:showDelete selectedIndex={selectedIndex} />
+{:else if selectedIndexes && selectedIndexes.length}
+    <Delete bind:showDelete bind:selectedIndex={selectedIndexes} />
 {/if}
 
 <SideSheet title="Preview index" bind:show={showOverview}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index 1669fea992..8a11b3a579 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -10,22 +10,38 @@
     import Confirm from '$lib/components/confirm.svelte';
     import { Typography } from '@appwrite.io/pink-svelte';
 
-    export let showDelete = false;
-    export let selectedIndex: Models.Index;
+    let {
+        showDelete = $bindable(false),
+        selectedIndex = $bindable(null),
+    }: {
+        showDelete: boolean;
+        selectedIndex: Models.Index | string[]
+    } = $props()
 
-    const databaseId = page.params.database;
-    let error: string;
+    let error: string = $state(null);
+    let selectedKeys = $derived(getKeys(selectedIndex));
+
+    function getKeys(selected: Models.Index | string[]): string[] {
+        return Array.isArray(selected) ? selected : [selected.key];
+    }
 
     async function handleDelete() {
         try {
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.deleteIndex(databaseId, $collection.$id, selectedIndex.key);
+            await Promise.all(
+                selectedKeys.map((key) =>
+                    sdk
+                        .forProject(page.params.region, page.params.project)
+                        .databases.deleteIndex(page.params.database, $collection.$id, key)
+                )
+            );
             await invalidate(Dependencies.COLLECTION);
             showDelete = false;
             addNotification({
                 type: 'success',
-                message: `Index has been deleted`
+                message:
+                    selectedKeys.length === 1
+                        ? 'Index has been deleted'
+                        : `${selectedKeys.length} indexes have been deleted`
             });
             trackEvent(Submit.IndexDelete);
         } catch (e) {
@@ -37,6 +53,15 @@
 
 <Confirm onSubmit={handleDelete} title="Delete index" bind:open={showDelete} bind:error>
     <Typography.Text>
-        Are you sure you want to delete <b>{selectedIndex.key}</b> from <b>{$collection.name}</b>?
+        {#if selectedKeys.length === 1}
+            Are you sure you want to delete <b>{selectedKeys[0]}</b> from
+            <b>{$collection.name}</b>?
+        {:else}
+            Are you sure you want to delete
+            <b>
+                {selectedKeys.join(', ')}
+            </b>
+            from <b>{$collection.name}</b>?
+        {/if}
     </Typography.Text>
 </Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
index 734ca0d14c..627fb9d90f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
@@ -30,7 +30,7 @@
         <Layout.Stack direction="row">
             <InputText
                 required
-                label={i === 0 ? 'Attribute' : ''}
+                label={i === 0 ? 'Column' : ''}
                 id={`value-${attribute}`}
                 value={attribute}
                 readonly />

From 9ab367ab8aaf72e8c861cafca72ed29bfdd8809e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Jul 2025 13:13:46 +0530
Subject: [PATCH 021/118] update: lint and improve index deletion messages.

---
 .../indexes/+page.svelte                      |  5 ++-
 .../indexes/deleteIndex.svelte                | 39 +++++++++++--------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index eb165ab965..7a8269f294 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -138,7 +138,8 @@
                                     {/if}
                                 </Layout.Stack>
                             </Spreadsheet.Cell>
-                            <Spreadsheet.Cell column="type" {root} isEditable={false}>{index.type}</Spreadsheet.Cell>
+                            <Spreadsheet.Cell column="type" {root} isEditable={false}
+                                >{index.type}</Spreadsheet.Cell>
                             <Spreadsheet.Cell column="columns" {root} isEditable={false}>
                                 {index.attributes.join(', ')}
                             </Spreadsheet.Cell>
@@ -237,7 +238,7 @@
 </SideSheet>
 
 {#if selectedIndex}
-    <Delete bind:showDelete selectedIndex={selectedIndex} />
+    <Delete bind:showDelete {selectedIndex} />
 {:else if selectedIndexes && selectedIndexes.length}
     <Delete bind:showDelete bind:selectedIndex={selectedIndexes} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
index 8a11b3a579..83fd175df4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/deleteIndex.svelte
@@ -8,15 +8,14 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import Confirm from '$lib/components/confirm.svelte';
-    import { Typography } from '@appwrite.io/pink-svelte';
 
     let {
         showDelete = $bindable(false),
-        selectedIndex = $bindable(null),
+        selectedIndex = $bindable(null)
     }: {
         showDelete: boolean;
-        selectedIndex: Models.Index | string[]
-    } = $props()
+        selectedIndex: Models.Index | string[];
+    } = $props();
 
     let error: string = $state(null);
     let selectedKeys = $derived(getKeys(selectedIndex));
@@ -51,17 +50,23 @@
     }
 </script>
 
-<Confirm onSubmit={handleDelete} title="Delete index" bind:open={showDelete} bind:error>
-    <Typography.Text>
-        {#if selectedKeys.length === 1}
-            Are you sure you want to delete <b>{selectedKeys[0]}</b> from
-            <b>{$collection.name}</b>?
-        {:else}
-            Are you sure you want to delete
-            <b>
-                {selectedKeys.join(', ')}
-            </b>
-            from <b>{$collection.name}</b>?
-        {/if}
-    </Typography.Text>
+<Confirm
+    bind:error
+    confirmDeletion
+    title="Delete index"
+    bind:open={showDelete}
+    onSubmit={handleDelete}>
+    {#if selectedKeys.length === 1}
+        <p>Are you sure you want to delete <b>{selectedKeys[0]}</b>?</p>
+        <p>
+            Deleting this index may slow down queries that depend on it. This action is
+            irreversible.
+        </p>
+    {:else}
+        <p>Are you sure you want to delete <b>{selectedKeys.join(', ')}</b>?</p>
+        <p>
+            Deleting these indexes may slow down queries that depend on it. This action is
+            irreversible.
+        </p>
+    {/if}
 </Confirm>

From 131517a200efb7dac3ff332580d08ea28689cc7e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Jul 2025 13:22:24 +0530
Subject: [PATCH 022/118] update: svelte5 runes migrations.

---
 .../indexes/+page.svelte                      | 25 +++++++++++--------
 .../indexes/overviewIndex.svelte              | 10 +++++---
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 7a8269f294..86ea921418 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -33,28 +33,33 @@
     import { page } from '$app/state';
     import SideSheet from '../layout/sidesheet.svelte';
     import { flags } from '$lib/flags';
+    import type { PageData } from './$types';
 
-    export let data;
+    let {
+        data
+    }: {
+        data: PageData;
+    } = $props();
 
-    let showCreateIndex = false;
-    let selectedIndex: Models.Index = null;
+    let showCreateIndex = $state(false);
+    let selectedIndex: Models.Index = $state(null);
 
-    let selectedIndexes = [];
+    let selectedIndexes = $state([]);
     let createIndex: CreateIndex;
 
-    let error = '';
-    let showFailed = false;
-    let showDelete = false;
-    let showOverview = false;
+    let error = $state('');
+    let showFailed = $state(false);
+    let showDelete = $state(false);
+    let showOverview = $state(false);
 
-    let columns = [
+    let columns = $state([
         { id: 'key' },
         { id: 'type' },
         { id: 'columns' },
         // { id: 'orders' }, // design doesn't have orders atm
         { id: 'lengths' },
         { id: 'actions', width: 40, isAction: true }
-    ];
+    ]);
 
     function getAttributeStatusBadge(status: string): ComponentProps<Badge>['type'] {
         switch (status) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
index 627fb9d90f..bd6c3343f5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/overviewIndex.svelte
@@ -1,11 +1,15 @@
 <script lang="ts">
+    import { page } from '$app/state';
+    import { flags } from '$lib/flags';
     import { InputText } from '$lib/elements/forms';
     import { Layout } from '@appwrite.io/pink-svelte';
     import type { Models } from '@appwrite.io/console';
-    import { page } from '$app/state';
-    import { flags } from '$lib/flags';
 
-    export let selectedIndex: Models.Index = null;
+    let {
+        selectedIndex = null
+    }: {
+        selectedIndex: Models.Index;
+    } = $props();
 
     const showLengths = flags.showIndexLengths(page.data);
 </script>

From 39300343304558eee8cafec50b613ad3279c12c1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 17 Jul 2025 19:20:26 +0530
Subject: [PATCH 023/118] add: duplicate record flow.

---
 .../collection-[collection]/+page.svelte      |  16 +-
 .../collection-[collection]/+page.ts          |   1 +
 .../attributes/edit.svelte                    |   8 +-
 .../createRecord.svelte                       |  43 +++-
 .../editDocument.svelte                       | 132 +++++++++++
 .../layout/sidesheet.svelte                   |   6 +-
 .../sheetOptions.svelte                       |  56 +++--
 .../spreadsheet.svelte                        | 206 +++++++++++++-----
 .../collection-[collection]/store.ts          |  17 +-
 9 files changed, 388 insertions(+), 97 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/editDocument.svelte

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 713408ca4f..531be5ee59 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -9,7 +9,7 @@
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
     import { Icon, Layout, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
-    import { collection, columns, isCsvImportInProgress } from './store';
+    import { collection, columns, isCsvImportInProgress, showRecordsCreateSheet } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
     import FilePicker from '$lib/components/filePicker.svelte';
@@ -28,7 +28,6 @@
     export let data: PageData;
 
     let showImportCSV = false;
-    let showRecordsCreateSheet = false;
     const filterColumns = writable<Column[]>([]);
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
@@ -106,7 +105,7 @@
                         <Button
                             secondary
                             disabled={!(hasAttributes && hasValidAttributes)}
-                            on:click={() => (showRecordsCreateSheet = true)}
+                            on:click={() => ($showRecordsCreateSheet.show = true)}
                             event="create_document">
                             <Icon icon={IconPlus} slot="start" size="s" />
                             Create document
@@ -118,7 +117,7 @@
                 <Button
                     secondary
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    on:click={() => (showRecordsCreateSheet = true)}
+                    on:click={() => ($showRecordsCreateSheet.show = true)}
                     event="create_document">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create document
@@ -131,7 +130,7 @@
         {#if hasAttributes && hasValidAttributes}
             {#if data.documents.total}
                 <Divider />
-                <SpreadSheet {data} bind:showRecordsCreateSheet />
+                <SpreadSheet {data} bind:showRecordsCreateSheet={$showRecordsCreateSheet} />
             {:else if $hasPageQueries}
                 <EmptySearch hidePages>
                     <div class="common-section">
@@ -161,7 +160,7 @@
                     actions={{
                         primary: {
                             onClick: () => {
-                                showRecordsCreateSheet = true;
+                                $showRecordsCreateSheet.show = true;
                             }
                         }
                     }} />
@@ -198,4 +197,7 @@
         }} />
 {/if}
 
-<CreateRecord collection={$collection} bind:showSheet={showRecordsCreateSheet} />
+<CreateRecord
+    collection={$collection}
+    bind:showSheet={$showRecordsCreateSheet.show}
+    bind:existingData={$showRecordsCreateSheet.document} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
index a8a40b4c1a..45f8ef0876 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.ts
@@ -6,6 +6,7 @@ import type { PageLoad } from './$types';
 import { queries, queryParamToMap } from '$lib/components/filters';
 
 export const load: PageLoad = async ({ params, depends, url, route }) => {
+    depends(Dependencies.DOCUMENT); /* TODO: we could just invalidate the documents maybe*/
     depends(Dependencies.DOCUMENTS);
     const page = getPage(url);
     // TODO: apply pagination
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 9de4c89435..0ce1e1401b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -8,7 +8,7 @@
     import { Button, InputText } from '$lib/elements/forms';
     import deepEqual from 'deep-equal';
     import { addNotification } from '$lib/stores/notifications';
-    import { type Attributes, databaseSheetOptions } from '../store';
+    import { type Attributes, databaseColumnSheetOptions } from '../store';
     import { attributeOptions, type Option } from './store';
     import { onMount } from 'svelte';
     import { Layout } from '@appwrite.io/pink-svelte';
@@ -26,7 +26,7 @@
 
     onMount(() => {
         if (!isModal) {
-            databaseSheetOptions.update((opts) => ({
+            databaseColumnSheetOptions.update((opts) => ({
                 ...opts,
                 submitAction: () => submit()
             }));
@@ -64,7 +64,7 @@
 
             if (!isModal) {
                 invalidate(Dependencies.DOCUMENTS);
-                $databaseSheetOptions.show = false;
+                $databaseColumnSheetOptions.show = false;
             }
         } catch (e) {
             error = e.message;
@@ -91,7 +91,7 @@
         }
     }
 
-    $: $databaseSheetOptions.disableSubmit = deepEqual(currentAttr, selectedAttribute);
+    $: $databaseColumnSheetOptions.disableSubmit = deepEqual(currentAttr, selectedAttribute);
 </script>
 
 {#if isModal}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
index 025f0a7ff7..a2dfc0828d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
@@ -3,7 +3,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
-    import { writable } from 'svelte/store';
+    import { type Writable, writable } from 'svelte/store';
     import AttributeForm from './document-[document]/attributeForm.svelte';
     import { Permissions } from '$lib/components/permissions';
     import type { Attributes } from './store';
@@ -13,10 +13,17 @@
     import { Dependencies } from '$lib/constants';
     import SideSheet from './layout/sidesheet.svelte';
 
-    export let showSheet = false;
-    export let collection: Models.Collection;
+    let {
+        collection,
+        showSheet = $bindable(false),
+        existingData = $bindable(null)
+    }: {
+        showSheet: boolean;
+        collection: Models.Collection;
+        existingData: Models.Document | null;
+    } = $props();
 
-    let isSubmitting = false;
+    let isSubmitting = $state(false);
 
     type CreateDocument = {
         id?: string;
@@ -30,20 +37,31 @@
         const initial = {
             id: null,
             document: availableAttributes.reduce((acc, attr) => {
-                acc[attr.key] = attr.array ? [] : null;
-
+                if (existingData && existingData[attr.key]) {
+                    acc[attr.key] = attr.array
+                        ? Array.isArray(existingData[attr.key])
+                            ? [...existingData[attr.key]]
+                            : []
+                        : existingData[attr.key];
+                } else {
+                    acc[attr.key] = attr.array ? [] : null;
+                }
                 return acc;
             }, {}),
             permissions: [],
             attributes: availableAttributes
         };
 
-        const store = writable<CreateDocument>({ ...initial });
-
-        return store;
+        return writable<CreateDocument>({ ...initial });
     }
 
-    const createDocument = createDocumentWritable();
+    let createDocument: Writable<CreateDocument> = $state<Writable<CreateDocument> | null>(null);
+
+    $effect(() => {
+        if (showSheet) {
+            createDocument = createDocumentWritable();
+        }
+    });
 
     async function create() {
         isSubmitting = true;
@@ -68,6 +86,9 @@
             trackEvent(Submit.DocumentCreate, {
                 customId: !!$createDocument.id
             });
+
+            // post op clear.
+            existingData = null;
         } catch (error) {
             addNotification({
                 message: error.message,
@@ -84,7 +105,7 @@
     <!-- TODO: add a ID badge-->
     <SideSheet
         spaced
-        title="Create record"
+        title={`${existingData ? 'Duplicate' : 'Create'} record`}
         bind:show={showSheet}
         closeOnBlur={false}
         submit={{
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/editDocument.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/editDocument.svelte
new file mode 100644
index 0000000000..aa1d01186b
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/editDocument.svelte
@@ -0,0 +1,132 @@
+<script lang="ts">
+    import { symmetricDifference } from '$lib/helpers/array';
+    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { type Writable, writable } from 'svelte/store';
+    import type { Models } from '@appwrite.io/console';
+    import { Dependencies } from '$lib/constants';
+    import { invalidate } from '$app/navigation';
+    import { collection, type Attributes } from './store';
+    import AttributeItem from './document-[document]/attributeItem.svelte';
+    import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
+    import { deepClone } from '$lib/helpers/object';
+
+    const databaseId = page.params.database;
+    const collectionId = page.params.collection;
+
+    let {
+        document = $bindable()
+    }: {
+        document: Models.Document;
+    } = $props();
+
+    let work = $state<Writable<Models.Document> | null>(null);
+
+    function initWork() {
+        const prohibitedKeys = [
+            '$id',
+            '$collection',
+            '$collectionId',
+            '$databaseId',
+            '$createdAt',
+            '$updatedAt'
+        ];
+
+        const filteredKeys = Object.keys(document).filter((key) => {
+            return !prohibitedKeys.includes(key);
+        });
+
+        const result = filteredKeys.reduce((obj, key) => {
+            obj[key] = document[key];
+            return obj;
+        }, {});
+
+        return writable(deepClone(result as Models.Document));
+    }
+
+    $effect(() => {
+        if (document) work = initWork();
+    });
+
+    function compareAttributes(
+        attribute: Attributes,
+        $work: Models.Document,
+        $doc: Models.Document
+    ) {
+        if (!attribute) {
+            return false;
+        }
+
+        const workAttribute = $work?.[attribute.key];
+        const docAttribute = $doc?.[attribute.key];
+
+        if (attribute.array) {
+            return !symmetricDifference(Array.from(workAttribute), Array.from(docAttribute)).length;
+        }
+
+        if (isRelationship(attribute)) {
+            if (isRelationshipToMany(attribute as Models.AttributeRelationship)) {
+                const workIds = workAttribute.map((doc: string | Record<string, unknown>) =>
+                    typeof doc === 'string' ? doc : doc.$id
+                );
+
+                const relatedIds = docAttribute.map((doc: string | Record<string, unknown>) =>
+                    typeof doc === 'string' ? doc : doc.$id
+                );
+                return !symmetricDifference(workIds, relatedIds).length;
+            } else {
+                const workId =
+                    typeof workAttribute === 'string' ? workAttribute : workAttribute?.$id;
+                const relatedId =
+                    typeof docAttribute === 'string' ? docAttribute : docAttribute?.$id;
+
+                return workId === relatedId;
+            }
+        }
+        return workAttribute === docAttribute;
+    }
+
+    export async function update() {
+        try {
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .databases.updateDocument(
+                    databaseId,
+                    collectionId,
+                    document.$id,
+                    $work,
+                    $work.$permissions
+                );
+
+            invalidate(Dependencies.DOCUMENT);
+            trackEvent(Submit.DocumentUpdate);
+            addNotification({
+                message: 'Document has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.DocumentUpdate);
+        }
+    }
+
+    export function isDisabled(): boolean {
+        if (!work || !$collection?.attributes?.length) return true;
+
+        return $collection.attributes.every((attribute) =>
+            compareAttributes(attribute, $work, document)
+        );
+    }
+</script>
+
+{#if $collection?.attributes?.length && work}
+    {#each $collection.attributes as attribute}
+        {@const label = attribute.key}
+        <AttributeItem {attribute} bind:formValues={$work} {label} editing />
+    {/each}
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
index e98c9e5b8e..a7c9009e38 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
@@ -9,7 +9,7 @@
         spaced = false,
         closeOnBlur = false,
         submit,
-        children
+        children = null
     }: {
         show: boolean;
         title: string;
@@ -22,7 +22,7 @@
                   onClick: () => void | Promise<void>;
               }
             | undefined;
-        children: Snippet;
+        children?: Snippet;
     } = $props();
 </script>
 
@@ -43,7 +43,7 @@
                     show = false;
                 }}>
                 <Layout.Stack gap="xl">
-                    {@render children()}
+                    {@render children?.()}
                 </Layout.Stack>
 
                 {#if submit}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
index 45038080ce..d709d9245a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
@@ -1,13 +1,22 @@
 <script lang="ts" module>
-    export type Action =
+    export type HeaderCellAction =
         | 'update'
         | 'column-left'
         | 'column-right'
-        | 'duplicate-row'
+        | 'duplicate-header'
         | 'create-index'
         | 'sort-asc'
         | 'sort-desc'
         | 'delete';
+
+    export type RowCellAction =
+        | 'update'
+        | 'duplicate-row'
+        | 'permissions'
+        | 'activity'
+        | 'copy-json'
+        // | 'copy-snippet'
+        | 'delete';
 </script>
 
 <script lang="ts">
@@ -16,17 +25,20 @@
     import {
         IconArrowLeft,
         IconArrowRight,
+        IconChartBar,
+        IconClipboardCopy,
         IconDuplicate,
+        IconKey,
         IconPencil,
         IconSortAscending,
         IconSortDescending,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import { type Attributes, databaseSheetOptions } from './store';
+    import { type Attributes, databaseColumnSheetOptions } from './store';
 
     interface MenuItem {
         label?: string;
-        action?: Action;
+        action?: HeaderCellAction | RowCellAction;
         danger?: boolean;
         divider?: boolean;
         icon?: ComponentType;
@@ -35,11 +47,11 @@
     // Only allow sort for these columns
     const internalColumns = ['$id', '$createdAt', '$updatedAt'];
 
-    const menuItems: MenuItem[] = [
+    const headerMenuItems: MenuItem[] = [
         { label: 'Update', icon: IconPencil, action: 'update' },
         { label: 'Insert column left', icon: IconArrowLeft, action: 'column-left' },
         { label: 'Insert column right', icon: IconArrowRight, action: 'column-right' },
-        { label: 'Duplicate', icon: IconDuplicate, action: 'duplicate-row' },
+        { label: 'Duplicate', icon: IconDuplicate, action: 'duplicate-header' },
         { divider: true },
         { label: 'Create index', icon: IconPencil, action: 'create-index' },
         { label: 'Sort ascending', icon: IconSortAscending, action: 'sort-asc' },
@@ -48,20 +60,34 @@
         { label: 'Delete', icon: IconTrash, action: 'delete', danger: true }
     ];
 
+    const rowMenuItems: MenuItem[] = [
+        { label: 'Update', icon: IconPencil, action: 'update' },
+        { label: 'Duplicate', icon: IconDuplicate, action: 'duplicate-row' },
+        { divider: true },
+        { label: 'Manage permissions', icon: IconKey, action: 'permissions' },
+        { label: 'View activity', icon: IconChartBar, action: 'activity' },
+        { divider: true },
+        { label: 'Copy as JSON', icon: IconClipboardCopy, action: 'copy-json' },
+        { divider: true },
+        { label: 'Delete', icon: IconTrash, action: 'delete', danger: true }
+    ];
+
     let {
         column,
         children,
-        onSelect
+        onSelect,
+        type
     }: {
         column: Attributes;
-        onSelect: (option: Action) => void;
+        type: 'header' | 'row';
+        onSelect: (option: HeaderCellAction | RowCellAction) => void;
         children: Snippet<[toggle: (event: Event) => void]>;
     } = $props();
 
-    function handleSelect(action: Action, hide: () => void) {
+    function handleSelect(action: HeaderCellAction | RowCellAction, hide: () => void) {
         hide();
         onSelect(action);
-        $databaseSheetOptions.column = column;
+        $databaseColumnSheetOptions.column = column;
     }
 
     function shouldShow(item: MenuItem) {
@@ -72,14 +98,18 @@
     }
 </script>
 
-<Popover let:toggle padding="none" placement="bottom">
+<Popover let:toggle padding="none" placement="bottom" portal>
     {@render children(toggle)}
 
     <svelte:fragment slot="tooltip" let:hide>
-        <ActionMenu.Root width="180px" noPadding>
+        {@const menuItems = type === 'header' ? headerMenuItems : rowMenuItems}
+
+        <ActionMenu.Root width="180px">
             {#each menuItems as item, index (index)}
                 {#if item.divider}
-                    <Divider />
+                    <div style:padding-block="0.25rem">
+                        <Divider />
+                    </div>
                 {:else if shouldShow(item)}
                     <ActionMenu.Item.Button
                         leadingIcon={item.icon}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index bfe0ae251c..1b2d2d7a05 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -17,7 +17,14 @@
         isRelationshipToMany,
         isString
     } from './document-[document]/attributes/store';
-    import { attributes, collection, columns, databaseSheetOptions, sortState } from './store';
+    import {
+        attributes,
+        collection,
+        columns,
+        databaseColumnSheetOptions,
+        databaseRowSheetOptions,
+        sortState
+    } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
     import {
@@ -50,14 +57,19 @@
         IconViewList
     } from '@appwrite.io/pink-icons-svelte';
     import SheetOptions from './sheetOptions.svelte';
-    import { type Action } from './sheetOptions.svelte';
+    import EditDocument from './editDocument.svelte';
+    import SideSheet from './layout/sidesheet.svelte';
     import EditAttribute from './attributes/edit.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import SideSheet from './layout/sidesheet.svelte';
     import SpreadsheetContainer from './layout/spreadsheet.svelte';
+    import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
+    import { copy } from '$lib/helpers/copy';
 
     export let data: PageData;
-    export let showRecordsCreateSheet: boolean;
+    export let showRecordsCreateSheet: {
+        show: boolean;
+        document: Models.Document | null;
+    };
 
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
@@ -66,6 +78,7 @@
     let showRelationships = false;
     let relationshipData: Partial<Models.Document>[];
     let selectedRelationship: Models.AttributeRelationship = null;
+    let editDocument: EditDocument;
 
     $: documents = data.documents;
 
@@ -200,10 +213,12 @@
     }
 
     let loading = false;
-    let showDelete = false;
     let showColumnDelete = false;
     let selectedRows: string[] = [];
 
+    let showDelete = false;
+    let selectedDocumentForDelete: Models.Document['$id'] | null = null;
+
     async function sort(query: string[]) {
         loading = true;
         documents = await sdk
@@ -215,12 +230,19 @@
     async function handleDelete() {
         showDelete = false;
         try {
-            // TODO: maybe this isn't working?
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.deleteDocuments(databaseId, collectionId, [
-                    Query.equal('$id', selectedRows)
-                ]);
+            if (selectedDocumentForDelete) {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .databases.deleteDocument(databaseId, collectionId, selectedDocumentForDelete);
+
+                selectedDocumentForDelete = null;
+            } else {
+                await sdk
+                    .forProject(page.params.region, page.params.project)
+                    .databases.deleteDocuments(databaseId, collectionId, [
+                        Query.equal('$id', selectedRows)
+                    ]);
+            }
 
             trackEvent(Submit.DocumentDelete);
             addNotification({
@@ -245,7 +267,7 @@
                 .databases.deleteAttribute(
                     databaseId,
                     collectionId,
-                    $databaseSheetOptions.column.key
+                    $databaseColumnSheetOptions.column.key
                 );
 
             trackEvent(Submit.AttributeDelete);
@@ -284,23 +306,61 @@
 
     let checked = false;
 
-    function onSelectSheetOption(type: Action) {
-        if (type === 'update') {
-            $databaseSheetOptions.show = true;
-            $databaseSheetOptions.isEdit = true;
-            $databaseSheetOptions.title = 'Update column';
-        }
+    async function onSelectSheetOption(
+        action: HeaderCellAction | RowCellAction,
+        type: 'header' | 'row',
+        document: Models.Document | null = null
+    ) {
+        if (type === 'header') {
+            if (action === 'update') {
+                $databaseColumnSheetOptions.show = true;
+                $databaseColumnSheetOptions.isEdit = true;
+                $databaseColumnSheetOptions.title = 'Update column';
+            }
 
-        if (type === 'column-left' || type === 'column-right') {
-            $databaseSheetOptions.show = true;
-            $databaseSheetOptions.title = 'New column';
-        }
+            if (action === 'column-left' || action === 'column-right') {
+                $databaseColumnSheetOptions.show = true;
+                $databaseColumnSheetOptions.title = 'New column';
+            }
 
-        if (type === 'delete') {
-            showColumnDelete = true;
-        }
+            if (action === 'delete') {
+                showColumnDelete = true;
+            }
+
+            $databaseColumnSheetOptions.column = null;
+        } else if (type === 'row') {
+            if (action === 'update') {
+                $databaseRowSheetOptions.show = true;
+                $databaseRowSheetOptions.document = document;
+                $databaseRowSheetOptions.title = 'Update record';
+            }
+
+            if (action === 'duplicate-row') {
+                showRecordsCreateSheet.show = true;
+                showRecordsCreateSheet.document = document;
+            }
+
+            if (action === 'copy-json') {
+                const stringified = JSON.stringify(document, null, 2);
+                try {
+                    await copy(stringified);
+                    addNotification({
+                        type: 'success',
+                        message: 'Document copied' // TODO: should be Row later
+                    });
+                } catch (e) {
+                    addNotification({
+                        type: 'error',
+                        message: e.message
+                    });
+                }
+            }
 
-        $databaseSheetOptions.column = null;
+            if (action === 'delete') {
+                showDelete = true;
+                selectedDocumentForDelete = document.$id;
+            }
+        }
     }
 
     const emptyCellsLimit = $isSmallViewport ? 12 : 18;
@@ -330,14 +390,15 @@
                         <Button.Button
                             icon
                             variant="extra-compact"
-                            on:click={() => (showRecordsCreateSheet = true)}>
+                            on:click={() => (showRecordsCreateSheet.show = true)}>
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
                         </Button.Button>
                     </Spreadsheet.Header.Cell>
                 {:else}
                     <SheetOptions
+                        type="header"
                         column={$attributes.find((attr) => attr.key === column.id)}
-                        onSelect={onSelectSheetOption}>
+                        onSelect={(option) => onSelectSheetOption(option, 'header')}>
                         {#snippet children(toggle)}
                             <Spreadsheet.Header.Cell
                                 {root}
@@ -365,33 +426,42 @@
         {#each documents.documents as document (document.$id)}
             <!-- TODO: add `value` for user attributes -->
             <Spreadsheet.Row.Base {root} id={document.$id}>
-                {#each $columns as { id, isEditable } (id)}
-                    {@const formatted = formatColumn(document[id])}
+                {#each $columns as { id: columnId, isEditable } (columnId)}
+                    {@const formatted = formatColumn(document[columnId])}
                     <Spreadsheet.Cell
                         {root}
-                        column={id}
+                        column={columnId}
                         {isEditable}
-                        value={id.includes('$') || formatted.value === 'null'
+                        value={columnId.includes('$') || formatted.value === 'null'
                             ? undefined
                             : formatted.value}>
-                        {#if id === '$id'}
+                        {#if columnId === '$id'}
                             <Id value={document.$id}>{document.$id}</Id>
-                        {:else if id === '$createdAt' || id === '$updatedAt'}
-                            <DualTimeView time={document[id]} />
-                        {:else if id === 'actions'}
-                            <Button.Button icon variant="extra-compact">
-                                <Icon icon={IconDotsHorizontal} color="--fgcolor-neutral-primary" />
-                            </Button.Button>
+                        {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
+                            <DualTimeView time={document[columnId]} />
+                        {:else if columnId === 'actions'}
+                            <SheetOptions
+                                type="row"
+                                column={$attributes.find((attr) => attr.key === columnId)}
+                                onSelect={(option) => onSelectSheetOption(option, 'row', document)}>
+                                {#snippet children(toggle)}
+                                    <Button.Button icon variant="extra-compact" on:click={toggle}>
+                                        <Icon
+                                            icon={IconDotsHorizontal}
+                                            color="--fgcolor-neutral-primary" />
+                                    </Button.Button>
+                                {/snippet}
+                            </SheetOptions>
                         {:else}
-                            {@const attr = $attributes.find((n) => n.key === id)}
+                            {@const attr = $attributes.find((n) => n.key === columnId)}
                             {#if attr}
                                 {#if isRelationship(attr)}
                                     {@const args = displayNames?.[attr.relatedCollection] ?? [
                                         '$id'
                                     ]}
                                     {#if !isRelationshipToMany(attr)}
-                                        {#if document[id]}
-                                            {@const related = document[id]}
+                                        {#if document[columnId]}
+                                            {@const related = document[columnId]}
                                             <Link.Button
                                                 variant="muted"
                                                 on:click={(e) => {
@@ -413,7 +483,7 @@
                                             <span class="text">n/a</span>
                                         {/if}
                                     {:else}
-                                        {@const itemsNum = document[id]?.length}
+                                        {@const itemsNum = document[columnId]?.length}
                                         <Button.Button
                                             variant="extra-compact"
                                             disabled={!itemsNum}
@@ -421,7 +491,7 @@
                                             on:click={(e) => {
                                                 e.stopPropagation();
                                                 e.preventDefault();
-                                                relationshipData = document[id];
+                                                relationshipData = document[columnId];
                                                 showRelationships = true;
                                                 selectedRelationship = attr;
                                             }}>
@@ -429,8 +499,8 @@
                                         </Button.Button>
                                     {/if}
                                 {:else}
-                                    {@const value = document[id]}
-                                    {@const formatted = formatColumn(document[id])}
+                                    {@const value = document[columnId]}
+                                    {@const formatted = formatColumn(document[columnId])}
                                     {@const isDatetimeAttribute = attr.type === 'datetime'}
                                     {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
                                     {#if isDatetimeAttribute}
@@ -519,10 +589,19 @@
 
 <RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
 
-<Confirm title="Delete Documents" bind:open={showDelete} onSubmit={handleDelete}>
+<Confirm
+    title={selectedRows.length === 1 ? 'Delete Document' : 'Delete Documents'}
+    bind:open={showDelete}
+    onSubmit={handleDelete}>
+    {@const isSingle = selectedDocumentForDelete !== null}
+
     <div>
-        Are you sure you want to delete <b>{selectedRows.length}</b>
-        {selectedRows.length > 1 ? 'documents' : 'document'}?
+        {#if isSingle}
+            Are you sure you want to delete this document from <b>{$collection.name}</b>?
+        {:else}
+            Are you sure you want to delete <b>{selectedRows.length}</b>
+            {selectedRows.length > 1 ? 'documents' : 'document'} from <b>{$collection.name}</b>?
+        {/if}
 
         {#if relAttributes?.length}
             <Table.Root
@@ -560,10 +639,10 @@
             </Table.Root>
             <div class="u-flex u-flex-vertical u-gap-16">
                 <Alert>To change the selection edit the relationship settings.</Alert>
-
                 <ul>
                     <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
-                        Delete document from <span data-private>{$collection.name}</span>
+                        Delete {isSingle ? 'document' : 'documents'} from
+                        <span data-private>{$collection.name}</span>
                     </InputChoice>
                 </ul>
             </div>
@@ -578,7 +657,7 @@
     bind:open={showColumnDelete}
     onSubmit={handleColumnDelete}
     confirmDeletion>
-    <p>Are you sure you want to delete "<b>{$databaseSheetOptions.column.key}</b>"?</p>
+    <p>Are you sure you want to delete "<b>{$databaseColumnSheetOptions.column.key}</b>"?</p>
 
     <p>
         This will permanently remove all data stored in this column across all records. This action
@@ -587,17 +666,28 @@
 </Confirm>
 
 <SideSheet
-    title={$databaseSheetOptions.title}
-    bind:show={$databaseSheetOptions.show}
+    title={$databaseColumnSheetOptions.title}
+    bind:show={$databaseColumnSheetOptions.show}
     submit={{
         text: 'Update',
-        disabled: $databaseSheetOptions.disableSubmit,
-        onClick: () => $databaseSheetOptions.submitAction()
+        disabled: $databaseColumnSheetOptions.disableSubmit,
+        onClick: () => $databaseColumnSheetOptions.submitAction()
     }}>
     <EditAttribute
         isModal={false}
-        showEdit={$databaseSheetOptions.isEdit}
-        selectedAttribute={$databaseSheetOptions.column} />
+        showEdit={$databaseColumnSheetOptions.isEdit}
+        selectedAttribute={$databaseColumnSheetOptions.column} />
+</SideSheet>
+
+<SideSheet
+    title={$databaseRowSheetOptions.title}
+    bind:show={$databaseRowSheetOptions.show}
+    submit={{
+        text: 'Update',
+        disabled: editDocument?.isDisabled(),
+        onClick: async () => await editDocument?.update()
+    }}>
+    <EditDocument bind:document={$databaseRowSheetOptions.document} bind:this={editDocument} />
 </SideSheet>
 
 <style lang="scss">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index facee35b3e..72eaa68048 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -39,7 +39,7 @@ type DatabaseSheetOptions = {
     submitAction?: () => Promise<void>;
 };
 
-export const databaseSheetOptions = writable<DatabaseSheetOptions>({
+export const databaseColumnSheetOptions = writable<DatabaseSheetOptions>({
     title: null,
     show: false,
     column: null,
@@ -48,6 +48,21 @@ export const databaseSheetOptions = writable<DatabaseSheetOptions>({
     submitAction: null
 });
 
+export const databaseRowSheetOptions = writable<
+    DatabaseSheetOptions & {
+        document: Models.Document;
+    }
+>({
+    title: null,
+    show: false,
+    document: null
+});
+
+export const showRecordsCreateSheet = writable({
+    show: false,
+    document: null
+});
+
 export const sortState = writable({
     column: null as string,
     direction: 'default' as SortDirection

From 8ae119bf4f1025f92510016385db6b6ada15cecf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 18 Jul 2025 14:52:17 +0530
Subject: [PATCH 024/118] temp: fix the sheet crashing.

---
 .../collection-[collection]/createRecord.svelte               | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
index a2dfc0828d..f6965d3a6c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
@@ -101,7 +101,8 @@
     }
 </script>
 
-<div class="sheet-container">
+{#if $createDocument}
+    <div class="sheet-container">
     <!-- TODO: add a ID badge-->
     <SideSheet
         spaced
@@ -143,3 +144,4 @@
         </Layout.Stack>
     </SideSheet>
 </div>
+{/if}
\ No newline at end of file

From 1be8468fc63368fe75456c81511da23087070218 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 21 Jul 2025 14:32:19 +0530
Subject: [PATCH 025/118] fix: uneven upload box widths.

---
 src/lib/components/uploadBox.svelte | 31 ++++++++++++++++++++---------
 1 file changed, 22 insertions(+), 9 deletions(-)

diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index 721917ca10..3e76d41193 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -4,13 +4,26 @@
 </script>
 
 {#if $uploader?.isOpen}
-    <Upload.Box
-        files={$uploader.files.map((file) => {
-            return {
-                name: file.name,
-                size: file.size,
-                status: file.status
-            };
-        })}
-        on:close={() => uploader.close()} />
+    <div class="upload-box-wrapper">
+        <Upload.Box
+            files={$uploader.files.map((file) => {
+                return {
+                    name: file.name,
+                    size: file.size,
+                    status: file.status
+                };
+            })}
+            on:close={() => uploader.close()} />
+    </div>
 {/if}
+
+<style lang="scss">
+    .upload-box-wrapper {
+        min-width: 400px;
+        max-width: 100vw;
+
+        & :global(.upload-box) {
+            width: 100%;
+        }
+    }
+</style>

From d56828ddd99f2488a46b601ea88c441996cb7363 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 22 Jul 2025 19:11:49 +0530
Subject: [PATCH 026/118] updates.

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  19 ++-
 src/lib/components/columnSelector.svelte      | 128 ++++++++++++++++--
 src/lib/components/csvImportBox.svelte        |   3 +-
 src/lib/components/filters/filters.svelte     | 102 ++++++++------
 src/lib/components/sortButton.svelte          |  28 ++--
 src/lib/components/uploadBox.svelte           |  31 ++---
 src/lib/components/viewSelector.svelte        |   7 +-
 src/lib/helpers/sidebar.ts                    |   5 +
 src/lib/layout/container.svelte               |   2 +
 src/lib/layout/cover.svelte                   |  17 ++-
 src/lib/layout/coverTitle.svelte              |   5 +-
 .../databases/database-[database]/+layout.ts  |   2 +
 .../collection-[collection]/+layout.ts        |   6 +-
 .../collection-[collection]/+page.svelte      |  27 ++--
 .../createRecord.svelte                       |  82 +++++------
 .../collection-[collection]/header.svelte     |   2 +-
 .../layout/emptySheet.svelte                  |  36 +++--
 .../database-[database]/header.svelte         |   2 +-
 .../subNavigation.svelte                      |  48 +++++--
 20 files changed, 361 insertions(+), 193 deletions(-)
 rename src/routes/(console)/project-[region]-[project]/databases/database-[database]/{collection-[collection] => }/subNavigation.svelte (83%)

diff --git a/package.json b/package.json
index e6f05186bd..2b5aa11bf7 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 6c63a03db0..8702ae4c02 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433
-        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -261,9 +261,8 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c}
     version: 1.9.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44}
-    version: 2.0.0-RC.1
+  '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
+    resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
     peerDependencies:
       svelte: ^4.0.0
 
@@ -282,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433':
-    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3663,7 +3662,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c': {}
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3680,9 +3679,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@7f8f433(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@7f8f43343777058cd7f5801b32e05a6917918d44(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
       '@melt-ui/pp': 0.3.2(@melt-ui/svelte@0.86.6(svelte@5.25.3))(svelte@5.25.3)
       '@melt-ui/svelte': 0.86.6(svelte@5.25.3)
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index a899fe9e41..ca95b5875e 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -4,23 +4,39 @@
     import { preferences } from '$lib/stores/preferences';
     import { onMount, type Snippet } from 'svelte';
     import type { Column } from '$lib/helpers/types';
-    import { ActionMenu, Layout, Popover, Selector } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Divider, Layout, Popover, Selector } from '@appwrite.io/pink-svelte';
+    import { Button } from '$lib/elements/forms';
 
     let {
         columns,
         isCustomCollection = false,
+        ui = 'legacy',
         allowNoColumns = false,
         children
     }: {
         columns: Writable<Column[]>;
         isCustomCollection?: boolean;
         allowNoColumns?: boolean;
+        ui?: 'legacy' | 'new';
         children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>;
     } = $props();
 
+    let search = $state('');
+    let filteredColumns = $derived(
+        $columns
+            .filter((column) => !column.isAction)
+            .filter(
+                (col) =>
+                    !col.exclude &&
+                    (col.title?.toLowerCase().includes(search.toLowerCase()) ||
+                        col.id?.toLowerCase().includes(search.toLowerCase()))
+            )
+    );
+
     let maxHeight = $state('none');
     let containerRef = $state<HTMLElement>(null);
     const collectionId = $derived(page.params.collection);
+    const isNewStyle = ui === 'new';
 
     const calcMaxHeight = () => {
         if (containerRef) {
@@ -78,38 +94,122 @@
 
     function toggleColumn(column: Column) {
         columns.update((cols) =>
-            cols.map((col) => {
-                if (col.id === column.id) {
-                    column.hide = !column.hide;
-                }
-                return col;
-            })
+            cols.map((col) => (col.id === column.id ? { ...col, hide: !col.hide } : col))
         );
+        saveColumnPreferences();
+    }
 
+    function selectAll() {
+        columns.update((cols) =>
+            cols.map((col) =>
+                col.exclude
+                    ? col
+                    : filteredColumns.some((fc) => fc.id === col.id)
+                      ? { ...col, hide: false }
+                      : col
+            )
+        );
         saveColumnPreferences();
     }
+
+    function deselectAll() {
+        columns.update((cols) => {
+            const realColumns = cols.filter((col) => !col.exclude && !col.isAction);
+            const filtered = filteredColumns.filter((col) => !col.exclude && !col.isAction);
+
+            if (filtered.length === 0) return cols;
+
+            const visibleRealColumns = realColumns.filter((col) => !col.hide);
+
+            if (!allowNoColumns && visibleRealColumns.length <= 1) {
+                return cols;
+            }
+
+            const willHideCount = filtered.filter((col) => !col.hide).length;
+
+            if (!allowNoColumns && visibleRealColumns.length - willHideCount < 1) {
+                const [keep] = filtered;
+                return cols.map((col) => {
+                    if (col.exclude || col.isAction) return col;
+                    if (!filtered.some((fc) => fc.id === col.id)) return col;
+
+                    if (col.id === keep.id) {
+                        const stillVisible = cols
+                            .filter((c) => !c.exclude && !c.isAction)
+                            .filter((c) =>
+                                c.id === keep.id
+                                    ? true
+                                    : filtered.some((fc) => fc.id === c.id)
+                                      ? false
+                                      : !c.hide
+                            );
+                        if (stillVisible.length === 1 && typeof col.width === 'number') {
+                            return { ...col, hide: false, width: { min: col.width } };
+                        }
+                        return { ...col, hide: false };
+                    }
+
+                    return { ...col, hide: true };
+                });
+            }
+
+            return cols.map((col) =>
+                col.exclude || col.isAction
+                    ? col
+                    : filtered.some((fc) => fc.id === col.id)
+                      ? { ...col, hide: true }
+                      : col
+            );
+        });
+        saveColumnPreferences();
+    }
+
+    let visibleRealColumns = $derived(
+        $columns.filter((col) => !col.exclude && !col.isAction && !col.hide)
+    );
 </script>
 
 <svelte:window on:resize={calcMaxHeight} />
 
 {#if $columns?.length}
-    <Popover let:toggle placement="bottom-end" padding="none">
+    {@const placement = isNewStyle ? undefined : 'bottom-end'}
+    <Popover let:toggle {placement} padding="none">
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
             <div style:max-height={maxHeight} style:overflow="scroll" bind:this={containerRef}>
                 <ActionMenu.Root>
-                    {#each $columns as column}
+                    {#if isNewStyle}
+                        <Layout.Stack gap="m">
+                            <ActionMenu.Item.Input
+                                id="columns"
+                                placeholder="Search"
+                                bind:value={search} />
+
+                            <Layout.Stack
+                                direction="row"
+                                alignItems="center"
+                                style="padding-block-end: 0.5rem">
+                                <Button icon extraCompact on:click={selectAll}>Select all</Button>
+
+                                <div style:height="1rem">
+                                    <Divider vertical />
+                                </div>
+
+                                <Button icon extraCompact on:click={deselectAll}
+                                    >Deselect all</Button>
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    {/if}
+
+                    {#each filteredColumns as column}
                         {#if !column?.exclude}
                             <ActionMenu.Item.Button
                                 on:click={() => toggleColumn(column)}
                                 disabled={allowNoColumns
                                     ? false
-                                    : selectedColumnsNumber <= 1 && column.hide !== true}>
+                                    : visibleRealColumns.length <= 1 && !column.hide}>
                                 <Layout.Stack direction="row" gap="s">
-                                    <Selector.Checkbox
-                                        checked={!column.hide}
-                                        size="s"
-                                        on:click={() => toggleColumn(column)} />
+                                    <Selector.Checkbox size="s" checked={!column.hide} />
                                     {column.title}
                                 </Layout.Stack>
                             </ActionMenu.Item.Button>
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 60f93abf6d..26a70c4c84 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -221,8 +221,7 @@
     }
 
     .upload-box-content {
-        min-width: 400px;
-        max-width: 100vw;
+        width: 304px;
     }
 
     .upload-box-button {
diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index f8c9a3e6ed..e3ab83871a 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -19,6 +19,7 @@
     import { Click, Submit, trackEvent } from '$lib/actions/analytics';
 
     export let query = '[]';
+    export let onlyIcon = false;
     export let columns: Writable<Column[]>;
     export let disabled = false;
     export let fullWidthMobile = false;
@@ -124,62 +125,73 @@
     <Popover let:toggle placement="bottom-start">
         <Button
             secondary
+            icon={onlyIcon}
             on:click={(event) => {
                 toggle(event);
                 trackEvent(Click.FilterApplyClick, { source: analyticsSource });
             }}
             {disabled}>
-            <Icon icon={IconFilterLine} slot="start" size="s" />
-            Filters
-            {#if applied > 0}
-                <span class="inline-tag">
-                    {applied}
-                </span>
+            <Icon icon={IconFilterLine} slot="start" size={onlyIcon ? 'm' : 's'} />
+            {#if !onlyIcon}
+                Filters
+                {#if applied > 0}
+                    <span class="inline-tag">
+                        {applied}
+                    </span>
+                {/if}
             {/if}
         </Button>
-        <svelte:fragment slot="tooltip">
-            <div style:width="420px">
-                <Layout.Stack gap="s">
-                    {#if displayQuickFilters}
-                        <slot name="quick" />
-                    {:else}
-                        <p>Apply filter rules to refine the table view</p>
-                        <Content
-                            bind:columnId={selectedColumn}
-                            bind:operatorKey
-                            bind:value
-                            bind:arrayValues
-                            {columns}
-                            {singleCondition}
-                            on:apply={afterApply}
-                            on:clear={() => (applied = 0)} />
-                    {/if}
-                    <div
-                        class="u-flex u-cross-center u-margin-block-start-16"
-                        class:u-main-end={!quickFilters}
-                        class:u-main-space-between={quickFilters}>
-                        {#if quickFilters}
-                            <Button
-                                text
-                                on:click={() => (displayQuickFilters = !displayQuickFilters)}
-                                class="u-margin-block-end-auto">
-                                {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
-                            </Button>
+
+        <svelte:fragment slot="tooltip" let:showing>
+            {#if showing}
+                <div style:width="420px">
+                    <Layout.Stack gap="s">
+                        {#if displayQuickFilters}
+                            <slot name="quick" />
+                        {:else}
+                            <p>Apply filter rules to refine the table view</p>
+                            <!-- this needs to be portalled -->
+                            <Content
+                                bind:columnId={selectedColumn}
+                                bind:operatorKey
+                                bind:value
+                                bind:arrayValues
+                                {columns}
+                                {singleCondition}
+                                on:apply={afterApply}
+                                on:clear={() => (applied = 0)} />
                         {/if}
-                        <div class="u-flex u-gap-8">
-                            {#if singleCondition}
-                                <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
-                            {:else}
-                                <Button size="s" disabled={applied === 0} text on:click={clearAll}>
-                                    Clear all
+                        <div
+                            class="u-flex u-cross-center u-margin-block-start-16"
+                            class:u-main-end={!quickFilters}
+                            class:u-main-space-between={quickFilters}>
+                            {#if quickFilters}
+                                <Button
+                                    text
+                                    on:click={() => (displayQuickFilters = !displayQuickFilters)}
+                                    class="u-margin-block-end-auto">
+                                    {displayQuickFilters ? 'Advanced filters' : 'Quick filters'}
                                 </Button>
                             {/if}
-                            <Button size="s" on:click={apply} disabled={isButtonDisabled}
-                                >Apply</Button>
+                            <div class="u-flex u-gap-8">
+                                {#if singleCondition}
+                                    <Button size="s" text on:click={toggleDropdown}>Cancel</Button>
+                                {:else}
+                                    <Button
+                                        size="s"
+                                        disabled={applied === 0}
+                                        text
+                                        on:click={clearAll}>
+                                        Clear all
+                                    </Button>
+                                {/if}
+                                <Button size="s" on:click={apply} disabled={isButtonDisabled}
+                                    >Apply</Button>
+                            </div>
                         </div>
-                    </div>
-                </Layout.Stack>
-            </div>
+                    </Layout.Stack>
+                </div>
+            {/if}
         </svelte:fragment>
     </Popover>
 </div>
diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
index 11ee9d17da..0b3046561e 100644
--- a/src/lib/components/sortButton.svelte
+++ b/src/lib/components/sortButton.svelte
@@ -12,11 +12,13 @@
     let {
         column,
         state,
-        onSort = () => {}
+        onSort = () => {},
+        disabled = false
     }: {
         column: string;
-        onSort: (query: string[]) => void | Promise<void>;
-        state: Writable<{ column: string | null; direction: SortDirection }>;
+        disabled?: boolean;
+        onSort?: (query: string[]) => void | Promise<void>;
+        state?: Writable<{ column: string | null; direction: SortDirection }>;
     } = $props();
 
     function sort() {
@@ -29,27 +31,27 @@
                 ? 'default'
                 : 'asc';
 
-        state.set({
+        state?.set({
             direction: nextDir,
             column: nextDir === 'default' ? null : column
         });
 
         if (nextDir === 'default') {
-            onSort([]);
+            onSort?.([]);
         } else if (nextDir === 'asc') {
-            onSort([Query.orderAsc(column)]);
+            onSort?.([Query.orderAsc(column)]);
         } else {
-            onSort([Query.orderDesc(column)]);
+            onSort?.([Query.orderDesc(column)]);
         }
     }
 </script>
 
-<Button extraCompact on:click={sort} class="hoverable-compact">
+<Button extraCompact on:click={sort} class="hoverable-compact" {disabled}>
     <Icon
         size="s"
-        icon={$state.column !== column || $state.direction === 'default'
+        icon={$state?.column !== column || $state?.direction === 'default'
             ? IconSelector
-            : $state.direction === 'asc'
+            : $state?.direction === 'asc'
               ? IconChevronUp
               : IconChevronDown}
         color="--fgcolor-neutral-weak" />
@@ -74,5 +76,11 @@
             background-color: var(--bgcolor-neutral-tertiary);
             border: var(--border-width-s) solid var(--bgcolor-neutral-tertiary);
         }
+
+        &:disabled {
+            & :global(i) {
+                --icon-fill: var(--fgcolor-neutral-secondary) !important;
+            }
+        }
     }
 </style>
diff --git a/src/lib/components/uploadBox.svelte b/src/lib/components/uploadBox.svelte
index 3e76d41193..721917ca10 100644
--- a/src/lib/components/uploadBox.svelte
+++ b/src/lib/components/uploadBox.svelte
@@ -4,26 +4,13 @@
 </script>
 
 {#if $uploader?.isOpen}
-    <div class="upload-box-wrapper">
-        <Upload.Box
-            files={$uploader.files.map((file) => {
-                return {
-                    name: file.name,
-                    size: file.size,
-                    status: file.status
-                };
-            })}
-            on:close={() => uploader.close()} />
-    </div>
+    <Upload.Box
+        files={$uploader.files.map((file) => {
+            return {
+                name: file.name,
+                size: file.size,
+                status: file.status
+            };
+        })}
+        on:close={() => uploader.close()} />
 {/if}
-
-<style lang="scss">
-    .upload-box-wrapper {
-        min-width: 400px;
-        max-width: 100vw;
-
-        & :global(.upload-box) {
-            width: 100%;
-        }
-    }
-</style>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 02f4dcbf23..e67f5173d4 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -7,6 +7,8 @@
     import ViewToggle from './viewToggle.svelte';
     import ColumnSelector from './columnSelector.svelte';
 
+    export let onlyIcon = false;
+    export let ui: 'legacy' | 'new' = 'legacy';
     export let columns: Writable<Column[]>;
     export let view: View;
     export let isCustomCollection = false;
@@ -16,12 +18,13 @@
 </script>
 
 {#if !hideColumns && view === View.Table}
-    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns}>
+    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns} {ui}>
         {#snippet children(toggle, selectedColumnsNumber)}
             <Button.Button
                 size="s"
+                icon={onlyIcon}
                 variant="secondary"
-                badge={selectedColumnsNumber.toString()}
+                badge={onlyIcon ? undefined : selectedColumnsNumber.toString()}
                 on:click={toggle}>
                 <Icon slot="start" icon={IconViewBoards} />
             </Button.Button>
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
index b563f5b338..e3c6b0c3c2 100644
--- a/src/lib/helpers/sidebar.ts
+++ b/src/lib/helpers/sidebar.ts
@@ -1,6 +1,7 @@
 import { get } from 'svelte/store';
 import { user } from '$lib/stores/user';
 import { sdk } from '$lib/stores/sdk';
+import { page } from '$app/state';
 
 const userPreferences = () => get(user)?.prefs;
 
@@ -18,6 +19,10 @@ export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
 }
 
 export function getSidebarState(): 'open' | 'icons' {
+    // for spreadsheet
+    const isInDatabases = page.route.id?.includes('database-[database]');
+    if (isInDatabases) return 'icons';
+
     const currentPrefs = userPreferences();
     if (currentPrefs && currentPrefs.sidebarState) {
         if (currentPrefs.sidebarState === 'open' || currentPrefs.sidebarState === 'icons') {
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 7c0750c8c2..1e05c28eb7 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -26,6 +26,8 @@
         margin-block: var(--base-32);
 
         &.expanded {
+            max-width: unset;
+            margin-inline: 2.75rem;
             padding-inline-end: 0 !important;
             margin-block: var(--base-8) !important;
         }
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index fba7a062f9..74b7d8051a 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -3,6 +3,7 @@
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
     export let blocksize = '152px';
+    export let expanded: boolean = true;
 
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
@@ -10,15 +11,17 @@
 </script>
 
 <div class="top-cover-console" style:block-size={blocksize}>
-    <div class="cover-container" {style}>
+    <div class="cover-container" {style} class:expanded>
         <Layout.Stack direction="row" alignItems="baseline">
             <slot name="header" />
         </Layout.Stack>
-        <slot />
+        <div class:expanded-slot={expanded}>
+            <slot />
+        </div>
     </div>
 </div>
 
-<style>
+<style lang="scss">
     .top-cover-console {
         container-type: inline-size;
         padding-block-start: var(--base-32);
@@ -55,5 +58,13 @@
             margin-inline: auto;
             max-width: 1200px;
         }
+
+        &.expanded {
+            margin-inline: 1rem !important;
+        }
+    }
+
+    .expanded-slot {
+        margin-inline: 3rem !important;
     }
 </style>
diff --git a/src/lib/layout/coverTitle.svelte b/src/lib/layout/coverTitle.svelte
index ce87e70e5a..2cfecde2ab 100644
--- a/src/lib/layout/coverTitle.svelte
+++ b/src/lib/layout/coverTitle.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
     import { Typography, Button, Icon, Layout } from '@appwrite.io/pink-svelte';
 
@@ -8,8 +8,7 @@
 
 <Layout.Stack justifyContent="center" alignItems="center" direction="row" gap="xs" inline>
     {#if href}
-        <span
-            style={$isTabletViewport ? 'position: relative' : 'position: absolute; left: -2.75rem'}>
+        <span style:position="relative">
             <Button.Anchor size="s" icon variant="text" {href} aria-label="page back">
                 <Icon icon={IconChevronLeft} />
             </Button.Anchor>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
index 03283b9676..f62d323fd5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
@@ -3,6 +3,7 @@ import { Dependencies } from '$lib/constants';
 import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
+import SubNavigation from './subNavigation.svelte';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.DATABASE);
@@ -10,6 +11,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     return {
         header: Header,
         breadcrumbs: Breadcrumbs,
+        subNavigation: SubNavigation,
         database: await sdk.forProject(params.region, params.project).databases.get(params.database)
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.ts
index 01b7a47ca4..045ad8cfb9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.ts
@@ -3,13 +3,12 @@ import { Dependencies } from '$lib/constants';
 import type { LayoutLoad } from './$types';
 import Breadcrumbs from './breadcrumbs.svelte';
 import Header from './header.svelte';
-import SubNavigation from './subNavigation.svelte';
 import { Query } from '@appwrite.io/console';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.COLLECTION);
 
-    const [collection, allCollections] = await Promise.all([
+    const [collection, collections] = await Promise.all([
         sdk
             .forProject(params.region, params.project)
             .databases.getCollection(params.database, params.collection),
@@ -21,8 +20,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     return {
         header: Header,
         breadcrumbs: Breadcrumbs,
-        subNavigation: SubNavigation,
         collection,
-        allCollections
+        collections
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 531be5ee59..d50e68dfdc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -18,7 +18,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconPlus, IconSearch } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRecord from './createRecord.svelte';
@@ -83,17 +83,28 @@
     <Container expanded style="background: var(--bgcolor-neutral-primary)">
         <Layout.Stack direction="column" gap="xl">
             <Layout.Stack direction="row" justifyContent="space-between">
-                <Filters
-                    query={data.query}
-                    columns={filterColumns}
-                    disabled={!(hasAttributes && hasValidAttributes)}
-                    analyticsSource="database_documents" />
-                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
+                <Layout.Stack direction="row" gap="s">
                     <ViewSelector
+                        onlyIcon
+                        ui="new"
                         view={data.view}
-                        columns={filterColumns}
+                        {columns}
                         hideView
                         isCustomCollection />
+
+                    <Filters
+                        onlyIcon
+                        query={data.query}
+                        columns={filterColumns}
+                        disabled={!(hasAttributes && hasValidAttributes)}
+                        analyticsSource="database_documents" />
+
+                    <!-- TODO: not yet implemented -->
+                    <Button icon secondary>
+                        <Icon icon={IconSearch} slot="start" />
+                    </Button>
+                </Layout.Stack>
+                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     <Button
                         secondary
                         event={Click.DatabaseImportCsv}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
index f6965d3a6c..78f55bd06b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createRecord.svelte
@@ -103,45 +103,47 @@
 
 {#if $createDocument}
     <div class="sheet-container">
-    <!-- TODO: add a ID badge-->
-    <SideSheet
-        spaced
-        title={`${existingData ? 'Duplicate' : 'Create'} record`}
-        bind:show={showSheet}
-        closeOnBlur={false}
-        submit={{
-            text: 'Create',
-            disabled: isSubmitting,
-            onClick: () => create()
-        }}>
-        <Layout.Stack gap="xxl">
-            <AttributeForm
-                bind:formValues={$createDocument.document}
-                attributes={$createDocument.attributes}
-                bind:customId={$createDocument.id} />
+        <!-- TODO: add a ID badge-->
+        <SideSheet
+            spaced
+            title={`${existingData ? 'Duplicate' : 'Create'} record`}
+            bind:show={showSheet}
+            closeOnBlur={false}
+            submit={{
+                text: 'Create',
+                disabled: isSubmitting,
+                onClick: () => create()
+            }}>
+            <Layout.Stack gap="xxl">
+                <AttributeForm
+                    bind:formValues={$createDocument.document}
+                    attributes={$createDocument.attributes}
+                    bind:customId={$createDocument.id} />
 
-            <Layout.Stack gap="xl">
-                <Typography.Text>
-                    Choose which permission scopes to grant your application. It is best practice to
-                    allow only the permissions you need to meet your project goals.
-                </Typography.Text>
-                {#if collection.documentSecurity}
-                    <Alert.Inline status="info">
-                        <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
-                        Users will be able to access this document if they have been granted
-                        <b>either document or collection permissions</b>.
-                    </Alert.Inline>
-                    <Permissions bind:permissions={$createDocument.permissions} />
-                {:else}
-                    <Alert.Inline status="info">
-                        <svelte:fragment slot="title"
-                            >Document security is disabled</svelte:fragment>
-                        If you want to assign document permissions, navigate to Collection settings and
-                        enable document security. Otherwise, only collection permissions will be used.
-                    </Alert.Inline>
-                {/if}
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    {#if collection.documentSecurity}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is enabled</svelte:fragment>
+                            Users will be able to access this document if they have been granted
+                            <b>either document or collection permissions</b>.
+                        </Alert.Inline>
+                        <Permissions bind:permissions={$createDocument.permissions} />
+                    {:else}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is disabled</svelte:fragment>
+                            If you want to assign document permissions, navigate to Collection settings
+                            and enable document security. Otherwise, only collection permissions will
+                            be used.
+                        </Alert.Inline>
+                    {/if}
+                </Layout.Stack>
             </Layout.Stack>
-        </Layout.Stack>
-    </SideSheet>
-</div>
-{/if}
\ No newline at end of file
+        </SideSheet>
+    </div>
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
index 7e9ffffcff..5c26a1feb8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/header.svelte
@@ -60,7 +60,7 @@
 </script>
 
 <div style:margin-top={$isTabletViewport ? '48px' : 0}>
-    <Cover>
+    <Cover expanded>
         <svelte:fragment slot="header">
             <CoverTitle
                 href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 5656c05e84..d7e4c7eb6b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -10,6 +10,7 @@
     import type { Column } from '$lib/helpers/types';
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
+    import { SortButton } from '$lib/components';
 
     type Mode = 'records' | 'columns' | 'indexes';
 
@@ -37,14 +38,14 @@
                 id: '$id',
                 title: 'ID',
                 type: 'string',
-                width: 200,
+                width: 180,
                 icon: IconFingerPrint
             },
             ...middle,
             {
                 id: 'actions',
                 title: '',
-                width: 555,
+                width: 555 * 1.5,
                 draggable: false,
                 type: 'string',
                 icon: IconPlus
@@ -52,9 +53,6 @@
             {
                 id: 'empty',
                 title: '',
-                width: 40,
-                isAction: true,
-                draggable: false,
                 type: 'string'
             }
         ];
@@ -66,7 +64,7 @@
                 id: '$createdAt',
                 title: 'Created',
                 type: 'datetime',
-                width: { min: 180 },
+                width: 180,
                 draggable: false,
                 icon: IconCalendar
             },
@@ -74,7 +72,7 @@
                 id: '$updatedAt',
                 title: 'Updated',
                 type: 'datetime',
-                width: { min: 180 },
+                width: 180,
                 draggable: false,
                 icon: IconCalendar
             }
@@ -84,7 +82,7 @@
                 id: 'indexed',
                 title: 'Indexed',
                 type: 'boolean',
-                width: { min: 180 },
+                width: 180,
                 draggable: false,
                 isAction: false
             },
@@ -92,7 +90,7 @@
                 id: 'default',
                 title: 'Default',
                 type: 'string',
-                width: { min: 180 },
+                width: 180,
                 draggable: false,
                 isAction: false
             }
@@ -102,7 +100,7 @@
                 id: 'type',
                 title: 'Type',
                 type: 'string',
-                width: { min: 150 },
+                width: 180,
                 draggable: false,
                 isAction: false
             },
@@ -110,7 +108,7 @@
                 id: 'attributes',
                 title: 'Columns',
                 type: 'string',
-                width: { min: 200 },
+                width: 180,
                 draggable: false,
                 isAction: false
             }
@@ -133,8 +131,17 @@
                         <Button.Button icon variant="extra-compact">
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
                         </Button.Button>
-                    {:else}
+                    {:else if column.id === 'actions' || column.id === 'empty'}
                         {column.title}
+                    {:else}
+                        <Layout.Stack
+                            gap="xs"
+                            direction="row"
+                            alignItems="center"
+                            alignContent="center">
+                            {column.title}
+                            <SortButton disabled column={column.id} />
+                        </Layout.Stack>
                     {/if}
                 </Spreadsheet.Header.Cell>
             {/each}
@@ -194,6 +201,11 @@
         & :global(.spreadsheet-container) {
             overflow-x: hidden;
             overflow-y: hidden;
+
+            // hides the last columns left border, as per design
+            & :global([role='rowheader'] [role='cell']:nth-last-child(2) [role='presentation']) {
+                display: none;
+            }
         }
 
         & :global([data-select='true']) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
index e220dba394..bdfb8b4d22 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/header.svelte
@@ -38,7 +38,7 @@
     ].filter((tab) => !tab.disabled);
 </script>
 
-<Cover>
+<Cover expanded>
     <svelte:fragment slot="header">
         <CoverTitle href={`${base}/project-${page.params.region}-${projectId}/databases`}>
             {$database.name}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
similarity index 83%
rename from src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
rename to src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index ae08093271..6ee4ddf029 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import { showCreate } from '../store';
+    import { showCreate } from './store';
     import type { PageData } from './$types';
     import { showSubNavigation } from '$lib/stores/layout';
-    import { Icon, Sidebar, Navbar, Layout, Link, ActionMenu } from '@appwrite.io/pink-svelte';
+    import { Icon, Sidebar, Navbar, Layout, Link } from '@appwrite.io/pink-svelte';
     import {
         IconChevronDown,
         IconDatabase,
@@ -13,6 +13,8 @@
     } from '@appwrite.io/pink-icons-svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
     import { BottomSheet } from '$lib/components';
+    import Button from '$lib/elements/forms/button.svelte';
+    import type { Models } from '@appwrite.io/console';
 
     let data = $derived(page.data) as PageData;
     let region = $derived(page.params.region);
@@ -20,12 +22,14 @@
     let databaseId = $derived(page.params.database);
     let collectionId = $derived(page.params.collection);
 
+    const collections = $derived(data.collections);
+
     const sortedCollections = $derived.by(() =>
-        data?.allCollections?.collections?.slice().sort((a, b) => a.name.localeCompare(b.name))
+        collections?.collections?.slice().sort((a, b) => a.name.localeCompare(b.name))
     );
 
     const selectedCollection = $derived.by(() =>
-        sortedCollections?.find((collection) => collection.$id === collectionId)
+        sortedCollections?.find((collection: Models.Collection) => collection.$id === collectionId)
     );
 
     let openBottomSheet = $state(false);
@@ -48,7 +52,7 @@
                 {data.database?.name}
             </a>
             <div class="collection-content">
-                {#if data?.allCollections?.total}
+                {#if collections?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
                         {#each sortedCollections as collection}
                             {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
@@ -69,18 +73,32 @@
                             </li>
                         {/each}
                     </ul>
+                {:else}
+                    <Layout.Stack gap="m">
+                        <Layout.Stack
+                            gap="m"
+                            direction="row"
+                            class="u-margin-inline-start-8 u-margin-block-start-8">
+                            <div style="border-left: 1px solid var(--border-neutral, #ededf0)">
+                            </div>
+                            No tables yet
+                        </Layout.Stack>
+                    </Layout.Stack>
                 {/if}
+
+                <Layout.Stack gap="m" alignItems="center" direction="row">
+                    <Icon icon={IconPlus} size="s" />
+
+                    <Button
+                        compact
+                        on:click={() => {
+                            $showCreate = true;
+                            $showSubNavigation = false;
+                        }}>
+                        Create collection
+                    </Button>
+                </Layout.Stack>
             </div>
-            <ActionMenu.Root noPadding width="167">
-                <ActionMenu.Item.Button
-                    on:click={() => {
-                        $showCreate = true;
-                        $showSubNavigation = false;
-                    }}
-                    leadingIcon={IconPlus}>
-                    Create collection
-                </ActionMenu.Item.Button>
-            </ActionMenu.Root>
         </section>
     </Sidebar.Base>
 {:else}

From 5c9d1ba04396ae2eae6529e12022dbd00ed68a09 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 22 Jul 2025 19:52:04 +0530
Subject: [PATCH 027/118] updates.

---
 .../database-[database]/+page.svelte          | 34 +++++--
 .../collection-[collection]/+page.svelte      |  6 +-
 .../sheetOptions.svelte                       |  2 +-
 static/images/empty-database-light.svg        | 94 +++++++++++++++++++
 4 files changed, 124 insertions(+), 12 deletions(-)
 create mode 100644 static/images/empty-database-light.svg

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 989916cf9a..55c36585ce 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit } from '$lib/components';
+    import { PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { columns, showCreate } from './store';
@@ -7,8 +7,9 @@
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
     import { canWriteCollections } from '$lib/stores/roles';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Card, Empty, Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
 
     export let data: PageData;
 </script>
@@ -40,11 +41,28 @@
             offset={data.offset}
             total={data.collections.total} />
     {:else}
-        <Empty
-            single
-            allowCreate={$canWriteCollections}
-            href="https://appwrite.io/docs/products/databases/collections"
-            target="collection"
-            on:click={() => ($showCreate = true)} />
+        <Card.Base padding="none">
+            <Empty title="Create your first table" src={`${base}/images/empty-database-light.svg`}>
+                <span slot="description">
+                    Create and manage structured data effortlessly, with the flexibility and control
+                    your app needs.
+                </span>
+                <span slot="actions">
+                    <Button
+                        external
+                        text
+                        event="empty_documentation"
+                        ariaLabel={`create collection`}>Documentation</Button>
+
+                    <Button
+                        secondary
+                        on:click={() => {
+                            $showCreate = true;
+                        }}>
+                        Create collection
+                    </Button>
+                </span>
+            </Empty>
+        </Card.Base>
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index d50e68dfdc..07375467b9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -100,9 +100,9 @@
                         analyticsSource="database_documents" />
 
                     <!-- TODO: not yet implemented -->
-                    <Button icon secondary>
-                        <Icon icon={IconSearch} slot="start" />
-                    </Button>
+                    <!--                    <Button icon secondary>-->
+                    <!--                        <Icon icon={IconSearch} slot="start" />-->
+                    <!--                    </Button>-->
                 </Layout.Stack>
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     <Button
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
index d709d9245a..b0d3dfcc67 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
@@ -98,7 +98,7 @@
     }
 </script>
 
-<Popover let:toggle padding="none" placement="bottom" portal>
+<Popover let:toggle padding="none" placement="bottom-start" portal>
     {@render children(toggle)}
 
     <svelte:fragment slot="tooltip" let:hide>
diff --git a/static/images/empty-database-light.svg b/static/images/empty-database-light.svg
new file mode 100644
index 0000000000..e71d18b047
--- /dev/null
+++ b/static/images/empty-database-light.svg
@@ -0,0 +1,94 @@
+<svg width="1015" height="184" viewBox="0 0 1015 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2535_66839)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="white"/>
+<foreignObject x="226" y="12" width="563" height="194"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_2535_66839_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="230" y="16" width="555" height="186" rx="12" fill="white" fill-opacity="0.32"/>
+<rect x="230.5" y="16.5" width="554" height="185" rx="11.5" stroke="#19191C" stroke-opacity="0.03"/>
+</g>
+<g filter="url(#filter1_f_2535_66839)">
+<path d="M266.195 52.6414C250.426 78.6823 230.434 97.8723 221.543 95.5035C212.652 93.1347 218.228 70.1041 233.998 44.0632C249.767 18.0223 225.106 20.266 233.997 22.6348C242.888 25.0036 281.965 26.6004 266.195 52.6414Z" fill="url(#paint0_radial_2535_66839)" fill-opacity="0.2"/>
+</g>
+<foreignObject x="233.2" y="19.2" width="548.6" height="179.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.9px);clip-path:url(#bgblur_2_2535_66839_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="1.8">
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" fill="#FAFAFB"/>
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="#EDEDF0" stroke-width="0.9"/>
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="url(#paint1_linear_2535_66839)" stroke-opacity="0.4" stroke-width="0.9"/>
+</g>
+<path d="M254.886 34.8325C255.732 35.7325 256.155 36.88 256.155 38.275C256.155 39.67 255.732 40.822 254.886 41.731C254.049 42.631 252.969 43.081 251.646 43.081C250.323 43.081 249.239 42.631 248.393 41.731C247.556 40.822 247.137 39.67 247.137 38.275C247.137 36.88 247.556 35.7325 248.393 34.8325C249.239 33.9235 250.323 33.469 251.646 33.469C252.969 33.469 254.049 33.9235 254.886 34.8325ZM249.257 35.602C248.645 36.295 248.339 37.186 248.339 38.275C248.339 39.364 248.645 40.2595 249.257 40.9615C249.869 41.6545 250.665 42.001 251.646 42.001C252.627 42.001 253.424 41.6545 254.036 40.9615C254.648 40.2595 254.954 39.364 254.954 38.275C254.954 37.186 254.648 36.295 254.036 35.602C253.424 34.9 252.627 34.549 251.646 34.549C250.665 34.549 249.869 34.9 249.257 35.602ZM260.664 36.115H260.974V37.195H260.421C259.764 37.195 259.291 37.4155 259.003 37.8565C258.724 38.2975 258.585 38.842 258.585 39.49V43H257.478V36.115H258.436L258.585 37.1545C259.008 36.4615 259.701 36.115 260.664 36.115ZM266.965 37.168V33.55H268.072V43H267.114L266.965 41.893C266.389 42.685 265.602 43.081 264.603 43.081C263.631 43.081 262.834 42.7705 262.213 42.1495C261.601 41.5195 261.295 40.6555 261.295 39.5575C261.295 38.5135 261.606 37.6675 262.227 37.0195C262.848 36.3625 263.64 36.034 264.603 36.034C265.701 36.034 266.488 36.412 266.965 37.168ZM264.711 42.0955C265.386 42.0955 265.93 41.8615 266.344 41.3935C266.767 40.9255 266.979 40.3225 266.979 39.5845C266.979 38.8285 266.767 38.212 266.344 37.735C265.93 37.258 265.386 37.0195 264.711 37.0195C264.027 37.0195 263.473 37.258 263.05 37.735C262.636 38.203 262.429 38.8105 262.429 39.5575C262.429 40.3045 262.636 40.9165 263.05 41.3935C263.473 41.8615 264.027 42.0955 264.711 42.0955ZM272.753 43.081C271.727 43.081 270.899 42.757 270.269 42.109C269.648 41.461 269.337 40.6105 269.337 39.5575C269.337 38.5135 269.639 37.6675 270.242 37.0195C270.845 36.3625 271.632 36.034 272.604 36.034C273.585 36.034 274.368 36.3265 274.953 36.9115C275.538 37.4875 275.844 38.284 275.871 39.301C275.871 39.4 275.862 39.5575 275.844 39.7735H270.498V39.868C270.516 40.534 270.719 41.074 271.106 41.488C271.502 41.893 272.024 42.0955 272.672 42.0955C273.167 42.0955 273.585 41.974 273.927 41.731C274.278 41.479 274.512 41.1325 274.629 40.6915H275.75C275.615 41.3935 275.277 41.9695 274.737 42.4195C274.197 42.8605 273.536 43.081 272.753 43.081ZM270.566 38.8555H274.683C274.629 38.2705 274.418 37.816 274.049 37.492C273.68 37.168 273.203 37.006 272.618 37.006C272.096 37.006 271.637 37.177 271.241 37.519C270.845 37.861 270.62 38.3065 270.566 38.8555ZM280.32 36.115H280.631V37.195H280.077C279.42 37.195 278.948 37.4155 278.66 37.8565C278.381 38.2975 278.241 38.842 278.241 39.49V43H277.134V36.115H278.093L278.241 37.1545C278.664 36.4615 279.357 36.115 280.32 36.115ZM281.162 40.732H282.296C282.314 41.146 282.494 41.4835 282.836 41.7445C283.178 42.0055 283.632 42.136 284.199 42.136C284.685 42.136 285.081 42.0415 285.387 41.8525C285.702 41.6545 285.86 41.398 285.86 41.083C285.86 40.912 285.824 40.768 285.752 40.651C285.689 40.534 285.617 40.444 285.536 40.381C285.464 40.309 285.329 40.2505 285.131 40.2055C284.933 40.1515 284.78 40.12 284.672 40.111C284.564 40.093 284.366 40.066 284.078 40.03C283.637 39.976 283.272 39.9175 282.984 39.8545C282.696 39.7825 282.413 39.679 282.134 39.544C281.855 39.4 281.648 39.211 281.513 38.977C281.378 38.734 281.31 38.4415 281.31 38.0995C281.31 37.4785 281.562 36.979 282.066 36.601C282.579 36.214 283.227 36.025 284.01 36.034C284.82 36.043 285.477 36.2365 285.981 36.6145C286.485 36.9835 286.764 37.5145 286.818 38.2075H285.684C285.639 37.8475 285.464 37.555 285.158 37.33C284.861 37.096 284.478 36.979 284.01 36.979C283.524 36.979 283.133 37.0735 282.836 37.2625C282.548 37.4515 282.404 37.7035 282.404 38.0185C282.404 38.1985 282.44 38.347 282.512 38.464C282.593 38.581 282.723 38.6755 282.903 38.7475C283.092 38.8105 283.263 38.86 283.416 38.896C283.578 38.923 283.817 38.9545 284.132 38.9905C284.492 39.0355 284.793 39.0805 285.036 39.1255C285.279 39.1705 285.531 39.2425 285.792 39.3415C286.053 39.4405 286.26 39.5575 286.413 39.6925C286.575 39.8275 286.706 40.0075 286.805 40.2325C286.904 40.4485 286.953 40.705 286.953 41.002C286.953 41.632 286.688 42.136 286.157 42.514C285.635 42.892 284.982 43.081 284.199 43.081C283.29 43.081 282.557 42.874 281.999 42.46C281.45 42.046 281.171 41.47 281.162 40.732Z" fill="#818186"/>
+<g opacity="0.8">
+<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="10.4625" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
+<mask id="mask0_2535_66839" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="57" width="537" height="165">
+<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="9.7875" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
+</mask>
+<g mask="url(#mask0_2535_66839)">
+<mask id="mask1_2535_66839" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="56" width="537" height="231">
+<rect x="323.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 323.613 57.2603)" fill="#D9D9D9"/>
+<rect x="239.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 239.699 57.2524)" fill="#D9D9D9"/>
+<rect x="407.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 407.613 57.2603)" fill="#D9D9D9"/>
+<rect x="323.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 323.699 57.2524)" fill="#D9D9D9"/>
+<rect x="491.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 491.613 57.2603)" fill="#D9D9D9"/>
+<rect x="407.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 407.699 57.2524)" fill="#D9D9D9"/>
+<rect x="575.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 575.613 57.2603)" fill="#D9D9D9"/>
+<rect x="491.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 491.699 57.2524)" fill="#D9D9D9"/>
+<rect x="659.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 659.613 57.2598)" fill="#D9D9D9"/>
+<rect x="575.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 575.699 57.252)" fill="#D9D9D9"/>
+<rect x="743.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 743.613 57.2598)" fill="#D9D9D9"/>
+<rect x="659.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 659.699 57.252)" fill="#D9D9D9"/>
+<rect x="239" y="83.6851" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="111.36" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="139.035" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="166.71" width="537" height="0.675" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_2535_66839)">
+<rect x="239" y="57" width="537" height="165" fill="url(#paint2_radial_2535_66839)"/>
+</g>
+</g>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.976 66.5925C251.603 66.339 252.287 66.1997 253.002 66.1997C255.984 66.1997 258.402 68.6174 258.402 71.5997C258.402 71.9311 258.133 72.1997 257.802 72.1997C257.47 72.1997 257.202 71.9311 257.202 71.5997C257.202 69.2801 255.321 67.3997 253.002 67.3997C252.443 67.3997 251.912 67.5082 251.427 67.7048C251.12 67.8291 250.77 67.6809 250.645 67.3737C250.521 67.0666 250.669 66.7168 250.976 66.5925ZM249.799 67.9749C250.047 68.1942 250.071 68.5733 249.851 68.8218C249.198 69.5625 248.802 70.5341 248.802 71.5997C248.802 71.9311 248.533 72.1997 248.202 72.1997C247.87 72.1997 247.602 71.9311 247.602 71.5997C247.602 70.2306 248.112 68.9792 248.952 68.0277C249.171 67.7792 249.55 67.7556 249.799 67.9749Z" fill="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.002 71.5997C250.002 69.9429 251.345 68.5997 253.002 68.5997C254.658 68.5997 256.002 69.9429 256.002 71.5997C256.002 71.9311 255.733 72.1997 255.402 72.1997C255.07 72.1997 254.802 71.9311 254.802 71.5997C254.802 70.6056 253.996 69.7997 253.002 69.7997C252.007 69.7997 251.202 70.6056 251.202 71.5997C251.202 72.606 250.995 73.5656 250.621 74.437C250.49 74.7415 250.137 74.8824 249.833 74.7517C249.528 74.621 249.387 74.2682 249.518 73.9637C249.829 73.2391 250.002 72.4403 250.002 71.5997ZM255.354 72.8071C255.682 72.859 255.905 73.1664 255.853 73.4937C255.774 73.9917 255.664 74.4796 255.526 74.9554C255.433 75.2736 255.1 75.4565 254.782 75.364C254.464 75.2715 254.281 74.9386 254.374 74.6204C254.498 74.1926 254.597 73.7538 254.668 73.3057C254.72 72.9784 255.027 72.7552 255.354 72.8071Z" fill="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.002 70.9997C253.333 70.9997 253.602 71.2683 253.602 71.5997C253.602 72.9415 253.326 74.2204 252.828 75.3818C252.697 75.6864 252.344 75.8273 252.04 75.6967C251.735 75.566 251.594 75.2132 251.725 74.9087C252.16 73.894 252.402 72.7758 252.402 71.5997C252.402 71.2683 252.67 70.9997 253.002 70.9997Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M262.938 67V75H261.969V67H262.938ZM267.239 75H264.77V67H267.348C268.124 67 268.788 67.1602 269.34 67.4805C269.892 67.7982 270.315 68.2552 270.61 68.8516C270.904 69.4453 271.051 70.1562 271.051 70.9844C271.051 71.8177 270.903 72.5352 270.606 73.1367C270.309 73.7357 269.877 74.1966 269.309 74.5195C268.741 74.8398 268.051 75 267.239 75ZM265.739 74.1406H267.176C267.838 74.1406 268.386 74.013 268.821 73.7578C269.256 73.5026 269.58 73.1393 269.793 72.668C270.007 72.1966 270.114 71.6354 270.114 70.9844C270.114 70.3385 270.008 69.7826 269.797 69.3164C269.586 68.8477 269.271 68.4883 268.852 68.2383C268.433 67.9857 267.911 67.8594 267.286 67.8594H265.739V74.1406Z" fill="#97979B"/>
+<path d="M341 68.5005H340.998V68.7505C340.998 69.1647 340.662 69.5005 340.248 69.5005C339.834 69.5003 339.498 69.1646 339.498 68.7505V68.5005H338V73.5005H338.752C339.166 73.5007 339.502 73.8364 339.502 74.2505C339.502 74.6645 339.166 75.0003 338.752 75.0005H335.252C334.838 75.0005 334.502 74.6647 334.502 74.2505C334.502 73.8363 334.838 73.5005 335.252 73.5005H336V68.5005H334.502V68.7505C334.502 69.1646 334.166 69.5003 333.752 69.5005C333.338 69.5005 333.002 69.1647 333.002 68.7505V68.5005H333V67.0005H341V68.5005Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M352.313 67V75H351.375L347.016 68.7187H346.938V75H345.969V67H346.906L351.281 73.2969H351.359V67H352.313ZM355.782 75.1406C355.401 75.1406 355.056 75.069 354.746 74.9258C354.437 74.7799 354.19 74.5703 354.008 74.2969C353.826 74.0208 353.735 73.6875 353.735 73.2969C353.735 72.9531 353.802 72.6745 353.938 72.4609C354.073 72.2448 354.254 72.0755 354.481 71.9531C354.707 71.8307 354.957 71.7396 355.231 71.6797C355.507 71.6172 355.784 71.5677 356.063 71.5313C356.427 71.4844 356.723 71.4492 356.95 71.4258C357.179 71.3997 357.345 71.3568 357.45 71.2969C357.556 71.237 357.61 71.1328 357.61 70.9844V70.9531C357.61 70.5677 357.504 70.2682 357.293 70.0547C357.085 69.8411 356.769 69.7344 356.344 69.7344C355.904 69.7344 355.559 69.8307 355.309 70.0234C355.059 70.2161 354.883 70.4219 354.782 70.6406L353.907 70.3281C354.063 69.9635 354.271 69.6797 354.532 69.4766C354.795 69.2708 355.081 69.1276 355.391 69.0469C355.703 68.9635 356.011 68.9219 356.313 68.9219C356.506 68.9219 356.727 68.9453 356.977 68.9922C357.23 69.0365 357.473 69.1289 357.707 69.2695C357.944 69.4102 358.141 69.6224 358.297 69.9062C358.453 70.1901 358.532 70.5703 358.532 71.0469V75H357.61V74.1875H357.563C357.5 74.3177 357.396 74.457 357.25 74.6055C357.105 74.7539 356.911 74.8802 356.668 74.9844C356.426 75.0885 356.131 75.1406 355.782 75.1406ZM355.922 74.3125C356.287 74.3125 356.594 74.2409 356.844 74.0977C357.097 73.9544 357.287 73.7695 357.414 73.543C357.545 73.3164 357.61 73.0781 357.61 72.8281V71.9844C357.571 72.0312 357.485 72.0742 357.352 72.1133C357.222 72.1497 357.071 72.1823 356.899 72.2109C356.73 72.237 356.564 72.2604 356.403 72.2812C356.244 72.2995 356.115 72.3151 356.016 72.3281C355.776 72.3594 355.552 72.4102 355.344 72.4805C355.138 72.5482 354.972 72.651 354.844 72.7891C354.719 72.9245 354.657 73.1094 354.657 73.3437C354.657 73.6641 354.775 73.9062 355.012 74.0703C355.252 74.2318 355.555 74.3125 355.922 74.3125ZM360.104 75V69H360.995V69.9375H361.073C361.198 69.6172 361.4 69.3685 361.678 69.1914C361.957 69.0117 362.292 68.9219 362.682 68.9219C363.078 68.9219 363.408 69.0117 363.671 69.1914C363.936 69.3685 364.143 69.6172 364.292 69.9375H364.354C364.508 69.6276 364.738 69.3815 365.046 69.1992C365.353 69.0143 365.721 68.9219 366.151 68.9219C366.688 68.9219 367.126 69.0898 367.467 69.4258C367.809 69.7591 367.979 70.2786 367.979 70.9844V75H367.057V70.9844C367.057 70.5417 366.936 70.2253 366.694 70.0352C366.452 69.8451 366.167 69.75 365.839 69.75C365.417 69.75 365.09 69.8776 364.858 70.1328C364.626 70.3854 364.51 70.7057 364.51 71.0937V75H363.573V70.8906C363.573 70.5495 363.462 70.2747 363.241 70.0664C363.02 69.8555 362.734 69.75 362.385 69.75C362.146 69.75 361.922 69.8138 361.714 69.9414C361.508 70.069 361.341 70.2461 361.214 70.4727C361.089 70.6966 361.026 70.9557 361.026 71.25V75H360.104ZM372.07 75.125C371.492 75.125 370.994 74.9974 370.574 74.7422C370.158 74.4844 369.836 74.125 369.609 73.6641C369.385 73.2005 369.274 72.6615 369.274 72.0469C369.274 71.4323 369.385 70.8906 369.609 70.4219C369.836 69.9505 370.151 69.5833 370.555 69.3203C370.961 69.0547 371.435 68.9219 371.977 68.9219C372.289 68.9219 372.598 68.974 372.902 69.0781C373.207 69.1823 373.484 69.3516 373.734 69.5859C373.984 69.8177 374.184 70.125 374.332 70.5078C374.481 70.8906 374.555 71.362 374.555 71.9219V72.3125H369.93V71.5156H373.617C373.617 71.1771 373.55 70.875 373.414 70.6094C373.281 70.3437 373.091 70.1341 372.844 69.9805C372.599 69.8268 372.31 69.75 371.977 69.75C371.609 69.75 371.292 69.8411 371.024 70.0234C370.758 70.2031 370.553 70.4375 370.41 70.7266C370.267 71.0156 370.195 71.3255 370.195 71.6562V72.1875C370.195 72.6406 370.274 73.0247 370.43 73.3398C370.589 73.6523 370.809 73.8906 371.09 74.0547C371.371 74.2161 371.698 74.2969 372.07 74.2969C372.313 74.2969 372.531 74.263 372.727 74.1953C372.925 74.125 373.095 74.0208 373.238 73.8828C373.382 73.7422 373.492 73.5677 373.57 73.3594L374.461 73.6094C374.367 73.9115 374.21 74.1771 373.988 74.4062C373.767 74.6328 373.494 74.8099 373.168 74.9375C372.843 75.0625 372.477 75.125 372.07 75.125Z" fill="#97979B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M418.599 66.1997C418.268 66.1997 417.999 66.4683 417.999 66.7997V67.3997H417.399C416.736 67.3997 416.199 67.937 416.199 68.5997V74.5997C416.199 75.2624 416.736 75.7997 417.399 75.7997H424.599C425.262 75.7997 425.799 75.2624 425.799 74.5997V68.5997C425.799 67.937 425.262 67.3997 424.599 67.3997H423.999V66.7997C423.999 66.4683 423.731 66.1997 423.399 66.1997C423.068 66.1997 422.799 66.4683 422.799 66.7997V67.3997H419.199V66.7997C419.199 66.4683 418.931 66.1997 418.599 66.1997ZM418.599 69.1997C418.268 69.1997 417.999 69.4683 417.999 69.7997C417.999 70.1311 418.268 70.3997 418.599 70.3997H423.399C423.731 70.3997 423.999 70.1311 423.999 69.7997C423.999 69.4683 423.731 69.1997 423.399 69.1997H418.599Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M432.109 75.125C431.609 75.125 431.168 74.9987 430.785 74.7461C430.402 74.4909 430.103 74.1315 429.887 73.668C429.671 73.2018 429.563 72.651 429.563 72.0156C429.563 71.3854 429.671 70.8385 429.887 70.375C430.103 69.9115 430.404 69.5534 430.789 69.3008C431.174 69.0482 431.62 68.9219 432.125 68.9219C432.516 68.9219 432.824 68.987 433.051 69.1172C433.28 69.2448 433.454 69.3906 433.574 69.5547C433.697 69.7161 433.792 69.849 433.859 69.9531H433.938V67H434.859V75H433.969V74.0781H433.859C433.792 74.1875 433.695 74.3255 433.57 74.4922C433.445 74.6562 433.267 74.8034 433.035 74.9336C432.803 75.0612 432.495 75.125 432.109 75.125ZM432.234 74.2969C432.604 74.2969 432.917 74.2005 433.172 74.0078C433.427 73.8125 433.621 73.543 433.754 73.1992C433.887 72.8529 433.953 72.4531 433.953 72C433.953 71.5521 433.888 71.1602 433.758 70.8242C433.628 70.4857 433.435 70.2227 433.18 70.0352C432.924 69.8451 432.609 69.75 432.234 69.75C431.844 69.75 431.518 69.8503 431.258 70.0508C431 70.2487 430.806 70.5182 430.676 70.8594C430.548 71.1979 430.484 71.5781 430.484 72C430.484 72.4271 430.549 72.8151 430.68 73.1641C430.813 73.5104 431.008 73.7865 431.266 73.9922C431.526 74.1953 431.849 74.2969 432.234 74.2969ZM438.331 75.1406C437.951 75.1406 437.606 75.069 437.296 74.9258C436.986 74.7799 436.74 74.5703 436.558 74.2969C436.376 74.0208 436.285 73.6875 436.285 73.2969C436.285 72.9531 436.352 72.6745 436.488 72.4609C436.623 72.2448 436.804 72.0755 437.031 71.9531C437.257 71.8307 437.507 71.7396 437.781 71.6797C438.057 71.6172 438.334 71.5677 438.613 71.5313C438.977 71.4844 439.273 71.4492 439.499 71.4258C439.729 71.3997 439.895 71.3568 439.999 71.2969C440.106 71.237 440.16 71.1328 440.16 70.9844V70.9531C440.16 70.5677 440.054 70.2682 439.843 70.0547C439.635 69.8411 439.318 69.7344 438.894 69.7344C438.454 69.7344 438.109 69.8307 437.859 70.0234C437.609 70.2161 437.433 70.4219 437.331 70.6406L436.456 70.3281C436.613 69.9635 436.821 69.6797 437.081 69.4766C437.344 69.2708 437.631 69.1276 437.941 69.0469C438.253 68.9635 438.561 68.9219 438.863 68.9219C439.055 68.9219 439.277 68.9453 439.527 68.9922C439.779 69.0365 440.023 69.1289 440.257 69.2695C440.494 69.4102 440.691 69.6224 440.847 69.9062C441.003 70.1901 441.081 70.5703 441.081 71.0469V75H440.16V74.1875H440.113C440.05 74.3177 439.946 74.457 439.8 74.6055C439.654 74.7539 439.46 74.8802 439.218 74.9844C438.976 75.0885 438.68 75.1406 438.331 75.1406ZM438.472 74.3125C438.837 74.3125 439.144 74.2409 439.394 74.0977C439.647 73.9544 439.837 73.7695 439.964 73.543C440.094 73.3164 440.16 73.0781 440.16 72.8281V71.9844C440.12 72.0312 440.035 72.0742 439.902 72.1133C439.772 72.1497 439.62 72.1823 439.449 72.2109C439.279 72.237 439.114 72.2604 438.953 72.2812C438.794 72.2995 438.665 72.3151 438.566 72.3281C438.326 72.3594 438.102 72.4102 437.894 72.4805C437.688 72.5482 437.522 72.651 437.394 72.7891C437.269 72.9245 437.206 73.1094 437.206 73.3437C437.206 73.6641 437.325 73.9062 437.562 74.0703C437.801 74.2318 438.105 74.3125 438.472 74.3125ZM445.263 69V69.7812H442.154V69H445.263ZM443.06 67.5625H443.982V73.2812C443.982 73.5417 444.02 73.737 444.095 73.8672C444.174 73.9948 444.273 74.0807 444.392 74.125C444.515 74.1667 444.644 74.1875 444.779 74.1875C444.881 74.1875 444.964 74.1823 445.029 74.1719C445.094 74.1589 445.146 74.1484 445.185 74.1406L445.373 74.9687C445.31 74.9922 445.223 75.0156 445.111 75.0391C444.999 75.0651 444.857 75.0781 444.685 75.0781C444.425 75.0781 444.17 75.0221 443.92 74.9102C443.672 74.7982 443.467 74.6276 443.302 74.3984C443.141 74.1693 443.06 73.8802 443.06 73.5312V67.5625ZM448.991 75.125C448.413 75.125 447.914 74.9974 447.495 74.7422C447.079 74.4844 446.757 74.125 446.53 73.6641C446.306 73.2005 446.194 72.6615 446.194 72.0469C446.194 71.4323 446.306 70.8906 446.53 70.4219C446.757 69.9505 447.072 69.5833 447.476 69.3203C447.882 69.0547 448.356 68.9219 448.898 68.9219C449.21 68.9219 449.519 68.974 449.823 69.0781C450.128 69.1823 450.405 69.3516 450.655 69.5859C450.905 69.8177 451.105 70.125 451.253 70.5078C451.401 70.8906 451.476 71.362 451.476 71.9219V72.3125H446.851V71.5156H450.538C450.538 71.1771 450.47 70.875 450.335 70.6094C450.202 70.3437 450.012 70.1341 449.765 69.9805C449.52 69.8268 449.231 69.75 448.898 69.75C448.53 69.75 448.213 69.8411 447.944 70.0234C447.679 70.2031 447.474 70.4375 447.331 70.7266C447.188 71.0156 447.116 71.3255 447.116 71.6562V72.1875C447.116 72.6406 447.194 73.0247 447.351 73.3398C447.51 73.6523 447.73 73.8906 448.011 74.0547C448.292 74.2161 448.619 74.2969 448.991 74.2969C449.233 74.2969 449.452 74.263 449.648 74.1953C449.845 74.125 450.016 74.0208 450.159 73.8828C450.302 73.7422 450.413 73.5677 450.491 73.3594L451.382 73.6094C451.288 73.9115 451.131 74.1771 450.909 74.4062C450.688 74.6328 450.414 74.8099 450.089 74.9375C449.763 75.0625 449.398 75.125 448.991 75.125ZM459.643 71C459.643 71.8437 459.491 72.5729 459.186 73.1875C458.881 73.8021 458.463 74.276 457.932 74.6094C457.401 74.9427 456.794 75.1094 456.112 75.1094C455.429 75.1094 454.823 74.9427 454.291 74.6094C453.76 74.276 453.342 73.8021 453.038 73.1875C452.733 72.5729 452.581 71.8437 452.581 71C452.581 70.1562 452.733 69.4271 453.038 68.8125C453.342 68.1979 453.76 67.724 454.291 67.3906C454.823 67.0573 455.429 66.8906 456.112 66.8906C456.794 66.8906 457.401 67.0573 457.932 67.3906C458.463 67.724 458.881 68.1979 459.186 68.8125C459.491 69.4271 459.643 70.1562 459.643 71ZM458.706 71C458.706 70.3073 458.59 69.7227 458.358 69.2461C458.129 68.7695 457.817 68.4089 457.424 68.1641C457.034 67.9193 456.596 67.7969 456.112 67.7969C455.627 67.7969 455.189 67.9193 454.795 68.1641C454.405 68.4089 454.094 68.7695 453.862 69.2461C453.633 69.7227 453.518 70.3073 453.518 71C453.518 71.6927 453.633 72.2773 453.862 72.7539C454.094 73.2305 454.405 73.5911 454.795 73.8359C455.189 74.0807 455.627 74.2031 456.112 74.2031C456.596 74.2031 457.034 74.0807 457.424 73.8359C457.817 73.5911 458.129 73.2305 458.358 72.7539C458.59 72.2773 458.706 71.6927 458.706 71ZM463.709 69V69.7812H460.474V69H463.709ZM461.443 75V68.1719C461.443 67.8281 461.524 67.5417 461.685 67.3125C461.847 67.0833 462.056 66.9115 462.314 66.7969C462.572 66.6823 462.844 66.625 463.131 66.625C463.357 66.625 463.542 66.6432 463.685 66.6797C463.829 66.7161 463.935 66.75 464.006 66.7812L463.74 67.5781C463.693 67.5625 463.628 67.543 463.545 67.5195C463.464 67.4961 463.357 67.4844 463.224 67.4844C462.92 67.4844 462.7 67.5612 462.564 67.7148C462.431 67.8685 462.365 68.0937 462.365 68.3906V75H461.443ZM465.016 75V67H467.813C468.37 67 468.83 67.0964 469.192 67.2891C469.554 67.4792 469.823 67.7357 470 68.0586C470.177 68.3789 470.266 68.7344 470.266 69.125C470.266 69.4687 470.205 69.7526 470.082 69.9766C469.962 70.2005 469.804 70.3776 469.606 70.5078C469.41 70.638 469.198 70.7344 468.969 70.7969V70.875C469.214 70.8906 469.46 70.9766 469.707 71.1328C469.955 71.2891 470.162 71.513 470.328 71.8047C470.495 72.0964 470.578 72.4531 470.578 72.875C470.578 73.276 470.487 73.6367 470.305 73.957C470.123 74.2773 469.835 74.5312 469.442 74.7187C469.048 74.9062 468.537 75 467.906 75H465.016ZM465.985 74.1406H467.906C468.539 74.1406 468.988 74.0182 469.254 73.7734C469.522 73.526 469.656 73.2266 469.656 72.875C469.656 72.6042 469.587 72.3542 469.449 72.125C469.311 71.8932 469.115 71.7083 468.86 71.5703C468.604 71.4297 468.302 71.3594 467.953 71.3594H465.985V74.1406ZM465.985 70.5156H467.781C468.073 70.5156 468.336 70.4583 468.57 70.3437C468.807 70.2292 468.995 70.0677 469.133 69.8594C469.274 69.651 469.344 69.4062 469.344 69.125C469.344 68.7734 469.222 68.4753 468.977 68.2305C468.732 67.9831 468.344 67.8594 467.813 67.8594H465.985V70.5156ZM471.935 75V69H472.857V75H471.935ZM472.404 68C472.224 68 472.069 67.9388 471.939 67.8164C471.811 67.694 471.748 67.5469 471.748 67.375C471.748 67.2031 471.811 67.056 471.939 66.9336C472.069 66.8112 472.224 66.75 472.404 66.75C472.584 66.75 472.737 66.8112 472.865 66.9336C472.995 67.056 473.06 67.2031 473.06 67.375C473.06 67.5469 472.995 67.694 472.865 67.8164C472.737 67.9388 472.584 68 472.404 68ZM475.107 75.0625C474.915 75.0625 474.749 74.9935 474.611 74.8555C474.473 74.7174 474.404 74.5521 474.404 74.3594C474.404 74.1667 474.473 74.0013 474.611 73.8633C474.749 73.7253 474.915 73.6562 475.107 73.6562C475.3 73.6562 475.465 73.7253 475.603 73.8633C475.741 74.0013 475.81 74.1667 475.81 74.3594C475.81 74.487 475.778 74.6042 475.713 74.7109C475.65 74.8177 475.566 74.9036 475.459 74.9687C475.355 75.0313 475.238 75.0625 475.107 75.0625ZM478.027 75.0625C477.834 75.0625 477.669 74.9935 477.531 74.8555C477.392 74.7174 477.323 74.5521 477.323 74.3594C477.323 74.1667 477.392 74.0013 477.531 73.8633C477.669 73.7253 477.834 73.6562 478.027 73.6562C478.219 73.6562 478.385 73.7253 478.523 73.8633C478.661 74.0013 478.73 74.1667 478.73 74.3594C478.73 74.487 478.697 74.6042 478.632 74.7109C478.57 74.8177 478.485 74.9036 478.378 74.9687C478.274 75.0313 478.157 75.0625 478.027 75.0625ZM480.946 75.0625C480.753 75.0625 480.588 74.9935 480.45 74.8555C480.312 74.7174 480.243 74.5521 480.243 74.3594C480.243 74.1667 480.312 74.0013 480.45 73.8633C480.588 73.7253 480.753 73.6562 480.946 73.6562C481.139 73.6562 481.304 73.7253 481.442 73.8633C481.58 74.0013 481.649 74.1667 481.649 74.3594C481.649 74.487 481.616 74.6042 481.551 74.7109C481.489 74.8177 481.404 74.9036 481.297 74.9687C481.193 75.0313 481.076 75.0625 480.946 75.0625Z" fill="#97979B"/>
+<circle cx="501.125" cy="68.1245" r="0.625" fill="#E4E4E7"/>
+<rect x="503" y="67.4995" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
+<ellipse cx="501.125" cy="71.125" rx="0.625" ry="0.625" fill="#E4E4E7"/>
+<rect x="503" y="70.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
+<ellipse cx="501.125" cy="74.125" rx="0.625" ry="0.625" fill="#E4E4E7"/>
+<rect x="503" y="73.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
+<path opacity="0.5" d="M519.438 69.5C519.352 69.237 519.238 69.0013 519.098 68.793C518.96 68.582 518.794 68.4023 518.602 68.2539C518.411 68.1055 518.195 67.9922 517.953 67.9141C517.711 67.8359 517.445 67.7969 517.156 67.7969C516.682 67.7969 516.251 67.9193 515.863 68.1641C515.475 68.4089 515.167 68.7695 514.938 69.2461C514.708 69.7227 514.594 70.3073 514.594 71C514.594 71.6927 514.71 72.2773 514.941 72.7539C515.173 73.2305 515.487 73.5911 515.883 73.8359C516.279 74.0807 516.724 74.2031 517.219 74.2031C517.677 74.2031 518.081 74.1055 518.43 73.9102C518.781 73.7122 519.055 73.4336 519.25 73.0742C519.448 72.7122 519.547 72.2865 519.547 71.7969L519.844 71.8594H517.438V71H520.484V71.8594C520.484 72.5182 520.344 73.0911 520.063 73.5781C519.784 74.0651 519.398 74.4427 518.906 74.7109C518.417 74.9766 517.854 75.1094 517.219 75.1094C516.51 75.1094 515.888 74.9427 515.352 74.6094C514.818 74.276 514.401 73.8021 514.102 73.1875C513.805 72.5729 513.656 71.8437 513.656 71C513.656 70.3672 513.741 69.7982 513.91 69.293C514.082 68.7852 514.324 68.3529 514.637 67.9961C514.949 67.6393 515.319 67.3659 515.746 67.1758C516.173 66.9857 516.643 66.8906 517.156 66.8906C517.578 66.8906 517.971 66.9544 518.336 67.082C518.703 67.207 519.03 67.3854 519.316 67.6172C519.605 67.8464 519.846 68.1211 520.039 68.4414C520.232 68.7591 520.365 69.112 520.438 69.5H519.438ZM524.424 75.125C523.846 75.125 523.347 74.9974 522.928 74.7422C522.511 74.4844 522.19 74.125 521.963 73.6641C521.739 73.2005 521.627 72.6615 521.627 72.0469C521.627 71.4323 521.739 70.8906 521.963 70.4219C522.19 69.9505 522.505 69.5833 522.909 69.3203C523.315 69.0547 523.789 68.9219 524.33 68.9219C524.643 68.9219 524.952 68.974 525.256 69.0781C525.561 69.1823 525.838 69.3516 526.088 69.5859C526.338 69.8177 526.537 70.125 526.686 70.5078C526.834 70.8906 526.909 71.362 526.909 71.9219V72.3125H522.284V71.5156H525.971C525.971 71.1771 525.903 70.875 525.768 70.6094C525.635 70.3437 525.445 70.1341 525.198 69.9805C524.953 69.8268 524.664 69.75 524.33 69.75C523.963 69.75 523.646 69.8411 523.377 70.0234C523.112 70.2031 522.907 70.4375 522.764 70.7266C522.621 71.0156 522.549 71.3255 522.549 71.6562V72.1875C522.549 72.6406 522.627 73.0247 522.784 73.3398C522.942 73.6523 523.162 73.8906 523.444 74.0547C523.725 74.2161 524.052 74.2969 524.424 74.2969C524.666 74.2969 524.885 74.263 525.08 74.1953C525.278 74.125 525.449 74.0208 525.592 73.8828C525.735 73.7422 525.846 73.5677 525.924 73.3594L526.815 73.6094C526.721 73.9115 526.564 74.1771 526.342 74.4062C526.121 74.6328 525.847 74.8099 525.522 74.9375C525.196 75.0625 524.83 75.125 524.424 75.125ZM529.123 71.3906V75H528.201V69H529.092V69.9375H529.17C529.31 69.6328 529.524 69.388 529.81 69.2031C530.097 69.0156 530.467 68.9219 530.92 68.9219C531.326 68.9219 531.681 69.0052 531.986 69.1719C532.291 69.3359 532.528 69.5859 532.697 69.9219C532.866 70.2552 532.951 70.6771 532.951 71.1875V75H532.029V71.25C532.029 70.7786 531.907 70.4115 531.662 70.1484C531.417 69.8828 531.081 69.75 530.654 69.75C530.36 69.75 530.097 69.8138 529.865 69.9414C529.636 70.069 529.455 70.2552 529.322 70.5C529.189 70.7448 529.123 71.0417 529.123 71.3906ZM536.791 75.125C536.291 75.125 535.85 74.9987 535.467 74.7461C535.084 74.4909 534.785 74.1315 534.568 73.668C534.352 73.2018 534.244 72.651 534.244 72.0156C534.244 71.3854 534.352 70.8385 534.568 70.375C534.785 69.9115 535.085 69.5534 535.471 69.3008C535.856 69.0482 536.302 68.9219 536.807 68.9219C537.197 68.9219 537.506 68.987 537.733 69.1172C537.962 69.2448 538.136 69.3906 538.256 69.5547C538.378 69.7161 538.473 69.849 538.541 69.9531H538.619V67H539.541V75H538.65V74.0781H538.541C538.473 74.1875 538.377 74.3255 538.252 74.4922C538.127 74.6562 537.949 74.8034 537.717 74.9336C537.485 75.0612 537.177 75.125 536.791 75.125ZM536.916 74.2969C537.286 74.2969 537.598 74.2005 537.854 74.0078C538.109 73.8125 538.303 73.543 538.436 73.1992C538.568 72.8529 538.635 72.4531 538.635 72C538.635 71.5521 538.57 71.1602 538.44 70.8242C538.309 70.4857 538.117 70.2227 537.861 70.0352C537.606 69.8451 537.291 69.75 536.916 69.75C536.525 69.75 536.2 69.8503 535.94 70.0508C535.682 70.2487 535.488 70.5182 535.358 70.8594C535.23 71.1979 535.166 71.5781 535.166 72C535.166 72.4271 535.231 72.8151 535.361 73.1641C535.494 73.5104 535.69 73.7865 535.947 73.9922C536.208 74.1953 536.531 74.2969 536.916 74.2969ZM543.763 75.125C543.185 75.125 542.686 74.9974 542.267 74.7422C541.85 74.4844 541.529 74.125 541.302 73.6641C541.078 73.2005 540.966 72.6615 540.966 72.0469C540.966 71.4323 541.078 70.8906 541.302 70.4219C541.529 69.9505 541.844 69.5833 542.247 69.3203C542.654 69.0547 543.128 68.9219 543.669 68.9219C543.982 68.9219 544.29 68.974 544.595 69.0781C544.9 69.1823 545.177 69.3516 545.427 69.5859C545.677 69.8177 545.876 70.125 546.025 70.5078C546.173 70.8906 546.247 71.362 546.247 71.9219V72.3125H541.622V71.5156H545.31C545.31 71.1771 545.242 70.875 545.107 70.6094C544.974 70.3437 544.784 70.1341 544.537 69.9805C544.292 69.8268 544.003 69.75 543.669 69.75C543.302 69.75 542.984 69.8411 542.716 70.0234C542.451 70.2031 542.246 70.4375 542.103 70.7266C541.96 71.0156 541.888 71.3255 541.888 71.6562V72.1875C541.888 72.6406 541.966 73.0247 542.122 73.3398C542.281 73.6523 542.501 73.8906 542.783 74.0547C543.064 74.2161 543.391 74.2969 543.763 74.2969C544.005 74.2969 544.224 74.263 544.419 74.1953C544.617 74.125 544.788 74.0208 544.931 73.8828C545.074 73.7422 545.185 73.5677 545.263 73.3594L546.154 73.6094C546.06 73.9115 545.902 74.1771 545.681 74.4062C545.46 74.6328 545.186 74.8099 544.861 74.9375C544.535 75.0625 544.169 75.125 543.763 75.125ZM547.54 75V69H548.43V69.9062H548.493C548.602 69.6094 548.8 69.3685 549.087 69.1836C549.373 68.9987 549.696 68.9062 550.055 68.9062C550.123 68.9062 550.208 68.9076 550.309 68.9102C550.411 68.9128 550.488 68.9167 550.54 68.9219V69.8594C550.509 69.8516 550.437 69.8398 550.325 69.8242C550.216 69.806 550.1 69.7969 549.977 69.7969C549.686 69.7969 549.425 69.8581 549.196 69.9805C548.97 70.1003 548.79 70.2669 548.657 70.4805C548.527 70.6914 548.462 70.9323 548.462 71.2031V75H547.54Z" fill="#97979B"/>
+<path d="M584.201 68.5305L588.999 70.9295L593.797 68.5305C593.761 67.9003 593.238 67.4004 592.599 67.4004H585.399C584.76 67.4004 584.237 67.9003 584.201 68.5305Z" fill="#E4E4E7"/>
+<path d="M593.799 69.8711L588.999 72.2711L584.199 69.8712V73.4004C584.199 74.0631 584.736 74.6004 585.399 74.6004H592.599C593.262 74.6004 593.799 74.0631 593.799 73.4004V69.8711Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M600.359 75.125C599.781 75.125 599.283 74.9974 598.863 74.7422C598.447 74.4844 598.125 74.125 597.898 73.6641C597.674 73.2005 597.563 72.6615 597.563 72.0469C597.563 71.4323 597.674 70.8906 597.898 70.4219C598.125 69.9505 598.44 69.5833 598.844 69.3203C599.25 69.0547 599.724 68.9219 600.266 68.9219C600.578 68.9219 600.887 68.974 601.191 69.0781C601.496 69.1823 601.773 69.3516 602.023 69.5859C602.273 69.8177 602.473 70.125 602.621 70.5078C602.77 70.8906 602.844 71.362 602.844 71.9219V72.3125H598.219V71.5156H601.906C601.906 71.1771 601.839 70.875 601.703 70.6094C601.57 70.3437 601.38 70.1341 601.133 69.9805C600.888 69.8268 600.599 69.75 600.266 69.75C599.898 69.75 599.581 69.8411 599.313 70.0234C599.047 70.2031 598.842 70.4375 598.699 70.7266C598.556 71.0156 598.484 71.3255 598.484 71.6562V72.1875C598.484 72.6406 598.563 73.0247 598.719 73.3398C598.878 73.6523 599.098 73.8906 599.379 74.0547C599.66 74.2161 599.987 74.2969 600.359 74.2969C600.602 74.2969 600.82 74.263 601.016 74.1953C601.214 74.125 601.384 74.0208 601.527 73.8828C601.671 73.7422 601.781 73.5677 601.859 73.3594L602.75 73.6094C602.656 73.9115 602.499 74.1771 602.277 74.4062C602.056 74.6328 601.783 74.8099 601.457 74.9375C601.132 75.0625 600.766 75.125 600.359 75.125ZM604.136 75V69H605.027V69.9375H605.105C605.23 69.6172 605.432 69.3685 605.71 69.1914C605.989 69.0117 606.324 68.9219 606.714 68.9219C607.11 68.9219 607.439 69.0117 607.703 69.1914C607.968 69.3685 608.175 69.6172 608.324 69.9375H608.386C608.54 69.6276 608.77 69.3815 609.078 69.1992C609.385 69.0143 609.753 68.9219 610.183 68.9219C610.719 68.9219 611.158 69.0898 611.499 69.4258C611.841 69.7591 612.011 70.2786 612.011 70.9844V75H611.089V70.9844C611.089 70.5417 610.968 70.2253 610.726 70.0352C610.484 69.8451 610.199 69.75 609.87 69.75C609.449 69.75 609.122 69.8776 608.89 70.1328C608.658 70.3854 608.542 70.7057 608.542 71.0937V75H607.605V70.8906C607.605 70.5495 607.494 70.2747 607.273 70.0664C607.051 69.8555 606.766 69.75 606.417 69.75C606.178 69.75 605.954 69.8138 605.745 69.9414C605.54 70.069 605.373 70.2461 605.245 70.4727C605.12 70.6966 605.058 70.9557 605.058 71.25V75H604.136ZM615.352 75.1406C614.972 75.1406 614.627 75.069 614.317 74.9258C614.007 74.7799 613.761 74.5703 613.579 74.2969C613.397 74.0208 613.305 73.6875 613.305 73.2969C613.305 72.9531 613.373 72.6745 613.509 72.4609C613.644 72.2448 613.825 72.0755 614.051 71.9531C614.278 71.8307 614.528 71.7396 614.801 71.6797C615.078 71.6172 615.355 71.5677 615.634 71.5313C615.998 71.4844 616.294 71.4492 616.52 71.4258C616.749 71.3997 616.916 71.3568 617.02 71.2969C617.127 71.237 617.18 71.1328 617.18 70.9844V70.9531C617.18 70.5677 617.075 70.2682 616.864 70.0547C616.656 69.8411 616.339 69.7344 615.915 69.7344C615.475 69.7344 615.13 69.8307 614.88 70.0234C614.63 70.2161 614.454 70.4219 614.352 70.6406L613.477 70.3281C613.634 69.9635 613.842 69.6797 614.102 69.4766C614.365 69.2708 614.652 69.1276 614.962 69.0469C615.274 68.9635 615.581 68.9219 615.884 68.9219C616.076 68.9219 616.298 68.9453 616.548 68.9922C616.8 69.0365 617.044 69.1289 617.278 69.2695C617.515 69.4102 617.712 69.6224 617.868 69.9062C618.024 70.1901 618.102 70.5703 618.102 71.0469V75H617.18V74.1875H617.134C617.071 74.3177 616.967 74.457 616.821 74.6055C616.675 74.7539 616.481 74.8802 616.239 74.9844C615.997 75.0885 615.701 75.1406 615.352 75.1406ZM615.493 74.3125C615.857 74.3125 616.165 74.2409 616.415 74.0977C616.667 73.9544 616.857 73.7695 616.985 73.543C617.115 73.3164 617.18 73.0781 617.18 72.8281V71.9844C617.141 72.0312 617.055 72.0742 616.923 72.1133C616.792 72.1497 616.641 72.1823 616.469 72.2109C616.3 72.237 616.135 72.2604 615.973 72.2812C615.815 72.2995 615.686 72.3151 615.587 72.3281C615.347 72.3594 615.123 72.4102 614.915 72.4805C614.709 72.5482 614.542 72.651 614.415 72.7891C614.29 72.9245 614.227 73.1094 614.227 73.3437C614.227 73.6641 614.346 73.9062 614.583 74.0703C614.822 74.2318 615.126 74.3125 615.493 74.3125ZM619.675 75V69H620.597V75H619.675ZM620.144 68C619.964 68 619.809 67.9388 619.679 67.8164C619.551 67.694 619.487 67.5469 619.487 67.375C619.487 67.2031 619.551 67.056 619.679 66.9336C619.809 66.8112 619.964 66.75 620.144 66.75C620.323 66.75 620.477 66.8112 620.605 66.9336C620.735 67.056 620.8 67.2031 620.8 67.375C620.8 67.5469 620.735 67.694 620.605 67.8164C620.477 67.9388 620.323 68 620.144 68ZM623.097 67V75H622.175V67H623.097ZM625.129 75H624.113L627.051 67H628.051L630.988 75H629.972L627.582 68.2656H627.519L625.129 75ZM625.504 71.875H629.597V72.7344H625.504V71.875ZM634.265 75.125C633.765 75.125 633.323 74.9987 632.941 74.7461C632.558 74.4909 632.258 74.1315 632.042 73.668C631.826 73.2018 631.718 72.651 631.718 72.0156C631.718 71.3854 631.826 70.8385 632.042 70.375C632.258 69.9115 632.559 69.5534 632.944 69.3008C633.33 69.0482 633.775 68.9219 634.28 68.9219C634.671 68.9219 634.98 68.987 635.206 69.1172C635.435 69.2448 635.61 69.3906 635.73 69.5547C635.852 69.7161 635.947 69.849 636.015 69.9531H636.093V67H637.015V75H636.124V74.0781H636.015C635.947 74.1875 635.851 74.3255 635.726 74.4922C635.601 74.6562 635.422 74.8034 635.191 74.9336C634.959 75.0612 634.65 75.125 634.265 75.125ZM634.39 74.2969C634.76 74.2969 635.072 74.2005 635.327 74.0078C635.583 73.8125 635.777 73.543 635.909 73.1992C636.042 72.8529 636.109 72.4531 636.109 72C636.109 71.5521 636.043 71.1602 635.913 70.8242C635.783 70.4857 635.59 70.2227 635.335 70.0352C635.08 69.8451 634.765 69.75 634.39 69.75C633.999 69.75 633.674 69.8503 633.413 70.0508C633.155 70.2487 632.961 70.5182 632.831 70.8594C632.704 71.1979 632.64 71.5781 632.64 72C632.64 72.4271 632.705 72.8151 632.835 73.1641C632.968 73.5104 633.163 73.7865 633.421 73.9922C633.681 74.1953 634.004 74.2969 634.39 74.2969ZM639.393 75.0625C639.2 75.0625 639.035 74.9935 638.897 74.8555C638.759 74.7174 638.69 74.5521 638.69 74.3594C638.69 74.1667 638.759 74.0013 638.897 73.8633C639.035 73.7253 639.2 73.6562 639.393 73.6562C639.586 73.6562 639.751 73.7253 639.889 73.8633C640.027 74.0013 640.096 74.1667 640.096 74.3594C640.096 74.487 640.064 74.6042 639.999 74.7109C639.936 74.8177 639.851 74.9036 639.745 74.9687C639.64 75.0313 639.523 75.0625 639.393 75.0625ZM642.312 75.0625C642.12 75.0625 641.954 74.9935 641.816 74.8555C641.678 74.7174 641.609 74.5521 641.609 74.3594C641.609 74.1667 641.678 74.0013 641.816 73.8633C641.954 73.7253 642.12 73.6562 642.312 73.6562C642.505 73.6562 642.67 73.7253 642.808 73.8633C642.946 74.0013 643.016 74.1667 643.016 74.3594C643.016 74.487 642.983 74.6042 642.918 74.7109C642.855 74.8177 642.771 74.9036 642.664 74.9687C642.56 75.0313 642.443 75.0625 642.312 75.0625ZM645.232 75.0625C645.039 75.0625 644.874 74.9935 644.736 74.8555C644.598 74.7174 644.529 74.5521 644.529 74.3594C644.529 74.1667 644.598 74.0013 644.736 73.8633C644.874 73.7253 645.039 73.6562 645.232 73.6562C645.424 73.6562 645.59 73.7253 645.728 73.8633C645.866 74.0013 645.935 74.1667 645.935 74.3594C645.935 74.487 645.902 74.6042 645.837 74.7109C645.775 74.8177 645.69 74.9036 645.583 74.9687C645.479 75.0313 645.362 75.0625 645.232 75.0625Z" fill="#97979B"/>
+<rect y="132" width="1080" height="52" fill="url(#paint3_linear_2535_66839)"/>
+</g>
+<defs>
+<clipPath id="bgblur_1_2535_66839_clip_path" transform="translate(-226 -12)"><rect x="230" y="16" width="555" height="186" rx="12"/>
+</clipPath><filter id="filter1_f_2535_66839" x="181.312" y="-14.708" width="124.59" height="146.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2535_66839"/>
+</filter>
+<clipPath id="bgblur_2_2535_66839_clip_path" transform="translate(-233.2 -19.2)"><rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35"/>
+</clipPath><radialGradient id="paint0_radial_2535_66839" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.096 48.3533) rotate(121.198) scale(55.123 15.9923)">
+<stop offset="1" stop-color="#F02E65"/>
+</radialGradient>
+<linearGradient id="paint1_linear_2535_66839" x1="110.649" y1="77.423" x2="195.926" y2="184.679" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="0.45" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint2_radial_2535_66839" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(265.177 71.5771) rotate(31.7066) scale(256.703 334.987)">
+<stop stop-color="#D9D9D9" stop-opacity="0.4"/>
+<stop offset="1" stop-color="#737373" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint3_linear_2535_66839" x1="516.264" y1="132" x2="516.601" y2="175.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_2535_66839">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 2ccfc313240c02e2b4ac78de9fe8efc1b9c0602a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 13:02:45 +0530
Subject: [PATCH 028/118] update: sync ids to table/collection names, add dark
 mode empty state image.

---
 src/lib/components/customId.svelte            |  46 ++++---
 src/lib/elements/forms/inputId.svelte         |   1 +
 src/lib/elements/forms/inputProjectId.svelte  |   1 +
 src/lib/layout/container.svelte               |  27 ++++-
 src/lib/layout/cover.svelte                   |   2 +-
 .../database-[database]/+page.svelte          |  47 ++++----
 .../createCollection.svelte                   |  71 +++++++----
 static/images/empty-database-dark.svg         | 112 ++++++++++++++++++
 8 files changed, 237 insertions(+), 70 deletions(-)
 create mode 100644 static/images/empty-database-dark.svg

diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 77c32899fa..37259a6207 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -1,26 +1,38 @@
 <script lang="ts">
-    import { Click, trackEvent } from '$lib/actions/analytics';
     import { InputId } from '$lib/elements/forms';
     import { InputProjectId } from '$lib/elements/forms';
     import Button from '$lib/elements/forms/button.svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { Click, trackEvent } from '$lib/actions/analytics';
     import { Card, Divider, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
-    export let show = false;
-    export let name: string;
-    export let id: string;
-    export let autofocus = true;
-    export let isProject = false;
-    $: if (!show) {
-        id = null;
-    }
 
-    $: if (!id?.length) {
-        id = null;
-    }
+    let {
+        show = $bindable(false),
+        name,
+        id = $bindable(null),
+        autofocus = true,
+        isProject = false
+    }: {
+        show: boolean;
+        name: string;
+        id: string;
+        autofocus?: boolean;
+        isProject?: boolean;
+    } = $props();
+
+    $effect(() => {
+        if (!show) {
+            id = null;
+        }
+
+        if (!id?.length) {
+            id = null;
+        }
 
-    $: if (show) {
-        trackEvent(Click.ShowCustomIdClick);
-    }
+        if (show) {
+            trackEvent(Click.ShowCustomIdClick);
+        }
+    });
 </script>
 
 {#if show}
@@ -45,9 +57,9 @@
                 <Divider />
             </span>
             {#if isProject}
-                <InputProjectId bind:value={id} {autofocus} />
+                <InputProjectId on:input bind:value={id} {autofocus} />
             {:else}
-                <InputId required bind:value={id} {autofocus} />
+                <InputId required on:input bind:value={id} {autofocus} />
             {/if}
         </Layout.Stack>
     </Card.Base>
diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index 5c8511b285..84d9263d6e 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -31,6 +31,7 @@
     maxlength={36}
     autocomplete="off"
     bind:value
+    on:input
     on:invalid={handleInvalid}
     state={error ? 'error' : 'default'}
     helper="Allowed characters: alphanumeric, non-leading hyphen, underscore, period" />
diff --git a/src/lib/elements/forms/inputProjectId.svelte b/src/lib/elements/forms/inputProjectId.svelte
index 0fa91b8952..2f0552e2fa 100644
--- a/src/lib/elements/forms/inputProjectId.svelte
+++ b/src/lib/elements/forms/inputProjectId.svelte
@@ -30,6 +30,7 @@
     maxlength={36}
     autocomplete="off"
     bind:value
+    on:input
     on:invalid={handleInvalid}
     state={error ? 'error' : 'default'}
     helper="Allowed characters: lowercase alphanumeric and non-leading hyphen" />
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 1e05c28eb7..88b36e041b 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -1,8 +1,12 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
 
-    export let overlapCover = false;
+    // TODO: needs better props
+
     export let expanded = false;
+    export let slotSpacing = false;
+    export let overlapCover = false;
+    export let paddingInlineEnd = true;
     export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
 
     $: style = size
@@ -11,7 +15,12 @@
 </script>
 
 <div style:container-type="inline-size" class:overlap-cover={overlapCover} {...$$restProps}>
-    <div class="console-container" class:expanded {style}>
+    <div
+        class="console-container"
+        class:slotSpacing
+        class:paddingInlineEnd={!paddingInlineEnd}
+        class:expanded
+        {style}>
         <Layout.Stack gap="l">
             <slot />
         </Layout.Stack>
@@ -30,6 +39,20 @@
             margin-inline: 2.75rem;
             padding-inline-end: 0 !important;
             margin-block: var(--base-8) !important;
+
+            &:first-child {
+                margin-inline: 2.75rem;
+            }
+
+            &.slotSpacing {
+                padding-block-start: var(--base-32) !important;
+            }
+        }
+
+        &.paddingInlineEnd {
+            @media (min-width: 1024px) {
+                padding-inline-end: 2.75rem !important;
+            }
         }
 
         @media (min-width: 360px) {
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 74b7d8051a..03ee8ac550 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -3,7 +3,7 @@
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
     export let blocksize = '152px';
-    export let expanded: boolean = true;
+    export let expanded: boolean = false;
 
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 55c36585ce..9dd9baecb0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -1,33 +1,20 @@
 <script lang="ts">
     import { PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container, ResponsiveContainerHeader } from '$lib/layout';
-    import { columns, showCreate } from './store';
+    import { Container } from '$lib/layout';
+    import { showCreate } from './store';
     import Table from './table.svelte';
     import Grid from './grid.svelte';
     import type { PageData } from './$types';
-    import { canWriteCollections } from '$lib/stores/roles';
-    import { Card, Empty, Icon } from '@appwrite.io/pink-svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { Card, Empty } from '@appwrite.io/pink-svelte';
     import { base } from '$app/paths';
+    import { app } from '$lib/stores/app';
+    import { canWriteCollections } from '$lib/stores/roles';
 
     export let data: PageData;
 </script>
 
-<Container>
-    <ResponsiveContainerHeader
-        bind:view={data.view}
-        {columns}
-        hasSearch
-        searchPlaceholder="Search by name or ID">
-        {#if $canWriteCollections}
-            <Button on:click={() => ($showCreate = true)} event="create_collection">
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create collection
-            </Button>
-        {/if}
-    </ResponsiveContainerHeader>
-
+<Container expanded slotSpacing paddingInlineEnd={false}>
     {#if data.collections.total}
         {#if data.view === 'grid'}
             <Grid {data} bind:showCreate={$showCreate} />
@@ -42,7 +29,11 @@
             total={data.collections.total} />
     {:else}
         <Card.Base padding="none">
-            <Empty title="Create your first table" src={`${base}/images/empty-database-light.svg`}>
+            <Empty
+                title="Create your first table"
+                src={$app.themeInUse === 'dark'
+                    ? `${base}/images/empty-database-dark.svg`
+                    : `${base}/images/empty-database-light.svg`}>
                 <span slot="description">
                     Create and manage structured data effortlessly, with the flexibility and control
                     your app needs.
@@ -54,13 +45,15 @@
                         event="empty_documentation"
                         ariaLabel={`create collection`}>Documentation</Button>
 
-                    <Button
-                        secondary
-                        on:click={() => {
-                            $showCreate = true;
-                        }}>
-                        Create collection
-                    </Button>
+                    {#if $canWriteCollections}
+                        <Button
+                            secondary
+                            on:click={() => {
+                                $showCreate = true;
+                            }}>
+                            Create collection
+                        </Button>
+                    {/if}
                 </span>
             </Empty>
         </Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
index 2e20d66cd7..58571ebcb4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
@@ -7,19 +7,21 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { ID } from '@appwrite.io/console';
-    import { IconPencil } from '@appwrite.io/pink-icons-svelte';
-    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { createEventDispatcher } from 'svelte';
 
-    export let showCreate = false;
+    let {
+        showCreate = $bindable(false)
+    }: {
+        showCreate: boolean;
+    } = $props();
 
     const databaseId = page.params.database;
     const dispatch = createEventDispatcher();
 
-    let name = '';
-    let id: string = null;
-    let showCustomId = true;
-    let error: string;
+    let name = $state('');
+    let id: string = $state(null);
+    let touchedId = $state(false);
+    let error: string = $state(null);
 
     const create = async () => {
         error = null;
@@ -27,7 +29,9 @@
             const collection = await sdk
                 .forProject(page.params.region, page.params.project)
                 .databases.createCollection(databaseId, id ? id : ID.unique(), name);
+
             showCreate = false;
+
             dispatch('created', collection);
             addNotification({
                 type: 'success',
@@ -43,12 +47,29 @@
         }
     };
 
-    $: if (!showCreate) {
-        error = null;
-        showCustomId = false;
-        id = null;
-        name = '';
+    function toIdFormat(str: string): string {
+        return str
+            .toLowerCase()
+            .replace(/[^a-z0-9\-_. ]+/g, '')
+            .replace(/ /g, '_')
+            .replace(/^-+/, '')
+            .replace(/\.+$/, '')
+            .replace(/_{2,}/g, '_')
+            .slice(0, 36); // max length
     }
+
+    $effect(() => {
+        if (!touchedId && name) {
+            id = toIdFormat(name);
+        }
+
+        if (!showCreate) {
+            name = '';
+            id = null;
+            error = null;
+            touchedId = false;
+        }
+    });
 </script>
 
 <Modal title="Create collection" size="m" bind:show={showCreate} onSubmit={create} bind:error>
@@ -58,18 +79,22 @@
         placeholder="Enter collection name"
         bind:value={name}
         autofocus
-        required />
+        required
+        on:input={() => {
+            if (!touchedId) id = toIdFormat(name);
+        }} />
 
-    {#if !showCustomId}
-        <div>
-            <Tag
-                size="s"
-                on:click={() => {
-                    showCustomId = true;
-                }}><Icon icon={IconPencil} /> Collection ID</Tag>
-        </div>
-    {/if}
-    <CustomId autofocus bind:show={showCustomId} name="Collection" bind:id />
+    <CustomId
+        show
+        bind:id
+        autofocus={false}
+        name="Collection"
+        on:input={() => {
+            if (!touchedId) {
+                touchedId = true;
+                console.log(touchedId);
+            }
+        }} />
 
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (showCreate = false)}>Cancel</Button>
diff --git a/static/images/empty-database-dark.svg b/static/images/empty-database-dark.svg
new file mode 100644
index 0000000000..94762a8656
--- /dev/null
+++ b/static/images/empty-database-dark.svg
@@ -0,0 +1,112 @@
+<svg width="1015" height="184" viewBox="0 0 1015 184" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2782_11310)">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="#1D1D21"/>
+<foreignObject x="226" y="12" width="563" height="194"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_2782_11310_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="230" y="16" width="555" height="186" rx="12" fill="white" fill-opacity="0.04"/>
+<rect x="230.5" y="16.5" width="554" height="185" rx="11.5" stroke="white" stroke-opacity="0.04"/>
+</g>
+<g filter="url(#filter1_f_2782_11310)">
+<path d="M266.195 52.6414C250.426 78.6823 230.434 97.8723 221.543 95.5035C212.652 93.1347 218.228 70.1041 233.998 44.0632C249.767 18.0223 225.106 20.266 233.997 22.6348C242.888 25.0036 281.965 26.6004 266.195 52.6414Z" fill="url(#paint0_radial_2782_11310)" fill-opacity="0.2"/>
+<path d="M244.739 25.1687C249.392 26.0556 254.563 27.2808 258.959 29.2297C263.355 31.1793 266.926 33.8321 268.457 37.5488C269.981 41.2507 269.512 46.0849 265.632 52.4917C257.769 65.4771 248.864 76.7349 240.839 84.4382C236.823 88.2926 233.055 91.2319 229.771 93.0561C226.47 94.89 223.797 95.5252 221.845 95.0051C219.893 94.4851 218.625 92.7997 218.154 89.961C217.685 87.1372 218.029 83.2855 219.149 78.6595C221.388 69.4146 226.696 57.1987 234.56 44.2133C241.039 33.5137 240.826 27.4054 238.725 24.1125C240.526 24.4173 242.572 24.7555 244.739 25.1687ZM233.935 22.0031C234.099 22.0501 234.269 22.1055 234.442 22.1721C234.394 22.1597 234.345 22.1491 234.298 22.1367C234.003 22.058 233.752 21.9796 233.539 21.9052C233.664 21.9313 233.796 21.9633 233.935 22.0031Z" stroke="#2D2D31" stroke-width="1.16467"/>
+<path d="M244.739 25.1687C249.392 26.0556 254.563 27.2808 258.959 29.2297C263.355 31.1793 266.926 33.8321 268.457 37.5488C269.981 41.2507 269.512 46.0849 265.632 52.4917C257.769 65.4771 248.864 76.7349 240.839 84.4382C236.823 88.2926 233.055 91.2319 229.771 93.0561C226.47 94.89 223.797 95.5252 221.845 95.0051C219.893 94.4851 218.625 92.7997 218.154 89.961C217.685 87.1372 218.029 83.2855 219.149 78.6595C221.388 69.4146 226.696 57.1987 234.56 44.2133C241.039 33.5137 240.826 27.4054 238.725 24.1125C240.526 24.4173 242.572 24.7555 244.739 25.1687ZM233.935 22.0031C234.099 22.0501 234.269 22.1055 234.442 22.1721C234.394 22.1597 234.345 22.1491 234.298 22.1367C234.003 22.058 233.752 21.9796 233.539 21.9052C233.664 21.9313 233.796 21.9633 233.935 22.0031Z" stroke="url(#paint1_linear_2782_11310)" stroke-opacity="0.4" stroke-width="1.16467"/>
+</g>
+<foreignObject x="233.2" y="19.2" width="548.6" height="179.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.9px);clip-path:url(#bgblur_2_2782_11310_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="1.8">
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" fill="#19191C"/>
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="#2D2D31" stroke-width="0.9"/>
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="url(#paint2_linear_2782_11310)" stroke-opacity="0.4" stroke-width="0.9"/>
+</g>
+<mask id="path-7-outside-1_2782_11310" maskUnits="userSpaceOnUse" x="245.57" y="32" width="43" height="12" fill="black">
+<rect fill="white" x="245.57" y="32" width="43" height="12"/>
+<path d="M254.886 34.8325C255.732 35.7325 256.155 36.88 256.155 38.275C256.155 39.67 255.732 40.822 254.886 41.731C254.049 42.631 252.969 43.081 251.646 43.081C250.323 43.081 249.239 42.631 248.393 41.731C247.556 40.822 247.137 39.67 247.137 38.275C247.137 36.88 247.556 35.7325 248.393 34.8325C249.239 33.9235 250.323 33.469 251.646 33.469C252.969 33.469 254.049 33.9235 254.886 34.8325ZM249.257 35.602C248.645 36.295 248.339 37.186 248.339 38.275C248.339 39.364 248.645 40.2595 249.257 40.9615C249.869 41.6545 250.665 42.001 251.646 42.001C252.627 42.001 253.424 41.6545 254.036 40.9615C254.648 40.2595 254.954 39.364 254.954 38.275C254.954 37.186 254.648 36.295 254.036 35.602C253.424 34.9 252.627 34.549 251.646 34.549C250.665 34.549 249.869 34.9 249.257 35.602ZM260.664 36.115H260.974V37.195H260.421C259.764 37.195 259.291 37.4155 259.003 37.8565C258.724 38.2975 258.585 38.842 258.585 39.49V43H257.478V36.115H258.436L258.585 37.1545C259.008 36.4615 259.701 36.115 260.664 36.115ZM266.965 37.168V33.55H268.072V43H267.114L266.965 41.893C266.389 42.685 265.602 43.081 264.603 43.081C263.631 43.081 262.834 42.7705 262.213 42.1495C261.601 41.5195 261.295 40.6555 261.295 39.5575C261.295 38.5135 261.606 37.6675 262.227 37.0195C262.848 36.3625 263.64 36.034 264.603 36.034C265.701 36.034 266.488 36.412 266.965 37.168ZM264.711 42.0955C265.386 42.0955 265.93 41.8615 266.344 41.3935C266.767 40.9255 266.979 40.3225 266.979 39.5845C266.979 38.8285 266.767 38.212 266.344 37.735C265.93 37.258 265.386 37.0195 264.711 37.0195C264.027 37.0195 263.473 37.258 263.05 37.735C262.636 38.203 262.429 38.8105 262.429 39.5575C262.429 40.3045 262.636 40.9165 263.05 41.3935C263.473 41.8615 264.027 42.0955 264.711 42.0955ZM272.753 43.081C271.727 43.081 270.899 42.757 270.269 42.109C269.648 41.461 269.337 40.6105 269.337 39.5575C269.337 38.5135 269.639 37.6675 270.242 37.0195C270.845 36.3625 271.632 36.034 272.604 36.034C273.585 36.034 274.368 36.3265 274.953 36.9115C275.538 37.4875 275.844 38.284 275.871 39.301C275.871 39.4 275.862 39.5575 275.844 39.7735H270.498V39.868C270.516 40.534 270.719 41.074 271.106 41.488C271.502 41.893 272.024 42.0955 272.672 42.0955C273.167 42.0955 273.585 41.974 273.927 41.731C274.278 41.479 274.512 41.1325 274.629 40.6915H275.75C275.615 41.3935 275.277 41.9695 274.737 42.4195C274.197 42.8605 273.536 43.081 272.753 43.081ZM270.566 38.8555H274.683C274.629 38.2705 274.418 37.816 274.049 37.492C273.68 37.168 273.203 37.006 272.618 37.006C272.096 37.006 271.637 37.177 271.241 37.519C270.845 37.861 270.62 38.3065 270.566 38.8555ZM280.32 36.115H280.631V37.195H280.077C279.42 37.195 278.948 37.4155 278.66 37.8565C278.381 38.2975 278.241 38.842 278.241 39.49V43H277.134V36.115H278.093L278.241 37.1545C278.664 36.4615 279.357 36.115 280.32 36.115ZM281.162 40.732H282.296C282.314 41.146 282.494 41.4835 282.836 41.7445C283.178 42.0055 283.632 42.136 284.199 42.136C284.685 42.136 285.081 42.0415 285.387 41.8525C285.702 41.6545 285.86 41.398 285.86 41.083C285.86 40.912 285.824 40.768 285.752 40.651C285.689 40.534 285.617 40.444 285.536 40.381C285.464 40.309 285.329 40.2505 285.131 40.2055C284.933 40.1515 284.78 40.12 284.672 40.111C284.564 40.093 284.366 40.066 284.078 40.03C283.637 39.976 283.272 39.9175 282.984 39.8545C282.696 39.7825 282.413 39.679 282.134 39.544C281.855 39.4 281.648 39.211 281.513 38.977C281.378 38.734 281.31 38.4415 281.31 38.0995C281.31 37.4785 281.562 36.979 282.066 36.601C282.579 36.214 283.227 36.025 284.01 36.034C284.82 36.043 285.477 36.2365 285.981 36.6145C286.485 36.9835 286.764 37.5145 286.818 38.2075H285.684C285.639 37.8475 285.464 37.555 285.158 37.33C284.861 37.096 284.478 36.979 284.01 36.979C283.524 36.979 283.133 37.0735 282.836 37.2625C282.548 37.4515 282.404 37.7035 282.404 38.0185C282.404 38.1985 282.44 38.347 282.512 38.464C282.593 38.581 282.723 38.6755 282.903 38.7475C283.092 38.8105 283.263 38.86 283.416 38.896C283.578 38.923 283.817 38.9545 284.132 38.9905C284.492 39.0355 284.793 39.0805 285.036 39.1255C285.279 39.1705 285.531 39.2425 285.792 39.3415C286.053 39.4405 286.26 39.5575 286.413 39.6925C286.575 39.8275 286.706 40.0075 286.805 40.2325C286.904 40.4485 286.953 40.705 286.953 41.002C286.953 41.632 286.688 42.136 286.157 42.514C285.635 42.892 284.982 43.081 284.199 43.081C283.29 43.081 282.557 42.874 281.999 42.46C281.45 42.046 281.171 41.47 281.162 40.732Z"/>
+</mask>
+<path d="M254.886 34.8325C255.732 35.7325 256.155 36.88 256.155 38.275C256.155 39.67 255.732 40.822 254.886 41.731C254.049 42.631 252.969 43.081 251.646 43.081C250.323 43.081 249.239 42.631 248.393 41.731C247.556 40.822 247.137 39.67 247.137 38.275C247.137 36.88 247.556 35.7325 248.393 34.8325C249.239 33.9235 250.323 33.469 251.646 33.469C252.969 33.469 254.049 33.9235 254.886 34.8325ZM249.257 35.602C248.645 36.295 248.339 37.186 248.339 38.275C248.339 39.364 248.645 40.2595 249.257 40.9615C249.869 41.6545 250.665 42.001 251.646 42.001C252.627 42.001 253.424 41.6545 254.036 40.9615C254.648 40.2595 254.954 39.364 254.954 38.275C254.954 37.186 254.648 36.295 254.036 35.602C253.424 34.9 252.627 34.549 251.646 34.549C250.665 34.549 249.869 34.9 249.257 35.602ZM260.664 36.115H260.974V37.195H260.421C259.764 37.195 259.291 37.4155 259.003 37.8565C258.724 38.2975 258.585 38.842 258.585 39.49V43H257.478V36.115H258.436L258.585 37.1545C259.008 36.4615 259.701 36.115 260.664 36.115ZM266.965 37.168V33.55H268.072V43H267.114L266.965 41.893C266.389 42.685 265.602 43.081 264.603 43.081C263.631 43.081 262.834 42.7705 262.213 42.1495C261.601 41.5195 261.295 40.6555 261.295 39.5575C261.295 38.5135 261.606 37.6675 262.227 37.0195C262.848 36.3625 263.64 36.034 264.603 36.034C265.701 36.034 266.488 36.412 266.965 37.168ZM264.711 42.0955C265.386 42.0955 265.93 41.8615 266.344 41.3935C266.767 40.9255 266.979 40.3225 266.979 39.5845C266.979 38.8285 266.767 38.212 266.344 37.735C265.93 37.258 265.386 37.0195 264.711 37.0195C264.027 37.0195 263.473 37.258 263.05 37.735C262.636 38.203 262.429 38.8105 262.429 39.5575C262.429 40.3045 262.636 40.9165 263.05 41.3935C263.473 41.8615 264.027 42.0955 264.711 42.0955ZM272.753 43.081C271.727 43.081 270.899 42.757 270.269 42.109C269.648 41.461 269.337 40.6105 269.337 39.5575C269.337 38.5135 269.639 37.6675 270.242 37.0195C270.845 36.3625 271.632 36.034 272.604 36.034C273.585 36.034 274.368 36.3265 274.953 36.9115C275.538 37.4875 275.844 38.284 275.871 39.301C275.871 39.4 275.862 39.5575 275.844 39.7735H270.498V39.868C270.516 40.534 270.719 41.074 271.106 41.488C271.502 41.893 272.024 42.0955 272.672 42.0955C273.167 42.0955 273.585 41.974 273.927 41.731C274.278 41.479 274.512 41.1325 274.629 40.6915H275.75C275.615 41.3935 275.277 41.9695 274.737 42.4195C274.197 42.8605 273.536 43.081 272.753 43.081ZM270.566 38.8555H274.683C274.629 38.2705 274.418 37.816 274.049 37.492C273.68 37.168 273.203 37.006 272.618 37.006C272.096 37.006 271.637 37.177 271.241 37.519C270.845 37.861 270.62 38.3065 270.566 38.8555ZM280.32 36.115H280.631V37.195H280.077C279.42 37.195 278.948 37.4155 278.66 37.8565C278.381 38.2975 278.241 38.842 278.241 39.49V43H277.134V36.115H278.093L278.241 37.1545C278.664 36.4615 279.357 36.115 280.32 36.115ZM281.162 40.732H282.296C282.314 41.146 282.494 41.4835 282.836 41.7445C283.178 42.0055 283.632 42.136 284.199 42.136C284.685 42.136 285.081 42.0415 285.387 41.8525C285.702 41.6545 285.86 41.398 285.86 41.083C285.86 40.912 285.824 40.768 285.752 40.651C285.689 40.534 285.617 40.444 285.536 40.381C285.464 40.309 285.329 40.2505 285.131 40.2055C284.933 40.1515 284.78 40.12 284.672 40.111C284.564 40.093 284.366 40.066 284.078 40.03C283.637 39.976 283.272 39.9175 282.984 39.8545C282.696 39.7825 282.413 39.679 282.134 39.544C281.855 39.4 281.648 39.211 281.513 38.977C281.378 38.734 281.31 38.4415 281.31 38.0995C281.31 37.4785 281.562 36.979 282.066 36.601C282.579 36.214 283.227 36.025 284.01 36.034C284.82 36.043 285.477 36.2365 285.981 36.6145C286.485 36.9835 286.764 37.5145 286.818 38.2075H285.684C285.639 37.8475 285.464 37.555 285.158 37.33C284.861 37.096 284.478 36.979 284.01 36.979C283.524 36.979 283.133 37.0735 282.836 37.2625C282.548 37.4515 282.404 37.7035 282.404 38.0185C282.404 38.1985 282.44 38.347 282.512 38.464C282.593 38.581 282.723 38.6755 282.903 38.7475C283.092 38.8105 283.263 38.86 283.416 38.896C283.578 38.923 283.817 38.9545 284.132 38.9905C284.492 39.0355 284.793 39.0805 285.036 39.1255C285.279 39.1705 285.531 39.2425 285.792 39.3415C286.053 39.4405 286.26 39.5575 286.413 39.6925C286.575 39.8275 286.706 40.0075 286.805 40.2325C286.904 40.4485 286.953 40.705 286.953 41.002C286.953 41.632 286.688 42.136 286.157 42.514C285.635 42.892 284.982 43.081 284.199 43.081C283.29 43.081 282.557 42.874 281.999 42.46C281.45 42.046 281.171 41.47 281.162 40.732Z" fill="#818186"/>
+<path d="M254.886 34.8325L254.224 35.4422L254.231 35.4489L254.886 34.8325ZM254.886 41.731L254.227 41.1178L254.227 41.1181L254.886 41.731ZM248.393 41.731L247.731 42.3407L247.737 42.3474L248.393 41.731ZM248.393 34.8325L247.734 34.2193L247.734 34.2196L248.393 34.8325ZM249.257 35.602L249.931 36.1978L249.935 36.1934L249.257 35.602ZM249.257 40.9615L248.578 41.5529L248.582 41.5572L249.257 40.9615ZM254.036 40.9615L254.71 41.5573L254.714 41.5529L254.036 40.9615ZM254.036 35.602L253.357 36.1934L253.361 36.1977L254.036 35.602ZM254.886 34.8325L254.231 35.4489C254.899 36.1601 255.255 37.0771 255.255 38.275H256.155H257.055C257.055 36.6829 256.566 35.3049 255.542 34.2161L254.886 34.8325ZM256.155 38.275H255.255C255.255 39.4728 254.899 40.3963 254.227 41.1178L254.886 41.731L255.545 42.3442C256.566 41.2477 257.055 39.8672 257.055 38.275H256.155ZM254.886 41.731L254.227 41.1181C253.575 41.8199 252.741 42.181 251.646 42.181V43.081V43.981C253.198 43.981 254.524 43.4421 255.545 42.3439L254.886 41.731ZM251.646 43.081V42.181C250.552 42.181 249.711 41.8197 249.049 41.1146L248.393 41.731L247.737 42.3474C248.766 43.4423 250.095 43.981 251.646 43.981V43.081ZM248.393 41.731L249.055 41.1214C248.391 40.4002 248.037 39.4755 248.037 38.275H247.137H246.237C246.237 39.8645 246.721 41.2438 247.731 42.3406L248.393 41.731ZM247.137 38.275H248.037C248.037 37.0743 248.391 36.1562 249.052 35.4454L248.393 34.8325L247.734 34.2196C246.721 35.3088 246.237 36.6857 246.237 38.275H247.137ZM248.393 34.8325L249.052 35.4457C249.715 34.7326 250.555 34.369 251.646 34.369V33.469V32.569C250.092 32.569 248.762 33.1144 247.734 34.2193L248.393 34.8325ZM251.646 33.469V34.369C252.738 34.369 253.571 34.7324 254.224 35.4421L254.886 34.8325L255.548 34.2229C254.528 33.1146 253.201 32.569 251.646 32.569V33.469ZM249.257 35.602L248.582 35.0063C247.8 35.8922 247.439 37.0078 247.439 38.275H248.339H249.239C249.239 37.3642 249.49 36.6978 249.931 36.1977L249.257 35.602ZM248.339 38.275H247.439C247.439 39.5425 247.8 40.6599 248.578 41.5529L249.257 40.9615L249.935 40.3701C249.49 39.8591 249.239 39.1855 249.239 38.275H248.339ZM249.257 40.9615L248.582 41.5572C249.377 42.4567 250.425 42.901 251.646 42.901V42.001V41.101C250.906 41.101 250.361 40.8523 249.931 40.3658L249.257 40.9615ZM251.646 42.001V42.901C252.868 42.901 253.916 42.4567 254.71 41.5572L254.036 40.9615L253.361 40.3658C252.932 40.8523 252.387 41.101 251.646 41.101V42.001ZM254.036 40.9615L254.714 41.5529C255.493 40.6599 255.854 39.5425 255.854 38.275H254.954H254.054C254.054 39.1855 253.803 39.8591 253.357 40.3701L254.036 40.9615ZM254.954 38.275H255.854C255.854 37.0078 255.493 35.8922 254.71 35.0063L254.036 35.602L253.361 36.1977C253.803 36.6978 254.054 37.3642 254.054 38.275H254.954ZM254.036 35.602L254.714 35.0106C253.921 34.1009 252.872 33.649 251.646 33.649V34.549V35.449C252.383 35.449 252.926 35.6991 253.357 36.1934L254.036 35.602ZM251.646 34.549V33.649C250.421 33.649 249.371 34.1009 248.578 35.0106L249.257 35.602L249.935 36.1934C250.366 35.6991 250.91 35.449 251.646 35.449V34.549ZM260.974 36.115H261.874V35.215H260.974V36.115ZM260.974 37.195V38.095H261.874V37.195H260.974ZM259.003 37.8565L258.25 37.3643L258.243 37.3753L259.003 37.8565ZM258.585 43V43.9H259.485V43H258.585ZM257.478 43H256.578V43.9H257.478V43ZM257.478 36.115V35.215H256.578V36.115H257.478ZM258.436 36.115L259.327 35.9877L259.217 35.215H258.436V36.115ZM258.585 37.1545L257.694 37.2818L258.048 39.7613L259.353 37.6234L258.585 37.1545ZM260.664 36.115V37.015H260.974V36.115V35.215H260.664V36.115ZM260.974 36.115H260.074V37.195H260.974H261.874V36.115H260.974ZM260.974 37.195V36.295H260.421V37.195V38.095H260.974V37.195ZM260.421 37.195V36.295C259.545 36.295 258.746 36.6047 258.25 37.3644L259.003 37.8565L259.757 38.3486C259.837 38.2263 259.982 38.095 260.421 38.095V37.195ZM259.003 37.8565L258.243 37.3753C257.853 37.9915 257.685 38.7128 257.685 39.49H258.585H259.485C259.485 38.9712 259.596 38.6035 259.764 38.3377L259.003 37.8565ZM258.585 39.49H257.685V43H258.585H259.485V39.49H258.585ZM258.585 43V42.1H257.478V43V43.9H258.585V43ZM257.478 43H258.378V36.115H257.478H256.578V43H257.478ZM257.478 36.115V37.015H258.436V36.115V35.215H257.478V36.115ZM258.436 36.115L257.545 36.2423L257.694 37.2818L258.585 37.1545L259.476 37.0272L259.327 35.9877L258.436 36.115ZM258.585 37.1545L259.353 37.6234C259.58 37.2518 259.946 37.015 260.664 37.015V36.115V35.215C259.455 35.215 258.436 35.6712 257.816 36.6856L258.585 37.1545ZM266.965 37.168L266.204 37.6483L267.865 40.281V37.168H266.965ZM266.965 33.55V32.65H266.065V33.55H266.965ZM268.072 33.55H268.972V32.65H268.072V33.55ZM268.072 43V43.9H268.972V43H268.072ZM267.114 43L266.222 43.1197L266.326 43.9H267.114V43ZM266.965 41.893L267.857 41.7733L267.559 39.547L266.237 41.3636L266.965 41.893ZM262.213 42.1495L261.568 42.7767L261.577 42.7859L262.213 42.1495ZM262.227 37.0195L262.877 37.6422L262.881 37.6377L262.227 37.0195ZM266.344 41.3935L265.677 40.79L265.67 40.7972L266.344 41.3935ZM266.344 37.735L265.664 38.325L265.671 38.3321L266.344 37.735ZM263.05 37.735L262.377 37.1379L262.376 37.1387L263.05 37.735ZM263.05 41.3935L262.371 41.9834L262.376 41.9903L262.383 41.997L263.05 41.3935ZM266.965 37.168H267.865V33.55H266.965H266.065V37.168H266.965ZM266.965 33.55V34.45H268.072V33.55V32.65H266.965V33.55ZM268.072 33.55H267.172V43H268.072H268.972V33.55H268.072ZM268.072 43V42.1H267.114V43V43.9H268.072V43ZM267.114 43L268.006 42.8803L267.857 41.7733L266.965 41.893L266.073 42.0127L266.222 43.1197L267.114 43ZM266.965 41.893L266.237 41.3636C265.835 41.9173 265.321 42.181 264.603 42.181V43.081V43.981C265.883 43.981 266.944 43.4527 267.693 42.4224L266.965 41.893ZM264.603 43.081V42.181C263.841 42.181 263.283 41.9465 262.85 41.5131L262.213 42.1495L261.577 42.7859C262.385 43.5945 263.42 43.981 264.603 43.981V43.081ZM262.213 42.1495L262.859 41.5224C262.448 41.0999 262.195 40.4829 262.195 39.5575H261.295H260.395C260.395 40.8281 260.754 41.9391 261.568 42.7766L262.213 42.1495ZM261.295 39.5575H262.195C262.195 38.7049 262.442 38.0954 262.877 37.6422L262.227 37.0195L261.577 36.3968C260.769 37.2396 260.395 38.3221 260.395 39.5575H261.295ZM262.227 37.0195L262.881 37.6377C263.32 37.1733 263.869 36.934 264.603 36.934V36.034V35.134C263.41 35.134 262.376 35.5517 261.573 36.4013L262.227 37.0195ZM264.603 36.034V36.934C265.473 36.934 265.931 37.2156 266.204 37.6483L266.965 37.168L267.726 36.6877C267.045 35.6084 265.928 35.134 264.603 35.134V36.034ZM264.711 42.0955V42.9955C265.62 42.9955 266.419 42.6677 267.018 41.9898L266.344 41.3935L265.67 40.7972C265.442 41.0553 265.151 41.1955 264.711 41.1955V42.0955ZM266.344 41.3935L267.012 41.997C267.609 41.3359 267.879 40.5052 267.879 39.5845H266.979H266.079C266.079 40.1398 265.925 40.5151 265.677 40.79L266.344 41.3935ZM266.979 39.5845H267.879C267.879 38.6516 267.613 37.8092 267.018 37.1379L266.344 37.735L265.671 38.3321C265.922 38.6148 266.079 39.0054 266.079 39.5845H266.979ZM266.344 37.735L267.024 37.1451C266.426 36.4563 265.626 36.1195 264.711 36.1195V37.0195V37.9195C265.145 37.9195 265.434 38.0597 265.665 38.3249L266.344 37.735ZM264.711 37.0195V36.1195C263.79 36.1195 262.984 36.453 262.377 37.1379L263.05 37.735L263.724 38.3321C263.962 38.063 264.263 37.9195 264.711 37.9195V37.0195ZM263.05 37.735L262.376 37.1387C261.789 37.8022 261.529 38.636 261.529 39.5575H262.429H263.329C263.329 38.985 263.483 38.6038 263.724 38.3313L263.05 37.735ZM262.429 39.5575H261.529C261.529 40.4796 261.789 41.3138 262.371 41.9834L263.05 41.3935L263.73 40.8036C263.483 40.5192 263.329 40.1294 263.329 39.5575H262.429ZM263.05 41.3935L262.383 41.997C262.992 42.6709 263.796 42.9955 264.711 42.9955V42.0955V41.1955C264.257 41.1955 263.955 41.0521 263.718 40.79L263.05 41.3935ZM270.269 42.109L269.619 42.7317L269.623 42.7364L270.269 42.109ZM270.242 37.0195L270.901 37.6326L270.905 37.6281L270.242 37.0195ZM274.953 36.9115L274.317 37.5479L274.322 37.5528L274.953 36.9115ZM275.871 39.301H276.771V39.2891L276.771 39.2771L275.871 39.301ZM275.844 39.7735V40.6735H276.672L276.741 39.8482L275.844 39.7735ZM270.498 39.7735V38.8735H269.598V39.7735H270.498ZM270.498 39.868H269.598V39.8802L269.599 39.8923L270.498 39.868ZM271.106 41.488L270.448 42.1026L270.455 42.11L270.462 42.1172L271.106 41.488ZM273.927 41.731L274.449 42.4647L274.452 42.4621L273.927 41.731ZM274.629 40.6915V39.7915H273.937L273.759 40.4607L274.629 40.6915ZM275.75 40.6915L276.634 40.8615L276.839 39.7915H275.75V40.6915ZM274.737 42.4195L275.307 43.1166L275.313 43.1109L274.737 42.4195ZM270.566 38.8555L269.67 38.7674L269.573 39.7555H270.566V38.8555ZM274.683 38.8555V39.7555H275.67L275.579 38.7728L274.683 38.8555ZM271.241 37.519L271.829 38.2001L271.829 38.2001L271.241 37.519ZM272.753 43.081V42.181C271.934 42.181 271.351 41.9311 270.914 41.4816L270.269 42.109L269.623 42.7364C270.446 43.5829 271.52 43.981 272.753 43.981V43.081ZM270.269 42.109L270.919 41.4863C270.486 41.0345 270.237 40.4215 270.237 39.5575H269.337H268.437C268.437 40.7995 268.81 41.8875 269.619 42.7317L270.269 42.109ZM269.337 39.5575H270.237C270.237 38.6975 270.48 38.0848 270.901 37.6326L270.242 37.0195L269.583 36.4064C268.798 37.2502 268.437 38.3295 268.437 39.5575H269.337ZM270.242 37.0195L270.905 37.6281C271.321 37.1747 271.859 36.934 272.604 36.934V36.034V35.134C271.405 35.134 270.369 35.5503 269.579 36.4109L270.242 37.0195ZM272.604 36.034V36.934C273.394 36.934 273.932 37.1626 274.317 37.5479L274.953 36.9115L275.59 36.2751C274.805 35.4904 273.776 35.134 272.604 35.134V36.034ZM274.953 36.9115L274.322 37.5528C274.703 37.9285 274.949 38.482 274.972 39.3249L275.871 39.301L276.771 39.2771C276.739 38.086 276.373 37.0465 275.585 36.2702L274.953 36.9115ZM275.871 39.301H274.971C274.971 39.3599 274.965 39.4856 274.947 39.6988L275.844 39.7735L276.741 39.8482C276.759 39.6294 276.771 39.4401 276.771 39.301H275.871ZM275.844 39.7735V38.8735H270.498V39.7735V40.6735H275.844V39.7735ZM270.498 39.7735H269.598V39.868H270.498H271.398V39.7735H270.498ZM270.498 39.868L269.599 39.8923C269.621 40.7372 269.885 41.5005 270.448 42.1026L271.106 41.488L271.763 40.8734C271.552 40.6475 271.411 40.3308 271.398 39.8437L270.498 39.868ZM271.106 41.488L270.462 42.1172C271.052 42.7208 271.82 42.9955 272.672 42.9955V42.0955V41.1955C272.228 41.1955 271.951 41.0652 271.749 40.8588L271.106 41.488ZM272.672 42.0955V42.9955C273.319 42.9955 273.928 42.8343 274.449 42.4647L273.927 41.731L273.406 40.9973C273.242 41.1137 273.014 41.1955 272.672 41.1955V42.0955ZM273.927 41.731L274.452 42.4621C274.983 42.0812 275.332 41.5528 275.499 40.9223L274.629 40.6915L273.759 40.4607C273.693 40.7122 273.574 40.8768 273.402 40.9999L273.927 41.731ZM274.629 40.6915V41.5915H275.75V40.6915V39.7915H274.629V40.6915ZM275.75 40.6915L274.866 40.5215C274.769 41.0232 274.538 41.4136 274.161 41.7281L274.737 42.4195L275.313 43.1109C276.016 42.5254 276.46 41.7638 276.634 40.8615L275.75 40.6915ZM274.737 42.4195L274.168 41.7224C273.808 42.016 273.355 42.181 272.753 42.181V43.081V43.981C273.716 43.981 274.586 43.705 275.306 43.1166L274.737 42.4195ZM270.566 38.8555V39.7555H274.683V38.8555V37.9555H270.566V38.8555ZM274.683 38.8555L275.579 38.7728C275.509 38.0064 275.218 37.3206 274.643 36.8157L274.049 37.492L273.455 38.1683C273.618 38.3114 273.75 38.5346 273.787 38.9382L274.683 38.8555ZM274.049 37.492L274.643 36.8157C274.079 36.3209 273.377 36.106 272.618 36.106V37.006V37.906C273.028 37.906 273.28 38.0151 273.455 38.1683L274.049 37.492ZM272.618 37.006V36.106C271.879 36.106 271.212 36.355 270.652 36.8379L271.241 37.519L271.829 38.2001C272.062 37.999 272.312 37.906 272.618 37.906V37.006ZM271.241 37.519L270.652 36.8379C270.072 37.3396 269.745 38.0024 269.67 38.7674L270.566 38.8555L271.461 38.9436C271.494 38.6106 271.618 38.3824 271.829 38.2001L271.241 37.519ZM280.631 36.115H281.531V35.215H280.631V36.115ZM280.631 37.195V38.095H281.531V37.195H280.631ZM278.66 37.8565L277.906 37.3643L277.899 37.3753L278.66 37.8565ZM278.241 43V43.9H279.141V43H278.241ZM277.134 43H276.234V43.9H277.134V43ZM277.134 36.115V35.215H276.234V36.115H277.134ZM278.093 36.115L278.984 35.9877L278.873 35.215H278.093V36.115ZM278.241 37.1545L277.35 37.2818L277.705 39.7613L279.01 37.6234L278.241 37.1545ZM280.32 36.115V37.015H280.631V36.115V35.215H280.32V36.115ZM280.631 36.115H279.731V37.195H280.631H281.531V36.115H280.631ZM280.631 37.195V36.295H280.077V37.195V38.095H280.631V37.195ZM280.077 37.195V36.295C279.202 36.295 278.403 36.6047 277.906 37.3644L278.66 37.8565L279.413 38.3486C279.493 38.2263 279.639 38.095 280.077 38.095V37.195ZM278.66 37.8565L277.899 37.3753C277.51 37.9915 277.341 38.7128 277.341 39.49H278.241H279.141C279.141 38.9712 279.252 38.6035 279.42 38.3377L278.66 37.8565ZM278.241 39.49H277.341V43H278.241H279.141V39.49H278.241ZM278.241 43V42.1H277.134V43V43.9H278.241V43ZM277.134 43H278.034V36.115H277.134H276.234V43H277.134ZM277.134 36.115V37.015H278.093V36.115V35.215H277.134V36.115ZM278.093 36.115L277.202 36.2423L277.35 37.2818L278.241 37.1545L279.132 37.0272L278.984 35.9877L278.093 36.115ZM278.241 37.1545L279.01 37.6234C279.236 37.2518 279.603 37.015 280.32 37.015V36.115V35.215C279.112 35.215 278.092 35.6712 277.473 36.6856L278.241 37.1545ZM281.162 40.732V39.832H280.251L280.262 40.743L281.162 40.732ZM282.296 40.732L283.195 40.6929L283.158 39.832H282.296V40.732ZM282.836 41.7445L282.29 42.46L282.836 41.7445ZM285.387 41.8525L285.86 42.6182L285.866 42.6145L285.387 41.8525ZM285.752 40.651L284.96 41.0777L284.972 41.1006L284.985 41.1227L285.752 40.651ZM285.536 40.381L284.9 41.0174L284.939 41.057L284.983 41.0914L285.536 40.381ZM285.131 40.2055L284.894 41.0738L284.913 41.0789L284.931 41.0831L285.131 40.2055ZM284.672 40.111L284.524 40.9988L284.56 41.0048L284.597 41.0079L284.672 40.111ZM284.078 40.03L284.19 39.1369L284.187 39.1367L284.078 40.03ZM282.984 39.8545L282.766 40.7276L282.779 40.7309L282.792 40.7337L282.984 39.8545ZM282.134 39.544L281.721 40.3438L281.731 40.3491L281.742 40.3541L282.134 39.544ZM281.513 38.977L280.726 39.4141L280.73 39.4204L280.733 39.4268L281.513 38.977ZM282.066 36.601L282.606 37.321L282.608 37.3195L282.066 36.601ZM284.01 36.034L284 36.9339L284 36.9339L284.01 36.034ZM285.981 36.6145L285.441 37.3345L285.45 37.3407L285.981 36.6145ZM286.818 38.2075V39.1075H287.791L287.716 38.1376L286.818 38.2075ZM285.684 38.2075L284.791 38.3191L284.89 39.1075H285.684V38.2075ZM285.158 37.33L284.601 38.0369L284.613 38.0462L284.625 38.0551L285.158 37.33ZM282.836 37.2625L282.353 36.5031L282.342 36.5101L282.836 37.2625ZM282.512 38.464L281.745 38.9357L281.758 38.9563L281.772 38.9763L282.512 38.464ZM282.903 38.7475L282.569 39.5831L282.594 39.593L282.619 39.6013L282.903 38.7475ZM283.416 38.896L283.21 39.7721L283.239 39.7789L283.268 39.7838L283.416 38.896ZM284.132 38.9905L284.244 38.0974L284.234 38.0963L284.132 38.9905ZM285.036 39.1255L284.873 40.0105V40.0105L285.036 39.1255ZM285.792 39.3415L286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.818 40.3674L285.828 40.3758L285.837 40.3839L286.413 39.6925ZM286.805 40.2325L285.981 40.595L285.987 40.6075L286.805 40.2325ZM286.157 42.514L285.635 41.7808L285.629 41.7851L286.157 42.514ZM281.999 42.46L281.457 43.1786L281.463 43.1828L281.999 42.46ZM281.162 40.732V41.632H282.296V40.732V39.832H281.162V40.732ZM282.296 40.732L281.397 40.7711C281.427 41.4633 281.745 42.0441 282.29 42.46L282.836 41.7445L283.382 41.029C283.243 40.9229 283.201 40.8287 283.195 40.6929L282.296 40.732ZM282.836 41.7445L282.29 42.46C282.832 42.8738 283.498 43.036 284.199 43.036V42.136V41.236C283.767 41.236 283.524 41.1372 283.382 41.029L282.836 41.7445ZM284.199 42.136V43.036C284.796 43.036 285.371 42.9207 285.86 42.6182L285.387 41.8525L284.915 41.0868C284.792 41.1623 284.575 41.236 284.199 41.236V42.136ZM285.387 41.8525L285.866 42.6145C286.388 42.2866 286.76 41.7677 286.76 41.083H285.86H284.96C284.96 41.086 284.96 41.0803 284.963 41.0692C284.966 41.0577 284.971 41.0476 284.975 41.0407C284.984 41.0266 284.976 41.0481 284.909 41.0905L285.387 41.8525ZM285.86 41.083H286.76C286.76 40.786 286.697 40.4691 286.518 40.1793L285.752 40.651L284.985 41.1227C284.969 41.0966 284.962 41.0753 284.96 41.065C284.958 41.0558 284.96 41.0602 284.96 41.083H285.86ZM285.752 40.651L286.544 40.2243C286.439 40.0282 286.293 39.8295 286.089 39.6706L285.536 40.381L284.983 41.0914C284.962 41.0746 284.951 41.0614 284.948 41.058C284.945 41.0547 284.95 41.0599 284.96 41.0777L285.752 40.651ZM285.536 40.381L286.172 39.7446C285.91 39.4823 285.558 39.3797 285.33 39.3279L285.131 40.2055L284.931 41.0831C284.962 41.09 284.984 41.0962 285.001 41.1012C285.017 41.1063 285.024 41.1092 285.023 41.1089C285.022 41.1088 285.01 41.1035 284.99 41.0909C284.97 41.0784 284.937 41.0551 284.9 41.0174L285.536 40.381ZM285.131 40.2055L285.368 39.3372C285.155 39.2791 284.938 39.2301 284.747 39.2141L284.672 40.111L284.597 41.0079C284.622 41.0099 284.711 41.0239 284.894 41.0738L285.131 40.2055ZM284.672 40.111L284.82 39.2232C284.691 39.2018 284.476 39.1728 284.19 39.1369L284.078 40.03L283.966 40.923C284.256 40.9592 284.437 40.9842 284.524 40.9988L284.672 40.111ZM284.078 40.03L284.187 39.1367C283.762 39.0846 283.427 39.0301 283.177 38.9753L282.984 39.8545L282.792 40.7337C283.118 40.8049 283.512 40.8674 283.969 40.9233L284.078 40.03ZM282.984 39.8545L283.203 38.9814C282.977 38.925 282.752 38.8431 282.526 38.7339L282.134 39.544L281.742 40.3541C282.074 40.5149 282.416 40.64 282.766 40.7276L282.984 39.8545ZM282.134 39.544L282.547 38.7442C282.396 38.6663 282.328 38.5889 282.293 38.5272L281.513 38.977L280.733 39.4268C280.968 39.8331 281.314 40.1337 281.721 40.3438L282.134 39.544ZM281.513 38.977L282.3 38.5399C282.254 38.4581 282.21 38.3234 282.21 38.0995H281.31H280.41C280.41 38.5596 280.502 39.0099 280.726 39.4141L281.513 38.977ZM281.31 38.0995H282.21C282.21 37.7666 282.325 37.5319 282.606 37.321L282.066 36.601L281.526 35.881C280.8 36.4261 280.41 37.1904 280.41 38.0995H281.31ZM282.066 36.601L282.608 37.3195C282.93 37.0768 283.372 36.9267 284 36.9339L284.01 36.034L284.021 35.1341C283.083 35.1233 282.229 35.3512 281.524 35.8825L282.066 36.601ZM284.01 36.034L284 36.9339C284.674 36.9414 285.129 37.1003 285.441 37.3345L285.981 36.6145L286.521 35.8945C285.826 35.3727 284.967 35.1446 284.02 35.1341L284.01 36.034ZM285.981 36.6145L285.45 37.3407C285.717 37.5361 285.885 37.8129 285.921 38.2774L286.818 38.2075L287.716 38.1376C287.644 37.2161 287.254 36.4309 286.513 35.8883L285.981 36.6145ZM286.818 38.2075V37.3075H285.684V38.2075V39.1075H286.818V38.2075ZM285.684 38.2075L286.578 38.0959C286.5 37.478 286.186 36.9686 285.691 36.6049L285.158 37.33L284.625 38.0551C284.742 38.1414 284.779 38.217 284.791 38.3191L285.684 38.2075ZM285.158 37.33L285.715 36.6231C285.224 36.2366 284.631 36.079 284.01 36.079V36.979V37.879C284.326 37.879 284.497 37.9554 284.601 38.0369L285.158 37.33ZM284.01 36.979V36.079C283.416 36.079 282.839 36.1936 282.353 36.5032L282.836 37.2625L283.319 38.0218C283.427 37.9534 283.633 37.879 284.01 37.879V36.979ZM282.836 37.2625L282.342 36.5101C281.829 36.847 281.504 37.3681 281.504 38.0185H282.404H283.304C283.304 38.0088 283.305 38.0087 283.303 38.0156C283.302 38.0188 283.301 38.0229 283.299 38.0274C283.298 38.0319 283.295 38.0361 283.293 38.0398C283.289 38.0476 283.286 38.0495 283.29 38.0459C283.294 38.0418 283.306 38.0308 283.33 38.0149L282.836 37.2625ZM282.404 38.0185H281.504C281.504 38.3145 281.563 38.6392 281.745 38.9357L282.512 38.464L283.278 37.9923C283.297 38.0226 283.304 38.0456 283.306 38.0528C283.307 38.059 283.304 38.0493 283.304 38.0185H282.404ZM282.512 38.464L281.772 38.9763C281.984 39.2824 282.283 39.4686 282.569 39.5831L282.903 38.7475L283.238 37.9119C283.203 37.898 283.193 37.8898 283.198 37.8937C283.205 37.8983 283.227 37.9162 283.252 37.9517L282.512 38.464ZM282.903 38.7475L282.619 39.6013C282.827 39.6708 283.025 39.7285 283.21 39.7721L283.416 38.896L283.623 38.0199C283.502 37.9915 283.358 37.9502 283.188 37.8937L282.903 38.7475ZM283.416 38.896L283.268 39.7838C283.454 39.8146 283.711 39.8482 284.03 39.8847L284.132 38.9905L284.234 38.0963C283.923 38.0608 283.703 38.0314 283.564 38.0082L283.416 38.896ZM284.132 38.9905L284.02 39.8835C284.37 39.9273 284.653 39.9698 284.873 40.0105L285.036 39.1255L285.2 38.2405C284.934 38.1912 284.614 38.1437 284.244 38.0974L284.132 38.9905ZM285.036 39.1255L284.873 40.0105C285.056 40.0445 285.256 40.1007 285.473 40.183L285.792 39.3415L286.112 38.5C285.807 38.3843 285.503 38.2965 285.2 38.2405L285.036 39.1255ZM285.792 39.3415L285.473 40.183C285.668 40.2567 285.77 40.3252 285.818 40.3674L286.413 39.6925L287.009 39.0176C286.751 38.7898 286.439 38.6243 286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.837 40.3839C285.876 40.4162 285.929 40.4762 285.981 40.595L286.805 40.2325L287.629 39.87C287.483 39.5388 287.275 39.2388 286.99 39.0011L286.413 39.6925ZM286.805 40.2325L285.987 40.6075C286.02 40.6803 286.053 40.803 286.053 41.002H286.953H287.853C287.853 40.607 287.788 40.2167 287.623 39.8575L286.805 40.2325ZM286.953 41.002H286.053C286.053 41.3291 285.939 41.5647 285.635 41.7808L286.157 42.514L286.679 43.2472C287.437 42.7073 287.853 41.9349 287.853 41.002H286.953ZM286.157 42.514L285.629 41.7851C285.291 42.0297 284.834 42.181 284.199 42.181V43.081V43.981C285.13 43.981 285.979 43.7543 286.685 43.2429L286.157 42.514ZM284.199 43.081V42.181C283.424 42.181 282.896 42.0051 282.535 41.7372L281.999 42.46L281.463 43.1828C282.218 43.7429 283.157 43.981 284.199 43.981V43.081ZM281.999 42.46L282.541 41.7414C282.232 41.5089 282.068 41.2041 282.062 40.721L281.162 40.732L280.262 40.743C280.274 41.7359 280.667 42.5831 281.457 43.1786L281.999 42.46Z" fill="#2D2D31" mask="url(#path-7-outside-1_2782_11310)"/>
+<path d="M254.886 34.8325L254.224 35.4422L254.231 35.4489L254.886 34.8325ZM254.886 41.731L254.227 41.1178L254.227 41.1181L254.886 41.731ZM248.393 41.731L247.731 42.3407L247.737 42.3474L248.393 41.731ZM248.393 34.8325L247.734 34.2193L247.734 34.2196L248.393 34.8325ZM249.257 35.602L249.931 36.1978L249.935 36.1934L249.257 35.602ZM249.257 40.9615L248.578 41.5529L248.582 41.5572L249.257 40.9615ZM254.036 40.9615L254.71 41.5573L254.714 41.5529L254.036 40.9615ZM254.036 35.602L253.357 36.1934L253.361 36.1977L254.036 35.602ZM254.886 34.8325L254.231 35.4489C254.899 36.1601 255.255 37.0771 255.255 38.275H256.155H257.055C257.055 36.6829 256.566 35.3049 255.542 34.2161L254.886 34.8325ZM256.155 38.275H255.255C255.255 39.4728 254.899 40.3963 254.227 41.1178L254.886 41.731L255.545 42.3442C256.566 41.2477 257.055 39.8672 257.055 38.275H256.155ZM254.886 41.731L254.227 41.1181C253.575 41.8199 252.741 42.181 251.646 42.181V43.081V43.981C253.198 43.981 254.524 43.4421 255.545 42.3439L254.886 41.731ZM251.646 43.081V42.181C250.552 42.181 249.711 41.8197 249.049 41.1146L248.393 41.731L247.737 42.3474C248.766 43.4423 250.095 43.981 251.646 43.981V43.081ZM248.393 41.731L249.055 41.1214C248.391 40.4002 248.037 39.4755 248.037 38.275H247.137H246.237C246.237 39.8645 246.721 41.2438 247.731 42.3406L248.393 41.731ZM247.137 38.275H248.037C248.037 37.0743 248.391 36.1562 249.052 35.4454L248.393 34.8325L247.734 34.2196C246.721 35.3088 246.237 36.6857 246.237 38.275H247.137ZM248.393 34.8325L249.052 35.4457C249.715 34.7326 250.555 34.369 251.646 34.369V33.469V32.569C250.092 32.569 248.762 33.1144 247.734 34.2193L248.393 34.8325ZM251.646 33.469V34.369C252.738 34.369 253.571 34.7324 254.224 35.4421L254.886 34.8325L255.548 34.2229C254.528 33.1146 253.201 32.569 251.646 32.569V33.469ZM249.257 35.602L248.582 35.0063C247.8 35.8922 247.439 37.0078 247.439 38.275H248.339H249.239C249.239 37.3642 249.49 36.6978 249.931 36.1977L249.257 35.602ZM248.339 38.275H247.439C247.439 39.5425 247.8 40.6599 248.578 41.5529L249.257 40.9615L249.935 40.3701C249.49 39.8591 249.239 39.1855 249.239 38.275H248.339ZM249.257 40.9615L248.582 41.5572C249.377 42.4567 250.425 42.901 251.646 42.901V42.001V41.101C250.906 41.101 250.361 40.8523 249.931 40.3658L249.257 40.9615ZM251.646 42.001V42.901C252.868 42.901 253.916 42.4567 254.71 41.5572L254.036 40.9615L253.361 40.3658C252.932 40.8523 252.387 41.101 251.646 41.101V42.001ZM254.036 40.9615L254.714 41.5529C255.493 40.6599 255.854 39.5425 255.854 38.275H254.954H254.054C254.054 39.1855 253.803 39.8591 253.357 40.3701L254.036 40.9615ZM254.954 38.275H255.854C255.854 37.0078 255.493 35.8922 254.71 35.0063L254.036 35.602L253.361 36.1977C253.803 36.6978 254.054 37.3642 254.054 38.275H254.954ZM254.036 35.602L254.714 35.0106C253.921 34.1009 252.872 33.649 251.646 33.649V34.549V35.449C252.383 35.449 252.926 35.6991 253.357 36.1934L254.036 35.602ZM251.646 34.549V33.649C250.421 33.649 249.371 34.1009 248.578 35.0106L249.257 35.602L249.935 36.1934C250.366 35.6991 250.91 35.449 251.646 35.449V34.549ZM260.974 36.115H261.874V35.215H260.974V36.115ZM260.974 37.195V38.095H261.874V37.195H260.974ZM259.003 37.8565L258.25 37.3643L258.243 37.3753L259.003 37.8565ZM258.585 43V43.9H259.485V43H258.585ZM257.478 43H256.578V43.9H257.478V43ZM257.478 36.115V35.215H256.578V36.115H257.478ZM258.436 36.115L259.327 35.9877L259.217 35.215H258.436V36.115ZM258.585 37.1545L257.694 37.2818L258.048 39.7613L259.353 37.6234L258.585 37.1545ZM260.664 36.115V37.015H260.974V36.115V35.215H260.664V36.115ZM260.974 36.115H260.074V37.195H260.974H261.874V36.115H260.974ZM260.974 37.195V36.295H260.421V37.195V38.095H260.974V37.195ZM260.421 37.195V36.295C259.545 36.295 258.746 36.6047 258.25 37.3644L259.003 37.8565L259.757 38.3486C259.837 38.2263 259.982 38.095 260.421 38.095V37.195ZM259.003 37.8565L258.243 37.3753C257.853 37.9915 257.685 38.7128 257.685 39.49H258.585H259.485C259.485 38.9712 259.596 38.6035 259.764 38.3377L259.003 37.8565ZM258.585 39.49H257.685V43H258.585H259.485V39.49H258.585ZM258.585 43V42.1H257.478V43V43.9H258.585V43ZM257.478 43H258.378V36.115H257.478H256.578V43H257.478ZM257.478 36.115V37.015H258.436V36.115V35.215H257.478V36.115ZM258.436 36.115L257.545 36.2423L257.694 37.2818L258.585 37.1545L259.476 37.0272L259.327 35.9877L258.436 36.115ZM258.585 37.1545L259.353 37.6234C259.58 37.2518 259.946 37.015 260.664 37.015V36.115V35.215C259.455 35.215 258.436 35.6712 257.816 36.6856L258.585 37.1545ZM266.965 37.168L266.204 37.6483L267.865 40.281V37.168H266.965ZM266.965 33.55V32.65H266.065V33.55H266.965ZM268.072 33.55H268.972V32.65H268.072V33.55ZM268.072 43V43.9H268.972V43H268.072ZM267.114 43L266.222 43.1197L266.326 43.9H267.114V43ZM266.965 41.893L267.857 41.7733L267.559 39.547L266.237 41.3636L266.965 41.893ZM262.213 42.1495L261.568 42.7767L261.577 42.7859L262.213 42.1495ZM262.227 37.0195L262.877 37.6422L262.881 37.6377L262.227 37.0195ZM266.344 41.3935L265.677 40.79L265.67 40.7972L266.344 41.3935ZM266.344 37.735L265.664 38.325L265.671 38.3321L266.344 37.735ZM263.05 37.735L262.377 37.1379L262.376 37.1387L263.05 37.735ZM263.05 41.3935L262.371 41.9834L262.376 41.9903L262.383 41.997L263.05 41.3935ZM266.965 37.168H267.865V33.55H266.965H266.065V37.168H266.965ZM266.965 33.55V34.45H268.072V33.55V32.65H266.965V33.55ZM268.072 33.55H267.172V43H268.072H268.972V33.55H268.072ZM268.072 43V42.1H267.114V43V43.9H268.072V43ZM267.114 43L268.006 42.8803L267.857 41.7733L266.965 41.893L266.073 42.0127L266.222 43.1197L267.114 43ZM266.965 41.893L266.237 41.3636C265.835 41.9173 265.321 42.181 264.603 42.181V43.081V43.981C265.883 43.981 266.944 43.4527 267.693 42.4224L266.965 41.893ZM264.603 43.081V42.181C263.841 42.181 263.283 41.9465 262.85 41.5131L262.213 42.1495L261.577 42.7859C262.385 43.5945 263.42 43.981 264.603 43.981V43.081ZM262.213 42.1495L262.859 41.5224C262.448 41.0999 262.195 40.4829 262.195 39.5575H261.295H260.395C260.395 40.8281 260.754 41.9391 261.568 42.7766L262.213 42.1495ZM261.295 39.5575H262.195C262.195 38.7049 262.442 38.0954 262.877 37.6422L262.227 37.0195L261.577 36.3968C260.769 37.2396 260.395 38.3221 260.395 39.5575H261.295ZM262.227 37.0195L262.881 37.6377C263.32 37.1733 263.869 36.934 264.603 36.934V36.034V35.134C263.41 35.134 262.376 35.5517 261.573 36.4013L262.227 37.0195ZM264.603 36.034V36.934C265.473 36.934 265.931 37.2156 266.204 37.6483L266.965 37.168L267.726 36.6877C267.045 35.6084 265.928 35.134 264.603 35.134V36.034ZM264.711 42.0955V42.9955C265.62 42.9955 266.419 42.6677 267.018 41.9898L266.344 41.3935L265.67 40.7972C265.442 41.0553 265.151 41.1955 264.711 41.1955V42.0955ZM266.344 41.3935L267.012 41.997C267.609 41.3359 267.879 40.5052 267.879 39.5845H266.979H266.079C266.079 40.1398 265.925 40.5151 265.677 40.79L266.344 41.3935ZM266.979 39.5845H267.879C267.879 38.6516 267.613 37.8092 267.018 37.1379L266.344 37.735L265.671 38.3321C265.922 38.6148 266.079 39.0054 266.079 39.5845H266.979ZM266.344 37.735L267.024 37.1451C266.426 36.4563 265.626 36.1195 264.711 36.1195V37.0195V37.9195C265.145 37.9195 265.434 38.0597 265.665 38.3249L266.344 37.735ZM264.711 37.0195V36.1195C263.79 36.1195 262.984 36.453 262.377 37.1379L263.05 37.735L263.724 38.3321C263.962 38.063 264.263 37.9195 264.711 37.9195V37.0195ZM263.05 37.735L262.376 37.1387C261.789 37.8022 261.529 38.636 261.529 39.5575H262.429H263.329C263.329 38.985 263.483 38.6038 263.724 38.3313L263.05 37.735ZM262.429 39.5575H261.529C261.529 40.4796 261.789 41.3138 262.371 41.9834L263.05 41.3935L263.73 40.8036C263.483 40.5192 263.329 40.1294 263.329 39.5575H262.429ZM263.05 41.3935L262.383 41.997C262.992 42.6709 263.796 42.9955 264.711 42.9955V42.0955V41.1955C264.257 41.1955 263.955 41.0521 263.718 40.79L263.05 41.3935ZM270.269 42.109L269.619 42.7317L269.623 42.7364L270.269 42.109ZM270.242 37.0195L270.901 37.6326L270.905 37.6281L270.242 37.0195ZM274.953 36.9115L274.317 37.5479L274.322 37.5528L274.953 36.9115ZM275.871 39.301H276.771V39.2891L276.771 39.2771L275.871 39.301ZM275.844 39.7735V40.6735H276.672L276.741 39.8482L275.844 39.7735ZM270.498 39.7735V38.8735H269.598V39.7735H270.498ZM270.498 39.868H269.598V39.8802L269.599 39.8923L270.498 39.868ZM271.106 41.488L270.448 42.1026L270.455 42.11L270.462 42.1172L271.106 41.488ZM273.927 41.731L274.449 42.4647L274.452 42.4621L273.927 41.731ZM274.629 40.6915V39.7915H273.937L273.759 40.4607L274.629 40.6915ZM275.75 40.6915L276.634 40.8615L276.839 39.7915H275.75V40.6915ZM274.737 42.4195L275.307 43.1166L275.313 43.1109L274.737 42.4195ZM270.566 38.8555L269.67 38.7674L269.573 39.7555H270.566V38.8555ZM274.683 38.8555V39.7555H275.67L275.579 38.7728L274.683 38.8555ZM271.241 37.519L271.829 38.2001L271.829 38.2001L271.241 37.519ZM272.753 43.081V42.181C271.934 42.181 271.351 41.9311 270.914 41.4816L270.269 42.109L269.623 42.7364C270.446 43.5829 271.52 43.981 272.753 43.981V43.081ZM270.269 42.109L270.919 41.4863C270.486 41.0345 270.237 40.4215 270.237 39.5575H269.337H268.437C268.437 40.7995 268.81 41.8875 269.619 42.7317L270.269 42.109ZM269.337 39.5575H270.237C270.237 38.6975 270.48 38.0848 270.901 37.6326L270.242 37.0195L269.583 36.4064C268.798 37.2502 268.437 38.3295 268.437 39.5575H269.337ZM270.242 37.0195L270.905 37.6281C271.321 37.1747 271.859 36.934 272.604 36.934V36.034V35.134C271.405 35.134 270.369 35.5503 269.579 36.4109L270.242 37.0195ZM272.604 36.034V36.934C273.394 36.934 273.932 37.1626 274.317 37.5479L274.953 36.9115L275.59 36.2751C274.805 35.4904 273.776 35.134 272.604 35.134V36.034ZM274.953 36.9115L274.322 37.5528C274.703 37.9285 274.949 38.482 274.972 39.3249L275.871 39.301L276.771 39.2771C276.739 38.086 276.373 37.0465 275.585 36.2702L274.953 36.9115ZM275.871 39.301H274.971C274.971 39.3599 274.965 39.4856 274.947 39.6988L275.844 39.7735L276.741 39.8482C276.759 39.6294 276.771 39.4401 276.771 39.301H275.871ZM275.844 39.7735V38.8735H270.498V39.7735V40.6735H275.844V39.7735ZM270.498 39.7735H269.598V39.868H270.498H271.398V39.7735H270.498ZM270.498 39.868L269.599 39.8923C269.621 40.7372 269.885 41.5005 270.448 42.1026L271.106 41.488L271.763 40.8734C271.552 40.6475 271.411 40.3308 271.398 39.8437L270.498 39.868ZM271.106 41.488L270.462 42.1172C271.052 42.7208 271.82 42.9955 272.672 42.9955V42.0955V41.1955C272.228 41.1955 271.951 41.0652 271.749 40.8588L271.106 41.488ZM272.672 42.0955V42.9955C273.319 42.9955 273.928 42.8343 274.449 42.4647L273.927 41.731L273.406 40.9973C273.242 41.1137 273.014 41.1955 272.672 41.1955V42.0955ZM273.927 41.731L274.452 42.4621C274.983 42.0812 275.332 41.5528 275.499 40.9223L274.629 40.6915L273.759 40.4607C273.693 40.7122 273.574 40.8768 273.402 40.9999L273.927 41.731ZM274.629 40.6915V41.5915H275.75V40.6915V39.7915H274.629V40.6915ZM275.75 40.6915L274.866 40.5215C274.769 41.0232 274.538 41.4136 274.161 41.7281L274.737 42.4195L275.313 43.1109C276.016 42.5254 276.46 41.7638 276.634 40.8615L275.75 40.6915ZM274.737 42.4195L274.168 41.7224C273.808 42.016 273.355 42.181 272.753 42.181V43.081V43.981C273.716 43.981 274.586 43.705 275.306 43.1166L274.737 42.4195ZM270.566 38.8555V39.7555H274.683V38.8555V37.9555H270.566V38.8555ZM274.683 38.8555L275.579 38.7728C275.509 38.0064 275.218 37.3206 274.643 36.8157L274.049 37.492L273.455 38.1683C273.618 38.3114 273.75 38.5346 273.787 38.9382L274.683 38.8555ZM274.049 37.492L274.643 36.8157C274.079 36.3209 273.377 36.106 272.618 36.106V37.006V37.906C273.028 37.906 273.28 38.0151 273.455 38.1683L274.049 37.492ZM272.618 37.006V36.106C271.879 36.106 271.212 36.355 270.652 36.8379L271.241 37.519L271.829 38.2001C272.062 37.999 272.312 37.906 272.618 37.906V37.006ZM271.241 37.519L270.652 36.8379C270.072 37.3396 269.745 38.0024 269.67 38.7674L270.566 38.8555L271.461 38.9436C271.494 38.6106 271.618 38.3824 271.829 38.2001L271.241 37.519ZM280.631 36.115H281.531V35.215H280.631V36.115ZM280.631 37.195V38.095H281.531V37.195H280.631ZM278.66 37.8565L277.906 37.3643L277.899 37.3753L278.66 37.8565ZM278.241 43V43.9H279.141V43H278.241ZM277.134 43H276.234V43.9H277.134V43ZM277.134 36.115V35.215H276.234V36.115H277.134ZM278.093 36.115L278.984 35.9877L278.873 35.215H278.093V36.115ZM278.241 37.1545L277.35 37.2818L277.705 39.7613L279.01 37.6234L278.241 37.1545ZM280.32 36.115V37.015H280.631V36.115V35.215H280.32V36.115ZM280.631 36.115H279.731V37.195H280.631H281.531V36.115H280.631ZM280.631 37.195V36.295H280.077V37.195V38.095H280.631V37.195ZM280.077 37.195V36.295C279.202 36.295 278.403 36.6047 277.906 37.3644L278.66 37.8565L279.413 38.3486C279.493 38.2263 279.639 38.095 280.077 38.095V37.195ZM278.66 37.8565L277.899 37.3753C277.51 37.9915 277.341 38.7128 277.341 39.49H278.241H279.141C279.141 38.9712 279.252 38.6035 279.42 38.3377L278.66 37.8565ZM278.241 39.49H277.341V43H278.241H279.141V39.49H278.241ZM278.241 43V42.1H277.134V43V43.9H278.241V43ZM277.134 43H278.034V36.115H277.134H276.234V43H277.134ZM277.134 36.115V37.015H278.093V36.115V35.215H277.134V36.115ZM278.093 36.115L277.202 36.2423L277.35 37.2818L278.241 37.1545L279.132 37.0272L278.984 35.9877L278.093 36.115ZM278.241 37.1545L279.01 37.6234C279.236 37.2518 279.603 37.015 280.32 37.015V36.115V35.215C279.112 35.215 278.092 35.6712 277.473 36.6856L278.241 37.1545ZM281.162 40.732V39.832H280.251L280.262 40.743L281.162 40.732ZM282.296 40.732L283.195 40.6929L283.158 39.832H282.296V40.732ZM282.836 41.7445L282.29 42.46L282.836 41.7445ZM285.387 41.8525L285.86 42.6182L285.866 42.6145L285.387 41.8525ZM285.752 40.651L284.96 41.0777L284.972 41.1006L284.985 41.1227L285.752 40.651ZM285.536 40.381L284.9 41.0174L284.939 41.057L284.983 41.0914L285.536 40.381ZM285.131 40.2055L284.894 41.0738L284.913 41.0789L284.931 41.0831L285.131 40.2055ZM284.672 40.111L284.524 40.9988L284.56 41.0048L284.597 41.0079L284.672 40.111ZM284.078 40.03L284.19 39.1369L284.187 39.1367L284.078 40.03ZM282.984 39.8545L282.766 40.7276L282.779 40.7309L282.792 40.7337L282.984 39.8545ZM282.134 39.544L281.721 40.3438L281.731 40.3491L281.742 40.3541L282.134 39.544ZM281.513 38.977L280.726 39.4141L280.73 39.4204L280.733 39.4268L281.513 38.977ZM282.066 36.601L282.606 37.321L282.608 37.3195L282.066 36.601ZM284.01 36.034L284 36.9339L284 36.9339L284.01 36.034ZM285.981 36.6145L285.441 37.3345L285.45 37.3407L285.981 36.6145ZM286.818 38.2075V39.1075H287.791L287.716 38.1376L286.818 38.2075ZM285.684 38.2075L284.791 38.3191L284.89 39.1075H285.684V38.2075ZM285.158 37.33L284.601 38.0369L284.613 38.0462L284.625 38.0551L285.158 37.33ZM282.836 37.2625L282.353 36.5031L282.342 36.5101L282.836 37.2625ZM282.512 38.464L281.745 38.9357L281.758 38.9563L281.772 38.9763L282.512 38.464ZM282.903 38.7475L282.569 39.5831L282.594 39.593L282.619 39.6013L282.903 38.7475ZM283.416 38.896L283.21 39.7721L283.239 39.7789L283.268 39.7838L283.416 38.896ZM284.132 38.9905L284.244 38.0974L284.234 38.0963L284.132 38.9905ZM285.036 39.1255L284.873 40.0105V40.0105L285.036 39.1255ZM285.792 39.3415L286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.818 40.3674L285.828 40.3758L285.837 40.3839L286.413 39.6925ZM286.805 40.2325L285.981 40.595L285.987 40.6075L286.805 40.2325ZM286.157 42.514L285.635 41.7808L285.629 41.7851L286.157 42.514ZM281.999 42.46L281.457 43.1786L281.463 43.1828L281.999 42.46ZM281.162 40.732V41.632H282.296V40.732V39.832H281.162V40.732ZM282.296 40.732L281.397 40.7711C281.427 41.4633 281.745 42.0441 282.29 42.46L282.836 41.7445L283.382 41.029C283.243 40.9229 283.201 40.8287 283.195 40.6929L282.296 40.732ZM282.836 41.7445L282.29 42.46C282.832 42.8738 283.498 43.036 284.199 43.036V42.136V41.236C283.767 41.236 283.524 41.1372 283.382 41.029L282.836 41.7445ZM284.199 42.136V43.036C284.796 43.036 285.371 42.9207 285.86 42.6182L285.387 41.8525L284.915 41.0868C284.792 41.1623 284.575 41.236 284.199 41.236V42.136ZM285.387 41.8525L285.866 42.6145C286.388 42.2866 286.76 41.7677 286.76 41.083H285.86H284.96C284.96 41.086 284.96 41.0803 284.963 41.0692C284.966 41.0577 284.971 41.0476 284.975 41.0407C284.984 41.0266 284.976 41.0481 284.909 41.0905L285.387 41.8525ZM285.86 41.083H286.76C286.76 40.786 286.697 40.4691 286.518 40.1793L285.752 40.651L284.985 41.1227C284.969 41.0966 284.962 41.0753 284.96 41.065C284.958 41.0558 284.96 41.0602 284.96 41.083H285.86ZM285.752 40.651L286.544 40.2243C286.439 40.0282 286.293 39.8295 286.089 39.6706L285.536 40.381L284.983 41.0914C284.962 41.0746 284.951 41.0614 284.948 41.058C284.945 41.0547 284.95 41.0599 284.96 41.0777L285.752 40.651ZM285.536 40.381L286.172 39.7446C285.91 39.4823 285.558 39.3797 285.33 39.3279L285.131 40.2055L284.931 41.0831C284.962 41.09 284.984 41.0962 285.001 41.1012C285.017 41.1063 285.024 41.1092 285.023 41.1089C285.022 41.1088 285.01 41.1035 284.99 41.0909C284.97 41.0784 284.937 41.0551 284.9 41.0174L285.536 40.381ZM285.131 40.2055L285.368 39.3372C285.155 39.2791 284.938 39.2301 284.747 39.2141L284.672 40.111L284.597 41.0079C284.622 41.0099 284.711 41.0239 284.894 41.0738L285.131 40.2055ZM284.672 40.111L284.82 39.2232C284.691 39.2018 284.476 39.1728 284.19 39.1369L284.078 40.03L283.966 40.923C284.256 40.9592 284.437 40.9842 284.524 40.9988L284.672 40.111ZM284.078 40.03L284.187 39.1367C283.762 39.0846 283.427 39.0301 283.177 38.9753L282.984 39.8545L282.792 40.7337C283.118 40.8049 283.512 40.8674 283.969 40.9233L284.078 40.03ZM282.984 39.8545L283.203 38.9814C282.977 38.925 282.752 38.8431 282.526 38.7339L282.134 39.544L281.742 40.3541C282.074 40.5149 282.416 40.64 282.766 40.7276L282.984 39.8545ZM282.134 39.544L282.547 38.7442C282.396 38.6663 282.328 38.5889 282.293 38.5272L281.513 38.977L280.733 39.4268C280.968 39.8331 281.314 40.1337 281.721 40.3438L282.134 39.544ZM281.513 38.977L282.3 38.5399C282.254 38.4581 282.21 38.3234 282.21 38.0995H281.31H280.41C280.41 38.5596 280.502 39.0099 280.726 39.4141L281.513 38.977ZM281.31 38.0995H282.21C282.21 37.7666 282.325 37.5319 282.606 37.321L282.066 36.601L281.526 35.881C280.8 36.4261 280.41 37.1904 280.41 38.0995H281.31ZM282.066 36.601L282.608 37.3195C282.93 37.0768 283.372 36.9267 284 36.9339L284.01 36.034L284.021 35.1341C283.083 35.1233 282.229 35.3512 281.524 35.8825L282.066 36.601ZM284.01 36.034L284 36.9339C284.674 36.9414 285.129 37.1003 285.441 37.3345L285.981 36.6145L286.521 35.8945C285.826 35.3727 284.967 35.1446 284.02 35.1341L284.01 36.034ZM285.981 36.6145L285.45 37.3407C285.717 37.5361 285.885 37.8129 285.921 38.2774L286.818 38.2075L287.716 38.1376C287.644 37.2161 287.254 36.4309 286.513 35.8883L285.981 36.6145ZM286.818 38.2075V37.3075H285.684V38.2075V39.1075H286.818V38.2075ZM285.684 38.2075L286.578 38.0959C286.5 37.478 286.186 36.9686 285.691 36.6049L285.158 37.33L284.625 38.0551C284.742 38.1414 284.779 38.217 284.791 38.3191L285.684 38.2075ZM285.158 37.33L285.715 36.6231C285.224 36.2366 284.631 36.079 284.01 36.079V36.979V37.879C284.326 37.879 284.497 37.9554 284.601 38.0369L285.158 37.33ZM284.01 36.979V36.079C283.416 36.079 282.839 36.1936 282.353 36.5032L282.836 37.2625L283.319 38.0218C283.427 37.9534 283.633 37.879 284.01 37.879V36.979ZM282.836 37.2625L282.342 36.5101C281.829 36.847 281.504 37.3681 281.504 38.0185H282.404H283.304C283.304 38.0088 283.305 38.0087 283.303 38.0156C283.302 38.0188 283.301 38.0229 283.299 38.0274C283.298 38.0319 283.295 38.0361 283.293 38.0398C283.289 38.0476 283.286 38.0495 283.29 38.0459C283.294 38.0418 283.306 38.0308 283.33 38.0149L282.836 37.2625ZM282.404 38.0185H281.504C281.504 38.3145 281.563 38.6392 281.745 38.9357L282.512 38.464L283.278 37.9923C283.297 38.0226 283.304 38.0456 283.306 38.0528C283.307 38.059 283.304 38.0493 283.304 38.0185H282.404ZM282.512 38.464L281.772 38.9763C281.984 39.2824 282.283 39.4686 282.569 39.5831L282.903 38.7475L283.238 37.9119C283.203 37.898 283.193 37.8898 283.198 37.8937C283.205 37.8983 283.227 37.9162 283.252 37.9517L282.512 38.464ZM282.903 38.7475L282.619 39.6013C282.827 39.6708 283.025 39.7285 283.21 39.7721L283.416 38.896L283.623 38.0199C283.502 37.9915 283.358 37.9502 283.188 37.8937L282.903 38.7475ZM283.416 38.896L283.268 39.7838C283.454 39.8146 283.711 39.8482 284.03 39.8847L284.132 38.9905L284.234 38.0963C283.923 38.0608 283.703 38.0314 283.564 38.0082L283.416 38.896ZM284.132 38.9905L284.02 39.8835C284.37 39.9273 284.653 39.9698 284.873 40.0105L285.036 39.1255L285.2 38.2405C284.934 38.1912 284.614 38.1437 284.244 38.0974L284.132 38.9905ZM285.036 39.1255L284.873 40.0105C285.056 40.0445 285.256 40.1007 285.473 40.183L285.792 39.3415L286.112 38.5C285.807 38.3843 285.503 38.2965 285.2 38.2405L285.036 39.1255ZM285.792 39.3415L285.473 40.183C285.668 40.2567 285.77 40.3252 285.818 40.3674L286.413 39.6925L287.009 39.0176C286.751 38.7898 286.439 38.6243 286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.837 40.3839C285.876 40.4162 285.929 40.4762 285.981 40.595L286.805 40.2325L287.629 39.87C287.483 39.5388 287.275 39.2388 286.99 39.0011L286.413 39.6925ZM286.805 40.2325L285.987 40.6075C286.02 40.6803 286.053 40.803 286.053 41.002H286.953H287.853C287.853 40.607 287.788 40.2167 287.623 39.8575L286.805 40.2325ZM286.953 41.002H286.053C286.053 41.3291 285.939 41.5647 285.635 41.7808L286.157 42.514L286.679 43.2472C287.437 42.7073 287.853 41.9349 287.853 41.002H286.953ZM286.157 42.514L285.629 41.7851C285.291 42.0297 284.834 42.181 284.199 42.181V43.081V43.981C285.13 43.981 285.979 43.7543 286.685 43.2429L286.157 42.514ZM284.199 43.081V42.181C283.424 42.181 282.896 42.0051 282.535 41.7372L281.999 42.46L281.463 43.1828C282.218 43.7429 283.157 43.981 284.199 43.981V43.081ZM281.999 42.46L282.541 41.7414C282.232 41.5089 282.068 41.2041 282.062 40.721L281.162 40.732L280.262 40.743C280.274 41.7359 280.667 42.5831 281.457 43.1786L281.999 42.46Z" fill="url(#paint3_linear_2782_11310)" fill-opacity="0.4" mask="url(#path-7-outside-1_2782_11310)"/>
+<g opacity="0.8">
+<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="10.4625" fill="#1D1D21" stroke="#2D2D31" stroke-width="0.675"/>
+<mask id="mask0_2782_11310" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="57" width="537" height="165">
+<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="9.7875" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
+</mask>
+<g mask="url(#mask0_2782_11310)">
+<mask id="mask1_2782_11310" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="56" width="537" height="231">
+<rect x="323.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 323.613 57.2603)" fill="#D9D9D9"/>
+<rect x="239.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 239.699 57.2524)" fill="#D9D9D9"/>
+<rect x="407.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 407.613 57.2603)" fill="#D9D9D9"/>
+<rect x="323.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 323.699 57.2524)" fill="#D9D9D9"/>
+<rect x="491.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 491.613 57.2603)" fill="#D9D9D9"/>
+<rect x="407.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 407.699 57.2524)" fill="#D9D9D9"/>
+<rect x="575.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 575.613 57.2603)" fill="#D9D9D9"/>
+<rect x="491.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 491.699 57.2524)" fill="#D9D9D9"/>
+<rect x="659.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 659.613 57.2598)" fill="#D9D9D9"/>
+<rect x="575.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 575.699 57.252)" fill="#D9D9D9"/>
+<rect x="743.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 743.613 57.2598)" fill="#D9D9D9"/>
+<rect x="659.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 659.699 57.252)" fill="#D9D9D9"/>
+<rect x="239" y="83.6851" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="111.36" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="139.035" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="166.71" width="537" height="0.675" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask1_2782_11310)">
+<rect x="239" y="57" width="537" height="165" fill="url(#paint4_radial_2782_11310)"/>
+</g>
+</g>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.976 66.5929C251.603 66.3395 252.287 66.2002 253.002 66.2002C255.984 66.2002 258.402 68.6179 258.402 71.6002C258.402 71.9316 258.133 72.2002 257.802 72.2002C257.47 72.2002 257.202 71.9316 257.202 71.6002C257.202 69.2806 255.321 67.4002 253.002 67.4002C252.443 67.4002 251.912 67.5087 251.427 67.7053C251.12 67.8296 250.77 67.6814 250.645 67.3742C250.521 67.0671 250.669 66.7173 250.976 66.5929ZM249.799 67.9754C250.047 68.1946 250.071 68.5738 249.851 68.8222C249.198 69.563 248.802 70.5346 248.802 71.6002C248.802 71.9316 248.533 72.2002 248.202 72.2002C247.87 72.2002 247.602 71.9316 247.602 71.6002C247.602 70.2311 248.112 68.9797 248.952 68.0282C249.171 67.7797 249.55 67.7561 249.799 67.9754Z" fill="#414146"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.002 71.6002C250.002 69.9433 251.345 68.6002 253.002 68.6002C254.658 68.6002 256.002 69.9433 256.002 71.6002C256.002 71.9316 255.733 72.2002 255.402 72.2002C255.07 72.2002 254.802 71.9316 254.802 71.6002C254.802 70.6061 253.996 69.8002 253.002 69.8002C252.007 69.8002 251.202 70.6061 251.202 71.6002C251.202 72.6065 250.995 73.566 250.621 74.4375C250.49 74.742 250.137 74.8829 249.833 74.7522C249.528 74.6215 249.387 74.2687 249.518 73.9642C249.829 73.2396 250.002 72.4408 250.002 71.6002ZM255.354 72.8076C255.682 72.8595 255.905 73.1669 255.853 73.4942C255.774 73.9922 255.664 74.4801 255.526 74.9559C255.433 75.2741 255.1 75.457 254.782 75.3645C254.464 75.272 254.281 74.9391 254.374 74.6209C254.498 74.1931 254.597 73.7543 254.668 73.3062C254.72 72.9789 255.027 72.7557 255.354 72.8076Z" fill="#414146"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.002 71.0002C253.333 71.0002 253.602 71.2688 253.602 71.6002C253.602 72.942 253.326 74.2209 252.828 75.3823C252.697 75.6869 252.344 75.8278 252.04 75.6971C251.735 75.5665 251.594 75.2137 251.725 74.9092C252.16 73.8945 252.402 72.7763 252.402 71.6002C252.402 71.2688 252.67 71.0002 253.002 71.0002Z" fill="#414146"/>
+<path opacity="0.5" d="M262.938 67V75H261.969V67H262.938ZM267.239 75H264.77V67H267.348C268.124 67 268.788 67.1602 269.34 67.4805C269.892 67.7982 270.315 68.2552 270.61 68.8516C270.904 69.4453 271.051 70.1562 271.051 70.9844C271.051 71.8177 270.903 72.5352 270.606 73.1367C270.309 73.7357 269.877 74.1966 269.309 74.5195C268.741 74.8398 268.051 75 267.239 75ZM265.739 74.1406H267.176C267.838 74.1406 268.386 74.013 268.821 73.7578C269.256 73.5026 269.58 73.1393 269.793 72.668C270.007 72.1966 270.114 71.6354 270.114 70.9844C270.114 70.3385 270.008 69.7826 269.797 69.3164C269.586 68.8477 269.271 68.4883 268.852 68.2383C268.433 67.9857 267.911 67.8594 267.286 67.8594H265.739V74.1406Z" fill="#818186"/>
+<path d="M341 68.4995H340.998V68.7495C340.998 69.1637 340.662 69.4995 340.248 69.4995C339.834 69.4993 339.498 69.1636 339.498 68.7495V68.4995H338V73.4995H338.752C339.166 73.4997 339.502 73.8356 339.502 74.2495C339.502 74.6636 339.166 74.9993 338.752 74.9995H335.252C334.838 74.9995 334.502 74.6637 334.502 74.2495C334.502 73.8355 334.838 73.4995 335.252 73.4995H336V68.4995H334.502V68.7495C334.502 69.1636 334.166 69.4993 333.752 69.4995C333.338 69.4995 333.002 69.1637 333.002 68.7495V68.4995H333V66.9995H341V68.4995Z" fill="#414146"/>
+<path opacity="0.5" d="M352.313 67V75H351.375L347.016 68.7187H346.938V75H345.969V67H346.906L351.281 73.2969H351.359V67H352.313ZM355.782 75.1406C355.401 75.1406 355.056 75.069 354.746 74.9258C354.437 74.7799 354.19 74.5703 354.008 74.2969C353.826 74.0208 353.735 73.6875 353.735 73.2969C353.735 72.9531 353.802 72.6745 353.938 72.4609C354.073 72.2448 354.254 72.0755 354.481 71.9531C354.707 71.8307 354.957 71.7396 355.231 71.6797C355.507 71.6172 355.784 71.5677 356.063 71.5313C356.427 71.4844 356.723 71.4492 356.95 71.4258C357.179 71.3997 357.345 71.3568 357.45 71.2969C357.556 71.237 357.61 71.1328 357.61 70.9844V70.9531C357.61 70.5677 357.504 70.2682 357.293 70.0547C357.085 69.8411 356.769 69.7344 356.344 69.7344C355.904 69.7344 355.559 69.8307 355.309 70.0234C355.059 70.2161 354.883 70.4219 354.782 70.6406L353.907 70.3281C354.063 69.9635 354.271 69.6797 354.532 69.4766C354.795 69.2708 355.081 69.1276 355.391 69.0469C355.703 68.9635 356.011 68.9219 356.313 68.9219C356.506 68.9219 356.727 68.9453 356.977 68.9922C357.23 69.0365 357.473 69.1289 357.707 69.2695C357.944 69.4102 358.141 69.6224 358.297 69.9062C358.453 70.1901 358.532 70.5703 358.532 71.0469V75H357.61V74.1875H357.563C357.5 74.3177 357.396 74.457 357.25 74.6055C357.105 74.7539 356.911 74.8802 356.668 74.9844C356.426 75.0885 356.131 75.1406 355.782 75.1406ZM355.922 74.3125C356.287 74.3125 356.594 74.2409 356.844 74.0977C357.097 73.9544 357.287 73.7695 357.414 73.543C357.545 73.3164 357.61 73.0781 357.61 72.8281V71.9844C357.571 72.0312 357.485 72.0742 357.352 72.1133C357.222 72.1497 357.071 72.1823 356.899 72.2109C356.73 72.237 356.564 72.2604 356.403 72.2812C356.244 72.2995 356.115 72.3151 356.016 72.3281C355.776 72.3594 355.552 72.4102 355.344 72.4805C355.138 72.5482 354.972 72.651 354.844 72.7891C354.719 72.9245 354.657 73.1094 354.657 73.3437C354.657 73.6641 354.775 73.9062 355.012 74.0703C355.252 74.2318 355.555 74.3125 355.922 74.3125ZM360.104 75V69H360.995V69.9375H361.073C361.198 69.6172 361.4 69.3685 361.678 69.1914C361.957 69.0117 362.292 68.9219 362.682 68.9219C363.078 68.9219 363.408 69.0117 363.671 69.1914C363.936 69.3685 364.143 69.6172 364.292 69.9375H364.354C364.508 69.6276 364.738 69.3815 365.046 69.1992C365.353 69.0143 365.721 68.9219 366.151 68.9219C366.688 68.9219 367.126 69.0898 367.467 69.4258C367.809 69.7591 367.979 70.2786 367.979 70.9844V75H367.057V70.9844C367.057 70.5417 366.936 70.2253 366.694 70.0352C366.452 69.8451 366.167 69.75 365.839 69.75C365.417 69.75 365.09 69.8776 364.858 70.1328C364.626 70.3854 364.51 70.7057 364.51 71.0937V75H363.573V70.8906C363.573 70.5495 363.462 70.2747 363.241 70.0664C363.02 69.8555 362.734 69.75 362.385 69.75C362.146 69.75 361.922 69.8138 361.714 69.9414C361.508 70.069 361.341 70.2461 361.214 70.4727C361.089 70.6966 361.026 70.9557 361.026 71.25V75H360.104ZM372.07 75.125C371.492 75.125 370.994 74.9974 370.574 74.7422C370.158 74.4844 369.836 74.125 369.609 73.6641C369.385 73.2005 369.274 72.6615 369.274 72.0469C369.274 71.4323 369.385 70.8906 369.609 70.4219C369.836 69.9505 370.151 69.5833 370.555 69.3203C370.961 69.0547 371.435 68.9219 371.977 68.9219C372.289 68.9219 372.598 68.974 372.902 69.0781C373.207 69.1823 373.484 69.3516 373.734 69.5859C373.984 69.8177 374.184 70.125 374.332 70.5078C374.481 70.8906 374.555 71.362 374.555 71.9219V72.3125H369.93V71.5156H373.617C373.617 71.1771 373.55 70.875 373.414 70.6094C373.281 70.3437 373.091 70.1341 372.844 69.9805C372.599 69.8268 372.31 69.75 371.977 69.75C371.609 69.75 371.292 69.8411 371.024 70.0234C370.758 70.2031 370.553 70.4375 370.41 70.7266C370.267 71.0156 370.195 71.3255 370.195 71.6562V72.1875C370.195 72.6406 370.274 73.0247 370.43 73.3398C370.589 73.6523 370.809 73.8906 371.09 74.0547C371.371 74.2161 371.698 74.2969 372.07 74.2969C372.313 74.2969 372.531 74.263 372.727 74.1953C372.925 74.125 373.095 74.0208 373.238 73.8828C373.382 73.7422 373.492 73.5677 373.57 73.3594L374.461 73.6094C374.367 73.9115 374.21 74.1771 373.988 74.4062C373.767 74.6328 373.494 74.8099 373.168 74.9375C372.843 75.0625 372.477 75.125 372.07 75.125Z" fill="#818186"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M418.599 66.2002C418.268 66.2002 417.999 66.4688 417.999 66.8002V67.4002H417.399C416.736 67.4002 416.199 67.9375 416.199 68.6002V74.6002C416.199 75.2629 416.736 75.8002 417.399 75.8002H424.599C425.262 75.8002 425.799 75.2629 425.799 74.6002V68.6002C425.799 67.9375 425.262 67.4002 424.599 67.4002H423.999V66.8002C423.999 66.4688 423.731 66.2002 423.399 66.2002C423.068 66.2002 422.799 66.4688 422.799 66.8002V67.4002H419.199V66.8002C419.199 66.4688 418.931 66.2002 418.599 66.2002ZM418.599 69.2002C418.268 69.2002 417.999 69.4688 417.999 69.8002C417.999 70.1316 418.268 70.4002 418.599 70.4002H423.399C423.731 70.4002 423.999 70.1316 423.999 69.8002C423.999 69.4688 423.731 69.2002 423.399 69.2002H418.599Z" fill="#414146"/>
+<path opacity="0.5" d="M432.109 75.125C431.609 75.125 431.168 74.9987 430.785 74.7461C430.402 74.4909 430.103 74.1315 429.887 73.668C429.671 73.2018 429.563 72.651 429.563 72.0156C429.563 71.3854 429.671 70.8385 429.887 70.375C430.103 69.9115 430.404 69.5534 430.789 69.3008C431.174 69.0482 431.62 68.9219 432.125 68.9219C432.516 68.9219 432.824 68.987 433.051 69.1172C433.28 69.2448 433.454 69.3906 433.574 69.5547C433.697 69.7161 433.792 69.849 433.859 69.9531H433.938V67H434.859V75H433.969V74.0781H433.859C433.792 74.1875 433.695 74.3255 433.57 74.4922C433.445 74.6562 433.267 74.8034 433.035 74.9336C432.803 75.0612 432.495 75.125 432.109 75.125ZM432.234 74.2969C432.604 74.2969 432.917 74.2005 433.172 74.0078C433.427 73.8125 433.621 73.543 433.754 73.1992C433.887 72.8529 433.953 72.4531 433.953 72C433.953 71.5521 433.888 71.1602 433.758 70.8242C433.628 70.4857 433.435 70.2227 433.18 70.0352C432.924 69.8451 432.609 69.75 432.234 69.75C431.844 69.75 431.518 69.8503 431.258 70.0508C431 70.2487 430.806 70.5182 430.676 70.8594C430.548 71.1979 430.484 71.5781 430.484 72C430.484 72.4271 430.549 72.8151 430.68 73.1641C430.813 73.5104 431.008 73.7865 431.266 73.9922C431.526 74.1953 431.849 74.2969 432.234 74.2969ZM438.331 75.1406C437.951 75.1406 437.606 75.069 437.296 74.9258C436.986 74.7799 436.74 74.5703 436.558 74.2969C436.376 74.0208 436.285 73.6875 436.285 73.2969C436.285 72.9531 436.352 72.6745 436.488 72.4609C436.623 72.2448 436.804 72.0755 437.031 71.9531C437.257 71.8307 437.507 71.7396 437.781 71.6797C438.057 71.6172 438.334 71.5677 438.613 71.5313C438.977 71.4844 439.273 71.4492 439.499 71.4258C439.729 71.3997 439.895 71.3568 439.999 71.2969C440.106 71.237 440.16 71.1328 440.16 70.9844V70.9531C440.16 70.5677 440.054 70.2682 439.843 70.0547C439.635 69.8411 439.318 69.7344 438.894 69.7344C438.454 69.7344 438.109 69.8307 437.859 70.0234C437.609 70.2161 437.433 70.4219 437.331 70.6406L436.456 70.3281C436.613 69.9635 436.821 69.6797 437.081 69.4766C437.344 69.2708 437.631 69.1276 437.941 69.0469C438.253 68.9635 438.561 68.9219 438.863 68.9219C439.055 68.9219 439.277 68.9453 439.527 68.9922C439.779 69.0365 440.023 69.1289 440.257 69.2695C440.494 69.4102 440.691 69.6224 440.847 69.9062C441.003 70.1901 441.081 70.5703 441.081 71.0469V75H440.16V74.1875H440.113C440.05 74.3177 439.946 74.457 439.8 74.6055C439.654 74.7539 439.46 74.8802 439.218 74.9844C438.976 75.0885 438.68 75.1406 438.331 75.1406ZM438.472 74.3125C438.837 74.3125 439.144 74.2409 439.394 74.0977C439.647 73.9544 439.837 73.7695 439.964 73.543C440.094 73.3164 440.16 73.0781 440.16 72.8281V71.9844C440.12 72.0312 440.035 72.0742 439.902 72.1133C439.772 72.1497 439.62 72.1823 439.449 72.2109C439.279 72.237 439.114 72.2604 438.953 72.2812C438.794 72.2995 438.665 72.3151 438.566 72.3281C438.326 72.3594 438.102 72.4102 437.894 72.4805C437.688 72.5482 437.522 72.651 437.394 72.7891C437.269 72.9245 437.206 73.1094 437.206 73.3437C437.206 73.6641 437.325 73.9062 437.562 74.0703C437.801 74.2318 438.105 74.3125 438.472 74.3125ZM445.263 69V69.7812H442.154V69H445.263ZM443.06 67.5625H443.982V73.2812C443.982 73.5417 444.02 73.737 444.095 73.8672C444.174 73.9948 444.273 74.0807 444.392 74.125C444.515 74.1667 444.644 74.1875 444.779 74.1875C444.881 74.1875 444.964 74.1823 445.029 74.1719C445.094 74.1589 445.146 74.1484 445.185 74.1406L445.373 74.9687C445.31 74.9922 445.223 75.0156 445.111 75.0391C444.999 75.0651 444.857 75.0781 444.685 75.0781C444.425 75.0781 444.17 75.0221 443.92 74.9102C443.672 74.7982 443.467 74.6276 443.302 74.3984C443.141 74.1693 443.06 73.8802 443.06 73.5312V67.5625ZM448.991 75.125C448.413 75.125 447.914 74.9974 447.495 74.7422C447.079 74.4844 446.757 74.125 446.53 73.6641C446.306 73.2005 446.194 72.6615 446.194 72.0469C446.194 71.4323 446.306 70.8906 446.53 70.4219C446.757 69.9505 447.072 69.5833 447.476 69.3203C447.882 69.0547 448.356 68.9219 448.898 68.9219C449.21 68.9219 449.519 68.974 449.823 69.0781C450.128 69.1823 450.405 69.3516 450.655 69.5859C450.905 69.8177 451.105 70.125 451.253 70.5078C451.401 70.8906 451.476 71.362 451.476 71.9219V72.3125H446.851V71.5156H450.538C450.538 71.1771 450.47 70.875 450.335 70.6094C450.202 70.3437 450.012 70.1341 449.765 69.9805C449.52 69.8268 449.231 69.75 448.898 69.75C448.53 69.75 448.213 69.8411 447.944 70.0234C447.679 70.2031 447.474 70.4375 447.331 70.7266C447.188 71.0156 447.116 71.3255 447.116 71.6562V72.1875C447.116 72.6406 447.194 73.0247 447.351 73.3398C447.51 73.6523 447.73 73.8906 448.011 74.0547C448.292 74.2161 448.619 74.2969 448.991 74.2969C449.233 74.2969 449.452 74.263 449.648 74.1953C449.845 74.125 450.016 74.0208 450.159 73.8828C450.302 73.7422 450.413 73.5677 450.491 73.3594L451.382 73.6094C451.288 73.9115 451.131 74.1771 450.909 74.4062C450.688 74.6328 450.414 74.8099 450.089 74.9375C449.763 75.0625 449.398 75.125 448.991 75.125ZM459.643 71C459.643 71.8437 459.491 72.5729 459.186 73.1875C458.881 73.8021 458.463 74.276 457.932 74.6094C457.401 74.9427 456.794 75.1094 456.112 75.1094C455.429 75.1094 454.823 74.9427 454.291 74.6094C453.76 74.276 453.342 73.8021 453.038 73.1875C452.733 72.5729 452.581 71.8437 452.581 71C452.581 70.1562 452.733 69.4271 453.038 68.8125C453.342 68.1979 453.76 67.724 454.291 67.3906C454.823 67.0573 455.429 66.8906 456.112 66.8906C456.794 66.8906 457.401 67.0573 457.932 67.3906C458.463 67.724 458.881 68.1979 459.186 68.8125C459.491 69.4271 459.643 70.1562 459.643 71ZM458.706 71C458.706 70.3073 458.59 69.7227 458.358 69.2461C458.129 68.7695 457.817 68.4089 457.424 68.1641C457.034 67.9193 456.596 67.7969 456.112 67.7969C455.627 67.7969 455.189 67.9193 454.795 68.1641C454.405 68.4089 454.094 68.7695 453.862 69.2461C453.633 69.7227 453.518 70.3073 453.518 71C453.518 71.6927 453.633 72.2773 453.862 72.7539C454.094 73.2305 454.405 73.5911 454.795 73.8359C455.189 74.0807 455.627 74.2031 456.112 74.2031C456.596 74.2031 457.034 74.0807 457.424 73.8359C457.817 73.5911 458.129 73.2305 458.358 72.7539C458.59 72.2773 458.706 71.6927 458.706 71ZM463.709 69V69.7812H460.474V69H463.709ZM461.443 75V68.1719C461.443 67.8281 461.524 67.5417 461.685 67.3125C461.847 67.0833 462.056 66.9115 462.314 66.7969C462.572 66.6823 462.844 66.625 463.131 66.625C463.357 66.625 463.542 66.6432 463.685 66.6797C463.829 66.7161 463.935 66.75 464.006 66.7812L463.74 67.5781C463.693 67.5625 463.628 67.543 463.545 67.5195C463.464 67.4961 463.357 67.4844 463.224 67.4844C462.92 67.4844 462.7 67.5612 462.564 67.7148C462.431 67.8685 462.365 68.0937 462.365 68.3906V75H461.443ZM465.016 75V67H467.813C468.37 67 468.83 67.0964 469.192 67.2891C469.554 67.4792 469.823 67.7357 470 68.0586C470.177 68.3789 470.266 68.7344 470.266 69.125C470.266 69.4687 470.205 69.7526 470.082 69.9766C469.962 70.2005 469.804 70.3776 469.606 70.5078C469.41 70.638 469.198 70.7344 468.969 70.7969V70.875C469.214 70.8906 469.46 70.9766 469.707 71.1328C469.955 71.2891 470.162 71.513 470.328 71.8047C470.495 72.0964 470.578 72.4531 470.578 72.875C470.578 73.276 470.487 73.6367 470.305 73.957C470.123 74.2773 469.835 74.5312 469.442 74.7187C469.048 74.9062 468.537 75 467.906 75H465.016ZM465.985 74.1406H467.906C468.539 74.1406 468.988 74.0182 469.254 73.7734C469.522 73.526 469.656 73.2266 469.656 72.875C469.656 72.6042 469.587 72.3542 469.449 72.125C469.311 71.8932 469.115 71.7083 468.86 71.5703C468.604 71.4297 468.302 71.3594 467.953 71.3594H465.985V74.1406ZM465.985 70.5156H467.781C468.073 70.5156 468.336 70.4583 468.57 70.3437C468.807 70.2292 468.995 70.0677 469.133 69.8594C469.274 69.651 469.344 69.4062 469.344 69.125C469.344 68.7734 469.222 68.4753 468.977 68.2305C468.732 67.9831 468.344 67.8594 467.813 67.8594H465.985V70.5156ZM471.935 75V69H472.857V75H471.935ZM472.404 68C472.224 68 472.069 67.9388 471.939 67.8164C471.811 67.694 471.748 67.5469 471.748 67.375C471.748 67.2031 471.811 67.056 471.939 66.9336C472.069 66.8112 472.224 66.75 472.404 66.75C472.584 66.75 472.737 66.8112 472.865 66.9336C472.995 67.056 473.06 67.2031 473.06 67.375C473.06 67.5469 472.995 67.694 472.865 67.8164C472.737 67.9388 472.584 68 472.404 68ZM475.107 75.0625C474.915 75.0625 474.749 74.9935 474.611 74.8555C474.473 74.7174 474.404 74.5521 474.404 74.3594C474.404 74.1667 474.473 74.0013 474.611 73.8633C474.749 73.7253 474.915 73.6562 475.107 73.6562C475.3 73.6562 475.465 73.7253 475.603 73.8633C475.741 74.0013 475.81 74.1667 475.81 74.3594C475.81 74.487 475.778 74.6042 475.713 74.7109C475.65 74.8177 475.566 74.9036 475.459 74.9687C475.355 75.0313 475.238 75.0625 475.107 75.0625ZM478.027 75.0625C477.834 75.0625 477.669 74.9935 477.531 74.8555C477.392 74.7174 477.323 74.5521 477.323 74.3594C477.323 74.1667 477.392 74.0013 477.531 73.8633C477.669 73.7253 477.834 73.6562 478.027 73.6562C478.219 73.6562 478.385 73.7253 478.523 73.8633C478.661 74.0013 478.73 74.1667 478.73 74.3594C478.73 74.487 478.697 74.6042 478.632 74.7109C478.57 74.8177 478.485 74.9036 478.378 74.9687C478.274 75.0313 478.157 75.0625 478.027 75.0625ZM480.946 75.0625C480.753 75.0625 480.588 74.9935 480.45 74.8555C480.312 74.7174 480.243 74.5521 480.243 74.3594C480.243 74.1667 480.312 74.0013 480.45 73.8633C480.588 73.7253 480.753 73.6562 480.946 73.6562C481.139 73.6562 481.304 73.7253 481.442 73.8633C481.58 74.0013 481.649 74.1667 481.649 74.3594C481.649 74.487 481.616 74.6042 481.551 74.7109C481.489 74.8177 481.404 74.9036 481.297 74.9687C481.193 75.0313 481.076 75.0625 480.946 75.0625Z" fill="#818186"/>
+<circle cx="501.125" cy="68.125" r="0.625" fill="#414146"/>
+<rect x="503" y="67.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
+<ellipse cx="501.125" cy="71.125" rx="0.625" ry="0.625" fill="#414146"/>
+<rect x="503" y="70.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
+<ellipse cx="501.125" cy="74.125" rx="0.625" ry="0.625" fill="#414146"/>
+<rect x="503" y="73.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
+<path opacity="0.5" d="M519.438 69.5C519.352 69.237 519.238 69.0013 519.098 68.793C518.96 68.582 518.794 68.4023 518.602 68.2539C518.411 68.1055 518.195 67.9922 517.953 67.9141C517.711 67.8359 517.445 67.7969 517.156 67.7969C516.682 67.7969 516.251 67.9193 515.863 68.1641C515.475 68.4089 515.167 68.7695 514.938 69.2461C514.708 69.7227 514.594 70.3073 514.594 71C514.594 71.6927 514.71 72.2773 514.941 72.7539C515.173 73.2305 515.487 73.5911 515.883 73.8359C516.279 74.0807 516.724 74.2031 517.219 74.2031C517.677 74.2031 518.081 74.1055 518.43 73.9102C518.781 73.7122 519.055 73.4336 519.25 73.0742C519.448 72.7122 519.547 72.2865 519.547 71.7969L519.844 71.8594H517.438V71H520.484V71.8594C520.484 72.5182 520.344 73.0911 520.063 73.5781C519.784 74.0651 519.398 74.4427 518.906 74.7109C518.417 74.9766 517.854 75.1094 517.219 75.1094C516.51 75.1094 515.888 74.9427 515.352 74.6094C514.818 74.276 514.401 73.8021 514.102 73.1875C513.805 72.5729 513.656 71.8437 513.656 71C513.656 70.3672 513.741 69.7982 513.91 69.293C514.082 68.7852 514.324 68.3529 514.637 67.9961C514.949 67.6393 515.319 67.3659 515.746 67.1758C516.173 66.9857 516.643 66.8906 517.156 66.8906C517.578 66.8906 517.971 66.9544 518.336 67.082C518.703 67.207 519.03 67.3854 519.316 67.6172C519.605 67.8464 519.846 68.1211 520.039 68.4414C520.232 68.7591 520.365 69.112 520.438 69.5H519.438ZM524.424 75.125C523.846 75.125 523.347 74.9974 522.928 74.7422C522.511 74.4844 522.19 74.125 521.963 73.6641C521.739 73.2005 521.627 72.6615 521.627 72.0469C521.627 71.4323 521.739 70.8906 521.963 70.4219C522.19 69.9505 522.505 69.5833 522.909 69.3203C523.315 69.0547 523.789 68.9219 524.33 68.9219C524.643 68.9219 524.952 68.974 525.256 69.0781C525.561 69.1823 525.838 69.3516 526.088 69.5859C526.338 69.8177 526.537 70.125 526.686 70.5078C526.834 70.8906 526.909 71.362 526.909 71.9219V72.3125H522.284V71.5156H525.971C525.971 71.1771 525.903 70.875 525.768 70.6094C525.635 70.3437 525.445 70.1341 525.198 69.9805C524.953 69.8268 524.664 69.75 524.33 69.75C523.963 69.75 523.646 69.8411 523.377 70.0234C523.112 70.2031 522.907 70.4375 522.764 70.7266C522.621 71.0156 522.549 71.3255 522.549 71.6562V72.1875C522.549 72.6406 522.627 73.0247 522.784 73.3398C522.942 73.6523 523.162 73.8906 523.444 74.0547C523.725 74.2161 524.052 74.2969 524.424 74.2969C524.666 74.2969 524.885 74.263 525.08 74.1953C525.278 74.125 525.449 74.0208 525.592 73.8828C525.735 73.7422 525.846 73.5677 525.924 73.3594L526.815 73.6094C526.721 73.9115 526.564 74.1771 526.342 74.4062C526.121 74.6328 525.847 74.8099 525.522 74.9375C525.196 75.0625 524.83 75.125 524.424 75.125ZM529.123 71.3906V75H528.201V69H529.092V69.9375H529.17C529.31 69.6328 529.524 69.388 529.81 69.2031C530.097 69.0156 530.467 68.9219 530.92 68.9219C531.326 68.9219 531.681 69.0052 531.986 69.1719C532.291 69.3359 532.528 69.5859 532.697 69.9219C532.866 70.2552 532.951 70.6771 532.951 71.1875V75H532.029V71.25C532.029 70.7786 531.907 70.4115 531.662 70.1484C531.417 69.8828 531.081 69.75 530.654 69.75C530.36 69.75 530.097 69.8138 529.865 69.9414C529.636 70.069 529.455 70.2552 529.322 70.5C529.189 70.7448 529.123 71.0417 529.123 71.3906ZM536.791 75.125C536.291 75.125 535.85 74.9987 535.467 74.7461C535.084 74.4909 534.785 74.1315 534.568 73.668C534.352 73.2018 534.244 72.651 534.244 72.0156C534.244 71.3854 534.352 70.8385 534.568 70.375C534.785 69.9115 535.085 69.5534 535.471 69.3008C535.856 69.0482 536.302 68.9219 536.807 68.9219C537.197 68.9219 537.506 68.987 537.733 69.1172C537.962 69.2448 538.136 69.3906 538.256 69.5547C538.378 69.7161 538.473 69.849 538.541 69.9531H538.619V67H539.541V75H538.65V74.0781H538.541C538.473 74.1875 538.377 74.3255 538.252 74.4922C538.127 74.6562 537.949 74.8034 537.717 74.9336C537.485 75.0612 537.177 75.125 536.791 75.125ZM536.916 74.2969C537.286 74.2969 537.598 74.2005 537.854 74.0078C538.109 73.8125 538.303 73.543 538.436 73.1992C538.568 72.8529 538.635 72.4531 538.635 72C538.635 71.5521 538.57 71.1602 538.44 70.8242C538.309 70.4857 538.117 70.2227 537.861 70.0352C537.606 69.8451 537.291 69.75 536.916 69.75C536.525 69.75 536.2 69.8503 535.94 70.0508C535.682 70.2487 535.488 70.5182 535.358 70.8594C535.23 71.1979 535.166 71.5781 535.166 72C535.166 72.4271 535.231 72.8151 535.361 73.1641C535.494 73.5104 535.69 73.7865 535.947 73.9922C536.208 74.1953 536.531 74.2969 536.916 74.2969ZM543.763 75.125C543.185 75.125 542.686 74.9974 542.267 74.7422C541.85 74.4844 541.529 74.125 541.302 73.6641C541.078 73.2005 540.966 72.6615 540.966 72.0469C540.966 71.4323 541.078 70.8906 541.302 70.4219C541.529 69.9505 541.844 69.5833 542.247 69.3203C542.654 69.0547 543.128 68.9219 543.669 68.9219C543.982 68.9219 544.29 68.974 544.595 69.0781C544.9 69.1823 545.177 69.3516 545.427 69.5859C545.677 69.8177 545.876 70.125 546.025 70.5078C546.173 70.8906 546.247 71.362 546.247 71.9219V72.3125H541.622V71.5156H545.31C545.31 71.1771 545.242 70.875 545.107 70.6094C544.974 70.3437 544.784 70.1341 544.537 69.9805C544.292 69.8268 544.003 69.75 543.669 69.75C543.302 69.75 542.984 69.8411 542.716 70.0234C542.451 70.2031 542.246 70.4375 542.103 70.7266C541.96 71.0156 541.888 71.3255 541.888 71.6562V72.1875C541.888 72.6406 541.966 73.0247 542.122 73.3398C542.281 73.6523 542.501 73.8906 542.783 74.0547C543.064 74.2161 543.391 74.2969 543.763 74.2969C544.005 74.2969 544.224 74.263 544.419 74.1953C544.617 74.125 544.788 74.0208 544.931 73.8828C545.074 73.7422 545.185 73.5677 545.263 73.3594L546.154 73.6094C546.06 73.9115 545.902 74.1771 545.681 74.4062C545.46 74.6328 545.186 74.8099 544.861 74.9375C544.535 75.0625 544.169 75.125 543.763 75.125ZM547.54 75V69H548.43V69.9062H548.493C548.602 69.6094 548.8 69.3685 549.087 69.1836C549.373 68.9987 549.696 68.9062 550.055 68.9062C550.123 68.9062 550.208 68.9076 550.309 68.9102C550.411 68.9128 550.488 68.9167 550.54 68.9219V69.8594C550.509 69.8516 550.437 69.8398 550.325 69.8242C550.216 69.806 550.1 69.7969 549.977 69.7969C549.686 69.7969 549.425 69.8581 549.196 69.9805C548.97 70.1003 548.79 70.2669 548.657 70.4805C548.527 70.6914 548.462 70.9323 548.462 71.2031V75H547.54Z" fill="#818186"/>
+<path d="M584.201 68.53L588.999 70.929L593.797 68.53C593.761 67.8998 593.238 67.3999 592.599 67.3999H585.399C584.76 67.3999 584.237 67.8998 584.201 68.53Z" fill="#414146"/>
+<path d="M593.799 69.8706L588.999 72.2707L584.199 69.8707V73.3999C584.199 74.0626 584.736 74.5999 585.399 74.5999H592.599C593.262 74.5999 593.799 74.0626 593.799 73.3999V69.8706Z" fill="#414146"/>
+<path opacity="0.5" d="M600.359 75.125C599.781 75.125 599.283 74.9974 598.863 74.7422C598.447 74.4844 598.125 74.125 597.898 73.6641C597.674 73.2005 597.563 72.6615 597.563 72.0469C597.563 71.4323 597.674 70.8906 597.898 70.4219C598.125 69.9505 598.44 69.5833 598.844 69.3203C599.25 69.0547 599.724 68.9219 600.266 68.9219C600.578 68.9219 600.887 68.974 601.191 69.0781C601.496 69.1823 601.773 69.3516 602.023 69.5859C602.273 69.8177 602.473 70.125 602.621 70.5078C602.77 70.8906 602.844 71.362 602.844 71.9219V72.3125H598.219V71.5156H601.906C601.906 71.1771 601.839 70.875 601.703 70.6094C601.57 70.3437 601.38 70.1341 601.133 69.9805C600.888 69.8268 600.599 69.75 600.266 69.75C599.898 69.75 599.581 69.8411 599.313 70.0234C599.047 70.2031 598.842 70.4375 598.699 70.7266C598.556 71.0156 598.484 71.3255 598.484 71.6562V72.1875C598.484 72.6406 598.563 73.0247 598.719 73.3398C598.878 73.6523 599.098 73.8906 599.379 74.0547C599.66 74.2161 599.987 74.2969 600.359 74.2969C600.602 74.2969 600.82 74.263 601.016 74.1953C601.214 74.125 601.384 74.0208 601.527 73.8828C601.671 73.7422 601.781 73.5677 601.859 73.3594L602.75 73.6094C602.656 73.9115 602.499 74.1771 602.277 74.4062C602.056 74.6328 601.783 74.8099 601.457 74.9375C601.132 75.0625 600.766 75.125 600.359 75.125ZM604.136 75V69H605.027V69.9375H605.105C605.23 69.6172 605.432 69.3685 605.71 69.1914C605.989 69.0117 606.324 68.9219 606.714 68.9219C607.11 68.9219 607.439 69.0117 607.703 69.1914C607.968 69.3685 608.175 69.6172 608.324 69.9375H608.386C608.54 69.6276 608.77 69.3815 609.078 69.1992C609.385 69.0143 609.753 68.9219 610.183 68.9219C610.719 68.9219 611.158 69.0898 611.499 69.4258C611.841 69.7591 612.011 70.2786 612.011 70.9844V75H611.089V70.9844C611.089 70.5417 610.968 70.2253 610.726 70.0352C610.484 69.8451 610.199 69.75 609.87 69.75C609.449 69.75 609.122 69.8776 608.89 70.1328C608.658 70.3854 608.542 70.7057 608.542 71.0937V75H607.605V70.8906C607.605 70.5495 607.494 70.2747 607.273 70.0664C607.051 69.8555 606.766 69.75 606.417 69.75C606.178 69.75 605.954 69.8138 605.745 69.9414C605.54 70.069 605.373 70.2461 605.245 70.4727C605.12 70.6966 605.058 70.9557 605.058 71.25V75H604.136ZM615.352 75.1406C614.972 75.1406 614.627 75.069 614.317 74.9258C614.007 74.7799 613.761 74.5703 613.579 74.2969C613.397 74.0208 613.305 73.6875 613.305 73.2969C613.305 72.9531 613.373 72.6745 613.509 72.4609C613.644 72.2448 613.825 72.0755 614.051 71.9531C614.278 71.8307 614.528 71.7396 614.801 71.6797C615.078 71.6172 615.355 71.5677 615.634 71.5313C615.998 71.4844 616.294 71.4492 616.52 71.4258C616.749 71.3997 616.916 71.3568 617.02 71.2969C617.127 71.237 617.18 71.1328 617.18 70.9844V70.9531C617.18 70.5677 617.075 70.2682 616.864 70.0547C616.656 69.8411 616.339 69.7344 615.915 69.7344C615.475 69.7344 615.13 69.8307 614.88 70.0234C614.63 70.2161 614.454 70.4219 614.352 70.6406L613.477 70.3281C613.634 69.9635 613.842 69.6797 614.102 69.4766C614.365 69.2708 614.652 69.1276 614.962 69.0469C615.274 68.9635 615.581 68.9219 615.884 68.9219C616.076 68.9219 616.298 68.9453 616.548 68.9922C616.8 69.0365 617.044 69.1289 617.278 69.2695C617.515 69.4102 617.712 69.6224 617.868 69.9062C618.024 70.1901 618.102 70.5703 618.102 71.0469V75H617.18V74.1875H617.134C617.071 74.3177 616.967 74.457 616.821 74.6055C616.675 74.7539 616.481 74.8802 616.239 74.9844C615.997 75.0885 615.701 75.1406 615.352 75.1406ZM615.493 74.3125C615.857 74.3125 616.165 74.2409 616.415 74.0977C616.667 73.9544 616.857 73.7695 616.985 73.543C617.115 73.3164 617.18 73.0781 617.18 72.8281V71.9844C617.141 72.0312 617.055 72.0742 616.923 72.1133C616.792 72.1497 616.641 72.1823 616.469 72.2109C616.3 72.237 616.135 72.2604 615.973 72.2812C615.815 72.2995 615.686 72.3151 615.587 72.3281C615.347 72.3594 615.123 72.4102 614.915 72.4805C614.709 72.5482 614.542 72.651 614.415 72.7891C614.29 72.9245 614.227 73.1094 614.227 73.3437C614.227 73.6641 614.346 73.9062 614.583 74.0703C614.822 74.2318 615.126 74.3125 615.493 74.3125ZM619.675 75V69H620.597V75H619.675ZM620.144 68C619.964 68 619.809 67.9388 619.679 67.8164C619.551 67.694 619.487 67.5469 619.487 67.375C619.487 67.2031 619.551 67.056 619.679 66.9336C619.809 66.8112 619.964 66.75 620.144 66.75C620.323 66.75 620.477 66.8112 620.605 66.9336C620.735 67.056 620.8 67.2031 620.8 67.375C620.8 67.5469 620.735 67.694 620.605 67.8164C620.477 67.9388 620.323 68 620.144 68ZM623.097 67V75H622.175V67H623.097ZM625.129 75H624.113L627.051 67H628.051L630.988 75H629.972L627.582 68.2656H627.519L625.129 75ZM625.504 71.875H629.597V72.7344H625.504V71.875ZM634.265 75.125C633.765 75.125 633.323 74.9987 632.941 74.7461C632.558 74.4909 632.258 74.1315 632.042 73.668C631.826 73.2018 631.718 72.651 631.718 72.0156C631.718 71.3854 631.826 70.8385 632.042 70.375C632.258 69.9115 632.559 69.5534 632.944 69.3008C633.33 69.0482 633.775 68.9219 634.28 68.9219C634.671 68.9219 634.98 68.987 635.206 69.1172C635.435 69.2448 635.61 69.3906 635.73 69.5547C635.852 69.7161 635.947 69.849 636.015 69.9531H636.093V67H637.015V75H636.124V74.0781H636.015C635.947 74.1875 635.851 74.3255 635.726 74.4922C635.601 74.6562 635.422 74.8034 635.191 74.9336C634.959 75.0612 634.65 75.125 634.265 75.125ZM634.39 74.2969C634.76 74.2969 635.072 74.2005 635.327 74.0078C635.583 73.8125 635.777 73.543 635.909 73.1992C636.042 72.8529 636.109 72.4531 636.109 72C636.109 71.5521 636.043 71.1602 635.913 70.8242C635.783 70.4857 635.59 70.2227 635.335 70.0352C635.08 69.8451 634.765 69.75 634.39 69.75C633.999 69.75 633.674 69.8503 633.413 70.0508C633.155 70.2487 632.961 70.5182 632.831 70.8594C632.704 71.1979 632.64 71.5781 632.64 72C632.64 72.4271 632.705 72.8151 632.835 73.1641C632.968 73.5104 633.163 73.7865 633.421 73.9922C633.681 74.1953 634.004 74.2969 634.39 74.2969ZM639.393 75.0625C639.2 75.0625 639.035 74.9935 638.897 74.8555C638.759 74.7174 638.69 74.5521 638.69 74.3594C638.69 74.1667 638.759 74.0013 638.897 73.8633C639.035 73.7253 639.2 73.6562 639.393 73.6562C639.586 73.6562 639.751 73.7253 639.889 73.8633C640.027 74.0013 640.096 74.1667 640.096 74.3594C640.096 74.487 640.064 74.6042 639.999 74.7109C639.936 74.8177 639.851 74.9036 639.745 74.9687C639.64 75.0313 639.523 75.0625 639.393 75.0625ZM642.312 75.0625C642.12 75.0625 641.954 74.9935 641.816 74.8555C641.678 74.7174 641.609 74.5521 641.609 74.3594C641.609 74.1667 641.678 74.0013 641.816 73.8633C641.954 73.7253 642.12 73.6562 642.312 73.6562C642.505 73.6562 642.67 73.7253 642.808 73.8633C642.946 74.0013 643.016 74.1667 643.016 74.3594C643.016 74.487 642.983 74.6042 642.918 74.7109C642.855 74.8177 642.771 74.9036 642.664 74.9687C642.56 75.0313 642.443 75.0625 642.312 75.0625ZM645.232 75.0625C645.039 75.0625 644.874 74.9935 644.736 74.8555C644.598 74.7174 644.529 74.5521 644.529 74.3594C644.529 74.1667 644.598 74.0013 644.736 73.8633C644.874 73.7253 645.039 73.6562 645.232 73.6562C645.424 73.6562 645.59 73.7253 645.728 73.8633C645.866 74.0013 645.935 74.1667 645.935 74.3594C645.935 74.487 645.902 74.6042 645.837 74.7109C645.775 74.8177 645.69 74.9036 645.583 74.9687C645.479 75.0313 645.362 75.0625 645.232 75.0625Z" fill="#818186"/>
+<rect y="132" width="1080" height="52" fill="url(#paint5_linear_2782_11310)"/>
+</g>
+<defs>
+<clipPath id="bgblur_1_2782_11310_clip_path" transform="translate(-226 -12)"><rect x="230" y="16" width="555" height="186" rx="12"/>
+</clipPath><filter id="filter1_f_2782_11310" x="181.312" y="-14.708" width="124.59" height="146.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2782_11310"/>
+</filter>
+<clipPath id="bgblur_2_2782_11310_clip_path" transform="translate(-233.2 -19.2)"><rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35"/>
+</clipPath><radialGradient id="paint0_radial_2782_11310" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.096 48.3533) rotate(121.198) scale(55.123 15.9923)">
+<stop offset="1" stop-color="#F02E65"/>
+</radialGradient>
+<linearGradient id="paint1_linear_2782_11310" x1="208.997" y1="39.5865" x2="221.1" y2="51.1389" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="0.45" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint2_linear_2782_11310" x1="110.649" y1="77.423" x2="195.926" y2="184.679" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="0.45" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint3_linear_2782_11310" x1="237.215" y1="34.4117" x2="246.997" y2="42.5566" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD366E"/>
+<stop offset="0.45" stop-color="#FE9567"/>
+<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
+</linearGradient>
+<radialGradient id="paint4_radial_2782_11310" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(265.177 71.5771) rotate(31.7066) scale(256.703 334.987)">
+<stop stop-color="#2D2D31"/>
+<stop offset="1" stop-color="#737373" stop-opacity="0"/>
+</radialGradient>
+<linearGradient id="paint5_linear_2782_11310" x1="516.264" y1="132" x2="516.601" y2="175.52" gradientUnits="userSpaceOnUse">
+<stop stop-color="#1D1D21" stop-opacity="0"/>
+<stop offset="1" stop-color="#1D1D21"/>
+</linearGradient>
+<clipPath id="clip0_2782_11310">
+<path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="white"/>
+</clipPath>
+</defs>
+</svg>

From 72acec7e180941f04afb84d72e017c3566c86953 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 13:22:10 +0530
Subject: [PATCH 029/118] fix: sidebar states.

---
 src/lib/components/sidebar.svelte | 8 ++++----
 src/lib/helpers/sidebar.ts        | 4 ++--
 src/lib/layout/container.svelte   | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 732c435551..4356837d73 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
-    import { fade } from 'svelte/transition';
-    import { page } from '$app/state';
+    import { page } from '$app/stores';
     import { app } from '$lib/stores/app';
+    import { fade } from 'svelte/transition';
     import {
         Icon,
         Sidebar,
@@ -71,7 +71,7 @@
         }
     }
 
-    $: state = $isTabletViewport ? 'closed' : getSidebarState();
+    $: state = $isTabletViewport ? 'closed' : getSidebarState($page);
 
     const projectOptions = [
         { name: 'Auth', icon: IconUserGroup, slug: 'auth', category: 'build' },
@@ -89,7 +89,7 @@
     ];
 
     const isSelected = (service: string): boolean => {
-        return page.route.id?.includes(service);
+        return $page.route.id?.includes(service);
     };
 </script>
 
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
index e3c6b0c3c2..eda2de3f7e 100644
--- a/src/lib/helpers/sidebar.ts
+++ b/src/lib/helpers/sidebar.ts
@@ -1,7 +1,7 @@
 import { get } from 'svelte/store';
 import { user } from '$lib/stores/user';
 import { sdk } from '$lib/stores/sdk';
-import { page } from '$app/state';
+import type { Page } from '@sveltejs/kit';
 
 const userPreferences = () => get(user)?.prefs;
 
@@ -18,7 +18,7 @@ export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
     }
 }
 
-export function getSidebarState(): 'open' | 'icons' {
+export function getSidebarState(page: Page): 'open' | 'icons' {
     // for spreadsheet
     const isInDatabases = page.route.id?.includes('database-[database]');
     if (isInDatabases) return 'icons';
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 88b36e041b..23a7cff424 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -41,7 +41,7 @@
             margin-block: var(--base-8) !important;
 
             &:first-child {
-                margin-inline: 2.75rem;
+                margin-inline: 4rem;
             }
 
             &.slotSpacing {

From 0dd763300cfaa3555b99b768089ef773c3d98812 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 13:30:13 +0530
Subject: [PATCH 030/118] bump: dep.

---
 package.json   |  2 +-
 pnpm-lock.yaml | 10 +++++-----
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index 2b5aa11bf7..f3dc953dc0 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8702ae4c02..8cadd30871 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3679,7 +3679,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8057bf6(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13

From a02a94e4598c796c38db8ee4a3147aa08beb2468 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 13:58:37 +0530
Subject: [PATCH 031/118] bump: dep.

---
 package.json                                          |  2 +-
 pnpm-lock.yaml                                        | 10 +++++-----
 .../collection-[collection]/layout/emptySheet.svelte  | 11 +++++++++++
 3 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index f3dc953dc0..c645d6087d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 8cadd30871..e9c689d09c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3679,7 +3679,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c5b4d80(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index d7e4c7eb6b..8c4df75d16 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -39,6 +39,8 @@
                 title: 'ID',
                 type: 'string',
                 width: 180,
+                draggable: false,
+                resizable: false,
                 icon: IconFingerPrint
             },
             ...middle,
@@ -47,12 +49,15 @@
                 title: '',
                 width: 555 * 1.5,
                 draggable: false,
+                resizable: false,
                 type: 'string',
                 icon: IconPlus
             },
             {
                 id: 'empty',
                 title: '',
+                draggable: false,
+                resizable: false,
                 type: 'string'
             }
         ];
@@ -66,6 +71,7 @@
                 type: 'datetime',
                 width: 180,
                 draggable: false,
+                resizable: false,
                 icon: IconCalendar
             },
             {
@@ -74,6 +80,7 @@
                 type: 'datetime',
                 width: 180,
                 draggable: false,
+                resizable: false,
                 icon: IconCalendar
             }
         ),
@@ -84,6 +91,7 @@
                 type: 'boolean',
                 width: 180,
                 draggable: false,
+                resizable: false,
                 isAction: false
             },
             {
@@ -92,6 +100,7 @@
                 type: 'string',
                 width: 180,
                 draggable: false,
+                resizable: false,
                 isAction: false
             }
         ),
@@ -102,6 +111,7 @@
                 type: 'string',
                 width: 180,
                 draggable: false,
+                resizable: false,
                 isAction: false
             },
             {
@@ -110,6 +120,7 @@
                 type: 'string',
                 width: 180,
                 draggable: false,
+                resizable: false,
                 isAction: false
             }
         )

From 7e65eb4a3e384a0614eda2b5d8294dca7044ff33 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 18:47:45 +0530
Subject: [PATCH 032/118] fix: sidebar issues.

---
 src/lib/components/sidebar.svelte |  2 +-
 src/lib/helpers/sidebar.ts        | 13 +++++++++----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 4356837d73..04ccbd6fba 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -101,7 +101,7 @@
     <Sidebar.Base
         {...$$props}
         bind:state
-        on:resize={(event) => updateSidebarState(event.detail)}
+        on:resize={(event) => updateSidebarState($page, event.detail)}
         resizable>
         <div slot="top">
             <div class="only-mobile-tablet top">
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
index eda2de3f7e..fb0c91bd12 100644
--- a/src/lib/helpers/sidebar.ts
+++ b/src/lib/helpers/sidebar.ts
@@ -5,7 +5,14 @@ import type { Page } from '@sveltejs/kit';
 
 const userPreferences = () => get(user)?.prefs;
 
-export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
+// for spreadsheet, closed with icons
+const isInDatabasesRoute = (page: Page) => {
+    return page.route.id?.includes('databases/database-[database]');
+}
+
+export function updateSidebarState(page: Page, state: 'closed' | 'open' | 'icons') {
+    if (isInDatabasesRoute(page)) return;
+
     if (state === 'open' || state === 'icons') {
         const currentPrefs = userPreferences();
 
@@ -19,9 +26,7 @@ export function updateSidebarState(state: 'closed' | 'open' | 'icons') {
 }
 
 export function getSidebarState(page: Page): 'open' | 'icons' {
-    // for spreadsheet
-    const isInDatabases = page.route.id?.includes('database-[database]');
-    if (isInDatabases) return 'icons';
+    if (isInDatabasesRoute(page)) return 'icons';
 
     const currentPrefs = userPreferences();
     if (currentPrefs && currentPrefs.sidebarState) {

From 48b86bcf751a0570befdff3374bdc59599953bf7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 19:22:40 +0530
Subject: [PATCH 033/118] move: attribute creation on top level.

---
 src/lib/helpers/sidebar.ts                    |  2 +-
 .../collection-[collection]/+layout.svelte    | 12 +++----
 .../collection-[collection]/+page.svelte      | 35 +++++++++++++++----
 .../attributes/+page.svelte                   | 22 +++---------
 .../indexes/+page.svelte                      |  7 ++--
 .../layout/sidesheet.svelte                   |  2 +-
 .../collection-[collection]/store.ts          |  2 ++
 7 files changed, 44 insertions(+), 38 deletions(-)

diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
index fb0c91bd12..5ad4d0ece4 100644
--- a/src/lib/helpers/sidebar.ts
+++ b/src/lib/helpers/sidebar.ts
@@ -8,7 +8,7 @@ const userPreferences = () => get(user)?.prefs;
 // for spreadsheet, closed with icons
 const isInDatabasesRoute = (page: Page) => {
     return page.route.id?.includes('databases/database-[database]');
-}
+};
 
 export function updateSidebarState(page: Page, state: 'closed' | 'open' | 'icons') {
     if (isInDatabasesRoute(page)) return;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index d319f65c30..c92551f632 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -202,10 +202,10 @@
 
 <slot />
 
-{#if $createAttributeArgs.showCreate}
-    <CreateAttribute {...$createAttributeArgs} />
-{/if}
+<!--{#if $createAttributeArgs.showCreate}-->
+<!--    <CreateAttribute {...$createAttributeArgs} />-->
+<!--{/if}-->
 
-{#if $showCreateIndex}
-    <CreateIndex bind:showCreateIndex={$showCreateIndex} />
-{/if}
+<!--{#if $showCreateIndex}-->
+<!--    <CreateIndex bind:showCreateIndex={$showCreateIndex} />-->
+<!--{/if}-->
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 07375467b9..458ef84d71 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -9,7 +9,13 @@
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
     import { Icon, Layout, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
-    import { collection, columns, isCsvImportInProgress, showRecordsCreateSheet } from './store';
+    import {
+        collection,
+        columns,
+        isCsvImportInProgress,
+        showRecordsCreateSheet,
+        showCreateAttributeSheet
+    } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
     import FilePicker from '$lib/components/filePicker.svelte';
@@ -18,17 +24,20 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { IconPlus, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRecord from './createRecord.svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
+    import SideSheet from './layout/sidesheet.svelte';
+    import CreateAttribute from './createAttribute.svelte';
+    import { type Option } from './attributes/store';
 
     export let data: PageData;
 
     let showImportCSV = false;
     const filterColumns = writable<Column[]>([]);
+    let createAttribute: CreateAttribute;
+    let selectedOption: Option['name'] = 'String';
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
@@ -185,9 +194,7 @@
                     primary: {
                         text: 'Create column',
                         onClick: async () => {
-                            await goto(
-                                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/attributes`
-                            );
+                            $showCreateAttributeSheet = true;
                         }
                     }
                 }} />
@@ -212,3 +219,17 @@
     collection={$collection}
     bind:showSheet={$showRecordsCreateSheet.show}
     bind:existingData={$showRecordsCreateSheet.document} />
+
+<SideSheet
+    title="Insert column"
+    bind:show={$showCreateAttributeSheet}
+    submit={{
+        text: 'Insert',
+        onClick: async () => await createAttribute?.submit(),
+        disabled: !selectedOption
+    }}>
+    <CreateAttribute
+        showCreate={$showCreateAttributeSheet}
+        bind:selectedOption
+        bind:this={createAttribute} />
+</SideSheet>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 0a042943a0..1a99bd5d0c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -14,14 +14,13 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import CreateAttribute from '../createAttribute.svelte';
     import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import { attributes, type Attributes, indexes, isCsvImportInProgress } from '../store';
     import Delete from './deleteAttribute.svelte';
     import EditAttribute from './edit.svelte';
-    import { attributeOptions, type Option } from './store';
+    import { attributeOptions } from './store';
     import {
         IconArrowSmRight,
         IconDotsHorizontal,
@@ -41,11 +40,10 @@
     import SideSheet from '../layout/sidesheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
     import EmptySheet from '../layout/emptySheet.svelte';
+    import { showCreateAttributeSheet } from '../store';
 
     let showDropdown = [];
-    let selectedOption: Option['name'] = 'String';
     let selectedAttribute: Attributes = null;
-    let showCreate = false;
     let showDelete = false;
     let showCreateIndex = false;
     let showFailed = false;
@@ -54,7 +52,6 @@
     let showEdit = false;
     let createIndex: CreateIndex;
     let editAttribute: EditAttribute;
-    let createAttribute: CreateAttribute;
 
     const attributeFormatIcon = {
         ip: IconLocationMarker,
@@ -89,7 +86,7 @@
                 size="s"
                 secondary
                 disabled={$isCsvImportInProgress}
-                on:click={() => (showCreate = true)}
+                on:click={() => ($showCreateAttributeSheet = true)}
                 event="create_attribute">
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create column
@@ -273,23 +270,12 @@
             showActions={$canWriteCollections}
             actions={{
                 primary: {
-                    onClick: () => (showCreate = true)
+                    onClick: () => ($showCreateAttributeSheet = true)
                 }
             }} />
     {/if}
 </div>
 
-<SideSheet
-    title="Insert column"
-    bind:show={showCreate}
-    submit={{
-        text: 'Insert',
-        onClick: async () => await createAttribute.submit(),
-        disabled: !selectedOption
-    }}>
-    <CreateAttribute {showCreate} bind:selectedOption bind:this={createAttribute} />
-</SideSheet>
-
 {#if showDelete}
     <Delete bind:showDelete {selectedAttribute} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 86ea921418..7a77003d14 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -28,12 +28,11 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import SideSheet from '../layout/sidesheet.svelte';
     import { flags } from '$lib/flags';
     import type { PageData } from './$types';
+    import { showCreateAttributeSheet } from '../store';
 
     let {
         data
@@ -201,9 +200,7 @@
                 primary: {
                     text: 'Create columns',
                     onClick: async () => {
-                        await goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/attributes`
-                        );
+                        $showCreateAttributeSheet = true;
                     }
                 }
             }} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
index a7c9009e38..7727cd6331 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/sidesheet.svelte
@@ -19,7 +19,7 @@
             | {
                   text: string;
                   disabled?: boolean;
-                  onClick: () => void | Promise<void>;
+                  onClick?: () => void | Promise<void>;
               }
             | undefined;
         children?: Snippet;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 72eaa68048..b3e9a84703 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -67,3 +67,5 @@ export const sortState = writable({
     column: null as string,
     direction: 'default' as SortDirection
 });
+
+export const showCreateAttributeSheet = writable(false);

From b6dd10469ed79ab9dda874ef17bc0fa12365e49e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 23 Jul 2025 19:28:33 +0530
Subject: [PATCH 034/118] update: correct options.

---
 .../collection-[collection]/spreadsheet.svelte           | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 1b2d2d7a05..eb6197de75 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -23,7 +23,8 @@
         columns,
         databaseColumnSheetOptions,
         databaseRowSheetOptions,
-        sortState
+        sortState,
+        showCreateAttributeSheet
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -380,9 +381,7 @@
         bind:selectedRows
         bind:columns={$columns}
         emptyCells={emptyCellsCount}
-        bottomActionClick={() => {
-            // do something
-        }}>
+        bottomActionClick={() => (showRecordsCreateSheet.show = true)}>
         <svelte:fragment slot="header" let:root>
             {#each $columns as column (column.id)}
                 {#if column.isAction}
@@ -390,7 +389,7 @@
                         <Button.Button
                             icon
                             variant="extra-compact"
-                            on:click={() => (showRecordsCreateSheet.show = true)}>
+                            on:click={() => ($showCreateAttributeSheet = true)}>
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
                         </Button.Button>
                     </Spreadsheet.Header.Cell>

From 2048e92100b232b86f39ccd86df28ea327454375 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Jul 2025 12:30:40 +0530
Subject: [PATCH 035/118] update: columns primary key badge.

---
 src/lib/components/columnSelector.svelte      | 50 ++++++++----
 .../attributes/+page.svelte                   | 81 +++++++++++++++----
 .../spreadsheet.svelte                        | 11 ++-
 3 files changed, 108 insertions(+), 34 deletions(-)

diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index ca95b5875e..3f401fcd60 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -4,7 +4,14 @@
     import { preferences } from '$lib/stores/preferences';
     import { onMount, type Snippet } from 'svelte';
     import type { Column } from '$lib/helpers/types';
-    import { ActionMenu, Divider, Layout, Popover, Selector } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Divider,
+        Layout,
+        Popover,
+        Selector
+    } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
 
     let {
@@ -172,7 +179,7 @@
 <svelte:window on:resize={calcMaxHeight} />
 
 {#if $columns?.length}
-    {@const placement = isNewStyle ? undefined : 'bottom-end'}
+    {@const placement = isNewStyle ? 'bottom-start' : 'bottom-end'}
     <Popover let:toggle {placement} padding="none">
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
@@ -201,20 +208,31 @@
                         </Layout.Stack>
                     {/if}
 
-                    {#each filteredColumns as column}
-                        {#if !column?.exclude}
-                            <ActionMenu.Item.Button
-                                on:click={() => toggleColumn(column)}
-                                disabled={allowNoColumns
-                                    ? false
-                                    : visibleRealColumns.length <= 1 && !column.hide}>
-                                <Layout.Stack direction="row" gap="s">
-                                    <Selector.Checkbox size="s" checked={!column.hide} />
-                                    {column.title}
-                                </Layout.Stack>
-                            </ActionMenu.Item.Button>
-                        {/if}
-                    {/each}
+                    <Layout.Stack
+                        gap="none"
+                        direction="column"
+                        style="height: 145px; overflow: scroll;">
+                        {#each filteredColumns as column}
+                            {#if !column?.exclude}
+                                <ActionMenu.Item.Button
+                                    on:click={() => toggleColumn(column)}
+                                    disabled={allowNoColumns
+                                        ? false
+                                        : visibleRealColumns.length <= 1 && !column.hide}>
+                                    <Layout.Stack direction="row" gap="s">
+                                        <Selector.Checkbox size="s" checked={!column.hide} />
+                                        {column.title}
+                                        {#if isNewStyle && column.isPrimary}
+                                            <Badge
+                                                content="Primary key"
+                                                size="xs"
+                                                variant="secondary" />
+                                        {/if}
+                                    </Layout.Stack>
+                                </ActionMenu.Item.Button>
+                            {/if}
+                        {/each}
+                    </Layout.Stack>
                 </ActionMenu.Root>
             </div>
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 1a99bd5d0c..817a248add 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -31,7 +31,8 @@
         IconSwitchHorizontal,
         IconTrash,
         IconViewList,
-        IconLockClosed
+        IconLockClosed,
+        IconFingerPrint
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -41,15 +42,46 @@
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
     import EmptySheet from '../layout/emptySheet.svelte';
     import { showCreateAttributeSheet } from '../store';
+    import { type Models } from '@appwrite.io/console';
 
-    let showDropdown = [];
-    let selectedAttribute: Attributes = null;
-    let showDelete = false;
-    let showCreateIndex = false;
-    let showFailed = false;
-    let error = '';
+    const updatedAttributes = $derived.by(() => {
+        return [
+            {
+                key: '$id',
+                type: 'string',
+                required: true,
+                name: 'ID'
+            } as Models.AttributeString & {
+                name: string;
+            },
+            ...$attributes,
+            {
+                key: '$createdAt',
+                type: 'datetime',
+                required: true,
+                name: 'createdAt'
+            } as Models.AttributeDatetime & {
+                name: string;
+            },
+            {
+                key: '$updatedAt',
+                type: 'datetime',
+                required: true,
+                name: 'updatedAt'
+            } as Models.AttributeDatetime & {
+                name: string;
+            }
+        ];
+    });
 
-    let showEdit = false;
+    let error = $state('');
+    let showDropdown = $state([]);
+    let showFailed = $state(false);
+    let showDelete = $state(false);
+    let showCreateIndex = $state(false);
+    let selectedAttribute: Attributes = $state(null);
+
+    let showEdit = $state(false);
     let createIndex: CreateIndex;
     let editAttribute: EditAttribute;
 
@@ -73,10 +105,10 @@
         }
     }
 
-    const emptyCellsLimit = $isSmallViewport ? 14 : 16;
-
-    $: emptyCellsCount =
-        $attributes.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $attributes.length;
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
+    const emptyCellsCount = $derived(
+        $attributes.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $attributes.length
+    );
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -96,10 +128,11 @@
 </Container>
 
 <div class="databases-spreadsheet">
-    {#if $attributes.length}
+    {#if updatedAttributes.length}
         <SpreadsheetContainer>
             <Spreadsheet.Root
                 let:root
+                allowSelection
                 height="100%"
                 emptyCells={emptyCellsCount}
                 columns={[
@@ -118,7 +151,7 @@
                     <Spreadsheet.Header.Cell column="actions" {root} />
                 </svelte:fragment>
 
-                {#each $attributes as attribute, index}
+                {#each updatedAttributes as attribute, index}
                     {@const option = attributeOptions.find(
                         (option) => option.type === attribute.type
                     )}
@@ -134,17 +167,31 @@
                                 {:else if 'format' in attribute && attribute.format}
                                     {@const icon = attributeFormatIcon[attribute?.format]}
                                     <Icon {icon} size="s" />
+                                {:else if attribute.key === '$id'}
+                                    <Icon icon={IconFingerPrint} size="s" />
                                 {:else}
                                     <Icon icon={option.icon} size="s" />
                                 {/if}
+
                                 <Layout.Stack direction="row" alignItems="center" gap="s">
                                     <Layout.Stack
                                         inline
                                         direction="row"
                                         alignItems="center"
                                         gap="xxs">
-                                        <span class="text u-trim-1" data-private
-                                            >{attribute.key}</span>
+                                        <span class="text u-trim-1" data-private>
+                                            {#if attribute.key === '$id' || attribute.key === '$createdAt' || attribute.key === '$updatedAt'}
+                                                {attribute['name']}
+                                                {#if attribute.key === '$id'}
+                                                    <Badge
+                                                        size="xs"
+                                                        variant="secondary"
+                                                        content="Primary key" />
+                                                {/if}
+                                            {:else}
+                                                {attribute.key}
+                                            {/if}
+                                        </span>
                                         {#if isString(attribute) && attribute.encrypt}
                                             <Tooltip>
                                                 <Icon
@@ -258,7 +305,7 @@
                         alignItems="center"
                         justifyContent="space-between">
                         <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                            {$attributes.length} columns
+                            {updatedAttributes.length} columns
                         </Typography.Text>
                     </Layout.Stack>
                 </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index eb6197de75..175f22065d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -173,7 +173,8 @@
                 draggable: false,
                 type: 'string',
                 icon: IconFingerPrint,
-                isEditable: false
+                isEditable: false,
+                isPrimary: true
             },
             {
                 id: '$createdAt',
@@ -410,6 +411,14 @@
                                     alignItems="center"
                                     alignContent="center">
                                     {column.title}
+
+                                    {#if column.isPrimary}
+                                        <Badge
+                                            content="Primary key"
+                                            size="xs"
+                                            variant="secondary" />
+                                    {/if}
+
                                     <SortButton
                                         onSort={sort}
                                         column={column.id}

From 371ff198006ecb5d04687a1ae7013e9c8db8819c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Jul 2025 15:37:53 +0530
Subject: [PATCH 036/118] update: columns primary key badge, move sheets
 around.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 ++--
 .../collection-[collection]/+layout.svelte    | 53 ++++++++++++++++---
 .../collection-[collection]/+page.svelte      | 22 ++------
 .../attributes/+page.svelte                   | 52 ++++++++++++------
 .../indexes/+page.svelte                      |  4 +-
 .../layout/emptySheet.svelte                  |  2 +-
 .../spreadsheet.svelte                        | 33 ++----------
 8 files changed, 96 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index c645d6087d..eaacc39c9b 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e9c689d09c..97e9c6ee71 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3679,7 +3679,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@7ac7261(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index c92551f632..097b631bba 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -19,7 +19,7 @@
     import { Dependencies } from '$lib/constants';
     import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { collection } from './store';
+    import { collection, databaseColumnSheetOptions, databaseRowSheetOptions, showCreateAttributeSheet } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateAttribute from './createAttribute.svelte';
     import { writable } from 'svelte/store';
@@ -28,10 +28,16 @@
     import { database } from '../store';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
     import { page } from '$app/state';
-    import CreateIndex from './indexes/createIndex.svelte';
     import { base } from '$app/paths';
     import { canWriteCollections } from '$lib/stores/roles';
     import { IconEye, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
+    import SideSheet from './layout/sidesheet.svelte';
+    import EditDocument from './editDocument.svelte';
+    import EditAttribute from './attributes/edit.svelte';
+
+    let editDocument: EditDocument;
+    let createAttribute: CreateAttribute;
+    let selectedOption: Option['name'] = 'String';
 
     onMount(() => {
         return realtime
@@ -202,10 +208,41 @@
 
 <slot />
 
-<!--{#if $createAttributeArgs.showCreate}-->
-<!--    <CreateAttribute {...$createAttributeArgs} />-->
-<!--{/if}-->
+<SideSheet
+    title="Insert column"
+    bind:show={$showCreateAttributeSheet}
+    submit={{
+        text: 'Insert',
+        onClick: async () => await createAttribute?.submit(),
+        disabled: !selectedOption
+    }}>
+    <CreateAttribute
+        showCreate={$showCreateAttributeSheet}
+        bind:selectedOption
+        bind:this={createAttribute} />
+</SideSheet>
+
+<SideSheet
+    title={$databaseColumnSheetOptions.title}
+    bind:show={$databaseColumnSheetOptions.show}
+    submit={{
+        text: 'Update',
+        disabled: $databaseColumnSheetOptions.disableSubmit,
+        onClick: () => $databaseColumnSheetOptions.submitAction()
+    }}>
+    <EditAttribute
+        isModal={false}
+        showEdit={$databaseColumnSheetOptions.isEdit}
+        selectedAttribute={$databaseColumnSheetOptions.column} />
+</SideSheet>
 
-<!--{#if $showCreateIndex}-->
-<!--    <CreateIndex bind:showCreateIndex={$showCreateIndex} />-->
-<!--{/if}-->
+<SideSheet
+    title={$databaseRowSheetOptions.title}
+    bind:show={$databaseRowSheetOptions.show}
+    submit={{
+        text: 'Update',
+        disabled: editDocument?.isDisabled(),
+        onClick: async () => await editDocument?.update()
+    }}>
+    <EditDocument bind:document={$databaseRowSheetOptions.document} bind:this={editDocument} />
+</SideSheet>
\ No newline at end of file
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 458ef84d71..2da9c9e5fe 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -28,16 +28,12 @@
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRecord from './createRecord.svelte';
-    import SideSheet from './layout/sidesheet.svelte';
-    import CreateAttribute from './createAttribute.svelte';
-    import { type Option } from './attributes/store';
+    import { onDestroy } from 'svelte';
 
     export let data: PageData;
 
     let showImportCSV = false;
     const filterColumns = writable<Column[]>([]);
-    let createAttribute: CreateAttribute;
-    let selectedOption: Option['name'] = 'String';
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
@@ -86,6 +82,8 @@
             $isCsvImportInProgress = false;
         }
     }
+
+    onDestroy(() => ($showCreateAttributeSheet = false));
 </script>
 
 {#key page.params.collection}
@@ -219,17 +217,3 @@
     collection={$collection}
     bind:showSheet={$showRecordsCreateSheet.show}
     bind:existingData={$showRecordsCreateSheet.document} />
-
-<SideSheet
-    title="Insert column"
-    bind:show={$showCreateAttributeSheet}
-    submit={{
-        text: 'Insert',
-        onClick: async () => await createAttribute?.submit(),
-        disabled: !selectedOption
-    }}>
-    <CreateAttribute
-        showCreate={$showCreateAttributeSheet}
-        bind:selectedOption
-        bind:this={createAttribute} />
-</SideSheet>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 817a248add..873dda7faf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -34,7 +34,7 @@
         IconLockClosed,
         IconFingerPrint
     } from '@appwrite.io/pink-icons-svelte';
-    import type { ComponentProps } from 'svelte';
+    import { type ComponentProps, onDestroy } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import CsvDisabled from '../csvDisabled.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -50,26 +50,38 @@
                 key: '$id',
                 type: 'string',
                 required: true,
-                name: 'ID'
+                name: 'ID',
+                selectable: false,
+                system: true
             } as Models.AttributeString & {
                 name: string;
+                selectable: boolean;
+                system: boolean;
             },
             ...$attributes,
             {
                 key: '$createdAt',
                 type: 'datetime',
                 required: true,
-                name: 'createdAt'
+                name: 'createdAt',
+                selectable: false,
+                system: true
             } as Models.AttributeDatetime & {
                 name: string;
+                selectable: boolean;
+                system: boolean;
             },
             {
                 key: '$updatedAt',
                 type: 'datetime',
                 required: true,
-                name: 'updatedAt'
+                name: 'updatedAt',
+                selectable: false,
+                system: true
             } as Models.AttributeDatetime & {
                 name: string;
+                selectable: boolean;
+                system: boolean;
             }
         ];
     });
@@ -109,6 +121,8 @@
     const emptyCellsCount = $derived(
         $attributes.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $attributes.length
     );
+
+    onDestroy(() => ($showCreateAttributeSheet = false));
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -118,7 +132,9 @@
                 size="s"
                 secondary
                 disabled={$isCsvImportInProgress}
-                on:click={() => ($showCreateAttributeSheet = true)}
+                on:click={() => {
+                    $showCreateAttributeSheet = true;
+                }}
                 event="create_attribute">
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create column
@@ -155,7 +171,7 @@
                     {@const option = attributeOptions.find(
                         (option) => option.type === attribute.type
                     )}
-                    <Spreadsheet.Row.Base {root}>
+                    <Spreadsheet.Row.Base {root} select={attribute['system'] ? 'disabled' : true}>
                         <Spreadsheet.Cell column="key" {root} isEditable={false}>
                             <Layout.Stack direction="row" alignItems="center">
                                 {#if isRelationship(attribute)}
@@ -255,16 +271,18 @@
                                         <Icon icon={IconDotsHorizontal} size="s" />
                                     </Button>
                                     <ActionMenu.Root slot="tooltip" let:toggle>
-                                        <ActionMenu.Item.Button
-                                            leadingIcon={IconPencil}
-                                            on:click={(event) => {
-                                                toggle(event);
-                                                showEdit = true;
-                                                selectedAttribute = attribute;
-                                                showDropdown[index] = false;
-                                            }}>
-                                            Update
-                                        </ActionMenu.Item.Button>
+                                        {#if !attribute['system']}
+                                            <ActionMenu.Item.Button
+                                                leadingIcon={IconPencil}
+                                                on:click={(event) => {
+                                                    toggle(event);
+                                                    showEdit = true;
+                                                    selectedAttribute = attribute;
+                                                    showDropdown[index] = false;
+                                                }}>
+                                                Update
+                                            </ActionMenu.Item.Button>
+                                        {/if}
                                         {#if !isRelationship(attribute)}
                                             <ActionMenu.Item.Button
                                                 leadingIcon={IconPlus}
@@ -277,7 +295,7 @@
                                                 Create index
                                             </ActionMenu.Item.Button>
                                         {/if}
-                                        {#if attribute.status !== 'processing'}
+                                        {#if attribute.status !== 'processing' && !attribute['system']}
                                             <ActionMenu.Item.Button
                                                 status="danger"
                                                 leadingIcon={IconTrash}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 7a77003d14..484bb22143 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -24,7 +24,7 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onMount } from 'svelte';
+    import { type ComponentProps, onDestroy, onMount } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
@@ -80,6 +80,8 @@
             columns = columns.filter((col) => col.id !== 'lengths');
         }
     });
+
+    onDestroy(() => ($showCreateAttributeSheet = false));
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 8c4df75d16..34c32aafb1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -260,7 +260,7 @@
         position: fixed;
 
         @media (min-width: 1024px) {
-            left: 55%; /* TODO: if both sidebars open, use 55%, else 50% */
+            left: 52.5%;
             bottom: 40%;
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 175f22065d..ba800556e1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -10,7 +10,7 @@
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import { type Models, Query } from '@appwrite.io/console';
-    import { type ComponentType, onMount } from 'svelte';
+    import { type ComponentType, onDestroy, onMount } from 'svelte';
     import type { PageData } from './$types';
     import {
         isRelationship,
@@ -58,9 +58,6 @@
         IconViewList
     } from '@appwrite.io/pink-icons-svelte';
     import SheetOptions from './sheetOptions.svelte';
-    import EditDocument from './editDocument.svelte';
-    import SideSheet from './layout/sidesheet.svelte';
-    import EditAttribute from './attributes/edit.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
     import SpreadsheetContainer from './layout/spreadsheet.svelte';
     import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
@@ -79,7 +76,6 @@
     let showRelationships = false;
     let relationshipData: Partial<Models.Document>[];
     let selectedRelationship: Models.AttributeRelationship = null;
-    let editDocument: EditDocument;
 
     $: documents = data.documents;
 
@@ -87,6 +83,8 @@
         displayNames = preferences.getDisplayNames();
     });
 
+    onDestroy(() => ($showCreateAttributeSheet = false));
+
     function formatArray(array: unknown[]) {
         if (array.length === 0) return '[ ]';
 
@@ -673,31 +671,6 @@
     </p>
 </Confirm>
 
-<SideSheet
-    title={$databaseColumnSheetOptions.title}
-    bind:show={$databaseColumnSheetOptions.show}
-    submit={{
-        text: 'Update',
-        disabled: $databaseColumnSheetOptions.disableSubmit,
-        onClick: () => $databaseColumnSheetOptions.submitAction()
-    }}>
-    <EditAttribute
-        isModal={false}
-        showEdit={$databaseColumnSheetOptions.isEdit}
-        selectedAttribute={$databaseColumnSheetOptions.column} />
-</SideSheet>
-
-<SideSheet
-    title={$databaseRowSheetOptions.title}
-    bind:show={$databaseRowSheetOptions.show}
-    submit={{
-        text: 'Update',
-        disabled: editDocument?.isDisabled(),
-        onClick: async () => await editDocument?.update()
-    }}>
-    <EditDocument bind:document={$databaseRowSheetOptions.document} bind:this={editDocument} />
-</SideSheet>
-
 <style lang="scss">
     .floating-action-bar {
         left: 50%;

From 1308776bed24e143f55358321caaf91573979c0c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 24 Jul 2025 19:28:52 +0530
Subject: [PATCH 037/118] update: persist column ordering.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +++---
 src/lib/stores/preferences.ts                 | 30 ++++++++++++++++++
 .../collection-[collection]/+layout.svelte    |  9 ++++--
 .../attributes/+page.svelte                   | 23 ++++++++++++--
 .../attributes/deleteAttribute.svelte         |  1 +
 .../layout/spreadsheet.svelte                 |  4 +--
 .../spreadsheet.svelte                        | 31 +++++++++++++++++--
 .../collection-[collection]/store.ts          | 19 ++++++++++++
 9 files changed, 113 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index eaacc39c9b..d13daa57a2 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 97e9c6ee71..e3f1f9920f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3679,7 +3679,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@19f15c8(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index c552158a27..2da020e1c6 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -16,6 +16,7 @@ type Preferences = {
 
 type TeamPreferences = {
     names?: string[];
+    order?: string[];
 };
 
 type PreferencesStore = {
@@ -26,6 +27,9 @@ type PreferencesStore = {
     displayNames?: {
         [key: string]: TeamPreferences['names'];
     };
+    columnOrder?: {
+        [key: string]: TeamPreferences['order'];
+    };
 } & { hideAiDisclaimer?: boolean };
 
 async function updateConsolePreferences(store: PreferencesStore): Promise<void> {
@@ -188,6 +192,32 @@ function createPreferences() {
                 return n;
             });
 
+            await sdk.forConsole.teams.updatePrefs(orgId, teamPrefs);
+        },
+
+        getColumnOrder(collectionId: string): TeamPreferences['order'] {
+            return preferences?.columnOrder[collectionId] ?? [];
+        },
+
+        async saveColumnOrder(
+            orgId: string,
+            collectionId: string,
+            columnIds: TeamPreferences['order']
+        ) {
+            let teamPrefs: Models.Preferences;
+
+            await updateAndSync((n) => {
+                if (!n?.columnOrder) {
+                    n ??= {};
+                    n.columnOrder ??= {};
+                }
+
+                teamPrefs = n;
+                n.columnOrder[collectionId] = columnIds;
+
+                return n;
+            });
+
             await sdk.forConsole.teams.updatePrefs(orgId, teamPrefs);
         }
     };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 097b631bba..445373a129 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -19,7 +19,12 @@
     import { Dependencies } from '$lib/constants';
     import { realtime } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
-    import { collection, databaseColumnSheetOptions, databaseRowSheetOptions, showCreateAttributeSheet } from './store';
+    import {
+        collection,
+        databaseColumnSheetOptions,
+        databaseRowSheetOptions,
+        showCreateAttributeSheet
+    } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateAttribute from './createAttribute.svelte';
     import { writable } from 'svelte/store';
@@ -245,4 +250,4 @@
         onClick: async () => await editDocument?.update()
     }}>
     <EditDocument bind:document={$databaseRowSheetOptions.document} bind:this={editDocument} />
-</SideSheet>
\ No newline at end of file
+</SideSheet>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 873dda7faf..50a34caf3f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -17,7 +17,13 @@
     import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
-    import { attributes, type Attributes, indexes, isCsvImportInProgress } from '../store';
+    import {
+        attributes,
+        type Attributes,
+        indexes,
+        isCsvImportInProgress,
+        reorderItems
+    } from '../store';
     import Delete from './deleteAttribute.svelte';
     import EditAttribute from './edit.svelte';
     import { attributeOptions } from './store';
@@ -34,7 +40,7 @@
         IconLockClosed,
         IconFingerPrint
     } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onDestroy } from 'svelte';
+    import { type ComponentProps, onDestroy, onMount } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import CsvDisabled from '../csvDisabled.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -43,9 +49,11 @@
     import EmptySheet from '../layout/emptySheet.svelte';
     import { showCreateAttributeSheet } from '../store';
     import { type Models } from '@appwrite.io/console';
+    import { preferences } from '$lib/stores/preferences';
+    import { page } from '$app/state';
 
     const updatedAttributes = $derived.by(() => {
-        return [
+        const baseAttrs = [
             {
                 key: '$id',
                 type: 'string',
@@ -84,6 +92,8 @@
                 system: boolean;
             }
         ];
+
+        return reorderItems(baseAttrs, columnsOrder);
     });
 
     let error = $state('');
@@ -93,6 +103,9 @@
     let showCreateIndex = $state(false);
     let selectedAttribute: Attributes = $state(null);
 
+    let columnsOrder = $state([]);
+    const collectionId = page.params.collection;
+
     let showEdit = $state(false);
     let createIndex: CreateIndex;
     let editAttribute: EditAttribute;
@@ -122,6 +135,10 @@
         $attributes.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $attributes.length
     );
 
+    onMount(() => {
+        columnsOrder = preferences.getColumnOrder(collectionId);
+    });
+
     onDestroy(() => ($showCreateAttributeSheet = false));
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index d51641c731..d92cdcf8c8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -18,6 +18,7 @@
     let error: string;
     let checked = false;
 
+    // TODO: sync the columnsOrder here as well.
     async function handleDelete() {
         try {
             await sdk
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte
index 34d70515e3..c297096fbb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/spreadsheet.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
-
     let spreadsheetHeight = '75vh';
     let spreadsheetWrapper: HTMLDivElement;
 
@@ -10,7 +8,7 @@
         spreadsheetHeight = window.innerHeight - rect.top + 'px';
     }
 
-    onMount(resizeSheet);
+    resizeSheet();
 </script>
 
 <svelte:window on:resize={resizeSheet} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index ba800556e1..4b418ea5e6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -24,7 +24,8 @@
         databaseColumnSheetOptions,
         databaseRowSheetOptions,
         sortState,
-        showCreateAttributeSheet
+        showCreateAttributeSheet,
+        reorderItems
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -72,6 +73,8 @@
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
 
+    let columnsOrder = [];
+
     let displayNames = {};
     let showRelationships = false;
     let relationshipData: Partial<Models.Document>[];
@@ -81,10 +84,20 @@
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
+        columnsOrder = preferences.getColumnOrder(collectionId);
     });
 
     onDestroy(() => ($showCreateAttributeSheet = false));
 
+    function saveColumnsOrder(newOrder: string[]) {
+        preferences
+            .saveColumnOrder(data.organization.$id ?? data.project.teamId, collectionId, newOrder)
+            .then(() => {
+                columnsOrder = newOrder;
+                columns.set(reorderItems($columns, columnsOrder));
+            });
+    }
+
     function formatArray(array: unknown[]) {
         if (array.length === 0) return '[ ]';
 
@@ -270,13 +283,24 @@
                     $databaseColumnSheetOptions.column.key
                 );
 
+            if (columnsOrder.includes($databaseColumnSheetOptions.column.key)) {
+                const updatedOrder = columnsOrder.filter(
+                    (id) => id !== $databaseColumnSheetOptions.column.key
+                );
+                saveColumnsOrder(updatedOrder);
+                columnsOrder = updatedOrder;
+            }
+
             trackEvent(Submit.AttributeDelete);
             addNotification({
                 type: 'success',
                 message: 'Attribute deleted'
             });
+
             invalidate(Dependencies.COLLECTION);
             invalidate(Dependencies.DOCUMENTS);
+
+            $databaseColumnSheetOptions.column = null;
         } catch (error) {
             addNotification({ type: 'error', message: error.message });
             trackError(error, Submit.AttributeDelete);
@@ -380,7 +404,10 @@
         bind:selectedRows
         bind:columns={$columns}
         emptyCells={emptyCellsCount}
-        bottomActionClick={() => (showRecordsCreateSheet.show = true)}>
+        bottomActionClick={() => (showRecordsCreateSheet.show = true)}
+        on:columnsSwap={(order) => {
+            saveColumnsOrder(order.detail);
+        }}>
         <svelte:fragment slot="header" let:root>
             {#each $columns as column (column.id)}
                 {#if column.isAction}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index b3e9a84703..8c2c29eafd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -69,3 +69,22 @@ export const sortState = writable({
 });
 
 export const showCreateAttributeSheet = writable(false);
+
+export function reorderItems<T extends { id: string } | { key: string }>(
+    items: T[],
+    order: string[] = []
+): T[] {
+    if (!order.length) return items;
+
+    const getItemId = (item: T): string => {
+        return 'id' in item ? item.id : item.key;
+    };
+
+    const itemMap = Object.fromEntries(items.map((item) => [getItemId(item), item]));
+    const orderSet = new Set(order);
+
+    return [
+        ...(order.map((id) => itemMap[id]).filter(Boolean) as T[]),
+        ...items.filter((item) => !orderSet.has(getItemId(item)))
+    ];
+}

From eb436d23594f186e762bf11042eb3706a64396f8 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 25 Jul 2025 19:53:37 +0530
Subject: [PATCH 038/118] update: persist column ordering and widths.

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  10 +-
 src/lib/helpers/types.ts                      |   1 +
 src/lib/stores/preferences.ts                 |  65 ++++++----
 .../collection-[collection]/+layout.svelte    |  22 +++-
 .../collection-[collection]/+page.svelte      |   5 +-
 .../attributes/+page.svelte                   |   6 +-
 .../createAttribute.svelte                    |  52 +++++++-
 .../indexes/+page.svelte                      |   4 +-
 .../layout/emptySheet.svelte                  |  21 +++-
 .../sheetOptions.svelte                       |  15 ++-
 .../spreadsheet.svelte                        | 112 ++++++++++++------
 .../collection-[collection]/store.ts          |  33 +++++-
 .../createCollection.svelte                   |   1 -
 .../database-[database]/subNavigation.svelte  |   3 +-
 15 files changed, 270 insertions(+), 82 deletions(-)

diff --git a/package.json b/package.json
index d13daa57a2..29effd4a5a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e3f1f9920f..429364a7d0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3679,7 +3679,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c88c338(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 73e9a9f95c..abb4c133a3 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -12,6 +12,7 @@ export type PinkColumn = {
               min: number;
           }
         | number;
+    minimumWidth?: number;
     hide?: boolean;
 };
 
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 2da020e1c6..eb43031023 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -17,6 +17,7 @@ type Preferences = {
 type TeamPreferences = {
     names?: string[];
     order?: string[];
+    widths?: { [columnId: string]: { fixed: number | { min: number }; resized: number } };
 };
 
 type PreferencesStore = {
@@ -30,6 +31,9 @@ type PreferencesStore = {
     columnOrder?: {
         [key: string]: TeamPreferences['order'];
     };
+    columnWidths?: {
+        [key: string]: TeamPreferences['widths'];
+    };
 } & { hideAiDisclaimer?: boolean };
 
 async function updateConsolePreferences(store: PreferencesStore): Promise<void> {
@@ -49,6 +53,7 @@ async function updateConsolePreferences(store: PreferencesStore): Promise<void>
 function createPreferences() {
     const { subscribe, set, update } = writable<PreferencesStore>({});
     let preferences: PreferencesStore = {};
+    let teamPreferences: PreferencesStore = {};
 
     if (browser) {
         // fresh fetch.
@@ -74,6 +79,17 @@ function createPreferences() {
         }
     });
 
+    async function loadTeamPreferences(orgId: string) {
+        try {
+            const teamPrefs = await sdk.forConsole.teams.getPrefs(orgId);
+            teamPreferences = teamPrefs ?? {};
+            return teamPreferences;
+        } catch (error) {
+            teamPreferences = {};
+            return teamPreferences;
+        }
+    }
+
     /**
      * Update the local store and then synchronizes them on user prefs.
      */
@@ -162,15 +178,7 @@ function createPreferences() {
                 n.collections[collectionId] = Array.from(new Set(columns));
                 return n;
             }),
-        loadTeamPrefs: async (id: string) => {
-            const teamPrefs = await sdk.forConsole.teams.getPrefs(id);
-            update((n) => {
-                n[id] = teamPrefs;
-                return n;
-            });
-
-            return teamPrefs;
-        },
+        loadTeamPrefs: loadTeamPreferences,
         getDisplayNames: () => {
             return preferences?.displayNames ?? {};
         },
@@ -196,7 +204,7 @@ function createPreferences() {
         },
 
         getColumnOrder(collectionId: string): TeamPreferences['order'] {
-            return preferences?.columnOrder[collectionId] ?? [];
+            return teamPreferences?.columnOrder?.[collectionId] ?? [];
         },
 
         async saveColumnOrder(
@@ -204,23 +212,38 @@ function createPreferences() {
             collectionId: string,
             columnIds: TeamPreferences['order']
         ) {
-            let teamPrefs: Models.Preferences;
+            if (!teamPreferences.columnOrder) {
+                teamPreferences.columnOrder = {};
+            }
 
-            await updateAndSync((n) => {
-                if (!n?.columnOrder) {
-                    n ??= {};
-                    n.columnOrder ??= {};
-                }
+            teamPreferences.columnOrder[collectionId] = columnIds;
 
-                teamPrefs = n;
-                n.columnOrder[collectionId] = columnIds;
+            await sdk.forConsole.teams.updatePrefs(orgId, teamPreferences);
+        },
 
-                return n;
-            });
+        getColumnWidths(collectionId: string): TeamPreferences['widths'] {
+            return teamPreferences?.columnWidths?.[collectionId] ?? {};
+        },
 
-            await sdk.forConsole.teams.updatePrefs(orgId, teamPrefs);
+        async saveColumnWidths(
+            orgId: string,
+            collectionId: string,
+            width: TeamPreferences['widths']
+        ) {
+            if (!teamPreferences.columnWidths) {
+                teamPreferences.columnWidths = {};
+            }
+
+            teamPreferences.columnWidths[collectionId] = {
+                ...teamPreferences.columnWidths[collectionId],
+                ...width
+            };
+
+            await sdk.forConsole.teams.updatePrefs(orgId, teamPreferences);
         }
     };
 }
 
 export const preferences = createPreferences();
+
+export type PreferencesType = ReturnType<typeof createPreferences>;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 445373a129..ef53014159 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -21,8 +21,11 @@
     import { onMount } from 'svelte';
     import {
         collection,
+        columns,
+        columnsOrder,
         databaseColumnSheetOptions,
         databaseRowSheetOptions,
+        reorderItems,
         showCreateAttributeSheet
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
@@ -214,17 +217,26 @@
 <slot />
 
 <SideSheet
-    title="Insert column"
-    bind:show={$showCreateAttributeSheet}
+    title={$showCreateAttributeSheet.title}
+    bind:show={$showCreateAttributeSheet.show}
     submit={{
         text: 'Insert',
-        onClick: async () => await createAttribute?.submit(),
+        onClick: async () => {
+            await createAttribute?.submit();
+        },
         disabled: !selectedOption
     }}>
     <CreateAttribute
-        showCreate={$showCreateAttributeSheet}
         bind:selectedOption
-        bind:this={createAttribute} />
+        bind:this={createAttribute}
+        showCreate={$showCreateAttributeSheet.show}
+        direction={$showCreateAttributeSheet.direction}
+        columns={$showCreateAttributeSheet.columns}
+        columnsOrder={$showCreateAttributeSheet.columnsOrder}
+        onColumnsReorder={(newOrder) => {
+            columnsOrder.set(newOrder);
+            columns.set(reorderItems($columns, $columnsOrder));
+        }} />
 </SideSheet>
 
 <SideSheet
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 2da9c9e5fe..81182fb332 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -83,7 +83,7 @@
         }
     }
 
-    onDestroy(() => ($showCreateAttributeSheet = false));
+    onDestroy(() => ($showCreateAttributeSheet.show = false));
 </script>
 
 {#key page.params.collection}
@@ -174,6 +174,7 @@
             {:else}
                 <EmptySheet
                     mode="records"
+                    customColumns={$columns}
                     showActions={$canWriteDocuments}
                     actions={{
                         primary: {
@@ -192,7 +193,7 @@
                     primary: {
                         text: 'Create column',
                         onClick: async () => {
-                            $showCreateAttributeSheet = true;
+                            $showCreateAttributeSheet.show = true;
                         }
                     }
                 }} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 50a34caf3f..61a319aa59 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -139,7 +139,7 @@
         columnsOrder = preferences.getColumnOrder(collectionId);
     });
 
-    onDestroy(() => ($showCreateAttributeSheet = false));
+    onDestroy(() => ($showCreateAttributeSheet.show = false));
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -150,7 +150,7 @@
                 secondary
                 disabled={$isCsvImportInProgress}
                 on:click={() => {
-                    $showCreateAttributeSheet = true;
+                    $showCreateAttributeSheet.show = true;
                 }}
                 event="create_attribute">
                 <Icon icon={IconPlus} slot="start" size="s" />
@@ -352,7 +352,7 @@
             showActions={$canWriteCollections}
             actions={{
                 primary: {
-                    onClick: () => ($showCreateAttributeSheet = true)
+                    onClick: () => ($showCreateAttributeSheet.show = true)
                 }
             }} />
     {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 0f4dfe2627..b0ddfb92d4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import type { Attributes } from './store';
+    import { type Attributes, type ColumnDirection } from './store';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { Layout } from '@appwrite.io/pink-svelte';
@@ -8,13 +8,25 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { option, attributeOptions, type Option } from './attributes/store';
+    import type { Column } from '$lib/helpers/types';
+    import { preferences } from '$lib/stores/preferences';
 
     let {
+        direction = null,
         showCreate = false,
-        selectedOption = $bindable('String')
+        columns = $bindable(null),
+        columnId = $bindable(null),
+        columnsOrder = $bindable(null),
+        selectedOption = $bindable('String'),
+        onColumnsReorder = null
     }: {
         showCreate: boolean;
+        columnId?: string;
+        columns?: Column[];
+        columnsOrder?: string[];
+        direction: ColumnDirection;
         selectedOption: Option['name'];
+        onColumnsReorder?: (newOrder: string[]) => void;
     } = $props();
 
     const databaseId = page.params.database;
@@ -31,9 +43,45 @@
         attributeOptions.find((option) => option.name === selectedOption).component
     );
 
+    function insertColumnInOrder() {
+        if (!direction || !direction.neighbour || !key) return;
+
+        const currentOrder = columnsOrder?.length
+            ? columnsOrder
+            : columns?.map((col) => col.id) || [];
+        const neighbourIndex = currentOrder.indexOf(direction.neighbour);
+
+        let newOrder: string[];
+
+        if (neighbourIndex === -1) {
+            newOrder = [...currentOrder, key];
+        } else {
+            const insertIndex = direction.to === 'left' ? neighbourIndex : neighbourIndex + 1;
+            newOrder = [
+                ...currentOrder.slice(0, insertIndex),
+                key,
+                ...currentOrder.slice(insertIndex)
+            ];
+        }
+
+        preferences.saveColumnOrder(
+            page.data.organization.$id ?? page.data.project.teamId,
+            collectionId,
+            newOrder
+        );
+
+        onColumnsReorder?.(newOrder);
+
+        return newOrder;
+    }
+
     export async function submit() {
         try {
             await $option.create(databaseId, collectionId, key, data);
+            columnId = key;
+            if (direction) {
+                insertColumnInOrder();
+            }
             await invalidate(Dependencies.COLLECTION);
 
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
index 484bb22143..6d70443bdd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/+page.svelte
@@ -81,7 +81,7 @@
         }
     });
 
-    onDestroy(() => ($showCreateAttributeSheet = false));
+    onDestroy(() => ($showCreateAttributeSheet.show = false));
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -202,7 +202,7 @@
                 primary: {
                     text: 'Create columns',
                     onClick: async () => {
-                        $showCreateAttributeSheet = true;
+                        $showCreateAttributeSheet.show = true;
                     }
                 }
             }} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 34c32aafb1..77d166c8c6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import {
+        Badge,
         Button,
         Icon,
         Layout,
@@ -24,6 +25,7 @@
 
     export let mode: Mode;
     export let showActions: boolean = true;
+    export let customColumns: Column[] = [];
     export let title: string | undefined = undefined;
     export let actions:
         | {
@@ -41,13 +43,14 @@
                 width: 180,
                 draggable: false,
                 resizable: false,
+                isPrimary: true,
                 icon: IconFingerPrint
             },
             ...middle,
             {
                 id: 'actions',
                 title: '',
-                width: 555 * 1.5,
+                width: customColumns.length ? 555 : 555 * 1.5,
                 draggable: false,
                 resizable: false,
                 type: 'string',
@@ -65,6 +68,13 @@
 
     const columnsMap: ColumnsMap = {
         records: makeColumns(
+            // TODO: improve.
+            ...customColumns.map((col) => {
+                col.width = { min: 180 };
+                col.draggable = false;
+                col.resizable = false;
+                return col;
+            }),
             {
                 id: '$createdAt',
                 title: 'Created',
@@ -84,6 +94,7 @@
                 icon: IconCalendar
             }
         ),
+        // TODO: fixed, 3 columns
         columns: makeColumns(
             {
                 id: 'indexed',
@@ -104,6 +115,7 @@
                 isAction: false
             }
         ),
+        // TODO: fixed, 3 columns
         indexes: makeColumns(
             {
                 id: 'type',
@@ -151,6 +163,11 @@
                             alignItems="center"
                             alignContent="center">
                             {column.title}
+
+                            {#if column.isPrimary}
+                                <Badge content="Primary key" size="xs" variant="secondary" />
+                            {/if}
+
                             <SortButton disabled column={column.id} />
                         </Layout.Stack>
                     {/if}
@@ -260,7 +277,7 @@
         position: fixed;
 
         @media (min-width: 1024px) {
-            left: 52.5%;
+            left: 50%;
             bottom: 40%;
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
index b0d3dfcc67..6a074575d1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
@@ -86,8 +86,21 @@
 
     function handleSelect(action: HeaderCellAction | RowCellAction, hide: () => void) {
         hide();
-        onSelect(action);
         $databaseColumnSheetOptions.column = column;
+
+        if (action === 'column-left') {
+            $databaseColumnSheetOptions.direction = {
+                neighbour: column?.key,
+                to: 'left'
+            };
+        } else if (action === 'column-right') {
+            $databaseColumnSheetOptions.direction = {
+                neighbour: column?.key,
+                to: 'right'
+            };
+        }
+
+        onSelect(action);
     }
 
     function shouldShow(item: MenuItem) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 4b418ea5e6..1daaca8642 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -25,7 +25,9 @@
         databaseRowSheetOptions,
         sortState,
         showCreateAttributeSheet,
-        reorderItems
+        reorderItems,
+        columnsOrder,
+        columnsWidth
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -63,6 +65,7 @@
     import SpreadsheetContainer from './layout/spreadsheet.svelte';
     import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
     import { copy } from '$lib/helpers/copy';
+    import { debounce } from '$lib/helpers/debounce';
 
     export let data: PageData;
     export let showRecordsCreateSheet: {
@@ -73,8 +76,6 @@
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
 
-    let columnsOrder = [];
-
     let displayNames = {};
     let showRelationships = false;
     let relationshipData: Partial<Models.Document>[];
@@ -84,18 +85,22 @@
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
-        columnsOrder = preferences.getColumnOrder(collectionId);
+        columnsOrder.set(preferences.getColumnOrder(collectionId));
+        columnsWidth.set(preferences.getColumnWidths(collectionId));
     });
 
-    onDestroy(() => ($showCreateAttributeSheet = false));
+    onDestroy(() => ($showCreateAttributeSheet.show = false));
 
-    function saveColumnsOrder(newOrder: string[]) {
-        preferences
-            .saveColumnOrder(data.organization.$id ?? data.project.teamId, collectionId, newOrder)
-            .then(() => {
-                columnsOrder = newOrder;
-                columns.set(reorderItems($columns, columnsOrder));
-            });
+    function saveColumnsOrder(newOrder: string[], update: boolean = true) {
+        if (update) {
+            columnsOrder.set(newOrder);
+        }
+
+        preferences.saveColumnOrder(
+            data.organization.$id ?? data.project.teamId,
+            collectionId,
+            newOrder
+        );
     }
 
     function formatArray(array: unknown[]) {
@@ -160,16 +165,28 @@
         }
     }
 
+    function getColumnWidth(
+        columnId: string,
+        defaultWidth: number | { min: number }
+    ): number | { min: number; max?: number } {
+        const savedWidth = $columnsWidth[columnId];
+        if (!savedWidth) return defaultWidth;
+
+        return savedWidth.resized;
+    }
+
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
-    $: {
+    const minimumWidth = 168;
+    $: if ($collection.attributes && $columnsOrder && $columnsWidth) {
         const baseColumns = $collection.attributes.map((attribute) => ({
             id: attribute.key,
             title: attribute.key,
             type: attribute.type as ColumnType,
             hide: !!selected?.includes(attribute.key),
             array: attribute?.array,
-            width: { min: 168 },
+            width: getColumnWidth(attribute.key, { min: minimumWidth }),
+            minimumWidth: minimumWidth,
             draggable: true,
             icon: getAppropriateIcon(attribute.type),
             format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
@@ -180,7 +197,8 @@
             {
                 id: '$id',
                 title: 'ID',
-                width: 200,
+                width: getColumnWidth('$id', 200),
+                minimumWidth: 200,
                 draggable: false,
                 type: 'string',
                 icon: IconFingerPrint,
@@ -190,7 +208,8 @@
             {
                 id: '$createdAt',
                 title: 'createdAt',
-                width: { min: 200 },
+                width: getColumnWidth('$createdAt', { min: 200 }),
+                minimumWidth: 200,
                 draggable: true,
                 type: 'datetime',
                 icon: IconCalendar,
@@ -199,7 +218,8 @@
             {
                 id: '$updatedAt',
                 title: 'updatedAt',
-                width: { min: 200 },
+                width: getColumnWidth('$updatedAt', { min: 200 }),
+                minimumWidth: 200,
                 draggable: true,
                 type: 'datetime',
                 icon: IconCalendar,
@@ -208,21 +228,27 @@
             {
                 id: 'actions',
                 title: '',
-                width: 40,
+                width: getColumnWidth('actions', 40),
                 isAction: true,
                 draggable: false,
                 type: 'string',
+                resizable: false,
                 isEditable: false
             }
         ];
 
-        columns.set([
-            staticColumns[0],
-            ...baseColumns,
-            staticColumns[1],
-            staticColumns[2],
-            staticColumns[3]
-        ]);
+        columns.set(
+            reorderItems(
+                [
+                    staticColumns[0],
+                    ...baseColumns,
+                    staticColumns[1],
+                    staticColumns[2],
+                    staticColumns[3]
+                ],
+                $columnsOrder
+            )
+        );
     }
 
     let loading = false;
@@ -274,6 +300,7 @@
 
     async function handleColumnDelete() {
         showColumnDelete = false;
+
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
@@ -283,12 +310,11 @@
                     $databaseColumnSheetOptions.column.key
                 );
 
-            if (columnsOrder.includes($databaseColumnSheetOptions.column.key)) {
-                const updatedOrder = columnsOrder.filter(
+            if ($columnsOrder.includes($databaseColumnSheetOptions.column.key)) {
+                const updatedOrder = $columnsOrder.filter(
                     (id) => id !== $databaseColumnSheetOptions.column.key
                 );
-                saveColumnsOrder(updatedOrder);
-                columnsOrder = updatedOrder;
+                saveColumnsOrder(updatedOrder, false);
             }
 
             trackEvent(Submit.AttributeDelete);
@@ -343,15 +369,18 @@
             }
 
             if (action === 'column-left' || action === 'column-right') {
-                $databaseColumnSheetOptions.show = true;
-                $databaseColumnSheetOptions.title = 'New column';
+                const { to, neighbour } = $databaseColumnSheetOptions.direction;
+
+                $showCreateAttributeSheet.show = true;
+                $showCreateAttributeSheet.title = `Insert column to the ${to} of ${neighbour}`;
+                $showCreateAttributeSheet.direction = $databaseColumnSheetOptions.direction;
+                $showCreateAttributeSheet.columns = $columns;
+                $showCreateAttributeSheet.columnsOrder = $columnsOrder;
             }
 
             if (action === 'delete') {
                 showColumnDelete = true;
             }
-
-            $databaseColumnSheetOptions.column = null;
         } else if (type === 'row') {
             if (action === 'update') {
                 $databaseRowSheetOptions.show = true;
@@ -393,6 +422,18 @@
         data.documents.documents.length >= emptyCellsLimit
             ? 0
             : emptyCellsLimit - data.documents.documents.length;
+
+    const saveColumnsWidth = debounce((column: { columnId: string; newWidth: number }) => {
+        const fixedWidth =
+            $columns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
+
+        preferences.saveColumnWidths(data.organization.$id ?? data.project.teamId, collectionId, {
+            [column.columnId]: {
+                fixed: fixedWidth,
+                resized: Math.ceil(column.newWidth)
+            }
+        });
+    }, 1000);
 </script>
 
 <SpreadsheetContainer>
@@ -407,6 +448,9 @@
         bottomActionClick={() => (showRecordsCreateSheet.show = true)}
         on:columnsSwap={(order) => {
             saveColumnsOrder(order.detail);
+        }}
+        on:columnsResize={(resize) => {
+            saveColumnsWidth(resize.detail);
         }}>
         <svelte:fragment slot="header" let:root>
             {#each $columns as column (column.id)}
@@ -415,7 +459,7 @@
                         <Button.Button
                             icon
                             variant="extra-compact"
-                            on:click={() => ($showCreateAttributeSheet = true)}>
+                            on:click={() => ($showCreateAttributeSheet.show = true)}>
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
                         </Button.Button>
                     </Spreadsheet.Header.Cell>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 8c2c29eafd..070f93f784 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -27,6 +27,10 @@ export const attributes = derived(
 export const indexes = derived(page, ($page) => $page.data.collection.indexes as Models.Index[]);
 
 export const columns = writable<Column[]>([]);
+export const columnsOrder = writable<string[]>([]);
+export const columnsWidth = writable<{
+    [columnId: string]: { fixed: number | { min: number }; resized: number };
+}>();
 
 export const isCsvImportInProgress = writable(false);
 
@@ -37,6 +41,7 @@ type DatabaseSheetOptions = {
     isEdit?: boolean;
     disableSubmit?: boolean;
     submitAction?: () => Promise<void>;
+    direction?: ColumnDirection;
 };
 
 export const databaseColumnSheetOptions = writable<DatabaseSheetOptions>({
@@ -45,7 +50,8 @@ export const databaseColumnSheetOptions = writable<DatabaseSheetOptions>({
     column: null,
     isEdit: false,
     disableSubmit: false,
-    submitAction: null
+    submitAction: null,
+    direction: null
 });
 
 export const databaseRowSheetOptions = writable<
@@ -68,7 +74,30 @@ export const sortState = writable({
     direction: 'default' as SortDirection
 });
 
-export const showCreateAttributeSheet = writable(false);
+export type ColumnDirection = {
+    neighbour: string;
+    to: 'left' | 'right';
+};
+
+export type CreateAttribute = {
+    show: boolean;
+    column?: string;
+    title: string;
+    direction?: ColumnDirection;
+    onDone?: () => void;
+    columns?: Column[];
+    columnsOrder?: string[];
+};
+
+export const showCreateAttributeSheet = writable<CreateAttribute>({
+    show: false,
+    column: null,
+    title: 'Insert column',
+    direction: null,
+    onDone: null,
+    columns: null,
+    columnsOrder: null
+});
 
 export function reorderItems<T extends { id: string } | { key: string }>(
     items: T[],
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
index 58571ebcb4..69ccbb6793 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
@@ -92,7 +92,6 @@
         on:input={() => {
             if (!touchedId) {
                 touchedId = true;
-                console.log(touchedId);
             }
         }} />
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 6ee4ddf029..46d2226f41 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -86,7 +86,8 @@
                     </Layout.Stack>
                 {/if}
 
-                <Layout.Stack gap="m" alignItems="center" direction="row">
+                <!-- TODO: refer designs for spacing and stuff -->
+                <Layout.Stack gap="xs" alignItems="center" direction="row">
                     <Icon icon={IconPlus} size="s" />
 
                     <Button

From b0e0074324e7f033150e56d9b82ca2e0b8a4e522 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 26 Jul 2025 10:59:41 +0530
Subject: [PATCH 039/118] fix: erratic bugs.

---
 .../collection-[collection]/+page.svelte      | 26 +++++---
 .../createAttribute.svelte                    | 62 +++++++++++++++----
 .../layout/emptySheet.svelte                  | 59 ++++++++++--------
 .../spreadsheet.svelte                        |  9 ++-
 4 files changed, 106 insertions(+), 50 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 81182fb332..bce09211e7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -14,7 +14,8 @@
         columns,
         isCsvImportInProgress,
         showRecordsCreateSheet,
-        showCreateAttributeSheet
+        showCreateAttributeSheet,
+        type Attributes
     } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
@@ -35,10 +36,11 @@
     let showImportCSV = false;
     const filterColumns = writable<Column[]>([]);
 
-    $: selected = preferences.getCustomCollectionColumns(page.params.collection);
-
-    $: columns.set(
-        $collection.attributes.map((attribute) => ({
+    function createColumnsFromAttributes(
+        attributes: Attributes[],
+        selected: string[] = []
+    ): Column[] {
+        return attributes.map((attribute) => ({
             id: attribute.key,
             title: attribute.key,
             type: attribute.type as ColumnType,
@@ -46,10 +48,16 @@
             array: attribute?.array,
             format: 'format' in attribute && attribute?.format === 'enum' ? attribute.format : null,
             elements: 'elements' in attribute ? attribute.elements : null
-        }))
-    );
+        }));
+    }
 
-    $: filterColumns.set([...$columns.filter((column) => !column.isAction)]);
+    $: selected = preferences.getCustomCollectionColumns(page.params.collection);
+
+    $: if ($collection.attributes) {
+        const freshColumns = createColumnsFromAttributes($collection.attributes, selected);
+        columns.set(freshColumns);
+        filterColumns.set(freshColumns.filter((column) => !column.isAction));
+    }
 
     $: hasAttributes = !!$collection.attributes.length;
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
@@ -174,7 +182,7 @@
             {:else}
                 <EmptySheet
                     mode="records"
-                    customColumns={$columns}
+                    customColumns={createColumnsFromAttributes($collection.attributes, selected)}
                     showActions={$canWriteDocuments}
                     actions={{
                         primary: {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index b0ddfb92d4..1bf9a6f317 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -6,8 +6,8 @@
     import { Layout } from '@appwrite.io/pink-svelte';
     import { InputSelect, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
-    import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { option, attributeOptions, type Option } from './attributes/store';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { attributeOptions, option, type Option } from './attributes/store';
     import type { Column } from '$lib/helpers/types';
     import { preferences } from '$lib/stores/preferences';
 
@@ -44,24 +44,63 @@
     );
 
     function insertColumnInOrder() {
-        if (!direction || !direction.neighbour || !key) return;
+        if (!key) return;
 
         const currentOrder = columnsOrder?.length
             ? columnsOrder
             : columns?.map((col) => col.id) || [];
-        const neighbourIndex = currentOrder.indexOf(direction.neighbour);
 
         let newOrder: string[];
 
-        if (neighbourIndex === -1) {
-            newOrder = [...currentOrder, key];
-        } else {
-            const insertIndex = direction.to === 'left' ? neighbourIndex : neighbourIndex + 1;
+        if (!direction || !direction.neighbour) {
+            // Find the actions column position
+            const actionsIndex = currentOrder.indexOf('actions');
+            const beforeActionsOrder =
+                actionsIndex !== -1 ? currentOrder.slice(0, actionsIndex) : currentOrder;
+
+            const lastTwo = beforeActionsOrder.slice(-2);
+            const hasTimestampColumnsAtEnd =
+                lastTwo.length === 2 &&
+                lastTwo.includes('$createdAt') &&
+                lastTwo.includes('$updatedAt');
+
+            let insertIndex: number;
+
+            if (hasTimestampColumnsAtEnd) {
+                insertIndex = Math.min(
+                    currentOrder.indexOf('$createdAt'),
+                    currentOrder.indexOf('$updatedAt')
+                );
+            } else {
+                // Insert at the end, but before actions
+                insertIndex = actionsIndex !== -1 ? actionsIndex : currentOrder.length;
+            }
+
             newOrder = [
                 ...currentOrder.slice(0, insertIndex),
                 key,
                 ...currentOrder.slice(insertIndex)
             ];
+        } else {
+            const neighbourIndex = currentOrder.indexOf(direction.neighbour);
+
+            if (neighbourIndex === -1) {
+                const actionsIndex = currentOrder.indexOf('actions');
+                const insertIndex = actionsIndex !== -1 ? actionsIndex : currentOrder.length;
+
+                newOrder = [
+                    ...currentOrder.slice(0, insertIndex),
+                    key,
+                    ...currentOrder.slice(insertIndex)
+                ];
+            } else {
+                const insertIndex = direction.to === 'left' ? neighbourIndex : neighbourIndex + 1;
+                newOrder = [
+                    ...currentOrder.slice(0, insertIndex),
+                    key,
+                    ...currentOrder.slice(insertIndex)
+                ];
+            }
         }
 
         preferences.saveColumnOrder(
@@ -71,17 +110,16 @@
         );
 
         onColumnsReorder?.(newOrder);
-
         return newOrder;
     }
 
     export async function submit() {
         try {
             await $option.create(databaseId, collectionId, key, data);
+
             columnId = key;
-            if (direction) {
-                insertColumnInOrder();
-            }
+            insertColumnInOrder();
+
             await invalidate(Dependencies.COLLECTION);
 
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 77d166c8c6..5049e383d7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -15,24 +15,30 @@
 
     type Mode = 'records' | 'columns' | 'indexes';
 
-    type ColumnsMap = Record<Mode, Column[]>;
-
     type Action = {
         text?: string;
         disabled?: boolean;
         onClick?: () => void;
     };
 
-    export let mode: Mode;
-    export let showActions: boolean = true;
-    export let customColumns: Column[] = [];
-    export let title: string | undefined = undefined;
-    export let actions:
-        | {
-              primary?: Action;
-              random?: Action;
-          }
-        | undefined = undefined;
+    let {
+        mode,
+        showActions = true,
+        customColumns = [],
+        title = undefined,
+        actions = undefined
+    }: {
+        mode: Mode;
+        showActions?: boolean;
+        customColumns?: Column[];
+        title?: string | undefined;
+        actions?:
+            | {
+                  primary?: Action;
+                  random?: Action;
+              }
+            | undefined;
+    } = $props();
 
     function makeColumns(...middle: Column[]): Column[] {
         return [
@@ -66,15 +72,18 @@
         ];
     }
 
-    const columnsMap: ColumnsMap = {
+    function getCustomColumns() {
+        return customColumns.map((col) => ({
+            ...col,
+            width: 180,
+            draggable: false,
+            resizable: false
+        }));
+    }
+
+    const columnsMap: Record<Mode, Column[]> = $derived.by(() => ({
         records: makeColumns(
-            // TODO: improve.
-            ...customColumns.map((col) => {
-                col.width = { min: 180 };
-                col.draggable = false;
-                col.resizable = false;
-                return col;
-            }),
+            ...getCustomColumns(),
             {
                 id: '$createdAt',
                 title: 'Created',
@@ -94,7 +103,6 @@
                 icon: IconCalendar
             }
         ),
-        // TODO: fixed, 3 columns
         columns: makeColumns(
             {
                 id: 'indexed',
@@ -115,7 +123,6 @@
                 isAction: false
             }
         ),
-        // TODO: fixed, 3 columns
         indexes: makeColumns(
             {
                 id: 'type',
@@ -136,9 +143,9 @@
                 isAction: false
             }
         )
-    };
+    }));
 
-    $: spreadsheetColumns = columnsMap[mode];
+    const spreadsheetColumns = $derived(columnsMap[mode]);
 </script>
 
 <div class="spreadsheet-container-outer">
@@ -192,7 +199,7 @@
                             size="s"
                             variant="secondary"
                             disabled={actions?.primary?.disabled}
-                            on:click={actions?.primary?.onClick}>
+                            onclick={actions?.primary?.onClick}>
                             <Icon icon={IconPlus} size="s" />
                             {actions?.primary?.text ?? `Create ${mode}`}
                         </Button.Button>
@@ -203,7 +210,7 @@
                                     size="s"
                                     variant="secondary"
                                     disabled={actions?.random?.disabled}
-                                    on:click={actions?.random?.onClick}>
+                                    onclick={actions?.random?.onClick}>
                                     {actions?.random?.text ?? `Generate random data`}
                                 </Button.Button>
                                 <span slot="tooltip">Yet to be added</span>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 1daaca8642..20eae31145 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -370,12 +370,11 @@
 
             if (action === 'column-left' || action === 'column-right') {
                 const { to, neighbour } = $databaseColumnSheetOptions.direction;
-
-                $showCreateAttributeSheet.show = true;
                 $showCreateAttributeSheet.title = `Insert column to the ${to} of ${neighbour}`;
                 $showCreateAttributeSheet.direction = $databaseColumnSheetOptions.direction;
                 $showCreateAttributeSheet.columns = $columns;
                 $showCreateAttributeSheet.columnsOrder = $columnsOrder;
+                $showCreateAttributeSheet.show = true;
             }
 
             if (action === 'delete') {
@@ -459,7 +458,11 @@
                         <Button.Button
                             icon
                             variant="extra-compact"
-                            on:click={() => ($showCreateAttributeSheet.show = true)}>
+                            on:click={() => {
+                                $showCreateAttributeSheet.show = true;
+                                $showCreateAttributeSheet.columns = $columns;
+                                $showCreateAttributeSheet.columnsOrder = $columnsOrder;
+                            }}>
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
                         </Button.Button>
                     </Spreadsheet.Header.Cell>

From 38b8ff757b36c58dcd61162757739bde60892b3d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 26 Jul 2025 14:23:02 +0530
Subject: [PATCH 040/118] update: show filters anyway.

---
 package.json                                           |  2 +-
 pnpm-lock.yaml                                         | 10 +++++-----
 src/lib/components/columnSelector.svelte               |  4 +++-
 src/lib/components/viewSelector.svelte                 |  4 +++-
 .../collection-[collection]/+page.svelte               |  1 +
 5 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 29effd4a5a..159ca6d581 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 429364a7d0..46009bacb3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,8 +281,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3679,7 +3679,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@e0df9cb(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 3f401fcd60..b666b3d20b 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -19,12 +19,14 @@
         isCustomCollection = false,
         ui = 'legacy',
         allowNoColumns = false,
+        showAnyway = false,
         children
     }: {
         columns: Writable<Column[]>;
         isCustomCollection?: boolean;
         allowNoColumns?: boolean;
         ui?: 'legacy' | 'new';
+        showAnyway?: boolean;
         children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>;
     } = $props();
 
@@ -178,7 +180,7 @@
 
 <svelte:window on:resize={calcMaxHeight} />
 
-{#if $columns?.length}
+{#if $columns?.length || showAnyway}
     {@const placement = isNewStyle ? 'bottom-start' : 'bottom-end'}
     <Popover let:toggle {placement} padding="none">
         {@render children(toggle, selectedColumnsNumber)}
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index e67f5173d4..26fe7670ce 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -15,15 +15,17 @@
     export let hideView = false;
     export let hideColumns = false;
     export let allowNoColumns = false;
+    export let showAnyway = false;
 </script>
 
 {#if !hideColumns && view === View.Table}
-    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns} {ui}>
+    <ColumnSelector {columns} {isCustomCollection} {allowNoColumns} {ui} {showAnyway}>
         {#snippet children(toggle, selectedColumnsNumber)}
             <Button.Button
                 size="s"
                 icon={onlyIcon}
                 variant="secondary"
+                disabled={!$columns.length && showAnyway}
                 badge={onlyIcon ? undefined : selectedColumnsNumber.toString()}
                 on:click={toggle}>
                 <Icon slot="start" icon={IconViewBoards} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index bce09211e7..5daaacd32f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -105,6 +105,7 @@
                         view={data.view}
                         {columns}
                         hideView
+                        showAnyway
                         isCustomCollection />
 
                     <Filters

From f2cffb5247a689614a41d9b0c00aa4bcb0ede8eb Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 26 Jul 2025 17:21:00 +0530
Subject: [PATCH 041/118] fix: index columns.

---
 .../layout/emptySheet.svelte                  | 235 +++++++++---------
 1 file changed, 112 insertions(+), 123 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 5049e383d7..e390a87b14 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -8,150 +8,112 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import type { Column } from '$lib/helpers/types';
+
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { SortButton } from '$lib/components';
+    import type { Column } from '$lib/helpers/types';
 
-    type Mode = 'records' | 'columns' | 'indexes';
+    type Mode = 'records' | 'indexes';
 
-    type Action = {
+    interface Action {
         text?: string;
         disabled?: boolean;
         onClick?: () => void;
-    };
+    }
 
-    let {
+    const {
         mode,
         showActions = true,
         customColumns = [],
-        title = undefined,
-        actions = undefined
-    }: {
+        title,
+        actions
+    } = $props<{
         mode: Mode;
         showActions?: boolean;
         customColumns?: Column[];
-        title?: string | undefined;
-        actions?:
-            | {
-                  primary?: Action;
-                  random?: Action;
-              }
-            | undefined;
-    } = $props();
+        title?: string;
+        actions?: {
+            primary?: Action;
+            random?: Action;
+        };
+    }>();
 
-    function makeColumns(...middle: Column[]): Column[] {
-        return [
-            {
-                id: '$id',
-                title: 'ID',
-                type: 'string',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                isPrimary: true,
-                icon: IconFingerPrint
-            },
-            ...middle,
-            {
-                id: 'actions',
-                title: '',
-                width: customColumns.length ? 555 : 555 * 1.5,
-                draggable: false,
-                resizable: false,
-                type: 'string',
-                icon: IconPlus
-            },
-            {
-                id: 'empty',
-                title: '',
-                draggable: false,
-                resizable: false,
-                type: 'string'
-            }
-        ];
-    }
+    const baseColProps = { draggable: false, resizable: false };
 
-    function getCustomColumns() {
-        return customColumns.map((col) => ({
-            ...col,
+    const getCustomColumns = (): Column[] =>
+        customColumns.map((col: Column) => ({
+            ...baseColProps,
             width: 180,
-            draggable: false,
-            resizable: false
+            ...col
         }));
-    }
 
-    const columnsMap: Record<Mode, Column[]> = $derived.by(() => ({
-        records: makeColumns(
-            ...getCustomColumns(),
-            {
-                id: '$createdAt',
-                title: 'Created',
-                type: 'datetime',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                icon: IconCalendar
-            },
-            {
-                id: '$updatedAt',
-                title: 'Updated',
-                type: 'datetime',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                icon: IconCalendar
-            }
-        ),
-        columns: makeColumns(
-            {
-                id: 'indexed',
-                title: 'Indexed',
-                type: 'boolean',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                isAction: false
-            },
-            {
-                id: 'default',
-                title: 'Default',
-                type: 'string',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                isAction: false
-            }
-        ),
-        indexes: makeColumns(
-            {
-                id: 'type',
-                title: 'Type',
-                type: 'string',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                isAction: false
-            },
+    const getRecordsColumns = (): Column[] => [
+        {
+            id: '$id',
+            title: 'ID',
+            type: 'string',
+            width: 180,
+            isPrimary: true,
+            icon: IconFingerPrint,
+            ...baseColProps
+        },
+        ...getCustomColumns(),
+        {
+            id: '$createdAt',
+            title: 'Created',
+            type: 'datetime',
+            width: 180,
+            icon: IconCalendar,
+            ...baseColProps
+        },
+        {
+            id: '$updatedAt',
+            title: 'Updated',
+            type: 'datetime',
+            width: 180,
+            icon: IconCalendar,
+            ...baseColProps
+        },
+        {
+            id: 'actions',
+            title: '',
+            type: 'string',
+            icon: IconPlus,
+            width: customColumns.length ? 555 : 832,
+            ...baseColProps
+        },
+        {
+            id: 'empty',
+            title: '',
+            type: 'string',
+            ...baseColProps
+        }
+    ];
+
+    const getIndexesColumns = (): Column[] =>
+        [
+            { id: 'key', title: 'Key', icon: null, isPrimary: false },
+            { id: 'type', title: 'Type', icon: null, isPrimary: false },
+            { id: 'columns', title: 'Columns', icon: null, isPrimary: false },
             {
-                id: 'attributes',
-                title: 'Columns',
-                type: 'string',
-                width: 180,
-                draggable: false,
-                resizable: false,
-                isAction: false
+                id: 'empty',
+                title: '',
+                width: 40,
+                isAction: true,
+                isPrimary: false
             }
-        )
-    }));
+        ] as Column[];
 
-    const spreadsheetColumns = $derived(columnsMap[mode]);
+    const spreadsheetColumns = $derived(
+        mode === 'records' ? getRecordsColumns() : getIndexesColumns()
+    );
 </script>
 
-<div class="spreadsheet-container-outer">
+<div class="spreadsheet-container-outer" data-mode={mode}>
     <Spreadsheet.Root
         allowSelection
-        emptyCells={20}
+        emptyCells={12}
         height="fit-content"
         columns={spreadsheetColumns}>
         <svelte:fragment slot="header" let:root>
@@ -226,23 +188,50 @@
 <style lang="scss">
     .spreadsheet-container-outer {
         width: 100%;
-        overflow: hidden;
         position: fixed;
+        overflow: hidden;
+
+        &[data-mode='indexes'] {
+            position: relative;
+
+            & :global(.spreadsheet-container) {
+                max-height: 70vh;
+                overflow-y: hidden;
+
+                @media (max-width: 768px) {
+                    height: 50vh;
+                }
+            }
+        }
 
         @media (max-width: 768px) {
             position: unset;
         }
 
-        & :global(.spreadsheet-container) {
-            overflow-x: hidden;
-            overflow-y: hidden;
+        &[data-mode='records']
+            :global([role='rowheader'] [role='cell']:nth-last-child(2) [role='presentation']) {
+            display: none;
+        }
+
+        &[data-mode='indexes'] {
+            & :global([role='rowheader'] [role='cell']:nth-last-child(1)) {
+                pointer-events: none;
+
+                & :global(button) {
+                    opacity: 0.5;
+                }
+            }
 
-            // hides the last columns left border, as per design
-            & :global([role='rowheader'] [role='cell']:nth-last-child(2) [role='presentation']) {
+            & :global([role='cell']:nth-last-child(1) [role='presentation']) {
                 display: none;
             }
         }
 
+        & :global(.spreadsheet-container) {
+            overflow-x: hidden;
+            overflow-y: hidden;
+        }
+
         & :global([data-select='true']) {
             opacity: 0.85;
             pointer-events: none;

From c35582f6cebe643bfb445feb6bb8c49050136103 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 26 Jul 2025 18:01:14 +0530
Subject: [PATCH 042/118] fix: order on update.

---
 .../attributes/edit.svelte                    | 17 ++++++++-
 .../sheetOptions.svelte                       | 38 +++++++++++++++----
 .../spreadsheet.svelte                        | 16 +++++++-
 3 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
index 0ce1e1401b..4535e79cf6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/edit.svelte
@@ -8,10 +8,11 @@
     import { Button, InputText } from '$lib/elements/forms';
     import deepEqual from 'deep-equal';
     import { addNotification } from '$lib/stores/notifications';
-    import { type Attributes, databaseColumnSheetOptions } from '../store';
+    import { type Attributes, columnsOrder, databaseColumnSheetOptions } from '../store';
     import { attributeOptions, type Option } from './store';
     import { onMount } from 'svelte';
     import { Layout } from '@appwrite.io/pink-svelte';
+    import { preferences } from '$lib/stores/preferences';
 
     export let isModal = true;
     export let showEdit = false;
@@ -60,6 +61,20 @@
             });
 
             showEdit = false;
+            const oldKey = originalKey;
+            const newKey = selectedAttribute.key;
+
+            if (oldKey !== newKey && $columnsOrder.includes(oldKey)) {
+                const updatedOrder = $columnsOrder.map((id) => (id === oldKey ? newKey : id));
+                columnsOrder.set(updatedOrder);
+
+                await preferences.saveColumnOrder(
+                    page.data.organization.$id ?? page.data.project.teamId,
+                    page.params.collection,
+                    updatedOrder
+                );
+            }
+
             trackEvent(Submit.AttributeUpdate);
 
             if (!isModal) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
index 6a074575d1..4ebc0ecaa1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/sheetOptions.svelte
@@ -74,13 +74,15 @@
 
     let {
         column,
+        columnId = null,
         children,
         onSelect,
         type
     }: {
         column: Attributes;
+        columnId?: string;
         type: 'header' | 'row';
-        onSelect: (option: HeaderCellAction | RowCellAction) => void;
+        onSelect: (option: HeaderCellAction | RowCellAction, columnId: string) => void;
         children: Snippet<[toggle: (event: Event) => void]>;
     } = $props();
 
@@ -90,32 +92,52 @@
 
         if (action === 'column-left') {
             $databaseColumnSheetOptions.direction = {
-                neighbour: column?.key,
+                neighbour: columnId,
                 to: 'left'
             };
         } else if (action === 'column-right') {
             $databaseColumnSheetOptions.direction = {
-                neighbour: column?.key,
+                neighbour: columnId,
                 to: 'right'
             };
         }
 
-        onSelect(action);
+        onSelect(action, columnId);
     }
 
-    function shouldShow(item: MenuItem) {
-        if (item.action === 'sort-asc' || item.action === 'sort-desc') {
-            return internalColumns.includes(column?.key);
+    function shouldShow(item: MenuItem): boolean {
+        const isSystemColumn = internalColumns.includes(columnId);
+
+        if (type === 'header') {
+            if (['delete', 'update', 'duplicate-header'].includes(item.action) && isSystemColumn) {
+                return false;
+            }
         }
+
         return true;
     }
+
+    function cleanMenu(items: MenuItem[]): MenuItem[] {
+        const visible = items.filter((item) => item.divider || shouldShow(item));
+
+        return visible.filter((item, i, arr) => {
+            const prev = arr[i - 1];
+            const next = arr[i + 1];
+
+            if (item.divider) {
+                return prev && !prev.divider && next && !next.divider;
+            }
+
+            return true;
+        });
+    }
 </script>
 
 <Popover let:toggle padding="none" placement="bottom-start" portal>
     {@render children(toggle)}
 
     <svelte:fragment slot="tooltip" let:hide>
-        {@const menuItems = type === 'header' ? headerMenuItems : rowMenuItems}
+        {@const menuItems = cleanMenu(type === 'header' ? headerMenuItems : rowMenuItems)}
 
         <ActionMenu.Root width="180px">
             {#each menuItems as item, index (index)}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 20eae31145..b41eea8239 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -358,6 +358,7 @@
 
     async function onSelectSheetOption(
         action: HeaderCellAction | RowCellAction,
+        columnId: string,
         type: 'header' | 'row',
         document: Models.Document | null = null
     ) {
@@ -380,6 +381,14 @@
             if (action === 'delete') {
                 showColumnDelete = true;
             }
+
+            if (action === 'sort-asc') {
+                sortState.set({ column: columnId, direction: 'asc' });
+                await sort([Query.orderAsc(columnId)]);
+            } else if (action === 'sort-desc') {
+                sortState.set({ column: columnId, direction: 'desc' });
+                await sort([Query.orderDesc(columnId)]);
+            }
         } else if (type === 'row') {
             if (action === 'update') {
                 $databaseRowSheetOptions.show = true;
@@ -469,8 +478,10 @@
                 {:else}
                     <SheetOptions
                         type="header"
+                        columnId={column.id}
                         column={$attributes.find((attr) => attr.key === column.id)}
-                        onSelect={(option) => onSelectSheetOption(option, 'header')}>
+                        onSelect={(option, columnId) =>
+                            onSelectSheetOption(option, columnId, 'header')}>
                         {#snippet children(toggle)}
                             <Spreadsheet.Header.Cell
                                 {root}
@@ -523,7 +534,8 @@
                             <SheetOptions
                                 type="row"
                                 column={$attributes.find((attr) => attr.key === columnId)}
-                                onSelect={(option) => onSelectSheetOption(option, 'row', document)}>
+                                onSelect={(option) =>
+                                    onSelectSheetOption(option, 'row', null, document)}>
                                 {#snippet children(toggle)}
                                     <Button.Button icon variant="extra-compact" on:click={toggle}>
                                         <Icon

From 6a3fe2848e036d06b794f43b795df71ed676facd Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 28 Jul 2025 13:05:35 +0530
Subject: [PATCH 043/118] add: nice seekbar component, fake data logic, multi
 attribute deletion.

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   9 +
 src/lib/elements/forms/index.ts               |   1 +
 .../collection-[collection]/+layout.svelte    |  73 +++-
 .../collection-[collection]/+page.svelte      |  13 +-
 .../attributes/+page.svelte                   | 381 +++++++++---------
 .../attributes/deleteAttribute.svelte         |  94 +++--
 .../layout/emptySheet.svelte                  |  17 +-
 .../spreadsheet.svelte                        |   9 +-
 .../collection-[collection]/store.ts          |   5 +
 10 files changed, 372 insertions(+), 231 deletions(-)

diff --git a/package.json b/package.json
index 159ca6d581..56a30dfd75 100644
--- a/package.json
+++ b/package.json
@@ -27,6 +27,7 @@
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
         "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5",
+        "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
         "@stripe/stripe-js": "^3.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 46009bacb3..ce06ce83d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@appwrite.io/pink-svelte':
         specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5
         version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5(svelte@5.25.3)
+      '@faker-js/faker':
+        specifier: ^9.9.0
+        version: 9.9.0
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -586,6 +589,10 @@ packages:
     resolution: {integrity: sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
+  '@faker-js/faker@9.9.0':
+    resolution: {integrity: sha512-OEl393iCOoo/z8bMezRlJu+GlRGlsKbUAN7jKB6LhnKoqKve5DXRpalbItIIcwnCjs1k/FOPjFzcA6Qn+H+YbA==}
+    engines: {node: '>=18.0.0', npm: '>=9.0.0'}
+
   '@floating-ui/core@1.6.9':
     resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
 
@@ -3950,6 +3957,8 @@ snapshots:
       '@eslint/core': 0.15.1
       levn: 0.4.1
 
+  '@faker-js/faker@9.9.0': {}
+
   '@floating-ui/core@1.6.9':
     dependencies:
       '@floating-ui/utils': 0.2.9
diff --git a/src/lib/elements/forms/index.ts b/src/lib/elements/forms/index.ts
index 938532339c..20b970669b 100644
--- a/src/lib/elements/forms/index.ts
+++ b/src/lib/elements/forms/index.ts
@@ -30,3 +30,4 @@ export { default as InputTime } from './inputTime.svelte';
 export { default as InputDigits } from './inputDigits.svelte';
 export { default as InputSelectCheckbox } from './inputSelectCheckbox.svelte';
 export { default as InputFilePicker } from './inputFilePicker.svelte';
+export { default as Seekbar } from './Seekbar.svelte';
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index ef53014159..41eb508532 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -1,4 +1,6 @@
 <script lang="ts" context="module">
+    import { writable } from 'svelte/store';
+
     const createAttributeArgs = writable({
         showCreate: false,
         selectedOption: null as Option['name'] | null
@@ -17,7 +19,7 @@
 <script lang="ts">
     import { goto, invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { realtime } from '$lib/stores/sdk';
+    import { realtime, sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
     import {
         collection,
@@ -25,16 +27,16 @@
         columnsOrder,
         databaseColumnSheetOptions,
         databaseRowSheetOptions,
+        randomDataModalState,
         reorderItems,
         showCreateAttributeSheet
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateAttribute from './createAttribute.svelte';
-    import { writable } from 'svelte/store';
     import type { Option } from './attributes/store';
     import { CreateAttributePanel } from '$lib/commandCenter/panels';
     import { database } from '../store';
-    import { project } from '$routes/(console)/project-[region]-[project]/store';
+    import { project } from '../../../store';
     import { page } from '$app/state';
     import { base } from '$app/paths';
     import { canWriteCollections } from '$lib/stores/roles';
@@ -42,6 +44,10 @@
     import SideSheet from './layout/sidesheet.svelte';
     import EditDocument from './editDocument.svelte';
     import EditAttribute from './attributes/edit.svelte';
+    import { Dialog, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Button, Seekbar } from '$lib/elements/forms';
+    import { generateFakeDocuments, generateAttributes } from '$lib/helpers/faker';
+    import { addNotification } from '$lib/stores/notifications';
 
     let editDocument: EditDocument;
     let createAttribute: CreateAttribute;
@@ -208,6 +214,49 @@
         collections: 800,
         indexes: 700
     });
+
+    async function createFakeData() {
+        $randomDataModalState.show = false;
+
+        let attributes = $collection.attributes;
+        if (!attributes.length) {
+            try {
+                attributes = await generateAttributes(
+                    $project,
+                    page.params.database,
+                    page.params.collection
+                );
+
+                await invalidate(Dependencies.COLLECTION);
+            } catch (e) {
+                addNotification({
+                    type: 'error',
+                    message: e.message
+                });
+
+                return;
+            }
+        }
+
+        try {
+            const documents = generateFakeDocuments(attributes, $randomDataModalState.value);
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .databases.createDocuments(page.params.database, page.params.collection, documents);
+
+            addNotification({
+                type: 'success',
+                message: 'Random data added successfully'
+            });
+
+            await invalidate(Dependencies.DOCUMENTS);
+        } catch (e) {
+            addNotification({
+                type: 'error',
+                message: e.message
+            });
+        }
+    }
 </script>
 
 <svelte:head>
@@ -263,3 +312,21 @@
     }}>
     <EditDocument bind:document={$databaseRowSheetOptions.document} bind:this={editDocument} />
 </SideSheet>
+
+<Dialog title="Generate random data" bind:open={$randomDataModalState.show}>
+    <Layout.Stack gap="xl">
+        <Typography.Text>
+            Select how many random records to generate for testing. This won't delete or replace
+            your existing records.
+        </Typography.Text>
+
+        <Seekbar max={100} breakpointCount={5} bind:value={$randomDataModalState.value} />
+    </Layout.Stack>
+
+    <svelte:fragment slot="footer">
+        <Layout.Stack direction="row" gap="s" justifyContent="flex-end">
+            <Button text on:click={() => ($randomDataModalState.show = false)}>Cancel</Button>
+            <Button on:click={createFakeData}>Create</Button>
+        </Layout.Stack>
+    </svelte:fragment>
+</Dialog>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
index 5daaacd32f..431133cb35 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+page.svelte
@@ -15,7 +15,8 @@
         isCsvImportInProgress,
         showRecordsCreateSheet,
         showCreateAttributeSheet,
-        type Attributes
+        type Attributes,
+        randomDataModalState
     } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
@@ -190,6 +191,11 @@
                             onClick: () => {
                                 $showRecordsCreateSheet.show = true;
                             }
+                        },
+                        random: {
+                            onClick: () => {
+                                $randomDataModalState.show = true;
+                            }
                         }
                     }} />
             {/if}
@@ -204,6 +210,11 @@
                         onClick: async () => {
                             $showCreateAttributeSheet.show = true;
                         }
+                    },
+                    random: {
+                        onClick: () => {
+                            $randomDataModalState.show = true;
+                        }
                     }
                 }} />
         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index 61a319aa59..dfcab5bbbb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -5,6 +5,7 @@
     import {
         ActionMenu,
         Badge,
+        FloatingActionBar,
         Icon,
         Layout,
         Link,
@@ -46,7 +47,6 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import SideSheet from '../layout/sidesheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
-    import EmptySheet from '../layout/emptySheet.svelte';
     import { showCreateAttributeSheet } from '../store';
     import { type Models } from '@appwrite.io/console';
     import { preferences } from '$lib/stores/preferences';
@@ -100,6 +100,7 @@
     let showDropdown = $state([]);
     let showFailed = $state(false);
     let showDelete = $state(false);
+    let selectedAttributes = $state([]);
     let showCreateIndex = $state(false);
     let selectedAttribute: Attributes = $state(null);
 
@@ -161,205 +162,213 @@
 </Container>
 
 <div class="databases-spreadsheet">
-    {#if updatedAttributes.length}
-        <SpreadsheetContainer>
-            <Spreadsheet.Root
-                let:root
-                allowSelection
-                height="100%"
-                emptyCells={emptyCellsCount}
-                columns={[
-                    { id: 'key', width: { min: 200 } },
-                    { id: 'indexed', width: { min: 150 } },
-                    { id: 'default', width: { min: 200 } },
-                    { id: 'actions', width: 40, isAction: true }
-                ]}>
-                <svelte:fragment slot="header" let:root>
-                    <Spreadsheet.Header.Cell column="key" {root}
-                        >Column name</Spreadsheet.Header.Cell>
-                    <Spreadsheet.Header.Cell column="indexed" {root}
-                        >Indexed</Spreadsheet.Header.Cell>
-                    <Spreadsheet.Header.Cell column="default" {root}
-                        >Default value</Spreadsheet.Header.Cell>
-                    <Spreadsheet.Header.Cell column="actions" {root} />
-                </svelte:fragment>
+    <SpreadsheetContainer>
+        <Spreadsheet.Root
+            let:root
+            allowSelection
+            height="100%"
+            emptyCells={emptyCellsCount}
+            bind:selectedRows={selectedAttributes}
+            columns={[
+                { id: 'key', width: { min: 200 } },
+                { id: 'indexed', width: { min: 150 } },
+                { id: 'default', width: { min: 200 } },
+                { id: 'actions', width: 40, isAction: true }
+            ]}>
+            <svelte:fragment slot="header" let:root>
+                <Spreadsheet.Header.Cell column="key" {root}>Column name</Spreadsheet.Header.Cell>
+                <Spreadsheet.Header.Cell column="indexed" {root}>Indexed</Spreadsheet.Header.Cell>
+                <Spreadsheet.Header.Cell column="default" {root}
+                    >Default value</Spreadsheet.Header.Cell>
+                <Spreadsheet.Header.Cell column="actions" {root} />
+            </svelte:fragment>
 
-                {#each updatedAttributes as attribute, index}
-                    {@const option = attributeOptions.find(
-                        (option) => option.type === attribute.type
-                    )}
-                    <Spreadsheet.Row.Base {root} select={attribute['system'] ? 'disabled' : true}>
-                        <Spreadsheet.Cell column="key" {root} isEditable={false}>
-                            <Layout.Stack direction="row" alignItems="center">
-                                {#if isRelationship(attribute)}
-                                    <Icon
-                                        size="s"
-                                        icon={attribute?.twoWay
-                                            ? IconSwitchHorizontal
-                                            : IconArrowSmRight} />
-                                {:else if 'format' in attribute && attribute.format}
-                                    {@const icon = attributeFormatIcon[attribute?.format]}
-                                    <Icon {icon} size="s" />
-                                {:else if attribute.key === '$id'}
-                                    <Icon icon={IconFingerPrint} size="s" />
-                                {:else}
-                                    <Icon icon={option.icon} size="s" />
-                                {/if}
+            {#each updatedAttributes as attribute, index}
+                {@const option = attributeOptions.find((option) => option.type === attribute.type)}
+                {@const isSelectable =
+                    attribute['system'] || attribute.type === 'relationship' ? 'disabled' : true}
+                <Spreadsheet.Row.Base {root} select={isSelectable} id={attribute.key}>
+                    <Spreadsheet.Cell column="key" {root} isEditable={false}>
+                        <Layout.Stack direction="row" alignItems="center">
+                            {#if isRelationship(attribute)}
+                                <Icon
+                                    size="s"
+                                    icon={attribute?.twoWay
+                                        ? IconSwitchHorizontal
+                                        : IconArrowSmRight} />
+                            {:else if 'format' in attribute && attribute.format}
+                                {@const icon = attributeFormatIcon[attribute?.format]}
+                                <Icon {icon} size="s" />
+                            {:else if attribute.key === '$id'}
+                                <Icon icon={IconFingerPrint} size="s" />
+                            {:else}
+                                <Icon icon={option.icon} size="s" />
+                            {/if}
 
-                                <Layout.Stack direction="row" alignItems="center" gap="s">
-                                    <Layout.Stack
-                                        inline
-                                        direction="row"
-                                        alignItems="center"
-                                        gap="xxs">
-                                        <span class="text u-trim-1" data-private>
-                                            {#if attribute.key === '$id' || attribute.key === '$createdAt' || attribute.key === '$updatedAt'}
-                                                {attribute['name']}
-                                                {#if attribute.key === '$id'}
-                                                    <Badge
-                                                        size="xs"
-                                                        variant="secondary"
-                                                        content="Primary key" />
-                                                {/if}
-                                            {:else}
-                                                {attribute.key}
+                            <Layout.Stack direction="row" alignItems="center" gap="s">
+                                <Layout.Stack inline direction="row" alignItems="center" gap="xxs">
+                                    <span class="text u-trim-1" data-private>
+                                        {#if attribute.key === '$id' || attribute.key === '$createdAt' || attribute.key === '$updatedAt'}
+                                            {attribute['name']}
+                                            {#if attribute.key === '$id'}
+                                                <Badge
+                                                    size="xs"
+                                                    variant="secondary"
+                                                    content="Primary key" />
                                             {/if}
-                                        </span>
-                                        {#if isString(attribute) && attribute.encrypt}
-                                            <Tooltip>
-                                                <Icon
-                                                    size="s"
-                                                    icon={IconLockClosed}
-                                                    color="--fgcolor-neutral-tertiary" />
-                                                <div slot="tooltip">Encrypted</div>
-                                            </Tooltip>
-                                        {/if}
-                                    </Layout.Stack>
-                                    {#if attribute.status !== 'available'}
-                                        <Badge
-                                            size="s"
-                                            variant="secondary"
-                                            content={attribute.status}
-                                            type={getAttributeStatusBadge(attribute.status)} />
-                                        {#if attribute.error}
-                                            <Link.Button
-                                                variant="muted"
-                                                on:click={(e) => {
-                                                    e.preventDefault();
-                                                    error = attribute.error;
-                                                    showFailed = true;
-                                                }}>Details</Link.Button>
+                                        {:else}
+                                            {attribute.key}
                                         {/if}
-                                    {:else if attribute.required}
-                                        <Badge size="xs" variant="secondary" content="required" />
+                                    </span>
+                                    {#if isString(attribute) && attribute.encrypt}
+                                        <Tooltip>
+                                            <Icon
+                                                size="s"
+                                                icon={IconLockClosed}
+                                                color="--fgcolor-neutral-tertiary" />
+                                            <div slot="tooltip">Encrypted</div>
+                                        </Tooltip>
                                     {/if}
                                 </Layout.Stack>
+                                {#if attribute.status !== 'available'}
+                                    <Badge
+                                        size="s"
+                                        variant="secondary"
+                                        content={attribute.status}
+                                        type={getAttributeStatusBadge(attribute.status)} />
+                                    {#if attribute.error}
+                                        <Link.Button
+                                            variant="muted"
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                error = attribute.error;
+                                                showFailed = true;
+                                            }}>Details</Link.Button>
+                                    {/if}
+                                {:else if attribute.required}
+                                    <Badge size="xs" variant="secondary" content="required" />
+                                {/if}
                             </Layout.Stack>
-                        </Spreadsheet.Cell>
-                        <Spreadsheet.Cell column="indexed" {root} isEditable={false}>
-                            {@const isIndexed = $indexes.some((index) =>
-                                index.attributes.includes(attribute.key)
-                            )}
-                            <Selector.Checkbox size="s" checked={isIndexed} disabled />
-                        </Spreadsheet.Cell>
-                        <Spreadsheet.Cell column="default" {root} isEditable={false}>
-                            {@const _default =
-                                attribute?.default !== null && attribute?.default !== undefined
-                                    ? attribute?.default
-                                    : null}
+                        </Layout.Stack>
+                    </Spreadsheet.Cell>
+                    <Spreadsheet.Cell column="indexed" {root} isEditable={false}>
+                        {@const isIndexed = $indexes.some((index) =>
+                            index.attributes.includes(attribute.key)
+                        )}
+                        <Selector.Checkbox size="s" checked={isIndexed} disabled />
+                    </Spreadsheet.Cell>
+                    <Spreadsheet.Cell column="default" {root} isEditable={false}>
+                        {@const _default =
+                            attribute?.default !== null && attribute?.default !== undefined
+                                ? attribute?.default
+                                : null}
 
-                            {#if _default === null}
-                                <Badge variant="secondary" content="NULL" size="xs" />
-                            {:else}
-                                {_default}
-                            {/if}
-                        </Spreadsheet.Cell>
-                        <Spreadsheet.Cell column="actions" {root} isEditable={false}>
-                            {#if $isCsvImportInProgress}
-                                <CsvDisabled>
-                                    <Button disabled text icon ariaLabel="more options">
-                                        <Icon icon={IconDotsHorizontal} size="s" />
-                                    </Button>
-                                </CsvDisabled>
-                            {:else}
-                                <!-- TODO: no portal, rather see if we can fix the cell -->
-                                <Popover let:toggle padding="none" placement="bottom-end" portal>
-                                    <Button text icon ariaLabel="more options" on:click={toggle}>
-                                        <Icon icon={IconDotsHorizontal} size="s" />
-                                    </Button>
-                                    <ActionMenu.Root slot="tooltip" let:toggle>
-                                        {#if !attribute['system']}
-                                            <ActionMenu.Item.Button
-                                                leadingIcon={IconPencil}
-                                                on:click={(event) => {
-                                                    toggle(event);
-                                                    showEdit = true;
-                                                    selectedAttribute = attribute;
-                                                    showDropdown[index] = false;
-                                                }}>
-                                                Update
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                        {#if !isRelationship(attribute)}
-                                            <ActionMenu.Item.Button
-                                                leadingIcon={IconPlus}
-                                                on:click={(event) => {
-                                                    toggle(event);
-                                                    selectedAttribute = attribute;
-                                                    showCreateIndex = true;
-                                                    showDropdown[index] = false;
-                                                }}>
-                                                Create index
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                        {#if attribute.status !== 'processing' && !attribute['system']}
-                                            <ActionMenu.Item.Button
-                                                status="danger"
-                                                leadingIcon={IconTrash}
-                                                on:click={(event) => {
-                                                    toggle(event);
-                                                    showDelete = true;
-                                                    showDropdown[index] = false;
-                                                    selectedAttribute = attribute;
-                                                    trackEvent(Click.DatabaseAttributeDelete);
-                                                }}>
-                                                Delete
-                                            </ActionMenu.Item.Button>
-                                        {/if}
-                                    </ActionMenu.Root>
-                                </Popover>
-                            {/if}
-                        </Spreadsheet.Cell>
-                    </Spreadsheet.Row.Base>
-                {/each}
+                        {#if _default === null}
+                            <Badge variant="secondary" content="NULL" size="xs" />
+                        {:else}
+                            {_default}
+                        {/if}
+                    </Spreadsheet.Cell>
+                    <Spreadsheet.Cell column="actions" {root} isEditable={false}>
+                        {#if $isCsvImportInProgress}
+                            <CsvDisabled>
+                                <Button disabled text icon ariaLabel="more options">
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                            </CsvDisabled>
+                        {:else}
+                            <!-- TODO: no portal, rather see if we can fix the cell -->
+                            <Popover let:toggle padding="none" placement="bottom-end" portal>
+                                <Button text icon ariaLabel="more options" on:click={toggle}>
+                                    <Icon icon={IconDotsHorizontal} size="s" />
+                                </Button>
+                                <ActionMenu.Root slot="tooltip" let:toggle>
+                                    {#if !attribute['system']}
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPencil}
+                                            on:click={(event) => {
+                                                toggle(event);
+                                                showEdit = true;
+                                                selectedAttribute = attribute;
+                                                showDropdown[index] = false;
+                                            }}>
+                                            Update
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                    {#if !isRelationship(attribute)}
+                                        <ActionMenu.Item.Button
+                                            leadingIcon={IconPlus}
+                                            on:click={(event) => {
+                                                toggle(event);
+                                                selectedAttribute = attribute;
+                                                showCreateIndex = true;
+                                                showDropdown[index] = false;
+                                            }}>
+                                            Create index
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                    {#if attribute.status !== 'processing' && !attribute['system']}
+                                        <ActionMenu.Item.Button
+                                            status="danger"
+                                            leadingIcon={IconTrash}
+                                            on:click={(event) => {
+                                                toggle(event);
+                                                showDelete = true;
+                                                showDropdown[index] = false;
+                                                selectedAttribute = attribute;
+                                                trackEvent(Click.DatabaseAttributeDelete);
+                                            }}>
+                                            Delete
+                                        </ActionMenu.Item.Button>
+                                    {/if}
+                                </ActionMenu.Root>
+                            </Popover>
+                        {/if}
+                    </Spreadsheet.Cell>
+                </Spreadsheet.Row.Base>
+            {/each}
 
-                <svelte:fragment slot="footer">
-                    <Layout.Stack
-                        direction="row"
-                        alignContent="center"
-                        alignItems="center"
-                        justifyContent="space-between">
-                        <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                            {updatedAttributes.length} columns
-                        </Typography.Text>
-                    </Layout.Stack>
+            <svelte:fragment slot="footer">
+                <Layout.Stack
+                    direction="row"
+                    alignContent="center"
+                    alignItems="center"
+                    justifyContent="space-between">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {updatedAttributes.length} columns
+                    </Typography.Text>
+                </Layout.Stack>
+            </svelte:fragment>
+        </Spreadsheet.Root>
+    </SpreadsheetContainer>
+
+    {#if selectedAttributes.length > 0}
+        <div class="floating-action-bar">
+            <FloatingActionBar>
+                <svelte:fragment slot="start">
+                    <div style:width="max-content">
+                        <Layout.Stack direction="row" alignItems="center" gap="m">
+                            <Badge content={selectedAttributes.length.toString()} />
+                            <span style:font-size="14px">
+                                {selectedAttributes.length > 1 ? 'attributes' : 'attribute'}
+                                selected
+                            </span>
+                        </Layout.Stack>
+                    </div>
+                </svelte:fragment>
+                <svelte:fragment slot="end">
+                    <Button text on:click={() => (selectedAttributes = [])}>Cancel</Button>
+                    <Button secondary on:click={() => (showDelete = true)}>Delete</Button>
                 </svelte:fragment>
-            </Spreadsheet.Root>
-        </SpreadsheetContainer>
-    {:else}
-        <EmptySheet
-            mode="columns"
-            showActions={$canWriteCollections}
-            actions={{
-                primary: {
-                    onClick: () => ($showCreateAttributeSheet.show = true)
-                }
-            }} />
+            </FloatingActionBar>
+        </div>
     {/if}
 </div>
 
-{#if showDelete}
+{#if selectedAttribute}
     <Delete bind:showDelete {selectedAttribute} />
+{:else if selectedAttributes && selectedAttributes.length}
+    <Delete bind:showDelete bind:selectedAttribute={selectedAttributes} />
 {/if}
 
 <SideSheet
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index d92cdcf8c8..54b734d73c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
+    import { invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -10,38 +9,65 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { isRelationship } from '../document-[document]/attributes/store';
     import Confirm from '$lib/components/confirm.svelte';
+    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Dependencies } from '$lib/constants';
 
-    export let showDelete = false;
-    export let selectedAttribute: Attributes;
-    const databaseId = page.params.database;
+    let {
+        showDelete = $bindable(false),
+        selectedAttribute = $bindable(null)
+    }: {
+        showDelete: boolean;
+        selectedAttribute: Attributes | string[];
+    } = $props();
 
-    let error: string;
-    let checked = false;
+    let checked = $state(false);
+    let error = $state<string | null>(null);
+
+    const selectedAttributes = $derived(
+        Array.isArray(selectedAttribute) ? selectedAttribute : [selectedAttribute]
+    );
+
+    const selectedKeys = $derived(getKeys(selectedAttribute));
+
+    const requiresTwoWayConfirm = $derived(
+        selectedAttributes.some((attr: string | Attributes) => {
+            typeof attr === 'string' ? false : isRelationship(attr) && attr.twoWay;
+        })
+    );
+
+    const isDeleteBtnDisabled = $derived(requiresTwoWayConfirm && !checked);
+
+    function getKeys(selected: Attributes | string[]): string[] {
+        return Array.isArray(selected) ? selected : [selected.key];
+    }
 
-    // TODO: sync the columnsOrder here as well.
     async function handleDelete() {
         try {
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.deleteAttribute(databaseId, $collection.$id, selectedAttribute.key);
+            const client = sdk.forProject(page.params.region, page.params.project);
 
-            showDelete = false;
+            await Promise.all(
+                selectedAttributes.map((key) =>
+                    client.databases.deleteAttribute(page.params.database, $collection.$id, key)
+                )
+            );
+
+            trackEvent(Submit.AttributeDelete);
+            invalidate(Dependencies.COLLECTION);
             addNotification({
                 type: 'success',
-                message: `Attribute has been deleted`
+                message:
+                    selectedAttributes.length === 1
+                        ? 'Attribute has been deleted'
+                        : `${selectedAttributes.length} attributes have been deleted`
             });
-            trackEvent(Submit.AttributeDelete);
-            await goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection-${page.params.collection}/attributes`
-            );
+
+            showDelete = false;
+            selectedAttribute = [];
         } catch (e) {
             error = e.message;
             trackError(e, Submit.AttributeDelete);
         }
     }
-
-    $: isDeleteBtnDisabled =
-        isRelationship(selectedAttribute) && selectedAttribute?.twoWay && !checked;
 </script>
 
 <Confirm
@@ -50,12 +76,22 @@
     title="Delete attribute"
     bind:error
     disabled={isDeleteBtnDisabled}>
-    <p>
-        Are you sure you want to delete <b data-private>{selectedAttribute?.key}</b> from
-        <b data-private>{$collection?.name}</b>?
-    </p>
-    {#if isRelationship(selectedAttribute) && selectedAttribute?.twoWay}
-        <div class="u-flex u-flex-vertical u-gap-24">
+    {#if selectedAttributes.length === 1}
+        <p>
+            Are you sure you want to delete <b data-private>{selectedKeys[0]}</b> from
+            <b data-private>{$collection?.name}</b>?
+        </p>
+    {:else}
+        <p>
+            Are you sure you want to delete <b data-private>{selectedKeys.join(', ')}</b> from
+            <b data-private>{$collection?.name}</b>?
+        </p>
+    {/if}
+
+    {#if requiresTwoWayConfirm}
+        <!-- not allowed on multi selections, safe to assume that this isn't a string! -->
+        {@const attribute = selectedAttribute[0]}
+        <Layout.Stack direction="column" gap="xl">
             <p>
                 This is a two way relationship and the corresponding relationship will also be
                 deleted.
@@ -63,10 +99,10 @@
             <p><b>This action is irreversible.</b></p>
             <ul>
                 <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
-                    Delete relationship between <b data-private>{selectedAttribute.key}</b> to
-                    <b data-private>{selectedAttribute.twoWayKey}</b>
+                    Delete relationship between <b data-private>{attribute.key}</b> to
+                    <b data-private>{attribute.twoWayKey}</b>
                 </InputChoice>
             </ul>
-        </div>
+        </Layout.Stack>
     {/if}
 </Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index e390a87b14..d72b927307 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -167,16 +167,13 @@
                         </Button.Button>
 
                         {#if mode === 'records'}
-                            <Tooltip>
-                                <Button.Button
-                                    size="s"
-                                    variant="secondary"
-                                    disabled={actions?.random?.disabled}
-                                    onclick={actions?.random?.onClick}>
-                                    {actions?.random?.text ?? `Generate random data`}
-                                </Button.Button>
-                                <span slot="tooltip">Yet to be added</span>
-                            </Tooltip>
+                            <Button.Button
+                                size="s"
+                                variant="secondary"
+                                disabled={actions?.random?.disabled}
+                                onclick={actions?.random?.onClick}>
+                                {actions?.random?.text ?? `Generate random data`}
+                            </Button.Button>
                         {/if}
                     </Layout.Stack>
                 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index b41eea8239..0ddf827fe6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -27,7 +27,8 @@
         showCreateAttributeSheet,
         reorderItems,
         columnsOrder,
-        columnsWidth
+        columnsWidth,
+        randomDataModalState
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -649,7 +650,11 @@
                 </Typography.Text>
 
                 <div style:margin-right="var(--space-6)">
-                    <Button.Button variant="extra-compact">Generate random data</Button.Button>
+                    <Button.Button
+                        variant="extra-compact"
+                        on:click={() => {
+                            $randomDataModalState.show = true;
+                        }}>Generate random data</Button.Button>
                 </div>
             </Layout.Stack>
         </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 070f93f784..af837998b8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -117,3 +117,8 @@ export function reorderItems<T extends { id: string } | { key: string }>(
         ...items.filter((item) => !orderSet.has(getItemId(item)))
     ];
 }
+
+export const randomDataModalState = writable({
+    show: false,
+    value: 25 // initial value!
+});

From 2feb95cb190209cbdae0d1e5d7a51548fa6acf86 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 28 Jul 2025 14:50:28 +0530
Subject: [PATCH 044/118] fix: missing files.

---
 src/lib/elements/forms/Seekbar.svelte         | 315 ++++++++++++++++++
 src/lib/helpers/faker.ts                      | 135 ++++++++
 .../layout/emptySheet.svelte                  |   1 -
 3 files changed, 450 insertions(+), 1 deletion(-)
 create mode 100644 src/lib/elements/forms/Seekbar.svelte
 create mode 100644 src/lib/helpers/faker.ts

diff --git a/src/lib/elements/forms/Seekbar.svelte b/src/lib/elements/forms/Seekbar.svelte
new file mode 100644
index 0000000000..7fa184e8e5
--- /dev/null
+++ b/src/lib/elements/forms/Seekbar.svelte
@@ -0,0 +1,315 @@
+<script lang="ts">
+    import { onDestroy } from 'svelte';
+    import { ID } from '@appwrite.io/console';
+    import { debounce } from '$lib/helpers/debounce';
+    import { Badge } from '@appwrite.io/pink-svelte';
+
+    let {
+        min = 1,
+        max = 100,
+        maxAllowed = max,
+        value = $bindable(min),
+        breakPoints = [],
+        autoBreakpoints = true,
+        breakpointCount = 7,
+        snapToBreakpoints = true,
+        snapThreshold = 3,
+        disabled = false,
+        id = ID.unique(),
+        onchange
+    }: {
+        min?: number;
+        max?: number;
+        maxAllowed?: number;
+        value?: number;
+        breakPoints?: number[];
+        autoBreakpoints?: boolean;
+        breakpointCount?: number;
+        snapToBreakpoints?: boolean;
+        snapThreshold?: number;
+        disabled?: boolean;
+        id?: string;
+        onchange?: (value: number) => void;
+    } = $props();
+
+    let isDragging = $state(false);
+    let trackRef = $state<HTMLDivElement>();
+
+    const range = $derived(max - min);
+    const clampedValue = $derived(Math.min(Math.max(value, min), maxAllowed));
+    const relativeValue = $derived(clampedValue - min);
+    const percentage = $derived((relativeValue / max) * 100);
+    const maxAllowedPercentage = $derived(((maxAllowed - min) / range) * 100);
+
+    const calculatedBreakpoints = $derived(() => {
+        if (!autoBreakpoints) return breakPoints;
+
+        const points = [];
+        if (breakpointCount === 1) {
+            points.push(min);
+        } else {
+            points.push(min);
+
+            if (breakpointCount > 2) {
+                const step = range / (breakpointCount - 1);
+                for (let i = 1; i < breakpointCount - 1; i++) {
+                    const rawValue = min + i * step;
+
+                    let roundedValue: number;
+                    if (range <= 10) {
+                        roundedValue = Math.round(rawValue);
+                    } else if (range <= 100) {
+                        roundedValue = Math.round(rawValue / 5) * 5;
+                    } else if (range <= 1000) {
+                        roundedValue = Math.round(rawValue / 10) * 10;
+                    } else {
+                        roundedValue = Math.round(rawValue / 25) * 25;
+                    }
+
+                    points.push(Math.max(min + 1, Math.min(max - 1, roundedValue)));
+                }
+            }
+
+            points.push(max);
+        }
+
+        return points;
+    });
+
+    const exactBreakpoints = $derived(() => {
+        if (!autoBreakpoints) return breakPoints;
+
+        return calculatedBreakpoints();
+    });
+
+    const debouncedOnChange = debounce((newValue: number) => {
+        onchange?.(Math.round(newValue));
+    }, 150);
+
+    function findClosestBreakpoint(value: number): number | null {
+        if (!snapToBreakpoints || calculatedBreakpoints().length === 0) return null;
+
+        let closest = null;
+        let closestDistance = Infinity;
+
+        for (const breakpoint of calculatedBreakpoints()) {
+            const distance = Math.abs(value - breakpoint);
+            const distancePercentage = (distance / range) * 100;
+
+            if (distancePercentage <= snapThreshold && distance < closestDistance) {
+                closest = breakpoint;
+                closestDistance = distance;
+            }
+        }
+
+        return closest;
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+        if (disabled) return;
+
+        isDragging = true;
+        updateValue(event);
+
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        event.preventDefault();
+    }
+
+    function handleMouseMove(event: MouseEvent) {
+        if (!isDragging) return;
+        updateValue(event);
+    }
+
+    function handleMouseUp() {
+        isDragging = false;
+        document.removeEventListener('mousemove', handleMouseMove);
+        document.removeEventListener('mouseup', handleMouseUp);
+    }
+
+    function handleTrackClick(event: MouseEvent) {
+        if (disabled || isDragging) return;
+
+        updateValue(event);
+    }
+
+    function updateValue(event: MouseEvent) {
+        if (!trackRef) return;
+
+        const rect = trackRef.getBoundingClientRect();
+        const clickX = event.clientX - rect.left;
+        const newPercentage = Math.max(0, Math.min(100, (clickX / rect.width) * 100));
+        let newValue = min + (newPercentage / 100) * (max - min);
+
+        const snapPoint = findClosestBreakpoint(newValue);
+        if (snapPoint !== null) {
+            newValue = snapPoint;
+        }
+
+        const clampedNewValue = Math.max(min, Math.min(newValue, maxAllowed));
+        const roundedValue = Math.round(clampedNewValue);
+
+        if (roundedValue !== value) {
+            value = roundedValue;
+            debouncedOnChange(value);
+        }
+    }
+
+    onDestroy(() => {
+        if (isDragging) {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        }
+    });
+</script>
+
+<div class="seekbar">
+    <div class="track" role="presentation" bind:this={trackRef} onclick={handleTrackClick}>
+        {#if maxAllowed < max}
+            <div
+                class="disabled-area"
+                style:left="{maxAllowedPercentage}%"
+                style:width="{100 - maxAllowedPercentage}%">
+            </div>
+        {/if}
+
+        <div class="progress" style:--progress-width="{percentage}%"></div>
+
+        <div class="thumb-container" style:left="{percentage}%">
+            <div class="badge">
+                <Badge variant="secondary" size="xs" content={Math.ceil(clampedValue).toString()} />
+            </div>
+            <div
+                {id}
+                role="slider"
+                class="thumb"
+                tabindex={disabled ? -1 : 0}
+                aria-valuemin="0"
+                aria-valuemax={maxAllowed}
+                aria-valuenow={Math.ceil(clampedValue)}
+                onmousedown={handleMouseDown}
+                onmouseenter={() => !disabled}
+                onmouseleave={() => !isDragging}>
+            </div>
+        </div>
+    </div>
+
+    {#if exactBreakpoints().length > 0}
+        <div class="breakpoints">
+            {#each exactBreakpoints() as breakPoint, index (index)}
+                {@const breakPercentage = ((breakPoint - min) / range) * 100}
+                <div
+                    class="breakpoint"
+                    class:is-major={index === 0 ||
+                        index === exactBreakpoints().length - 1 ||
+                        index === Math.floor(exactBreakpoints().length / 2)}
+                    style:left="{breakPercentage}%">
+                </div>
+            {/each}
+        </div>
+    {/if}
+</div>
+
+<style lang="scss">
+    :root {
+        --seekbar-height: 4px;
+        --seekbar-thumb-size: 16px;
+        --seekbar-thumb-radius: 50%;
+        --seekbar-track-radius: 13px;
+
+        --seekbar-breakpoint-height-small: 6px;
+        --seekbar-breakpoint-height-medium: 6px;
+        --seekbar-breakpoint-height-major: 12px;
+
+        --seekbar-thumb-color: var(--bgcolor-neutral-primary);
+        --seekbar-track-color: var(--bgcolor-neutral-tertiary);
+        --seekbar-progress-color: var(--bgcolor-neutral-invert);
+        --seekbar-thumb-border-color: var(--fgcolor-accent-neutral);
+        --seekbar-breakpoint-color: var(--bgcolor-neutral-invert-weaker);
+
+        // experimental, disabled seekbar progress color
+        --seekbar-disabled-area-color: var(--overlay-neutral-pressed);
+    }
+
+    .seekbar {
+        width: 100%;
+        position: relative;
+        padding: 1.25rem 0 0.75rem 0;
+    }
+
+    .breakpoints {
+        position: absolute;
+        top: calc(1.25rem + var(--seekbar-height) + 8px);
+        left: 0;
+        right: 0;
+        height: 12px;
+        pointer-events: none;
+    }
+
+    .breakpoint {
+        position: absolute;
+        top: 0;
+        transform: translateX(-50%);
+        width: 1px;
+        height: var(--seekbar-breakpoint-height-small);
+        background-color: var(--seekbar-breakpoint-color);
+
+        &.is-major {
+            height: var(--seekbar-breakpoint-height-major);
+        }
+    }
+
+    .track {
+        position: relative;
+        height: var(--seekbar-height);
+        background-color: var(--seekbar-track-color);
+        border-radius: var(--seekbar-track-radius);
+        cursor: pointer;
+    }
+
+    .disabled-area {
+        top: 0;
+        height: 100%;
+        position: absolute;
+        border-top-right-radius: var(--seekbar-track-radius);
+        border-bottom-right-radius: var(--seekbar-track-radius);
+        background-color: var(--seekbar-disabled-area-color);
+    }
+
+    .progress {
+        top: 0;
+        left: 0;
+        height: 100%;
+        position: absolute;
+        width: var(--progress-width);
+        background-color: var(--seekbar-progress-color);
+        border-radius: var(--seekbar-track-radius);
+    }
+
+    .thumb-container {
+        top: 50%;
+        position: absolute;
+        transform: translateX(-50%) translateY(-50%);
+    }
+
+    .badge {
+        left: 50%;
+        position: absolute;
+        bottom: calc(100% + 8px);
+        transform: translateX(-50%);
+
+        :global(.badge) {
+            color: var(--fgcolor-on-invert) !important;
+            background: var(--bgcolor-neutral-invert) !important;
+        }
+    }
+
+    .thumb {
+        width: var(--seekbar-thumb-size);
+        height: var(--seekbar-thumb-size);
+        border-radius: var(--seekbar-thumb-radius);
+        background-color: var(--seekbar-thumb-color);
+        border: 1px solid var(--seekbar-thumb-border-color);
+        cursor: grab;
+    }
+</style>
diff --git a/src/lib/helpers/faker.ts b/src/lib/helpers/faker.ts
new file mode 100644
index 0000000000..33d624a0bc
--- /dev/null
+++ b/src/lib/helpers/faker.ts
@@ -0,0 +1,135 @@
+import { faker } from '@faker-js/faker';
+import type { Attributes } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store';
+import type { Models } from '@appwrite.io/console';
+import { sdk } from '$lib/stores/sdk';
+
+export async function generateAttributes(
+    project: Models.Project,
+    databaseId: string,
+    collectionId: string
+): Promise<Attributes[]> {
+    const client = sdk.forProject(project.region, project.$id);
+
+    return await Promise.all([
+        client.databases.createStringAttribute(databaseId, collectionId, 'name', 255, false),
+        client.databases.createEmailAttribute(databaseId, collectionId, 'email', false),
+        client.databases.createIntegerAttribute(databaseId, collectionId, 'age', false, 0, 150),
+        client.databases.createStringAttribute(databaseId, collectionId, 'city', 100, false),
+        client.databases.createStringAttribute(
+            databaseId,
+            collectionId,
+            'description',
+            1000,
+            false
+        ),
+        client.databases.createBooleanAttribute(databaseId, collectionId, 'active', false)
+    ]);
+}
+
+export function generateFakeDocuments(columns: Attributes[], count: number): object[] {
+    if (count <= 0) return [];
+
+    const filteredColumns = columns.filter((col) => col.type !== 'relationship');
+
+    if (filteredColumns.length === 0) {
+        return Array.from({ length: count }, () => ({
+            name: faker.person.fullName(),
+            email: faker.internet.email(),
+            age: faker.number.int({ min: 18, max: 80 }),
+            city: faker.location.city(),
+            description: faker.lorem.sentence(),
+            active: faker.datatype.boolean()
+        }));
+    }
+
+    return Array.from({ length: count }, () => {
+        const document: object = {};
+
+        for (const column of filteredColumns) {
+            document[column.key] = generateValueForAttribute(column);
+        }
+
+        return document;
+    });
+}
+
+function generateStringValue(key: string, maxLength: number): string {
+    const lowerKey = key.toLowerCase();
+
+    const generators: Record<string, () => string> = {
+        name: () => faker.person.fullName(),
+        email: () => faker.internet.email(),
+        title: () => faker.lorem.words({ min: 1, max: 3 }),
+        description: () => faker.lorem.paragraph(),
+        content: () => faker.lorem.paragraph(),
+        address: () => faker.location.streetAddress(),
+        city: () => faker.location.city(),
+        country: () => faker.location.country(),
+        company: () => faker.company.name()
+    };
+
+    const matchingKey = Object.keys(generators).find((pattern) => lowerKey.includes(pattern));
+
+    const text = matchingKey ? generators[matchingKey]() : faker.lorem.words({ min: 1, max: 5 });
+
+    return text.length <= maxLength ? text : text.substring(0, maxLength);
+}
+
+function generateValueForAttribute(attribute: Attributes): string | number | boolean | null {
+    switch (attribute.type) {
+        case 'string': {
+            const stringAttr = attribute as Models.AttributeString;
+            const maxLength = Math.min(stringAttr.size ?? 255, 1000);
+            return generateStringValue(attribute.key, maxLength);
+        }
+
+        case 'integer': {
+            const intAttr = attribute as Models.AttributeInteger;
+            const min = intAttr.min ?? 0;
+            const max = intAttr.max ?? 1000000;
+            return faker.number.int({ min, max });
+        }
+
+        case 'float': {
+            const floatAttr = attribute as Models.AttributeFloat;
+            const min = floatAttr.min ?? 0;
+            const max = floatAttr.max ?? 1000000;
+            const precision = 2;
+            return parseFloat(
+                faker.number.float({ min, max, fractionDigits: precision }).toFixed(precision)
+            );
+        }
+
+        case 'boolean': {
+            return faker.datatype.boolean();
+        }
+
+        case 'datetime': {
+            return faker.date.recent({ days: 365 }).toISOString();
+        }
+
+        case 'email': {
+            return faker.internet.email();
+        }
+
+        case 'ip': {
+            return faker.internet.ip();
+        }
+
+        case 'url': {
+            return faker.internet.url();
+        }
+
+        case 'enum': {
+            const enumAttr = attribute as Models.AttributeEnum;
+            if (enumAttr.elements && enumAttr.elements.length > 0) {
+                return faker.helpers.arrayElement(enumAttr.elements);
+            }
+            return null;
+        }
+
+        default: {
+            return faker.lorem.word();
+        }
+    }
+}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index d72b927307..dfe3d7a5bb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -5,7 +5,6 @@
         Icon,
         Layout,
         Spreadsheet,
-        Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
 

From 2071632cf339ce8d4fb4ec8c8c7f343dc014b82c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 28 Jul 2025 17:16:47 +0530
Subject: [PATCH 045/118] fix: missing files.

---
 src/lib/components/columnSelector.svelte            |  5 +++--
 src/lib/components/customId.svelte                  |  8 ++++++--
 .../databases/database-[database]/+page.svelte      |  3 +--
 .../collection-[collection]/+layout.svelte          | 13 ++++++++++---
 .../attributes/deleteAttribute.svelte               |  2 +-
 .../collection-[collection]/createAttribute.svelte  |  2 ++
 .../layout/emptySheet.svelte                        |  5 ++++-
 .../collection-[collection]/spreadsheet.svelte      |  9 ++++-----
 .../collection-[collection]/store.ts                |  2 ++
 .../database-[database]/createCollection.svelte     |  1 +
 10 files changed, 34 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index b666b3d20b..6acd5b01fe 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -195,16 +195,17 @@
                                 bind:value={search} />
 
                             <Layout.Stack
+                                gap="s"
                                 direction="row"
                                 alignItems="center"
                                 style="padding-block-end: 0.5rem">
-                                <Button icon extraCompact on:click={selectAll}>Select all</Button>
+                                <Button size="xs" icon extraCompact on:click={selectAll}>Select all</Button>
 
                                 <div style:height="1rem">
                                     <Divider vertical />
                                 </div>
 
-                                <Button icon extraCompact on:click={deselectAll}
+                                <Button size="xs" icon extraCompact on:click={deselectAll}
                                     >Deselect all</Button>
                             </Layout.Stack>
                         </Layout.Stack>
diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 37259a6207..654df38cf9 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -11,13 +11,15 @@
         name,
         id = $bindable(null),
         autofocus = true,
-        isProject = false
+        isProject = false,
+        required = true,
     }: {
         show: boolean;
         name: string;
         id: string;
         autofocus?: boolean;
         isProject?: boolean;
+        required?: boolean;
     } = $props();
 
     $effect(() => {
@@ -32,6 +34,8 @@
         if (show) {
             trackEvent(Click.ShowCustomIdClick);
         }
+
+        console.log(id);
     });
 </script>
 
@@ -59,7 +63,7 @@
             {#if isProject}
                 <InputProjectId on:input bind:value={id} {autofocus} />
             {:else}
-                <InputId required on:input bind:value={id} {autofocus} />
+                <InputId {required} on:input bind:value={id} {autofocus} />
             {/if}
         </Layout.Stack>
     </Card.Base>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
index 9dd9baecb0..726438acaf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -35,8 +35,7 @@
                     ? `${base}/images/empty-database-dark.svg`
                     : `${base}/images/empty-database-light.svg`}>
                 <span slot="description">
-                    Create and manage structured data effortlessly, with the flexibility and control
-                    your app needs.
+                    Create, organize, and query structured data with Tables.
                 </span>
                 <span slot="actions">
                     <Button
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 41eb508532..fbe3e5289c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -29,7 +29,8 @@
         databaseRowSheetOptions,
         randomDataModalState,
         reorderItems,
-        showCreateAttributeSheet
+        showCreateAttributeSheet,
+        spreadsheetLoading
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateAttribute from './createAttribute.svelte';
@@ -48,6 +49,7 @@
     import { Button, Seekbar } from '$lib/elements/forms';
     import { generateFakeDocuments, generateAttributes } from '$lib/helpers/faker';
     import { addNotification } from '$lib/stores/notifications';
+    import { sleep } from '$lib/helpers/promises';
 
     let editDocument: EditDocument;
     let createAttribute: CreateAttribute;
@@ -216,6 +218,7 @@
     });
 
     async function createFakeData() {
+        $spreadsheetLoading = true;
         $randomDataModalState.show = false;
 
         let attributes = $collection.attributes;
@@ -233,7 +236,7 @@
                     type: 'error',
                     message: e.message
                 });
-
+                $spreadsheetLoading = false;
                 return;
             }
         }
@@ -256,6 +259,10 @@
                 message: e.message
             });
         }
+
+        /* api is too fast! */
+        await sleep(1250);
+        $spreadsheetLoading = false;
     }
 </script>
 
@@ -314,7 +321,7 @@
 </SideSheet>
 
 <Dialog title="Generate random data" bind:open={$randomDataModalState.show}>
-    <Layout.Stack gap="xl">
+    <Layout.Stack style="gap: 28px;">
         <Typography.Text>
             Select how many random records to generate for testing. This won't delete or replace
             your existing records.
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
index 54b734d73c..95b1a41487 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/deleteAttribute.svelte
@@ -52,7 +52,6 @@
             );
 
             trackEvent(Submit.AttributeDelete);
-            invalidate(Dependencies.COLLECTION);
             addNotification({
                 type: 'success',
                 message:
@@ -61,6 +60,7 @@
                         : `${selectedAttributes.length} attributes have been deleted`
             });
 
+            await invalidate(Dependencies.COLLECTION);
             showDelete = false;
             selectedAttribute = [];
         } catch (e) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 1bf9a6f317..654ef91c22 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -137,6 +137,8 @@
     }
 
     $effect(() => {
+        columnId; /* silences lint check, variable not read */
+
         // correct view
         if (selectedOption) {
             $option = attributeOptions.find((option) => option.name === selectedOption);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index dfe3d7a5bb..08c589aef1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -12,6 +12,7 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { SortButton } from '$lib/components';
     import type { Column } from '$lib/helpers/types';
+    import { spreadsheetLoading } from '../store';
 
     type Mode = 'records' | 'indexes';
 
@@ -114,7 +115,9 @@
         allowSelection
         emptyCells={12}
         height="fit-content"
-        columns={spreadsheetColumns}>
+        columns={spreadsheetColumns}
+        loading={$spreadsheetLoading}
+    >
         <svelte:fragment slot="header" let:root>
             {#each spreadsheetColumns as column (column.id)}
                 <Spreadsheet.Header.Cell {root} column={column.id} icon={column.icon ?? undefined}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 0ddf827fe6..ee8d8ee53f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -28,7 +28,7 @@
         reorderItems,
         columnsOrder,
         columnsWidth,
-        randomDataModalState
+        randomDataModalState, spreadsheetLoading
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -252,7 +252,6 @@
         );
     }
 
-    let loading = false;
     let showColumnDelete = false;
     let selectedRows: string[] = [];
 
@@ -260,11 +259,11 @@
     let selectedDocumentForDelete: Models.Document['$id'] | null = null;
 
     async function sort(query: string[]) {
-        loading = true;
+        $spreadsheetLoading = true;
         documents = await sdk
             .forProject(page.params.region, page.params.project)
             .databases.listDocuments(databaseId, collectionId, query);
-        loading = false;
+        $spreadsheetLoading = false;
     }
 
     async function handleDelete() {
@@ -448,11 +447,11 @@
 <SpreadsheetContainer>
     <Spreadsheet.Root
         let:root
-        {loading}
         height="100%"
         allowSelection
         bind:selectedRows
         bind:columns={$columns}
+        loading={$spreadsheetLoading}
         emptyCells={emptyCellsCount}
         bottomActionClick={() => (showRecordsCreateSheet.show = true)}
         on:columnsSwap={(order) => {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index af837998b8..b8903ea243 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -122,3 +122,5 @@ export const randomDataModalState = writable({
     show: false,
     value: 25 // initial value!
 });
+
+export const spreadsheetLoading = writable(false);
\ No newline at end of file
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
index 69ccbb6793..62ac56c52c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createCollection.svelte
@@ -87,6 +87,7 @@
     <CustomId
         show
         bind:id
+        required={false}
         autofocus={false}
         name="Collection"
         on:input={() => {

From db80830829389a6116947348996d104c3f71d14c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 28 Jul 2025 19:17:00 +0530
Subject: [PATCH 046/118] misc: updates.

---
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  10 +-
 src/lib/components/customId.svelte            |   4 +-
 .../collection-[collection]/+layout.svelte    |   3 +
 .../layout/emptySheet.svelte                  |  12 +-
 .../spreadsheet.svelte                        |  44 +++----
 .../collection-[collection]/store.ts          |   2 +-
 .../database-[database]/subNavigation.svelte  |  52 +++++---
 static/images/empty-database-light.svg        | 120 +++++++++---------
 9 files changed, 125 insertions(+), 124 deletions(-)

diff --git a/package.json b/package.json
index 56a30dfd75..93e0c2a55c 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce06ce83d1..054eadd31e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3686,7 +3686,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@99ee9f5(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
index 654df38cf9..a46307c812 100644
--- a/src/lib/components/customId.svelte
+++ b/src/lib/components/customId.svelte
@@ -12,7 +12,7 @@
         id = $bindable(null),
         autofocus = true,
         isProject = false,
-        required = true,
+        required = true
     }: {
         show: boolean;
         name: string;
@@ -34,8 +34,6 @@
         if (show) {
             trackEvent(Click.ShowCustomIdClick);
         }
-
-        console.log(id);
     });
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index fbe3e5289c..02f41b2d81 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -241,6 +241,9 @@
             }
         }
 
+        /* let the attributes be processed! */
+        await sleep(1250);
+
         try {
             const documents = generateFakeDocuments(attributes, $randomDataModalState.value);
             await sdk
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 08c589aef1..6ac658ae53 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -1,12 +1,5 @@
 <script lang="ts">
-    import {
-        Badge,
-        Button,
-        Icon,
-        Layout,
-        Spreadsheet,
-        Typography
-    } from '@appwrite.io/pink-svelte';
+    import { Badge, Button, Icon, Layout, Spreadsheet, Typography } from '@appwrite.io/pink-svelte';
 
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -116,8 +109,7 @@
         emptyCells={12}
         height="fit-content"
         columns={spreadsheetColumns}
-        loading={$spreadsheetLoading}
-    >
+        loading={$spreadsheetLoading}>
         <svelte:fragment slot="header" let:root>
             {#each spreadsheetColumns as column (column.id)}
                 <Spreadsheet.Header.Cell {root} column={column.id} icon={column.icon ?? undefined}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index ee8d8ee53f..6446982bd8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -28,7 +28,8 @@
         reorderItems,
         columnsOrder,
         columnsWidth,
-        randomDataModalState, spreadsheetLoading
+        randomDataModalState,
+        spreadsheetLoading
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -132,14 +133,7 @@
             formattedColumn = `${column}`;
         }
 
-        return {
-            value:
-                formattedColumn.length > 20
-                    ? `${formattedColumn.slice(0, 20)}...`
-                    : formattedColumn,
-            truncated: formattedColumn.length > 20,
-            whole: `${formattedColumn.slice(0, 100)}...`
-        };
+        return formattedColumn;
     }
 
     function getAppropriateIcon(type: string): ComponentType {
@@ -199,7 +193,7 @@
                 id: '$id',
                 title: 'ID',
                 width: getColumnWidth('$id', 200),
-                minimumWidth: 200,
+                minimumWidth: 225,
                 draggable: false,
                 type: 'string',
                 icon: IconFingerPrint,
@@ -523,9 +517,10 @@
                         {root}
                         column={columnId}
                         {isEditable}
-                        value={columnId.includes('$') || formatted.value === 'null'
+                        value={columnId.includes('$') || formatted === 'null'
                             ? undefined
-                            : formatted.value}>
+                            : formatted
+                            }>
                         {#if columnId === '$id'}
                             <Id value={document.$id}>{document.$id}</Id>
                         {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
@@ -606,27 +601,26 @@
                                                 copy={false}
                                                 variant="secret"
                                                 isVisible={false}
-                                                text={formatted.value} />
+                                                text={formatted} />
                                         </button>
-                                    {:else if formatted.truncated}
-                                        <Tooltip placement="bottom" disabled={!formatted.truncated}>
-                                            <Typography.Text truncate
-                                                >{formatted.value}</Typography.Text>
+                                    {:else if formatted.length > 20}
+                                        <Tooltip placement="bottom">
+                                            <Typography.Text truncate>
+                                                {formatted}
+                                            </Typography.Text>
                                             <span
-                                                let:showing
                                                 slot="tooltip"
                                                 style:white-space="pre-wrap"
-                                                style:word-break="break-all">
-                                                {#if showing}
-                                                    {formatted.whole}
-                                                {/if}
+                                                style:word-break="break-word">
+                                                {formatted}
                                             </span>
                                         </Tooltip>
-                                    {:else if formatted.value === 'null'}
+                                    {:else if formatted === 'null'}
                                         <Badge variant="secondary" content="NULL" size="xs" />
                                     {:else}
-                                        <Typography.Text truncate
-                                            >{formatted.value}</Typography.Text>
+                                        <Typography.Text truncate>
+                                            {formatted}
+                                        </Typography.Text>
                                     {/if}
                                 {/if}
                             {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index b8903ea243..9c324e8aa0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -123,4 +123,4 @@ export const randomDataModalState = writable({
     value: 25 // initial value!
 });
 
-export const spreadsheetLoading = writable(false);
\ No newline at end of file
+export const spreadsheetLoading = writable(false);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 46d2226f41..60dac5b0da 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -57,39 +57,48 @@
                         {#each sortedCollections as collection}
                             {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
                             {@const isSelected = collectionId === collection.$id}
-                            <li class:is-selected={isSelected}>
-                                <a
-                                    class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
-                                    {href}>
-                                    <Icon
-                                        icon={IconTable}
-                                        size="s"
-                                        color={isSelected
-                                            ? '--fgcolor-neutral-tertiary'
-                                            : '--fgcolor-neutral-weak'} />
-                                    <span class="text collection-name" data-private
-                                        >{collection.name}</span>
-                                </a>
-                            </li>
+
+                            <Layout.Stack gap="m" direction="row" alignItems="center">
+                                <div
+                                    style:border-left="1px solid var(--border-neutral, #ededf0)"
+                                    style:height="1rem">
+                                </div>
+
+                                <li class:is-selected={isSelected} style:width="100%">
+                                    <a
+                                        class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
+                                        {href}>
+                                        <Icon
+                                            icon={IconTable}
+                                            size="s"
+                                            color={isSelected
+                                                ? '--fgcolor-neutral-tertiary'
+                                                : '--fgcolor-neutral-weak'} />
+                                        <span class="text collection-name" data-private
+                                            >{collection.name}</span>
+                                    </a>
+                                </li>
+                            </Layout.Stack>
                         {/each}
                     </ul>
                 {:else}
-                    <Layout.Stack gap="m">
+                    <div style:padding-block="0.75rem">
                         <Layout.Stack
                             gap="m"
                             direction="row"
+                            alignItems="center"
                             class="u-margin-inline-start-8 u-margin-block-start-8">
-                            <div style="border-left: 1px solid var(--border-neutral, #ededf0)">
+                            <div
+                                style:border-left="1px solid var(--border-neutral, #ededf0)"
+                                style:height="1rem">
                             </div>
                             No tables yet
                         </Layout.Stack>
-                    </Layout.Stack>
+                    </div>
                 {/if}
 
-                <!-- TODO: refer designs for spacing and stuff -->
-                <Layout.Stack gap="xs" alignItems="center" direction="row">
+                <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
                     <Icon icon={IconPlus} size="s" />
-
                     <Button
                         compact
                         on:click={() => {
@@ -171,6 +180,7 @@
     .collection-content {
         flex: 1;
         overflow-y: auto;
+        overflow-x: hidden;
         min-height: 0;
         margin-bottom: auto;
         padding-bottom: 16px;
@@ -199,7 +209,6 @@
     }
 
     .drop-list {
-        border-left: 1px solid var(--border-neutral, #ededf0);
         flex: 1;
         padding-left: 4px;
         font-size: var(--font-size-sm);
@@ -207,6 +216,7 @@
 
         .is-selected,
         li:hover {
+            width: 100%;
             color: var(--fgcolor-neutral-primary);
             border-radius: var(--border-radius-xs, 4px);
             background: var(--bgcolor-neutral-secondary);
diff --git a/static/images/empty-database-light.svg b/static/images/empty-database-light.svg
index e71d18b047..c1719ac710 100644
--- a/static/images/empty-database-light.svg
+++ b/static/images/empty-database-light.svg
@@ -1,93 +1,97 @@
 <svg width="1015" height="184" viewBox="0 0 1015 184" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2535_66839)">
+<g clip-path="url(#clip0_2877_60059)">
 <path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="white"/>
-<foreignObject x="226" y="12" width="563" height="194"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_2535_66839_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<foreignObject x="226" y="12" width="563" height="194"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_2877_60059_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
 <rect x="230" y="16" width="555" height="186" rx="12" fill="white" fill-opacity="0.32"/>
 <rect x="230.5" y="16.5" width="554" height="185" rx="11.5" stroke="#19191C" stroke-opacity="0.03"/>
 </g>
-<g filter="url(#filter1_f_2535_66839)">
-<path d="M266.195 52.6414C250.426 78.6823 230.434 97.8723 221.543 95.5035C212.652 93.1347 218.228 70.1041 233.998 44.0632C249.767 18.0223 225.106 20.266 233.997 22.6348C242.888 25.0036 281.965 26.6004 266.195 52.6414Z" fill="url(#paint0_radial_2535_66839)" fill-opacity="0.2"/>
+<g filter="url(#filter1_f_2877_60059)">
+<path d="M266.195 52.6414C250.426 78.6823 230.434 97.8723 221.543 95.5035C212.652 93.1347 218.228 70.1041 233.998 44.0632C249.767 18.0223 225.106 20.266 233.997 22.6348C242.888 25.0036 281.965 26.6004 266.195 52.6414Z" fill="url(#paint0_radial_2877_60059)" fill-opacity="0.2"/>
 </g>
-<foreignObject x="233.2" y="19.2" width="548.6" height="179.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.9px);clip-path:url(#bgblur_2_2535_66839_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="1.8">
+<foreignObject x="233.2" y="19.2" width="548.6" height="179.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.9px);clip-path:url(#bgblur_2_2877_60059_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="1.8">
 <rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" fill="#FAFAFB"/>
 <rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="#EDEDF0" stroke-width="0.9"/>
-<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="url(#paint1_linear_2535_66839)" stroke-opacity="0.4" stroke-width="0.9"/>
+<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="url(#paint1_linear_2877_60059)" stroke-opacity="0.4" stroke-width="0.9"/>
 </g>
 <path d="M254.886 34.8325C255.732 35.7325 256.155 36.88 256.155 38.275C256.155 39.67 255.732 40.822 254.886 41.731C254.049 42.631 252.969 43.081 251.646 43.081C250.323 43.081 249.239 42.631 248.393 41.731C247.556 40.822 247.137 39.67 247.137 38.275C247.137 36.88 247.556 35.7325 248.393 34.8325C249.239 33.9235 250.323 33.469 251.646 33.469C252.969 33.469 254.049 33.9235 254.886 34.8325ZM249.257 35.602C248.645 36.295 248.339 37.186 248.339 38.275C248.339 39.364 248.645 40.2595 249.257 40.9615C249.869 41.6545 250.665 42.001 251.646 42.001C252.627 42.001 253.424 41.6545 254.036 40.9615C254.648 40.2595 254.954 39.364 254.954 38.275C254.954 37.186 254.648 36.295 254.036 35.602C253.424 34.9 252.627 34.549 251.646 34.549C250.665 34.549 249.869 34.9 249.257 35.602ZM260.664 36.115H260.974V37.195H260.421C259.764 37.195 259.291 37.4155 259.003 37.8565C258.724 38.2975 258.585 38.842 258.585 39.49V43H257.478V36.115H258.436L258.585 37.1545C259.008 36.4615 259.701 36.115 260.664 36.115ZM266.965 37.168V33.55H268.072V43H267.114L266.965 41.893C266.389 42.685 265.602 43.081 264.603 43.081C263.631 43.081 262.834 42.7705 262.213 42.1495C261.601 41.5195 261.295 40.6555 261.295 39.5575C261.295 38.5135 261.606 37.6675 262.227 37.0195C262.848 36.3625 263.64 36.034 264.603 36.034C265.701 36.034 266.488 36.412 266.965 37.168ZM264.711 42.0955C265.386 42.0955 265.93 41.8615 266.344 41.3935C266.767 40.9255 266.979 40.3225 266.979 39.5845C266.979 38.8285 266.767 38.212 266.344 37.735C265.93 37.258 265.386 37.0195 264.711 37.0195C264.027 37.0195 263.473 37.258 263.05 37.735C262.636 38.203 262.429 38.8105 262.429 39.5575C262.429 40.3045 262.636 40.9165 263.05 41.3935C263.473 41.8615 264.027 42.0955 264.711 42.0955ZM272.753 43.081C271.727 43.081 270.899 42.757 270.269 42.109C269.648 41.461 269.337 40.6105 269.337 39.5575C269.337 38.5135 269.639 37.6675 270.242 37.0195C270.845 36.3625 271.632 36.034 272.604 36.034C273.585 36.034 274.368 36.3265 274.953 36.9115C275.538 37.4875 275.844 38.284 275.871 39.301C275.871 39.4 275.862 39.5575 275.844 39.7735H270.498V39.868C270.516 40.534 270.719 41.074 271.106 41.488C271.502 41.893 272.024 42.0955 272.672 42.0955C273.167 42.0955 273.585 41.974 273.927 41.731C274.278 41.479 274.512 41.1325 274.629 40.6915H275.75C275.615 41.3935 275.277 41.9695 274.737 42.4195C274.197 42.8605 273.536 43.081 272.753 43.081ZM270.566 38.8555H274.683C274.629 38.2705 274.418 37.816 274.049 37.492C273.68 37.168 273.203 37.006 272.618 37.006C272.096 37.006 271.637 37.177 271.241 37.519C270.845 37.861 270.62 38.3065 270.566 38.8555ZM280.32 36.115H280.631V37.195H280.077C279.42 37.195 278.948 37.4155 278.66 37.8565C278.381 38.2975 278.241 38.842 278.241 39.49V43H277.134V36.115H278.093L278.241 37.1545C278.664 36.4615 279.357 36.115 280.32 36.115ZM281.162 40.732H282.296C282.314 41.146 282.494 41.4835 282.836 41.7445C283.178 42.0055 283.632 42.136 284.199 42.136C284.685 42.136 285.081 42.0415 285.387 41.8525C285.702 41.6545 285.86 41.398 285.86 41.083C285.86 40.912 285.824 40.768 285.752 40.651C285.689 40.534 285.617 40.444 285.536 40.381C285.464 40.309 285.329 40.2505 285.131 40.2055C284.933 40.1515 284.78 40.12 284.672 40.111C284.564 40.093 284.366 40.066 284.078 40.03C283.637 39.976 283.272 39.9175 282.984 39.8545C282.696 39.7825 282.413 39.679 282.134 39.544C281.855 39.4 281.648 39.211 281.513 38.977C281.378 38.734 281.31 38.4415 281.31 38.0995C281.31 37.4785 281.562 36.979 282.066 36.601C282.579 36.214 283.227 36.025 284.01 36.034C284.82 36.043 285.477 36.2365 285.981 36.6145C286.485 36.9835 286.764 37.5145 286.818 38.2075H285.684C285.639 37.8475 285.464 37.555 285.158 37.33C284.861 37.096 284.478 36.979 284.01 36.979C283.524 36.979 283.133 37.0735 282.836 37.2625C282.548 37.4515 282.404 37.7035 282.404 38.0185C282.404 38.1985 282.44 38.347 282.512 38.464C282.593 38.581 282.723 38.6755 282.903 38.7475C283.092 38.8105 283.263 38.86 283.416 38.896C283.578 38.923 283.817 38.9545 284.132 38.9905C284.492 39.0355 284.793 39.0805 285.036 39.1255C285.279 39.1705 285.531 39.2425 285.792 39.3415C286.053 39.4405 286.26 39.5575 286.413 39.6925C286.575 39.8275 286.706 40.0075 286.805 40.2325C286.904 40.4485 286.953 40.705 286.953 41.002C286.953 41.632 286.688 42.136 286.157 42.514C285.635 42.892 284.982 43.081 284.199 43.081C283.29 43.081 282.557 42.874 281.999 42.46C281.45 42.046 281.171 41.47 281.162 40.732Z" fill="#818186"/>
 <g opacity="0.8">
-<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="10.4625" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
-<mask id="mask0_2535_66839" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="57" width="537" height="165">
-<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="9.7875" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
+<rect x="239.337" y="49.3375" width="536.325" height="164.325" rx="10.4625" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
+<mask id="mask0_2877_60059" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="49" width="537" height="165">
+<rect x="239.337" y="49.3375" width="536.325" height="164.325" rx="9.7875" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
 </mask>
-<g mask="url(#mask0_2535_66839)">
-<mask id="mask1_2535_66839" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="56" width="537" height="231">
-<rect x="323.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 323.613 57.2603)" fill="#D9D9D9"/>
-<rect x="239.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 239.699 57.2524)" fill="#D9D9D9"/>
-<rect x="407.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 407.613 57.2603)" fill="#D9D9D9"/>
-<rect x="323.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 323.699 57.2524)" fill="#D9D9D9"/>
-<rect x="491.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 491.613 57.2603)" fill="#D9D9D9"/>
-<rect x="407.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 407.699 57.2524)" fill="#D9D9D9"/>
-<rect x="575.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 575.613 57.2603)" fill="#D9D9D9"/>
-<rect x="491.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 491.699 57.2524)" fill="#D9D9D9"/>
-<rect x="659.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 659.613 57.2598)" fill="#D9D9D9"/>
-<rect x="575.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 575.699 57.252)" fill="#D9D9D9"/>
-<rect x="743.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 743.613 57.2598)" fill="#D9D9D9"/>
-<rect x="659.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 659.699 57.252)" fill="#D9D9D9"/>
-<rect x="239" y="83.6851" width="537" height="0.675" fill="#D9D9D9"/>
-<rect x="239" y="111.36" width="537" height="0.675" fill="#D9D9D9"/>
-<rect x="239" y="139.035" width="537" height="0.675" fill="#D9D9D9"/>
-<rect x="239" y="166.71" width="537" height="0.675" fill="#D9D9D9"/>
+<g mask="url(#mask0_2877_60059)">
+<mask id="mask1_2877_60059" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="48" width="537" height="231">
+<rect x="323.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 323.613 49.2603)" fill="#D9D9D9"/>
+<rect x="239.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 239.699 49.2524)" fill="#D9D9D9"/>
+<rect x="407.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 407.613 49.2603)" fill="#D9D9D9"/>
+<rect x="323.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 323.699 49.2524)" fill="#D9D9D9"/>
+<rect x="491.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 491.613 49.2603)" fill="#D9D9D9"/>
+<rect x="407.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 407.699 49.2524)" fill="#D9D9D9"/>
+<rect x="575.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 575.613 49.2603)" fill="#D9D9D9"/>
+<rect x="491.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 491.699 49.2524)" fill="#D9D9D9"/>
+<rect x="659.613" y="49.2598" width="229.5" height="0.675" transform="rotate(90.0053 659.613 49.2598)" fill="#D9D9D9"/>
+<rect x="575.699" y="49.252" width="229.5" height="0.675" transform="rotate(90.0053 575.699 49.252)" fill="#D9D9D9"/>
+<rect x="743.613" y="49.2598" width="229.5" height="0.675" transform="rotate(90.0053 743.613 49.2598)" fill="#D9D9D9"/>
+<rect x="659.699" y="49.252" width="229.5" height="0.675" transform="rotate(90.0053 659.699 49.252)" fill="#D9D9D9"/>
+<rect x="239" y="75.6851" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="103.36" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="131.035" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="158.71" width="537" height="0.675" fill="#D9D9D9"/>
 </mask>
-<g mask="url(#mask1_2535_66839)">
-<rect x="239" y="57" width="537" height="165" fill="url(#paint2_radial_2535_66839)"/>
+<g mask="url(#mask1_2877_60059)">
+<rect x="239" y="49" width="537" height="165" fill="url(#paint2_radial_2877_60059)"/>
 </g>
 </g>
 </g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M250.976 66.5925C251.603 66.339 252.287 66.1997 253.002 66.1997C255.984 66.1997 258.402 68.6174 258.402 71.5997C258.402 71.9311 258.133 72.1997 257.802 72.1997C257.47 72.1997 257.202 71.9311 257.202 71.5997C257.202 69.2801 255.321 67.3997 253.002 67.3997C252.443 67.3997 251.912 67.5082 251.427 67.7048C251.12 67.8291 250.77 67.6809 250.645 67.3737C250.521 67.0666 250.669 66.7168 250.976 66.5925ZM249.799 67.9749C250.047 68.1942 250.071 68.5733 249.851 68.8218C249.198 69.5625 248.802 70.5341 248.802 71.5997C248.802 71.9311 248.533 72.1997 248.202 72.1997C247.87 72.1997 247.602 71.9311 247.602 71.5997C247.602 70.2306 248.112 68.9792 248.952 68.0277C249.171 67.7792 249.55 67.7556 249.799 67.9749Z" fill="#E4E4E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M250.002 71.5997C250.002 69.9429 251.345 68.5997 253.002 68.5997C254.658 68.5997 256.002 69.9429 256.002 71.5997C256.002 71.9311 255.733 72.1997 255.402 72.1997C255.07 72.1997 254.802 71.9311 254.802 71.5997C254.802 70.6056 253.996 69.7997 253.002 69.7997C252.007 69.7997 251.202 70.6056 251.202 71.5997C251.202 72.606 250.995 73.5656 250.621 74.437C250.49 74.7415 250.137 74.8824 249.833 74.7517C249.528 74.621 249.387 74.2682 249.518 73.9637C249.829 73.2391 250.002 72.4403 250.002 71.5997ZM255.354 72.8071C255.682 72.859 255.905 73.1664 255.853 73.4937C255.774 73.9917 255.664 74.4796 255.526 74.9554C255.433 75.2736 255.1 75.4565 254.782 75.364C254.464 75.2715 254.281 74.9386 254.374 74.6204C254.498 74.1926 254.597 73.7538 254.668 73.3057C254.72 72.9784 255.027 72.7552 255.354 72.8071Z" fill="#E4E4E7"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M253.002 70.9997C253.333 70.9997 253.602 71.2683 253.602 71.5997C253.602 72.9415 253.326 74.2204 252.828 75.3818C252.697 75.6864 252.344 75.8273 252.04 75.6967C251.735 75.566 251.594 75.2132 251.725 74.9087C252.16 73.894 252.402 72.7758 252.402 71.5997C252.402 71.2683 252.67 70.9997 253.002 70.9997Z" fill="#E4E4E7"/>
-<path opacity="0.5" d="M262.938 67V75H261.969V67H262.938ZM267.239 75H264.77V67H267.348C268.124 67 268.788 67.1602 269.34 67.4805C269.892 67.7982 270.315 68.2552 270.61 68.8516C270.904 69.4453 271.051 70.1562 271.051 70.9844C271.051 71.8177 270.903 72.5352 270.606 73.1367C270.309 73.7357 269.877 74.1966 269.309 74.5195C268.741 74.8398 268.051 75 267.239 75ZM265.739 74.1406H267.176C267.838 74.1406 268.386 74.013 268.821 73.7578C269.256 73.5026 269.58 73.1393 269.793 72.668C270.007 72.1966 270.114 71.6354 270.114 70.9844C270.114 70.3385 270.008 69.7826 269.797 69.3164C269.586 68.8477 269.271 68.4883 268.852 68.2383C268.433 67.9857 267.911 67.8594 267.286 67.8594H265.739V74.1406Z" fill="#97979B"/>
-<path d="M341 68.5005H340.998V68.7505C340.998 69.1647 340.662 69.5005 340.248 69.5005C339.834 69.5003 339.498 69.1646 339.498 68.7505V68.5005H338V73.5005H338.752C339.166 73.5007 339.502 73.8364 339.502 74.2505C339.502 74.6645 339.166 75.0003 338.752 75.0005H335.252C334.838 75.0005 334.502 74.6647 334.502 74.2505C334.502 73.8363 334.838 73.5005 335.252 73.5005H336V68.5005H334.502V68.7505C334.502 69.1646 334.166 69.5003 333.752 69.5005C333.338 69.5005 333.002 69.1647 333.002 68.7505V68.5005H333V67.0005H341V68.5005Z" fill="#E4E4E7"/>
-<path opacity="0.5" d="M352.313 67V75H351.375L347.016 68.7187H346.938V75H345.969V67H346.906L351.281 73.2969H351.359V67H352.313ZM355.782 75.1406C355.401 75.1406 355.056 75.069 354.746 74.9258C354.437 74.7799 354.19 74.5703 354.008 74.2969C353.826 74.0208 353.735 73.6875 353.735 73.2969C353.735 72.9531 353.802 72.6745 353.938 72.4609C354.073 72.2448 354.254 72.0755 354.481 71.9531C354.707 71.8307 354.957 71.7396 355.231 71.6797C355.507 71.6172 355.784 71.5677 356.063 71.5313C356.427 71.4844 356.723 71.4492 356.95 71.4258C357.179 71.3997 357.345 71.3568 357.45 71.2969C357.556 71.237 357.61 71.1328 357.61 70.9844V70.9531C357.61 70.5677 357.504 70.2682 357.293 70.0547C357.085 69.8411 356.769 69.7344 356.344 69.7344C355.904 69.7344 355.559 69.8307 355.309 70.0234C355.059 70.2161 354.883 70.4219 354.782 70.6406L353.907 70.3281C354.063 69.9635 354.271 69.6797 354.532 69.4766C354.795 69.2708 355.081 69.1276 355.391 69.0469C355.703 68.9635 356.011 68.9219 356.313 68.9219C356.506 68.9219 356.727 68.9453 356.977 68.9922C357.23 69.0365 357.473 69.1289 357.707 69.2695C357.944 69.4102 358.141 69.6224 358.297 69.9062C358.453 70.1901 358.532 70.5703 358.532 71.0469V75H357.61V74.1875H357.563C357.5 74.3177 357.396 74.457 357.25 74.6055C357.105 74.7539 356.911 74.8802 356.668 74.9844C356.426 75.0885 356.131 75.1406 355.782 75.1406ZM355.922 74.3125C356.287 74.3125 356.594 74.2409 356.844 74.0977C357.097 73.9544 357.287 73.7695 357.414 73.543C357.545 73.3164 357.61 73.0781 357.61 72.8281V71.9844C357.571 72.0312 357.485 72.0742 357.352 72.1133C357.222 72.1497 357.071 72.1823 356.899 72.2109C356.73 72.237 356.564 72.2604 356.403 72.2812C356.244 72.2995 356.115 72.3151 356.016 72.3281C355.776 72.3594 355.552 72.4102 355.344 72.4805C355.138 72.5482 354.972 72.651 354.844 72.7891C354.719 72.9245 354.657 73.1094 354.657 73.3437C354.657 73.6641 354.775 73.9062 355.012 74.0703C355.252 74.2318 355.555 74.3125 355.922 74.3125ZM360.104 75V69H360.995V69.9375H361.073C361.198 69.6172 361.4 69.3685 361.678 69.1914C361.957 69.0117 362.292 68.9219 362.682 68.9219C363.078 68.9219 363.408 69.0117 363.671 69.1914C363.936 69.3685 364.143 69.6172 364.292 69.9375H364.354C364.508 69.6276 364.738 69.3815 365.046 69.1992C365.353 69.0143 365.721 68.9219 366.151 68.9219C366.688 68.9219 367.126 69.0898 367.467 69.4258C367.809 69.7591 367.979 70.2786 367.979 70.9844V75H367.057V70.9844C367.057 70.5417 366.936 70.2253 366.694 70.0352C366.452 69.8451 366.167 69.75 365.839 69.75C365.417 69.75 365.09 69.8776 364.858 70.1328C364.626 70.3854 364.51 70.7057 364.51 71.0937V75H363.573V70.8906C363.573 70.5495 363.462 70.2747 363.241 70.0664C363.02 69.8555 362.734 69.75 362.385 69.75C362.146 69.75 361.922 69.8138 361.714 69.9414C361.508 70.069 361.341 70.2461 361.214 70.4727C361.089 70.6966 361.026 70.9557 361.026 71.25V75H360.104ZM372.07 75.125C371.492 75.125 370.994 74.9974 370.574 74.7422C370.158 74.4844 369.836 74.125 369.609 73.6641C369.385 73.2005 369.274 72.6615 369.274 72.0469C369.274 71.4323 369.385 70.8906 369.609 70.4219C369.836 69.9505 370.151 69.5833 370.555 69.3203C370.961 69.0547 371.435 68.9219 371.977 68.9219C372.289 68.9219 372.598 68.974 372.902 69.0781C373.207 69.1823 373.484 69.3516 373.734 69.5859C373.984 69.8177 374.184 70.125 374.332 70.5078C374.481 70.8906 374.555 71.362 374.555 71.9219V72.3125H369.93V71.5156H373.617C373.617 71.1771 373.55 70.875 373.414 70.6094C373.281 70.3437 373.091 70.1341 372.844 69.9805C372.599 69.8268 372.31 69.75 371.977 69.75C371.609 69.75 371.292 69.8411 371.024 70.0234C370.758 70.2031 370.553 70.4375 370.41 70.7266C370.267 71.0156 370.195 71.3255 370.195 71.6562V72.1875C370.195 72.6406 370.274 73.0247 370.43 73.3398C370.589 73.6523 370.809 73.8906 371.09 74.0547C371.371 74.2161 371.698 74.2969 372.07 74.2969C372.313 74.2969 372.531 74.263 372.727 74.1953C372.925 74.125 373.095 74.0208 373.238 73.8828C373.382 73.7422 373.492 73.5677 373.57 73.3594L374.461 73.6094C374.367 73.9115 374.21 74.1771 373.988 74.4062C373.767 74.6328 373.494 74.8099 373.168 74.9375C372.843 75.0625 372.477 75.125 372.07 75.125Z" fill="#97979B"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M418.599 66.1997C418.268 66.1997 417.999 66.4683 417.999 66.7997V67.3997H417.399C416.736 67.3997 416.199 67.937 416.199 68.5997V74.5997C416.199 75.2624 416.736 75.7997 417.399 75.7997H424.599C425.262 75.7997 425.799 75.2624 425.799 74.5997V68.5997C425.799 67.937 425.262 67.3997 424.599 67.3997H423.999V66.7997C423.999 66.4683 423.731 66.1997 423.399 66.1997C423.068 66.1997 422.799 66.4683 422.799 66.7997V67.3997H419.199V66.7997C419.199 66.4683 418.931 66.1997 418.599 66.1997ZM418.599 69.1997C418.268 69.1997 417.999 69.4683 417.999 69.7997C417.999 70.1311 418.268 70.3997 418.599 70.3997H423.399C423.731 70.3997 423.999 70.1311 423.999 69.7997C423.999 69.4683 423.731 69.1997 423.399 69.1997H418.599Z" fill="#E4E4E7"/>
-<path opacity="0.5" d="M432.109 75.125C431.609 75.125 431.168 74.9987 430.785 74.7461C430.402 74.4909 430.103 74.1315 429.887 73.668C429.671 73.2018 429.563 72.651 429.563 72.0156C429.563 71.3854 429.671 70.8385 429.887 70.375C430.103 69.9115 430.404 69.5534 430.789 69.3008C431.174 69.0482 431.62 68.9219 432.125 68.9219C432.516 68.9219 432.824 68.987 433.051 69.1172C433.28 69.2448 433.454 69.3906 433.574 69.5547C433.697 69.7161 433.792 69.849 433.859 69.9531H433.938V67H434.859V75H433.969V74.0781H433.859C433.792 74.1875 433.695 74.3255 433.57 74.4922C433.445 74.6562 433.267 74.8034 433.035 74.9336C432.803 75.0612 432.495 75.125 432.109 75.125ZM432.234 74.2969C432.604 74.2969 432.917 74.2005 433.172 74.0078C433.427 73.8125 433.621 73.543 433.754 73.1992C433.887 72.8529 433.953 72.4531 433.953 72C433.953 71.5521 433.888 71.1602 433.758 70.8242C433.628 70.4857 433.435 70.2227 433.18 70.0352C432.924 69.8451 432.609 69.75 432.234 69.75C431.844 69.75 431.518 69.8503 431.258 70.0508C431 70.2487 430.806 70.5182 430.676 70.8594C430.548 71.1979 430.484 71.5781 430.484 72C430.484 72.4271 430.549 72.8151 430.68 73.1641C430.813 73.5104 431.008 73.7865 431.266 73.9922C431.526 74.1953 431.849 74.2969 432.234 74.2969ZM438.331 75.1406C437.951 75.1406 437.606 75.069 437.296 74.9258C436.986 74.7799 436.74 74.5703 436.558 74.2969C436.376 74.0208 436.285 73.6875 436.285 73.2969C436.285 72.9531 436.352 72.6745 436.488 72.4609C436.623 72.2448 436.804 72.0755 437.031 71.9531C437.257 71.8307 437.507 71.7396 437.781 71.6797C438.057 71.6172 438.334 71.5677 438.613 71.5313C438.977 71.4844 439.273 71.4492 439.499 71.4258C439.729 71.3997 439.895 71.3568 439.999 71.2969C440.106 71.237 440.16 71.1328 440.16 70.9844V70.9531C440.16 70.5677 440.054 70.2682 439.843 70.0547C439.635 69.8411 439.318 69.7344 438.894 69.7344C438.454 69.7344 438.109 69.8307 437.859 70.0234C437.609 70.2161 437.433 70.4219 437.331 70.6406L436.456 70.3281C436.613 69.9635 436.821 69.6797 437.081 69.4766C437.344 69.2708 437.631 69.1276 437.941 69.0469C438.253 68.9635 438.561 68.9219 438.863 68.9219C439.055 68.9219 439.277 68.9453 439.527 68.9922C439.779 69.0365 440.023 69.1289 440.257 69.2695C440.494 69.4102 440.691 69.6224 440.847 69.9062C441.003 70.1901 441.081 70.5703 441.081 71.0469V75H440.16V74.1875H440.113C440.05 74.3177 439.946 74.457 439.8 74.6055C439.654 74.7539 439.46 74.8802 439.218 74.9844C438.976 75.0885 438.68 75.1406 438.331 75.1406ZM438.472 74.3125C438.837 74.3125 439.144 74.2409 439.394 74.0977C439.647 73.9544 439.837 73.7695 439.964 73.543C440.094 73.3164 440.16 73.0781 440.16 72.8281V71.9844C440.12 72.0312 440.035 72.0742 439.902 72.1133C439.772 72.1497 439.62 72.1823 439.449 72.2109C439.279 72.237 439.114 72.2604 438.953 72.2812C438.794 72.2995 438.665 72.3151 438.566 72.3281C438.326 72.3594 438.102 72.4102 437.894 72.4805C437.688 72.5482 437.522 72.651 437.394 72.7891C437.269 72.9245 437.206 73.1094 437.206 73.3437C437.206 73.6641 437.325 73.9062 437.562 74.0703C437.801 74.2318 438.105 74.3125 438.472 74.3125ZM445.263 69V69.7812H442.154V69H445.263ZM443.06 67.5625H443.982V73.2812C443.982 73.5417 444.02 73.737 444.095 73.8672C444.174 73.9948 444.273 74.0807 444.392 74.125C444.515 74.1667 444.644 74.1875 444.779 74.1875C444.881 74.1875 444.964 74.1823 445.029 74.1719C445.094 74.1589 445.146 74.1484 445.185 74.1406L445.373 74.9687C445.31 74.9922 445.223 75.0156 445.111 75.0391C444.999 75.0651 444.857 75.0781 444.685 75.0781C444.425 75.0781 444.17 75.0221 443.92 74.9102C443.672 74.7982 443.467 74.6276 443.302 74.3984C443.141 74.1693 443.06 73.8802 443.06 73.5312V67.5625ZM448.991 75.125C448.413 75.125 447.914 74.9974 447.495 74.7422C447.079 74.4844 446.757 74.125 446.53 73.6641C446.306 73.2005 446.194 72.6615 446.194 72.0469C446.194 71.4323 446.306 70.8906 446.53 70.4219C446.757 69.9505 447.072 69.5833 447.476 69.3203C447.882 69.0547 448.356 68.9219 448.898 68.9219C449.21 68.9219 449.519 68.974 449.823 69.0781C450.128 69.1823 450.405 69.3516 450.655 69.5859C450.905 69.8177 451.105 70.125 451.253 70.5078C451.401 70.8906 451.476 71.362 451.476 71.9219V72.3125H446.851V71.5156H450.538C450.538 71.1771 450.47 70.875 450.335 70.6094C450.202 70.3437 450.012 70.1341 449.765 69.9805C449.52 69.8268 449.231 69.75 448.898 69.75C448.53 69.75 448.213 69.8411 447.944 70.0234C447.679 70.2031 447.474 70.4375 447.331 70.7266C447.188 71.0156 447.116 71.3255 447.116 71.6562V72.1875C447.116 72.6406 447.194 73.0247 447.351 73.3398C447.51 73.6523 447.73 73.8906 448.011 74.0547C448.292 74.2161 448.619 74.2969 448.991 74.2969C449.233 74.2969 449.452 74.263 449.648 74.1953C449.845 74.125 450.016 74.0208 450.159 73.8828C450.302 73.7422 450.413 73.5677 450.491 73.3594L451.382 73.6094C451.288 73.9115 451.131 74.1771 450.909 74.4062C450.688 74.6328 450.414 74.8099 450.089 74.9375C449.763 75.0625 449.398 75.125 448.991 75.125ZM459.643 71C459.643 71.8437 459.491 72.5729 459.186 73.1875C458.881 73.8021 458.463 74.276 457.932 74.6094C457.401 74.9427 456.794 75.1094 456.112 75.1094C455.429 75.1094 454.823 74.9427 454.291 74.6094C453.76 74.276 453.342 73.8021 453.038 73.1875C452.733 72.5729 452.581 71.8437 452.581 71C452.581 70.1562 452.733 69.4271 453.038 68.8125C453.342 68.1979 453.76 67.724 454.291 67.3906C454.823 67.0573 455.429 66.8906 456.112 66.8906C456.794 66.8906 457.401 67.0573 457.932 67.3906C458.463 67.724 458.881 68.1979 459.186 68.8125C459.491 69.4271 459.643 70.1562 459.643 71ZM458.706 71C458.706 70.3073 458.59 69.7227 458.358 69.2461C458.129 68.7695 457.817 68.4089 457.424 68.1641C457.034 67.9193 456.596 67.7969 456.112 67.7969C455.627 67.7969 455.189 67.9193 454.795 68.1641C454.405 68.4089 454.094 68.7695 453.862 69.2461C453.633 69.7227 453.518 70.3073 453.518 71C453.518 71.6927 453.633 72.2773 453.862 72.7539C454.094 73.2305 454.405 73.5911 454.795 73.8359C455.189 74.0807 455.627 74.2031 456.112 74.2031C456.596 74.2031 457.034 74.0807 457.424 73.8359C457.817 73.5911 458.129 73.2305 458.358 72.7539C458.59 72.2773 458.706 71.6927 458.706 71ZM463.709 69V69.7812H460.474V69H463.709ZM461.443 75V68.1719C461.443 67.8281 461.524 67.5417 461.685 67.3125C461.847 67.0833 462.056 66.9115 462.314 66.7969C462.572 66.6823 462.844 66.625 463.131 66.625C463.357 66.625 463.542 66.6432 463.685 66.6797C463.829 66.7161 463.935 66.75 464.006 66.7812L463.74 67.5781C463.693 67.5625 463.628 67.543 463.545 67.5195C463.464 67.4961 463.357 67.4844 463.224 67.4844C462.92 67.4844 462.7 67.5612 462.564 67.7148C462.431 67.8685 462.365 68.0937 462.365 68.3906V75H461.443ZM465.016 75V67H467.813C468.37 67 468.83 67.0964 469.192 67.2891C469.554 67.4792 469.823 67.7357 470 68.0586C470.177 68.3789 470.266 68.7344 470.266 69.125C470.266 69.4687 470.205 69.7526 470.082 69.9766C469.962 70.2005 469.804 70.3776 469.606 70.5078C469.41 70.638 469.198 70.7344 468.969 70.7969V70.875C469.214 70.8906 469.46 70.9766 469.707 71.1328C469.955 71.2891 470.162 71.513 470.328 71.8047C470.495 72.0964 470.578 72.4531 470.578 72.875C470.578 73.276 470.487 73.6367 470.305 73.957C470.123 74.2773 469.835 74.5312 469.442 74.7187C469.048 74.9062 468.537 75 467.906 75H465.016ZM465.985 74.1406H467.906C468.539 74.1406 468.988 74.0182 469.254 73.7734C469.522 73.526 469.656 73.2266 469.656 72.875C469.656 72.6042 469.587 72.3542 469.449 72.125C469.311 71.8932 469.115 71.7083 468.86 71.5703C468.604 71.4297 468.302 71.3594 467.953 71.3594H465.985V74.1406ZM465.985 70.5156H467.781C468.073 70.5156 468.336 70.4583 468.57 70.3437C468.807 70.2292 468.995 70.0677 469.133 69.8594C469.274 69.651 469.344 69.4062 469.344 69.125C469.344 68.7734 469.222 68.4753 468.977 68.2305C468.732 67.9831 468.344 67.8594 467.813 67.8594H465.985V70.5156ZM471.935 75V69H472.857V75H471.935ZM472.404 68C472.224 68 472.069 67.9388 471.939 67.8164C471.811 67.694 471.748 67.5469 471.748 67.375C471.748 67.2031 471.811 67.056 471.939 66.9336C472.069 66.8112 472.224 66.75 472.404 66.75C472.584 66.75 472.737 66.8112 472.865 66.9336C472.995 67.056 473.06 67.2031 473.06 67.375C473.06 67.5469 472.995 67.694 472.865 67.8164C472.737 67.9388 472.584 68 472.404 68ZM475.107 75.0625C474.915 75.0625 474.749 74.9935 474.611 74.8555C474.473 74.7174 474.404 74.5521 474.404 74.3594C474.404 74.1667 474.473 74.0013 474.611 73.8633C474.749 73.7253 474.915 73.6562 475.107 73.6562C475.3 73.6562 475.465 73.7253 475.603 73.8633C475.741 74.0013 475.81 74.1667 475.81 74.3594C475.81 74.487 475.778 74.6042 475.713 74.7109C475.65 74.8177 475.566 74.9036 475.459 74.9687C475.355 75.0313 475.238 75.0625 475.107 75.0625ZM478.027 75.0625C477.834 75.0625 477.669 74.9935 477.531 74.8555C477.392 74.7174 477.323 74.5521 477.323 74.3594C477.323 74.1667 477.392 74.0013 477.531 73.8633C477.669 73.7253 477.834 73.6562 478.027 73.6562C478.219 73.6562 478.385 73.7253 478.523 73.8633C478.661 74.0013 478.73 74.1667 478.73 74.3594C478.73 74.487 478.697 74.6042 478.632 74.7109C478.57 74.8177 478.485 74.9036 478.378 74.9687C478.274 75.0313 478.157 75.0625 478.027 75.0625ZM480.946 75.0625C480.753 75.0625 480.588 74.9935 480.45 74.8555C480.312 74.7174 480.243 74.5521 480.243 74.3594C480.243 74.1667 480.312 74.0013 480.45 73.8633C480.588 73.7253 480.753 73.6562 480.946 73.6562C481.139 73.6562 481.304 73.7253 481.442 73.8633C481.58 74.0013 481.649 74.1667 481.649 74.3594C481.649 74.487 481.616 74.6042 481.551 74.7109C481.489 74.8177 481.404 74.9036 481.297 74.9687C481.193 75.0313 481.076 75.0625 480.946 75.0625Z" fill="#97979B"/>
-<circle cx="501.125" cy="68.1245" r="0.625" fill="#E4E4E7"/>
-<rect x="503" y="67.4995" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
-<ellipse cx="501.125" cy="71.125" rx="0.625" ry="0.625" fill="#E4E4E7"/>
-<rect x="503" y="70.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
-<ellipse cx="501.125" cy="74.125" rx="0.625" ry="0.625" fill="#E4E4E7"/>
-<rect x="503" y="73.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
-<path opacity="0.5" d="M519.438 69.5C519.352 69.237 519.238 69.0013 519.098 68.793C518.96 68.582 518.794 68.4023 518.602 68.2539C518.411 68.1055 518.195 67.9922 517.953 67.9141C517.711 67.8359 517.445 67.7969 517.156 67.7969C516.682 67.7969 516.251 67.9193 515.863 68.1641C515.475 68.4089 515.167 68.7695 514.938 69.2461C514.708 69.7227 514.594 70.3073 514.594 71C514.594 71.6927 514.71 72.2773 514.941 72.7539C515.173 73.2305 515.487 73.5911 515.883 73.8359C516.279 74.0807 516.724 74.2031 517.219 74.2031C517.677 74.2031 518.081 74.1055 518.43 73.9102C518.781 73.7122 519.055 73.4336 519.25 73.0742C519.448 72.7122 519.547 72.2865 519.547 71.7969L519.844 71.8594H517.438V71H520.484V71.8594C520.484 72.5182 520.344 73.0911 520.063 73.5781C519.784 74.0651 519.398 74.4427 518.906 74.7109C518.417 74.9766 517.854 75.1094 517.219 75.1094C516.51 75.1094 515.888 74.9427 515.352 74.6094C514.818 74.276 514.401 73.8021 514.102 73.1875C513.805 72.5729 513.656 71.8437 513.656 71C513.656 70.3672 513.741 69.7982 513.91 69.293C514.082 68.7852 514.324 68.3529 514.637 67.9961C514.949 67.6393 515.319 67.3659 515.746 67.1758C516.173 66.9857 516.643 66.8906 517.156 66.8906C517.578 66.8906 517.971 66.9544 518.336 67.082C518.703 67.207 519.03 67.3854 519.316 67.6172C519.605 67.8464 519.846 68.1211 520.039 68.4414C520.232 68.7591 520.365 69.112 520.438 69.5H519.438ZM524.424 75.125C523.846 75.125 523.347 74.9974 522.928 74.7422C522.511 74.4844 522.19 74.125 521.963 73.6641C521.739 73.2005 521.627 72.6615 521.627 72.0469C521.627 71.4323 521.739 70.8906 521.963 70.4219C522.19 69.9505 522.505 69.5833 522.909 69.3203C523.315 69.0547 523.789 68.9219 524.33 68.9219C524.643 68.9219 524.952 68.974 525.256 69.0781C525.561 69.1823 525.838 69.3516 526.088 69.5859C526.338 69.8177 526.537 70.125 526.686 70.5078C526.834 70.8906 526.909 71.362 526.909 71.9219V72.3125H522.284V71.5156H525.971C525.971 71.1771 525.903 70.875 525.768 70.6094C525.635 70.3437 525.445 70.1341 525.198 69.9805C524.953 69.8268 524.664 69.75 524.33 69.75C523.963 69.75 523.646 69.8411 523.377 70.0234C523.112 70.2031 522.907 70.4375 522.764 70.7266C522.621 71.0156 522.549 71.3255 522.549 71.6562V72.1875C522.549 72.6406 522.627 73.0247 522.784 73.3398C522.942 73.6523 523.162 73.8906 523.444 74.0547C523.725 74.2161 524.052 74.2969 524.424 74.2969C524.666 74.2969 524.885 74.263 525.08 74.1953C525.278 74.125 525.449 74.0208 525.592 73.8828C525.735 73.7422 525.846 73.5677 525.924 73.3594L526.815 73.6094C526.721 73.9115 526.564 74.1771 526.342 74.4062C526.121 74.6328 525.847 74.8099 525.522 74.9375C525.196 75.0625 524.83 75.125 524.424 75.125ZM529.123 71.3906V75H528.201V69H529.092V69.9375H529.17C529.31 69.6328 529.524 69.388 529.81 69.2031C530.097 69.0156 530.467 68.9219 530.92 68.9219C531.326 68.9219 531.681 69.0052 531.986 69.1719C532.291 69.3359 532.528 69.5859 532.697 69.9219C532.866 70.2552 532.951 70.6771 532.951 71.1875V75H532.029V71.25C532.029 70.7786 531.907 70.4115 531.662 70.1484C531.417 69.8828 531.081 69.75 530.654 69.75C530.36 69.75 530.097 69.8138 529.865 69.9414C529.636 70.069 529.455 70.2552 529.322 70.5C529.189 70.7448 529.123 71.0417 529.123 71.3906ZM536.791 75.125C536.291 75.125 535.85 74.9987 535.467 74.7461C535.084 74.4909 534.785 74.1315 534.568 73.668C534.352 73.2018 534.244 72.651 534.244 72.0156C534.244 71.3854 534.352 70.8385 534.568 70.375C534.785 69.9115 535.085 69.5534 535.471 69.3008C535.856 69.0482 536.302 68.9219 536.807 68.9219C537.197 68.9219 537.506 68.987 537.733 69.1172C537.962 69.2448 538.136 69.3906 538.256 69.5547C538.378 69.7161 538.473 69.849 538.541 69.9531H538.619V67H539.541V75H538.65V74.0781H538.541C538.473 74.1875 538.377 74.3255 538.252 74.4922C538.127 74.6562 537.949 74.8034 537.717 74.9336C537.485 75.0612 537.177 75.125 536.791 75.125ZM536.916 74.2969C537.286 74.2969 537.598 74.2005 537.854 74.0078C538.109 73.8125 538.303 73.543 538.436 73.1992C538.568 72.8529 538.635 72.4531 538.635 72C538.635 71.5521 538.57 71.1602 538.44 70.8242C538.309 70.4857 538.117 70.2227 537.861 70.0352C537.606 69.8451 537.291 69.75 536.916 69.75C536.525 69.75 536.2 69.8503 535.94 70.0508C535.682 70.2487 535.488 70.5182 535.358 70.8594C535.23 71.1979 535.166 71.5781 535.166 72C535.166 72.4271 535.231 72.8151 535.361 73.1641C535.494 73.5104 535.69 73.7865 535.947 73.9922C536.208 74.1953 536.531 74.2969 536.916 74.2969ZM543.763 75.125C543.185 75.125 542.686 74.9974 542.267 74.7422C541.85 74.4844 541.529 74.125 541.302 73.6641C541.078 73.2005 540.966 72.6615 540.966 72.0469C540.966 71.4323 541.078 70.8906 541.302 70.4219C541.529 69.9505 541.844 69.5833 542.247 69.3203C542.654 69.0547 543.128 68.9219 543.669 68.9219C543.982 68.9219 544.29 68.974 544.595 69.0781C544.9 69.1823 545.177 69.3516 545.427 69.5859C545.677 69.8177 545.876 70.125 546.025 70.5078C546.173 70.8906 546.247 71.362 546.247 71.9219V72.3125H541.622V71.5156H545.31C545.31 71.1771 545.242 70.875 545.107 70.6094C544.974 70.3437 544.784 70.1341 544.537 69.9805C544.292 69.8268 544.003 69.75 543.669 69.75C543.302 69.75 542.984 69.8411 542.716 70.0234C542.451 70.2031 542.246 70.4375 542.103 70.7266C541.96 71.0156 541.888 71.3255 541.888 71.6562V72.1875C541.888 72.6406 541.966 73.0247 542.122 73.3398C542.281 73.6523 542.501 73.8906 542.783 74.0547C543.064 74.2161 543.391 74.2969 543.763 74.2969C544.005 74.2969 544.224 74.263 544.419 74.1953C544.617 74.125 544.788 74.0208 544.931 73.8828C545.074 73.7422 545.185 73.5677 545.263 73.3594L546.154 73.6094C546.06 73.9115 545.902 74.1771 545.681 74.4062C545.46 74.6328 545.186 74.8099 544.861 74.9375C544.535 75.0625 544.169 75.125 543.763 75.125ZM547.54 75V69H548.43V69.9062H548.493C548.602 69.6094 548.8 69.3685 549.087 69.1836C549.373 68.9987 549.696 68.9062 550.055 68.9062C550.123 68.9062 550.208 68.9076 550.309 68.9102C550.411 68.9128 550.488 68.9167 550.54 68.9219V69.8594C550.509 69.8516 550.437 69.8398 550.325 69.8242C550.216 69.806 550.1 69.7969 549.977 69.7969C549.686 69.7969 549.425 69.8581 549.196 69.9805C548.97 70.1003 548.79 70.2669 548.657 70.4805C548.527 70.6914 548.462 70.9323 548.462 71.2031V75H547.54Z" fill="#97979B"/>
-<path d="M584.201 68.5305L588.999 70.9295L593.797 68.5305C593.761 67.9003 593.238 67.4004 592.599 67.4004H585.399C584.76 67.4004 584.237 67.9003 584.201 68.5305Z" fill="#E4E4E7"/>
-<path d="M593.799 69.8711L588.999 72.2711L584.199 69.8712V73.4004C584.199 74.0631 584.736 74.6004 585.399 74.6004H592.599C593.262 74.6004 593.799 74.0631 593.799 73.4004V69.8711Z" fill="#E4E4E7"/>
-<path opacity="0.5" d="M600.359 75.125C599.781 75.125 599.283 74.9974 598.863 74.7422C598.447 74.4844 598.125 74.125 597.898 73.6641C597.674 73.2005 597.563 72.6615 597.563 72.0469C597.563 71.4323 597.674 70.8906 597.898 70.4219C598.125 69.9505 598.44 69.5833 598.844 69.3203C599.25 69.0547 599.724 68.9219 600.266 68.9219C600.578 68.9219 600.887 68.974 601.191 69.0781C601.496 69.1823 601.773 69.3516 602.023 69.5859C602.273 69.8177 602.473 70.125 602.621 70.5078C602.77 70.8906 602.844 71.362 602.844 71.9219V72.3125H598.219V71.5156H601.906C601.906 71.1771 601.839 70.875 601.703 70.6094C601.57 70.3437 601.38 70.1341 601.133 69.9805C600.888 69.8268 600.599 69.75 600.266 69.75C599.898 69.75 599.581 69.8411 599.313 70.0234C599.047 70.2031 598.842 70.4375 598.699 70.7266C598.556 71.0156 598.484 71.3255 598.484 71.6562V72.1875C598.484 72.6406 598.563 73.0247 598.719 73.3398C598.878 73.6523 599.098 73.8906 599.379 74.0547C599.66 74.2161 599.987 74.2969 600.359 74.2969C600.602 74.2969 600.82 74.263 601.016 74.1953C601.214 74.125 601.384 74.0208 601.527 73.8828C601.671 73.7422 601.781 73.5677 601.859 73.3594L602.75 73.6094C602.656 73.9115 602.499 74.1771 602.277 74.4062C602.056 74.6328 601.783 74.8099 601.457 74.9375C601.132 75.0625 600.766 75.125 600.359 75.125ZM604.136 75V69H605.027V69.9375H605.105C605.23 69.6172 605.432 69.3685 605.71 69.1914C605.989 69.0117 606.324 68.9219 606.714 68.9219C607.11 68.9219 607.439 69.0117 607.703 69.1914C607.968 69.3685 608.175 69.6172 608.324 69.9375H608.386C608.54 69.6276 608.77 69.3815 609.078 69.1992C609.385 69.0143 609.753 68.9219 610.183 68.9219C610.719 68.9219 611.158 69.0898 611.499 69.4258C611.841 69.7591 612.011 70.2786 612.011 70.9844V75H611.089V70.9844C611.089 70.5417 610.968 70.2253 610.726 70.0352C610.484 69.8451 610.199 69.75 609.87 69.75C609.449 69.75 609.122 69.8776 608.89 70.1328C608.658 70.3854 608.542 70.7057 608.542 71.0937V75H607.605V70.8906C607.605 70.5495 607.494 70.2747 607.273 70.0664C607.051 69.8555 606.766 69.75 606.417 69.75C606.178 69.75 605.954 69.8138 605.745 69.9414C605.54 70.069 605.373 70.2461 605.245 70.4727C605.12 70.6966 605.058 70.9557 605.058 71.25V75H604.136ZM615.352 75.1406C614.972 75.1406 614.627 75.069 614.317 74.9258C614.007 74.7799 613.761 74.5703 613.579 74.2969C613.397 74.0208 613.305 73.6875 613.305 73.2969C613.305 72.9531 613.373 72.6745 613.509 72.4609C613.644 72.2448 613.825 72.0755 614.051 71.9531C614.278 71.8307 614.528 71.7396 614.801 71.6797C615.078 71.6172 615.355 71.5677 615.634 71.5313C615.998 71.4844 616.294 71.4492 616.52 71.4258C616.749 71.3997 616.916 71.3568 617.02 71.2969C617.127 71.237 617.18 71.1328 617.18 70.9844V70.9531C617.18 70.5677 617.075 70.2682 616.864 70.0547C616.656 69.8411 616.339 69.7344 615.915 69.7344C615.475 69.7344 615.13 69.8307 614.88 70.0234C614.63 70.2161 614.454 70.4219 614.352 70.6406L613.477 70.3281C613.634 69.9635 613.842 69.6797 614.102 69.4766C614.365 69.2708 614.652 69.1276 614.962 69.0469C615.274 68.9635 615.581 68.9219 615.884 68.9219C616.076 68.9219 616.298 68.9453 616.548 68.9922C616.8 69.0365 617.044 69.1289 617.278 69.2695C617.515 69.4102 617.712 69.6224 617.868 69.9062C618.024 70.1901 618.102 70.5703 618.102 71.0469V75H617.18V74.1875H617.134C617.071 74.3177 616.967 74.457 616.821 74.6055C616.675 74.7539 616.481 74.8802 616.239 74.9844C615.997 75.0885 615.701 75.1406 615.352 75.1406ZM615.493 74.3125C615.857 74.3125 616.165 74.2409 616.415 74.0977C616.667 73.9544 616.857 73.7695 616.985 73.543C617.115 73.3164 617.18 73.0781 617.18 72.8281V71.9844C617.141 72.0312 617.055 72.0742 616.923 72.1133C616.792 72.1497 616.641 72.1823 616.469 72.2109C616.3 72.237 616.135 72.2604 615.973 72.2812C615.815 72.2995 615.686 72.3151 615.587 72.3281C615.347 72.3594 615.123 72.4102 614.915 72.4805C614.709 72.5482 614.542 72.651 614.415 72.7891C614.29 72.9245 614.227 73.1094 614.227 73.3437C614.227 73.6641 614.346 73.9062 614.583 74.0703C614.822 74.2318 615.126 74.3125 615.493 74.3125ZM619.675 75V69H620.597V75H619.675ZM620.144 68C619.964 68 619.809 67.9388 619.679 67.8164C619.551 67.694 619.487 67.5469 619.487 67.375C619.487 67.2031 619.551 67.056 619.679 66.9336C619.809 66.8112 619.964 66.75 620.144 66.75C620.323 66.75 620.477 66.8112 620.605 66.9336C620.735 67.056 620.8 67.2031 620.8 67.375C620.8 67.5469 620.735 67.694 620.605 67.8164C620.477 67.9388 620.323 68 620.144 68ZM623.097 67V75H622.175V67H623.097ZM625.129 75H624.113L627.051 67H628.051L630.988 75H629.972L627.582 68.2656H627.519L625.129 75ZM625.504 71.875H629.597V72.7344H625.504V71.875ZM634.265 75.125C633.765 75.125 633.323 74.9987 632.941 74.7461C632.558 74.4909 632.258 74.1315 632.042 73.668C631.826 73.2018 631.718 72.651 631.718 72.0156C631.718 71.3854 631.826 70.8385 632.042 70.375C632.258 69.9115 632.559 69.5534 632.944 69.3008C633.33 69.0482 633.775 68.9219 634.28 68.9219C634.671 68.9219 634.98 68.987 635.206 69.1172C635.435 69.2448 635.61 69.3906 635.73 69.5547C635.852 69.7161 635.947 69.849 636.015 69.9531H636.093V67H637.015V75H636.124V74.0781H636.015C635.947 74.1875 635.851 74.3255 635.726 74.4922C635.601 74.6562 635.422 74.8034 635.191 74.9336C634.959 75.0612 634.65 75.125 634.265 75.125ZM634.39 74.2969C634.76 74.2969 635.072 74.2005 635.327 74.0078C635.583 73.8125 635.777 73.543 635.909 73.1992C636.042 72.8529 636.109 72.4531 636.109 72C636.109 71.5521 636.043 71.1602 635.913 70.8242C635.783 70.4857 635.59 70.2227 635.335 70.0352C635.08 69.8451 634.765 69.75 634.39 69.75C633.999 69.75 633.674 69.8503 633.413 70.0508C633.155 70.2487 632.961 70.5182 632.831 70.8594C632.704 71.1979 632.64 71.5781 632.64 72C632.64 72.4271 632.705 72.8151 632.835 73.1641C632.968 73.5104 633.163 73.7865 633.421 73.9922C633.681 74.1953 634.004 74.2969 634.39 74.2969ZM639.393 75.0625C639.2 75.0625 639.035 74.9935 638.897 74.8555C638.759 74.7174 638.69 74.5521 638.69 74.3594C638.69 74.1667 638.759 74.0013 638.897 73.8633C639.035 73.7253 639.2 73.6562 639.393 73.6562C639.586 73.6562 639.751 73.7253 639.889 73.8633C640.027 74.0013 640.096 74.1667 640.096 74.3594C640.096 74.487 640.064 74.6042 639.999 74.7109C639.936 74.8177 639.851 74.9036 639.745 74.9687C639.64 75.0313 639.523 75.0625 639.393 75.0625ZM642.312 75.0625C642.12 75.0625 641.954 74.9935 641.816 74.8555C641.678 74.7174 641.609 74.5521 641.609 74.3594C641.609 74.1667 641.678 74.0013 641.816 73.8633C641.954 73.7253 642.12 73.6562 642.312 73.6562C642.505 73.6562 642.67 73.7253 642.808 73.8633C642.946 74.0013 643.016 74.1667 643.016 74.3594C643.016 74.487 642.983 74.6042 642.918 74.7109C642.855 74.8177 642.771 74.9036 642.664 74.9687C642.56 75.0313 642.443 75.0625 642.312 75.0625ZM645.232 75.0625C645.039 75.0625 644.874 74.9935 644.736 74.8555C644.598 74.7174 644.529 74.5521 644.529 74.3594C644.529 74.1667 644.598 74.0013 644.736 73.8633C644.874 73.7253 645.039 73.6562 645.232 73.6562C645.424 73.6562 645.59 73.7253 645.728 73.8633C645.866 74.0013 645.935 74.1667 645.935 74.3594C645.935 74.487 645.902 74.6042 645.837 74.7109C645.775 74.8177 645.69 74.9036 645.583 74.9687C645.479 75.0313 645.362 75.0625 645.232 75.0625Z" fill="#97979B"/>
-<rect y="132" width="1080" height="52" fill="url(#paint3_linear_2535_66839)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.976 58.5929C251.603 58.3395 252.287 58.2002 253.002 58.2002C255.984 58.2002 258.402 60.6179 258.402 63.6002C258.402 63.9316 258.133 64.2002 257.802 64.2002C257.47 64.2002 257.202 63.9316 257.202 63.6002C257.202 61.2806 255.321 59.4002 253.002 59.4002C252.443 59.4002 251.912 59.5087 251.427 59.7053C251.12 59.8296 250.77 59.6814 250.645 59.3742C250.521 59.0671 250.669 58.7173 250.976 58.5929ZM249.799 59.9754C250.047 60.1946 250.071 60.5738 249.851 60.8222C249.198 61.563 248.802 62.5346 248.802 63.6002C248.802 63.9316 248.533 64.2002 248.202 64.2002C247.87 64.2002 247.602 63.9316 247.602 63.6002C247.602 62.2311 248.112 60.9797 248.952 60.0282C249.171 59.7797 249.55 59.7561 249.799 59.9754Z" fill="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.002 63.6002C250.002 61.9433 251.345 60.6002 253.002 60.6002C254.658 60.6002 256.002 61.9433 256.002 63.6002C256.002 63.9316 255.733 64.2002 255.402 64.2002C255.07 64.2002 254.802 63.9316 254.802 63.6002C254.802 62.6061 253.996 61.8002 253.002 61.8002C252.007 61.8002 251.202 62.6061 251.202 63.6002C251.202 64.6065 250.995 65.566 250.621 66.4375C250.49 66.742 250.137 66.8829 249.833 66.7522C249.528 66.6215 249.387 66.2687 249.518 65.9642C249.829 65.2396 250.002 64.4408 250.002 63.6002ZM255.354 64.8076C255.682 64.8595 255.905 65.1669 255.853 65.4942C255.774 65.9922 255.664 66.4801 255.526 66.9559C255.433 67.2741 255.1 67.457 254.782 67.3645C254.464 67.272 254.281 66.9391 254.374 66.6209C254.498 66.1931 254.597 65.7543 254.668 65.3062C254.72 64.9789 255.027 64.7557 255.354 64.8076Z" fill="#E4E4E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.002 63.0002C253.333 63.0002 253.602 63.2688 253.602 63.6002C253.602 64.942 253.326 66.2209 252.828 67.3823C252.697 67.6869 252.344 67.8278 252.04 67.6971C251.735 67.5665 251.594 67.2137 251.725 66.9092C252.16 65.8945 252.402 64.7763 252.402 63.6002C252.402 63.2688 252.67 63.0002 253.002 63.0002Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M262.938 59V67H261.969V59H262.938ZM267.239 67H264.77V59H267.348C268.124 59 268.788 59.1602 269.34 59.4805C269.892 59.7982 270.315 60.2552 270.61 60.8516C270.904 61.4453 271.051 62.1562 271.051 62.9844C271.051 63.8177 270.903 64.5352 270.606 65.1367C270.309 65.7357 269.877 66.1966 269.309 66.5195C268.741 66.8398 268.051 67 267.239 67ZM265.739 66.1406H267.176C267.838 66.1406 268.386 66.013 268.821 65.7578C269.256 65.5026 269.58 65.1393 269.793 64.668C270.007 64.1966 270.114 63.6354 270.114 62.9844C270.114 62.3385 270.008 61.7826 269.797 61.3164C269.586 60.8477 269.271 60.4883 268.852 60.2383C268.433 59.9857 267.911 59.8594 267.286 59.8594H265.739V66.1406Z" fill="#97979B"/>
+<path d="M341 60.4995H340.998V60.7495C340.998 61.1637 340.662 61.4995 340.248 61.4995C339.834 61.4993 339.498 61.1636 339.498 60.7495V60.4995H338V65.4995H338.752C339.166 65.4997 339.502 65.8356 339.502 66.2495C339.502 66.6636 339.166 66.9993 338.752 66.9995H335.252C334.838 66.9995 334.502 66.6637 334.502 66.2495C334.502 65.8355 334.838 65.4995 335.252 65.4995H336V60.4995H334.502V60.7495C334.502 61.1636 334.166 61.4993 333.752 61.4995C333.338 61.4995 333.002 61.1637 333.002 60.7495V60.4995H333V58.9995H341V60.4995Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M352.313 59V67H351.375L347.016 60.7187H346.938V67H345.969V59H346.906L351.281 65.2969H351.359V59H352.313ZM355.782 67.1406C355.401 67.1406 355.056 67.069 354.746 66.9258C354.437 66.7799 354.19 66.5703 354.008 66.2969C353.826 66.0208 353.735 65.6875 353.735 65.2969C353.735 64.9531 353.802 64.6745 353.938 64.4609C354.073 64.2448 354.254 64.0755 354.481 63.9531C354.707 63.8307 354.957 63.7396 355.231 63.6797C355.507 63.6172 355.784 63.5677 356.063 63.5313C356.427 63.4844 356.723 63.4492 356.95 63.4258C357.179 63.3997 357.345 63.3568 357.45 63.2969C357.556 63.237 357.61 63.1328 357.61 62.9844V62.9531C357.61 62.5677 357.504 62.2682 357.293 62.0547C357.085 61.8411 356.769 61.7344 356.344 61.7344C355.904 61.7344 355.559 61.8307 355.309 62.0234C355.059 62.2161 354.883 62.4219 354.782 62.6406L353.907 62.3281C354.063 61.9635 354.271 61.6797 354.532 61.4766C354.795 61.2708 355.081 61.1276 355.391 61.0469C355.703 60.9635 356.011 60.9219 356.313 60.9219C356.506 60.9219 356.727 60.9453 356.977 60.9922C357.23 61.0365 357.473 61.1289 357.707 61.2695C357.944 61.4102 358.141 61.6224 358.297 61.9062C358.453 62.1901 358.532 62.5703 358.532 63.0469V67H357.61V66.1875H357.563C357.5 66.3177 357.396 66.457 357.25 66.6055C357.105 66.7539 356.911 66.8802 356.668 66.9844C356.426 67.0885 356.131 67.1406 355.782 67.1406ZM355.922 66.3125C356.287 66.3125 356.594 66.2409 356.844 66.0977C357.097 65.9544 357.287 65.7695 357.414 65.543C357.545 65.3164 357.61 65.0781 357.61 64.8281V63.9844C357.571 64.0312 357.485 64.0742 357.352 64.1133C357.222 64.1497 357.071 64.1823 356.899 64.2109C356.73 64.237 356.564 64.2604 356.403 64.2812C356.244 64.2995 356.115 64.3151 356.016 64.3281C355.776 64.3594 355.552 64.4102 355.344 64.4805C355.138 64.5482 354.972 64.651 354.844 64.7891C354.719 64.9245 354.657 65.1094 354.657 65.3437C354.657 65.6641 354.775 65.9062 355.012 66.0703C355.252 66.2318 355.555 66.3125 355.922 66.3125ZM360.104 67V61H360.995V61.9375H361.073C361.198 61.6172 361.4 61.3685 361.678 61.1914C361.957 61.0117 362.292 60.9219 362.682 60.9219C363.078 60.9219 363.408 61.0117 363.671 61.1914C363.936 61.3685 364.143 61.6172 364.292 61.9375H364.354C364.508 61.6276 364.738 61.3815 365.046 61.1992C365.353 61.0143 365.721 60.9219 366.151 60.9219C366.688 60.9219 367.126 61.0898 367.467 61.4258C367.809 61.7591 367.979 62.2786 367.979 62.9844V67H367.057V62.9844C367.057 62.5417 366.936 62.2253 366.694 62.0352C366.452 61.8451 366.167 61.75 365.839 61.75C365.417 61.75 365.09 61.8776 364.858 62.1328C364.626 62.3854 364.51 62.7057 364.51 63.0937V67H363.573V62.8906C363.573 62.5495 363.462 62.2747 363.241 62.0664C363.02 61.8555 362.734 61.75 362.385 61.75C362.146 61.75 361.922 61.8138 361.714 61.9414C361.508 62.069 361.341 62.2461 361.214 62.4727C361.089 62.6966 361.026 62.9557 361.026 63.25V67H360.104ZM372.07 67.125C371.492 67.125 370.994 66.9974 370.574 66.7422C370.158 66.4844 369.836 66.125 369.609 65.6641C369.385 65.2005 369.274 64.6615 369.274 64.0469C369.274 63.4323 369.385 62.8906 369.609 62.4219C369.836 61.9505 370.151 61.5833 370.555 61.3203C370.961 61.0547 371.435 60.9219 371.977 60.9219C372.289 60.9219 372.598 60.974 372.902 61.0781C373.207 61.1823 373.484 61.3516 373.734 61.5859C373.984 61.8177 374.184 62.125 374.332 62.5078C374.481 62.8906 374.555 63.362 374.555 63.9219V64.3125H369.93V63.5156H373.617C373.617 63.1771 373.55 62.875 373.414 62.6094C373.281 62.3437 373.091 62.1341 372.844 61.9805C372.599 61.8268 372.31 61.75 371.977 61.75C371.609 61.75 371.292 61.8411 371.024 62.0234C370.758 62.2031 370.553 62.4375 370.41 62.7266C370.267 63.0156 370.195 63.3255 370.195 63.6562V64.1875C370.195 64.6406 370.274 65.0247 370.43 65.3398C370.589 65.6523 370.809 65.8906 371.09 66.0547C371.371 66.2161 371.698 66.2969 372.07 66.2969C372.313 66.2969 372.531 66.263 372.727 66.1953C372.925 66.125 373.095 66.0208 373.238 65.8828C373.382 65.7422 373.492 65.5677 373.57 65.3594L374.461 65.6094C374.367 65.9115 374.21 66.1771 373.988 66.4062C373.767 66.6328 373.494 66.8099 373.168 66.9375C372.843 67.0625 372.477 67.125 372.07 67.125Z" fill="#97979B"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M418.599 58.2002C418.268 58.2002 417.999 58.4688 417.999 58.8002V59.4002H417.399C416.736 59.4002 416.199 59.9375 416.199 60.6002V66.6002C416.199 67.2629 416.736 67.8002 417.399 67.8002H424.599C425.262 67.8002 425.799 67.2629 425.799 66.6002V60.6002C425.799 59.9375 425.262 59.4002 424.599 59.4002H423.999V58.8002C423.999 58.4688 423.731 58.2002 423.399 58.2002C423.068 58.2002 422.799 58.4688 422.799 58.8002V59.4002H419.199V58.8002C419.199 58.4688 418.931 58.2002 418.599 58.2002ZM418.599 61.2002C418.268 61.2002 417.999 61.4688 417.999 61.8002C417.999 62.1316 418.268 62.4002 418.599 62.4002H423.399C423.731 62.4002 423.999 62.1316 423.999 61.8002C423.999 61.4688 423.731 61.2002 423.399 61.2002H418.599Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M432.109 67.125C431.609 67.125 431.168 66.9987 430.785 66.7461C430.402 66.4909 430.103 66.1315 429.887 65.668C429.671 65.2018 429.563 64.651 429.563 64.0156C429.563 63.3854 429.671 62.8385 429.887 62.375C430.103 61.9115 430.404 61.5534 430.789 61.3008C431.174 61.0482 431.62 60.9219 432.125 60.9219C432.516 60.9219 432.824 60.987 433.051 61.1172C433.28 61.2448 433.454 61.3906 433.574 61.5547C433.697 61.7161 433.792 61.849 433.859 61.9531H433.938V59H434.859V67H433.969V66.0781H433.859C433.792 66.1875 433.695 66.3255 433.57 66.4922C433.445 66.6562 433.267 66.8034 433.035 66.9336C432.803 67.0612 432.495 67.125 432.109 67.125ZM432.234 66.2969C432.604 66.2969 432.917 66.2005 433.172 66.0078C433.427 65.8125 433.621 65.543 433.754 65.1992C433.887 64.8529 433.953 64.4531 433.953 64C433.953 63.5521 433.888 63.1602 433.758 62.8242C433.628 62.4857 433.435 62.2227 433.18 62.0352C432.924 61.8451 432.609 61.75 432.234 61.75C431.844 61.75 431.518 61.8503 431.258 62.0508C431 62.2487 430.806 62.5182 430.676 62.8594C430.548 63.1979 430.484 63.5781 430.484 64C430.484 64.4271 430.549 64.8151 430.68 65.1641C430.813 65.5104 431.008 65.7865 431.266 65.9922C431.526 66.1953 431.849 66.2969 432.234 66.2969ZM438.331 67.1406C437.951 67.1406 437.606 67.069 437.296 66.9258C436.986 66.7799 436.74 66.5703 436.558 66.2969C436.376 66.0208 436.285 65.6875 436.285 65.2969C436.285 64.9531 436.352 64.6745 436.488 64.4609C436.623 64.2448 436.804 64.0755 437.031 63.9531C437.257 63.8307 437.507 63.7396 437.781 63.6797C438.057 63.6172 438.334 63.5677 438.613 63.5313C438.977 63.4844 439.273 63.4492 439.499 63.4258C439.729 63.3997 439.895 63.3568 439.999 63.2969C440.106 63.237 440.16 63.1328 440.16 62.9844V62.9531C440.16 62.5677 440.054 62.2682 439.843 62.0547C439.635 61.8411 439.318 61.7344 438.894 61.7344C438.454 61.7344 438.109 61.8307 437.859 62.0234C437.609 62.2161 437.433 62.4219 437.331 62.6406L436.456 62.3281C436.613 61.9635 436.821 61.6797 437.081 61.4766C437.344 61.2708 437.631 61.1276 437.941 61.0469C438.253 60.9635 438.561 60.9219 438.863 60.9219C439.055 60.9219 439.277 60.9453 439.527 60.9922C439.779 61.0365 440.023 61.1289 440.257 61.2695C440.494 61.4102 440.691 61.6224 440.847 61.9062C441.003 62.1901 441.081 62.5703 441.081 63.0469V67H440.16V66.1875H440.113C440.05 66.3177 439.946 66.457 439.8 66.6055C439.654 66.7539 439.46 66.8802 439.218 66.9844C438.976 67.0885 438.68 67.1406 438.331 67.1406ZM438.472 66.3125C438.837 66.3125 439.144 66.2409 439.394 66.0977C439.647 65.9544 439.837 65.7695 439.964 65.543C440.094 65.3164 440.16 65.0781 440.16 64.8281V63.9844C440.12 64.0312 440.035 64.0742 439.902 64.1133C439.772 64.1497 439.62 64.1823 439.449 64.2109C439.279 64.237 439.114 64.2604 438.953 64.2812C438.794 64.2995 438.665 64.3151 438.566 64.3281C438.326 64.3594 438.102 64.4102 437.894 64.4805C437.688 64.5482 437.522 64.651 437.394 64.7891C437.269 64.9245 437.206 65.1094 437.206 65.3437C437.206 65.6641 437.325 65.9062 437.562 66.0703C437.801 66.2318 438.105 66.3125 438.472 66.3125ZM445.263 61V61.7812H442.154V61H445.263ZM443.06 59.5625H443.982V65.2812C443.982 65.5417 444.02 65.737 444.095 65.8672C444.174 65.9948 444.273 66.0807 444.392 66.125C444.515 66.1667 444.644 66.1875 444.779 66.1875C444.881 66.1875 444.964 66.1823 445.029 66.1719C445.094 66.1589 445.146 66.1484 445.185 66.1406L445.373 66.9687C445.31 66.9922 445.223 67.0156 445.111 67.0391C444.999 67.0651 444.857 67.0781 444.685 67.0781C444.425 67.0781 444.17 67.0221 443.92 66.9102C443.672 66.7982 443.467 66.6276 443.302 66.3984C443.141 66.1693 443.06 65.8802 443.06 65.5312V59.5625ZM448.991 67.125C448.413 67.125 447.914 66.9974 447.495 66.7422C447.079 66.4844 446.757 66.125 446.53 65.6641C446.306 65.2005 446.194 64.6615 446.194 64.0469C446.194 63.4323 446.306 62.8906 446.53 62.4219C446.757 61.9505 447.072 61.5833 447.476 61.3203C447.882 61.0547 448.356 60.9219 448.898 60.9219C449.21 60.9219 449.519 60.974 449.823 61.0781C450.128 61.1823 450.405 61.3516 450.655 61.5859C450.905 61.8177 451.105 62.125 451.253 62.5078C451.401 62.8906 451.476 63.362 451.476 63.9219V64.3125H446.851V63.5156H450.538C450.538 63.1771 450.47 62.875 450.335 62.6094C450.202 62.3437 450.012 62.1341 449.765 61.9805C449.52 61.8268 449.231 61.75 448.898 61.75C448.53 61.75 448.213 61.8411 447.944 62.0234C447.679 62.2031 447.474 62.4375 447.331 62.7266C447.188 63.0156 447.116 63.3255 447.116 63.6562V64.1875C447.116 64.6406 447.194 65.0247 447.351 65.3398C447.51 65.6523 447.73 65.8906 448.011 66.0547C448.292 66.2161 448.619 66.2969 448.991 66.2969C449.233 66.2969 449.452 66.263 449.648 66.1953C449.845 66.125 450.016 66.0208 450.159 65.8828C450.302 65.7422 450.413 65.5677 450.491 65.3594L451.382 65.6094C451.288 65.9115 451.131 66.1771 450.909 66.4062C450.688 66.6328 450.414 66.8099 450.089 66.9375C449.763 67.0625 449.398 67.125 448.991 67.125ZM459.643 63C459.643 63.8437 459.491 64.5729 459.186 65.1875C458.881 65.8021 458.463 66.276 457.932 66.6094C457.401 66.9427 456.794 67.1094 456.112 67.1094C455.429 67.1094 454.823 66.9427 454.291 66.6094C453.76 66.276 453.342 65.8021 453.038 65.1875C452.733 64.5729 452.581 63.8437 452.581 63C452.581 62.1562 452.733 61.4271 453.038 60.8125C453.342 60.1979 453.76 59.724 454.291 59.3906C454.823 59.0573 455.429 58.8906 456.112 58.8906C456.794 58.8906 457.401 59.0573 457.932 59.3906C458.463 59.724 458.881 60.1979 459.186 60.8125C459.491 61.4271 459.643 62.1562 459.643 63ZM458.706 63C458.706 62.3073 458.59 61.7227 458.358 61.2461C458.129 60.7695 457.817 60.4089 457.424 60.1641C457.034 59.9193 456.596 59.7969 456.112 59.7969C455.627 59.7969 455.189 59.9193 454.795 60.1641C454.405 60.4089 454.094 60.7695 453.862 61.2461C453.633 61.7227 453.518 62.3073 453.518 63C453.518 63.6927 453.633 64.2773 453.862 64.7539C454.094 65.2305 454.405 65.5911 454.795 65.8359C455.189 66.0807 455.627 66.2031 456.112 66.2031C456.596 66.2031 457.034 66.0807 457.424 65.8359C457.817 65.5911 458.129 65.2305 458.358 64.7539C458.59 64.2773 458.706 63.6927 458.706 63ZM463.709 61V61.7812H460.474V61H463.709ZM461.443 67V60.1719C461.443 59.8281 461.524 59.5417 461.685 59.3125C461.847 59.0833 462.056 58.9115 462.314 58.7969C462.572 58.6823 462.844 58.625 463.131 58.625C463.357 58.625 463.542 58.6432 463.685 58.6797C463.829 58.7161 463.935 58.75 464.006 58.7812L463.74 59.5781C463.693 59.5625 463.628 59.543 463.545 59.5195C463.464 59.4961 463.357 59.4844 463.224 59.4844C462.92 59.4844 462.7 59.5612 462.564 59.7148C462.431 59.8685 462.365 60.0937 462.365 60.3906V67H461.443ZM465.016 67V59H467.813C468.37 59 468.83 59.0964 469.192 59.2891C469.554 59.4792 469.823 59.7357 470 60.0586C470.177 60.3789 470.266 60.7344 470.266 61.125C470.266 61.4687 470.205 61.7526 470.082 61.9766C469.962 62.2005 469.804 62.3776 469.606 62.5078C469.41 62.638 469.198 62.7344 468.969 62.7969V62.875C469.214 62.8906 469.46 62.9766 469.707 63.1328C469.955 63.2891 470.162 63.513 470.328 63.8047C470.495 64.0964 470.578 64.4531 470.578 64.875C470.578 65.276 470.487 65.6367 470.305 65.957C470.123 66.2773 469.835 66.5312 469.442 66.7187C469.048 66.9062 468.537 67 467.906 67H465.016ZM465.985 66.1406H467.906C468.539 66.1406 468.988 66.0182 469.254 65.7734C469.522 65.526 469.656 65.2266 469.656 64.875C469.656 64.6042 469.587 64.3542 469.449 64.125C469.311 63.8932 469.115 63.7083 468.86 63.5703C468.604 63.4297 468.302 63.3594 467.953 63.3594H465.985V66.1406ZM465.985 62.5156H467.781C468.073 62.5156 468.336 62.4583 468.57 62.3437C468.807 62.2292 468.995 62.0677 469.133 61.8594C469.274 61.651 469.344 61.4062 469.344 61.125C469.344 60.7734 469.222 60.4753 468.977 60.2305C468.732 59.9831 468.344 59.8594 467.813 59.8594H465.985V62.5156ZM471.935 67V61H472.857V67H471.935ZM472.404 60C472.224 60 472.069 59.9388 471.939 59.8164C471.811 59.694 471.748 59.5469 471.748 59.375C471.748 59.2031 471.811 59.056 471.939 58.9336C472.069 58.8112 472.224 58.75 472.404 58.75C472.584 58.75 472.737 58.8112 472.865 58.9336C472.995 59.056 473.06 59.2031 473.06 59.375C473.06 59.5469 472.995 59.694 472.865 59.8164C472.737 59.9388 472.584 60 472.404 60ZM475.107 67.0625C474.915 67.0625 474.749 66.9935 474.611 66.8555C474.473 66.7174 474.404 66.5521 474.404 66.3594C474.404 66.1667 474.473 66.0013 474.611 65.8633C474.749 65.7253 474.915 65.6562 475.107 65.6562C475.3 65.6562 475.465 65.7253 475.603 65.8633C475.741 66.0013 475.81 66.1667 475.81 66.3594C475.81 66.487 475.778 66.6042 475.713 66.7109C475.65 66.8177 475.566 66.9036 475.459 66.9687C475.355 67.0313 475.238 67.0625 475.107 67.0625ZM478.027 67.0625C477.834 67.0625 477.669 66.9935 477.531 66.8555C477.392 66.7174 477.323 66.5521 477.323 66.3594C477.323 66.1667 477.392 66.0013 477.531 65.8633C477.669 65.7253 477.834 65.6562 478.027 65.6562C478.219 65.6562 478.385 65.7253 478.523 65.8633C478.661 66.0013 478.73 66.1667 478.73 66.3594C478.73 66.487 478.697 66.6042 478.632 66.7109C478.57 66.8177 478.485 66.9036 478.378 66.9687C478.274 67.0313 478.157 67.0625 478.027 67.0625ZM480.946 67.0625C480.753 67.0625 480.588 66.9935 480.45 66.8555C480.312 66.7174 480.243 66.5521 480.243 66.3594C480.243 66.1667 480.312 66.0013 480.45 65.8633C480.588 65.7253 480.753 65.6562 480.946 65.6562C481.139 65.6562 481.304 65.7253 481.442 65.8633C481.58 66.0013 481.649 66.1667 481.649 66.3594C481.649 66.487 481.616 66.6042 481.551 66.7109C481.489 66.8177 481.404 66.9036 481.297 66.9687C481.193 67.0313 481.076 67.0625 480.946 67.0625Z" fill="#97979B"/>
+<circle cx="501.125" cy="60.125" r="0.625" fill="#E4E4E7"/>
+<rect x="503" y="59.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
+<ellipse cx="501.125" cy="63.125" rx="0.625" ry="0.625" fill="#E4E4E7"/>
+<rect x="503" y="62.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
+<ellipse cx="501.125" cy="66.125" rx="0.625" ry="0.625" fill="#E4E4E7"/>
+<rect x="503" y="65.5" width="6.5" height="1.25" rx="0.625" fill="#E4E4E7"/>
+<path opacity="0.5" d="M519.438 61.5C519.352 61.237 519.238 61.0013 519.098 60.793C518.96 60.582 518.794 60.4023 518.602 60.2539C518.411 60.1055 518.195 59.9922 517.953 59.9141C517.711 59.8359 517.445 59.7969 517.156 59.7969C516.682 59.7969 516.251 59.9193 515.863 60.1641C515.475 60.4089 515.167 60.7695 514.938 61.2461C514.708 61.7227 514.594 62.3073 514.594 63C514.594 63.6927 514.71 64.2773 514.941 64.7539C515.173 65.2305 515.487 65.5911 515.883 65.8359C516.279 66.0807 516.724 66.2031 517.219 66.2031C517.677 66.2031 518.081 66.1055 518.43 65.9102C518.781 65.7122 519.055 65.4336 519.25 65.0742C519.448 64.7122 519.547 64.2865 519.547 63.7969L519.844 63.8594H517.438V63H520.484V63.8594C520.484 64.5182 520.344 65.0911 520.063 65.5781C519.784 66.0651 519.398 66.4427 518.906 66.7109C518.417 66.9766 517.854 67.1094 517.219 67.1094C516.51 67.1094 515.888 66.9427 515.352 66.6094C514.818 66.276 514.401 65.8021 514.102 65.1875C513.805 64.5729 513.656 63.8437 513.656 63C513.656 62.3672 513.741 61.7982 513.91 61.293C514.082 60.7852 514.324 60.3529 514.637 59.9961C514.949 59.6393 515.319 59.3659 515.746 59.1758C516.173 58.9857 516.643 58.8906 517.156 58.8906C517.578 58.8906 517.971 58.9544 518.336 59.082C518.703 59.207 519.03 59.3854 519.316 59.6172C519.605 59.8464 519.846 60.1211 520.039 60.4414C520.232 60.7591 520.365 61.112 520.438 61.5H519.438ZM524.424 67.125C523.846 67.125 523.347 66.9974 522.928 66.7422C522.511 66.4844 522.19 66.125 521.963 65.6641C521.739 65.2005 521.627 64.6615 521.627 64.0469C521.627 63.4323 521.739 62.8906 521.963 62.4219C522.19 61.9505 522.505 61.5833 522.909 61.3203C523.315 61.0547 523.789 60.9219 524.33 60.9219C524.643 60.9219 524.952 60.974 525.256 61.0781C525.561 61.1823 525.838 61.3516 526.088 61.5859C526.338 61.8177 526.537 62.125 526.686 62.5078C526.834 62.8906 526.909 63.362 526.909 63.9219V64.3125H522.284V63.5156H525.971C525.971 63.1771 525.903 62.875 525.768 62.6094C525.635 62.3437 525.445 62.1341 525.198 61.9805C524.953 61.8268 524.664 61.75 524.33 61.75C523.963 61.75 523.646 61.8411 523.377 62.0234C523.112 62.2031 522.907 62.4375 522.764 62.7266C522.621 63.0156 522.549 63.3255 522.549 63.6562V64.1875C522.549 64.6406 522.627 65.0247 522.784 65.3398C522.942 65.6523 523.162 65.8906 523.444 66.0547C523.725 66.2161 524.052 66.2969 524.424 66.2969C524.666 66.2969 524.885 66.263 525.08 66.1953C525.278 66.125 525.449 66.0208 525.592 65.8828C525.735 65.7422 525.846 65.5677 525.924 65.3594L526.815 65.6094C526.721 65.9115 526.564 66.1771 526.342 66.4062C526.121 66.6328 525.847 66.8099 525.522 66.9375C525.196 67.0625 524.83 67.125 524.424 67.125ZM529.123 63.3906V67H528.201V61H529.092V61.9375H529.17C529.31 61.6328 529.524 61.388 529.81 61.2031C530.097 61.0156 530.467 60.9219 530.92 60.9219C531.326 60.9219 531.681 61.0052 531.986 61.1719C532.291 61.3359 532.528 61.5859 532.697 61.9219C532.866 62.2552 532.951 62.6771 532.951 63.1875V67H532.029V63.25C532.029 62.7786 531.907 62.4115 531.662 62.1484C531.417 61.8828 531.081 61.75 530.654 61.75C530.36 61.75 530.097 61.8138 529.865 61.9414C529.636 62.069 529.455 62.2552 529.322 62.5C529.189 62.7448 529.123 63.0417 529.123 63.3906ZM536.791 67.125C536.291 67.125 535.85 66.9987 535.467 66.7461C535.084 66.4909 534.785 66.1315 534.568 65.668C534.352 65.2018 534.244 64.651 534.244 64.0156C534.244 63.3854 534.352 62.8385 534.568 62.375C534.785 61.9115 535.085 61.5534 535.471 61.3008C535.856 61.0482 536.302 60.9219 536.807 60.9219C537.197 60.9219 537.506 60.987 537.733 61.1172C537.962 61.2448 538.136 61.3906 538.256 61.5547C538.378 61.7161 538.473 61.849 538.541 61.9531H538.619V59H539.541V67H538.65V66.0781H538.541C538.473 66.1875 538.377 66.3255 538.252 66.4922C538.127 66.6562 537.949 66.8034 537.717 66.9336C537.485 67.0612 537.177 67.125 536.791 67.125ZM536.916 66.2969C537.286 66.2969 537.598 66.2005 537.854 66.0078C538.109 65.8125 538.303 65.543 538.436 65.1992C538.568 64.8529 538.635 64.4531 538.635 64C538.635 63.5521 538.57 63.1602 538.44 62.8242C538.309 62.4857 538.117 62.2227 537.861 62.0352C537.606 61.8451 537.291 61.75 536.916 61.75C536.525 61.75 536.2 61.8503 535.94 62.0508C535.682 62.2487 535.488 62.5182 535.358 62.8594C535.23 63.1979 535.166 63.5781 535.166 64C535.166 64.4271 535.231 64.8151 535.361 65.1641C535.494 65.5104 535.69 65.7865 535.947 65.9922C536.208 66.1953 536.531 66.2969 536.916 66.2969ZM543.763 67.125C543.185 67.125 542.686 66.9974 542.267 66.7422C541.85 66.4844 541.529 66.125 541.302 65.6641C541.078 65.2005 540.966 64.6615 540.966 64.0469C540.966 63.4323 541.078 62.8906 541.302 62.4219C541.529 61.9505 541.844 61.5833 542.247 61.3203C542.654 61.0547 543.128 60.9219 543.669 60.9219C543.982 60.9219 544.29 60.974 544.595 61.0781C544.9 61.1823 545.177 61.3516 545.427 61.5859C545.677 61.8177 545.876 62.125 546.025 62.5078C546.173 62.8906 546.247 63.362 546.247 63.9219V64.3125H541.622V63.5156H545.31C545.31 63.1771 545.242 62.875 545.107 62.6094C544.974 62.3437 544.784 62.1341 544.537 61.9805C544.292 61.8268 544.003 61.75 543.669 61.75C543.302 61.75 542.984 61.8411 542.716 62.0234C542.451 62.2031 542.246 62.4375 542.103 62.7266C541.96 63.0156 541.888 63.3255 541.888 63.6562V64.1875C541.888 64.6406 541.966 65.0247 542.122 65.3398C542.281 65.6523 542.501 65.8906 542.783 66.0547C543.064 66.2161 543.391 66.2969 543.763 66.2969C544.005 66.2969 544.224 66.263 544.419 66.1953C544.617 66.125 544.788 66.0208 544.931 65.8828C545.074 65.7422 545.185 65.5677 545.263 65.3594L546.154 65.6094C546.06 65.9115 545.902 66.1771 545.681 66.4062C545.46 66.6328 545.186 66.8099 544.861 66.9375C544.535 67.0625 544.169 67.125 543.763 67.125ZM547.54 67V61H548.43V61.9062H548.493C548.602 61.6094 548.8 61.3685 549.087 61.1836C549.373 60.9987 549.696 60.9062 550.055 60.9062C550.123 60.9062 550.208 60.9076 550.309 60.9102C550.411 60.9128 550.488 60.9167 550.54 60.9219V61.8594C550.509 61.8516 550.437 61.8398 550.325 61.8242C550.216 61.806 550.1 61.7969 549.977 61.7969C549.686 61.7969 549.425 61.8581 549.196 61.9805C548.97 62.1003 548.79 62.2669 548.657 62.4805C548.527 62.6914 548.462 62.9323 548.462 63.2031V67H547.54Z" fill="#97979B"/>
+<path d="M584.201 60.53L588.999 62.929L593.797 60.53C593.761 59.8998 593.238 59.3999 592.599 59.3999H585.399C584.76 59.3999 584.237 59.8998 584.201 60.53Z" fill="#E4E4E7"/>
+<path d="M593.799 61.8706L588.999 64.2707L584.199 61.8707V65.3999C584.199 66.0626 584.736 66.5999 585.399 66.5999H592.599C593.262 66.5999 593.799 66.0626 593.799 65.3999V61.8706Z" fill="#E4E4E7"/>
+<path opacity="0.5" d="M600.359 67.125C599.781 67.125 599.283 66.9974 598.863 66.7422C598.447 66.4844 598.125 66.125 597.898 65.6641C597.674 65.2005 597.563 64.6615 597.563 64.0469C597.563 63.4323 597.674 62.8906 597.898 62.4219C598.125 61.9505 598.44 61.5833 598.844 61.3203C599.25 61.0547 599.724 60.9219 600.266 60.9219C600.578 60.9219 600.887 60.974 601.191 61.0781C601.496 61.1823 601.773 61.3516 602.023 61.5859C602.273 61.8177 602.473 62.125 602.621 62.5078C602.77 62.8906 602.844 63.362 602.844 63.9219V64.3125H598.219V63.5156H601.906C601.906 63.1771 601.839 62.875 601.703 62.6094C601.57 62.3437 601.38 62.1341 601.133 61.9805C600.888 61.8268 600.599 61.75 600.266 61.75C599.898 61.75 599.581 61.8411 599.313 62.0234C599.047 62.2031 598.842 62.4375 598.699 62.7266C598.556 63.0156 598.484 63.3255 598.484 63.6562V64.1875C598.484 64.6406 598.563 65.0247 598.719 65.3398C598.878 65.6523 599.098 65.8906 599.379 66.0547C599.66 66.2161 599.987 66.2969 600.359 66.2969C600.602 66.2969 600.82 66.263 601.016 66.1953C601.214 66.125 601.384 66.0208 601.527 65.8828C601.671 65.7422 601.781 65.5677 601.859 65.3594L602.75 65.6094C602.656 65.9115 602.499 66.1771 602.277 66.4062C602.056 66.6328 601.783 66.8099 601.457 66.9375C601.132 67.0625 600.766 67.125 600.359 67.125ZM604.136 67V61H605.027V61.9375H605.105C605.23 61.6172 605.432 61.3685 605.71 61.1914C605.989 61.0117 606.324 60.9219 606.714 60.9219C607.11 60.9219 607.439 61.0117 607.703 61.1914C607.968 61.3685 608.175 61.6172 608.324 61.9375H608.386C608.54 61.6276 608.77 61.3815 609.078 61.1992C609.385 61.0143 609.753 60.9219 610.183 60.9219C610.719 60.9219 611.158 61.0898 611.499 61.4258C611.841 61.7591 612.011 62.2786 612.011 62.9844V67H611.089V62.9844C611.089 62.5417 610.968 62.2253 610.726 62.0352C610.484 61.8451 610.199 61.75 609.87 61.75C609.449 61.75 609.122 61.8776 608.89 62.1328C608.658 62.3854 608.542 62.7057 608.542 63.0937V67H607.605V62.8906C607.605 62.5495 607.494 62.2747 607.273 62.0664C607.051 61.8555 606.766 61.75 606.417 61.75C606.178 61.75 605.954 61.8138 605.745 61.9414C605.54 62.069 605.373 62.2461 605.245 62.4727C605.12 62.6966 605.058 62.9557 605.058 63.25V67H604.136ZM615.352 67.1406C614.972 67.1406 614.627 67.069 614.317 66.9258C614.007 66.7799 613.761 66.5703 613.579 66.2969C613.397 66.0208 613.305 65.6875 613.305 65.2969C613.305 64.9531 613.373 64.6745 613.509 64.4609C613.644 64.2448 613.825 64.0755 614.051 63.9531C614.278 63.8307 614.528 63.7396 614.801 63.6797C615.078 63.6172 615.355 63.5677 615.634 63.5313C615.998 63.4844 616.294 63.4492 616.52 63.4258C616.749 63.3997 616.916 63.3568 617.02 63.2969C617.127 63.237 617.18 63.1328 617.18 62.9844V62.9531C617.18 62.5677 617.075 62.2682 616.864 62.0547C616.656 61.8411 616.339 61.7344 615.915 61.7344C615.475 61.7344 615.13 61.8307 614.88 62.0234C614.63 62.2161 614.454 62.4219 614.352 62.6406L613.477 62.3281C613.634 61.9635 613.842 61.6797 614.102 61.4766C614.365 61.2708 614.652 61.1276 614.962 61.0469C615.274 60.9635 615.581 60.9219 615.884 60.9219C616.076 60.9219 616.298 60.9453 616.548 60.9922C616.8 61.0365 617.044 61.1289 617.278 61.2695C617.515 61.4102 617.712 61.6224 617.868 61.9062C618.024 62.1901 618.102 62.5703 618.102 63.0469V67H617.18V66.1875H617.134C617.071 66.3177 616.967 66.457 616.821 66.6055C616.675 66.7539 616.481 66.8802 616.239 66.9844C615.997 67.0885 615.701 67.1406 615.352 67.1406ZM615.493 66.3125C615.857 66.3125 616.165 66.2409 616.415 66.0977C616.667 65.9544 616.857 65.7695 616.985 65.543C617.115 65.3164 617.18 65.0781 617.18 64.8281V63.9844C617.141 64.0312 617.055 64.0742 616.923 64.1133C616.792 64.1497 616.641 64.1823 616.469 64.2109C616.3 64.237 616.135 64.2604 615.973 64.2812C615.815 64.2995 615.686 64.3151 615.587 64.3281C615.347 64.3594 615.123 64.4102 614.915 64.4805C614.709 64.5482 614.542 64.651 614.415 64.7891C614.29 64.9245 614.227 65.1094 614.227 65.3437C614.227 65.6641 614.346 65.9062 614.583 66.0703C614.822 66.2318 615.126 66.3125 615.493 66.3125ZM619.675 67V61H620.597V67H619.675ZM620.144 60C619.964 60 619.809 59.9388 619.679 59.8164C619.551 59.694 619.487 59.5469 619.487 59.375C619.487 59.2031 619.551 59.056 619.679 58.9336C619.809 58.8112 619.964 58.75 620.144 58.75C620.323 58.75 620.477 58.8112 620.605 58.9336C620.735 59.056 620.8 59.2031 620.8 59.375C620.8 59.5469 620.735 59.694 620.605 59.8164C620.477 59.9388 620.323 60 620.144 60ZM623.097 59V67H622.175V59H623.097ZM625.129 67H624.113L627.051 59H628.051L630.988 67H629.972L627.582 60.2656H627.519L625.129 67ZM625.504 63.875H629.597V64.7344H625.504V63.875ZM634.265 67.125C633.765 67.125 633.323 66.9987 632.941 66.7461C632.558 66.4909 632.258 66.1315 632.042 65.668C631.826 65.2018 631.718 64.651 631.718 64.0156C631.718 63.3854 631.826 62.8385 632.042 62.375C632.258 61.9115 632.559 61.5534 632.944 61.3008C633.33 61.0482 633.775 60.9219 634.28 60.9219C634.671 60.9219 634.98 60.987 635.206 61.1172C635.435 61.2448 635.61 61.3906 635.73 61.5547C635.852 61.7161 635.947 61.849 636.015 61.9531H636.093V59H637.015V67H636.124V66.0781H636.015C635.947 66.1875 635.851 66.3255 635.726 66.4922C635.601 66.6562 635.422 66.8034 635.191 66.9336C634.959 67.0612 634.65 67.125 634.265 67.125ZM634.39 66.2969C634.76 66.2969 635.072 66.2005 635.327 66.0078C635.583 65.8125 635.777 65.543 635.909 65.1992C636.042 64.8529 636.109 64.4531 636.109 64C636.109 63.5521 636.043 63.1602 635.913 62.8242C635.783 62.4857 635.59 62.2227 635.335 62.0352C635.08 61.8451 634.765 61.75 634.39 61.75C633.999 61.75 633.674 61.8503 633.413 62.0508C633.155 62.2487 632.961 62.5182 632.831 62.8594C632.704 63.1979 632.64 63.5781 632.64 64C632.64 64.4271 632.705 64.8151 632.835 65.1641C632.968 65.5104 633.163 65.7865 633.421 65.9922C633.681 66.1953 634.004 66.2969 634.39 66.2969ZM639.393 67.0625C639.2 67.0625 639.035 66.9935 638.897 66.8555C638.759 66.7174 638.69 66.5521 638.69 66.3594C638.69 66.1667 638.759 66.0013 638.897 65.8633C639.035 65.7253 639.2 65.6562 639.393 65.6562C639.586 65.6562 639.751 65.7253 639.889 65.8633C640.027 66.0013 640.096 66.1667 640.096 66.3594C640.096 66.487 640.064 66.6042 639.999 66.7109C639.936 66.8177 639.851 66.9036 639.745 66.9687C639.64 67.0313 639.523 67.0625 639.393 67.0625ZM642.312 67.0625C642.12 67.0625 641.954 66.9935 641.816 66.8555C641.678 66.7174 641.609 66.5521 641.609 66.3594C641.609 66.1667 641.678 66.0013 641.816 65.8633C641.954 65.7253 642.12 65.6562 642.312 65.6562C642.505 65.6562 642.67 65.7253 642.808 65.8633C642.946 66.0013 643.016 66.1667 643.016 66.3594C643.016 66.487 642.983 66.6042 642.918 66.7109C642.855 66.8177 642.771 66.9036 642.664 66.9687C642.56 67.0313 642.443 67.0625 642.312 67.0625ZM645.232 67.0625C645.039 67.0625 644.874 66.9935 644.736 66.8555C644.598 66.7174 644.529 66.5521 644.529 66.3594C644.529 66.1667 644.598 66.0013 644.736 65.8633C644.874 65.7253 645.039 65.6562 645.232 65.6562C645.424 65.6562 645.59 65.7253 645.728 65.8633C645.866 66.0013 645.935 66.1667 645.935 66.3594C645.935 66.487 645.902 66.6042 645.837 66.7109C645.775 66.8177 645.69 66.9036 645.583 66.9687C645.479 67.0313 645.362 67.0625 645.232 67.0625Z" fill="url(#paint3_linear_2877_60059)"/>
+<rect y="132" width="1080" height="52" fill="url(#paint4_linear_2877_60059)"/>
 </g>
 <defs>
-<clipPath id="bgblur_1_2535_66839_clip_path" transform="translate(-226 -12)"><rect x="230" y="16" width="555" height="186" rx="12"/>
-</clipPath><filter id="filter1_f_2535_66839" x="181.312" y="-14.708" width="124.59" height="146.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<clipPath id="bgblur_1_2877_60059_clip_path" transform="translate(-226 -12)"><rect x="230" y="16" width="555" height="186" rx="12"/>
+</clipPath><filter id="filter1_f_2877_60059" x="181.312" y="-14.708" width="124.59" height="146.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2535_66839"/>
+<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2877_60059"/>
 </filter>
-<clipPath id="bgblur_2_2535_66839_clip_path" transform="translate(-233.2 -19.2)"><rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35"/>
-</clipPath><radialGradient id="paint0_radial_2535_66839" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.096 48.3533) rotate(121.198) scale(55.123 15.9923)">
+<clipPath id="bgblur_2_2877_60059_clip_path" transform="translate(-233.2 -19.2)"><rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35"/>
+</clipPath><radialGradient id="paint0_radial_2877_60059" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.096 48.3533) rotate(121.198) scale(55.123 15.9923)">
 <stop offset="1" stop-color="#F02E65"/>
 </radialGradient>
-<linearGradient id="paint1_linear_2535_66839" x1="110.649" y1="77.423" x2="195.926" y2="184.679" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint1_linear_2877_60059" x1="110.649" y1="77.423" x2="195.926" y2="184.679" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FD366E"/>
 <stop offset="0.45" stop-color="#FE9567"/>
 <stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
 </linearGradient>
-<radialGradient id="paint2_radial_2535_66839" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(265.177 71.5771) rotate(31.7066) scale(256.703 334.987)">
-<stop stop-color="#D9D9D9" stop-opacity="0.4"/>
+<radialGradient id="paint2_radial_2877_60059" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(265.177 63.5771) rotate(7.55044) scale(368.518 480.902)">
+<stop stop-color="#D9D9D9" stop-opacity="0.48"/>
 <stop offset="1" stop-color="#737373" stop-opacity="0"/>
 </radialGradient>
-<linearGradient id="paint3_linear_2535_66839" x1="516.264" y1="132" x2="516.601" y2="175.52" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint3_linear_2877_60059" x1="597" y1="63" x2="647" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#97979B"/>
+<stop offset="1" stop-color="#97979B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2877_60059" x1="516.264" y1="132" x2="516.601" y2="175.52" gradientUnits="userSpaceOnUse">
 <stop stop-color="white" stop-opacity="0"/>
 <stop offset="1" stop-color="white"/>
 </linearGradient>
-<clipPath id="clip0_2535_66839">
+<clipPath id="clip0_2877_60059">
 <path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="white"/>
 </clipPath>
 </defs>

From 3b1c98aa085c86916caee249b9c814c95d4080e5 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 11:51:02 +0530
Subject: [PATCH 047/118] lint, fix margin bottom on filters.

---
 src/lib/components/columnSelector.svelte      |  30 +++-
 .../spreadsheet.svelte                        |   3 +-
 static/images/empty-database-dark.svg         | 146 ++++++++----------
 3 files changed, 90 insertions(+), 89 deletions(-)

diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 6acd5b01fe..a1f6148633 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -185,10 +185,10 @@
     <Popover let:toggle {placement} padding="none">
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
-            <div style:max-height={maxHeight} style:overflow="scroll" bind:this={containerRef}>
+            <div bind:this={containerRef} class="actions-menu-wrapper" style:max-height={maxHeight}>
                 <ActionMenu.Root>
                     {#if isNewStyle}
-                        <Layout.Stack gap="m">
+                        <Layout.Stack gap="xs">
                             <ActionMenu.Item.Input
                                 id="columns"
                                 placeholder="Search"
@@ -199,7 +199,8 @@
                                 direction="row"
                                 alignItems="center"
                                 style="padding-block-end: 0.5rem">
-                                <Button size="xs" icon extraCompact on:click={selectAll}>Select all</Button>
+                                <Button size="xs" icon extraCompact on:click={selectAll}
+                                    >Select all</Button>
 
                                 <div style:height="1rem">
                                     <Divider vertical />
@@ -211,10 +212,7 @@
                         </Layout.Stack>
                     {/if}
 
-                    <Layout.Stack
-                        gap="none"
-                        direction="column"
-                        style="height: 145px; overflow: scroll;">
+                    <Layout.Stack gap="none" direction="column" class="filter-modal-actions-menu">
                         {#each filteredColumns as column}
                             {#if !column?.exclude}
                                 <ActionMenu.Item.Button
@@ -241,3 +239,21 @@
         </svelte:fragment>
     </Popover>
 {/if}
+
+<style lang="scss">
+    .actions-menu-wrapper {
+        overflow: scroll;
+        margin-bottom: -0.35rem;
+
+        & :global(.filter-modal-actions-menu) {
+            overflow: scroll;
+            max-height: 150px;
+            padding-bottom: unset;
+            margin-bottom: -0.5rem;
+
+            &::-webkit-scrollbar {
+                display: none;
+            }
+        }
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 6446982bd8..44de512b33 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -519,8 +519,7 @@
                         {isEditable}
                         value={columnId.includes('$') || formatted === 'null'
                             ? undefined
-                            : formatted
-                            }>
+                            : formatted}>
                         {#if columnId === '$id'}
                             <Id value={document.$id}>{document.$id}</Id>
                         {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
diff --git a/static/images/empty-database-dark.svg b/static/images/empty-database-dark.svg
index 94762a8656..9b0e171b69 100644
--- a/static/images/empty-database-dark.svg
+++ b/static/images/empty-database-dark.svg
@@ -1,111 +1,97 @@
 <svg width="1015" height="184" viewBox="0 0 1015 184" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_2782_11310)">
+<g clip-path="url(#clip0_2877_60257)">
 <path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="#1D1D21"/>
-<foreignObject x="226" y="12" width="563" height="194"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_2782_11310_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
-<rect x="230" y="16" width="555" height="186" rx="12" fill="white" fill-opacity="0.04"/>
+<foreignObject x="226" y="12" width="563" height="194"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(2px);clip-path:url(#bgblur_1_2877_60257_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="4">
+<rect x="230" y="16" width="555" height="186" rx="12" fill="white" fill-opacity="0.06"/>
 <rect x="230.5" y="16.5" width="554" height="185" rx="11.5" stroke="white" stroke-opacity="0.04"/>
 </g>
-<g filter="url(#filter1_f_2782_11310)">
-<path d="M266.195 52.6414C250.426 78.6823 230.434 97.8723 221.543 95.5035C212.652 93.1347 218.228 70.1041 233.998 44.0632C249.767 18.0223 225.106 20.266 233.997 22.6348C242.888 25.0036 281.965 26.6004 266.195 52.6414Z" fill="url(#paint0_radial_2782_11310)" fill-opacity="0.2"/>
-<path d="M244.739 25.1687C249.392 26.0556 254.563 27.2808 258.959 29.2297C263.355 31.1793 266.926 33.8321 268.457 37.5488C269.981 41.2507 269.512 46.0849 265.632 52.4917C257.769 65.4771 248.864 76.7349 240.839 84.4382C236.823 88.2926 233.055 91.2319 229.771 93.0561C226.47 94.89 223.797 95.5252 221.845 95.0051C219.893 94.4851 218.625 92.7997 218.154 89.961C217.685 87.1372 218.029 83.2855 219.149 78.6595C221.388 69.4146 226.696 57.1987 234.56 44.2133C241.039 33.5137 240.826 27.4054 238.725 24.1125C240.526 24.4173 242.572 24.7555 244.739 25.1687ZM233.935 22.0031C234.099 22.0501 234.269 22.1055 234.442 22.1721C234.394 22.1597 234.345 22.1491 234.298 22.1367C234.003 22.058 233.752 21.9796 233.539 21.9052C233.664 21.9313 233.796 21.9633 233.935 22.0031Z" stroke="#2D2D31" stroke-width="1.16467"/>
-<path d="M244.739 25.1687C249.392 26.0556 254.563 27.2808 258.959 29.2297C263.355 31.1793 266.926 33.8321 268.457 37.5488C269.981 41.2507 269.512 46.0849 265.632 52.4917C257.769 65.4771 248.864 76.7349 240.839 84.4382C236.823 88.2926 233.055 91.2319 229.771 93.0561C226.47 94.89 223.797 95.5252 221.845 95.0051C219.893 94.4851 218.625 92.7997 218.154 89.961C217.685 87.1372 218.029 83.2855 219.149 78.6595C221.388 69.4146 226.696 57.1987 234.56 44.2133C241.039 33.5137 240.826 27.4054 238.725 24.1125C240.526 24.4173 242.572 24.7555 244.739 25.1687ZM233.935 22.0031C234.099 22.0501 234.269 22.1055 234.442 22.1721C234.394 22.1597 234.345 22.1491 234.298 22.1367C234.003 22.058 233.752 21.9796 233.539 21.9052C233.664 21.9313 233.796 21.9633 233.935 22.0031Z" stroke="url(#paint1_linear_2782_11310)" stroke-opacity="0.4" stroke-width="1.16467"/>
+<g filter="url(#filter1_f_2877_60257)">
+<path d="M266.199 52.6414C250.429 78.6823 230.438 97.8723 221.547 95.5035C212.656 93.1347 218.232 70.1041 234.002 44.0632C249.771 18.0223 225.11 20.266 234.001 22.6348C242.892 25.0036 281.969 26.6004 266.199 52.6414Z" fill="url(#paint0_radial_2877_60257)" fill-opacity="0.2"/>
 </g>
-<foreignObject x="233.2" y="19.2" width="548.6" height="179.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.9px);clip-path:url(#bgblur_2_2782_11310_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="1.8">
-<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" fill="#19191C"/>
-<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="#2D2D31" stroke-width="0.9"/>
-<rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="url(#paint2_linear_2782_11310)" stroke-opacity="0.4" stroke-width="0.9"/>
+<foreignObject x="233.204" y="19.2" width="548.6" height="179.6"><div xmlns="http://www.w3.org/1999/xhtml" style="backdrop-filter:blur(0.9px);clip-path:url(#bgblur_2_2877_60257_clip_path);height:100%;width:100%"></div></foreignObject><g data-figma-bg-blur-radius="1.8">
+<rect x="235.454" y="21.45" width="544.1" height="175.1" rx="10.35" fill="#19191C"/>
+<rect x="235.454" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="#2D2D31" stroke-width="0.9"/>
+<rect x="235.454" y="21.45" width="544.1" height="175.1" rx="10.35" stroke="url(#paint1_linear_2877_60257)" stroke-opacity="0.4" stroke-width="0.9"/>
 </g>
-<mask id="path-7-outside-1_2782_11310" maskUnits="userSpaceOnUse" x="245.57" y="32" width="43" height="12" fill="black">
-<rect fill="white" x="245.57" y="32" width="43" height="12"/>
-<path d="M254.886 34.8325C255.732 35.7325 256.155 36.88 256.155 38.275C256.155 39.67 255.732 40.822 254.886 41.731C254.049 42.631 252.969 43.081 251.646 43.081C250.323 43.081 249.239 42.631 248.393 41.731C247.556 40.822 247.137 39.67 247.137 38.275C247.137 36.88 247.556 35.7325 248.393 34.8325C249.239 33.9235 250.323 33.469 251.646 33.469C252.969 33.469 254.049 33.9235 254.886 34.8325ZM249.257 35.602C248.645 36.295 248.339 37.186 248.339 38.275C248.339 39.364 248.645 40.2595 249.257 40.9615C249.869 41.6545 250.665 42.001 251.646 42.001C252.627 42.001 253.424 41.6545 254.036 40.9615C254.648 40.2595 254.954 39.364 254.954 38.275C254.954 37.186 254.648 36.295 254.036 35.602C253.424 34.9 252.627 34.549 251.646 34.549C250.665 34.549 249.869 34.9 249.257 35.602ZM260.664 36.115H260.974V37.195H260.421C259.764 37.195 259.291 37.4155 259.003 37.8565C258.724 38.2975 258.585 38.842 258.585 39.49V43H257.478V36.115H258.436L258.585 37.1545C259.008 36.4615 259.701 36.115 260.664 36.115ZM266.965 37.168V33.55H268.072V43H267.114L266.965 41.893C266.389 42.685 265.602 43.081 264.603 43.081C263.631 43.081 262.834 42.7705 262.213 42.1495C261.601 41.5195 261.295 40.6555 261.295 39.5575C261.295 38.5135 261.606 37.6675 262.227 37.0195C262.848 36.3625 263.64 36.034 264.603 36.034C265.701 36.034 266.488 36.412 266.965 37.168ZM264.711 42.0955C265.386 42.0955 265.93 41.8615 266.344 41.3935C266.767 40.9255 266.979 40.3225 266.979 39.5845C266.979 38.8285 266.767 38.212 266.344 37.735C265.93 37.258 265.386 37.0195 264.711 37.0195C264.027 37.0195 263.473 37.258 263.05 37.735C262.636 38.203 262.429 38.8105 262.429 39.5575C262.429 40.3045 262.636 40.9165 263.05 41.3935C263.473 41.8615 264.027 42.0955 264.711 42.0955ZM272.753 43.081C271.727 43.081 270.899 42.757 270.269 42.109C269.648 41.461 269.337 40.6105 269.337 39.5575C269.337 38.5135 269.639 37.6675 270.242 37.0195C270.845 36.3625 271.632 36.034 272.604 36.034C273.585 36.034 274.368 36.3265 274.953 36.9115C275.538 37.4875 275.844 38.284 275.871 39.301C275.871 39.4 275.862 39.5575 275.844 39.7735H270.498V39.868C270.516 40.534 270.719 41.074 271.106 41.488C271.502 41.893 272.024 42.0955 272.672 42.0955C273.167 42.0955 273.585 41.974 273.927 41.731C274.278 41.479 274.512 41.1325 274.629 40.6915H275.75C275.615 41.3935 275.277 41.9695 274.737 42.4195C274.197 42.8605 273.536 43.081 272.753 43.081ZM270.566 38.8555H274.683C274.629 38.2705 274.418 37.816 274.049 37.492C273.68 37.168 273.203 37.006 272.618 37.006C272.096 37.006 271.637 37.177 271.241 37.519C270.845 37.861 270.62 38.3065 270.566 38.8555ZM280.32 36.115H280.631V37.195H280.077C279.42 37.195 278.948 37.4155 278.66 37.8565C278.381 38.2975 278.241 38.842 278.241 39.49V43H277.134V36.115H278.093L278.241 37.1545C278.664 36.4615 279.357 36.115 280.32 36.115ZM281.162 40.732H282.296C282.314 41.146 282.494 41.4835 282.836 41.7445C283.178 42.0055 283.632 42.136 284.199 42.136C284.685 42.136 285.081 42.0415 285.387 41.8525C285.702 41.6545 285.86 41.398 285.86 41.083C285.86 40.912 285.824 40.768 285.752 40.651C285.689 40.534 285.617 40.444 285.536 40.381C285.464 40.309 285.329 40.2505 285.131 40.2055C284.933 40.1515 284.78 40.12 284.672 40.111C284.564 40.093 284.366 40.066 284.078 40.03C283.637 39.976 283.272 39.9175 282.984 39.8545C282.696 39.7825 282.413 39.679 282.134 39.544C281.855 39.4 281.648 39.211 281.513 38.977C281.378 38.734 281.31 38.4415 281.31 38.0995C281.31 37.4785 281.562 36.979 282.066 36.601C282.579 36.214 283.227 36.025 284.01 36.034C284.82 36.043 285.477 36.2365 285.981 36.6145C286.485 36.9835 286.764 37.5145 286.818 38.2075H285.684C285.639 37.8475 285.464 37.555 285.158 37.33C284.861 37.096 284.478 36.979 284.01 36.979C283.524 36.979 283.133 37.0735 282.836 37.2625C282.548 37.4515 282.404 37.7035 282.404 38.0185C282.404 38.1985 282.44 38.347 282.512 38.464C282.593 38.581 282.723 38.6755 282.903 38.7475C283.092 38.8105 283.263 38.86 283.416 38.896C283.578 38.923 283.817 38.9545 284.132 38.9905C284.492 39.0355 284.793 39.0805 285.036 39.1255C285.279 39.1705 285.531 39.2425 285.792 39.3415C286.053 39.4405 286.26 39.5575 286.413 39.6925C286.575 39.8275 286.706 40.0075 286.805 40.2325C286.904 40.4485 286.953 40.705 286.953 41.002C286.953 41.632 286.688 42.136 286.157 42.514C285.635 42.892 284.982 43.081 284.199 43.081C283.29 43.081 282.557 42.874 281.999 42.46C281.45 42.046 281.171 41.47 281.162 40.732Z"/>
-</mask>
-<path d="M254.886 34.8325C255.732 35.7325 256.155 36.88 256.155 38.275C256.155 39.67 255.732 40.822 254.886 41.731C254.049 42.631 252.969 43.081 251.646 43.081C250.323 43.081 249.239 42.631 248.393 41.731C247.556 40.822 247.137 39.67 247.137 38.275C247.137 36.88 247.556 35.7325 248.393 34.8325C249.239 33.9235 250.323 33.469 251.646 33.469C252.969 33.469 254.049 33.9235 254.886 34.8325ZM249.257 35.602C248.645 36.295 248.339 37.186 248.339 38.275C248.339 39.364 248.645 40.2595 249.257 40.9615C249.869 41.6545 250.665 42.001 251.646 42.001C252.627 42.001 253.424 41.6545 254.036 40.9615C254.648 40.2595 254.954 39.364 254.954 38.275C254.954 37.186 254.648 36.295 254.036 35.602C253.424 34.9 252.627 34.549 251.646 34.549C250.665 34.549 249.869 34.9 249.257 35.602ZM260.664 36.115H260.974V37.195H260.421C259.764 37.195 259.291 37.4155 259.003 37.8565C258.724 38.2975 258.585 38.842 258.585 39.49V43H257.478V36.115H258.436L258.585 37.1545C259.008 36.4615 259.701 36.115 260.664 36.115ZM266.965 37.168V33.55H268.072V43H267.114L266.965 41.893C266.389 42.685 265.602 43.081 264.603 43.081C263.631 43.081 262.834 42.7705 262.213 42.1495C261.601 41.5195 261.295 40.6555 261.295 39.5575C261.295 38.5135 261.606 37.6675 262.227 37.0195C262.848 36.3625 263.64 36.034 264.603 36.034C265.701 36.034 266.488 36.412 266.965 37.168ZM264.711 42.0955C265.386 42.0955 265.93 41.8615 266.344 41.3935C266.767 40.9255 266.979 40.3225 266.979 39.5845C266.979 38.8285 266.767 38.212 266.344 37.735C265.93 37.258 265.386 37.0195 264.711 37.0195C264.027 37.0195 263.473 37.258 263.05 37.735C262.636 38.203 262.429 38.8105 262.429 39.5575C262.429 40.3045 262.636 40.9165 263.05 41.3935C263.473 41.8615 264.027 42.0955 264.711 42.0955ZM272.753 43.081C271.727 43.081 270.899 42.757 270.269 42.109C269.648 41.461 269.337 40.6105 269.337 39.5575C269.337 38.5135 269.639 37.6675 270.242 37.0195C270.845 36.3625 271.632 36.034 272.604 36.034C273.585 36.034 274.368 36.3265 274.953 36.9115C275.538 37.4875 275.844 38.284 275.871 39.301C275.871 39.4 275.862 39.5575 275.844 39.7735H270.498V39.868C270.516 40.534 270.719 41.074 271.106 41.488C271.502 41.893 272.024 42.0955 272.672 42.0955C273.167 42.0955 273.585 41.974 273.927 41.731C274.278 41.479 274.512 41.1325 274.629 40.6915H275.75C275.615 41.3935 275.277 41.9695 274.737 42.4195C274.197 42.8605 273.536 43.081 272.753 43.081ZM270.566 38.8555H274.683C274.629 38.2705 274.418 37.816 274.049 37.492C273.68 37.168 273.203 37.006 272.618 37.006C272.096 37.006 271.637 37.177 271.241 37.519C270.845 37.861 270.62 38.3065 270.566 38.8555ZM280.32 36.115H280.631V37.195H280.077C279.42 37.195 278.948 37.4155 278.66 37.8565C278.381 38.2975 278.241 38.842 278.241 39.49V43H277.134V36.115H278.093L278.241 37.1545C278.664 36.4615 279.357 36.115 280.32 36.115ZM281.162 40.732H282.296C282.314 41.146 282.494 41.4835 282.836 41.7445C283.178 42.0055 283.632 42.136 284.199 42.136C284.685 42.136 285.081 42.0415 285.387 41.8525C285.702 41.6545 285.86 41.398 285.86 41.083C285.86 40.912 285.824 40.768 285.752 40.651C285.689 40.534 285.617 40.444 285.536 40.381C285.464 40.309 285.329 40.2505 285.131 40.2055C284.933 40.1515 284.78 40.12 284.672 40.111C284.564 40.093 284.366 40.066 284.078 40.03C283.637 39.976 283.272 39.9175 282.984 39.8545C282.696 39.7825 282.413 39.679 282.134 39.544C281.855 39.4 281.648 39.211 281.513 38.977C281.378 38.734 281.31 38.4415 281.31 38.0995C281.31 37.4785 281.562 36.979 282.066 36.601C282.579 36.214 283.227 36.025 284.01 36.034C284.82 36.043 285.477 36.2365 285.981 36.6145C286.485 36.9835 286.764 37.5145 286.818 38.2075H285.684C285.639 37.8475 285.464 37.555 285.158 37.33C284.861 37.096 284.478 36.979 284.01 36.979C283.524 36.979 283.133 37.0735 282.836 37.2625C282.548 37.4515 282.404 37.7035 282.404 38.0185C282.404 38.1985 282.44 38.347 282.512 38.464C282.593 38.581 282.723 38.6755 282.903 38.7475C283.092 38.8105 283.263 38.86 283.416 38.896C283.578 38.923 283.817 38.9545 284.132 38.9905C284.492 39.0355 284.793 39.0805 285.036 39.1255C285.279 39.1705 285.531 39.2425 285.792 39.3415C286.053 39.4405 286.26 39.5575 286.413 39.6925C286.575 39.8275 286.706 40.0075 286.805 40.2325C286.904 40.4485 286.953 40.705 286.953 41.002C286.953 41.632 286.688 42.136 286.157 42.514C285.635 42.892 284.982 43.081 284.199 43.081C283.29 43.081 282.557 42.874 281.999 42.46C281.45 42.046 281.171 41.47 281.162 40.732Z" fill="#818186"/>
-<path d="M254.886 34.8325L254.224 35.4422L254.231 35.4489L254.886 34.8325ZM254.886 41.731L254.227 41.1178L254.227 41.1181L254.886 41.731ZM248.393 41.731L247.731 42.3407L247.737 42.3474L248.393 41.731ZM248.393 34.8325L247.734 34.2193L247.734 34.2196L248.393 34.8325ZM249.257 35.602L249.931 36.1978L249.935 36.1934L249.257 35.602ZM249.257 40.9615L248.578 41.5529L248.582 41.5572L249.257 40.9615ZM254.036 40.9615L254.71 41.5573L254.714 41.5529L254.036 40.9615ZM254.036 35.602L253.357 36.1934L253.361 36.1977L254.036 35.602ZM254.886 34.8325L254.231 35.4489C254.899 36.1601 255.255 37.0771 255.255 38.275H256.155H257.055C257.055 36.6829 256.566 35.3049 255.542 34.2161L254.886 34.8325ZM256.155 38.275H255.255C255.255 39.4728 254.899 40.3963 254.227 41.1178L254.886 41.731L255.545 42.3442C256.566 41.2477 257.055 39.8672 257.055 38.275H256.155ZM254.886 41.731L254.227 41.1181C253.575 41.8199 252.741 42.181 251.646 42.181V43.081V43.981C253.198 43.981 254.524 43.4421 255.545 42.3439L254.886 41.731ZM251.646 43.081V42.181C250.552 42.181 249.711 41.8197 249.049 41.1146L248.393 41.731L247.737 42.3474C248.766 43.4423 250.095 43.981 251.646 43.981V43.081ZM248.393 41.731L249.055 41.1214C248.391 40.4002 248.037 39.4755 248.037 38.275H247.137H246.237C246.237 39.8645 246.721 41.2438 247.731 42.3406L248.393 41.731ZM247.137 38.275H248.037C248.037 37.0743 248.391 36.1562 249.052 35.4454L248.393 34.8325L247.734 34.2196C246.721 35.3088 246.237 36.6857 246.237 38.275H247.137ZM248.393 34.8325L249.052 35.4457C249.715 34.7326 250.555 34.369 251.646 34.369V33.469V32.569C250.092 32.569 248.762 33.1144 247.734 34.2193L248.393 34.8325ZM251.646 33.469V34.369C252.738 34.369 253.571 34.7324 254.224 35.4421L254.886 34.8325L255.548 34.2229C254.528 33.1146 253.201 32.569 251.646 32.569V33.469ZM249.257 35.602L248.582 35.0063C247.8 35.8922 247.439 37.0078 247.439 38.275H248.339H249.239C249.239 37.3642 249.49 36.6978 249.931 36.1977L249.257 35.602ZM248.339 38.275H247.439C247.439 39.5425 247.8 40.6599 248.578 41.5529L249.257 40.9615L249.935 40.3701C249.49 39.8591 249.239 39.1855 249.239 38.275H248.339ZM249.257 40.9615L248.582 41.5572C249.377 42.4567 250.425 42.901 251.646 42.901V42.001V41.101C250.906 41.101 250.361 40.8523 249.931 40.3658L249.257 40.9615ZM251.646 42.001V42.901C252.868 42.901 253.916 42.4567 254.71 41.5572L254.036 40.9615L253.361 40.3658C252.932 40.8523 252.387 41.101 251.646 41.101V42.001ZM254.036 40.9615L254.714 41.5529C255.493 40.6599 255.854 39.5425 255.854 38.275H254.954H254.054C254.054 39.1855 253.803 39.8591 253.357 40.3701L254.036 40.9615ZM254.954 38.275H255.854C255.854 37.0078 255.493 35.8922 254.71 35.0063L254.036 35.602L253.361 36.1977C253.803 36.6978 254.054 37.3642 254.054 38.275H254.954ZM254.036 35.602L254.714 35.0106C253.921 34.1009 252.872 33.649 251.646 33.649V34.549V35.449C252.383 35.449 252.926 35.6991 253.357 36.1934L254.036 35.602ZM251.646 34.549V33.649C250.421 33.649 249.371 34.1009 248.578 35.0106L249.257 35.602L249.935 36.1934C250.366 35.6991 250.91 35.449 251.646 35.449V34.549ZM260.974 36.115H261.874V35.215H260.974V36.115ZM260.974 37.195V38.095H261.874V37.195H260.974ZM259.003 37.8565L258.25 37.3643L258.243 37.3753L259.003 37.8565ZM258.585 43V43.9H259.485V43H258.585ZM257.478 43H256.578V43.9H257.478V43ZM257.478 36.115V35.215H256.578V36.115H257.478ZM258.436 36.115L259.327 35.9877L259.217 35.215H258.436V36.115ZM258.585 37.1545L257.694 37.2818L258.048 39.7613L259.353 37.6234L258.585 37.1545ZM260.664 36.115V37.015H260.974V36.115V35.215H260.664V36.115ZM260.974 36.115H260.074V37.195H260.974H261.874V36.115H260.974ZM260.974 37.195V36.295H260.421V37.195V38.095H260.974V37.195ZM260.421 37.195V36.295C259.545 36.295 258.746 36.6047 258.25 37.3644L259.003 37.8565L259.757 38.3486C259.837 38.2263 259.982 38.095 260.421 38.095V37.195ZM259.003 37.8565L258.243 37.3753C257.853 37.9915 257.685 38.7128 257.685 39.49H258.585H259.485C259.485 38.9712 259.596 38.6035 259.764 38.3377L259.003 37.8565ZM258.585 39.49H257.685V43H258.585H259.485V39.49H258.585ZM258.585 43V42.1H257.478V43V43.9H258.585V43ZM257.478 43H258.378V36.115H257.478H256.578V43H257.478ZM257.478 36.115V37.015H258.436V36.115V35.215H257.478V36.115ZM258.436 36.115L257.545 36.2423L257.694 37.2818L258.585 37.1545L259.476 37.0272L259.327 35.9877L258.436 36.115ZM258.585 37.1545L259.353 37.6234C259.58 37.2518 259.946 37.015 260.664 37.015V36.115V35.215C259.455 35.215 258.436 35.6712 257.816 36.6856L258.585 37.1545ZM266.965 37.168L266.204 37.6483L267.865 40.281V37.168H266.965ZM266.965 33.55V32.65H266.065V33.55H266.965ZM268.072 33.55H268.972V32.65H268.072V33.55ZM268.072 43V43.9H268.972V43H268.072ZM267.114 43L266.222 43.1197L266.326 43.9H267.114V43ZM266.965 41.893L267.857 41.7733L267.559 39.547L266.237 41.3636L266.965 41.893ZM262.213 42.1495L261.568 42.7767L261.577 42.7859L262.213 42.1495ZM262.227 37.0195L262.877 37.6422L262.881 37.6377L262.227 37.0195ZM266.344 41.3935L265.677 40.79L265.67 40.7972L266.344 41.3935ZM266.344 37.735L265.664 38.325L265.671 38.3321L266.344 37.735ZM263.05 37.735L262.377 37.1379L262.376 37.1387L263.05 37.735ZM263.05 41.3935L262.371 41.9834L262.376 41.9903L262.383 41.997L263.05 41.3935ZM266.965 37.168H267.865V33.55H266.965H266.065V37.168H266.965ZM266.965 33.55V34.45H268.072V33.55V32.65H266.965V33.55ZM268.072 33.55H267.172V43H268.072H268.972V33.55H268.072ZM268.072 43V42.1H267.114V43V43.9H268.072V43ZM267.114 43L268.006 42.8803L267.857 41.7733L266.965 41.893L266.073 42.0127L266.222 43.1197L267.114 43ZM266.965 41.893L266.237 41.3636C265.835 41.9173 265.321 42.181 264.603 42.181V43.081V43.981C265.883 43.981 266.944 43.4527 267.693 42.4224L266.965 41.893ZM264.603 43.081V42.181C263.841 42.181 263.283 41.9465 262.85 41.5131L262.213 42.1495L261.577 42.7859C262.385 43.5945 263.42 43.981 264.603 43.981V43.081ZM262.213 42.1495L262.859 41.5224C262.448 41.0999 262.195 40.4829 262.195 39.5575H261.295H260.395C260.395 40.8281 260.754 41.9391 261.568 42.7766L262.213 42.1495ZM261.295 39.5575H262.195C262.195 38.7049 262.442 38.0954 262.877 37.6422L262.227 37.0195L261.577 36.3968C260.769 37.2396 260.395 38.3221 260.395 39.5575H261.295ZM262.227 37.0195L262.881 37.6377C263.32 37.1733 263.869 36.934 264.603 36.934V36.034V35.134C263.41 35.134 262.376 35.5517 261.573 36.4013L262.227 37.0195ZM264.603 36.034V36.934C265.473 36.934 265.931 37.2156 266.204 37.6483L266.965 37.168L267.726 36.6877C267.045 35.6084 265.928 35.134 264.603 35.134V36.034ZM264.711 42.0955V42.9955C265.62 42.9955 266.419 42.6677 267.018 41.9898L266.344 41.3935L265.67 40.7972C265.442 41.0553 265.151 41.1955 264.711 41.1955V42.0955ZM266.344 41.3935L267.012 41.997C267.609 41.3359 267.879 40.5052 267.879 39.5845H266.979H266.079C266.079 40.1398 265.925 40.5151 265.677 40.79L266.344 41.3935ZM266.979 39.5845H267.879C267.879 38.6516 267.613 37.8092 267.018 37.1379L266.344 37.735L265.671 38.3321C265.922 38.6148 266.079 39.0054 266.079 39.5845H266.979ZM266.344 37.735L267.024 37.1451C266.426 36.4563 265.626 36.1195 264.711 36.1195V37.0195V37.9195C265.145 37.9195 265.434 38.0597 265.665 38.3249L266.344 37.735ZM264.711 37.0195V36.1195C263.79 36.1195 262.984 36.453 262.377 37.1379L263.05 37.735L263.724 38.3321C263.962 38.063 264.263 37.9195 264.711 37.9195V37.0195ZM263.05 37.735L262.376 37.1387C261.789 37.8022 261.529 38.636 261.529 39.5575H262.429H263.329C263.329 38.985 263.483 38.6038 263.724 38.3313L263.05 37.735ZM262.429 39.5575H261.529C261.529 40.4796 261.789 41.3138 262.371 41.9834L263.05 41.3935L263.73 40.8036C263.483 40.5192 263.329 40.1294 263.329 39.5575H262.429ZM263.05 41.3935L262.383 41.997C262.992 42.6709 263.796 42.9955 264.711 42.9955V42.0955V41.1955C264.257 41.1955 263.955 41.0521 263.718 40.79L263.05 41.3935ZM270.269 42.109L269.619 42.7317L269.623 42.7364L270.269 42.109ZM270.242 37.0195L270.901 37.6326L270.905 37.6281L270.242 37.0195ZM274.953 36.9115L274.317 37.5479L274.322 37.5528L274.953 36.9115ZM275.871 39.301H276.771V39.2891L276.771 39.2771L275.871 39.301ZM275.844 39.7735V40.6735H276.672L276.741 39.8482L275.844 39.7735ZM270.498 39.7735V38.8735H269.598V39.7735H270.498ZM270.498 39.868H269.598V39.8802L269.599 39.8923L270.498 39.868ZM271.106 41.488L270.448 42.1026L270.455 42.11L270.462 42.1172L271.106 41.488ZM273.927 41.731L274.449 42.4647L274.452 42.4621L273.927 41.731ZM274.629 40.6915V39.7915H273.937L273.759 40.4607L274.629 40.6915ZM275.75 40.6915L276.634 40.8615L276.839 39.7915H275.75V40.6915ZM274.737 42.4195L275.307 43.1166L275.313 43.1109L274.737 42.4195ZM270.566 38.8555L269.67 38.7674L269.573 39.7555H270.566V38.8555ZM274.683 38.8555V39.7555H275.67L275.579 38.7728L274.683 38.8555ZM271.241 37.519L271.829 38.2001L271.829 38.2001L271.241 37.519ZM272.753 43.081V42.181C271.934 42.181 271.351 41.9311 270.914 41.4816L270.269 42.109L269.623 42.7364C270.446 43.5829 271.52 43.981 272.753 43.981V43.081ZM270.269 42.109L270.919 41.4863C270.486 41.0345 270.237 40.4215 270.237 39.5575H269.337H268.437C268.437 40.7995 268.81 41.8875 269.619 42.7317L270.269 42.109ZM269.337 39.5575H270.237C270.237 38.6975 270.48 38.0848 270.901 37.6326L270.242 37.0195L269.583 36.4064C268.798 37.2502 268.437 38.3295 268.437 39.5575H269.337ZM270.242 37.0195L270.905 37.6281C271.321 37.1747 271.859 36.934 272.604 36.934V36.034V35.134C271.405 35.134 270.369 35.5503 269.579 36.4109L270.242 37.0195ZM272.604 36.034V36.934C273.394 36.934 273.932 37.1626 274.317 37.5479L274.953 36.9115L275.59 36.2751C274.805 35.4904 273.776 35.134 272.604 35.134V36.034ZM274.953 36.9115L274.322 37.5528C274.703 37.9285 274.949 38.482 274.972 39.3249L275.871 39.301L276.771 39.2771C276.739 38.086 276.373 37.0465 275.585 36.2702L274.953 36.9115ZM275.871 39.301H274.971C274.971 39.3599 274.965 39.4856 274.947 39.6988L275.844 39.7735L276.741 39.8482C276.759 39.6294 276.771 39.4401 276.771 39.301H275.871ZM275.844 39.7735V38.8735H270.498V39.7735V40.6735H275.844V39.7735ZM270.498 39.7735H269.598V39.868H270.498H271.398V39.7735H270.498ZM270.498 39.868L269.599 39.8923C269.621 40.7372 269.885 41.5005 270.448 42.1026L271.106 41.488L271.763 40.8734C271.552 40.6475 271.411 40.3308 271.398 39.8437L270.498 39.868ZM271.106 41.488L270.462 42.1172C271.052 42.7208 271.82 42.9955 272.672 42.9955V42.0955V41.1955C272.228 41.1955 271.951 41.0652 271.749 40.8588L271.106 41.488ZM272.672 42.0955V42.9955C273.319 42.9955 273.928 42.8343 274.449 42.4647L273.927 41.731L273.406 40.9973C273.242 41.1137 273.014 41.1955 272.672 41.1955V42.0955ZM273.927 41.731L274.452 42.4621C274.983 42.0812 275.332 41.5528 275.499 40.9223L274.629 40.6915L273.759 40.4607C273.693 40.7122 273.574 40.8768 273.402 40.9999L273.927 41.731ZM274.629 40.6915V41.5915H275.75V40.6915V39.7915H274.629V40.6915ZM275.75 40.6915L274.866 40.5215C274.769 41.0232 274.538 41.4136 274.161 41.7281L274.737 42.4195L275.313 43.1109C276.016 42.5254 276.46 41.7638 276.634 40.8615L275.75 40.6915ZM274.737 42.4195L274.168 41.7224C273.808 42.016 273.355 42.181 272.753 42.181V43.081V43.981C273.716 43.981 274.586 43.705 275.306 43.1166L274.737 42.4195ZM270.566 38.8555V39.7555H274.683V38.8555V37.9555H270.566V38.8555ZM274.683 38.8555L275.579 38.7728C275.509 38.0064 275.218 37.3206 274.643 36.8157L274.049 37.492L273.455 38.1683C273.618 38.3114 273.75 38.5346 273.787 38.9382L274.683 38.8555ZM274.049 37.492L274.643 36.8157C274.079 36.3209 273.377 36.106 272.618 36.106V37.006V37.906C273.028 37.906 273.28 38.0151 273.455 38.1683L274.049 37.492ZM272.618 37.006V36.106C271.879 36.106 271.212 36.355 270.652 36.8379L271.241 37.519L271.829 38.2001C272.062 37.999 272.312 37.906 272.618 37.906V37.006ZM271.241 37.519L270.652 36.8379C270.072 37.3396 269.745 38.0024 269.67 38.7674L270.566 38.8555L271.461 38.9436C271.494 38.6106 271.618 38.3824 271.829 38.2001L271.241 37.519ZM280.631 36.115H281.531V35.215H280.631V36.115ZM280.631 37.195V38.095H281.531V37.195H280.631ZM278.66 37.8565L277.906 37.3643L277.899 37.3753L278.66 37.8565ZM278.241 43V43.9H279.141V43H278.241ZM277.134 43H276.234V43.9H277.134V43ZM277.134 36.115V35.215H276.234V36.115H277.134ZM278.093 36.115L278.984 35.9877L278.873 35.215H278.093V36.115ZM278.241 37.1545L277.35 37.2818L277.705 39.7613L279.01 37.6234L278.241 37.1545ZM280.32 36.115V37.015H280.631V36.115V35.215H280.32V36.115ZM280.631 36.115H279.731V37.195H280.631H281.531V36.115H280.631ZM280.631 37.195V36.295H280.077V37.195V38.095H280.631V37.195ZM280.077 37.195V36.295C279.202 36.295 278.403 36.6047 277.906 37.3644L278.66 37.8565L279.413 38.3486C279.493 38.2263 279.639 38.095 280.077 38.095V37.195ZM278.66 37.8565L277.899 37.3753C277.51 37.9915 277.341 38.7128 277.341 39.49H278.241H279.141C279.141 38.9712 279.252 38.6035 279.42 38.3377L278.66 37.8565ZM278.241 39.49H277.341V43H278.241H279.141V39.49H278.241ZM278.241 43V42.1H277.134V43V43.9H278.241V43ZM277.134 43H278.034V36.115H277.134H276.234V43H277.134ZM277.134 36.115V37.015H278.093V36.115V35.215H277.134V36.115ZM278.093 36.115L277.202 36.2423L277.35 37.2818L278.241 37.1545L279.132 37.0272L278.984 35.9877L278.093 36.115ZM278.241 37.1545L279.01 37.6234C279.236 37.2518 279.603 37.015 280.32 37.015V36.115V35.215C279.112 35.215 278.092 35.6712 277.473 36.6856L278.241 37.1545ZM281.162 40.732V39.832H280.251L280.262 40.743L281.162 40.732ZM282.296 40.732L283.195 40.6929L283.158 39.832H282.296V40.732ZM282.836 41.7445L282.29 42.46L282.836 41.7445ZM285.387 41.8525L285.86 42.6182L285.866 42.6145L285.387 41.8525ZM285.752 40.651L284.96 41.0777L284.972 41.1006L284.985 41.1227L285.752 40.651ZM285.536 40.381L284.9 41.0174L284.939 41.057L284.983 41.0914L285.536 40.381ZM285.131 40.2055L284.894 41.0738L284.913 41.0789L284.931 41.0831L285.131 40.2055ZM284.672 40.111L284.524 40.9988L284.56 41.0048L284.597 41.0079L284.672 40.111ZM284.078 40.03L284.19 39.1369L284.187 39.1367L284.078 40.03ZM282.984 39.8545L282.766 40.7276L282.779 40.7309L282.792 40.7337L282.984 39.8545ZM282.134 39.544L281.721 40.3438L281.731 40.3491L281.742 40.3541L282.134 39.544ZM281.513 38.977L280.726 39.4141L280.73 39.4204L280.733 39.4268L281.513 38.977ZM282.066 36.601L282.606 37.321L282.608 37.3195L282.066 36.601ZM284.01 36.034L284 36.9339L284 36.9339L284.01 36.034ZM285.981 36.6145L285.441 37.3345L285.45 37.3407L285.981 36.6145ZM286.818 38.2075V39.1075H287.791L287.716 38.1376L286.818 38.2075ZM285.684 38.2075L284.791 38.3191L284.89 39.1075H285.684V38.2075ZM285.158 37.33L284.601 38.0369L284.613 38.0462L284.625 38.0551L285.158 37.33ZM282.836 37.2625L282.353 36.5031L282.342 36.5101L282.836 37.2625ZM282.512 38.464L281.745 38.9357L281.758 38.9563L281.772 38.9763L282.512 38.464ZM282.903 38.7475L282.569 39.5831L282.594 39.593L282.619 39.6013L282.903 38.7475ZM283.416 38.896L283.21 39.7721L283.239 39.7789L283.268 39.7838L283.416 38.896ZM284.132 38.9905L284.244 38.0974L284.234 38.0963L284.132 38.9905ZM285.036 39.1255L284.873 40.0105V40.0105L285.036 39.1255ZM285.792 39.3415L286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.818 40.3674L285.828 40.3758L285.837 40.3839L286.413 39.6925ZM286.805 40.2325L285.981 40.595L285.987 40.6075L286.805 40.2325ZM286.157 42.514L285.635 41.7808L285.629 41.7851L286.157 42.514ZM281.999 42.46L281.457 43.1786L281.463 43.1828L281.999 42.46ZM281.162 40.732V41.632H282.296V40.732V39.832H281.162V40.732ZM282.296 40.732L281.397 40.7711C281.427 41.4633 281.745 42.0441 282.29 42.46L282.836 41.7445L283.382 41.029C283.243 40.9229 283.201 40.8287 283.195 40.6929L282.296 40.732ZM282.836 41.7445L282.29 42.46C282.832 42.8738 283.498 43.036 284.199 43.036V42.136V41.236C283.767 41.236 283.524 41.1372 283.382 41.029L282.836 41.7445ZM284.199 42.136V43.036C284.796 43.036 285.371 42.9207 285.86 42.6182L285.387 41.8525L284.915 41.0868C284.792 41.1623 284.575 41.236 284.199 41.236V42.136ZM285.387 41.8525L285.866 42.6145C286.388 42.2866 286.76 41.7677 286.76 41.083H285.86H284.96C284.96 41.086 284.96 41.0803 284.963 41.0692C284.966 41.0577 284.971 41.0476 284.975 41.0407C284.984 41.0266 284.976 41.0481 284.909 41.0905L285.387 41.8525ZM285.86 41.083H286.76C286.76 40.786 286.697 40.4691 286.518 40.1793L285.752 40.651L284.985 41.1227C284.969 41.0966 284.962 41.0753 284.96 41.065C284.958 41.0558 284.96 41.0602 284.96 41.083H285.86ZM285.752 40.651L286.544 40.2243C286.439 40.0282 286.293 39.8295 286.089 39.6706L285.536 40.381L284.983 41.0914C284.962 41.0746 284.951 41.0614 284.948 41.058C284.945 41.0547 284.95 41.0599 284.96 41.0777L285.752 40.651ZM285.536 40.381L286.172 39.7446C285.91 39.4823 285.558 39.3797 285.33 39.3279L285.131 40.2055L284.931 41.0831C284.962 41.09 284.984 41.0962 285.001 41.1012C285.017 41.1063 285.024 41.1092 285.023 41.1089C285.022 41.1088 285.01 41.1035 284.99 41.0909C284.97 41.0784 284.937 41.0551 284.9 41.0174L285.536 40.381ZM285.131 40.2055L285.368 39.3372C285.155 39.2791 284.938 39.2301 284.747 39.2141L284.672 40.111L284.597 41.0079C284.622 41.0099 284.711 41.0239 284.894 41.0738L285.131 40.2055ZM284.672 40.111L284.82 39.2232C284.691 39.2018 284.476 39.1728 284.19 39.1369L284.078 40.03L283.966 40.923C284.256 40.9592 284.437 40.9842 284.524 40.9988L284.672 40.111ZM284.078 40.03L284.187 39.1367C283.762 39.0846 283.427 39.0301 283.177 38.9753L282.984 39.8545L282.792 40.7337C283.118 40.8049 283.512 40.8674 283.969 40.9233L284.078 40.03ZM282.984 39.8545L283.203 38.9814C282.977 38.925 282.752 38.8431 282.526 38.7339L282.134 39.544L281.742 40.3541C282.074 40.5149 282.416 40.64 282.766 40.7276L282.984 39.8545ZM282.134 39.544L282.547 38.7442C282.396 38.6663 282.328 38.5889 282.293 38.5272L281.513 38.977L280.733 39.4268C280.968 39.8331 281.314 40.1337 281.721 40.3438L282.134 39.544ZM281.513 38.977L282.3 38.5399C282.254 38.4581 282.21 38.3234 282.21 38.0995H281.31H280.41C280.41 38.5596 280.502 39.0099 280.726 39.4141L281.513 38.977ZM281.31 38.0995H282.21C282.21 37.7666 282.325 37.5319 282.606 37.321L282.066 36.601L281.526 35.881C280.8 36.4261 280.41 37.1904 280.41 38.0995H281.31ZM282.066 36.601L282.608 37.3195C282.93 37.0768 283.372 36.9267 284 36.9339L284.01 36.034L284.021 35.1341C283.083 35.1233 282.229 35.3512 281.524 35.8825L282.066 36.601ZM284.01 36.034L284 36.9339C284.674 36.9414 285.129 37.1003 285.441 37.3345L285.981 36.6145L286.521 35.8945C285.826 35.3727 284.967 35.1446 284.02 35.1341L284.01 36.034ZM285.981 36.6145L285.45 37.3407C285.717 37.5361 285.885 37.8129 285.921 38.2774L286.818 38.2075L287.716 38.1376C287.644 37.2161 287.254 36.4309 286.513 35.8883L285.981 36.6145ZM286.818 38.2075V37.3075H285.684V38.2075V39.1075H286.818V38.2075ZM285.684 38.2075L286.578 38.0959C286.5 37.478 286.186 36.9686 285.691 36.6049L285.158 37.33L284.625 38.0551C284.742 38.1414 284.779 38.217 284.791 38.3191L285.684 38.2075ZM285.158 37.33L285.715 36.6231C285.224 36.2366 284.631 36.079 284.01 36.079V36.979V37.879C284.326 37.879 284.497 37.9554 284.601 38.0369L285.158 37.33ZM284.01 36.979V36.079C283.416 36.079 282.839 36.1936 282.353 36.5032L282.836 37.2625L283.319 38.0218C283.427 37.9534 283.633 37.879 284.01 37.879V36.979ZM282.836 37.2625L282.342 36.5101C281.829 36.847 281.504 37.3681 281.504 38.0185H282.404H283.304C283.304 38.0088 283.305 38.0087 283.303 38.0156C283.302 38.0188 283.301 38.0229 283.299 38.0274C283.298 38.0319 283.295 38.0361 283.293 38.0398C283.289 38.0476 283.286 38.0495 283.29 38.0459C283.294 38.0418 283.306 38.0308 283.33 38.0149L282.836 37.2625ZM282.404 38.0185H281.504C281.504 38.3145 281.563 38.6392 281.745 38.9357L282.512 38.464L283.278 37.9923C283.297 38.0226 283.304 38.0456 283.306 38.0528C283.307 38.059 283.304 38.0493 283.304 38.0185H282.404ZM282.512 38.464L281.772 38.9763C281.984 39.2824 282.283 39.4686 282.569 39.5831L282.903 38.7475L283.238 37.9119C283.203 37.898 283.193 37.8898 283.198 37.8937C283.205 37.8983 283.227 37.9162 283.252 37.9517L282.512 38.464ZM282.903 38.7475L282.619 39.6013C282.827 39.6708 283.025 39.7285 283.21 39.7721L283.416 38.896L283.623 38.0199C283.502 37.9915 283.358 37.9502 283.188 37.8937L282.903 38.7475ZM283.416 38.896L283.268 39.7838C283.454 39.8146 283.711 39.8482 284.03 39.8847L284.132 38.9905L284.234 38.0963C283.923 38.0608 283.703 38.0314 283.564 38.0082L283.416 38.896ZM284.132 38.9905L284.02 39.8835C284.37 39.9273 284.653 39.9698 284.873 40.0105L285.036 39.1255L285.2 38.2405C284.934 38.1912 284.614 38.1437 284.244 38.0974L284.132 38.9905ZM285.036 39.1255L284.873 40.0105C285.056 40.0445 285.256 40.1007 285.473 40.183L285.792 39.3415L286.112 38.5C285.807 38.3843 285.503 38.2965 285.2 38.2405L285.036 39.1255ZM285.792 39.3415L285.473 40.183C285.668 40.2567 285.77 40.3252 285.818 40.3674L286.413 39.6925L287.009 39.0176C286.751 38.7898 286.439 38.6243 286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.837 40.3839C285.876 40.4162 285.929 40.4762 285.981 40.595L286.805 40.2325L287.629 39.87C287.483 39.5388 287.275 39.2388 286.99 39.0011L286.413 39.6925ZM286.805 40.2325L285.987 40.6075C286.02 40.6803 286.053 40.803 286.053 41.002H286.953H287.853C287.853 40.607 287.788 40.2167 287.623 39.8575L286.805 40.2325ZM286.953 41.002H286.053C286.053 41.3291 285.939 41.5647 285.635 41.7808L286.157 42.514L286.679 43.2472C287.437 42.7073 287.853 41.9349 287.853 41.002H286.953ZM286.157 42.514L285.629 41.7851C285.291 42.0297 284.834 42.181 284.199 42.181V43.081V43.981C285.13 43.981 285.979 43.7543 286.685 43.2429L286.157 42.514ZM284.199 43.081V42.181C283.424 42.181 282.896 42.0051 282.535 41.7372L281.999 42.46L281.463 43.1828C282.218 43.7429 283.157 43.981 284.199 43.981V43.081ZM281.999 42.46L282.541 41.7414C282.232 41.5089 282.068 41.2041 282.062 40.721L281.162 40.732L280.262 40.743C280.274 41.7359 280.667 42.5831 281.457 43.1786L281.999 42.46Z" fill="#2D2D31" mask="url(#path-7-outside-1_2782_11310)"/>
-<path d="M254.886 34.8325L254.224 35.4422L254.231 35.4489L254.886 34.8325ZM254.886 41.731L254.227 41.1178L254.227 41.1181L254.886 41.731ZM248.393 41.731L247.731 42.3407L247.737 42.3474L248.393 41.731ZM248.393 34.8325L247.734 34.2193L247.734 34.2196L248.393 34.8325ZM249.257 35.602L249.931 36.1978L249.935 36.1934L249.257 35.602ZM249.257 40.9615L248.578 41.5529L248.582 41.5572L249.257 40.9615ZM254.036 40.9615L254.71 41.5573L254.714 41.5529L254.036 40.9615ZM254.036 35.602L253.357 36.1934L253.361 36.1977L254.036 35.602ZM254.886 34.8325L254.231 35.4489C254.899 36.1601 255.255 37.0771 255.255 38.275H256.155H257.055C257.055 36.6829 256.566 35.3049 255.542 34.2161L254.886 34.8325ZM256.155 38.275H255.255C255.255 39.4728 254.899 40.3963 254.227 41.1178L254.886 41.731L255.545 42.3442C256.566 41.2477 257.055 39.8672 257.055 38.275H256.155ZM254.886 41.731L254.227 41.1181C253.575 41.8199 252.741 42.181 251.646 42.181V43.081V43.981C253.198 43.981 254.524 43.4421 255.545 42.3439L254.886 41.731ZM251.646 43.081V42.181C250.552 42.181 249.711 41.8197 249.049 41.1146L248.393 41.731L247.737 42.3474C248.766 43.4423 250.095 43.981 251.646 43.981V43.081ZM248.393 41.731L249.055 41.1214C248.391 40.4002 248.037 39.4755 248.037 38.275H247.137H246.237C246.237 39.8645 246.721 41.2438 247.731 42.3406L248.393 41.731ZM247.137 38.275H248.037C248.037 37.0743 248.391 36.1562 249.052 35.4454L248.393 34.8325L247.734 34.2196C246.721 35.3088 246.237 36.6857 246.237 38.275H247.137ZM248.393 34.8325L249.052 35.4457C249.715 34.7326 250.555 34.369 251.646 34.369V33.469V32.569C250.092 32.569 248.762 33.1144 247.734 34.2193L248.393 34.8325ZM251.646 33.469V34.369C252.738 34.369 253.571 34.7324 254.224 35.4421L254.886 34.8325L255.548 34.2229C254.528 33.1146 253.201 32.569 251.646 32.569V33.469ZM249.257 35.602L248.582 35.0063C247.8 35.8922 247.439 37.0078 247.439 38.275H248.339H249.239C249.239 37.3642 249.49 36.6978 249.931 36.1977L249.257 35.602ZM248.339 38.275H247.439C247.439 39.5425 247.8 40.6599 248.578 41.5529L249.257 40.9615L249.935 40.3701C249.49 39.8591 249.239 39.1855 249.239 38.275H248.339ZM249.257 40.9615L248.582 41.5572C249.377 42.4567 250.425 42.901 251.646 42.901V42.001V41.101C250.906 41.101 250.361 40.8523 249.931 40.3658L249.257 40.9615ZM251.646 42.001V42.901C252.868 42.901 253.916 42.4567 254.71 41.5572L254.036 40.9615L253.361 40.3658C252.932 40.8523 252.387 41.101 251.646 41.101V42.001ZM254.036 40.9615L254.714 41.5529C255.493 40.6599 255.854 39.5425 255.854 38.275H254.954H254.054C254.054 39.1855 253.803 39.8591 253.357 40.3701L254.036 40.9615ZM254.954 38.275H255.854C255.854 37.0078 255.493 35.8922 254.71 35.0063L254.036 35.602L253.361 36.1977C253.803 36.6978 254.054 37.3642 254.054 38.275H254.954ZM254.036 35.602L254.714 35.0106C253.921 34.1009 252.872 33.649 251.646 33.649V34.549V35.449C252.383 35.449 252.926 35.6991 253.357 36.1934L254.036 35.602ZM251.646 34.549V33.649C250.421 33.649 249.371 34.1009 248.578 35.0106L249.257 35.602L249.935 36.1934C250.366 35.6991 250.91 35.449 251.646 35.449V34.549ZM260.974 36.115H261.874V35.215H260.974V36.115ZM260.974 37.195V38.095H261.874V37.195H260.974ZM259.003 37.8565L258.25 37.3643L258.243 37.3753L259.003 37.8565ZM258.585 43V43.9H259.485V43H258.585ZM257.478 43H256.578V43.9H257.478V43ZM257.478 36.115V35.215H256.578V36.115H257.478ZM258.436 36.115L259.327 35.9877L259.217 35.215H258.436V36.115ZM258.585 37.1545L257.694 37.2818L258.048 39.7613L259.353 37.6234L258.585 37.1545ZM260.664 36.115V37.015H260.974V36.115V35.215H260.664V36.115ZM260.974 36.115H260.074V37.195H260.974H261.874V36.115H260.974ZM260.974 37.195V36.295H260.421V37.195V38.095H260.974V37.195ZM260.421 37.195V36.295C259.545 36.295 258.746 36.6047 258.25 37.3644L259.003 37.8565L259.757 38.3486C259.837 38.2263 259.982 38.095 260.421 38.095V37.195ZM259.003 37.8565L258.243 37.3753C257.853 37.9915 257.685 38.7128 257.685 39.49H258.585H259.485C259.485 38.9712 259.596 38.6035 259.764 38.3377L259.003 37.8565ZM258.585 39.49H257.685V43H258.585H259.485V39.49H258.585ZM258.585 43V42.1H257.478V43V43.9H258.585V43ZM257.478 43H258.378V36.115H257.478H256.578V43H257.478ZM257.478 36.115V37.015H258.436V36.115V35.215H257.478V36.115ZM258.436 36.115L257.545 36.2423L257.694 37.2818L258.585 37.1545L259.476 37.0272L259.327 35.9877L258.436 36.115ZM258.585 37.1545L259.353 37.6234C259.58 37.2518 259.946 37.015 260.664 37.015V36.115V35.215C259.455 35.215 258.436 35.6712 257.816 36.6856L258.585 37.1545ZM266.965 37.168L266.204 37.6483L267.865 40.281V37.168H266.965ZM266.965 33.55V32.65H266.065V33.55H266.965ZM268.072 33.55H268.972V32.65H268.072V33.55ZM268.072 43V43.9H268.972V43H268.072ZM267.114 43L266.222 43.1197L266.326 43.9H267.114V43ZM266.965 41.893L267.857 41.7733L267.559 39.547L266.237 41.3636L266.965 41.893ZM262.213 42.1495L261.568 42.7767L261.577 42.7859L262.213 42.1495ZM262.227 37.0195L262.877 37.6422L262.881 37.6377L262.227 37.0195ZM266.344 41.3935L265.677 40.79L265.67 40.7972L266.344 41.3935ZM266.344 37.735L265.664 38.325L265.671 38.3321L266.344 37.735ZM263.05 37.735L262.377 37.1379L262.376 37.1387L263.05 37.735ZM263.05 41.3935L262.371 41.9834L262.376 41.9903L262.383 41.997L263.05 41.3935ZM266.965 37.168H267.865V33.55H266.965H266.065V37.168H266.965ZM266.965 33.55V34.45H268.072V33.55V32.65H266.965V33.55ZM268.072 33.55H267.172V43H268.072H268.972V33.55H268.072ZM268.072 43V42.1H267.114V43V43.9H268.072V43ZM267.114 43L268.006 42.8803L267.857 41.7733L266.965 41.893L266.073 42.0127L266.222 43.1197L267.114 43ZM266.965 41.893L266.237 41.3636C265.835 41.9173 265.321 42.181 264.603 42.181V43.081V43.981C265.883 43.981 266.944 43.4527 267.693 42.4224L266.965 41.893ZM264.603 43.081V42.181C263.841 42.181 263.283 41.9465 262.85 41.5131L262.213 42.1495L261.577 42.7859C262.385 43.5945 263.42 43.981 264.603 43.981V43.081ZM262.213 42.1495L262.859 41.5224C262.448 41.0999 262.195 40.4829 262.195 39.5575H261.295H260.395C260.395 40.8281 260.754 41.9391 261.568 42.7766L262.213 42.1495ZM261.295 39.5575H262.195C262.195 38.7049 262.442 38.0954 262.877 37.6422L262.227 37.0195L261.577 36.3968C260.769 37.2396 260.395 38.3221 260.395 39.5575H261.295ZM262.227 37.0195L262.881 37.6377C263.32 37.1733 263.869 36.934 264.603 36.934V36.034V35.134C263.41 35.134 262.376 35.5517 261.573 36.4013L262.227 37.0195ZM264.603 36.034V36.934C265.473 36.934 265.931 37.2156 266.204 37.6483L266.965 37.168L267.726 36.6877C267.045 35.6084 265.928 35.134 264.603 35.134V36.034ZM264.711 42.0955V42.9955C265.62 42.9955 266.419 42.6677 267.018 41.9898L266.344 41.3935L265.67 40.7972C265.442 41.0553 265.151 41.1955 264.711 41.1955V42.0955ZM266.344 41.3935L267.012 41.997C267.609 41.3359 267.879 40.5052 267.879 39.5845H266.979H266.079C266.079 40.1398 265.925 40.5151 265.677 40.79L266.344 41.3935ZM266.979 39.5845H267.879C267.879 38.6516 267.613 37.8092 267.018 37.1379L266.344 37.735L265.671 38.3321C265.922 38.6148 266.079 39.0054 266.079 39.5845H266.979ZM266.344 37.735L267.024 37.1451C266.426 36.4563 265.626 36.1195 264.711 36.1195V37.0195V37.9195C265.145 37.9195 265.434 38.0597 265.665 38.3249L266.344 37.735ZM264.711 37.0195V36.1195C263.79 36.1195 262.984 36.453 262.377 37.1379L263.05 37.735L263.724 38.3321C263.962 38.063 264.263 37.9195 264.711 37.9195V37.0195ZM263.05 37.735L262.376 37.1387C261.789 37.8022 261.529 38.636 261.529 39.5575H262.429H263.329C263.329 38.985 263.483 38.6038 263.724 38.3313L263.05 37.735ZM262.429 39.5575H261.529C261.529 40.4796 261.789 41.3138 262.371 41.9834L263.05 41.3935L263.73 40.8036C263.483 40.5192 263.329 40.1294 263.329 39.5575H262.429ZM263.05 41.3935L262.383 41.997C262.992 42.6709 263.796 42.9955 264.711 42.9955V42.0955V41.1955C264.257 41.1955 263.955 41.0521 263.718 40.79L263.05 41.3935ZM270.269 42.109L269.619 42.7317L269.623 42.7364L270.269 42.109ZM270.242 37.0195L270.901 37.6326L270.905 37.6281L270.242 37.0195ZM274.953 36.9115L274.317 37.5479L274.322 37.5528L274.953 36.9115ZM275.871 39.301H276.771V39.2891L276.771 39.2771L275.871 39.301ZM275.844 39.7735V40.6735H276.672L276.741 39.8482L275.844 39.7735ZM270.498 39.7735V38.8735H269.598V39.7735H270.498ZM270.498 39.868H269.598V39.8802L269.599 39.8923L270.498 39.868ZM271.106 41.488L270.448 42.1026L270.455 42.11L270.462 42.1172L271.106 41.488ZM273.927 41.731L274.449 42.4647L274.452 42.4621L273.927 41.731ZM274.629 40.6915V39.7915H273.937L273.759 40.4607L274.629 40.6915ZM275.75 40.6915L276.634 40.8615L276.839 39.7915H275.75V40.6915ZM274.737 42.4195L275.307 43.1166L275.313 43.1109L274.737 42.4195ZM270.566 38.8555L269.67 38.7674L269.573 39.7555H270.566V38.8555ZM274.683 38.8555V39.7555H275.67L275.579 38.7728L274.683 38.8555ZM271.241 37.519L271.829 38.2001L271.829 38.2001L271.241 37.519ZM272.753 43.081V42.181C271.934 42.181 271.351 41.9311 270.914 41.4816L270.269 42.109L269.623 42.7364C270.446 43.5829 271.52 43.981 272.753 43.981V43.081ZM270.269 42.109L270.919 41.4863C270.486 41.0345 270.237 40.4215 270.237 39.5575H269.337H268.437C268.437 40.7995 268.81 41.8875 269.619 42.7317L270.269 42.109ZM269.337 39.5575H270.237C270.237 38.6975 270.48 38.0848 270.901 37.6326L270.242 37.0195L269.583 36.4064C268.798 37.2502 268.437 38.3295 268.437 39.5575H269.337ZM270.242 37.0195L270.905 37.6281C271.321 37.1747 271.859 36.934 272.604 36.934V36.034V35.134C271.405 35.134 270.369 35.5503 269.579 36.4109L270.242 37.0195ZM272.604 36.034V36.934C273.394 36.934 273.932 37.1626 274.317 37.5479L274.953 36.9115L275.59 36.2751C274.805 35.4904 273.776 35.134 272.604 35.134V36.034ZM274.953 36.9115L274.322 37.5528C274.703 37.9285 274.949 38.482 274.972 39.3249L275.871 39.301L276.771 39.2771C276.739 38.086 276.373 37.0465 275.585 36.2702L274.953 36.9115ZM275.871 39.301H274.971C274.971 39.3599 274.965 39.4856 274.947 39.6988L275.844 39.7735L276.741 39.8482C276.759 39.6294 276.771 39.4401 276.771 39.301H275.871ZM275.844 39.7735V38.8735H270.498V39.7735V40.6735H275.844V39.7735ZM270.498 39.7735H269.598V39.868H270.498H271.398V39.7735H270.498ZM270.498 39.868L269.599 39.8923C269.621 40.7372 269.885 41.5005 270.448 42.1026L271.106 41.488L271.763 40.8734C271.552 40.6475 271.411 40.3308 271.398 39.8437L270.498 39.868ZM271.106 41.488L270.462 42.1172C271.052 42.7208 271.82 42.9955 272.672 42.9955V42.0955V41.1955C272.228 41.1955 271.951 41.0652 271.749 40.8588L271.106 41.488ZM272.672 42.0955V42.9955C273.319 42.9955 273.928 42.8343 274.449 42.4647L273.927 41.731L273.406 40.9973C273.242 41.1137 273.014 41.1955 272.672 41.1955V42.0955ZM273.927 41.731L274.452 42.4621C274.983 42.0812 275.332 41.5528 275.499 40.9223L274.629 40.6915L273.759 40.4607C273.693 40.7122 273.574 40.8768 273.402 40.9999L273.927 41.731ZM274.629 40.6915V41.5915H275.75V40.6915V39.7915H274.629V40.6915ZM275.75 40.6915L274.866 40.5215C274.769 41.0232 274.538 41.4136 274.161 41.7281L274.737 42.4195L275.313 43.1109C276.016 42.5254 276.46 41.7638 276.634 40.8615L275.75 40.6915ZM274.737 42.4195L274.168 41.7224C273.808 42.016 273.355 42.181 272.753 42.181V43.081V43.981C273.716 43.981 274.586 43.705 275.306 43.1166L274.737 42.4195ZM270.566 38.8555V39.7555H274.683V38.8555V37.9555H270.566V38.8555ZM274.683 38.8555L275.579 38.7728C275.509 38.0064 275.218 37.3206 274.643 36.8157L274.049 37.492L273.455 38.1683C273.618 38.3114 273.75 38.5346 273.787 38.9382L274.683 38.8555ZM274.049 37.492L274.643 36.8157C274.079 36.3209 273.377 36.106 272.618 36.106V37.006V37.906C273.028 37.906 273.28 38.0151 273.455 38.1683L274.049 37.492ZM272.618 37.006V36.106C271.879 36.106 271.212 36.355 270.652 36.8379L271.241 37.519L271.829 38.2001C272.062 37.999 272.312 37.906 272.618 37.906V37.006ZM271.241 37.519L270.652 36.8379C270.072 37.3396 269.745 38.0024 269.67 38.7674L270.566 38.8555L271.461 38.9436C271.494 38.6106 271.618 38.3824 271.829 38.2001L271.241 37.519ZM280.631 36.115H281.531V35.215H280.631V36.115ZM280.631 37.195V38.095H281.531V37.195H280.631ZM278.66 37.8565L277.906 37.3643L277.899 37.3753L278.66 37.8565ZM278.241 43V43.9H279.141V43H278.241ZM277.134 43H276.234V43.9H277.134V43ZM277.134 36.115V35.215H276.234V36.115H277.134ZM278.093 36.115L278.984 35.9877L278.873 35.215H278.093V36.115ZM278.241 37.1545L277.35 37.2818L277.705 39.7613L279.01 37.6234L278.241 37.1545ZM280.32 36.115V37.015H280.631V36.115V35.215H280.32V36.115ZM280.631 36.115H279.731V37.195H280.631H281.531V36.115H280.631ZM280.631 37.195V36.295H280.077V37.195V38.095H280.631V37.195ZM280.077 37.195V36.295C279.202 36.295 278.403 36.6047 277.906 37.3644L278.66 37.8565L279.413 38.3486C279.493 38.2263 279.639 38.095 280.077 38.095V37.195ZM278.66 37.8565L277.899 37.3753C277.51 37.9915 277.341 38.7128 277.341 39.49H278.241H279.141C279.141 38.9712 279.252 38.6035 279.42 38.3377L278.66 37.8565ZM278.241 39.49H277.341V43H278.241H279.141V39.49H278.241ZM278.241 43V42.1H277.134V43V43.9H278.241V43ZM277.134 43H278.034V36.115H277.134H276.234V43H277.134ZM277.134 36.115V37.015H278.093V36.115V35.215H277.134V36.115ZM278.093 36.115L277.202 36.2423L277.35 37.2818L278.241 37.1545L279.132 37.0272L278.984 35.9877L278.093 36.115ZM278.241 37.1545L279.01 37.6234C279.236 37.2518 279.603 37.015 280.32 37.015V36.115V35.215C279.112 35.215 278.092 35.6712 277.473 36.6856L278.241 37.1545ZM281.162 40.732V39.832H280.251L280.262 40.743L281.162 40.732ZM282.296 40.732L283.195 40.6929L283.158 39.832H282.296V40.732ZM282.836 41.7445L282.29 42.46L282.836 41.7445ZM285.387 41.8525L285.86 42.6182L285.866 42.6145L285.387 41.8525ZM285.752 40.651L284.96 41.0777L284.972 41.1006L284.985 41.1227L285.752 40.651ZM285.536 40.381L284.9 41.0174L284.939 41.057L284.983 41.0914L285.536 40.381ZM285.131 40.2055L284.894 41.0738L284.913 41.0789L284.931 41.0831L285.131 40.2055ZM284.672 40.111L284.524 40.9988L284.56 41.0048L284.597 41.0079L284.672 40.111ZM284.078 40.03L284.19 39.1369L284.187 39.1367L284.078 40.03ZM282.984 39.8545L282.766 40.7276L282.779 40.7309L282.792 40.7337L282.984 39.8545ZM282.134 39.544L281.721 40.3438L281.731 40.3491L281.742 40.3541L282.134 39.544ZM281.513 38.977L280.726 39.4141L280.73 39.4204L280.733 39.4268L281.513 38.977ZM282.066 36.601L282.606 37.321L282.608 37.3195L282.066 36.601ZM284.01 36.034L284 36.9339L284 36.9339L284.01 36.034ZM285.981 36.6145L285.441 37.3345L285.45 37.3407L285.981 36.6145ZM286.818 38.2075V39.1075H287.791L287.716 38.1376L286.818 38.2075ZM285.684 38.2075L284.791 38.3191L284.89 39.1075H285.684V38.2075ZM285.158 37.33L284.601 38.0369L284.613 38.0462L284.625 38.0551L285.158 37.33ZM282.836 37.2625L282.353 36.5031L282.342 36.5101L282.836 37.2625ZM282.512 38.464L281.745 38.9357L281.758 38.9563L281.772 38.9763L282.512 38.464ZM282.903 38.7475L282.569 39.5831L282.594 39.593L282.619 39.6013L282.903 38.7475ZM283.416 38.896L283.21 39.7721L283.239 39.7789L283.268 39.7838L283.416 38.896ZM284.132 38.9905L284.244 38.0974L284.234 38.0963L284.132 38.9905ZM285.036 39.1255L284.873 40.0105V40.0105L285.036 39.1255ZM285.792 39.3415L286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.818 40.3674L285.828 40.3758L285.837 40.3839L286.413 39.6925ZM286.805 40.2325L285.981 40.595L285.987 40.6075L286.805 40.2325ZM286.157 42.514L285.635 41.7808L285.629 41.7851L286.157 42.514ZM281.999 42.46L281.457 43.1786L281.463 43.1828L281.999 42.46ZM281.162 40.732V41.632H282.296V40.732V39.832H281.162V40.732ZM282.296 40.732L281.397 40.7711C281.427 41.4633 281.745 42.0441 282.29 42.46L282.836 41.7445L283.382 41.029C283.243 40.9229 283.201 40.8287 283.195 40.6929L282.296 40.732ZM282.836 41.7445L282.29 42.46C282.832 42.8738 283.498 43.036 284.199 43.036V42.136V41.236C283.767 41.236 283.524 41.1372 283.382 41.029L282.836 41.7445ZM284.199 42.136V43.036C284.796 43.036 285.371 42.9207 285.86 42.6182L285.387 41.8525L284.915 41.0868C284.792 41.1623 284.575 41.236 284.199 41.236V42.136ZM285.387 41.8525L285.866 42.6145C286.388 42.2866 286.76 41.7677 286.76 41.083H285.86H284.96C284.96 41.086 284.96 41.0803 284.963 41.0692C284.966 41.0577 284.971 41.0476 284.975 41.0407C284.984 41.0266 284.976 41.0481 284.909 41.0905L285.387 41.8525ZM285.86 41.083H286.76C286.76 40.786 286.697 40.4691 286.518 40.1793L285.752 40.651L284.985 41.1227C284.969 41.0966 284.962 41.0753 284.96 41.065C284.958 41.0558 284.96 41.0602 284.96 41.083H285.86ZM285.752 40.651L286.544 40.2243C286.439 40.0282 286.293 39.8295 286.089 39.6706L285.536 40.381L284.983 41.0914C284.962 41.0746 284.951 41.0614 284.948 41.058C284.945 41.0547 284.95 41.0599 284.96 41.0777L285.752 40.651ZM285.536 40.381L286.172 39.7446C285.91 39.4823 285.558 39.3797 285.33 39.3279L285.131 40.2055L284.931 41.0831C284.962 41.09 284.984 41.0962 285.001 41.1012C285.017 41.1063 285.024 41.1092 285.023 41.1089C285.022 41.1088 285.01 41.1035 284.99 41.0909C284.97 41.0784 284.937 41.0551 284.9 41.0174L285.536 40.381ZM285.131 40.2055L285.368 39.3372C285.155 39.2791 284.938 39.2301 284.747 39.2141L284.672 40.111L284.597 41.0079C284.622 41.0099 284.711 41.0239 284.894 41.0738L285.131 40.2055ZM284.672 40.111L284.82 39.2232C284.691 39.2018 284.476 39.1728 284.19 39.1369L284.078 40.03L283.966 40.923C284.256 40.9592 284.437 40.9842 284.524 40.9988L284.672 40.111ZM284.078 40.03L284.187 39.1367C283.762 39.0846 283.427 39.0301 283.177 38.9753L282.984 39.8545L282.792 40.7337C283.118 40.8049 283.512 40.8674 283.969 40.9233L284.078 40.03ZM282.984 39.8545L283.203 38.9814C282.977 38.925 282.752 38.8431 282.526 38.7339L282.134 39.544L281.742 40.3541C282.074 40.5149 282.416 40.64 282.766 40.7276L282.984 39.8545ZM282.134 39.544L282.547 38.7442C282.396 38.6663 282.328 38.5889 282.293 38.5272L281.513 38.977L280.733 39.4268C280.968 39.8331 281.314 40.1337 281.721 40.3438L282.134 39.544ZM281.513 38.977L282.3 38.5399C282.254 38.4581 282.21 38.3234 282.21 38.0995H281.31H280.41C280.41 38.5596 280.502 39.0099 280.726 39.4141L281.513 38.977ZM281.31 38.0995H282.21C282.21 37.7666 282.325 37.5319 282.606 37.321L282.066 36.601L281.526 35.881C280.8 36.4261 280.41 37.1904 280.41 38.0995H281.31ZM282.066 36.601L282.608 37.3195C282.93 37.0768 283.372 36.9267 284 36.9339L284.01 36.034L284.021 35.1341C283.083 35.1233 282.229 35.3512 281.524 35.8825L282.066 36.601ZM284.01 36.034L284 36.9339C284.674 36.9414 285.129 37.1003 285.441 37.3345L285.981 36.6145L286.521 35.8945C285.826 35.3727 284.967 35.1446 284.02 35.1341L284.01 36.034ZM285.981 36.6145L285.45 37.3407C285.717 37.5361 285.885 37.8129 285.921 38.2774L286.818 38.2075L287.716 38.1376C287.644 37.2161 287.254 36.4309 286.513 35.8883L285.981 36.6145ZM286.818 38.2075V37.3075H285.684V38.2075V39.1075H286.818V38.2075ZM285.684 38.2075L286.578 38.0959C286.5 37.478 286.186 36.9686 285.691 36.6049L285.158 37.33L284.625 38.0551C284.742 38.1414 284.779 38.217 284.791 38.3191L285.684 38.2075ZM285.158 37.33L285.715 36.6231C285.224 36.2366 284.631 36.079 284.01 36.079V36.979V37.879C284.326 37.879 284.497 37.9554 284.601 38.0369L285.158 37.33ZM284.01 36.979V36.079C283.416 36.079 282.839 36.1936 282.353 36.5032L282.836 37.2625L283.319 38.0218C283.427 37.9534 283.633 37.879 284.01 37.879V36.979ZM282.836 37.2625L282.342 36.5101C281.829 36.847 281.504 37.3681 281.504 38.0185H282.404H283.304C283.304 38.0088 283.305 38.0087 283.303 38.0156C283.302 38.0188 283.301 38.0229 283.299 38.0274C283.298 38.0319 283.295 38.0361 283.293 38.0398C283.289 38.0476 283.286 38.0495 283.29 38.0459C283.294 38.0418 283.306 38.0308 283.33 38.0149L282.836 37.2625ZM282.404 38.0185H281.504C281.504 38.3145 281.563 38.6392 281.745 38.9357L282.512 38.464L283.278 37.9923C283.297 38.0226 283.304 38.0456 283.306 38.0528C283.307 38.059 283.304 38.0493 283.304 38.0185H282.404ZM282.512 38.464L281.772 38.9763C281.984 39.2824 282.283 39.4686 282.569 39.5831L282.903 38.7475L283.238 37.9119C283.203 37.898 283.193 37.8898 283.198 37.8937C283.205 37.8983 283.227 37.9162 283.252 37.9517L282.512 38.464ZM282.903 38.7475L282.619 39.6013C282.827 39.6708 283.025 39.7285 283.21 39.7721L283.416 38.896L283.623 38.0199C283.502 37.9915 283.358 37.9502 283.188 37.8937L282.903 38.7475ZM283.416 38.896L283.268 39.7838C283.454 39.8146 283.711 39.8482 284.03 39.8847L284.132 38.9905L284.234 38.0963C283.923 38.0608 283.703 38.0314 283.564 38.0082L283.416 38.896ZM284.132 38.9905L284.02 39.8835C284.37 39.9273 284.653 39.9698 284.873 40.0105L285.036 39.1255L285.2 38.2405C284.934 38.1912 284.614 38.1437 284.244 38.0974L284.132 38.9905ZM285.036 39.1255L284.873 40.0105C285.056 40.0445 285.256 40.1007 285.473 40.183L285.792 39.3415L286.112 38.5C285.807 38.3843 285.503 38.2965 285.2 38.2405L285.036 39.1255ZM285.792 39.3415L285.473 40.183C285.668 40.2567 285.77 40.3252 285.818 40.3674L286.413 39.6925L287.009 39.0176C286.751 38.7898 286.439 38.6243 286.112 38.5L285.792 39.3415ZM286.413 39.6925L285.837 40.3839C285.876 40.4162 285.929 40.4762 285.981 40.595L286.805 40.2325L287.629 39.87C287.483 39.5388 287.275 39.2388 286.99 39.0011L286.413 39.6925ZM286.805 40.2325L285.987 40.6075C286.02 40.6803 286.053 40.803 286.053 41.002H286.953H287.853C287.853 40.607 287.788 40.2167 287.623 39.8575L286.805 40.2325ZM286.953 41.002H286.053C286.053 41.3291 285.939 41.5647 285.635 41.7808L286.157 42.514L286.679 43.2472C287.437 42.7073 287.853 41.9349 287.853 41.002H286.953ZM286.157 42.514L285.629 41.7851C285.291 42.0297 284.834 42.181 284.199 42.181V43.081V43.981C285.13 43.981 285.979 43.7543 286.685 43.2429L286.157 42.514ZM284.199 43.081V42.181C283.424 42.181 282.896 42.0051 282.535 41.7372L281.999 42.46L281.463 43.1828C282.218 43.7429 283.157 43.981 284.199 43.981V43.081ZM281.999 42.46L282.541 41.7414C282.232 41.5089 282.068 41.2041 282.062 40.721L281.162 40.732L280.262 40.743C280.274 41.7359 280.667 42.5831 281.457 43.1786L281.999 42.46Z" fill="url(#paint3_linear_2782_11310)" fill-opacity="0.4" mask="url(#path-7-outside-1_2782_11310)"/>
+<path d="M254.89 34.8325C255.736 35.7325 256.159 36.88 256.159 38.275C256.159 39.67 255.736 40.822 254.89 41.731C254.053 42.631 252.973 43.081 251.65 43.081C250.327 43.081 249.243 42.631 248.397 41.731C247.56 40.822 247.141 39.67 247.141 38.275C247.141 36.88 247.56 35.7325 248.397 34.8325C249.243 33.9235 250.327 33.469 251.65 33.469C252.973 33.469 254.053 33.9235 254.89 34.8325ZM249.261 35.602C248.649 36.295 248.343 37.186 248.343 38.275C248.343 39.364 248.649 40.2595 249.261 40.9615C249.873 41.6545 250.669 42.001 251.65 42.001C252.631 42.001 253.428 41.6545 254.04 40.9615C254.652 40.2595 254.958 39.364 254.958 38.275C254.958 37.186 254.652 36.295 254.04 35.602C253.428 34.9 252.631 34.549 251.65 34.549C250.669 34.549 249.873 34.9 249.261 35.602ZM260.668 36.115H260.978V37.195H260.425C259.768 37.195 259.295 37.4155 259.007 37.8565C258.728 38.2975 258.589 38.842 258.589 39.49V43H257.482V36.115H258.44L258.589 37.1545C259.012 36.4615 259.705 36.115 260.668 36.115ZM266.969 37.168V33.55H268.076V43H267.118L266.969 41.893C266.393 42.685 265.606 43.081 264.607 43.081C263.635 43.081 262.838 42.7705 262.217 42.1495C261.605 41.5195 261.299 40.6555 261.299 39.5575C261.299 38.5135 261.61 37.6675 262.231 37.0195C262.852 36.3625 263.644 36.034 264.607 36.034C265.705 36.034 266.492 36.412 266.969 37.168ZM264.715 42.0955C265.39 42.0955 265.934 41.8615 266.348 41.3935C266.771 40.9255 266.983 40.3225 266.983 39.5845C266.983 38.8285 266.771 38.212 266.348 37.735C265.934 37.258 265.39 37.0195 264.715 37.0195C264.031 37.0195 263.477 37.258 263.054 37.735C262.64 38.203 262.433 38.8105 262.433 39.5575C262.433 40.3045 262.64 40.9165 263.054 41.3935C263.477 41.8615 264.031 42.0955 264.715 42.0955ZM272.757 43.081C271.731 43.081 270.903 42.757 270.273 42.109C269.652 41.461 269.341 40.6105 269.341 39.5575C269.341 38.5135 269.643 37.6675 270.246 37.0195C270.849 36.3625 271.636 36.034 272.608 36.034C273.589 36.034 274.372 36.3265 274.957 36.9115C275.542 37.4875 275.848 38.284 275.875 39.301C275.875 39.4 275.866 39.5575 275.848 39.7735H270.502V39.868C270.52 40.534 270.723 41.074 271.11 41.488C271.506 41.893 272.028 42.0955 272.676 42.0955C273.171 42.0955 273.589 41.974 273.931 41.731C274.282 41.479 274.516 41.1325 274.633 40.6915H275.754C275.619 41.3935 275.281 41.9695 274.741 42.4195C274.201 42.8605 273.54 43.081 272.757 43.081ZM270.57 38.8555H274.687C274.633 38.2705 274.422 37.816 274.053 37.492C273.684 37.168 273.207 37.006 272.622 37.006C272.1 37.006 271.641 37.177 271.245 37.519C270.849 37.861 270.624 38.3065 270.57 38.8555ZM280.324 36.115H280.635V37.195H280.081C279.424 37.195 278.952 37.4155 278.664 37.8565C278.385 38.2975 278.245 38.842 278.245 39.49V43H277.138V36.115H278.097L278.245 37.1545C278.668 36.4615 279.361 36.115 280.324 36.115ZM281.166 40.732H282.3C282.318 41.146 282.498 41.4835 282.84 41.7445C283.182 42.0055 283.636 42.136 284.203 42.136C284.689 42.136 285.085 42.0415 285.391 41.8525C285.706 41.6545 285.864 41.398 285.864 41.083C285.864 40.912 285.828 40.768 285.756 40.651C285.693 40.534 285.621 40.444 285.54 40.381C285.468 40.309 285.333 40.2505 285.135 40.2055C284.937 40.1515 284.784 40.12 284.676 40.111C284.568 40.093 284.37 40.066 284.082 40.03C283.641 39.976 283.276 39.9175 282.988 39.8545C282.7 39.7825 282.417 39.679 282.138 39.544C281.859 39.4 281.652 39.211 281.517 38.977C281.382 38.734 281.314 38.4415 281.314 38.0995C281.314 37.4785 281.566 36.979 282.07 36.601C282.583 36.214 283.231 36.025 284.014 36.034C284.824 36.043 285.481 36.2365 285.985 36.6145C286.489 36.9835 286.768 37.5145 286.822 38.2075H285.688C285.643 37.8475 285.468 37.555 285.162 37.33C284.865 37.096 284.482 36.979 284.014 36.979C283.528 36.979 283.137 37.0735 282.84 37.2625C282.552 37.4515 282.408 37.7035 282.408 38.0185C282.408 38.1985 282.444 38.347 282.516 38.464C282.597 38.581 282.727 38.6755 282.907 38.7475C283.096 38.8105 283.267 38.86 283.42 38.896C283.582 38.923 283.821 38.9545 284.136 38.9905C284.496 39.0355 284.797 39.0805 285.04 39.1255C285.283 39.1705 285.535 39.2425 285.796 39.3415C286.057 39.4405 286.264 39.5575 286.417 39.6925C286.579 39.8275 286.71 40.0075 286.809 40.2325C286.908 40.4485 286.957 40.705 286.957 41.002C286.957 41.632 286.692 42.136 286.161 42.514C285.639 42.892 284.986 43.081 284.203 43.081C283.294 43.081 282.561 42.874 282.003 42.46C281.454 42.046 281.175 41.47 281.166 40.732Z" fill="#818186"/>
 <g opacity="0.8">
-<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="10.4625" fill="#1D1D21" stroke="#2D2D31" stroke-width="0.675"/>
-<mask id="mask0_2782_11310" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="57" width="537" height="165">
-<rect x="239.337" y="57.3375" width="536.325" height="164.325" rx="9.7875" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
+<rect x="239.337" y="49.3375" width="536.325" height="164.325" rx="10.4625" fill="#1D1D21" stroke="#2D2D31" stroke-width="0.675"/>
+<mask id="mask0_2877_60257" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="49" width="537" height="165">
+<rect x="239.337" y="49.3375" width="536.325" height="164.325" rx="9.7875" fill="white" stroke="#EDEDF0" stroke-width="0.675"/>
 </mask>
-<g mask="url(#mask0_2782_11310)">
-<mask id="mask1_2782_11310" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="56" width="537" height="231">
-<rect x="323.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 323.613 57.2603)" fill="#D9D9D9"/>
-<rect x="239.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 239.699 57.2524)" fill="#D9D9D9"/>
-<rect x="407.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 407.613 57.2603)" fill="#D9D9D9"/>
-<rect x="323.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 323.699 57.2524)" fill="#D9D9D9"/>
-<rect x="491.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 491.613 57.2603)" fill="#D9D9D9"/>
-<rect x="407.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 407.699 57.2524)" fill="#D9D9D9"/>
-<rect x="575.613" y="57.2603" width="229.5" height="0.675" transform="rotate(90.0053 575.613 57.2603)" fill="#D9D9D9"/>
-<rect x="491.699" y="57.2524" width="229.5" height="0.675" transform="rotate(90.0053 491.699 57.2524)" fill="#D9D9D9"/>
-<rect x="659.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 659.613 57.2598)" fill="#D9D9D9"/>
-<rect x="575.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 575.699 57.252)" fill="#D9D9D9"/>
-<rect x="743.613" y="57.2598" width="229.5" height="0.675" transform="rotate(90.0053 743.613 57.2598)" fill="#D9D9D9"/>
-<rect x="659.699" y="57.252" width="229.5" height="0.675" transform="rotate(90.0053 659.699 57.252)" fill="#D9D9D9"/>
-<rect x="239" y="83.6851" width="537" height="0.675" fill="#D9D9D9"/>
-<rect x="239" y="111.36" width="537" height="0.675" fill="#D9D9D9"/>
-<rect x="239" y="139.035" width="537" height="0.675" fill="#D9D9D9"/>
-<rect x="239" y="166.71" width="537" height="0.675" fill="#D9D9D9"/>
+<g mask="url(#mask0_2877_60257)">
+<mask id="mask1_2877_60257" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="239" y="48" width="537" height="231">
+<rect x="323.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 323.613 49.2603)" fill="#D9D9D9"/>
+<rect x="239.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 239.699 49.2524)" fill="#D9D9D9"/>
+<rect x="407.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 407.613 49.2603)" fill="#D9D9D9"/>
+<rect x="323.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 323.699 49.2524)" fill="#D9D9D9"/>
+<rect x="491.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 491.613 49.2603)" fill="#D9D9D9"/>
+<rect x="407.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 407.699 49.2524)" fill="#D9D9D9"/>
+<rect x="575.613" y="49.2603" width="229.5" height="0.675" transform="rotate(90.0053 575.613 49.2603)" fill="#D9D9D9"/>
+<rect x="491.699" y="49.2524" width="229.5" height="0.675" transform="rotate(90.0053 491.699 49.2524)" fill="#D9D9D9"/>
+<rect x="659.613" y="49.2598" width="229.5" height="0.675" transform="rotate(90.0053 659.613 49.2598)" fill="#D9D9D9"/>
+<rect x="575.699" y="49.252" width="229.5" height="0.675" transform="rotate(90.0053 575.699 49.252)" fill="#D9D9D9"/>
+<rect x="743.613" y="49.2598" width="229.5" height="0.675" transform="rotate(90.0053 743.613 49.2598)" fill="#D9D9D9"/>
+<rect x="659.699" y="49.252" width="229.5" height="0.675" transform="rotate(90.0053 659.699 49.252)" fill="#D9D9D9"/>
+<rect x="239" y="75.6851" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="103.36" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="131.035" width="537" height="0.675" fill="#D9D9D9"/>
+<rect x="239" y="158.71" width="537" height="0.675" fill="#D9D9D9"/>
 </mask>
-<g mask="url(#mask1_2782_11310)">
-<rect x="239" y="57" width="537" height="165" fill="url(#paint4_radial_2782_11310)"/>
+<g mask="url(#mask1_2877_60257)">
+<rect x="239" y="49" width="537" height="165" fill="url(#paint2_radial_2877_60257)"/>
 </g>
 </g>
 </g>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M250.976 66.5929C251.603 66.3395 252.287 66.2002 253.002 66.2002C255.984 66.2002 258.402 68.6179 258.402 71.6002C258.402 71.9316 258.133 72.2002 257.802 72.2002C257.47 72.2002 257.202 71.9316 257.202 71.6002C257.202 69.2806 255.321 67.4002 253.002 67.4002C252.443 67.4002 251.912 67.5087 251.427 67.7053C251.12 67.8296 250.77 67.6814 250.645 67.3742C250.521 67.0671 250.669 66.7173 250.976 66.5929ZM249.799 67.9754C250.047 68.1946 250.071 68.5738 249.851 68.8222C249.198 69.563 248.802 70.5346 248.802 71.6002C248.802 71.9316 248.533 72.2002 248.202 72.2002C247.87 72.2002 247.602 71.9316 247.602 71.6002C247.602 70.2311 248.112 68.9797 248.952 68.0282C249.171 67.7797 249.55 67.7561 249.799 67.9754Z" fill="#414146"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M250.002 71.6002C250.002 69.9433 251.345 68.6002 253.002 68.6002C254.658 68.6002 256.002 69.9433 256.002 71.6002C256.002 71.9316 255.733 72.2002 255.402 72.2002C255.07 72.2002 254.802 71.9316 254.802 71.6002C254.802 70.6061 253.996 69.8002 253.002 69.8002C252.007 69.8002 251.202 70.6061 251.202 71.6002C251.202 72.6065 250.995 73.566 250.621 74.4375C250.49 74.742 250.137 74.8829 249.833 74.7522C249.528 74.6215 249.387 74.2687 249.518 73.9642C249.829 73.2396 250.002 72.4408 250.002 71.6002ZM255.354 72.8076C255.682 72.8595 255.905 73.1669 255.853 73.4942C255.774 73.9922 255.664 74.4801 255.526 74.9559C255.433 75.2741 255.1 75.457 254.782 75.3645C254.464 75.272 254.281 74.9391 254.374 74.6209C254.498 74.1931 254.597 73.7543 254.668 73.3062C254.72 72.9789 255.027 72.7557 255.354 72.8076Z" fill="#414146"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M253.002 71.0002C253.333 71.0002 253.602 71.2688 253.602 71.6002C253.602 72.942 253.326 74.2209 252.828 75.3823C252.697 75.6869 252.344 75.8278 252.04 75.6971C251.735 75.5665 251.594 75.2137 251.725 74.9092C252.16 73.8945 252.402 72.7763 252.402 71.6002C252.402 71.2688 252.67 71.0002 253.002 71.0002Z" fill="#414146"/>
-<path opacity="0.5" d="M262.938 67V75H261.969V67H262.938ZM267.239 75H264.77V67H267.348C268.124 67 268.788 67.1602 269.34 67.4805C269.892 67.7982 270.315 68.2552 270.61 68.8516C270.904 69.4453 271.051 70.1562 271.051 70.9844C271.051 71.8177 270.903 72.5352 270.606 73.1367C270.309 73.7357 269.877 74.1966 269.309 74.5195C268.741 74.8398 268.051 75 267.239 75ZM265.739 74.1406H267.176C267.838 74.1406 268.386 74.013 268.821 73.7578C269.256 73.5026 269.58 73.1393 269.793 72.668C270.007 72.1966 270.114 71.6354 270.114 70.9844C270.114 70.3385 270.008 69.7826 269.797 69.3164C269.586 68.8477 269.271 68.4883 268.852 68.2383C268.433 67.9857 267.911 67.8594 267.286 67.8594H265.739V74.1406Z" fill="#818186"/>
-<path d="M341 68.4995H340.998V68.7495C340.998 69.1637 340.662 69.4995 340.248 69.4995C339.834 69.4993 339.498 69.1636 339.498 68.7495V68.4995H338V73.4995H338.752C339.166 73.4997 339.502 73.8356 339.502 74.2495C339.502 74.6636 339.166 74.9993 338.752 74.9995H335.252C334.838 74.9995 334.502 74.6637 334.502 74.2495C334.502 73.8355 334.838 73.4995 335.252 73.4995H336V68.4995H334.502V68.7495C334.502 69.1636 334.166 69.4993 333.752 69.4995C333.338 69.4995 333.002 69.1637 333.002 68.7495V68.4995H333V66.9995H341V68.4995Z" fill="#414146"/>
-<path opacity="0.5" d="M352.313 67V75H351.375L347.016 68.7187H346.938V75H345.969V67H346.906L351.281 73.2969H351.359V67H352.313ZM355.782 75.1406C355.401 75.1406 355.056 75.069 354.746 74.9258C354.437 74.7799 354.19 74.5703 354.008 74.2969C353.826 74.0208 353.735 73.6875 353.735 73.2969C353.735 72.9531 353.802 72.6745 353.938 72.4609C354.073 72.2448 354.254 72.0755 354.481 71.9531C354.707 71.8307 354.957 71.7396 355.231 71.6797C355.507 71.6172 355.784 71.5677 356.063 71.5313C356.427 71.4844 356.723 71.4492 356.95 71.4258C357.179 71.3997 357.345 71.3568 357.45 71.2969C357.556 71.237 357.61 71.1328 357.61 70.9844V70.9531C357.61 70.5677 357.504 70.2682 357.293 70.0547C357.085 69.8411 356.769 69.7344 356.344 69.7344C355.904 69.7344 355.559 69.8307 355.309 70.0234C355.059 70.2161 354.883 70.4219 354.782 70.6406L353.907 70.3281C354.063 69.9635 354.271 69.6797 354.532 69.4766C354.795 69.2708 355.081 69.1276 355.391 69.0469C355.703 68.9635 356.011 68.9219 356.313 68.9219C356.506 68.9219 356.727 68.9453 356.977 68.9922C357.23 69.0365 357.473 69.1289 357.707 69.2695C357.944 69.4102 358.141 69.6224 358.297 69.9062C358.453 70.1901 358.532 70.5703 358.532 71.0469V75H357.61V74.1875H357.563C357.5 74.3177 357.396 74.457 357.25 74.6055C357.105 74.7539 356.911 74.8802 356.668 74.9844C356.426 75.0885 356.131 75.1406 355.782 75.1406ZM355.922 74.3125C356.287 74.3125 356.594 74.2409 356.844 74.0977C357.097 73.9544 357.287 73.7695 357.414 73.543C357.545 73.3164 357.61 73.0781 357.61 72.8281V71.9844C357.571 72.0312 357.485 72.0742 357.352 72.1133C357.222 72.1497 357.071 72.1823 356.899 72.2109C356.73 72.237 356.564 72.2604 356.403 72.2812C356.244 72.2995 356.115 72.3151 356.016 72.3281C355.776 72.3594 355.552 72.4102 355.344 72.4805C355.138 72.5482 354.972 72.651 354.844 72.7891C354.719 72.9245 354.657 73.1094 354.657 73.3437C354.657 73.6641 354.775 73.9062 355.012 74.0703C355.252 74.2318 355.555 74.3125 355.922 74.3125ZM360.104 75V69H360.995V69.9375H361.073C361.198 69.6172 361.4 69.3685 361.678 69.1914C361.957 69.0117 362.292 68.9219 362.682 68.9219C363.078 68.9219 363.408 69.0117 363.671 69.1914C363.936 69.3685 364.143 69.6172 364.292 69.9375H364.354C364.508 69.6276 364.738 69.3815 365.046 69.1992C365.353 69.0143 365.721 68.9219 366.151 68.9219C366.688 68.9219 367.126 69.0898 367.467 69.4258C367.809 69.7591 367.979 70.2786 367.979 70.9844V75H367.057V70.9844C367.057 70.5417 366.936 70.2253 366.694 70.0352C366.452 69.8451 366.167 69.75 365.839 69.75C365.417 69.75 365.09 69.8776 364.858 70.1328C364.626 70.3854 364.51 70.7057 364.51 71.0937V75H363.573V70.8906C363.573 70.5495 363.462 70.2747 363.241 70.0664C363.02 69.8555 362.734 69.75 362.385 69.75C362.146 69.75 361.922 69.8138 361.714 69.9414C361.508 70.069 361.341 70.2461 361.214 70.4727C361.089 70.6966 361.026 70.9557 361.026 71.25V75H360.104ZM372.07 75.125C371.492 75.125 370.994 74.9974 370.574 74.7422C370.158 74.4844 369.836 74.125 369.609 73.6641C369.385 73.2005 369.274 72.6615 369.274 72.0469C369.274 71.4323 369.385 70.8906 369.609 70.4219C369.836 69.9505 370.151 69.5833 370.555 69.3203C370.961 69.0547 371.435 68.9219 371.977 68.9219C372.289 68.9219 372.598 68.974 372.902 69.0781C373.207 69.1823 373.484 69.3516 373.734 69.5859C373.984 69.8177 374.184 70.125 374.332 70.5078C374.481 70.8906 374.555 71.362 374.555 71.9219V72.3125H369.93V71.5156H373.617C373.617 71.1771 373.55 70.875 373.414 70.6094C373.281 70.3437 373.091 70.1341 372.844 69.9805C372.599 69.8268 372.31 69.75 371.977 69.75C371.609 69.75 371.292 69.8411 371.024 70.0234C370.758 70.2031 370.553 70.4375 370.41 70.7266C370.267 71.0156 370.195 71.3255 370.195 71.6562V72.1875C370.195 72.6406 370.274 73.0247 370.43 73.3398C370.589 73.6523 370.809 73.8906 371.09 74.0547C371.371 74.2161 371.698 74.2969 372.07 74.2969C372.313 74.2969 372.531 74.263 372.727 74.1953C372.925 74.125 373.095 74.0208 373.238 73.8828C373.382 73.7422 373.492 73.5677 373.57 73.3594L374.461 73.6094C374.367 73.9115 374.21 74.1771 373.988 74.4062C373.767 74.6328 373.494 74.8099 373.168 74.9375C372.843 75.0625 372.477 75.125 372.07 75.125Z" fill="#818186"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M418.599 66.2002C418.268 66.2002 417.999 66.4688 417.999 66.8002V67.4002H417.399C416.736 67.4002 416.199 67.9375 416.199 68.6002V74.6002C416.199 75.2629 416.736 75.8002 417.399 75.8002H424.599C425.262 75.8002 425.799 75.2629 425.799 74.6002V68.6002C425.799 67.9375 425.262 67.4002 424.599 67.4002H423.999V66.8002C423.999 66.4688 423.731 66.2002 423.399 66.2002C423.068 66.2002 422.799 66.4688 422.799 66.8002V67.4002H419.199V66.8002C419.199 66.4688 418.931 66.2002 418.599 66.2002ZM418.599 69.2002C418.268 69.2002 417.999 69.4688 417.999 69.8002C417.999 70.1316 418.268 70.4002 418.599 70.4002H423.399C423.731 70.4002 423.999 70.1316 423.999 69.8002C423.999 69.4688 423.731 69.2002 423.399 69.2002H418.599Z" fill="#414146"/>
-<path opacity="0.5" d="M432.109 75.125C431.609 75.125 431.168 74.9987 430.785 74.7461C430.402 74.4909 430.103 74.1315 429.887 73.668C429.671 73.2018 429.563 72.651 429.563 72.0156C429.563 71.3854 429.671 70.8385 429.887 70.375C430.103 69.9115 430.404 69.5534 430.789 69.3008C431.174 69.0482 431.62 68.9219 432.125 68.9219C432.516 68.9219 432.824 68.987 433.051 69.1172C433.28 69.2448 433.454 69.3906 433.574 69.5547C433.697 69.7161 433.792 69.849 433.859 69.9531H433.938V67H434.859V75H433.969V74.0781H433.859C433.792 74.1875 433.695 74.3255 433.57 74.4922C433.445 74.6562 433.267 74.8034 433.035 74.9336C432.803 75.0612 432.495 75.125 432.109 75.125ZM432.234 74.2969C432.604 74.2969 432.917 74.2005 433.172 74.0078C433.427 73.8125 433.621 73.543 433.754 73.1992C433.887 72.8529 433.953 72.4531 433.953 72C433.953 71.5521 433.888 71.1602 433.758 70.8242C433.628 70.4857 433.435 70.2227 433.18 70.0352C432.924 69.8451 432.609 69.75 432.234 69.75C431.844 69.75 431.518 69.8503 431.258 70.0508C431 70.2487 430.806 70.5182 430.676 70.8594C430.548 71.1979 430.484 71.5781 430.484 72C430.484 72.4271 430.549 72.8151 430.68 73.1641C430.813 73.5104 431.008 73.7865 431.266 73.9922C431.526 74.1953 431.849 74.2969 432.234 74.2969ZM438.331 75.1406C437.951 75.1406 437.606 75.069 437.296 74.9258C436.986 74.7799 436.74 74.5703 436.558 74.2969C436.376 74.0208 436.285 73.6875 436.285 73.2969C436.285 72.9531 436.352 72.6745 436.488 72.4609C436.623 72.2448 436.804 72.0755 437.031 71.9531C437.257 71.8307 437.507 71.7396 437.781 71.6797C438.057 71.6172 438.334 71.5677 438.613 71.5313C438.977 71.4844 439.273 71.4492 439.499 71.4258C439.729 71.3997 439.895 71.3568 439.999 71.2969C440.106 71.237 440.16 71.1328 440.16 70.9844V70.9531C440.16 70.5677 440.054 70.2682 439.843 70.0547C439.635 69.8411 439.318 69.7344 438.894 69.7344C438.454 69.7344 438.109 69.8307 437.859 70.0234C437.609 70.2161 437.433 70.4219 437.331 70.6406L436.456 70.3281C436.613 69.9635 436.821 69.6797 437.081 69.4766C437.344 69.2708 437.631 69.1276 437.941 69.0469C438.253 68.9635 438.561 68.9219 438.863 68.9219C439.055 68.9219 439.277 68.9453 439.527 68.9922C439.779 69.0365 440.023 69.1289 440.257 69.2695C440.494 69.4102 440.691 69.6224 440.847 69.9062C441.003 70.1901 441.081 70.5703 441.081 71.0469V75H440.16V74.1875H440.113C440.05 74.3177 439.946 74.457 439.8 74.6055C439.654 74.7539 439.46 74.8802 439.218 74.9844C438.976 75.0885 438.68 75.1406 438.331 75.1406ZM438.472 74.3125C438.837 74.3125 439.144 74.2409 439.394 74.0977C439.647 73.9544 439.837 73.7695 439.964 73.543C440.094 73.3164 440.16 73.0781 440.16 72.8281V71.9844C440.12 72.0312 440.035 72.0742 439.902 72.1133C439.772 72.1497 439.62 72.1823 439.449 72.2109C439.279 72.237 439.114 72.2604 438.953 72.2812C438.794 72.2995 438.665 72.3151 438.566 72.3281C438.326 72.3594 438.102 72.4102 437.894 72.4805C437.688 72.5482 437.522 72.651 437.394 72.7891C437.269 72.9245 437.206 73.1094 437.206 73.3437C437.206 73.6641 437.325 73.9062 437.562 74.0703C437.801 74.2318 438.105 74.3125 438.472 74.3125ZM445.263 69V69.7812H442.154V69H445.263ZM443.06 67.5625H443.982V73.2812C443.982 73.5417 444.02 73.737 444.095 73.8672C444.174 73.9948 444.273 74.0807 444.392 74.125C444.515 74.1667 444.644 74.1875 444.779 74.1875C444.881 74.1875 444.964 74.1823 445.029 74.1719C445.094 74.1589 445.146 74.1484 445.185 74.1406L445.373 74.9687C445.31 74.9922 445.223 75.0156 445.111 75.0391C444.999 75.0651 444.857 75.0781 444.685 75.0781C444.425 75.0781 444.17 75.0221 443.92 74.9102C443.672 74.7982 443.467 74.6276 443.302 74.3984C443.141 74.1693 443.06 73.8802 443.06 73.5312V67.5625ZM448.991 75.125C448.413 75.125 447.914 74.9974 447.495 74.7422C447.079 74.4844 446.757 74.125 446.53 73.6641C446.306 73.2005 446.194 72.6615 446.194 72.0469C446.194 71.4323 446.306 70.8906 446.53 70.4219C446.757 69.9505 447.072 69.5833 447.476 69.3203C447.882 69.0547 448.356 68.9219 448.898 68.9219C449.21 68.9219 449.519 68.974 449.823 69.0781C450.128 69.1823 450.405 69.3516 450.655 69.5859C450.905 69.8177 451.105 70.125 451.253 70.5078C451.401 70.8906 451.476 71.362 451.476 71.9219V72.3125H446.851V71.5156H450.538C450.538 71.1771 450.47 70.875 450.335 70.6094C450.202 70.3437 450.012 70.1341 449.765 69.9805C449.52 69.8268 449.231 69.75 448.898 69.75C448.53 69.75 448.213 69.8411 447.944 70.0234C447.679 70.2031 447.474 70.4375 447.331 70.7266C447.188 71.0156 447.116 71.3255 447.116 71.6562V72.1875C447.116 72.6406 447.194 73.0247 447.351 73.3398C447.51 73.6523 447.73 73.8906 448.011 74.0547C448.292 74.2161 448.619 74.2969 448.991 74.2969C449.233 74.2969 449.452 74.263 449.648 74.1953C449.845 74.125 450.016 74.0208 450.159 73.8828C450.302 73.7422 450.413 73.5677 450.491 73.3594L451.382 73.6094C451.288 73.9115 451.131 74.1771 450.909 74.4062C450.688 74.6328 450.414 74.8099 450.089 74.9375C449.763 75.0625 449.398 75.125 448.991 75.125ZM459.643 71C459.643 71.8437 459.491 72.5729 459.186 73.1875C458.881 73.8021 458.463 74.276 457.932 74.6094C457.401 74.9427 456.794 75.1094 456.112 75.1094C455.429 75.1094 454.823 74.9427 454.291 74.6094C453.76 74.276 453.342 73.8021 453.038 73.1875C452.733 72.5729 452.581 71.8437 452.581 71C452.581 70.1562 452.733 69.4271 453.038 68.8125C453.342 68.1979 453.76 67.724 454.291 67.3906C454.823 67.0573 455.429 66.8906 456.112 66.8906C456.794 66.8906 457.401 67.0573 457.932 67.3906C458.463 67.724 458.881 68.1979 459.186 68.8125C459.491 69.4271 459.643 70.1562 459.643 71ZM458.706 71C458.706 70.3073 458.59 69.7227 458.358 69.2461C458.129 68.7695 457.817 68.4089 457.424 68.1641C457.034 67.9193 456.596 67.7969 456.112 67.7969C455.627 67.7969 455.189 67.9193 454.795 68.1641C454.405 68.4089 454.094 68.7695 453.862 69.2461C453.633 69.7227 453.518 70.3073 453.518 71C453.518 71.6927 453.633 72.2773 453.862 72.7539C454.094 73.2305 454.405 73.5911 454.795 73.8359C455.189 74.0807 455.627 74.2031 456.112 74.2031C456.596 74.2031 457.034 74.0807 457.424 73.8359C457.817 73.5911 458.129 73.2305 458.358 72.7539C458.59 72.2773 458.706 71.6927 458.706 71ZM463.709 69V69.7812H460.474V69H463.709ZM461.443 75V68.1719C461.443 67.8281 461.524 67.5417 461.685 67.3125C461.847 67.0833 462.056 66.9115 462.314 66.7969C462.572 66.6823 462.844 66.625 463.131 66.625C463.357 66.625 463.542 66.6432 463.685 66.6797C463.829 66.7161 463.935 66.75 464.006 66.7812L463.74 67.5781C463.693 67.5625 463.628 67.543 463.545 67.5195C463.464 67.4961 463.357 67.4844 463.224 67.4844C462.92 67.4844 462.7 67.5612 462.564 67.7148C462.431 67.8685 462.365 68.0937 462.365 68.3906V75H461.443ZM465.016 75V67H467.813C468.37 67 468.83 67.0964 469.192 67.2891C469.554 67.4792 469.823 67.7357 470 68.0586C470.177 68.3789 470.266 68.7344 470.266 69.125C470.266 69.4687 470.205 69.7526 470.082 69.9766C469.962 70.2005 469.804 70.3776 469.606 70.5078C469.41 70.638 469.198 70.7344 468.969 70.7969V70.875C469.214 70.8906 469.46 70.9766 469.707 71.1328C469.955 71.2891 470.162 71.513 470.328 71.8047C470.495 72.0964 470.578 72.4531 470.578 72.875C470.578 73.276 470.487 73.6367 470.305 73.957C470.123 74.2773 469.835 74.5312 469.442 74.7187C469.048 74.9062 468.537 75 467.906 75H465.016ZM465.985 74.1406H467.906C468.539 74.1406 468.988 74.0182 469.254 73.7734C469.522 73.526 469.656 73.2266 469.656 72.875C469.656 72.6042 469.587 72.3542 469.449 72.125C469.311 71.8932 469.115 71.7083 468.86 71.5703C468.604 71.4297 468.302 71.3594 467.953 71.3594H465.985V74.1406ZM465.985 70.5156H467.781C468.073 70.5156 468.336 70.4583 468.57 70.3437C468.807 70.2292 468.995 70.0677 469.133 69.8594C469.274 69.651 469.344 69.4062 469.344 69.125C469.344 68.7734 469.222 68.4753 468.977 68.2305C468.732 67.9831 468.344 67.8594 467.813 67.8594H465.985V70.5156ZM471.935 75V69H472.857V75H471.935ZM472.404 68C472.224 68 472.069 67.9388 471.939 67.8164C471.811 67.694 471.748 67.5469 471.748 67.375C471.748 67.2031 471.811 67.056 471.939 66.9336C472.069 66.8112 472.224 66.75 472.404 66.75C472.584 66.75 472.737 66.8112 472.865 66.9336C472.995 67.056 473.06 67.2031 473.06 67.375C473.06 67.5469 472.995 67.694 472.865 67.8164C472.737 67.9388 472.584 68 472.404 68ZM475.107 75.0625C474.915 75.0625 474.749 74.9935 474.611 74.8555C474.473 74.7174 474.404 74.5521 474.404 74.3594C474.404 74.1667 474.473 74.0013 474.611 73.8633C474.749 73.7253 474.915 73.6562 475.107 73.6562C475.3 73.6562 475.465 73.7253 475.603 73.8633C475.741 74.0013 475.81 74.1667 475.81 74.3594C475.81 74.487 475.778 74.6042 475.713 74.7109C475.65 74.8177 475.566 74.9036 475.459 74.9687C475.355 75.0313 475.238 75.0625 475.107 75.0625ZM478.027 75.0625C477.834 75.0625 477.669 74.9935 477.531 74.8555C477.392 74.7174 477.323 74.5521 477.323 74.3594C477.323 74.1667 477.392 74.0013 477.531 73.8633C477.669 73.7253 477.834 73.6562 478.027 73.6562C478.219 73.6562 478.385 73.7253 478.523 73.8633C478.661 74.0013 478.73 74.1667 478.73 74.3594C478.73 74.487 478.697 74.6042 478.632 74.7109C478.57 74.8177 478.485 74.9036 478.378 74.9687C478.274 75.0313 478.157 75.0625 478.027 75.0625ZM480.946 75.0625C480.753 75.0625 480.588 74.9935 480.45 74.8555C480.312 74.7174 480.243 74.5521 480.243 74.3594C480.243 74.1667 480.312 74.0013 480.45 73.8633C480.588 73.7253 480.753 73.6562 480.946 73.6562C481.139 73.6562 481.304 73.7253 481.442 73.8633C481.58 74.0013 481.649 74.1667 481.649 74.3594C481.649 74.487 481.616 74.6042 481.551 74.7109C481.489 74.8177 481.404 74.9036 481.297 74.9687C481.193 75.0313 481.076 75.0625 480.946 75.0625Z" fill="#818186"/>
-<circle cx="501.125" cy="68.125" r="0.625" fill="#414146"/>
-<rect x="503" y="67.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
-<ellipse cx="501.125" cy="71.125" rx="0.625" ry="0.625" fill="#414146"/>
-<rect x="503" y="70.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
-<ellipse cx="501.125" cy="74.125" rx="0.625" ry="0.625" fill="#414146"/>
-<rect x="503" y="73.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
-<path opacity="0.5" d="M519.438 69.5C519.352 69.237 519.238 69.0013 519.098 68.793C518.96 68.582 518.794 68.4023 518.602 68.2539C518.411 68.1055 518.195 67.9922 517.953 67.9141C517.711 67.8359 517.445 67.7969 517.156 67.7969C516.682 67.7969 516.251 67.9193 515.863 68.1641C515.475 68.4089 515.167 68.7695 514.938 69.2461C514.708 69.7227 514.594 70.3073 514.594 71C514.594 71.6927 514.71 72.2773 514.941 72.7539C515.173 73.2305 515.487 73.5911 515.883 73.8359C516.279 74.0807 516.724 74.2031 517.219 74.2031C517.677 74.2031 518.081 74.1055 518.43 73.9102C518.781 73.7122 519.055 73.4336 519.25 73.0742C519.448 72.7122 519.547 72.2865 519.547 71.7969L519.844 71.8594H517.438V71H520.484V71.8594C520.484 72.5182 520.344 73.0911 520.063 73.5781C519.784 74.0651 519.398 74.4427 518.906 74.7109C518.417 74.9766 517.854 75.1094 517.219 75.1094C516.51 75.1094 515.888 74.9427 515.352 74.6094C514.818 74.276 514.401 73.8021 514.102 73.1875C513.805 72.5729 513.656 71.8437 513.656 71C513.656 70.3672 513.741 69.7982 513.91 69.293C514.082 68.7852 514.324 68.3529 514.637 67.9961C514.949 67.6393 515.319 67.3659 515.746 67.1758C516.173 66.9857 516.643 66.8906 517.156 66.8906C517.578 66.8906 517.971 66.9544 518.336 67.082C518.703 67.207 519.03 67.3854 519.316 67.6172C519.605 67.8464 519.846 68.1211 520.039 68.4414C520.232 68.7591 520.365 69.112 520.438 69.5H519.438ZM524.424 75.125C523.846 75.125 523.347 74.9974 522.928 74.7422C522.511 74.4844 522.19 74.125 521.963 73.6641C521.739 73.2005 521.627 72.6615 521.627 72.0469C521.627 71.4323 521.739 70.8906 521.963 70.4219C522.19 69.9505 522.505 69.5833 522.909 69.3203C523.315 69.0547 523.789 68.9219 524.33 68.9219C524.643 68.9219 524.952 68.974 525.256 69.0781C525.561 69.1823 525.838 69.3516 526.088 69.5859C526.338 69.8177 526.537 70.125 526.686 70.5078C526.834 70.8906 526.909 71.362 526.909 71.9219V72.3125H522.284V71.5156H525.971C525.971 71.1771 525.903 70.875 525.768 70.6094C525.635 70.3437 525.445 70.1341 525.198 69.9805C524.953 69.8268 524.664 69.75 524.33 69.75C523.963 69.75 523.646 69.8411 523.377 70.0234C523.112 70.2031 522.907 70.4375 522.764 70.7266C522.621 71.0156 522.549 71.3255 522.549 71.6562V72.1875C522.549 72.6406 522.627 73.0247 522.784 73.3398C522.942 73.6523 523.162 73.8906 523.444 74.0547C523.725 74.2161 524.052 74.2969 524.424 74.2969C524.666 74.2969 524.885 74.263 525.08 74.1953C525.278 74.125 525.449 74.0208 525.592 73.8828C525.735 73.7422 525.846 73.5677 525.924 73.3594L526.815 73.6094C526.721 73.9115 526.564 74.1771 526.342 74.4062C526.121 74.6328 525.847 74.8099 525.522 74.9375C525.196 75.0625 524.83 75.125 524.424 75.125ZM529.123 71.3906V75H528.201V69H529.092V69.9375H529.17C529.31 69.6328 529.524 69.388 529.81 69.2031C530.097 69.0156 530.467 68.9219 530.92 68.9219C531.326 68.9219 531.681 69.0052 531.986 69.1719C532.291 69.3359 532.528 69.5859 532.697 69.9219C532.866 70.2552 532.951 70.6771 532.951 71.1875V75H532.029V71.25C532.029 70.7786 531.907 70.4115 531.662 70.1484C531.417 69.8828 531.081 69.75 530.654 69.75C530.36 69.75 530.097 69.8138 529.865 69.9414C529.636 70.069 529.455 70.2552 529.322 70.5C529.189 70.7448 529.123 71.0417 529.123 71.3906ZM536.791 75.125C536.291 75.125 535.85 74.9987 535.467 74.7461C535.084 74.4909 534.785 74.1315 534.568 73.668C534.352 73.2018 534.244 72.651 534.244 72.0156C534.244 71.3854 534.352 70.8385 534.568 70.375C534.785 69.9115 535.085 69.5534 535.471 69.3008C535.856 69.0482 536.302 68.9219 536.807 68.9219C537.197 68.9219 537.506 68.987 537.733 69.1172C537.962 69.2448 538.136 69.3906 538.256 69.5547C538.378 69.7161 538.473 69.849 538.541 69.9531H538.619V67H539.541V75H538.65V74.0781H538.541C538.473 74.1875 538.377 74.3255 538.252 74.4922C538.127 74.6562 537.949 74.8034 537.717 74.9336C537.485 75.0612 537.177 75.125 536.791 75.125ZM536.916 74.2969C537.286 74.2969 537.598 74.2005 537.854 74.0078C538.109 73.8125 538.303 73.543 538.436 73.1992C538.568 72.8529 538.635 72.4531 538.635 72C538.635 71.5521 538.57 71.1602 538.44 70.8242C538.309 70.4857 538.117 70.2227 537.861 70.0352C537.606 69.8451 537.291 69.75 536.916 69.75C536.525 69.75 536.2 69.8503 535.94 70.0508C535.682 70.2487 535.488 70.5182 535.358 70.8594C535.23 71.1979 535.166 71.5781 535.166 72C535.166 72.4271 535.231 72.8151 535.361 73.1641C535.494 73.5104 535.69 73.7865 535.947 73.9922C536.208 74.1953 536.531 74.2969 536.916 74.2969ZM543.763 75.125C543.185 75.125 542.686 74.9974 542.267 74.7422C541.85 74.4844 541.529 74.125 541.302 73.6641C541.078 73.2005 540.966 72.6615 540.966 72.0469C540.966 71.4323 541.078 70.8906 541.302 70.4219C541.529 69.9505 541.844 69.5833 542.247 69.3203C542.654 69.0547 543.128 68.9219 543.669 68.9219C543.982 68.9219 544.29 68.974 544.595 69.0781C544.9 69.1823 545.177 69.3516 545.427 69.5859C545.677 69.8177 545.876 70.125 546.025 70.5078C546.173 70.8906 546.247 71.362 546.247 71.9219V72.3125H541.622V71.5156H545.31C545.31 71.1771 545.242 70.875 545.107 70.6094C544.974 70.3437 544.784 70.1341 544.537 69.9805C544.292 69.8268 544.003 69.75 543.669 69.75C543.302 69.75 542.984 69.8411 542.716 70.0234C542.451 70.2031 542.246 70.4375 542.103 70.7266C541.96 71.0156 541.888 71.3255 541.888 71.6562V72.1875C541.888 72.6406 541.966 73.0247 542.122 73.3398C542.281 73.6523 542.501 73.8906 542.783 74.0547C543.064 74.2161 543.391 74.2969 543.763 74.2969C544.005 74.2969 544.224 74.263 544.419 74.1953C544.617 74.125 544.788 74.0208 544.931 73.8828C545.074 73.7422 545.185 73.5677 545.263 73.3594L546.154 73.6094C546.06 73.9115 545.902 74.1771 545.681 74.4062C545.46 74.6328 545.186 74.8099 544.861 74.9375C544.535 75.0625 544.169 75.125 543.763 75.125ZM547.54 75V69H548.43V69.9062H548.493C548.602 69.6094 548.8 69.3685 549.087 69.1836C549.373 68.9987 549.696 68.9062 550.055 68.9062C550.123 68.9062 550.208 68.9076 550.309 68.9102C550.411 68.9128 550.488 68.9167 550.54 68.9219V69.8594C550.509 69.8516 550.437 69.8398 550.325 69.8242C550.216 69.806 550.1 69.7969 549.977 69.7969C549.686 69.7969 549.425 69.8581 549.196 69.9805C548.97 70.1003 548.79 70.2669 548.657 70.4805C548.527 70.6914 548.462 70.9323 548.462 71.2031V75H547.54Z" fill="#818186"/>
-<path d="M584.201 68.53L588.999 70.929L593.797 68.53C593.761 67.8998 593.238 67.3999 592.599 67.3999H585.399C584.76 67.3999 584.237 67.8998 584.201 68.53Z" fill="#414146"/>
-<path d="M593.799 69.8706L588.999 72.2707L584.199 69.8707V73.3999C584.199 74.0626 584.736 74.5999 585.399 74.5999H592.599C593.262 74.5999 593.799 74.0626 593.799 73.3999V69.8706Z" fill="#414146"/>
-<path opacity="0.5" d="M600.359 75.125C599.781 75.125 599.283 74.9974 598.863 74.7422C598.447 74.4844 598.125 74.125 597.898 73.6641C597.674 73.2005 597.563 72.6615 597.563 72.0469C597.563 71.4323 597.674 70.8906 597.898 70.4219C598.125 69.9505 598.44 69.5833 598.844 69.3203C599.25 69.0547 599.724 68.9219 600.266 68.9219C600.578 68.9219 600.887 68.974 601.191 69.0781C601.496 69.1823 601.773 69.3516 602.023 69.5859C602.273 69.8177 602.473 70.125 602.621 70.5078C602.77 70.8906 602.844 71.362 602.844 71.9219V72.3125H598.219V71.5156H601.906C601.906 71.1771 601.839 70.875 601.703 70.6094C601.57 70.3437 601.38 70.1341 601.133 69.9805C600.888 69.8268 600.599 69.75 600.266 69.75C599.898 69.75 599.581 69.8411 599.313 70.0234C599.047 70.2031 598.842 70.4375 598.699 70.7266C598.556 71.0156 598.484 71.3255 598.484 71.6562V72.1875C598.484 72.6406 598.563 73.0247 598.719 73.3398C598.878 73.6523 599.098 73.8906 599.379 74.0547C599.66 74.2161 599.987 74.2969 600.359 74.2969C600.602 74.2969 600.82 74.263 601.016 74.1953C601.214 74.125 601.384 74.0208 601.527 73.8828C601.671 73.7422 601.781 73.5677 601.859 73.3594L602.75 73.6094C602.656 73.9115 602.499 74.1771 602.277 74.4062C602.056 74.6328 601.783 74.8099 601.457 74.9375C601.132 75.0625 600.766 75.125 600.359 75.125ZM604.136 75V69H605.027V69.9375H605.105C605.23 69.6172 605.432 69.3685 605.71 69.1914C605.989 69.0117 606.324 68.9219 606.714 68.9219C607.11 68.9219 607.439 69.0117 607.703 69.1914C607.968 69.3685 608.175 69.6172 608.324 69.9375H608.386C608.54 69.6276 608.77 69.3815 609.078 69.1992C609.385 69.0143 609.753 68.9219 610.183 68.9219C610.719 68.9219 611.158 69.0898 611.499 69.4258C611.841 69.7591 612.011 70.2786 612.011 70.9844V75H611.089V70.9844C611.089 70.5417 610.968 70.2253 610.726 70.0352C610.484 69.8451 610.199 69.75 609.87 69.75C609.449 69.75 609.122 69.8776 608.89 70.1328C608.658 70.3854 608.542 70.7057 608.542 71.0937V75H607.605V70.8906C607.605 70.5495 607.494 70.2747 607.273 70.0664C607.051 69.8555 606.766 69.75 606.417 69.75C606.178 69.75 605.954 69.8138 605.745 69.9414C605.54 70.069 605.373 70.2461 605.245 70.4727C605.12 70.6966 605.058 70.9557 605.058 71.25V75H604.136ZM615.352 75.1406C614.972 75.1406 614.627 75.069 614.317 74.9258C614.007 74.7799 613.761 74.5703 613.579 74.2969C613.397 74.0208 613.305 73.6875 613.305 73.2969C613.305 72.9531 613.373 72.6745 613.509 72.4609C613.644 72.2448 613.825 72.0755 614.051 71.9531C614.278 71.8307 614.528 71.7396 614.801 71.6797C615.078 71.6172 615.355 71.5677 615.634 71.5313C615.998 71.4844 616.294 71.4492 616.52 71.4258C616.749 71.3997 616.916 71.3568 617.02 71.2969C617.127 71.237 617.18 71.1328 617.18 70.9844V70.9531C617.18 70.5677 617.075 70.2682 616.864 70.0547C616.656 69.8411 616.339 69.7344 615.915 69.7344C615.475 69.7344 615.13 69.8307 614.88 70.0234C614.63 70.2161 614.454 70.4219 614.352 70.6406L613.477 70.3281C613.634 69.9635 613.842 69.6797 614.102 69.4766C614.365 69.2708 614.652 69.1276 614.962 69.0469C615.274 68.9635 615.581 68.9219 615.884 68.9219C616.076 68.9219 616.298 68.9453 616.548 68.9922C616.8 69.0365 617.044 69.1289 617.278 69.2695C617.515 69.4102 617.712 69.6224 617.868 69.9062C618.024 70.1901 618.102 70.5703 618.102 71.0469V75H617.18V74.1875H617.134C617.071 74.3177 616.967 74.457 616.821 74.6055C616.675 74.7539 616.481 74.8802 616.239 74.9844C615.997 75.0885 615.701 75.1406 615.352 75.1406ZM615.493 74.3125C615.857 74.3125 616.165 74.2409 616.415 74.0977C616.667 73.9544 616.857 73.7695 616.985 73.543C617.115 73.3164 617.18 73.0781 617.18 72.8281V71.9844C617.141 72.0312 617.055 72.0742 616.923 72.1133C616.792 72.1497 616.641 72.1823 616.469 72.2109C616.3 72.237 616.135 72.2604 615.973 72.2812C615.815 72.2995 615.686 72.3151 615.587 72.3281C615.347 72.3594 615.123 72.4102 614.915 72.4805C614.709 72.5482 614.542 72.651 614.415 72.7891C614.29 72.9245 614.227 73.1094 614.227 73.3437C614.227 73.6641 614.346 73.9062 614.583 74.0703C614.822 74.2318 615.126 74.3125 615.493 74.3125ZM619.675 75V69H620.597V75H619.675ZM620.144 68C619.964 68 619.809 67.9388 619.679 67.8164C619.551 67.694 619.487 67.5469 619.487 67.375C619.487 67.2031 619.551 67.056 619.679 66.9336C619.809 66.8112 619.964 66.75 620.144 66.75C620.323 66.75 620.477 66.8112 620.605 66.9336C620.735 67.056 620.8 67.2031 620.8 67.375C620.8 67.5469 620.735 67.694 620.605 67.8164C620.477 67.9388 620.323 68 620.144 68ZM623.097 67V75H622.175V67H623.097ZM625.129 75H624.113L627.051 67H628.051L630.988 75H629.972L627.582 68.2656H627.519L625.129 75ZM625.504 71.875H629.597V72.7344H625.504V71.875ZM634.265 75.125C633.765 75.125 633.323 74.9987 632.941 74.7461C632.558 74.4909 632.258 74.1315 632.042 73.668C631.826 73.2018 631.718 72.651 631.718 72.0156C631.718 71.3854 631.826 70.8385 632.042 70.375C632.258 69.9115 632.559 69.5534 632.944 69.3008C633.33 69.0482 633.775 68.9219 634.28 68.9219C634.671 68.9219 634.98 68.987 635.206 69.1172C635.435 69.2448 635.61 69.3906 635.73 69.5547C635.852 69.7161 635.947 69.849 636.015 69.9531H636.093V67H637.015V75H636.124V74.0781H636.015C635.947 74.1875 635.851 74.3255 635.726 74.4922C635.601 74.6562 635.422 74.8034 635.191 74.9336C634.959 75.0612 634.65 75.125 634.265 75.125ZM634.39 74.2969C634.76 74.2969 635.072 74.2005 635.327 74.0078C635.583 73.8125 635.777 73.543 635.909 73.1992C636.042 72.8529 636.109 72.4531 636.109 72C636.109 71.5521 636.043 71.1602 635.913 70.8242C635.783 70.4857 635.59 70.2227 635.335 70.0352C635.08 69.8451 634.765 69.75 634.39 69.75C633.999 69.75 633.674 69.8503 633.413 70.0508C633.155 70.2487 632.961 70.5182 632.831 70.8594C632.704 71.1979 632.64 71.5781 632.64 72C632.64 72.4271 632.705 72.8151 632.835 73.1641C632.968 73.5104 633.163 73.7865 633.421 73.9922C633.681 74.1953 634.004 74.2969 634.39 74.2969ZM639.393 75.0625C639.2 75.0625 639.035 74.9935 638.897 74.8555C638.759 74.7174 638.69 74.5521 638.69 74.3594C638.69 74.1667 638.759 74.0013 638.897 73.8633C639.035 73.7253 639.2 73.6562 639.393 73.6562C639.586 73.6562 639.751 73.7253 639.889 73.8633C640.027 74.0013 640.096 74.1667 640.096 74.3594C640.096 74.487 640.064 74.6042 639.999 74.7109C639.936 74.8177 639.851 74.9036 639.745 74.9687C639.64 75.0313 639.523 75.0625 639.393 75.0625ZM642.312 75.0625C642.12 75.0625 641.954 74.9935 641.816 74.8555C641.678 74.7174 641.609 74.5521 641.609 74.3594C641.609 74.1667 641.678 74.0013 641.816 73.8633C641.954 73.7253 642.12 73.6562 642.312 73.6562C642.505 73.6562 642.67 73.7253 642.808 73.8633C642.946 74.0013 643.016 74.1667 643.016 74.3594C643.016 74.487 642.983 74.6042 642.918 74.7109C642.855 74.8177 642.771 74.9036 642.664 74.9687C642.56 75.0313 642.443 75.0625 642.312 75.0625ZM645.232 75.0625C645.039 75.0625 644.874 74.9935 644.736 74.8555C644.598 74.7174 644.529 74.5521 644.529 74.3594C644.529 74.1667 644.598 74.0013 644.736 73.8633C644.874 73.7253 645.039 73.6562 645.232 73.6562C645.424 73.6562 645.59 73.7253 645.728 73.8633C645.866 74.0013 645.935 74.1667 645.935 74.3594C645.935 74.487 645.902 74.6042 645.837 74.7109C645.775 74.8177 645.69 74.9036 645.583 74.9687C645.479 75.0313 645.362 75.0625 645.232 75.0625Z" fill="#818186"/>
-<rect y="132" width="1080" height="52" fill="url(#paint5_linear_2782_11310)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.976 58.5929C251.603 58.3395 252.287 58.2002 253.002 58.2002C255.984 58.2002 258.402 60.6179 258.402 63.6002C258.402 63.9316 258.133 64.2002 257.802 64.2002C257.47 64.2002 257.202 63.9316 257.202 63.6002C257.202 61.2806 255.321 59.4002 253.002 59.4002C252.443 59.4002 251.912 59.5087 251.427 59.7053C251.12 59.8296 250.77 59.6814 250.645 59.3742C250.521 59.0671 250.669 58.7173 250.976 58.5929ZM249.799 59.9754C250.047 60.1946 250.071 60.5738 249.851 60.8222C249.198 61.563 248.802 62.5346 248.802 63.6002C248.802 63.9316 248.533 64.2002 248.202 64.2002C247.87 64.2002 247.602 63.9316 247.602 63.6002C247.602 62.2311 248.112 60.9797 248.952 60.0282C249.171 59.7797 249.55 59.7561 249.799 59.9754Z" fill="#414146"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M250.002 63.6002C250.002 61.9433 251.345 60.6002 253.002 60.6002C254.658 60.6002 256.002 61.9433 256.002 63.6002C256.002 63.9316 255.733 64.2002 255.402 64.2002C255.07 64.2002 254.802 63.9316 254.802 63.6002C254.802 62.6061 253.996 61.8002 253.002 61.8002C252.007 61.8002 251.202 62.6061 251.202 63.6002C251.202 64.6065 250.995 65.566 250.621 66.4375C250.49 66.742 250.137 66.8829 249.833 66.7522C249.528 66.6215 249.387 66.2687 249.518 65.9642C249.829 65.2396 250.002 64.4408 250.002 63.6002ZM255.354 64.8076C255.682 64.8595 255.905 65.1669 255.853 65.4942C255.774 65.9922 255.664 66.4801 255.526 66.9559C255.433 67.2741 255.1 67.457 254.782 67.3645C254.464 67.272 254.281 66.9391 254.374 66.6209C254.498 66.1931 254.597 65.7543 254.668 65.3062C254.72 64.9789 255.027 64.7557 255.354 64.8076Z" fill="#414146"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M253.002 63.0002C253.333 63.0002 253.602 63.2688 253.602 63.6002C253.602 64.942 253.326 66.2209 252.828 67.3823C252.697 67.6869 252.344 67.8278 252.04 67.6971C251.735 67.5665 251.594 67.2137 251.725 66.9092C252.16 65.8945 252.402 64.7763 252.402 63.6002C252.402 63.2688 252.67 63.0002 253.002 63.0002Z" fill="#414146"/>
+<path opacity="0.5" d="M262.938 59V67H261.969V59H262.938ZM267.239 67H264.77V59H267.348C268.124 59 268.788 59.1602 269.34 59.4805C269.892 59.7982 270.315 60.2552 270.61 60.8516C270.904 61.4453 271.051 62.1562 271.051 62.9844C271.051 63.8177 270.903 64.5352 270.606 65.1367C270.309 65.7357 269.877 66.1966 269.309 66.5195C268.741 66.8398 268.051 67 267.239 67ZM265.739 66.1406H267.176C267.838 66.1406 268.386 66.013 268.821 65.7578C269.256 65.5026 269.58 65.1393 269.793 64.668C270.007 64.1966 270.114 63.6354 270.114 62.9844C270.114 62.3385 270.008 61.7826 269.797 61.3164C269.586 60.8477 269.271 60.4883 268.852 60.2383C268.433 59.9857 267.911 59.8594 267.286 59.8594H265.739V66.1406Z" fill="#818186"/>
+<path d="M341 60.4995H340.998V60.7495C340.998 61.1637 340.662 61.4995 340.248 61.4995C339.834 61.4993 339.498 61.1636 339.498 60.7495V60.4995H338V65.4995H338.752C339.166 65.4997 339.502 65.8356 339.502 66.2495C339.502 66.6636 339.166 66.9993 338.752 66.9995H335.252C334.838 66.9995 334.502 66.6637 334.502 66.2495C334.502 65.8355 334.838 65.4995 335.252 65.4995H336V60.4995H334.502V60.7495C334.502 61.1636 334.166 61.4993 333.752 61.4995C333.338 61.4995 333.002 61.1637 333.002 60.7495V60.4995H333V58.9995H341V60.4995Z" fill="#414146"/>
+<path opacity="0.5" d="M352.313 59V67H351.375L347.016 60.7187H346.938V67H345.969V59H346.906L351.281 65.2969H351.359V59H352.313ZM355.782 67.1406C355.401 67.1406 355.056 67.069 354.746 66.9258C354.437 66.7799 354.19 66.5703 354.008 66.2969C353.826 66.0208 353.735 65.6875 353.735 65.2969C353.735 64.9531 353.802 64.6745 353.938 64.4609C354.073 64.2448 354.254 64.0755 354.481 63.9531C354.707 63.8307 354.957 63.7396 355.231 63.6797C355.507 63.6172 355.784 63.5677 356.063 63.5313C356.427 63.4844 356.723 63.4492 356.95 63.4258C357.179 63.3997 357.345 63.3568 357.45 63.2969C357.556 63.237 357.61 63.1328 357.61 62.9844V62.9531C357.61 62.5677 357.504 62.2682 357.293 62.0547C357.085 61.8411 356.769 61.7344 356.344 61.7344C355.904 61.7344 355.559 61.8307 355.309 62.0234C355.059 62.2161 354.883 62.4219 354.782 62.6406L353.907 62.3281C354.063 61.9635 354.271 61.6797 354.532 61.4766C354.795 61.2708 355.081 61.1276 355.391 61.0469C355.703 60.9635 356.011 60.9219 356.313 60.9219C356.506 60.9219 356.727 60.9453 356.977 60.9922C357.23 61.0365 357.473 61.1289 357.707 61.2695C357.944 61.4102 358.141 61.6224 358.297 61.9062C358.453 62.1901 358.532 62.5703 358.532 63.0469V67H357.61V66.1875H357.563C357.5 66.3177 357.396 66.457 357.25 66.6055C357.105 66.7539 356.911 66.8802 356.668 66.9844C356.426 67.0885 356.131 67.1406 355.782 67.1406ZM355.922 66.3125C356.287 66.3125 356.594 66.2409 356.844 66.0977C357.097 65.9544 357.287 65.7695 357.414 65.543C357.545 65.3164 357.61 65.0781 357.61 64.8281V63.9844C357.571 64.0312 357.485 64.0742 357.352 64.1133C357.222 64.1497 357.071 64.1823 356.899 64.2109C356.73 64.237 356.564 64.2604 356.403 64.2812C356.244 64.2995 356.115 64.3151 356.016 64.3281C355.776 64.3594 355.552 64.4102 355.344 64.4805C355.138 64.5482 354.972 64.651 354.844 64.7891C354.719 64.9245 354.657 65.1094 354.657 65.3437C354.657 65.6641 354.775 65.9062 355.012 66.0703C355.252 66.2318 355.555 66.3125 355.922 66.3125ZM360.104 67V61H360.995V61.9375H361.073C361.198 61.6172 361.4 61.3685 361.678 61.1914C361.957 61.0117 362.292 60.9219 362.682 60.9219C363.078 60.9219 363.408 61.0117 363.671 61.1914C363.936 61.3685 364.143 61.6172 364.292 61.9375H364.354C364.508 61.6276 364.738 61.3815 365.046 61.1992C365.353 61.0143 365.721 60.9219 366.151 60.9219C366.688 60.9219 367.126 61.0898 367.467 61.4258C367.809 61.7591 367.979 62.2786 367.979 62.9844V67H367.057V62.9844C367.057 62.5417 366.936 62.2253 366.694 62.0352C366.452 61.8451 366.167 61.75 365.839 61.75C365.417 61.75 365.09 61.8776 364.858 62.1328C364.626 62.3854 364.51 62.7057 364.51 63.0937V67H363.573V62.8906C363.573 62.5495 363.462 62.2747 363.241 62.0664C363.02 61.8555 362.734 61.75 362.385 61.75C362.146 61.75 361.922 61.8138 361.714 61.9414C361.508 62.069 361.341 62.2461 361.214 62.4727C361.089 62.6966 361.026 62.9557 361.026 63.25V67H360.104ZM372.07 67.125C371.492 67.125 370.994 66.9974 370.574 66.7422C370.158 66.4844 369.836 66.125 369.609 65.6641C369.385 65.2005 369.274 64.6615 369.274 64.0469C369.274 63.4323 369.385 62.8906 369.609 62.4219C369.836 61.9505 370.151 61.5833 370.555 61.3203C370.961 61.0547 371.435 60.9219 371.977 60.9219C372.289 60.9219 372.598 60.974 372.902 61.0781C373.207 61.1823 373.484 61.3516 373.734 61.5859C373.984 61.8177 374.184 62.125 374.332 62.5078C374.481 62.8906 374.555 63.362 374.555 63.9219V64.3125H369.93V63.5156H373.617C373.617 63.1771 373.55 62.875 373.414 62.6094C373.281 62.3437 373.091 62.1341 372.844 61.9805C372.599 61.8268 372.31 61.75 371.977 61.75C371.609 61.75 371.292 61.8411 371.024 62.0234C370.758 62.2031 370.553 62.4375 370.41 62.7266C370.267 63.0156 370.195 63.3255 370.195 63.6562V64.1875C370.195 64.6406 370.274 65.0247 370.43 65.3398C370.589 65.6523 370.809 65.8906 371.09 66.0547C371.371 66.2161 371.698 66.2969 372.07 66.2969C372.313 66.2969 372.531 66.263 372.727 66.1953C372.925 66.125 373.095 66.0208 373.238 65.8828C373.382 65.7422 373.492 65.5677 373.57 65.3594L374.461 65.6094C374.367 65.9115 374.21 66.1771 373.988 66.4062C373.767 66.6328 373.494 66.8099 373.168 66.9375C372.843 67.0625 372.477 67.125 372.07 67.125Z" fill="#818186"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M418.599 58.2002C418.268 58.2002 417.999 58.4688 417.999 58.8002V59.4002H417.399C416.736 59.4002 416.199 59.9375 416.199 60.6002V66.6002C416.199 67.2629 416.736 67.8002 417.399 67.8002H424.599C425.262 67.8002 425.799 67.2629 425.799 66.6002V60.6002C425.799 59.9375 425.262 59.4002 424.599 59.4002H423.999V58.8002C423.999 58.4688 423.731 58.2002 423.399 58.2002C423.068 58.2002 422.799 58.4688 422.799 58.8002V59.4002H419.199V58.8002C419.199 58.4688 418.931 58.2002 418.599 58.2002ZM418.599 61.2002C418.268 61.2002 417.999 61.4688 417.999 61.8002C417.999 62.1316 418.268 62.4002 418.599 62.4002H423.399C423.731 62.4002 423.999 62.1316 423.999 61.8002C423.999 61.4688 423.731 61.2002 423.399 61.2002H418.599Z" fill="#414146"/>
+<path opacity="0.5" d="M432.109 67.125C431.609 67.125 431.168 66.9987 430.785 66.7461C430.402 66.4909 430.103 66.1315 429.887 65.668C429.671 65.2018 429.563 64.651 429.563 64.0156C429.563 63.3854 429.671 62.8385 429.887 62.375C430.103 61.9115 430.404 61.5534 430.789 61.3008C431.174 61.0482 431.62 60.9219 432.125 60.9219C432.516 60.9219 432.824 60.987 433.051 61.1172C433.28 61.2448 433.454 61.3906 433.574 61.5547C433.697 61.7161 433.792 61.849 433.859 61.9531H433.938V59H434.859V67H433.969V66.0781H433.859C433.792 66.1875 433.695 66.3255 433.57 66.4922C433.445 66.6562 433.267 66.8034 433.035 66.9336C432.803 67.0612 432.495 67.125 432.109 67.125ZM432.234 66.2969C432.604 66.2969 432.917 66.2005 433.172 66.0078C433.427 65.8125 433.621 65.543 433.754 65.1992C433.887 64.8529 433.953 64.4531 433.953 64C433.953 63.5521 433.888 63.1602 433.758 62.8242C433.628 62.4857 433.435 62.2227 433.18 62.0352C432.924 61.8451 432.609 61.75 432.234 61.75C431.844 61.75 431.518 61.8503 431.258 62.0508C431 62.2487 430.806 62.5182 430.676 62.8594C430.548 63.1979 430.484 63.5781 430.484 64C430.484 64.4271 430.549 64.8151 430.68 65.1641C430.813 65.5104 431.008 65.7865 431.266 65.9922C431.526 66.1953 431.849 66.2969 432.234 66.2969ZM438.331 67.1406C437.951 67.1406 437.606 67.069 437.296 66.9258C436.986 66.7799 436.74 66.5703 436.558 66.2969C436.376 66.0208 436.285 65.6875 436.285 65.2969C436.285 64.9531 436.352 64.6745 436.488 64.4609C436.623 64.2448 436.804 64.0755 437.031 63.9531C437.257 63.8307 437.507 63.7396 437.781 63.6797C438.057 63.6172 438.334 63.5677 438.613 63.5313C438.977 63.4844 439.273 63.4492 439.499 63.4258C439.729 63.3997 439.895 63.3568 439.999 63.2969C440.106 63.237 440.16 63.1328 440.16 62.9844V62.9531C440.16 62.5677 440.054 62.2682 439.843 62.0547C439.635 61.8411 439.318 61.7344 438.894 61.7344C438.454 61.7344 438.109 61.8307 437.859 62.0234C437.609 62.2161 437.433 62.4219 437.331 62.6406L436.456 62.3281C436.613 61.9635 436.821 61.6797 437.081 61.4766C437.344 61.2708 437.631 61.1276 437.941 61.0469C438.253 60.9635 438.561 60.9219 438.863 60.9219C439.055 60.9219 439.277 60.9453 439.527 60.9922C439.779 61.0365 440.023 61.1289 440.257 61.2695C440.494 61.4102 440.691 61.6224 440.847 61.9062C441.003 62.1901 441.081 62.5703 441.081 63.0469V67H440.16V66.1875H440.113C440.05 66.3177 439.946 66.457 439.8 66.6055C439.654 66.7539 439.46 66.8802 439.218 66.9844C438.976 67.0885 438.68 67.1406 438.331 67.1406ZM438.472 66.3125C438.837 66.3125 439.144 66.2409 439.394 66.0977C439.647 65.9544 439.837 65.7695 439.964 65.543C440.094 65.3164 440.16 65.0781 440.16 64.8281V63.9844C440.12 64.0312 440.035 64.0742 439.902 64.1133C439.772 64.1497 439.62 64.1823 439.449 64.2109C439.279 64.237 439.114 64.2604 438.953 64.2812C438.794 64.2995 438.665 64.3151 438.566 64.3281C438.326 64.3594 438.102 64.4102 437.894 64.4805C437.688 64.5482 437.522 64.651 437.394 64.7891C437.269 64.9245 437.206 65.1094 437.206 65.3437C437.206 65.6641 437.325 65.9062 437.562 66.0703C437.801 66.2318 438.105 66.3125 438.472 66.3125ZM445.263 61V61.7812H442.154V61H445.263ZM443.06 59.5625H443.982V65.2812C443.982 65.5417 444.02 65.737 444.095 65.8672C444.174 65.9948 444.273 66.0807 444.392 66.125C444.515 66.1667 444.644 66.1875 444.779 66.1875C444.881 66.1875 444.964 66.1823 445.029 66.1719C445.094 66.1589 445.146 66.1484 445.185 66.1406L445.373 66.9687C445.31 66.9922 445.223 67.0156 445.111 67.0391C444.999 67.0651 444.857 67.0781 444.685 67.0781C444.425 67.0781 444.17 67.0221 443.92 66.9102C443.672 66.7982 443.467 66.6276 443.302 66.3984C443.141 66.1693 443.06 65.8802 443.06 65.5312V59.5625ZM448.991 67.125C448.413 67.125 447.914 66.9974 447.495 66.7422C447.079 66.4844 446.757 66.125 446.53 65.6641C446.306 65.2005 446.194 64.6615 446.194 64.0469C446.194 63.4323 446.306 62.8906 446.53 62.4219C446.757 61.9505 447.072 61.5833 447.476 61.3203C447.882 61.0547 448.356 60.9219 448.898 60.9219C449.21 60.9219 449.519 60.974 449.823 61.0781C450.128 61.1823 450.405 61.3516 450.655 61.5859C450.905 61.8177 451.105 62.125 451.253 62.5078C451.401 62.8906 451.476 63.362 451.476 63.9219V64.3125H446.851V63.5156H450.538C450.538 63.1771 450.47 62.875 450.335 62.6094C450.202 62.3437 450.012 62.1341 449.765 61.9805C449.52 61.8268 449.231 61.75 448.898 61.75C448.53 61.75 448.213 61.8411 447.944 62.0234C447.679 62.2031 447.474 62.4375 447.331 62.7266C447.188 63.0156 447.116 63.3255 447.116 63.6562V64.1875C447.116 64.6406 447.194 65.0247 447.351 65.3398C447.51 65.6523 447.73 65.8906 448.011 66.0547C448.292 66.2161 448.619 66.2969 448.991 66.2969C449.233 66.2969 449.452 66.263 449.648 66.1953C449.845 66.125 450.016 66.0208 450.159 65.8828C450.302 65.7422 450.413 65.5677 450.491 65.3594L451.382 65.6094C451.288 65.9115 451.131 66.1771 450.909 66.4062C450.688 66.6328 450.414 66.8099 450.089 66.9375C449.763 67.0625 449.398 67.125 448.991 67.125ZM459.643 63C459.643 63.8437 459.491 64.5729 459.186 65.1875C458.881 65.8021 458.463 66.276 457.932 66.6094C457.401 66.9427 456.794 67.1094 456.112 67.1094C455.429 67.1094 454.823 66.9427 454.291 66.6094C453.76 66.276 453.342 65.8021 453.038 65.1875C452.733 64.5729 452.581 63.8437 452.581 63C452.581 62.1562 452.733 61.4271 453.038 60.8125C453.342 60.1979 453.76 59.724 454.291 59.3906C454.823 59.0573 455.429 58.8906 456.112 58.8906C456.794 58.8906 457.401 59.0573 457.932 59.3906C458.463 59.724 458.881 60.1979 459.186 60.8125C459.491 61.4271 459.643 62.1562 459.643 63ZM458.706 63C458.706 62.3073 458.59 61.7227 458.358 61.2461C458.129 60.7695 457.817 60.4089 457.424 60.1641C457.034 59.9193 456.596 59.7969 456.112 59.7969C455.627 59.7969 455.189 59.9193 454.795 60.1641C454.405 60.4089 454.094 60.7695 453.862 61.2461C453.633 61.7227 453.518 62.3073 453.518 63C453.518 63.6927 453.633 64.2773 453.862 64.7539C454.094 65.2305 454.405 65.5911 454.795 65.8359C455.189 66.0807 455.627 66.2031 456.112 66.2031C456.596 66.2031 457.034 66.0807 457.424 65.8359C457.817 65.5911 458.129 65.2305 458.358 64.7539C458.59 64.2773 458.706 63.6927 458.706 63ZM463.709 61V61.7812H460.474V61H463.709ZM461.443 67V60.1719C461.443 59.8281 461.524 59.5417 461.685 59.3125C461.847 59.0833 462.056 58.9115 462.314 58.7969C462.572 58.6823 462.844 58.625 463.131 58.625C463.357 58.625 463.542 58.6432 463.685 58.6797C463.829 58.7161 463.935 58.75 464.006 58.7812L463.74 59.5781C463.693 59.5625 463.628 59.543 463.545 59.5195C463.464 59.4961 463.357 59.4844 463.224 59.4844C462.92 59.4844 462.7 59.5612 462.564 59.7148C462.431 59.8685 462.365 60.0937 462.365 60.3906V67H461.443ZM465.016 67V59H467.813C468.37 59 468.83 59.0964 469.192 59.2891C469.554 59.4792 469.823 59.7357 470 60.0586C470.177 60.3789 470.266 60.7344 470.266 61.125C470.266 61.4687 470.205 61.7526 470.082 61.9766C469.962 62.2005 469.804 62.3776 469.606 62.5078C469.41 62.638 469.198 62.7344 468.969 62.7969V62.875C469.214 62.8906 469.46 62.9766 469.707 63.1328C469.955 63.2891 470.162 63.513 470.328 63.8047C470.495 64.0964 470.578 64.4531 470.578 64.875C470.578 65.276 470.487 65.6367 470.305 65.957C470.123 66.2773 469.835 66.5312 469.442 66.7187C469.048 66.9062 468.537 67 467.906 67H465.016ZM465.985 66.1406H467.906C468.539 66.1406 468.988 66.0182 469.254 65.7734C469.522 65.526 469.656 65.2266 469.656 64.875C469.656 64.6042 469.587 64.3542 469.449 64.125C469.311 63.8932 469.115 63.7083 468.86 63.5703C468.604 63.4297 468.302 63.3594 467.953 63.3594H465.985V66.1406ZM465.985 62.5156H467.781C468.073 62.5156 468.336 62.4583 468.57 62.3437C468.807 62.2292 468.995 62.0677 469.133 61.8594C469.274 61.651 469.344 61.4062 469.344 61.125C469.344 60.7734 469.222 60.4753 468.977 60.2305C468.732 59.9831 468.344 59.8594 467.813 59.8594H465.985V62.5156ZM471.935 67V61H472.857V67H471.935ZM472.404 60C472.224 60 472.069 59.9388 471.939 59.8164C471.811 59.694 471.748 59.5469 471.748 59.375C471.748 59.2031 471.811 59.056 471.939 58.9336C472.069 58.8112 472.224 58.75 472.404 58.75C472.584 58.75 472.737 58.8112 472.865 58.9336C472.995 59.056 473.06 59.2031 473.06 59.375C473.06 59.5469 472.995 59.694 472.865 59.8164C472.737 59.9388 472.584 60 472.404 60ZM475.107 67.0625C474.915 67.0625 474.749 66.9935 474.611 66.8555C474.473 66.7174 474.404 66.5521 474.404 66.3594C474.404 66.1667 474.473 66.0013 474.611 65.8633C474.749 65.7253 474.915 65.6562 475.107 65.6562C475.3 65.6562 475.465 65.7253 475.603 65.8633C475.741 66.0013 475.81 66.1667 475.81 66.3594C475.81 66.487 475.778 66.6042 475.713 66.7109C475.65 66.8177 475.566 66.9036 475.459 66.9687C475.355 67.0313 475.238 67.0625 475.107 67.0625ZM478.027 67.0625C477.834 67.0625 477.669 66.9935 477.531 66.8555C477.392 66.7174 477.323 66.5521 477.323 66.3594C477.323 66.1667 477.392 66.0013 477.531 65.8633C477.669 65.7253 477.834 65.6562 478.027 65.6562C478.219 65.6562 478.385 65.7253 478.523 65.8633C478.661 66.0013 478.73 66.1667 478.73 66.3594C478.73 66.487 478.697 66.6042 478.632 66.7109C478.57 66.8177 478.485 66.9036 478.378 66.9687C478.274 67.0313 478.157 67.0625 478.027 67.0625ZM480.946 67.0625C480.753 67.0625 480.588 66.9935 480.45 66.8555C480.312 66.7174 480.243 66.5521 480.243 66.3594C480.243 66.1667 480.312 66.0013 480.45 65.8633C480.588 65.7253 480.753 65.6562 480.946 65.6562C481.139 65.6562 481.304 65.7253 481.442 65.8633C481.58 66.0013 481.649 66.1667 481.649 66.3594C481.649 66.487 481.616 66.6042 481.551 66.7109C481.489 66.8177 481.404 66.9036 481.297 66.9687C481.193 67.0313 481.076 67.0625 480.946 67.0625Z" fill="#818186"/>
+<circle cx="501.125" cy="60.125" r="0.625" fill="#414146"/>
+<rect x="503" y="59.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
+<ellipse cx="501.125" cy="63.125" rx="0.625" ry="0.625" fill="#414146"/>
+<rect x="503" y="62.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
+<ellipse cx="501.125" cy="66.125" rx="0.625" ry="0.625" fill="#414146"/>
+<rect x="503" y="65.5" width="6.5" height="1.25" rx="0.625" fill="#414146"/>
+<path opacity="0.5" d="M519.438 61.5C519.352 61.237 519.238 61.0013 519.098 60.793C518.96 60.582 518.794 60.4023 518.602 60.2539C518.411 60.1055 518.195 59.9922 517.953 59.9141C517.711 59.8359 517.445 59.7969 517.156 59.7969C516.682 59.7969 516.251 59.9193 515.863 60.1641C515.475 60.4089 515.167 60.7695 514.938 61.2461C514.708 61.7227 514.594 62.3073 514.594 63C514.594 63.6927 514.71 64.2773 514.941 64.7539C515.173 65.2305 515.487 65.5911 515.883 65.8359C516.279 66.0807 516.724 66.2031 517.219 66.2031C517.677 66.2031 518.081 66.1055 518.43 65.9102C518.781 65.7122 519.055 65.4336 519.25 65.0742C519.448 64.7122 519.547 64.2865 519.547 63.7969L519.844 63.8594H517.438V63H520.484V63.8594C520.484 64.5182 520.344 65.0911 520.063 65.5781C519.784 66.0651 519.398 66.4427 518.906 66.7109C518.417 66.9766 517.854 67.1094 517.219 67.1094C516.51 67.1094 515.888 66.9427 515.352 66.6094C514.818 66.276 514.401 65.8021 514.102 65.1875C513.805 64.5729 513.656 63.8437 513.656 63C513.656 62.3672 513.741 61.7982 513.91 61.293C514.082 60.7852 514.324 60.3529 514.637 59.9961C514.949 59.6393 515.319 59.3659 515.746 59.1758C516.173 58.9857 516.643 58.8906 517.156 58.8906C517.578 58.8906 517.971 58.9544 518.336 59.082C518.703 59.207 519.03 59.3854 519.316 59.6172C519.605 59.8464 519.846 60.1211 520.039 60.4414C520.232 60.7591 520.365 61.112 520.438 61.5H519.438ZM524.424 67.125C523.846 67.125 523.347 66.9974 522.928 66.7422C522.511 66.4844 522.19 66.125 521.963 65.6641C521.739 65.2005 521.627 64.6615 521.627 64.0469C521.627 63.4323 521.739 62.8906 521.963 62.4219C522.19 61.9505 522.505 61.5833 522.909 61.3203C523.315 61.0547 523.789 60.9219 524.33 60.9219C524.643 60.9219 524.952 60.974 525.256 61.0781C525.561 61.1823 525.838 61.3516 526.088 61.5859C526.338 61.8177 526.537 62.125 526.686 62.5078C526.834 62.8906 526.909 63.362 526.909 63.9219V64.3125H522.284V63.5156H525.971C525.971 63.1771 525.903 62.875 525.768 62.6094C525.635 62.3437 525.445 62.1341 525.198 61.9805C524.953 61.8268 524.664 61.75 524.33 61.75C523.963 61.75 523.646 61.8411 523.377 62.0234C523.112 62.2031 522.907 62.4375 522.764 62.7266C522.621 63.0156 522.549 63.3255 522.549 63.6562V64.1875C522.549 64.6406 522.627 65.0247 522.784 65.3398C522.942 65.6523 523.162 65.8906 523.444 66.0547C523.725 66.2161 524.052 66.2969 524.424 66.2969C524.666 66.2969 524.885 66.263 525.08 66.1953C525.278 66.125 525.449 66.0208 525.592 65.8828C525.735 65.7422 525.846 65.5677 525.924 65.3594L526.815 65.6094C526.721 65.9115 526.564 66.1771 526.342 66.4062C526.121 66.6328 525.847 66.8099 525.522 66.9375C525.196 67.0625 524.83 67.125 524.424 67.125ZM529.123 63.3906V67H528.201V61H529.092V61.9375H529.17C529.31 61.6328 529.524 61.388 529.81 61.2031C530.097 61.0156 530.467 60.9219 530.92 60.9219C531.326 60.9219 531.681 61.0052 531.986 61.1719C532.291 61.3359 532.528 61.5859 532.697 61.9219C532.866 62.2552 532.951 62.6771 532.951 63.1875V67H532.029V63.25C532.029 62.7786 531.907 62.4115 531.662 62.1484C531.417 61.8828 531.081 61.75 530.654 61.75C530.36 61.75 530.097 61.8138 529.865 61.9414C529.636 62.069 529.455 62.2552 529.322 62.5C529.189 62.7448 529.123 63.0417 529.123 63.3906ZM536.791 67.125C536.291 67.125 535.85 66.9987 535.467 66.7461C535.084 66.4909 534.785 66.1315 534.568 65.668C534.352 65.2018 534.244 64.651 534.244 64.0156C534.244 63.3854 534.352 62.8385 534.568 62.375C534.785 61.9115 535.085 61.5534 535.471 61.3008C535.856 61.0482 536.302 60.9219 536.807 60.9219C537.197 60.9219 537.506 60.987 537.733 61.1172C537.962 61.2448 538.136 61.3906 538.256 61.5547C538.378 61.7161 538.473 61.849 538.541 61.9531H538.619V59H539.541V67H538.65V66.0781H538.541C538.473 66.1875 538.377 66.3255 538.252 66.4922C538.127 66.6562 537.949 66.8034 537.717 66.9336C537.485 67.0612 537.177 67.125 536.791 67.125ZM536.916 66.2969C537.286 66.2969 537.598 66.2005 537.854 66.0078C538.109 65.8125 538.303 65.543 538.436 65.1992C538.568 64.8529 538.635 64.4531 538.635 64C538.635 63.5521 538.57 63.1602 538.44 62.8242C538.309 62.4857 538.117 62.2227 537.861 62.0352C537.606 61.8451 537.291 61.75 536.916 61.75C536.525 61.75 536.2 61.8503 535.94 62.0508C535.682 62.2487 535.488 62.5182 535.358 62.8594C535.23 63.1979 535.166 63.5781 535.166 64C535.166 64.4271 535.231 64.8151 535.361 65.1641C535.494 65.5104 535.69 65.7865 535.947 65.9922C536.208 66.1953 536.531 66.2969 536.916 66.2969ZM543.763 67.125C543.185 67.125 542.686 66.9974 542.267 66.7422C541.85 66.4844 541.529 66.125 541.302 65.6641C541.078 65.2005 540.966 64.6615 540.966 64.0469C540.966 63.4323 541.078 62.8906 541.302 62.4219C541.529 61.9505 541.844 61.5833 542.247 61.3203C542.654 61.0547 543.128 60.9219 543.669 60.9219C543.982 60.9219 544.29 60.974 544.595 61.0781C544.9 61.1823 545.177 61.3516 545.427 61.5859C545.677 61.8177 545.876 62.125 546.025 62.5078C546.173 62.8906 546.247 63.362 546.247 63.9219V64.3125H541.622V63.5156H545.31C545.31 63.1771 545.242 62.875 545.107 62.6094C544.974 62.3437 544.784 62.1341 544.537 61.9805C544.292 61.8268 544.003 61.75 543.669 61.75C543.302 61.75 542.984 61.8411 542.716 62.0234C542.451 62.2031 542.246 62.4375 542.103 62.7266C541.96 63.0156 541.888 63.3255 541.888 63.6562V64.1875C541.888 64.6406 541.966 65.0247 542.122 65.3398C542.281 65.6523 542.501 65.8906 542.783 66.0547C543.064 66.2161 543.391 66.2969 543.763 66.2969C544.005 66.2969 544.224 66.263 544.419 66.1953C544.617 66.125 544.788 66.0208 544.931 65.8828C545.074 65.7422 545.185 65.5677 545.263 65.3594L546.154 65.6094C546.06 65.9115 545.902 66.1771 545.681 66.4062C545.46 66.6328 545.186 66.8099 544.861 66.9375C544.535 67.0625 544.169 67.125 543.763 67.125ZM547.54 67V61H548.43V61.9062H548.493C548.602 61.6094 548.8 61.3685 549.087 61.1836C549.373 60.9987 549.696 60.9062 550.055 60.9062C550.123 60.9062 550.208 60.9076 550.309 60.9102C550.411 60.9128 550.488 60.9167 550.54 60.9219V61.8594C550.509 61.8516 550.437 61.8398 550.325 61.8242C550.216 61.806 550.1 61.7969 549.977 61.7969C549.686 61.7969 549.425 61.8581 549.196 61.9805C548.97 62.1003 548.79 62.2669 548.657 62.4805C548.527 62.6914 548.462 62.9323 548.462 63.2031V67H547.54Z" fill="#818186"/>
+<path d="M584.201 60.53L588.999 62.929L593.797 60.53C593.761 59.8998 593.238 59.3999 592.599 59.3999H585.399C584.76 59.3999 584.237 59.8998 584.201 60.53Z" fill="#414146"/>
+<path d="M593.799 61.8706L588.999 64.2707L584.199 61.8707V65.3999C584.199 66.0626 584.736 66.5999 585.399 66.5999H592.599C593.262 66.5999 593.799 66.0626 593.799 65.3999V61.8706Z" fill="#414146"/>
+<path opacity="0.5" d="M600.359 67.125C599.781 67.125 599.283 66.9974 598.863 66.7422C598.447 66.4844 598.125 66.125 597.898 65.6641C597.674 65.2005 597.563 64.6615 597.563 64.0469C597.563 63.4323 597.674 62.8906 597.898 62.4219C598.125 61.9505 598.44 61.5833 598.844 61.3203C599.25 61.0547 599.724 60.9219 600.266 60.9219C600.578 60.9219 600.887 60.974 601.191 61.0781C601.496 61.1823 601.773 61.3516 602.023 61.5859C602.273 61.8177 602.473 62.125 602.621 62.5078C602.77 62.8906 602.844 63.362 602.844 63.9219V64.3125H598.219V63.5156H601.906C601.906 63.1771 601.839 62.875 601.703 62.6094C601.57 62.3437 601.38 62.1341 601.133 61.9805C600.888 61.8268 600.599 61.75 600.266 61.75C599.898 61.75 599.581 61.8411 599.313 62.0234C599.047 62.2031 598.842 62.4375 598.699 62.7266C598.556 63.0156 598.484 63.3255 598.484 63.6562V64.1875C598.484 64.6406 598.563 65.0247 598.719 65.3398C598.878 65.6523 599.098 65.8906 599.379 66.0547C599.66 66.2161 599.987 66.2969 600.359 66.2969C600.602 66.2969 600.82 66.263 601.016 66.1953C601.214 66.125 601.384 66.0208 601.527 65.8828C601.671 65.7422 601.781 65.5677 601.859 65.3594L602.75 65.6094C602.656 65.9115 602.499 66.1771 602.277 66.4062C602.056 66.6328 601.783 66.8099 601.457 66.9375C601.132 67.0625 600.766 67.125 600.359 67.125ZM604.136 67V61H605.027V61.9375H605.105C605.23 61.6172 605.432 61.3685 605.71 61.1914C605.989 61.0117 606.324 60.9219 606.714 60.9219C607.11 60.9219 607.439 61.0117 607.703 61.1914C607.968 61.3685 608.175 61.6172 608.324 61.9375H608.386C608.54 61.6276 608.77 61.3815 609.078 61.1992C609.385 61.0143 609.753 60.9219 610.183 60.9219C610.719 60.9219 611.158 61.0898 611.499 61.4258C611.841 61.7591 612.011 62.2786 612.011 62.9844V67H611.089V62.9844C611.089 62.5417 610.968 62.2253 610.726 62.0352C610.484 61.8451 610.199 61.75 609.87 61.75C609.449 61.75 609.122 61.8776 608.89 62.1328C608.658 62.3854 608.542 62.7057 608.542 63.0937V67H607.605V62.8906C607.605 62.5495 607.494 62.2747 607.273 62.0664C607.051 61.8555 606.766 61.75 606.417 61.75C606.178 61.75 605.954 61.8138 605.745 61.9414C605.54 62.069 605.373 62.2461 605.245 62.4727C605.12 62.6966 605.058 62.9557 605.058 63.25V67H604.136ZM615.352 67.1406C614.972 67.1406 614.627 67.069 614.317 66.9258C614.007 66.7799 613.761 66.5703 613.579 66.2969C613.397 66.0208 613.305 65.6875 613.305 65.2969C613.305 64.9531 613.373 64.6745 613.509 64.4609C613.644 64.2448 613.825 64.0755 614.051 63.9531C614.278 63.8307 614.528 63.7396 614.801 63.6797C615.078 63.6172 615.355 63.5677 615.634 63.5313C615.998 63.4844 616.294 63.4492 616.52 63.4258C616.749 63.3997 616.916 63.3568 617.02 63.2969C617.127 63.237 617.18 63.1328 617.18 62.9844V62.9531C617.18 62.5677 617.075 62.2682 616.864 62.0547C616.656 61.8411 616.339 61.7344 615.915 61.7344C615.475 61.7344 615.13 61.8307 614.88 62.0234C614.63 62.2161 614.454 62.4219 614.352 62.6406L613.477 62.3281C613.634 61.9635 613.842 61.6797 614.102 61.4766C614.365 61.2708 614.652 61.1276 614.962 61.0469C615.274 60.9635 615.581 60.9219 615.884 60.9219C616.076 60.9219 616.298 60.9453 616.548 60.9922C616.8 61.0365 617.044 61.1289 617.278 61.2695C617.515 61.4102 617.712 61.6224 617.868 61.9062C618.024 62.1901 618.102 62.5703 618.102 63.0469V67H617.18V66.1875H617.134C617.071 66.3177 616.967 66.457 616.821 66.6055C616.675 66.7539 616.481 66.8802 616.239 66.9844C615.997 67.0885 615.701 67.1406 615.352 67.1406ZM615.493 66.3125C615.857 66.3125 616.165 66.2409 616.415 66.0977C616.667 65.9544 616.857 65.7695 616.985 65.543C617.115 65.3164 617.18 65.0781 617.18 64.8281V63.9844C617.141 64.0312 617.055 64.0742 616.923 64.1133C616.792 64.1497 616.641 64.1823 616.469 64.2109C616.3 64.237 616.135 64.2604 615.973 64.2812C615.815 64.2995 615.686 64.3151 615.587 64.3281C615.347 64.3594 615.123 64.4102 614.915 64.4805C614.709 64.5482 614.542 64.651 614.415 64.7891C614.29 64.9245 614.227 65.1094 614.227 65.3437C614.227 65.6641 614.346 65.9062 614.583 66.0703C614.822 66.2318 615.126 66.3125 615.493 66.3125ZM619.675 67V61H620.597V67H619.675ZM620.144 60C619.964 60 619.809 59.9388 619.679 59.8164C619.551 59.694 619.487 59.5469 619.487 59.375C619.487 59.2031 619.551 59.056 619.679 58.9336C619.809 58.8112 619.964 58.75 620.144 58.75C620.323 58.75 620.477 58.8112 620.605 58.9336C620.735 59.056 620.8 59.2031 620.8 59.375C620.8 59.5469 620.735 59.694 620.605 59.8164C620.477 59.9388 620.323 60 620.144 60ZM623.097 59V67H622.175V59H623.097ZM625.129 67H624.113L627.051 59H628.051L630.988 67H629.972L627.582 60.2656H627.519L625.129 67ZM625.504 63.875H629.597V64.7344H625.504V63.875ZM634.265 67.125C633.765 67.125 633.323 66.9987 632.941 66.7461C632.558 66.4909 632.258 66.1315 632.042 65.668C631.826 65.2018 631.718 64.651 631.718 64.0156C631.718 63.3854 631.826 62.8385 632.042 62.375C632.258 61.9115 632.559 61.5534 632.944 61.3008C633.33 61.0482 633.775 60.9219 634.28 60.9219C634.671 60.9219 634.98 60.987 635.206 61.1172C635.435 61.2448 635.61 61.3906 635.73 61.5547C635.852 61.7161 635.947 61.849 636.015 61.9531H636.093V59H637.015V67H636.124V66.0781H636.015C635.947 66.1875 635.851 66.3255 635.726 66.4922C635.601 66.6562 635.422 66.8034 635.191 66.9336C634.959 67.0612 634.65 67.125 634.265 67.125ZM634.39 66.2969C634.76 66.2969 635.072 66.2005 635.327 66.0078C635.583 65.8125 635.777 65.543 635.909 65.1992C636.042 64.8529 636.109 64.4531 636.109 64C636.109 63.5521 636.043 63.1602 635.913 62.8242C635.783 62.4857 635.59 62.2227 635.335 62.0352C635.08 61.8451 634.765 61.75 634.39 61.75C633.999 61.75 633.674 61.8503 633.413 62.0508C633.155 62.2487 632.961 62.5182 632.831 62.8594C632.704 63.1979 632.64 63.5781 632.64 64C632.64 64.4271 632.705 64.8151 632.835 65.1641C632.968 65.5104 633.163 65.7865 633.421 65.9922C633.681 66.1953 634.004 66.2969 634.39 66.2969ZM639.393 67.0625C639.2 67.0625 639.035 66.9935 638.897 66.8555C638.759 66.7174 638.69 66.5521 638.69 66.3594C638.69 66.1667 638.759 66.0013 638.897 65.8633C639.035 65.7253 639.2 65.6562 639.393 65.6562C639.586 65.6562 639.751 65.7253 639.889 65.8633C640.027 66.0013 640.096 66.1667 640.096 66.3594C640.096 66.487 640.064 66.6042 639.999 66.7109C639.936 66.8177 639.851 66.9036 639.745 66.9687C639.64 67.0313 639.523 67.0625 639.393 67.0625ZM642.312 67.0625C642.12 67.0625 641.954 66.9935 641.816 66.8555C641.678 66.7174 641.609 66.5521 641.609 66.3594C641.609 66.1667 641.678 66.0013 641.816 65.8633C641.954 65.7253 642.12 65.6562 642.312 65.6562C642.505 65.6562 642.67 65.7253 642.808 65.8633C642.946 66.0013 643.016 66.1667 643.016 66.3594C643.016 66.487 642.983 66.6042 642.918 66.7109C642.855 66.8177 642.771 66.9036 642.664 66.9687C642.56 67.0313 642.443 67.0625 642.312 67.0625ZM645.232 67.0625C645.039 67.0625 644.874 66.9935 644.736 66.8555C644.598 66.7174 644.529 66.5521 644.529 66.3594C644.529 66.1667 644.598 66.0013 644.736 65.8633C644.874 65.7253 645.039 65.6562 645.232 65.6562C645.424 65.6562 645.59 65.7253 645.728 65.8633C645.866 66.0013 645.935 66.1667 645.935 66.3594C645.935 66.487 645.902 66.6042 645.837 66.7109C645.775 66.8177 645.69 66.9036 645.583 66.9687C645.479 67.0313 645.362 67.0625 645.232 67.0625Z" fill="url(#paint3_linear_2877_60257)"/>
+<rect y="132" width="1080" height="52" fill="url(#paint4_linear_2877_60257)"/>
 </g>
 <defs>
-<clipPath id="bgblur_1_2782_11310_clip_path" transform="translate(-226 -12)"><rect x="230" y="16" width="555" height="186" rx="12"/>
-</clipPath><filter id="filter1_f_2782_11310" x="181.312" y="-14.708" width="124.59" height="146.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<clipPath id="bgblur_1_2877_60257_clip_path" transform="translate(-226 -12)"><rect x="230" y="16" width="555" height="186" rx="12"/>
+</clipPath><filter id="filter1_f_2877_60257" x="181.316" y="-14.708" width="124.59" height="146.409" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
 <feFlood flood-opacity="0" result="BackgroundImageFix"/>
 <feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
-<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2782_11310"/>
+<feGaussianBlur stdDeviation="18" result="effect1_foregroundBlur_2877_60257"/>
 </filter>
-<clipPath id="bgblur_2_2782_11310_clip_path" transform="translate(-233.2 -19.2)"><rect x="235.45" y="21.45" width="544.1" height="175.1" rx="10.35"/>
-</clipPath><radialGradient id="paint0_radial_2782_11310" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.096 48.3533) rotate(121.198) scale(55.123 15.9923)">
+<clipPath id="bgblur_2_2877_60257_clip_path" transform="translate(-233.204 -19.2)"><rect x="235.454" y="21.45" width="544.1" height="175.1" rx="10.35"/>
+</clipPath><radialGradient id="paint0_radial_2877_60257" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(250.1 48.3533) rotate(121.198) scale(55.123 15.9923)">
 <stop offset="1" stop-color="#F02E65"/>
 </radialGradient>
-<linearGradient id="paint1_linear_2782_11310" x1="208.997" y1="39.5865" x2="221.1" y2="51.1389" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FD366E"/>
-<stop offset="0.45" stop-color="#FE9567"/>
-<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
-</linearGradient>
-<linearGradient id="paint2_linear_2782_11310" x1="110.649" y1="77.423" x2="195.926" y2="184.679" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint1_linear_2877_60257" x1="110.653" y1="77.423" x2="195.93" y2="184.679" gradientUnits="userSpaceOnUse">
 <stop stop-color="#FD366E"/>
 <stop offset="0.45" stop-color="#FE9567"/>
 <stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
 </linearGradient>
-<linearGradient id="paint3_linear_2782_11310" x1="237.215" y1="34.4117" x2="246.997" y2="42.5566" gradientUnits="userSpaceOnUse">
-<stop stop-color="#FD366E"/>
-<stop offset="0.45" stop-color="#FE9567"/>
-<stop offset="1" stop-color="#FE9567" stop-opacity="0"/>
-</linearGradient>
-<radialGradient id="paint4_radial_2782_11310" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(265.177 71.5771) rotate(31.7066) scale(256.703 334.987)">
-<stop stop-color="#2D2D31"/>
+<radialGradient id="paint2_radial_2877_60257" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(265.177 63.5771) rotate(7.55044) scale(368.518 480.902)">
+<stop stop-color="#29292D"/>
 <stop offset="1" stop-color="#737373" stop-opacity="0"/>
 </radialGradient>
-<linearGradient id="paint5_linear_2782_11310" x1="516.264" y1="132" x2="516.601" y2="175.52" gradientUnits="userSpaceOnUse">
+<linearGradient id="paint3_linear_2877_60257" x1="597" y1="63" x2="647" y2="63" gradientUnits="userSpaceOnUse">
+<stop stop-color="#97979B"/>
+<stop offset="1" stop-color="#97979B" stop-opacity="0"/>
+</linearGradient>
+<linearGradient id="paint4_linear_2877_60257" x1="516.264" y1="132" x2="516.601" y2="175.52" gradientUnits="userSpaceOnUse">
 <stop stop-color="#1D1D21" stop-opacity="0"/>
 <stop offset="1" stop-color="#1D1D21"/>
 </linearGradient>
-<clipPath id="clip0_2782_11310">
+<clipPath id="clip0_2877_60257">
 <path d="M0 8C0 3.58172 3.58172 0 8 0H1007C1011.42 0 1015 3.58172 1015 8V176C1015 180.418 1011.42 184 1007 184H7.99999C3.58171 184 0 180.418 0 176V8Z" fill="white"/>
 </clipPath>
 </defs>

From 956c2cf50e0e192b7e7df4a98fe50165d96c5476 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 11:54:03 +0530
Subject: [PATCH 048/118] lint, fix margin bottom on filters.

---
 src/lib/components/columnSelector.svelte | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index a1f6148633..77510c802e 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -181,13 +181,14 @@
 <svelte:window on:resize={calcMaxHeight} />
 
 {#if $columns?.length || showAnyway}
+    {@const showActions = $columns.length > 1}
     {@const placement = isNewStyle ? 'bottom-start' : 'bottom-end'}
     <Popover let:toggle {placement} padding="none">
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
             <div bind:this={containerRef} class="actions-menu-wrapper" style:max-height={maxHeight}>
                 <ActionMenu.Root>
-                    {#if isNewStyle}
+                    {#if isNewStyle && showActions}
                         <Layout.Stack gap="xs">
                             <ActionMenu.Item.Input
                                 id="columns"
@@ -212,7 +213,10 @@
                         </Layout.Stack>
                     {/if}
 
-                    <Layout.Stack gap="none" direction="column" class="filter-modal-actions-menu">
+                    <Layout.Stack
+                        gap="none"
+                        direction="column"
+                        class="filter-modal-actions-menu {showActions ? 'has-actions' : ''}">
                         {#each filteredColumns as column}
                             {#if !column?.exclude}
                                 <ActionMenu.Item.Button
@@ -249,7 +253,10 @@
             overflow: scroll;
             max-height: 150px;
             padding-bottom: unset;
-            margin-bottom: -0.5rem;
+
+            &.has-actions {
+                margin-bottom: -0.5rem;
+            }
 
             &::-webkit-scrollbar {
                 display: none;

From 650227c9de01c99f09cdf9f905a053c78b1c88ef Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 13:19:05 +0530
Subject: [PATCH 049/118] fix: viewport issues with header banners.

---
 src/lib/components/sidebar.svelte             |  13 +-
 src/lib/layout/headerAlert.svelte             |   9 ++
 src/lib/stores/viewport.ts                    |   6 +-
 .../database-[database]/subNavigation.svelte  | 132 ++++++++++--------
 4 files changed, 94 insertions(+), 66 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 04ccbd6fba..00d7ea1baf 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -35,8 +35,9 @@
     import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
     import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
+    import { isTabletViewport, isSmallViewport, isDesktopViewport } from '$lib/stores/viewport';
     import { Click, trackEvent } from '$lib/actions/analytics';
+    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
     import type { HTMLAttributes } from 'svelte/elements';
     import type { Models } from '@appwrite.io/console';
@@ -353,7 +354,10 @@
 </div>
 
 {#if subNavigation}
-    <div class="sub-navigation" class:icons={state === 'icons'}>
+    <div
+        class="sub-navigation"
+        class:icons={state === 'icons'}
+        style:--banner-spacing={$isDesktopViewport && $bannerSpacing ? $bannerSpacing : undefined}>
         <svelte:component this={subNavigation} />
     </div>
 {/if}
@@ -590,8 +594,9 @@
 
     .sub-navigation {
         margin-top: 48px;
+
         @media (min-width: 1024px) {
-            margin-top: 0;
+            margin-top: var(--banner-spacing, 0px);
             width: 400px;
             height: calc(100vh - 48px);
             display: flex;
@@ -603,8 +608,8 @@
             transition: width 0.2s linear;
 
             &.icons {
-                width: 266px;
                 transition: width 0.3s linear;
+                width: var(--banner-spacing, 266px);
             }
         }
     }
diff --git a/src/lib/layout/headerAlert.svelte b/src/lib/layout/headerAlert.svelte
index c6a7838360..76f78d2f75 100644
--- a/src/lib/layout/headerAlert.svelte
+++ b/src/lib/layout/headerAlert.svelte
@@ -1,3 +1,9 @@
+<script module lang="ts">
+    import { writable } from 'svelte/store';
+
+    export const bannerSpacing = writable<string | null>(null);
+</script>
+
 <script lang="ts">
     import { onDestroy, onMount } from 'svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
@@ -19,6 +25,9 @@
         if (sidebar) {
             sidebar.style.top = `${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px`;
             sidebar.style.height = `calc(100vh - (${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px))`;
+
+            // for sidebar and sub-navigation!
+            bannerSpacing.set(`${alertHeight}px`);
         }
         if (contentSection) {
             contentSection.style.paddingBlockStart = `${alertHeight}px`;
diff --git a/src/lib/stores/viewport.ts b/src/lib/stores/viewport.ts
index beeb1777c1..098ab87c52 100644
--- a/src/lib/stores/viewport.ts
+++ b/src/lib/stores/viewport.ts
@@ -1,7 +1,8 @@
-import { writable } from 'svelte/store';
+import { get, writable } from 'svelte/store';
 
 export const isSmallViewport = writable(false);
 export const isTabletViewport = writable(false);
+export const isDesktopViewport = writable(false);
 
 export function updateViewport() {
     if (typeof window !== 'undefined') {
@@ -12,5 +13,8 @@ export function updateViewport() {
         isTabletViewport.set(
             typeof window !== 'undefined' ? window.matchMedia('(max-width: 1023px)').matches : false
         );
+
+        // neither small, nor tablet
+        isDesktopViewport.set(!get(isSmallViewport) && !get(isTabletViewport));
     }
 }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 60dac5b0da..12d65c3de3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -15,6 +15,7 @@
     import { BottomSheet } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import type { Models } from '@appwrite.io/console';
+    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
     let data = $derived(page.data) as PageData;
     let region = $derived(page.params.region);
@@ -42,75 +43,78 @@
 </script>
 
 <svelte:window on:resize={onResize} />
+
 {#if !$isTabletViewport}
-    <Sidebar.Base state="open" resizable={false}>
-        <section class="list-container" slot="top" style:width="100%">
-            <a
-                href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
-                class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
-                <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
-                {data.database?.name}
-            </a>
-            <div class="collection-content">
-                {#if collections?.total}
-                    <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
-                        {#each sortedCollections as collection}
-                            {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
-                            {@const isSelected = collectionId === collection.$id}
+    <div class="side-bar-base-wrapper" style:--banner-spacing={$bannerSpacing}>
+        <Sidebar.Base state="open" resizable={false}>
+            <section class="list-container" slot="top" style:width="100%">
+                <a
+                    href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                    class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
+                    <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
+                    {data.database?.name}
+                </a>
+                <div class="collection-content">
+                    {#if collections?.total}
+                        <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
+                            {#each sortedCollections as collection}
+                                {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
+                                {@const isSelected = collectionId === collection.$id}
 
-                            <Layout.Stack gap="m" direction="row" alignItems="center">
+                                <Layout.Stack gap="m" direction="row" alignItems="center">
+                                    <div
+                                        style:border-left="1px solid var(--border-neutral, #ededf0)"
+                                        style:height="1rem">
+                                    </div>
+
+                                    <li class:is-selected={isSelected} style:width="100%">
+                                        <a
+                                            class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
+                                            {href}>
+                                            <Icon
+                                                icon={IconTable}
+                                                size="s"
+                                                color={isSelected
+                                                    ? '--fgcolor-neutral-tertiary'
+                                                    : '--fgcolor-neutral-weak'} />
+                                            <span class="text collection-name" data-private
+                                                >{collection.name}</span>
+                                        </a>
+                                    </li>
+                                </Layout.Stack>
+                            {/each}
+                        </ul>
+                    {:else}
+                        <div style:padding-block="0.75rem">
+                            <Layout.Stack
+                                gap="m"
+                                direction="row"
+                                alignItems="center"
+                                class="u-margin-inline-start-8 u-margin-block-start-8">
                                 <div
                                     style:border-left="1px solid var(--border-neutral, #ededf0)"
                                     style:height="1rem">
                                 </div>
-
-                                <li class:is-selected={isSelected} style:width="100%">
-                                    <a
-                                        class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
-                                        {href}>
-                                        <Icon
-                                            icon={IconTable}
-                                            size="s"
-                                            color={isSelected
-                                                ? '--fgcolor-neutral-tertiary'
-                                                : '--fgcolor-neutral-weak'} />
-                                        <span class="text collection-name" data-private
-                                            >{collection.name}</span>
-                                    </a>
-                                </li>
+                                No tables yet
                             </Layout.Stack>
-                        {/each}
-                    </ul>
-                {:else}
-                    <div style:padding-block="0.75rem">
-                        <Layout.Stack
-                            gap="m"
-                            direction="row"
-                            alignItems="center"
-                            class="u-margin-inline-start-8 u-margin-block-start-8">
-                            <div
-                                style:border-left="1px solid var(--border-neutral, #ededf0)"
-                                style:height="1rem">
-                            </div>
-                            No tables yet
-                        </Layout.Stack>
-                    </div>
-                {/if}
+                        </div>
+                    {/if}
 
-                <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
-                    <Icon icon={IconPlus} size="s" />
-                    <Button
-                        compact
-                        on:click={() => {
-                            $showCreate = true;
-                            $showSubNavigation = false;
-                        }}>
-                        Create collection
-                    </Button>
-                </Layout.Stack>
-            </div>
-        </section>
-    </Sidebar.Base>
+                    <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
+                        <Icon icon={IconPlus} size="s" />
+                        <Button
+                            compact
+                            on:click={() => {
+                                $showCreate = true;
+                                $showSubNavigation = false;
+                            }}>
+                            Create collection
+                        </Button>
+                    </Layout.Stack>
+                </div>
+            </section>
+        </Sidebar.Base>
+    </div>
 {:else}
     <Navbar.Base>
         <div slot="left">
@@ -163,6 +167,12 @@
 {/if}
 
 <style lang="scss">
+    .side-bar-base-wrapper {
+        & :global(nav) {
+            margin-top: var(--banner-spacing);
+        }
+    }
+
     .list-container {
         display: flex;
         flex-direction: column;

From 803f4ea09dcfccad8dd9d5d4fed9e4021e501fb7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 13:53:55 +0530
Subject: [PATCH 050/118] fix: viewport issues with header banners.

---
 src/lib/components/sidebar.svelte             |  15 +-
 src/lib/layout/cover.svelte                   |   9 +-
 .../database-[database]/subNavigation.svelte  | 133 ++++++++----------
 3 files changed, 83 insertions(+), 74 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 00d7ea1baf..686a12a5f7 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -357,7 +357,7 @@
     <div
         class="sub-navigation"
         class:icons={state === 'icons'}
-        style:--banner-spacing={$isDesktopViewport && $bannerSpacing ? $bannerSpacing : undefined}>
+        style:--banner-spacing={$bannerSpacing ? $bannerSpacing : undefined}>
         <svelte:component this={subNavigation} />
     </div>
 {/if}
@@ -608,8 +608,19 @@
             transition: width 0.2s linear;
 
             &.icons {
+                width: 266px;
                 transition: width 0.3s linear;
-                width: var(--banner-spacing, 266px);
+
+                & :global(nav) {
+                    margin-top: var(--banner-spacing);
+                }
+            }
+        }
+
+        /* when in small or tablet viewport and there's a banner */
+        @media (max-width: 1023px) {
+            & :global(header) {
+                margin-top: var(--banner-spacing);
             }
         }
     }
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index 03ee8ac550..be99cc7be3 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Layout } from '@appwrite.io/pink-svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
 
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
     export let blocksize = '152px';
@@ -8,9 +9,15 @@
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
         : '';
+
+    $: marginTop = expanded && $isTabletViewport ? '48px' : undefined;
 </script>
 
-<div class="top-cover-console" style:block-size={blocksize}>
+<div
+    class:expanded
+    class="top-cover-console"
+    style:block-size={blocksize}
+    style:margin-top={marginTop}>
     <div class="cover-container" {style} class:expanded>
         <Layout.Stack direction="row" alignItems="baseline">
             <slot name="header" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 12d65c3de3..b0a456b71b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -15,7 +15,6 @@
     import { BottomSheet } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import type { Models } from '@appwrite.io/console';
-    import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 
     let data = $derived(page.data) as PageData;
     let region = $derived(page.params.region);
@@ -45,76 +44,74 @@
 <svelte:window on:resize={onResize} />
 
 {#if !$isTabletViewport}
-    <div class="side-bar-base-wrapper" style:--banner-spacing={$bannerSpacing}>
-        <Sidebar.Base state="open" resizable={false}>
-            <section class="list-container" slot="top" style:width="100%">
-                <a
-                    href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
-                    class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
-                    <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
-                    {data.database?.name}
-                </a>
-                <div class="collection-content">
-                    {#if collections?.total}
-                        <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
-                            {#each sortedCollections as collection}
-                                {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
-                                {@const isSelected = collectionId === collection.$id}
-
-                                <Layout.Stack gap="m" direction="row" alignItems="center">
-                                    <div
-                                        style:border-left="1px solid var(--border-neutral, #ededf0)"
-                                        style:height="1rem">
-                                    </div>
+    <Sidebar.Base state="open" resizable={false}>
+        <section class="list-container" slot="top" style:width="100%">
+            <a
+                href={`${base}/project-${region}-${project}/databases/database-${databaseId}`}
+                class="database-name u-flex u-cross-center body-text-2 u-gap-8 is-not-mobile is-selected">
+                <Icon icon={IconDatabase} size="s" color="--fgcolor-neutral-weak" />
+                {data.database?.name}
+            </a>
+            <div class="collection-content">
+                {#if collections?.total}
+                    <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
+                        {#each sortedCollections as collection}
+                            {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/collection-${collection.$id}`}
+                            {@const isSelected = collectionId === collection.$id}
 
-                                    <li class:is-selected={isSelected} style:width="100%">
-                                        <a
-                                            class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
-                                            {href}>
-                                            <Icon
-                                                icon={IconTable}
-                                                size="s"
-                                                color={isSelected
-                                                    ? '--fgcolor-neutral-tertiary'
-                                                    : '--fgcolor-neutral-weak'} />
-                                            <span class="text collection-name" data-private
-                                                >{collection.name}</span>
-                                        </a>
-                                    </li>
-                                </Layout.Stack>
-                            {/each}
-                        </ul>
-                    {:else}
-                        <div style:padding-block="0.75rem">
-                            <Layout.Stack
-                                gap="m"
-                                direction="row"
-                                alignItems="center"
-                                class="u-margin-inline-start-8 u-margin-block-start-8">
+                            <Layout.Stack gap="m" direction="row" alignItems="center">
                                 <div
                                     style:border-left="1px solid var(--border-neutral, #ededf0)"
                                     style:height="1rem">
                                 </div>
-                                No tables yet
+
+                                <li class:is-selected={isSelected} style:width="100%">
+                                    <a
+                                        class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
+                                        {href}>
+                                        <Icon
+                                            icon={IconTable}
+                                            size="s"
+                                            color={isSelected
+                                                ? '--fgcolor-neutral-tertiary'
+                                                : '--fgcolor-neutral-weak'} />
+                                        <span class="text collection-name" data-private
+                                            >{collection.name}</span>
+                                    </a>
+                                </li>
                             </Layout.Stack>
-                        </div>
-                    {/if}
+                        {/each}
+                    </ul>
+                {:else}
+                    <div style:padding-block="0.75rem">
+                        <Layout.Stack
+                            gap="m"
+                            direction="row"
+                            alignItems="center"
+                            class="u-margin-inline-start-8 u-margin-block-start-8">
+                            <div
+                                style:border-left="1px solid var(--border-neutral, #ededf0)"
+                                style:height="1rem">
+                            </div>
+                            No tables yet
+                        </Layout.Stack>
+                    </div>
+                {/if}
 
-                    <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
-                        <Icon icon={IconPlus} size="s" />
-                        <Button
-                            compact
-                            on:click={() => {
-                                $showCreate = true;
-                                $showSubNavigation = false;
-                            }}>
-                            Create collection
-                        </Button>
-                    </Layout.Stack>
-                </div>
-            </section>
-        </Sidebar.Base>
-    </div>
+                <Layout.Stack alignItems="center" direction="row" style="gap: 3px;">
+                    <Icon icon={IconPlus} size="s" />
+                    <Button
+                        compact
+                        on:click={() => {
+                            $showCreate = true;
+                            $showSubNavigation = false;
+                        }}>
+                        Create collection
+                    </Button>
+                </Layout.Stack>
+            </div>
+        </section>
+    </Sidebar.Base>
 {:else}
     <Navbar.Base>
         <div slot="left">
@@ -131,7 +128,7 @@
                     onclick={() => {
                         openBottomSheet = !openBottomSheet;
                     }}>
-                    <span class="orgName">{selectedCollection.name}</span>
+                    <span class="orgName">{selectedCollection?.name}</span>
                     <Icon icon={IconChevronDown} size="s" />
                 </button>
             </Layout.Stack>
@@ -167,12 +164,6 @@
 {/if}
 
 <style lang="scss">
-    .side-bar-base-wrapper {
-        & :global(nav) {
-            margin-top: var(--banner-spacing);
-        }
-    }
-
     .list-container {
         display: flex;
         flex-direction: column;

From 0c0e10fc71e3b17ccc81ce51c71a48e79f4959f4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 16:39:12 +0530
Subject: [PATCH 051/118] ci: empty commit


From b5dbf597777cd4b645a07ef4c808ba3fd4a7cd0e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 16:39:50 +0530
Subject: [PATCH 052/118] ci: empty commit


From 188241d091383bc253a8b8db3c264b244989da6d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 17:47:11 +0530
Subject: [PATCH 053/118] updates: as per discussions.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +-
 src/lib/components/copy.svelte                |  3 +-
 src/lib/components/id.svelte                  |  3 +-
 src/lib/layout/activity.svelte                | 92 ++++++++++---------
 src/lib/layout/container.svelte               |  9 ++
 src/lib/layout/shell.svelte                   |  8 ++
 .../activity/+page.svelte                     |  4 +-
 .../layout/emptySheet.svelte                  | 71 +++++++++-----
 .../settings/+page.svelte                     | 22 +++--
 .../spreadsheet.svelte                        | 13 +--
 .../usage/[[period]]/+page.svelte             | 22 +++--
 12 files changed, 156 insertions(+), 103 deletions(-)

diff --git a/package.json b/package.json
index 93e0c2a55c..676ac5a036 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 054eadd31e..1594c28082 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3686,7 +3686,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b5bb595(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 4445ccb311..1d472f6e40 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -9,6 +9,7 @@
     export let event: string = null;
     export let eventContext = 'click_id_tag';
     export let tooltipDisabled = false;
+    export let tooltipPortal = false;
     export let copyText: string = 'Click to copy';
 
     let content = copyText;
@@ -34,7 +35,7 @@
     //TODO: remove this component
 </script>
 
-<Tooltip disabled={tooltipDisabled}>
+<Tooltip disabled={tooltipDisabled} portal={tooltipPortal}>
     <span
         data-private
         style:display="inline-flex"
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index a2e19a8c88..341e4ba786 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -48,10 +48,11 @@
 
     export let value: string;
     export let event: string = null;
+    export let tooltipPortal = false;
 </script>
 
 {#key value}
-    <Copy {value} {event}>
+    <Copy {value} {event} {tooltipPortal}>
         <Tag size="xs" variant="code">
             <Icon icon={IconDuplicate} size="s" slot="start" />
             <span
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index f78f3bbe19..6f63424f41 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -10,6 +10,7 @@
     export let logs: Models.LogList;
     export let offset = 0;
     export let limit = 0;
+    export let databasesScreen = false;
 
     const columns: PinkColumn[] = [
         { id: 'user' },
@@ -20,55 +21,58 @@
     ];
 </script>
 
-<Container>
+<!-- TODO: only the databases page -->
+<Container expanded={databasesScreen} slotSpacing={databasesScreen} {databasesScreen}>
     {#if logs.total}
-        <Table.Root {columns} let:root>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
-                <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
-                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
-                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
-                <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
-            </svelte:fragment>
-            {#each logs.logs as log}
-                <Table.Row.Base {root}>
-                    <Table.Cell column="user" {root}>
-                        <Layout.Stack direction="row" alignItems="center">
-                            {#if log.userEmail}
-                                {#if log.userName}
-                                    <AvatarInitials size="xs" name={log.userName} />
-                                    <Trim>{log.userName}</Trim>
+        <div>
+            <Table.Root {columns} let:root>
+                <svelte:fragment slot="header" let:root>
+                    <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
+                    <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
+                    <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                    <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                    <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
+                </svelte:fragment>
+                {#each logs.logs as log}
+                    <Table.Row.Base {root}>
+                        <Table.Cell column="user" {root}>
+                            <Layout.Stack direction="row" alignItems="center">
+                                {#if log.userEmail}
+                                    {#if log.userName}
+                                        <AvatarInitials size="xs" name={log.userName} />
+                                        <Trim>{log.userName}</Trim>
+                                    {:else}
+                                        <AvatarInitials size="xs" name={log.userEmail} />
+                                        <Trim>{log.userEmail}</Trim>
+                                    {/if}
                                 {:else}
-                                    <AvatarInitials size="xs" name={log.userEmail} />
-                                    <Trim>{log.userEmail}</Trim>
+                                    <div class="avatar is-size-small">
+                                        <span class="icon-anonymous" aria-hidden="true"></span>
+                                    </div>
+                                    <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
                                 {/if}
+                            </Layout.Stack>
+                        </Table.Cell>
+                        <Table.Cell column="event" {root}>
+                            {log.event}
+                        </Table.Cell>
+                        <Table.Cell column="location" {root}>
+                            {#if log.countryCode !== '--'}
+                                {log.countryName}
                             {:else}
-                                <div class="avatar is-size-small">
-                                    <span class="icon-anonymous" aria-hidden="true"></span>
-                                </div>
-                                <span class="text u-trim">{log.userName ?? 'Anonymous'}</span>
+                                Unknown
                             {/if}
-                        </Layout.Stack>
-                    </Table.Cell>
-                    <Table.Cell column="event" {root}>
-                        {log.event}
-                    </Table.Cell>
-                    <Table.Cell column="location" {root}>
-                        {#if log.countryCode !== '--'}
-                            {log.countryName}
-                        {:else}
-                            Unknown
-                        {/if}
-                    </Table.Cell>
-                    <Table.Cell column="ip" {root}>
-                        {log.ip}
-                    </Table.Cell>
-                    <Table.Cell column="date" {root}>
-                        {toLocaleDateTime(log.time)}
-                    </Table.Cell>
-                </Table.Row.Base>
-            {/each}
-        </Table.Root>
+                        </Table.Cell>
+                        <Table.Cell column="ip" {root}>
+                            {log.ip}
+                        </Table.Cell>
+                        <Table.Cell column="date" {root}>
+                            {toLocaleDateTime(log.time)}
+                        </Table.Cell>
+                    </Table.Row.Base>
+                {/each}
+            </Table.Root>
+        </div>
 
         <PaginationWithLimit name="Logs" {limit} {offset} total={logs.total} />
     {:else}
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 23a7cff424..0c56fa502e 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -7,6 +7,7 @@
     export let slotSpacing = false;
     export let overlapCover = false;
     export let paddingInlineEnd = true;
+    export let databasesScreen = false;
     export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
 
     $: style = size
@@ -20,6 +21,7 @@
         class:slotSpacing
         class:paddingInlineEnd={!paddingInlineEnd}
         class:expanded
+        class:databasesScreen
         {style}>
         <Layout.Stack gap="l">
             <slot />
@@ -55,6 +57,13 @@
             }
         }
 
+        &.databasesScreen {
+            @media (min-width: 1440px) {
+                min-width: 1070px;
+                max-width: 1144px;
+            }
+        }
+
         @media (min-width: 360px) {
             margin-inline: 1rem;
         }
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 5b594e367b..7d340b517c 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -245,6 +245,14 @@
         }
     }
 
+    :global(main:has(.wide-screen-wrapper)) {
+        @media (min-width: 1728px) {
+            .main-content {
+                padding-left: 255px;
+            }
+        }
+    }
+
     .overlay {
         position: fixed;
         width: 100vw;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.svelte
index d3939555dc..1161bb56d8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/activity/+page.svelte
@@ -5,4 +5,6 @@
     export let data: PageData;
 </script>
 
-<Activity {...data} />
+<div class="wide-screen-wrapper databases-spreadsheet">
+    <Activity {...data} databasesScreen />
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
index 6ac658ae53..5fba08fb17 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/layout/emptySheet.svelte
@@ -5,7 +5,7 @@
     import { isSmallViewport } from '$lib/stores/viewport';
     import { SortButton } from '$lib/components';
     import type { Column } from '$lib/helpers/types';
-    import { spreadsheetLoading } from '../store';
+    import { columns, columnsOrder, showCreateAttributeSheet, spreadsheetLoading } from '../store';
 
     type Mode = 'records' | 'indexes';
 
@@ -112,29 +112,51 @@
         loading={$spreadsheetLoading}>
         <svelte:fragment slot="header" let:root>
             {#each spreadsheetColumns as column (column.id)}
-                <Spreadsheet.Header.Cell {root} column={column.id} icon={column.icon ?? undefined}>
-                    {#if column.isAction}
-                        <Button.Button icon variant="extra-compact">
-                            <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
-                        </Button.Button>
-                    {:else if column.id === 'actions' || column.id === 'empty'}
-                        {column.title}
-                    {:else}
-                        <Layout.Stack
-                            gap="xs"
-                            direction="row"
-                            alignItems="center"
-                            alignContent="center">
+                {@const columnActionsById = column.id === 'actions'}
+                <!-- svelte-ignore a11y_click_events_have_key_events -->
+                <div
+                    role="button"
+                    tabindex="0"
+                    style:cursor={columnActionsById ? 'pointer' : null}
+                    onclick={() => {
+                        if (columnActionsById && mode === 'records') {
+                            $showCreateAttributeSheet.show = true;
+                            $showCreateAttributeSheet.columns = $columns;
+                            $showCreateAttributeSheet.columnsOrder = $columnsOrder;
+                        }
+                    }}>
+                    <Spreadsheet.Header.Cell
+                        {root}
+                        column={column.id}
+                        icon={column.icon ?? undefined}>
+                        {#if column.isAction}
+                            <Button.Button
+                                icon
+                                variant="extra-compact"
+                                on:click={() => {
+                                    console.log('dank');
+                                }}>
+                                <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
+                            </Button.Button>
+                        {:else if column.id === 'actions' || column.id === 'empty'}
                             {column.title}
+                        {:else}
+                            <Layout.Stack
+                                gap="xs"
+                                direction="row"
+                                alignItems="center"
+                                alignContent="center">
+                                {column.title}
 
-                            {#if column.isPrimary}
-                                <Badge content="Primary key" size="xs" variant="secondary" />
-                            {/if}
+                                {#if column.isPrimary}
+                                    <Badge content="Primary key" size="xs" variant="secondary" />
+                                {/if}
 
-                            <SortButton disabled column={column.id} />
-                        </Layout.Stack>
-                    {/if}
-                </Spreadsheet.Header.Cell>
+                                <SortButton disabled column={column.id} />
+                            </Layout.Stack>
+                        {/if}
+                    </Spreadsheet.Header.Cell>
+                </div>
             {/each}
         </svelte:fragment>
     </Spreadsheet.Root>
@@ -199,9 +221,10 @@
             position: unset;
         }
 
-        &[data-mode='records']
-            :global([role='rowheader'] [role='cell']:nth-last-child(2) [role='presentation']) {
-            display: none;
+        &[data-mode='records'] {
+            & :global([role='rowheader'] [role='cell']:nth-last-child(2) [role='presentation']) {
+                display: none;
+            }
         }
 
         &[data-mode='indexes'] {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
index 23c935be0f..0218207206 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/+page.svelte
@@ -9,13 +9,15 @@
     import UpdateStatus from './updateStatus.svelte';
 </script>
 
-<Container>
-    {#if $collection}
-        <UpdateStatus />
-        <UpdateName />
-        <DisplayName />
-        <UpdatePermissions />
-        <UpdateSecurity />
-        <DangerZone />
-    {/if}
-</Container>
+<div class="wide-screen-wrapper databases-spreadsheet">
+    <Container expanded slotSpacing databasesScreen>
+        {#if $collection}
+            <UpdateStatus />
+            <UpdateName />
+            <DisplayName />
+            <UpdatePermissions />
+            <UpdateSecurity />
+            <DangerZone />
+        {/if}
+    </Container>
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 44de512b33..f3fe4bce29 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -192,7 +192,7 @@
             {
                 id: '$id',
                 title: 'ID',
-                width: getColumnWidth('$id', 200),
+                width: getColumnWidth('$id', 225),
                 minimumWidth: 225,
                 draggable: false,
                 type: 'string',
@@ -447,6 +447,7 @@
         bind:columns={$columns}
         loading={$spreadsheetLoading}
         emptyCells={emptyCellsCount}
+        keyboardNavigation
         bottomActionClick={() => (showRecordsCreateSheet.show = true)}
         on:columnsSwap={(order) => {
             saveColumnsOrder(order.detail);
@@ -508,20 +509,20 @@
             {/each}
         </svelte:fragment>
 
-        {#each documents.documents as document (document.$id)}
+        {#each documents.documents as document, index (document.$id)}
             <!-- TODO: add `value` for user attributes -->
-            <Spreadsheet.Row.Base {root} id={document.$id}>
+            <Spreadsheet.Row.Base {root} id={document.$id} {index}>
                 {#each $columns as { id: columnId, isEditable } (columnId)}
                     {@const formatted = formatColumn(document[columnId])}
                     <Spreadsheet.Cell
                         {root}
-                        column={columnId}
                         {isEditable}
+                        column={columnId}
                         value={columnId.includes('$') || formatted === 'null'
                             ? undefined
                             : formatted}>
                         {#if columnId === '$id'}
-                            <Id value={document.$id}>{document.$id}</Id>
+                            <Id value={document.$id} tooltipPortal>{document.$id}</Id>
                         {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
                             <DualTimeView time={document[columnId]} />
                         {:else if columnId === 'actions'}
@@ -603,7 +604,7 @@
                                                 text={formatted} />
                                         </button>
                                     {:else if formatted.length > 20}
-                                        <Tooltip placement="bottom">
+                                        <Tooltip placement="bottom" portal>
                                             <Typography.Text truncate>
                                                 {formatted}
                                             </Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
index 93f00b8162..87da2e66b8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/usage/[[period]]/+page.svelte
@@ -9,13 +9,15 @@
     $: count = data.documents;
 </script>
 
-<Container>
-    <Usage
-        path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/usage`}
-        {total}
-        {count}
-        countMetadata={{
-            legend: 'Documents',
-            title: 'Total documents'
-        }} />
-</Container>
+<div class="wide-screen-wrapper databases-spreadsheet">
+    <Container expanded slotSpacing paddingInlineEnd databasesScreen>
+        <Usage
+            path={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/usage`}
+            {total}
+            {count}
+            countMetadata={{
+                legend: 'Documents',
+                title: 'Total documents'
+            }} />
+    </Container>
+</div>

From 72d7e33ecfee8e89b114610133071dec4b1c07b2 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 18:48:41 +0530
Subject: [PATCH 054/118] fix: index and duplicates not working on the headers.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 ++++----
 .../collection-[collection]/+layout.svelte    | 17 ++++++++++++++
 .../attributes/+page.svelte                   | 23 ++++---------------
 .../createAttribute.svelte                    | 11 +++++----
 .../indexes/createIndex.svelte                |  8 +++----
 .../spreadsheet.svelte                        | 20 +++++++++++++++-
 .../collection-[collection]/store.ts          | 10 +++++++-
 vite.config.ts                                |  3 ++-
 9 files changed, 68 insertions(+), 36 deletions(-)

diff --git a/package.json b/package.json
index 676ac5a036..7fca0c3e50 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1594c28082..397df19cec 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3686,7 +3686,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@cc69c76(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index 02f41b2d81..c84e137223 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -30,6 +30,7 @@
         randomDataModalState,
         reorderItems,
         showCreateAttributeSheet,
+        showCreateIndexSheet,
         spreadsheetLoading
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
@@ -50,7 +51,9 @@
     import { generateFakeDocuments, generateAttributes } from '$lib/helpers/faker';
     import { addNotification } from '$lib/stores/notifications';
     import { sleep } from '$lib/helpers/promises';
+    import CreateIndex from './indexes/createIndex.svelte';
 
+    let createIndex: CreateIndex;
     let editDocument: EditDocument;
     let createAttribute: CreateAttribute;
     let selectedOption: Option['name'] = 'String';
@@ -288,6 +291,7 @@
     <CreateAttribute
         bind:selectedOption
         bind:this={createAttribute}
+        column={$showCreateAttributeSheet.column}
         showCreate={$showCreateAttributeSheet.show}
         direction={$showCreateAttributeSheet.direction}
         columns={$showCreateAttributeSheet.columns}
@@ -323,6 +327,19 @@
     <EditDocument bind:document={$databaseRowSheetOptions.document} bind:this={editDocument} />
 </SideSheet>
 
+<SideSheet
+    title="Create index"
+    bind:show={$showCreateIndexSheet.show}
+    submit={{
+        text: 'Create',
+        onClick: async () => await createIndex.create()
+    }}>
+    <CreateIndex
+        bind:this={createIndex}
+        bind:showCreateIndex={$showCreateIndexSheet.show}
+        externalAttributeKey={$showCreateIndexSheet.column} />
+</SideSheet>
+
 <Dialog title="Generate random data" bind:open={$randomDataModalState.show}>
     <Layout.Stack style="gap: 28px;">
         <Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
index dfcab5bbbb..683ecaa19e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/+page.svelte
@@ -17,13 +17,13 @@
     } from '@appwrite.io/pink-svelte';
     import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
-    import CreateIndex from '../indexes/createIndex.svelte';
     import {
         attributes,
         type Attributes,
         indexes,
         isCsvImportInProgress,
-        reorderItems
+        reorderItems,
+        showCreateIndexSheet
     } from '../store';
     import Delete from './deleteAttribute.svelte';
     import EditAttribute from './edit.svelte';
@@ -101,14 +101,12 @@
     let showFailed = $state(false);
     let showDelete = $state(false);
     let selectedAttributes = $state([]);
-    let showCreateIndex = $state(false);
     let selectedAttribute: Attributes = $state(null);
 
     let columnsOrder = $state([]);
     const collectionId = page.params.collection;
 
     let showEdit = $state(false);
-    let createIndex: CreateIndex;
     let editAttribute: EditAttribute;
 
     const attributeFormatIcon = {
@@ -300,9 +298,9 @@
                                             leadingIcon={IconPlus}
                                             on:click={(event) => {
                                                 toggle(event);
-                                                selectedAttribute = attribute;
-                                                showCreateIndex = true;
                                                 showDropdown[index] = false;
+                                                $showCreateIndexSheet.show = true;
+                                                $showCreateIndexSheet.column = attribute.key;
                                             }}>
                                             Create index
                                         </ActionMenu.Item.Button>
@@ -381,19 +379,6 @@
     <EditAttribute showEdit isModal={false} {selectedAttribute} bind:this={editAttribute} />
 </SideSheet>
 
-<SideSheet
-    title="Create index"
-    bind:show={showCreateIndex}
-    submit={{
-        text: 'Create',
-        onClick: async () => await createIndex.create()
-    }}>
-    <CreateIndex
-        bind:showCreateIndex
-        externalAttribute={selectedAttribute}
-        bind:this={createIndex} />
-</SideSheet>
-
 {#if showFailed}
     <FailedModal bind:show={showFailed} title="Create attribute" header="Creation failed" {error} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
index 654ef91c22..e8108de43c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/createAttribute.svelte
@@ -14,6 +14,7 @@
     let {
         direction = null,
         showCreate = false,
+        column = null,
         columns = $bindable(null),
         columnId = $bindable(null),
         columnsOrder = $bindable(null),
@@ -21,6 +22,7 @@
         onColumnsReorder = null
     }: {
         showCreate: boolean;
+        column?: Attributes;
         columnId?: string;
         columns?: Column[];
         columnsOrder?: string[];
@@ -32,11 +34,12 @@
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
 
-    let key: string = $state(null);
+    let key: string = $state(column?.key ?? null);
     let data: Partial<Attributes> = $state({
-        required: false,
-        array: false,
-        default: null
+        required: column?.required ?? false,
+        array: column?.array ?? false,
+        default: column?.default ?? null,
+        ...column
     });
 
     let AttributeComponent = $derived(
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index cf958c777d..8fc3a36753 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -10,13 +10,13 @@
     import { sdk } from '$lib/stores/sdk';
     import { IndexType } from '@appwrite.io/console';
     import { isRelationship } from '../document-[document]/attributes/store';
-    import { type Attributes, collection, indexes } from '../store';
+    import { collection, indexes } from '../store';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
     import { flags } from '$lib/flags';
 
     export let showCreateIndex = false;
-    export let externalAttribute: Attributes = null;
+    export let externalAttributeKey: string = null;
 
     const databaseId = page.params.database;
 
@@ -52,8 +52,8 @@
     }
 
     function initialize() {
-        attributeList = externalAttribute
-            ? [{ value: externalAttribute.key, order: 'ASC', length: null }]
+        attributeList = externalAttributeKey
+            ? [{ value: externalAttributeKey, order: 'ASC', length: null }]
             : [{ value: '', order: 'ASC', length: null }];
         selectedType = IndexType.Key;
         key = `index_${$indexes.length + 1}`;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index f3fe4bce29..8d7fd5f4ea 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -29,7 +29,8 @@
         columnsOrder,
         columnsWidth,
         randomDataModalState,
-        spreadsheetLoading
+        spreadsheetLoading,
+        showCreateIndexSheet
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -383,6 +384,21 @@
                 sortState.set({ column: columnId, direction: 'desc' });
                 await sort([Query.orderDesc(columnId)]);
             }
+
+            if (action === 'create-index') {
+                $showCreateIndexSheet.show = true;
+                $showCreateIndexSheet.column = columnId;
+            }
+
+            if (action === 'duplicate-header') {
+                $showCreateAttributeSheet.title = `Duplicate column`;
+                $showCreateAttributeSheet.column = $attributes.find(
+                    (attr) => attr.key === columnId
+                );
+                $showCreateAttributeSheet.columns = $columns;
+                $showCreateAttributeSheet.columnsOrder = $columnsOrder;
+                $showCreateAttributeSheet.show = true;
+            }
         } else if (type === 'row') {
             if (action === 'update') {
                 $databaseRowSheetOptions.show = true;
@@ -464,7 +480,9 @@
                             variant="extra-compact"
                             on:click={() => {
                                 $showCreateAttributeSheet.show = true;
+                                $showCreateAttributeSheet.column = null;
                                 $showCreateAttributeSheet.columns = $columns;
+                                $showCreateAttributeSheet.title = 'Insert column';
                                 $showCreateAttributeSheet.columnsOrder = $columnsOrder;
                             }}>
                             <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
index 9c324e8aa0..672adab6e2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/store.ts
@@ -81,7 +81,7 @@ export type ColumnDirection = {
 
 export type CreateAttribute = {
     show: boolean;
-    column?: string;
+    column?: Attributes;
     title: string;
     direction?: ColumnDirection;
     onDone?: () => void;
@@ -99,6 +99,14 @@ export const showCreateAttributeSheet = writable<CreateAttribute>({
     columnsOrder: null
 });
 
+export const showCreateIndexSheet = writable<{
+    show: boolean;
+    column?: string;
+}>({
+    show: false,
+    column: null
+});
+
 export function reorderItems<T extends { id: string } | { key: string }>(
     items: T[],
     order: string[] = []
diff --git a/vite.config.ts b/vite.config.ts
index d0a9f9bf04..8860ffecfe 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,7 +35,8 @@ export default defineConfig({
         ]
     },
     server: {
-        port: 3000
+        port: 3000,
+        allowedHosts: ['exchange-irc-incorporate-drilling.trycloudflare.com']
     },
     test: {
         workspace: [

From 76f20ee89570d50cbe04fffb7f2a08d0e3fb72f1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 18:49:19 +0530
Subject: [PATCH 055/118] remove: vite dev changes.

---
 vite.config.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/vite.config.ts b/vite.config.ts
index 8860ffecfe..d0a9f9bf04 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -35,8 +35,7 @@ export default defineConfig({
         ]
     },
     server: {
-        port: 3000,
-        allowedHosts: ['exchange-irc-incorporate-drilling.trycloudflare.com']
+        port: 3000
     },
     test: {
         workspace: [

From cd2781138e36109f1941731521ddda9a1174df61 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 19:43:47 +0530
Subject: [PATCH 056/118] fix: very weird bug with column swap after creating a
 new one!

---
 .../collection-[collection]/+layout.svelte    |   4 +-
 .../spreadsheet.svelte                        | 414 +++++++++---------
 2 files changed, 212 insertions(+), 206 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
index c84e137223..d617782dec 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.svelte
@@ -23,12 +23,10 @@
     import { onMount } from 'svelte';
     import {
         collection,
-        columns,
         columnsOrder,
         databaseColumnSheetOptions,
         databaseRowSheetOptions,
         randomDataModalState,
-        reorderItems,
         showCreateAttributeSheet,
         showCreateIndexSheet,
         spreadsheetLoading
@@ -298,7 +296,7 @@
         columnsOrder={$showCreateAttributeSheet.columnsOrder}
         onColumnsReorder={(newOrder) => {
             columnsOrder.set(newOrder);
-            columns.set(reorderItems($columns, $columnsOrder));
+            // columns.set(reorderItems($columns, $columnsOrder));
         }} />
 </SideSheet>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
index 8d7fd5f4ea..2a7e6e91ff 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/spreadsheet.svelte
@@ -452,224 +452,232 @@
             }
         });
     }, 1000);
+
+    $: reInitSpreadsheetKey = $collection.attributes.length;
 </script>
 
 <SpreadsheetContainer>
-    <Spreadsheet.Root
-        let:root
-        height="100%"
-        allowSelection
-        bind:selectedRows
-        bind:columns={$columns}
-        loading={$spreadsheetLoading}
-        emptyCells={emptyCellsCount}
-        keyboardNavigation
-        bottomActionClick={() => (showRecordsCreateSheet.show = true)}
-        on:columnsSwap={(order) => {
-            saveColumnsOrder(order.detail);
-        }}
-        on:columnsResize={(resize) => {
-            saveColumnsWidth(resize.detail);
-        }}>
-        <svelte:fragment slot="header" let:root>
-            {#each $columns as column (column.id)}
-                {#if column.isAction}
-                    <Spreadsheet.Header.Cell column="actions" {root}>
-                        <Button.Button
-                            icon
-                            variant="extra-compact"
-                            on:click={() => {
-                                $showCreateAttributeSheet.show = true;
-                                $showCreateAttributeSheet.column = null;
-                                $showCreateAttributeSheet.columns = $columns;
-                                $showCreateAttributeSheet.title = 'Insert column';
-                                $showCreateAttributeSheet.columnsOrder = $columnsOrder;
-                            }}>
-                            <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
-                        </Button.Button>
-                    </Spreadsheet.Header.Cell>
-                {:else}
-                    <SheetOptions
-                        type="header"
-                        columnId={column.id}
-                        column={$attributes.find((attr) => attr.key === column.id)}
-                        onSelect={(option, columnId) =>
-                            onSelectSheetOption(option, columnId, 'header')}>
-                        {#snippet children(toggle)}
-                            <Spreadsheet.Header.Cell
-                                {root}
-                                column={column.id}
-                                icon={column.icon ?? IconText}
-                                on:contextmenu={toggle}>
-                                <Layout.Stack
-                                    gap="xs"
-                                    direction="row"
-                                    alignItems="center"
-                                    alignContent="center">
-                                    {column.title}
-
-                                    {#if column.isPrimary}
-                                        <Badge
-                                            content="Primary key"
-                                            size="xs"
-                                            variant="secondary" />
-                                    {/if}
+    {#key reInitSpreadsheetKey}
+        <Spreadsheet.Root
+            let:root
+            height="100%"
+            allowSelection
+            bind:selectedRows
+            bind:columns={$columns}
+            loading={$spreadsheetLoading}
+            emptyCells={emptyCellsCount}
+            keyboardNavigation
+            bottomActionClick={() => (showRecordsCreateSheet.show = true)}
+            on:columnsSwap={(order) => {
+                saveColumnsOrder(order.detail);
+            }}
+            on:columnsResize={(resize) => {
+                saveColumnsWidth(resize.detail);
+            }}>
+            <svelte:fragment slot="header" let:root>
+                {#each $columns as column (column.id)}
+                    {#if column.isAction}
+                        <Spreadsheet.Header.Cell column="actions" {root}>
+                            <Button.Button
+                                icon
+                                variant="extra-compact"
+                                on:click={() => {
+                                    $showCreateAttributeSheet.show = true;
+                                    $showCreateAttributeSheet.column = null;
+                                    $showCreateAttributeSheet.columns = $columns;
+                                    $showCreateAttributeSheet.title = 'Insert column';
+                                    $showCreateAttributeSheet.columnsOrder = $columnsOrder;
+                                }}>
+                                <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
+                            </Button.Button>
+                        </Spreadsheet.Header.Cell>
+                    {:else}
+                        <SheetOptions
+                            type="header"
+                            columnId={column.id}
+                            column={$attributes.find((attr) => attr.key === column.id)}
+                            onSelect={(option, columnId) =>
+                                onSelectSheetOption(option, columnId, 'header')}>
+                            {#snippet children(toggle)}
+                                <Spreadsheet.Header.Cell
+                                    {root}
+                                    column={column.id}
+                                    icon={column.icon ?? IconText}
+                                    on:contextmenu={toggle}>
+                                    <Layout.Stack
+                                        gap="xs"
+                                        direction="row"
+                                        alignItems="center"
+                                        alignContent="center">
+                                        {column.title}
+
+                                        {#if column.isPrimary}
+                                            <Badge
+                                                content="Primary key"
+                                                size="xs"
+                                                variant="secondary" />
+                                        {/if}
 
-                                    <SortButton
-                                        onSort={sort}
-                                        column={column.id}
-                                        state={sortState} />
-                                </Layout.Stack>
-                            </Spreadsheet.Header.Cell>
-                        {/snippet}
-                    </SheetOptions>
-                {/if}
-            {/each}
-        </svelte:fragment>
-
-        {#each documents.documents as document, index (document.$id)}
-            <!-- TODO: add `value` for user attributes -->
-            <Spreadsheet.Row.Base {root} id={document.$id} {index}>
-                {#each $columns as { id: columnId, isEditable } (columnId)}
-                    {@const formatted = formatColumn(document[columnId])}
-                    <Spreadsheet.Cell
-                        {root}
-                        {isEditable}
-                        column={columnId}
-                        value={columnId.includes('$') || formatted === 'null'
-                            ? undefined
-                            : formatted}>
-                        {#if columnId === '$id'}
-                            <Id value={document.$id} tooltipPortal>{document.$id}</Id>
-                        {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
-                            <DualTimeView time={document[columnId]} />
-                        {:else if columnId === 'actions'}
-                            <SheetOptions
-                                type="row"
-                                column={$attributes.find((attr) => attr.key === columnId)}
-                                onSelect={(option) =>
-                                    onSelectSheetOption(option, 'row', null, document)}>
-                                {#snippet children(toggle)}
-                                    <Button.Button icon variant="extra-compact" on:click={toggle}>
-                                        <Icon
-                                            icon={IconDotsHorizontal}
-                                            color="--fgcolor-neutral-primary" />
-                                    </Button.Button>
-                                {/snippet}
-                            </SheetOptions>
-                        {:else}
-                            {@const attr = $attributes.find((n) => n.key === columnId)}
-                            {#if attr}
-                                {#if isRelationship(attr)}
-                                    {@const args = displayNames?.[attr.relatedCollection] ?? [
-                                        '$id'
-                                    ]}
-                                    {#if !isRelationshipToMany(attr)}
-                                        {#if document[columnId]}
-                                            {@const related = document[columnId]}
-                                            <Link.Button
-                                                variant="muted"
+                                        <SortButton
+                                            onSort={sort}
+                                            column={column.id}
+                                            state={sortState} />
+                                    </Layout.Stack>
+                                </Spreadsheet.Header.Cell>
+                            {/snippet}
+                        </SheetOptions>
+                    {/if}
+                {/each}
+            </svelte:fragment>
+
+            {#each documents.documents as document, index (document.$id)}
+                <!-- TODO: add `value` for user attributes -->
+                <Spreadsheet.Row.Base {root} id={document.$id} {index}>
+                    {#each $columns as { id: columnId, isEditable } (columnId)}
+                        {@const formatted = formatColumn(document[columnId])}
+                        <Spreadsheet.Cell
+                            {root}
+                            {isEditable}
+                            column={columnId}
+                            value={columnId.includes('$') || formatted === 'null'
+                                ? undefined
+                                : formatted}>
+                            {#if columnId === '$id'}
+                                <Id value={document.$id} tooltipPortal>{document.$id}</Id>
+                            {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
+                                <DualTimeView time={document[columnId]} />
+                            {:else if columnId === 'actions'}
+                                <SheetOptions
+                                    type="row"
+                                    column={$attributes.find((attr) => attr.key === columnId)}
+                                    onSelect={(option) =>
+                                        onSelectSheetOption(option, 'row', null, document)}>
+                                    {#snippet children(toggle)}
+                                        <Button.Button
+                                            icon
+                                            variant="extra-compact"
+                                            on:click={toggle}>
+                                            <Icon
+                                                icon={IconDotsHorizontal}
+                                                color="--fgcolor-neutral-primary" />
+                                        </Button.Button>
+                                    {/snippet}
+                                </SheetOptions>
+                            {:else}
+                                {@const attr = $attributes.find((n) => n.key === columnId)}
+                                {#if attr}
+                                    {#if isRelationship(attr)}
+                                        {@const args = displayNames?.[attr.relatedCollection] ?? [
+                                            '$id'
+                                        ]}
+                                        {#if !isRelationshipToMany(attr)}
+                                            {#if document[columnId]}
+                                                {@const related = document[columnId]}
+                                                <Link.Button
+                                                    variant="muted"
+                                                    on:click={(e) => {
+                                                        e.preventDefault();
+                                                        e.stopPropagation();
+                                                        goto(
+                                                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection/${attr.relatedCollection}/document/${related.$id}`
+                                                        );
+                                                    }}>
+                                                    {#each args as arg, i}
+                                                        {#if arg !== undefined}
+                                                            {#if i}&nbsp;|{/if}
+                                                            <span class="text" data-private
+                                                                >{related?.[arg]}</span>
+                                                        {/if}
+                                                    {/each}
+                                                </Link.Button>
+                                            {:else}
+                                                <span class="text">n/a</span>
+                                            {/if}
+                                        {:else}
+                                            {@const itemsNum = document[columnId]?.length}
+                                            <Button.Button
+                                                variant="extra-compact"
+                                                disabled={!itemsNum}
+                                                badge={itemsNum ?? 0}
                                                 on:click={(e) => {
-                                                    e.preventDefault();
                                                     e.stopPropagation();
-                                                    goto(
-                                                        `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/collection/${attr.relatedCollection}/document/${related.$id}`
-                                                    );
+                                                    e.preventDefault();
+                                                    relationshipData = document[columnId];
+                                                    showRelationships = true;
+                                                    selectedRelationship = attr;
                                                 }}>
-                                                {#each args as arg, i}
-                                                    {#if arg !== undefined}
-                                                        {#if i}&nbsp;|{/if}
-                                                        <span class="text" data-private
-                                                            >{related?.[arg]}</span>
-                                                    {/if}
-                                                {/each}
-                                            </Link.Button>
-                                        {:else}
-                                            <span class="text">n/a</span>
+                                                Items
+                                            </Button.Button>
                                         {/if}
                                     {:else}
-                                        {@const itemsNum = document[columnId]?.length}
-                                        <Button.Button
-                                            variant="extra-compact"
-                                            disabled={!itemsNum}
-                                            badge={itemsNum ?? 0}
-                                            on:click={(e) => {
-                                                e.stopPropagation();
-                                                e.preventDefault();
-                                                relationshipData = document[columnId];
-                                                showRelationships = true;
-                                                selectedRelationship = attr;
-                                            }}>
-                                            Items
-                                        </Button.Button>
-                                    {/if}
-                                {:else}
-                                    {@const value = document[columnId]}
-                                    {@const formatted = formatColumn(document[columnId])}
-                                    {@const isDatetimeAttribute = attr.type === 'datetime'}
-                                    {@const isEncryptedAttribute = isString(attr) && attr.encrypt}
-                                    {#if isDatetimeAttribute}
-                                        <DualTimeView time={value}>
-                                            <span slot="title">Timestamp</span>
-                                            {toLocaleDateTime(value, true)}
-                                        </DualTimeView>
-                                    {:else if isEncryptedAttribute}
-                                        <button on:click={(e) => e.preventDefault()}>
-                                            <InteractiveText
-                                                copy={false}
-                                                variant="secret"
-                                                isVisible={false}
-                                                text={formatted} />
-                                        </button>
-                                    {:else if formatted.length > 20}
-                                        <Tooltip placement="bottom" portal>
+                                        {@const value = document[columnId]}
+                                        {@const formatted = formatColumn(document[columnId])}
+                                        {@const isDatetimeAttribute = attr.type === 'datetime'}
+                                        {@const isEncryptedAttribute =
+                                            isString(attr) && attr.encrypt}
+                                        {#if isDatetimeAttribute}
+                                            <DualTimeView time={value}>
+                                                <span slot="title">Timestamp</span>
+                                                {toLocaleDateTime(value, true)}
+                                            </DualTimeView>
+                                        {:else if isEncryptedAttribute}
+                                            <button on:click={(e) => e.preventDefault()}>
+                                                <InteractiveText
+                                                    copy={false}
+                                                    variant="secret"
+                                                    isVisible={false}
+                                                    text={formatted} />
+                                            </button>
+                                        {:else if formatted.length > 20}
+                                            <Tooltip placement="bottom" portal>
+                                                <Typography.Text truncate>
+                                                    {formatted}
+                                                </Typography.Text>
+                                                <span
+                                                    slot="tooltip"
+                                                    style:white-space="pre-wrap"
+                                                    style:word-break="break-word">
+                                                    {formatted}
+                                                </span>
+                                            </Tooltip>
+                                        {:else if formatted === 'null'}
+                                            <Badge variant="secondary" content="NULL" size="xs" />
+                                        {:else}
                                             <Typography.Text truncate>
                                                 {formatted}
                                             </Typography.Text>
-                                            <span
-                                                slot="tooltip"
-                                                style:white-space="pre-wrap"
-                                                style:word-break="break-word">
-                                                {formatted}
-                                            </span>
-                                        </Tooltip>
-                                    {:else if formatted === 'null'}
-                                        <Badge variant="secondary" content="NULL" size="xs" />
-                                    {:else}
-                                        <Typography.Text truncate>
-                                            {formatted}
-                                        </Typography.Text>
+                                        {/if}
                                     {/if}
                                 {/if}
                             {/if}
-                        {/if}
-                    </Spreadsheet.Cell>
-                {/each}
-            </Spreadsheet.Row.Base>
-        {/each}
-
-        <svelte:fragment slot="footer">
-            <Layout.Stack
-                direction="row"
-                alignContent="center"
-                alignItems="center"
-                justifyContent="space-between">
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                    {selectedRows.length
-                        ? `${selectedRows.length} records selected`
-                        : `${documents.documents.length} records`}
-                </Typography.Text>
-
-                <div style:margin-right="var(--space-6)">
-                    <Button.Button
-                        variant="extra-compact"
-                        on:click={() => {
-                            $randomDataModalState.show = true;
-                        }}>Generate random data</Button.Button>
-                </div>
-            </Layout.Stack>
-        </svelte:fragment>
-    </Spreadsheet.Root>
+                        </Spreadsheet.Cell>
+                    {/each}
+                </Spreadsheet.Row.Base>
+            {/each}
+
+            <svelte:fragment slot="footer">
+                <Layout.Stack
+                    direction="row"
+                    alignContent="center"
+                    alignItems="center"
+                    justifyContent="space-between">
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        {selectedRows.length
+                            ? `${selectedRows.length} records selected`
+                            : `${documents.documents.length} records`}
+                    </Typography.Text>
+
+                    <div style:margin-right="var(--space-6)">
+                        <Button.Button
+                            variant="extra-compact"
+                            on:click={() => {
+                                $randomDataModalState.show = true;
+                            }}>Generate random data</Button.Button>
+                    </div>
+                </Layout.Stack>
+            </svelte:fragment>
+        </Spreadsheet.Root>
+    {/key}
 
     {#if selectedRows.length > 0}
         <div class="floating-action-bar">

From 000e534d432558117483416f53dfab138fda3aa4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 29 Jul 2025 19:58:49 +0530
Subject: [PATCH 057/118] fix: misc stuff.

---
 package.json                              |  2 +-
 pnpm-lock.yaml                            | 10 +++++-----
 src/lib/components/columnSelector.svelte  |  3 ++-
 src/lib/components/filters/content.svelte |  2 +-
 src/lib/components/sidebar.svelte         |  2 +-
 5 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index a65379ebbc..ec3f7fb819 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 0e6defd685..1b689ea467 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -260,8 +260,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289}
     version: 1.9.0
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
@@ -3653,7 +3653,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@8836b0c': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@2289': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 77510c802e..43dbbeebdb 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -245,7 +245,8 @@
 {/if}
 
 <style lang="scss">
-    .actions-menu-wrapper {
+     /* global because its on a tooltip slot, nested */
+    :global(.actions-menu-wrapper) {
         overflow: scroll;
         margin-bottom: -0.35rem;
 
diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte
index 1fd218fb9f..5b9ca0d549 100644
--- a/src/lib/components/filters/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -85,7 +85,7 @@
 </script>
 
 <div>
-    <form on:submit|preventDefault={addFilterAndReset}>
+    <form onsubmit={addFilterAndReset}>
         <Layout.Stack gap="s" direction="row" alignItems="flex-start">
             <InputSelect
                 id="column"
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 686a12a5f7..68f0a9bce2 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -35,7 +35,7 @@
     import MobileSupportModal from '$routes/(console)/wizard/support/mobileSupportModal.svelte';
     import MobileFeedbackModal from '$routes/(console)/wizard/feedback/mobileFeedbackModal.svelte';
     import { getSidebarState, updateSidebarState } from '$lib/helpers/sidebar';
-    import { isTabletViewport, isSmallViewport, isDesktopViewport } from '$lib/stores/viewport';
+    import { isTabletViewport, isSmallViewport } from '$lib/stores/viewport';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { bannerSpacing } from '$lib/layout/headerAlert.svelte';
 

From 5ed18eb79f972c2f1e5c27eb5c03403143cbfe5e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Jul 2025 11:40:33 +0530
Subject: [PATCH 058/118] refactor: tables > grid api.

---
 package.json                                    |  2 +-
 pnpm-lock.yaml                                  | 10 +++++-----
 src/lib/commandCenter/searchers/tables.ts       |  2 +-
 src/lib/components/csvImportBox.svelte          |  2 +-
 src/lib/stores/sdk.ts                           |  4 ++--
 .../databases/database-[database]/+page.ts      |  2 +-
 .../database-[database]/createTable.svelte      |  2 +-
 .../databases/database-[database]/delete.svelte |  2 +-
 .../database-[database]/settings/+page.svelte   |  2 +-
 .../databases/database-[database]/string.svelte |  4 ++--
 .../table-[table]/+layout.ts                    |  4 ++--
 .../database-[database]/table-[table]/+page.ts  |  2 +-
 .../table-[table]/activity/+page.ts             |  2 +-
 .../table-[table]/columns/boolean.svelte        |  4 ++--
 .../table-[table]/columns/datetime.svelte       |  4 ++--
 .../table-[table]/columns/deleteColumn.svelte   |  2 +-
 .../table-[table]/columns/email.svelte          |  4 ++--
 .../table-[table]/columns/enum.svelte           |  4 ++--
 .../table-[table]/columns/float.svelte          |  4 ++--
 .../table-[table]/columns/integer.svelte        |  4 ++--
 .../table-[table]/columns/ip.svelte             |  4 ++--
 .../table-[table]/columns/relationship.svelte   |  6 +++---
 .../table-[table]/columns/string.svelte         |  4 ++--
 .../table-[table]/columns/url.svelte            |  4 ++--
 .../table-[table]/create/+page.svelte           |  2 +-
 .../table-[table]/indexes/createIndex.svelte    | 17 +++++++++--------
 .../table-[table]/indexes/deleteIndex.svelte    |  2 +-
 .../table-[table]/row-[row]/+layout.ts          |  6 +++---
 .../table-[table]/row-[row]/+page.svelte        |  2 +-
 .../table-[table]/row-[row]/activity/+page.ts   |  2 +-
 .../row-[row]/columns/relationship.svelte       |  2 +-
 .../table-[table]/row-[row]/delete.svelte       |  2 +-
 .../table-[table]/row-[row]/row.svelte          |  2 +-
 .../row-[row]/settings/+page.svelte             |  2 +-
 .../table-[table]/settings/deleteTable.svelte   |  2 +-
 .../table-[table]/settings/updateName.svelte    |  2 +-
 .../settings/updatePermissions.svelte           |  2 +-
 .../settings/updateSecurity.svelte              |  2 +-
 .../table-[table]/settings/updateStatus.svelte  |  2 +-
 .../table-[table]/table.svelte                  |  2 +-
 .../table-[table]/usage/[[period]]/+page.ts     |  8 ++++----
 .../databases/database-[database]/table.svelte  |  2 +-
 42 files changed, 73 insertions(+), 72 deletions(-)

diff --git a/package.json b/package.json
index a02a8af39f..22d4d4a2f0 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@935b30f",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 81067a61a8..c0d12a22bf 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@935b30f
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@935b30f
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -257,8 +257,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@935b30f':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@935b30f}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0}
     version: 1.9.0
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fee5c539136e15c93cd3f2398d25cb217caa8dc8':
@@ -3651,7 +3651,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@935b30f': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0': {}
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fee5c539136e15c93cd3f2398d25cb217caa8dc8(svelte@5.25.3)':
     dependencies:
diff --git a/src/lib/commandCenter/searchers/tables.ts b/src/lib/commandCenter/searchers/tables.ts
index 1a8af14119..8beff8e058 100644
--- a/src/lib/commandCenter/searchers/tables.ts
+++ b/src/lib/commandCenter/searchers/tables.ts
@@ -8,7 +8,7 @@ export const tablesSearcher = (async (query: string) => {
     const databaseId = page.params.database;
     const { tables } = await sdk
         .forProject(page.params.region, page.params.project)
-        .tables.list(databaseId);
+        .grids.listTables(databaseId);
 
     return tables
         .filter((table) => table.name.toLowerCase().includes(query.toLowerCase()))
diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index 443463d002..48bef97ac5 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -75,7 +75,7 @@
             try {
                 const table = await sdk
                     .forProject(page.params.region, page.params.project)
-                    .tables.get(databaseId, tableId);
+                    .grids.getTable(databaseId, tableId);
                 tableName = table.name;
             } catch {
                 tableName = null;
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 469a3b0385..2ef1fa0d66 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -21,7 +21,7 @@ import {
     Vcs,
     Sites,
     Tokens,
-    Tables,
+    Grids,
     Domains
 } from '@appwrite.io/console';
 import { Billing } from '../sdk/billing';
@@ -124,7 +124,7 @@ const sdkForProject = {
     proxy: new Proxy(clientProject),
     migrations: new Migrations(clientProject),
     sites: new Sites(clientProject),
-    tables: new Tables(clientProject)
+    grids: new Grids(clientProject)
 };
 
 export const realtime = {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
index 9cb9662a7b..5d99e96f3e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.ts
@@ -14,7 +14,7 @@ export const load: PageLoad = async ({ params, url, route, depends }) => {
 
     const tables = await sdk
         .forProject(params.region, params.project)
-        .tables.list(
+        .grids.listTables(
             params.database,
             [Query.limit(limit), Query.offset(offset), Query.orderDesc('')],
             search || undefined
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
index 87f8215d9b..39929480f2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
@@ -26,7 +26,7 @@
         try {
             const table = await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.create(databaseId, id ? id : ID.unique(), name);
+                .grids.createTable(databaseId, id ? id : ID.unique(), name);
 
             showCreate = false;
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
index eab134fd32..e42de5ae70 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
@@ -47,7 +47,7 @@
 
             tables = await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.list(databaseId, queries);
+                .grids.listTables(databaseId, queries);
 
             const tablePromises = tables.tables.map(async (table) => {
                 return {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
index f5e7cab127..4543858360 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
@@ -28,7 +28,7 @@
     async function loadTableCount() {
         const { total } = await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.list($database.$id, [Query.limit(1)]);
+            .grids.listTables($database.$id, [Query.limit(1)]);
         return total;
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
index c729c7a154..86ea8a2537 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createStringColumn(
+            .grids.createStringColumn(
                 databaseId,
                 tableId,
                 key,
@@ -29,7 +29,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateStringColumn(
+            .grids.updateStringColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts
index 49c33070e3..474a4c67d5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts
@@ -10,11 +10,11 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.TABLE);
 
     const [table, allTables] = await Promise.all([
-        sdk.forProject(params.region, params.project).tables.get(params.database, params.table),
+        sdk.forProject(params.region, params.project).grids.getTable(params.database, params.table),
 
         sdk
             .forProject(params.region, params.project)
-            .tables.list(params.database, [Query.orderDesc(''), Query.limit(100)])
+            .grids.listTables(params.database, [Query.orderDesc(''), Query.limit(100)])
     ]);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
index 38538bf4dc..bcf2ab647f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
@@ -27,7 +27,7 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
         query,
         rows: await sdk
             .forProject(params.region, params.project)
-            .tables.listRows(params.database, params.table, [
+            .grids.listRows(params.database, params.table, [
                 Query.limit(limit),
                 Query.offset(offset),
                 Query.orderDesc(''),
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.ts
index eaf1207155..160286a61a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/activity/+page.ts
@@ -14,7 +14,7 @@ export const load: PageLoad = async ({ params, url, route }) => {
         limit,
         logs: await sdk
             .forProject(params.region, params.project)
-            .tables.listLogs(params.database, params.table, [
+            .grids.listTableLogs(params.database, params.table, [
                 Query.limit(limit),
                 Query.offset(offset)
             ])
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte
index 469b26690f..7c43d1f732 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createBooleanColumn(
+            .grids.createBooleanColumn(
                 databaseId,
                 tableId,
                 key,
@@ -28,7 +28,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateBooleanColumn(
+            .grids.updateBooleanColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte
index 358ad9b8bb..90a3e076fe 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createDatetimeColumn(
+            .grids.createDatetimeColumn(
                 databaseId,
                 tableId,
                 key,
@@ -29,7 +29,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateDatetimeColumn(
+            .grids.updateDatetimeColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
index 2035710d13..e962d35abf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
@@ -23,7 +23,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.deleteColumn(databaseId, $table.$id, selectedColumn.key);
+                .grids.deleteColumn(databaseId, $table.$id, selectedColumn.key);
 
             showDelete = false;
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte
index e3c68f216e..59fc70d70c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createEmailColumn(
+            .grids.createEmailColumn(
                 databaseId,
                 tableId,
                 key,
@@ -29,7 +29,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateEmailColumn(
+            .grids.updateEmailColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte
index 1ecc105420..fd9ad73f0b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createEnumColumn(
+            .grids.createEnumColumn(
                 databaseId,
                 tableId,
                 key,
@@ -30,7 +30,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateEnumColumn(
+            .grids.updateEnumColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte
index 9bcb213719..61069f2a5b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createFloatColumn(
+            .grids.createFloatColumn(
                 databaseId,
                 tableId,
                 key,
@@ -31,7 +31,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateFloatColumn(
+            .grids.updateFloatColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte
index 69695c3dd5..07a9a4414a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createIntegerColumn(
+            .grids.createIntegerColumn(
                 databaseId,
                 tableId,
                 key,
@@ -31,7 +31,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateIntegerColumn(
+            .grids.updateIntegerColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte
index e6018ec70d..6e977d5ad1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createIpColumn(
+            .grids.createIpColumn(
                 databaseId,
                 tableId,
                 key,
@@ -28,7 +28,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateIpColumn(
+            .grids.updateIpColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte
index 67c07808f6..896d5ca8ce 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte
@@ -21,7 +21,7 @@
 
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createRelationshipColumn(
+            .grids.createRelationshipColumn(
                 databaseId,
                 tableId,
                 data.relatedTable,
@@ -45,7 +45,7 @@
 
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateRelationshipColumn(
+            .grids.updateRelationshipColumn(
                 databaseId,
                 tableId,
                 originalKey,
@@ -97,7 +97,7 @@
         const queries = [Query.limit(100)];
         return sdk
             .forProject(page.params.region, page.params.project)
-            .tables.list(databaseId, queries, search);
+            .grids.listTables(databaseId, queries, search);
     }
 
     const debouncedFetchTables = debounce(async () => {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte
index 22372f60a3..ab3a830418 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createStringColumn(
+            .grids.createStringColumn(
                 databaseId,
                 tableId,
                 key,
@@ -30,7 +30,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateStringColumn(
+            .grids.updateStringColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte
index cbc744918f..2cadeddfe2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte
@@ -11,7 +11,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.createUrlColumn(
+            .grids.createUrlColumn(
                 databaseId,
                 tableId,
                 key,
@@ -29,7 +29,7 @@
     ) {
         await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.updateUrlColumn(
+            .grids.updateUrlColumn(
                 databaseId,
                 tableId,
                 originalKey,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte
index f2ec17d3ec..8fd51dd9d1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte
@@ -53,7 +53,7 @@
         try {
             const { $id } = await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.createRow(
+                .grids.createRow(
                     page.params.database,
                     page.params.table,
                     $createRow.id ?? ID.unique(),
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
index 8a564fb52f..7507b04248 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
@@ -75,14 +75,15 @@
         }
 
         try {
-            await sdk.forProject(page.params.region, page.params.project).tables.createIndex(
-                databaseId,
-                $table.$id,
-                key,
-                selectedType,
-                columnList.map((a) => a.value),
-                columnList.map((a) => a.order),
-                columnList.map((a) => (a.length ? Number(a.length) : null))
+            await sdk.forProject(page.params.region, page.params.project)
+                .grids.createIndex(
+                    databaseId,
+                    $table.$id,
+                    key,
+                    selectedType,
+                    columnList.map((a) => a.value),
+                    columnList.map((a) => a.order),
+                    columnList.map((a) => (a.length ? Number(a.length) : null))
             );
 
             await Promise.allSettled([
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/deleteIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/deleteIndex.svelte
index ecdcb395e4..6c392f3f3b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/deleteIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/deleteIndex.svelte
@@ -20,7 +20,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.deleteIndex(databaseId, $table.$id, selectedIndex.key);
+                .grids.deleteIndex(databaseId, $table.$id, selectedIndex.key);
             await invalidate(Dependencies.TABLE);
             showDelete = false;
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts
index ea01397717..2b299e8306 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts
@@ -12,13 +12,13 @@ export const load: LayoutLoad = async ({ params, parent, depends }) => {
 
     const row = await sdk
         .forProject(params.region, params.project)
-        .tables.getRow(params.database, params.table, params.row, buildWildcardColumnsQuery(table));
+        .grids.getRow(params.database, params.table, params.row, buildWildcardColumnsQuery(table));
 
     /**
      * Sanitize DateTime to remove UTC Timezone section.
      */
-    table.columns.forEach((column) => {
-        const { type, key, array } = column as unknown as Columns;
+    table.columns.forEach((column: Columns) => {
+        const { type, key, array } = column;
         if (type === 'datetime') {
             if (array) {
                 row[key] = row[key].map((n: string) => {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte
index 6b83869b2a..fc61ffb249 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte
@@ -51,7 +51,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.updateRow(databaseId, tableId, rowId, $work, $work.$permissions);
+                .grids.updateRow(databaseId, tableId, rowId, $work, $work.$permissions);
 
             invalidate(Dependencies.ROW);
             trackEvent(Submit.RowUpdate);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/activity/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/activity/+page.ts
index ca69a70443..35dbfa22d6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/activity/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/activity/+page.ts
@@ -14,7 +14,7 @@ export const load: PageLoad = async ({ params, url, route }) => {
         limit,
         logs: await sdk
             .forProject(params.region, params.project)
-            .tables.listRowLogs(params.database, params.table, params.row, [
+            .grids.listRowLogs(params.database, params.table, params.row, [
                 Query.limit(limit),
                 Query.offset(offset)
             ])
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte
index 311f4079e7..46619afecc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte
@@ -63,7 +63,7 @@
 
         return await sdk
             .forProject(page.params.region, page.params.project)
-            .tables.listRows(databaseId, column.relatedTable, queries);
+            .grids.listRows(databaseId, column.relatedTable, queries);
     }
 
     function getAvailableOptions(excludeIndex?: number) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte
index 32c23a2de8..5d1cf7892d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte
@@ -20,7 +20,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.deleteRow(databaseId, page.params.table, page.params.row);
+                .grids.deleteRow(databaseId, page.params.table, page.params.row);
             showDelete = false;
             addNotification({
                 type: 'success',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte
index 535e7ca9ff..1318f4e774 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte
@@ -50,7 +50,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.updateRow(databaseId, tableId, rowId, $work, $work.$permissions);
+                .grids.updateRow(databaseId, tableId, rowId, $work, $work.$permissions);
             await invalidate(Dependencies.ROW);
 
             currentRow = JSON.stringify($work);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
index b1ed736c67..27e94b0ccf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
@@ -25,7 +25,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.updateRow(
+                .grids.updateRow(
                     $row.$databaseId,
                     $row.$tableId,
                     $row.$id,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte
index 74a9e27d3f..c51e097fcd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte
@@ -19,7 +19,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.delete(databaseId, $table.$id);
+                .grids.deleteTable(databaseId, $table.$id);
             await invalidate(Dependencies.DATABASE);
             showDelete = false;
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateName.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateName.svelte
index a2349261e7..641338d407 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateName.svelte
@@ -22,7 +22,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.update(
+                .grids.updateTable(
                     databaseId,
                     $table.$id,
                     tableName,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updatePermissions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updatePermissions.svelte
index 795125324a..bf9f3fe8cb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updatePermissions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updatePermissions.svelte
@@ -27,7 +27,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.update(
+                .grids.updateTable(
                     databaseId,
                     $table.$id,
                     $table.name,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateSecurity.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateSecurity.svelte
index b06c557fdc..05cf901465 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateSecurity.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateSecurity.svelte
@@ -22,7 +22,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.update(
+                .grids.updateTable(
                     databaseId,
                     $table.$id,
                     $table.name,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte
index ce0ac93cea..699e996ee6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte
@@ -23,7 +23,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.update(
+                .grids.updateTable(
                     databaseId,
                     $table.$id,
                     $table.name,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte
index 0e28835663..ec4573bdaf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte
@@ -107,7 +107,7 @@
         const promises = selectedRows.map((rowId) =>
             sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.deleteRow(databaseId, tableId, rowId)
+                .grids.deleteRow(databaseId, tableId, rowId)
         );
         try {
             await Promise.all(promises);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.ts
index bd0a8843ee..9cdb7bdd1e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/usage/[[period]]/+page.ts
@@ -1,14 +1,14 @@
 import { isValueOfStringEnum } from '$lib/helpers/types';
 import { sdk } from '$lib/stores/sdk';
-import { DatabaseUsageRange } from '@appwrite.io/console';
+import { GridUsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
-    const period = isValueOfStringEnum(DatabaseUsageRange, params.period)
+    const period = isValueOfStringEnum(GridUsageRange, params.period)
         ? params.period
-        : DatabaseUsageRange.ThirtyDays;
+        : GridUsageRange.ThirtyDays;
 
     return sdk
         .forProject(params.region, params.project)
-        .tables.getUsage(params.database, params.table, period);
+        .grids.getTableUsage(params.database, params.table, period);
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
index 3cb279185e..4e4b4ae725 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte
@@ -28,7 +28,7 @@
         const promises = selectedTables.map((tableId) =>
             sdk
                 .forProject(page.params.region, page.params.project)
-                .tables.delete(databaseId, tableId)
+                .grids.deleteTable(databaseId, tableId)
         );
         try {
             await Promise.all(promises);

From 033fc26907d559b24dfd84c1ea13141315f904c4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Jul 2025 11:58:37 +0530
Subject: [PATCH 059/118] =?UTF-8?q?updates:=20what=20`Databases`=20and=20w?=
 =?UTF-8?q?hat=20legacy=20APIs=3F=20=F0=9F=91=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/commandCenter/searchers/databases.ts    |  2 +-
 src/lib/stores/sdk.ts                           |  2 --
 .../databases/+page.ts                          |  2 +-
 .../databases/create.svelte                     |  2 +-
 .../databases/database-[database]/+layout.ts    |  4 +++-
 .../databases/database-[database]/delete.svelte |  2 +-
 .../database-[database]/settings/+page.svelte   |  2 +-
 .../table-[table]/indexes/createIndex.svelte    | 17 ++++++++---------
 .../row-[row]/settings/+page.svelte             |  8 +-------
 .../usage/[[period]]/+page.ts                   |  3 ++-
 .../databases/usage/[[period]]/+page.ts         |  3 ++-
 11 files changed, 21 insertions(+), 26 deletions(-)

diff --git a/src/lib/commandCenter/searchers/databases.ts b/src/lib/commandCenter/searchers/databases.ts
index f50a1474d6..6775bfd4a0 100644
--- a/src/lib/commandCenter/searchers/databases.ts
+++ b/src/lib/commandCenter/searchers/databases.ts
@@ -8,7 +8,7 @@ import { page } from '$app/state';
 export const dbSearcher = (async (query: string) => {
     const { databases } = await sdk
         .forProject(page.params.region, page.params.project)
-        .databases.list();
+        .grids.listDatabases();
 
     return databases
         .filter((db) => db.name.toLowerCase().includes(query.toLowerCase()))
diff --git a/src/lib/stores/sdk.ts b/src/lib/stores/sdk.ts
index 2ef1fa0d66..66352c8adc 100644
--- a/src/lib/stores/sdk.ts
+++ b/src/lib/stores/sdk.ts
@@ -5,7 +5,6 @@ import {
     Avatars,
     Client,
     Console,
-    Databases,
     Functions,
     Health,
     Locale,
@@ -109,7 +108,6 @@ const sdkForProject = {
     account: new Account(clientProject),
     avatars: new Avatars(clientProject),
     backups: new Backups(clientProject),
-    databases: new Databases(clientProject),
     functions: new Functions(clientProject),
     health: new Health(clientProject),
     locale: new Locale(clientProject),
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
index 35841ef153..5be2d24b37 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
@@ -50,7 +50,7 @@ async function fetchDatabasesAndBackups(
 
     const databases = await sdk
         .forProject(params.region, params.project)
-        .databases.list(
+        .grids.listDatabases(
             [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
             search || undefined
         );
diff --git a/src/routes/(console)/project-[region]-[project]/databases/create.svelte b/src/routes/(console)/project-[region]-[project]/databases/create.svelte
index fdc6cb95f8..4582de8a63 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/create.svelte
@@ -81,7 +81,7 @@
             const databaseId = id ? id : ID.unique();
             const database = await sdk
                 .forProject(page.params.region, page.params.project)
-                .databases.create(databaseId, name);
+                .grids.createDatabase(databaseId, name);
 
             await createPolicies(databaseId);
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
index 03283b9676..cb1940da66 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.ts
@@ -10,6 +10,8 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     return {
         header: Header,
         breadcrumbs: Breadcrumbs,
-        database: await sdk.forProject(params.region, params.project).databases.get(params.database)
+        database: await sdk
+            .forProject(params.region, params.project)
+            .grids.getDatabase(params.database)
     };
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
index e42de5ae70..7fc4ebd8db 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte
@@ -69,7 +69,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .databases.delete(databaseId);
+                .grids.deleteDatabase(databaseId);
             showDelete = false;
             addNotification({
                 type: 'success',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
index 4543858360..acc93b8ad0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte
@@ -42,7 +42,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .databases.update(page.params.database, databaseName);
+                .grids.updateDatabase(page.params.database, databaseName);
             await invalidate(Dependencies.DATABASE);
             addNotification({
                 message: 'Name has been updated',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
index 7507b04248..474cfca160 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
@@ -75,15 +75,14 @@
         }
 
         try {
-            await sdk.forProject(page.params.region, page.params.project)
-                .grids.createIndex(
-                    databaseId,
-                    $table.$id,
-                    key,
-                    selectedType,
-                    columnList.map((a) => a.value),
-                    columnList.map((a) => a.order),
-                    columnList.map((a) => (a.length ? Number(a.length) : null))
+            await sdk.forProject(page.params.region, page.params.project).grids.createIndex(
+                databaseId,
+                $table.$id,
+                key,
+                selectedType,
+                columnList.map((a) => a.value),
+                columnList.map((a) => a.order),
+                columnList.map((a) => (a.length ? Number(a.length) : null))
             );
 
             await Promise.allSettled([
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
index 27e94b0ccf..180694f189 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
@@ -25,13 +25,7 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .grids.updateRow(
-                    $row.$databaseId,
-                    $row.$tableId,
-                    $row.$id,
-                    $row.data,
-                    permissions
-                );
+                .grids.updateRow($row.$databaseId, $row.$tableId, $row.$id, $row.data, permissions);
             await invalidate(Dependencies.ROW);
             arePermsDisabled = true;
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts
index 9b8f7d9a95..f809497396 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/usage/[[period]]/+page.ts
@@ -4,10 +4,11 @@ import { DatabaseUsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
+    // TODO: @Jake, should be GridUsageRange
     const period = isValueOfStringEnum(DatabaseUsageRange, params.period)
         ? params.period
         : DatabaseUsageRange.ThirtyDays;
     return sdk
         .forProject(params.region, params.project)
-        .databases.getDatabaseUsage(params.database, period);
+        .grids.getDatabaseUsage(params.database, period);
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts
index 70b9255be3..63dc3e7b46 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/usage/[[period]]/+page.ts
@@ -4,9 +4,10 @@ import { DatabaseUsageRange } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params }) => {
+    // TODO: @Jake, should be GridUsageRange
     const period = isValueOfStringEnum(DatabaseUsageRange, params.period)
         ? params.period
         : DatabaseUsageRange.ThirtyDays;
 
-    return sdk.forProject(params.region, params.project).databases.listUsage(period);
+    return sdk.forProject(params.region, params.project).grids.listDatabaseUsage(period);
 };

From 83c8ef31dcb130aa5bb8f89904ee437e047ed33a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Jul 2025 14:19:10 +0530
Subject: [PATCH 060/118] Branch merge - 'main' into '1.8.x'.

---
 src/lib/components/filters/content.svelte     |  2 +-
 src/lib/layout/gridHeader.svelte              |  8 +-----
 .../database-[database]/string.svelte         |  4 +--
 .../table-[table]/+layout.svelte              | 10 +++----
 .../table-[table]/columns/boolean.svelte      |  4 +--
 .../columns/createColumnDropdown.svelte       | 12 ++++----
 .../table-[table]/columns/datetime.svelte     |  4 +--
 .../table-[table]/columns/edit.svelte         |  2 +-
 .../table-[table]/columns/email.svelte        |  4 +--
 .../table-[table]/columns/enum.svelte         |  4 +--
 .../table-[table]/columns/float.svelte        |  4 +--
 .../table-[table]/columns/integer.svelte      |  4 +--
 .../table-[table]/columns/ip.svelte           |  4 +--
 .../table-[table]/columns/relationship.svelte |  4 +--
 .../table-[table]/columns/string.svelte       |  4 +--
 .../table-[table]/columns/url.svelte          |  4 +--
 .../table-[table]/create/+page.svelte         |  6 ++--
 .../table-[table]/relationshipsModal.svelte   |  2 +-
 .../table-[table]/row-[row]/+layout.ts        |  2 +-
 .../table-[table]/row-[row]/columns/store.ts  |  2 +-
 .../table-[table]/row-[row]/delete.svelte     | 28 +++++++++----------
 .../table-[table]/settings/displayName.svelte |  6 ++--
 .../settings/updateStatus.svelte              |  4 +--
 .../table-[table]/store.ts                    |  8 +++---
 .../table-[table]/subNavigation.svelte        | 10 +++----
 .../table-[table]/table.svelte                | 28 +++++++++----------
 26 files changed, 83 insertions(+), 91 deletions(-)

diff --git a/src/lib/components/filters/content.svelte b/src/lib/components/filters/content.svelte
index 1fd218fb9f..5b9ca0d549 100644
--- a/src/lib/components/filters/content.svelte
+++ b/src/lib/components/filters/content.svelte
@@ -85,7 +85,7 @@
 </script>
 
 <div>
-    <form on:submit|preventDefault={addFilterAndReset}>
+    <form onsubmit={addFilterAndReset}>
         <Layout.Stack gap="s" direction="row" alignItems="flex-start">
             <InputSelect
                 id="column"
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
index 076eac8419..c3532f1e0f 100644
--- a/src/lib/layout/gridHeader.svelte
+++ b/src/lib/layout/gridHeader.svelte
@@ -17,13 +17,7 @@
 <header class="grid-header">
     <Typography.Title size="m">{title}</Typography.Title>
     <div class="u-flex u-gap-16 u-contents-mobile">
-        <ViewSelector
-            {view}
-            {columns}
-            {isCustomTable}
-            {hideView}
-            {hideColumns}
-            {allowNoColumns} />
+        <ViewSelector {view} {columns} {isCustomTable} {hideView} {hideColumns} {allowNoColumns} />
         <div class="grid-header-col-2">
             <slot />
         </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
index 86ea8a2537..66677ff538 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/string.svelte
@@ -104,9 +104,9 @@
         bind:value={data.default} />
 {/if}
 <InputChoice id="required" label="Required" bind:value={data.required} disabled={data.array}>
-    Indicate whether this is a required attribute
+    Indicate whether this is a required column
 </InputChoice>
 <InputChoice id="array" label="Array" bind:value={data.array} disabled={data.required || editing}>
-    Indicate whether this attribute should act as an array, with the default value set as an empty
+    Indicate whether this column should act as an array, with the default value set as an empty
     array.
 </InputChoice>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index b70d5b5cb7..e5a7dccdd2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -2,13 +2,13 @@
     import { writable } from 'svelte/store';
     import type { Option } from './columns/store';
 
-    const createAttributeArgs = writable({
+    const createColumnArgs = writable({
         showCreate: false,
         selectedOption: null as Option['name'] | null
     });
 
     export const initCreateColumn = (option: Option['name']) => {
-        createAttributeArgs.set({ showCreate: true, selectedOption: option });
+        createColumnArgs.set({ showCreate: true, selectedOption: option });
     };
 
     const showCreateIndex = writable(false);
@@ -24,7 +24,7 @@
     import { onMount } from 'svelte';
     import { table } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
-    import CreateAttribute from './createColumn.svelte';
+    import CreateColumn from './createColumn.svelte';
     import { CreateColumnPanel } from '$lib/commandCenter/panels';
     import { database } from '../store';
     import { project } from '$routes/(console)/project-[region]-[project]/store';
@@ -204,8 +204,8 @@
 
 <slot />
 
-{#if $createAttributeArgs.showCreate}
-    <CreateAttribute {...$createAttributeArgs} />
+{#if $createColumnArgs.showCreate}
+    <CreateColumn {...$createColumnArgs} />
 {/if}
 
 {#if $showCreateIndex}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte
index 7c43d1f732..480d185174 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/boolean.svelte
@@ -93,11 +93,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/createColumnDropdown.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/createColumnDropdown.svelte
index c5d7298046..bfc31adc66 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/createColumnDropdown.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/createColumnDropdown.svelte
@@ -14,26 +14,26 @@
     <CsvDisabled>
         <Button size="s" disabled>
             <Icon icon={IconPlus} slot="start" size="s" />
-            Create attribute
+            Create column
         </Button>
     </CsvDisabled>
 {:else}
     <Popover let:toggle padding="none" placement="bottom-start">
         <slot {toggle}>
-            <Button on:click={toggle} event="create_attribute">
+            <Button on:click={toggle} event="create_column">
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create column
             </Button>
         </slot>
         <ActionMenu.Root slot="tooltip">
-            {#each columnOptions as attribute}
+            {#each columnOptions as column}
                 <ActionMenu.Item.Button
-                    leadingIcon={attribute.icon}
+                    leadingIcon={column.icon}
                     on:click={() => {
-                        selectedOption = attribute.name;
+                        selectedOption = column.name;
                         showCreate = true;
                     }}>
-                    {attribute.name}
+                    {column.name}
                 </ActionMenu.Item.Button>
             {/each}
         </ActionMenu.Root>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte
index 90a3e076fe..3de3454359 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/datetime.svelte
@@ -85,11 +85,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte
index caccb58d9c..6911c33333 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/edit.svelte
@@ -53,7 +53,7 @@
     }
 
     $: onShow(showEdit);
-    $: title = `Update ${columnOptions.find((v) => v.name === option.name)?.sentenceName ?? ''} attribute`;
+    $: title = `Update ${columnOptions.find((v) => v.name === option.name)?.sentenceName ?? ''} column`;
 
     function onShow(show: boolean) {
         if (show) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte
index 59fc70d70c..4e2cea63cb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/email.svelte
@@ -86,11 +86,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte
index fd9ad73f0b..0301326a74 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/enum.svelte
@@ -117,11 +117,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte
index 61069f2a5b..a984dc1f86 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/float.svelte
@@ -115,11 +115,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte
index 07a9a4414a..b28e5cde8c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/integer.svelte
@@ -113,11 +113,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte
index 6e977d5ad1..5688637a53 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/ip.svelte
@@ -85,11 +85,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte
index 896d5ca8ce..9026ce8517 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/relationship.svelte
@@ -108,8 +108,8 @@
 
     function updateKeyName() {
         if (!editing) {
-            const collection = tableList.tables.find((n) => n.$id === data.relatedTable);
-            data.key = camelize(collection.name);
+            const table = tableList.tables.find((n) => n.$id === data.relatedTable);
+            data.key = camelize(table.name);
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte
index ab3a830418..5ea2fc165f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/string.svelte
@@ -159,8 +159,8 @@
                         </Layout.Stack>
                     </button>
                     <Typography.Text color="--fgcolor-neutral-tertiary">
-                        Protect attribute against data leaks for best privacy compliance. Encrypted
-                        attributes cannot be queried.
+                        Protect column against data leaks for best privacy compliance. Encrypted
+                        columns cannot be queried.
                     </Typography.Text>
                 </Layout.Stack>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte
index 2cadeddfe2..0c7a330532 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/url.svelte
@@ -86,11 +86,11 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this column is required" />
 <Selector.Checkbox
     size="s"
     id="array"
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute is an array. Defaults to an empty array." />
+    description="Indicate whether this column is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte
index 8fd51dd9d1..7b8a4bb65f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/create/+page.svelte
@@ -22,7 +22,7 @@
     let formComponent: Form;
     let isSubmitting = writable(false);
 
-    type CreateDocument = {
+    type CreateRow = {
         id?: string;
         row: object;
         permissions: string[];
@@ -44,7 +44,7 @@
             columns: availableColumns
         };
 
-        return writable<CreateDocument>({ ...initial });
+        return writable<CreateRow>({ ...initial });
     }
 
     const createRow = createRowWritable();
@@ -66,7 +66,7 @@
                 type: 'success'
             });
             trackEvent(Submit.RowCreate, {
-                customId: !!$createRow.id // todo: @itznotabug - change store name
+                customId: !!$createRow.id
             });
             goto(
                 `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/table-${page.params.table}/row-${$id}`
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/relationshipsModal.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/relationshipsModal.svelte
index b834a00c76..c61a3ee1c6 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/relationshipsModal.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/relationshipsModal.svelte
@@ -8,7 +8,7 @@
     import { Table } from '@appwrite.io/pink-svelte';
 
     export let show = false;
-    export let data: Partial<Models.Document>[];
+    export let data: Partial<Models.Row>[];
     export let selectedRelationship: Models.ColumnRelationship = null;
     const databaseId = page.params.database;
     const limit = 10;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts
index 2b299e8306..c136e06d70 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+layout.ts
@@ -7,8 +7,8 @@ import type { Columns } from '../store';
 import { buildWildcardColumnsQuery } from './columns/store';
 
 export const load: LayoutLoad = async ({ params, parent, depends }) => {
-    depends(Dependencies.ROW);
     const { table } = await parent();
+    depends(Dependencies.ROW);
 
     const row = await sdk
         .forProject(params.region, params.project)
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts
index 454e2b0cba..7d92c8e229 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts
@@ -1,5 +1,5 @@
-import { type Models, Query } from '@appwrite.io/console';
 import type { Columns } from '../../store';
+import { type Models, Query } from '@appwrite.io/console';
 
 export function isRelationshipToMany(column: Models.ColumnRelationship) {
     if (!column) return false;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte
index 5d1cf7892d..5121b3af18 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/delete.svelte
@@ -45,17 +45,17 @@
         'restrict' = 'Row cannot be deleted'
     }
 
-    $: relColumns = $columns?.filter(
-        (attribute) =>
-            isRelationship(attribute) &&
+    $: relatedColumns = $columns?.filter(
+        (column) =>
+            isRelationship(column) &&
             // One-to-One are always included
-            (attribute.relationType === 'oneToOne' ||
+            (column.relationType === 'oneToOne' ||
                 // One-to-Many: Only if parent is deleted
-                (attribute.relationType === 'oneToMany' && attribute.side === 'parent') ||
+                (column.relationType === 'oneToMany' && column.side === 'parent') ||
                 // Many-to-One: Only include if child is deleted
-                (attribute.relationType === 'manyToOne' && attribute.side === 'child') ||
+                (column.relationType === 'manyToOne' && column.side === 'child') ||
                 // Many-to-Many: Only include if the parent is being deleted
-                (isRelationshipToMany(attribute) && attribute.side === 'parent'))
+                (isRelationshipToMany(column) && column.side === 'parent'))
     ) as Models.ColumnRelationship[];
 </script>
 
@@ -64,7 +64,7 @@
         Are you sure you want to delete <b>the row from <span data-private>{$table.name}</span></b>?
     </p>
 
-    {#if relColumns?.length}
+    {#if relatedColumns?.length}
         <p class="text">This row contains the following relationships:</p>
         <Table.Root
             let:root
@@ -78,23 +78,23 @@
                 <Table.Header.Cell column="setting" {root}>Setting</Table.Header.Cell>
                 <Table.Header.Cell column="desc" {root} />
             </svelte:fragment>
-            {#each relColumns as attr}
+            {#each relatedColumns as column}
                 <Table.Row.Base {root}>
                     <Table.Cell column="relations" {root}>
                         <span class="u-flex u-cross-center u-gap-8">
-                            {#if attr.twoWay}
+                            {#if column.twoWay}
                                 <span class="icon-switch-horizontal"></span>
                             {:else}
                                 <span class="icon-arrow-sm-right"></span>
                             {/if}
-                            <Trim>{attr.key}</Trim>
+                            <Trim>{column.key}</Trim>
                         </span>
                     </Table.Cell>
                     <Table.Cell column="setting" {root}>
-                        {attr.onDelete}
+                        {column.onDelete}
                     </Table.Cell>
                     <Table.Cell column="desc" {root}>
-                        {Deletion[attr.onDelete]}
+                        {Deletion[column.onDelete]}
                     </Table.Cell>
                 </Table.Row.Base>
             {/each}
@@ -109,6 +109,6 @@
 
     <svelte:fragment slot="footer">
         <Button text on:click={() => (showDelete = false)}>Cancel</Button>
-        <Button danger submit disabled={relColumns?.length && !checked}>Delete</Button>
+        <Button danger submit disabled={relatedColumns?.length && !checked}>Delete</Button>
     </svelte:fragment>
 </Confirm>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte
index 81c643c6de..ce22763a8b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte
@@ -64,7 +64,7 @@
             }));
     }
 
-    const addAttributeDisabled = $derived(
+    const addColumnDisabled = $derived(
         names?.length >= 5 || (names?.length && !names[names?.length - 1])
     );
 
@@ -117,12 +117,12 @@
                     {/each}
                 {/if}
 
-                <!-- show only when options don't have all the attributes -->
+                <!-- show only when options don't have all the columns -->
                 {#if !hasExhaustedOptions}
                     <div>
                         <Button
                             compact
-                            disabled={addAttributeDisabled}
+                            disabled={addColumnDisabled}
                             on:click={() => {
                                 names[names.length] = null;
                                 names = names;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte
index 699e996ee6..9dc9f82c13 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/updateStatus.svelte
@@ -19,7 +19,7 @@
         enabled ??= $table.enabled;
     });
 
-    async function toggleCollection() {
+    async function toggleTable() {
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
@@ -63,6 +63,6 @@
     </svelte:fragment>
 
     <svelte:fragment slot="actions">
-        <Button disabled={enabled === $table.enabled} on:click={toggleCollection}>Update</Button>
+        <Button disabled={enabled === $table.enabled} on:click={toggleTable}>Update</Button>
     </svelte:fragment>
 </CardGrid>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 4b80c67a99..fc37bcb9c1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -1,7 +1,7 @@
 import { page } from '$app/stores';
-import { derived, writable } from 'svelte/store';
+import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
-import type { Column as TableColumn } from '$lib/helpers/types';
+import { derived, writable } from 'svelte/store';
 
 export type Columns =
     | Models.ColumnBoolean
@@ -20,8 +20,8 @@ type Table = Omit<Models.Table, 'columns'> & {
 
 export const table = derived(page, ($page) => $page.data.table as Table);
 export const columns = derived(page, ($page) => $page.data.table.columns as Columns[]);
-export const indexes = derived(page, ($page) => $page.data.table.indexes as Models.ColumnIndex[]);
+export const indexes = derived(page, ($page) => $page.data.table.indexes as Models.Index[]);
 
-export const tableColumns = writable<TableColumn[]>([]);
+export const tableColumns = writable<Column[]>([]);
 
 export const isCsvImportInProgress = writable(false);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte
index 2004e7dc8e..b8b21a21dc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte
@@ -24,9 +24,7 @@
         data?.allTables?.tables?.slice().sort((a, b) => a.name.localeCompare(b.name))
     );
 
-    const selectedTable = $derived.by(() =>
-        sortedTables?.find((collection) => collection.$id === tableId)
-    );
+    const selectedTable = $derived.by(() => sortedTables?.find((table) => table.$id === tableId));
 
     let openBottomSheet = $state(false);
 
@@ -111,11 +109,11 @@
         bind:isOpen={openBottomSheet}
         menu={{
             top: {
-                items: sortedTables.slice(0, 10).map((collection) => {
+                items: sortedTables.slice(0, 10).map((table) => {
                     return {
-                        name: collection.name,
+                        name: table.name,
                         leadingIcon: IconTable,
-                        href: `${base}/project-${region}-${project}/databases/database-${databaseId}/table-${collection.$id}`
+                        href: `${base}/project-${region}-${project}/databases/database-${databaseId}/table-${table.$id}`
                     };
                 })
             },
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte
index ec4573bdaf..445dfdd9cf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/table.svelte
@@ -37,7 +37,7 @@
     let displayNames = {};
     let showRelationships = false;
     let selectedRelationship: Models.ColumnRelationship = null;
-    let relationshipData: Partial<Models.Document>[];
+    let relationshipData: Partial<Models.Row>[];
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
@@ -135,17 +135,17 @@
         'restrict' = 'Row cannot be deleted'
     }
 
-    $: relAttributes = $columns?.filter(
-        (attribute) =>
-            isRelationship(attribute) &&
+    $: relatedColumns = $columns?.filter(
+        (column) =>
+            isRelationship(column) &&
             // One-to-One are always included
-            (attribute.relationType === 'oneToOne' ||
+            (column.relationType === 'oneToOne' ||
                 // One-to-Many: Only if parent is deleted
-                (attribute.relationType === 'oneToMany' && attribute.side === 'parent') ||
+                (column.relationType === 'oneToMany' && column.side === 'parent') ||
                 // Many-to-One: Only include if child is deleted
-                (attribute.relationType === 'manyToOne' && attribute.side === 'child') ||
+                (column.relationType === 'manyToOne' && column.side === 'child') ||
                 // Many-to-Many: Only include if the parent is being deleted
-                (isRelationshipToMany(attribute) && attribute.side === 'parent'))
+                (isRelationshipToMany(column) && column.side === 'parent'))
     ) as Models.ColumnRelationship[];
 
     let checked = false;
@@ -233,14 +233,14 @@
                         {:else}
                             {@const datetime = row[id]}
                             {@const formatted = formatColumn(row[id])}
-                            {@const isDatetimeAttribute = column.type === 'datetime'}
-                            {@const isEncryptedAttribute = isString(column) && column.encrypt}
-                            {#if isDatetimeAttribute}
+                            {@const isDatetimeColumn = column.type === 'datetime'}
+                            {@const isEncryptedColumn = isString(column) && column.encrypt}
+                            {#if isDatetimeColumn}
                                 <DualTimeView time={datetime}>
                                     <span slot="title">Timestamp</span>
                                     {toLocaleDateTime(datetime, true)}
                                 </DualTimeView>
-                            {:else if isEncryptedAttribute}
+                            {:else if isEncryptedColumn}
                                 <button on:click={(e) => e.preventDefault()}>
                                     <InteractiveText
                                         copy={false}
@@ -303,7 +303,7 @@
         Are you sure you want to delete <b>{selectedRows.length}</b>
         {selectedRows.length > 1 ? 'rows' : 'row'}?
 
-        {#if relAttributes?.length}
+        {#if relatedColumns?.length}
             <Table.Root
                 let:root
                 columns={[
@@ -316,7 +316,7 @@
                     <Table.Header.Cell column="setting" {root}>Setting</Table.Header.Cell>
                     <Table.Header.Cell column="desc" {root} />
                 </svelte:fragment>
-                {#each relAttributes as attr}
+                {#each relatedColumns as attr}
                     <Table.Row.Base {root}>
                         <Table.Cell column="relation" {root}>
                             <span class="u-flex u-cross-center u-gap-8">

From 6b029e0bf9ea5c40788a42124a53bfb4394ba2f7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Jul 2025 14:50:20 +0530
Subject: [PATCH 061/118] fix: sdk bump and diagnostic check.

---
 package.json                                           |  2 +-
 pnpm-lock.yaml                                         | 10 +++++-----
 src/lib/stores/preferences.ts                          |  2 +-
 .../table-[table]/row-[row]/+page.svelte               |  2 +-
 .../table-[table]/row-[row]/row.svelte                 |  2 +-
 .../table-[table]/row-[row]/settings/+page.svelte      |  3 ++-
 6 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/package.json b/package.json
index 22d4d4a2f0..01f7d58731 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c0d12a22bf..50e62a6e95 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -257,8 +257,8 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d}
     version: 1.9.0
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fee5c539136e15c93cd3f2398d25cb217caa8dc8':
@@ -3651,7 +3651,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@c489ea0': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d': {}
 
   '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@fee5c539136e15c93cd3f2398d25cb217caa8dc8(svelte@5.25.3)':
     dependencies:
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 052a7477f6..5b949a0357 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -164,7 +164,7 @@ function createPreferences() {
                 return n;
             }),
         loadTeamPrefs: async (id: string) => {
-            const teamPrefs = await sdk.forConsole.teams.getPrefs(id);
+            const teamPrefs: Preferences = await sdk.forConsole.teams.getPrefs(id);
             update((n) => {
                 n[id] = teamPrefs;
                 return n;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte
index fc61ffb249..8981adbde3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/+page.svelte
@@ -53,7 +53,7 @@
                 .forProject(page.params.region, page.params.project)
                 .grids.updateRow(databaseId, tableId, rowId, $work, $work.$permissions);
 
-            invalidate(Dependencies.ROW);
+            await invalidate(Dependencies.ROW);
             trackEvent(Submit.RowUpdate);
             addNotification({
                 message: 'Row has been updated',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte
index 1318f4e774..6178f3de2e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/row.svelte
@@ -51,8 +51,8 @@
             await sdk
                 .forProject(page.params.region, page.params.project)
                 .grids.updateRow(databaseId, tableId, rowId, $work, $work.$permissions);
-            await invalidate(Dependencies.ROW);
 
+            await invalidate(Dependencies.ROW);
             currentRow = JSON.stringify($work);
             trackEvent(Submit.RowUpdate);
             disableUpdate = true;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
index 180694f189..fa87155b17 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
@@ -25,7 +25,8 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .grids.updateRow($row.$databaseId, $row.$tableId, $row.$id, $row.data, permissions);
+                .grids.updateRow($row.$databaseId, $row.$tableId, $row.$id, $row, permissions);
+
             await invalidate(Dependencies.ROW);
             arePermsDisabled = true;
             addNotification({

From d08f4cde6afd47a2f1959f6007d44bf653673156 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Jul 2025 18:25:16 +0530
Subject: [PATCH 062/118] misc: fixes.

---
 src/lib/layout/footer.svelte                               | 2 +-
 .../database-[database]/table-[table]/+layout.svelte       | 5 +++++
 .../database-[database]/table-[table]/columns/+page.svelte | 2 +-
 .../table-[table]/layout/emptySheet.svelte                 | 7 ++-----
 .../database-[database]/table-[table]/spreadsheet.svelte   | 2 +-
 5 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 1104f7904c..ac4fd30523 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -17,7 +17,7 @@
     const currentYear = new Date().getFullYear();
 
     // for spreadsheet ui
-    const hideFooter = $derived(page.route.id?.includes('collection-[collection]'));
+    const hideFooter = $derived(page.route.id?.includes('table-[table]'));
 </script>
 
 <footer class:hide={hideFooter}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 20aadcbeb6..5a2530f4d1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -269,6 +269,11 @@
         await sleep(1250);
         $spreadsheetLoading = false;
     }
+
+    $: if (!$randomDataModalState.show) {
+        // reset value to 25 default!
+        $randomDataModalState.value = 25;
+    }
 </script>
 
 <svelte:head>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 41bb7a9507..3a580f8207 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -367,7 +367,7 @@
 {#if selectedColumn}
     <DeleteColumn bind:showDelete {selectedColumn} />
 {:else if selectedColumns && selectedColumns.length}
-    <DeleteColumn bind:showDelete bind:selectedColumn />
+    <DeleteColumn bind:showDelete bind:selectedColumn={selectedColumns} />
 {/if}
 
 <SideSheet
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index bb2af7f525..bc7eebe26a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -126,6 +126,7 @@
                     onclick={() => {
                         if (columnActionsById && mode === 'records') {
                             $showCreateAttributeSheet.show = true;
+                            $showCreateAttributeSheet.title = 'Insert column';
                             $showCreateAttributeSheet.columns = $tableColumns;
                             $showCreateAttributeSheet.columnsOrder = $columnsOrder;
                         }
@@ -227,7 +228,7 @@
         }
 
         &[data-mode='records'] {
-            & :global([role='rowheader'] [role='cell']:nth-last-child(2) [role='presentation']) {
+            & :global([role='rowheader'] :nth-last-child(2) [role='presentation']) {
                 display: none;
             }
         }
@@ -240,10 +241,6 @@
                     opacity: 0.5;
                 }
             }
-
-            & :global([role='cell']:nth-last-child(1) [role='presentation']) {
-                display: none;
-            }
         }
 
         & :global(.spreadsheet-container) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 8f443473f9..1ddb4f2c78 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -439,7 +439,7 @@
         });
     }, 1000);
 
-    $: reInitSpreadsheetKey = $table.columns.length;
+    $: reInitSpreadsheetKey = `${$table.columns.length}#${$columnsOrder.length}`;
 </script>
 
 <SpreadsheetContainer>

From 94f045f5e7020002f5a7abcc4021319fe144564a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 30 Jul 2025 19:03:30 +0530
Subject: [PATCH 063/118] update: navigate directly to spreadsheet.

---
 .../databases/+page.ts                        | 32 ++++++++++++++-----
 .../databases/table.svelte                    |  9 ++++--
 2 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
index 5be2d24b37..1408007612 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
@@ -21,18 +21,20 @@ export const load: PageLoad = async ({ url, route, depends, params, parent }) =>
     // already loaded by parent.
     const { currentPlan } = await parent();
 
-    const { databases, policies, lastBackups } = await fetchDatabasesAndBackups(
+    const { databases, tables, policies, lastBackups } = await fetchDatabasesAndBackups(
         limit,
         offset,
         params,
         search,
         currentPlan
     );
+
     return {
         offset,
         limit,
         view,
         search,
+        tables,
         policies,
         databases,
         lastBackups
@@ -48,12 +50,26 @@ async function fetchDatabasesAndBackups(
 ) {
     const backupsEnabled = currentPlan?.backupsEnabled ?? true;
 
-    const databases = await sdk
-        .forProject(params.region, params.project)
-        .grids.listDatabases(
-            [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
-            search || undefined
-        );
+    const projectSDK = sdk.forProject(params.region, params.project);
+
+    const databases = await projectSDK.grids.listDatabases(
+        [Query.limit(limit), Query.offset(offset), Query.orderDesc('$createdAt')],
+        search || undefined
+    );
+
+    const tables: Record<string, string | null> = {};
+
+    await Promise.all(
+        // TODO: backend should allow `Query.select` for perf!
+        databases.databases.map(async ({ $id }) => {
+            const res = await projectSDK.grids.listTables($id, [
+                Query.limit(1),
+                Query.orderDesc('')
+            ]);
+
+            tables[$id] = res.tables?.[0]?.$id ?? null;
+        })
+    );
 
     let lastBackups: Record<string, string>, policies: Record<string, BackupPolicy[]>;
 
@@ -64,7 +80,7 @@ async function fetchDatabasesAndBackups(
         ]);
     }
 
-    return { databases, policies, lastBackups };
+    return { databases, tables, policies, lastBackups };
 }
 
 async function fetchPolicies(databases: Models.DatabaseList, params: RouteParams) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/table.svelte b/src/routes/(console)/project-[region]-[project]/databases/table.svelte
index edc35853bf..10ec6f307a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/table.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/table.svelte
@@ -6,8 +6,10 @@
     import { columns } from './store';
     import { IconExclamation } from '@appwrite.io/pink-icons-svelte';
     import { Layout, Tooltip, Table, Icon } from '@appwrite.io/pink-svelte';
+    import type { BackupPolicy } from '$lib/sdk/backups';
 
     export let data;
+    const tables = data.tables;
 
     function getPolicyDescription(cron: string): string {
         const [minute, hour, dayOfMonth, , dayOfWeek] = cron.split(' ');
@@ -26,9 +28,12 @@
         {/each}
     </svelte:fragment>
     {#each data.databases.databases as database (database.$id)}
+        <!-- takes directly to the spreadsheet -->
+        {@const tableId = tables[database?.$id] ?? null}
+        {@const tableHref = tableId ? `/table-${tableId}` : ''}
         <Table.Row.Link
             {root}
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${database.$id}`}>
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${database.$id}${tableHref}`}>
             {#each $columns as column}
                 <Table.Cell column={column.id} {root}>
                     {#if column.id === '$id'}
@@ -43,7 +48,7 @@
                         {@const policies = data.policies?.[database.$id] ?? null}
                         {@const lastBackup = data.lastBackups?.[database.$id] ?? null}
                         {@const description = policies
-                            ?.map((policy) => getPolicyDescription(policy.schedule))
+                            ?.map((policy: BackupPolicy) => getPolicyDescription(policy.schedule))
                             .join(', ')}
 
                         <Tooltip

From ee8373fb328a8916baddd1d13cdc476c4fe3ade7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 13:43:11 +0530
Subject: [PATCH 064/118] lint: format

---
 src/lib/stores/preferences.ts                                 | 4 +---
 .../table-[table]/row-[row]/columns/store.ts                  | 2 +-
 .../table-[table]/row-[row]/settings/+page.svelte             | 4 ++--
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 274a72327c..81a9d6e3c3 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -175,9 +175,7 @@ function createPreferences() {
 
                 return n;
             }),
-        setCustomTableColumns: (tableId: string,
-            columns: ConsolePreferences['columns']
-        ) =>
+        setCustomTableColumns: (tableId: string, columns: ConsolePreferences['columns']) =>
             updateAndSync((n) => {
                 n ??= {};
                 n.tables ??= {};
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts
index 7d92c8e229..89105d4cca 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/store.ts
@@ -27,7 +27,7 @@ export function isString(column: Columns): column is Models.ColumnString {
 export function buildWildcardColumnsQuery(table: Models.Table | null = null): string[] {
     return [
         ...(table?.columns
-            ?.filter((col) => isRelationship(col))
+            ?.filter((col) => col.status === 'available' && isRelationship(col))
             ?.map((col) => Query.select([`${col.key}.*`])) ?? []),
 
         Query.select(['*'])
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
index b5e56c3a68..48343c141e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/settings/+page.svelte
@@ -98,8 +98,8 @@
                 {/if}
             {:else}
                 <Alert.Inline status="info" title="Document security is disabled">
-                    If you want to assign row permissions. Go to Table settings and enable
-                    row security. Otherwise, only table permissions will be used.
+                    If you want to assign row permissions. Go to Table settings and enable row
+                    security. Otherwise, only table permissions will be used.
                 </Alert.Inline>
             {/if}
         </svelte:fragment>

From a29f4dbcc341f781113cd0f0bb8a3b0140ec58bb Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 16:48:31 +0530
Subject: [PATCH 065/118] update: improved empty sheet view; fix: empty spacing
 on mobile at top.

---
 .../table-[table]/columns/+page.svelte        |  4 +-
 .../table-[table]/header.svelte               |  4 +-
 .../table-[table]/indexes/+page.svelte        | 25 ++++-
 .../table-[table]/layout/emptySheet.svelte    | 94 ++++++++++++-------
 4 files changed, 89 insertions(+), 38 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 3a580f8207..c7e75ba02f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -130,7 +130,9 @@
 
     const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
     const emptyCellsCount = $derived(
-        $columns.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $columns.length
+        updatedColumnsForSheet.length >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - updatedColumnsForSheet.length
     );
 
     onMount(() => {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
index b814383922..ff3547becf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -6,7 +6,7 @@
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteTables } from '$lib/stores/roles';
     import { table } from './store';
-    import { isTabletViewport } from '$lib/stores/viewport';
+    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     const databaseId = $derived(page.params.database);
 
@@ -56,7 +56,7 @@
     );
 </script>
 
-<div style:margin-top={$isTabletViewport ? '48px' : 0}>
+<div style:margin-top={$isTabletViewport && !$isSmallViewport ? '48px' : 0}>
     <Cover expanded>
         <svelte:fragment slot="header">
             <CoverTitle
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index c83a5ee08f..553325f264 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -16,7 +16,7 @@
         Layout,
         Link,
         Popover,
-        Spreadsheet
+        Spreadsheet, Typography
     } from '@appwrite.io/pink-svelte';
     import {
         IconDotsHorizontal,
@@ -33,6 +33,7 @@
     import { flags } from '$lib/flags';
     import type { PageData } from './$types';
     import { showCreateAttributeSheet } from '../store';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     let {
         data
@@ -82,6 +83,13 @@
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
+
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
+    const emptyCellsCount = $derived(
+        data.table.indexes.length >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - data.table.indexes.length
+    );
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -106,7 +114,9 @@
                 <Spreadsheet.Root
                     let:root
                     {columns}
+                    height="100%"
                     allowSelection
+                    emptyCells={emptyCellsCount}
                     bind:selectedRows={selectedIndexes}>
                     <svelte:fragment slot="header" let:root>
                         <Spreadsheet.Header.Cell column="key" {root}>Key</Spreadsheet.Header.Cell>
@@ -121,6 +131,7 @@
                         {/if}
                         <Spreadsheet.Header.Cell column="actions" {root} />
                     </svelte:fragment>
+
                     {#each data.table.indexes as index}
                         <Spreadsheet.Row.Base {root} id={index.key}>
                             <Spreadsheet.Cell column="key" {root} isEditable={false}>
@@ -182,6 +193,18 @@
                             </Spreadsheet.Cell>
                         </Spreadsheet.Row.Base>
                     {/each}
+
+                    <svelte:fragment slot="footer">
+                        <Layout.Stack
+                            direction="row"
+                            alignContent="center"
+                            alignItems="center"
+                            justifyContent="space-between">
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                                {data.table.indexes.length} columns
+                            </Typography.Text>
+                        </Layout.Stack>
+                    </svelte:fragment>
                 </Spreadsheet.Root>
             </SpreadsheetContainer>
         {:else}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index bc7eebe26a..6d8375f377 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -1,5 +1,13 @@
 <script lang="ts">
-    import { Badge, Button, Icon, Layout, Spreadsheet, Typography } from '@appwrite.io/pink-svelte';
+    import {
+        Badge,
+        Button,
+        Icon,
+        Layout,
+        Skeleton,
+        Spreadsheet,
+        Typography
+    } from '@appwrite.io/pink-svelte';
 
     import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -106,15 +114,21 @@
     const spreadsheetColumns = $derived(
         mode === 'records' ? getRecordsColumns() : getIndexesColumns()
     );
+
+    const emptyCells = $derived($isSmallViewport ? 14 : 17);
+    const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
 </script>
 
 <div class="spreadsheet-container-outer" data-mode={mode}>
     <Spreadsheet.Root
+        {emptyCells}
         allowSelection
-        emptyCells={12}
-        height="fit-content"
+        height={fixedHeight}
         columns={spreadsheetColumns}
-        loading={$spreadsheetLoading}>
+        loading={$spreadsheetLoading}
+        bottomActionClick={() => {
+            /* @ignore: only for showing the `+` button on footer */
+        }}>
         <svelte:fragment slot="header" let:root>
             {#each spreadsheetColumns as column (column.id)}
                 {@const columnActionsById = column.id === 'actions'}
@@ -165,43 +179,55 @@
                 </div>
             {/each}
         </svelte:fragment>
+
+        <svelte:fragment slot="footer">
+            <Layout.Stack
+                direction="row"
+                alignContent="center"
+                alignItems="center"
+                justifyContent="space-between">
+                <Skeleton variant="line" height={18} width={125} />
+            </Layout.Stack>
+        </svelte:fragment>
     </Spreadsheet.Root>
 
-    <div class="spreadsheet-fade-bottom">
-        <div class="empty-actions">
-            <Layout.Stack gap="xl" alignItems="center">
-                <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
-
-                {#if showActions}
-                    <Layout.Stack
-                        inline
-                        alignItems="center"
-                        direction={$isSmallViewport ? 'column' : 'row'}
-                        gap="s">
-                        <Button.Button
-                            icon
-                            size="s"
-                            variant="secondary"
-                            disabled={actions?.primary?.disabled}
-                            onclick={actions?.primary?.onClick}>
-                            <Icon icon={IconPlus} size="s" />
-                            {actions?.primary?.text ?? `Create ${mode}`}
-                        </Button.Button>
-
-                        {#if mode === 'records'}
+    {#if !$spreadsheetLoading}
+        <div class="spreadsheet-fade-bottom">
+            <div class="empty-actions">
+                <Layout.Stack gap="xl" alignItems="center">
+                    <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
+
+                    {#if showActions}
+                        <Layout.Stack
+                            inline
+                            alignItems="center"
+                            direction={$isSmallViewport ? 'column' : 'row'}
+                            gap="s">
                             <Button.Button
+                                icon
                                 size="s"
                                 variant="secondary"
-                                disabled={actions?.random?.disabled}
-                                onclick={actions?.random?.onClick}>
-                                {actions?.random?.text ?? `Generate random data`}
+                                disabled={actions?.primary?.disabled}
+                                onclick={actions?.primary?.onClick}>
+                                <Icon icon={IconPlus} size="s" />
+                                {actions?.primary?.text ?? `Create ${mode}`}
                             </Button.Button>
-                        {/if}
-                    </Layout.Stack>
-                {/if}
-            </Layout.Stack>
+
+                            {#if mode === 'records'}
+                                <Button.Button
+                                    size="s"
+                                    variant="secondary"
+                                    disabled={actions?.random?.disabled}
+                                    onclick={actions?.random?.onClick}>
+                                    {actions?.random?.text ?? `Generate random data`}
+                                </Button.Button>
+                            {/if}
+                        </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </div>
         </div>
-    </div>
+    {/if}
 </div>
 
 <style lang="scss">

From 800a3a394260a8732a96de14fc4d12ded1fca0b3 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 17:46:19 +0530
Subject: [PATCH 066/118] update: improved empty sheet view; fix: empty spacing
 on mobile at top; fix: issue with overflowing content when editor is opened
 [pink].

---
 package.json                                           |  2 +-
 pnpm-lock.yaml                                         | 10 +++++-----
 .../table-[table]/columns/+page.svelte                 |  2 +-
 .../table-[table]/indexes/+page.svelte                 |  5 +++--
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 2e205104f8..4c499a971a 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4d925c43ab..9b79c639f2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3672,7 +3672,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@3d31cea(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index c7e75ba02f..f7148e30c2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -128,7 +128,7 @@
         }
     }
 
-    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
     const emptyCellsCount = $derived(
         updatedColumnsForSheet.length >= emptyCellsLimit
             ? 0
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index 553325f264..e8547a1060 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -16,7 +16,8 @@
         Layout,
         Link,
         Popover,
-        Spreadsheet, Typography
+        Spreadsheet,
+        Typography
     } from '@appwrite.io/pink-svelte';
     import {
         IconDotsHorizontal,
@@ -84,7 +85,7 @@
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
 
-    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 16);
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
     const emptyCellsCount = $derived(
         data.table.indexes.length >= emptyCellsLimit
             ? 0

From 5932212a4997c870216053a5c7e8e8ac1ed9f6cf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 19:08:25 +0530
Subject: [PATCH 067/118] ci: empty commit


From 5160156581c380352e69cca557ca9e7e4b59ddbf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 19:09:38 +0530
Subject: [PATCH 068/118] ci: empty commit


From 761dd9a5ba729b251d0d18c3a3e70aa71ac6ce73 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 19:12:45 +0530
Subject: [PATCH 069/118] fix: potential 404?

---
 .../project-[region]-[project]/databases/+page.ts  | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
index 1408007612..ec917afe7c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
@@ -62,12 +62,16 @@ async function fetchDatabasesAndBackups(
     await Promise.all(
         // TODO: backend should allow `Query.select` for perf!
         databases.databases.map(async ({ $id }) => {
-            const res = await projectSDK.grids.listTables($id, [
-                Query.limit(1),
-                Query.orderDesc('')
-            ]);
+            try {
+                const res = await projectSDK.grids.listTables($id, [
+                    Query.limit(1),
+                    Query.orderDesc('')
+                ]);
 
-            tables[$id] = res.tables?.[0]?.$id ?? null;
+                tables[$id] = res.tables?.[0]?.$id ?? null;
+            } catch (e) {
+                // @ignore
+            }
         })
     );
 

From 2a38587c72a9e033d4fee0d8299c3744fc63e6f6 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 31 Jul 2025 19:29:18 +0530
Subject: [PATCH 070/118] fix: there's no 404 error. stage doesn't use grids
 api.

---
 .../project-[region]-[project]/databases/+page.ts  | 14 +++++---------
 1 file changed, 5 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
index ec917afe7c..1408007612 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/+page.ts
@@ -62,16 +62,12 @@ async function fetchDatabasesAndBackups(
     await Promise.all(
         // TODO: backend should allow `Query.select` for perf!
         databases.databases.map(async ({ $id }) => {
-            try {
-                const res = await projectSDK.grids.listTables($id, [
-                    Query.limit(1),
-                    Query.orderDesc('')
-                ]);
+            const res = await projectSDK.grids.listTables($id, [
+                Query.limit(1),
+                Query.orderDesc('')
+            ]);
 
-                tables[$id] = res.tables?.[0]?.$id ?? null;
-            } catch (e) {
-                // @ignore
-            }
+            tables[$id] = res.tables?.[0]?.$id ?? null;
         })
     );
 

From d286bc13e8f1e3a8030f96220f7e42c69dcd172d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 12:07:22 +0530
Subject: [PATCH 071/118] fix: layout shifts!

---
 .../database-[database]/backups/locked.svelte | 14 +++-
 .../backups/upgradeCard.svelte                | 77 ++++++++-----------
 2 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/locked.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/locked.svelte
index c131b9ff92..24b41fe639 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/locked.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/locked.svelte
@@ -30,7 +30,9 @@
                     ? LockedBackupsDarkMobile
                     : LockedBackupsLightMobile}
                 alt="create"
-                aria-hidden="true" />
+                aria-hidden="true"
+                height="425"
+                style:width="100vw" />
         </div>
 
         <!-- tablet, only policies are shown but bigger table-->
@@ -46,9 +48,11 @@
                     ? LockedBackupsDarkTablet
                     : LockedBackupsLightTablet}
                 alt="create"
-                aria-hidden="true" />
+                height="425"
+                aria-hidden="true"
+                style:width="100vw" />
         </div>
-
+        <!-- desktop, policies and backups table is shown -->
         <div class="is-desktop u-flex-vertical u-gap-16">
             <div class="desktop-locked-card-buttons u-flex u-gap-24">
                 <div style="width: 31%">
@@ -73,7 +77,9 @@
                     ? LockedBackupsDarkDesktop
                     : LockedBackupsLightDesktop}
                 alt="create"
-                aria-hidden="true" />
+                aria-hidden="true"
+                height="580"
+                style:width="100vw" />
         </div>
     </div>
 </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte
index 886b74c24b..6fbfd92623 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/backups/upgradeCard.svelte
@@ -22,6 +22,13 @@
     const message = isCloud
         ? "Upgrade now to unlock Appwrite's backups."
         : "Sign up now to access Appwrite's backups.";
+
+    const isDark = $app.themeInUse === 'dark';
+
+    const themeClass = isDark ? 'u-only-dark' : 'u-only-light';
+    const mobileImg = isDark ? EmptyDarkMobile : EmptyLightMobile;
+    const desktopImg = isDark ? EmptyDark : EmptyLight;
+    const tabletImg = isDark ? EmptyDarkTablet : EmptyLightTablet;
 </script>
 
 <div>
@@ -30,52 +37,32 @@
             <div
                 style:--p-file-preview-border-color="transparent"
                 class="is-full-cover-image is-full-width-mobile u-height-100-percent">
-                <div class="is-only-mobile u-width-full-line u-height-100-percent">
-                    {#if $app.themeInUse === 'dark'}
-                        <img
-                            height="137px"
-                            src={EmptyDarkMobile}
-                            class="placeholder u-image-object-fit-contain u-only-dark u-width-full-line u-height-100-percent"
-                            alt="Mock Numbers Example" />
-                    {:else}
-                        <img
-                            height="137px"
-                            src={EmptyLightMobile}
-                            class="placeholder u-image-object-fit-contain u-only-light u-width-full-line u-height-100-percent"
-                            alt="Mock Numbers Example" />
-                    {/if}
+                <!-- mobile -->
+                <div
+                    style:min-height="172px"
+                    class="is-only-mobile u-width-full-line u-height-100-percent">
+                    <img
+                        src={mobileImg}
+                        style:width="100vw"
+                        class="placeholder u-image-object-fit-contain {themeClass}"
+                        alt="Mock Numbers Example" />
                 </div>
-
-                <div class="is-not-mobile">
-                    {#if $app.themeInUse === 'dark'}
-                        <img
-                            src={EmptyDark}
-                            height="102px"
-                            class="u-image-object-fit-contain u-block u-only-dark"
-                            alt="Backups Example" />
-                    {:else}
-                        <img
-                            src={EmptyLight}
-                            height="102px"
-                            class="u-image-object-fit-contain u-only-light"
-                            alt="Backups Example" />
-                    {/if}
+                <!-- tablet -->
+                <div style:min-height="140px" class="is-tablet">
+                    <img
+                        src={tabletImg}
+                        style:width="100vw"
+                        class="u-image-object-fit-contain {themeClass}"
+                        alt="Backups Example" />
                 </div>
-
-                <div class="is-tablet">
-                    {#if $app.themeInUse === 'dark'}
-                        <img
-                            src={EmptyDarkTablet}
-                            height="102px"
-                            class="u-image-object-fit-contain u-block u-only-dark"
-                            alt="Backups Example" />
-                    {:else}
-                        <img
-                            src={EmptyLightTablet}
-                            height="102px"
-                            class="u-image-object-fit-contain u-only-light"
-                            alt="Backups Example" />
-                    {/if}
+                <!-- desktop -->
+                <div class="is-not-mobile">
+                    <img
+                        height="102"
+                        width="178"
+                        src={desktopImg}
+                        class="u-image-object-fit-contain {themeClass}"
+                        alt="Backups Example" />
                 </div>
             </div>
             <Layout.Stack direction="row" alignItems="center" wrap="wrap">
@@ -115,7 +102,7 @@
         display: none;
     }
 
-    @media (min-width: 768px) {
+    @media (min-width: 1260px) {
         .upgrade-description {
             padding-inline-end: 16ch;
         }

From 1cecf69493db6982c5dcf0515b2b1963ffe919ca Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 13:09:54 +0530
Subject: [PATCH 072/118] fix: edit row layout scroll; fix: remove excess
 margin top; fix: container buttons on mobile. fix: empty sheet fade cover
 area.

---
 src/lib/layout/container.svelte               |  4 ++
 .../table-[table]/+layout.svelte              |  1 +
 .../table-[table]/header.svelte               | 45 +++++++++----------
 .../table-[table]/layout/emptySheet.svelte    |  1 +
 .../table-[table]/layout/sidesheet.svelte     |  8 +++-
 .../table-[table]/spreadsheet.svelte          |  6 +--
 6 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 0c56fa502e..c280ad0f92 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -44,6 +44,10 @@
 
             &:first-child {
                 margin-inline: 4rem;
+
+                @media (max-width: 768px) {
+                    margin-inline: 1rem;
+                }
             }
 
             &.slotSpacing {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 5a2530f4d1..186fba1e68 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -321,6 +321,7 @@
 </SideSheet>
 
 <SideSheet
+    spaced
     title={$databaseRowSheetOptions.title}
     bind:show={$databaseRowSheetOptions.show}
     submit={{
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
index ff3547becf..87858edf35 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -6,7 +6,6 @@
     import { Cover, CoverTitle } from '$lib/layout';
     import { canWriteTables } from '$lib/stores/roles';
     import { table } from './store';
-    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
 
     const databaseId = $derived(page.params.database);
 
@@ -56,27 +55,25 @@
     );
 </script>
 
-<div style:margin-top={$isTabletViewport && !$isSmallViewport ? '48px' : 0}>
-    <Cover expanded>
-        <svelte:fragment slot="header">
-            <CoverTitle
-                href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
-                {$table?.name}
-            </CoverTitle>
-            {#key $table?.$id}
-                <Id value={$table?.$id}>{$table?.$id}</Id>
-            {/key}
-        </svelte:fragment>
+<Cover expanded>
+    <svelte:fragment slot="header">
+        <CoverTitle
+            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
+            {$table?.name}
+        </CoverTitle>
+        {#key $table?.$id}
+            <Id value={$table?.$id}>{$table?.$id}</Id>
+        {/key}
+    </svelte:fragment>
 
-        <Tabs>
-            {#each tabs as tab}
-                <Tab
-                    href={tab.href}
-                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
-                    event={tab.event}>
-                    {tab.title}
-                </Tab>
-            {/each}
-        </Tabs>
-    </Cover>
-</div>
+    <Tabs>
+        {#each tabs as tab}
+            <Tab
+                href={tab.href}
+                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                event={tab.event}>
+                {tab.title}
+            </Tab>
+        {/each}
+    </Tabs>
+</Cover>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 6d8375f377..3d7361beba 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -281,6 +281,7 @@
     }
 
     .spreadsheet-fade-bottom {
+        top: 29%;
         bottom: 0;
         width: 100%;
         height: 70vh;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
index 7727cd6331..ad9e50e91e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
@@ -42,7 +42,7 @@
                     await submit?.onClick();
                     show = false;
                 }}>
-                <Layout.Stack gap="xl">
+                <Layout.Stack gap="xl" class="sheet-content">
                     {@render children?.()}
                 </Layout.Stack>
 
@@ -79,6 +79,11 @@
                 margin-top: 6rem;
             }
         }
+
+        & :global(.sheet-content) {
+            overflow-y: auto;
+            padding-bottom: 5rem;
+        }
     }
 
     .sheet-footer {
@@ -86,6 +91,7 @@
         right: 0;
         bottom: 0;
         position: absolute;
+        background: var(--bgcolor-neutral-primary);
 
         & .sheet-footer-actions {
             padding-inline: var(--space-8);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 1ddb4f2c78..16813dfe4a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -395,12 +395,12 @@
             }
 
             if (action === 'duplicate-row') {
-                showRecordsCreateSheet.show = true;
                 showRecordsCreateSheet.row = row;
+                showRecordsCreateSheet.show = true;
             }
 
             if (action === 'copy-json') {
-                const stringified = JSON.stringify(document, null, 2);
+                const stringified = JSON.stringify(row, null, 2);
                 try {
                     await copy(stringified);
                     addNotification({
@@ -537,7 +537,7 @@
                                     type="row"
                                     column={$columns.find((col) => col.key === columnId)}
                                     onSelect={(option) =>
-                                        onSelectSheetOption(option, 'row', null, row)}>
+                                        onSelectSheetOption(option, null, 'row', row)}>
                                     {#snippet children(toggle)}
                                         <Button.Button
                                             icon

From 155aaa4204881e3aa03699e6fb855363ed82a75e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 13:16:10 +0530
Subject: [PATCH 073/118] fix: created row not shown in sheet.

---
 .../table-[table]/createRecord.svelte         |  3 +++
 .../table-[table]/spreadsheet.svelte          | 21 +++++++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
index 5372488bbd..5d5c9c3aac 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
@@ -11,6 +11,8 @@
     import { ID, type Models } from '@appwrite.io/console';
     import { Alert, Layout, Typography } from '@appwrite.io/pink-svelte';
     import SideSheet from './layout/sidesheet.svelte';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
 
     let {
         table,
@@ -81,6 +83,7 @@
             trackEvent(Submit.RowCreate, {
                 customId: !!$createRow.id
             });
+            await invalidate(Dependencies.ROW);
         } catch (error) {
             addNotification({
                 message: error.message,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 16813dfe4a..36ed79bee7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -247,7 +247,7 @@
     let selectedRows: string[] = [];
 
     let showDelete = false;
-    let selectedDocumentForDelete: Models.Row['$id'] | null = null;
+    let selectedRowForDelete: Models.Row['$id'] | null = null;
 
     async function sort(query: string[]) {
         $spreadsheetLoading = true;
@@ -260,12 +260,10 @@
     async function handleDelete() {
         showDelete = false;
         try {
-            if (selectedDocumentForDelete) {
+            if (selectedRowForDelete) {
                 await sdk
                     .forProject(page.params.region, page.params.project)
-                    .grids.deleteRow(databaseId, tableId, selectedDocumentForDelete);
-
-                selectedDocumentForDelete = null;
+                    .grids.deleteRow(databaseId, tableId, selectedRowForDelete);
             } else {
                 await sdk
                     .forProject(page.params.region, page.params.project)
@@ -277,7 +275,13 @@
                 type: 'success',
                 message: `${selectedRows.length} document${selectedRows.length > 1 ? 's' : ''} deleted`
             });
-            invalidate(Dependencies.ROWS);
+
+            if (selectedRowForDelete) {
+                await invalidate(Dependencies.ROW);
+                selectedRowForDelete = null;
+            } else {
+                await invalidate(Dependencies.ROWS);
+            }
         } catch (error) {
             addNotification({ type: 'error', message: error.message });
             trackError(error, Submit.RowDelete);
@@ -309,7 +313,6 @@
             });
 
             invalidate(Dependencies.TABLE);
-            invalidate(Dependencies.ROWS);
 
             $databaseColumnSheetOptions.column = null;
         } catch (error) {
@@ -417,7 +420,7 @@
 
             if (action === 'delete') {
                 showDelete = true;
-                selectedDocumentForDelete = row.$id;
+                selectedRowForDelete = row.$id;
             }
         }
     }
@@ -693,7 +696,7 @@
     title={selectedRows.length === 1 ? 'Delete Row' : 'Delete Rows'}
     bind:open={showDelete}
     onSubmit={handleDelete}>
-    {@const isSingle = selectedDocumentForDelete !== null}
+    {@const isSingle = selectedRowForDelete !== null}
 
     <div>
         {#if isSingle}

From abb7672cb1e240fb7be2bfd70bdb3e523e8e355c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 13:23:46 +0530
Subject: [PATCH 074/118] fix: icons looking squished; fix: extra view selector
 button [leftover].

---
 src/lib/components/filters/filters.svelte                 | 8 ++++++++
 src/lib/components/viewSelector.svelte                    | 8 ++++++++
 .../database-[database]/table-[table]/+page.svelte        | 1 -
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/filters/filters.svelte b/src/lib/components/filters/filters.svelte
index e3ab83871a..cf3b7ea482 100644
--- a/src/lib/components/filters/filters.svelte
+++ b/src/lib/components/filters/filters.svelte
@@ -126,6 +126,7 @@
         <Button
             secondary
             icon={onlyIcon}
+            class={onlyIcon ? 'width-fix' : undefined}
             on:click={(event) => {
                 toggle(event);
                 trackEvent(Click.FilterApplyClick, { source: analyticsSource });
@@ -250,3 +251,10 @@
         </svelte:fragment>
     </Modal>
 </div>
+
+<style>
+    :global(.width-fix) {
+        width: 32px;
+        height: 32px;
+    }
+</style>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index cb3c0053ad..b1a2a260ec 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -25,6 +25,7 @@
                 size="s"
                 icon={onlyIcon}
                 variant="secondary"
+                class={onlyIcon ? 'width-fix' : undefined}
                 disabled={!$columns.length && showAnyway}
                 badge={onlyIcon ? undefined : selectedColumnsNumber.toString()}
                 on:click={toggle}>
@@ -37,3 +38,10 @@
 {#if !hideView}
     <ViewToggle bind:view />
 {/if}
+
+<style>
+    :global(.width-fix) {
+        width: 32px;
+        height: 32px;
+    }
+</style>
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 5dacc053ca..c830c540f4 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
@@ -122,7 +122,6 @@
                     <!--                    </Button>-->
                 </Layout.Stack>
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-                    <ViewSelector view={data.view} columns={tableColumns} hideView isCustomTable />
                     <Button
                         secondary
                         event={Click.DatabaseImportCsv}

From 89bcb1e8fb73405b23f042f93cf6f14e6f58a41a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 13:26:44 +0530
Subject: [PATCH 075/118] fix: random data > sample data

---
 .../database-[database]/table-[table]/+layout.svelte      | 8 ++++----
 .../table-[table]/layout/emptySheet.svelte                | 2 +-
 .../database-[database]/table-[table]/spreadsheet.svelte  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 186fba1e68..7c8facc809 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -254,7 +254,7 @@
 
             addNotification({
                 type: 'success',
-                message: 'Random data added successfully'
+                message: 'Sample data added successfully'
             });
 
             await invalidate(Dependencies.ROWS);
@@ -345,11 +345,11 @@
         externalColumnKey={$showCreateIndexSheet.column} />
 </SideSheet>
 
-<Dialog title="Generate random data" bind:open={$randomDataModalState.show}>
+<Dialog title="Generate sample data" bind:open={$randomDataModalState.show}>
     <Layout.Stack style="gap: 28px;">
         <Typography.Text>
-            Select how many random records to generate for testing. This won't delete or replace
-            your existing records.
+            Select how many sample rows to generate for testing. This won't delete or replace your
+            existing rows.
         </Typography.Text>
 
         <Seekbar max={100} breakpointCount={5} bind:value={$randomDataModalState.value} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 3d7361beba..b7dc43b4e5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -219,7 +219,7 @@
                                     variant="secondary"
                                     disabled={actions?.random?.disabled}
                                     onclick={actions?.random?.onClick}>
-                                    {actions?.random?.text ?? `Generate random data`}
+                                    {actions?.random?.text ?? `Generate sample data`}
                                 </Button.Button>
                             {/if}
                         </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 36ed79bee7..77dab6c63b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -659,7 +659,7 @@
                             variant="extra-compact"
                             on:click={() => {
                                 $randomDataModalState.show = true;
-                            }}>Generate random data</Button.Button>
+                            }}>Generate sample data</Button.Button>
                     </div>
                 </Layout.Stack>
             </svelte:fragment>

From 275cebbbd6f806fce8996ba29ccbdc67152783ae Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 13:29:40 +0530
Subject: [PATCH 076/118] fix: sample data is only 25 items!

---
 .../database-[database]/table-[table]/+layout.svelte      | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 7c8facc809..1761084230 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -263,17 +263,15 @@
                 type: 'error',
                 message: e.message
             });
+        } finally {
+            // reset value to 25 default!
+            $randomDataModalState.value = 25;
         }
 
         /* api is too fast! */
         await sleep(1250);
         $spreadsheetLoading = false;
     }
-
-    $: if (!$randomDataModalState.show) {
-        // reset value to 25 default!
-        $randomDataModalState.value = 25;
-    }
 </script>
 
 <svelte:head>

From 1a064a7fb3443beecd0ca21a3c120710c0d87974 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 14:34:32 +0530
Subject: [PATCH 077/118] update: sequence as primary. fix: focus state on
 non-editable cells.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 ++++----
 src/lib/helpers/types.ts                      |  2 +-
 .../table-[table]/+layout.svelte              |  2 +-
 .../table-[table]/columns/+page.svelte        | 17 +++++++++++---
 .../table-[table]/layout/emptySheet.svelte    | 16 +++++++++++--
 .../table-[table]/sheetOptions.svelte         |  7 +++++-
 .../table-[table]/spreadsheet.svelte          | 23 +++++++++++++++----
 8 files changed, 61 insertions(+), 18 deletions(-)

diff --git a/package.json b/package.json
index 4c499a971a..ce17e06b0f 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9b79c639f2..cfb1003f40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3672,7 +3672,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0cc4af0(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index abb4c133a3..bb2daaced3 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -39,7 +39,7 @@ const columnTypes = [
 ] as const;
 export type ColumnType = (typeof columnTypes)[number];
 export type Column = PinkColumn & {
-    title: string;
+    title?: string;
     type: ColumnType;
     filter?: boolean;
     array?: boolean;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 1761084230..6169699457 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -269,7 +269,7 @@
         }
 
         /* api is too fast! */
-        await sleep(1250);
+        // await sleep(1250);
         $spreadsheetLoading = false;
     }
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index f7148e30c2..91969e84bb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -53,6 +53,17 @@
 
     const updatedColumnsForSheet = $derived.by(() => {
         const baseAttrs = [
+            {
+                key: '$sequence',
+                type: 'integer',
+                required: true,
+                selectable: false,
+                system: true
+            } as Models.AttributeString & {
+                name: string;
+                selectable: boolean;
+                system: boolean;
+            },
             {
                 key: '$id',
                 type: 'string',
@@ -208,9 +219,9 @@
                             <Layout.Stack direction="row" alignItems="center" gap="s">
                                 <Layout.Stack inline direction="row" alignItems="center" gap="xxs">
                                     <span class="text u-trim-1" data-private>
-                                        {#if column.key === '$id' || column.key === '$createdAt' || column.key === '$updatedAt'}
+                                        {#if column.key === '$id' || column.key === '$sequence' || column.key === '$createdAt' || column.key === '$updatedAt'}
                                             {column['name']}
-                                            {#if column.key === '$id'}
+                                            {#if column.key === '$sequence'}
                                                 <Badge
                                                     size="xs"
                                                     variant="secondary"
@@ -276,7 +287,7 @@
                                     <Icon icon={IconDotsHorizontal} size="s" />
                                 </Button>
                             </CsvDisabled>
-                        {:else}
+                        {:else if column.key !== '$sequence'}
                             <!-- TODO: no portal, rather see if we can fix the cell -->
                             <Popover let:toggle padding="none" placement="bottom-end" portal>
                                 <Button text icon ariaLabel="more options" on:click={toggle}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index b7dc43b4e5..313c97d1f9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -9,7 +9,12 @@
         Typography
     } from '@appwrite.io/pink-svelte';
 
-    import { IconCalendar, IconFingerPrint, IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconCalendar,
+        IconFingerPrint,
+        IconHashtag,
+        IconPlus
+    } from '@appwrite.io/pink-icons-svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
     import { SortButton } from '$lib/components';
     import type { Column } from '$lib/helpers/types';
@@ -55,12 +60,19 @@
         }));
 
     const getRecordsColumns = (): Column[] => [
+        {
+            id: '$sequence',
+            type: 'string',
+            width: 150,
+            isPrimary: true,
+            icon: IconHashtag,
+            ...baseColProps
+        },
         {
             id: '$id',
             title: 'ID',
             type: 'string',
             width: 180,
-            isPrimary: true,
             icon: IconFingerPrint,
             ...baseColProps
         },
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
index 7b6a0b34a4..8b4d444e3c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
@@ -45,7 +45,7 @@
     }
 
     // Only allow sort for these columns
-    const internalColumns = ['$id', '$createdAt', '$updatedAt'];
+    const internalColumns = ['$sequence', '$id', '$createdAt', '$updatedAt'];
 
     const headerMenuItems: MenuItem[] = [
         { label: 'Update', icon: IconPencil, action: 'update' },
@@ -106,9 +106,14 @@
     }
 
     function shouldShow(item: MenuItem): boolean {
+        const isSequence = columnId === '$sequence';
         const isSystemColumn = internalColumns.includes(columnId);
 
         if (type === 'header') {
+            if (isSequence) {
+                return ['sort-asc', 'sort-desc'].includes(item.action ?? '');
+            }
+
             if (['delete', 'update', 'duplicate-header'].includes(item.action) && isSystemColumn) {
                 return false;
             }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 77dab6c63b..7d27d7f572 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -186,6 +186,17 @@
         }));
 
         const staticColumns: Column[] = [
+            {
+                id: '$sequence',
+                width: 150,
+                minimumWidth: 150,
+                draggable: false,
+                type: 'integer',
+                icon: IconHashtag,
+                isEditable: false,
+                isPrimary: true,
+                resizable: false
+            },
             {
                 id: '$id',
                 title: 'ID',
@@ -195,7 +206,7 @@
                 type: 'string',
                 icon: IconFingerPrint,
                 isEditable: false,
-                isPrimary: true
+                isPrimary: false
             },
             {
                 id: '$createdAt',
@@ -233,10 +244,11 @@
             reorderItems(
                 [
                     staticColumns[0],
-                    ...baseColumns,
                     staticColumns[1],
+                    ...baseColumns,
                     staticColumns[2],
-                    staticColumns[3]
+                    staticColumns[3],
+                    staticColumns[4]
                 ],
                 $columnsOrder
             )
@@ -531,7 +543,10 @@
                             value={columnId.includes('$') || formatted === 'null'
                                 ? undefined
                                 : formatted}>
-                            {#if columnId === '$id'}
+                            {#if columnId === '$sequence'}
+                                <Id value={row.$sequence.toString()} tooltipPortal
+                                    >{row.$sequence}</Id>
+                            {:else if columnId === '$id'}
                                 <Id value={row.$id} tooltipPortal>{row.$id}</Id>
                             {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
                                 <DualTimeView time={row[columnId]} />

From 3b2df2d4be3c2f2d6582ed34b8191c71342c638e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 14:37:47 +0530
Subject: [PATCH 078/118] update: record > row.

---
 .../database-[database]/table-[table]/+page.svelte   |  4 ++--
 .../table-[table]/createRecord.svelte                |  2 +-
 .../table-[table]/layout/emptySheet.svelte           | 12 ++++++------
 .../table-[table]/spreadsheet.svelte                 |  8 ++++----
 4 files changed, 13 insertions(+), 13 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 c830c540f4..d46a2f25bd 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
@@ -183,7 +183,7 @@
                 </EmptySearch>
             {:else}
                 <EmptySheet
-                    mode="records"
+                    mode="rows"
                     customColumns={createTableColumns($table.columns, selected)}
                     showActions={$canWriteRows}
                     actions={{
@@ -201,7 +201,7 @@
             {/if}
         {:else}
             <EmptySheet
-                mode="records"
+                mode="rows"
                 title="You have no columns yet"
                 showActions={$canWriteTables}
                 actions={{
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
index 5d5c9c3aac..826dcbac65 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
@@ -101,7 +101,7 @@
         <!-- TODO: add a ID badge-->
         <SideSheet
             spaced
-            title={`${existingData ? 'Duplicate' : 'Create'} record`}
+            title={`${existingData ? 'Duplicate' : 'Create'} row`}
             bind:show={showSheet}
             closeOnBlur={false}
             submit={{
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 313c97d1f9..c57e340e35 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -25,7 +25,7 @@
         spreadsheetLoading
     } from '../store';
 
-    type Mode = 'records' | 'indexes';
+    type Mode = 'rows' | 'indexes';
 
     interface Action {
         text?: string;
@@ -59,7 +59,7 @@
             ...col
         }));
 
-    const getRecordsColumns = (): Column[] => [
+    const getRowColumns = (): Column[] => [
         {
             id: '$sequence',
             type: 'string',
@@ -124,7 +124,7 @@
         ] as Column[];
 
     const spreadsheetColumns = $derived(
-        mode === 'records' ? getRecordsColumns() : getIndexesColumns()
+        mode === 'rows' ? getRowColumns() : getIndexesColumns()
     );
 
     const emptyCells = $derived($isSmallViewport ? 14 : 17);
@@ -150,7 +150,7 @@
                     tabindex="0"
                     style:cursor={columnActionsById ? 'pointer' : null}
                     onclick={() => {
-                        if (columnActionsById && mode === 'records') {
+                        if (columnActionsById && mode === 'rows') {
                             $showCreateAttributeSheet.show = true;
                             $showCreateAttributeSheet.title = 'Insert column';
                             $showCreateAttributeSheet.columns = $tableColumns;
@@ -225,7 +225,7 @@
                                 {actions?.primary?.text ?? `Create ${mode}`}
                             </Button.Button>
 
-                            {#if mode === 'records'}
+                            {#if mode === 'rows'}
                                 <Button.Button
                                     size="s"
                                     variant="secondary"
@@ -265,7 +265,7 @@
             position: unset;
         }
 
-        &[data-mode='records'] {
+        &[data-mode='rows'] {
             & :global([role='rowheader'] :nth-last-child(2) [role='presentation']) {
                 display: none;
             }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 7d27d7f572..c1917ac23c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -406,7 +406,7 @@
             if (action === 'update') {
                 $databaseRowSheetOptions.show = true;
                 $databaseRowSheetOptions.row = row;
-                $databaseRowSheetOptions.title = 'Update record';
+                $databaseRowSheetOptions.title = 'Update row';
             }
 
             if (action === 'duplicate-row') {
@@ -665,8 +665,8 @@
                     justifyContent="space-between">
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {selectedRows.length
-                            ? `${selectedRows.length} records selected`
-                            : `${rows.rows.length} records`}
+                            ? `${selectedRows.length} rows selected`
+                            : `${rows.rows.length} rows`}
                     </Typography.Text>
 
                     <div style:margin-right="var(--space-6)">
@@ -778,7 +778,7 @@
     <p>Are you sure you want to delete "<b>{$databaseColumnSheetOptions.column.key}</b>"?</p>
 
     <p>
-        This will permanently remove all data stored in this column across all records. This action
+        This will permanently remove all data stored in this column across all rows. This action
         is irreversible.
     </p>
 </Confirm>

From b147fe18893cebbbf02d39fbd3633b8ef6f415ff Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 14:38:14 +0530
Subject: [PATCH 079/118] update: lint.

---
 .../table-[table]/layout/emptySheet.svelte                    | 4 +---
 .../database-[database]/table-[table]/spreadsheet.svelte      | 4 ++--
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index c57e340e35..25d728be8b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -123,9 +123,7 @@
             }
         ] as Column[];
 
-    const spreadsheetColumns = $derived(
-        mode === 'rows' ? getRowColumns() : getIndexesColumns()
-    );
+    const spreadsheetColumns = $derived(mode === 'rows' ? getRowColumns() : getIndexesColumns());
 
     const emptyCells = $derived($isSmallViewport ? 14 : 17);
     const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index c1917ac23c..97ac595046 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -778,8 +778,8 @@
     <p>Are you sure you want to delete "<b>{$databaseColumnSheetOptions.column.key}</b>"?</p>
 
     <p>
-        This will permanently remove all data stored in this column across all rows. This action
-        is irreversible.
+        This will permanently remove all data stored in this column across all rows. This action is
+        irreversible.
     </p>
 </Confirm>
 

From 9e8e3de67952f0fbb05214352a8f8c2258be6b5a Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 18:12:41 +0530
Subject: [PATCH 080/118] fix: overscroll scrollbars.

---
 .../database-[database]/table-[table]/layout/spreadsheet.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
index c297096fbb..108d1f2e00 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-    let spreadsheetHeight = '75vh';
+    let spreadsheetHeight = '74.5vh';
     let spreadsheetWrapper: HTMLDivElement;
 
     function resizeSheet() {

From f9047d46df4868bee392013a1c35c0f86cbbadb6 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 18:35:24 +0530
Subject: [PATCH 081/118] =?UTF-8?q?fix:=20focus=20stealing=20=F0=9F=A4=A8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/dualTimeView.svelte               |  3 ++-
 .../table-[table]/sheetOptions.svelte                | 12 ++++++++++++
 .../table-[table]/spreadsheet.svelte                 | 11 +++++++++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/dualTimeView.svelte b/src/lib/components/dualTimeView.svelte
index 8a018ed722..61c28c4247 100644
--- a/src/lib/components/dualTimeView.svelte
+++ b/src/lib/components/dualTimeView.svelte
@@ -11,6 +11,7 @@
     import { menuOpen } from '$lib/components/menu/store';
 
     export let time: string | null = null;
+    export let canShowPopover: boolean = true;
     export let placement: ComponentProps<Popover>['placement'] = 'bottom';
 
     function timeDifference(dateString: string): string {
@@ -79,7 +80,7 @@
     <Popover let:show let:hide {placement} portal>
         <button
             on:mouseenter={() => {
-                if (!$menuOpen) {
+                if (!$menuOpen && canShowPopover) {
                     setTimeout(show, 150);
                 }
             }}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
index 8b4d444e3c..d193655164 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
@@ -77,11 +77,13 @@
         columnId = null,
         children,
         onSelect,
+        onVisibilityChanged,
         type
     }: {
         column: Columns;
         columnId?: string;
         type: 'header' | 'row';
+        onVisibilityChanged?: (visible: boolean) => void;
         onSelect: (option: HeaderCellAction | RowCellAction, columnId: string) => void;
         children: Snippet<[toggle: (event: Event) => void]>;
     } = $props();
@@ -136,6 +138,13 @@
             return true;
         });
     }
+
+    let htmlSpanElement = $state<HTMLSpanElement | null>(null);
+
+    $effect(() => {
+        const visible = htmlSpanElement !== null;
+        onVisibilityChanged?.(visible);
+    });
 </script>
 
 <Popover let:toggle padding="none" placement="bottom-start" portal>
@@ -144,6 +153,9 @@
     <svelte:fragment slot="tooltip" let:hide>
         {@const menuItems = cleanMenu(type === 'header' ? headerMenuItems : rowMenuItems)}
 
+        <!-- hacky, i know! -->
+        <span bind:this={htmlSpanElement}> </span>
+
         <ActionMenu.Root width="180px">
             {#each menuItems as item, index (index)}
                 {#if item.divider}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 97ac595046..436201e71e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -455,6 +455,8 @@
     }, 1000);
 
     $: reInitSpreadsheetKey = `${$table.columns.length}#${$columnsOrder.length}`;
+
+    $: canShowDatetimePopover = true;
 </script>
 
 <SpreadsheetContainer>
@@ -549,13 +551,18 @@
                             {:else if columnId === '$id'}
                                 <Id value={row.$id} tooltipPortal>{row.$id}</Id>
                             {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
-                                <DualTimeView time={row[columnId]} />
+                                <DualTimeView
+                                    time={row[columnId]}
+                                    canShowPopover={canShowDatetimePopover} />
                             {:else if columnId === 'actions'}
                                 <SheetOptions
                                     type="row"
                                     column={$columns.find((col) => col.key === columnId)}
                                     onSelect={(option) =>
-                                        onSelectSheetOption(option, null, 'row', row)}>
+                                        onSelectSheetOption(option, null, 'row', row)}
+                                    onVisibilityChanged={(visible) => {
+                                        canShowDatetimePopover = !visible;
+                                    }}>
                                     {#snippet children(toggle)}
                                         <Button.Button
                                             icon

From 369ed0de8874170177713283de655fab717e17a2 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 18:39:00 +0530
Subject: [PATCH 082/118] fix: count.

---
 .../database-[database]/table-[table]/spreadsheet.svelte        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 436201e71e..1fecaba1e9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -285,7 +285,7 @@
             trackEvent(Submit.RowDelete);
             addNotification({
                 type: 'success',
-                message: `${selectedRows.length} document${selectedRows.length > 1 ? 's' : ''} deleted`
+                message: `${selectedRows.length ? selectedRows.length : 1} row${selectedRows.length > 1 ? 's' : ''} deleted`
             });
 
             if (selectedRowForDelete) {

From 6766d78b9876513812b71b8fa61d93bc495f980d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 18:41:21 +0530
Subject: [PATCH 083/118] fix: insert > create.

---
 .../table-[table]/layout/emptySheet.svelte                    | 2 +-
 .../database-[database]/table-[table]/sheetOptions.svelte     | 4 ++--
 .../database-[database]/table-[table]/spreadsheet.svelte      | 4 ++--
 .../databases/database-[database]/table-[table]/store.ts      | 2 +-
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 25d728be8b..e6b748567c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -150,7 +150,7 @@
                     onclick={() => {
                         if (columnActionsById && mode === 'rows') {
                             $showCreateAttributeSheet.show = true;
-                            $showCreateAttributeSheet.title = 'Insert column';
+                            $showCreateAttributeSheet.title = 'Create column';
                             $showCreateAttributeSheet.columns = $tableColumns;
                             $showCreateAttributeSheet.columnsOrder = $columnsOrder;
                         }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
index d193655164..9c89db0a89 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/sheetOptions.svelte
@@ -49,8 +49,8 @@
 
     const headerMenuItems: MenuItem[] = [
         { label: 'Update', icon: IconPencil, action: 'update' },
-        { label: 'Insert column left', icon: IconArrowLeft, action: 'column-left' },
-        { label: 'Insert column right', icon: IconArrowRight, action: 'column-right' },
+        { label: 'Create column left', icon: IconArrowLeft, action: 'column-left' },
+        { label: 'Create column right', icon: IconArrowRight, action: 'column-right' },
         { label: 'Duplicate', icon: IconDuplicate, action: 'duplicate-header' },
         { divider: true },
         { label: 'Create index', icon: IconPencil, action: 'create-index' },
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 1fecaba1e9..0d427069a8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -371,7 +371,7 @@
 
             if (action === 'column-left' || action === 'column-right') {
                 const { to, neighbour } = $databaseColumnSheetOptions.direction;
-                $showCreateAttributeSheet.title = `Insert column to the ${to} of ${neighbour}`;
+                $showCreateAttributeSheet.title = `Create column to the ${to} of ${neighbour}`;
                 $showCreateAttributeSheet.direction = $databaseColumnSheetOptions.direction;
                 $showCreateAttributeSheet.columns = $tableColumns;
                 $showCreateAttributeSheet.columnsOrder = $columnsOrder;
@@ -488,7 +488,7 @@
                                     $showCreateAttributeSheet.show = true;
                                     $showCreateAttributeSheet.column = null;
                                     $showCreateAttributeSheet.columns = $tableColumns;
-                                    $showCreateAttributeSheet.title = 'Insert column';
+                                    $showCreateAttributeSheet.title = 'Create column';
                                     $showCreateAttributeSheet.columnsOrder = $columnsOrder;
                                 }}>
                                 <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 226bb6c748..da7632ce46 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -90,7 +90,7 @@ export type CreateAttribute = {
 export const showCreateAttributeSheet = writable<CreateAttribute>({
     show: false,
     column: null,
-    title: 'Insert column',
+    title: 'Create column',
     direction: null,
     onDone: null,
     columns: null,

From 3d4b4b3f60502b2182dbea332680e8b245bff885 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 18:47:36 +0530
Subject: [PATCH 084/118] update: show total count.

---
 .../database-[database]/table-[table]/spreadsheet.svelte        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 0d427069a8..6c72142c73 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -673,7 +673,7 @@
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {selectedRows.length
                             ? `${selectedRows.length} rows selected`
-                            : `${rows.rows.length} rows`}
+                            : `${rows.total} rows`}
                     </Typography.Text>
 
                     <div style:margin-right="var(--space-6)">

From f8463e1be5b4ee912e877ab859bec2e084860216 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 1 Aug 2025 19:10:15 +0530
Subject: [PATCH 085/118] update: use `sequence`.

---
 src/lib/helpers/types.ts                                     | 2 +-
 .../database-[database]/table-[table]/columns/+page.svelte   | 1 +
 .../table-[table]/layout/emptySheet.svelte                   | 3 ++-
 .../database-[database]/table-[table]/spreadsheet.svelte     | 5 +++--
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index bb2daaced3..abb4c133a3 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -39,7 +39,7 @@ const columnTypes = [
 ] as const;
 export type ColumnType = (typeof columnTypes)[number];
 export type Column = PinkColumn & {
-    title?: string;
+    title: string;
     type: ColumnType;
     filter?: boolean;
     array?: boolean;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 91969e84bb..bb6ef410a2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -57,6 +57,7 @@
                 key: '$sequence',
                 type: 'integer',
                 required: true,
+                name: 'Sequence',
                 selectable: false,
                 system: true
             } as Models.AttributeString & {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index e6b748567c..6b8d4aaec5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -62,8 +62,9 @@
     const getRowColumns = (): Column[] => [
         {
             id: '$sequence',
+            title: 'Sequence',
             type: 'string',
-            width: 150,
+            width: 225,
             isPrimary: true,
             icon: IconHashtag,
             ...baseColProps
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 6c72142c73..33348b052f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -188,8 +188,9 @@
         const staticColumns: Column[] = [
             {
                 id: '$sequence',
-                width: 150,
-                minimumWidth: 150,
+                title: 'Sequence',
+                width: 225,
+                minimumWidth: 225,
                 draggable: false,
                 type: 'integer',
                 icon: IconHashtag,

From 2921432e208e629d62fbaac29890cd218ac9e952 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 4 Aug 2025 09:53:08 +0530
Subject: [PATCH 086/118] fix: import realtime subscription.

---
 src/lib/components/csvImportBox.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte
index a92553e89c..3eb45799f2 100644
--- a/src/lib/components/csvImportBox.svelte
+++ b/src/lib/components/csvImportBox.svelte
@@ -150,7 +150,7 @@
                 migrations.migrations.forEach(updateOrAddItem);
             });
 
-        return sdk.forConsole.client.subscribe('console', (response) => {
+        return sdk.forConsoleIn(page.params.region).client.subscribe('console', (response) => {
             if (!response.channels.includes(`projects.${getProjectId()}`)) return;
             if (response.events.includes('migrations.*')) {
                 updateOrAddItem(response.payload as Payload);

From 9b531448e0a87205ba9b9e6dbc686fd65cea5e75 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 4 Aug 2025 19:30:01 +0530
Subject: [PATCH 087/118] add: in cell edit support.

---
 package.json                                  |   6 +-
 pnpm-lock.yaml                                | 343 ++++++++++++++++--
 src/lib/elements/forms/inputSelect.svelte     |   2 +
 .../table-[table]/editRowCell.svelte          |  42 +++
 .../table-[table]/row-[row]/column.svelte     |   3 +
 .../table-[table]/row-[row]/columnItem.svelte |   3 +
 .../row-[row]/columns/boolean.svelte          |  53 ++-
 .../row-[row]/columns/datetime.svelte         |  15 +-
 .../row-[row]/columns/email.svelte            |   9 +-
 .../row-[row]/columns/enum.svelte             |  60 ++-
 .../row-[row]/columns/integer.svelte          |  10 +-
 .../row-[row]/columns/relationship.svelte     |  11 +-
 .../row-[row]/columns/string.svelte           |  19 +-
 .../row-[row]/columns/url.svelte              |   9 +-
 .../table-[table]/spreadsheet.svelte          | 217 ++++++-----
 15 files changed, 623 insertions(+), 179 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte

diff --git a/package.json b/package.json
index ce17e06b0f..1f52d3fd04 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
@@ -84,7 +84,7 @@
         "tslib": "^2.8.1",
         "typescript": "^5.8.2",
         "typescript-eslint": "^8.30.1",
-        "vite": "^6.2.3",
+        "vite": "^7.0.6",
         "vitest": "^3.0.0"
     },
     "pnpm": {
@@ -95,5 +95,5 @@
             "svelte-preprocess"
         ]
     },
-    "packageManager": "pnpm@10.13.1"
+    "packageManager": "pnpm@10.14.0"
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cfb1003f40..bcc844f99c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -34,7 +34,7 @@ importers:
         version: 2.11.8
       '@sentry/sveltekit':
         specifier: ^8.38.0
-        version: 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+        version: 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       '@stripe/stripe-js':
         specifier: ^3.5.0
         version: 3.5.0
@@ -101,13 +101,13 @@ importers:
         version: 1.51.1
       '@sveltejs/adapter-static':
         specifier: ^3.0.8
-        version: 3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))
+        version: 3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))
       '@sveltejs/kit':
         specifier: ^2.20.2
-        version: 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+        version: 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
-        version: 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+        version: 5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.0
@@ -116,7 +116,7 @@ importers:
         version: 6.6.3
       '@testing-library/svelte':
         specifier: ^5.2.8
-        version: 5.2.8(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)
+        version: 5.2.8(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)
       '@testing-library/user-event':
         specifier: ^14.6.1
         version: 14.6.1(@testing-library/dom@10.4.0)
@@ -173,7 +173,7 @@ importers:
         version: 5.25.3
       svelte-check:
         specifier: ^4.1.5
-        version: 4.1.5(picomatch@4.0.2)(svelte@5.25.3)(typescript@5.8.2)
+        version: 4.1.5(picomatch@4.0.3)(svelte@5.25.3)(typescript@5.8.2)
       svelte-preprocess:
         specifier: ^6.0.3
         version: 6.0.3(@babel/core@7.26.10)(postcss-load-config@3.1.4(postcss@8.5.3))(postcss@8.5.3)(sass@1.86.0)(svelte@5.25.3)(typescript@5.8.2)
@@ -193,8 +193,8 @@ importers:
         specifier: ^8.30.1
         version: 8.30.1(eslint@9.31.0)(typescript@5.8.2)
       vite:
-        specifier: ^6.2.3
-        version: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+        specifier: ^7.0.6
+        version: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
       vitest:
         specifier: ^3.0.0
         version: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.2.4)(jsdom@26.1.0)(sass@1.86.0)
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -992,101 +992,201 @@ packages:
     cpu: [arm]
     os: [android]
 
+  '@rollup/rollup-android-arm-eabi@4.46.2':
+    resolution: {integrity: sha512-Zj3Hl6sN34xJtMv7Anwb5Gu01yujyE/cLBDB2gnHTAHaWS1Z38L7kuSG+oAh0giZMqG060f/YBStXtMH6FvPMA==}
+    cpu: [arm]
+    os: [android]
+
   '@rollup/rollup-android-arm64@4.37.0':
     resolution: {integrity: sha512-6U3SlVyMxezt8Y+/iEBcbp945uZjJwjZimu76xoG7tO1av9VO691z8PkhzQ85ith2I8R2RddEPeSfcbyPfD4hA==}
     cpu: [arm64]
     os: [android]
 
+  '@rollup/rollup-android-arm64@4.46.2':
+    resolution: {integrity: sha512-nTeCWY83kN64oQ5MGz3CgtPx8NSOhC5lWtsjTs+8JAJNLcP3QbLCtDDgUKQc/Ro/frpMq4SHUaHN6AMltcEoLQ==}
+    cpu: [arm64]
+    os: [android]
+
   '@rollup/rollup-darwin-arm64@4.37.0':
     resolution: {integrity: sha512-+iTQ5YHuGmPt10NTzEyMPbayiNTcOZDWsbxZYR1ZnmLnZxG17ivrPSWFO9j6GalY0+gV3Jtwrrs12DBscxnlYA==}
     cpu: [arm64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-arm64@4.46.2':
+    resolution: {integrity: sha512-HV7bW2Fb/F5KPdM/9bApunQh68YVDU8sO8BvcW9OngQVN3HHHkw99wFupuUJfGR9pYLLAjcAOA6iO+evsbBaPQ==}
+    cpu: [arm64]
+    os: [darwin]
+
   '@rollup/rollup-darwin-x64@4.37.0':
     resolution: {integrity: sha512-m8W2UbxLDcmRKVjgl5J/k4B8d7qX2EcJve3Sut7YGrQoPtCIQGPH5AMzuFvYRWZi0FVS0zEY4c8uttPfX6bwYQ==}
     cpu: [x64]
     os: [darwin]
 
+  '@rollup/rollup-darwin-x64@4.46.2':
+    resolution: {integrity: sha512-SSj8TlYV5nJixSsm/y3QXfhspSiLYP11zpfwp6G/YDXctf3Xkdnk4woJIF5VQe0of2OjzTt8EsxnJDCdHd2xMA==}
+    cpu: [x64]
+    os: [darwin]
+
   '@rollup/rollup-freebsd-arm64@4.37.0':
     resolution: {integrity: sha512-FOMXGmH15OmtQWEt174v9P1JqqhlgYge/bUjIbiVD1nI1NeJ30HYT9SJlZMqdo1uQFyt9cz748F1BHghWaDnVA==}
     cpu: [arm64]
     os: [freebsd]
 
+  '@rollup/rollup-freebsd-arm64@4.46.2':
+    resolution: {integrity: sha512-ZyrsG4TIT9xnOlLsSSi9w/X29tCbK1yegE49RYm3tu3wF1L/B6LVMqnEWyDB26d9Ecx9zrmXCiPmIabVuLmNSg==}
+    cpu: [arm64]
+    os: [freebsd]
+
   '@rollup/rollup-freebsd-x64@4.37.0':
     resolution: {integrity: sha512-SZMxNttjPKvV14Hjck5t70xS3l63sbVwl98g3FlVVx2YIDmfUIy29jQrsw06ewEYQ8lQSuY9mpAPlmgRD2iSsA==}
     cpu: [x64]
     os: [freebsd]
 
+  '@rollup/rollup-freebsd-x64@4.46.2':
+    resolution: {integrity: sha512-pCgHFoOECwVCJ5GFq8+gR8SBKnMO+xe5UEqbemxBpCKYQddRQMgomv1104RnLSg7nNvgKy05sLsY51+OVRyiVw==}
+    cpu: [x64]
+    os: [freebsd]
+
   '@rollup/rollup-linux-arm-gnueabihf@4.37.0':
     resolution: {integrity: sha512-hhAALKJPidCwZcj+g+iN+38SIOkhK2a9bqtJR+EtyxrKKSt1ynCBeqrQy31z0oWU6thRZzdx53hVgEbRkuI19w==}
     cpu: [arm]
     os: [linux]
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
+    resolution: {integrity: sha512-EtP8aquZ0xQg0ETFcxUbU71MZlHaw9MChwrQzatiE8U/bvi5uv/oChExXC4mWhjiqK7azGJBqU0tt5H123SzVA==}
+    cpu: [arm]
+    os: [linux]
+
   '@rollup/rollup-linux-arm-musleabihf@4.37.0':
     resolution: {integrity: sha512-jUb/kmn/Gd8epbHKEqkRAxq5c2EwRt0DqhSGWjPFxLeFvldFdHQs/n8lQ9x85oAeVb6bHcS8irhTJX2FCOd8Ag==}
     cpu: [arm]
     os: [linux]
 
+  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
+    resolution: {integrity: sha512-qO7F7U3u1nfxYRPM8HqFtLd+raev2K137dsV08q/LRKRLEc7RsiDWihUnrINdsWQxPR9jqZ8DIIZ1zJJAm5PjQ==}
+    cpu: [arm]
+    os: [linux]
+
   '@rollup/rollup-linux-arm64-gnu@4.37.0':
     resolution: {integrity: sha512-oNrJxcQT9IcbcmKlkF+Yz2tmOxZgG9D9GRq+1OE6XCQwCVwxixYAa38Z8qqPzQvzt1FCfmrHX03E0pWoXm1DqA==}
     cpu: [arm64]
     os: [linux]
 
+  '@rollup/rollup-linux-arm64-gnu@4.46.2':
+    resolution: {integrity: sha512-3dRaqLfcOXYsfvw5xMrxAk9Lb1f395gkoBYzSFcc/scgRFptRXL9DOaDpMiehf9CO8ZDRJW2z45b6fpU5nwjng==}
+    cpu: [arm64]
+    os: [linux]
+
   '@rollup/rollup-linux-arm64-musl@4.37.0':
     resolution: {integrity: sha512-pfxLBMls+28Ey2enpX3JvjEjaJMBX5XlPCZNGxj4kdJyHduPBXtxYeb8alo0a7bqOoWZW2uKynhHxF/MWoHaGQ==}
     cpu: [arm64]
     os: [linux]
 
+  '@rollup/rollup-linux-arm64-musl@4.46.2':
+    resolution: {integrity: sha512-fhHFTutA7SM+IrR6lIfiHskxmpmPTJUXpWIsBXpeEwNgZzZZSg/q4i6FU4J8qOGyJ0TR+wXBwx/L7Ho9z0+uDg==}
+    cpu: [arm64]
+    os: [linux]
+
   '@rollup/rollup-linux-loongarch64-gnu@4.37.0':
     resolution: {integrity: sha512-yCE0NnutTC/7IGUq/PUHmoeZbIwq3KRh02e9SfFh7Vmc1Z7atuJRYWhRME5fKgT8aS20mwi1RyChA23qSyRGpA==}
     cpu: [loong64]
     os: [linux]
 
+  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
+    resolution: {integrity: sha512-i7wfGFXu8x4+FRqPymzjD+Hyav8l95UIZ773j7J7zRYc3Xsxy2wIn4x+llpunexXe6laaO72iEjeeGyUFmjKeA==}
+    cpu: [loong64]
+    os: [linux]
+
   '@rollup/rollup-linux-powerpc64le-gnu@4.37.0':
     resolution: {integrity: sha512-NxcICptHk06E2Lh3a4Pu+2PEdZ6ahNHuK7o6Np9zcWkrBMuv21j10SQDJW3C9Yf/A/P7cutWoC/DptNLVsZ0VQ==}
     cpu: [ppc64]
     os: [linux]
 
+  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
+    resolution: {integrity: sha512-B/l0dFcHVUnqcGZWKcWBSV2PF01YUt0Rvlurci5P+neqY/yMKchGU8ullZvIv5e8Y1C6wOn+U03mrDylP5q9Yw==}
+    cpu: [ppc64]
+    os: [linux]
+
   '@rollup/rollup-linux-riscv64-gnu@4.37.0':
     resolution: {integrity: sha512-PpWwHMPCVpFZLTfLq7EWJWvrmEuLdGn1GMYcm5MV7PaRgwCEYJAwiN94uBuZev0/J/hFIIJCsYw4nLmXA9J7Pw==}
     cpu: [riscv64]
     os: [linux]
 
+  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
+    resolution: {integrity: sha512-32k4ENb5ygtkMwPMucAb8MtV8olkPT03oiTxJbgkJa7lJ7dZMr0GCFJlyvy+K8iq7F/iuOr41ZdUHaOiqyR3iQ==}
+    cpu: [riscv64]
+    os: [linux]
+
   '@rollup/rollup-linux-riscv64-musl@4.37.0':
     resolution: {integrity: sha512-DTNwl6a3CfhGTAOYZ4KtYbdS8b+275LSLqJVJIrPa5/JuIufWWZ/QFvkxp52gpmguN95eujrM68ZG+zVxa8zHA==}
     cpu: [riscv64]
     os: [linux]
 
+  '@rollup/rollup-linux-riscv64-musl@4.46.2':
+    resolution: {integrity: sha512-t5B2loThlFEauloaQkZg9gxV05BYeITLvLkWOkRXogP4qHXLkWSbSHKM9S6H1schf/0YGP/qNKtiISlxvfmmZw==}
+    cpu: [riscv64]
+    os: [linux]
+
   '@rollup/rollup-linux-s390x-gnu@4.37.0':
     resolution: {integrity: sha512-hZDDU5fgWvDdHFuExN1gBOhCuzo/8TMpidfOR+1cPZJflcEzXdCy1LjnklQdW8/Et9sryOPJAKAQRw8Jq7Tg+A==}
     cpu: [s390x]
     os: [linux]
 
+  '@rollup/rollup-linux-s390x-gnu@4.46.2':
+    resolution: {integrity: sha512-YKjekwTEKgbB7n17gmODSmJVUIvj8CX7q5442/CK80L8nqOUbMtf8b01QkG3jOqyr1rotrAnW6B/qiHwfcuWQA==}
+    cpu: [s390x]
+    os: [linux]
+
   '@rollup/rollup-linux-x64-gnu@4.37.0':
     resolution: {integrity: sha512-pKivGpgJM5g8dwj0ywBwe/HeVAUSuVVJhUTa/URXjxvoyTT/AxsLTAbkHkDHG7qQxLoW2s3apEIl26uUe08LVQ==}
     cpu: [x64]
     os: [linux]
 
+  '@rollup/rollup-linux-x64-gnu@4.46.2':
+    resolution: {integrity: sha512-Jj5a9RUoe5ra+MEyERkDKLwTXVu6s3aACP51nkfnK9wJTraCC8IMe3snOfALkrjTYd2G1ViE1hICj0fZ7ALBPA==}
+    cpu: [x64]
+    os: [linux]
+
   '@rollup/rollup-linux-x64-musl@4.37.0':
     resolution: {integrity: sha512-E2lPrLKE8sQbY/2bEkVTGDEk4/49UYRVWgj90MY8yPjpnGBQ+Xi1Qnr7b7UIWw1NOggdFQFOLZ8+5CzCiz143w==}
     cpu: [x64]
     os: [linux]
 
+  '@rollup/rollup-linux-x64-musl@4.46.2':
+    resolution: {integrity: sha512-7kX69DIrBeD7yNp4A5b81izs8BqoZkCIaxQaOpumcJ1S/kmqNFjPhDu1LHeVXv0SexfHQv5cqHsxLOjETuqDuA==}
+    cpu: [x64]
+    os: [linux]
+
   '@rollup/rollup-win32-arm64-msvc@4.37.0':
     resolution: {integrity: sha512-Jm7biMazjNzTU4PrQtr7VS8ibeys9Pn29/1bm4ph7CP2kf21950LgN+BaE2mJ1QujnvOc6p54eWWiVvn05SOBg==}
     cpu: [arm64]
     os: [win32]
 
+  '@rollup/rollup-win32-arm64-msvc@4.46.2':
+    resolution: {integrity: sha512-wiJWMIpeaak/jsbaq2HMh/rzZxHVW1rU6coyeNNpMwk5isiPjSTx0a4YLSlYDwBH/WBvLz+EtsNqQScZTLJy3g==}
+    cpu: [arm64]
+    os: [win32]
+
   '@rollup/rollup-win32-ia32-msvc@4.37.0':
     resolution: {integrity: sha512-e3/1SFm1OjefWICB2Ucstg2dxYDkDTZGDYgwufcbsxTHyqQps1UQf33dFEChBNmeSsTOyrjw2JJq0zbG5GF6RA==}
     cpu: [ia32]
     os: [win32]
 
+  '@rollup/rollup-win32-ia32-msvc@4.46.2':
+    resolution: {integrity: sha512-gBgaUDESVzMgWZhcyjfs9QFK16D8K6QZpwAaVNJxYDLHWayOta4ZMjGm/vsAEy3hvlS2GosVFlBlP9/Wb85DqQ==}
+    cpu: [ia32]
+    os: [win32]
+
   '@rollup/rollup-win32-x64-msvc@4.37.0':
     resolution: {integrity: sha512-LWbXUBwn/bcLx2sSsqy7pK5o+Nr+VCoRoAohfJ5C/aBio9nfJmGQqHAhU6pwxV/RmyTk5AqdySma7uwWGlmeuA==}
     cpu: [x64]
     os: [win32]
 
+  '@rollup/rollup-win32-x64-msvc@4.46.2':
+    resolution: {integrity: sha512-CvUo2ixeIQGtF6WvuB87XWqPQkoFAFqW+HUo/WzHwuHDvIwZCtjdWXoYCcr06iKGydiqTclC4jU/TNObC/xKZg==}
+    cpu: [x64]
+    os: [win32]
+
   '@sentry-internal/browser-utils@8.55.0':
     resolution: {integrity: sha512-ROgqtQfpH/82AQIpESPqPQe0UyWywKJsmVIqi3c5Fh+zkds5LUxnssTj3yNd1x+kxaPDVB023jAP+3ibNgeNDw==}
     engines: {node: '>=14.18'}
@@ -1324,6 +1424,9 @@ packages:
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
+  '@types/estree@1.0.8':
+    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
+
   '@types/hast@3.0.4':
     resolution: {integrity: sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==}
 
@@ -2783,6 +2886,10 @@ packages:
     resolution: {integrity: sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==}
     engines: {node: '>=12'}
 
+  picomatch@4.0.3:
+    resolution: {integrity: sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==}
+    engines: {node: '>=12'}
+
   plausible-tracker@0.3.9:
     resolution: {integrity: sha512-hMhneYm3GCPyQon88SZrVJx+LlqhM1kZFQbuAgXPoh/Az2YvO1B6bitT9qlhpiTdJlsT5lsr3gPmzoVjb5CDXA==}
     engines: {node: '>=10'}
@@ -2836,6 +2943,10 @@ packages:
     resolution: {integrity: sha512-dle9A3yYxlBSrt8Fu+IpjGT8SY8hN0mlaA6GY8t0P5PjIOZemULz/E2Bnm/2dcUOena75OTNkHI76uZBNUUq3A==}
     engines: {node: ^10 || ^12 || >=14}
 
+  postcss@8.5.6:
+    resolution: {integrity: sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==}
+    engines: {node: ^10 || ^12 || >=14}
+
   postgres-array@2.0.0:
     resolution: {integrity: sha512-VpZrUqU5A69eQyW2c5CA1jtLecCsN2U/bD6VilrFDWq5+5UIEVO7nazS3TEcHf1zuPYO/sqGvUvW62g86RXZuA==}
     engines: {node: '>=4'}
@@ -2965,6 +3076,11 @@ packages:
     engines: {node: '>=18.0.0', npm: '>=8.0.0'}
     hasBin: true
 
+  rollup@4.46.2:
+    resolution: {integrity: sha512-WMmLFI+Boh6xbop+OAGo9cQ3OgX9MIg7xOQjn+pTCwOkk+FNDAeAemXkJ3HzDJrVXleLOFVa1ipuc1AmEx1Dwg==}
+    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
+    hasBin: true
+
   rrweb-cssom@0.8.0:
     resolution: {integrity: sha512-guoltQEx+9aMf2gDZ0s62EcV8lsXR+0w8915TC3ITdn2YueuNjdAYh/levpU9nFaoChh9RUS5ZdQMrKfVEN9tw==}
 
@@ -3426,6 +3542,46 @@ packages:
       yaml:
         optional: true
 
+  vite@7.0.6:
+    resolution: {integrity: sha512-MHFiOENNBd+Bd9uvc8GEsIzdkn1JxMmEeYX35tI3fv0sJBUTfW5tQsoaOwuY4KhBI09A3dUJ/DXf2yxPVPUceg==}
+    engines: {node: ^20.19.0 || >=22.12.0}
+    hasBin: true
+    peerDependencies:
+      '@types/node': ^20.19.0 || >=22.12.0
+      jiti: '>=1.21.0'
+      less: ^4.0.0
+      lightningcss: ^1.21.0
+      sass: ^1.70.0
+      sass-embedded: ^1.70.0
+      stylus: '>=0.54.8'
+      sugarss: ^5.0.0
+      terser: ^5.16.0
+      tsx: ^4.8.1
+      yaml: ^2.4.2
+    peerDependenciesMeta:
+      '@types/node':
+        optional: true
+      jiti:
+        optional: true
+      less:
+        optional: true
+      lightningcss:
+        optional: true
+      sass:
+        optional: true
+      sass-embedded:
+        optional: true
+      stylus:
+        optional: true
+      sugarss:
+        optional: true
+      terser:
+        optional: true
+      tsx:
+        optional: true
+      yaml:
+        optional: true
+
   vitefu@1.0.6:
     resolution: {integrity: sha512-+Rex1GlappUyNN6UfwbVZne/9cYC4+R2XDk9xkNXBKMw6HQagdX9PgZ8V2v1WUSK1wfBLp7qbI1+XSNIlB1xmA==}
     peerDependencies:
@@ -3672,7 +3828,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@97e114e(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
@@ -4407,63 +4563,123 @@ snapshots:
   '@rollup/rollup-android-arm-eabi@4.37.0':
     optional: true
 
+  '@rollup/rollup-android-arm-eabi@4.46.2':
+    optional: true
+
   '@rollup/rollup-android-arm64@4.37.0':
     optional: true
 
+  '@rollup/rollup-android-arm64@4.46.2':
+    optional: true
+
   '@rollup/rollup-darwin-arm64@4.37.0':
     optional: true
 
+  '@rollup/rollup-darwin-arm64@4.46.2':
+    optional: true
+
   '@rollup/rollup-darwin-x64@4.37.0':
     optional: true
 
+  '@rollup/rollup-darwin-x64@4.46.2':
+    optional: true
+
   '@rollup/rollup-freebsd-arm64@4.37.0':
     optional: true
 
+  '@rollup/rollup-freebsd-arm64@4.46.2':
+    optional: true
+
   '@rollup/rollup-freebsd-x64@4.37.0':
     optional: true
 
+  '@rollup/rollup-freebsd-x64@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-arm-gnueabihf@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-arm-gnueabihf@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-arm-musleabihf@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-arm-musleabihf@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-arm64-gnu@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-arm64-gnu@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-arm64-musl@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-arm64-musl@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-loongarch64-gnu@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-loongarch64-gnu@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-powerpc64le-gnu@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-ppc64-gnu@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-gnu@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-gnu@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-riscv64-musl@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-riscv64-musl@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-s390x-gnu@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-s390x-gnu@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-x64-gnu@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-x64-gnu@4.46.2':
+    optional: true
+
   '@rollup/rollup-linux-x64-musl@4.37.0':
     optional: true
 
+  '@rollup/rollup-linux-x64-musl@4.46.2':
+    optional: true
+
   '@rollup/rollup-win32-arm64-msvc@4.37.0':
     optional: true
 
+  '@rollup/rollup-win32-arm64-msvc@4.46.2':
+    optional: true
+
   '@rollup/rollup-win32-ia32-msvc@4.37.0':
     optional: true
 
+  '@rollup/rollup-win32-ia32-msvc@4.46.2':
+    optional: true
+
   '@rollup/rollup-win32-x64-msvc@4.37.0':
     optional: true
 
+  '@rollup/rollup-win32-x64-msvc@4.46.2':
+    optional: true
+
   '@sentry-internal/browser-utils@8.55.0':
     dependencies:
       '@sentry/core': 8.55.0
@@ -4609,19 +4825,19 @@ snapshots:
       magic-string: 0.30.7
       svelte: 5.25.3
 
-  '@sentry/sveltekit@8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sentry/sveltekit@8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
       '@sentry/core': 8.55.0
       '@sentry/node': 8.55.0
       '@sentry/opentelemetry': 8.55.0(@opentelemetry/api@1.9.0)(@opentelemetry/context-async-hooks@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/core@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.57.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.30.1(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.30.0)
       '@sentry/svelte': 8.55.0(svelte@5.25.3)
       '@sentry/vite-plugin': 2.22.6
-      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       magic-string: 0.30.7
       magicast: 0.2.8
       sorcery: 1.0.0
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
     transitivePeerDependencies:
       - '@opentelemetry/api'
       - '@opentelemetry/context-async-hooks'
@@ -4682,13 +4898,13 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))':
+  '@sveltejs/adapter-static@3.0.8(@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))':
     dependencies:
-      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/kit': 2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
 
-  '@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sveltejs/kit@2.20.2(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.1.1
@@ -4701,27 +4917,27 @@ snapshots:
       set-cookie-parser: 2.7.1
       sirv: 3.0.1
       svelte: 5.25.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
 
-  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sveltejs/vite-plugin-svelte-inspector@4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/vite-plugin-svelte': 5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       debug: 4.4.0
       svelte: 5.25.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
     transitivePeerDependencies:
       - supports-color
 
-  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))':
+  '@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))':
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      '@sveltejs/vite-plugin-svelte-inspector': 4.0.1(@sveltejs/vite-plugin-svelte@5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)))(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
       debug: 4.4.0
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.17
       svelte: 5.25.3
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
-      vitefu: 1.0.6(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))
+      vite: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
+      vitefu: 1.0.6(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
     transitivePeerDependencies:
       - supports-color
 
@@ -4757,12 +4973,12 @@ snapshots:
       lodash: 4.17.21
       redent: 3.0.0
 
-  '@testing-library/svelte@5.2.8(svelte@5.25.3)(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)':
+  '@testing-library/svelte@5.2.8(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))(vitest@3.0.9)':
     dependencies:
       '@testing-library/dom': 10.4.0
       svelte: 5.25.3
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      vite: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
       vitest: 3.0.9(@types/node@22.13.14)(@vitest/ui@3.2.4)(jsdom@26.1.0)(sass@1.86.0)
 
   '@testing-library/user-event@14.6.1(@testing-library/dom@10.4.0)':
@@ -4785,6 +5001,8 @@ snapshots:
 
   '@types/estree@1.0.7': {}
 
+  '@types/estree@1.0.8': {}
+
   '@types/hast@3.0.4':
     dependencies:
       '@types/unist': 3.0.3
@@ -5071,7 +5289,7 @@ snapshots:
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
       magic-string: 0.30.17
-      postcss: 8.5.3
+      postcss: 8.5.6
       source-map-js: 1.2.1
 
   '@vue/compiler-ssr@3.5.13':
@@ -5811,14 +6029,18 @@ snapshots:
     dependencies:
       reusify: 1.1.0
 
-  fdir@6.4.3(picomatch@4.0.2):
+  fdir@6.4.3(picomatch@4.0.3):
     optionalDependencies:
-      picomatch: 4.0.2
+      picomatch: 4.0.3
 
   fdir@6.4.6(picomatch@4.0.2):
     optionalDependencies:
       picomatch: 4.0.2
 
+  fdir@6.4.6(picomatch@4.0.3):
+    optionalDependencies:
+      picomatch: 4.0.3
+
   fflate@0.8.2: {}
 
   file-entry-cache@8.0.0:
@@ -6395,6 +6617,8 @@ snapshots:
 
   picomatch@4.0.2: {}
 
+  picomatch@4.0.3: {}
+
   plausible-tracker@0.3.9: {}
 
   playwright-core@1.51.1: {}
@@ -6440,6 +6664,12 @@ snapshots:
       picocolors: 1.1.1
       source-map-js: 1.2.1
 
+  postcss@8.5.6:
+    dependencies:
+      nanoid: 3.3.11
+      picocolors: 1.1.1
+      source-map-js: 1.2.1
+
   postgres-array@2.0.0: {}
 
   postgres-bytea@1.0.0: {}
@@ -6577,6 +6807,32 @@ snapshots:
       '@rollup/rollup-win32-x64-msvc': 4.37.0
       fsevents: 2.3.3
 
+  rollup@4.46.2:
+    dependencies:
+      '@types/estree': 1.0.8
+    optionalDependencies:
+      '@rollup/rollup-android-arm-eabi': 4.46.2
+      '@rollup/rollup-android-arm64': 4.46.2
+      '@rollup/rollup-darwin-arm64': 4.46.2
+      '@rollup/rollup-darwin-x64': 4.46.2
+      '@rollup/rollup-freebsd-arm64': 4.46.2
+      '@rollup/rollup-freebsd-x64': 4.46.2
+      '@rollup/rollup-linux-arm-gnueabihf': 4.46.2
+      '@rollup/rollup-linux-arm-musleabihf': 4.46.2
+      '@rollup/rollup-linux-arm64-gnu': 4.46.2
+      '@rollup/rollup-linux-arm64-musl': 4.46.2
+      '@rollup/rollup-linux-loongarch64-gnu': 4.46.2
+      '@rollup/rollup-linux-ppc64-gnu': 4.46.2
+      '@rollup/rollup-linux-riscv64-gnu': 4.46.2
+      '@rollup/rollup-linux-riscv64-musl': 4.46.2
+      '@rollup/rollup-linux-s390x-gnu': 4.46.2
+      '@rollup/rollup-linux-x64-gnu': 4.46.2
+      '@rollup/rollup-linux-x64-musl': 4.46.2
+      '@rollup/rollup-win32-arm64-msvc': 4.46.2
+      '@rollup/rollup-win32-ia32-msvc': 4.46.2
+      '@rollup/rollup-win32-x64-msvc': 4.46.2
+      fsevents: 2.3.3
+
   rrweb-cssom@0.8.0: {}
 
   run-parallel@1.2.0:
@@ -6755,11 +7011,11 @@ snapshots:
 
   supports-preserve-symlinks-flag@1.0.0: {}
 
-  svelte-check@4.1.5(picomatch@4.0.2)(svelte@5.25.3)(typescript@5.8.2):
+  svelte-check@4.1.5(picomatch@4.0.3)(svelte@5.25.3)(typescript@5.8.2):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       chokidar: 4.0.3
-      fdir: 6.4.3(picomatch@4.0.2)
+      fdir: 6.4.3(picomatch@4.0.3)
       picocolors: 1.1.1
       sade: 1.8.1
       svelte: 5.25.3
@@ -7038,9 +7294,22 @@ snapshots:
       fsevents: 2.3.3
       sass: 1.86.0
 
-  vitefu@1.0.6(vite@6.2.3(@types/node@22.13.14)(sass@1.86.0)):
+  vite@7.0.6(@types/node@22.13.14)(sass@1.86.0):
+    dependencies:
+      esbuild: 0.25.1
+      fdir: 6.4.6(picomatch@4.0.3)
+      picomatch: 4.0.3
+      postcss: 8.5.6
+      rollup: 4.46.2
+      tinyglobby: 0.2.14
     optionalDependencies:
-      vite: 6.2.3(@types/node@22.13.14)(sass@1.86.0)
+      '@types/node': 22.13.14
+      fsevents: 2.3.3
+      sass: 1.86.0
+
+  vitefu@1.0.6(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0)):
+    optionalDependencies:
+      vite: 7.0.6(@types/node@22.13.14)(sass@1.86.0)
 
   vitest@3.0.9(@types/node@22.13.14)(@vitest/ui@3.2.4)(jsdom@26.1.0)(sass@1.86.0):
     dependencies:
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index 41d77bc988..7eeabac8c3 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -6,6 +6,7 @@
     export let label: string | undefined = undefined;
     export let value: string | number | boolean | null;
     export let helper: string | undefined = undefined;
+    export let autofocus: boolean | undefined = undefined;
     export let optionalText: string | number | boolean | null | undefined = undefined;
     export let placeholder = '';
     export let required = false;
@@ -53,6 +54,7 @@
     {optionalText}
     {placeholder}
     {disabled}
+    {autofocus}
     helper={error ?? helper}
     {required}
     state={error ? 'error' : 'default'}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
new file mode 100644
index 0000000000..163a015457
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
@@ -0,0 +1,42 @@
+<script lang="ts">
+    import { onDestroy, onMount } from 'svelte';
+    import type { Columns } from './store';
+    import type { Models } from '@appwrite.io/console';
+    import ColumnItem from './row-[row]/columnItem.svelte';
+    import deepEqual from 'deep-equal';
+
+    let {
+        column,
+        row = $bindable(null),
+        onRowStructureUpdate = null
+    }: {
+        row: Models.Row;
+        column: Columns;
+        onRowStructureUpdate?: (row: Models.Row) => void;
+    } = $props();
+
+    let original: Models.Row;
+    let wrapperEl: HTMLDivElement;
+
+    onMount(() => {
+        original = structuredClone(row);
+
+        const trigger = wrapperEl.querySelector('button.input') as HTMLButtonElement;
+        if (trigger) {
+            trigger.click();
+        }
+    });
+
+    /**
+     * fire on `onDestroy` because at this point,
+     * the cell editor slot fragment is closed and enter was hit!
+     */
+    onDestroy(() => {
+        const hasChanged = !deepEqual(original, row);
+        if (hasChanged && onRowStructureUpdate) onRowStructureUpdate(row);
+    });
+</script>
+
+<div style:width="100%" bind:this={wrapperEl}>
+    <ColumnItem {column} fromSpreadsheet bind:formValues={row} label={undefined} editing />
+</div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte
index 84a89115fb..2a1101affc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/column.svelte
@@ -13,6 +13,7 @@
     export let optionalText: string | undefined = undefined;
     export let value: string | number | boolean | null | string[];
     export let editing = false;
+    export let limited = false;
     export let column:
         | Models.ColumnBoolean
         | Models.ColumnEmail
@@ -48,6 +49,7 @@
             {id}
             {label}
             {column}
+            {limited}
             {optionalText}
             bind:value />
     {:else}
@@ -55,6 +57,7 @@
             this={columnsTypeMap[column.type]}
             {id}
             {editing}
+            {limited}
             {label}
             {column}
             {optionalText}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte
index 9b4f67756a..36e4099440 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columnItem.svelte
@@ -10,6 +10,7 @@
     export let formValues: object = {};
     export let label: string;
     export let editing = false;
+    export let fromSpreadsheet: boolean = false;
 
     function removeArrayItem(key: string, index: number) {
         formValues = {
@@ -65,6 +66,7 @@
                 <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
                     <Column
                         {column}
+                        limited={fromSpreadsheet}
                         id={`${column.key}-${index}`}
                         optionalText={index === 0 ? getColumnType(column) : undefined}
                         label={index === 0 ? label : ''}
@@ -87,6 +89,7 @@
         {label}
         {editing}
         {column}
+        limited={fromSpreadsheet}
         id={column.key}
         optionalText={getColumnType(column)}
         bind:value={formValues[column.key]} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/boolean.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/boolean.svelte
index cf26aa742c..dca9d96889 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/boolean.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/boolean.svelte
@@ -5,19 +5,48 @@
     export let id: string;
     export let label: string;
     export let value: boolean;
+    export let limited: boolean = false;
     export let column: Models.ColumnBoolean;
     export let optionalText: string | undefined = undefined;
+
+    $: if (limited) {
+        label = undefined;
+        optionalText = undefined;
+    }
+
+    const onChange = (event: CustomEvent) => {
+        if (limited) {
+            value = event.detail as boolean;
+        }
+    };
 </script>
 
-<InputSelect
-    {id}
-    {label}
-    bind:value
-    {optionalText}
-    placeholder="Select a value"
-    required={column.required}
-    options={[
-        !column.required && { label: 'NULL', value: null },
-        { label: 'True', value: true },
-        { label: 'False', value: false }
-    ].filter(Boolean)} />
+{#if limited}
+    <InputSelect
+        {id}
+        {label}
+        {value}
+        {optionalText}
+        autofocus={limited}
+        placeholder="Select a value"
+        required={column.required}
+        options={[
+            { label: 'True', value: true },
+            { label: 'False', value: false }
+        ].filter(Boolean)}
+        on:change={onChange} />
+{:else}
+    <InputSelect
+        {id}
+        {label}
+        bind:value
+        {optionalText}
+        autofocus={limited}
+        placeholder="Select a value"
+        required={column.required}
+        options={[
+            !column.required && { label: 'NULL', value: null },
+            { label: 'True', value: true },
+            { label: 'False', value: false }
+        ].filter(Boolean)} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/datetime.svelte
index fe9960607c..09020d00f5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/datetime.svelte
@@ -5,14 +5,15 @@
     export let id: string;
     export let label: string;
     export let value: string;
+    export let limited: boolean = false;
     export let column: Models.ColumnDatetime;
     export let type: 'date' | 'time' | 'datetime-local' = 'datetime-local';
+
+    $: autofocus = limited;
+    $: nullable = !limited ? !column.required : false;
+    $: if (limited) {
+        label = undefined;
+    }
 </script>
 
-<InputDateTime
-    {id}
-    {label}
-    {type}
-    bind:value
-    required={column.required}
-    nullable={!column.required} />
+<InputDateTime {id} {label} {type} bind:value {nullable} {autofocus} required={column.required} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/email.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/email.svelte
index eeb7a13349..d64bde2893 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/email.svelte
@@ -5,13 +5,18 @@
     export let id: string;
     export let label: string;
     export let value: string | null;
+    export let limited: boolean = false;
     export let column: Models.ColumnEmail;
+
+    $: autofocus = limited;
+    $: nullable = !limited ? !column.required : false;
 </script>
 
 <InputEmail
     {id}
     {label}
     bind:value
+    {nullable}
+    {autofocus}
     placeholder="Enter URL"
-    required={column.required}
-    nullable={!column.required} />
+    required={column.required} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/enum.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/enum.svelte
index 25f2a1f06b..f2b4978482 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/enum.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/enum.svelte
@@ -5,28 +5,50 @@
     export let id: string;
     export let label: string;
     export let value: string;
+    export let limited: boolean = false;
     export let column: Models.ColumnEnum;
     export let optionalText: string | undefined = undefined;
 
-    $: options = [
-        ...column.elements.map((element) => {
-            return {
-                label: element,
-                value: element
-            };
-        }),
-        !column.required && {
-            label: 'NULL',
-            value: null
+    $: baseOptions = column.elements.map((element) => ({
+        label: element,
+        value: element
+    }));
+
+    $: nullOption = !column.required ? [{ label: 'NULL', value: null }] : [];
+
+    $: options = [...baseOptions, ...nullOption];
+
+    $: if (limited) {
+        label = undefined;
+        optionalText = undefined;
+    }
+
+    const onChange = (event: CustomEvent) => {
+        if (limited) {
+            value = event.detail as string;
         }
-    ].filter(Boolean);
+    };
 </script>
 
-<InputSelect
-    bind:value
-    {options}
-    {id}
-    {label}
-    {optionalText}
-    required={column.required}
-    placeholder="Select a value" />
+{#if limited}
+    <InputSelect
+        {id}
+        {label}
+        {value}
+        {optionalText}
+        {options}
+        autofocus={limited}
+        required={column.required}
+        placeholder="Select a value"
+        on:change={onChange} />
+{:else}
+    <InputSelect
+        bind:value
+        {options}
+        {id}
+        {label}
+        {optionalText}
+        autofocus={limited}
+        required={column.required}
+        placeholder="Select a value" />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/integer.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/integer.svelte
index d25b85d9f7..2d80ba6cfa 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/integer.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/integer.svelte
@@ -5,15 +5,23 @@
     export let id: string;
     export let label: string;
     export let value: number;
+    export let limited: boolean = false;
     export let column: Models.ColumnInteger;
+
+    $: autofocus = limited;
+    $: nullable = !limited ? !column.required : false;
+    $: if (limited) {
+        label = undefined;
+    }
 </script>
 
 <InputNumber
     {id}
     {label}
     bind:value
+    {nullable}
+    {autofocus}
     min={column.min}
     max={column.max}
     required={column.required}
-    nullable={!column.required}
     step={column.type === 'double' ? 'any' : 1} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte
index 46619afecc..e884be701a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/relationship.svelte
@@ -12,6 +12,7 @@
 
     export let id: string;
     export let label: string;
+    export let limited: boolean = false;
 
     export let editing = false;
     export let value: string | string[];
@@ -148,8 +149,13 @@
         (!editing && hasItems && !showInput) ||
         (editing && hasItems && relatedList.every((item) => item) && !showInput);
     $: showEmptyInput = editing && totalCount === 0 && !showInput;
+
+    $: if (limit && !isRelationshipToMany(column)) {
+        label = undefined;
+    }
 </script>
 
+<!-- TODO: Maybe show a dialog for this for spreadsheet -->
 {#if isRelationshipToMany(column)}
     <Layout.Stack gap="xxl">
         <Layout.Stack gap="m">
@@ -270,10 +276,11 @@
 {:else}
     <InputSelect
         {id}
-        {label}
         {options}
+        autofocus={limited}
+        bind:value={singleRel}
         required={column.required}
+        label={limited ? undefined : label}
         placeholder={`Select ${column.key}`}
-        bind:value={singleRel}
         on:change={() => (value = singleRel)} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte
index fd6678b8fc..ab87d3649a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/string.svelte
@@ -5,7 +5,14 @@
     export let id: string;
     export let label: string;
     export let value: string;
+    export let limited: boolean = false;
     export let column: Models.ColumnString;
+
+    $: autofocus = limited;
+    $: maxlength = limited ? undefined : column.size;
+
+    // TODO: do we need the nullable checkbox?
+    $: nullable = !limited ? !column.required : false;
 </script>
 
 {#if column.size >= 50}
@@ -13,17 +20,19 @@
         {id}
         {label}
         bind:value
+        {maxlength}
+        {autofocus}
         placeholder="Enter string"
-        maxlength={column.size}
         required={column.required}
-        nullable={!column.required} />
+        {nullable} />
 {:else}
     <InputText
         {id}
         {label}
         bind:value
+        {nullable}
+        {autofocus}
+        {maxlength}
         placeholder="Enter string"
-        maxlength={column.size}
-        required={column.required}
-        nullable={!column.required} />
+        required={column.required} />
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/url.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/url.svelte
index c160e8a301..149afde7db 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/url.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/row-[row]/columns/url.svelte
@@ -5,13 +5,18 @@
     export let id: string;
     export let label: string;
     export let value: string | null;
+    export let limited: boolean = false;
     export let column: Models.ColumnUrl;
+
+    $: autofocus = limited;
+    $: nullable = !limited ? !column.required : false;
 </script>
 
 <InputURL
     {id}
     {label}
     bind:value
+    {nullable}
+    {autofocus}
     placeholder="Enter URL"
-    required={column.required}
-    nullable={!column.required} />
+    required={column.required} />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 33348b052f..f1f31ec020 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -62,6 +62,7 @@
     import SheetOptions from './sheetOptions.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
     import SpreadsheetContainer from './layout/spreadsheet.svelte';
+    import EditCellRow from './editRowCell.svelte';
     import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
     import { copy } from '$lib/helpers/copy';
     import { debounce } from '$lib/helpers/debounce';
@@ -80,6 +81,8 @@
     let relationshipData: Partial<Models.Row>[];
     let selectedRelationship: Models.ColumnRelationship = null;
 
+    let rowsBeingUpdated: Record<string, boolean> = {};
+
     $: rows = data.rows;
 
     onMount(async () => {
@@ -438,11 +441,6 @@
         }
     }
 
-    const emptyCellsLimit = $isSmallViewport ? 12 : 18;
-
-    $: emptyCellsCount =
-        data.rows.rows.length >= emptyCellsLimit ? 0 : emptyCellsLimit - data.rows.rows.length;
-
     const saveColumnsWidth = debounce((column: { columnId: string; newWidth: number }) => {
         const fixedWidth =
             $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
@@ -455,6 +453,43 @@
         });
     }, 1000);
 
+    // TODO: should be fixed at the sdk level!
+    const SYSTEM_KEYS = new Set(['$tableId', '$databaseId']);
+
+    async function updateRow(row: Models.Row) {
+        rowsBeingUpdated[row.$id] = true;
+        try {
+            // TODO: should be fixed at the sdk level!
+            const onlyData = Object.fromEntries(
+                Object.entries(row).filter(([key]) => !SYSTEM_KEYS.has(key))
+            );
+
+            await sdk
+                .forProject(page.params.region, page.params.project)
+                .grids.updateRow(databaseId, tableId, row.$id, onlyData, row.$permissions);
+
+            invalidate(Dependencies.ROW);
+            trackEvent(Submit.RowUpdate);
+            addNotification({
+                message: 'Row has been updated',
+                type: 'success'
+            });
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.RowUpdatePermissions);
+        } finally {
+            rowsBeingUpdated[row.$id] = false;
+        }
+    }
+
+    const emptyCellsLimit = $isSmallViewport ? 12 : 18;
+
+    $: emptyCellsCount =
+        data.rows.rows.length >= emptyCellsLimit ? 0 : emptyCellsLimit - data.rows.rows.length;
+
     $: reInitSpreadsheetKey = `${$table.columns.length}#${$columnsOrder.length}`;
 
     $: canShowDatetimePopover = true;
@@ -535,10 +570,11 @@
             </svelte:fragment>
 
             {#each rows.rows as row, index (row.$id)}
-                <!-- TODO: add `value` for user attributes -->
-                <Spreadsheet.Row.Base {root} id={row.$id} {index}>
+                {@const isUpdatingRow = rowsBeingUpdated[row.$id]}
+                <Spreadsheet.Row.Base {root} id={row.$id} {index} disabled={isUpdatingRow}>
                     {#each $tableColumns as { id: columnId, isEditable } (columnId)}
                         {@const formatted = formatColumn(row[columnId])}
+                        {@const rowColumn = $columns.find((col) => col.key === columnId)}
                         <Spreadsheet.Cell
                             {root}
                             {isEditable}
@@ -558,7 +594,7 @@
                             {:else if columnId === 'actions'}
                                 <SheetOptions
                                     type="row"
-                                    column={$columns.find((col) => col.key === columnId)}
+                                    column={rowColumn}
                                     onSelect={(option) =>
                                         onSelectSheetOption(option, null, 'row', row)}
                                     onVisibilityChanged={(visible) => {
@@ -575,91 +611,94 @@
                                         </Button.Button>
                                     {/snippet}
                                 </SheetOptions>
-                            {:else}
-                                {@const col = $columns.find((n) => n.key === columnId)}
-                                {#if col}
-                                    {#if isRelationship(col)}
-                                        {@const args = displayNames?.[col.relatedTable] ?? ['$id']}
-                                        {#if !isRelationshipToMany(col)}
-                                            {#if row[columnId]}
-                                                {@const related = row[columnId]}
-                                                <Link.Button
-                                                    variant="muted"
-                                                    on:click={(e) => {
-                                                        e.preventDefault();
-                                                        e.stopPropagation();
-                                                        // TODO: open sheet maybes
-                                                        goto(
-                                                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table/${col.relatedTable}/row/${related.$id}`
-                                                        );
-                                                    }}>
-                                                    {#each args as arg, i}
-                                                        {#if arg !== undefined}
-                                                            {#if i}&nbsp;|{/if}
-                                                            <span class="text" data-private
-                                                                >{related?.[arg]}</span>
-                                                        {/if}
-                                                    {/each}
-                                                </Link.Button>
-                                            {:else}
-                                                <span class="text">n/a</span>
-                                            {/if}
-                                        {:else}
-                                            {@const itemsNum = row[columnId]?.length}
-                                            <Button.Button
-                                                variant="extra-compact"
-                                                disabled={!itemsNum}
-                                                badge={itemsNum ?? 0}
-                                                on:click={(e) => {
-                                                    e.stopPropagation();
-                                                    e.preventDefault();
-                                                    relationshipData = row[columnId];
-                                                    showRelationships = true;
-                                                    selectedRelationship = col;
-                                                }}>
-                                                Items
-                                            </Button.Button>
-                                        {/if}
+                            {:else if isRelationship(rowColumn)}
+                                {@const args = displayNames?.[rowColumn.relatedTable] ?? ['$id']}
+                                {#if !isRelationshipToMany(rowColumn)}
+                                    {#if row[columnId]}
+                                        {@const related = row[columnId]}
+                                        <Link.Button
+                                            variant="muted"
+                                            on:click={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                // TODO: open sheet maybes
+                                                goto(
+                                                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table/${rowColumn.relatedTable}/row/${related.$id}`
+                                                );
+                                            }}>
+                                            {#each args as arg, i}
+                                                {#if arg !== undefined}
+                                                    {#if i}&nbsp;|{/if}
+                                                    <span class="text" data-private
+                                                        >{related?.[arg]}</span>
+                                                {/if}
+                                            {/each}
+                                        </Link.Button>
                                     {:else}
-                                        {@const value = row[columnId]}
-                                        {@const formatted = formatColumn(row[columnId])}
-                                        {@const isDatetimeAttribute = col.type === 'datetime'}
-                                        {@const isEncryptedAttribute = isString(col) && col.encrypt}
-                                        {#if isDatetimeAttribute}
-                                            <DualTimeView time={value}>
-                                                <span slot="title">Timestamp</span>
-                                                {toLocaleDateTime(value, true)}
-                                            </DualTimeView>
-                                        {:else if isEncryptedAttribute}
-                                            <button on:click={(e) => e.preventDefault()}>
-                                                <InteractiveText
-                                                    copy={false}
-                                                    variant="secret"
-                                                    isVisible={false}
-                                                    text={formatted} />
-                                            </button>
-                                        {:else if formatted.length > 20}
-                                            <Tooltip placement="bottom" portal>
-                                                <Typography.Text truncate>
-                                                    {formatted}
-                                                </Typography.Text>
-                                                <span
-                                                    slot="tooltip"
-                                                    style:white-space="pre-wrap"
-                                                    style:word-break="break-word">
-                                                    {formatted}
-                                                </span>
-                                            </Tooltip>
-                                        {:else if formatted === 'null'}
-                                            <Badge variant="secondary" content="NULL" size="xs" />
-                                        {:else}
-                                            <Typography.Text truncate>
-                                                {formatted}
-                                            </Typography.Text>
-                                        {/if}
+                                        <span class="text">n/a</span>
                                     {/if}
+                                {:else}
+                                    {@const itemsNum = row[columnId]?.length}
+                                    <Button.Button
+                                        variant="extra-compact"
+                                        disabled={!itemsNum}
+                                        badge={itemsNum ?? 0}
+                                        on:click={(e) => {
+                                            e.stopPropagation();
+                                            e.preventDefault();
+                                            relationshipData = row[columnId];
+                                            showRelationships = true;
+                                            selectedRelationship = rowColumn;
+                                        }}>
+                                        Items
+                                    </Button.Button>
+                                {/if}
+                            {:else}
+                                {@const value = row[columnId]}
+                                {@const formatted = formatColumn(row[columnId])}
+                                {@const isDatetimeAttribute = rowColumn.type === 'datetime'}
+                                {@const isEncryptedAttribute =
+                                    isString(rowColumn) && rowColumn.encrypt}
+                                {#if isDatetimeAttribute}
+                                    <DualTimeView time={value}>
+                                        <span slot="title">Timestamp</span>
+                                        {toLocaleDateTime(value, true)}
+                                    </DualTimeView>
+                                {:else if isEncryptedAttribute}
+                                    <button on:click={(e) => e.preventDefault()}>
+                                        <InteractiveText
+                                            copy={false}
+                                            variant="secret"
+                                            isVisible={false}
+                                            text={formatted} />
+                                    </button>
+                                {:else if formatted.length > 20}
+                                    <Tooltip placement="bottom" portal>
+                                        <Typography.Text truncate>
+                                            {formatted}
+                                        </Typography.Text>
+                                        <span
+                                            slot="tooltip"
+                                            style:white-space="pre-wrap"
+                                            style:word-break="break-word">
+                                            {formatted}
+                                        </span>
+                                    </Tooltip>
+                                {:else if formatted === 'null'}
+                                    <Badge variant="secondary" content="NULL" size="xs" />
+                                {:else}
+                                    <Typography.Text truncate>
+                                        {formatted}
+                                    </Typography.Text>
                                 {/if}
                             {/if}
+
+                            <svelte:fragment slot="cell-editor">
+                                <EditCellRow
+                                    bind:row
+                                    column={rowColumn}
+                                    onRowStructureUpdate={updateRow} />
+                            </svelte:fragment>
                         </Spreadsheet.Cell>
                     {/each}
                 </Spreadsheet.Row.Base>

From fedd01a090b91ab638863e084002825bc6058426 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 5 Aug 2025 09:55:36 +0530
Subject: [PATCH 088/118] update: persist sorting.

---
 src/lib/components/sortButton.svelte          |  8 ++--
 .../table-[table]/+page.ts                    | 37 +++++++++++++++----
 .../table-[table]/spreadsheet.svelte          | 32 +++++++++++++---
 3 files changed, 59 insertions(+), 18 deletions(-)

diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
index 0b3046561e..6383bf1db0 100644
--- a/src/lib/components/sortButton.svelte
+++ b/src/lib/components/sortButton.svelte
@@ -17,7 +17,7 @@
     }: {
         column: string;
         disabled?: boolean;
-        onSort?: (query: string[]) => void | Promise<void>;
+        onSort?: (query: string | null) => void | Promise<void>;
         state?: Writable<{ column: string | null; direction: SortDirection }>;
     } = $props();
 
@@ -37,11 +37,11 @@
         });
 
         if (nextDir === 'default') {
-            onSort?.([]);
+            onSort?.(null);
         } else if (nextDir === 'asc') {
-            onSort?.([Query.orderAsc(column)]);
+            onSort?.(Query.orderAsc(column));
         } else {
-            onSort?.([Query.orderDesc(column)]);
+            onSort?.(Query.orderDesc(column));
         }
     }
 </script>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
index 54ed3191a7..b2947a8bfe 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
@@ -1,10 +1,11 @@
 import { Dependencies /*PAGE_LIMIT*/ } from '$lib/constants';
 import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
-import { Query } from '@appwrite.io/console';
+import { type Models, Query } from '@appwrite.io/console';
 import type { PageLoad } from './$types';
 import { queries, queryParamToMap } from '$lib/components/filters';
 import { buildWildcardColumnsQuery } from './row-[row]/columns/store';
+import type { TagValue } from '$lib/components/filters/store';
 
 export const load: PageLoad = async ({ params, depends, url, route, parent }) => {
     const { table } = await parent();
@@ -29,12 +30,32 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
         query,
         rows: await sdk
             .forProject(params.region, params.project)
-            .grids.listRows(params.database, params.table, [
-                Query.limit(limit),
-                Query.offset(offset),
-                Query.orderDesc(''),
-                ...parsedQueries.values(),
-                ...buildWildcardColumnsQuery(table)
-            ])
+            .grids.listRows(
+                params.database,
+                params.table,
+                buildGridQueries(limit, offset, parsedQueries, table)
+            )
     };
 };
+
+function buildGridQueries(
+    limit: number,
+    offset: number,
+    parsedQueries: Map<TagValue, string>,
+    table: Models.Table
+) {
+    const hasOrderQuery = Array.from(parsedQueries.values()).some(
+        (q) => q.includes('orderAsc') || q.includes('orderDesc')
+    );
+
+    const queryArray = [Query.limit(limit), Query.offset(offset)];
+
+    // don't override if there's a user created sort!
+    if (!hasOrderQuery) {
+        queryArray.push(Query.orderDesc(''));
+    }
+
+    queryArray.push(...parsedQueries.values(), ...buildWildcardColumnsQuery(table));
+
+    return queryArray;
+}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index f1f31ec020..3b70b58131 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -265,11 +265,31 @@
     let showDelete = false;
     let selectedRowForDelete: Models.Row['$id'] | null = null;
 
-    async function sort(query: string[]) {
+    async function sort(query: string | null) {
         $spreadsheetLoading = true;
-        rows = await sdk
-            .forProject(page.params.region, page.params.project)
-            .grids.listRows(databaseId, tableId, query);
+
+        const url = new URL(page.url);
+
+        if (query === null) {
+            url.searchParams.delete('query');
+        } else {
+            // compatible with `load` func!
+            const { attribute, method } = JSON.parse(query);
+            url.searchParams.set(
+                'query',
+                JSON.stringify([
+                    [
+                        {
+                            tag: `${attribute} ${method}`,
+                            value: attribute
+                        },
+                        query
+                    ]
+                ])
+            );
+        }
+
+        await goto(`${url.pathname}${url.search}`);
         $spreadsheetLoading = false;
     }
 
@@ -388,10 +408,10 @@
 
             if (action === 'sort-asc') {
                 sortState.set({ column: columnId, direction: 'asc' });
-                await sort([Query.orderAsc(columnId)]);
+                await sort(Query.orderAsc(columnId));
             } else if (action === 'sort-desc') {
                 sortState.set({ column: columnId, direction: 'desc' });
-                await sort([Query.orderDesc(columnId)]);
+                await sort(Query.orderDesc(columnId));
             }
 
             if (action === 'create-index') {

From cc04b38c1f0ea8a5811f54580d9c41d17377ffc9 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 5 Aug 2025 10:07:02 +0530
Subject: [PATCH 089/118] update: persist sorting icons state.

---
 .../database-[database]/table-[table]/+page.ts  | 17 +++++++++++++++++
 .../table-[table]/spreadsheet.svelte            |  2 ++
 2 files changed, 19 insertions(+)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
index b2947a8bfe..cfb8fed0b8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
@@ -23,11 +23,14 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
     const parsedQueries = queryParamToMap(paramQueries || '[]');
     queries.set(parsedQueries);
 
+    const currentSort = extractSortFromQueries(parsedQueries);
+
     return {
         offset,
         limit,
         view,
         query,
+        currentSort,
         rows: await sdk
             .forProject(params.region, params.project)
             .grids.listRows(
@@ -38,6 +41,20 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
     };
 };
 
+function extractSortFromQueries(parsedQueries: Map<TagValue, string>) {
+    for (const [tagValue, queryString] of parsedQueries.entries()) {
+        if (queryString.includes('orderAsc') || queryString.includes('orderDesc')) {
+            const isAsc = queryString.includes('orderAsc');
+            return {
+                column: tagValue.value,
+                direction: isAsc ? 'asc' : 'desc'
+            };
+        }
+    }
+
+    return { column: null, direction: 'default' };
+}
+
 function buildGridQueries(
     limit: number,
     offset: number,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 3b70b58131..5b65ddcea9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -89,6 +89,8 @@
         displayNames = preferences.getDisplayNames();
         columnsOrder.set(preferences.getColumnOrder(tableId));
         columnsWidth.set(preferences.getColumnWidths(tableId));
+
+        sortState.set(data.currentSort);
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));

From 98d0849e1d26cade977100648c54ad3069b47957 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 5 Aug 2025 10:25:52 +0530
Subject: [PATCH 090/118] misc: comment.

---
 .../database-[database]/table-[table]/spreadsheet.svelte       | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 5b65ddcea9..72ec8bd05c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -90,7 +90,8 @@
         columnsOrder.set(preferences.getColumnOrder(tableId));
         columnsWidth.set(preferences.getColumnWidths(tableId));
 
-        sortState.set(data.currentSort);
+        // data.currentSort is not recognised due to type issues I assume
+        sortState.set(data['currentSort']);
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));

From 8790ac3b96be0897e4cf34d823ec317e98f9a6a1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 5 Aug 2025 20:06:53 +0530
Subject: [PATCH 091/118] update: vlist.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 src/lib/components/sidebar.svelte             | 50 +++++++------
 src/lib/components/sortButton.svelte          |  3 +-
 .../table-[table]/spreadsheet.svelte          | 71 +++++++++++--------
 .../table-[table]/store.ts                    | 11 ++-
 6 files changed, 80 insertions(+), 67 deletions(-)

diff --git a/package.json b/package.json
index 1f52d3fd04..a4752b2456 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bcc844f99c..497f7da0e8 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3828,7 +3828,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@da8cd99(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 68f0a9bce2..112dadff9f 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -125,7 +125,7 @@
                 </Link.Button>
             </div>
         </div>
-        <div slot="middle" class:icons={state === 'icons'}>
+        <div slot="middle" class="middle-container" class:icons={state === 'icons'}>
             {#if progressCard}
                 <Tooltip placement="right" disabled={state !== 'icons'}>
                     <a
@@ -241,26 +241,30 @@
                             <span slot="tooltip">{projectOption.name}</span>
                         </Tooltip>
                     {/each}
-                    <div class="only-mobile divider">
+                    {#if project}
                         <Divider />
-                    </div>
-                    <div class="only-mobile">
-                        <Tooltip placement="right" disabled={state !== 'icons'}>
-                            <a
-                                href={`/console/project-${project.region}-${project.$id}/settings`}
-                                on:click={() => {
-                                    trackEvent('click_menu_settings');
-                                }}
-                                class="link"
-                                ><span class="link-icon"><Icon icon={IconCog} size="s" /></span
-                                ><span
-                                    class:no-text={state === 'icons'}
-                                    class:has-text={state === 'open'}
-                                    class="link-text">Settings</span
-                                ></a>
-                            <span slot="tooltip">Settings</span>
-                        </Tooltip>
-                    </div>
+
+                        <div class="mobile-tablet-settings">
+                            <Tooltip placement="right" disabled={state !== 'icons'}>
+                                <a
+                                    href={`/console/project-${project.region}-${project.$id}/settings`}
+                                    on:click={() => {
+                                        trackEvent('click_menu_settings');
+                                        sideBarIsOpen = false;
+                                    }}
+                                    class="link"
+                                    class:active={isSelected('/settings') && !isSelected('sites')}
+                                    ><span class="link-icon"><Icon icon={IconCog} size="s" /></span
+                                    ><span
+                                        class:no-text={state === 'icons'}
+                                        class:has-text={state === 'open'}
+                                        class="link-text"
+                                >Settings</span
+                                    ></a>
+                                <span slot="tooltip">Settings</span>
+                            </Tooltip>
+                        </div>
+                    {/if}
                 </Layout.Stack>
             {:else if $isSmallViewport}
                 <div class="action-buttons">
@@ -582,12 +586,6 @@
         width: 100%;
     }
 
-    .bottom {
-        @media (min-width: 1024px) {
-            height: var(--base-32, 32px);
-        }
-    }
-
     :global(button.collapse) {
         transform: translateX(-10px);
     }
diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
index 6383bf1db0..b574c611fd 100644
--- a/src/lib/components/sortButton.svelte
+++ b/src/lib/components/sortButton.svelte
@@ -8,6 +8,7 @@
     import { Icon } from '@appwrite.io/pink-svelte';
     import { IconChevronDown, IconChevronUp, IconSelector } from '@appwrite.io/pink-icons-svelte';
     import type { Writable } from 'svelte/store';
+    import type { SortState } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store';
 
     let {
         column,
@@ -18,7 +19,7 @@
         column: string;
         disabled?: boolean;
         onSort?: (query: string | null) => void | Promise<void>;
-        state?: Writable<{ column: string | null; direction: SortDirection }>;
+        state?: Writable<SortState>;
     } = $props();
 
     function sort() {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 72ec8bd05c..f3ab9b7b8a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -26,7 +26,8 @@
         columnsWidth,
         randomDataModalState,
         spreadsheetLoading,
-        showCreateIndexSheet
+        showCreateIndexSheet,
+        type SortState
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -81,8 +82,6 @@
     let relationshipData: Partial<Models.Row>[];
     let selectedRelationship: Models.ColumnRelationship = null;
 
-    let rowsBeingUpdated: Record<string, boolean> = {};
-
     $: rows = data.rows;
 
     onMount(async () => {
@@ -90,8 +89,7 @@
         columnsOrder.set(preferences.getColumnOrder(tableId));
         columnsWidth.set(preferences.getColumnWidths(tableId));
 
-        // data.currentSort is not recognised due to type issues I assume
-        sortState.set(data['currentSort']);
+        sortState.set(data.currentSort as SortState);
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
@@ -262,8 +260,8 @@
         );
     }
 
+    $: selectedRows = [];
     let showColumnDelete = false;
-    let selectedRows: string[] = [];
 
     let showDelete = false;
     let selectedRowForDelete: Models.Row['$id'] | null = null;
@@ -309,24 +307,19 @@
                     .grids.deleteRows(databaseId, tableId, [Query.equal('$id', selectedRows)]);
             }
 
+            await invalidate(Dependencies.ROWS);
             trackEvent(Submit.RowDelete);
             addNotification({
                 type: 'success',
                 message: `${selectedRows.length ? selectedRows.length : 1} row${selectedRows.length > 1 ? 's' : ''} deleted`
             });
-
-            if (selectedRowForDelete) {
-                await invalidate(Dependencies.ROW);
-                selectedRowForDelete = null;
-            } else {
-                await invalidate(Dependencies.ROWS);
-            }
         } catch (error) {
             addNotification({ type: 'error', message: error.message });
             trackError(error, Submit.RowDelete);
         } finally {
             selectedRows = [];
             showDelete = false;
+            selectedRowForDelete = null;
         }
     }
 
@@ -468,6 +461,19 @@
         const fixedWidth =
             $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
 
+        console.log(
+            JSON.stringify(
+                {
+                    [column.columnId]: {
+                        fixed: fixedWidth,
+                        resized: Math.ceil(column.newWidth)
+                    }
+                },
+                null,
+                2
+            )
+        );
+
         preferences.saveColumnWidths(data.organization.$id ?? data.project.teamId, tableId, {
             [column.columnId]: {
                 fixed: fixedWidth,
@@ -479,8 +485,9 @@
     // TODO: should be fixed at the sdk level!
     const SYSTEM_KEYS = new Set(['$tableId', '$databaseId']);
 
-    async function updateRow(row: Models.Row) {
-        rowsBeingUpdated[row.$id] = true;
+    async function updateRow(row: Models.Row, index: number) {
+        rows.rows[index] = row as Models.DefaultRow;
+
         try {
             // TODO: should be fixed at the sdk level!
             const onlyData = Object.fromEntries(
@@ -503,8 +510,6 @@
                 type: 'error'
             });
             trackError(error, Submit.RowUpdatePermissions);
-        } finally {
-            rowsBeingUpdated[row.$id] = false;
         }
     }
 
@@ -521,21 +526,18 @@
 <SpreadsheetContainer>
     {#key reInitSpreadsheetKey}
         <Spreadsheet.Root
-            let:root
             height="100%"
             allowSelection
             bind:selectedRows
+            useVirtualizer
+            keyboardNavigation
+            rowCount={rows.rows.length}
             bind:columns={$tableColumns}
             loading={$spreadsheetLoading}
             emptyCells={emptyCellsCount}
-            keyboardNavigation
             bottomActionClick={() => (showRecordsCreateSheet.show = true)}
-            on:columnsSwap={(order) => {
-                saveColumnsOrder(order.detail);
-            }}
-            on:columnsResize={(resize) => {
-                saveColumnsWidth(resize.detail);
-            }}>
+            on:columnsSwap={(order) => saveColumnsOrder(order.detail)}
+            on:columnsResize={(resize) => saveColumnsWidth(resize.detail)}>
             <svelte:fragment slot="header" let:root>
                 {#each $tableColumns as column (column.id)}
                     {#if column.isAction}
@@ -592,9 +594,9 @@
                 {/each}
             </svelte:fragment>
 
-            {#each rows.rows as row, index (row.$id)}
-                {@const isUpdatingRow = rowsBeingUpdated[row.$id]}
-                <Spreadsheet.Row.Base {root} id={row.$id} {index} disabled={isUpdatingRow}>
+            <svelte:fragment slot="rows" let:root let:item let:index>
+                {@const row = rows.rows[item.index]}
+                <Spreadsheet.Row.Base {root} {index} id={row?.$id} virtualItem={item}>
                     {#each $tableColumns as { id: columnId, isEditable } (columnId)}
                         {@const formatted = formatColumn(row[columnId])}
                         {@const rowColumn = $columns.find((col) => col.key === columnId)}
@@ -718,14 +720,16 @@
 
                             <svelte:fragment slot="cell-editor">
                                 <EditCellRow
-                                    bind:row
+                                    {row}
                                     column={rowColumn}
-                                    onRowStructureUpdate={updateRow} />
+                                    onRowStructureUpdate={(newRow) => {
+                                        updateRow(newRow, index);
+                                    }} />
                             </svelte:fragment>
                         </Spreadsheet.Cell>
                     {/each}
                 </Spreadsheet.Row.Base>
-            {/each}
+            </svelte:fragment>
 
             <svelte:fragment slot="footer">
                 <Layout.Stack
@@ -861,4 +865,9 @@
         position: absolute;
         transform: translateX(-50%);
     }
+
+    // very weird because the library already has this!
+    :global(.virtual-row:has([data-editing-mode='true'])) {
+        z-index: 1 !important;
+    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index da7632ce46..6240c040af 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -67,9 +67,14 @@ export const showRecordsCreateSheet = writable({
     row: null
 });
 
-export const sortState = writable({
-    column: null as string,
-    direction: 'default' as SortDirection
+export type SortState = {
+    column?: string;
+    direction: SortDirection;
+};
+
+export const sortState = writable<SortState>({
+    column: null,
+    direction: 'default'
 });
 
 export type ColumnDirection = {

From 2b6fe215bc4c09e7d55579f720609ddb73a82ee5 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 6 Aug 2025 19:14:58 +0530
Subject: [PATCH 092/118] fix: stateeeeeee issues!!!

---
 src/lib/components/sidebar.svelte             |   3 +-
 .../table-[table]/spreadsheet.svelte          | 313 +++++++++---------
 .../table-[table]/store.ts                    |   6 +
 3 files changed, 162 insertions(+), 160 deletions(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 112dadff9f..172bc7d01b 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -258,8 +258,7 @@
                                     ><span
                                         class:no-text={state === 'icons'}
                                         class:has-text={state === 'open'}
-                                        class="link-text"
-                                >Settings</span
+                                        class="link-text">Settings</span
                                     ></a>
                                 <span slot="tooltip">Settings</span>
                             </Tooltip>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index f3ab9b7b8a..8ac91b246a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -27,7 +27,8 @@
         randomDataModalState,
         spreadsheetLoading,
         showCreateIndexSheet,
-        type SortState
+        type SortState,
+        Deletion
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -67,6 +68,7 @@
     import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
     import { copy } from '$lib/helpers/copy';
     import { debounce } from '$lib/helpers/debounce';
+    import { writable } from 'svelte/store';
 
     export let data: PageData;
     export let showRecordsCreateSheet: {
@@ -74,107 +76,41 @@
         row: Models.Row | null;
     };
 
-    const databaseId = page.params.database;
+    $: rows = writable(data.rows);
     const tableId = page.params.table;
+    const databaseId = page.params.database;
 
+    const minimumWidth = 168;
+    const emptyCellsLimit = $isSmallViewport ? 12 : 18;
+    const selected = preferences.getCustomTableColumns(page.params.table);
+    const SYSTEM_KEYS = new Set([
+        '$tableId',
+        '$databaseId'
+    ]); /* TODO: should be fixed at the sdk level! */
+
+    let selectedRows = [];
     let displayNames = {};
     let showRelationships = false;
     let relationshipData: Partial<Models.Row>[];
     let selectedRelationship: Models.ColumnRelationship = null;
 
-    $: rows = data.rows;
+    let showDelete = false;
+    let showColumnDelete = false;
+    let deleteConfirmationChecked = false;
+    let selectedRowForDelete: Models.Row['$id'] | null = null;
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
         columnsOrder.set(preferences.getColumnOrder(tableId));
         columnsWidth.set(preferences.getColumnWidths(tableId));
 
+        makeTableColumns();
         sortState.set(data.currentSort as SortState);
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
 
-    function saveColumnsOrder(newOrder: string[], update: boolean = true) {
-        if (update) {
-            columnsOrder.set(newOrder);
-        }
-
-        preferences.saveColumnOrder(
-            data.organization.$id ?? data.project.teamId,
-            tableId,
-            newOrder
-        );
-    }
-
-    function formatArray(array: unknown[]) {
-        if (array.length === 0) return '[ ]';
-
-        let formattedFields: string[] = [];
-        for (const item of array) {
-            if (typeof item === 'string') {
-                formattedFields.push(`"${item}"`);
-            } else {
-                formattedFields.push(`${item}`);
-            }
-        }
-
-        return `[${formattedFields.join(', ')}]`;
-    }
-
-    function formatColumn(column: unknown) {
-        let formattedColumn: string;
-
-        if (typeof column === 'string') {
-            formattedColumn = column;
-        } else if (Array.isArray(column)) {
-            formattedColumn = formatArray(column);
-        } else if (column === null) {
-            formattedColumn = 'null';
-        } else {
-            formattedColumn = `${column}`;
-        }
-
-        return formattedColumn;
-    }
-
-    function getAppropriateIcon(type: string): ComponentType {
-        switch (type) {
-            case 'string':
-                return IconText;
-            case 'float':
-            case 'integer':
-                return IconHashtag;
-            case 'boolean':
-                return IconToggle;
-            case 'datetime':
-                return IconCalendar;
-            case 'email':
-                return IconMail;
-            case 'ip':
-                return IconLocationMarker;
-            case 'url':
-                return IconLink;
-            case 'enum':
-                return IconViewList;
-            case 'relationship':
-                return IconRelationship;
-        }
-    }
-
-    function getColumnWidth(
-        columnId: string,
-        defaultWidth: number | { min: number }
-    ): number | { min: number; max?: number } {
-        const savedWidth = $columnsWidth[columnId];
-        if (!savedWidth) return defaultWidth;
-
-        return savedWidth.resized;
-    }
-
-    $: selected = preferences.getCustomTableColumns(page.params.table);
-
-    const minimumWidth = 168;
-    $: if ($table.columns && $columnsOrder && $columnsWidth) {
+    function makeTableColumns() {
         const baseColumns = $table.columns.map((col) => ({
             id: col.key,
             title: col.key,
@@ -260,11 +196,97 @@
         );
     }
 
-    $: selectedRows = [];
-    let showColumnDelete = false;
+    function getColumnWidth(
+        columnId: string,
+        defaultWidth: number | { min: number }
+    ): number | { min: number; max?: number } {
+        const savedWidth = $columnsWidth?.[columnId];
+        if (!savedWidth) return defaultWidth;
 
-    let showDelete = false;
-    let selectedRowForDelete: Models.Row['$id'] | null = null;
+        return savedWidth.resized;
+    }
+
+    function saveColumnsOrder(newOrder: string[], update: boolean = true) {
+        if (update) {
+            columnsOrder.set(newOrder);
+        }
+
+        preferences.saveColumnOrder(
+            data.organization.$id ?? data.project.teamId,
+            tableId,
+            newOrder
+        );
+    }
+
+    function saveColumnsWidth(column: { columnId: string; newWidth: number }) {
+        const fixedWidth =
+            $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
+
+        columnsWidth.update((widths) => ({
+            ...widths,
+            [column.columnId]: {
+                fixed: fixedWidth,
+                resized: Math.ceil(column.newWidth)
+            }
+        }));
+
+        saveColumnWidthsToPreferences(column);
+    }
+
+    function formatArray(array: unknown[]) {
+        if (array.length === 0) return '[ ]';
+
+        let formattedFields: string[] = [];
+        for (const item of array) {
+            if (typeof item === 'string') {
+                formattedFields.push(`"${item}"`);
+            } else {
+                formattedFields.push(`${item}`);
+            }
+        }
+
+        return `[${formattedFields.join(', ')}]`;
+    }
+
+    function formatColumn(column: unknown) {
+        let formattedColumn: string;
+
+        if (typeof column === 'string') {
+            formattedColumn = column;
+        } else if (Array.isArray(column)) {
+            formattedColumn = formatArray(column);
+        } else if (column === null) {
+            formattedColumn = 'null';
+        } else {
+            formattedColumn = `${column}`;
+        }
+
+        return formattedColumn;
+    }
+
+    function getAppropriateIcon(type: string): ComponentType {
+        switch (type) {
+            case 'string':
+                return IconText;
+            case 'float':
+            case 'integer':
+                return IconHashtag;
+            case 'boolean':
+                return IconToggle;
+            case 'datetime':
+                return IconCalendar;
+            case 'email':
+                return IconMail;
+            case 'ip':
+                return IconLocationMarker;
+            case 'url':
+                return IconLink;
+            case 'enum':
+                return IconViewList;
+            case 'relationship':
+                return IconRelationship;
+        }
+    }
 
     async function sort(query: string | null) {
         $spreadsheetLoading = true;
@@ -355,27 +377,6 @@
         }
     }
 
-    enum Deletion {
-        'setNull' = 'Set rpw ID as NULL in all related rows',
-        'cascade' = 'All related rows will be deleted',
-        'restrict' = 'Row can not be deleted'
-    }
-
-    $: relatedColumns = $columns?.filter(
-        (attribute) =>
-            isRelationship(attribute) &&
-            // One-to-One are always included
-            (attribute.relationType === 'oneToOne' ||
-                // One-to-Many: Only if parent is deleted
-                (attribute.relationType === 'oneToMany' && attribute.side === 'parent') ||
-                // Many-to-One: Only include if child is deleted
-                (attribute.relationType === 'manyToOne' && attribute.side === 'child') ||
-                // Many-to-Many: Only include if the parent is being deleted
-                (isRelationshipToMany(attribute) && attribute.side === 'parent'))
-    ) as Models.ColumnRelationship[];
-
-    let checked = false;
-
     async function onSelectSheetOption(
         action: HeaderCellAction | RowCellAction,
         columnId: string,
@@ -457,39 +458,8 @@
         }
     }
 
-    const saveColumnsWidth = debounce((column: { columnId: string; newWidth: number }) => {
-        const fixedWidth =
-            $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
-
-        console.log(
-            JSON.stringify(
-                {
-                    [column.columnId]: {
-                        fixed: fixedWidth,
-                        resized: Math.ceil(column.newWidth)
-                    }
-                },
-                null,
-                2
-            )
-        );
-
-        preferences.saveColumnWidths(data.organization.$id ?? data.project.teamId, tableId, {
-            [column.columnId]: {
-                fixed: fixedWidth,
-                resized: Math.ceil(column.newWidth)
-            }
-        });
-    }, 1000);
-
-    // TODO: should be fixed at the sdk level!
-    const SYSTEM_KEYS = new Set(['$tableId', '$databaseId']);
-
-    async function updateRow(row: Models.Row, index: number) {
-        rows.rows[index] = row as Models.DefaultRow;
-
+    async function updateRowContents(row: Models.Row) {
         try {
-            // TODO: should be fixed at the sdk level!
             const onlyData = Object.fromEntries(
                 Object.entries(row).filter(([key]) => !SYSTEM_KEYS.has(key))
             );
@@ -513,25 +483,53 @@
         }
     }
 
-    const emptyCellsLimit = $isSmallViewport ? 12 : 18;
+    const saveColumnWidthsToPreferences = debounce(
+        (column: { columnId: string; newWidth: number }) => {
+            const fixedWidth =
+                $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
 
-    $: emptyCellsCount =
-        data.rows.rows.length >= emptyCellsLimit ? 0 : emptyCellsLimit - data.rows.rows.length;
+            preferences.saveColumnWidths(data.organization.$id ?? data.project.teamId, tableId, {
+                [column.columnId]: {
+                    fixed: fixedWidth,
+                    resized: Math.ceil(column.newWidth)
+                }
+            });
+        },
+        1000
+    );
 
-    $: reInitSpreadsheetKey = `${$table.columns.length}#${$columnsOrder.length}`;
+    $: relatedColumns = $columns?.filter(
+        (attribute) =>
+            isRelationship(attribute) &&
+            // One-to-One are always included
+            (attribute.relationType === 'oneToOne' ||
+                // One-to-Many: Only if parent is deleted
+                (attribute.relationType === 'oneToMany' && attribute.side === 'parent') ||
+                // Many-to-One: Only include if child is deleted
+                (attribute.relationType === 'manyToOne' && attribute.side === 'child') ||
+                // Many-to-Many: Only include if the parent is being deleted
+                (isRelationshipToMany(attribute) && attribute.side === 'parent'))
+    ) as Models.ColumnRelationship[];
+
+    $: emptyCellsCount =
+        $rows.rows.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $rows.rows.length;
 
     $: canShowDatetimePopover = true;
+
+    $: if ($table.columns) {
+        makeTableColumns();
+    }
 </script>
 
 <SpreadsheetContainer>
-    {#key reInitSpreadsheetKey}
+    {#key $rows.rows.length}
         <Spreadsheet.Root
             height="100%"
             allowSelection
             bind:selectedRows
             useVirtualizer
             keyboardNavigation
-            rowCount={rows.rows.length}
+            rowCount={$rows.rows.length}
             bind:columns={$tableColumns}
             loading={$spreadsheetLoading}
             emptyCells={emptyCellsCount}
@@ -595,18 +593,15 @@
             </svelte:fragment>
 
             <svelte:fragment slot="rows" let:root let:item let:index>
-                {@const row = rows.rows[item.index]}
+                {@const row = $rows.rows[item.index]}
                 <Spreadsheet.Row.Base {root} {index} id={row?.$id} virtualItem={item}>
                     {#each $tableColumns as { id: columnId, isEditable } (columnId)}
-                        {@const formatted = formatColumn(row[columnId])}
                         {@const rowColumn = $columns.find((col) => col.key === columnId)}
                         <Spreadsheet.Cell
                             {root}
                             {isEditable}
                             column={columnId}
-                            value={columnId.includes('$') || formatted === 'null'
-                                ? undefined
-                                : formatted}>
+                            value={$rows.rows[item.index][columnId]}>
                             {#if columnId === '$sequence'}
                                 <Id value={row.$sequence.toString()} tooltipPortal
                                     >{row.$sequence}</Id>
@@ -720,11 +715,9 @@
 
                             <svelte:fragment slot="cell-editor">
                                 <EditCellRow
-                                    {row}
                                     column={rowColumn}
-                                    onRowStructureUpdate={(newRow) => {
-                                        updateRow(newRow, index);
-                                    }} />
+                                    bind:row={$rows.rows[item.index]}
+                                    onRowStructureUpdate={updateRowContents} />
                             </svelte:fragment>
                         </Spreadsheet.Cell>
                     {/each}
@@ -740,7 +733,7 @@
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {selectedRows.length
                             ? `${selectedRows.length} rows selected`
-                            : `${rows.total} rows`}
+                            : `${$rows.total} rows`}
                     </Typography.Text>
 
                     <div style:margin-right="var(--space-6)">
@@ -832,7 +825,11 @@
             <div class="u-flex u-flex-vertical u-gap-16">
                 <Alert>To change the selection edit the relationship settings.</Alert>
                 <ul>
-                    <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
+                    <InputChoice
+                        id="delete"
+                        label="Delete"
+                        showLabel={false}
+                        bind:value={deleteConfirmationChecked}>
                         Delete {isSingle ? 'document' : 'documents'} from
                         <span data-private>{$table.name}</span>
                     </InputChoice>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 6240c040af..dd2c015de8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -135,3 +135,9 @@ export const randomDataModalState = writable({
 });
 
 export const spreadsheetLoading = writable(false);
+
+export enum Deletion {
+    'setNull' = 'Set rpw ID as NULL in all related rows',
+    'cascade' = 'All related rows will be deleted',
+    'restrict' = 'Row can not be deleted'
+}

From 29f13319194bd0f2bfd84aec64dfa3ef8f274332 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 6 Aug 2025 19:38:58 +0530
Subject: [PATCH 093/118] add: missed update fix for waterfall requests.

---
 .../table-[table]/+layout.svelte                  | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 6169699457..77094c458b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -51,11 +51,17 @@
     import { sleep } from '$lib/helpers/promises';
     import CreateIndex from './indexes/createIndex.svelte';
 
-    let createIndex: CreateIndex;
     let editRow: EditRow;
+    let createIndex: CreateIndex;
     let createColumn: CreateColumn;
     let selectedOption: Option['name'] = 'String';
 
+    /**
+     * adding a lot of fake data will trigger the realtime below
+     * and will keep invalidating the `Dependencies.TABLE` making a lot of API noise!
+     */
+    let isWaterfallFromFaker = false;
+
     onMount(() => {
         return realtime
             .forProject(page.params.region, page.params.project)
@@ -64,7 +70,9 @@
                     response.events.includes('databases.*.tables.*.columns.*') ||
                     response.events.includes('databases.*.tables.*.indexes.*')
                 ) {
-                    invalidate(Dependencies.TABLE);
+                    if (!isWaterfallFromFaker) {
+                        invalidate(Dependencies.TABLE);
+                    }
                 }
             });
     });
@@ -220,6 +228,8 @@
     });
 
     async function createFakeData() {
+        isWaterfallFromFaker = true;
+
         $spreadsheetLoading = true;
         $randomDataModalState.show = false;
 
@@ -271,6 +281,7 @@
         /* api is too fast! */
         // await sleep(1250);
         $spreadsheetLoading = false;
+        isWaterfallFromFaker = false;
     }
 </script>
 

From 3f9ee4c7d7839e1703e17f7cf96861b6e938b8c1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 8 Aug 2025 11:41:08 +0530
Subject: [PATCH 094/118] update: add delay to tooltips; update: proper id
 hashing for spreadsheet keys; update: state management issues with column
 swaps and resizing; update: handle horizontal grid scroll with restore on url
 query sorting;

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 34 ++++----
 src/lib/components/copy.svelte                | 48 +++++++----
 src/lib/components/id.svelte                  |  4 +-
 src/lib/helpers/string.ts                     |  9 +++
 .../table-[table]/layout/emptySheet.svelte    | 18 +++--
 .../table-[table]/layout/spreadsheet.svelte   | 24 +++++-
 .../table-[table]/spreadsheet.svelte          | 81 +++++++++++++------
 .../table-[table]/store.ts                    |  2 +
 9 files changed, 154 insertions(+), 68 deletions(-)

diff --git a/package.json b/package.json
index a4752b2456..34f45e6998 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 497f7da0e8..63473716a6 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -1451,11 +1451,11 @@ packages:
   '@types/prismjs@1.26.5':
     resolution: {integrity: sha512-AUZTa7hQ2KY5L7AmtSiqxlhWxb4ina0yd8hNbl4TWuqnv/pFP0nDMb3YrfSBf4hJVGLh2YEIBfKaBW/9UEl6IQ==}
 
-  '@types/prop-types@15.7.14':
-    resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
+  '@types/prop-types@15.7.15':
+    resolution: {integrity: sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==}
 
-  '@types/react@18.3.22':
-    resolution: {integrity: sha512-vUhG0YmQZ7kL/tmKLrD3g5zXbXXreZXB3pmROW8bg3CnLnpjkRVwUlLne7Ufa2r9yJ8+/6B73RzhAek5TBKh2Q==}
+  '@types/react@18.3.23':
+    resolution: {integrity: sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==}
 
   '@types/remarkable@2.0.8':
     resolution: {integrity: sha512-eKXqPZfpQl1kOADjdKchHrp2gwn9qMnGXhH/AtZe0UrklzhGJkawJo/Y/D0AlWcdWoWamFNIum8+/nkAISQVGg==}
@@ -3491,8 +3491,8 @@ packages:
   util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
 
-  vfile-message@4.0.2:
-    resolution: {integrity: sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==}
+  vfile-message@4.0.3:
+    resolution: {integrity: sha512-QTHzsGd1EhbZs4AsQ20JX1rC3cOlt/IWJruk893DfLRr57lcnOeMaWG4K0JrRta4mIJZKth2Au3mM3u03/JWKw==}
 
   vfile@6.0.3:
     resolution: {integrity: sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==}
@@ -3828,7 +3828,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
@@ -5033,11 +5033,11 @@ snapshots:
 
   '@types/prismjs@1.26.5': {}
 
-  '@types/prop-types@15.7.14': {}
+  '@types/prop-types@15.7.15': {}
 
-  '@types/react@18.3.22':
+  '@types/react@18.3.23':
     dependencies:
-      '@types/prop-types': 15.7.14
+      '@types/prop-types': 15.7.15
       csstype: 3.1.3
 
   '@types/remarkable@2.0.8': {}
@@ -7040,7 +7040,7 @@ snapshots:
 
   svelte-motion@0.12.2(svelte@5.25.3):
     dependencies:
-      '@types/react': 18.3.22
+      '@types/react': 18.3.23
       framesync: 6.1.2
       popmotion: 11.0.5
       style-value-types: 5.1.2
@@ -7253,7 +7253,7 @@ snapshots:
 
   util-deprecate@1.0.2: {}
 
-  vfile-message@4.0.2:
+  vfile-message@4.0.3:
     dependencies:
       '@types/unist': 3.0.3
       unist-util-stringify-position: 4.0.0
@@ -7261,7 +7261,7 @@ snapshots:
   vfile@6.0.3:
     dependencies:
       '@types/unist': 3.0.3
-      vfile-message: 4.0.2
+      vfile-message: 4.0.3
 
   vite-node@3.0.9(@types/node@22.13.14)(sass@1.86.0):
     dependencies:
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 1d472f6e40..029c59b541 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -1,18 +1,32 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { clickOnEnter } from '$lib/helpers/a11y';
+    import type { Snippet } from 'svelte';
     import { copy } from '$lib/helpers/copy';
-    import { addNotification } from '$lib/stores/notifications';
+    import { clickOnEnter } from '$lib/helpers/a11y';
     import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
 
-    export let value: string;
-    export let event: string = null;
-    export let eventContext = 'click_id_tag';
-    export let tooltipDisabled = false;
-    export let tooltipPortal = false;
-    export let copyText: string = 'Click to copy';
+    let {
+        value,
+        event = null,
+        eventContext = 'click_id_tag',
+        tooltipDisabled = false,
+        tooltipPortal = false,
+        copyText = 'Click to copy',
+        delay = 0,
+        children
+    }: {
+        value: string;
+        event?: string;
+        eventContext?: string;
+        tooltipDisabled?: boolean;
+        tooltipPortal?: boolean;
+        copyText?: string;
+        delay?: number;
+        children?: Snippet;
+    } = $props();
 
-    let content = copyText;
+    let content = $state(copyText);
 
     async function handleClick() {
         const success = await copy(value);
@@ -35,17 +49,21 @@
     //TODO: remove this component
 </script>
 
-<Tooltip disabled={tooltipDisabled} portal={tooltipPortal}>
+<Tooltip disabled={tooltipDisabled} portal={tooltipPortal} {delay}>
     <span
         data-private
         style:display="inline-flex"
         role="button"
         tabindex="0"
         style:cursor="pointer"
-        on:click|preventDefault|stopPropagation={handleClick}
-        on:keyup={clickOnEnter}
-        on:mouseenter={() => setTimeout(() => (content = copyText))}>
-        <slot />
+        onclick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleClick();
+        }}
+        onkeyup={clickOnEnter}
+        onmouseenter={() => setTimeout(() => (content = copyText))}>
+        {@render children?.()}
     </span>
     <p slot="tooltip" let:showing>
         {#if showing}
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index 341e4ba786..a2f7318a27 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -48,11 +48,13 @@
 
     export let value: string;
     export let event: string = null;
+
     export let tooltipPortal = false;
+    export let tooltipDelay: number = 0;
 </script>
 
 {#key value}
-    <Copy {value} {event} {tooltipPortal}>
+    <Copy {value} {event} {tooltipPortal} delay={tooltipDelay}>
         <Tag size="xs" variant="code">
             <Icon icon={IconDuplicate} size="s" slot="start" />
             <span
diff --git a/src/lib/helpers/string.ts b/src/lib/helpers/string.ts
index 31e5f905bf..c138a7483d 100644
--- a/src/lib/helpers/string.ts
+++ b/src/lib/helpers/string.ts
@@ -60,3 +60,12 @@ export const hostnameRegex = String.raw`(\*)|(\*\.)?(?!-)[A-Za-z0-9\-]+([\-\.]{1
  * Supports domains, localhost, wildcards, ip-addresses and Chrome extension IDs!
  */
 export const extendedHostnameRegex = String.raw`(\*)|(\*\.)?((?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}|localhost|(\d{1,3}\.){3}\d{1,3}|[a-z0-9]{32})`;
+
+export function hash(input: string | string[], delimiter: string = ','): string {
+    const str = Array.isArray(input) ? input.join(delimiter) : input;
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff;
+    }
+    return Math.abs(hash).toString(36);
+}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 6b8d4aaec5..deada4a07a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -192,13 +192,15 @@
         </svelte:fragment>
 
         <svelte:fragment slot="footer">
-            <Layout.Stack
-                direction="row"
-                alignContent="center"
-                alignItems="center"
-                justifyContent="space-between">
-                <Skeleton variant="line" height={18} width={125} />
-            </Layout.Stack>
+            {#if $spreadsheetLoading}
+                <Layout.Stack
+                    direction="row"
+                    alignContent="center"
+                    alignItems="center"
+                    justifyContent="space-between">
+                    <Skeleton variant="line" height={18} width={125} />
+                </Layout.Stack>
+            {/if}
         </svelte:fragment>
     </Spreadsheet.Root>
 
@@ -295,7 +297,7 @@
         top: 29%;
         bottom: 0;
         width: 100%;
-        height: 70vh;
+        height: 70.5vh;
         position: fixed;
         background: linear-gradient(
             180deg,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
index 108d1f2e00..8feffff6ec 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
@@ -1,13 +1,35 @@
 <script lang="ts">
+    import { scrollStore } from '../store';
+
     let spreadsheetHeight = '74.5vh';
     let spreadsheetWrapper: HTMLDivElement;
+    let spreadsheetGridContainer: HTMLDivElement;
+
+    function initSpreadsheetGridContainer() {
+        if (!spreadsheetWrapper) return false;
+
+        spreadsheetGridContainer = spreadsheetWrapper.querySelector('.spreadsheet-container');
+        return !!spreadsheetGridContainer;
+    }
 
-    function resizeSheet() {
+    /** adjust height to fill remaining viewport space */
+    export function resizeSheet() {
         if (!spreadsheetWrapper) return;
         const rect = spreadsheetWrapper.getBoundingClientRect();
         spreadsheetHeight = window.innerHeight - rect.top + 'px';
     }
 
+    export function saveGridSheetScroll() {
+        initSpreadsheetGridContainer();
+        scrollStore.set(spreadsheetGridContainer?.scrollLeft);
+    }
+
+    export function restoreGridSheetScroll() {
+        if (initSpreadsheetGridContainer() && spreadsheetGridContainer.scrollWidth > 0) {
+            spreadsheetGridContainer.scrollLeft = $scrollStore;
+        }
+    }
+
     resizeSheet();
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 8ac91b246a..3d0eb68ddb 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -10,7 +10,7 @@
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import { type Models, Query } from '@appwrite.io/console';
-    import { type ComponentType, onDestroy, onMount } from 'svelte';
+    import { type ComponentType, onDestroy, onMount, tick } from 'svelte';
     import type { PageData } from './$types';
     import { isRelationship, isRelationshipToMany, isString } from './row-[row]/columns/store';
     import {
@@ -28,7 +28,8 @@
         spreadsheetLoading,
         showCreateIndexSheet,
         type SortState,
-        Deletion
+        Deletion,
+        scrollStore
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -69,6 +70,7 @@
     import { copy } from '$lib/helpers/copy';
     import { debounce } from '$lib/helpers/debounce';
     import { writable } from 'svelte/store';
+    import { hash } from '$lib/helpers/string';
 
     export let data: PageData;
     export let showRecordsCreateSheet: {
@@ -79,6 +81,7 @@
     $: rows = writable(data.rows);
     const tableId = page.params.table;
     const databaseId = page.params.database;
+    const organizationId = data.organization.$id ?? data.project.teamId;
 
     const minimumWidth = 168;
     const emptyCellsLimit = $isSmallViewport ? 12 : 18;
@@ -94,6 +97,8 @@
     let relationshipData: Partial<Models.Row>[];
     let selectedRelationship: Models.ColumnRelationship = null;
 
+    let spreadsheetContainer: SpreadsheetContainer;
+
     let showDelete = false;
     let showColumnDelete = false;
     let deleteConfirmationChecked = false;
@@ -106,6 +111,8 @@
 
         makeTableColumns();
         sortState.set(data.currentSort as SortState);
+
+        window.scrollTo($scrollStore, 0);
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
@@ -211,26 +218,26 @@
             columnsOrder.set(newOrder);
         }
 
-        preferences.saveColumnOrder(
-            data.organization.$id ?? data.project.teamId,
-            tableId,
-            newOrder
-        );
+        saveColumnOrderToPreferences(newOrder);
     }
 
-    function saveColumnsWidth(column: { columnId: string; newWidth: number }) {
-        const fixedWidth =
-            $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
+    function saveColumnsWidth({ columnId, newWidth }: { columnId: string; newWidth: number }) {
+        const existing = $columnsWidth[columnId];
+        const fixed = existing
+            ? typeof existing?.fixed === 'number'
+                ? existing.fixed
+                : existing?.fixed?.min
+            : newWidth;
 
         columnsWidth.update((widths) => ({
             ...widths,
-            [column.columnId]: {
-                fixed: fixedWidth,
-                resized: Math.ceil(column.newWidth)
+            [columnId]: {
+                fixed,
+                resized: Math.ceil(newWidth)
             }
         }));
 
-        saveColumnWidthsToPreferences(column);
+        saveColumnWidthsToPreferences({ columnId, newWidth, fixedWidth: fixed });
     }
 
     function formatArray(array: unknown[]) {
@@ -312,7 +319,9 @@
             );
         }
 
+        spreadsheetContainer.saveGridSheetScroll();
         await goto(`${url.pathname}${url.search}`);
+        spreadsheetContainer.restoreGridSheetScroll();
         $spreadsheetLoading = false;
     }
 
@@ -357,6 +366,7 @@
                 const updatedOrder = $columnsOrder.filter(
                     (id) => id !== $databaseColumnSheetOptions.column.key
                 );
+
                 saveColumnsOrder(updatedOrder, false);
             }
 
@@ -484,13 +494,10 @@
     }
 
     const saveColumnWidthsToPreferences = debounce(
-        (column: { columnId: string; newWidth: number }) => {
-            const fixedWidth =
-                $tableColumns.find((col) => col.id === column.columnId)?.width ?? column.newWidth;
-
-            preferences.saveColumnWidths(data.organization.$id ?? data.project.teamId, tableId, {
+        (column: { columnId: string; newWidth: number; fixedWidth: number }) => {
+            preferences.saveColumnWidths(organizationId, tableId, {
                 [column.columnId]: {
-                    fixed: fixedWidth,
+                    fixed: column.fixedWidth,
                     resized: Math.ceil(column.newWidth)
                 }
             });
@@ -498,6 +505,10 @@
         1000
     );
 
+    const saveColumnOrderToPreferences = debounce((newOrder: string[]) => {
+        preferences.saveColumnOrder(organizationId, tableId, newOrder);
+    }, 1000);
+
     $: relatedColumns = $columns?.filter(
         (attribute) =>
             isRelationship(attribute) &&
@@ -519,16 +530,26 @@
     $: if ($table.columns) {
         makeTableColumns();
     }
+
+    $: if (data.rows) {
+        /* up-to-date height */
+        tick().then(() => spreadsheetContainer?.resizeSheet());
+    }
+
+    $: spreadsheetKey = hash(
+        $rows.rows.map((row) => row.$id),
+        '#'
+    );
 </script>
 
-<SpreadsheetContainer>
-    {#key $rows.rows.length}
+<SpreadsheetContainer bind:this={spreadsheetContainer}>
+    {#key spreadsheetKey}
         <Spreadsheet.Root
             height="100%"
             allowSelection
-            bind:selectedRows
             useVirtualizer
             keyboardNavigation
+            bind:selectedRows
             rowCount={$rows.rows.length}
             bind:columns={$tableColumns}
             loading={$spreadsheetLoading}
@@ -606,7 +627,7 @@
                                 <Id value={row.$sequence.toString()} tooltipPortal
                                     >{row.$sequence}</Id>
                             {:else if columnId === '$id'}
-                                <Id value={row.$id} tooltipPortal>{row.$id}</Id>
+                                <Id value={row.$id} tooltipPortal tooltipDelay={200}>{row.$id}</Id>
                             {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
                                 <DualTimeView
                                     time={row[columnId]}
@@ -693,7 +714,7 @@
                                             text={formatted} />
                                     </button>
                                 {:else if formatted.length > 20}
-                                    <Tooltip placement="bottom" portal>
+                                    <Tooltip placement="bottom" portal disabled>
                                         <Typography.Text truncate>
                                             {formatted}
                                         </Typography.Text>
@@ -867,4 +888,14 @@
     :global(.virtual-row:has([data-editing-mode='true'])) {
         z-index: 1 !important;
     }
+
+    :global(.floating-editor) {
+        & :global(textarea) {
+            min-height: 85px !important;
+        }
+
+        & :global(.input:focus-within) {
+            top: 0 !important;
+        }
+    }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index dd2c015de8..e62e581c0e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -141,3 +141,5 @@ export enum Deletion {
     'cascade' = 'All related rows will be deleted',
     'restrict' = 'Row can not be deleted'
 }
+
+export const scrollStore = writable(null);

From 1d551ff36a61fe6ce2476e0d7539a6bcb93f530d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 8 Aug 2025 12:03:09 +0530
Subject: [PATCH 095/118] update: revert cell's value on update failure.

---
 .../table-[table]/editRowCell.svelte                  | 11 ++++++++---
 .../table-[table]/spreadsheet.svelte                  |  2 ++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
index 163a015457..4648956a43 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
@@ -12,7 +12,7 @@
     }: {
         row: Models.Row;
         column: Columns;
-        onRowStructureUpdate?: (row: Models.Row) => void;
+        onRowStructureUpdate?: (row: Models.Row) => Promise<boolean>;
     } = $props();
 
     let original: Models.Row;
@@ -31,9 +31,14 @@
      * fire on `onDestroy` because at this point,
      * the cell editor slot fragment is closed and enter was hit!
      */
-    onDestroy(() => {
+    onDestroy(async () => {
         const hasChanged = !deepEqual(original, row);
-        if (hasChanged && onRowStructureUpdate) onRowStructureUpdate(row);
+        if (hasChanged && onRowStructureUpdate) {
+            const accepted = await onRowStructureUpdate(row);
+            if (!accepted) {
+                row = original;
+            }
+        }
     });
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 3d0eb68ddb..7361df9bc3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -484,12 +484,14 @@
                 message: 'Row has been updated',
                 type: 'success'
             });
+            return true;
         } catch (error) {
             addNotification({
                 message: error.message,
                 type: 'error'
             });
             trackError(error, Submit.RowUpdatePermissions);
+            return false;
         }
     }
 

From 2ea0560102ae2a9e04ea3599fd98c6be735f0818 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 8 Aug 2025 18:33:03 +0530
Subject: [PATCH 096/118] update: remove primary key; update: row activity
 sheet;

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 12 +--
 src/lib/components/columnSelector.svelte      |  6 --
 src/lib/components/pagination.svelte          |  7 +-
 src/lib/components/paginationWithLimit.svelte | 30 +++++--
 src/lib/layout/activity.svelte                | 13 ++-
 .../database-[database]/subNavigation.svelte  | 24 ++++--
 .../table-[table]/+layout.svelte              | 12 ++-
 .../table-[table]/columns/+page.svelte        |  6 --
 .../table-[table]/layout/emptySheet.svelte    |  6 +-
 .../table-[table]/rowActivity.svelte          | 86 +++++++++++++++++++
 .../table-[table]/spreadsheet.svelte          | 19 ++--
 .../table-[table]/store.ts                    |  5 ++
 .../table-[table]/subNavigation.svelte        |  0
 14 files changed, 176 insertions(+), 52 deletions(-)
 create mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte
 delete mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte

diff --git a/package.json b/package.json
index 34f45e6998..5eb72d1e31 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d",
+        "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e64a383",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 63473716a6..b32f9913ee 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -12,8 +12,8 @@ importers:
         specifier: ^1.1.24
         version: 1.1.24(svelte@5.25.3)(zod@3.24.3)
       '@appwrite.io/console':
-        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d
+        specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e64a383
+        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e64a383
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -260,9 +260,9 @@ packages:
   '@analytics/type-utils@0.6.2':
     resolution: {integrity: sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg==}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d}
-    version: 1.9.0
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e64a383':
+    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e64a383}
+    version: 1.10.0
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
     resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
@@ -3809,7 +3809,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@7813f3d': {}
+  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e64a383': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index a93ee23bf6..0bf5bc6aa7 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -226,12 +226,6 @@
                                     <Layout.Stack direction="row" gap="s">
                                         <Selector.Checkbox size="s" checked={!column.hide} />
                                         {column.title}
-                                        {#if isNewStyle && column.isPrimary}
-                                            <Badge
-                                                content="Primary key"
-                                                size="xs"
-                                                variant="secondary" />
-                                        {/if}
                                     </Layout.Stack>
                                 </ActionMenu.Item.Button>
                             {/if}
diff --git a/src/lib/components/pagination.svelte b/src/lib/components/pagination.svelte
index ff338c213d..f272f7f66c 100644
--- a/src/lib/components/pagination.svelte
+++ b/src/lib/components/pagination.svelte
@@ -5,6 +5,7 @@
     export let sum: number;
     export let limit: number;
     export let offset: number;
+    export let useCreateLink = true;
 
     $: currentPage = Math.floor(offset / limit + 1);
 
@@ -18,6 +19,10 @@
 
         return url.toString();
     }
+
+    $: paginationProps = useCreateLink
+        ? ({ type: 'link', createLink: getLink } as const)
+        : ({ type: 'button', createLink: undefined as never } as const);
 </script>
 
-<Pagination page={currentPage} total={sum} {limit} createLink={getLink} type="link" />
+<Pagination on:page {limit} total={sum} page={currentPage} {...paginationProps} />
diff --git a/src/lib/components/paginationWithLimit.svelte b/src/lib/components/paginationWithLimit.svelte
index 089019adc2..7cf78f6b56 100644
--- a/src/lib/components/paginationWithLimit.svelte
+++ b/src/lib/components/paginationWithLimit.svelte
@@ -3,13 +3,29 @@
     import Pagination from './pagination.svelte';
     import { Layout } from '@appwrite.io/pink-svelte';
 
-    export let limit: number;
-    export let offset: number;
-    export let total: number;
-    export let name: string;
+    let {
+        limit,
+        offset,
+        total,
+        name,
+        useCreateLink = true
+    }: {
+        limit: number;
+        offset: number;
+        total: number;
+        name: string;
+        useCreateLink?: boolean;
+    } = $props();
+
+    const showLimit = $derived(!!useCreateLink);
+    const direction = $derived(showLimit ? 'row' : 'column');
+    const alignItems = $derived(showLimit ? 'center' : 'flex-end');
 </script>
 
-<Layout.Stack direction="row" alignItems="center" wrap="wrap" justifyContent="space-between">
-    <Limit {limit} sum={total} {name} />
-    <Pagination {limit} {offset} sum={total} />
+<Layout.Stack wrap="wrap" {direction} {alignItems} justifyContent="space-between">
+    {#if showLimit}
+        <Limit {limit} sum={total} {name} />
+    {/if}
+
+    <Pagination on:page {limit} {offset} sum={total} {useCreateLink} />
 </Layout.Stack>
diff --git a/src/lib/layout/activity.svelte b/src/lib/layout/activity.svelte
index 6f63424f41..f20c7963d7 100644
--- a/src/lib/layout/activity.svelte
+++ b/src/lib/layout/activity.svelte
@@ -7,10 +7,11 @@
     import Button from '$lib/elements/forms/button.svelte';
     import type { PinkColumn } from '$lib/helpers/types';
 
-    export let logs: Models.LogList;
-    export let offset = 0;
     export let limit = 0;
+    export let offset = 0;
+    export let logs: Models.LogList;
     export let databasesScreen = false;
+    export let useCreateLinkForPagination = true;
 
     const columns: PinkColumn[] = [
         { id: 'user' },
@@ -74,7 +75,13 @@
             </Table.Root>
         </div>
 
-        <PaginationWithLimit name="Logs" {limit} {offset} total={logs.total} />
+        <PaginationWithLimit
+            {limit}
+            {offset}
+            on:page
+            name="Logs"
+            total={logs.total}
+            useCreateLink={useCreateLinkForPagination} />
     {:else}
         <Card.Base padding="none">
             <Empty
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index a829e7cb98..332190f44f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -61,12 +61,7 @@
                             {@const isSelected = tableId === table.$id}
 
                             <Layout.Stack gap="m" direction="row" alignItems="center">
-                                <div
-                                    style:border-left="1px solid var(--border-neutral, #ededf0)"
-                                    style:height="1rem">
-                                </div>
-
-                                <li class:is-selected={isSelected} style:width="100%">
+                                <li class:is-selected={isSelected}>
                                     <a
                                         class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
                                         {href}>
@@ -213,9 +208,26 @@
     .drop-list {
         flex: 1;
         padding-left: 4px;
+        position: relative;
         font-size: var(--font-size-sm);
         color: var(--fgcolor-neutral-secondary);
 
+        &::before {
+            content: '';
+            right: 99%;
+            top: 0.2rem;
+            bottom: 0.2rem;
+            position: absolute;
+            border-left: 1px solid var(--border-neutral, #ededf0);
+        }
+
+        li {
+            position: relative;
+            overflow: hidden;
+            padding-inline-end: 0.5rem;
+            margin-inline-start: 0.5rem;
+        }
+
         .is-selected,
         li:hover {
             width: 100%;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 77094c458b..0d686b89e9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -30,7 +30,8 @@
         randomDataModalState,
         showCreateAttributeSheet,
         showCreateIndexSheet,
-        spreadsheetLoading
+        spreadsheetLoading,
+        rowActivitySheet
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateColumn from './createColumn.svelte';
@@ -44,6 +45,7 @@
     import SideSheet from './layout/sidesheet.svelte';
     import EditRow from './editRow.svelte';
     import EditColumn from './columns/edit.svelte';
+    import RowActivity from './rowActivity.svelte';
     import { Dialog, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { Button, Seekbar } from '$lib/elements/forms';
     import { generateFakeRecords, generateColumns } from '$lib/helpers/faker';
@@ -292,6 +294,7 @@
 <slot />
 
 <SideSheet
+    closeOnBlur
     title={$showCreateAttributeSheet.title}
     bind:show={$showCreateAttributeSheet.show}
     submit={{
@@ -316,6 +319,7 @@
 </SideSheet>
 
 <SideSheet
+    closeOnBlur
     title={$databaseColumnSheetOptions.title}
     bind:show={$databaseColumnSheetOptions.show}
     submit={{
@@ -331,6 +335,7 @@
 
 <SideSheet
     spaced
+    closeOnBlur
     title={$databaseRowSheetOptions.title}
     bind:show={$databaseRowSheetOptions.show}
     submit={{
@@ -342,6 +347,7 @@
 </SideSheet>
 
 <SideSheet
+    closeOnBlur
     title="Create index"
     bind:show={$showCreateIndexSheet.show}
     submit={{
@@ -354,6 +360,10 @@
         externalColumnKey={$showCreateIndexSheet.column} />
 </SideSheet>
 
+<SideSheet title="Row activity" bind:show={$rowActivitySheet.show} closeOnBlur>
+    <RowActivity />
+</SideSheet>
+
 <Dialog title="Generate sample data" bind:open={$randomDataModalState.show}>
     <Layout.Stack style="gap: 28px;">
         <Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index bb6ef410a2..24b02316c7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -222,12 +222,6 @@
                                     <span class="text u-trim-1" data-private>
                                         {#if column.key === '$id' || column.key === '$sequence' || column.key === '$createdAt' || column.key === '$updatedAt'}
                                             {column['name']}
-                                            {#if column.key === '$sequence'}
-                                                <Badge
-                                                    size="xs"
-                                                    variant="secondary"
-                                                    content="Primary key" />
-                                            {/if}
                                         {:else}
                                             {column.key}
                                         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index deada4a07a..ea9a4b1e43 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -64,7 +64,7 @@
             id: '$sequence',
             title: 'Sequence',
             type: 'string',
-            width: 225,
+            width: 150,
             isPrimary: true,
             icon: IconHashtag,
             ...baseColProps
@@ -179,10 +179,6 @@
                                 alignContent="center">
                                 {column.title}
 
-                                {#if column.isPrimary}
-                                    <Badge content="Primary key" size="xs" variant="secondary" />
-                                {/if}
-
                                 <SortButton disabled column={column.id} />
                             </Layout.Stack>
                         {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte
new file mode 100644
index 0000000000..93eb1a8810
--- /dev/null
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte
@@ -0,0 +1,86 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { sdk } from '$lib/stores/sdk';
+    import { Activity } from '$lib/layout';
+    import { rowActivitySheet } from './store';
+    import { pageToOffset } from '$lib/helpers/load';
+    import { type Models, Query } from '@appwrite.io/console';
+    import { Layout, Skeleton, Table } from '@appwrite.io/pink-svelte';
+
+    let limit = 25; /* default */
+    let offset = $state(0);
+    let loading = $state(true);
+    let rowActivityLogs = $state<Models.LogList | null>(null);
+
+    onMount(loadRowLogs);
+
+    async function loadRowLogs(event?: CustomEvent<number>) {
+        loading = true;
+
+        if (event) {
+            offset = pageToOffset(event.detail, limit);
+        }
+
+        const row = $rowActivitySheet.row;
+
+        rowActivityLogs = await sdk
+            .forProject(page.params.region, page.params.project)
+            .grids.listRowLogs({
+                databaseId: row.$databaseId,
+                tableId: row.$tableId,
+                rowId: row.$id,
+                queries: [Query.limit(limit), Query.offset(offset)]
+            });
+
+        loading = false;
+    }
+</script>
+
+{#if loading}
+    <div style:margin-block="2.25rem" style:margin-inline-end="2.25rem">
+        <Table.Root columns={5} let:root>
+            <svelte:fragment slot="header" let:root>
+                <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
+                <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
+                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
+                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
+                <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
+            </svelte:fragment>
+
+            {#each Array(5) as _}
+                <Table.Row.Base {root}>
+                    <Table.Cell column="user" {root}>
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            <Skeleton variant="circle" width={64} height={64} />
+                            <Skeleton variant="line" width={160} height={18} />
+                        </Layout.Stack>
+                    </Table.Cell>
+
+                    <Table.Cell column="event" {root}>
+                        <Skeleton variant="line" width={220} height={18} />
+                    </Table.Cell>
+
+                    <Table.Cell column="location" {root}>
+                        <Skeleton variant="line" width={140} height={18} />
+                    </Table.Cell>
+
+                    <Table.Cell column="ip" {root}>
+                        <Skeleton variant="line" width={120} height={18} />
+                    </Table.Cell>
+
+                    <Table.Cell column="date" {root}>
+                        <Skeleton variant="line" width={160} height={18} />
+                    </Table.Cell>
+                </Table.Row.Base>
+            {/each}
+        </Table.Root>
+    </div>
+{:else if rowActivityLogs}
+    <Activity
+        {limit}
+        {offset}
+        on:page={loadRowLogs}
+        logs={rowActivityLogs}
+        useCreateLinkForPagination={false} />
+{/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 7361df9bc3..9019386197 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -29,7 +29,8 @@
         showCreateIndexSheet,
         type SortState,
         Deletion,
-        scrollStore
+        scrollStore,
+        rowActivitySheet
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -136,8 +137,8 @@
             {
                 id: '$sequence',
                 title: 'Sequence',
-                width: 225,
-                minimumWidth: 225,
+                width: 150,
+                minimumWidth: 150,
                 draggable: false,
                 type: 'integer',
                 icon: IconHashtag,
@@ -465,6 +466,11 @@
                 showDelete = true;
                 selectedRowForDelete = row.$id;
             }
+
+            if (action === 'activity') {
+                $rowActivitySheet.row = row;
+                $rowActivitySheet.show = true;
+            }
         }
     }
 
@@ -596,13 +602,6 @@
                                         alignContent="center">
                                         {column.title}
 
-                                        {#if column.isPrimary}
-                                            <Badge
-                                                content="Primary key"
-                                                size="xs"
-                                                variant="secondary" />
-                                        {/if}
-
                                         <SortButton
                                             onSort={sort}
                                             column={column.id}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index e62e581c0e..57cf9463e1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -143,3 +143,8 @@ export enum Deletion {
 }
 
 export const scrollStore = writable(null);
+
+export const rowActivitySheet = writable({
+    show: false,
+    row: null as Models.Row
+});
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/subNavigation.svelte
deleted file mode 100644
index e69de29bb2..0000000000

From ade332b1d25e7095650fd4c160226e4cc0f223fd Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 8 Aug 2025 18:58:27 +0530
Subject: [PATCH 097/118] fix: edge case on input positioning.

---
 .../database-[database]/table-[table]/spreadsheet.svelte     | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 9019386197..5dee630db3 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -891,6 +891,11 @@
     }
 
     :global(.floating-editor) {
+        & :global(:has(textarea)) {
+            left: 0 !important;
+            margin-inline-end: 1px;
+        }
+
         & :global(textarea) {
             min-height: 85px !important;
         }

From 5c2cd4408ea4738dd0dea8c790e7be3d851b33c9 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Fri, 8 Aug 2025 19:39:28 +0530
Subject: [PATCH 098/118] fix: columns footer; add: `+` on column footer; fix:
 empty states on `indexes` and `rows`. update: length wording on footer.

---
 src/lib/layout/shell.svelte                   |  1 +
 .../table-[table]/columns/+page.svelte        | 20 +++++++++++++------
 .../table-[table]/indexes/+page.svelte        | 19 ++++++++++++++----
 .../table-[table]/layout/emptySheet.svelte    |  3 ++-
 .../table-[table]/spreadsheet.svelte          |  4 ++--
 5 files changed, 34 insertions(+), 13 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 7d340b517c..e6c157c903 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -240,6 +240,7 @@
 
         @media (max-width: 768px) {
             .main-content {
+                width: 100%;
                 position: fixed;
             }
         }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 24b02316c7..7efd0b5464 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -40,7 +40,7 @@
         IconLockClosed,
         IconFingerPrint
     } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onDestroy, onMount } from 'svelte';
+    import { type ComponentProps, onDestroy, onMount, tick } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import CsvDisabled from '../csvDisabled.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -119,6 +119,7 @@
 
     let showEdit = $state(false);
     let editColumn: EditColumn;
+    let spreadsheetContainer: SpreadsheetContainer;
 
     const columnFormatIcon = {
         ip: IconLocationMarker,
@@ -152,6 +153,13 @@
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
+
+    $effect(() => {
+        if (updatedColumnsForSheet) {
+            /* up-to-date height */
+            tick().then(() => spreadsheetContainer?.resizeSheet());
+        }
+    });
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -161,9 +169,7 @@
                 size="s"
                 secondary
                 disabled={$isCsvImportInProgress}
-                on:click={() => {
-                    $showCreateAttributeSheet.show = true;
-                }}
+                on:click={() => ($showCreateAttributeSheet.show = true)}
                 event="create_attribute">
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create column
@@ -173,7 +179,7 @@
 </Container>
 
 <div class="databases-spreadsheet">
-    <SpreadsheetContainer>
+    <SpreadsheetContainer bind:this={spreadsheetContainer}>
         <Spreadsheet.Root
             let:root
             allowSelection
@@ -185,7 +191,8 @@
                 { id: 'indexed', width: { min: 150 } },
                 { id: 'default', width: { min: 200 } },
                 { id: 'actions', width: 40, isAction: true }
-            ]}>
+            ]}
+            bottomActionClick={() => ($showCreateAttributeSheet.show = true)}>
             <svelte:fragment slot="header" let:root>
                 <Spreadsheet.Header.Cell column="key" {root}>Column name</Spreadsheet.Header.Cell>
                 <Spreadsheet.Header.Cell column="indexed" {root}>Indexed</Spreadsheet.Header.Cell>
@@ -341,6 +348,7 @@
                     alignItems="center"
                     justifyContent="space-between">
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                        <!-- there will always be 3 columns at the least -->
                         {updatedColumnsForSheet.length} columns
                     </Typography.Text>
                 </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index e8547a1060..47d60fd58e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -25,7 +25,7 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onDestroy, onMount } from 'svelte';
+    import { type ComponentProps, onDestroy, onMount, tick } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
@@ -47,6 +47,7 @@
 
     let selectedIndexes = $state([]);
     let createIndex: CreateIndex;
+    let spreadsheetContainer: SpreadsheetContainer = $state(null);
 
     let error = $state('');
     let showFailed = $state(false);
@@ -91,6 +92,13 @@
             ? 0
             : emptyCellsLimit - data.table.indexes.length
     );
+
+    $effect(() => {
+        if (data.table.indexes) {
+            /* up-to-date height */
+            tick().then(() => spreadsheetContainer?.resizeSheet());
+        }
+    });
 </script>
 
 <Container expanded style="background: var(--bgcolor-neutral-primary)">
@@ -111,14 +119,15 @@
 <div class="databases-spreadsheet">
     {#if data.table?.columns?.length}
         {#if data.table.indexes.length}
-            <SpreadsheetContainer>
+            <SpreadsheetContainer bind:this={spreadsheetContainer}>
                 <Spreadsheet.Root
                     let:root
                     {columns}
                     height="100%"
                     allowSelection
                     emptyCells={emptyCellsCount}
-                    bind:selectedRows={selectedIndexes}>
+                    bind:selectedRows={selectedIndexes}
+                    bottomActionClick={() => (showCreateIndex = true)}>
                     <svelte:fragment slot="header" let:root>
                         <Spreadsheet.Header.Cell column="key" {root}>Key</Spreadsheet.Header.Cell>
                         <Spreadsheet.Header.Cell column="type" {root}>Type</Spreadsheet.Header.Cell>
@@ -202,7 +211,9 @@
                             alignItems="center"
                             justifyContent="space-between">
                             <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                                {data.table.indexes.length} columns
+                                {@const length = data.table.indexes.length}
+                                {length}
+                                {length === 1 ? 'index' : 'indexes'}
                             </Typography.Text>
                         </Layout.Stack>
                     </svelte:fragment>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index ea9a4b1e43..34472bfaaf 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -306,7 +306,8 @@
         justify-content: center;
 
         @media (max-width: 768px) {
-            height: 50vh;
+            top: 34.25%; /* oddly specific, ik! */
+            height: 70vh;
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 5dee630db3..ca39e5f6a5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -754,8 +754,8 @@
                     justifyContent="space-between">
                     <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
                         {selectedRows.length
-                            ? `${selectedRows.length} rows selected`
-                            : `${$rows.total} rows`}
+                            ? `${selectedRows.length} row${selectedRows.length === 1 ? '' : 's'} selected`
+                            : `${$rows.total} row${$rows.total === 1 ? '' : 's'}`}
                     </Typography.Text>
 
                     <div style:margin-right="var(--space-6)">

From 6875cdd304152e572eca1c757f256fc6a8b9dadf Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 9 Aug 2025 10:52:33 +0530
Subject: [PATCH 099/118] fix: sidebar double settings.

---
 src/lib/components/sidebar.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/components/sidebar.svelte b/src/lib/components/sidebar.svelte
index 172bc7d01b..35789d596e 100644
--- a/src/lib/components/sidebar.svelte
+++ b/src/lib/components/sidebar.svelte
@@ -241,7 +241,7 @@
                             <span slot="tooltip">{projectOption.name}</span>
                         </Tooltip>
                     {/each}
-                    {#if project}
+                    {#if project && $isSmallViewport}
                         <Divider />
 
                         <div class="mobile-tablet-settings">

From d05248bf4e3171c4a6d0e9952c4d4d2c4494d922 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 9 Aug 2025 10:54:10 +0530
Subject: [PATCH 100/118] fix: `updatePrefs` calls using object params.

---
 src/lib/helpers/notifications.ts                              | 2 +-
 src/lib/helpers/onboarding.ts                                 | 2 +-
 src/lib/helpers/sidebar.ts                                    | 2 +-
 src/lib/helpers/waitlist.ts                                   | 2 +-
 src/lib/stores/preferences.ts                                 | 2 +-
 src/routes/(console)/onboarding/create-project/+page.svelte   | 2 +-
 src/routes/(console)/organization-[organization]/+layout.ts   | 4 ++--
 .../settings/deleteOrganizationModal.svelte                   | 2 +-
 .../organization-[organization]/settings/downloadDPA.svelte   | 2 +-
 src/routes/(console)/project-[region]-[project]/+layout.ts    | 4 ++--
 10 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/lib/helpers/notifications.ts b/src/lib/helpers/notifications.ts
index 65b40d9325..7264d5303c 100644
--- a/src/lib/helpers/notifications.ts
+++ b/src/lib/helpers/notifications.ts
@@ -35,7 +35,7 @@ function updateNotificationPrefs(parsedPrefs: Record<string, NotificationPrefIte
         notificationPrefs: parsedPrefs
     };
 
-    sdk.forConsole.account.updatePrefs(newPrefs);
+    sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
 }
 
 /**
diff --git a/src/lib/helpers/onboarding.ts b/src/lib/helpers/onboarding.ts
index 3c4dc8b849..4655d80269 100644
--- a/src/lib/helpers/onboarding.ts
+++ b/src/lib/helpers/onboarding.ts
@@ -26,5 +26,5 @@ export async function setHasOnboardingDismissed(projectId: string, account?: Acc
         onboardingDismissed: onboardingDismissed
     };
 
-    await sdk.forConsole.account.updatePrefs(newPrefs);
+    await sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
 }
diff --git a/src/lib/helpers/sidebar.ts b/src/lib/helpers/sidebar.ts
index 5ad4d0ece4..2609928de2 100644
--- a/src/lib/helpers/sidebar.ts
+++ b/src/lib/helpers/sidebar.ts
@@ -21,7 +21,7 @@ export function updateSidebarState(page: Page, state: 'closed' | 'open' | 'icons
             sidebarState: state
         };
 
-        sdk.forConsole.account.updatePrefs(newPrefs);
+        sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
     }
 }
 
diff --git a/src/lib/helpers/waitlist.ts b/src/lib/helpers/waitlist.ts
index 78765de131..d0ff50e856 100644
--- a/src/lib/helpers/waitlist.ts
+++ b/src/lib/helpers/waitlist.ts
@@ -8,7 +8,7 @@ export const joinWaitlistSites = (user: Account) => {
         joinWaitlistSites: true
     };
 
-    sdk.forConsole.account.updatePrefs(newPrefs);
+    sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
 
     if (sessionStorage) {
         sessionStorage.setItem('joinWaitlistSites', 'true');
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 81a9d6e3c3..47e4b58ced 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -54,7 +54,7 @@ async function updateConsolePreferences(store: ConsolePreferencesStore): Promise
         ...store
     };
 
-    await sdk.forConsole.account.updatePrefs(currentPreferences);
+    await sdk.forConsole.account.updatePrefs({ prefs: currentPreferences });
 }
 
 function createPreferences() {
diff --git a/src/routes/(console)/onboarding/create-project/+page.svelte b/src/routes/(console)/onboarding/create-project/+page.svelte
index 80fed1137b..8da8315ce0 100644
--- a/src/routes/(console)/onboarding/create-project/+page.svelte
+++ b/src/routes/(console)/onboarding/create-project/+page.svelte
@@ -30,7 +30,7 @@
             newOnboardingCompleted: true
         };
 
-        sdk.forConsole.account.updatePrefs(newPrefs);
+        sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
     }
 
     async function createProject() {
diff --git a/src/routes/(console)/organization-[organization]/+layout.ts b/src/routes/(console)/organization-[organization]/+layout.ts
index 1306aafa0a..2aadce4bd3 100644
--- a/src/routes/(console)/organization-[organization]/+layout.ts
+++ b/src/routes/(console)/organization-[organization]/+layout.ts
@@ -39,7 +39,7 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
         }
         if (prefs.organization !== params.organization) {
             const newPrefs = { ...prefs, organization: params.organization };
-            sdk.forConsole.account.updatePrefs(newPrefs);
+            sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
         }
 
         const [organization, members, countryList, locale] = await Promise.all([
@@ -64,7 +64,7 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
         };
     } catch (e) {
         const newPrefs = { ...prefs, organization: null };
-        sdk.forConsole.account.updatePrefs(newPrefs);
+        sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
         error(e.code, e.message);
     }
 };
diff --git a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
index 7e5c3f88e2..7e64d41d4f 100644
--- a/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/deleteOrganizationModal.svelte
@@ -34,7 +34,7 @@
             }
             const prefs = await sdk.forConsole.account.getPrefs();
             const newPrefs = { ...prefs, organization: null };
-            await sdk.forConsole.account.updatePrefs(newPrefs);
+            await sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
             if ($organizationList?.total > 1) {
                 await goto(`${base}/account/organizations`);
             } else {
diff --git a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
index 7b83d3c9d0..93fe4b51b5 100644
--- a/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
+++ b/src/routes/(console)/organization-[organization]/settings/downloadDPA.svelte
@@ -10,7 +10,7 @@
         const today = new Date().toISOString();
         const prefs = await sdk.forConsole.account.getPrefs();
         const newPrefs = { ...prefs, DPA: today };
-        sdk.forConsole.account.updatePrefs(newPrefs);
+        sdk.forConsole.account.updatePrefs({ prefs: newPrefs });
     }
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/+layout.ts b/src/routes/(console)/project-[region]-[project]/+layout.ts
index 354eb2eb55..9d47ce3aa7 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/+layout.ts
@@ -48,10 +48,10 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
     const scopes = rolesResult?.scopes ?? defaultScopes;
 
     if (prefs?.organization !== project.teamId) {
-        sdk.forConsole.account.updatePrefs({
+        sdk.forConsole.account.updatePrefs({ prefs: {
             ...prefs,
             organization: project.teamId
-        });
+        } });
     }
 
     preferences.loadTeamPrefs(project.teamId);

From 3a38ca4750067ba2b9840df8337f03937533e8f4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 9 Aug 2025 11:05:28 +0530
Subject: [PATCH 101/118] linting.

---
 .../(console)/project-[region]-[project]/+layout.ts    | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/+layout.ts b/src/routes/(console)/project-[region]-[project]/+layout.ts
index 9d47ce3aa7..69afdf0e29 100644
--- a/src/routes/(console)/project-[region]-[project]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/+layout.ts
@@ -48,10 +48,12 @@ export const load: LayoutLoad = async ({ params, depends, parent }) => {
     const scopes = rolesResult?.scopes ?? defaultScopes;
 
     if (prefs?.organization !== project.teamId) {
-        sdk.forConsole.account.updatePrefs({ prefs: {
-            ...prefs,
-            organization: project.teamId
-        } });
+        sdk.forConsole.account.updatePrefs({
+            prefs: {
+                ...prefs,
+                organization: project.teamId
+            }
+        });
     }
 
     preferences.loadTeamPrefs(project.teamId);

From 81c52142416553271602c69cadb006324a9194f0 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 9 Aug 2025 15:30:44 +0530
Subject: [PATCH 102/118] update: expand, collapse header on sheets screen.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 src/lib/components/copy.svelte                | 16 +++-
 src/lib/components/id.svelte                  |  4 +-
 src/lib/layout/animatedTitle.svelte           | 65 ++++++++++++++
 src/lib/layout/container.svelte               | 25 +++++-
 src/lib/layout/cover.svelte                   | 62 ++++++++++++--
 src/lib/layout/index.ts                       |  1 +
 .../table-[table]/+page.svelte                | 20 +++--
 .../table-[table]/header.svelte               | 48 +++++++----
 .../table-[table]/layout/emptySheet.svelte    | 13 +--
 .../table-[table]/layout/spreadsheet.svelte   | 84 +++++++++++++++----
 .../table-[table]/spreadsheet.svelte          |  5 +-
 .../table-[table]/store.ts                    |  2 +
 14 files changed, 286 insertions(+), 71 deletions(-)
 create mode 100644 src/lib/layout/animatedTitle.svelte

diff --git a/package.json b/package.json
index 5eb72d1e31..3a76ccdcce 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b32f9913ee..48503dac8c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -284,8 +284,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3828,7 +3828,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/copy.svelte b/src/lib/components/copy.svelte
index 029c59b541..c178913c76 100644
--- a/src/lib/components/copy.svelte
+++ b/src/lib/components/copy.svelte
@@ -1,19 +1,22 @@
 <script lang="ts">
-    import type { Snippet } from 'svelte';
+    import type { ComponentProps, Snippet } from 'svelte';
     import { copy } from '$lib/helpers/copy';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { Tooltip } from '@appwrite.io/pink-svelte';
     import { trackEvent } from '$lib/actions/analytics';
     import { addNotification } from '$lib/stores/notifications';
 
+    export type TooltipPlacement = NonNullable<ComponentProps<Tooltip>['placement']>;
+
     let {
         value,
         event = null,
         eventContext = 'click_id_tag',
         tooltipDisabled = false,
         tooltipPortal = false,
+        tooltipDelay = 0,
+        tooltipPlacement = undefined,
         copyText = 'Click to copy',
-        delay = 0,
         children
     }: {
         value: string;
@@ -21,8 +24,9 @@
         eventContext?: string;
         tooltipDisabled?: boolean;
         tooltipPortal?: boolean;
+        tooltipDelay?: number;
+        tooltipPlacement?: TooltipPlacement;
         copyText?: string;
-        delay?: number;
         children?: Snippet;
     } = $props();
 
@@ -49,7 +53,11 @@
     //TODO: remove this component
 </script>
 
-<Tooltip disabled={tooltipDisabled} portal={tooltipPortal} {delay}>
+<Tooltip
+    disabled={tooltipDisabled}
+    portal={tooltipPortal}
+    delay={tooltipDelay}
+    placement={tooltipPlacement}>
     <span
         data-private
         style:display="inline-flex"
diff --git a/src/lib/components/id.svelte b/src/lib/components/id.svelte
index a2f7318a27..c756ee8f6a 100644
--- a/src/lib/components/id.svelte
+++ b/src/lib/components/id.svelte
@@ -45,16 +45,18 @@
     import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { Copy } from '.';
     import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
+    import type { TooltipPlacement } from '$lib/components/copy.svelte';
 
     export let value: string;
     export let event: string = null;
 
     export let tooltipPortal = false;
     export let tooltipDelay: number = 0;
+    export let tooltipPlacement: TooltipPlacement = undefined;
 </script>
 
 {#key value}
-    <Copy {value} {event} {tooltipPortal} delay={tooltipDelay}>
+    <Copy {value} {event} {tooltipPortal} {tooltipDelay} {tooltipPlacement}>
         <Tag size="xs" variant="code">
             <Icon icon={IconDuplicate} size="s" slot="start" />
             <span
diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte
new file mode 100644
index 0000000000..675b7ee70c
--- /dev/null
+++ b/src/lib/layout/animatedTitle.svelte
@@ -0,0 +1,65 @@
+<script lang="ts">
+    import { isSmallViewport } from '$lib/stores/viewport';
+    import { IconChevronLeft } from '@appwrite.io/pink-icons-svelte';
+    import { Button, Icon, Layout } from '@appwrite.io/pink-svelte';
+    import type { Snippet } from 'svelte';
+
+    let {
+        href = null,
+        collapsed = false,
+        children
+    }: {
+        href?: string | null;
+        collapsed?: boolean;
+        children: Snippet;
+    } = $props();
+
+    const buttonSize = $derived(collapsed ? 'xs' : 's');
+
+    const expandedSize = $derived(
+        $isSmallViewport ? 'var(--font-size-xl)' : 'var(--font-size-xxxl)'
+    );
+
+    const collapsedSize = $derived($isSmallViewport ? 'var(--font-size-l)' : 'var(--font-size-xl)');
+    const currentFontSize = $derived(collapsed ? collapsedSize : expandedSize);
+
+    const currentLineHeight = $derived(collapsed ? '130%' : '140%');
+    const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
+</script>
+
+<Layout.Stack justifyContent="center" alignItems="center" direction="row" gap="xs" inline>
+    {#if href}
+        <span style:position="relative">
+            <Button.Anchor size={buttonSize} icon variant="text" {href} aria-label="page back">
+                <Icon icon={IconChevronLeft} />
+            </Button.Anchor>
+        </span>
+    {/if}
+    <h1
+        class="animated-title"
+        style:font-size={currentFontSize}
+        style:line-height={currentLineHeight}
+        style:letter-spacing={currentLetterSpacing}>
+        {@render children()}
+    </h1>
+</Layout.Stack>
+
+<style lang="scss">
+    .animated-title {
+        font-family: var(--font-family-brand), var(--sans-fallbacks);
+        font-weight: 400;
+        color: var(--fgcolor-neutral-primary);
+        text-align: start;
+        margin: 0;
+
+        transition:
+            font-size 300ms cubic-bezier(0.4, 0, 0.2, 1),
+            line-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
+            letter-spacing 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        max-width: 100%;
+    }
+</style>
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index c280ad0f92..5202addf7c 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -4,6 +4,7 @@
     // TODO: needs better props
 
     export let expanded = false;
+    export let expandHeightButton = false;
     export let slotSpacing = false;
     export let overlapCover = false;
     export let paddingInlineEnd = true;
@@ -17,12 +18,13 @@
 
 <div style:container-type="inline-size" class:overlap-cover={overlapCover} {...$$restProps}>
     <div
-        class="console-container"
-        class:slotSpacing
-        class:paddingInlineEnd={!paddingInlineEnd}
+        {style}
         class:expanded
+        class:slotSpacing
         class:databasesScreen
-        {style}>
+        class:expandHeightButton
+        class="console-container"
+        class:paddingInlineEnd={!paddingInlineEnd}>
         <Layout.Stack gap="l">
             <slot />
         </Layout.Stack>
@@ -42,11 +44,26 @@
             padding-inline-end: 0 !important;
             margin-block: var(--base-8) !important;
 
+            &.expandHeightButton {
+                margin-inline-end: unset;
+                margin-inline-start: 2.75rem;
+            }
+
             &:first-child {
                 margin-inline: 4rem;
 
+                &.expandHeightButton {
+                    margin-inline: 0.5rem;
+                    margin-inline-start: 4rem;
+                }
+
                 @media (max-width: 768px) {
                     margin-inline: 1rem;
+
+                    &.expandHeightButton {
+                        margin-inline: unset;
+                        margin-inline-start: 1rem;
+                    }
                 }
             }
 
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index be99cc7be3..cf68dac86d 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -5,39 +5,81 @@
     export let size: 'small' | 'medium' | 'large' | 'xl' = null;
     export let blocksize = '152px';
     export let expanded: boolean = false;
+    export let animate: boolean = false;
+    export let collapsed: boolean = false;
+
+    let isAnimating = false;
+    let animationTimeout: ReturnType<typeof setTimeout>;
 
     $: style = size
         ? `--p-container-max-size: var(--container-max-size, var(--container-size-${size}))`
         : '';
 
     $: marginTop = expanded && $isTabletViewport ? '48px' : undefined;
+
+    $: animatedBlocksize = animate && collapsed ? '65px' : blocksize;
+    $: headerPaddingTop = animate && collapsed ? 'var(--base-16)' : 'var(--base-32)';
+    $: headerPaddingBottom = animate && collapsed ? 'var(--base-8)' : 'var(--base-16)';
+
+    $: if (animate) {
+        clearTimeout(animationTimeout);
+        isAnimating = true;
+        animationTimeout = setTimeout(() => {
+            isAnimating = false;
+        }, 300);
+    }
 </script>
 
 <div
     class:expanded
+    class:collapsed={animate && collapsed}
+    class:animate
     class="top-cover-console"
-    style:block-size={blocksize}
-    style:margin-top={marginTop}>
-    <div class="cover-container" {style} class:expanded>
+    style:block-size={animatedBlocksize}
+    style:margin-top={marginTop}
+    style:padding-block-start={headerPaddingTop}
+    style:padding-block-end={headerPaddingBottom}>
+    <div
+        class="cover-container"
+        {style}
+        class:expanded
+        class:collapsed={animate && collapsed}
+        class:animating={isAnimating}>
         <Layout.Stack direction="row" alignItems="baseline">
             <slot name="header" />
         </Layout.Stack>
-        <div class:expanded-slot={expanded}>
-            <slot />
-        </div>
+
+        {#if $$slots.default}
+            <div class:expanded-slot={expanded}>
+                <slot />
+            </div>
+        {/if}
     </div>
 </div>
 
 <style lang="scss">
     .top-cover-console {
         container-type: inline-size;
-        padding-block-start: var(--base-32);
-        padding-block-end: var(--base-16);
         border-bottom: 1px solid var(--border-neutral, #2d2d31);
         background: var(--bgcolor-neutral-primary, #1d1d21);
         margin-left: -190px;
         padding-left: 190px;
+        position: relative;
+        overflow: hidden;
+
+        &.animate {
+            transition:
+                block-size 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                padding-block-start 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                padding-block-end 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                border-bottom-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        &.collapsed {
+            border-bottom-color: var(--border-neutral, #2d2d31);
+        }
     }
+
     .cover-container {
         position: relative;
         margin: 0 1rem;
@@ -69,6 +111,10 @@
         &.expanded {
             margin-inline: 1rem !important;
         }
+
+        &.animating {
+            transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
     }
 
     .expanded-slot {
diff --git a/src/lib/layout/index.ts b/src/lib/layout/index.ts
index 98acd4b510..11a2f4fc84 100644
--- a/src/lib/layout/index.ts
+++ b/src/lib/layout/index.ts
@@ -1,6 +1,7 @@
 export { default as Container } from './container.svelte';
 export { default as Cover } from './cover.svelte';
 export { default as CoverTitle } from './coverTitle.svelte';
+export { default as AnimatedTitle } from './animatedTitle.svelte';
 export { default as Footer } from './footer.svelte';
 export { default as Navigation } from './navigation.svelte';
 export { default as Notifications } from './notifications.svelte';
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 d46a2f25bd..bf12a21201 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
@@ -16,7 +16,8 @@
         showRecordsCreateSheet,
         showCreateAttributeSheet,
         type Columns,
-        randomDataModalState
+        randomDataModalState,
+        expandTabs
     } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
@@ -26,7 +27,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { IconChevronDown, IconChevronUp, IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRecord from './createRecord.svelte';
@@ -95,7 +96,7 @@
 </script>
 
 {#key page.params.table}
-    <Container expanded style="background: var(--bgcolor-neutral-primary)">
+    <Container expanded expandHeightButton style="background: var(--bgcolor-neutral-primary)">
         <Layout.Stack direction="column" gap="xl">
             <Layout.Stack direction="row" justifyContent="space-between">
                 <!-- TODO: verify later - columns={tableColumns} -->
@@ -115,11 +116,6 @@
                         columns={filterColumns}
                         disabled={!(hasColumns && hasValidColumns)}
                         analyticsSource="database_rows" />
-
-                    <!-- TODO: not yet implemented -->
-                    <!--                    <Button icon secondary>-->
-                    <!--                        <Icon icon={IconSearch} slot="start" />-->
-                    <!--                    </Button>-->
                 </Layout.Stack>
                 <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                     <Button
@@ -138,6 +134,14 @@
                             <Icon icon={IconPlus} slot="start" size="s" />
                             Create row
                         </Button>
+
+                        <Button
+                            icon
+                            secondary
+                            disabled={!(hasColumns && hasValidColumns)}
+                            on:click={() => ($expandTabs = !$expandTabs)}>
+                            <Icon icon={!$expandTabs ? IconChevronDown : IconChevronUp} size="s" />
+                        </Button>
                     {/if}
                 </Layout.Stack>
             </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
index 87858edf35..3abe31f079 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -3,9 +3,10 @@
     import { page } from '$app/state';
     import { Id, Tab, Tabs } from '$lib/components';
     import { isTabSelected } from '$lib/helpers/load';
-    import { Cover, CoverTitle } from '$lib/layout';
+    import { Cover } from '$lib/layout';
+    import AnimatedTitle from '$lib/layout/animatedTitle.svelte';
     import { canWriteTables } from '$lib/stores/roles';
-    import { table } from './store';
+    import { expandTabs, table } from './store';
 
     const databaseId = $derived(page.params.database);
 
@@ -53,27 +54,40 @@
             }
         ].filter((tab) => !tab.disabled)
     );
+
+    const link = $derived(
+        `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`
+    );
 </script>
 
-<Cover expanded>
+<Cover expanded collapsed={!$expandTabs} blocksize={$expandTabs ? '152px' : '90px'} animate={true}>
     <svelte:fragment slot="header">
-        <CoverTitle
-            href={`${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`}>
+        <AnimatedTitle href={link} collapsed={!$expandTabs}>
             {$table?.name}
-        </CoverTitle>
+        </AnimatedTitle>
+
         {#key $table?.$id}
-            <Id value={$table?.$id}>{$table?.$id}</Id>
+            <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
+                >{$table?.$id}</Id>
         {/key}
     </svelte:fragment>
 
-    <Tabs>
-        {#each tabs as tab}
-            <Tab
-                href={tab.href}
-                selected={isTabSelected(tab, page.url.pathname, path, tabs)}
-                event={tab.event}>
-                {tab.title}
-            </Tab>
-        {/each}
-    </Tabs>
+    <div class="tabs-container" style:opacity={$expandTabs ? 1 : 0}>
+        <Tabs>
+            {#each tabs as tab}
+                <Tab
+                    href={tab.href}
+                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                    event={tab.event}>
+                    {tab.title}
+                </Tab>
+            {/each}
+        </Tabs>
+    </div>
 </Cover>
+
+<style lang="scss">
+    .tabs-container {
+        transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 34472bfaaf..645245226d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import {
-        Badge,
         Button,
         Icon,
         Layout,
@@ -22,7 +21,8 @@
         tableColumns,
         columnsOrder,
         showCreateAttributeSheet,
-        spreadsheetLoading
+        spreadsheetLoading,
+        expandTabs
     } from '../store';
 
     type Mode = 'rows' | 'indexes';
@@ -201,7 +201,7 @@
     </Spreadsheet.Root>
 
     {#if !$spreadsheetLoading}
-        <div class="spreadsheet-fade-bottom">
+        <div class="spreadsheet-fade-bottom" data-collapsed-tabs={!$expandTabs}>
             <div class="empty-actions">
                 <Layout.Stack gap="xl" alignItems="center">
                     <Typography.Title>{title ?? `You have no ${mode} yet`}</Typography.Title>
@@ -290,7 +290,6 @@
     }
 
     .spreadsheet-fade-bottom {
-        top: 29%;
         bottom: 0;
         width: 100%;
         height: 70.5vh;
@@ -304,9 +303,13 @@
         z-index: 20;
         display: flex;
         justify-content: center;
+        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+        &[data-collapsed-tabs='true'] {
+            height: 79.1vh !important;
+        }
 
         @media (max-width: 768px) {
-            top: 34.25%; /* oddly specific, ik! */
             height: 70vh;
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
index 8feffff6ec..22d6cff818 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
@@ -1,11 +1,24 @@
 <script lang="ts">
-    import { scrollStore } from '../store';
+    import { onMount, onDestroy, type Snippet, tick } from 'svelte';
+    import { expandTabs, scrollStore } from '../store';
 
-    let spreadsheetHeight = '74.5vh';
+    let {
+        observeExpand = false,
+        children
+    }: {
+        observeExpand?: boolean;
+        children: Snippet;
+    } = $props();
+
+    let base = $state(0);
+    let isFirstMount = $state(true);
     let spreadsheetWrapper: HTMLDivElement;
+    let spreadsheetHeight = $state('74.5vh');
     let spreadsheetGridContainer: HTMLDivElement;
+    let resizeTimeout: ReturnType<typeof setTimeout>;
+    let unsubscribeExpandTabs: (() => void) | null = null;
 
-    function initSpreadsheetGridContainer() {
+    function initSpreadsheetGridContainer(): boolean {
         if (!spreadsheetWrapper) return false;
 
         spreadsheetGridContainer = spreadsheetWrapper.querySelector('.spreadsheet-container');
@@ -13,32 +26,69 @@
     }
 
     /** adjust height to fill remaining viewport space */
-    export function resizeSheet() {
+    export function resizeSheet(): void {
         if (!spreadsheetWrapper) return;
-        const rect = spreadsheetWrapper.getBoundingClientRect();
-        spreadsheetHeight = window.innerHeight - rect.top + 'px';
+
+        clearTimeout(resizeTimeout);
+
+        resizeTimeout = setTimeout(() => {
+            const rect = spreadsheetWrapper.getBoundingClientRect();
+            base = window.innerHeight - rect.top;
+
+            let headerHeightDiff = 0;
+            if (observeExpand && !isFirstMount) {
+                /**
+                 * 16px from padding top
+                 * 08px from padding bottom
+                 * 65px from block size difference on cover
+                 * ————————————————
+                 * 89px
+                 */
+                headerHeightDiff = $expandTabs ? -89 : 89;
+            }
+
+            spreadsheetHeight = `${base + headerHeightDiff}px`;
+            isFirstMount = false;
+        }, 16);
     }
 
-    export function saveGridSheetScroll() {
-        initSpreadsheetGridContainer();
-        scrollStore.set(spreadsheetGridContainer?.scrollLeft);
+    export function saveGridSheetScroll(): void {
+        if (initSpreadsheetGridContainer()) {
+            scrollStore.set(spreadsheetGridContainer.scrollLeft || 0);
+        }
     }
 
-    export function restoreGridSheetScroll() {
+    export function restoreGridSheetScroll(): void {
         if (initSpreadsheetGridContainer() && spreadsheetGridContainer.scrollWidth > 0) {
             spreadsheetGridContainer.scrollLeft = $scrollStore;
         }
     }
 
-    resizeSheet();
+    onMount(() => {
+        resizeSheet();
+
+        if (observeExpand) {
+            unsubscribeExpandTabs = expandTabs.subscribe(async () => {
+                await tick();
+                resizeSheet();
+            });
+        }
+    });
+
+    onDestroy(() => {
+        clearTimeout(resizeTimeout);
+        unsubscribeExpandTabs?.();
+    });
 </script>
 
 <svelte:window on:resize={resizeSheet} />
 
-<div
-    bind:this={spreadsheetWrapper}
-    style:height={spreadsheetHeight}
-    style:position="relative"
-    style:width="100%">
-    <slot />
+<div bind:this={spreadsheetWrapper} class="spreadsheet-wrapper" style:height={spreadsheetHeight}>
+    {@render children()}
 </div>
+
+<style>
+    .spreadsheet-wrapper {
+        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index ca39e5f6a5..acebe743bc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -550,7 +550,7 @@
     );
 </script>
 
-<SpreadsheetContainer bind:this={spreadsheetContainer}>
+<SpreadsheetContainer observeExpand bind:this={spreadsheetContainer}>
     {#key spreadsheetKey}
         <Spreadsheet.Root
             height="100%"
@@ -896,7 +896,10 @@
             margin-inline-end: 1px;
         }
 
+        /* TODO: not good! */
         & :global(textarea) {
+            padding-inline: 9px;
+            margin-block: -2.75px;
             min-height: 85px !important;
         }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 57cf9463e1..18b2df3c31 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -148,3 +148,5 @@ export const rowActivitySheet = writable({
     show: false,
     row: null as Models.Row
 });
+
+export const expandTabs = writable(true);

From dbc0dabda5bdd9bd0333cad9fbad3ab93f48d0d5 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 9 Aug 2025 15:37:39 +0530
Subject: [PATCH 103/118] fix: height resize.

---
 .../database-[database]/table-[table]/spreadsheet.svelte        | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index acebe743bc..a640bfbfac 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -539,7 +539,7 @@
         makeTableColumns();
     }
 
-    $: if (data.rows) {
+    $: {
         /* up-to-date height */
         tick().then(() => spreadsheetContainer?.resizeSheet());
     }

From f4a2b8fbb7ad5af787513c4d3fa993ec7a296944 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 9 Aug 2025 17:39:55 +0530
Subject: [PATCH 104/118] update: errors handling on forms.

---
 src/lib/flags.ts                              |  3 +-
 .../table-[table]/+layout.svelte              |  4 ++-
 .../table-[table]/createColumn.svelte         |  3 +-
 .../table-[table]/createRecord.svelte         | 20 ++++++-------
 .../table-[table]/indexes/+page.svelte        | 22 ++++----------
 .../table-[table]/indexes/createIndex.svelte  | 29 +++++++++++++------
 .../indexes/overviewIndex.svelte              | 16 ++++------
 7 files changed, 46 insertions(+), 51 deletions(-)

diff --git a/src/lib/flags.ts b/src/lib/flags.ts
index 50b902b95f..70bba582a2 100644
--- a/src/lib/flags.ts
+++ b/src/lib/flags.ts
@@ -19,6 +19,5 @@ function isFlagEnabled(name: string) {
 }
 
 export const flags = {
-    showSites: isFlagEnabled('sites'),
-    showIndexLengths: isFlagEnabled('index-lengths')
+    showSites: isFlagEnabled('sites')
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 0d686b89e9..23ae411230 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -352,7 +352,9 @@
     bind:show={$showCreateIndexSheet.show}
     submit={{
         text: 'Create',
-        onClick: async () => await createIndex.create()
+        onClick: async () => {
+            await createIndex.create();
+        }
     }}>
     <CreateIndex
         bind:this={createIndex}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
index 26cc6aa57f..2af8be4e51 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
@@ -174,7 +174,8 @@
             bind:value={key}
             autofocus
             disabled={selectedOption === 'Relationship'}
-            required />
+            required
+            pattern="^[A-Za-z0-9][A-Za-z0-9._\-]*$" />
 
         <InputSelect
             id="type"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
index 826dcbac65..9817c32072 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
@@ -62,15 +62,13 @@
         isSubmitting = true;
 
         try {
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .grids.createRow(
-                    page.params.database,
-                    page.params.table,
-                    $createRow.id ?? ID.unique(),
-                    $createRow.row,
-                    $createRow.permissions
-                );
+            await sdk.forProject(page.params.region, page.params.project).grids.createRow({
+                databaseId: page.params.database,
+                tableId: page.params.table,
+                rowId: $createRow.id ?? ID.unique(),
+                data: $createRow.row,
+                permissions: $createRow.permissions
+            });
 
             showSheet = false;
             addNotification({
@@ -111,9 +109,9 @@
             }}>
             <Layout.Stack gap="xxl">
                 <ColumnForm
-                    bind:formValues={$createRow.row}
                     columns={$createRow.columns}
-                    bind:customId={$createRow.id} />
+                    bind:customId={$createRow.id}
+                    bind:formValues={$createRow.row} />
 
                 <Layout.Stack gap="xl">
                     <Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index 47d60fd58e..d703a3bd83 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -76,14 +76,6 @@
         }
     }
 
-    const showLengths = flags.showIndexLengths(page.data);
-
-    onMount(() => {
-        if (!showLengths) {
-            columns = columns.filter((col) => col.id !== 'lengths');
-        }
-    });
-
     onDestroy(() => ($showCreateAttributeSheet.show = false));
 
     const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
@@ -135,10 +127,8 @@
                             >Columns</Spreadsheet.Header.Cell>
                         <!--                        <Spreadsheet.Header.Cell column="orders" {root}-->
                         <!--                            >Orders</Spreadsheet.Header.Cell>-->
-                        {#if showLengths}
-                            <Spreadsheet.Header.Cell column="lengths" {root}
-                                >Lengths</Spreadsheet.Header.Cell>
-                        {/if}
+                        <Spreadsheet.Header.Cell column="lengths" {root}
+                            >Lengths</Spreadsheet.Header.Cell>
                         <Spreadsheet.Header.Cell column="actions" {root} />
                     </svelte:fragment>
 
@@ -173,11 +163,9 @@
                             <!--                            <Spreadsheet.Cell column="orders" {root} isEditable={false}>-->
                             <!--                                {index.orders}-->
                             <!--                            </Spreadsheet.Cell>-->
-                            {#if showLengths}
-                                <Spreadsheet.Cell column="lengths" {root} isEditable={false}>
-                                    {index.lengths}
-                                </Spreadsheet.Cell>
-                            {/if}
+                            <Spreadsheet.Cell column="lengths" {root} isEditable={false}>
+                                {index.lengths}
+                            </Spreadsheet.Cell>
                             <Spreadsheet.Cell column="actions" {root}>
                                 <Popover let:toggle padding="none" placement="bottom-end">
                                     <Button text icon ariaLabel="more options" on:click={toggle}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
index 3f52c532f3..a3b3a48b71 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
@@ -13,7 +13,6 @@
     import { table, indexes } from '../store';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
-    import { flags } from '$lib/flags';
 
     export let showCreateIndex = false;
     export let externalColumnKey: string = null;
@@ -24,7 +23,7 @@
     let types = [
         { value: IndexType.Key, label: 'Key' },
         { value: IndexType.Unique, label: 'Unique' },
-        { value: IndexType.Fulltext, label: 'FullText' }
+        { value: IndexType.Fulltext, label: 'Fulltext' }
     ];
 
     let selectedType = IndexType.Key;
@@ -38,8 +37,6 @@
 
     let columnList = [{ value: '', order: '', length: null }];
 
-    const showLengths = flags.showIndexLengths(page.data);
-
     function generateIndexKey() {
         let indexKeys = $indexes.map((index) => index.key);
 
@@ -68,6 +65,10 @@
 
     export async function create() {
         if (!(key && selectedType && !addColumnDisabled)) {
+            addNotification({
+                type: 'error',
+                message: 'Selected column key or type invalid'
+            });
             return;
         }
 
@@ -87,9 +88,11 @@
                 invalidate(Dependencies.DATABASE)
             ]);
 
-            goto(
-                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table-${$table.$id}/indexes`
-            );
+            if (!page.route.id.includes('/indexes')) {
+                await goto(
+                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table-${$table.$id}/indexes`
+                );
+            }
 
             addNotification({
                 message: 'Creating index',
@@ -114,7 +117,15 @@
     }
 </script>
 
-<InputText required id="key" label="Index Key" placeholder="Enter Key" bind:value={key} autofocus />
+<InputText
+    required
+    id="key"
+    label="Index Key"
+    pattern="^[A-Za-z0-9][A-Za-z0-9._\-]*$"
+    placeholder="Enter Key"
+    bind:value={key}
+    autofocus />
+
 <InputSelect required options={types} id="type" label="Index type" bind:value={selectedType} />
 
 <Layout.Stack gap="s">
@@ -144,7 +155,7 @@
                 bind:value={column.order}
                 placeholder="Select order" />
 
-            {#if selectedType === IndexType.Key && showLengths}
+            {#if selectedType === IndexType.Key}
                 <InputNumber
                     id={`length-${index}`}
                     label={index === 0 ? 'Length' : undefined}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/overviewIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/overviewIndex.svelte
index d0ac4101d7..b253ea1881 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/overviewIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/overviewIndex.svelte
@@ -10,8 +10,6 @@
     }: {
         selectedIndex: Models.ColumnIndex;
     } = $props();
-
-    const showLengths = flags.showIndexLengths(page.data);
 </script>
 
 <InputText
@@ -44,14 +42,12 @@
                 id={`value-${selectedIndex.orders[i]}`}
                 value={selectedIndex.orders[i]}
                 readonly />
-            {#if showLengths}
-                <InputText
-                    required
-                    label={i === 0 ? 'Length' : ''}
-                    id={`value-${selectedIndex.lengths[i]}`}
-                    value={selectedIndex.lengths[i]?.toString() ?? null}
-                    readonly />
-            {/if}
+            <InputText
+                required
+                label={i === 0 ? 'Length' : ''}
+                id={`value-${selectedIndex.lengths[i]}`}
+                value={selectedIndex.lengths[i]?.toString() ?? null}
+                readonly />
         </Layout.Stack>
     {/each}
 {/if}

From de129f980158fe9711c8dbf22cb86fa4d6253828 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 11 Aug 2025 17:04:58 +0530
Subject: [PATCH 105/118] feat: change Collection ID to Table ID in create
 table modal

---
 .../databases/database-[database]/createTable.svelte            | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
index 222843bf76..7310910cca 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
@@ -91,7 +91,7 @@
         bind:id
         required={false}
         autofocus={false}
-        name="Collection"
+        name="Table"
         on:input={() => {
             if (!touchedId) {
                 touchedId = true;

From 98d5c65e6194247a9450c7d80b393b8425bead7c Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 11 Aug 2025 17:14:08 +0530
Subject: [PATCH 106/118] fix: replace your existing rows with replace any
 existing rows

---
 .../databases/database-[database]/table-[table]/+layout.svelte  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 23ae411230..43bcf1e259 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -369,7 +369,7 @@
 <Dialog title="Generate sample data" bind:open={$randomDataModalState.show}>
     <Layout.Stack style="gap: 28px;">
         <Typography.Text>
-            Select how many sample rows to generate for testing. This won't delete or replace your
+            Select how many sample rows to generate for testing. This won't delete or replace any
             existing rows.
         </Typography.Text>
 

From c2edbaa903f276cb0b30aed14224aea1852580b2 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 11 Aug 2025 19:55:32 +0530
Subject: [PATCH 107/118] updates.

---
 package.json                                  |   3 +-
 pnpm-lock.yaml                                |  13 +-
 src/lib/constants.ts                          |   1 +
 src/lib/layout/animatedTitle.svelte           |   5 +-
 src/lib/layout/container.svelte               |   1 +
 .../database-[database]/createTable.svelte    |   2 +-
 .../database-[database]/subNavigation.svelte  |   2 +-
 .../table-[table]/+page.ts                    |   5 +-
 .../table-[table]/layout/spreadsheet.svelte   |   2 -
 .../table-[table]/spreadsheet.svelte          | 432 ++++++++++++------
 .../table-[table]/store.ts                    |   6 +
 11 files changed, 314 insertions(+), 158 deletions(-)

diff --git a/package.json b/package.json
index 3a76ccdcce..e2eb70e85d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
@@ -56,6 +56,7 @@
         "@sveltejs/adapter-static": "^3.0.8",
         "@sveltejs/kit": "^2.20.2",
         "@sveltejs/vite-plugin-svelte": "^5.0.3",
+        "@tanstack/svelte-virtual": "^3.13.12",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/svelte": "^5.2.8",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 48503dac8c..9dd7301b21 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -108,6 +108,9 @@ importers:
       '@sveltejs/vite-plugin-svelte':
         specifier: ^5.0.3
         version: 5.0.3(svelte@5.25.3)(vite@7.0.6(@types/node@22.13.14)(sass@1.86.0))
+      '@tanstack/svelte-virtual':
+        specifier: ^3.13.12
+        version: 3.13.12(svelte@5.25.3)
       '@testing-library/dom':
         specifier: ^10.4.0
         version: 10.4.0
@@ -284,8 +287,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3828,7 +3831,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@363dcac(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 52775197c0..fb7ce7e5d6 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -1,4 +1,5 @@
 export const PAGE_LIMIT = 12; // default page limit
+export const SPREADSHEET_PAGE_LIMIT = 50; // default sheet page limit
 export const CARD_LIMIT = 6; // default card limit
 export const INTERVAL = 5 * 60000; // default interval to check for feedback
 export const NEW_DEV_PRO_UPGRADE_COUPON = 'appw50';
diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte
index 675b7ee70c..09f604691a 100644
--- a/src/lib/layout/animatedTitle.svelte
+++ b/src/lib/layout/animatedTitle.svelte
@@ -17,11 +17,10 @@
     const buttonSize = $derived(collapsed ? 'xs' : 's');
 
     const expandedSize = $derived(
-        $isSmallViewport ? 'var(--font-size-xl)' : 'var(--font-size-xxxl)'
+        $isSmallViewport ? 'var(--font-size-m)' : 'var(--font-size-xxxl)'
     );
 
-    const collapsedSize = $derived($isSmallViewport ? 'var(--font-size-l)' : 'var(--font-size-xl)');
-    const currentFontSize = $derived(collapsed ? collapsedSize : expandedSize);
+    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : expandedSize);
 
     const currentLineHeight = $derived(collapsed ? '130%' : '140%');
     const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 5202addf7c..124884accb 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -33,6 +33,7 @@
 
 <style>
     .overlap-cover {
+        z-index: 1;
         margin-block-start: -3.5rem;
     }
     :global(.console-container) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
index 222843bf76..7310910cca 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/createTable.svelte
@@ -91,7 +91,7 @@
         bind:id
         required={false}
         autofocus={false}
-        name="Collection"
+        name="Table"
         on:input={() => {
             if (!touchedId) {
                 touchedId = true;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 332190f44f..95e3deb530 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -222,8 +222,8 @@
         }
 
         li {
-            position: relative;
             overflow: hidden;
+            position: relative;
             padding-inline-end: 0.5rem;
             margin-inline-start: 0.5rem;
         }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
index cfb8fed0b8..f75f55f1c7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+page.ts
@@ -1,4 +1,4 @@
-import { Dependencies /*PAGE_LIMIT*/ } from '$lib/constants';
+import { Dependencies, SPREADSHEET_PAGE_LIMIT } from '$lib/constants';
 import { getLimit, getPage, getQuery, getView, pageToOffset, View } from '$lib/helpers/load';
 import { sdk } from '$lib/stores/sdk';
 import { type Models, Query } from '@appwrite.io/console';
@@ -13,8 +13,7 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
     depends(Dependencies.ROWS);
 
     const page = getPage(url);
-    // TODO: apply pagination
-    const limit = getLimit(url, route, 96 /*PAGE_LIMIT*/);
+    const limit = getLimit(url, route, SPREADSHEET_PAGE_LIMIT);
     const view = getView(url, route, View.Grid);
     const offset = pageToOffset(page, limit);
     const query = getQuery(url);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
index 22d6cff818..ddb8708281 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
@@ -81,8 +81,6 @@
     });
 </script>
 
-<svelte:window on:resize={resizeSheet} />
-
 <div bind:this={spreadsheetWrapper} class="spreadsheet-wrapper" style:height={spreadsheetHeight}>
     {@render children()}
 </div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index a640bfbfac..a21c7fb679 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -4,8 +4,8 @@
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Alert, Confirm, Id, SortButton } from '$lib/components';
-    import { Dependencies } from '$lib/constants';
-    import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
+    import { Dependencies, SPREADSHEET_PAGE_LIMIT } from '$lib/constants';
+    import { Button as ConsoleButton, InputChoice, InputSelect } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
@@ -29,8 +29,9 @@
         showCreateIndexSheet,
         type SortState,
         Deletion,
-        scrollStore,
-        rowActivitySheet
+        rowActivitySheet,
+        paginatedRows,
+        paginatedRowsLoading
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -70,8 +71,10 @@
     import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
     import { copy } from '$lib/helpers/copy';
     import { debounce } from '$lib/helpers/debounce';
-    import { writable } from 'svelte/store';
     import { hash } from '$lib/helpers/string';
+    import { writable } from 'svelte/store';
+    import { pageToOffset } from '$lib/helpers/load';
+    import { sleep } from '$lib/helpers/promises';
 
     export let data: PageData;
     export let showRecordsCreateSheet: {
@@ -80,6 +83,11 @@
     };
 
     $: rows = writable(data.rows);
+    $: if (rows) {
+        paginatedRows.clear();
+        paginatedRows.setPage(1, $rows.rows);
+    }
+
     const tableId = page.params.table;
     const databaseId = page.params.database;
     const organizationId = data.organization.$id ?? data.project.teamId;
@@ -100,6 +108,9 @@
 
     let spreadsheetContainer: SpreadsheetContainer;
 
+    let currentPage = 1;
+    let jumpToPageReactive = 0;
+
     let showDelete = false;
     let showColumnDelete = false;
     let deleteConfirmationChecked = false;
@@ -113,7 +124,10 @@
         makeTableColumns();
         sortState.set(data.currentSort as SortState);
 
-        window.scrollTo($scrollStore, 0);
+        if (data.rows.rows.length) {
+            paginatedRows.clear();
+            paginatedRows.setPage(1, data.rows.rows);
+        }
     });
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
@@ -330,13 +344,30 @@
         showDelete = false;
         try {
             if (selectedRowForDelete) {
-                await sdk
-                    .forProject(page.params.region, page.params.project)
-                    .grids.deleteRow(databaseId, tableId, selectedRowForDelete);
+                await sdk.forProject(page.params.region, page.params.project).grids.deleteRow({
+                    databaseId,
+                    tableId,
+                    rowId: selectedRowForDelete
+                });
             } else {
-                await sdk
-                    .forProject(page.params.region, page.params.project)
-                    .grids.deleteRows(databaseId, tableId, [Query.equal('$id', selectedRows)]);
+                if (selectedRows.length) {
+                    const batches: string[][] = [];
+                    for (let i = 0; i < selectedRows.length; i += 100) {
+                        batches.push(selectedRows.slice(i, i + 100));
+                    }
+
+                    await Promise.all(
+                        batches.map((batch) =>
+                            sdk
+                                .forProject(page.params.region, page.params.project)
+                                .grids.deleteRows({
+                                    databaseId,
+                                    tableId,
+                                    queries: [Query.equal('$id', batch)]
+                                })
+                        )
+                    );
+                }
             }
 
             await invalidate(Dependencies.ROWS);
@@ -501,6 +532,64 @@
         }
     }
 
+    async function loadPage(pageNumber: number): Promise<boolean> {
+        const totalPages = Math.ceil(data.rows.total / SPREADSHEET_PAGE_LIMIT);
+        if (
+            pageNumber < 1 ||
+            pageNumber === currentPage ||
+            paginatedRows.hasPage(pageNumber) ||
+            pageNumber > totalPages
+        )
+            return false;
+
+        console.log(`pageNumber: ${pageNumber}`);
+
+        $paginatedRowsLoading = true;
+        await sleep(500);
+        const loadedRows = await sdk
+            .forProject(page.params.region, page.params.project)
+            .grids.listRows({
+                databaseId,
+                tableId,
+                queries: [
+                    Query.orderDesc(''),
+                    Query.limit(SPREADSHEET_PAGE_LIMIT),
+                    Query.offset(pageToOffset(pageNumber, SPREADSHEET_PAGE_LIMIT))
+                ]
+            });
+
+        paginatedRows.setPage(pageNumber, loadedRows.rows);
+        $paginatedRowsLoading = false;
+
+        return true;
+    }
+
+    console.log(`$paginatedRowsLoading: ${$paginatedRowsLoading}`);
+
+    async function handleGoToPage(targetPageNum: number): Promise<void> {
+        if (targetPageNum < 1 || targetPageNum > totalPages) return;
+
+        if (!paginatedRows.hasPage(targetPageNum)) {
+            paginatedRows.setMaxPage(targetPageNum);
+            $paginatedRowsLoading = true;
+
+            const loadedRows = await sdk
+                .forProject(page.params.region, page.params.project)
+                .grids.listRows({
+                    databaseId,
+                    tableId,
+                    queries: [
+                        Query.orderDesc(''),
+                        Query.limit(SPREADSHEET_PAGE_LIMIT),
+                        Query.offset(pageToOffset(targetPageNum, SPREADSHEET_PAGE_LIMIT))
+                    ]
+                });
+
+            paginatedRows.setPage(targetPageNum, loadedRows.rows);
+            $paginatedRowsLoading = false;
+        }
+    }
+
     const saveColumnWidthsToPreferences = debounce(
         (column: { columnId: string; newWidth: number; fixedWidth: number }) => {
             preferences.saveColumnWidths(organizationId, tableId, {
@@ -531,7 +620,9 @@
     ) as Models.ColumnRelationship[];
 
     $: emptyCellsCount =
-        $rows.rows.length >= emptyCellsLimit ? 0 : emptyCellsLimit - $rows.rows.length;
+        $paginatedRows.virtualLength >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - $paginatedRows.virtualLength;
 
     $: canShowDatetimePopover = true;
 
@@ -544,10 +635,9 @@
         tick().then(() => spreadsheetContainer?.resizeSheet());
     }
 
-    $: spreadsheetKey = hash(
-        $rows.rows.map((row) => row.$id),
-        '#'
-    );
+    $: spreadsheetKey = hash($paginatedRows.items.map((item) => item.$id).toString(), '#');
+
+    $: totalPages = Math.ceil($rows.total / SPREADSHEET_PAGE_LIMIT) || 1;
 </script>
 
 <SpreadsheetContainer observeExpand bind:this={spreadsheetContainer}>
@@ -558,13 +648,22 @@
             useVirtualizer
             keyboardNavigation
             bind:selectedRows
-            rowCount={$rows.rows.length}
             bind:columns={$tableColumns}
             loading={$spreadsheetLoading}
             emptyCells={emptyCellsCount}
+            rowCount={$paginatedRows.virtualLength}
             bottomActionClick={() => (showRecordsCreateSheet.show = true)}
             on:columnsSwap={(order) => saveColumnsOrder(order.detail)}
-            on:columnsResize={(resize) => saveColumnsWidth(resize.detail)}>
+            on:columnsResize={(resize) => saveColumnsWidth(resize.detail)}
+            bind:currentPage
+            nextPageTriggerOffset={2}
+            paginationBufferSpace={35}
+            jumpToPageNumber={jumpToPageReactive}
+            loadingMore={$paginatedRowsLoading}
+            itemsPerPage={SPREADSHEET_PAGE_LIMIT}
+            loadNextPage={loadPage}
+            loadPreviousPage={loadPage}
+            goToPage={handleGoToPage}>
             <svelte:fragment slot="header" let:root>
                 {#each $tableColumns as column (column.id)}
                     {#if column.isAction}
@@ -615,135 +714,147 @@
             </svelte:fragment>
 
             <svelte:fragment slot="rows" let:root let:item let:index>
-                {@const row = $rows.rows[item.index]}
-                <Spreadsheet.Row.Base {root} {index} id={row?.$id} virtualItem={item}>
-                    {#each $tableColumns as { id: columnId, isEditable } (columnId)}
-                        {@const rowColumn = $columns.find((col) => col.key === columnId)}
-                        <Spreadsheet.Cell
-                            {root}
-                            {isEditable}
-                            column={columnId}
-                            value={$rows.rows[item.index][columnId]}>
-                            {#if columnId === '$sequence'}
-                                <Id value={row.$sequence.toString()} tooltipPortal
-                                    >{row.$sequence}</Id>
-                            {:else if columnId === '$id'}
-                                <Id value={row.$id} tooltipPortal tooltipDelay={200}>{row.$id}</Id>
-                            {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
-                                <DualTimeView
-                                    time={row[columnId]}
-                                    canShowPopover={canShowDatetimePopover} />
-                            {:else if columnId === 'actions'}
-                                <SheetOptions
-                                    type="row"
-                                    column={rowColumn}
-                                    onSelect={(option) =>
-                                        onSelectSheetOption(option, null, 'row', row)}
-                                    onVisibilityChanged={(visible) => {
-                                        canShowDatetimePopover = !visible;
-                                    }}>
-                                    {#snippet children(toggle)}
+                {@const row = $paginatedRows.getItemAtVirtualIndex(index)}
+                {#if row === null}
+                    <Spreadsheet.Row.Base {root} virtualItem={item} {index} id={`loading-${index}`}>
+                        {#each $tableColumns as col}
+                            <Spreadsheet.Cell
+                                column={col.id}
+                                isEditable={false}
+                                root={{ ...root, loading: true }}
+                                id={`loading-${index}-${col.id}`} />
+                        {/each}
+                    </Spreadsheet.Row.Base>
+                {:else}
+                    <Spreadsheet.Row.Base {root} {index} id={row?.$id} virtualItem={item}>
+                        {#each $tableColumns as { id: columnId, isEditable } (columnId)}
+                            {@const rowColumn = $columns.find((col) => col.key === columnId)}
+                            <Spreadsheet.Cell {root} {isEditable} column={columnId}>
+                                {#if columnId === '$sequence'}
+                                    <Id value={row.$sequence.toString()} tooltipPortal
+                                        >{row.$sequence}</Id>
+                                {:else if columnId === '$id'}
+                                    <Id value={row.$id} tooltipPortal tooltipDelay={200}
+                                        >{row.$id}</Id>
+                                {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
+                                    <DualTimeView
+                                        time={row[columnId]}
+                                        canShowPopover={canShowDatetimePopover} />
+                                {:else if columnId === 'actions'}
+                                    <SheetOptions
+                                        type="row"
+                                        column={rowColumn}
+                                        onSelect={(option) =>
+                                            onSelectSheetOption(option, null, 'row', row)}
+                                        onVisibilityChanged={(visible) => {
+                                            canShowDatetimePopover = !visible;
+                                        }}>
+                                        {#snippet children(toggle)}
+                                            <Button.Button
+                                                icon
+                                                variant="extra-compact"
+                                                on:click={toggle}>
+                                                <Icon
+                                                    icon={IconDotsHorizontal}
+                                                    color="--fgcolor-neutral-primary" />
+                                            </Button.Button>
+                                        {/snippet}
+                                    </SheetOptions>
+                                {:else if isRelationship(rowColumn)}
+                                    {@const args = displayNames?.[rowColumn.relatedTable] ?? [
+                                        '$id'
+                                    ]}
+                                    {#if !isRelationshipToMany(rowColumn)}
+                                        {#if row[columnId]}
+                                            {@const related = row[columnId]}
+                                            <Link.Button
+                                                variant="muted"
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    // TODO: open sheet maybes
+                                                    goto(
+                                                        `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table/${rowColumn.relatedTable}/row/${related.$id}`
+                                                    );
+                                                }}>
+                                                {#each args as arg, i}
+                                                    {#if arg !== undefined}
+                                                        {#if i}&nbsp;|{/if}
+                                                        <span class="text" data-private
+                                                            >{related?.[arg]}</span>
+                                                    {/if}
+                                                {/each}
+                                            </Link.Button>
+                                        {:else}
+                                            <span class="text">n/a</span>
+                                        {/if}
+                                    {:else}
+                                        {@const itemsNum = row[columnId]?.length}
                                         <Button.Button
-                                            icon
                                             variant="extra-compact"
-                                            on:click={toggle}>
-                                            <Icon
-                                                icon={IconDotsHorizontal}
-                                                color="--fgcolor-neutral-primary" />
-                                        </Button.Button>
-                                    {/snippet}
-                                </SheetOptions>
-                            {:else if isRelationship(rowColumn)}
-                                {@const args = displayNames?.[rowColumn.relatedTable] ?? ['$id']}
-                                {#if !isRelationshipToMany(rowColumn)}
-                                    {#if row[columnId]}
-                                        {@const related = row[columnId]}
-                                        <Link.Button
-                                            variant="muted"
+                                            disabled={!itemsNum}
+                                            badge={itemsNum ?? 0}
                                             on:click={(e) => {
-                                                e.preventDefault();
                                                 e.stopPropagation();
-                                                // TODO: open sheet maybes
-                                                goto(
-                                                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table/${rowColumn.relatedTable}/row/${related.$id}`
-                                                );
+                                                e.preventDefault();
+                                                relationshipData = row[columnId];
+                                                showRelationships = true;
+                                                selectedRelationship = rowColumn;
                                             }}>
-                                            {#each args as arg, i}
-                                                {#if arg !== undefined}
-                                                    {#if i}&nbsp;|{/if}
-                                                    <span class="text" data-private
-                                                        >{related?.[arg]}</span>
-                                                {/if}
-                                            {/each}
-                                        </Link.Button>
-                                    {:else}
-                                        <span class="text">n/a</span>
+                                            Items
+                                        </Button.Button>
                                     {/if}
                                 {:else}
-                                    {@const itemsNum = row[columnId]?.length}
-                                    <Button.Button
-                                        variant="extra-compact"
-                                        disabled={!itemsNum}
-                                        badge={itemsNum ?? 0}
-                                        on:click={(e) => {
-                                            e.stopPropagation();
-                                            e.preventDefault();
-                                            relationshipData = row[columnId];
-                                            showRelationships = true;
-                                            selectedRelationship = rowColumn;
-                                        }}>
-                                        Items
-                                    </Button.Button>
-                                {/if}
-                            {:else}
-                                {@const value = row[columnId]}
-                                {@const formatted = formatColumn(row[columnId])}
-                                {@const isDatetimeAttribute = rowColumn.type === 'datetime'}
-                                {@const isEncryptedAttribute =
-                                    isString(rowColumn) && rowColumn.encrypt}
-                                {#if isDatetimeAttribute}
-                                    <DualTimeView time={value}>
-                                        <span slot="title">Timestamp</span>
-                                        {toLocaleDateTime(value, true)}
-                                    </DualTimeView>
-                                {:else if isEncryptedAttribute}
-                                    <button on:click={(e) => e.preventDefault()}>
-                                        <InteractiveText
-                                            copy={false}
-                                            variant="secret"
-                                            isVisible={false}
-                                            text={formatted} />
-                                    </button>
-                                {:else if formatted.length > 20}
-                                    <Tooltip placement="bottom" portal disabled>
+                                    {@const value = row[columnId]}
+                                    {@const formatted = formatColumn(row[columnId])}
+                                    {@const isDatetimeAttribute = rowColumn.type === 'datetime'}
+                                    {@const isEncryptedAttribute =
+                                        isString(rowColumn) && rowColumn.encrypt}
+                                    {#if isDatetimeAttribute}
+                                        <DualTimeView time={value}>
+                                            <span slot="title">Timestamp</span>
+                                            {toLocaleDateTime(value, true)}
+                                        </DualTimeView>
+                                    {:else if isEncryptedAttribute}
+                                        <button on:click={(e) => e.preventDefault()}>
+                                            <InteractiveText
+                                                copy={false}
+                                                variant="secret"
+                                                isVisible={false}
+                                                text={formatted} />
+                                        </button>
+                                    {:else if formatted.length > 20}
+                                        <Tooltip placement="bottom" portal disabled>
+                                            <Typography.Text truncate>
+                                                {formatted}
+                                            </Typography.Text>
+                                            <span
+                                                slot="tooltip"
+                                                style:white-space="pre-wrap"
+                                                style:word-break="break-word">
+                                                {formatted}
+                                            </span>
+                                        </Tooltip>
+                                    {:else if formatted === 'null'}
+                                        <Badge variant="secondary" content="NULL" size="xs" />
+                                    {:else}
                                         <Typography.Text truncate>
                                             {formatted}
                                         </Typography.Text>
-                                        <span
-                                            slot="tooltip"
-                                            style:white-space="pre-wrap"
-                                            style:word-break="break-word">
-                                            {formatted}
-                                        </span>
-                                    </Tooltip>
-                                {:else if formatted === 'null'}
-                                    <Badge variant="secondary" content="NULL" size="xs" />
-                                {:else}
-                                    <Typography.Text truncate>
-                                        {formatted}
-                                    </Typography.Text>
+                                    {/if}
                                 {/if}
-                            {/if}
-
-                            <svelte:fragment slot="cell-editor">
-                                <EditCellRow
-                                    column={rowColumn}
-                                    bind:row={$rows.rows[item.index]}
-                                    onRowStructureUpdate={updateRowContents} />
-                            </svelte:fragment>
-                        </Spreadsheet.Cell>
-                    {/each}
-                </Spreadsheet.Row.Base>
+
+                                <svelte:fragment slot="cell-editor">
+                                    <!-- TODO: cannot bind here as well, this is breaking -->
+                                    <EditCellRow
+                                        column={rowColumn}
+                                        row={$paginatedRows.items[index]}
+                                        onRowStructureUpdate={updateRowContents} />
+                                </svelte:fragment>
+                            </Spreadsheet.Cell>
+                        {/each}
+                    </Spreadsheet.Row.Base>
+                {/if}
             </svelte:fragment>
 
             <svelte:fragment slot="footer">
@@ -752,11 +863,48 @@
                     alignContent="center"
                     alignItems="center"
                     justifyContent="space-between">
-                    <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
-                        {selectedRows.length
-                            ? `${selectedRows.length} row${selectedRows.length === 1 ? '' : 's'} selected`
-                            : `${$rows.total} row${$rows.total === 1 ? '' : 's'}`}
-                    </Typography.Text>
+                    <Layout.Stack
+                        gap="l"
+                        direction="row"
+                        alignItems="center"
+                        alignContent="center"
+                        inline>
+                        <Typography.Text variant="m-400" color="--fgcolor-neutral-secondary">
+                            <span style:white-space="nowrap">
+                                {selectedRows.length
+                                    ? `${selectedRows.length} row${selectedRows.length === 1 ? '' : 's'} selected`
+                                    : `${$rows.total} row${$rows.total === 1 ? '' : 's'}`}
+                            </span>
+                        </Typography.Text>
+
+                        <div
+                            style:height="20px"
+                            style:width="1px"
+                            style:background-color="var(--border-neutral)">
+                        </div>
+
+                        <Layout.Stack
+                            gap="xs"
+                            direction="row"
+                            alignItems="center"
+                            alignContent="center">
+                            <span style:white-space="nowrap"> Page </span>
+
+                            <InputSelect
+                                id="pagination"
+                                value={currentPage}
+                                placeholder="Page"
+                                options={Array.from({ length: totalPages }, (_, i) => ({
+                                    label: `${i + 1}`,
+                                    value: i + 1
+                                }))}
+                                on:change={(e) => (jumpToPageReactive = Number(e.detail))} />
+
+                            <span style:white-space="nowrap">
+                                out of {totalPages}
+                            </span>
+                        </Layout.Stack>
+                    </Layout.Stack>
 
                     <div style:margin-right="var(--space-6)">
                         <Button.Button
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 18b2df3c31..64babf9c43 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -3,6 +3,8 @@ import type { Column } from '$lib/helpers/types';
 import type { Models } from '@appwrite.io/console';
 import { derived, writable } from 'svelte/store';
 import type { SortDirection } from '$lib/components';
+import { SPREADSHEET_PAGE_LIMIT } from '$lib/constants';
+import { createSparsePagedDataStore } from '@appwrite.io/pink-svelte';
 
 export type Columns =
     | Models.ColumnBoolean
@@ -150,3 +152,7 @@ export const rowActivitySheet = writable({
 });
 
 export const expandTabs = writable(true);
+
+// Paginated rows stores
+export const paginatedRowsLoading = writable(false);
+export const paginatedRows = createSparsePagedDataStore<Models.DefaultRow>(SPREADSHEET_PAGE_LIMIT);

From f82bfecda24fa60c101bab9f3ab519a5c6a695d6 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Mon, 11 Aug 2025 22:13:00 +0530
Subject: [PATCH 108/118] fix: Index Creation Sidebar Closes on Validation
 Errors

---
 .../table-[table]/indexes/createIndex.svelte  | 30 ++++++++++++-------
 .../table-[table]/layout/sidesheet.svelte     |  8 +++--
 2 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
index a3b3a48b71..7eeb585880 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
@@ -14,19 +14,24 @@
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
 
-    export let showCreateIndex = false;
-    export let externalColumnKey: string = null;
+    let {
+        showCreateIndex = $bindable(false),
+        externalColumnKey = null
+    }: {
+        showCreateIndex: boolean;
+        externalColumnKey?: string;
+    } = $props();
 
     const databaseId = page.params.database;
 
-    let key = '';
+    let key = $state('');
     let types = [
         { value: IndexType.Key, label: 'Key' },
         { value: IndexType.Unique, label: 'Unique' },
         { value: IndexType.Fulltext, label: 'Fulltext' }
     ];
 
-    let selectedType = IndexType.Key;
+    let selectedType = $state(IndexType.Key);
 
     let columnOptions = $table.columns
         .filter((column) => !isRelationship(column))
@@ -35,7 +40,7 @@
             label: column.key
         }));
 
-    let columnList = [{ value: '', order: '', length: null }];
+    let columnList = $state([{ value: '', order: '', length: null }]);
 
     function generateIndexKey() {
         let indexKeys = $indexes.map((index) => index.key);
@@ -56,12 +61,14 @@
         key = `index_${$indexes.length + 1}`;
     }
 
-    $: if (showCreateIndex) {
-        initialize();
-        key = generateIndexKey();
-    }
+    const addColumnDisabled = $derived(!columnList.at(-1)?.value || !columnList.at(-1)?.order);
 
-    $: addColumnDisabled = !columnList.at(-1)?.value || !columnList.at(-1)?.order;
+    $effect(() => {
+        if (showCreateIndex) {
+            initialize();
+            key = generateIndexKey();
+        }
+    });
 
     export async function create() {
         if (!(key && selectedType && !addColumnDisabled)) {
@@ -69,7 +76,7 @@
                 type: 'error',
                 message: 'Selected column key or type invalid'
             });
-            return;
+            throw new Error('Selected column key or type invalid');
         }
 
         try {
@@ -106,6 +113,7 @@
                 message: err.message
             });
             trackError(err, Submit.IndexCreate);
+            throw err;
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
index ad9e50e91e..1a3629e4dc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
@@ -39,8 +39,12 @@
         <Layout.Stack direction="column" justifyContent="space-evenly">
             <Form
                 onSubmit={async () => {
-                    await submit?.onClick();
-                    show = false;
+                    try {
+                        await submit?.onClick();
+                        show = false;
+                    } catch (error) {
+                        // error occurred, dont close the sidebar
+                    }
                 }}>
                 <Layout.Stack gap="xl" class="sheet-content">
                     {@render children?.()}

From 4b65e7ee115b616eb2aa15a3202c70e82145f540 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 12 Aug 2025 14:40:21 +0530
Subject: [PATCH 109/118] fix : replaced wrong names

---
 .../databases/database-[database]/table-[table]/+layout.svelte  | 2 +-
 .../databases/database-[database]/table-[table]/+page.svelte    | 1 +
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 43bcf1e259..2ae4ecb0b9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -298,7 +298,7 @@
     title={$showCreateAttributeSheet.title}
     bind:show={$showCreateAttributeSheet.show}
     submit={{
-        text: 'Insert',
+        text: 'Create',
         onClick: async () => {
             await createColumn?.submit();
         },
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 bf12a21201..0da2ab5216 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
@@ -192,6 +192,7 @@
                     showActions={$canWriteRows}
                     actions={{
                         primary: {
+                            text: 'Create row',
                             onClick: () => {
                                 $showRecordsCreateSheet.show = true;
                             }

From 2163f460983ba4ffb6eec17871a9586983fc9371 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 12 Aug 2025 15:31:24 +0530
Subject: [PATCH 110/118] updates.

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +-
 src/lib/components/columnSelector.svelte      |  2 +-
 src/lib/components/sortButton.svelte          |  2 +-
 src/lib/helpers/faker.ts                      | 57 +++++++-----
 src/lib/layout/footer.svelte                  |  4 +-
 src/lib/stores/preferences.ts                 | 26 ++----
 .../table-[table]/+layout.svelte              | 20 +++-
 .../table-[table]/+page.svelte                | 11 +--
 .../table-[table]/createRecord.svelte         | 32 +++++--
 .../table-[table]/editRowCell.svelte          | 12 ++-
 .../table-[table]/layout/emptySheet.svelte    |  9 +-
 .../table-[table]/layout/sidesheet.svelte     |  2 +-
 .../table-[table]/settings/displayName.svelte |  3 +-
 .../table-[table]/spreadsheet.svelte          | 91 ++++++++++++-------
 .../table-[table]/store.ts                    |  2 +-
 16 files changed, 175 insertions(+), 110 deletions(-)

diff --git a/package.json b/package.json
index e2eb70e85d..02e7bcd071 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9dd7301b21..df497cd938 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -287,8 +287,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3831,7 +3831,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@b023951(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 0bf5bc6aa7..703de3a8b3 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -33,7 +33,7 @@
     let search = $state('');
     let filteredColumns = $derived(
         $columns
-            .filter((column) => !column.isAction)
+            .filter((column) => !column.isAction && column.id !== '$sequence')
             .filter(
                 (col) =>
                     !col.exclude &&
diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
index b574c611fd..be3692e49d 100644
--- a/src/lib/components/sortButton.svelte
+++ b/src/lib/components/sortButton.svelte
@@ -47,7 +47,7 @@
     }
 </script>
 
-<Button extraCompact on:click={sort} class="hoverable-compact" {disabled}>
+<Button extraCompact on:click={sort} class="hoverable-compact {$state?.direction}" {disabled}>
     <Icon
         size="s"
         icon={$state?.column !== column || $state?.direction === 'default'
diff --git a/src/lib/helpers/faker.ts b/src/lib/helpers/faker.ts
index 64de355f89..d6ae644a01 100644
--- a/src/lib/helpers/faker.ts
+++ b/src/lib/helpers/faker.ts
@@ -1,6 +1,6 @@
 import { faker } from '@faker-js/faker';
 import type { Columns } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store';
-import type { Models } from '@appwrite.io/console';
+import { ID, type Models } from '@appwrite.io/console';
 import { sdk } from '$lib/stores/sdk';
 
 export async function generateColumns(
@@ -20,31 +20,46 @@ export async function generateColumns(
     ]);
 }
 
-export function generateFakeRecords(columns: Columns[], count: number): object[] {
-    if (count <= 0) return [];
+export function generateFakeRecords(
+    columns: Columns[],
+    count: number
+): {
+    ids: string[];
+    rows: Models.Row[];
+} {
+    if (count <= 0) return { ids: [], rows: [] };
 
     const filteredColumns = columns.filter((col) => col.type !== 'relationship');
 
-    if (filteredColumns.length === 0) {
-        return Array.from({ length: count }, () => ({
-            name: faker.person.fullName(),
-            email: faker.internet.email(),
-            age: faker.number.int({ min: 18, max: 80 }),
-            city: faker.location.city(),
-            description: faker.lorem.sentence(),
-            active: faker.datatype.boolean()
-        }));
-    }
-
-    return Array.from({ length: count }, () => {
-        const document: object = {};
-
-        for (const column of filteredColumns) {
-            document[column.key] = generateValueForColumn(column);
+    const ids: string[] = [];
+    const rows: Models.Row[] = [];
+
+    for (let i = 0; i < count; i++) {
+        const id = ID.unique();
+        ids.push(id);
+
+        let row: Record<string, string | number | boolean> = { $id: id };
+
+        if (filteredColumns.length === 0) {
+            row = {
+                $id: id,
+                name: faker.person.fullName(),
+                email: faker.internet.email(),
+                age: faker.number.int({ min: 18, max: 80 }),
+                city: faker.location.city(),
+                description: faker.lorem.sentence(),
+                active: faker.datatype.boolean()
+            };
+        } else {
+            for (const column of filteredColumns) {
+                row[column.key] = generateValueForColumn(column);
+            }
         }
 
-        return document;
-    });
+        rows.push(row as unknown as Models.Row);
+    }
+
+    return { ids, rows };
 }
 
 function generateStringValue(key: string, maxLength: number): string {
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index ac4fd30523..5c4016c534 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -30,7 +30,9 @@
             inline={$isTabletViewport}
             justifyContent="flex-start">
             <Typography.Caption variant="400">
-                ⓒ {currentYear} Appwrite. All rights reserved.
+                <span style:white-space="nowrap">
+                    ⓒ {currentYear} Appwrite. All rights reserved.
+                </span>
             </Typography.Caption>
             <span class="divider-wrapper">
                 <Divider vertical />
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 47e4b58ced..238aa9307c 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -3,7 +3,6 @@ import type { View } from '$lib/helpers/load';
 import type { Page } from '@sveltejs/kit';
 import { get, writable } from 'svelte/store';
 import { sdk } from './sdk';
-import type { Models } from '@appwrite.io/console';
 import { page } from '$app/state';
 import { user } from '$lib/stores/user';
 import deepEqual from 'deep-equal';
@@ -88,7 +87,7 @@ function createPreferences() {
 
     async function loadTeamPreferences(orgId: string) {
         try {
-            const teamPrefs = await sdk.forConsole.teams.getPrefs(orgId);
+            const teamPrefs = await sdk.forConsole.teams.getPrefs({ teamId: orgId });
             teamPreferences = teamPrefs ?? {};
             return teamPreferences;
         } catch (error) {
@@ -189,25 +188,16 @@ function createPreferences() {
         getDisplayNames: () => {
             return preferences?.displayNames ?? {};
         },
-        setDisplayNames: async (
-            orgId: string,
-            tableId: string,
-            names: TeamPreferences['names']
-        ) => {
-            let teamPrefs: Models.Preferences;
+        setDisplayNames: async (tableId: string, names: TeamPreferences['names']) => {
             await updateAndSync((n) => {
                 if (!n?.displayNames) {
                     n ??= {};
                     n.displayNames ??= {};
                 }
 
-                teamPrefs = n;
                 n.displayNames[tableId] = names;
-
                 return n;
             });
-
-            await sdk.forConsole.teams.updatePrefs(orgId, teamPrefs);
         },
 
         getColumnOrder(collectionId: string): TeamPreferences['order'] {
@@ -225,7 +215,10 @@ function createPreferences() {
 
             teamPreferences.columnOrder[collectionId] = columnIds;
 
-            await sdk.forConsole.teams.updatePrefs(orgId, teamPreferences);
+            await sdk.forConsole.teams.updatePrefs({
+                teamId: orgId,
+                prefs: teamPreferences
+            });
         },
 
         getColumnWidths(collectionId: string): TeamPreferences['widths'] {
@@ -246,11 +239,12 @@ function createPreferences() {
                 ...width
             };
 
-            await sdk.forConsole.teams.updatePrefs(orgId, teamPreferences);
+            await sdk.forConsole.teams.updatePrefs({
+                teamId: orgId,
+                prefs: teamPreferences
+            });
         }
     };
 }
 
 export const preferences = createPreferences();
-
-export type PreferencesType = ReturnType<typeof createPreferences>;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 43bcf1e259..68bf51bb22 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -31,7 +31,8 @@
         showCreateAttributeSheet,
         showCreateIndexSheet,
         spreadsheetLoading,
-        rowActivitySheet
+        rowActivitySheet,
+        spreadsheetRenderKey
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateColumn from './createColumn.svelte';
@@ -52,6 +53,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { sleep } from '$lib/helpers/promises';
     import CreateIndex from './indexes/createIndex.svelte';
+    import { hash } from '$lib/helpers/string';
 
     let editRow: EditRow;
     let createIndex: CreateIndex;
@@ -258,11 +260,17 @@
         /* let the attributes be processed! */
         await sleep(1250);
 
+        let rowIds = [];
         try {
-            const records = generateFakeRecords(attributes, $randomDataModalState.value);
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .grids.createRows(page.params.database, page.params.table, records);
+            const { rows, ids } = generateFakeRecords(attributes, $randomDataModalState.value);
+
+            rowIds = ids;
+
+            await sdk.forProject(page.params.region, page.params.project).grids.createRows({
+                databaseId: page.params.database,
+                tableId: page.params.table,
+                rows
+            });
 
             addNotification({
                 type: 'success',
@@ -284,6 +292,8 @@
         // await sleep(1250);
         $spreadsheetLoading = false;
         isWaterfallFromFaker = false;
+
+        spreadsheetRenderKey.set(hash(rowIds));
     }
 </script>
 
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 bf12a21201..09dcbe8c85 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
@@ -69,11 +69,11 @@
         try {
             await sdk
                 .forProject(page.params.region, page.params.project)
-                .migrations.createCsvMigration(
-                    file.bucketId,
-                    file.$id,
-                    `${page.params.database}:${page.params.table}`
-                );
+                .migrations.createCsvMigration({
+                    bucketId: file.bucketId,
+                    fileId: file.$id,
+                    resourceId: `${page.params.database}:${page.params.table}`
+                });
 
             addNotification({
                 type: 'success',
@@ -99,7 +99,6 @@
     <Container expanded expandHeightButton style="background: var(--bgcolor-neutral-primary)">
         <Layout.Stack direction="column" gap="xl">
             <Layout.Stack direction="row" justifyContent="space-between">
-                <!-- TODO: verify later - columns={tableColumns} -->
                 <Layout.Stack direction="row" gap="s">
                     <ViewSelector
                         onlyIcon
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
index 9817c32072..53cf2f8949 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createRecord.svelte
@@ -25,6 +25,7 @@
     } = $props();
 
     let isSubmitting = $state(false);
+    let columnFormWrapper: HTMLDivElement | null = $state(null);
 
     type CreateRow = {
         id?: string;
@@ -52,12 +53,6 @@
 
     let createRow = createRowWritable();
 
-    $effect(() => {
-        if (showSheet) {
-            createRow = createRowWritable();
-        }
-    });
-
     async function create() {
         isSubmitting = true;
 
@@ -92,6 +87,21 @@
             isSubmitting = false;
         }
     }
+
+    function focusFirstInput() {
+        const firstInput = columnFormWrapper?.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+            'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
+        );
+
+        firstInput?.focus({ preventScroll: true });
+    }
+
+    $effect(() => {
+        if (showSheet) {
+            focusFirstInput();
+            createRow = createRowWritable();
+        }
+    });
 </script>
 
 {#if $createRow}
@@ -108,10 +118,12 @@
                 onClick: () => create()
             }}>
             <Layout.Stack gap="xxl">
-                <ColumnForm
-                    columns={$createRow.columns}
-                    bind:customId={$createRow.id}
-                    bind:formValues={$createRow.row} />
+                <div bind:this={columnFormWrapper}>
+                    <ColumnForm
+                        columns={$createRow.columns}
+                        bind:customId={$createRow.id}
+                        bind:formValues={$createRow.row} />
+                </div>
 
                 <Layout.Stack gap="xl">
                     <Typography.Text>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
index 4648956a43..6238b4ea01 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRowCell.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-    import { onDestroy, onMount } from 'svelte';
+    import deepEqual from 'deep-equal';
     import type { Columns } from './store';
     import type { Models } from '@appwrite.io/console';
     import ColumnItem from './row-[row]/columnItem.svelte';
-    import deepEqual from 'deep-equal';
+    import { createEventDispatcher, onDestroy, onMount } from 'svelte';
 
     let {
         column,
@@ -17,6 +17,7 @@
 
     let original: Models.Row;
     let wrapperEl: HTMLDivElement;
+    const dispatch = createEventDispatcher();
 
     onMount(() => {
         original = structuredClone(row);
@@ -37,9 +38,16 @@
             const accepted = await onRowStructureUpdate(row);
             if (!accepted) {
                 row = original;
+                dispatch('revert', original);
             }
         }
     });
+
+    $effect(() => {
+        if (!deepEqual(original, row)) {
+            dispatch('change', row);
+        }
+    });
 </script>
 
 <div style:width="100%" bind:this={wrapperEl}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 645245226d..9c5acdde22 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -54,9 +54,10 @@
 
     const getCustomColumns = (): Column[] =>
         customColumns.map((col: Column) => ({
-            ...baseColProps,
+            ...col,
             width: 180,
-            ...col
+            hide: false,
+            ...baseColProps
         }));
 
     const getRowColumns = (): Column[] => [
@@ -128,6 +129,10 @@
 
     const emptyCells = $derived($isSmallViewport ? 14 : 17);
     const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
+
+    $effect(() => {
+        console.log(JSON.stringify(spreadsheetColumns, null, 2));
+    });
 </script>
 
 <div class="spreadsheet-container-outer" data-mode={mode}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
index 1a3629e4dc..243c965e3c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
@@ -85,7 +85,7 @@
         }
 
         & :global(.sheet-content) {
-            overflow-y: auto;
+            // overflow-y: auto;
             padding-bottom: 5rem;
         }
     }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte
index ce22763a8b..931f48570e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/displayName.svelte
@@ -12,7 +12,6 @@
     import { page } from '$app/state';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
-    import { organization } from '$lib/stores/organization';
 
     const tableId = page.params.table;
 
@@ -30,7 +29,7 @@
             // structuredClone doesn't work
             const regularArray = [...names];
 
-            await preferences.setDisplayNames($organization.$id, tableId, regularArray);
+            await preferences.setDisplayNames(tableId, regularArray);
             names = getDisplayNames();
 
             await invalidate(Dependencies.TEAM);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index a21c7fb679..8a0e3dc934 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -31,7 +31,8 @@
         Deletion,
         rowActivitySheet,
         paginatedRows,
-        paginatedRowsLoading
+        paginatedRowsLoading,
+        spreadsheetRenderKey
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -53,28 +54,27 @@
     import {
         IconCalendar,
         IconDotsHorizontal,
-        IconPlus,
-        IconRelationship,
         IconFingerPrint,
         IconHashtag,
         IconLink,
         IconLocationMarker,
         IconMail,
+        IconPlus,
+        IconRelationship,
         IconText,
         IconToggle,
         IconViewList
     } from '@appwrite.io/pink-icons-svelte';
+    import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
     import SheetOptions from './sheetOptions.svelte';
     import { isSmallViewport } from '$lib/stores/viewport';
     import SpreadsheetContainer from './layout/spreadsheet.svelte';
-    import EditCellRow from './editRowCell.svelte';
-    import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
+    import EditRowCell from './editRowCell.svelte';
     import { copy } from '$lib/helpers/copy';
-    import { debounce } from '$lib/helpers/debounce';
-    import { hash } from '$lib/helpers/string';
     import { writable } from 'svelte/store';
     import { pageToOffset } from '$lib/helpers/load';
-    import { sleep } from '$lib/helpers/promises';
+    import { debounce } from '$lib/helpers/debounce';
+    import { hash } from '$lib/helpers/string';
 
     export let data: PageData;
     export let showRecordsCreateSheet: {
@@ -376,6 +376,14 @@
                 type: 'success',
                 message: `${selectedRows.length ? selectedRows.length : 1} row${selectedRows.length > 1 ? 's' : ''} deleted`
             });
+
+            spreadsheetRenderKey.set(
+                hash([
+                    data.rows.total.toString(),
+                    ...(selectedRows as string[]),
+                    selectedRowForDelete
+                ])
+            );
         } catch (error) {
             addNotification({ type: 'error', message: error.message });
             trackError(error, Submit.RowDelete);
@@ -533,19 +541,11 @@
     }
 
     async function loadPage(pageNumber: number): Promise<boolean> {
-        const totalPages = Math.ceil(data.rows.total / SPREADSHEET_PAGE_LIMIT);
-        if (
-            pageNumber < 1 ||
-            pageNumber === currentPage ||
-            paginatedRows.hasPage(pageNumber) ||
-            pageNumber > totalPages
-        )
+        if (pageNumber < 1 || pageNumber > totalPages || $paginatedRows.hasPage(pageNumber)) {
             return false;
-
-        console.log(`pageNumber: ${pageNumber}`);
+        }
 
         $paginatedRowsLoading = true;
-        await sleep(500);
         const loadedRows = await sdk
             .forProject(page.params.region, page.params.project)
             .grids.listRows({
@@ -564,12 +564,16 @@
         return true;
     }
 
-    console.log(`$paginatedRowsLoading: ${$paginatedRowsLoading}`);
-
     async function handleGoToPage(targetPageNum: number): Promise<void> {
+        if ($paginatedRows.hasPage(targetPageNum) || $paginatedRows.hasPage(targetPageNum + 1)) {
+            scrollToIndexOffset = 0;
+        } else {
+            scrollToIndexOffset = 16;
+        }
+
         if (targetPageNum < 1 || targetPageNum > totalPages) return;
 
-        if (!paginatedRows.hasPage(targetPageNum)) {
+        if (!$paginatedRows.hasPage(targetPageNum)) {
             paginatedRows.setMaxPage(targetPageNum);
             $paginatedRowsLoading = true;
 
@@ -635,19 +639,22 @@
         tick().then(() => spreadsheetContainer?.resizeSheet());
     }
 
-    $: spreadsheetKey = hash($paginatedRows.items.map((item) => item.$id).toString(), '#');
-
     $: totalPages = Math.ceil($rows.total / SPREADSHEET_PAGE_LIMIT) || 1;
+
+    $: rowSelection = !$spreadsheetLoading && !$paginatedRowsLoading ? true : ('disabled' as const);
+
+    $: scrollToIndexOffset = 16;
 </script>
 
 <SpreadsheetContainer observeExpand bind:this={spreadsheetContainer}>
-    {#key spreadsheetKey}
+    {#key $spreadsheetRenderKey}
         <Spreadsheet.Root
             height="100%"
             allowSelection
             useVirtualizer
             keyboardNavigation
             bind:selectedRows
+            selection={rowSelection}
             bind:columns={$tableColumns}
             loading={$spreadsheetLoading}
             emptyCells={emptyCellsCount}
@@ -656,6 +663,7 @@
             on:columnsSwap={(order) => saveColumnsOrder(order.detail)}
             on:columnsResize={(resize) => saveColumnsWidth(resize.detail)}
             bind:currentPage
+            {scrollToIndexOffset}
             nextPageTriggerOffset={2}
             paginationBufferSpace={35}
             jumpToPageNumber={jumpToPageReactive}
@@ -716,17 +724,27 @@
             <svelte:fragment slot="rows" let:root let:item let:index>
                 {@const row = $paginatedRows.getItemAtVirtualIndex(index)}
                 {#if row === null}
-                    <Spreadsheet.Row.Base {root} virtualItem={item} {index} id={`loading-${index}`}>
+                    <Spreadsheet.Row.Base
+                        {root}
+                        virtualItem={item}
+                        {index}
+                        id={`loading-${index}`}
+                        select={rowSelection}>
                         {#each $tableColumns as col}
                             <Spreadsheet.Cell
-                                column={col.id}
-                                isEditable={false}
                                 root={{ ...root, loading: true }}
-                                id={`loading-${index}-${col.id}`} />
+                                column={col.id}
+                                id={`loading-${index}-${col.id}`}
+                                isEditable={false} />
                         {/each}
                     </Spreadsheet.Row.Base>
                 {:else}
-                    <Spreadsheet.Row.Base {root} {index} id={row?.$id} virtualItem={item}>
+                    <Spreadsheet.Row.Base
+                        {root}
+                        {index}
+                        id={row?.$id}
+                        virtualItem={item}
+                        select={rowSelection}>
                         {#each $tableColumns as { id: columnId, isEditable } (columnId)}
                             {@const rowColumn = $columns.find((col) => col.key === columnId)}
                             <Spreadsheet.Cell {root} {isEditable} column={columnId}>
@@ -845,11 +863,14 @@
                                 {/if}
 
                                 <svelte:fragment slot="cell-editor">
-                                    <!-- TODO: cannot bind here as well, this is breaking -->
-                                    <EditCellRow
+                                    <EditRowCell
                                         column={rowColumn}
-                                        row={$paginatedRows.items[index]}
-                                        onRowStructureUpdate={updateRowContents} />
+                                        row={paginatedRows.items[index]}
+                                        onRowStructureUpdate={updateRowContents}
+                                        on:change={(row) =>
+                                            paginatedRows.update(index, row.detail)}
+                                        on:revert={(row) =>
+                                            paginatedRows.update(index, row.detail)} />
                                 </svelte:fragment>
                             </Spreadsheet.Cell>
                         {/each}
@@ -945,9 +966,9 @@
 <RelationshipsModal bind:show={showRelationships} {selectedRelationship} data={relationshipData} />
 
 <Confirm
-    title={selectedRows.length === 1 ? 'Delete Row' : 'Delete Rows'}
     bind:open={showDelete}
-    onSubmit={handleDelete}>
+    onSubmit={handleDelete}
+    title={selectedRows.length === 1 ? 'Delete Row' : 'Delete Rows'}>
     {@const isSingle = selectedRowForDelete !== null}
 
     <div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
index 64babf9c43..f36d40a004 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/store.ts
@@ -152,7 +152,7 @@ export const rowActivitySheet = writable({
 });
 
 export const expandTabs = writable(true);
+export const spreadsheetRenderKey = writable('initial');
 
-// Paginated rows stores
 export const paginatedRowsLoading = writable(false);
 export const paginatedRows = createSparsePagedDataStore<Models.DefaultRow>(SPREADSHEET_PAGE_LIMIT);

From 07fc735a9edb828d8cf676aa47acf40985d5c819 Mon Sep 17 00:00:00 2001
From: Harsh Mahajan <127186841+HarshMN2345@users.noreply.github.com>
Date: Tue, 12 Aug 2025 16:02:59 +0530
Subject: [PATCH 111/118] Update +page.svelte

---
 .../databases/database-[database]/table-[table]/+page.svelte    | 2 +-
 1 file changed, 1 insertion(+), 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 0da2ab5216..db2f922046 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
@@ -192,7 +192,7 @@
                     showActions={$canWriteRows}
                     actions={{
                         primary: {
-                            text: 'Create row',
+                            text: 'Create rows',
                             onClick: () => {
                                 $showRecordsCreateSheet.show = true;
                             }

From 57612be9a3dfe9277f22d373f131cb5019e0e16d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 12 Aug 2025 19:30:30 +0530
Subject: [PATCH 112/118] updates: removed `$sequence`. fixed: order query for
 next/previous page.

---
 src/lib/components/columnSelector.svelte      |  9 +--
 src/lib/stores/preferences.ts                 | 22 ++++++
 .../table-[table]/columns/+page.svelte        | 12 ---
 .../table-[table]/layout/emptySheet.svelte    |  4 -
 .../table-[table]/settings/deleteTable.svelte | 20 ++++-
 .../table-[table]/spreadsheet.svelte          | 79 +++++++++++++------
 6 files changed, 93 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index 703de3a8b3..dbe2a9c0ca 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -4,14 +4,7 @@
     import { preferences } from '$lib/stores/preferences';
     import { onMount, type Snippet } from 'svelte';
     import type { Column } from '$lib/helpers/types';
-    import {
-        ActionMenu,
-        Badge,
-        Divider,
-        Layout,
-        Popover,
-        Selector
-    } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Divider, Layout, Popover, Selector } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
 
     let {
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 238aa9307c..9d07fa0f64 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -184,6 +184,17 @@ function createPreferences() {
                 // n.collections[tableId] = Array.from(new Set(columns));
                 return n;
             }),
+        deleteCustomTableColumns: async (tableId: string) => {
+            await updateAndSync((n) => {
+                if (!n?.tables) {
+                    n ??= {};
+                    n.tables ??= {};
+                }
+
+                delete n.tables[tableId];
+                return n;
+            });
+        },
         loadTeamPrefs: loadTeamPreferences,
         getDisplayNames: () => {
             return preferences?.displayNames ?? {};
@@ -199,6 +210,17 @@ function createPreferences() {
                 return n;
             });
         },
+        deleteDisplayNames: async (tableId: string) => {
+            await updateAndSync((n) => {
+                if (!n?.displayNames) {
+                    n ??= {};
+                    n.displayNames ??= {};
+                }
+
+                delete n.displayNames[tableId];
+                return n;
+            });
+        },
 
         getColumnOrder(collectionId: string): TeamPreferences['order'] {
             return teamPreferences?.columnOrder?.[collectionId] ?? [];
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 7efd0b5464..93b9983b3f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -53,18 +53,6 @@
 
     const updatedColumnsForSheet = $derived.by(() => {
         const baseAttrs = [
-            {
-                key: '$sequence',
-                type: 'integer',
-                required: true,
-                name: 'Sequence',
-                selectable: false,
-                system: true
-            } as Models.AttributeString & {
-                name: string;
-                selectable: boolean;
-                system: boolean;
-            },
             {
                 key: '$id',
                 type: 'string',
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index 9c5acdde22..ffe5841096 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -129,10 +129,6 @@
 
     const emptyCells = $derived($isSmallViewport ? 14 : 17);
     const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
-
-    $effect(() => {
-        console.log(JSON.stringify(spreadsheetColumns, null, 2));
-    });
 </script>
 
 <div class="spreadsheet-container-outer" data-mode={mode}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte
index c51e097fcd..543225e2d2 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/deleteTable.svelte
@@ -9,17 +9,29 @@
     import { sdk } from '$lib/stores/sdk';
     import { Typography } from '@appwrite.io/pink-svelte';
     import { table } from '../store';
+    import { preferences } from '$lib/stores/preferences';
 
     export let showDelete = false;
 
-    const databaseId = page.params.database;
     let error: string;
+    const tableId = page.params.table;
+    const databaseId = page.params.database;
+
+    async function clearPreferences() {
+        await Promise.all([
+            preferences.deleteDisplayNames(tableId),
+            preferences.deleteCustomTableColumns(tableId)
+        ]);
+    }
 
     async function handleDelete() {
         try {
-            await sdk
-                .forProject(page.params.region, page.params.project)
-                .grids.deleteTable(databaseId, $table.$id);
+            await sdk.forProject(page.params.region, page.params.project).grids.deleteTable({
+                databaseId,
+                tableId
+            });
+
+            await clearPreferences();
             await invalidate(Dependencies.DATABASE);
             showDelete = false;
             addNotification({
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 8a0e3dc934..67c25486ba 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -148,18 +148,6 @@
         }));
 
         const staticColumns: Column[] = [
-            {
-                id: '$sequence',
-                title: 'Sequence',
-                width: 150,
-                minimumWidth: 150,
-                draggable: false,
-                type: 'integer',
-                icon: IconHashtag,
-                isEditable: false,
-                isPrimary: true,
-                resizable: false
-            },
             {
                 id: '$id',
                 title: 'ID',
@@ -169,7 +157,8 @@
                 type: 'string',
                 icon: IconFingerPrint,
                 isEditable: false,
-                isPrimary: false
+                isPrimary: false,
+                hide: !!selected?.includes('$id')
             },
             {
                 id: '$createdAt',
@@ -179,7 +168,8 @@
                 draggable: true,
                 type: 'datetime',
                 icon: IconCalendar,
-                isEditable: false
+                isEditable: false,
+                hide: !!selected?.includes('$createdAt')
             },
             {
                 id: '$updatedAt',
@@ -189,7 +179,8 @@
                 draggable: true,
                 type: 'datetime',
                 icon: IconCalendar,
-                isEditable: false
+                isEditable: false,
+                hide: !!selected?.includes('$updatedAt')
             },
             {
                 id: 'actions',
@@ -203,15 +194,32 @@
             }
         ];
 
+        const groupedColumns: Column[] = [
+            staticColumns[0],
+            ...baseColumns,
+            staticColumns[1],
+            staticColumns[2],
+            staticColumns[3]
+        ];
+
+        const visibleNonAction = groupedColumns.filter((c) => !c.hide && !c.isAction);
+        if (visibleNonAction.length === 1) {
+            const only = visibleNonAction[0];
+            if (typeof only.width === 'number') {
+                only.width = {
+                    min: only.width
+                };
+            }
+        }
+
         tableColumns.set(
             reorderItems(
                 [
                     staticColumns[0],
-                    staticColumns[1],
                     ...baseColumns,
+                    staticColumns[1],
                     staticColumns[2],
-                    staticColumns[3],
-                    staticColumns[4]
+                    staticColumns[3]
                 ],
                 $columnsOrder
             )
@@ -334,9 +342,14 @@
             );
         }
 
+        // trigger ui update with randomized key!
+        spreadsheetRenderKey.set(`sorted#${Date.now()}`);
+
+        // save > navigate > restore!
         spreadsheetContainer.saveGridSheetScroll();
         await goto(`${url.pathname}${url.search}`);
         spreadsheetContainer.restoreGridSheetScroll();
+
         $spreadsheetLoading = false;
     }
 
@@ -545,6 +558,21 @@
             return false;
         }
 
+        let order = Query.orderDesc('');
+        if ($sortState?.column && $sortState?.direction) {
+            switch ($sortState.direction) {
+                case 'asc':
+                    order = Query.orderAsc($sortState.column);
+                    break;
+                case 'desc':
+                    order = Query.orderDesc($sortState.column);
+                    break;
+                case 'default':
+                    order = Query.orderDesc('');
+                    break;
+            }
+        }
+
         $paginatedRowsLoading = true;
         const loadedRows = await sdk
             .forProject(page.params.region, page.params.project)
@@ -552,7 +580,7 @@
                 databaseId,
                 tableId,
                 queries: [
-                    Query.orderDesc(''),
+                    order,
                     Query.limit(SPREADSHEET_PAGE_LIMIT),
                     Query.offset(pageToOffset(pageNumber, SPREADSHEET_PAGE_LIMIT))
                 ]
@@ -748,10 +776,7 @@
                         {#each $tableColumns as { id: columnId, isEditable } (columnId)}
                             {@const rowColumn = $columns.find((col) => col.key === columnId)}
                             <Spreadsheet.Cell {root} {isEditable} column={columnId}>
-                                {#if columnId === '$sequence'}
-                                    <Id value={row.$sequence.toString()} tooltipPortal
-                                        >{row.$sequence}</Id>
-                                {:else if columnId === '$id'}
+                                {#if columnId === '$id'}
                                     <Id value={row.$id} tooltipPortal tooltipDelay={200}
                                         >{row.$id}</Id>
                                 {:else if columnId === '$createdAt' || columnId === '$updatedAt'}
@@ -867,8 +892,7 @@
                                         column={rowColumn}
                                         row={paginatedRows.items[index]}
                                         onRowStructureUpdate={updateRowContents}
-                                        on:change={(row) =>
-                                            paginatedRows.update(index, row.detail)}
+                                        on:change={(row) => paginatedRows.update(index, row.detail)}
                                         on:revert={(row) =>
                                             paginatedRows.update(index, row.detail)} />
                                 </svelte:fragment>
@@ -1072,6 +1096,11 @@
             min-height: 85px !important;
         }
 
+        /* TODO: not good! */
+        & :global(input) {
+            padding-inline: 8px !important;
+        }
+
         & :global(.input:focus-within) {
             top: 0 !important;
         }

From 89cf9b54c1ff59d6632eee1f1cf3c436f29516d2 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 12 Aug 2025 19:32:44 +0530
Subject: [PATCH 113/118] update: handle query on custom page as well.

---
 .../table-[table]/spreadsheet.svelte          | 27 +++++++------------
 1 file changed, 10 insertions(+), 17 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 67c25486ba..a2920de188 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -553,26 +553,19 @@
         }
     }
 
+    function getCorrectOrderQuery() {
+        return $sortState?.column && $sortState?.direction !== 'default'
+            ? $sortState.direction === 'asc'
+                ? Query.orderAsc($sortState.column)
+                : Query.orderDesc($sortState.column)
+            : Query.orderDesc('');
+    }
+
     async function loadPage(pageNumber: number): Promise<boolean> {
         if (pageNumber < 1 || pageNumber > totalPages || $paginatedRows.hasPage(pageNumber)) {
             return false;
         }
 
-        let order = Query.orderDesc('');
-        if ($sortState?.column && $sortState?.direction) {
-            switch ($sortState.direction) {
-                case 'asc':
-                    order = Query.orderAsc($sortState.column);
-                    break;
-                case 'desc':
-                    order = Query.orderDesc($sortState.column);
-                    break;
-                case 'default':
-                    order = Query.orderDesc('');
-                    break;
-            }
-        }
-
         $paginatedRowsLoading = true;
         const loadedRows = await sdk
             .forProject(page.params.region, page.params.project)
@@ -580,7 +573,7 @@
                 databaseId,
                 tableId,
                 queries: [
-                    order,
+                    getCorrectOrderQuery(),
                     Query.limit(SPREADSHEET_PAGE_LIMIT),
                     Query.offset(pageToOffset(pageNumber, SPREADSHEET_PAGE_LIMIT))
                 ]
@@ -611,7 +604,7 @@
                     databaseId,
                     tableId,
                     queries: [
-                        Query.orderDesc(''),
+                        getCorrectOrderQuery(),
                         Query.limit(SPREADSHEET_PAGE_LIMIT),
                         Query.offset(pageToOffset(targetPageNum, SPREADSHEET_PAGE_LIMIT))
                     ]

From fcfab0521df384fd97bcd3e4a10b6ddd0609c35b Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 13 Aug 2025 14:01:18 +0530
Subject: [PATCH 114/118] update: header expanded states on preferences.

---
 src/lib/stores/preferences.ts                 | 29 +++++++++++++++++++
 .../table-[table]/+layout.ts                  | 12 +++++---
 .../table-[table]/spreadsheet.svelte          | 14 ++++-----
 3 files changed, 42 insertions(+), 13 deletions(-)

diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index 9d07fa0f64..b33f0561c0 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -31,6 +31,9 @@ type ConsolePreferencesStore = {
     tables?: {
         [key: string]: ConsolePreferences['columns'];
     };
+    tableHeaderExpanded?: {
+        [key: string]: boolean;
+    };
     displayNames?: {
         [key: string]: TeamPreferences['names'];
     };
@@ -132,9 +135,11 @@ function createPreferences() {
                 }
             );
         },
+
         getCustomTableColumns: (tableId: string): ConsolePreferences['columns'] => {
             return preferences?.tables?.[tableId] ?? preferences?.collections?.[tableId] ?? [];
         },
+
         setLimit: (limit: ConsolePreferences['limit']) =>
             updateAndSync((n) => {
                 const path = page.route.id;
@@ -148,6 +153,7 @@ function createPreferences() {
 
                 return n;
             }),
+
         setView: (view: ConsolePreferences['view']) =>
             updateAndSync((n) => {
                 const path = page.route.id;
@@ -161,6 +167,7 @@ function createPreferences() {
 
                 return n;
             }),
+
         setColumns: (columns: ConsolePreferences['columns']) =>
             updateAndSync((n) => {
                 const path = page.route.id;
@@ -174,6 +181,7 @@ function createPreferences() {
 
                 return n;
             }),
+
         setCustomTableColumns: (tableId: string, columns: ConsolePreferences['columns']) =>
             updateAndSync((n) => {
                 n ??= {};
@@ -184,6 +192,7 @@ function createPreferences() {
                 // n.collections[tableId] = Array.from(new Set(columns));
                 return n;
             }),
+
         deleteCustomTableColumns: async (tableId: string) => {
             await updateAndSync((n) => {
                 if (!n?.tables) {
@@ -195,10 +204,13 @@ function createPreferences() {
                 return n;
             });
         },
+
         loadTeamPrefs: loadTeamPreferences,
+
         getDisplayNames: () => {
             return preferences?.displayNames ?? {};
         },
+
         setDisplayNames: async (tableId: string, names: TeamPreferences['names']) => {
             await updateAndSync((n) => {
                 if (!n?.displayNames) {
@@ -210,6 +222,7 @@ function createPreferences() {
                 return n;
             });
         },
+
         deleteDisplayNames: async (tableId: string) => {
             await updateAndSync((n) => {
                 if (!n?.displayNames) {
@@ -265,6 +278,22 @@ function createPreferences() {
                 teamId: orgId,
                 prefs: teamPreferences
             });
+        },
+
+        isTableHeaderExpanded(tableId: string): boolean {
+            return preferences.tableHeaderExpanded?.[tableId] ?? true
+        },
+
+        async setTableHeaderExpanded(tableId: string, expanded: boolean) {
+            await updateAndSync((n) => {
+                if (!n?.tableHeaderExpanded) {
+                    n ??= {};
+                    n.tableHeaderExpanded ??= {};
+                }
+
+                n.tableHeaderExpanded[tableId] = expanded;
+                return n;
+            });
         }
     };
 }
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts
index f8b8e626da..234c4797d5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.ts
@@ -9,11 +9,15 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.TABLE);
 
     const [table, tables] = await Promise.all([
-        sdk.forProject(params.region, params.project).grids.getTable(params.database, params.table),
+        sdk.forProject(params.region, params.project).grids.getTable({
+            databaseId: params.database,
+            tableId: params.table
+        }),
 
-        sdk
-            .forProject(params.region, params.project)
-            .grids.listTables(params.database, [Query.orderDesc(''), Query.limit(100)])
+        sdk.forProject(params.region, params.project).grids.listTables({
+            databaseId: params.database,
+            queries: [Query.orderDesc(''), Query.limit(100)]
+        })
     ]);
 
     return {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index a2920de188..af8a5d7814 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -32,7 +32,7 @@
         rowActivitySheet,
         paginatedRows,
         paginatedRowsLoading,
-        spreadsheetRenderKey
+        spreadsheetRenderKey, expandTabs
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -120,6 +120,7 @@
         displayNames = preferences.getDisplayNames();
         columnsOrder.set(preferences.getColumnOrder(tableId));
         columnsWidth.set(preferences.getColumnWidths(tableId));
+        expandTabs.set(preferences.isTableHeaderExpanded(tableId));
 
         makeTableColumns();
         sortState.set(data.currentSort as SortState);
@@ -586,12 +587,6 @@
     }
 
     async function handleGoToPage(targetPageNum: number): Promise<void> {
-        if ($paginatedRows.hasPage(targetPageNum) || $paginatedRows.hasPage(targetPageNum + 1)) {
-            scrollToIndexOffset = 0;
-        } else {
-            scrollToIndexOffset = 16;
-        }
-
         if (targetPageNum < 1 || targetPageNum > totalPages) return;
 
         if (!$paginatedRows.hasPage(targetPageNum)) {
@@ -664,7 +659,9 @@
 
     $: rowSelection = !$spreadsheetLoading && !$paginatedRowsLoading ? true : ('disabled' as const);
 
-    $: scrollToIndexOffset = 16;
+    expandTabs.subscribe((expanded) => {
+        preferences.setTableHeaderExpanded(tableId, expanded);
+    })
 </script>
 
 <SpreadsheetContainer observeExpand bind:this={spreadsheetContainer}>
@@ -684,7 +681,6 @@
             on:columnsSwap={(order) => saveColumnsOrder(order.detail)}
             on:columnsResize={(resize) => saveColumnsWidth(resize.detail)}
             bind:currentPage
-            {scrollToIndexOffset}
             nextPageTriggerOffset={2}
             paginationBufferSpace={35}
             jumpToPageNumber={jumpToPageReactive}

From 39a758fb10f433be37b96996081cbfc30f7fb3de Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 13 Aug 2025 20:04:03 +0530
Subject: [PATCH 115/118] qa: fixes, lesssgoooo!

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 10 +--
 src/lib/components/columnSelector.svelte      | 47 +++++++++-----
 src/lib/components/sortButton.svelte          | 14 +++-
 src/lib/components/viewSelector.svelte        |  2 +-
 src/lib/layout/animatedTitle.svelte           |  1 +
 src/lib/layout/container.svelte               |  1 -
 src/lib/stores/preferences.ts                 |  2 +-
 .../database-[database]/subNavigation.svelte  | 25 +++++++-
 .../table-[table]/+layout.svelte              | 14 +++-
 .../table-[table]/+page.svelte                |  4 +-
 .../table-[table]/columns/+page.svelte        | 20 +++++-
 .../table-[table]/columns/deleteColumn.svelte | 23 +++----
 .../table-[table]/createColumn.svelte         | 11 ++--
 .../table-[table]/editRow.svelte              | 27 ++++++--
 .../table-[table]/header.svelte               | 28 +++++---
 .../table-[table]/indexes/+page.svelte        |  8 ++-
 .../table-[table]/indexes/createIndex.svelte  | 49 ++++++++------
 .../table-[table]/rowActivity.svelte          | 64 ++++++-------------
 .../table-[table]/spreadsheet.svelte          | 26 ++++----
 20 files changed, 238 insertions(+), 140 deletions(-)

diff --git a/package.json b/package.json
index 02e7bcd071..846d64baaf 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index df497cd938..7bb1f7efc2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -24,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b(svelte@5.25.3)
       '@faker-js/faker':
         specifier: ^9.9.0
         version: 9.9.0
@@ -287,8 +287,8 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3831,7 +3831,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@c467db8(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0fed23b(svelte@5.25.3)':
     dependencies:
       '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
       '@floating-ui/dom': 1.6.13
diff --git a/src/lib/components/columnSelector.svelte b/src/lib/components/columnSelector.svelte
index dbe2a9c0ca..6092e1eea7 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -4,7 +4,14 @@
     import { preferences } from '$lib/stores/preferences';
     import { onMount, type Snippet } from 'svelte';
     import type { Column } from '$lib/helpers/types';
-    import { ActionMenu, Divider, Layout, Popover, Selector } from '@appwrite.io/pink-svelte';
+    import {
+        ActionMenu,
+        Divider,
+        Layout,
+        Popover,
+        Selector,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
 
     let {
@@ -87,7 +94,7 @@
 
     let selectedColumnsNumber = $derived(
         $columns.reduce((acc, column) => {
-            if (column.hide) return acc;
+            if (column.hide || column.isAction) return acc;
 
             return ++acc;
         }, 0)
@@ -187,21 +194,29 @@
                                 placeholder="Search"
                                 bind:value={search} />
 
-                            <Layout.Stack
-                                gap="s"
-                                direction="row"
-                                alignItems="center"
-                                style="padding-block-end: 0.5rem">
-                                <Button size="xs" icon extraCompact on:click={selectAll}
-                                    >Select all</Button>
-
-                                <div style:height="1rem">
-                                    <Divider vertical />
+                            {#if filteredColumns.length > 0}
+                                <Layout.Stack
+                                    gap="s"
+                                    direction="row"
+                                    alignItems="center"
+                                    style="padding-block-end: 0.5rem">
+                                    <Button size="xs" icon extraCompact on:click={selectAll}
+                                        >Select all</Button>
+
+                                    <div style:height="1rem">
+                                        <Divider vertical />
+                                    </div>
+
+                                    <Button size="xs" icon extraCompact on:click={deselectAll}
+                                        >Deselect all</Button>
+                                </Layout.Stack>
+                            {:else}
+                                <div style:padding-inline="0.6rem">
+                                    <Typography.Text>
+                                        No column named "{search}" was found
+                                    </Typography.Text>
                                 </div>
-
-                                <Button size="xs" icon extraCompact on:click={deselectAll}
-                                    >Deselect all</Button>
-                            </Layout.Stack>
+                            {/if}
                         </Layout.Stack>
                     {/if}
 
diff --git a/src/lib/components/sortButton.svelte b/src/lib/components/sortButton.svelte
index be3692e49d..d202cf664b 100644
--- a/src/lib/components/sortButton.svelte
+++ b/src/lib/components/sortButton.svelte
@@ -45,9 +45,13 @@
             onSort?.(Query.orderDesc(column));
         }
     }
+
+    const direction = $derived(
+        $state?.column === column && $state?.direction !== 'default' ? $state?.direction : ''
+    );
 </script>
 
-<Button extraCompact on:click={sort} class="hoverable-compact {$state?.direction}" {disabled}>
+<Button extraCompact on:click={sort} class="hoverable-compact {direction}" {disabled}>
     <Icon
         size="s"
         icon={$state?.column !== column || $state?.direction === 'default'
@@ -84,4 +88,12 @@
             }
         }
     }
+
+    :global(.hoverable-compact.asc),
+    :global(.hoverable-compact.desc) {
+        background-color: var(--bgcolor-neutral-secondary) !important;
+        & :global(i) {
+            --icon-fill: var(--fgcolor-neutral-secondary) !important;
+        }
+    }
 </style>
diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index b1a2a260ec..051e484f52 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -27,7 +27,7 @@
                 variant="secondary"
                 class={onlyIcon ? 'width-fix' : undefined}
                 disabled={!$columns.length && showAnyway}
-                badge={onlyIcon ? undefined : selectedColumnsNumber.toString()}
+                badge={selectedColumnsNumber.toString()}
                 on:click={toggle}>
                 <Icon slot="start" icon={IconViewBoards} />
             </Button.Button>
diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte
index 09f604691a..dd0b857f23 100644
--- a/src/lib/layout/animatedTitle.svelte
+++ b/src/lib/layout/animatedTitle.svelte
@@ -21,6 +21,7 @@
     );
 
     const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : expandedSize);
+    // const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)');
 
     const currentLineHeight = $derived(collapsed ? '130%' : '140%');
     const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index 124884accb..fb7a39d547 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -62,7 +62,6 @@
                     margin-inline: 1rem;
 
                     &.expandHeightButton {
-                        margin-inline: unset;
                         margin-inline-start: 1rem;
                     }
                 }
diff --git a/src/lib/stores/preferences.ts b/src/lib/stores/preferences.ts
index b33f0561c0..42aab1cb95 100644
--- a/src/lib/stores/preferences.ts
+++ b/src/lib/stores/preferences.ts
@@ -281,7 +281,7 @@ function createPreferences() {
         },
 
         isTableHeaderExpanded(tableId: string): boolean {
-            return preferences.tableHeaderExpanded?.[tableId] ?? true
+            return preferences.tableHeaderExpanded?.[tableId] ?? true;
         },
 
         async setTableHeaderExpanded(tableId: string, expanded: boolean) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
index 95e3deb530..e8485f4879 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/subNavigation.svelte
@@ -56,12 +56,17 @@
             <div class="collection-content">
                 {#if tables?.total}
                     <ul class="drop-list u-margin-inline-start-8 u-margin-block-start-8">
-                        {#each sortedTables as table}
+                        {#each sortedTables as table, index}
                             {@const href = `${base}/project-${region}-${project}/databases/database-${databaseId}/table-${table.$id}`}
                             {@const isSelected = tableId === table.$id}
+                            {@const isFirst = index === 0}
+                            {@const isLast = index === sortedTables.length - 1}
 
                             <Layout.Stack gap="m" direction="row" alignItems="center">
-                                <li class:is-selected={isSelected}>
+                                <li
+                                    class:is-last={isLast}
+                                    class:is-first={isFirst}
+                                    class:is-selected={isSelected}>
                                     <a
                                         class="u-padding-block-8 u-padding-inline-end-4 u-padding-inline-start-8 u-flex u-cross-center u-gap-8"
                                         {href}>
@@ -221,6 +226,22 @@
             border-left: 1px solid var(--border-neutral, #ededf0);
         }
 
+        // first item
+        &:has(li.is-first)::before {
+            top: 0.9rem;
+        }
+
+        // last item
+        &:has(li.is-last)::before {
+            bottom: 0.9rem;
+        }
+
+        // the only item
+        &:has(li.is-first.is-last)::before {
+            top: 0.6rem;
+            bottom: 0.6rem;
+        }
+
         li {
             overflow: hidden;
             position: relative;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 7858e277a6..93f5a48f72 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -32,7 +32,9 @@
         showCreateIndexSheet,
         spreadsheetLoading,
         rowActivitySheet,
-        spreadsheetRenderKey
+        spreadsheetRenderKey,
+        columnsWidth,
+        expandTabs
     } from './store';
     import { addSubPanel, registerCommands, updateCommandGroupRanks } from '$lib/commandCenter';
     import CreateColumn from './createColumn.svelte';
@@ -54,6 +56,7 @@
     import { sleep } from '$lib/helpers/promises';
     import CreateIndex from './indexes/createIndex.svelte';
     import { hash } from '$lib/helpers/string';
+    import { preferences } from '$lib/stores/preferences';
 
     let editRow: EditRow;
     let createIndex: CreateIndex;
@@ -66,7 +69,13 @@
      */
     let isWaterfallFromFaker = false;
 
+    const tableId = page.params.table;
+
     onMount(() => {
+        columnsOrder.set(preferences.getColumnOrder(tableId));
+        columnsWidth.set(preferences.getColumnWidths(tableId));
+        expandTabs.set(preferences.isTableHeaderExpanded(tableId));
+
         return realtime
             .forProject(page.params.region, page.params.project)
             .subscribe(['project', 'console'], (response) => {
@@ -304,6 +313,7 @@
 <slot />
 
 <SideSheet
+    spaced
     closeOnBlur
     title={$showCreateAttributeSheet.title}
     bind:show={$showCreateAttributeSheet.show}
@@ -329,6 +339,7 @@
 </SideSheet>
 
 <SideSheet
+    spaced
     closeOnBlur
     title={$databaseColumnSheetOptions.title}
     bind:show={$databaseColumnSheetOptions.show}
@@ -357,6 +368,7 @@
 </SideSheet>
 
 <SideSheet
+    spaced
     closeOnBlur
     title="Create index"
     bind:show={$showCreateIndexSheet.show}
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 8c62803e5a..4d8671980c 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
@@ -147,9 +147,9 @@
             {#if $isSmallViewport}
                 <Button
                     secondary
+                    event="create_row"
                     disabled={!(hasColumns && hasValidColumns)}
-                    on:click={() => ($showRecordsCreateSheet.show = true)}
-                    event="create_row">
+                    on:click={() => ($showRecordsCreateSheet.show = true)}>
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create row
                 </Button>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 93b9983b3f..2f681aaf42 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -4,6 +4,7 @@
     import {
         ActionMenu,
         Badge,
+        Divider,
         FloatingActionBar,
         Icon,
         Layout,
@@ -176,6 +177,7 @@
             bind:selectedRows={selectedColumns}
             columns={[
                 { id: 'key', width: { min: 200 } },
+                { id: 'size', width: { min: 200 } },
                 { id: 'indexed', width: { min: 150 } },
                 { id: 'default', width: { min: 200 } },
                 { id: 'actions', width: 40, isAction: true }
@@ -183,6 +185,7 @@
             bottomActionClick={() => ($showCreateAttributeSheet.show = true)}>
             <svelte:fragment slot="header" let:root>
                 <Spreadsheet.Header.Cell column="key" {root}>Column name</Spreadsheet.Header.Cell>
+                <Spreadsheet.Header.Cell column="size" {root}>Size</Spreadsheet.Header.Cell>
                 <Spreadsheet.Header.Cell column="indexed" {root}>Indexed</Spreadsheet.Header.Cell>
                 <Spreadsheet.Header.Cell column="default" {root}
                     >Default value</Spreadsheet.Header.Cell>
@@ -218,7 +221,7 @@
                                         {#if column.key === '$id' || column.key === '$sequence' || column.key === '$createdAt' || column.key === '$updatedAt'}
                                             {column['name']}
                                         {:else}
-                                            {column.key}
+                                            {column.key} {column.array ? '[]' : undefined}
                                         {/if}
                                     </span>
                                     {#if isString(column) && column.encrypt}
@@ -252,6 +255,15 @@
                             </Layout.Stack>
                         </Layout.Stack>
                     </Spreadsheet.Cell>
+                    <Spreadsheet.Cell column="size" {root} isEditable={false}>
+                        {#if column.type === 'string'}
+                            {column.size /* or length */}
+                        {:else if column.type === 'integer' || column.type === 'double'}
+                            Min: {column.min} Max: {column.max}
+                        {:else}
+                            -
+                        {/if}
+                    </Spreadsheet.Cell>
                     <Spreadsheet.Cell column="indexed" {root} isEditable={false}>
                         {@const isIndexed = $indexes.some((index) =>
                             index.columns.includes(column.key)
@@ -309,6 +321,10 @@
                                         </ActionMenu.Item.Button>
                                     {/if}
                                     {#if column.status !== 'processing' && !column['system']}
+                                        <div style:padding-block="0.25rem">
+                                            <Divider />
+                                        </div>
+
                                         <ActionMenu.Item.Button
                                             status="danger"
                                             leadingIcon={IconTrash}
@@ -353,7 +369,7 @@
                         <Layout.Stack direction="row" alignItems="center" gap="m">
                             <Badge content={selectedColumns.length.toString()} />
                             <span style:font-size="14px">
-                                {selectedColumns.length > 1 ? 'attributes' : 'attribute'}
+                                {selectedColumns.length > 1 ? 'columns' : 'column'}
                                 selected
                             </span>
                         </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
index e4f6bbca77..b472643df1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/deleteColumn.svelte
@@ -27,28 +27,29 @@
         Array.isArray(selectedColumn) ? selectedColumn : [selectedColumn]
     );
 
-    const selectedKeys = $derived(getKeys(selectedColumn));
+    const selectedKeys = $derived(
+        selectedColumns.map((c: string | Columns) => (typeof c === 'string' ? c : c.key))
+    );
 
     const requiresTwoWayConfirm = $derived(
-        selectedColumns.some((column: string | Columns) => {
-            typeof column === 'string' ? false : isRelationship(column) && column.twoWay;
-        })
+        selectedColumns
+            .filter((c): c is Columns => typeof c !== 'string')
+            .some((col) => isRelationship(col) && col.twoWay)
     );
 
     const isDeleteBtnDisabled = $derived(requiresTwoWayConfirm && !checked);
 
-    function getKeys(selected: Columns | string[]): string[] {
-        return Array.isArray(selected) ? selected : [selected.key];
-    }
-
     async function handleDelete() {
         try {
             const client = sdk.forProject(page.params.region, page.params.project);
 
             await Promise.all(
-                // TODO: check the type here
-                selectedColumns.map((key) =>
-                    client.grids.deleteColumn(page.params.database, page.params.table, key)
+                selectedKeys.map((key) =>
+                    client.grids.deleteColumn({
+                        databaseId: page.params.database,
+                        tableId: page.params.table,
+                        key
+                    })
                 )
             );
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
index 2af8be4e51..f00d59a0ef 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
@@ -7,11 +7,7 @@
     import { InputSelect, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import {
-        option,
-        columnOptions,
-        type Option
-    } from '$routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/store';
+    import { option, columnOptions, type Option } from './columns/store';
     import type { Column } from '$lib/helpers/types';
     import { preferences } from '$lib/stores/preferences';
 
@@ -57,6 +53,11 @@
             ? columnsOrder
             : columns?.map((col) => col.id) || [];
 
+        // if the length is empty,
+        // means there's no ordering done.
+        // auto handled, leave this here as is.
+        if (!currentOrder.length) return;
+
         let newOrder: string[];
 
         if (!direction || !direction.neighbour) {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte
index 66aab7f8b5..c52825a3e9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/editRow.svelte
@@ -11,6 +11,7 @@
     import { table, type Columns } from './store';
     import ColumnItem from './row-[row]/columnItem.svelte';
     import { isRelationship, isRelationshipToMany } from './row-[row]/columns/store';
+    import { Layout } from '@appwrite.io/pink-svelte';
     import { deepClone } from '$lib/helpers/object';
 
     const tableId = page.params.table;
@@ -23,6 +24,7 @@
     } = $props();
 
     let work = $state<Writable<Models.Row> | null>(null);
+    let columnFormWrapper = $state<HTMLElement | null>(null);
 
     function initWork() {
         const prohibitedKeys = [
@@ -47,7 +49,10 @@
     }
 
     $effect(() => {
-        if (row) work = initWork();
+        if (row) {
+            work = initWork();
+            focusFirstInput();
+        }
     });
 
     function compareAttributes(column: Columns, $work: Models.Row, $doc: Models.Row) {
@@ -110,11 +115,23 @@
 
         return $table.columns.every((attribute) => compareAttributes(attribute, $work, row));
     }
+
+    function focusFirstInput() {
+        const firstInput = columnFormWrapper?.querySelector<HTMLInputElement | HTMLTextAreaElement>(
+            'input:not([disabled]):not([readonly]), textarea:not([disabled]):not([readonly])'
+        );
+
+        firstInput?.focus({ preventScroll: true });
+    }
 </script>
 
 {#if $table.columns?.length && work}
-    {#each $table.columns as column}
-        {@const label = column.key}
-        <ColumnItem {column} bind:formValues={$work} {label} editing />
-    {/each}
+    <div bind:this={columnFormWrapper}>
+        <Layout.Stack direction="column" gap="l">
+            {#each $table.columns as column}
+                {@const label = column.key}
+                <ColumnItem {column} bind:formValues={$work} {label} editing />
+            {/each}
+        </Layout.Stack>
+    </div>
 {/if}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
index 3abe31f079..638d858dca 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -7,6 +7,7 @@
     import AnimatedTitle from '$lib/layout/animatedTitle.svelte';
     import { canWriteTables } from '$lib/stores/roles';
     import { expandTabs, table } from './store';
+    import { Layout } from '@appwrite.io/pink-svelte';
 
     const databaseId = $derived(page.params.database);
 
@@ -62,17 +63,19 @@
 
 <Cover expanded collapsed={!$expandTabs} blocksize={$expandTabs ? '152px' : '90px'} animate={true}>
     <svelte:fragment slot="header">
-        <AnimatedTitle href={link} collapsed={!$expandTabs}>
-            {$table?.name}
-        </AnimatedTitle>
+        <Layout.Stack direction="row" alignContent="center" alignItems="center" inline>
+            <AnimatedTitle href={link} collapsed={!$expandTabs}>
+                {$table?.name}
+            </AnimatedTitle>
 
-        {#key $table?.$id}
-            <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
-                >{$table?.$id}</Id>
-        {/key}
+            {#key $table?.$id}
+                <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
+                    >{$table?.$id}</Id>
+            {/key}
+        </Layout.Stack>
     </svelte:fragment>
 
-    <div class="tabs-container" style:opacity={$expandTabs ? 1 : 0}>
+    <div class="tabs-container" class:collapsed={!$expandTabs}>
         <Tabs>
             {#each tabs as tab}
                 <Tab
@@ -88,6 +91,15 @@
 
 <style lang="scss">
     .tabs-container {
+        opacity: 1;
         transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
+
+        &.collapsed {
+            opacity: 0;
+
+            & :global([role='tab']) {
+                cursor: default;
+            }
+        }
     }
 </style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index d703a3bd83..a6def7593d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -11,6 +11,7 @@
     import {
         ActionMenu,
         Badge,
+        Divider,
         FloatingActionBar,
         Icon,
         Layout,
@@ -167,7 +168,7 @@
                                 {index.lengths}
                             </Spreadsheet.Cell>
                             <Spreadsheet.Cell column="actions" {root}>
-                                <Popover let:toggle padding="none" placement="bottom-end">
+                                <Popover let:toggle padding="none" placement="bottom-end" portal>
                                     <Button text icon ariaLabel="more options" on:click={toggle}>
                                         <Icon icon={IconDotsHorizontal} size="s" />
                                     </Button>
@@ -178,6 +179,11 @@
                                                 selectedIndex = index;
                                                 showOverview = true;
                                             }}>Overview</ActionMenu.Item.Button>
+
+                                        <div style:padding-block="0.25rem">
+                                            <Divider />
+                                        </div>
+
                                         <ActionMenu.Item.Button
                                             status="danger"
                                             leadingIcon={IconTrash}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
index 7eeb585880..03239772ae 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/createIndex.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
-    import { goto, invalidate } from '$app/navigation';
-    import { base } from '$app/paths';
+    import { invalidate } from '$app/navigation';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
@@ -13,6 +12,7 @@
     import { table, indexes } from '../store';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     let {
         showCreateIndex = $bindable(false),
@@ -95,12 +95,6 @@
                 invalidate(Dependencies.DATABASE)
             ]);
 
-            if (!page.route.id.includes('/indexes')) {
-                await goto(
-                    `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}/table-${$table.$id}/indexes`
-                );
-            }
-
             addNotification({
                 message: 'Creating index',
                 type: 'success'
@@ -138,7 +132,8 @@
 
 <Layout.Stack gap="s">
     {#each columnList as column, index}
-        <Layout.Stack direction="row">
+        {@const direction = $isSmallViewport ? 'column' : 'row'}
+        <Layout.Stack {direction}>
             <InputSelect
                 required
                 options={[
@@ -171,17 +166,31 @@
                     bind:value={column.length} />
             {/if}
 
-            <Layout.Stack direction="row" alignItems="flex-end" inline>
-                <Button
-                    icon
-                    secondary
-                    disabled={columnList.length <= 1}
-                    on:click={() => {
-                        columnList = remove(columnList, index);
-                    }}>
-                    <Icon icon={IconX} size="s" />
-                </Button>
-            </Layout.Stack>
+            {#if $isSmallViewport}
+                <div style:margin-top="0.25rem">
+                    <Button
+                        text
+                        secondary
+                        disabled={columnList.length <= 1}
+                        on:click={() => {
+                            columnList = remove(columnList, index);
+                        }}>
+                        Remove
+                    </Button>
+                </div>
+            {:else}
+                <div style:margin-top="2.05rem">
+                    <Button
+                        icon
+                        secondary
+                        disabled={columnList.length <= 1}
+                        on:click={() => {
+                            columnList = remove(columnList, index);
+                        }}>
+                        <Icon icon={IconX} size="s" />
+                    </Button>
+                </div>
+            {/if}
         </Layout.Stack>
     {/each}
     <div>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte
index 93eb1a8810..69060a955c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rowActivity.svelte
@@ -6,7 +6,7 @@
     import { rowActivitySheet } from './store';
     import { pageToOffset } from '$lib/helpers/load';
     import { type Models, Query } from '@appwrite.io/console';
-    import { Layout, Skeleton, Table } from '@appwrite.io/pink-svelte';
+    import { Layout, Skeleton } from '@appwrite.io/pink-svelte';
 
     let limit = 25; /* default */
     let offset = $state(0);
@@ -38,49 +38,25 @@
 </script>
 
 {#if loading}
-    <div style:margin-block="2.25rem" style:margin-inline-end="2.25rem">
-        <Table.Root columns={5} let:root>
-            <svelte:fragment slot="header" let:root>
-                <Table.Header.Cell column="user" {root}>User</Table.Header.Cell>
-                <Table.Header.Cell column="event" {root}>Event</Table.Header.Cell>
-                <Table.Header.Cell column="location" {root}>Location</Table.Header.Cell>
-                <Table.Header.Cell column="ip" {root}>IP</Table.Header.Cell>
-                <Table.Header.Cell column="date" {root}>Date</Table.Header.Cell>
-            </svelte:fragment>
-
-            {#each Array(5) as _}
-                <Table.Row.Base {root}>
-                    <Table.Cell column="user" {root}>
-                        <Layout.Stack direction="row" alignItems="center" gap="s">
-                            <Skeleton variant="circle" width={64} height={64} />
-                            <Skeleton variant="line" width={160} height={18} />
-                        </Layout.Stack>
-                    </Table.Cell>
-
-                    <Table.Cell column="event" {root}>
-                        <Skeleton variant="line" width={220} height={18} />
-                    </Table.Cell>
-
-                    <Table.Cell column="location" {root}>
-                        <Skeleton variant="line" width={140} height={18} />
-                    </Table.Cell>
-
-                    <Table.Cell column="ip" {root}>
-                        <Skeleton variant="line" width={120} height={18} />
-                    </Table.Cell>
-
-                    <Table.Cell column="date" {root}>
-                        <Skeleton variant="line" width={160} height={18} />
-                    </Table.Cell>
-                </Table.Row.Base>
-            {/each}
-        </Table.Root>
+    <div style:margin-block="" style:margin-inline-end="2.25rem">
+        <!--<Skeleton variant="line" height={25} width="25%" />-->
+        <Skeleton variant="line" height={40} width="auto" />
     </div>
 {:else if rowActivityLogs}
-    <Activity
-        {limit}
-        {offset}
-        on:page={loadRowLogs}
-        logs={rowActivityLogs}
-        useCreateLinkForPagination={false} />
+    <div class="row-activity-wrapper">
+        <Activity
+            {limit}
+            {offset}
+            on:page={loadRowLogs}
+            logs={rowActivityLogs}
+            databasesScreen
+            useCreateLinkForPagination={false} />
+    </div>
 {/if}
+
+<style lang="scss">
+    .row-activity-wrapper :global(.console-container) {
+        margin-inline: unset;
+        padding-block-start: 1.25rem !important;
+    }
+</style>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index af8a5d7814..f641a4ce89 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -32,7 +32,8 @@
         rowActivitySheet,
         paginatedRows,
         paginatedRowsLoading,
-        spreadsheetRenderKey, expandTabs
+        spreadsheetRenderKey,
+        expandTabs
     } from './store';
     import RelationshipsModal from './relationshipsModal.svelte';
     import type { Column, ColumnType } from '$lib/helpers/types';
@@ -118,9 +119,6 @@
 
     onMount(async () => {
         displayNames = preferences.getDisplayNames();
-        columnsOrder.set(preferences.getColumnOrder(tableId));
-        columnsWidth.set(preferences.getColumnWidths(tableId));
-        expandTabs.set(preferences.isTableHeaderExpanded(tableId));
 
         makeTableColumns();
         sortState.set(data.currentSort as SortState);
@@ -661,7 +659,7 @@
 
     expandTabs.subscribe((expanded) => {
         preferences.setTableHeaderExpanded(tableId, expanded);
-    })
+    });
 </script>
 
 <SpreadsheetContainer observeExpand bind:this={spreadsheetContainer}>
@@ -699,8 +697,8 @@
                                 on:click={() => {
                                     $showCreateAttributeSheet.show = true;
                                     $showCreateAttributeSheet.column = null;
-                                    $showCreateAttributeSheet.columns = $tableColumns;
                                     $showCreateAttributeSheet.title = 'Create column';
+                                    $showCreateAttributeSheet.columns = $tableColumns;
                                     $showCreateAttributeSheet.columnsOrder = $columnsOrder;
                                 }}>
                                 <Icon icon={IconPlus} color="--fgcolor-neutral-primary" />
@@ -940,13 +938,15 @@
                         </Layout.Stack>
                     </Layout.Stack>
 
-                    <div style:margin-right="var(--space-6)">
-                        <Button.Button
-                            variant="extra-compact"
-                            on:click={() => {
-                                $randomDataModalState.show = true;
-                            }}>Generate sample data</Button.Button>
-                    </div>
+                    {#if !$isSmallViewport}
+                        <div style:margin-right="var(--space-6)">
+                            <Button.Button
+                                variant="extra-compact"
+                                on:click={() => {
+                                    $randomDataModalState.show = true;
+                                }}>Generate sample data</Button.Button>
+                        </div>
+                    {/if}
                 </Layout.Stack>
             </svelte:fragment>
         </Spreadsheet.Root>

From 3aefacf44f94e435b7c3db87f26509d49011be1f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 14 Aug 2025 12:51:37 +0530
Subject: [PATCH 116/118] update: layout fixes

---
 src/lib/components/viewSelector.svelte        |   3 +-
 src/lib/layout/animatedTitle.svelte           |   4 +-
 src/lib/layout/container.svelte               |  18 +-
 src/lib/layout/cover.svelte                   |  11 +-
 src/lib/layout/footer.svelte                  |  13 +-
 src/lib/layout/shell.svelte                   |  10 +-
 .../table-[table]/columns/+page.svelte        | 171 +++++++++---------
 .../table-[table]/header.svelte               |  68 ++++---
 .../table-[table]/indexes/+page.svelte        |  15 --
 .../table-[table]/layout/emptySheet.svelte    |   8 +-
 .../table-[table]/settings/+page.svelte       |   2 +-
 .../table-[table]/spreadsheet.svelte          |   3 +-
 12 files changed, 175 insertions(+), 151 deletions(-)

diff --git a/src/lib/components/viewSelector.svelte b/src/lib/components/viewSelector.svelte
index 051e484f52..43fe2d7732 100644
--- a/src/lib/components/viewSelector.svelte
+++ b/src/lib/components/viewSelector.svelte
@@ -6,6 +6,7 @@
     import { IconViewBoards } from '@appwrite.io/pink-icons-svelte';
     import ViewToggle from './viewToggle.svelte';
     import ColumnSelector from './columnSelector.svelte';
+    import { isSmallViewport } from '$lib/stores/viewport';
 
     export let onlyIcon = false;
     export let ui: 'legacy' | 'new' = 'legacy';
@@ -25,7 +26,7 @@
                 size="s"
                 icon={onlyIcon}
                 variant="secondary"
-                class={onlyIcon ? 'width-fix' : undefined}
+                class={onlyIcon && !$isSmallViewport ? 'width-fix' : undefined}
                 disabled={!$columns.length && showAnyway}
                 badge={selectedColumnsNumber.toString()}
                 on:click={toggle}>
diff --git a/src/lib/layout/animatedTitle.svelte b/src/lib/layout/animatedTitle.svelte
index dd0b857f23..05e333d68b 100644
--- a/src/lib/layout/animatedTitle.svelte
+++ b/src/lib/layout/animatedTitle.svelte
@@ -20,8 +20,8 @@
         $isSmallViewport ? 'var(--font-size-m)' : 'var(--font-size-xxxl)'
     );
 
-    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : expandedSize);
-    // const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)');
+    // const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : expandedSize);
+    const currentFontSize = $derived(collapsed ? 'var(--font-size-l)' : 'var(--font-size-xxxl)');
 
     const currentLineHeight = $derived(collapsed ? '130%' : '140%');
     const currentLetterSpacing = $derived(collapsed ? '0' : '-0.144px');
diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index fb7a39d547..b4ff59ea6c 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -4,11 +4,11 @@
     // TODO: needs better props
 
     export let expanded = false;
-    export let expandHeightButton = false;
     export let slotSpacing = false;
     export let overlapCover = false;
     export let paddingInlineEnd = true;
     export let databasesScreen = false;
+    export let expandHeightButton = false;
     export let size: 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' = null;
 
     $: style = size
@@ -45,6 +45,11 @@
             padding-inline-end: 0 !important;
             margin-block: var(--base-8) !important;
 
+            @media (min-width: 1440px) {
+                margin-inline: 0 !important;
+                padding-inline: 53px !important;
+            }
+
             &.expandHeightButton {
                 margin-inline-end: unset;
                 margin-inline-start: 2.75rem;
@@ -81,25 +86,34 @@
         &.databasesScreen {
             @media (min-width: 1440px) {
                 min-width: 1070px;
-                max-width: 1144px;
+                /*max-width: 1144px;*/
+            }
+
+            @media (min-width: 1728px) {
+                min-width: 1070px;
+                padding-inline: 196px !important;
             }
         }
 
         @media (min-width: 360px) {
             margin-inline: 1rem;
         }
+
         @media (min-width: 1024px) {
             margin-inline: auto;
             max-width: calc(944px - 11rem);
         }
+
         @media (min-width: 1280px) {
             margin-inline: auto;
             max-width: 1000px;
         }
+
         @media (min-width: 1440px) {
             margin-inline: auto;
             max-width: 1144px;
         }
+
         @media (min-width: 1728px) {
             margin-inline: auto;
             max-width: 1200px;
diff --git a/src/lib/layout/cover.svelte b/src/lib/layout/cover.svelte
index cf68dac86d..aa3f227ce6 100644
--- a/src/lib/layout/cover.svelte
+++ b/src/lib/layout/cover.svelte
@@ -31,12 +31,12 @@
 </script>
 
 <div
+    class:animate
     class:expanded
     class:collapsed={animate && collapsed}
-    class:animate
     class="top-cover-console"
-    style:block-size={animatedBlocksize}
     style:margin-top={marginTop}
+    style:block-size={animatedBlocksize}
     style:padding-block-start={headerPaddingTop}
     style:padding-block-end={headerPaddingBottom}>
     <div
@@ -91,18 +91,22 @@
         @media (min-width: 360px) {
             margin-inline: 1rem;
         }
+
         @media (min-width: 1024px) {
             margin-inline: auto;
             max-width: calc(944px - 11rem);
         }
+
         @media (min-width: 1280px) {
             margin-inline: auto;
             max-width: 1000px;
         }
+
         @media (min-width: 1440px) {
             margin-inline: auto;
             max-width: 1144px;
         }
+
         @media (min-width: 1728px) {
             margin-inline: auto;
             max-width: 1200px;
@@ -119,5 +123,8 @@
 
     .expanded-slot {
         margin-inline: 3rem !important;
+        @media (max-width: 768px) {
+            margin-inline: 0 !important;
+        }
     }
 </style>
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 5c4016c534..b9602eed37 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -16,8 +16,10 @@
 
     const currentYear = new Date().getFullYear();
 
-    // for spreadsheet ui
-    const hideFooter = $derived(page.route.id?.includes('table-[table]'));
+    const hideFooter = $derived.by(() => {
+        const endings = ['table-[table]', 'table-[table]/columns', 'table-[table]/indexes'];
+        return endings.some((end) => page.route.id?.endsWith(end));
+    });
 </script>
 
 <footer class:hide={hideFooter}>
@@ -175,10 +177,15 @@
 
     :global(main:has(.sub-navigation)) footer {
         @media (min-width: 1024px) {
-            margin-inline-start: -1.5rem;
             margin-inline-end: 2rem;
+            margin-inline-start: -1.5rem;
         }
     }
+
+    :global(main:has(.wide-screen-wrapper)) footer {
+        margin-inline-start: 2rem !important;
+    }
+
     .extra-margin {
         margin-block-start: var(--space-2, 4px);
     }
diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index e6c157c903..9b6f34c3dc 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -239,21 +239,13 @@
         }
 
         @media (max-width: 768px) {
-            .main-content {
+            .main-content:not(:has(.wide-screen-wrapper)) {
                 width: 100%;
                 position: fixed;
             }
         }
     }
 
-    :global(main:has(.wide-screen-wrapper)) {
-        @media (min-width: 1728px) {
-            .main-content {
-                padding-left: 255px;
-            }
-        }
-    }
-
     .overlay {
         position: fixed;
         width: 100vw;
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 2f681aaf42..9ec93d12c1 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
     import {
         ActionMenu,
         Badge,
@@ -117,6 +116,17 @@
         enum: IconViewList
     };
 
+    const emptyCellsLimit = $derived($isSmallViewport ? 16 : 18);
+    const emptyCellsCount = $derived(
+        updatedColumnsForSheet.length >= emptyCellsLimit
+            ? 0
+            : emptyCellsLimit - updatedColumnsForSheet.length
+    );
+
+    onMount(() => {
+        columnsOrder = preferences.getColumnOrder(tableId);
+    });
+
     function getColumnStatusBadge(status: string): ComponentProps<Badge>['type'] {
         switch (status) {
             case 'processing':
@@ -130,16 +140,17 @@
         }
     }
 
-    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
-    const emptyCellsCount = $derived(
-        updatedColumnsForSheet.length >= emptyCellsLimit
-            ? 0
-            : emptyCellsLimit - updatedColumnsForSheet.length
-    );
-
-    onMount(() => {
-        columnsOrder = preferences.getColumnOrder(tableId);
-    });
+    function getMinMaxSizeForColumn(column: Columns): string | undefined {
+        if (column.type === 'string' && !column['format'] && column.key !== '$id') {
+            const stringColumn = column as Models.ColumnString;
+            return `Size: ${stringColumn.size}`;
+        } else if (column.type === 'integer' || column.type === 'double') {
+            const numbersColumn = column as Models.ColumnInteger | Models.ColumnFloat;
+            return `Min: ${numbersColumn.min}, Max: ${numbersColumn.max}`;
+        } else {
+            return undefined;
+        }
+    }
 
     onDestroy(() => ($showCreateAttributeSheet.show = false));
 
@@ -151,22 +162,6 @@
     });
 </script>
 
-<Container expanded style="background: var(--bgcolor-neutral-primary)">
-    <Layout.Stack direction="row" justifyContent="flex-end">
-        {#if updatedColumnsForSheet}
-            <Button
-                size="s"
-                secondary
-                disabled={$isCsvImportInProgress}
-                on:click={() => ($showCreateAttributeSheet.show = true)}
-                event="create_attribute">
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create column
-            </Button>
-        {/if}
-    </Layout.Stack>
-</Container>
-
 <div class="databases-spreadsheet">
     <SpreadsheetContainer bind:this={spreadsheetContainer}>
         <Spreadsheet.Root
@@ -176,8 +171,8 @@
             emptyCells={emptyCellsCount}
             bind:selectedRows={selectedColumns}
             columns={[
-                { id: 'key', width: { min: 200 } },
-                { id: 'size', width: { min: 200 } },
+                // more size until we decide if we want a new column!
+                { id: 'key', width: { min: $isSmallViewport ? 250 : 200 } },
                 { id: 'indexed', width: { min: 150 } },
                 { id: 'default', width: { min: 200 } },
                 { id: 'actions', width: 40, isAction: true }
@@ -185,7 +180,6 @@
             bottomActionClick={() => ($showCreateAttributeSheet.show = true)}>
             <svelte:fragment slot="header" let:root>
                 <Spreadsheet.Header.Cell column="key" {root}>Column name</Spreadsheet.Header.Cell>
-                <Spreadsheet.Header.Cell column="size" {root}>Size</Spreadsheet.Header.Cell>
                 <Spreadsheet.Header.Cell column="indexed" {root}>Indexed</Spreadsheet.Header.Cell>
                 <Spreadsheet.Header.Cell column="default" {root}
                     >Default value</Spreadsheet.Header.Cell>
@@ -199,71 +193,72 @@
                     column['system'] || column.type === 'relationship' ? 'disabled' : true}
                 <Spreadsheet.Row.Base {root} select={isSelectable} id={column.key}>
                     <Spreadsheet.Cell column="key" {root} isEditable={false}>
-                        <Layout.Stack direction="row" alignItems="center">
-                            {#if isRelationship(column)}
-                                <Icon
-                                    size="s"
-                                    icon={column?.twoWay
-                                        ? IconSwitchHorizontal
-                                        : IconArrowSmRight} />
-                            {:else if 'format' in column && column.format}
-                                {@const icon = columnFormatIcon[column?.format]}
-                                <Icon {icon} size="s" />
-                            {:else if column.key === '$id'}
-                                <Icon icon={IconFingerPrint} size="s" />
-                            {:else}
-                                <Icon icon={option.icon} size="s" />
-                            {/if}
+                        <Layout.Stack direction="row" justifyContent="space-between">
+                            <Layout.Stack direction="row" alignItems="center" inline>
+                                {#if isRelationship(column)}
+                                    <Icon
+                                        size="s"
+                                        icon={column?.twoWay
+                                            ? IconSwitchHorizontal
+                                            : IconArrowSmRight} />
+                                {:else if 'format' in column && column.format}
+                                    {@const icon = columnFormatIcon[column?.format]}
+                                    <Icon {icon} size="s" />
+                                {:else if column.key === '$id'}
+                                    <Icon icon={IconFingerPrint} size="s" />
+                                {:else}
+                                    <Icon icon={option.icon} size="s" />
+                                {/if}
 
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Layout.Stack inline direction="row" alignItems="center" gap="xxs">
-                                    <span class="text u-trim-1" data-private>
-                                        {#if column.key === '$id' || column.key === '$sequence' || column.key === '$createdAt' || column.key === '$updatedAt'}
-                                            {column['name']}
-                                        {:else}
-                                            {column.key} {column.array ? '[]' : undefined}
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Layout.Stack
+                                        inline
+                                        direction="row"
+                                        alignItems="center"
+                                        gap="xxs">
+                                        <span class="text u-trim-1" data-private>
+                                            {#if column.key === '$id' || column.key === '$sequence' || column.key === '$createdAt' || column.key === '$updatedAt'}
+                                                {column['name']}
+                                            {:else}
+                                                {column.key} {column.array ? '[]' : undefined}
+                                            {/if}
+                                        </span>
+                                        {#if isString(column) && column.encrypt}
+                                            <Tooltip>
+                                                <Icon
+                                                    size="s"
+                                                    icon={IconLockClosed}
+                                                    color="--fgcolor-neutral-tertiary" />
+                                                <div slot="tooltip">Encrypted</div>
+                                            </Tooltip>
                                         {/if}
-                                    </span>
-                                    {#if isString(column) && column.encrypt}
-                                        <Tooltip>
-                                            <Icon
-                                                size="s"
-                                                icon={IconLockClosed}
-                                                color="--fgcolor-neutral-tertiary" />
-                                            <div slot="tooltip">Encrypted</div>
-                                        </Tooltip>
+                                    </Layout.Stack>
+                                    {#if column.status !== 'available'}
+                                        <Badge
+                                            size="s"
+                                            variant="secondary"
+                                            content={column.status}
+                                            type={getColumnStatusBadge(column.status)} />
+                                        {#if column.error}
+                                            <Link.Button
+                                                variant="muted"
+                                                on:click={(e) => {
+                                                    e.preventDefault();
+                                                    error = column.error;
+                                                    showFailed = true;
+                                                }}>Details</Link.Button>
+                                        {/if}
+                                    {:else if column.required}
+                                        <Badge size="xs" variant="secondary" content="required" />
                                     {/if}
                                 </Layout.Stack>
-                                {#if column.status !== 'available'}
-                                    <Badge
-                                        size="s"
-                                        variant="secondary"
-                                        content={column.status}
-                                        type={getColumnStatusBadge(column.status)} />
-                                    {#if column.error}
-                                        <Link.Button
-                                            variant="muted"
-                                            on:click={(e) => {
-                                                e.preventDefault();
-                                                error = column.error;
-                                                showFailed = true;
-                                            }}>Details</Link.Button>
-                                    {/if}
-                                {:else if column.required}
-                                    <Badge size="xs" variant="secondary" content="required" />
-                                {/if}
                             </Layout.Stack>
+                            {@const minMaxSize = getMinMaxSizeForColumn(column)}
+                            {#if minMaxSize}
+                                <Badge size="xs" content={minMaxSize} variant="secondary" />
+                            {/if}
                         </Layout.Stack>
                     </Spreadsheet.Cell>
-                    <Spreadsheet.Cell column="size" {root} isEditable={false}>
-                        {#if column.type === 'string'}
-                            {column.size /* or length */}
-                        {:else if column.type === 'integer' || column.type === 'double'}
-                            Min: {column.min} Max: {column.max}
-                        {:else}
-                            -
-                        {/if}
-                    </Spreadsheet.Cell>
                     <Spreadsheet.Cell column="indexed" {root} isEditable={false}>
                         {@const isIndexed = $indexes.some((index) =>
                             index.columns.includes(column.key)
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
index 638d858dca..b1b4b1c2b7 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -59,37 +59,55 @@
     const link = $derived(
         `${base}/project-${page.params.region}-${page.params.project}/databases/database-${databaseId}`
     );
+
+    const nonSheetPages = $derived.by(() => {
+        const endings = ['table-[table]', 'table-[table]/columns', 'table-[table]/indexes'];
+        const isSpreadsheetPage = endings.some((end) => page.route.id?.endsWith(end));
+        return !isSpreadsheetPage;
+    });
 </script>
 
-<Cover expanded collapsed={!$expandTabs} blocksize={$expandTabs ? '152px' : '90px'} animate={true}>
-    <svelte:fragment slot="header">
-        <Layout.Stack direction="row" alignContent="center" alignItems="center" inline>
-            <AnimatedTitle href={link} collapsed={!$expandTabs}>
-                {$table?.name}
-            </AnimatedTitle>
+<div class:nonSheetPages>
+    <Cover animate expanded collapsed={!$expandTabs} blocksize={$expandTabs ? '152px' : '90px'}>
+        <svelte:fragment slot="header">
+            <Layout.Stack direction="row" alignContent="center" alignItems="center" inline>
+                <AnimatedTitle href={link} collapsed={!$expandTabs}>
+                    {$table?.name}
+                </AnimatedTitle>
 
-            {#key $table?.$id}
-                <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
-                    >{$table?.$id}</Id>
-            {/key}
-        </Layout.Stack>
-    </svelte:fragment>
+                {#key $table?.$id}
+                    <Id value={$table?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}
+                        >{$table?.$id}</Id>
+                {/key}
+            </Layout.Stack>
+        </svelte:fragment>
 
-    <div class="tabs-container" class:collapsed={!$expandTabs}>
-        <Tabs>
-            {#each tabs as tab}
-                <Tab
-                    href={tab.href}
-                    selected={isTabSelected(tab, page.url.pathname, path, tabs)}
-                    event={tab.event}>
-                    {tab.title}
-                </Tab>
-            {/each}
-        </Tabs>
-    </div>
-</Cover>
+        <div class="tabs-container" class:collapsed={!$expandTabs}>
+            <Tabs>
+                {#each tabs as tab}
+                    <Tab
+                        href={tab.href}
+                        selected={isTabSelected(tab, page.url.pathname, path, tabs)}
+                        event={tab.event}>
+                        {tab.title}
+                    </Tab>
+                {/each}
+            </Tabs>
+        </div>
+    </Cover>
+</div>
 
 <style lang="scss">
+    .nonSheetPages :global(.cover-container) {
+        @media (min-width: 1440px) {
+            padding-inline: 7px !important;
+        }
+
+        @media (min-width: 1728px) {
+            padding-inline: 10.25rem !important;
+        }
+    }
+
     .tabs-container {
         opacity: 1;
         transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index a6def7593d..88c571b5f4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -94,21 +94,6 @@
     });
 </script>
 
-<Container expanded style="background: var(--bgcolor-neutral-primary)">
-    <Layout.Stack direction="row" justifyContent="flex-end">
-        {#if $canWriteTables}
-            <Button
-                secondary
-                event="create_index"
-                disabled={!$table?.columns?.length}
-                on:click={() => (showCreateIndex = true)}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Create index
-            </Button>
-        {/if}
-    </Layout.Stack>
-</Container>
-
 <div class="databases-spreadsheet">
     {#if data.table?.columns?.length}
         {#if data.table.indexes.length}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index ffe5841096..de9478a4b9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -310,8 +310,12 @@
             height: 79.1vh !important;
         }
 
-        @media (max-width: 768px) {
-            height: 70vh;
+        @media (max-width: 1024px) {
+            height: 76vh;
+        }
+
+        @media (min-width: 1024px) {
+            height: 80.35vh;
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
index 20abb285b4..e229126202 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
@@ -9,7 +9,7 @@
     import UpdateStatus from './updateStatus.svelte';
 </script>
 
-<div class="wide-screen-wrapper databases-spreadsheet">
+<div class="wide-screen-wrapper databases-spreadsheet" style:padding-bottom="1rem">
     <Container expanded slotSpacing databasesScreen>
         {#if $table}
             <UpdateStatus />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index f641a4ce89..6902121d2d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -76,6 +76,7 @@
     import { pageToOffset } from '$lib/helpers/load';
     import { debounce } from '$lib/helpers/debounce';
     import { hash } from '$lib/helpers/string';
+    import { abbreviateNumber } from '$lib/helpers/numbers';
 
     export let data: PageData;
     export let showRecordsCreateSheet: {
@@ -905,7 +906,7 @@
                             <span style:white-space="nowrap">
                                 {selectedRows.length
                                     ? `${selectedRows.length} row${selectedRows.length === 1 ? '' : 's'} selected`
-                                    : `${$rows.total} row${$rows.total === 1 ? '' : 's'}`}
+                                    : `${abbreviateNumber($rows.total)} row${$rows.total === 1 ? '' : 's'}`}
                             </span>
                         </Typography.Text>
 

From 55a3c56ffd40135ac6f2e7b77a475a6ff8acec19 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 14 Aug 2025 13:26:14 +0530
Subject: [PATCH 117/118] update: more layout fixes.

---
 src/lib/layout/container.svelte               |  1 +
 .../table-[table]/columns/+page.svelte        | 26 +++++++++++++++++--
 .../table-[table]/indexes/+page.svelte        | 22 +++++++++++++---
 .../table-[table]/layout/emptySheet.svelte    |  6 ++---
 .../table-[table]/settings/+page.svelte       |  2 +-
 5 files changed, 48 insertions(+), 9 deletions(-)

diff --git a/src/lib/layout/container.svelte b/src/lib/layout/container.svelte
index b4ff59ea6c..4e6fdda4ec 100644
--- a/src/lib/layout/container.svelte
+++ b/src/lib/layout/container.svelte
@@ -53,6 +53,7 @@
             &.expandHeightButton {
                 margin-inline-end: unset;
                 margin-inline-start: 2.75rem;
+                padding-inline-end: 0.5rem !important;
             }
 
             &:first-child {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index 9ec93d12c1..6168afc8b8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
+    import { Container } from '$lib/layout';
     import {
         ActionMenu,
         Badge,
@@ -116,7 +117,7 @@
         enum: IconViewList
     };
 
-    const emptyCellsLimit = $derived($isSmallViewport ? 16 : 18);
+    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
     const emptyCellsCount = $derived(
         updatedColumnsForSheet.length >= emptyCellsLimit
             ? 0
@@ -162,6 +163,25 @@
     });
 </script>
 
+<Container
+    expanded
+    expandHeightButton={$isSmallViewport}
+    style="background: var(--bgcolor-neutral-primary)">
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        {#if updatedColumnsForSheet}
+            <Button
+                size="s"
+                secondary
+                disabled={$isCsvImportInProgress}
+                on:click={() => ($showCreateAttributeSheet.show = true)}
+                event="create_attribute">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create column
+            </Button>
+        {/if}
+    </Layout.Stack>
+</Container>
+
 <div class="databases-spreadsheet">
     <SpreadsheetContainer bind:this={spreadsheetContainer}>
         <Spreadsheet.Root
@@ -255,7 +275,9 @@
                             </Layout.Stack>
                             {@const minMaxSize = getMinMaxSizeForColumn(column)}
                             {#if minMaxSize}
-                                <Badge size="xs" content={minMaxSize} variant="secondary" />
+                                <Typography.Caption variant="400">
+                                    {minMaxSize}
+                                </Typography.Caption>
                             {/if}
                         </Layout.Stack>
                     </Spreadsheet.Cell>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index 88c571b5f4..86f820bcd5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -26,13 +26,11 @@
         IconPlus,
         IconTrash
     } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onDestroy, onMount, tick } from 'svelte';
+    import { type ComponentProps, onDestroy, tick } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
-    import { page } from '$app/state';
     import SideSheet from '../layout/sidesheet.svelte';
-    import { flags } from '$lib/flags';
     import type { PageData } from './$types';
     import { showCreateAttributeSheet } from '../store';
     import { isSmallViewport } from '$lib/stores/viewport';
@@ -94,6 +92,24 @@
     });
 </script>
 
+<Container
+    expanded
+    expandHeightButton={$isSmallViewport}
+    style="background: var(--bgcolor-neutral-primary)">
+    <Layout.Stack direction="row" justifyContent="flex-end">
+        {#if $canWriteTables}
+            <Button
+                secondary
+                event="create_index"
+                disabled={!$table?.columns?.length}
+                on:click={() => (showCreateIndex = true)}>
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create index
+            </Button>
+        {/if}
+    </Layout.Stack>
+</Container>
+
 <div class="databases-spreadsheet">
     {#if data.table?.columns?.length}
         {#if data.table.indexes.length}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index de9478a4b9..e283e4154d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -128,7 +128,7 @@
     const spreadsheetColumns = $derived(mode === 'rows' ? getRowColumns() : getIndexesColumns());
 
     const emptyCells = $derived($isSmallViewport ? 14 : 17);
-    const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.75vh');
+    const fixedHeight = $derived($isSmallViewport ? '60.75vh' : '74.35vh');
 </script>
 
 <div class="spreadsheet-container-outer" data-mode={mode}>
@@ -311,11 +311,11 @@
         }
 
         @media (max-width: 1024px) {
-            height: 76vh;
+            height: 63.35vh;
         }
 
         @media (min-width: 1024px) {
-            height: 80.35vh;
+            height: 70.35vh;
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
index e229126202..20abb285b4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
@@ -9,7 +9,7 @@
     import UpdateStatus from './updateStatus.svelte';
 </script>
 
-<div class="wide-screen-wrapper databases-spreadsheet" style:padding-bottom="1rem">
+<div class="wide-screen-wrapper databases-spreadsheet">
     <Container expanded slotSpacing databasesScreen>
         {#if $table}
             <UpdateStatus />

From ae2f45fe2dfe8c78e9f62102dd81c715bc940b41 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 14 Aug 2025 15:24:37 +0530
Subject: [PATCH 118/118] fix: faker.

---
 src/lib/helpers/faker.ts | 109 +++++++++++++++++++++++++++++----------
 1 file changed, 81 insertions(+), 28 deletions(-)

diff --git a/src/lib/helpers/faker.ts b/src/lib/helpers/faker.ts
index d6ae644a01..4ef2727454 100644
--- a/src/lib/helpers/faker.ts
+++ b/src/lib/helpers/faker.ts
@@ -6,17 +6,42 @@ import { sdk } from '$lib/stores/sdk';
 export async function generateColumns(
     project: Models.Project,
     databaseId: string,
-    collectionId: string
+    tableId: string
 ): Promise<Columns[]> {
     const client = sdk.forProject(project.region, project.$id);
 
     return await Promise.all([
-        client.grids.createStringColumn(databaseId, collectionId, 'name', 255, false),
-        client.grids.createEmailColumn(databaseId, collectionId, 'email', false),
-        client.grids.createIntegerColumn(databaseId, collectionId, 'age', false, 0, 150),
-        client.grids.createStringColumn(databaseId, collectionId, 'city', 100, false),
-        client.grids.createStringColumn(databaseId, collectionId, 'description', 1000, false),
-        client.grids.createBooleanColumn(databaseId, collectionId, 'active', false)
+        client.grids.createStringColumn({
+            databaseId,
+            tableId,
+            key: 'name',
+            size: 255,
+            required: false
+        }),
+        client.grids.createEmailColumn({ databaseId, tableId, key: 'email', required: false }),
+        client.grids.createIntegerColumn({
+            databaseId,
+            tableId,
+            key: 'age',
+            required: false,
+            min: 0,
+            max: 150
+        }),
+        client.grids.createStringColumn({
+            databaseId,
+            tableId,
+            key: 'city',
+            size: 100,
+            required: false
+        }),
+        client.grids.createStringColumn({
+            databaseId,
+            tableId,
+            key: 'description',
+            size: 1000,
+            required: false
+        }),
+        client.grids.createBooleanColumn({ databaseId, tableId, key: 'active', required: false })
     ]);
 }
 
@@ -38,7 +63,9 @@ export function generateFakeRecords(
         const id = ID.unique();
         ids.push(id);
 
-        let row: Record<string, string | number | boolean> = { $id: id };
+        let row: Record<string, string | number | boolean | Array<string | number | boolean>> = {
+            $id: id
+        };
 
         if (filteredColumns.length === 0) {
             row = {
@@ -84,23 +111,61 @@ function generateStringValue(key: string, maxLength: number): string {
     return text.length <= maxLength ? text : text.substring(0, maxLength);
 }
 
-function generateValueForColumn(attribute: Columns): string | number | boolean | null {
-    switch (attribute.type) {
+function generateValueForColumn(
+    column: Columns
+): string | number | boolean | null | Array<string | number | boolean> {
+    if (column.array) {
+        const arraySize = faker.number.int({ min: 1, max: 5 });
+        const items: Array<string | number | boolean> = [];
+
+        for (let i = 0; i < arraySize; i++) {
+            const itemAttribute = { ...column, array: false };
+            const item = generateSingleValue(itemAttribute);
+            if (item !== null) {
+                items.push(item);
+            }
+        }
+
+        return items;
+    }
+
+    return generateSingleValue(column);
+}
+
+function generateSingleValue(column: Columns): string | number | boolean | null {
+    switch (column.type) {
         case 'string': {
-            const stringAttr = attribute as Models.ColumnString;
-            const maxLength = Math.min(stringAttr.size ?? 255, 1000);
-            return generateStringValue(attribute.key, maxLength);
+            if ('format' in column && column.format) {
+                switch (column.format) {
+                    case 'email': {
+                        return faker.internet.email();
+                    }
+
+                    case 'ip': {
+                        return faker.internet.ip();
+                    }
+
+                    case 'url': {
+                        return faker.internet.url();
+                    }
+                }
+                return ''
+            } else {
+                const stringAttr = column as Models.ColumnString;
+                const maxLength = Math.min(stringAttr.size ?? 255, 1000);
+                return generateStringValue(column.key, maxLength);
+            }
         }
 
         case 'integer': {
-            const intAttr = attribute as Models.ColumnInteger;
+            const intAttr = column as Models.ColumnInteger;
             const min = intAttr.min ?? 0;
             const max = intAttr.max ?? 1000000;
             return faker.number.int({ min, max });
         }
 
         case 'float': {
-            const floatAttr = attribute as Models.ColumnFloat;
+            const floatAttr = column as Models.ColumnFloat;
             const min = floatAttr.min ?? 0;
             const max = floatAttr.max ?? 1000000;
             const precision = 2;
@@ -117,20 +182,8 @@ function generateValueForColumn(attribute: Columns): string | number | boolean |
             return faker.date.recent({ days: 365 }).toISOString();
         }
 
-        case 'email': {
-            return faker.internet.email();
-        }
-
-        case 'ip': {
-            return faker.internet.ip();
-        }
-
-        case 'url': {
-            return faker.internet.url();
-        }
-
         case 'enum': {
-            const enumAttr = attribute as Models.ColumnEnum;
+            const enumAttr = column as Models.ColumnEnum;
             if (enumAttr.elements && enumAttr.elements.length > 0) {
                 return faker.helpers.arrayElement(enumAttr.elements);
             }