From 03a94a95636ece3e060124361fa91f2092abec4b Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Thu, 22 May 2025 21:52:25 +0530
Subject: [PATCH 01/66] added selector field for the string encrypted field

---
 .../attributes/string.svelte                  | 39 +++++++++++++++++--
 1 file changed, 36 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 8bfc5e18a..f5dd6535a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -42,15 +42,17 @@
 </script>
 
 <script lang="ts">
-    import { Selector } from '@appwrite.io/pink-svelte';
+    import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
     import { createConservative } from '$lib/helpers/stores';
-    import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
+    import { InputNumber, InputText, InputTextarea, Button } from '$lib/elements/forms';
+    import { Popover, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
         size: 0,
         default: null,
-        array: false
+        array: false,
+        encrypted: false
     };
     export let editing = false;
 
@@ -118,3 +120,34 @@
     disabled={data.required || editing}
     description="Indicate whether this attribute should act as an array, with the default value set as an empty
     array." />
+<Layout.Stack gap="xs" direction="column">
+    <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
+        <Popover let:toggle placement="bottom-start">
+            <Selector.Checkbox
+                size="s"
+                id="encrypted"
+                bind:checked={data.encrypted}
+                disabled={data.required || editing}
+                description="" />
+
+            <Layout.Stack inline gap="xxs">
+                <button type="button" on:click={toggle}>
+                    <Layout.Stack inline direction="row" alignItems="center">
+                        <Typography.Text variant="m-500">Encrypted</Typography.Text>
+                        <Tag variant="default" size="s" on:click={toggle}>Pro</Tag>
+                    </Layout.Stack>
+                </button>
+                <Typography.Text>
+                    Indicate whether this attribute is encrypted. Encrypted attributes cannot be
+                    queried.
+                </Typography.Text>
+            </Layout.Stack>
+            <Layout.Stack gap="xs" slot="tooltip">
+                <ActionMenu.Root width="180px">
+                    <Typography.Text variant="m-500"
+                        >Available on Pro plan. Upgrade to enable encrypted attributes.</Typography.Text>
+                </ActionMenu.Root>
+            </Layout.Stack>
+        </Popover>
+    </Layout.Stack>
+</Layout.Stack>

From 6938834ab42cc63d23c24b6d2611e199c0025659 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Thu, 22 May 2025 23:46:14 +0530
Subject: [PATCH 02/66] updated the popover

---
 .../attributes/string.svelte                  | 68 +++++++++++++------
 1 file changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index f5dd6535a..59d17874b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -44,8 +44,10 @@
 <script lang="ts">
     import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
     import { createConservative } from '$lib/helpers/stores';
-    import { InputNumber, InputText, InputTextarea, Button } from '$lib/elements/forms';
+    import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
     import { Popover, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import { $organization } from '$lib/stores/organization';
+    import { BillingPlan } from '$lib/constants';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
@@ -58,6 +60,20 @@
 
     let savedDefault = data.default;
 
+    function handleCheckboxClick(toggle: () => void) {
+        if ($organization?.billingPlan === BillingPlan.FREE) {
+            toggle();
+        }
+    }
+
+    function handleButtonClick(toggle: () => void) {
+        if ($organization?.billingPlan === BillingPlan.FREE) {
+            toggle();
+        } else {
+            data.encrypted = !data.encrypted;
+        }
+    }
+
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
             savedDefault = data.default;
@@ -122,32 +138,40 @@
     array." />
 <Layout.Stack gap="xs" direction="column">
     <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
-        <Popover let:toggle placement="bottom-start">
-            <Selector.Checkbox
-                size="s"
-                id="encrypted"
-                bind:checked={data.encrypted}
-                disabled={data.required || editing}
-                description="" />
+        <Selector.Checkbox
+            size="s"
+            id="encrypted"
+            bind:checked={data.encrypted}
+            on:click={(e) => handleCheckboxClick(() => toggle(e))}
+            disabled={editing || $organization.billingPlan === BillingPlan.FREE}
+            description="" />
 
-            <Layout.Stack inline gap="xxs">
-                <button type="button" on:click={toggle}>
+        <!-- Stack button and description in a column -->
+        <Layout.Stack gap="xxs" direction="column">
+            <Popover let:toggle placement="bottom-start">
+                <button
+                    type="button"
+                    class="u-cursor-pointer"
+                    on:click={(e) => handleButtonClick(() => toggle(e))}>
                     <Layout.Stack inline direction="row" alignItems="center">
                         <Typography.Text variant="m-500">Encrypted</Typography.Text>
-                        <Tag variant="default" size="s" on:click={toggle}>Pro</Tag>
+                        {#if $organization?.billingPlan === BillingPlan.FREE}
+                            <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
+                        {/if}
                     </Layout.Stack>
                 </button>
-                <Typography.Text>
-                    Indicate whether this attribute is encrypted. Encrypted attributes cannot be
-                    queried.
-                </Typography.Text>
-            </Layout.Stack>
-            <Layout.Stack gap="xs" slot="tooltip">
-                <ActionMenu.Root width="180px">
-                    <Typography.Text variant="m-500"
-                        >Available on Pro plan. Upgrade to enable encrypted attributes.</Typography.Text>
+                <ActionMenu.Root width="180px" slot="tooltip">
+                    <Typography.Text variant="m-500">
+                        Available on Pro plan. Upgrade to enable encrypted attributes.
+                    </Typography.Text>
                 </ActionMenu.Root>
-            </Layout.Stack>
-        </Popover>
+            </Popover>
+
+            <!-- Description text stacked below the button -->
+            <Typography.Text>
+                Indicate whether this attribute is encrypted. Encrypted attributes cannot be
+                queried.
+            </Typography.Text>
+        </Layout.Stack>
     </Layout.Stack>
 </Layout.Stack>

From 2455a4ebb192f38c388e53753d8d0d2686e8fc12 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Fri, 23 May 2025 17:18:19 +0530
Subject: [PATCH 03/66] added checkbox and layout for pro and free users

---
 package.json                                  |  2 +-
 pnpm-lock.yaml                                | 11 ++++-----
 .../attributes/string.svelte                  | 23 ++++++-------------
 3 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/package.json b/package.json
index 851cb4490..f39a885a1 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@1959",
+        "@appwrite.io/console": "^1.8.0",
         "@appwrite.io/pink": "0.25.0",
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92351d55c..220db5e4e 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@1959
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959
+        specifier: ^1.8.0
+        version: 1.8.0
       '@appwrite.io/pink':
         specifier: 0.25.0
         version: 0.25.0
@@ -254,9 +254,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@1959':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959}
-    version: 1.5.2
+  '@appwrite.io/console@1.8.0':
+    resolution: {integrity: sha512-9M2zfg95P5c5CTYseMaE7ULoYJgzLGy624pV2g4DLdWmrX6ltMwP4khulIOsTd3tJpDDwuiInt7odVeoP9iXZg==}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
     resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
@@ -3615,7 +3614,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@1959': {}
+  '@appwrite.io/console@1.8.0': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 59d17874b..2441e8345 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -46,7 +46,7 @@
     import { createConservative } from '$lib/helpers/stores';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
     import { Popover, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
-    import { $organization } from '$lib/stores/organization';
+    import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
 
     export let data: Partial<Models.AttributeString> = {
@@ -54,23 +54,17 @@
         size: 0,
         default: null,
         array: false,
-        encrypted: false
+        encrypt: false
     };
     export let editing = false;
 
     let savedDefault = data.default;
 
-    function handleCheckboxClick(toggle: () => void) {
-        if ($organization?.billingPlan === BillingPlan.FREE) {
-            toggle();
-        }
-    }
-
-    function handleButtonClick(toggle: () => void) {
+    function handleEncryptedLabelClick(toggle: () => void) {
         if ($organization?.billingPlan === BillingPlan.FREE) {
             toggle();
         } else {
-            data.encrypted = !data.encrypted;
+            data.encrypt = !data.encrypt;
         }
     }
 
@@ -141,18 +135,16 @@
         <Selector.Checkbox
             size="s"
             id="encrypted"
-            bind:checked={data.encrypted}
-            on:click={(e) => handleCheckboxClick(() => toggle(e))}
-            disabled={editing || $organization.billingPlan === BillingPlan.FREE}
+            bind:checked={data.encrypt}
+            disabled={$organization.billingPlan === BillingPlan.FREE || editing}
             description="" />
 
-        <!-- Stack button and description in a column -->
         <Layout.Stack gap="xxs" direction="column">
             <Popover let:toggle placement="bottom-start">
                 <button
                     type="button"
                     class="u-cursor-pointer"
-                    on:click={(e) => handleButtonClick(() => toggle(e))}>
+                    on:click={(e) => handleEncryptedLabelClick(() => toggle(e))}>
                     <Layout.Stack inline direction="row" alignItems="center">
                         <Typography.Text variant="m-500">Encrypted</Typography.Text>
                         {#if $organization?.billingPlan === BillingPlan.FREE}
@@ -167,7 +159,6 @@
                 </ActionMenu.Root>
             </Popover>
 
-            <!-- Description text stacked below the button -->
             <Typography.Text>
                 Indicate whether this attribute is encrypted. Encrypted attributes cannot be
                 queried.

From 541b709f07aabf383625775451da9f0069a8b01c Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Fri, 23 May 2025 17:42:15 +0530
Subject: [PATCH 04/66] added condition for showing whether the attribute is
 encrypted or not

---
 .../collection-[collection]/attributes/+page.svelte    | 10 ++++++++--
 .../document-[document]/attributes/store.ts            |  5 +++++
 2 files changed, 13 insertions(+), 2 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 e7803f924..e9a026f71 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
@@ -16,7 +16,7 @@
         Typography
     } from '@appwrite.io/pink-svelte';
     import Create from '../createAttribute.svelte';
-    import { isRelationship } from '../document-[document]/attributes/store';
+    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';
@@ -33,7 +33,8 @@
         IconPlus,
         IconSwitchHorizontal,
         IconTrash,
-        IconViewList
+        IconViewList,
+        IconLockClosed
     } from '@appwrite.io/pink-icons-svelte';
     import type { ComponentProps } from 'svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -113,6 +114,11 @@
                                 <Icon icon={option.icon} size="s" />
                             {/if}
                             <span class="text u-trim-1" data-private>{attribute.key}</span>
+                            {#if isString(attribute) && attribute.encrypt}
+                            <Icon
+                                size="s"
+                                icon={IconLockClosed} />
+                            {/if}
                             {#if attribute.status !== 'available'}
                                 <Badge
                                     size="s"
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts
index 476fccde8..457ba9ffc 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts
@@ -15,3 +15,8 @@ export function isRelationship(attribute: Attributes): attribute is Models.Attri
     if (!attribute) return false;
     return attribute?.type === 'relationship';
 }
+
+export function isString(attribute: Attributes): attribute is Models.AttributeString{
+    if (!attribute) return false;
+    return attribute?.type === 'string';
+}
\ No newline at end of file

From fce1edfa995caaa8d4cb7127d5de292c38a252b2 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Fri, 23 May 2025 18:08:13 +0530
Subject: [PATCH 05/66] added passing encrypt in the create string

---
 .../collection-[collection]/attributes/string.svelte           | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 2441e8345..60ed94904 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -18,7 +18,8 @@
                 data.size,
                 data.required,
                 data.default,
-                data.array
+                data.array,
+                data.encrypt
             );
     }
     export async function updateString(

From 5719a9a5d3ff0250b6c94c89b6976ccf909b61a2 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Fri, 23 May 2025 19:40:00 +0530
Subject: [PATCH 06/66] added icons and interactive text

---
 src/lib/helpers/types.ts                      |  1 +
 .../attributes/+page.svelte                   |  8 +++--
 .../document-[document]/attributes/store.ts   |  4 +--
 .../collection-[collection]/table.svelte      | 35 +++++++++++++------
 4 files changed, 32 insertions(+), 16 deletions(-)

diff --git a/src/lib/helpers/types.ts b/src/lib/helpers/types.ts
index 543fa39ba..7f4e6a66e 100644
--- a/src/lib/helpers/types.ts
+++ b/src/lib/helpers/types.ts
@@ -44,6 +44,7 @@ export type Column = PinkColumn & {
     format?: string;
     exclude?: boolean;
     elements?: string[] | { value: string | number; label: string }[];
+    encrypt?: boolean;
 };
 
 export function isValueOfStringEnum<T extends Record<string, string>>(
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 e9a026f71..294bede16 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
@@ -13,6 +13,7 @@
         Link,
         Popover,
         Table,
+        Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
     import Create from '../createAttribute.svelte';
@@ -115,9 +116,10 @@
                             {/if}
                             <span class="text u-trim-1" data-private>{attribute.key}</span>
                             {#if isString(attribute) && attribute.encrypt}
-                            <Icon
-                                size="s"
-                                icon={IconLockClosed} />
+                                <Tooltip>
+                                    <Icon size="s" icon={IconLockClosed} />
+                                    <div slot="tooltip">Encrypted</div>
+                                </Tooltip>
                             {/if}
                             {#if attribute.status !== 'available'}
                                 <Badge
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts
index 457ba9ffc..3fb3c64de 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/store.ts
@@ -16,7 +16,7 @@ export function isRelationship(attribute: Attributes): attribute is Models.Attri
     return attribute?.type === 'relationship';
 }
 
-export function isString(attribute: Attributes): attribute is Models.AttributeString{
+export function isString(attribute: Attributes): attribute is Models.AttributeString {
     if (!attribute) return false;
     return attribute?.type === 'string';
-}
\ No newline at end of file
+}
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
index abbe66541..04934defb 100644
--- 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
@@ -12,7 +12,11 @@
     import type { Models } from '@appwrite.io/console';
     import { afterUpdate, onMount } from 'svelte';
     import type { PageData } from './$types';
-    import { isRelationship, isRelationshipToMany } from './document-[document]/attributes/store';
+    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';
@@ -22,10 +26,10 @@
         Button,
         Link,
         Badge,
-        FloatingActionBar
+        FloatingActionBar,
+        InteractiveText
     } from '@appwrite.io/pink-svelte';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
-
     export let data: PageData;
 
     const databaseId = page.params.database;
@@ -237,14 +241,23 @@
                         {/if}
                     {:else}
                         {@const formatted = formatColumn(document[id])}
-                        <Tooltip disabled={!formatted.truncated} placement="bottom">
-                            <span>
-                                {formatted.value}
-                            </span>
-                            <span style:white-space="pre-wrap" slot="tooltip">
-                                {formatted.whole}
-                            </span>
-                        </Tooltip>
+                        {#if isString(attr) && attr.encrypt}
+                            <button on:click={(e) => e.preventDefault()}>
+                                <InteractiveText
+                                    variant="secret"
+                                    isVisible={false}
+                                    text={formatted.value} />
+                            </button>
+                        {:else}
+                            <Tooltip disabled={!formatted.truncated} placement="bottom">
+                                <span>
+                                    {formatted.value}
+                                </span>
+                                <span style:white-space="pre-wrap" slot="tooltip">
+                                    {formatted.whole}
+                                </span>
+                            </Tooltip>
+                        {/if}
                     {/if}
                 </Table.Cell>
             {/each}

From 2a6ed294ac1535162b245d19eda347a461179369 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Fri, 23 May 2025 19:46:00 +0530
Subject: [PATCH 07/66] added anchor to the upgrade

---
 .../collection-[collection]/attributes/string.svelte       | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 60ed94904..036871147 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -46,9 +46,10 @@
     import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
     import { createConservative } from '$lib/helpers/stores';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
-    import { Popover, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
+    import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';
     import { organization } from '$lib/stores/organization';
     import { BillingPlan } from '$lib/constants';
+    import { base } from '$app/paths';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
@@ -155,7 +156,9 @@
                 </button>
                 <ActionMenu.Root width="180px" slot="tooltip">
                     <Typography.Text variant="m-500">
-                        Available on Pro plan. Upgrade to enable encrypted attributes.
+                        Available on Pro plan.<Link.Anchor
+                            href={`${base}/organization-${$organization.$id}/change-plan`}
+                            >Upgrade</Link.Anchor> to enable encrypted attributes.
                     </Typography.Text>
                 </ActionMenu.Root>
             </Popover>

From 09fa149d085153ae63085a3112f82135e1cd4e19 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Fri, 23 May 2025 20:27:11 +0530
Subject: [PATCH 08/66] updated plans

---
 src/lib/sdk/billing.ts                               |  1 +
 .../collection-[collection]/attributes/string.svelte | 12 +++++++-----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 5ce84abba..bf34a3611 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -338,6 +338,7 @@ export type Plan = {
     backupPolicies: number;
     emailBranding: boolean;
     supportsCredits: boolean;
+    databasesAllowEncrypt: boolean;
 };
 
 export type PlanList = {
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 036871147..23d54a40d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -47,9 +47,9 @@
     import { createConservative } from '$lib/helpers/stores';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
     import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
+    import { currentPlan, organization } from '$lib/stores/organization';
     import { base } from '$app/paths';
+    import { isCloud } from '$lib/system';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
@@ -63,7 +63,7 @@
     let savedDefault = data.default;
 
     function handleEncryptedLabelClick(toggle: () => void) {
-        if ($organization?.billingPlan === BillingPlan.FREE) {
+        if (!hasDatabaseEncryptionPlan) {
             toggle();
         } else {
             data.encrypt = !data.encrypt;
@@ -90,6 +90,8 @@
     $: listen(data);
 
     $: handleDefaultState($required || $array);
+
+    $: hasDatabaseEncryptionPlan = isCloud && $currentPlan?.databasesAllowEncrypt;
 </script>
 
 <InputNumber
@@ -138,7 +140,7 @@
             size="s"
             id="encrypted"
             bind:checked={data.encrypt}
-            disabled={$organization.billingPlan === BillingPlan.FREE || editing}
+            disabled={!hasDatabaseEncryptionPlan || editing}
             description="" />
 
         <Layout.Stack gap="xxs" direction="column">
@@ -149,7 +151,7 @@
                     on:click={(e) => handleEncryptedLabelClick(() => toggle(e))}>
                     <Layout.Stack inline direction="row" alignItems="center">
                         <Typography.Text variant="m-500">Encrypted</Typography.Text>
-                        {#if $organization?.billingPlan === BillingPlan.FREE}
+                        {#if !hasDatabaseEncryptionPlan}
                             <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
                         {/if}
                     </Layout.Stack>

From ed7935fc6caa7709551dab6e5d11c8dff66b8de9 Mon Sep 17 00:00:00 2001
From: ArnabChatterjee20k <arnabchatterjee.ac.2@gmail.com>
Date: Sat, 24 May 2025 15:39:48 +0530
Subject: [PATCH 09/66] added reactive state for string size and the cloud and
 self hosted env popper encryption trigger

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

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 23d54a40d..c60ac8a32 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -91,7 +91,11 @@
 
     $: handleDefaultState($required || $array);
 
-    $: hasDatabaseEncryptionPlan = isCloud && $currentPlan?.databasesAllowEncrypt;
+    $: hasDatabaseEncryptionPlan = isCloud ? $currentPlan?.databasesAllowEncrypt : true;
+
+    $: if (data.encrypt && data.size < 150) {
+        data.size = 150;
+    }
 </script>
 
 <InputNumber

From dda19ef82ed8ac3c89af9f77bae317effb39ab83 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 27 May 2025 13:20:42 +0530
Subject: [PATCH 10/66] update: ui logic.

---
 .../attributes/string.svelte                  | 142 +++++++++---------
 1 file changed, 75 insertions(+), 67 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index c60ac8a32..83986ee7f 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -43,33 +43,25 @@
 </script>
 
 <script lang="ts">
-    import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
+    import { isCloud } from '$lib/system';
+    import { upgradeURL } from '$lib/stores/billing';
+    import { currentPlan } from '$lib/stores/organization';
     import { createConservative } from '$lib/helpers/stores';
+    import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
     import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';
-    import { currentPlan, organization } from '$lib/stores/organization';
-    import { base } from '$app/paths';
-    import { isCloud } from '$lib/system';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
         size: 0,
-        default: null,
         array: false,
         encrypt: false
     };
+
     export let editing = false;
 
     let savedDefault = data.default;
 
-    function handleEncryptedLabelClick(toggle: () => void) {
-        if (!hasDatabaseEncryptionPlan) {
-            toggle();
-        } else {
-            data.encrypt = !data.encrypt;
-        }
-    }
-
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
             savedDefault = data.default;
@@ -87,42 +79,36 @@
         array: false,
         ...data
     });
+
     $: listen(data);
 
     $: handleDefaultState($required || $array);
 
-    $: hasDatabaseEncryptionPlan = isCloud ? $currentPlan?.databasesAllowEncrypt : true;
-
-    $: if (data.encrypt && data.size < 150) {
-        data.size = 150;
-    }
+    // check plan on cloud, always allow on self-hosted!
+    $: supportsStringEncryption = isCloud ? $currentPlan?.databasesAllowEncrypt : true;
 </script>
 
 <InputNumber
     id="size"
     label="Size"
+    required
     placeholder="Enter size"
     bind:value={data.size}
-    required={true} />
-{#if data.size >= 50}
-    <InputTextarea
-        id="default"
-        label="Default"
-        placeholder="Enter string"
-        disabled={data.required || data.array}
-        nullable={!data.required && !data.array}
-        maxlength={data.size}
-        bind:value={data.default} />
-{:else}
-    <InputText
-        id="default"
-        label="Default"
-        placeholder="Enter string"
-        disabled={data.required || data.array}
-        nullable={!data.required && !data.array}
-        maxlength={data.size}
-        bind:value={data.default} />
-{/if}
+    min={supportsStringEncryption && data.encrypt ? 150 : undefined}
+    helper={supportsStringEncryption && data.encrypt
+        ? 'Encrypted string attributes require a minimum size of 150.'
+        : undefined} />
+
+<svelte:component
+    this={data.size >= 50 ? InputTextarea : InputText}
+    id="default"
+    label="Default"
+    placeholder="Enter string"
+    maxlength={data.size}
+    bind:value={data.default}
+    disabled={data.required || data.array}
+    nullable={!data.required && !data.array} />
+
 <Selector.Checkbox
     size="s"
     id="required"
@@ -130,6 +116,7 @@
     bind:checked={data.required}
     disabled={data.array}
     description="Indicate whether this attribute is required" />
+
 <Selector.Checkbox
     size="s"
     id="array"
@@ -138,41 +125,62 @@
     disabled={data.required || editing}
     description="Indicate whether this attribute should act as an array, with the default value set as an empty
     array." />
-<Layout.Stack gap="xs" direction="column">
-    <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
-        <Selector.Checkbox
-            size="s"
-            id="encrypted"
-            bind:checked={data.encrypt}
-            disabled={!hasDatabaseEncryptionPlan || editing}
-            description="" />
 
-        <Layout.Stack gap="xxs" direction="column">
+<Layout.Stack gap="xs" direction="column">
+    <div class="popover-holder" class:disabled-checkbox={!supportsStringEncryption || editing}>
+        <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
             <Popover let:toggle placement="bottom-start">
-                <button
-                    type="button"
-                    class="u-cursor-pointer"
-                    on:click={(e) => handleEncryptedLabelClick(() => toggle(e))}>
-                    <Layout.Stack inline direction="row" alignItems="center">
-                        <Typography.Text variant="m-500">Encrypted</Typography.Text>
-                        {#if !hasDatabaseEncryptionPlan}
-                            <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
-                        {/if}
-                    </Layout.Stack>
-                </button>
+                <Selector.Checkbox
+                    size="s"
+                    id="encrypt"
+                    bind:checked={data.encrypt}
+                    disabled={!supportsStringEncryption || editing} />
+
+                <Layout.Stack gap="xxs" direction="column">
+                    <button
+                        type="button"
+                        class="u-cursor-pointer"
+                        on:click={(e) => {
+                            if (!supportsStringEncryption) {
+                                toggle(e);
+                            } else {
+                                data.encrypt = !data.encrypt;
+                            }
+                        }}>
+                        <Layout.Stack inline gap="xxs" direction="row" alignItems="center">
+                            <Typography.Text variant="m-500">Encrypted</Typography.Text>
+                            {#if !supportsStringEncryption}
+                                <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
+                            {/if}
+                        </Layout.Stack>
+                    </button>
+                    <Typography.Text color="--fgcolor-neutral-tertiary">
+                        Indicate whether this attribute is encrypted. Encrypted attributes cannot be
+                        queried.
+                    </Typography.Text>
+                </Layout.Stack>
+
                 <ActionMenu.Root width="180px" slot="tooltip">
                     <Typography.Text variant="m-500">
-                        Available on Pro plan.<Link.Anchor
-                            href={`${base}/organization-${$organization.$id}/change-plan`}
-                            >Upgrade</Link.Anchor> to enable encrypted attributes.
+                        Available on Pro plan. <Link.Anchor href={$upgradeURL}>Upgrade</Link.Anchor>
+                        to enable encrypted attributes.
                     </Typography.Text>
                 </ActionMenu.Root>
             </Popover>
-
-            <Typography.Text>
-                Indicate whether this attribute is encrypted. Encrypted attributes cannot be
-                queried.
-            </Typography.Text>
         </Layout.Stack>
-    </Layout.Stack>
+    </div>
 </Layout.Stack>
+
+<style lang="scss">
+    .popover-holder {
+        & :global([role='tooltip']) {
+            margin-top: 2px;
+            left: 8rem !important;
+        }
+
+        // no cursor when disabled
+        &.disabled-checkbox :global(button) {
+            cursor: unset !important;
+        }
+    }
+</style>

From 7b46ad303ae900230447ba2a96feb830283bf63c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 27 May 2025 16:56:05 +0530
Subject: [PATCH 11/66] address design comments.

---
 package.json                                  |  3 +-
 pnpm-lock.yaml                                | 35 +++---------
 .../attributes/+page.svelte                   | 55 +++++++++++--------
 .../attributes/string.svelte                  |  7 +--
 .../collection-[collection]/table.svelte      |  3 +-
 5 files changed, 46 insertions(+), 57 deletions(-)

diff --git a/package.json b/package.json
index 5992460a1..a859e80f2 100644
--- a/package.json
+++ b/package.json
@@ -23,11 +23,10 @@
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e190a19",
-        "@appwrite.io/pink": "0.25.0",
         "@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://try-module.cloud/module/@appwrite/@appwrite.io/pink-svelte@0cc439f",
+        "@appwrite.io/pink-svelte": "https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@063404f",
         "@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 20316f694..fa9b83754 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,6 @@ importers:
       '@appwrite.io/console':
         specifier: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e190a19
         version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@e190a19
-      '@appwrite.io/pink':
-        specifier: 0.25.0
-        version: 0.25.0
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
@@ -27,8 +24,8 @@ importers:
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://try-module.cloud/module/@appwrite/@appwrite.io/pink-svelte@0cc439f
-        version: https://try-module.cloud/module/@appwrite/%40appwrite.io%2Fpink-svelte@0cc439f(svelte@5.25.3)
+        specifier: https://try-module.cloud/-/@appwrite/@appwrite.io/pink-svelte@063404f
+        version: https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@063404f(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -281,15 +278,12 @@ packages:
   '@appwrite.io/pink-legacy@1.0.3':
     resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}
 
-  '@appwrite.io/pink-svelte@https://try-module.cloud/module/@appwrite/%40appwrite.io%2Fpink-svelte@0cc439f':
-    resolution: {tarball: https://try-module.cloud/module/@appwrite/%40appwrite.io%2Fpink-svelte@0cc439f}
+  '@appwrite.io/pink-svelte@https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@063404f':
+    resolution: {tarball: https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@063404f}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink@0.25.0':
-    resolution: {integrity: sha512-9z4G/iAhjvVpM7tkNqzGqrokst4hvNt3Fkf2jD4W6n8j//EJbQ3mJ0I+5dye5Sry0a33wUanq5DSztqFNYq5zw==}
-
   '@asamuzakjp/css-color@3.1.1':
     resolution: {integrity: sha512-hpRD68SV2OMcZCsrbdkccTw5FXjNDLo5OuqSHyHZfwweGsDWZwDJ2+gONyNAbazZclobMirACLw0lk8WVxIqxA==}
 
@@ -1343,8 +1337,8 @@ packages:
   '@types/prop-types@15.7.14':
     resolution: {integrity: sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==}
 
-  '@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==}
@@ -2664,9 +2658,6 @@ packages:
     resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==}
     engines: {node: '>=0.10.0'}
 
-  normalize.css@8.0.1:
-    resolution: {integrity: sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==}
-
   nwsapi@2.2.20:
     resolution: {integrity: sha512-/ieB+mDe4MrrKMT8z+mQL8klXydZWGR5Dowt4RAGKbJ3kIGEx3X4ljUo+6V73IXtUPWgfOlU5B9MlGxFO5T+cA==}
 
@@ -3644,7 +3635,7 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://try-module.cloud/module/@appwrite/%40appwrite.io%2Fpink-svelte@0cc439f(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://try-module.cloud/-/@appwrite/%40appwrite.io%2Fpink-svelte@063404f(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
@@ -3659,12 +3650,6 @@ snapshots:
       svelte-motion: 0.12.2(svelte@5.25.3)
       svelte-sonner: 0.3.28(svelte@5.25.3)
 
-  '@appwrite.io/pink@0.25.0':
-    dependencies:
-      '@appwrite.io/pink-icons': 0.25.0
-      normalize.css: 8.0.1
-      the-new-css-reset: 1.11.3
-
   '@asamuzakjp/css-color@3.1.1':
     dependencies:
       '@csstools/css-calc': 2.1.2(@csstools/css-parser-algorithms@3.0.4(@csstools/css-tokenizer@3.0.3))(@csstools/css-tokenizer@3.0.3)
@@ -4787,7 +4772,7 @@ snapshots:
 
   '@types/prop-types@15.7.14': {}
 
-  '@types/react@18.3.22':
+  '@types/react@18.3.23':
     dependencies:
       '@types/prop-types': 15.7.14
       csstype: 3.1.3
@@ -6254,8 +6239,6 @@ snapshots:
 
   normalize-path@3.0.0: {}
 
-  normalize.css@8.0.1: {}
-
   nwsapi@2.2.20: {}
 
   object-inspect@1.13.4: {}
@@ -6735,7 +6718,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
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 294bede16..7d126c359 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
@@ -114,31 +114,38 @@
                             {:else}
                                 <Icon icon={option.icon} size="s" />
                             {/if}
-                            <span class="text u-trim-1" data-private>{attribute.key}</span>
-                            {#if isString(attribute) && attribute.encrypt}
-                                <Tooltip>
-                                    <Icon size="s" icon={IconLockClosed} />
-                                    <div slot="tooltip">Encrypted</div>
-                                </Tooltip>
-                            {/if}
-                            {#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>
+                            <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}
-                            {:else if attribute.required}
-                                <Badge size="s" variant="secondary" content="required" />
-                            {/if}
+                            </Layout.Stack>
                         </Layout.Stack>
                     </Table.Cell>
                     <Table.Cell column="type" {root}>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 83986ee7f..d06989612 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -115,7 +115,7 @@
     label="Required"
     bind:checked={data.required}
     disabled={data.array}
-    description="Indicate whether this attribute is required" />
+    description="Indicate whether this attribute is required." />
 
 <Selector.Checkbox
     size="s"
@@ -123,8 +123,7 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
 
 <Layout.Stack gap="xs" direction="column">
     <div class="popover-holder" class:disabled-checkbox={!supportsStringEncryption || editing}>
@@ -174,7 +173,7 @@
 <style lang="scss">
     .popover-holder {
         & :global([role='tooltip']) {
-            margin-top: 2px;
+            margin-top: 4px;
             left: 8rem !important;
         }
 
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
index 04934defb..111ad49ab 100644
--- 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
@@ -241,9 +241,10 @@
                         {/if}
                     {:else}
                         {@const formatted = formatColumn(document[id])}
-                        {#if isString(attr) && attr.encrypt}
+                        {#if isString(attr) && !attr.encrypt}
                             <button on:click={(e) => e.preventDefault()}>
                                 <InteractiveText
+                                    copy={false}
                                     variant="secret"
                                     isVisible={false}
                                     text={formatted.value} />

From 0875889706d756e7113b1704f18c4cae4d6312cd Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 27 May 2025 16:57:46 +0530
Subject: [PATCH 12/66] update: array attribute type message.

---
 .../collection-[collection]/attributes/boolean.svelte          | 3 +--
 .../collection-[collection]/attributes/datetime.svelte         | 3 +--
 .../collection-[collection]/attributes/email.svelte            | 3 +--
 .../collection-[collection]/attributes/enum.svelte             | 3 +--
 .../collection-[collection]/attributes/float.svelte            | 3 +--
 .../collection-[collection]/attributes/integer.svelte          | 3 +--
 .../collection-[collection]/attributes/ip.svelte               | 3 +--
 .../collection-[collection]/attributes/url.svelte              | 3 +--
 8 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
index 9959b7229..911154864 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/boolean.svelte
@@ -100,5 +100,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
index cb40c72c9..1464c8c12 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/datetime.svelte
@@ -92,5 +92,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
index 07faa118f..9aa79bfc5 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/email.svelte
@@ -93,5 +93,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
index 2eed37bb1..b617dc82c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/enum.svelte
@@ -124,5 +124,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
index 2480a2d97..5c8646605 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/float.svelte
@@ -122,5 +122,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
index de97fccff..faa220fa0 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/integer.svelte
@@ -120,5 +120,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
index a097bcbbd..5ae8043d9 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/ip.svelte
@@ -92,5 +92,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
index 4c9d6991e..2d003a21a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
@@ -93,5 +93,4 @@
     label="Array"
     bind:checked={data.array}
     disabled={data.required || editing}
-    description="Indicate whether this attribute should act as an array, with the default value set as an empty
-    array." />
+    description="Indicate whether this attribute is an array. Defaults to an empty array." />

From dd2aa5fe06fad253b5f889d6c64d08f603705bd2 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 04:38:02 +0000
Subject: [PATCH 13/66] Check for enterprise plan

---
 src/lib/stores/billing.ts | 34 ++++++++++++++++++++++++++++++++--
 1 file changed, 32 insertions(+), 2 deletions(-)

diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index e9388c8c9..05dde454f 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -28,12 +28,13 @@ import { Query } from '@appwrite.io/console';
 import { derived, get, writable } from 'svelte/store';
 import { headerAlert } from './headerAlert';
 import { addNotification, notifications } from './notifications';
-import { organization, type Organization, type OrganizationError } from './organization';
+import { currentPlan, organization, type Organization, type OrganizationError } from './organization';
 import { canSeeBilling } from './roles';
 import { sdk } from './sdk';
 import { user } from './user';
 import BudgetLimitAlert from '$routes/(console)/organization-[organization]/budgetLimitAlert.svelte';
 import TeamReadonlyAlert from '$routes/(console)/organization-[organization]/teamReadonlyAlert.svelte';
+import EnterpriseTrial from '$routes/(console)/organization-[organization]/enterpriseTrial.svelte';
 
 export type Tier = 'tier-0' | 'tier-1' | 'tier-2' | 'auto-1' | 'cont-1' | 'ent-1';
 
@@ -268,6 +269,35 @@ export function isServiceLimited(serviceId: PlanServices, plan: Tier, total: num
     return isLimited && total >= limit && !hasUsageFees;
 }
 
+export function checkForEnterpriseTrial(org: Organization) {
+    const remaining  = calculateEnterpriseTrial(org);
+    console.log('remaining', remaining);
+    if(calculateEnterpriseTrial(org) > 0) {
+         headerAlert.add({
+            id: 'temaEnterprieseTrial',
+            component: EnterpriseTrial,
+            show: true,
+            importance: 11
+        });
+    }
+}
+
+export function calculateEnterpriseTrial(org: Organization) {
+    const endDate = new Date(org.billingNextInvoiceDate);
+    const startDate = new Date(org.billingCurrentInvoiceDate);
+    const today = new Date();
+
+    let diffCycle = endDate.getTime() - startDate.getTime();
+    diffCycle = Math.ceil(diffCycle / (1000 * 60 * 60 * 24)) + 1;
+    console.log('diffCycle', diffCycle);
+    if (diffCycle === 15) {
+        const remaining = endDate.getTime() - today.getTime();
+        const days = Math.ceil(remaining / (1000 * 60 * 60 * 24)) + 1;
+        return days;
+    }
+    return 0;
+}
+
 export function calculateTrialDay(org: Organization) {
     if (org?.billingPlan === BillingPlan.FREE) return false;
     const endDate = new Date(org?.billingStartDate);
@@ -323,7 +353,7 @@ export async function checkForUsageLimit(org: Organization) {
     ];
 
     const members = org.total;
-    const plan = get(plansInfo)?.get(org.billingPlan);
+    const plan = get(currentPlan);
     const membersOverflow =
         members > plan.addons.seats.limit ? members - (plan.addons.seats.limit || members) : 0;
 

From e8ccbf2f5016a1e11494ddc1482e9c34f7f6c2a3 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 04:48:42 +0000
Subject: [PATCH 14/66] trial banner

---
 src/routes/(console)/+layout.svelte           |  2 +
 .../enterpriseTrial.svelte                    | 68 +++++++++++++++++++
 2 files changed, 70 insertions(+)
 create mode 100644 src/routes/(console)/organization-[organization]/enterpriseTrial.svelte

diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 9d7a72d6d..3c04881a9 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -13,6 +13,7 @@
     import Create from './createOrganization.svelte';
     import {
         calculateTrialDay,
+        checkForEnterpriseTrial,
         checkForMandate,
         checkForMarkedForDeletion,
         checkForMissingPaymentMethod,
@@ -304,6 +305,7 @@
         if (currentOrganizationId === org.$id) return;
         if (isCloud) {
             currentOrganizationId = org.$id;
+            await checkForEnterpriseTrial(org);
             await checkForUsageLimit(org);
             checkForMarkedForDeletion(org);
             await checkForNewDevUpgradePro(org);
diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
new file mode 100644
index 000000000..8b2630249
--- /dev/null
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+    import { page } from '$app/state';
+    import { Button } from '$lib/elements/forms';
+    import { organization } from '$lib/stores/organization';
+    import { calculateEnterpriseTrial, hideBillingHeaderRoutes } from '$lib/stores/billing';
+    import { base } from '$app/paths';
+
+    import { onDestroy, onMount } from 'svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import GradientBanner from '$lib/components/billing/gradientBanner.svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+
+    let container: HTMLElement | null = null;
+
+    function setNavigationHeight() {
+        const alertHeight = container ? container.getBoundingClientRect().height : 0;
+        const header: HTMLHeadingElement = document.querySelector('main > header');
+        const sidebar: HTMLElement = document.querySelector('main > div > nav');
+        const contentSection: HTMLElement = document.querySelector('main > div > section');
+
+        if (header) {
+            header.style.top = `${alertHeight}px`;
+        }
+        if (sidebar) {
+            sidebar.style.top = `${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px`;
+            sidebar.style.height = `calc(100vh - (${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px))`;
+        }
+        if (contentSection) {
+            contentSection.style.paddingBlockStart = `${alertHeight}px`;
+        }
+    }
+
+    onMount(() => {
+        setNavigationHeight();
+    });
+
+    onDestroy(() => {
+        container = null;
+        setNavigationHeight();
+    });
+
+    $: upgradeUrl = `${base}/organization-${$organization?.$id}/billing`;
+    $: remainingDays = calculateEnterpriseTrial($organization);
+</script>
+
+<svelte:window on:resize={setNavigationHeight} />
+{#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
+    <GradientBanner>
+        <Layout.Stack
+            gap="m"
+            alignItems="center"
+            alignContent="space-between"
+            direction={$isTabletViewport ? 'column' : 'row'}>
+            <Typography.Text>
+                Your enterprise trial expires in {remainingDays} days.
+            </Typography.Text>
+
+
+            <Button
+                secondary
+                fullWidthMobile
+                class="u-line-height-1 u-gap-16"
+                href={upgradeUrl}>
+                Upgrade
+            </Button>
+        </Layout.Stack>
+    </GradientBanner>
+{/if}

From a5160e0c745cdda404c02ab5be26fda418c168cc Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 8 Jun 2025 10:23:19 +0530
Subject: [PATCH 15/66] fix: show correct plan name tag/badge.

---
 src/lib/components/breadcrumbs.svelte | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/breadcrumbs.svelte b/src/lib/components/breadcrumbs.svelte
index 0951839d8..01f8c72a2 100644
--- a/src/lib/components/breadcrumbs.svelte
+++ b/src/lib/components/breadcrumbs.svelte
@@ -12,7 +12,7 @@
     import { isCloud } from '$lib/system';
     import { goto } from '$app/navigation';
     import { base } from '$app/paths';
-    import { newOrgModal } from '$lib/stores/organization';
+    import { currentPlan, newOrgModal } from '$lib/stores/organization';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import { page } from '$app/stores';
 
@@ -182,6 +182,14 @@
             projectsBottomSheetOpen = false;
         }
     }
+
+    $: correctPlanName =
+        // the plan names are hardcoded in some cases and are not available locally,
+        // so we rely on the plan's source of truth - `$currentPlan`
+        $currentPlan &&
+        $currentPlan?.name.toLocaleLowerCase() !== selectedOrg?.tierName.toLocaleLowerCase()
+            ? $currentPlan.name
+            : selectedOrg?.tierName; // fallback
 </script>
 
 <svelte:window on:resize={onResize} />
@@ -195,9 +203,9 @@
             aria-label="Open organizations tab">
             <span class="orgName">{selectedOrg?.name ?? 'Organization'}</span>
             <span class="not-mobile"
-                >{#if selectedOrg?.tierName}<Badge
+                >{#if correctPlanName}<Badge
                         variant="secondary"
-                        content={selectedOrg?.tierName} />{/if}</span>
+                        content={correctPlanName} />{/if}</span>
             <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
         </button>
     {:else}
@@ -211,7 +219,7 @@
             <span class="orgName" class:noProjects={!selectedProject}
                 >{selectedOrg?.name ?? 'Organization'}</span>
             <span class="not-mobile"
-                ><Badge variant="secondary" content={selectedOrg?.tierName ?? ''} /></span>
+                ><Badge variant="secondary" content={correctPlanName ?? ''} /></span>
             <Icon icon={IconChevronDown} size="s" color="--fgcolor-neutral-secondary" />
         </button>
     {/if}

From e5a29376e6e52ddf3f53de72f4af792bb4d08462 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 8 Jun 2025 10:45:44 +0530
Subject: [PATCH 16/66] add: current plan if not one of the base plans.

---
 .../components/billing/planSelection.svelte   | 27 +++++++++++++++++--
 src/lib/constants.ts                          |  2 ++
 src/lib/stores/billing.ts                     | 15 +++++++----
 .../enterpriseTrial.svelte                    |  7 +----
 4 files changed, 38 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte
index d2889d66f..7c1666675 100644
--- a/src/lib/components/billing/planSelection.svelte
+++ b/src/lib/components/billing/planSelection.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-    import { BillingPlan } from '$lib/constants';
+    import { BASE_BILLING_PLANS, BillingPlan } from '$lib/constants';
     import { formatCurrency } from '$lib/helpers/numbers';
     import { plansInfo, type Tier, tierFree, tierPro, tierScale } from '$lib/stores/billing';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan, organization } from '$lib/stores/organization';
     import { Badge, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { LabelCard } from '..';
 
@@ -14,6 +14,8 @@
     $: freePlan = $plansInfo.get(BillingPlan.FREE);
     $: proPlan = $plansInfo.get(BillingPlan.PRO);
     $: scalePlan = $plansInfo.get(BillingPlan.SCALE);
+
+    $: isBasePlan = BASE_BILLING_PLANS.includes($currentPlan?.$id);
 </script>
 
 <Layout.Stack>
@@ -72,4 +74,25 @@
             {formatCurrency(scalePlan?.price ?? 0)} per month + usage
         </Typography.Text>
     </LabelCard>
+    {#if !isBasePlan}
+        <LabelCard
+            name="plan"
+            bind:group={billingPlan}
+            value={$currentPlan.$id}
+            title={$currentPlan.name}>
+            <svelte:fragment slot="action">
+                {#if $organization?.billingPlan === $currentPlan.$id && !isNewOrg}
+                    <Badge variant="secondary" size="xs" content="Current plan" />
+                {/if}
+            </svelte:fragment>
+            <Typography.Caption variant="400">
+                {$currentPlan.desc}
+            </Typography.Caption>
+            <Typography.Text>
+                {@const isZeroPrice = ($currentPlan?.price ?? 0) <= 0}
+                {@const price = formatCurrency($currentPlan?.price ?? 0)}
+                {isZeroPrice ? price : `${price} per month + usage`}
+            </Typography.Text>
+        </LabelCard>
+    {/if}
 </Layout.Stack>
diff --git a/src/lib/constants.ts b/src/lib/constants.ts
index 067b354dd..cd9dc4364 100644
--- a/src/lib/constants.ts
+++ b/src/lib/constants.ts
@@ -530,6 +530,8 @@ export enum BillingPlan {
     ENTERPRISE = 'ent-1'
 }
 
+export const BASE_BILLING_PLANS: string[] = [BillingPlan.FREE, BillingPlan.PRO, BillingPlan.SCALE];
+
 export const feedbackDowngradeOptions = [
     {
         value: 'availableFeatures',
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 05dde454f..38b7be72e 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -28,7 +28,12 @@ import { Query } from '@appwrite.io/console';
 import { derived, get, writable } from 'svelte/store';
 import { headerAlert } from './headerAlert';
 import { addNotification, notifications } from './notifications';
-import { currentPlan, organization, type Organization, type OrganizationError } from './organization';
+import {
+    currentPlan,
+    organization,
+    type Organization,
+    type OrganizationError
+} from './organization';
 import { canSeeBilling } from './roles';
 import { sdk } from './sdk';
 import { user } from './user';
@@ -270,11 +275,11 @@ export function isServiceLimited(serviceId: PlanServices, plan: Tier, total: num
 }
 
 export function checkForEnterpriseTrial(org: Organization) {
-    const remaining  = calculateEnterpriseTrial(org);
+    const remaining = calculateEnterpriseTrial(org);
     console.log('remaining', remaining);
-    if(calculateEnterpriseTrial(org) > 0) {
-         headerAlert.add({
-            id: 'temaEnterprieseTrial',
+    if (calculateEnterpriseTrial(org) > 0) {
+        headerAlert.add({
+            id: 'teamEnterpriseTrial',
             component: EnterpriseTrial,
             show: true,
             importance: 11
diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index 8b2630249..75e27d112 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -55,12 +55,7 @@
                 Your enterprise trial expires in {remainingDays} days.
             </Typography.Text>
 
-
-            <Button
-                secondary
-                fullWidthMobile
-                class="u-line-height-1 u-gap-16"
-                href={upgradeUrl}>
+            <Button secondary fullWidthMobile class="u-line-height-1 u-gap-16" href={upgradeUrl}>
                 Upgrade
             </Button>
         </Layout.Stack>

From cc954b899bd3d1f7e9136991788b6a50329a8655 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 05:20:18 +0000
Subject: [PATCH 17/66] fix url

---
 .../organization-[organization]/enterpriseTrial.svelte          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index 75e27d112..e7b1a05e3 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -39,7 +39,7 @@
         setNavigationHeight();
     });
 
-    $: upgradeUrl = `${base}/organization-${$organization?.$id}/billing`;
+    $: upgradeUrl = `${base}/organization-${$organization?.$id}/change-plan`;
     $: remainingDays = calculateEnterpriseTrial($organization);
 </script>
 

From f65942b26690813817dae37e1ce80a570b85ab90 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 8 Jun 2025 10:53:06 +0530
Subject: [PATCH 18/66] fix: nav bar hidden under alert.

---
 .../enterpriseTrial.svelte                    | 32 -------------------
 1 file changed, 32 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index e7b1a05e3..2115e72e0 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -4,46 +4,14 @@
     import { organization } from '$lib/stores/organization';
     import { calculateEnterpriseTrial, hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { base } from '$app/paths';
-
-    import { onDestroy, onMount } from 'svelte';
     import { isTabletViewport } from '$lib/stores/viewport';
     import GradientBanner from '$lib/components/billing/gradientBanner.svelte';
     import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
-    let container: HTMLElement | null = null;
-
-    function setNavigationHeight() {
-        const alertHeight = container ? container.getBoundingClientRect().height : 0;
-        const header: HTMLHeadingElement = document.querySelector('main > header');
-        const sidebar: HTMLElement = document.querySelector('main > div > nav');
-        const contentSection: HTMLElement = document.querySelector('main > div > section');
-
-        if (header) {
-            header.style.top = `${alertHeight}px`;
-        }
-        if (sidebar) {
-            sidebar.style.top = `${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px`;
-            sidebar.style.height = `calc(100vh - (${alertHeight + ($isTabletViewport ? 0 : header.getBoundingClientRect().height)}px))`;
-        }
-        if (contentSection) {
-            contentSection.style.paddingBlockStart = `${alertHeight}px`;
-        }
-    }
-
-    onMount(() => {
-        setNavigationHeight();
-    });
-
-    onDestroy(() => {
-        container = null;
-        setNavigationHeight();
-    });
-
     $: upgradeUrl = `${base}/organization-${$organization?.$id}/change-plan`;
     $: remainingDays = calculateEnterpriseTrial($organization);
 </script>
 
-<svelte:window on:resize={setNavigationHeight} />
 {#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
     <GradientBanner>
         <Layout.Stack

From a12142259c312bed457b630c034b0c7d5a0eab3e Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 8 Jun 2025 12:11:25 +0530
Subject: [PATCH 19/66] add: enterprise trial banner.

---
 .../components/billing/gradientBanner.svelte  | 66 +++++++++++-----
 src/lib/images/pink-background.svg            | 76 +++++++++++++++++++
 src/lib/stores/billing.ts                     |  8 +-
 src/routes/(console)/+layout.svelte           |  2 +-
 .../enterpriseTrial.svelte                    | 53 +++++++++----
 5 files changed, 167 insertions(+), 38 deletions(-)
 create mode 100644 src/lib/images/pink-background.svg

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 27c58ce62..86cf1d9ee 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -1,10 +1,13 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { isTabletViewport } from '$lib/stores/viewport';
-    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
     import { Button } from '$lib/elements/forms';
     import { Icon } from '@appwrite.io/pink-svelte';
     import { IconX } from '@appwrite.io/pink-icons-svelte';
+    import { isTabletViewport } from '$lib/stores/viewport';
+    import PinkBackground from '$lib/images/pink-background.svg';
+    import { createEventDispatcher, onMount, onDestroy } from 'svelte';
+
+    export let variant: 'gradient' | 'image' = 'gradient';
 
     let container: HTMLElement;
     const dispatch = createEventDispatcher();
@@ -35,23 +38,32 @@
 
 <svelte:window on:resize={setNavigationHeight} />
 
-<div bind:this={container} class="top-banner alert is-action is-action-and-top-sticky">
-    <div class="top-banner-bg">
-        <div class="top-banner-bg-1">
-            <img
-                src={`${base}/images/top-banner/bg-pink-desktop.svg`}
-                width="1283"
-                height="1278"
-                alt="" />
+<div
+    bind:this={container}
+    class:darker={variant === 'image'}
+    class="top-banner alert is-action is-action-and-top-sticky">
+    {#if variant === 'gradient'}
+        <div class="top-banner-bg">
+            <div class="top-banner-bg-1">
+                <img
+                    src={`${base}/images/top-banner/bg-pink-desktop.svg`}
+                    width="1283"
+                    height="1278"
+                    alt="" />
+            </div>
+            <div class="top-banner-bg-2">
+                <img
+                    src={`${base}/images/top-banner/bg-mint-desktop.svg`}
+                    width="1051"
+                    height="1271"
+                    alt="" />
+            </div>
         </div>
-        <div class="top-banner-bg-2">
-            <img
-                src={`${base}/images/top-banner/bg-mint-desktop.svg`}
-                width="1051"
-                height="1271"
-                alt="" />
+    {:else}
+        <div class="centered-image-only">
+            <img src={PinkBackground} width="1283" height="1278" alt="" />
         </div>
-    </div>
+    {/if}
 
     <div class="top-banner-content u-color-text-primary">
         <slot />
@@ -62,12 +74,30 @@
     </Button>
 </div>
 
-<style>
+<style lang="scss">
     .alert {
         top: 0;
         width: 100%;
         z-index: 100;
         position: fixed;
+
+        &.darker {
+            background: var(--bgcolor-neutral-default);
+        }
+    }
+
+    .centered-image-only {
+        top: 0;
+        width: 100%;
+        height: 100%;
+        padding-left: 30vw;
+        position: absolute;
+
+        @media (max-width: 768px) {
+            & img {
+                max-width: 100vw;
+            }
+        }
     }
 
     @media (max-width: 768px) {
diff --git a/src/lib/images/pink-background.svg b/src/lib/images/pink-background.svg
new file mode 100644
index 000000000..76cdb479e
--- /dev/null
+++ b/src/lib/images/pink-background.svg
@@ -0,0 +1,76 @@
+<svg width="481" height="44" viewBox="0 0 481 44" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g style="mix-blend-mode:screen" opacity="0.25" filter="url(#filter0_f_2804_2539)">
+<circle cx="242.19" cy="52.7439" r="110.744" fill="url(#paint0_radial_2804_2539)"/>
+</g>
+<g filter="url(#filter1_f_2804_2539)">
+<ellipse cx="240.479" cy="56.2318" rx="40.0747" ry="119.968" transform="rotate(66.0796 240.479 56.2318)" fill="url(#paint1_radial_2804_2539)" fill-opacity="0.4"/>
+</g>
+<g filter="url(#filter2_f_2804_2539)">
+<ellipse cx="228.238" cy="51.0802" rx="23.6296" ry="70.7377" transform="rotate(66.0796 228.238 51.0802)" fill="url(#paint2_radial_2804_2539)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter3_f_2804_2539)">
+<path d="M191.132 89.2277C140.692 116.602 92.3886 125.135 83.2442 108.286C74.0998 91.4362 107.577 55.5854 158.017 28.2107C208.458 0.835917 256.761 -7.69658 265.906 9.15282C275.05 26.0022 241.573 61.853 191.132 89.2277Z" fill="url(#paint3_radial_2804_2539)" fill-opacity="0.5"/>
+</g>
+<g filter="url(#filter4_f_2804_2539)">
+<ellipse cx="128.998" cy="25.9598" rx="16.2007" ry="66.1069" transform="rotate(66.0796 128.998 25.9598)" fill="url(#paint4_radial_2804_2539)" fill-opacity="0.05"/>
+</g>
+<g filter="url(#filter5_f_2804_2539)">
+<path d="M238.738 55.4355C188.298 82.8103 145.088 100.728 142.227 95.4567C139.366 90.1851 177.937 63.72 228.378 36.3452C278.818 8.97044 322.028 -8.94768 324.889 -3.67603C327.75 1.59561 289.179 28.0608 238.738 55.4355Z" fill="url(#paint5_radial_2804_2539)" fill-opacity="0.35"/>
+</g>
+<defs>
+<filter id="filter0_f_2804_2539" x="70.3866" y="-119.06" width="343.607" height="343.607" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="30.5299" result="effect1_foregroundBlur_2804_2539"/>
+</filter>
+<filter id="filter1_f_2804_2539" x="0.195038" y="-134.073" width="480.567" height="380.61" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="64.7038" result="effect1_foregroundBlur_2804_2539"/>
+</filter>
+<filter id="filter2_f_2804_2539" x="62.8613" y="-84.8274" width="330.753" height="271.815" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="50" result="effect1_foregroundBlur_2804_2539"/>
+</filter>
+<filter id="filter3_f_2804_2539" x="49.7393" y="-31.4919" width="249.671" height="180.422" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="16" result="effect1_foregroundBlur_2804_2539"/>
+</filter>
+<filter id="filter4_f_2804_2539" x="47.2728" y="-25.6037" width="163.45" height="103.127" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="10.4674" result="effect1_foregroundBlur_2804_2539"/>
+</filter>
+<filter id="filter5_f_2804_2539" x="110.078" y="-36.5962" width="246.96" height="164.973" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="16" result="effect1_foregroundBlur_2804_2539"/>
+</filter>
+<radialGradient id="paint0_radial_2804_2539" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(242.19 52.7439) rotate(90) scale(110.744)">
+<stop stop-color="#FD366E"/>
+<stop offset="1" stop-color="#FD366E" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint1_radial_2804_2539" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(240.479 56.2318) rotate(90) scale(119.968 40.0747)">
+<stop stop-color="#FE9567"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint2_radial_2804_2539" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(228.238 51.0802) rotate(90) scale(70.7377 23.6296)">
+<stop stop-color="#FFEAE1"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint3_radial_2804_2539" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(174.575 58.7192) rotate(151.511) scale(103.914 34.7119)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint4_radial_2804_2539" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(128.998 25.9598) rotate(90) scale(66.1069 16.2007)">
+<stop stop-color="#FFEAE1"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+<radialGradient id="paint5_radial_2804_2539" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(233.558 45.8904) rotate(151.511) scale(103.914 10.8603)">
+<stop stop-color="#F02E65"/>
+<stop offset="1" stop-color="#F02E65" stop-opacity="0"/>
+</radialGradient>
+</defs>
+</svg>
diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 38b7be72e..a2f1990dc 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -11,7 +11,7 @@ import PaymentAuthRequired from '$lib/components/billing/alerts/paymentAuthRequi
 import PaymentMandate from '$lib/components/billing/alerts/paymentMandate.svelte';
 import { BillingPlan, NEW_DEV_PRO_UPGRADE_COUPON } from '$lib/constants';
 import { cachedStore } from '$lib/helpers/cache';
-import { sizeToBytes, type Size } from '$lib/helpers/sizeConvertion';
+import { type Size, sizeToBytes } from '$lib/helpers/sizeConvertion';
 import type {
     AddressesList,
     Aggregation,
@@ -275,8 +275,6 @@ export function isServiceLimited(serviceId: PlanServices, plan: Tier, total: num
 }
 
 export function checkForEnterpriseTrial(org: Organization) {
-    const remaining = calculateEnterpriseTrial(org);
-    console.log('remaining', remaining);
     if (calculateEnterpriseTrial(org) > 0) {
         headerAlert.add({
             id: 'teamEnterpriseTrial',
@@ -294,11 +292,9 @@ export function calculateEnterpriseTrial(org: Organization) {
 
     let diffCycle = endDate.getTime() - startDate.getTime();
     diffCycle = Math.ceil(diffCycle / (1000 * 60 * 60 * 24)) + 1;
-    console.log('diffCycle', diffCycle);
     if (diffCycle === 15) {
         const remaining = endDate.getTime() - today.getTime();
-        const days = Math.ceil(remaining / (1000 * 60 * 60 * 24)) + 1;
-        return days;
+        return Math.ceil(remaining / (1000 * 60 * 60 * 24)) + 1;
     }
     return 0;
 }
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 3c04881a9..dcdbf2011 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -305,7 +305,7 @@
         if (currentOrganizationId === org.$id) return;
         if (isCloud) {
             currentOrganizationId = org.$id;
-            await checkForEnterpriseTrial(org);
+            checkForEnterpriseTrial(org);
             await checkForUsageLimit(org);
             checkForMarkedForDeletion(org);
             await checkForNewDevUpgradePro(org);
diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index 2115e72e0..5cc94bde5 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -4,28 +4,55 @@
     import { organization } from '$lib/stores/organization';
     import { calculateEnterpriseTrial, hideBillingHeaderRoutes } from '$lib/stores/billing';
     import { base } from '$app/paths';
-    import { isTabletViewport } from '$lib/stores/viewport';
     import GradientBanner from '$lib/components/billing/gradientBanner.svelte';
-    import { Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, Typography } from '@appwrite.io/pink-svelte';
 
     $: upgradeUrl = `${base}/organization-${$organization?.$id}/change-plan`;
     $: remainingDays = calculateEnterpriseTrial($organization);
 </script>
 
 {#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
-    <GradientBanner>
-        <Layout.Stack
-            gap="m"
-            alignItems="center"
-            alignContent="space-between"
-            direction={$isTabletViewport ? 'column' : 'row'}>
+    <GradientBanner variant="image">
+        <div class="banner-fullwidth-grid">
             <Typography.Text>
-                Your enterprise trial expires in {remainingDays} days.
+                Your enterprise trial expires in <Badge
+                    variant="secondary"
+                    content={remainingDays.toString()} /> days.
             </Typography.Text>
 
-            <Button secondary fullWidthMobile class="u-line-height-1 u-gap-16" href={upgradeUrl}>
-                Upgrade
-            </Button>
-        </Layout.Stack>
+            <Button secondary fullWidthMobile href={upgradeUrl}>Upgrade</Button>
+        </div>
     </GradientBanner>
 {/if}
+
+<style lang="scss">
+    .banner-fullwidth-grid {
+        width: 100vw;
+        display: grid;
+        padding: 0 3rem;
+        align-items: center;
+        grid-template-columns: 1fr auto 1fr;
+
+        > :global(:first-child) {
+            grid-column: 2;
+            justify-self: center;
+
+            @media (max-width: 768px) {
+                grid-column: unset;
+            }
+        }
+
+        > :global(:last-child) {
+            grid-column: 3;
+            justify-self: end;
+        }
+
+        @media (max-width: 768px) {
+            gap: 12px;
+            width: 100%;
+            display: flex;
+            padding: unset;
+            flex-direction: column;
+        }
+    }
+</style>

From e1d0bcae7cf70c5570fe4f85f122395a4a28512c Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 11:03:30 +0000
Subject: [PATCH 20/66] update height

---
 src/lib/components/billing/gradientBanner.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 86cf1d9ee..3d3698dd7 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -80,6 +80,7 @@
         width: 100%;
         z-index: 100;
         position: fixed;
+        padding: 0.8rem;
 
         &.darker {
             background: var(--bgcolor-neutral-default);

From 9454bad856cc9615e8e8082899cb0b742f6a8bf7 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 11:45:16 +0000
Subject: [PATCH 21/66] close handler

---
 .../enterpriseTrial.svelte                          | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index 5cc94bde5..dff0c9f84 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -6,13 +6,22 @@
     import { base } from '$app/paths';
     import GradientBanner from '$lib/components/billing/gradientBanner.svelte';
     import { Badge, Typography } from '@appwrite.io/pink-svelte';
+    import { activeHeaderAlert } from '../store';
 
     $: upgradeUrl = `${base}/organization-${$organization?.$id}/change-plan`;
     $: remainingDays = calculateEnterpriseTrial($organization);
+
+    let show = true;
+
+    function handleClose() {
+        show = false;
+        const now = new Date().getTime();
+        localStorage.setItem($activeHeaderAlert.id, now.toString());
+    }
 </script>
 
-{#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname)}
-    <GradientBanner variant="image">
+{#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname) && show}
+    <GradientBanner variant="image" on:close={handleClose}>
         <div class="banner-fullwidth-grid">
             <Typography.Text>
                 Your enterprise trial expires in <Badge

From 2d14efecf6213033033637bc02bb0316206abeea Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 8 Jun 2025 17:38:13 +0530
Subject: [PATCH 22/66] address comments.

---
 src/lib/components/billing/gradientBanner.svelte          | 8 +++++---
 .../organization-[organization]/enterpriseTrial.svelte    | 6 ++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 3d3698dd7..09b49009c 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -91,7 +91,7 @@
         top: 0;
         width: 100%;
         height: 100%;
-        padding-left: 30vw;
+        padding-left: 25vw;
         position: absolute;
 
         @media (max-width: 768px) {
@@ -101,9 +101,11 @@
         }
     }
 
-    @media (max-width: 768px) {
-        :global(.top-banner-button.position) {
+    :global(.top-banner-button.position) {
+        z-index: 1;
+        @media (max-width: 768px) {
             position: absolute;
+            padding-block-start: 1rem;
             padding-block-end: 3.7625rem;
         }
     }
diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index dff0c9f84..e63e0348c 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -23,13 +23,14 @@
 {#if $organization?.$id && remainingDays > 0 && !hideBillingHeaderRoutes.includes(page.url.pathname) && show}
     <GradientBanner variant="image" on:close={handleClose}>
         <div class="banner-fullwidth-grid">
-            <Typography.Text>
+            <Typography.Text color="--fgcolor-neutral-primary">
                 Your enterprise trial expires in <Badge
+                    size="xs"
                     variant="secondary"
                     content={remainingDays.toString()} /> days.
             </Typography.Text>
 
-            <Button secondary fullWidthMobile href={upgradeUrl}>Upgrade</Button>
+            <Button size="xs" secondary fullWidthMobile href={upgradeUrl}>Upgrade</Button>
         </div>
     </GradientBanner>
 {/if}
@@ -54,6 +55,7 @@
         > :global(:last-child) {
             grid-column: 3;
             justify-self: end;
+            margin-inline-end: 4px;
         }
 
         @media (max-width: 768px) {

From 0e0f61be32aefa025c036c2f421dd676e63f4b7d Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 12:33:59 +0000
Subject: [PATCH 23/66] add border

---
 src/lib/components/billing/gradientBanner.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 09b49009c..9d7d6dfe2 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -93,6 +93,7 @@
         height: 100%;
         padding-left: 25vw;
         position: absolute;
+        border-bottom: 1px solid var(--border-neutral);
 
         @media (max-width: 768px) {
             & img {

From b9a982d8a3b961ef82d0206e7ec563a668969715 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Sun, 8 Jun 2025 12:42:35 +0000
Subject: [PATCH 24/66] fix calculation

---
 src/lib/stores/billing.ts                                   | 6 +++---
 .../organization-[organization]/enterpriseTrial.svelte      | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index a2f1990dc..5719023c0 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -291,10 +291,10 @@ export function calculateEnterpriseTrial(org: Organization) {
     const today = new Date();
 
     let diffCycle = endDate.getTime() - startDate.getTime();
-    diffCycle = Math.ceil(diffCycle / (1000 * 60 * 60 * 24)) + 1;
-    if (diffCycle === 15) {
+    diffCycle = Math.ceil(diffCycle / (1000 * 60 * 60 * 24));
+    if (diffCycle === 14) {
         const remaining = endDate.getTime() - today.getTime();
-        return Math.ceil(remaining / (1000 * 60 * 60 * 24)) + 1;
+        return Math.ceil(remaining / (1000 * 60 * 60 * 24));
     }
     return 0;
 }
diff --git a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
index e63e0348c..6fe97f821 100644
--- a/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
+++ b/src/routes/(console)/organization-[organization]/enterpriseTrial.svelte
@@ -27,7 +27,7 @@
                 Your enterprise trial expires in <Badge
                     size="xs"
                     variant="secondary"
-                    content={remainingDays.toString()} /> days.
+                    content={remainingDays.toString()} /> days
             </Typography.Text>
 
             <Button size="xs" secondary fullWidthMobile href={upgradeUrl}>Upgrade</Button>

From 00a2741647d11dd2c209a682793ca69e918a5048 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 10 Jun 2025 07:22:30 +0000
Subject: [PATCH 25/66] Fix sidebar offset

---
 src/lib/components/billing/gradientBanner.svelte | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/lib/components/billing/gradientBanner.svelte b/src/lib/components/billing/gradientBanner.svelte
index 9d7d6dfe2..92923bae5 100644
--- a/src/lib/components/billing/gradientBanner.svelte
+++ b/src/lib/components/billing/gradientBanner.svelte
@@ -22,8 +22,7 @@
         const alertHeight = container?.getBoundingClientRect()?.height || 0;
         const { header, sidebar, content } = queryLayoutElements();
         const headerHeight = header?.getBoundingClientRect().height || 0;
-        const offset = alertHeight + (!isTabletViewport && header ? headerHeight : 0);
-
+        const offset = alertHeight + (!$isTabletViewport && header ? headerHeight : 0);
         if (header) header.style.top = `${alertHeight}px`;
         if (sidebar) {
             sidebar.style.top = `${offset}px`;

From 81b4a9deb8eb7a4d0e6dcd04da15a6f38c25dc38 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 10 Jun 2025 07:31:02 +0000
Subject: [PATCH 26/66] fix check failing

---
 src/lib/stores/billing.ts | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index 5719023c0..bbc6c07b5 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -275,6 +275,7 @@ export function isServiceLimited(serviceId: PlanServices, plan: Tier, total: num
 }
 
 export function checkForEnterpriseTrial(org: Organization) {
+    if (!org || !org.billingNextInvoiceDate) return;
     if (calculateEnterpriseTrial(org) > 0) {
         headerAlert.add({
             id: 'teamEnterpriseTrial',
@@ -533,9 +534,9 @@ export async function checkForNewDevUpgradePro(org: Organization) {
     const now = new Date().getTime();
     const account = get(user);
     const accountCreated = new Date(account.$createdAt).getTime();
-    if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
-    const isDismissed = !!localStorage.getItem('newDevUpgradePro');
-    if (isDismissed) return;
+    // if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
+    // const isDismissed = !!localStorage.getItem('newDevUpgradePro');
+    // if (isDismissed) return;
     // check if coupon already applied
     try {
         await sdk.forConsole.billing.getCouponAccount(NEW_DEV_PRO_UPGRADE_COUPON);

From b8e22816ce9201212cb28fda58855dde42d0f209 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Tue, 10 Jun 2025 07:33:32 +0000
Subject: [PATCH 27/66] undo wrong commit

---
 src/lib/stores/billing.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/stores/billing.ts b/src/lib/stores/billing.ts
index bbc6c07b5..c68f336c1 100644
--- a/src/lib/stores/billing.ts
+++ b/src/lib/stores/billing.ts
@@ -534,9 +534,9 @@ export async function checkForNewDevUpgradePro(org: Organization) {
     const now = new Date().getTime();
     const account = get(user);
     const accountCreated = new Date(account.$createdAt).getTime();
-    // if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
-    // const isDismissed = !!localStorage.getItem('newDevUpgradePro');
-    // if (isDismissed) return;
+    if (now - accountCreated < 1000 * 60 * 60 * 24 * 7) return;
+    const isDismissed = !!localStorage.getItem('newDevUpgradePro');
+    if (isDismissed) return;
     // check if coupon already applied
     try {
         await sdk.forConsole.billing.getCouponAccount(NEW_DEV_PRO_UPGRADE_COUPON);

From 5c849391b94e3c01e10e4cab0270f19a91fcd0b7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 10 Jun 2025 13:13:37 +0530
Subject: [PATCH 28/66] fix: failing e2e test due to custom plan addition in
 the list.

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

diff --git a/src/lib/components/billing/planSelection.svelte b/src/lib/components/billing/planSelection.svelte
index 7c1666675..db11d298f 100644
--- a/src/lib/components/billing/planSelection.svelte
+++ b/src/lib/components/billing/planSelection.svelte
@@ -74,7 +74,7 @@
             {formatCurrency(scalePlan?.price ?? 0)} per month + usage
         </Typography.Text>
     </LabelCard>
-    {#if !isBasePlan}
+    {#if $currentPlan && !isBasePlan}
         <LabelCard
             name="plan"
             bind:group={billingPlan}

From 6ab6ee838f2d7212fbfb6188eabd3d5e439d119d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 10 Jun 2025 13:36:45 +0530
Subject: [PATCH 29/66] fix: nullable email crashing console on login.

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

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index 435037fd6..ee1b70df4 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -229,7 +229,7 @@
                                 style:padding-inline-end="8px"
                                 style:padding-block="4px">
                                 <Typography.Text variant="m-500">
-                                    {$user.email}
+                                    {$user?.email}
                                 </Typography.Text>
                             </div>
                             <ActionMenu.Item.Anchor

From f6804f24fa679e2763e0566c128ea409e1a33142 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 15:00:50 -0400
Subject: [PATCH 30/66] Update SDK

---
 package.json                                                | 2 +-
 pnpm-lock.yaml                                              | 4 ++--
 .../function-[function]/domains/add-domain/+page.svelte     | 6 ++----
 .../sites/site-[site]/domains/add-domain/+page.svelte       | 5 +----
 4 files changed, 6 insertions(+), 11 deletions(-)

diff --git a/package.json b/package.json
index 0fe8f5a25..66957b4ce 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@a5e5564",
+        "@appwrite.io/console": "^1.8.0",
         "@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 a43103aea..cf697939c 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@a5e5564
-        version: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564
+        specifier: ^1.8.0
+        version: 1.8.0
       '@appwrite.io/pink-icons':
         specifier: 0.25.0
         version: 0.25.0
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
index 66faf1e8d..874b14533 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -11,7 +11,7 @@
     import { sortBranches } from '$lib/stores/vcs';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { LabelCard } from '$lib/components';
-    import { type Models, ProxyResourceType, Runtime, StatusCode } from '@appwrite.io/console';
+    import { type Models, Runtime, StatusCode } from '@appwrite.io/console';
     import { statusCodeOptions } from '$lib/stores/domains';
     import { writable } from 'svelte/store';
     import { onMount } from 'svelte';
@@ -78,9 +78,7 @@
                     .proxy.createRedirectRule(
                         domainName,
                         redirect,
-                        statusCode,
-                        page.params.function,
-                        ProxyResourceType.Function
+                        statusCode
                     );
             } else if (behaviour === 'ACTIVE') {
                 rule = await sdk
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
index af66889d3..663921982 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
@@ -16,7 +16,6 @@
         BuildRuntime,
         Framework,
         type Models,
-        ProxyResourceType,
         StatusCode
     } from '@appwrite.io/console';
     import { statusCodeOptions } from '$lib/stores/domains';
@@ -89,9 +88,7 @@
                     .proxy.createRedirectRule(
                         domainName,
                         redirect,
-                        statusCode,
-                        page.params.site,
-                        ProxyResourceType.Site
+                        statusCode
                     );
             } else if (behaviour === 'ACTIVE') {
                 rule = await sdk

From 411fe2856f27424e3821946b8db0fd5f6d6c1e14 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 15:02:03 -0400
Subject: [PATCH 31/66] Format

---
 .../function-[function]/domains/add-domain/+page.svelte     | 6 +-----
 .../sites/site-[site]/domains/add-domain/+page.svelte       | 6 +-----
 2 files changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
index 874b14533..6442fc11c 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -75,11 +75,7 @@
             } else if (behaviour === 'REDIRECT') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)
-                    .proxy.createRedirectRule(
-                        domainName,
-                        redirect,
-                        statusCode
-                    );
+                    .proxy.createRedirectRule(domainName, redirect, statusCode);
             } else if (behaviour === 'ACTIVE') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
index 663921982..5ee280984 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
@@ -85,11 +85,7 @@
             } else if (behaviour === 'REDIRECT') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)
-                    .proxy.createRedirectRule(
-                        domainName,
-                        redirect,
-                        statusCode
-                    );
+                    .proxy.createRedirectRule(domainName, redirect, statusCode);
             } else if (behaviour === 'ACTIVE') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)

From 8a775c97324af1d0df4360f82f2b08964623ebb9 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 15:06:53 -0400
Subject: [PATCH 32/66] Fix lock

---
 pnpm-lock.yaml | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index cf697939c..c57983b1a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -257,9 +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@a5e5564':
-    resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564}
-    version: 1.8.0
+  '@appwrite.io/console@1.8.0':
+    resolution: {integrity: sha512-9M2zfg95P5c5CTYseMaE7ULoYJgzLGy624pV2g4DLdWmrX6ltMwP4khulIOsTd3tJpDDwuiInt7odVeoP9iXZg==}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
     resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
@@ -3635,7 +3634,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564': {}
+  '@appwrite.io/console@1.8.0': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:

From 93937c3a5948adb7936e6947fd9416de5f6b1911 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 15:52:02 -0400
Subject: [PATCH 33/66] Add lengths

---
 .../collection-[collection]/indexes/+page.svelte       |  4 ++++
 .../collection-[collection]/indexes/createIndex.svelte | 10 ++++++----
 2 files changed, 10 insertions(+), 4 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 c04b73365..f3f89b811 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
@@ -86,6 +86,7 @@
                     <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}>Asc/Desc</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}
@@ -118,6 +119,9 @@
                         <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}>
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 b5812ff55..a9a79223d 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
@@ -36,7 +36,7 @@
             label: attribute.key
         }));
 
-    let attributeList = [{ value: '', order: '' }];
+    let attributeList = [{ value: '', order: '', length: null }];
 
     function generateIndexKey() {
         let indexKeys = $indexes.map((index) => index.key);
@@ -51,8 +51,8 @@
 
     function initialize() {
         attributeList = externalAttribute
-            ? [{ value: externalAttribute.key, order: 'ASC' }]
-            : [{ value: '', order: 'ASC' }];
+            ? [{ value: externalAttribute.key, order: 'ASC', length: null }]
+            : [{ value: '', order: 'ASC', length: null }];
         selectedType = IndexType.Key;
         key = `index_${$indexes.length + 1}`;
     }
@@ -78,8 +78,10 @@
                 key,
                 selectedType,
                 attributeList.map((a) => a.value),
-                attributeList.map((a) => a.order)
+                attributeList.map((a) => a.order),
+                attributeList.map((a) => a.length)
             );
+
             await Promise.allSettled([
                 invalidate(Dependencies.COLLECTION),
                 invalidate(Dependencies.DATABASE)

From fdef7a2af94d86ca8fd30c4f8d5d6d3d550cbbcd Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 16:03:41 -0400
Subject: [PATCH 34/66] Revert "Update SDK"

This reverts commit f6804f24fa679e2763e0566c128ea409e1a33142.

# Conflicts:
#	src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
#	src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
---
 .../domains/add-domain/+page.svelte                    | 10 ++++++++--
 .../sites/site-[site]/domains/add-domain/+page.svelte  |  9 ++++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
index 6442fc11c..66faf1e8d 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/domains/add-domain/+page.svelte
@@ -11,7 +11,7 @@
     import { sortBranches } from '$lib/stores/vcs';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
     import { LabelCard } from '$lib/components';
-    import { type Models, Runtime, StatusCode } from '@appwrite.io/console';
+    import { type Models, ProxyResourceType, Runtime, StatusCode } from '@appwrite.io/console';
     import { statusCodeOptions } from '$lib/stores/domains';
     import { writable } from 'svelte/store';
     import { onMount } from 'svelte';
@@ -75,7 +75,13 @@
             } else if (behaviour === 'REDIRECT') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)
-                    .proxy.createRedirectRule(domainName, redirect, statusCode);
+                    .proxy.createRedirectRule(
+                        domainName,
+                        redirect,
+                        statusCode,
+                        page.params.function,
+                        ProxyResourceType.Function
+                    );
             } else if (behaviour === 'ACTIVE') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
index 5ee280984..af66889d3 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/domains/add-domain/+page.svelte
@@ -16,6 +16,7 @@
         BuildRuntime,
         Framework,
         type Models,
+        ProxyResourceType,
         StatusCode
     } from '@appwrite.io/console';
     import { statusCodeOptions } from '$lib/stores/domains';
@@ -85,7 +86,13 @@
             } else if (behaviour === 'REDIRECT') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)
-                    .proxy.createRedirectRule(domainName, redirect, statusCode);
+                    .proxy.createRedirectRule(
+                        domainName,
+                        redirect,
+                        statusCode,
+                        page.params.site,
+                        ProxyResourceType.Site
+                    );
             } else if (behaviour === 'ACTIVE') {
                 rule = await sdk
                     .forProject(page.params.region, page.params.project)

From 6c05a61389b729b2248359fc09c446d833a10ad5 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 16:12:32 -0400
Subject: [PATCH 35/66] Update SDK

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

diff --git a/package.json b/package.json
index 66957b4ce..cef36f39c 100644
--- a/package.json
+++ b/package.json
@@ -22,7 +22,7 @@
     },
     "dependencies": {
         "@ai-sdk/svelte": "^1.1.24",
-        "@appwrite.io/console": "^1.8.0",
+        "@appwrite.io/console": "^1.9.0",
         "@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 c57983b1a..b1e469431 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.8.0
-        version: 1.8.0
+        specifier: ^1.9.0
+        version: 1.9.0
       '@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@1.8.0':
-    resolution: {integrity: sha512-9M2zfg95P5c5CTYseMaE7ULoYJgzLGy624pV2g4DLdWmrX6ltMwP4khulIOsTd3tJpDDwuiInt7odVeoP9iXZg==}
+  '@appwrite.io/console@1.9.0':
+    resolution: {integrity: sha512-g8+zfdBF8mz7tRUER4CGVe5FHWQVLp8TlY/UOGCZ2TgUF1qnpNu/DhiQgph8uF+QZ9jDKCLAAZlP5//9t7ckWA==}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
     resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
@@ -3634,7 +3634,7 @@ snapshots:
 
   '@analytics/type-utils@0.6.2': {}
 
-  '@appwrite.io/console@1.8.0': {}
+  '@appwrite.io/console@1.9.0': {}
 
   '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
     dependencies:

From de5b73d71924a6efc1601ab87e047edf9ee3474c Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 16:16:28 -0400
Subject: [PATCH 36/66] Fix push

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

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 a9a79223d..4cb3db43d 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
@@ -107,7 +107,7 @@
         if (addAttributeDisabled) return;
 
         // We assign instead of pushing to trigger Svelte's reactivity
-        attributeList = [...attributeList, { value: '', order: '' }];
+        attributeList = [...attributeList, { value: '', order: '', length: null }];
     }
 </script>
 

From 9255eb09d26b8274c1f5442e60a37e74709c29be Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 21:13:54 -0400
Subject: [PATCH 37/66] Fix condition

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

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
index db028c5ae..ca810a082 100644
--- 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
@@ -255,7 +255,7 @@
                                 <span slot="title">Timestamp</span>
                                 {toLocaleDateTime(formatted.whole, true, 'UTC')}
                             </DualTimeView>
-                        {:else if isString(attr) && !attr.encrypt}
+                        {:else if isString(attr) && attr.encrypt}
                             <button on:click={(e) => e.preventDefault()}>
                                 <InteractiveText
                                     copy={false}

From 3f3aacc77001169c47480dc1a695dfb75d7e413f Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Tue, 10 Jun 2025 21:32:32 -0400
Subject: [PATCH 38/66] Input length

---
 .../collection-[collection]/indexes/+page.svelte          | 1 +
 .../collection-[collection]/indexes/createIndex.svelte    | 8 ++++++++
 2 files changed, 9 insertions(+)

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 f3f89b811..1ae2ee7dc 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
@@ -79,6 +79,7 @@
                     { id: 'type' },
                     { id: 'attributes' },
                     { id: 'orders' },
+                    { id: 'lengths' },
                     { id: 'actions', width: 40 }
                 ]}>
                 <svelte:fragment slot="header" let:root>
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 4cb3db43d..ee57f28bb 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
@@ -136,6 +136,14 @@
                     label={i === 0 ? 'Attribute' : undefined}
                     placeholder="Select Attribute"
                     bind:value={attribute.value} />
+
+                <InputText
+                    required
+                    id="length"
+                    label="Length"
+                    placeholder="Enter Length"
+                    bind:value={attribute.length} />
+
                 <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
                     <InputSelect
                         options={[

From f01c41188efb66a21b7bfe0a15b5f65c65b5c1eb Mon Sep 17 00:00:00 2001
From: ArmanNik <arman@appwrite.io>
Date: Wed, 11 Jun 2025 15:07:38 +0200
Subject: [PATCH 39/66] feat: add missing responsive headers

---
 .../layout/responsiveContainerHeader.svelte   |  2 +-
 .../database-[database]/+page.svelte          | 36 +++++-------
 .../messaging/+page.svelte                    | 38 +++++--------
 .../messaging/topics/+page.svelte             | 55 ++++++++-----------
 4 files changed, 55 insertions(+), 76 deletions(-)

diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
index 247564f86..e84caf048 100644
--- a/src/lib/layout/responsiveContainerHeader.svelte
+++ b/src/lib/layout/responsiveContainerHeader.svelte
@@ -17,7 +17,7 @@
 
     let {
         columns,
-        view = View.Table,
+        view = $bindable(View.Table),
         hideView = false,
         hideColumns = false,
         hasSearch = false,
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 b7e886be5..989916cf9 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,37 +1,31 @@
 <script lang="ts">
-    import { Empty, PaginationWithLimit, SearchQuery, ViewSelector } from '$lib/components';
+    import { Empty, PaginationWithLimit } from '$lib/components';
     import { Button } from '$lib/elements/forms';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { columns, 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 { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector
-                {columns}
-                view={data.view}
-                hideColumns={!data.collections.total}
-                hideView={!data.collections.total} />
-            {#if $canWriteCollections}
-                <Button on:click={() => ($showCreate = true)} event="create_collection">
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create collection
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <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>
 
     {#if data.collections.total}
         {#if data.view === 'grid'}
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
index 0ed4c8b4c..12821a0bf 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/+page.svelte
@@ -1,19 +1,11 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/state';
-    import {
-        Empty,
-        EmptyFilter,
-        EmptySearch,
-        Id,
-        PaginationWithLimit,
-        SearchQuery,
-        ViewSelector
-    } from '$lib/components';
-    import { Filters, hasPageQueries } from '$lib/components/filters';
+    import { Empty, EmptyFilter, EmptySearch, Id, PaginationWithLimit } from '$lib/components';
+    import { hasPageQueries } from '$lib/components/filters';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { MessagingProviderType } from '@appwrite.io/console';
     import CreateMessageDropdown from './createMessageDropdown.svelte';
     import FailedModal from './failedModal.svelte';
@@ -105,18 +97,18 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by description, type, status, or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Filters query={data.query} {columns} analyticsSource="messaging_messages" />
-            <ViewSelector view={data.view} {columns} hideView />
-            {#if $canWriteMessages}
-                <CreateMessageDropdown />
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        {columns}
+        bind:view={data.view}
+        hideView
+        hasFilters
+        hasSearch
+        analyticsSource="messaging_messages"
+        searchPlaceholder="Search by description, type, status, or ID">
+        {#if $canWriteMessages}
+            <CreateMessageDropdown />
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.messages.total}
         <Table.Root
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
index c8f5a49b2..2833293ac 100644
--- a/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/messaging/topics/+page.svelte
@@ -1,27 +1,20 @@
 <script lang="ts">
     import { page } from '$app/state';
     import { Button } from '$lib/elements/forms';
-    import {
-        Empty,
-        EmptySearch,
-        SearchQuery,
-        PaginationWithLimit,
-        EmptyFilter,
-        ViewSelector
-    } from '$lib/components';
+    import { Empty, EmptySearch, PaginationWithLimit, EmptyFilter } from '$lib/components';
     import Create from './create.svelte';
     import { goto } from '$app/navigation';
-    import { Container } from '$lib/layout';
+    import { Container, ResponsiveContainerHeader } from '$lib/layout';
     import { base } from '$app/paths';
     import type { Models } from '@appwrite.io/console';
     import type { PageData } from './$types';
     import { showCreate } from './store';
-    import { Filters, hasPageQueries } from '$lib/components/filters';
+    import { hasPageQueries } from '$lib/components/filters';
     import Table from './table.svelte';
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteTopics } from '$lib/stores/roles';
-    import { Icon, Layout } from '@appwrite.io/pink-svelte';
+    import { Icon } from '@appwrite.io/pink-svelte';
     import { View } from '$lib/helpers/load';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -72,26 +65,26 @@
 </script>
 
 <Container>
-    <Layout.Stack direction="row" justifyContent="space-between">
-        <Layout.Stack direction="row" alignItems="center">
-            <SearchQuery placeholder="Search by name or ID" />
-        </Layout.Stack>
-        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <Filters query={data.query} {columns} analyticsSource="messaging_topics_filter" />
-            <ViewSelector view={View.Table} {columns} hideView />
-            {#if $canWriteTopics}
-                <Button
-                    on:click={() => {
-                        $showCreate = true;
-                        trackEvent(Click.MessagingTopicCreateClick);
-                    }}
-                    event="create_topic">
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Create topic
-                </Button>
-            {/if}
-        </Layout.Stack>
-    </Layout.Stack>
+    <ResponsiveContainerHeader
+        {columns}
+        view={View.Table}
+        hideView
+        hasFilters
+        hasSearch
+        analyticsSource="messaging_topics_filter"
+        searchPlaceholder="Search by name or ID">
+        {#if $canWriteTopics}
+            <Button
+                on:click={() => {
+                    $showCreate = true;
+                    trackEvent(Click.MessagingTopicCreateClick);
+                }}
+                event="create_topic">
+                <Icon icon={IconPlus} slot="start" size="s" />
+                Create topic
+            </Button>
+        {/if}
+    </ResponsiveContainerHeader>
 
     {#if data.topics.total}
         <Table columns={$columns} {data} />

From 9c3416d6856c10780fdb5bf3416762057a1bb0c1 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 18:40:14 -0400
Subject: [PATCH 40/66] Add encrypt feature flag

---
 .github/workflows/publish.yml                          |  6 +++---
 src/lib/flags.ts                                       |  3 ++-
 .../collection-[collection]/attributes/string.svelte   | 10 +++++++++-
 .../collection-[collection]/table.svelte               |  5 ++++-
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index d1c879a6e..7073e19f1 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -79,7 +79,7 @@ jobs:
                   labels: ${{ steps.meta.outputs.labels }}
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
-                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt"
                       "PUBLIC_APPWRITE_MULTI_REGION=true"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
@@ -118,7 +118,7 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=self-hosted"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
-                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
 
     publish-cloud-no-regions:
@@ -156,6 +156,6 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
-                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
diff --git a/src/lib/flags.ts b/src/lib/flags.ts
index 54d5ba576..8e339ac14 100644
--- a/src/lib/flags.ts
+++ b/src/lib/flags.ts
@@ -20,5 +20,6 @@ function isFlagEnabled(name: string) {
 
 export const flags = {
     showSites: isFlagEnabled('sites'),
-    showCsvImport: isFlagEnabled('csv-import')
+    showCsvImport: isFlagEnabled('csv-import'),
+    showAttributeEncrypt: isFlagEnabled('attribute-encrypt'),
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index d06989612..1b28f8225 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -50,6 +50,7 @@
     import { ActionMenu, Selector } from '@appwrite.io/pink-svelte';
     import { InputNumber, InputText, InputTextarea } from '$lib/elements/forms';
     import { Popover, Layout, Tag, Typography, Link } from '@appwrite.io/pink-svelte';
+    import { flags } from '$lib/flags';
 
     export let data: Partial<Models.AttributeString> = {
         required: false,
@@ -62,6 +63,11 @@
 
     let savedDefault = data.default;
 
+    let showEncrypt = flags.showAttributeEncrypt({
+        organization: page.data.organization,
+        account: page.data.account
+    });
+
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
             savedDefault = data.default;
@@ -84,7 +90,7 @@
 
     $: handleDefaultState($required || $array);
 
-    // check plan on cloud, always allow on self-hosted!
+    // Check plan on cloud, always allow on self-hosted
     $: supportsStringEncryption = isCloud ? $currentPlan?.databasesAllowEncrypt : true;
 </script>
 
@@ -125,6 +131,7 @@
     disabled={data.required || editing}
     description="Indicate whether this attribute is an array. Defaults to an empty array." />
 
+{#if showEncrypt }
 <Layout.Stack gap="xs" direction="column">
     <div class="popover-holder" class:disabled-checkbox={!supportsStringEncryption || editing}>
         <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
@@ -169,6 +176,7 @@
         </Layout.Stack>
     </div>
 </Layout.Stack>
+{/if}
 
 <style lang="scss">
     .popover-holder {
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
index ca810a082..8bf6d09bf 100644
--- 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
@@ -32,6 +32,7 @@
     } from '@appwrite.io/pink-svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
+    import { flags } from '$lib/flags';
     export let data: PageData;
 
     const databaseId = page.params.database;
@@ -167,6 +168,8 @@
     ) as Models.AttributeRelationship[];
 
     let checked = false;
+
+    let showEncrypt = flags.showAttributeEncrypt(data)
 </script>
 
 <Table.Root
@@ -255,7 +258,7 @@
                                 <span slot="title">Timestamp</span>
                                 {toLocaleDateTime(formatted.whole, true, 'UTC')}
                             </DualTimeView>
-                        {:else if isString(attr) && attr.encrypt}
+                        {:else if isString(attr) && attr.encrypt && showEncrypt}
                             <button on:click={(e) => e.preventDefault()}>
                                 <InteractiveText
                                     copy={false}

From 5e667550404a9a18f69dd3ea7fd43366b529ef87 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 18:44:17 -0400
Subject: [PATCH 41/66] Format

---
 src/lib/flags.ts                              |  2 +-
 .../attributes/string.svelte                  | 87 ++++++++++---------
 .../collection-[collection]/table.svelte      |  2 +-
 3 files changed, 46 insertions(+), 45 deletions(-)

diff --git a/src/lib/flags.ts b/src/lib/flags.ts
index 8e339ac14..3c00ee6dc 100644
--- a/src/lib/flags.ts
+++ b/src/lib/flags.ts
@@ -21,5 +21,5 @@ function isFlagEnabled(name: string) {
 export const flags = {
     showSites: isFlagEnabled('sites'),
     showCsvImport: isFlagEnabled('csv-import'),
-    showAttributeEncrypt: isFlagEnabled('attribute-encrypt'),
+    showAttributeEncrypt: isFlagEnabled('attribute-encrypt')
 };
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 1b28f8225..b81a45cad 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -131,51 +131,52 @@
     disabled={data.required || editing}
     description="Indicate whether this attribute is an array. Defaults to an empty array." />
 
-{#if showEncrypt }
-<Layout.Stack gap="xs" direction="column">
-    <div class="popover-holder" class:disabled-checkbox={!supportsStringEncryption || editing}>
-        <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
-            <Popover let:toggle placement="bottom-start">
-                <Selector.Checkbox
-                    size="s"
-                    id="encrypt"
-                    bind:checked={data.encrypt}
-                    disabled={!supportsStringEncryption || editing} />
+{#if showEncrypt}
+    <Layout.Stack gap="xs" direction="column">
+        <div class="popover-holder" class:disabled-checkbox={!supportsStringEncryption || editing}>
+            <Layout.Stack inline gap="s" alignItems="flex-start" direction="row">
+                <Popover let:toggle placement="bottom-start">
+                    <Selector.Checkbox
+                        size="s"
+                        id="encrypt"
+                        bind:checked={data.encrypt}
+                        disabled={!supportsStringEncryption || editing} />
 
-                <Layout.Stack gap="xxs" direction="column">
-                    <button
-                        type="button"
-                        class="u-cursor-pointer"
-                        on:click={(e) => {
-                            if (!supportsStringEncryption) {
-                                toggle(e);
-                            } else {
-                                data.encrypt = !data.encrypt;
-                            }
-                        }}>
-                        <Layout.Stack inline gap="xxs" direction="row" alignItems="center">
-                            <Typography.Text variant="m-500">Encrypted</Typography.Text>
-                            {#if !supportsStringEncryption}
-                                <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
-                            {/if}
-                        </Layout.Stack>
-                    </button>
-                    <Typography.Text color="--fgcolor-neutral-tertiary">
-                        Indicate whether this attribute is encrypted. Encrypted attributes cannot be
-                        queried.
-                    </Typography.Text>
-                </Layout.Stack>
+                    <Layout.Stack gap="xxs" direction="column">
+                        <button
+                            type="button"
+                            class="u-cursor-pointer"
+                            on:click={(e) => {
+                                if (!supportsStringEncryption) {
+                                    toggle(e);
+                                } else {
+                                    data.encrypt = !data.encrypt;
+                                }
+                            }}>
+                            <Layout.Stack inline gap="xxs" direction="row" alignItems="center">
+                                <Typography.Text variant="m-500">Encrypted</Typography.Text>
+                                {#if !supportsStringEncryption}
+                                    <Tag variant="default" size="xs" on:click={toggle}>Pro</Tag>
+                                {/if}
+                            </Layout.Stack>
+                        </button>
+                        <Typography.Text color="--fgcolor-neutral-tertiary">
+                            Indicate whether this attribute is encrypted. Encrypted attributes
+                            cannot be queried.
+                        </Typography.Text>
+                    </Layout.Stack>
 
-                <ActionMenu.Root width="180px" slot="tooltip">
-                    <Typography.Text variant="m-500">
-                        Available on Pro plan. <Link.Anchor href={$upgradeURL}>Upgrade</Link.Anchor>
-                        to enable encrypted attributes.
-                    </Typography.Text>
-                </ActionMenu.Root>
-            </Popover>
-        </Layout.Stack>
-    </div>
-</Layout.Stack>
+                    <ActionMenu.Root width="180px" slot="tooltip">
+                        <Typography.Text variant="m-500">
+                            Available on Pro plan. <Link.Anchor href={$upgradeURL}
+                                >Upgrade</Link.Anchor>
+                            to enable encrypted attributes.
+                        </Typography.Text>
+                    </ActionMenu.Root>
+                </Popover>
+            </Layout.Stack>
+        </div>
+    </Layout.Stack>
 {/if}
 
 <style lang="scss">
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
index 8bf6d09bf..5c5b947e5 100644
--- 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
@@ -169,7 +169,7 @@
 
     let checked = false;
 
-    let showEncrypt = flags.showAttributeEncrypt(data)
+    let showEncrypt = flags.showAttributeEncrypt(data);
 </script>
 
 <Table.Root

From 5d3ccc3aa5247d4359a8dfc61503bf69e0ac5e76 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 18:58:09 -0400
Subject: [PATCH 42/66] Fix index length input

---
 .../indexes/+page.svelte                      |  2 +-
 .../indexes/createIndex.svelte                | 35 ++++++++++---------
 2 files changed, 19 insertions(+), 18 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 1ae2ee7dc..f9258a35b 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
@@ -86,7 +86,7 @@
                     <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}>Asc/Desc</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>
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 ee57f28bb..a8e0a0312 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
@@ -5,7 +5,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Modal } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, InputSelect, InputText } from '$lib/elements/forms';
+    import { Button, InputNumber, InputSelect, InputText } from '$lib/elements/forms';
     import { remove } from '$lib/helpers/array';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
@@ -79,7 +79,7 @@
                 selectedType,
                 attributeList.map((a) => a.value),
                 attributeList.map((a) => a.order),
-                attributeList.map((a) => a.length)
+                attributeList.map((a) => a.length ? Number(a.length) : null)
             );
 
             await Promise.allSettled([
@@ -137,24 +137,25 @@
                     placeholder="Select Attribute"
                     bind:value={attribute.value} />
 
-                <InputText
+                <InputSelect
+                    options={[
+                        { value: 'ASC', label: 'ASC' },
+                        { value: 'DESC', label: 'DESC' }
+                    ]}
                     required
-                    id="length"
-                    label="Length"
-                    placeholder="Enter Length"
-                    bind:value={attribute.length} />
+                    id={`order-${i}`}
+                    label={i === 0 ? 'Order' : undefined}
+                    bind:value={attribute.order}
+                    placeholder="Select Order" />
 
                 <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
-                    <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}
+                        <InputNumber
+                            id={`length-${i}`}
+                            label={i === 0 ? 'Length' : undefined}
+                            placeholder="Enter Length"
+                            bind:value={attribute.length} />
+                    {/if}
                     <Button
                         icon
                         compact

From af0d3f1e81161363c6c1f18f1e8b12e36a86a400 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 19:08:22 -0400
Subject: [PATCH 43/66] Add length to index overview

---
 .../collection-[collection]/indexes/createIndex.svelte      | 2 +-
 .../collection-[collection]/indexes/overviewIndex.svelte    | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

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 a8e0a0312..ea4b38c50 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
@@ -79,7 +79,7 @@
                 selectedType,
                 attributeList.map((a) => a.value),
                 attributeList.map((a) => a.order),
-                attributeList.map((a) => a.length ? Number(a.length) : null)
+                attributeList.map((a) => (a.length ? Number(a.length) : null))
             );
 
             await Promise.allSettled([
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 755bad2dc..ee8e07324 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
@@ -39,6 +39,12 @@
                     id={`value-${selectedIndex.orders[i]}`}
                     value={selectedIndex.orders[i]}
                     readonly />
+                <InputText
+                    required
+                    label={i === 0 ? 'Length' : ''}
+                    id={`value-${selectedIndex.lengths[i]}`}
+                    value={((selectedIndex.lengths[i]?.toString()) ?? null)}
+                    readonly />
             </Layout.Stack>
         {/each}
     {/if}

From db809be5610431dc77a9d98a712fa5bb321e687d Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 19:08:46 -0400
Subject: [PATCH 44/66] Format

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

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 ee8e07324..36d9f3a3e 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
@@ -43,7 +43,7 @@
                     required
                     label={i === 0 ? 'Length' : ''}
                     id={`value-${selectedIndex.lengths[i]}`}
-                    value={((selectedIndex.lengths[i]?.toString()) ?? null)}
+                    value={selectedIndex.lengths[i]?.toString() ?? null}
                     readonly />
             </Layout.Stack>
         {/each}

From 199015bafa08a1779b3022180acc13da6907a447 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 19:23:54 -0400
Subject: [PATCH 45/66] Fix icon condition

---
 .../collection-[collection]/attributes/+page.svelte             | 2 +-
 1 file changed, 1 insertion(+), 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 e141375a9..e94163b7b 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
@@ -117,7 +117,7 @@
                             <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}
+                                    {#if isString(attribute) && attribute.encrypt}
                                         <Tooltip>
                                             <Icon
                                                 size="s"

From 9e118abf21a3b9713c4c968e22315b11f613c694 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Wed, 11 Jun 2025 20:17:59 -0400
Subject: [PATCH 46/66] Simplify

---
 .../collection-[collection]/attributes/string.svelte         | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index b81a45cad..3b4a60eb4 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -63,10 +63,7 @@
 
     let savedDefault = data.default;
 
-    let showEncrypt = flags.showAttributeEncrypt({
-        organization: page.data.organization,
-        account: page.data.account
-    });
+    let showEncrypt = flags.showAttributeEncrypt(page.data);
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {

From 89cbf346e6ece4ffecb353a1649cb221feb7e013 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 12 Jun 2025 11:09:39 +0530
Subject: [PATCH 47/66] add: feature-flags for local env example file.

---
 .env.example | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.env.example b/.env.example
index 9ba4011c0..0e8699fc9 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 PUBLIC_CONSOLE_MODE=self-hosted
-PUBLIC_CONSOLE_FEATURE_FLAGS=
+PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt
 PUBLIC_APPWRITE_MULTI_REGION=false
 PUBLIC_APPWRITE_ENDPOINT=http://localhost/v1
 PUBLIC_STRIPE_KEY=

From e25f8d11f371eb3bbf6d14db4c188f8b5c53be6c Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 12 Jun 2025 10:30:18 +0200
Subject: [PATCH 48/66] fix popover overflowing page

---
 package.json                             |  2 +-
 pnpm-lock.yaml                           | 19 ++++----
 src/lib/components/columnSelector.svelte | 56 ++++++++++++++++--------
 3 files changed, 48 insertions(+), 29 deletions(-)

diff --git a/package.json b/package.json
index 0fe8f5a25..6bc1eb196 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@40bae6b",
+        "@appwrite.io/pink-svelte": "https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778",
         "@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 cac4e0adc..5f6146e7c 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@40bae6b
-        version: https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b(svelte@5.25.3)
+        specifier: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778
+        version: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778(svelte@5.25.3)
       '@popperjs/core':
         specifier: ^2.11.8
         version: 2.11.8
@@ -261,8 +261,9 @@ packages:
     resolution: {tarball: https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564}
     version: 1.8.0
 
-  '@appwrite.io/pink-icons-svelte@2.0.0-RC.1':
-    resolution: {integrity: sha512-iLFlV55hj8mGuAbmxJGenxN5RaZMmVT4GJb9dv/MP1xBAtYibFq7JvBcxm18qV2KU8c31Rntf+Ub4GL7HwqTYg==}
+  '@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}
+    version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
 
@@ -281,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.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b}
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778':
+    resolution: {tarball: https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3637,7 +3638,7 @@ snapshots:
 
   '@appwrite.io/console@https://pkg.pr.new/appwrite-labs/cloud/@appwrite.io/console@a5e5564': {}
 
-  '@appwrite.io/pink-icons-svelte@2.0.0-RC.1(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3654,9 +3655,9 @@ snapshots:
       '@appwrite.io/pink-icons': 1.0.0
       the-new-css-reset: 1.11.3
 
-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/%40appwrite.io%2Fpink-svelte@40bae6b(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-svelte@ee1b778(svelte@5.25.3)':
     dependencies:
-      '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
+      '@appwrite.io/pink-icons-svelte': https://pkg.pr.new/appwrite/pink/@appwrite.io/pink-icons-svelte@ee1b7788cd3f877c9aa1b6487976bd63a6196870(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 37c1640ad..c113d5e9c 100644
--- a/src/lib/components/columnSelector.svelte
+++ b/src/lib/components/columnSelector.svelte
@@ -18,6 +18,19 @@
         children: Snippet<[toggle: () => void, selectedColumnsNumber: number]>;
     } = $props();
 
+    let maxHeight = $state('none');
+    let containerRef;
+
+    const calcMaxHeight = () => {
+        if (containerRef) {
+            // get parent row element for correct top position
+            const parent = containerRef.parentElement.parentElement;
+            const { top } = parent.getBoundingClientRect();
+
+            maxHeight = `${window.innerHeight - top - 48}px`;
+        }
+    };
+
     onMount(async () => {
         if (isCustomCollection) {
             const prefs = preferences.getCustomCollectionColumns(page.params.collection);
@@ -50,6 +63,8 @@
                 preferences.setColumns(columns);
             }
         });
+
+        calcMaxHeight();
     });
 
     let selectedColumnsNumber = $derived(
@@ -61,29 +76,32 @@
     );
 </script>
 
+<svelte:window on:resize={calcMaxHeight} />
 {#if $columns?.length}
     <Popover let:toggle placement="bottom-end" padding="none">
         {@render children(toggle, selectedColumnsNumber)}
         <svelte:fragment slot="tooltip">
-            <ActionMenu.Root>
-                {#each $columns as column}
-                    {#if !column?.exclude}
-                        <ActionMenu.Item.Button
-                            on:click={() => (column.hide = !column.hide)}
-                            disabled={allowNoColumns
-                                ? false
-                                : selectedColumnsNumber <= 1 && column.hide !== true}>
-                            <Layout.Stack direction="row" gap="s">
-                                <Selector.Checkbox
-                                    checked={!column.hide}
-                                    size="s"
-                                    on:click={() => (column.hide = !column.hide)} />
-                                {column.title}
-                            </Layout.Stack>
-                        </ActionMenu.Item.Button>
-                    {/if}
-                {/each}
-            </ActionMenu.Root>
+            <div style:max-height={maxHeight} style:overflow="scroll" bind:this={containerRef}>
+                <ActionMenu.Root>
+                    {#each $columns as column}
+                        {#if !column?.exclude}
+                            <ActionMenu.Item.Button
+                                on:click={() => (column.hide = !column.hide)}
+                                disabled={allowNoColumns
+                                    ? false
+                                    : selectedColumnsNumber <= 1 && column.hide !== true}>
+                                <Layout.Stack direction="row" gap="s">
+                                    <Selector.Checkbox
+                                        checked={!column.hide}
+                                        size="s"
+                                        on:click={() => (column.hide = !column.hide)} />
+                                    {column.title}
+                                </Layout.Stack>
+                            </ActionMenu.Item.Button>
+                        {/if}
+                    {/each}
+                </ActionMenu.Root>
+            </div>
         </svelte:fragment>
     </Popover>
 {/if}

From 2bed634c24bbafa0b57b9b9d34db88f14dd1388d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 12 Jun 2025 14:11:35 +0530
Subject: [PATCH 49/66] fix: store null on onboarding.

---
 src/lib/stores/user.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/stores/user.ts b/src/lib/stores/user.ts
index 808dd3877..496da7952 100644
--- a/src/lib/stores/user.ts
+++ b/src/lib/stores/user.ts
@@ -13,6 +13,10 @@ export type Account = Models.User<
 >;
 
 export const user = derived(page, ($page) => {
-    if (browser) sessionStorage.setItem('account', JSON.stringify($page.data.account));
-    return $page.data.account as Account;
+    if ($page.data?.account) {
+        if (browser) {
+            sessionStorage.setItem('account', JSON.stringify($page.data.account));
+        }
+        return $page.data.account as Account;
+    } else return null;
 });

From b15fd6246d77dca98c7ac16c30e609e2f32f0510 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Thu, 12 Jun 2025 14:52:14 -0400
Subject: [PATCH 50/66] Flag for index lengths

---
 .env.example                                   |  2 +-
 src/lib/flags.ts                               |  3 ++-
 .../indexes/createIndex.svelte                 |  5 ++++-
 .../indexes/overviewIndex.svelte               | 18 ++++++++++++------
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/.env.example b/.env.example
index 0e8699fc9..bf090442b 100644
--- a/.env.example
+++ b/.env.example
@@ -1,5 +1,5 @@
 PUBLIC_CONSOLE_MODE=self-hosted
-PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt
+PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt,index-lengths
 PUBLIC_APPWRITE_MULTI_REGION=false
 PUBLIC_APPWRITE_ENDPOINT=http://localhost/v1
 PUBLIC_STRIPE_KEY=
diff --git a/src/lib/flags.ts b/src/lib/flags.ts
index 3c00ee6dc..db2417b83 100644
--- a/src/lib/flags.ts
+++ b/src/lib/flags.ts
@@ -21,5 +21,6 @@ function isFlagEnabled(name: string) {
 export const flags = {
     showSites: isFlagEnabled('sites'),
     showCsvImport: isFlagEnabled('csv-import'),
-    showAttributeEncrypt: isFlagEnabled('attribute-encrypt')
+    showAttributeEncrypt: isFlagEnabled('attribute-encrypt'),
+    showIndexLengths: isFlagEnabled('index-lengths')
 };
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 ea4b38c50..74359ef81 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
@@ -14,6 +14,7 @@
     import { type Attributes, collection, indexes } from '../store';
     import { Icon, Layout } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { flags } from '$lib/flags';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
@@ -38,6 +39,8 @@
 
     let attributeList = [{ value: '', order: '', length: null }];
 
+    let showLengths = flags.showIndexLengths(page.data);
+
     function generateIndexKey() {
         let indexKeys = $indexes.map((index) => index.key);
 
@@ -149,7 +152,7 @@
                     placeholder="Select Order" />
 
                 <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
-                    {#if selectedType === IndexType.Key}
+                    {#if selectedType === IndexType.Key && showLengths}
                         <InputNumber
                             id={`length-${i}`}
                             label={i === 0 ? 'Length' : undefined}
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 36d9f3a3e..c4c9552bf 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
@@ -3,9 +3,13 @@
     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;
+
+    let showLengths = flags.showIndexLengths(page.data);
 </script>
 
 <Modal title="Overview" bind:show={showOverview}>
@@ -39,12 +43,14 @@
                     id={`value-${selectedIndex.orders[i]}`}
                     value={selectedIndex.orders[i]}
                     readonly />
-                <InputText
-                    required
-                    label={i === 0 ? 'Length' : ''}
-                    id={`value-${selectedIndex.lengths[i]}`}
-                    value={selectedIndex.lengths[i]?.toString() ?? null}
-                    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}

From 99bac39c3b056cf3a7e5cd7cbd03fcb866cb52df Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 09:16:17 +0530
Subject: [PATCH 51/66] fix: account menu click not working.

---
 src/lib/components/navbar.svelte | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/navbar.svelte b/src/lib/components/navbar.svelte
index ee1b70df4..8764b58cc 100644
--- a/src/lib/components/navbar.svelte
+++ b/src/lib/components/navbar.svelte
@@ -211,6 +211,7 @@
             <Popover let:toggle let:showing>
                 <button
                     type="button"
+                    style:cursor="pointer"
                     on:click|preventDefault={(e) => {
                         toggle(e);
                         shouldAnimateThemeToggle = false;
@@ -221,7 +222,7 @@
                     style:user-select="none">
                     <Avatar size="s" src={avatar} />
                 </button>
-                <svelte:fragment slot="tooltip" let:toggle>
+                <svelte:fragment slot="tooltip">
                     <ActionMenu.Root noPadding>
                         <Layout.Stack gap="xxs">
                             <div
@@ -234,7 +235,6 @@
                             </div>
                             <ActionMenu.Item.Anchor
                                 trailingIcon={IconUser}
-                                on:click={toggle}
                                 size="l"
                                 href={`${base}/account`}>
                                 Account</ActionMenu.Item.Anchor>

From 523785ce540d9cc1a17d615a289cf1b58cf88865 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 12:02:59 +0530
Subject: [PATCH 52/66] fix: relationship selection issues.

---
 .../document-[document]/+page.svelte          |   3 +-
 .../attributes/relationship.svelte            | 276 +++++++++++-------
 2 files changed, 170 insertions(+), 109 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
index 103f9a8b2..31db52abd 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/+page.svelte
@@ -20,7 +20,6 @@
     const databaseId = page.params.database;
     const collectionId = page.params.collection;
     const documentId = page.params.document;
-    const editing = true;
 
     function initWork() {
         const prohibitedKeys = [
@@ -124,7 +123,7 @@
                 <svelte:fragment slot="title">{label}</svelte:fragment>
 
                 <svelte:fragment slot="aside">
-                    <AttributeItem {attribute} bind:formValues={$work} {label} {editing} />
+                    <AttributeItem {attribute} bind:formValues={$work} {label} editing />
                 </svelte:fragment>
 
                 <svelte:fragment slot="actions">
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
index af18757b5..e63977b1b 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte
@@ -1,24 +1,22 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { PaginationInline } from '$lib/components';
-    import { Button } from '$lib/elements/forms';
+    import { Button, InputSelect } from '$lib/elements/forms';
     import { preferences } from '$lib/stores/preferences';
     import { sdk } from '$lib/stores/sdk';
     import { Query, type Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import { doc } from '../store';
     import { isRelationshipToMany } from './store';
+    import { IconPlus, IconX } from '@appwrite.io/pink-icons-svelte';
     import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
-    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import InputSelect from '$lib/elements/forms/inputSelect.svelte';
 
     export let id: string;
     export let label: string;
 
+    export let editing = false;
     export let value: string | string[];
     export let attribute: Models.AttributeRelationship;
     export let optionalText: string | undefined = undefined;
-    export let editing = false;
 
     const databaseId = page.params.database;
 
@@ -28,6 +26,7 @@
     let relatedList: string[] = [];
     let singleRel: string;
     let showInput = false;
+    let newItemValue: string = '';
     let limit = 10;
     let offset = 0;
 
@@ -39,6 +38,7 @@
                 singleRel = value as string;
             }
         }
+
         documentList = await getDocuments();
 
         if (editing && $doc?.[attribute.key]) {
@@ -59,20 +59,48 @@
     });
 
     async function getDocuments(search: string = null) {
-        if (search) {
-            const documents = await sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.listDocuments(databaseId, attribute.relatedCollection, [
-                    Query.startsWith('$id', search),
-                    Query.orderDesc('')
-                ]);
-            return documents;
+        const queries = search ? [Query.startsWith('$id', search), Query.orderDesc('')] : [];
+        return await sdk
+            .forProject(page.params.region, page.params.project)
+            .databases.listDocuments(databaseId, attribute.relatedCollection, queries);
+    }
+
+    function getAvailableOptions(excludeIndex?: number) {
+        return options?.filter((option) => {
+            const otherItems =
+                excludeIndex !== undefined
+                    ? relatedList.filter((_, idx) => idx !== excludeIndex)
+                    : relatedList;
+            return !otherItems.includes(option.value);
+        });
+    }
+
+    function updateRelatedList() {
+        relatedList = relatedList;
+        value = relatedList;
+    }
+
+    function removeItem(index: number) {
+        if (relatedList.length === 1) {
+            relatedList[index] = '';
         } else {
-            const documents = await sdk
-                .forProject(page.params.region, page.params.project)
-                .databases.listDocuments(databaseId, attribute.relatedCollection);
-            return documents;
+            relatedList.splice(index, 1);
         }
+        updateRelatedList();
+    }
+
+    function addNewItem() {
+        if (newItemValue) {
+            relatedList = [...relatedList, newItemValue];
+            value = relatedList;
+            newItemValue = '';
+            showInput = false;
+        }
+    }
+
+    function cancelAddItem() {
+        newItemValue = '';
+        showInput = false;
     }
 
     //Reactive statements
@@ -84,106 +112,140 @@
               .reverse()
               .slice(offset, offset + limit)
         : [];
-    $: total = relatedList?.length ?? 0;
+
+    $: totalCount = relatedList?.length ?? 0;
+
     $: options =
         documentList?.documents?.map((n) => {
             const data = displayNames.filter((name) => name !== '$id').map((name) => n?.[name]);
-            return {
-                value: n.$id,
-                label: n.$id,
-                data
-            };
+            return { value: n.$id, label: n.$id, data };
         }) ?? [];
+
+    $: hasItems = totalCount > 0;
+    $: showTopAddButton = !editing && totalCount === 0 && !showInput;
+    $: showBottomAddButton =
+        (!editing && hasItems && !showInput) ||
+        (editing && hasItems && relatedList.every((item) => item) && !showInput);
+    $: showEmptyInput = editing && totalCount === 0 && !showInput;
 </script>
 
 {#if isRelationshipToMany(attribute)}
-    <div class="u-width-full-line">
-        <Layout.Stack direction="row" alignContent="space-between">
-            <Layout.Stack gap="xxs" direction="row" alignItems="center">
-                <Typography.Text variant="m-500">{label}</Typography.Text>
-                <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
-                    {optionalText}
-                </Typography.Text>
+    <Layout.Stack gap="xxl">
+        <Layout.Stack gap="m">
+            <Layout.Stack direction="row" alignContent="space-between">
+                <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                    <Typography.Text variant="m-500">{label}</Typography.Text>
+                    <Typography.Text variant="m-400" color="--fgcolor-neutral-tertiary">
+                        {optionalText}
+                    </Typography.Text>
+                </Layout.Stack>
+
+                {#if showTopAddButton}
+                    <Button secondary on:click={() => (showInput = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add item
+                    </Button>
+                {/if}
             </Layout.Stack>
-            {#if editing || total === 0}
-                <Button
-                    secondary
-                    on:click={() => {
-                        showInput = true;
-                    }}>
-                    <Icon icon={IconPlus} slot="start" size="s" />
-                    Add item
-                </Button>
+
+            <Layout.Stack gap="m">
+                <!-- Empty input for editing mode when no items exist -->
+                {#if showEmptyInput}
+                    <Layout.Stack direction="row">
+                        <InputSelect
+                            {id}
+                            required
+                            {options}
+                            bind:value={relatedList[0]}
+                            placeholder={`Select ${attribute.key}`}
+                            on:change={() => {
+                                if (!relatedList[0]) relatedList = [''];
+                                updateRelatedList();
+                            }} />
+                    </Layout.Stack>
+                {/if}
+
+                <!-- Existing items in editing mode -->
+                {#if editing && hasItems}
+                    {#each paginatedItems as _, paginatedIndex}
+                        {@const actualIndex = offset + paginatedIndex}
+                        <Layout.Stack direction="row">
+                            <InputSelect
+                                {id}
+                                required
+                                options={getAvailableOptions(actualIndex)}
+                                bind:value={relatedList[actualIndex]}
+                                placeholder={`Select ${attribute.key}`}
+                                on:change={updateRelatedList} />
+                            {#if relatedList[actualIndex]}
+                                <div style:padding-block-start="0.5rem">
+                                    <Button
+                                        icon
+                                        extraCompact
+                                        on:click={() => removeItem(actualIndex)}>
+                                        <Icon icon={IconX} size="s" />
+                                    </Button>
+                                </div>
+                            {/if}
+                        </Layout.Stack>
+                    {/each}
+                {/if}
+
+                <!-- Existing items in creation mode -->
+                {#if !editing && hasItems}
+                    {#each relatedList as item, i}
+                        <Layout.Stack direction="row">
+                            <InputSelect
+                                {id}
+                                required
+                                options={getAvailableOptions(i)}
+                                bind:value={item}
+                                on:change={updateRelatedList} />
+                            <div style:padding-block-start="0.5rem">
+                                <Button
+                                    icon
+                                    extraCompact
+                                    ariaLabel={`Delete item ${i}`}
+                                    on:click={() => {
+                                        relatedList.splice(i, 1);
+                                        updateRelatedList();
+                                    }}>
+                                    <Icon icon={IconX} size="s" />
+                                </Button>
+                            </div>
+                        </Layout.Stack>
+                    {/each}
+                {/if}
+
+                <!-- Input for adding new items -->
+                {#if showInput}
+                    <Layout.Stack direction="row">
+                        <InputSelect
+                            {id}
+                            required
+                            placeholder={`Select ${attribute.key}`}
+                            bind:value={newItemValue}
+                            options={getAvailableOptions()}
+                            on:change={addNewItem} />
+                        <div style:padding-block-start="0.5rem">
+                            <Button icon extraCompact on:click={cancelAddItem}>
+                                <Icon icon={IconX} size="s" />
+                            </Button>
+                        </div>
+                    </Layout.Stack>
+                {/if}
+            </Layout.Stack>
+
+            {#if showBottomAddButton}
+                <Layout.Stack direction="row" alignContent="flex-start">
+                    <Button extraCompact on:click={() => (showInput = true)}>
+                        <Icon icon={IconPlus} slot="start" size="s" />
+                        Add item
+                    </Button>
+                </Layout.Stack>
             {/if}
         </Layout.Stack>
-        <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
-            {#if !editing && relatedList?.length}
-                {#each relatedList as item, i}
-                    <InputSelect {id} required bind:value={item} {options} />
-                    <Button
-                        extraCompact
-                        ariaLabel={`Delete item ${i}`}
-                        on:click={() => {
-                            relatedList.splice(i, 1);
-                            relatedList = relatedList;
-                            value = relatedList;
-                        }}>
-                        <span class="icon-x" aria-hidden="true"></span>
-                    </Button>
-                {/each}
-            {/if}
-
-            {#if showInput}
-                <InputSelect
-                    {id}
-                    label="Rel"
-                    required
-                    placeholder={`Select ${attribute.key}`}
-                    bind:value={relatedList[total]}
-                    options={options?.filter((n) => !relatedList.includes(n.value))}
-                    on:change={() => {
-                        value = relatedList;
-                        showInput = false;
-                    }} />
-                <Button extraCompact ariaLabel={`Hide input`} on:click={() => (showInput = false)}>
-                    <span class="icon-x" aria-hidden="true"></span>
-                </Button>
-            {/if}
-            {#if paginatedItems && editing}
-                {#each paginatedItems as item, i}
-                    <InputSelect {id} label="Rel" required bind:value={item} {options} />
-                    <Button
-                        extraCompact
-                        ariaLabel={`Delete item ${i}`}
-                        on:click={() => {
-                            relatedList.splice(i, 1);
-                            relatedList = relatedList;
-                            value = relatedList;
-                        }}>
-                        <span class="icon-x" aria-hidden="true"></span>
-                    </Button>
-                {/each}
-            {/if}
-        </ul>
-        {#if editing}
-            <div class="u-flex u-margin-block-start-32 u-main-space-between">
-                <p class="text">Total results: {total}</p>
-                <PaginationInline {limit} bind:offset {total} hidePages />
-            </div>
-        {/if}
-
-        {#if total > 0 && !editing}
-            <Button
-                extraCompact
-                disabled={showInput}
-                on:click={() => {
-                    showInput = true;
-                }}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Add item
-            </Button>
-        {/if}
-    </div>
+    </Layout.Stack>
 {:else}
     <InputSelect
         {id}

From 13c798b847d8b258dcc6369cb359c70baa778f4c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 12:38:04 +0530
Subject: [PATCH 53/66] fix: time display logic.

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

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
index 5c5b947e5..b996fbdff 100644
--- 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
@@ -251,12 +251,13 @@
                             </Button.Button>
                         {/if}
                     {:else}
+                        {@const datetime = document[id]}
                         {@const formatted = formatColumn(document[id])}
                         {@const isDatetimeAttribute = attr.type === 'datetime'}
                         {#if isDatetimeAttribute}
-                            <DualTimeView time={formatted.whole}>
+                            <DualTimeView time={datetime}>
                                 <span slot="title">Timestamp</span>
-                                {toLocaleDateTime(formatted.whole, true, 'UTC')}
+                                {toLocaleDateTime(datetime, true)}
                             </DualTimeView>
                         {:else if isString(attr) && attr.encrypt && showEncrypt}
                             <button on:click={(e) => e.preventDefault()}>

From ef2621a908bf1a531c3e7fea865e7a00390216f0 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 13:49:13 +0530
Subject: [PATCH 54/66] fix: time display logic.

---
 .../create-function/(components)/aside.svelte | 10 ++++-
 .../(components)/details.svelte               | 43 +++++++++++++------
 .../repository-[repository]/+page.svelte      | 36 ++++++++++++++--
 .../repository-[repository]/+page.ts          | 16 +++----
 4 files changed, 78 insertions(+), 27 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte
index d63fe5d05..4acf3d41a 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/aside.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Card, SvgIcon } from '$lib/components';
-    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Skeleton, Typography } from '@appwrite.io/pink-svelte';
     import { IconGithub, IconGitBranch } from '@appwrite.io/pink-icons-svelte';
     import type { Models, Runtime } from '@appwrite.io/console';
 
@@ -10,6 +10,7 @@
     export let rootDir: string = undefined;
     export let showGitData = true;
     export let runtimes: Models.RuntimeList;
+    export let loading = false;
 
     $: selectedRuntime = runtimes?.runtimes.find((r) => r.$id === runtime);
 </script>
@@ -18,7 +19,7 @@
     <Layout.Stack gap="xl">
         <slot />
         <Layout.Stack gap="l">
-            {#if selectedRuntime?.name}
+            {#if selectedRuntime?.name && !loading}
                 <Layout.Stack gap="xxxs">
                     <Typography.Caption variant="400">Runtime</Typography.Caption>
                     <Layout.Stack gap="xxs" alignItems="center" direction="row">
@@ -30,6 +31,11 @@
                         </Typography.Text>
                     </Layout.Stack>
                 </Layout.Stack>
+            {:else if loading}
+                <Layout.Stack gap="xs">
+                    <Skeleton variant="line" width={100} height={16} />
+                    <Skeleton variant="line" width="100%" height={20} />
+                </Layout.Stack>
             {/if}
             {#if showGitData}
                 {#if repositoryName}
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte
index baa9692af..9b097f7a3 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/(components)/details.svelte
@@ -7,7 +7,7 @@
     import { organization } from '$lib/stores/organization';
     import { isCloud } from '$lib/system';
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
-    import { Fieldset, Icon, Input, Layout, Tag } from '@appwrite.io/pink-svelte';
+    import { Fieldset, Icon, Input, Layout, Skeleton, Tag } from '@appwrite.io/pink-svelte';
     import type { ComponentType } from 'svelte';
 
     export let name: string;
@@ -25,6 +25,7 @@
         value: string;
         label: string;
     }[] = [];
+    export let loading = false;
 
     let showCustomId = false;
 </script>
@@ -51,13 +52,20 @@
             {/if}
         </Layout.Stack>
         {#key runtime}
-            <InputSelect
-                id="runtime"
-                label="Runtime"
-                placeholder="Select runtime"
-                bind:value={runtime}
-                required
-                {options} />
+            {#if loading}
+                <Layout.Stack gap="xs">
+                    <Skeleton variant="line" width={100} height={20} />
+                    <Skeleton variant="line" width="100%" height={32} />
+                </Layout.Stack>
+            {:else}
+                <InputSelect
+                    id="runtime"
+                    label="Runtime"
+                    placeholder="Select runtime"
+                    bind:value={runtime}
+                    required
+                    {options} />
+            {/if}
         {/key}
 
         {#if isCloud}
@@ -79,12 +87,19 @@
             </Layout.Stack>
         {/if}
         {#if showEntrypoint}
-            <InputText
-                label="Entrypoint"
-                id="entrypoint"
-                bind:value={entrypoint}
-                required
-                placeholder="Enter entrypoint" />
+            {#if loading}
+                <Layout.Stack gap="xs">
+                    <Skeleton variant="line" width={100} height={20} />
+                    <Skeleton variant="line" width="100%" height={32} />
+                </Layout.Stack>
+            {:else}
+                <InputText
+                    label="Entrypoint"
+                    id="entrypoint"
+                    bind:value={entrypoint}
+                    required
+                    placeholder="Enter entrypoint" />
+            {/if}
         {/if}
     </Layout.Stack>
 </Fieldset>
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
index 4414e0ddc..d2ed95c5d 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.svelte
@@ -10,7 +10,7 @@
     import { installation, repository } from '$lib/stores/vcs';
     import { Layout } from '@appwrite.io/pink-svelte';
     import { writable } from 'svelte/store';
-    import { ID, Runtime, VCSDeploymentType } from '@appwrite.io/console';
+    import { ID, Runtime, VCSDeploymentType, VCSDetectionType } from '@appwrite.io/console';
     import type { Models } from '@appwrite.io/console';
     import { onMount } from 'svelte';
     import Details from '../(components)/details.svelte';
@@ -57,12 +57,40 @@
     let silentMode = false;
     let specification = specificationOptions[0].value;
 
+    let detectingRuntime = true;
+
     onMount(async () => {
         installation.set(data.installation);
         repository.set(data.repository);
         name = data.repository.name;
+
+        await detectRuntime();
     });
 
+    async function detectRuntime() {
+        try {
+            detectingRuntime = true;
+
+            const detections = (await sdk
+                .forProject(page.params.regionn, page.params.project)
+                .vcs.createRepositoryDetection(
+                    data.installation.$id,
+                    page.params.repository,
+                    VCSDetectionType.Runtime
+                )) as unknown as Models.DetectionRuntime; /* SDK return type is wrong atm */
+
+            entrypoint = detections.entrypoint;
+            buildCommand = detections.commands;
+            runtime = detections.runtime as Runtime;
+
+            trackEvent(Submit.FrameworkDetect, { runtime, source: 'repository' });
+        } catch (error) {
+            trackError(error, Submit.FrameworkDetect);
+        } finally {
+            detectingRuntime = false;
+        }
+    }
+
     async function create() {
         try {
             const func = await sdk
@@ -154,7 +182,8 @@
                 bind:specification
                 {specificationOptions}
                 options={runtimeOptions}
-                showEntrypoint />
+                showEntrypoint
+                loading={detectingRuntime} />
 
             <ProductionBranchFieldset
                 bind:branch
@@ -173,7 +202,8 @@
             runtimes={data.runtimesList}
             repositoryName={data.repository.name}
             {branch}
-            {rootDir} />
+            {rootDir}
+            loading={detectingRuntime} />
     </svelte:fragment>
 
     <svelte:fragment slot="footer">
diff --git a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts
index 6b98ecef0..66fc213fa 100644
--- a/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/functions/create-function/repository-[repository]/+page.ts
@@ -3,17 +3,17 @@ import { sdk } from '$lib/stores/sdk';
 export const load = async ({ parent, params, url }) => {
     const { installations, runtimesList, specificationsList } = await parent();
 
-    const [repository] = await Promise.all([
-        sdk
-            .forProject(params.region, params.project)
-            .vcs.getRepository(url.searchParams.get('installation'), params.repository)
-    ]);
+    const repository = await sdk
+        .forProject(params.region, params.project)
+        .vcs.getRepository(url.searchParams.get('installation'), params.repository);
+
+    const installation = installations.installations.find(
+        (installation) => installation.$id === url.searchParams.get('installation')
+    );
 
     return {
+        installation,
         installations,
-        installation: installations.installations.find(
-            (installation) => installation.$id === url.searchParams.get('installation')
-        ),
         repository,
         runtimesList,
         specificationsList

From 96a1c69409cbfaac6821244c0117f58be880768f Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 13:53:16 +0530
Subject: [PATCH 55/66] update: cleaning.

---
 .../repository-[repository]/+page.svelte        |  2 +-
 .../repository-[repository]/+page.ts            | 17 +++++++++--------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
index a061a490f..f08f635a1 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.svelte
@@ -62,7 +62,7 @@
                 .forProject(page.params.region, page.params.project)
                 .vcs.createRepositoryDetection(
                     $installation.$id,
-                    data.repository.id,
+                    page.params.repository,
                     VCSDetectionType.Framework,
                     rootDir
                 );
diff --git a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts
index f5607d122..de559a2f3 100644
--- a/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts
+++ b/src/routes/(console)/project-[region]-[project]/sites/create-site/repositories/repository-[repository]/+page.ts
@@ -5,11 +5,14 @@ import { buildVerboseDomain } from '../../store';
 export const load = async ({ parent, params, url }) => {
     const { installations, frameworks, project, organization, regionalConsoleVariables } =
         await parent();
-    const [repository] = await Promise.all([
-        sdk
-            .forProject(params.region, params.project)
-            .vcs.getRepository(url.searchParams.get('installation'), params.repository)
-    ]);
+
+    const repository = await sdk
+        .forProject(params.region, params.project)
+        .vcs.getRepository(url.searchParams.get('installation'), params.repository);
+
+    const installation = installations.installations.find(
+        (installation) => installation.$id === url.searchParams.get('installation')
+    );
 
     const domain = await buildVerboseDomain(
         regionalConsoleVariables._APP_DOMAIN_SITES,
@@ -21,9 +24,7 @@ export const load = async ({ parent, params, url }) => {
 
     return {
         installations,
-        installation: installations.installations.find(
-            (installation) => installation.$id === url.searchParams.get('installation')
-        ),
+        installation,
         repository,
         frameworks,
         domain

From f40ae359e3638ff9807332fcf10f1834060328d1 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 16:47:07 +0530
Subject: [PATCH 56/66] fix: copy code triggering another platform creation.

---
 .../overview/platforms/createAndroid.svelte   | 110 +++----
 .../overview/platforms/createApple.svelte     | 210 +++++++-------
 .../overview/platforms/createFlutter.svelte   | 242 ++++++++--------
 .../platforms/createReactNative.svelte        | 209 ++++++-------
 .../overview/platforms/createWeb.svelte       | 274 +++++++++---------
 5 files changed, 525 insertions(+), 520 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index ac89f191a..8141929fe 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -92,10 +92,10 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
 </script>
 
 <Wizard title="Add Android platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createAndroidPlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            {#if !isPlatformCreated}
+    <Layout.Stack gap="xxl">
+        <!-- Step One -->
+        {#if !isPlatformCreated}
+            <Form onSubmit={createAndroidPlatform}>
                 <Fieldset legend="Details">
                     <Layout.Stack gap="l" alignItems="flex-end">
                         <Layout.Stack gap="s">
@@ -136,59 +136,59 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
                         </Button>
                     </Layout.Stack>
                 </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconAndroid} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
-                            </Layout.Stack>
+            </Form>
+        {:else}
+            <Layout.Stack gap="xxl">
+                <Card padding="s" radius="s">
+                    <Layout.Stack
+                        direction="row"
+                        justifyContent="space-between"
+                        alignItems="center"
+                        gap="xs">
+                        <Layout.Stack direction="row" alignItems="center" gap="s">
+                            <Icon size="m" icon={IconAndroid} />
+                            <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
+                                {$createPlatform.name} ({$createPlatform.key})
+                            </Typography.Text>
                         </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
-
-            <!-- Step Two -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or Android
-                            Studio.
-                        </Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
-                                size="s"
-                                code="data/repository/AppwriteRepository.kt" /> and update the configuration
-                            settings.</Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="kotlin" lineNumbers code={updateConfigCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or emulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
                     </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                </Card>
+            </Layout.Stack>
+        {/if}
+
+        <!-- Step Two -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or Android Studio.
+                    </Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode
+                            size="s"
+                            code="data/repository/AppwriteRepository.kt" /> and update the configuration
+                        settings.</Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="kotlin" lineNumbers code={updateConfigCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or emulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
+
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 20a0f1c25..3690efb38 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -103,115 +103,119 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
 </script>
 
 <Wizard title="Add Apple platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createApplePlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            <Layout.Grid gap="l" rowGap="l" columns={4} columnsXS={2}>
-                {#each Object.entries(platforms) as [key, value]}
-                    <Pink2Card.Selector
-                        {value}
-                        id={key}
-                        title={key}
-                        imageRadius="s"
-                        name="framework"
-                        bind:group={platform}
-                        disabled={isCreatingPlatform || isPlatformCreated} />
-                {/each}
-            </Layout.Grid>
+    <Layout.Stack gap="xxl">
+        <Form onSubmit={createApplePlatform}>
+            <Layout.Stack gap="xxl">
+                <!-- Step One -->
+                <Layout.Grid gap="l" rowGap="l" columns={4} columnsXS={2}>
+                    {#each Object.entries(platforms) as [key, value]}
+                        <Pink2Card.Selector
+                            {value}
+                            id={key}
+                            title={key}
+                            imageRadius="s"
+                            name="framework"
+                            bind:group={platform}
+                            disabled={isCreatingPlatform || isPlatformCreated} />
+                    {/each}
+                </Layout.Grid>
 
-            <!-- Step Two -->
-            {#if !isPlatformCreated}
-                <Fieldset legend="Details">
-                    <Layout.Stack gap="l" alignItems="flex-end">
-                        <Layout.Stack gap="s">
-                            <InputText
-                                id="name"
-                                label="Name"
-                                placeholder="My Apple App"
-                                required
-                                bind:value={$createPlatform.name} />
+                <!-- Step Two -->
+                {#if !isPlatformCreated}
+                    <Fieldset legend="Details">
+                        <Layout.Stack gap="l" alignItems="flex-end">
+                            <Layout.Stack gap="s">
+                                <InputText
+                                    id="name"
+                                    label="Name"
+                                    placeholder="My Apple App"
+                                    required
+                                    bind:value={$createPlatform.name} />
 
-                            <!-- Tooltips on InputText don't work as of now -->
-                            <InputText
-                                id="hostname"
-                                label="Bundle ID"
-                                placeholder="com.company.appname"
-                                required
-                                bind:value={$createPlatform.key}>
-                                <Tooltip slot="info" maxWidth="15rem">
-                                    <Icon icon={IconInfo} size="s" />
-                                    <Typography.Caption variant="400" slot="tooltip">
-                                        You can find your Bundle Identifier in the General tab for
-                                        your app's primary target in Xcode.
-                                    </Typography.Caption>
-                                </Tooltip>
-                            </InputText>
-                        </Layout.Stack>
-
-                        <Button
-                            fullWidthMobile
-                            size="s"
-                            submit
-                            forceShowLoader
-                            submissionLoader={isCreatingPlatform}
-                            disabled={!platform ||
-                                !$createPlatform.name ||
-                                !$createPlatform.key ||
-                                isCreatingPlatform}>
-                            Create platform
-                        </Button>
-                    </Layout.Stack>
-                </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconApple} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
+                                <!-- Tooltips on InputText don't work as of now -->
+                                <InputText
+                                    id="hostname"
+                                    label="Bundle ID"
+                                    placeholder="com.company.appname"
+                                    required
+                                    bind:value={$createPlatform.key}>
+                                    <Tooltip slot="info" maxWidth="15rem">
+                                        <Icon icon={IconInfo} size="s" />
+                                        <Typography.Caption variant="400" slot="tooltip">
+                                            You can find your Bundle Identifier in the General tab
+                                            for your app's primary target in Xcode.
+                                        </Typography.Caption>
+                                    </Tooltip>
+                                </InputText>
                             </Layout.Stack>
-                        </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
 
-            <!-- Step Three -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or XCode.
-                        </Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode size="s" code="Sources/Config.plist" /> and
-                            update the configuration settings.</Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="plaintext" lineNumbers code={updateConfigCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            <Button
+                                fullWidthMobile
                                 size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                                submit
+                                forceShowLoader
+                                submissionLoader={isCreatingPlatform}
+                                disabled={!platform ||
+                                    !$createPlatform.name ||
+                                    !$createPlatform.key ||
+                                    isCreatingPlatform}>
+                                Create platform
+                            </Button>
+                        </Layout.Stack>
+                    </Fieldset>
+                {:else}
+                    <Layout.Stack gap="xxl">
+                        <Card padding="s" radius="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                gap="xs">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Icon size="m" icon={IconApple} />
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-primary">
+                                        {$createPlatform.name} ({$createPlatform.key})
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Card>
                     </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                {/if}
+            </Layout.Stack>
+        </Form>
+
+        <!-- Step Three -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or XCode.
+                    </Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="Sources/Config.plist" /> and update
+                        the configuration settings.</Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="plaintext" lineNumbers code={updateConfigCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 8d0aa74df..32f44a13c 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -162,132 +162,136 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
 </script>
 
 <Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createFlutterPlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            <Layout.Grid gap="l" rowGap="l" columns={3} columnsXS={2} columnsXXS={1}>
-                {#each Object.entries(platforms) as [key, value]}
-                    <Pink2Card.Selector
-                        {value}
-                        id={key}
-                        title={key}
-                        imageRadius="s"
-                        name="framework"
-                        bind:group={platform}
-                        disabled={isCreatingPlatform || isPlatformCreated} />
-                {/each}
-            </Layout.Grid>
+    <Layout.Stack gap="xxl">
+        <Form onSubmit={createFlutterPlatform}>
+            <Layout.Stack gap="xxl">
+                <!-- Step One -->
+                <Layout.Grid gap="l" rowGap="l" columns={3} columnsXS={2} columnsXXS={1}>
+                    {#each Object.entries(platforms) as [key, value]}
+                        <Pink2Card.Selector
+                            {value}
+                            id={key}
+                            title={key}
+                            imageRadius="s"
+                            name="framework"
+                            bind:group={platform}
+                            disabled={isCreatingPlatform || isPlatformCreated} />
+                    {/each}
+                </Layout.Grid>
 
-            <!-- Step Two -->
-            {#if !isPlatformCreated}
-                <Fieldset legend="Details">
-                    <Layout.Stack gap="l" alignItems="flex-end">
-                        <Layout.Stack gap="s">
-                            <InputText
-                                id="name"
-                                label="Name"
-                                placeholder={placeholder[platform].name}
-                                required
-                                bind:value={$createPlatform.name} />
-
-                            <!-- Tooltips on InputText don't work as of now -->
-                            {#if platform === PlatformType.Flutterweb}
+                <!-- Step Two -->
+                {#if !isPlatformCreated}
+                    <Fieldset legend="Details">
+                        <Layout.Stack gap="l" alignItems="flex-end">
+                            <Layout.Stack gap="s">
                                 <InputText
-                                    id="hostname"
-                                    label={hostname[platform]}
-                                    placeholder={placeholder[platform].hostname}
+                                    id="name"
+                                    label="Name"
+                                    placeholder={placeholder[platform].name}
                                     required
-                                    bind:value={$createPlatform.hostname}>
-                                    <Tooltip slot="info" maxWidth="15rem">
-                                        <Icon icon={IconInfo} size="s" />
-                                        <Typography.Caption variant="400" slot="tooltip">
-                                            {placeholder[platform].tooltip}
-                                        </Typography.Caption>
-                                    </Tooltip>
-                                </InputText>
-                            {:else}
-                                <InputText
-                                    id="key"
-                                    label={hostname[platform]}
-                                    placeholder={placeholder[platform].hostname}
-                                    required
-                                    bind:value={$createPlatform.key}>
-                                    <Tooltip slot="info" maxWidth="15rem">
-                                        <Icon icon={IconInfo} size="s" />
-                                        <Typography.Caption variant="400" slot="tooltip">
-                                            {placeholder[platform].tooltip}
-                                        </Typography.Caption>
-                                    </Tooltip>
-                                </InputText>
-                            {/if}
-                        </Layout.Stack>
+                                    bind:value={$createPlatform.name} />
 
-                        <Button
-                            fullWidthMobile
-                            size="s"
-                            submit
-                            forceShowLoader
-                            submissionLoader={isCreatingPlatform}
-                            disabled={!platform ||
-                                !$createPlatform.name ||
-                                (!$createPlatform.key && !$createPlatform.hostname) ||
-                                isCreatingPlatform}>
-                            Create platform
-                        </Button>
-                    </Layout.Stack>
-                </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconFlutter} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
+                                <!-- Tooltips on InputText don't work as of now -->
+                                {#if platform === PlatformType.Flutterweb}
+                                    <InputText
+                                        id="hostname"
+                                        label={hostname[platform]}
+                                        placeholder={placeholder[platform].hostname}
+                                        required
+                                        bind:value={$createPlatform.hostname}>
+                                        <Tooltip slot="info" maxWidth="15rem">
+                                            <Icon icon={IconInfo} size="s" />
+                                            <Typography.Caption variant="400" slot="tooltip">
+                                                {placeholder[platform].tooltip}
+                                            </Typography.Caption>
+                                        </Tooltip>
+                                    </InputText>
+                                {:else}
+                                    <InputText
+                                        id="key"
+                                        label={hostname[platform]}
+                                        placeholder={placeholder[platform].hostname}
+                                        required
+                                        bind:value={$createPlatform.key}>
+                                        <Tooltip slot="info" maxWidth="15rem">
+                                            <Icon icon={IconInfo} size="s" />
+                                            <Typography.Caption variant="400" slot="tooltip">
+                                                {placeholder[platform].tooltip}
+                                            </Typography.Caption>
+                                        </Tooltip>
+                                    </InputText>
+                                {/if}
                             </Layout.Stack>
+
+                            <Button
+                                fullWidthMobile
+                                size="s"
+                                submit
+                                forceShowLoader
+                                submissionLoader={isCreatingPlatform}
+                                disabled={!platform ||
+                                    !$createPlatform.name ||
+                                    (!$createPlatform.key && !$createPlatform.hostname) ||
+                                    isCreatingPlatform}>
+                                Create platform
+                            </Button>
                         </Layout.Stack>
-                    </Card>
-                </Layout.Stack>
-            {/if}
-
-            <!-- Step Three -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal, Android Studio
-                            or VSCode.
-                        </Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
-                                size="s"
-                                code="lib/constants/appwrite.dart" /> and update the configuration settings.</Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="dart" lineNumbers code={updateConfigCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or simulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                    </Fieldset>
+                {:else}
+                    <Layout.Stack gap="xxl">
+                        <Card padding="s" radius="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                gap="xs">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Icon size="m" icon={IconFlutter} />
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-primary">
+                                        {$createPlatform.name} ({$createPlatform.key ??
+                                            $createPlatform.hostname})
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Card>
                     </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                {/if}
+            </Layout.Stack>
+        </Form>
+
+        <!-- Step Three -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal, Android Studio or
+                        VSCode.
+                    </Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.dart" />
+                        and update the configuration settings.</Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="dart" lineNumbers code={updateConfigCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index d8b01e0eb..ae2d7dbd4 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -130,115 +130,118 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
 </script>
 
 <Wizard title="Add React Native platform" bind:showExitModal confirmExit>
-    <Form onSubmit={createReactNativePlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            <Layout.Stack gap="l" direction="row">
-                {#each Object.entries(platforms) as [key, value]}
-                    <Pink2Card.Selector
-                        {value}
-                        id={key}
-                        title={key}
-                        imageRadius="s"
-                        name="framework"
-                        bind:group={platform}
-                        disabled={isCreatingPlatform || isPlatformCreated} />
-                {/each}
-            </Layout.Stack>
-
-            <!-- Step Two -->
-            {#if !isPlatformCreated}
-                <Fieldset legend="Details">
-                    <Layout.Stack gap="l" alignItems="flex-end">
-                        <Layout.Stack gap="s">
-                            <InputText
-                                id="name"
-                                label="Name"
-                                placeholder={placeholder[platform].name}
-                                required
-                                bind:value={$createPlatform.name} />
-
-                            <!-- Tooltips on InputText don't work as of now -->
-                            <InputText
-                                id="hostname"
-                                label={hostname[platform]}
-                                placeholder={placeholder[platform].hostname}
-                                required
-                                bind:value={$createPlatform.key}>
-                                <Tooltip slot="info" maxWidth="15rem">
-                                    <Icon icon={IconInfo} size="s" />
-                                    <Typography.Caption variant="400" slot="tooltip">
-                                        {placeholder[platform].tooltip}
-                                    </Typography.Caption>
-                                </Tooltip>
-                            </InputText>
-                        </Layout.Stack>
-
-                        <Button
-                            fullWidthMobile
-                            size="s"
-                            submit
-                            forceShowLoader
-                            submissionLoader={isCreatingPlatform}
-                            disabled={!platform ||
-                                !$createPlatform.name ||
-                                !$createPlatform.key ||
-                                isCreatingPlatform}>
-                            Create platform
-                        </Button>
-                    </Layout.Stack>
-                </Fieldset>
-            {:else}
-                <Layout.Stack gap="xxl">
-                    <Card padding="s" radius="s">
-                        <Layout.Stack
-                            direction="row"
-                            justifyContent="space-between"
-                            alignItems="center"
-                            gap="xs">
-                            <Layout.Stack direction="row" alignItems="center" gap="s">
-                                <Icon size="m" icon={IconReact} />
-                                <Typography.Text variant="m-400" color="--fgcolor-neutral-primary">
-                                    {$createPlatform.name} ({$createPlatform.key})
-                                </Typography.Text>
-                            </Layout.Stack>
-                        </Layout.Stack>
-                    </Card>
+    <Layout.Stack gap="xxl">
+        <Form onSubmit={createReactNativePlatform}>
+            <Layout.Stack gap="xxl">
+                <!-- Step One -->
+                <Layout.Stack gap="l" direction="row">
+                    {#each Object.entries(platforms) as [key, value]}
+                        <Pink2Card.Selector
+                            {value}
+                            id={key}
+                            title={key}
+                            imageRadius="s"
+                            name="framework"
+                            bind:group={platform}
+                            disabled={isCreatingPlatform || isPlatformCreated} />
+                    {/each}
                 </Layout.Stack>
-            {/if}
 
-            <!-- Step Three -->
-            {#if isPlatformCreated}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or VSCode.
-                        </Typography.Text>
+                <!-- Step Two -->
+                {#if !isPlatformCreated}
+                    <Fieldset legend="Details">
+                        <Layout.Stack gap="l" alignItems="flex-end">
+                            <Layout.Stack gap="s">
+                                <InputText
+                                    id="name"
+                                    label="Name"
+                                    placeholder={placeholder[platform].name}
+                                    required
+                                    bind:value={$createPlatform.name} />
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={gitCloneCode} />
-                        </div>
+                                <!-- Tooltips on InputText don't work as of now -->
+                                <InputText
+                                    id="hostname"
+                                    label={hostname[platform]}
+                                    placeholder={placeholder[platform].hostname}
+                                    required
+                                    bind:value={$createPlatform.key}>
+                                    <Tooltip slot="info" maxWidth="15rem">
+                                        <Icon icon={IconInfo} size="s" />
+                                        <Typography.Caption variant="400" slot="tooltip">
+                                            {placeholder[platform].tooltip}
+                                        </Typography.Caption>
+                                    </Tooltip>
+                                </InputText>
+                            </Layout.Stack>
 
-                        <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
+                            <Button
+                                fullWidthMobile
                                 size="s"
-                                code="lib/constants/appwrite.js" /> and update the configuration settings.</Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="javascript" lineNumbers code={updateConfigCode} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >3. Run the app on a connected device or simulator, then click the <InlineCode
-                                size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
+                                submit
+                                forceShowLoader
+                                submissionLoader={isCreatingPlatform}
+                                disabled={!platform ||
+                                    !$createPlatform.name ||
+                                    !$createPlatform.key ||
+                                    isCreatingPlatform}>
+                                Create platform
+                            </Button>
+                        </Layout.Stack>
+                    </Fieldset>
+                {:else}
+                    <Layout.Stack gap="xxl">
+                        <Card padding="s" radius="s">
+                            <Layout.Stack
+                                direction="row"
+                                justifyContent="space-between"
+                                alignItems="center"
+                                gap="xs">
+                                <Layout.Stack direction="row" alignItems="center" gap="s">
+                                    <Icon size="m" icon={IconReact} />
+                                    <Typography.Text
+                                        variant="m-400"
+                                        color="--fgcolor-neutral-primary">
+                                        {$createPlatform.name} ({$createPlatform.key})
+                                    </Typography.Text>
+                                </Layout.Stack>
+                            </Layout.Stack>
+                        </Card>
                     </Layout.Stack>
-                </Fieldset>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                {/if}
+            </Layout.Stack>
+        </Form>
+
+        <!-- Step Three -->
+        {#if isPlatformCreated}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or VSCode.
+                    </Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={gitCloneCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >2. Open the file <InlineCode size="s" code="lib/constants/appwrite.js" /> and
+                        update the configuration settings.</Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="javascript" lineNumbers code={updateConfigCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >3. Run the app on a connected device or simulator, then click the <InlineCode
+                            size="s"
+                            code="Send a ping" /> button to verify the setup.</Typography.Text>
+                </Layout.Stack>
+            </Fieldset>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card padding="l" class="responsive-padding">
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index bb675c7a9..e598a595a 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -197,157 +197,151 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
             resetPlatformStore();
         };
     });
+
+    $: console.log('Reactivity triggered');
 </script>
 
 <Wizard title="Add web platform" bind:showExitModal>
-    <Form onSubmit={createWebPlatform}>
-        <Layout.Stack gap="xxl">
-            <!-- Step One -->
-            {#if !isPlatformCreated || isChangingFramework}
-                <Fieldset legend="Type">
-                    <Layout.Stack>
-                        <div class="frameworks">
-                            {#each frameworks as framework}
-                                <Card.Selector
-                                    bind:group={selectedFrameworkKey}
-                                    name="framework"
-                                    id={framework.key}
-                                    value={framework.key}
-                                    title={framework.label}
-                                    icon={framework.icon}
-                                    imageRadius="s" />
-                            {/each}
-                        </div>
+    <Layout.Stack gap="xxl">
+        <!-- Step One -->
+        {#if !isPlatformCreated || isChangingFramework}
+            <Form onSubmit={createWebPlatform}>
+                <Layout.Stack>
+                    <Fieldset legend="Type">
+                        <Layout.Stack>
+                            <div class="frameworks">
+                                {#each frameworks as framework}
+                                    <Card.Selector
+                                        bind:group={selectedFrameworkKey}
+                                        name="framework"
+                                        id={framework.key}
+                                        value={framework.key}
+                                        title={framework.label}
+                                        icon={framework.icon}
+                                        imageRadius="s" />
+                                {/each}
+                            </div>
+                            <Layout.Stack direction="row" justifyContent="flex-end">
+                                {#if isChangingFramework}
+                                    <Button
+                                        disabled={!selectedFramework}
+                                        on:click={() => (isChangingFramework = false)}>
+                                        Save</Button>
+                                {/if}
+                            </Layout.Stack>
+                        </Layout.Stack>
+                    </Fieldset>
+                    {#if !isChangingFramework}
+                        <Fieldset legend="Details">
+                            <InputText
+                                id="hostname"
+                                label="Hostname"
+                                placeholder="localhost"
+                                error={hostnameError && 'Please enter a valid hostname'}
+                                bind:value={hostname}>
+                                <Tooltip slot="info">
+                                    <Icon icon={IconInfo} size="s" />
+                                    <span slot="tooltip">
+                                        The hostname that your website will use to interact with the
+                                        Appwrite APIs in production or development environments. No
+                                        protocol or port number required.
+                                    </span>
+                                </Tooltip>
+                            </InputText></Fieldset>
                         <Layout.Stack direction="row" justifyContent="flex-end">
-                            {#if isChangingFramework}
-                                <Button
-                                    disabled={!selectedFramework}
-                                    on:click={() => (isChangingFramework = false)}>
-                                    Save</Button>
-                            {/if}
+                            <Button submit disabled={!selectedFramework}>Create platform</Button>
                         </Layout.Stack>
+                    {/if}
+                </Layout.Stack>
+            </Form>
+        {:else}
+            <Card.Base padding="s"
+                ><Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
+                    <Layout.Stack gap="xxs" direction="row">
+                        <Icon icon={selectedFramework.smallIcon} />
+                        <Typography.Text variant="m-500">{selectedFramework.label}</Typography.Text>
                     </Layout.Stack>
-                </Fieldset>
-                {#if !isChangingFramework}
-                    <Fieldset legend="Details">
-                        <InputText
-                            id="hostname"
-                            label="Hostname"
-                            placeholder="localhost"
-                            error={hostnameError && 'Please enter a valid hostname'}
-                            bind:value={hostname}>
-                            <Tooltip slot="info">
-                                <Icon icon={IconInfo} size="s" />
-                                <span slot="tooltip">
-                                    The hostname that your website will use to interact with the
-                                    Appwrite APIs in production or development environments. No
-                                    protocol or port number required.
-                                </span>
-                            </Tooltip>
-                        </InputText></Fieldset>
-                    <Layout.Stack direction="row" justifyContent="flex-end"
-                        ><Button submit disabled={!selectedFramework}>Create platform</Button
-                        ></Layout.Stack>
-                {/if}
-            {:else}
-                <Card.Base padding="s"
-                    ><Layout.Stack
-                        direction="row"
-                        justifyContent="space-between"
-                        alignItems="center">
-                        <Layout.Stack gap="xxs" direction="row">
-                            <Icon icon={selectedFramework.smallIcon} />
-                            <Typography.Text variant="m-500"
-                                >{selectedFramework.label}</Typography.Text>
-                        </Layout.Stack>
-                        <Button
-                            size="s"
-                            secondary
-                            on:click={() => {
-                                isChangingFramework = true;
-                            }}>Change</Button>
-                    </Layout.Stack></Card.Base>
-            {/if}
+                    <Button
+                        size="s"
+                        secondary
+                        on:click={() => {
+                            isChangingFramework = true;
+                        }}>Change</Button>
+                </Layout.Stack></Card.Base>
+        {/if}
 
-            <!-- Step Three -->
-            {#if isPlatformCreated && !isChangingFramework}
-                <Fieldset legend="Clone starter">
-                    <Layout.Stack gap="l">
-                        <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or VSCode.
-                        </Typography.Text>
+        <!-- Step Three -->
+        {#if isPlatformCreated && !isChangingFramework}
+            <Fieldset legend="Clone starter">
+                <Layout.Stack gap="l">
+                    <Typography.Text variant="m-500">
+                        1. Clone the starter kit from GitHub using the terminal or VSCode.
+                    </Typography.Text>
 
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code
-                                lang="bash"
-                                lineNumbers
-                                code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for-${selectedFramework.key}`} />
-                        </div>
-
-                        {#if selectedFramework.key === 'angular'}
-                            <Typography.Text variant="m-500"
-                                >2. Change <InlineCode
-                                    size="s"
-                                    code="src/environments/environment.ts" />
-                                to reflect the values below:</Typography.Text>
-                        {:else}
-                            <Typography.Text variant="m-500"
-                                >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
-                                    size="s"
-                                    code=".env" /> and update the values.</Typography.Text>
-                        {/if}
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code
-                                lang="bash"
-                                lineNumbers
-                                code={selectedFramework.updateConfigCode} />
-                        </div>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code
+                            lang="bash"
+                            lineNumbers
+                            code={`\ngit clone https://github.com/appwrite/starter-for-${selectedFramework.key}\ncd starter-for-${selectedFramework.key}`} />
+                    </div>
 
+                    {#if selectedFramework.key === 'angular'}
                         <Typography.Text variant="m-500"
-                            >3. Install project dependencies</Typography.Text>
-
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={'npm install'} />
-                        </div>
-
-                        <Typography.Text variant="m-500"
-                            >4. Run the app, then click the <InlineCode
+                            >2. Change <InlineCode
                                 size="s"
-                                code="Send a ping" /> button to verify the setup.</Typography.Text>
-                        <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
-                        <div class="pink2-code-margin-fix">
-                            <Code lang="bash" lineNumbers code={selectedFramework.runCommand} />
-                        </div>
-                    </Layout.Stack>
-                </Fieldset>
-                <Card.Base padding="s"
-                    ><Layout.Stack direction="row" justifyContent="space-between"
-                        ><Layout.Stack direction="row" alignItems="center">
-                            <Icon
-                                icon={IconInfo}
-                                color="--fgcolor-neutral-tertiary" /><Typography.Text
-                                variant="m-500"
-                                color="--fgcolor-neutral-primary">
-                                Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
-                            ></Layout.Stack>
-                        <Button
-                            external
-                            secondary
-                            href={`http://localhost:${selectedFramework.portNumber}`}
-                            ><Layout.Stack direction="row" gap="xs"
-                                >Open <Icon
-                                    icon={IconExternalLink}
-                                    color="--fgcolor-neutral-tertiary" /></Layout.Stack
-                            ></Button
-                        ></Layout.Stack
-                    ></Card.Base>
-            {/if}
-        </Layout.Stack>
-    </Form>
+                                code="src/environments/environment.ts" />
+                            to reflect the values below:</Typography.Text>
+                    {:else}
+                        <Typography.Text variant="m-500"
+                            >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
+                                size="s"
+                                code=".env" /> and update the values.</Typography.Text>
+                    {/if}
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={selectedFramework.updateConfigCode} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >3. Install project dependencies</Typography.Text>
+
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={'npm install'} />
+                    </div>
+
+                    <Typography.Text variant="m-500"
+                        >4. Run the app, then click the <InlineCode size="s" code="Send a ping" /> button
+                        to verify the setup.</Typography.Text>
+                    <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
+                    <div class="pink2-code-margin-fix">
+                        <Code lang="bash" lineNumbers code={selectedFramework.runCommand} />
+                    </div>
+                </Layout.Stack>
+            </Fieldset>
+            <Card.Base padding="s"
+                ><Layout.Stack direction="row" justifyContent="space-between"
+                    ><Layout.Stack direction="row" alignItems="center">
+                        <Icon icon={IconInfo} color="--fgcolor-neutral-tertiary" /><Typography.Text
+                            variant="m-500"
+                            color="--fgcolor-neutral-primary">
+                            Demo app runs on http://localhost:{selectedFramework.portNumber}</Typography.Text
+                        ></Layout.Stack>
+                    <Button
+                        external
+                        secondary
+                        href={`http://localhost:${selectedFramework.portNumber}`}
+                        ><Layout.Stack direction="row" gap="xs"
+                            >Open <Icon
+                                icon={IconExternalLink}
+                                color="--fgcolor-neutral-tertiary" /></Layout.Stack
+                        ></Button
+                    ></Layout.Stack
+                ></Card.Base>
+        {/if}
+    </Layout.Stack>
     <svelte:fragment slot="aside">
         <Card.Base>
             <Layout.Stack gap="xxl">

From 03811bdab654c2cf6e2b6c7688e7a58b00ccf961 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 16:49:50 +0530
Subject: [PATCH 57/66] fix: don't confirm for exit if platform already
 created.

---
 .../overview/platforms/createAndroid.svelte                     | 2 +-
 .../overview/platforms/createApple.svelte                       | 2 +-
 .../overview/platforms/createFlutter.svelte                     | 2 +-
 .../overview/platforms/createReactNative.svelte                 | 2 +-
 .../overview/platforms/createWeb.svelte                         | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index 8141929fe..59e98a08b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -91,7 +91,7 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
     });
 </script>
 
-<Wizard title="Add Android platform" bind:showExitModal confirmExit>
+<Wizard title="Add Android platform" bind:showExitModal confirmExit={!isPlatformCreated}>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
         {#if !isPlatformCreated}
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 3690efb38..8f342e1a2 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -102,7 +102,7 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
     });
 </script>
 
-<Wizard title="Add Apple platform" bind:showExitModal confirmExit>
+<Wizard title="Add Apple platform" bind:showExitModal confirmExit={!isPlatformCreated}>
     <Layout.Stack gap="xxl">
         <Form onSubmit={createApplePlatform}>
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 32f44a13c..72d23f7c3 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -161,7 +161,7 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
     });
 </script>
 
-<Wizard title="Add Flutter platform" bind:showExitModal confirmExit>
+<Wizard title="Add Flutter platform" bind:showExitModal confirmExit={!isPlatformCreated}>
     <Layout.Stack gap="xxl">
         <Form onSubmit={createFlutterPlatform}>
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index ae2d7dbd4..50d8904f6 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -129,7 +129,7 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
     });
 </script>
 
-<Wizard title="Add React Native platform" bind:showExitModal confirmExit>
+<Wizard title="Add React Native platform" bind:showExitModal confirmExit={!isPlatformCreated}>
     <Layout.Stack gap="xxl">
         <Form onSubmit={createReactNativePlatform}>
             <Layout.Stack gap="xxl">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index e598a595a..202afce46 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -201,7 +201,7 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
     $: console.log('Reactivity triggered');
 </script>
 
-<Wizard title="Add web platform" bind:showExitModal>
+<Wizard title="Add web platform" bind:showExitModal confirmExit={!isPlatformCreated}>
     <Layout.Stack gap="xxl">
         <!-- Step One -->
         {#if !isPlatformCreated || isChangingFramework}

From c97074bd7e27cbbb118d1353c6d3d6c3ee290e15 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 17:00:36 +0530
Subject: [PATCH 58/66] fix: missing platform keys on details.

---
 .../[platform]/+page@project-[region]-[project].svelte        | 2 +-
 .../overview/platforms/createFlutter.svelte                   | 4 ++--
 .../overview/platforms/createWeb.svelte                       | 2 --
 3 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
index 09335b492..7f3984344 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/[platform]/+page@project-[region]-[project].svelte
@@ -98,7 +98,7 @@
                 <div class="u-flex u-gap-16">
                     <div class="u-cross-child-center u-line-height-1-5">
                         <h6 class="u-bold">{$platform.name}</h6>
-                        <p>{$platform.hostname}</p>
+                        <p>{$platform.hostname || $platform.key}</p>
                     </div>
                 </div>
             </Box>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 72d23f7c3..ab916c8ac 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -250,8 +250,8 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                                     <Typography.Text
                                         variant="m-400"
                                         color="--fgcolor-neutral-primary">
-                                        {$createPlatform.name} ({$createPlatform.key ??
-                                            $createPlatform.hostname})
+                                        {$createPlatform.name} ({$createPlatform.hostname ||
+                                            $createPlatform.key})
                                     </Typography.Text>
                                 </Layout.Stack>
                             </Layout.Stack>
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index 202afce46..87d799d0a 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -197,8 +197,6 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
             resetPlatformStore();
         };
     });
-
-    $: console.log('Reactivity triggered');
 </script>
 
 <Wizard title="Add web platform" bind:showExitModal confirmExit={!isPlatformCreated}>

From e931fadad62c32fb13d04ef2724c153b19dbc511 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 17:53:27 +0530
Subject: [PATCH 59/66] fix: wizard copies.

---
 .../overview/platforms/createAndroid.svelte        |  4 ++--
 .../overview/platforms/createApple.svelte          |  3 ++-
 .../overview/platforms/createFlutter.svelte        |  4 ++--
 .../overview/platforms/createReactNative.svelte    | 14 +++++++-------
 .../overview/platforms/createWeb.svelte            |  9 ++++++---
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
index ac89f191a..f56d1fd7e 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createAndroid.svelte
@@ -160,8 +160,8 @@ const val APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or Android
-                            Studio.
+                            1. If you're starting a new project, you can clone our starter kit from
+                            GitHub using the terminal, VSCode or Android Studio.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
index 20a0f1c25..f63c7702b 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createApple.svelte
@@ -186,7 +186,8 @@ APPWRITE_PUBLIC_ENDPOINT: "${sdk.forProject(page.params.region, page.params.proj
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or XCode.
+                            1. If you're starting a new project, you can clone our starter kit from
+                            GitHub using the terminal or XCode.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
index 8d0aa74df..ef6b62a88 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createFlutter.svelte
@@ -260,8 +260,8 @@ static const String APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.reg
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal, Android Studio
-                            or VSCode.
+                            1. If you're starting a new project, you can clone our starter kit from
+                            GitHub using the terminal, VSCode or Android Studio.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index d8b01e0eb..a5d019254 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -25,7 +25,6 @@
     import ConnectionLine from './components/ConnectionLine.svelte';
     import OnboardingPlatformCard from './components/OnboardingPlatformCard.svelte';
     import { PlatformType } from '@appwrite.io/console';
-    import { isCloud } from '$lib/system';
 
     let showExitModal = false;
     let isPlatformCreated = false;
@@ -36,9 +35,7 @@
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-react-native\ncd starter-for-react-native\n';
 
-    const updateConfigCode = isCloud
-        ? `const APPWRITE_PROJECT_ID = "${projectId}";`
-        : `const APPWRITE_PROJECT_ID = "${projectId}";
+    const updateConfigCode = `const APPWRITE_PROJECT_ID = "${projectId}";
 const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}";
         `;
 
@@ -212,7 +209,8 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or VSCode.
+                            1. If you're starting a new project, you can clone our starter kit from
+                            GitHub using the terminal or VSCode.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
@@ -221,9 +219,11 @@ const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.para
                         </div>
 
                         <Typography.Text variant="m-500"
-                            >2. Open the file <InlineCode
+                            >2. Add your Appwrite credentials to <InlineCode
                                 size="s"
-                                code="lib/constants/appwrite.js" /> and update the configuration settings.</Typography.Text>
+                                code=".env.example" /> then rename it to <InlineCode
+                                size="s"
+                                code=".env" /> if needed.</Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
                         <div class="pink2-code-margin-fix">
diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
index bb675c7a9..8a8096182 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createWeb.svelte
@@ -274,7 +274,8 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                 <Fieldset legend="Clone starter">
                     <Layout.Stack gap="l">
                         <Typography.Text variant="m-500">
-                            1. Clone the starter kit from GitHub using the terminal or VSCode.
+                            1. If you're starting a new project, you can clone our starter kit from
+                            GitHub using the terminal or VSCode.
                         </Typography.Text>
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->
@@ -293,9 +294,11 @@ ${prefix}APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.p
                                 to reflect the values below:</Typography.Text>
                         {:else}
                             <Typography.Text variant="m-500"
-                                >2. Rename <InlineCode size="s" code=".env.example" /> into <InlineCode
+                                >2. Add your Appwrite credentials to <InlineCode
                                     size="s"
-                                    code=".env" /> and update the values.</Typography.Text>
+                                    code=".env.example" /> then rename it to <InlineCode
+                                    size="s"
+                                    code=".env" /> if needed.</Typography.Text>
                         {/if}
 
                         <!-- Temporary fix: Remove this div once Code splitting issue with stack spacing is resolved -->

From 9aee747fd739219bf07201c9602f026f4827e17c Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Jun 2025 18:00:10 +0530
Subject: [PATCH 60/66] update: env vars.

---
 .../overview/platforms/createReactNative.svelte               | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
index a5d019254..0fadb5ff7 100644
--- a/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
+++ b/src/routes/(console)/project-[region]-[project]/overview/platforms/createReactNative.svelte
@@ -35,8 +35,8 @@
     const gitCloneCode =
         '\ngit clone https://github.com/appwrite/starter-for-react-native\ncd starter-for-react-native\n';
 
-    const updateConfigCode = `const APPWRITE_PROJECT_ID = "${projectId}";
-const APPWRITE_PUBLIC_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}";
+    const updateConfigCode = `const EXPO_PUBLIC_APPWRITE_PROJECT_ID = "${projectId}";
+const EXPO_PUBLIC_APPWRITE_ENDPOINT = "${sdk.forProject(page.params.region, page.params.project).client.config.endpoint}";
         `;
 
     export let platform: PlatformType = PlatformType.Reactnativeandroid;

From 9696bf59291b2592322ced7c21672e57cb1ecc86 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 16 Jun 2025 11:01:09 +0200
Subject: [PATCH 61/66] Removing await function to fix the combobox select
 options

---
 src/lib/components/git/repositories.svelte | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index b82781169..c30a07174 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/src/lib/components/git/repositories.svelte
@@ -23,7 +23,7 @@
     import { page } from '$app/state';
     import Card from '../card.svelte';
     import SkeletonRepoList from './skeletonRepoList.svelte';
-    import { untrack } from 'svelte';
+    import { onMount, untrack } from 'svelte';
 
     let {
         action = $bindable('select'),
@@ -46,6 +46,11 @@
     let search = $state('');
     let selectedInstallation = $state(null);
     let isLoadingRepositories = $state(null);
+    let installationsMap = $state(null);
+
+    onMount(() => {
+        loadInstallations();
+    });
 
     async function loadInstallations() {
         if (installationList) {
@@ -59,7 +64,7 @@
                     )
                 );
             }
-            return installationList.installations;
+            installationsMap = installationList.installations;
         } else {
             const { installations } = await sdk
                 .forProject(page.params.region, page.params.project)
@@ -70,7 +75,7 @@
                 }
                 installation.set(installations.find((entry) => entry.$id === selectedInstallation));
             }
-            return installations;
+            installationsMap = installations;
         }
     }
 
@@ -123,7 +128,7 @@
 {#if hasInstallations}
     <Layout.Stack>
         <Layout.Stack gap="s">
-            {#await loadInstallations()}
+            {#if !installationsMap}
                 <Layout.Stack direction="row">
                     <InputSelect
                         disabled
@@ -137,12 +142,12 @@
                         value={null} />
                     <InputSearch placeholder="Search repositories" disabled />
                 </Layout.Stack>
-            {:then installations}
+            {:else}
                 <Layout.Stack direction={$isSmallViewport ? 'column' : 'row'}>
                     <InputSelect
                         id="installation"
                         options={[
-                            ...installations.map((entry) => {
+                            ...installationsMap.map((entry) => {
                                 return {
                                     label: entry.organization,
                                     value: entry.$id
@@ -160,7 +165,7 @@
                             }
                             search = '';
                             installation.set(
-                                installations.find((entry) => entry.$id === selectedInstallation)
+                                installationsMap.find((entry) => entry.$id === selectedInstallation)
                             );
 
                             isLoadingRepositories = true;
@@ -174,7 +179,7 @@
                         bind:value={search}
                         disabled={!search && !$repositories?.repositories?.length} />
                 </Layout.Stack>
-            {/await}
+            {/if}
         </Layout.Stack>
         {#if selectedInstallation}
             <!-- manual installation change -->
@@ -310,3 +315,4 @@
 {:else}
     <ConnectGit {callbackState} />
 {/if}
+hai hoi

From 420d365165ed459a3d5af2c3118ebe5aa5157600 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 16 Jun 2025 11:02:31 +0200
Subject: [PATCH 62/66] Remove debug

---
 src/lib/components/git/repositories.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/components/git/repositories.svelte b/src/lib/components/git/repositories.svelte
index c30a07174..39f260a99 100644
--- a/src/lib/components/git/repositories.svelte
+++ b/src/lib/components/git/repositories.svelte
@@ -315,4 +315,3 @@
 {:else}
     <ConnectGit {callbackState} />
 {/if}
-hai hoi

From 9ce44ac27a6d9d272cf491f5ed33616aecc9285c Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 16 Jun 2025 14:05:55 +0200
Subject: [PATCH 63/66] Use charts data for sum labels

---
 .../settings/usage/[[invoice]]/+page.svelte            | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
index 81ee6ada9..24b82ae7b 100644
--- a/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/settings/usage/[[invoice]]/+page.svelte
@@ -34,8 +34,14 @@
     $: dbWrites = data.usage.databasesWrites;
 
     $: legendData = [
-        { name: 'Reads', value: data.usage.databasesReadsTotal },
-        { name: 'Writes', value: data.usage.databasesWritesTotal }
+        {
+            name: 'Reads',
+            value: data.usage.databasesReads.reduce((sum, item) => sum + item.value, 0)
+        },
+        {
+            name: 'Writes',
+            value: data.usage.databasesWrites.reduce((sum, item) => sum + item.value, 0)
+        }
     ];
 
     const tier = data?.currentInvoice?.plan ?? $organization?.billingPlan;

From fd47665311b81df229ed12d469483033741d9ed9 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Mon, 16 Jun 2025 11:35:03 -0400
Subject: [PATCH 64/66] Update publish

---
 .github/workflows/publish.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
index 7073e19f1..137c750f7 100644
--- a/.github/workflows/publish.yml
+++ b/.github/workflows/publish.yml
@@ -79,7 +79,7 @@ jobs:
                   labels: ${{ steps.meta.outputs.labels }}
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
-                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt,index-lengths"
                       "PUBLIC_APPWRITE_MULTI_REGION=true"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
@@ -118,7 +118,7 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=self-hosted"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
-                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt,index-lengths"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"
 
     publish-cloud-no-regions:
@@ -156,6 +156,6 @@ jobs:
                   build-args: |
                       "PUBLIC_CONSOLE_MODE=cloud"
                       "PUBLIC_APPWRITE_MULTI_REGION=false"
-                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt"
+                      "PUBLIC_CONSOLE_FEATURE_FLAGS=sites,csv-import,attribute-encrypt,index-lengths"
                       "PUBLIC_STRIPE_KEY=${{ secrets.PUBLIC_STRIPE_KEY_STAGE }}"
                       "PUBLIC_GROWTH_ENDPOINT=${{ secrets.PUBLIC_GROWTH_ENDPOINT }}"

From cc3936d1fd88db3178f221e90f8bf714cd50cca1 Mon Sep 17 00:00:00 2001
From: Jake Barnby <jakeb994@gmail.com>
Date: Mon, 16 Jun 2025 11:35:25 -0400
Subject: [PATCH 65/66] Use const

---
 .../collection-[collection]/attributes/string.svelte            | 2 +-
 .../collection-[collection]/indexes/createIndex.svelte          | 2 +-
 .../collection-[collection]/indexes/overviewIndex.svelte        | 2 +-
 .../database-[database]/collection-[collection]/table.svelte    | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 3b4a60eb4..aff1747df 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -63,7 +63,7 @@
 
     let savedDefault = data.default;
 
-    let showEncrypt = flags.showAttributeEncrypt(page.data);
+    const showEncrypt = flags.showAttributeEncrypt(page.data);
 
     function handleDefaultState(hideDefault: boolean) {
         if (hideDefault) {
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 74359ef81..1d6858eac 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
@@ -39,7 +39,7 @@
 
     let attributeList = [{ value: '', order: '', length: null }];
 
-    let showLengths = flags.showIndexLengths(page.data);
+    const showLengths = flags.showIndexLengths(page.data);
 
     function generateIndexKey() {
         let indexKeys = $indexes.map((index) => index.key);
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 c4c9552bf..f7318b6ea 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
@@ -9,7 +9,7 @@
     export let showOverview = false;
     export let selectedIndex: Models.Index = null;
 
-    let showLengths = flags.showIndexLengths(page.data);
+    const showLengths = flags.showIndexLengths(page.data);
 </script>
 
 <Modal title="Overview" bind:show={showOverview}>
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
index 5c5b947e5..432ce3e27 100644
--- 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
@@ -169,7 +169,7 @@
 
     let checked = false;
 
-    let showEncrypt = flags.showAttributeEncrypt(data);
+    const showEncrypt = flags.showAttributeEncrypt(data);
 </script>
 
 <Table.Root

From 2fde5c3e25cf87cd199376807e218450a7e4cfca Mon Sep 17 00:00:00 2001
From: Steven Nguyen <stnguyen90@users.noreply.github.com>
Date: Mon, 16 Jun 2025 16:41:28 -0700
Subject: [PATCH 66/66] fix: prevent disappearing documents table when
 switching collections

When switching collections, the $attributes store doesn't update right away so $attributes is for the old collection, but $columns is for the new collection so attr ends up being undefined leading to the error:

TypeError: Cannot read properties of undefined (reading 'type')

Checking attr first prevents the exception from occuring, giving enough time for $attributes to update and the table to render correctly.
---
 .../collection-[collection]/table.svelte      | 150 +++++++++---------
 1 file changed, 76 insertions(+), 74 deletions(-)

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
index d85591a86..42bccd017 100644
--- 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
@@ -205,86 +205,88 @@
 
             {#each $columns as { id } (id)}
                 {@const attr = $attributes.find((n) => n.key === id)}
-                <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 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}
-                                            <span class="text" data-private>
-                                                {related?.[arg]}
-                                            </span>
-                                        {/if}
-                                    {/each}
-                                </Link.Button>
+                                        {/each}
+                                    </Link.Button>
+                                {:else}
+                                    <span class="text">n/a</span>
+                                {/if}
                             {:else}
-                                <span class="text">n/a</span>
+                                {@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 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'}
-                        {#if isDatetimeAttribute}
-                            <DualTimeView time={datetime}>
-                                <span slot="title">Timestamp</span>
-                                {toLocaleDateTime(datetime, true)}
-                            </DualTimeView>
-                        {:else if isString(attr) && attr.encrypt && showEncrypt}
-                            <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 datetime = document[id]}
+                            {@const formatted = formatColumn(document[id])}
+                            {@const isDatetimeAttribute = attr.type === 'datetime'}
+                            {#if isDatetimeAttribute}
+                                <DualTimeView time={datetime}>
+                                    <span slot="title">Timestamp</span>
+                                    {toLocaleDateTime(datetime, true)}
+                                </DualTimeView>
+                            {:else if isString(attr) && attr.encrypt && showEncrypt}
+                                <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>
-                                <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}
-                </Table.Cell>
+                    </Table.Cell>
+                {/if}
             {/each}
             <Table.Cell column="$created" {root}>
                 <DualTimeView time={document.$createdAt} />