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/28] 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 08a18f1195..4a1245d4ac 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/28] 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 4a1245d4ac..10e28b72bd 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/28] 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 dc8c73bd41..30297eb319 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/28] 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 30297eb319..9b1bd657cb 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/28] 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 9980e765d9..1aaaf93baf 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/28] 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 0267a21d05..5f60543ec8 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 0c5b765de1..83e4f4e7ec 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/28] 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 83e4f4e7ec..2d64f7a031 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/28] 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 aa0c3c17b2..e370f26793 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 ccaacbe06f..8d33c939e3 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/28] 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 aea981107d..aaa56773af 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/28] 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 d8e6773440..e832a73cd5 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/28] 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 8d33c939e3..334283d775 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/28] 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 5a358d548d..47c134f20e 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 efc7a48c7c..b43c2d9bd3 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/28] 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 b43c2d9bd3..d8e3e3b2be 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/28] 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 10e28b72bd..a5afc9cf8c 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/28] 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 e832a73cd5..d7a44179e1 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/28] 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 334283d775..3f929eef69 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/28] 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 55deb73326..0d920cc2da 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/28] 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 0d920cc2da..0ede7d5983 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/28] 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 47c134f20e..5b818a7b8a 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 5f60543ec8..a2ef47b999 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 05e043ddc9..21e2f1ee6e 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 b7e250b540..4d859d492e 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 7f9b6b2004..7eaefca2d5 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 9b1bd657cb..2c6bcc90de 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 a5afc9cf8c..e539f6f052 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 d7a44179e1..4d4f49dad4 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 d8e3e3b2be..22bf832f9e 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 3f929eef69..e09f79cd49 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 2d64f7a031..b07d96d974 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/28] 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 e09f79cd49..b0e5977763 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/28] 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 b0e5977763..36fed5591c 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 ba8bd113a5e41b6cbe6101185f99196d8e6bcd52 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 6 Aug 2024 15:34:34 +0530
Subject: [PATCH 22/28] 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 0ede7d5983..419c67569f 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 23/28] 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 419c67569f..fae3a2428f 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 e93a328888c157e84529e2b7276a5de6a5481f52 Mon Sep 17 00:00:00 2001
From: ItzNotABug <itznotabug@gmail.com>
Date: Tue, 27 Aug 2024 13:17:00 +0530
Subject: [PATCH 24/28] 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 5e2b9ce96b..bc755d47e2 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 8868b08c9f..457369eec7 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 992fbb564a63fc4037d5b069aafab43a6a9eefe7 Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Tue, 26 Nov 2024 16:20:06 +0530
Subject: [PATCH 25/28] update: checkout from `main`.

---
 .../functions/steps/templateVariables.svelte  | 136 ++++++------------
 1 file changed, 40 insertions(+), 96 deletions(-)

diff --git a/src/lib/wizards/functions/steps/templateVariables.svelte b/src/lib/wizards/functions/steps/templateVariables.svelte
index b51a4996d8..c7db15bd43 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">
+            <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}
                             <div>
-                                <span class="text">Required variables</span>
-                                <span class="collapsible-button-optional">
-                                    <span class="inline-tag">{requiredVariables.length}</span>
-                                </span>
+                                <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>
-                        </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} />
-                                {: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}
+                        {/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 26/28] 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 cdbdf3016b..da3524ee22 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 22bf832f9e..4ab648d8e0 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 27/28] 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 9d04824f0c..074e8260a3 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 3ee44cb4573d05234057c9be17fbe55da75db35d Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Wed, 18 Dec 2024 18:22:16 +0530
Subject: [PATCH 28/28] 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 457369eec7..734e4f3062 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 b07d96d974..c81332f21f 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>