From d3c96369d15417b17b9c47281038e15e7e6a8dfe Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 14:48:34 +0530
Subject: [PATCH 01/53] fix: consistent divider colors.

---
 src/lib/wizards/functions/cover.svelte | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 08a18f119..4a1245d4a 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -287,4 +287,20 @@
             hsl(var(--p-card-bg-color) / 0.5) 95.8%
         );
     }
+
+    .u-sep-block-start {
+        border-block-start: solid .0625rem hsl(var(--color-neutral)) !important;
+    }
+
+    .clickable-list-item:not(:last-child) {
+        border-block-end: solid .0625rem hsl(var(--color-neutral)) !important;
+    }
+
+    :global(.theme-light) {
+        --color-neutral: var(--color-neutral-10);
+    }
+
+    :global(.theme-dark) {
+        --color-neutral: var(--color-neutral-85);
+    }
 </style>

From 06a02c7939437ebcab08388eaf108f3f737bc128 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 14:55:07 +0530
Subject: [PATCH 02/53] fix: add 16px padding around link items.

---
 src/lib/wizards/functions/cover.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 4a1245d4a..10e28b72b 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -219,7 +219,7 @@
 
                         <ul class="clickable-list u-margin-block-start-16">
                             {#each templates as template}
-                                <li class="clickable-list-item">
+                                <li class="clickable-list-item u-padding-block-16">
                                     <button
                                         type="button"
                                         on:click={() => {

From 302e58b4abfac645513c00c10f00624aeaab8267 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 15:05:48 +0530
Subject: [PATCH 03/53] update: correct closed lock icon color.

---
 src/lib/wizards/functions/components/repositories.svelte | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index dc8c73bd4..30297eb31 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -225,3 +225,9 @@
         </Button>
     </div>
 {/if}
+
+<style>
+    .icon-lock-closed {
+        color: hsl(var(--color-neutral-50));
+    }
+</style>
\ No newline at end of file

From b59dd1d5dcd0ef3def02b8a9c6e4d7ac299c0da9 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 15:35:29 +0530
Subject: [PATCH 04/53] update: center progress bar.

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

diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index 30297eb31..9b1bd657c 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -125,7 +125,7 @@
     </p>
     {#if selectedInstallation}
         {#await loadRepositories(selectedInstallation, search)}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center">
+            <div class="u-flex u-gap-8 u-cross-center u-main-center" style="height: 50vh; ">
                 <div class="loader u-margin-32" />
             </div>
         {:then response}

From 3bd01431eb0fcda2219ec19c47a4a2cf8024f847 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 15:44:28 +0530
Subject: [PATCH 05/53] fix: branch message to use plural.

---
 src/lib/wizards/functions/steps/gitConfiguration.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/wizards/functions/steps/gitConfiguration.svelte b/src/lib/wizards/functions/steps/gitConfiguration.svelte
index 9980e765d..1aaaf93ba 100644
--- a/src/lib/wizards/functions/steps/gitConfiguration.svelte
+++ b/src/lib/wizards/functions/steps/gitConfiguration.svelte
@@ -67,7 +67,7 @@
                             $choices.branch = event.detail.value;
                         }}
                         interactiveOutput
-                        name="branch"
+                        name="branches"
                         {options} />
                     <InputText
                         id="root"

From eda0016d4d611c5f4a0bf484fe506b065addfe1b Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 18:16:34 +0530
Subject: [PATCH 06/53] fix: icon sizes as per designs.

---
 src/lib/components/dropListLink.svelte                      | 4 +++-
 .../functions/function-[function]/deploymentSource.svelte   | 6 +++---
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 0267a21d0..5f60543ec 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -6,6 +6,7 @@
     export let disabled = false;
     export let external = false;
     export let event: string = null;
+    export let iconStyle: string = '';
 
     function track() {
         if (!event) {
@@ -29,7 +30,8 @@
         rel={external ? 'noopener noreferrer' : ''}>
         <span class="text"><slot /></span>
         {#if icon}
-            <span class={`icon-${icon}`} aria-hidden="true" />
+            <span class={`icon-${icon}`} style={iconStyle} aria-hidden="true" />
         {/if}
     </a>
 </li>
+
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
index 0c5b765de..83e4f4e7e 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -15,14 +15,14 @@
             <span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
         </button>
         <svelte:fragment slot="list">
-            <DropListLink href={deployment.providerRepositoryUrl} external icon="github">
+            <DropListLink href={deployment.providerRepositoryUrl} external icon="github" iconStyle="font-size:20px">
                 {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
             </DropListLink>
-            <DropListLink href={deployment.providerBranchUrl} external icon="git-branch">
+            <DropListLink href={deployment.providerBranchUrl} external icon="git-branch" iconStyle="font-size:20px">
                 {deployment.providerBranch}
             </DropListLink>
             {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
-                <DropListLink href={deployment.providerCommitUrl} external icon="git-commit">
+                <DropListLink href={deployment.providerCommitUrl} external icon="git-commit" iconStyle="font-size:20px">
                     <Trim alternativeTrim>
                         {deployment?.providerCommitHash?.substring(0, 7)}
                         {deployment.providerCommitMessage}

From f4a7e9901b2eddd62ee9032046f2e62f56213792 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 18:28:41 +0530
Subject: [PATCH 07/53] fix: truncate labels in git deployment info tooltip.

---
 .../function-[function]/deploymentSource.svelte      | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
index 83e4f4e7e..2d64f7a03 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -16,7 +16,11 @@
         </button>
         <svelte:fragment slot="list">
             <DropListLink href={deployment.providerRepositoryUrl} external icon="github" iconStyle="font-size:20px">
-                {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+                <Trim alternativeTrim>
+                    <span style="white-space: pre-wrap">
+                        {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
+                    </span>
+                </Trim>
             </DropListLink>
             <DropListLink href={deployment.providerBranchUrl} external icon="git-branch" iconStyle="font-size:20px">
                 {deployment.providerBranch}
@@ -24,8 +28,10 @@
             {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
                 <DropListLink href={deployment.providerCommitUrl} external icon="git-commit" iconStyle="font-size:20px">
                     <Trim alternativeTrim>
-                        {deployment?.providerCommitHash?.substring(0, 7)}
-                        {deployment.providerCommitMessage}
+                        <span style="white-space: pre-wrap">
+                            {deployment?.providerCommitHash?.substring(0, 7)}
+                            {deployment.providerCommitMessage}
+                        </span>
                     </Trim>
                 </DropListLink>
             {/if}

From 40120c79881dc1ad1a8aca604a6174afac820aa2 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 18:35:50 +0530
Subject: [PATCH 08/53] fix: use `Build Size` for consistency.

---
 .../functions/function-[function]/+page.svelte                  | 2 +-
 .../function-[function]/deployment-[deployment]/+page.svelte    | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
index aa0c3c17b..e370f2679 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -105,7 +105,7 @@
                                 <b>Updated:</b>
                                 <DeploymentCreatedBy deployment={activeDeployment} />
                             </p>
-                            <p><b>Size:</b> {fileSize.value + fileSize.unit}</p>
+                            <p><b>Build Size:</b> {fileSize.value + fileSize.unit}</p>
                             <p class="u-flex u-gap-4 u-cross-center">
                                 <b>Source:</b>
                                 <DeploymentSource deployment={activeDeployment} />
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index ccaacbe06..8d33c939e 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -76,7 +76,7 @@
                     </p>
                     <p><b>Updated:</b> <DeploymentCreatedBy deployment={$deployment} /></p>
                     <p>
-                        <b>Size:</b>
+                        <b>Build Size:</b>
                         {fileSize.value + fileSize.unit}
                         <span
                             class="icon-info"

From ef7dc5b60223bbc122dc33e7368fb2e3d3721dc9 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 30 Jul 2024 18:42:37 +0530
Subject: [PATCH 09/53] fix: remove extra space.

---
 .../functions/function-[function]/execute.svelte             | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
index aea981107..aaa56773a 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/execute.svelte
@@ -92,9 +92,8 @@
             class="link"
             href="https://appwrite.io/docs/products/functions/execution"
             target="_blank"
-            rel="noopener noreferrer">
-            Learn more
-        </a>.
+            rel="noopener noreferrer">Learn more</a
+        >.
     </p>
 
     <FormList>

From 9ce2d7b703135c4cc9abc5d0722145adfafede17 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Wed, 31 Jul 2024 16:52:35 +0530
Subject: [PATCH 10/53] fix: show only element if single in required vars.

---
 .../functions/steps/templateVariables.svelte  | 60 ++++++++++++++++---
 1 file changed, 53 insertions(+), 7 deletions(-)

diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index d8e677344..e832a73cd 100644
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -63,12 +63,51 @@
     </svelte:fragment>
     {#if $template?.variables?.length}
         {#if requiredVariables?.length}
-            <Collapsible>
-                <CollapsibleItem open={true}>
-                    <svelte:fragment slot="title">Required variables</svelte:fragment>
-                    <svelte:fragment slot="subtitle">
-                        <span class="inline-tag">{requiredVariables.length}</span>
-                    </svelte:fragment>
+            {#if requiredVariables?.length === 1}
+                <div class="collapsible-item">
+                    <div class="collapsible-wrapper">
+                        <div class="collapsible-button">
+                            <div>
+                                <span class="text">Required variables</span>
+                                <span class="collapsible-button-optional">
+                                    <span class="inline-tag">{requiredVariables.length}</span>
+                                </span>
+                            </div>
+                        </div>
+                        <div class="collapsible-content">
+                            <FormList>
+                            {#each requiredVariables as variable}
+                                {#if variable.name === 'APPWRITE_API_KEY'}
+                                    <AppwriteVariable appwriteVariable={variable} />
+                                {:else}
+                                    <div>
+                                        <svelte:component
+                                            this={selectComponent(variable.type)}
+                                            id={variable.name}
+                                            label={variable.name}
+                                            placeholder={variable.placeholder ?? 'Enter value'}
+                                            required={variable.required}
+                                            autocomplete={false}
+                                            minlength={variable.type === 'password' ? 0 : null}
+                                            showPasswordButton={variable.type === 'password'}
+                                            bind:value={$templateConfig.variables[variable.name]} />
+                                        <Helper type="neutral">
+                                            {@html variable.description}
+                                        </Helper>
+                                    </div>
+                                {/if}
+                            {/each}
+                        </FormList>
+                        </div>
+                    </div>
+                </div>
+            {:else if requiredVariables?.length > 1}
+                <Collapsible>
+                    <CollapsibleItem open={true}>
+                        <svelte:fragment slot="title">Required variables</svelte:fragment>
+                        <svelte:fragment slot="subtitle">
+                            <span class="inline-tag">{requiredVariables.length}</span>
+                        </svelte:fragment>
 
                     <FormList>
                         {#each requiredVariables as variable}
@@ -94,7 +133,8 @@
                         {/each}
                     </FormList>
                 </CollapsibleItem>
-            </Collapsible>
+                </Collapsible>
+            {/if}
         {/if}
 
         {#if optionalVariables?.length}
@@ -137,3 +177,9 @@
         </Card>
     {/if}
 </WizardStep>
+
+<style>
+    .collapsible-button div {
+        padding: 3px 0;
+    }
+</style>
\ No newline at end of file

From bc56e7d4e1ea82d39b3b97314b706196d413f0ae Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Thu, 1 Aug 2024 14:15:30 +0530
Subject: [PATCH 11/53] update: stack content vertically on mobile.

---
 .../deployment-[deployment]/+page.svelte        | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 8d33c939e..334283d77 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -64,7 +64,7 @@
         <svelte:fragment slot="aside">
             {@const status = $deployment.status}
             {@const fileSize = humanFileSize($deployment.size)}
-            <div class="u-flex u-main-space-between">
+            <div class="u-flex u-main-space-between deployment-info">
                 <div class="u-grid-equal-row-size u-gap-4 u-line-height-1">
                     <p>
                         <b>Build time:</b>
@@ -98,7 +98,7 @@
                         </p>
                     {/if}
                 </div>
-                <div class="u-flex u-flex-vertical u-cross-end">
+                <div class="u-flex u-flex-vertical u-cross-end deployment-status">
                     <Pill
                         danger={status === 'failed'}
                         warning={status === 'building'}
@@ -141,3 +141,16 @@
         </div>
     </Card>
 </Container>
+
+<style>
+    @media (max-width: 768px) {
+        .deployment-info, .code-panel-header {
+            flex-direction: column;
+        }
+
+        .deployment-status {
+            padding-block-start: 1.5rem;
+            align-items: start !important;
+        }
+    }
+</style>
\ No newline at end of file

From f53897f7791201b271d4f5b3afe04cde7de08b6a Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Thu, 1 Aug 2024 14:55:22 +0530
Subject: [PATCH 12/53] fix: component borders for CLI modal.

---
 src/lib/components/code.svelte                  |  5 ++++-
 .../function-[function]/createCli.svelte        | 17 ++++++++++++++++-
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 5a358d548..47c134f20 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -32,6 +32,9 @@
     export let noBoxPadding = false;
     export let allowScroll = false;
 
+    let classes = '';
+    export { classes as class };
+
     Prism.plugins.customClass.prefix('prism-');
 
     afterUpdate(async () => {
@@ -39,7 +42,7 @@
     });
 </script>
 
-<section class="box u-overflow-hidden" class:common-section={!noMargin} class:noBoxPadding>
+<section class="box u-overflow-hidden {classes}" class:common-section={!noMargin} class:noBoxPadding>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index efc7a48c7..b43c2d9bd 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
@@ -98,7 +98,7 @@
         >.
     </Alert>
 
-    <div class="editor-border">
+    <div class="editor-border box">
         <SecondaryTabs large class="u-sep-block-end u-padding-8">
             {#each ['Unix', 'CMD', 'PowerShell'] as cat}
                 <SecondaryTabsItem
@@ -118,6 +118,7 @@
                     withLineNumbers
                     withCopy
                     language="sh"
+                    class="cli-commands-code-box-no-outline"
                     label={codeSnippets[cat].language}
                     code={codeSnippets[cat].code} />
             {/if}
@@ -127,3 +128,17 @@
         <Button secondary on:click={() => (show = false)}>Close</Button>
     </svelte:fragment>
 </Modal>
+
+<style>
+    .box {
+        padding: unset !important;
+    }
+
+    /* should we use global here? */
+    .editor-border :global(.cli-commands-code-box-no-outline) {
+        margin: 1rem 0;
+        border: unset !important;
+        border-radius: unset!important;
+        padding: 0 var(--box-padding, 1.5rem ) 0 var(--box-padding, 1.5rem );
+    }
+</style>
\ No newline at end of file

From 1242c454e78f2deac739638e294ee85f965d7e75 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 14:18:01 +0530
Subject: [PATCH 13/53] fix: cli commands bg.

---
 .../functions/function-[function]/createCli.svelte          | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index b43c2d9bd..d8e3e3b2b 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
@@ -132,6 +132,7 @@
 <style>
     .box {
         padding: unset !important;
+        background-color: unset !important;
     }
 
     /* should we use global here? */
@@ -139,6 +140,11 @@
         margin: 1rem 0;
         border: unset !important;
         border-radius: unset!important;
+        background-color: unset !important;
         padding: 0 var(--box-padding, 1.5rem ) 0 var(--box-padding, 1.5rem );
     }
+
+    :global(.editor-border .cli-commands-code-box-no-outline pre) {
+        background-color: unset !important;
+    }
 </style>
\ No newline at end of file

From 14e83740d7cf04994f21ef60945d30c36d603ea4 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 15:01:33 +0530
Subject: [PATCH 14/53] fix: item gap.

---
 src/lib/wizards/functions/cover.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index 10e28b72b..a5afc9cf8 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -219,7 +219,7 @@
 
                         <ul class="clickable-list u-margin-block-start-16">
                             {#each templates as template}
-                                <li class="clickable-list-item u-padding-block-16">
+                                <li class="clickable-list-item u-padding-block-8">
                                     <button
                                         type="button"
                                         on:click={() => {

From c2b3a12e6d6ddc62afd475b7423b596eb091e8d3 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 15:02:38 +0530
Subject: [PATCH 15/53] fix: hide accordion if all are required variables.

---
 src/lib/wizards/functions/steps/templateVariables.svelte | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index e832a73cd..d7a44179e 100644
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -63,7 +63,7 @@
     </svelte:fragment>
     {#if $template?.variables?.length}
         {#if requiredVariables?.length}
-            {#if requiredVariables?.length === 1}
+            {#if requiredVariables?.length === 1 || requiredVariables.every((variable) => variable.required)}
                 <div class="collapsible-item">
                     <div class="collapsible-wrapper">
                         <div class="collapsible-button">

From 3d316616f6b1e2c179be35b9cccb62781d06ec9e Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 15:09:19 +0530
Subject: [PATCH 16/53] fix: status alignment.

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

diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 334283d77..3f929eef6 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -98,7 +98,7 @@
                         </p>
                     {/if}
                 </div>
-                <div class="u-flex u-flex-vertical u-cross-end deployment-status">
+                <div class="u-flex u-flex-vertical deployment-status">
                     <Pill
                         danger={status === 'failed'}
                         warning={status === 'building'}

From 226227f880d087c19f4b86495243f5562f2689a5 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 15:26:45 +0530
Subject: [PATCH 17/53] fix: execution modal theme.

---
 src/lib/layout/logs.svelte | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 55deb7332..0d920cc2d 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -162,10 +162,10 @@
                             </div>
                         </div>
                     </header>
-                    <div class="code-panel-content grid-1-2" style="u-grid">
+                    <div class="code-panel-content grid-1-2">
                         <div
                             class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16"
-                            class:theme-dark={$app.themeInUse === 'light'}>
+                            class:theme-dark={$app.themeInUse === 'dark'}>
                             <Heading tag="h3" size="6">Request</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -278,7 +278,7 @@
                         </div>
                         <div
                             class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0"
-                            class:theme-dark={$app.themeInUse === 'light'}>
+                            class:theme-dark={$app.themeInUse === 'dark'}>
                             <Heading tag="h3" size="6">Response</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>

From a55ec9c1147826d81e90fb654c1cf8464a96477c Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 17:03:19 +0530
Subject: [PATCH 18/53] fix: make only logs scrollable.

---
 src/lib/layout/logs.svelte | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 0d920cc2d..0ede7d598 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -316,7 +316,13 @@
                                             {/if}
                                         </Alert>
                                     {/if}
-                                    <Code withCopy noMargin code={execution.logs} language="sh" />
+                                    <Code
+                                        allowScroll
+                                        withCopy
+                                        noMargin
+                                        code={execution.logs}
+                                        language="sh"
+                                        class="limited-code-height" />
                                 {:else}
                                     <Card isDashed isTile>
                                         <p class="text u-text-center">No response was recorded.</p>
@@ -324,7 +330,13 @@
                                 {/if}
                             {:else if selectedResponse === 'errors'}
                                 {#if execution?.errors}
-                                    <Code withCopy noMargin code={execution.errors} language="sh" />
+                                    <Code
+                                        allowScroll
+                                        withCopy
+                                        noMargin
+                                        code={execution.errors}
+                                        language="sh"
+                                        class="limited-code-height" />
                                 {:else}
                                     <Card isDashed isTile>
                                         <p class="text u-text-center">No response was recorded.</p>
@@ -384,3 +396,10 @@
         </div>
     </section>
 {/if}
+
+<style>
+    :global(.limited-code-height) {
+        max-height: 50vh;
+        overflow: auto !important;
+    }
+</style>

From c554aab4b9dae846d8d29af12b86e26388c08a56 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 17:05:02 +0530
Subject: [PATCH 19/53] ran: `npm run format`.

---
 src/lib/components/code.svelte                |  5 +-
 src/lib/components/dropListLink.svelte        |  1 -
 src/lib/helpers/load.ts                       |  2 +-
 src/lib/layout/unauthenticated.svelte         |  2 +-
 src/lib/stores/feedback.ts                    |  4 +-
 .../functions/components/repositories.svelte  |  2 +-
 src/lib/wizards/functions/cover.svelte        |  4 +-
 .../functions/steps/templateVariables.svelte  | 74 ++++++++++---------
 .../function-[function]/createCli.svelte      |  6 +-
 .../deployment-[deployment]/+page.svelte      |  5 +-
 .../deploymentSource.svelte                   | 18 ++++-
 11 files changed, 70 insertions(+), 53 deletions(-)

diff --git a/src/lib/components/code.svelte b/src/lib/components/code.svelte
index 47c134f20..5b818a7b8 100644
--- a/src/lib/components/code.svelte
+++ b/src/lib/components/code.svelte
@@ -42,7 +42,10 @@
     });
 </script>
 
-<section class="box u-overflow-hidden {classes}" class:common-section={!noMargin} class:noBoxPadding>
+<section
+    class="box u-overflow-hidden {classes}"
+    class:common-section={!noMargin}
+    class:noBoxPadding>
     <div
         class="controls u-position-absolute u-inset-inline-end-8 u-inset-block-start-8 u-flex u-gap-8">
         {#if label}
diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
index 5f60543ec..a2ef47b99 100644
--- a/src/lib/components/dropListLink.svelte
+++ b/src/lib/components/dropListLink.svelte
@@ -34,4 +34,3 @@
         {/if}
     </a>
 </li>
-
diff --git a/src/lib/helpers/load.ts b/src/lib/helpers/load.ts
index 05e043ddc..21e2f1ee6 100644
--- a/src/lib/helpers/load.ts
+++ b/src/lib/helpers/load.ts
@@ -21,7 +21,7 @@ export enum View {
 export function getView(url: URL, route: Page['route'], fallback: View): View {
     return (url.searchParams.get('view') ?? preferences.get(route).view) === View.Grid
         ? View.Grid
-        : View.Table ?? fallback;
+        : (View.Table ?? fallback);
 }
 
 export function getColumns(route: Page['route'], fallback: string[]): string[] {
diff --git a/src/lib/layout/unauthenticated.svelte b/src/lib/layout/unauthenticated.svelte
index b7e250b54..4d859d492 100644
--- a/src/lib/layout/unauthenticated.svelte
+++ b/src/lib/layout/unauthenticated.svelte
@@ -16,7 +16,7 @@
     export let coupon: Coupon = null;
 
     $: selectedCampaign = campaigns.get(coupon?.campaign ?? campaign);
-    $: variation = (coupon?.campaign ?? campaign ? selectedCampaign?.template : 'default') as
+    $: variation = ((coupon?.campaign ?? campaign) ? selectedCampaign?.template : 'default') as
         | 'default'
         | CampaignData['template'];
 
diff --git a/src/lib/stores/feedback.ts b/src/lib/stores/feedback.ts
index 7f9b6b200..7eaefca2d 100644
--- a/src/lib/stores/feedback.ts
+++ b/src/lib/stores/feedback.ts
@@ -71,8 +71,8 @@ export const feedbackData = createFeedbackDataStore();
 
 function createFeedbackStore() {
     const { subscribe, update } = writable<Feedback>({
-        elapsed: browser ? parseInt(localStorage.getItem('feedbackElapsed')) ?? 0 : 0,
-        visualized: browser ? parseInt(localStorage.getItem('feedbackVisualized')) ?? 0 : 0,
+        elapsed: browser ? (parseInt(localStorage.getItem('feedbackElapsed')) ?? 0) : 0,
+        visualized: browser ? (parseInt(localStorage.getItem('feedbackVisualized')) ?? 0) : 0,
         notification: false,
         type: 'general',
         show: false
diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index 9b1bd657c..2c6bcc90d 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -230,4 +230,4 @@
     .icon-lock-closed {
         color: hsl(var(--color-neutral-50));
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/lib/wizards/functions/cover.svelte b/src/lib/wizards/functions/cover.svelte
index a5afc9cf8..e539f6f05 100644
--- a/src/lib/wizards/functions/cover.svelte
+++ b/src/lib/wizards/functions/cover.svelte
@@ -289,11 +289,11 @@
     }
 
     .u-sep-block-start {
-        border-block-start: solid .0625rem hsl(var(--color-neutral)) !important;
+        border-block-start: solid 0.0625rem hsl(var(--color-neutral)) !important;
     }
 
     .clickable-list-item:not(:last-child) {
-        border-block-end: solid .0625rem hsl(var(--color-neutral)) !important;
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral)) !important;
     }
 
     :global(.theme-light) {
diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index d7a44179e..4d4f49dad 100644
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -76,6 +76,42 @@
                         </div>
                         <div class="collapsible-content">
                             <FormList>
+                                {#each requiredVariables as variable}
+                                    {#if variable.name === 'APPWRITE_API_KEY'}
+                                        <AppwriteVariable appwriteVariable={variable} />
+                                    {:else}
+                                        <div>
+                                            <svelte:component
+                                                this={selectComponent(variable.type)}
+                                                id={variable.name}
+                                                label={variable.name}
+                                                placeholder={variable.placeholder ?? 'Enter value'}
+                                                required={variable.required}
+                                                autocomplete={false}
+                                                minlength={variable.type === 'password' ? 0 : null}
+                                                showPasswordButton={variable.type === 'password'}
+                                                bind:value={$templateConfig.variables[
+                                                    variable.name
+                                                ]} />
+                                            <Helper type="neutral">
+                                                {@html variable.description}
+                                            </Helper>
+                                        </div>
+                                    {/if}
+                                {/each}
+                            </FormList>
+                        </div>
+                    </div>
+                </div>
+            {:else if requiredVariables?.length > 1}
+                <Collapsible>
+                    <CollapsibleItem open={true}>
+                        <svelte:fragment slot="title">Required variables</svelte:fragment>
+                        <svelte:fragment slot="subtitle">
+                            <span class="inline-tag">{requiredVariables.length}</span>
+                        </svelte:fragment>
+
+                        <FormList>
                             {#each requiredVariables as variable}
                                 {#if variable.name === 'APPWRITE_API_KEY'}
                                     <AppwriteVariable appwriteVariable={variable} />
@@ -98,41 +134,7 @@
                                 {/if}
                             {/each}
                         </FormList>
-                        </div>
-                    </div>
-                </div>
-            {:else if requiredVariables?.length > 1}
-                <Collapsible>
-                    <CollapsibleItem open={true}>
-                        <svelte:fragment slot="title">Required variables</svelte:fragment>
-                        <svelte:fragment slot="subtitle">
-                            <span class="inline-tag">{requiredVariables.length}</span>
-                        </svelte:fragment>
-
-                    <FormList>
-                        {#each requiredVariables as variable}
-                            {#if variable.name === 'APPWRITE_API_KEY'}
-                                <AppwriteVariable appwriteVariable={variable} />
-                            {:else}
-                                <div>
-                                    <svelte:component
-                                        this={selectComponent(variable.type)}
-                                        id={variable.name}
-                                        label={variable.name}
-                                        placeholder={variable.placeholder ?? 'Enter value'}
-                                        required={variable.required}
-                                        autocomplete={false}
-                                        minlength={variable.type === 'password' ? 0 : null}
-                                        showPasswordButton={variable.type === 'password'}
-                                        bind:value={$templateConfig.variables[variable.name]} />
-                                    <Helper type="neutral">
-                                        {@html variable.description}
-                                    </Helper>
-                                </div>
-                            {/if}
-                        {/each}
-                    </FormList>
-                </CollapsibleItem>
+                    </CollapsibleItem>
                 </Collapsible>
             {/if}
         {/if}
@@ -182,4 +184,4 @@
     .collapsible-button div {
         padding: 3px 0;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
index d8e3e3b2b..22bf832f9 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createCli.svelte
@@ -139,12 +139,12 @@
     .editor-border :global(.cli-commands-code-box-no-outline) {
         margin: 1rem 0;
         border: unset !important;
-        border-radius: unset!important;
+        border-radius: unset !important;
         background-color: unset !important;
-        padding: 0 var(--box-padding, 1.5rem ) 0 var(--box-padding, 1.5rem );
+        padding: 0 var(--box-padding, 1.5rem) 0 var(--box-padding, 1.5rem);
     }
 
     :global(.editor-border .cli-commands-code-box-no-outline pre) {
         background-color: unset !important;
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 3f929eef6..e09f79cd4 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -144,7 +144,8 @@
 
 <style>
     @media (max-width: 768px) {
-        .deployment-info, .code-panel-header {
+        .deployment-info,
+        .code-panel-header {
             flex-direction: column;
         }
 
@@ -153,4 +154,4 @@
             align-items: start !important;
         }
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
index 2d64f7a03..b07d96d97 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -15,18 +15,30 @@
             <span class="icon-github" aria-hidden="true" /> <span class="link">GitHub</span>
         </button>
         <svelte:fragment slot="list">
-            <DropListLink href={deployment.providerRepositoryUrl} external icon="github" iconStyle="font-size:20px">
+            <DropListLink
+                href={deployment.providerRepositoryUrl}
+                external
+                icon="github"
+                iconStyle="font-size:20px">
                 <Trim alternativeTrim>
                     <span style="white-space: pre-wrap">
                         {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
                     </span>
                 </Trim>
             </DropListLink>
-            <DropListLink href={deployment.providerBranchUrl} external icon="git-branch" iconStyle="font-size:20px">
+            <DropListLink
+                href={deployment.providerBranchUrl}
+                external
+                icon="git-branch"
+                iconStyle="font-size:20px">
                 {deployment.providerBranch}
             </DropListLink>
             {#if deployment?.providerCommitMessage && deployment?.providerCommitHash && deployment?.providerCommitUrl}
-                <DropListLink href={deployment.providerCommitUrl} external icon="git-commit" iconStyle="font-size:20px">
+                <DropListLink
+                    href={deployment.providerCommitUrl}
+                    external
+                    icon="git-commit"
+                    iconStyle="font-size:20px">
                     <Trim alternativeTrim>
                         <span style="white-space: pre-wrap">
                             {deployment?.providerCommitHash?.substring(0, 7)}

From e437a45061934e550348a1e2df66c443359aaf95 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 18:02:58 +0530
Subject: [PATCH 20/53] improve: handle scroll to top button.

---
 .../deployment-[deployment]/+page.svelte      | 48 ++++++++++++++-----
 1 file changed, 37 insertions(+), 11 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index e09f79cd4..b0e597776 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -22,24 +22,45 @@
     import { tooltip } from '$lib/actions/tooltip';
 
     let logs = '';
+    let showScrollButton = false;
+    let codePanelContent: HTMLElement; /* global var to avoid frequent querySelector calls */
+
+    function handleScroll() {
+        const threshold = codePanelContent.clientHeight * 0.25;
+        showScrollButton = codePanelContent.scrollTop > threshold;
+    }
 
     onMount(() => {
         logs = $deployment.buildLogs;
+
+        codePanelContent = document.querySelector('.code-panel-content');
+        codePanelContent.addEventListener('scroll', handleScroll);
+
         if ($deployment.status === 'ready') {
             return;
         }
-        return sdk.forConsole.client.subscribe<Models.Deployment>('console', (message) => {
-            if (
-                message.events.includes(
-                    `functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
-                )
-            ) {
-                logs = message.payload['logs'];
-                if (message.payload.status === 'ready') {
-                    invalidate(Dependencies.DEPLOYMENT);
+
+        const unsubscribe = sdk.forConsole.client.subscribe<Models.Deployment>(
+            'console',
+            (message) => {
+                if (
+                    message.events.includes(
+                        `functions.${$page.params.function}.deployments.${$page.params.deployment}.update`
+                    )
+                ) {
+                    logs = message.payload['logs'];
+
+                    if (message.payload.status === 'ready') {
+                        invalidate(Dependencies.DEPLOYMENT);
+                    }
                 }
             }
-        });
+        );
+
+        return () => {
+            unsubscribe();
+            codePanelContent.removeEventListener('scroll', handleScroll);
+        };
     });
 </script>
 
@@ -130,7 +151,8 @@
                             <span class="icon-external-link" aria-hidden="true" /> Raw data</Button> -->
                         <Button
                             secondary
-                            on:click={() => window.scrollTo({ top: 0, behavior: 'smooth' })}>
+                            disabled={!showScrollButton}
+                            on:click={() => codePanelContent?.scrollTo({ top: 0, behavior: 'smooth' })}>
                             <span class="icon-arrow-sm-up" aria-hidden="true" /> Scroll to top</Button>
                     </div>
                 </header>
@@ -154,4 +176,8 @@
             align-items: start !important;
         }
     }
+
+    .code-panel-content {
+        max-height: 50vh;
+    }
 </style>

From 18508992c558aec5b87fb98b7121d5e3cd9e199f Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Fri, 2 Aug 2024 18:04:07 +0530
Subject: [PATCH 21/53] fix: comment message.

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

diff --git a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index b0e597776..36fed5591 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -23,7 +23,7 @@
 
     let logs = '';
     let showScrollButton = false;
-    let codePanelContent: HTMLElement; /* global var to avoid frequent querySelector calls */
+    let codePanelContent: HTMLElement; /* var to avoid frequent querySelector calls */
 
     function handleScroll() {
         const threshold = codePanelContent.clientHeight * 0.25;

From fe74251cfa20c526955720a9e7c6c10ad2671aaa Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sat, 3 Aug 2024 16:45:30 +0530
Subject: [PATCH 22/53] fix: avatars background colors.

---
 .../functions/templates/+page.svelte               | 14 +++++++++++---
 .../templates/template-[template]/+page.svelte     |  4 ++--
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index c1a0ba1f6..529660538 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -142,7 +142,7 @@
                                                 .getAll('runtime')
                                                 .includes(runtime)}
                                             on:change={(e) => applyFilter('runtime', runtime, e)} />
-                                        <div class="u-flex u-cross-center u-gap-8">
+                                        <div class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
                                             <div class="avatar is-size-x-small">
                                                 <SvgIcon name={icon} iconSize="small" />
                                             </div>
@@ -188,7 +188,7 @@
                                         {#each displayed as runtime}
                                             {@const icon = getIconFromRuntime(runtime.name)}
                                             {#if icon}
-                                                <li class="avatars-group-item">
+                                                <li class="avatars-group-item functions-avatar-holder">
                                                     <div class="avatar is-size-small">
                                                         <img
                                                             style:--p-text-size="20px"
@@ -201,7 +201,7 @@
                                             {/if}
                                         {/each}
                                         {#if hidden.length}
-                                            <li class="avatars-group-item">
+                                            <li class="avatars-group-item functions-avatar-holder">
                                                 <div
                                                     class="avatar is-size-small"
                                                     use:tooltip={{
@@ -261,3 +261,11 @@
         </section>
     </div>
 </Container>
+
+
+<style>
+    :global(.theme-light .functions-avatar-holder .avatar)  {
+        background-color: var(--p-avatar-bg-color-default);
+        --p-avatar-bg-color-default: hsl(var(--color-neutral-0));
+    }
+</style>
\ No newline at end of file
diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index fc6e5ec74..4fc65831f 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -52,7 +52,7 @@
                         <h4 class="body-text-1 u-bold">Published by</h4>
                         <img
                             class="u-margin-block-start-8"
-                            src={$app.themeInUse == 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
+                            src={$app.themeInUse === 'dark' ? AppwriteLogoDark : AppwriteLogoLight}
                             width="120"
                             height="22"
                             alt="Appwrite" />
@@ -63,7 +63,7 @@
         <section>
             <Card>
                 <Heading size="7" tag="h3">
-                    <span class="u-flex u-cross-center u-gap-8">
+                    <span class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
                         <div class="avatar is-size-small">
                             <span
                                 style:--p-text-size="20px"

From e82f98204f3c557fc4dac32638ab7bb7dc980c5a Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sat, 3 Aug 2024 16:55:12 +0530
Subject: [PATCH 23/53] fix: template title colors.

---
 .../project-[project]/functions/templates/+page.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index 529660538..729c8e6d3 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -181,7 +181,7 @@
                         <li>
                             <article class="card u-min-height-100-percent">
                                 <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
-                                    <h2 class="body-text-1 u-bold u-trim-1">
+                                    <h2 class="body-text-1 u-bold u-trim-1 functions-template-title">
                                         {template.name}
                                     </h2>
                                     <ul class="avatars-group is-with-border">
@@ -268,4 +268,12 @@
         background-color: var(--p-avatar-bg-color-default);
         --p-avatar-bg-color-default: hsl(var(--color-neutral-0));
     }
+
+    :global(.theme-light .functions-template-title) {
+        color: hsl(var(--color-neutral-120));
+    }
+
+    :global(.theme-dark .functions-template-title) {
+        color: hsl(var(--color-neutral-15));
+    }
 </style>
\ No newline at end of file

From 8f90b1fd2742f0233406e3451878c3b30c2f991d Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sun, 4 Aug 2024 12:01:30 +0530
Subject: [PATCH 24/53] fix: spacing.

---
 .../templates/template-[template]/+page.svelte       | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index 4fc65831f..eecb0917e 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -28,8 +28,9 @@
         <section>
             <Collapsible>
                 <li class="collapsible-item">
-                    <h3 class="body-text-2 u-bold u-padding-block-12">
-                        Use cases <span class="inline-tag">{$template.usecases.length}</span>
+                    <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
+                        Use cases
+                        <span class="inline-tag">{$template.usecases.length}</span>
                     </h3>
                     <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
                         {#each $template.usecases as useCase}
@@ -38,8 +39,9 @@
                     </div>
                 </li>
                 <li class="collapsible-item">
-                    <h3 class="body-text-2 u-bold u-padding-block-12">
-                        Runtimes <span class="inline-tag">{$template.runtimes.length}</span>
+                    <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
+                        Runtimes
+                        <span class="inline-tag">{$template.runtimes.length}</span>
                     </h3>
                     <div class="collapsible-content u-flex u-flex-wrap u-gap-8">
                         {#each $template.runtimes as runtime}
@@ -63,7 +65,7 @@
         <section>
             <Card>
                 <Heading size="7" tag="h3">
-                    <span class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
+                    <span class="u-flex u-cross-center u-gap-16 functions-avatar-holder">
                         <div class="avatar is-size-small">
                             <span
                                 style:--p-text-size="20px"

From 31e35cd1a1b2eeafa998e4fc5940be0a3e1a739f Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Sun, 4 Aug 2024 12:18:41 +0530
Subject: [PATCH 25/53] fix: divider colors.

---
 .../templates/template-[template]/+page.svelte  | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index eecb0917e..5c64826f1 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -27,7 +27,7 @@
     <div class="grid-300px-1fr">
         <section>
             <Collapsible>
-                <li class="collapsible-item">
+                <li class="collapsible-item-divider collapsible-item">
                     <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
                         Use cases
                         <span class="inline-tag">{$template.usecases.length}</span>
@@ -38,7 +38,7 @@
                         {/each}
                     </div>
                 </li>
-                <li class="collapsible-item">
+                <li class="collapsible-item-divider collapsible-item">
                     <h3 class="u-flex u-gap-16 body-text-2 u-bold u-padding-block-12">
                         Runtimes
                         <span class="inline-tag">{$template.runtimes.length}</span>
@@ -49,7 +49,7 @@
                         {/each}
                     </div>
                 </li>
-                <li class="collapsible-item">
+                <li class="collapsible-item-divider collapsible-item">
                     <section class="card u-margin-block-start-24">
                         <h4 class="body-text-1 u-bold">Published by</h4>
                         <img
@@ -113,3 +113,14 @@
         </section>
     </div>
 </Container>
+
+<style>
+    :global(.theme-dark .collapsible-item-divider:where(:not(:last-child))) {
+        border-block-end: solid .0625rem hsl(var(--color-neutral-150));
+    }
+
+    :global(.theme-light .collapsible-item-divider:where(:not(:last-child))) {
+        border-block-end: solid .0625rem hsl(var(--color-neutral-10));
+    }
+
+</style>
\ No newline at end of file

From ba8bd113a5e41b6cbe6101185f99196d8e6bcd52 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 6 Aug 2024 15:34:34 +0530
Subject: [PATCH 26/53] improve: mobile version of cards.

---
 src/lib/layout/logs.svelte | 33 +++++++++++++++++++++++++++++----
 1 file changed, 29 insertions(+), 4 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 0ede7d598..419c67569 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -138,8 +138,8 @@
 
             <div class="u-stretch u-margin-block-start-32 u-overflow-hidden">
                 <section class="code-panel">
-                    <header class="code-panel-header u-flex u-main-space-between u-width-full-line">
-                        <div class="u-flex u-gap-24">
+                    <header class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
+                        <div class="u-flex">
                             <div class="u-flex u-gap-16">
                                 <h4 class="text u-bold">Method:</h4>
                                 <span class="u-text-color-gray">{execution.requestMethod}</span>
@@ -164,7 +164,7 @@
                     </header>
                     <div class="code-panel-content grid-1-2">
                         <div
-                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16"
+                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-16-padding"
                             class:theme-dark={$app.themeInUse === 'dark'}>
                             <Heading tag="h3" size="6">Request</Heading>
                             <div class="u-sep-block-end">
@@ -276,8 +276,9 @@
                                 </p>
                             {/if}
                         </div>
+                        <div class="u-sep-block-end is-only-mobile" />
                         <div
-                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0"
+                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-16-padding"
                             class:theme-dark={$app.themeInUse === 'dark'}>
                             <Heading tag="h3" size="6">Response</Heading>
                             <div class="u-sep-block-end">
@@ -402,4 +403,28 @@
         max-height: 50vh;
         overflow: auto !important;
     }
+
+    .code-panel-compact-header .u-flex {
+        gap: 1.5rem !important;
+    }
+
+    @media (max-width: 768px) {
+        .code-panel-compact-header {
+            row-gap: 1rem;
+            flex-direction: column !important;
+        }
+
+        .code-panel-content {
+            padding: unset !important;
+            padding-block: 1.5rem !important;
+        }
+
+        .mobile-only-inline-16-padding {
+            padding-inline: 1.5rem !important;
+        }
+
+        .grid-1-2 {
+            row-gap: 1.5rem;
+        }
+    }
 </style>

From 6f91e3eec1f49627a177dc9866a398ed94808537 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 6 Aug 2024 16:19:41 +0530
Subject: [PATCH 27/53] fix: layout consistency issues.

---
 src/lib/layout/logs.svelte | 25 +++++++++++++++----------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 419c67569..fae3a2428 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -164,7 +164,7 @@
                     </header>
                     <div class="code-panel-content grid-1-2">
                         <div
-                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-16-padding"
+                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding"
                             class:theme-dark={$app.themeInUse === 'dark'}>
                             <Heading tag="h3" size="6">Request</Heading>
                             <div class="u-sep-block-end">
@@ -248,7 +248,7 @@
                                     </div>
                                 {/if}
 
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     {execution.requestHeaders?.length
                                         ? 'Not all header data is'
                                         : 'Header data is not'}
@@ -263,7 +263,7 @@
                                     >.
                                 </p>
                             {:else if selectedRequest === 'body'}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     Body data is not captured by Appwrite for your user's security
                                     and privacy. To display body data in the Logs tab, use
                                     <b>context.log()</b>.
@@ -276,9 +276,9 @@
                                 </p>
                             {/if}
                         </div>
-                        <div class="u-sep-block-end is-only-mobile" />
+                        <div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
                         <div
-                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-16-padding"
+                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding"
                             class:theme-dark={$app.themeInUse === 'dark'}>
                             <Heading tag="h3" size="6">Response</Heading>
                             <div class="u-sep-block-end">
@@ -363,7 +363,7 @@
                                         </TableBody>
                                     </TableScroll>
                                 {/if}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     {execution.responseHeaders?.length
                                         ? 'Not all header data is'
                                         : 'Header data is not'}
@@ -378,7 +378,7 @@
                                     >.
                                 </p>
                             {:else if selectedResponse === 'body'}
-                                <p class="text u-text-center u-padding-24">
+                                <p class="text u-text-center u-padding-16">
                                     Body data is not captured by Appwrite for your user's security
                                     and privacy. To display body data in the Logs tab, use
                                     <b>context.log()</b>.
@@ -419,12 +419,17 @@
             padding-block: 1.5rem !important;
         }
 
-        .mobile-only-inline-16-padding {
+        .mobile-only-inline-20-padding {
             padding-inline: 1.5rem !important;
         }
 
-        .grid-1-2 {
-            row-gap: 1.5rem;
+        .mobile-only-block-start-20-padding {
+            padding-block-start: 1.5rem !important;
+        }
+
+        .code-panel-content.grid-1-2 {
+            display: unset !important;
+            row-gap: unset !important;
         }
     }
 </style>

From f1d51a9dd074e7961aabec64d4c1d476f1e87093 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 6 Aug 2024 17:56:06 +0530
Subject: [PATCH 28/53] address comments: fix colors.

---
 .../console/project-[project]/functions/templates/+page.svelte  | 2 +-
 .../functions/templates/template-[template]/+page.svelte        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/console/project-[project]/functions/templates/+page.svelte b/src/routes/console/project-[project]/functions/templates/+page.svelte
index 729c8e6d3..947e947f3 100644
--- a/src/routes/console/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/+page.svelte
@@ -270,7 +270,7 @@
     }
 
     :global(.theme-light .functions-template-title) {
-        color: hsl(var(--color-neutral-120));
+        color: hsl(var(--color-neutral-70));
     }
 
     :global(.theme-dark .functions-template-title) {
diff --git a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
index 5c64826f1..08906b5d8 100644
--- a/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -116,7 +116,7 @@
 
 <style>
     :global(.theme-dark .collapsible-item-divider:where(:not(:last-child))) {
-        border-block-end: solid .0625rem hsl(var(--color-neutral-150));
+        border-block-end: solid .0625rem hsl(var(--color-neutral-85));
     }
 
     :global(.theme-light .collapsible-item-divider:where(:not(:last-child))) {

From e93a328888c157e84529e2b7276a5de6a5481f52 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 27 Aug 2024 13:17:00 +0530
Subject: [PATCH 29/53] fix: formatting.

---
 src/lib/layout/logs.svelte                               | 9 ++++-----
 .../deployment-[deployment]/+page.svelte                 | 5 +++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 5e2b9ce96..bc755d47e 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -152,7 +152,8 @@
 
             <div class="u-stretch u-margin-block-start-32 u-overflow-hidden">
                 <section class="code-panel">
-                    <header class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
+                    <header
+                        class="code-panel-header code-panel-compact-header u-main-space-between u-width-full-line">
                         <div class="u-flex">
                             <div class="u-flex u-gap-16">
                                 <h4 class="text u-bold">Method:</h4>
@@ -195,8 +196,7 @@
                     </header>
                     <div class="code-panel-content grid-1-2">
                         <div
-                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding"
-                        >
+                            class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding">
                             <Heading tag="h3" size="6">Request</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>
@@ -309,8 +309,7 @@
                         </div>
                         <div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
                         <div
-                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding"
-                        >
+                            class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding">
                             <Heading tag="h3" size="6">Response</Heading>
                             <div class="u-sep-block-end">
                                 <Tabs>
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 8868b08c9..457369eec 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -67,7 +67,8 @@
                         invalidate(Dependencies.DEPLOYMENT);
                     }
                 }
-        });
+            }
+        );
 
         return () => {
             unsubscribe();
@@ -167,4 +168,4 @@
     .code-panel-content {
         max-height: 50vh;
     }
-</style>
\ No newline at end of file
+</style>

From 7529748975b052845b21a2e81a59f3073354a221 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 27 Aug 2024 13:39:14 +0530
Subject: [PATCH 30/53] ran: `pnpm format`.

---
 .../functions/templates/+page.svelte               | 14 ++++++++------
 .../templates/template-[template]/+page.svelte     |  7 +++----
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/src/routes/(console)/project-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
index 53950368e..fc1aee854 100644
--- a/src/routes/(console)/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
@@ -142,7 +142,8 @@
                                                 .getAll('runtime')
                                                 .includes(runtime)}
                                             on:change={(e) => applyFilter('runtime', runtime, e)} />
-                                        <div class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
+                                        <div
+                                            class="u-flex u-cross-center u-gap-8 functions-avatar-holder">
                                             <div class="avatar is-size-x-small">
                                                 <SvgIcon name={icon} iconSize="small" />
                                             </div>
@@ -181,14 +182,16 @@
                         <li>
                             <article class="card u-min-height-100-percent">
                                 <div class="u-flex u-gap-16 u-cross-center u-main-space-between">
-                                    <h2 class="body-text-1 u-bold u-trim-1 functions-template-title">
+                                    <h2
+                                        class="body-text-1 u-bold u-trim-1 functions-template-title">
                                         {template.name}
                                     </h2>
                                     <ul class="avatars-group is-with-border">
                                         {#each displayed as runtime}
                                             {@const icon = getIconFromRuntime(runtime.name)}
                                             {#if icon}
-                                                <li class="avatars-group-item functions-avatar-holder">
+                                                <li
+                                                    class="avatars-group-item functions-avatar-holder">
                                                     <div class="avatar is-size-small">
                                                         <img
                                                             style:--p-text-size="20px"
@@ -262,9 +265,8 @@
     </div>
 </Container>
 
-
 <style>
-    :global(.theme-light .functions-avatar-holder .avatar)  {
+    :global(.theme-light .functions-avatar-holder .avatar) {
         background-color: var(--p-avatar-bg-color-default);
         --p-avatar-bg-color-default: hsl(var(--color-neutral-0));
     }
@@ -276,4 +278,4 @@
     :global(.theme-dark .functions-template-title) {
         color: hsl(var(--color-neutral-15));
     }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
index 15e5899c1..15ae8d510 100644
--- a/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte
@@ -94,11 +94,10 @@
 
 <style>
     :global(.theme-dark .collapsible-item-divider:where(:not(:last-child))) {
-        border-block-end: solid .0625rem hsl(var(--color-neutral-85));
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral-85));
     }
 
     :global(.theme-light .collapsible-item-divider:where(:not(:last-child))) {
-        border-block-end: solid .0625rem hsl(var(--color-neutral-10));
+        border-block-end: solid 0.0625rem hsl(var(--color-neutral-10));
     }
-
-</style>
\ No newline at end of file
+</style>

From 992fbb564a63fc4037d5b069aafab43a6a9eefe7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 26 Nov 2024 16:20:06 +0530
Subject: [PATCH 31/53] update: checkout from `main`.

---
 .../functions/steps/templateVariables.svelte  | 138 ++++++------------
 1 file changed, 41 insertions(+), 97 deletions(-)

diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index b51a4996d..c7db15bd4 100644
--- a/src/lib/wizards/functions/steps/templateVariables.svelte
+++ b/src/lib/wizards/functions/steps/templateVariables.svelte
@@ -56,80 +56,34 @@
     </svelte:fragment>
     {#if $template?.variables?.length}
         {#if requiredVariables?.length}
-            {#if requiredVariables?.length === 1 || requiredVariables.every((variable) => variable.required)}
-                <div class="collapsible-item">
-                    <div class="collapsible-wrapper">
-                        <div class="collapsible-button">
-                            <div>
-                                <span class="text">Required variables</span>
-                                <span class="collapsible-button-optional">
-                                    <span class="inline-tag">{requiredVariables.length}</span>
-                                </span>
-                            </div>
-                        </div>
-                        <div class="collapsible-content">
-                            <FormList>
-                                {#each requiredVariables as variable}
-                                    {#if variable.name === 'APPWRITE_API_KEY'}
-                                        <AppwriteVariable appwriteVariable={variable} />
-                                    {:else}
-                                        <div>
-                                            <svelte:component
-                                                this={selectComponent(variable.type)}
-                                                id={variable.name}
-                                                label={variable.name}
-                                                placeholder={variable.placeholder ?? 'Enter value'}
-                                                required={variable.required}
-                                                autocomplete={false}
-                                                minlength={variable.type === 'password' ? 0 : null}
-                                                showPasswordButton={variable.type === 'password'}
-                                                bind:value={$templateConfig.variables[
-                                                    variable.name
-                                                ]} />
-                                            <Helper type="neutral">
-                                                {@html variable.description}
-                                            </Helper>
-                                        </div>
-                                    {/if}
-                                {/each}
-                            </FormList>
-                        </div>
-                    </div>
-                </div>
-            {:else if requiredVariables?.length > 1}
-                <Collapsible>
-                    <CollapsibleItem open={true}>
-                        <svelte:fragment slot="title">Required variables</svelte:fragment>
-                        <svelte:fragment slot="subtitle">
-                            <span class="inline-tag">{requiredVariables.length}</span>
-                        </svelte:fragment>
+            <Collapsible>
+                <CollapsibleItem open={true}>
+                    <svelte:fragment slot="title">Required variables</svelte:fragment>
+                    <svelte:fragment slot="subtitle">
+                        <span class="inline-tag">{requiredVariables.length}</span>
+                    </svelte:fragment>
 
-                        <FormList>
-                            {#each requiredVariables as variable}
-                                {#if variable.name === 'APPWRITE_API_KEY'}
-                                    <AppwriteVariable appwriteVariable={variable} />
-                                {:else}
-                                    <div>
-                                        <svelte:component
-                                            this={selectComponent(variable.type)}
-                                            id={variable.name}
-                                            label={variable.name}
-                                            placeholder={variable.placeholder ?? 'Enter value'}
-                                            required={variable.required}
-                                            autocomplete={false}
-                                            minlength={variable.type === 'password' ? 0 : null}
-                                            showPasswordButton={variable.type === 'password'}
-                                            bind:value={$templateConfig.variables[variable.name]} />
-                                        <Helper type="neutral">
-                                            {@html variable.description}
-                                        </Helper>
-                                    </div>
-                                {/if}
-                            {/each}
-                        </FormList>
-                    </CollapsibleItem>
-                </Collapsible>
-            {/if}
+                    <FormList>
+                        {#each requiredVariables as variable}
+                            <div>
+                                <svelte:component
+                                    this={selectComponent(variable.type)}
+                                    id={variable.name}
+                                    label={variable.name}
+                                    placeholder={variable.placeholder ?? 'Enter value'}
+                                    required={variable.required}
+                                    autocomplete={false}
+                                    minlength={variable.type === 'password' ? 0 : null}
+                                    showPasswordButton={variable.type === 'password'}
+                                    bind:value={$templateConfig.variables[variable.name]} />
+                                <Helper type="neutral">
+                                    {@html variable.description}
+                                </Helper>
+                            </div>
+                        {/each}
+                    </FormList>
+                </CollapsibleItem>
+            </Collapsible>
         {/if}
 
         {#if optionalVariables?.length}
@@ -142,25 +96,21 @@
 
                     <FormList>
                         {#each optionalVariables as variable}
-                            {#if variable.name === 'APPWRITE_API_KEY'}
-                                <AppwriteVariable appwriteVariable={variable} />
-                            {:else}
-                                <div>
-                                    <svelte:component
-                                        this={selectComponent(variable.type)}
-                                        id={variable.name}
-                                        label={variable.name}
-                                        placeholder={variable.placeholder ?? 'Enter value'}
-                                        required={variable.required}
-                                        autocomplete={false}
-                                        showPasswordButton={variable.type === 'password'}
-                                        bind:value={$templateConfig.variables[variable.name]} />
+                            <div>
+                                <svelte:component
+                                    this={selectComponent(variable.type)}
+                                    id={variable.name}
+                                    label={variable.name}
+                                    placeholder={variable.placeholder ?? 'Enter value'}
+                                    required={variable.required}
+                                    autocomplete={false}
+                                    showPasswordButton={variable.type === 'password'}
+                                    bind:value={$templateConfig.variables[variable.name]} />
 
-                                    <Helper type="neutral">
-                                        {@html variable.description}
-                                    </Helper>
-                                </div>
-                            {/if}
+                                <Helper type="neutral">
+                                    {@html variable.description}
+                                </Helper>
+                            </div>
                         {/each}
                     </FormList>
                 </CollapsibleItem>
@@ -172,9 +122,3 @@
         </Card>
     {/if}
 </WizardStep>
-
-<style>
-    .collapsible-button div {
-        padding: 3px 0;
-    }
-</style>

From 8396e5d0043ec7c13b9345352aeee4f0ee2b46b3 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 28 Nov 2024 13:46:14 +0530
Subject: [PATCH 32/53] update: address comments.

---
 .../functions/components/repositories.svelte        |  2 +-
 .../functions/function-[function]/createCli.svelte  | 13 ++++++-------
 2 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/lib/wizards/functions/components/repositories.svelte b/src/lib/wizards/functions/components/repositories.svelte
index cdbdf3016..da3524ee2 100644
--- a/src/lib/wizards/functions/components/repositories.svelte
+++ b/src/lib/wizards/functions/components/repositories.svelte
@@ -125,7 +125,7 @@
     </p>
     {#if selectedInstallation}
         {#await loadRepositories(selectedInstallation, search)}
-            <div class="u-flex u-gap-8 u-cross-center u-main-center" style="height: 50vh; ">
+            <div class="u-flex u-gap-8 u-cross-center u-main-center" style:height="50vh">
                 <div class="loader u-margin-32" />
             </div>
         {:then response}
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
index 22bf832f9..4ab648d8e 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/createCli.svelte
@@ -131,20 +131,19 @@
 
 <style>
     .box {
-        padding: unset !important;
-        background-color: unset !important;
+        padding: unset;
+        background-color: unset;
     }
 
-    /* should we use global here? */
     .editor-border :global(.cli-commands-code-box-no-outline) {
         margin: 1rem 0;
-        border: unset !important;
-        border-radius: unset !important;
-        background-color: unset !important;
+        border: unset;
+        border-radius: unset;
+        background-color: unset;
         padding: 0 var(--box-padding, 1.5rem) 0 var(--box-padding, 1.5rem);
     }
 
     :global(.editor-border .cli-commands-code-box-no-outline pre) {
-        background-color: unset !important;
+        background-color: unset;
     }
 </style>

From 5c999e77445eb9e86a1ec6d7aab1ce1dbcdf6323 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Thu, 28 Nov 2024 14:21:07 +0530
Subject: [PATCH 33/53] update: address comments.

---
 src/lib/layout/logs.svelte | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/lib/layout/logs.svelte b/src/lib/layout/logs.svelte
index 9d04824f0..074e8260a 100644
--- a/src/lib/layout/logs.svelte
+++ b/src/lib/layout/logs.svelte
@@ -434,36 +434,36 @@
 
 <style>
     :global(.limited-code-height) {
+        overflow: auto;
         max-height: 50vh;
-        overflow: auto !important;
     }
 
     .code-panel-compact-header .u-flex {
-        gap: 1.5rem !important;
+        gap: 1.5rem;
     }
 
     @media (max-width: 768px) {
         .code-panel-compact-header {
             row-gap: 1rem;
-            flex-direction: column !important;
+            flex-direction: column;
         }
 
         .code-panel-content {
-            padding: unset !important;
-            padding-block: 1.5rem !important;
+            padding: unset;
+            padding-block: 1.5rem;
         }
 
         .mobile-only-inline-20-padding {
-            padding-inline: 1.5rem !important;
+            padding-inline: 1.5rem;
         }
 
         .mobile-only-block-start-20-padding {
-            padding-block-start: 1.5rem !important;
+            padding-block-start: 1.5rem;
         }
 
         .code-panel-content.grid-1-2 {
-            display: unset !important;
-            row-gap: unset !important;
+            display: unset;
+            row-gap: unset;
         }
     }
 </style>

From 8cc55773f716abcdf8006a36d2946ada36ff4ca5 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <lohanidamodar@users.noreply.github.com>
Date: Mon, 2 Dec 2024 08:32:59 +0545
Subject: [PATCH 34/53] Feat: use premium support from plan attribute

---
 src/lib/components/support.svelte | 8 +++-----
 src/lib/sdk/billing.ts            | 1 +
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 66d922d41..95a008011 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -13,9 +13,7 @@
 
     export let show = false;
 
-    $: isPaid =
-        $organization?.billingPlan === BillingPlan.PRO ||
-        $organization?.billingPlan === BillingPlan.SCALE;
+    $: hasPremiumSupport = $organization?.billingPlan.premiumSupport ?? false;
 
     $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeTimezoneName()}`;
 </script>
@@ -24,13 +22,13 @@
     <section class="drop-section u-grid u-gap-24 u-padding-24">
         <div>
             <h4 class="eyebrow-heading-3">Premium support</h4>
-            {#if isPaid}
+            {#if hasPremiumSupport}
                 <p class="u-line-height-1-5 u-margin-block-start-8">
                     Get personalized support from the Appwrite team from <b>{supportTimings}</b>
                 </p>
             {/if}
         </div>
-        {#if $organization?.billingPlan === BillingPlan.FREE}
+        {#if !hasPremiumSupport}
             <Button
                 fullWidth
                 href={$upgradeURL}
diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index d93535f02..c2127ac7f 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -281,6 +281,7 @@ export type Plan = {
     trialDays: number;
     isAvailable: boolean;
     selfService: boolean;
+    premiumSupport: boolean;
 };
 
 export type PlansInfo = {

From cd270453767b7d89bc07ad9b3f845fc9cf7e97d7 Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Mon, 2 Dec 2024 09:10:50 +0545
Subject: [PATCH 35/53] improve currentPlan store

---
 src/lib/stores/organization.ts                |  2 ++
 .../organization-[organization]/+layout.ts    |  4 +++
 .../billing/+page.svelte                      |  4 +--
 .../billing/+page.ts                          | 33 +++++++------------
 .../change-plan/+page.svelte                  | 10 ++++--
 5 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/src/lib/stores/organization.ts b/src/lib/stores/organization.ts
index d400742e3..128962b73 100644
--- a/src/lib/stores/organization.ts
+++ b/src/lib/stores/organization.ts
@@ -2,6 +2,7 @@ import { page } from '$app/stores';
 import { derived, writable } from 'svelte/store';
 import type { Models } from '@appwrite.io/console';
 import type { Tier } from './billing';
+import type { Plan } from '$lib/sdk/billing';
 
 export type Organization = Models.Team<Record<string, unknown>> & {
     billingBudget: number;
@@ -43,4 +44,5 @@ export const organizationList = derived(
 );
 
 export const organization = derived(page, ($page) => $page.data?.organization as Organization);
+export const currentPlan = derived(page, ($page) => $page.data?.currentPlan as Plan);
 export const members = derived(page, ($page) => $page.data.members as Models.MembershipList);
diff --git a/src/routes/(console)/organization-[organization]/+layout.ts b/src/routes/(console)/organization-[organization]/+layout.ts
index ccc1c0a93..650990e86 100644
--- a/src/routes/(console)/organization-[organization]/+layout.ts
+++ b/src/routes/(console)/organization-[organization]/+layout.ts
@@ -12,6 +12,7 @@ import { get } from 'svelte/store';
 import { preferences } from '$lib/stores/preferences';
 import type { Organization } from '$lib/stores/organization';
 import { defaultRoles, defaultScopes } from '$lib/constants';
+import type { Plan } from '$lib/sdk/billing';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.ORGANIZATION);
@@ -19,12 +20,14 @@ export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PAYMENT_METHODS);
     let roles = isCloud ? [] : defaultRoles;
     let scopes = isCloud ? [] : defaultScopes;
+    let currentPlan: Plan = null;
 
     try {
         if (isCloud) {
             const res = await sdk.forConsole.billing.getRoles(params.organization);
             roles = res.roles;
             scopes = res.scopes;
+            currentPlan = await sdk.forConsole.billing.getPlan(params.organization);
             if (scopes.includes('billing.read')) {
                 await failedInvoice.load(params.organization);
                 if (get(failedInvoice)) {
@@ -53,6 +56,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             header: Header,
             breadcrumbs: Breadcrumbs,
             organization,
+            currentPlan,
             members,
             roles,
             scopes
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.svelte b/src/routes/(console)/organization-[organization]/billing/+page.svelte
index d3d6b7fd1..c31d1e8d0 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/+page.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan, organization } from '$lib/stores/organization';
     import BudgetAlert from './budgetAlert.svelte';
     import BudgetCap from './budgetCap.svelte';
     import PlanSummary from './planSummary.svelte';
@@ -123,7 +123,7 @@
     <PlanSummary
         creditList={data?.creditList}
         members={data?.members}
-        currentPlan={data?.currentPlan}
+        currentPlan={$currentPlan}
         invoices={data?.invoices.invoices} />
     <PaymentHistory />
     <PaymentMethods />
diff --git a/src/routes/(console)/organization-[organization]/billing/+page.ts b/src/routes/(console)/organization-[organization]/billing/+page.ts
index 0e945f906..36247292e 100644
--- a/src/routes/(console)/organization-[organization]/billing/+page.ts
+++ b/src/routes/(console)/organization-[organization]/billing/+page.ts
@@ -25,33 +25,24 @@ export const load: PageLoad = async ({ parent, depends }) => {
               .catch(() => null)
         : null;
 
-    const [
-        paymentMethods,
-        addressList,
-        aggregationList,
-        billingAddress,
-        currentPlan,
-        creditList,
-        invoices
-    ] = await Promise.all([
-        sdk.forConsole.billing.listPaymentMethods(),
-        sdk.forConsole.billing.listAddresses(),
-        sdk.forConsole.billing.listAggregation(organization.$id),
-        billingAddressPromise,
-        sdk.forConsole.billing.getPlan(organization.$id),
-        sdk.forConsole.billing.listCredits(organization.$id),
-        sdk.forConsole.billing.listInvoices(organization.$id, [
-            Query.limit(1),
-            Query.equal('from', organization.billingCurrentInvoiceDate)
-        ])
-    ]);
+    const [paymentMethods, addressList, aggregationList, billingAddress, creditList, invoices] =
+        await Promise.all([
+            sdk.forConsole.billing.listPaymentMethods(),
+            sdk.forConsole.billing.listAddresses(),
+            sdk.forConsole.billing.listAggregation(organization.$id),
+            billingAddressPromise,
+            sdk.forConsole.billing.listCredits(organization.$id),
+            sdk.forConsole.billing.listInvoices(organization.$id, [
+                Query.limit(1),
+                Query.equal('from', organization.billingCurrentInvoiceDate)
+            ])
+        ]);
 
     return {
         paymentMethods,
         addressList,
         aggregationList,
         billingAddress,
-        currentPlan,
         creditList,
         invoices
     };
diff --git a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
index 11afa878a..7f4dadac2 100644
--- a/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
+++ b/src/routes/(console)/organization-[organization]/change-plan/+page.svelte
@@ -32,7 +32,12 @@
     import { type Coupon, type PaymentList } from '$lib/sdk/billing';
     import { plansInfo, tierToPlan, type Tier } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization, organizationList, type Organization } from '$lib/stores/organization';
+    import {
+        currentPlan,
+        organization,
+        organizationList,
+        type Organization
+    } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';
     import { VARS } from '$lib/system';
@@ -101,8 +106,7 @@
             billingPlan = BillingPlan.PRO;
         }
 
-        const currentPlan = await sdk.forConsole.billing.getPlan($organization?.$id);
-        selfService = currentPlan.selfService;
+        selfService = $currentPlan?.selfService ?? true;
     });
 
     async function loadPaymentMethods() {

From c5519c9837aad4f24082e686f5c350e2c10ac23c Mon Sep 17 00:00:00 2001
From: Damodar Lohani <dlohani48@gmail.com>
Date: Mon, 2 Dec 2024 09:11:01 +0545
Subject: [PATCH 36/53] show support based on current plan config

---
 src/lib/components/support.svelte | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 95a008011..a584e2fe5 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -5,15 +5,14 @@
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { isCloud } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
     import { trackEvent } from '$lib/actions/analytics';
     import { localeTimezoneName, utcHourToLocaleHour } from '$lib/helpers/date';
     import { upgradeURL } from '$lib/stores/billing';
+    import { currentPlan } from '$lib/stores/organization';
 
     export let show = false;
 
-    $: hasPremiumSupport = $organization?.billingPlan.premiumSupport ?? false;
+    $: hasPremiumSupport = $currentPlan?.premiumSupport ?? false;
 
     $: supportTimings = `${utcHourToLocaleHour('16:00')} - ${utcHourToLocaleHour('00:00')} ${localeTimezoneName()}`;
 </script>

From 0b50b581202ef7eb114b8f3282f852ad4e689e83 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Dec 2024 11:39:56 +0530
Subject: [PATCH 37/53] fix: create collection modal not showing on mobile.

---
 src/lib/layout/shell.svelte                       | 15 +++++++++------
 src/lib/stores/layout.ts                          |  2 ++
 .../collection-[collection]/subNavigation.svelte  |  6 +++++-
 3 files changed, 16 insertions(+), 7 deletions(-)

diff --git a/src/lib/layout/shell.svelte b/src/lib/layout/shell.svelte
index 2ea2eeb79..2db0781b9 100644
--- a/src/lib/layout/shell.svelte
+++ b/src/lib/layout/shell.svelte
@@ -7,21 +7,21 @@
     import { activeHeaderAlert } from '$routes/(console)/store';
     import { setContext } from 'svelte';
     import { writable } from 'svelte/store';
+    import { showSubNavigation } from '$lib/stores/layout';
 
-    export let isOpen = false;
     export let showSideNavigation = false;
 
     let y: number;
 
     page.subscribe(({ url }) => {
-        isOpen = url.searchParams.get('openNavbar') === 'true';
+        $showSubNavigation = url.searchParams.get('openNavbar') === 'true';
     });
 
     const toggleMenu = () => {
         y = 0;
-        isOpen = !isOpen;
+        $showSubNavigation = !$showSubNavigation;
         if (browser) {
-            if (isOpen) {
+            if ($showSubNavigation) {
                 document.body.classList.add('u-overflow-hidden');
             } else {
                 document.body.classList.remove('u-overflow-hidden');
@@ -52,7 +52,7 @@
 
 <main
     class:grid-with-side={showSideNavigation}
-    class:is-open={isOpen}
+    class:is-open={$showSubNavigation}
     class:u-hide={$wizard.show || $log.show || $wizard.cover}
     class:is-fixed-layout={$activeHeaderAlert?.show}
     style:--p-side-size={sideSize}>
@@ -65,7 +65,10 @@
             class="icon-button is-not-desktop"
             aria-label="Open Menu"
             on:click={toggleMenu}>
-            <span class:icon-x={isOpen} class:icon-menu={!isOpen} aria-hidden="true" />
+            <span
+                class:icon-x={$showSubNavigation}
+                class:icon-menu={!$showSubNavigation}
+                aria-hidden="true" />
         </button>
         <slot name="header" />
     </header>
diff --git a/src/lib/stores/layout.ts b/src/lib/stores/layout.ts
index de3c04aef..7a9a3ef13 100644
--- a/src/lib/stores/layout.ts
+++ b/src/lib/stores/layout.ts
@@ -25,3 +25,5 @@ export function updateLayout(args: updateLayoutArguments) {
     header.set(args.header ?? null);
     breadcrumb.set(args.breadcrumb ?? null);
 }
+
+export const showSubNavigation = writable(false);
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
index 26d60dc96..a6b0f3f1d 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/subNavigation.svelte
@@ -3,6 +3,7 @@
     import { page } from '$app/stores';
     import { showCreate } from '../store';
     import type { PageData } from './$types';
+    import { showSubNavigation } from '$lib/stores/layout';
 
     $: data = $page.data as PageData;
     $: project = $page.params.project;
@@ -24,7 +25,10 @@
     <h5 class="eyebrow-heading-3 u-padding-block-12 is-not-mobile">Collections</h5>
     <button
         class="button is-text is-full-width u-main-start u-padding-inline-0"
-        on:click={() => ($showCreate = true)}>
+        on:click={() => {
+            $showCreate = true;
+            $showSubNavigation = false;
+        }}>
         <span class="icon-plus" aria-hidden="true" />
         <span class="text">Create collection</span>
     </button>

From e4f03e7ff038299f0718b952301c4df45d8cf76d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sat, 14 Dec 2024 11:48:55 +0530
Subject: [PATCH 38/53] fix: tests and usage.

---
 src/lib/layout/navigation.svelte    | 7 +++----
 src/routes/(console)/+layout.svelte | 4 +---
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/lib/layout/navigation.svelte b/src/lib/layout/navigation.svelte
index cda4c67a9..c81e06572 100644
--- a/src/lib/layout/navigation.svelte
+++ b/src/lib/layout/navigation.svelte
@@ -15,8 +15,7 @@
     import { showSupportModal } from '$routes/(console)/wizard/support/store';
     import { getContext } from 'svelte';
     import type { Writable } from 'svelte/store';
-
-    export let isOpen = false;
+    import { showSubNavigation } from '$lib/stores/layout';
 
     $: project = $page.params.project;
     $: projectPath = `${base}/project-${project}`;
@@ -44,12 +43,12 @@
     }
 
     function openFeedback() {
-        isOpen = false;
+        $showSubNavigation = false;
         wizard.start(Create);
     }
 
     function openSupport() {
-        isOpen = false;
+        $showSubNavigation = false;
         $showSupportModal = true;
     }
 </script>
diff --git a/src/routes/(console)/+layout.svelte b/src/routes/(console)/+layout.svelte
index 74df68b7b..dee3bc09b 100644
--- a/src/routes/(console)/+layout.svelte
+++ b/src/routes/(console)/+layout.svelte
@@ -238,7 +238,6 @@
             rank: -1
         }
     ]);
-    let isOpen = false;
     onMount(async () => {
         loading.set(false);
         if (!localStorage.getItem('feedbackElapsed')) {
@@ -319,14 +318,13 @@
 <CommandCenter />
 
 <Shell
-    bind:isOpen
     showSideNavigation={$page.url.pathname !== '/console' &&
         !$page?.params.organization &&
         !$page.url.pathname.includes('/console/account') &&
         !$page.url.pathname.includes('/console/card') &&
         !$page.url.pathname.includes('/console/onboarding')}>
     <Header slot="header" />
-    <SideNavigation slot="side" bind:isOpen />
+    <SideNavigation slot="side" />
     <slot />
     <Footer slot="footer" />
 </Shell>

From 99626fc9ff751473e8bb506d5bc772da7a3e71b4 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Sun, 15 Dec 2024 18:58:19 +0530
Subject: [PATCH 39/53] fix: use-case display title casing

---
 .../project-[project]/functions/templates/+page.svelte         | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/functions/templates/+page.svelte b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
index 3ba5404c2..a740c7e2f 100644
--- a/src/routes/(console)/project-[project]/functions/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/templates/+page.svelte
@@ -21,6 +21,7 @@
     import type { Models } from '@appwrite.io/console';
     import { functionsList } from '../store';
     import { debounce } from '$lib/helpers/debounce';
+    import { capitalize } from '$lib/helpers/string';
 
     export let data;
 
@@ -148,7 +149,7 @@
                                             class="is-small"
                                             checked={isChecked(useCase)}
                                             on:change={(e) => applyFilter('useCase', useCase, e)} />
-                                        <span class="u-trim-1">{useCase}</span>
+                                        <span class="u-trim-1">{capitalize(useCase)}</span>
                                     </label>
                                 </li>
                             {/each}

From d232fb5e92488ee1a9b32f48cb00fe8c272ea314 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 16 Dec 2024 14:23:03 +0100
Subject: [PATCH 40/53] Set todo's for changeing

---
 src/lib/components/support.svelte                               | 2 ++
 src/lib/layout/containerButton.svelte                           | 1 +
 .../organization-[organization]/billing/budgetCap.svelte        | 1 +
 .../(console)/project-[project]/auth/templates/+page.svelte     | 1 +
 .../databases/database-[database]/backups/+page.svelte          | 2 ++
 5 files changed, 7 insertions(+)

diff --git a/src/lib/components/support.svelte b/src/lib/components/support.svelte
index 66d922d41..1f57ba233 100644
--- a/src/lib/components/support.svelte
+++ b/src/lib/components/support.svelte
@@ -13,6 +13,7 @@
 
     export let show = false;
 
+    // TODO: fix to use plan details with 'premiumSupport' property
     $: isPaid =
         $organization?.billingPlan === BillingPlan.PRO ||
         $organization?.billingPlan === BillingPlan.SCALE;
@@ -30,6 +31,7 @@
                 </p>
             {/if}
         </div>
+        <!-- TODO: fix to use plan details with 'premiumSupport' property -->
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Button
                 fullWidth
diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte
index e0b0512d3..de0c99f2b 100644
--- a/src/lib/layout/containerButton.svelte
+++ b/src/lib/layout/containerButton.svelte
@@ -6,6 +6,7 @@
     import { organization } from '$lib/stores/organization';
 
     export let title: string;
+    // TODO: this .FREE plan so be checked against the correct plan value, not the actual tier
     export let tooltipContent =
         $organization?.billingPlan === BillingPlan.FREE
             ? `Upgrade to add more ${title.toLocaleLowerCase()}`
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index ee66a00c4..83ee9c25b 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -59,6 +59,7 @@
                 class="link">Learn more about usage rates.</button>
         </p>
         <svelte:fragment slot="aside">
+            <!--            TODO: show this based on the plan detail for budgetcap-->
             {#if $organization?.billingPlan === BillingPlan.FREE}
                 <Alert type="info">
                     <svelte:fragment slot="title">
diff --git a/src/routes/(console)/project-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
index 369080543..6b10dc048 100644
--- a/src/routes/(console)/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
@@ -268,6 +268,7 @@
             </Collapsible>
         </svelte:fragment>
     </CardGrid>-->
+    <!--    // TODO change check to plan details emailBranding property-->
     {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
         <EmailSignature />
     {/if}
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index a8837be15..d449d5a32 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -24,12 +24,14 @@
 
     let policyCreateError: string;
     let totalPolicies: UserBackupPolicy[] = [];
+    // TODO: check the plan to see if the custom policies are disabled
     let isDisabled = isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
 
     export let data: PageData;
 
     $: hasPolicyCreationLimitations = () => {
         // allow when on Pro and no policy exists
+        // TODO: check the plan to see if the custom policies are disabled and limitations
         if ($organization?.billingPlan === BillingPlan.PRO) {
             return data.policies.total > 0;
         } else if ($organization?.billingPlan === BillingPlan.SCALE) {

From 8ce6af3fe3efffc5e78bd903fba3acf69faa9908 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Mon, 16 Dec 2024 14:25:45 +0100
Subject: [PATCH 41/53] Add mocknumbers todo

---
 .../project-[project]/auth/security/updateMockNumbers.svelte     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
index 10e230e57..9ceb59758 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
@@ -26,6 +26,7 @@
     $: initialNumbers = $project?.authMockNumbers?.map((num) => ({ ...num })) ?? [];
     $: isSubmitDisabled = JSON.stringify(numbers) === JSON.stringify(initialNumbers);
 
+    //TODO check for plan details on if mocknumbers is allowed
     let isComponentDisabled: boolean =
         isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
     let emptyStateTitle: string = isSelfHosted

From e4f5de6645dae7394f22da7dc1bc1dfd6aa4af77 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 17 Dec 2024 14:14:39 +0530
Subject: [PATCH 42/53] ci: empty commit


From d9a84726517612f66c2b51733846888b73448150 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Wed, 18 Dec 2024 11:11:13 +0100
Subject: [PATCH 43/53] Inform the user to first add a billing address to their
 account

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

diff --git a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
index 0eb06bbef..2df6d1bc2 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
-    import { Modal, RadioBoxes } from '$lib/components';
+    import { Alert, Modal, RadioBoxes } from '$lib/components';
     import { Button, FormItem, FormList, InputSelect, InputText } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
     import { organization } from '$lib/stores/organization';
@@ -10,6 +10,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Pill } from '$lib/elements';
+    import { base } from '$app/paths';
 
     export let show = false;
     let addresses: AddressesList;
@@ -185,10 +186,18 @@
                 </FormList>
             </RadioBoxes>
         </FormList>
+    {:else}
+        <Alert
+            >There are no billing addresses linked to your account, please <a
+                href={`${base}/account/payments`}
+                class="link">add one</a> first</Alert>
     {/if}
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>
-        <Button secondary submit disabled={selectedAddress === $organization.billingAddressId}>
+        <Button
+            secondary
+            submit
+            disabled={selectedAddress === $organization.billingAddressId || !addresses?.total}>
             Save
         </Button>
     </svelte:fragment>

From 06179684b32004b17651081ab7a22c00ed004c8d Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Wed, 18 Dec 2024 12:45:17 +0100
Subject: [PATCH 44/53] test: update e2e endpoint

---
 playwright.config.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/playwright.config.ts b/playwright.config.ts
index 2b7c941e4..3f39d8761 100644
--- a/playwright.config.ts
+++ b/playwright.config.ts
@@ -12,7 +12,7 @@ const config: PlaywrightTestConfig = {
     webServer: {
         timeout: 120000,
         env: {
-            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing.appwrite.org/v1',
+            PUBLIC_APPWRITE_ENDPOINT: 'https://console-testing-2.appwrite.org/v1',
             PUBLIC_CONSOLE_MODE: 'cloud',
             PUBLIC_STRIPE_KEY:
                 'pk_test_51LT5nsGYD1ySxNCyd7b304wPD8Y1XKKWR6hqo6cu3GIRwgvcVNzoZv4vKt5DfYXL1gRGw4JOqE19afwkJYJq1g3K004eVfpdWn'

From 3ee44cb4573d05234057c9be17fbe55da75db35d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 18 Dec 2024 18:22:16 +0530
Subject: [PATCH 45/53] address comments.

---
 .../function-[function]/deployment-[deployment]/+page.svelte    | 2 +-
 .../functions/function-[function]/deploymentSource.svelte       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
index 457369eec..734e4f306 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deployment-[deployment]/+page.svelte
@@ -26,7 +26,7 @@
     let showActivate = false;
 
     let enableScrollButton = false;
-    let codePanelContent: HTMLElement; /* var to avoid frequent querySelector calls */
+    let codePanelContent: HTMLElement;
 
     function handleActivate() {
         invalidate(Dependencies.DEPLOYMENTS);
diff --git a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
index b07d96d97..c81332f21 100644
--- a/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
+++ b/src/routes/(console)/project-[project]/functions/function-[function]/deploymentSource.svelte
@@ -21,7 +21,7 @@
                 icon="github"
                 iconStyle="font-size:20px">
                 <Trim alternativeTrim>
-                    <span style="white-space: pre-wrap">
+                    <span style:white-space="pre-wrap">
                         {deployment.providerRepositoryOwner}/{deployment.providerRepositoryName}
                     </span>
                 </Trim>

From 65d477f65940b0a8708f3f0b04879416a02a37a0 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 10:39:28 +0100
Subject: [PATCH 46/53] Use button instead of link

---
 .../billing/replaceAddress.svelte                     | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
index 2df6d1bc2..e322dfe0f 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
@@ -11,6 +11,8 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Pill } from '$lib/elements';
     import { base } from '$app/paths';
+    import { wizard } from '$lib/stores/wizard';
+    import { redirect } from '@sveltejs/kit';
 
     export let show = false;
     let addresses: AddressesList;
@@ -188,9 +190,12 @@
         </FormList>
     {:else}
         <Alert
-            >There are no billing addresses linked to your account, please <a
-                href={`${base}/account/payments`}
-                class="link">add one</a> first</Alert>
+            buttons={[
+                {
+                    slot: 'Add address',
+                    href: `${base}/account/payments`
+                }
+            ]}>There are no billing addresses linked to your account.</Alert>
     {/if}
     <svelte:fragment slot="footer">
         <Button text on:click={() => (show = false)}>Cancel</Button>

From f7d40f764d1a9ba5e6e868bf4f5a4b7da783325f Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 10:41:40 +0100
Subject: [PATCH 47/53] Remove unused imports

---
 .../organization-[organization]/billing/replaceAddress.svelte   | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
index e322dfe0f..a57cecf48 100644
--- a/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/replaceAddress.svelte
@@ -11,8 +11,6 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { Pill } from '$lib/elements';
     import { base } from '$app/paths';
-    import { wizard } from '$lib/stores/wizard';
-    import { redirect } from '@sveltejs/kit';
 
     export let show = false;
     let addresses: AddressesList;

From db0519f519af4d11cae68af953892573cc58eb76 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 15:33:21 +0100
Subject: [PATCH 48/53] Remove todo

---
 src/lib/layout/containerButton.svelte | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/lib/layout/containerButton.svelte b/src/lib/layout/containerButton.svelte
index de0c99f2b..e0b0512d3 100644
--- a/src/lib/layout/containerButton.svelte
+++ b/src/lib/layout/containerButton.svelte
@@ -6,7 +6,6 @@
     import { organization } from '$lib/stores/organization';
 
     export let title: string;
-    // TODO: this .FREE plan so be checked against the correct plan value, not the actual tier
     export let tooltipContent =
         $organization?.billingPlan === BillingPlan.FREE
             ? `Upgrade to add more ${title.toLocaleLowerCase()}`

From 850613b0cf6e87ba69375c2edfc0d86018fd834e Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 15:33:26 +0100
Subject: [PATCH 49/53] Add typings

---
 src/lib/sdk/billing.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index c2127ac7f..811dce6d4 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -282,6 +282,10 @@ export type Plan = {
     isAvailable: boolean;
     selfService: boolean;
     premiumSupport: boolean;
+    budgeting: boolean;
+    supportsMockNumbers: boolean;
+    backupsEnabled: boolean;
+    backupPolicies: number;
 };
 
 export type PlansInfo = {

From 2432635fbaf5dc6bfda215856eb925eae2f93af9 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 16:05:35 +0100
Subject: [PATCH 50/53] Add feature flag checks

---
 src/lib/sdk/billing.ts                        |  1 +
 .../billing/budgetCap.svelte                  |  5 ++---
 .../(console)/project-[project]/+layout.ts    |  6 +++++-
 .../auth/security/updateMockNumbers.svelte    |  6 ++----
 .../auth/templates/+page.svelte               |  6 ++----
 .../database-[database]/backups/+page.svelte  | 17 ++++++-----------
 .../backups/containerHeader.svelte            | 19 +++++++------------
 7 files changed, 25 insertions(+), 35 deletions(-)

diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts
index 811dce6d4..8cb3b58a9 100644
--- a/src/lib/sdk/billing.ts
+++ b/src/lib/sdk/billing.ts
@@ -286,6 +286,7 @@ export type Plan = {
     supportsMockNumbers: boolean;
     backupsEnabled: boolean;
     backupPolicies: number;
+    emailBranding: boolean;
 };
 
 export type PlansInfo = {
diff --git a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
index cfec9bea0..e313d59a5 100644
--- a/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
+++ b/src/routes/(console)/organization-[organization]/billing/budgetCap.svelte
@@ -6,7 +6,7 @@
     import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';
     import { addNotification } from '$lib/stores/notifications';
-    import { organization } from '$lib/stores/organization';
+    import { organization, currentPlan } from '$lib/stores/organization';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
 
@@ -59,8 +59,7 @@
                 class="link">Learn more about usage rates.</button>
         </p>
         <svelte:fragment slot="aside">
-            <!--            TODO: show this based on the plan detail for budgetcap-->
-            {#if $organization?.billingPlan === BillingPlan.FREE}
+            {#if !$currentPlan.budgeting}
                 <Alert type="info">
                     <svelte:fragment slot="title">
                         Budget caps are a Pro plan feature
diff --git a/src/routes/(console)/project-[project]/+layout.ts b/src/routes/(console)/project-[project]/+layout.ts
index 57df9d528..018462d75 100644
--- a/src/routes/(console)/project-[project]/+layout.ts
+++ b/src/routes/(console)/project-[project]/+layout.ts
@@ -7,9 +7,11 @@ import { failedInvoice } from '$lib/stores/billing';
 import { isCloud } from '$lib/system';
 import type { Organization } from '$lib/stores/organization';
 import { defaultRoles, defaultScopes } from '$lib/constants';
+import type { Plan } from '$lib/sdk/billing';
 
 export const load: LayoutLoad = async ({ params, depends }) => {
     depends(Dependencies.PROJECT);
+    let currentPlan: Plan = null;
 
     try {
         const project = await sdk.forConsole.projects.get(params.project);
@@ -27,6 +29,7 @@ export const load: LayoutLoad = async ({ params, depends }) => {
         let roles = isCloud ? [] : defaultRoles;
         let scopes = isCloud ? [] : defaultScopes;
         if (isCloud) {
+            currentPlan = await sdk.forConsole.billing.getPlan(project.teamId);
             const res = await sdk.forConsole.billing.getRoles(project.teamId);
             roles = res.roles;
             scopes = res.scopes;
@@ -39,7 +42,8 @@ export const load: LayoutLoad = async ({ params, depends }) => {
             project,
             organization,
             roles,
-            scopes
+            scopes,
+            currentPlan
         };
     } catch (e) {
         error(e.code, e.message);
diff --git a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
index 9ceb59758..cd1830a26 100644
--- a/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
+++ b/src/routes/(console)/project-[project]/auth/security/updateMockNumbers.svelte
@@ -9,8 +9,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
+    import { currentPlan } from '$lib/stores/organization';
     import { isCloud, isSelfHosted } from '$lib/system';
     import MockNumbersLight from './mock-numbers-light.png';
     import MockNumbersDark from './mock-numbers-dark.png';
@@ -26,9 +25,8 @@
     $: initialNumbers = $project?.authMockNumbers?.map((num) => ({ ...num })) ?? [];
     $: isSubmitDisabled = JSON.stringify(numbers) === JSON.stringify(initialNumbers);
 
-    //TODO check for plan details on if mocknumbers is allowed
     let isComponentDisabled: boolean =
-        isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
+        isSelfHosted || (isCloud && !$currentPlan.supportsMockNumbers);
     let emptyStateTitle: string = isSelfHosted
         ? 'Available on Appwrite Cloud'
         : 'Upgrade to add mock phone numbers';
diff --git a/src/routes/(console)/project-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
index 6b10dc048..278fb0ca7 100644
--- a/src/routes/(console)/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
@@ -50,8 +50,7 @@
     // import { baseEmailTemplate, baseSmsTemplate, emailTemplate, smsTemplate } from './store';
     import { baseEmailTemplate, emailTemplate } from './store';
     import { Button } from '$lib/elements/forms';
-    import { organization } from '$lib/stores/organization';
-    import { BillingPlan } from '$lib/constants';
+    import { currentPlan } from '$lib/stores/organization';
     import EmailSignature from './emailSignature.svelte';
     import { isCloud } from '$lib/system';
     import type {
@@ -268,8 +267,7 @@
             </Collapsible>
         </svelte:fragment>
     </CardGrid>-->
-    <!--    // TODO change check to plan details emailBranding property-->
-    {#if isCloud && $organization?.billingPlan === BillingPlan.FREE}
+    {#if isCloud && !$currentPlan.emailBranding}
         <EmailSignature />
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index d449d5a32..f7d3b0bb2 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -11,9 +11,9 @@
     import { addNotification, dismissAllNotifications } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
-    import { BillingPlan, Dependencies } from '$lib/constants';
+    import { Dependencies } from '$lib/constants';
     import { isCloud, isSelfHosted } from '$lib/system';
-    import { organization } from '$lib/stores/organization';
+    import { currentPlan } from '$lib/stores/organization';
     import { onMount } from 'svelte';
     import { feedback } from '$lib/stores/feedback';
     import { cronExpression, type UserBackupPolicy } from '$lib/helpers/backups';
@@ -24,19 +24,12 @@
 
     let policyCreateError: string;
     let totalPolicies: UserBackupPolicy[] = [];
-    // TODO: check the plan to see if the custom policies are disabled
-    let isDisabled = isSelfHosted || (isCloud && $organization?.billingPlan === BillingPlan.FREE);
+    let isDisabled = isSelfHosted || (isCloud && !$currentPlan.backupsEnabled);
 
     export let data: PageData;
 
     $: hasPolicyCreationLimitations = () => {
-        // allow when on Pro and no policy exists
-        // TODO: check the plan to see if the custom policies are disabled and limitations
-        if ($organization?.billingPlan === BillingPlan.PRO) {
-            return data.policies.total > 0;
-        } else if ($organization?.billingPlan === BillingPlan.SCALE) {
-            return false;
-        }
+        return data.policies.total >= $currentPlan.backupPolicies;
     };
 
     const showFeedbackNotification = () => {
@@ -187,6 +180,8 @@
                     buttonType="secondary"
                     buttonDisabled={isDisabled}
                     hasLimitations={hasPolicyCreationLimitations()}
+                    maxPolicies={$currentPlan.backupPolicies}
+                    policiesCreated={data.policies.total}
                     buttonMethod={() => {
                         $showCreatePolicy = true;
                         trackEvent('click_policy_create');
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
index a01b1c581..ce79b0d15 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -4,14 +4,13 @@
     import { Pill } from '$lib/elements';
     import { wizard } from '$lib/stores/wizard';
     import SupportWizard from '$routes/(console)/supportWizard.svelte';
-    import { BillingPlan } from '$lib/constants';
-    import { organization } from '$lib/stores/organization';
 
     export let isFlex = true;
     export let title: string;
 
     export let buttonText: string = null;
-    export let hasLimitations: boolean = true;
+    export let policiesCreated: number = 0;
+    export let maxPolicies: number = 0;
     export let buttonMethod: () => void = null;
     export let buttonEvent: string = buttonText?.toLocaleLowerCase();
     export let buttonDisabled = false;
@@ -27,16 +26,16 @@
     <div class="u-flex u-cross-child-center u-cross-center u-gap-12">
         <div class="body-text-1 u-bold backups-title">{title}</div>
 
-        {#if hasLimitations && $organization.billingPlan === BillingPlan.PRO}
+        {#if title === 'Policies' && policiesCreated >= maxPolicies}
             <div style="height: 40px; padding-block-start: 4px">
                 <DropList bind:show={showDropdown} width="16">
                     <Pill button on:click={() => (showDropdown = true)}>
-                        <span class="icon-info" />1/1 created
+                        <span class="icon-info" />{policiesCreated}/{maxPolicies} created
                     </Pill>
                     <svelte:fragment slot="list">
                         <slot name="tooltip">
                             <span>
-                                You are limited to one policy on Pro plan.
+                                You are limited to one policy on your plan.
                                 <button
                                     class="u-underline"
                                     on:click={() => {
@@ -52,14 +51,10 @@
         {/if}
     </div>
 
-    {#if !hasLimitations}
+    {#if title === 'Backups' || policiesCreated < maxPolicies}
         <Button
             event={buttonEvent}
-            on:click={hasLimitations
-                ? () => {
-                      showDropdown = true;
-                  }
-                : buttonMethod}
+            on:click={buttonMethod}
             disabled={buttonDisabled}
             text={buttonType === 'text'}
             secondary={buttonType === 'secondary'}>

From 01e8fc902aeff45f5b069a26f157fc6a64612950 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 16:06:37 +0100
Subject: [PATCH 51/53] Remove unused limitation check

---
 .../databases/database-[database]/backups/+page.svelte       | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index f7d3b0bb2..62fbb33b3 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -28,10 +28,6 @@
 
     export let data: PageData;
 
-    $: hasPolicyCreationLimitations = () => {
-        return data.policies.total >= $currentPlan.backupPolicies;
-    };
-
     const showFeedbackNotification = () => {
         let counter = localStorage.getItem('createBackupsCounter');
         const parsedCounter = counter ? parseInt(counter, 10) : 0;
@@ -179,7 +175,6 @@
                     buttonEvent="create_backup"
                     buttonType="secondary"
                     buttonDisabled={isDisabled}
-                    hasLimitations={hasPolicyCreationLimitations()}
                     maxPolicies={$currentPlan.backupPolicies}
                     policiesCreated={data.policies.total}
                     buttonMethod={() => {

From da949235fe4b89b806c160b5ee08b175f2af1530 Mon Sep 17 00:00:00 2001
From: ernstmul <ernst.mulders@gmail.com>
Date: Thu, 19 Dec 2024 16:38:38 +0100
Subject: [PATCH 52/53] Remove unused prop, and correct email branding value
 check

---
 .../(console)/project-[project]/auth/templates/+page.svelte     | 2 +-
 .../databases/database-[database]/backups/+page.svelte          | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/routes/(console)/project-[project]/auth/templates/+page.svelte b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
index 278fb0ca7..e030a535d 100644
--- a/src/routes/(console)/project-[project]/auth/templates/+page.svelte
+++ b/src/routes/(console)/project-[project]/auth/templates/+page.svelte
@@ -267,7 +267,7 @@
             </Collapsible>
         </svelte:fragment>
     </CardGrid>-->
-    {#if isCloud && !$currentPlan.emailBranding}
+    {#if isCloud && $currentPlan.emailBranding}
         <EmailSignature />
     {/if}
 </Container>
diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
index 62fbb33b3..e4359ad0f 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/+page.svelte
@@ -194,7 +194,6 @@
                     buttonText="Manual backup"
                     buttonEvent="create_backup"
                     buttonType="secondary"
-                    hasLimitations={false}
                     buttonDisabled={isDisabled}
                     buttonMethod={() => {
                         $showCreateBackup = true;

From 855bf18e3c86465c72ecedba386c3e292fc6563a Mon Sep 17 00:00:00 2001
From: Ernst Mulders <ernst.mulders@gmail.com>
Date: Fri, 20 Dec 2024 10:39:43 +0100
Subject: [PATCH 53/53] Update
 src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte

Co-authored-by: Steven Nguyen <1477010+stnguyen90@users.noreply.github.com>
---
 .../database-[database]/backups/containerHeader.svelte          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte b/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
index ce79b0d15..d289bab62 100644
--- a/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
+++ b/src/routes/(console)/project-[project]/databases/database-[database]/backups/containerHeader.svelte
@@ -35,7 +35,7 @@
                     <svelte:fragment slot="list">
                         <slot name="tooltip">
                             <span>
-                                You are limited to one policy on your plan.
+                                You are limited to {maxPolicies} policy on your plan.
                                 <button
                                     class="u-underline"
                                     on:click={() => {