From 3456c58710c3b9c6079078972c5e5fcb0df4f18a Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 7 Nov 2023 13:59:17 +0100
Subject: [PATCH 01/11] draft: cookie consent

---
 src/lib/components/consent.svelte | 133 ++++++++++++++++++++++++++++++
 src/routes/+layout.svelte         |   2 +
 2 files changed, 135 insertions(+)
 create mode 100644 src/lib/components/consent.svelte

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
new file mode 100644
index 0000000000..739695e690
--- /dev/null
+++ b/src/lib/components/consent.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+    import { createEventDispatcher, onMount } from 'svelte';
+    import { Modal } from '.';
+    import { Button } from '$lib/elements/forms';
+
+    type Consent = {
+        key: string;
+        accepted: string[];
+    };
+
+    const key = new Date('2023-11-07');
+    const dispatch = createEventDispatcher();
+
+    let show = false;
+    let settings = false;
+    let selected = [];
+
+    onMount(() => {
+        const consent: Consent = JSON.parse(localStorage.getItem('consent'));
+        if (consent) {
+            const date = new Date(consent.key);
+            if (key > date) {
+                show = true;
+            } else {
+                dispatch('confirm', consent);
+            }
+        } else {
+            show = true;
+        }
+    });
+
+    function saveSettings(obj: Consent) {
+        localStorage.setItem('consent', JSON.stringify(obj));
+    }
+
+    function confirmChoices(choices: Consent['accepted']) {
+        const consent = {
+            key: key.toISOString(),
+            accepted: choices
+        };
+        saveSettings(consent);
+        dispatch('confirm', consent);
+        show = settings = false;
+    }
+
+    function acceptAll() {
+        confirmChoices(['logrocket']);
+    }
+
+    function rejectAll() {
+        confirmChoices([]);
+    }
+</script>
+
+{#if show}
+    <div class="card is-consent">
+        <p>
+            By clicking "Accept all", you agree to the storing of cookies on your device to analyze
+            site usage.
+        </p>
+
+        <div class="u-flex u-margin-block-start-16 u-main-space-between u-cross-center">
+            <div>
+                <Button secondary on:click={() => (settings = true)}>Cookie settings</Button>
+            </div>
+            <div class="u-flex u-gap-16">
+                <Button on:click={rejectAll} secondary>Only required</Button>
+                <Button on:click={acceptAll}>Accept all</Button>
+            </div>
+        </div>
+    </div>
+{/if}
+
+{#if settings}
+    <Modal bind:show={settings} title="Cookie Preferences">
+        <p>
+            We use cookies to improve your site experience. The "strictly necessary" cookies are
+            required for Appwrite to function.
+        </p>
+        <ul class="collapsible u-width-full-line">
+            <li class="collapsible-item">
+                <details class="collapsible-wrapper">
+                    <summary class="collapsible-button">
+                        <input type="checkbox" checked disabled />
+                        <span class="text">Strictly Necessary Cookies</span>
+                        <div class="icon">
+                            <span class="icon-cheveron-down" aria-hidden="true"></span>
+                        </div>
+                    </summary>
+                    <div class="collapsible-content">
+                        <p class="text u-margin-block-start-8">
+                            These are the cookies required for Appwrite to function.
+                        </p>
+                    </div>
+                </details>
+            </li>
+            <li class="collapsible-item">
+                <details class="collapsible-wrapper">
+                    <summary class="collapsible-button">
+                        <input type="checkbox" />
+                        <span class="text">Product Analytics</span>
+                        <span class="collapsible-button-optional">(optional)</span>
+                        <div class="icon">
+                            <span class="icon-cheveron-down" aria-hidden="true"></span>
+                        </div>
+                    </summary>
+                    <div class="collapsible-content">
+                        <p class="text u-margin-block-start-8">
+                            We include analytics cookies to understand how you use our product and
+                            design better experiences.
+                        </p>
+                    </div>
+                </details>
+            </li>
+        </ul>
+        <svelte:fragment slot="footer">
+            <Button on:click={() => confirmChoices(selected)} text>Confirm my choices</Button>
+            <Button on:click={rejectAll} secondary>Only required</Button>
+            <Button on:click={acceptAll}>Allow all</Button>
+        </svelte:fragment>
+    </Modal>
+{/if}
+
+<style lang="scss">
+    .card.is-consent {
+        position: fixed;
+        padding: 1.5rem;
+        bottom: 1rem;
+        right: 1rem;
+        z-index: 100;
+        max-width: 600px;
+    }
+</style>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index ef73495de8..e9ca9e41fc 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,6 +16,7 @@
     import Loading from './loading.svelte';
     import { loading, requestedMigration } from './store';
     import { parseIfString } from '$lib/helpers/object';
+    import Consent from '$lib/components/consent.svelte';
 
     if (browser) {
         window.VERCEL_ANALYTICS_ID = import.meta.env.VERCEL_ANALYTICS_ID?.toString() ?? false;
@@ -124,6 +125,7 @@
 </script>
 
 <Notifications />
+<Consent />
 
 <slot />
 

From f402d55b0a8aa27eb0d5bc7defaa37c7930f8314 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Thu, 4 Jan 2024 12:03:16 +0100
Subject: [PATCH 02/11] fix: styling and review

---
 src/lib/components/consent.svelte | 38 ++++++++++++++++++-------------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 739695e690..56fd12fab8 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -1,31 +1,35 @@
+<script lang="ts" context="module">
+    export const settings = writable<boolean>(false);
+    export const show = writable<boolean>(false);
+</script>
+
 <script lang="ts">
     import { createEventDispatcher, onMount } from 'svelte';
     import { Modal } from '.';
     import { Button } from '$lib/elements/forms';
+    import { writable } from 'svelte/store';
 
     type Consent = {
         key: string;
-        accepted: string[];
+        accepted: Record<string, boolean>;
     };
 
     const key = new Date('2023-11-07');
     const dispatch = createEventDispatcher();
 
-    let show = false;
-    let settings = false;
-    let selected = [];
+    let selected = {};
 
     onMount(() => {
         const consent: Consent = JSON.parse(localStorage.getItem('consent'));
         if (consent) {
             const date = new Date(consent.key);
             if (key > date) {
-                show = true;
+                show.set(true);
             } else {
                 dispatch('confirm', consent);
             }
         } else {
-            show = true;
+            show.set(true);
         }
     });
 
@@ -40,15 +44,18 @@
         };
         saveSettings(consent);
         dispatch('confirm', consent);
-        show = settings = false;
+        show.set(false);
+        settings.set(false);
     }
 
     function acceptAll() {
-        confirmChoices(['logrocket']);
+        confirmChoices({
+            logrocket: true
+        });
     }
 
     function rejectAll() {
-        confirmChoices([]);
+        confirmChoices({});
     }
 </script>
 
@@ -61,18 +68,18 @@
 
         <div class="u-flex u-margin-block-start-16 u-main-space-between u-cross-center">
             <div>
-                <Button secondary on:click={() => (settings = true)}>Cookie settings</Button>
+                <Button secondary on:click={() => (settings.set(true))}>Cookie settings</Button>
             </div>
             <div class="u-flex u-gap-16">
                 <Button on:click={rejectAll} secondary>Only required</Button>
-                <Button on:click={acceptAll}>Accept all</Button>
+                <Button on:click={acceptAll} secondary>Accept all</Button>
             </div>
         </div>
     </div>
 {/if}
 
 {#if settings}
-    <Modal bind:show={settings} title="Cookie Preferences">
+    <Modal bind:show={$settings} title="Cookie Preferences">
         <p>
             We use cookies to improve your site experience. The "strictly necessary" cookies are
             required for Appwrite to function.
@@ -97,7 +104,7 @@
             <li class="collapsible-item">
                 <details class="collapsible-wrapper">
                     <summary class="collapsible-button">
-                        <input type="checkbox" />
+                        <input type="checkbox" bind:checked={selected['logrocket']} />
                         <span class="text">Product Analytics</span>
                         <span class="collapsible-button-optional">(optional)</span>
                         <div class="icon">
@@ -114,9 +121,8 @@
             </li>
         </ul>
         <svelte:fragment slot="footer">
-            <Button on:click={() => confirmChoices(selected)} text>Confirm my choices</Button>
-            <Button on:click={rejectAll} secondary>Only required</Button>
-            <Button on:click={acceptAll}>Allow all</Button>
+            <Button text external href="https://appwrite.io/privacy">Privacy Policy</Button>
+            <Button on:click={() => confirmChoices(selected)}>Save preferences</Button>
         </svelte:fragment>
     </Modal>
 {/if}

From bbb135eb506e47eaeee7a5c34194ac05b0732a47 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 11:41:52 +0100
Subject: [PATCH 03/11] fix: leftovers

---
 src/lib/components/consent.svelte | 33 ++++++++++++++++++-------------
 src/lib/layout/footer.svelte      |  7 +++++++
 src/routes/+layout.svelte         |  8 +++++---
 3 files changed, 31 insertions(+), 17 deletions(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 56fd12fab8..b5fb8e64eb 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -1,6 +1,18 @@
 <script lang="ts" context="module">
+    type Consent = {
+        key: string;
+        accepted: Record<string, boolean>;
+    };
     export const settings = writable<boolean>(false);
     export const show = writable<boolean>(false);
+    export const consent = writable<Consent>(
+        JSON.parse(globalThis?.localStorage?.getItem('consent') ?? null)
+    );
+    consent.subscribe((value) => {
+        if (browser) {
+            globalThis.localStorage.setItem('consent', JSON.stringify(value));
+        }
+    });
 </script>
 
 <script lang="ts">
@@ -8,11 +20,7 @@
     import { Modal } from '.';
     import { Button } from '$lib/elements/forms';
     import { writable } from 'svelte/store';
-
-    type Consent = {
-        key: string;
-        accepted: Record<string, boolean>;
-    };
+    import { browser } from '$app/environment';
 
     const key = new Date('2023-11-07');
     const dispatch = createEventDispatcher();
@@ -20,13 +28,10 @@
     let selected = {};
 
     onMount(() => {
-        const consent: Consent = JSON.parse(localStorage.getItem('consent'));
-        if (consent) {
-            const date = new Date(consent.key);
+        if ($consent) {
+            const date = new Date($consent.key);
             if (key > date) {
                 show.set(true);
-            } else {
-                dispatch('confirm', consent);
             }
         } else {
             show.set(true);
@@ -34,7 +39,7 @@
     });
 
     function saveSettings(obj: Consent) {
-        localStorage.setItem('consent', JSON.stringify(obj));
+        consent.set(obj);
     }
 
     function confirmChoices(choices: Consent['accepted']) {
@@ -59,7 +64,7 @@
     }
 </script>
 
-{#if show}
+{#if $show}
     <div class="card is-consent">
         <p>
             By clicking "Accept all", you agree to the storing of cookies on your device to analyze
@@ -68,7 +73,7 @@
 
         <div class="u-flex u-margin-block-start-16 u-main-space-between u-cross-center">
             <div>
-                <Button secondary on:click={() => (settings.set(true))}>Cookie settings</Button>
+                <Button secondary on:click={() => settings.set(true)}>Cookie settings</Button>
             </div>
             <div class="u-flex u-gap-16">
                 <Button on:click={rejectAll} secondary>Only required</Button>
@@ -78,7 +83,7 @@
     </div>
 {/if}
 
-{#if settings}
+{#if $settings}
     <Modal bind:show={$settings} title="Cookie Preferences">
         <p>
             We use cookies to improve your site experience. The "strictly necessary" cookies are
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 7c318ad556..efc2e228bd 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -1,4 +1,6 @@
 <script>
+    import { settings } from '$lib/components/consent.svelte';
+    import Button from '$lib/elements/forms/button.svelte';
     import { isCloud } from '$lib/system';
     import { version } from '$routes/console/store';
 
@@ -39,6 +41,11 @@
                     <span class="text">Privacy</span>
                 </a>
             </li>
+            <li class="inline-links-item">
+                <Button text on:click={() => settings.set(true)}>
+                    <span class="text">Support</span>
+                </Button>
+            </li>
         </ul>
     </div>
     <div class="main-footer-end">
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index f263270873..5bde43af4a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -16,7 +16,7 @@
     import Loading from './loading.svelte';
     import { loading, requestedMigration } from './store';
     import { parseIfString } from '$lib/helpers/object';
-    import Consent from '$lib/components/consent.svelte';
+    import Consent, { consent } from '$lib/components/consent.svelte';
 
     if (browser) {
         window.VERCEL_ANALYTICS_ID = import.meta.env.VERCEL_ANALYTICS_ID?.toString() ?? false;
@@ -52,7 +52,7 @@
             /**
              * LogRocket
              */
-            if (isCloud && isTrackingAllowed()) {
+            if ($consent?.accepted?.logrocket && isCloud && isTrackingAllowed()) {
                 LogRocket.init('rgthvf/appwrite', {
                     dom: {
                         inputSanitizer: true
@@ -125,7 +125,9 @@
 </script>
 
 <Notifications />
-<Consent />
+{#if isCloud}
+    <Consent />
+{/if}
 
 <slot />
 

From 72c22c2733240b5b09a0899c9bef4c6c54454e65 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 12:30:57 +0100
Subject: [PATCH 04/11] fix: consent design

---
 src/lib/components/consent.svelte | 34 +++++++++++++------------------
 1 file changed, 14 insertions(+), 20 deletions(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index b5fb8e64eb..7c45c01d90 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -89,42 +89,36 @@
             We use cookies to improve your site experience. The "strictly necessary" cookies are
             required for Appwrite to function.
         </p>
-        <ul class="collapsible u-width-full-line">
-            <li class="collapsible-item">
-                <details class="collapsible-wrapper">
-                    <summary class="collapsible-button">
+        <div class="u-width-full-line">
+            <div class="collapsible-item">
+                <div class="collapsible-wrapper">
+                    <div class="collapsible-button">
                         <input type="checkbox" checked disabled />
                         <span class="text">Strictly Necessary Cookies</span>
-                        <div class="icon">
-                            <span class="icon-cheveron-down" aria-hidden="true"></span>
-                        </div>
-                    </summary>
+                    </div>
                     <div class="collapsible-content">
                         <p class="text u-margin-block-start-8">
                             These are the cookies required for Appwrite to function.
                         </p>
                     </div>
-                </details>
-            </li>
-            <li class="collapsible-item">
-                <details class="collapsible-wrapper">
-                    <summary class="collapsible-button">
+                </div>
+            </div>
+            <div class="collapsible-item">
+                <div class="collapsible-wrapper">
+                    <div class="collapsible-button">
                         <input type="checkbox" bind:checked={selected['logrocket']} />
                         <span class="text">Product Analytics</span>
                         <span class="collapsible-button-optional">(optional)</span>
-                        <div class="icon">
-                            <span class="icon-cheveron-down" aria-hidden="true"></span>
-                        </div>
-                    </summary>
+                    </div>
                     <div class="collapsible-content">
                         <p class="text u-margin-block-start-8">
                             We include analytics cookies to understand how you use our product and
                             design better experiences.
                         </p>
                     </div>
-                </details>
-            </li>
-        </ul>
+                </div>
+            </div>
+        </div>
         <svelte:fragment slot="footer">
             <Button text external href="https://appwrite.io/privacy">Privacy Policy</Button>
             <Button on:click={() => confirmChoices(selected)}>Save preferences</Button>

From 3faf2d8a69dfb9e99f7615d7d4ebd18b598dee67 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 12:41:10 +0100
Subject: [PATCH 05/11] fix: footer

---
 src/lib/components/consent.svelte | 13 ++++++++++---
 src/lib/layout/footer.svelte      | 12 +++++++++---
 src/routes/+layout.svelte         |  2 +-
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 7c45c01d90..5852d82986 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -36,6 +36,10 @@
         } else {
             show.set(true);
         }
+
+        return consent.subscribe((value) => {
+            selected = value.accepted;
+        });
     });
 
     function saveSettings(obj: Consent) {
@@ -55,7 +59,7 @@
 
     function acceptAll() {
         confirmChoices({
-            logrocket: true
+            analytics: true
         });
     }
 
@@ -106,8 +110,11 @@
             <div class="collapsible-item">
                 <div class="collapsible-wrapper">
                     <div class="collapsible-button">
-                        <input type="checkbox" bind:checked={selected['logrocket']} />
-                        <span class="text">Product Analytics</span>
+                        <input
+                            id="analytics"
+                            type="checkbox"
+                            bind:checked={selected['analytics']} />
+                        <label for="analytics" class="text">Product Analytics</label>
                         <span class="collapsible-button-optional">(optional)</span>
                     </div>
                     <div class="collapsible-content">
diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index efc2e228bd..837a51e744 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -1,6 +1,7 @@
 <script>
     import { settings } from '$lib/components/consent.svelte';
     import Button from '$lib/elements/forms/button.svelte';
+    import { clickOnEnter } from '$lib/helpers/a11y';
     import { isCloud } from '$lib/system';
     import { version } from '$routes/console/store';
 
@@ -42,9 +43,14 @@
                 </a>
             </li>
             <li class="inline-links-item">
-                <Button text on:click={() => settings.set(true)}>
-                    <span class="text">Support</span>
-                </Button>
+                <span
+                    style:cursor="pointer"
+                    role="button"
+                    tabindex="0"
+                    on:keyup={clickOnEnter}
+                    on:click={() => settings.set(true)}>
+                    <span class="text">Cookies</span>
+                </span>
             </li>
         </ul>
     </div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 5bde43af4a..49e6ea6164 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -52,7 +52,7 @@
             /**
              * LogRocket
              */
-            if ($consent?.accepted?.logrocket && isCloud && isTrackingAllowed()) {
+            if ($consent?.accepted?.analytics && isCloud && isTrackingAllowed()) {
                 LogRocket.init('rgthvf/appwrite', {
                     dom: {
                         inputSanitizer: true

From 07fbc29b08928d8e4ad1f1724ecdd3924437fcd9 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 12:53:17 +0100
Subject: [PATCH 06/11] feat: delete account actually deletes account

---
 package-lock.json                        | 8 ++++----
 package.json                             | 2 +-
 src/routes/console/account/delete.svelte | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 464a87ffaa..bc90c96d99 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6,7 +6,7 @@
         "": {
             "name": "@appwrite/console",
             "dependencies": {
-                "@appwrite.io/console": "^0.4.2",
+                "@appwrite.io/console": "^0.5.0",
                 "@appwrite.io/pink": "0.2.0",
                 "@appwrite.io/pink-icons": "0.2.0",
                 "@popperjs/core": "^2.11.8",
@@ -159,9 +159,9 @@
             "integrity": "sha512-TD+xbmsBLyYy/IxFimW/YL/9L2IEnM7/EoV9Aeh56U64Ify8o27HJcKjo38XY9Tcn0uOq1AX3thkKgvtWvwFQg=="
         },
         "node_modules/@appwrite.io/console": {
-            "version": "0.4.2",
-            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.4.2.tgz",
-            "integrity": "sha512-WUltkC5q7RIK7TDCb+qTXq2cPtBek9k98Ilqcn8Lv3rN5ZuK0x33AwcpTAEPD0DE9phWXmvoV1a8H5PGMcGKew==",
+            "version": "0.5.0",
+            "resolved": "https://registry.npmjs.org/@appwrite.io/console/-/console-0.5.0.tgz",
+            "integrity": "sha512-WqjVc6lrmOwNGoyAGNx7z/sBJou1EgGbnGn87TuBvfhZ/zcYSdi+Nc010EwGpyUvPeNhL2ci8Jj3eYnelJVKwg==",
             "dependencies": {
                 "cross-fetch": "3.1.5",
                 "isomorphic-form-data": "2.0.0"
diff --git a/package.json b/package.json
index 410b4d658c..e84456270e 100644
--- a/package.json
+++ b/package.json
@@ -18,7 +18,7 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@appwrite.io/console": "^0.4.2",
+        "@appwrite.io/console": "^0.5.0",
         "@appwrite.io/pink": "0.2.0",
         "@appwrite.io/pink-icons": "0.2.0",
         "@popperjs/core": "^2.11.8",
diff --git a/src/routes/console/account/delete.svelte b/src/routes/console/account/delete.svelte
index 29e4f85b63..cfacb05430 100644
--- a/src/routes/console/account/delete.svelte
+++ b/src/routes/console/account/delete.svelte
@@ -11,7 +11,7 @@
 
     async function deleteAccount() {
         try {
-            await sdk.forConsole.account.updateStatus();
+            await sdk.forConsole.account.delete();
             await invalidate(Dependencies.ACCOUNT);
             showDelete = false;
             addNotification({

From 22e0fd5b0257223b8284a2ae826f16499122d88e Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 13:05:25 +0100
Subject: [PATCH 07/11] fix: preference center

---
 src/lib/components/consent.svelte | 83 +++++++++++++++----------------
 1 file changed, 39 insertions(+), 44 deletions(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 5852d82986..90b87777b2 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -27,6 +27,10 @@
 
     let selected = {};
 
+    $: if ($settings) {
+        selected = $consent?.accepted ?? {};
+    }
+
     onMount(() => {
         if ($consent) {
             const date = new Date($consent.key);
@@ -36,10 +40,6 @@
         } else {
             show.set(true);
         }
-
-        return consent.subscribe((value) => {
-            selected = value.accepted;
-        });
     });
 
     function saveSettings(obj: Consent) {
@@ -87,51 +87,46 @@
     </div>
 {/if}
 
-{#if $settings}
-    <Modal bind:show={$settings} title="Cookie Preferences">
-        <p>
-            We use cookies to improve your site experience. The "strictly necessary" cookies are
-            required for Appwrite to function.
-        </p>
-        <div class="u-width-full-line">
-            <div class="collapsible-item">
-                <div class="collapsible-wrapper">
-                    <div class="collapsible-button">
-                        <input type="checkbox" checked disabled />
-                        <span class="text">Strictly Necessary Cookies</span>
-                    </div>
-                    <div class="collapsible-content">
-                        <p class="text u-margin-block-start-8">
-                            These are the cookies required for Appwrite to function.
-                        </p>
-                    </div>
+<Modal bind:show={$settings} title="Cookie Preferences">
+    <p>
+        We use cookies to improve your site experience. The "strictly necessary" cookies are
+        required for Appwrite to function.
+    </p>
+    <div class="u-width-full-line">
+        <div class="collapsible-item">
+            <div class="collapsible-wrapper">
+                <div class="collapsible-button">
+                    <input type="checkbox" checked disabled />
+                    <span class="text">Strictly Necessary Cookies</span>
+                </div>
+                <div class="collapsible-content">
+                    <p class="text u-margin-block-start-8">
+                        These are the cookies required for Appwrite to function.
+                    </p>
                 </div>
             </div>
-            <div class="collapsible-item">
-                <div class="collapsible-wrapper">
-                    <div class="collapsible-button">
-                        <input
-                            id="analytics"
-                            type="checkbox"
-                            bind:checked={selected['analytics']} />
-                        <label for="analytics" class="text">Product Analytics</label>
-                        <span class="collapsible-button-optional">(optional)</span>
-                    </div>
-                    <div class="collapsible-content">
-                        <p class="text u-margin-block-start-8">
-                            We include analytics cookies to understand how you use our product and
-                            design better experiences.
-                        </p>
-                    </div>
+        </div>
+        <div class="collapsible-item">
+            <div class="collapsible-wrapper">
+                <div class="collapsible-button">
+                    <input id="analytics" type="checkbox" bind:checked={selected['analytics']} />
+                    <label for="analytics" class="text">Product Analytics</label>
+                    <span class="collapsible-button-optional">(optional)</span>
+                </div>
+                <div class="collapsible-content">
+                    <p class="text u-margin-block-start-8">
+                        We include analytics cookies to understand how you use our product and
+                        design better experiences.
+                    </p>
                 </div>
             </div>
         </div>
-        <svelte:fragment slot="footer">
-            <Button text external href="https://appwrite.io/privacy">Privacy Policy</Button>
-            <Button on:click={() => confirmChoices(selected)}>Save preferences</Button>
-        </svelte:fragment>
-    </Modal>
-{/if}
+    </div>
+    <svelte:fragment slot="footer">
+        <Button text external href="https://appwrite.io/privacy">Privacy Policy</Button>
+        <Button on:click={() => confirmChoices(selected)}>Save preferences</Button>
+    </svelte:fragment>
+</Modal>
 
 <style lang="scss">
     .card.is-consent {

From 4135deb3009e3a690c1cc9485e9ed5953d5bd5ce Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 13:23:42 +0100
Subject: [PATCH 08/11] style: remove unused import

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

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 837a51e744..2f550e9300 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -1,6 +1,5 @@
 <script>
     import { settings } from '$lib/components/consent.svelte';
-    import Button from '$lib/elements/forms/button.svelte';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import { isCloud } from '$lib/system';
     import { version } from '$routes/console/store';

From 7f8413deace14d2ce113bf9e08ac18b6abb2b254 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 13:24:54 +0100
Subject: [PATCH 09/11] fix: hide cookies on selfhosted

---
 src/lib/layout/footer.svelte | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/src/lib/layout/footer.svelte b/src/lib/layout/footer.svelte
index 2f550e9300..da4b205aa7 100644
--- a/src/lib/layout/footer.svelte
+++ b/src/lib/layout/footer.svelte
@@ -41,16 +41,18 @@
                     <span class="text">Privacy</span>
                 </a>
             </li>
-            <li class="inline-links-item">
-                <span
-                    style:cursor="pointer"
-                    role="button"
-                    tabindex="0"
-                    on:keyup={clickOnEnter}
-                    on:click={() => settings.set(true)}>
-                    <span class="text">Cookies</span>
-                </span>
-            </li>
+            {#if isCloud}
+                <li class="inline-links-item">
+                    <span
+                        style:cursor="pointer"
+                        role="button"
+                        tabindex="0"
+                        on:keyup={clickOnEnter}
+                        on:click={() => settings.set(true)}>
+                        <span class="text">Cookies</span>
+                    </span>
+                </li>
+            {/if}
         </ul>
     </div>
     <div class="main-footer-end">

From 4745433654179ea9d20494d9c4353549c034e577 Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 14:00:00 +0100
Subject: [PATCH 10/11] fix: vercel deployment

---
 src/lib/components/consent.svelte | 46 +++++++++++++------------------
 1 file changed, 19 insertions(+), 27 deletions(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 90b87777b2..2f1dcb8b14 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -80,8 +80,8 @@
                 <Button secondary on:click={() => settings.set(true)}>Cookie settings</Button>
             </div>
             <div class="u-flex u-gap-16">
-                <Button on:click={rejectAll} secondary>Only required</Button>
-                <Button on:click={acceptAll} secondary>Accept all</Button>
+                <Button secondary on:click={rejectAll}>Only required</Button>
+                <Button secondary on:click={acceptAll}>Accept all</Button>
             </div>
         </div>
     </div>
@@ -92,33 +92,25 @@
         We use cookies to improve your site experience. The "strictly necessary" cookies are
         required for Appwrite to function.
     </p>
-    <div class="u-width-full-line">
-        <div class="collapsible-item">
-            <div class="collapsible-wrapper">
-                <div class="collapsible-button">
-                    <input type="checkbox" checked disabled />
-                    <span class="text">Strictly Necessary Cookies</span>
-                </div>
-                <div class="collapsible-content">
-                    <p class="text u-margin-block-start-8">
-                        These are the cookies required for Appwrite to function.
-                    </p>
-                </div>
+    <div class="u-flex-vertical u-gap-24 u-width-full-line" style:margin-block-end="24px">
+        <div class="u-flex u-gap-8">
+            <input type="checkbox" checked disabled />
+            <div>
+                <span class="text u-bold">Strictly Necessary Cookies</span>
+                <p class="text u-margin-block-start-8">
+                    These are the cookies required for Appwrite to function.
+                </p>
             </div>
         </div>
-        <div class="collapsible-item">
-            <div class="collapsible-wrapper">
-                <div class="collapsible-button">
-                    <input id="analytics" type="checkbox" bind:checked={selected['analytics']} />
-                    <label for="analytics" class="text">Product Analytics</label>
-                    <span class="collapsible-button-optional">(optional)</span>
-                </div>
-                <div class="collapsible-content">
-                    <p class="text u-margin-block-start-8">
-                        We include analytics cookies to understand how you use our product and
-                        design better experiences.
-                    </p>
-                </div>
+        <div class="u-flex u-gap-8">
+            <input id="analytics" type="checkbox" bind:checked={selected['analytics']} />
+            <div>
+                <label for="analytics" class="text u-bold">Product Analytics</label>
+                <span class="">(optional)</span>
+                <p class="text u-margin-block-start-8">
+                    We include analytics cookies to understand how you use our product and design
+                    better experiences.
+                </p>
             </div>
         </div>
     </div>

From 65c83f345e5512322a4fae8e6a5c5ef3c301e6eb Mon Sep 17 00:00:00 2001
From: Torsten Dittmann <torsten.dittmann@googlemail.com>
Date: Tue, 9 Jan 2024 14:07:44 +0100
Subject: [PATCH 11/11] fix: consent button

---
 src/lib/components/consent.svelte | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/consent.svelte b/src/lib/components/consent.svelte
index 2f1dcb8b14..3c9f574dd7 100644
--- a/src/lib/components/consent.svelte
+++ b/src/lib/components/consent.svelte
@@ -77,7 +77,8 @@
 
         <div class="u-flex u-margin-block-start-16 u-main-space-between u-cross-center">
             <div>
-                <Button secondary on:click={() => settings.set(true)}>Cookie settings</Button>
+                <Button class="u-padding-inline-0" text on:click={() => settings.set(true)}
+                    >Cookie settings</Button>
             </div>
             <div class="u-flex u-gap-16">
                 <Button secondary on:click={rejectAll}>Only required</Button>