fix: 1.4 QA fixes after release

src/lib/components/avatarGroup.svelte

@@ -7,6 +7,7 @@
     export let size = 40;
     export let avatarSize: keyof typeof Sizes = 'medium';
     export let bordered = false;
+    export let color = '';
 
     enum Sizes {
         xsmall = 'is-size-x-small',
@@ -28,13 +29,13 @@
 
     {#each icons as icon}
         <li class="avatars-group-item">
-            <span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
+            <span class="avatar {Sizes[avatarSize]} {color}"><span class={`icon-${icon}`} /></span>
         </li>
     {/each}
 
     {#if total > 2}
         <li class="avatars-group-item">
-            <div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
+            <div class="avatar {Sizes[avatarSize]} {color}">+{total - 2}</div>
         </li>
     {/if}
 </ul>

src/lib/components/emptySearch.svelte

@@ -20,7 +20,7 @@
 </article>
 
 {#if !hidePagination}
-    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+    <div class="u-flex u-margin-block-start-32 u-main-space-between u-cross-center">
         <p class="text">Total results: 0</p>
         <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
     </div>

src/lib/components/limit.svelte

@@ -34,6 +34,7 @@
 
 <div class="u-flex u-gap-12 u-cross-center">
     <InputSelect
+        wrapperTag="div"
         id="rows"
         label="Rows per page"
         showLabel={false}

src/lib/components/status.svelte

@@ -6,10 +6,7 @@
         | 'completed'
         | 'processing'
         | 'ready'
-        | 'building'
-        | string = null;
-
-    //TODO: Remove type string once SDK is updated
+        | 'building';
 </script>
 
 <div

src/lib/elements/forms/formItem.svelte

@@ -1,8 +1,17 @@
+<script context="module" lang="ts">
+    export type FormItemTag = 'li' | 'div';
+</script>
+
 <script lang="ts">
+    export let tag: FormItemTag = 'li';
     export let fullWidth = false;
     export let isMultiple = false;
 </script>
 
-<li class="form-item" class:is-multiple={isMultiple} class:u-width-full-line={fullWidth}>
+<svelte:element
+    this={tag}
+    class="form-item"
+    class:is-multiple={isMultiple}
+    class:u-width-full-line={fullWidth}>
     <slot />
-</li>
+</svelte:element>

src/lib/elements/forms/inputSearch.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { onMount } from 'svelte';
+    import { createEventDispatcher, onMount } from 'svelte';
     import { onDestroy } from 'svelte';
 
     export let value = '';
@@ -10,6 +10,7 @@
     export let autofocus = false;
     export let isWithEndButton = true;
 
+    const dispatch = createEventDispatcher();
     let element: HTMLInputElement;
     let timer: ReturnType<typeof setTimeout>;
 
@@ -26,13 +27,19 @@
         }
     });
 
-    const valueChange = (event: Event) => {
+    function valueChange(event: Event) {
         clearTimeout(timer);
         timer = setTimeout(() => {
             const target = event.target as HTMLInputElement;
             value = target.value;
+            dispatch('change', value);
         }, debounce);
-    };
+    }
+
+    function clearSearch() {
+        value = '';
+        dispatch('clear');
+    }
 
     $: if (!value) {
         if (element) {
@@ -56,7 +63,8 @@
             class="button is-text is-only-icon"
             style="--button-size:1.5rem;"
             aria-label="Clear search"
-            on:click={() => (value = '')}>
+            type="button"
+            on:click={clearSearch}>
             <span class="icon-x" aria-hidden="true" />
         </button>
     {/if}

src/lib/elements/forms/inputSelect.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
     import { FormItem, Helper, Label } from '.';
+    import type { FormItemTag } from './formItem.svelte';
 
     export let id: string;
     export let label: string | undefined = undefined;
@@ -10,6 +11,7 @@
     export let required = false;
     export let hideRequired = false;
     export let disabled = false;
+    export let wrapperTag: FormItemTag = 'li';
     export let options: {
         value: string | boolean | number;
         label: string;
@@ -45,7 +47,7 @@
     $: hasNullOption = options.some((option) => option.value === null);
 </script>
 
-<FormItem>
+<FormItem tag={wrapperTag}>
     {#if label}
         <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
             {label}

src/lib/layout/shell.svelte

@@ -30,7 +30,7 @@
      * Cancel navigation when wizard is open and triggered by popstate
      */
     beforeNavigate((n) => {
-        const external = n.to.url.hostname !== globalThis.location.hostname;
+        const external = n?.to?.url?.hostname !== globalThis?.location?.hostname;
         if (external) return;
         if (!($wizard.show || $wizard.cover)) return;
         if (n.type === 'popstate') {

src/lib/pages/domains/index.svelte

@@ -87,12 +87,12 @@
                     </TableCellLink>
                     <TableCell title="Verification">
                         {#if domain.status === 'created'}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="u-flex u-gap-16 u-cross-center">
                                 <Pill danger>
                                     <span
                                         class="icon-exclamation-circle u-color-text-danger"
                                         aria-hidden="true" />
-                                    <span class="u-text">Failed</span>
+                                    <span class="u-text">failed</span>
                                 </Pill>
                                 <button type="button" on:click={() => openRetry(domain)}>
                                     <span class="link">Retry</span>
@@ -103,30 +103,30 @@
                                 <span
                                     class="icon-check-circle u-color-text-success"
                                     aria-hidden="true" />
-                                <p class="text">Verified</p>
+                                <p class="text">verified</p>
                             </Pill>
                         {/if}
                     </TableCell>
-                    <TableCell title="Cartificate">
+                    <TableCell title="Certificate">
                         {#if domain.status === 'unverified'}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="u-flex u-gap-16 u-cross-center">
                                 <Pill danger>
                                     <span
                                         class="icon-exclamation-circle u-color-text-danger"
                                         aria-hidden="true" />
-                                    <span class="u-text">Failed</span>
+                                    <span class="u-text">failed</span>
                                 </Pill>
                                 <button type="button" on:click={() => openRetry(domain)}>
                                     <span class="link">Retry</span>
                                 </button>
                             </div>
                         {:else if domain.status === 'verified'}
-                            <div class="u-flex u-gap-8 u-cross-center">
+                            <div class="u-flex u-gap-16 u-cross-center">
                                 <Pill success>
                                     <span
                                         class="icon-check-circle u-color-text-success"
                                         aria-hidden="true" />
-                                    <span>Generated</span>
+                                    <span>generated</span>
                                 </Pill>
                                 {#if domain.renewAt}
                                     <span class="u-text-color-gray">
@@ -135,12 +135,10 @@
                                 {/if}
                             </div>
                         {:else}
-                            <div class="u-flex u-gap-8 u-cross-center">
-                                <Pill>
-                                    <span class="icon-clock u-text-color-gray" aria-hidden="true" />
-                                    <p class="text">Waiting for verification</p>
-                                </Pill>
-                            </div>
+                            <Pill warning>
+                                <span class="icon-clock u-text-color-gray" aria-hidden="true" />
+                                <p class="text">Blocked by verification</p>
+                            </Pill>
                         {/if}
                     </TableCell>
                     <TableCell>
@@ -192,6 +190,6 @@
     </svelte:fragment>
     <Retry on:error={(e) => (retryError = e.detail)} />
     <svelte:fragment slot="footer">
-        <Button text on:click={() => (showRetry = false)}>Close</Button>
+        <Button secondary on:click={() => (showRetry = false)}>Close</Button>
     </svelte:fragment>
 </Modal>

src/lib/pages/domains/wizard/retry.svelte

@@ -36,6 +36,7 @@
     }
 </script>
 
+<Trim alternativeTrim><b>{$domain.domain}</b></Trim>
 {#if $domain.status === 'created'}
     <Box radius="small">
         <div class="u-flex u-gap-8 u-cross-center">
@@ -63,7 +64,6 @@
         </div>
     </Box>
 {:else if $domain.status === 'unverified'}
-    <Trim alternativeTrim><b>{$domain.domain}</b></Trim>
     <Box radius="small">
         <div class="u-flex u-gap-8 u-cross-center">
             <span class="icon-exclamation-circle u-color-text-danger" aria-hidden="true" />

src/lib/pages/domains/wizard/step1.svelte

@@ -45,7 +45,12 @@
 <WizardStep beforeSubmit={createDomain}>
     <svelte:fragment slot="title">Add function domain</svelte:fragment>
     <svelte:fragment slot="subtitle">
-        Use your self-owned domain as the endpoint of your Appwrite API.
+        Use your self-owned domain as the endpoint of your Appwrite API. <a
+            href="https://appwrite.io/docs/custom-domains"
+            target="_blank"
+            rel="noopener noreferrer"
+            class="link">Learn more</a
+        >.
     </svelte:fragment>
 
     <FormList>

src/lib/pages/domains/wizard/step2.svelte

@@ -7,7 +7,6 @@
 
     function onRetryError(event: CustomEvent<string>) {
         addNotification({
-            title: 'Error',
             message: event.detail,
             type: 'error'
         });

src/lib/wizards/functions/components/repositories.svelte

@@ -117,7 +117,7 @@
             </div>
         </div>
     {/await}
-    <p class="text common-section">
+    <p class="text u-margin-block-start-16">
         Manage organization configuration in your <a
             class="link"
             href={`${base}/console/project-${$page.params.project}/settings`}>project settings</a
@@ -160,7 +160,7 @@
                                                 alt={repo.name} />
                                         {/if}
                                     </div>
-                                    <div class="u-flex u-gap-8">
+                                    <div class="u-flex u-gap-8 u-cross-center">
                                         <span class="text u-trim-1">{repo.name}</span>
                                         {#if repo.private}
                                             <span
@@ -196,28 +196,12 @@
                             <p>There are no repositories that match your search.</p>
                         </div>
                         <div class="u-flex u-gap-16 common-section u-main-center">
-                            <Button external href="https://appwrite.io/docs/client/teams" text
-                                >Documentation</Button>
                             <Button secondary on:click={() => (search = '')}>Clear search</Button>
                         </div>
                     </div>
                 </EmptySearch>
             {:else}
-                <EmptySearch hidePages>
-                    <div class="common-section">
-                        <div class="u-text-center common-section">
-                            <p class="text u-line-height-1-5">You have no repositories.</p>
-                            <p class="text u-line-height-1-5">
-                                Need a hand? Learn more in our <a
-                                    href="https://appwrite.io/docs/client/teams"
-                                    target="_blank"
-                                    rel="noopener noreferrer">
-                                    documentation</a
-                                >.
-                            </p>
-                        </div>
-                    </div>
-                </EmptySearch>
+                <EmptySearch hidePages />
             {/if}
         {/await}
     {/if}

src/lib/wizards/functions/cover.svelte

@@ -42,6 +42,7 @@
     import Repositories from './components/repositories.svelte';
     import CreateManual from './createManual.svelte';
     import CreateGit from './createGit.svelte';
+    import { tooltip } from '$lib/actions/tooltip';
 
     let hasInstallations: boolean;
     let selectedRepository: string;
@@ -84,9 +85,7 @@
             <div class="card u-height-100-percent">
                 <section class="common-section">
                     <h2 class="heading-level-6">Quick start</h2>
-                    <p class="u-margin-block-start-8">
-                        Use a starter templates to begin with the basics.
-                    </p>
+                    <p class="u-margin-block-start-8">Use a starter template.</p>
                     <ul
                         class="grid-box u-margin-block-start-16"
                         style:--grid-item-size="8rem"
@@ -141,7 +140,10 @@
                             {/each}
 
                             {#if quickStart.runtimes.length < 6}
-                                <li>
+                                <li
+                                    use:tooltip={{
+                                        content: 'More runtimes coming soon'
+                                    }}>
                                     <Box
                                         class="u-width-full-line u-flex u-cross-center u-gap-8"
                                         padding={16}
@@ -150,6 +152,7 @@
                                             icons={['dotnet', 'deno']}
                                             total={4}
                                             avatarSize="small"
+                                            color="u-color-text-gray"
                                             bordered />
                                     </Box>
                                 </li>
@@ -180,7 +183,7 @@
                                     <div class="avatar is-size-small" style:--p-text-size="1.25rem">
                                         <span class={template.icon} />
                                     </div>
-                                    <div>
+                                    <div class="u-flex u-flex-vertical u-gap-4">
                                         <div class="body-text-2 u-bold u-trim">{template.name}</div>
                                         <div class="u-trim-1 u-color-text-gray">
                                             {template.tagline}
@@ -193,6 +196,7 @@
                 </section>
                 <Button
                     text
+                    noMargin
                     class="u-margin-inline-start-auto u-margin-block-start-16"
                     href={`${base}/console/project-${$page.params.project}/functions/templates`}>
                     <span> All templates </span>

src/lib/wizards/functions/steps/configuration.svelte

@@ -22,8 +22,7 @@
             label="Entrypoint"
             id="entrypoint"
             placeholder="Entrypoint"
-            bind:value={$createFunction.entrypoint}
-            required />
+            bind:value={$createFunction.entrypoint} />
         <Collapsible>
             <CollapsibleItem>
                 <svelte:fragment slot="title">Build commands</svelte:fragment>

src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/settings/updatePermissions.svelte

@@ -63,7 +63,7 @@
             target="_blank"
             rel="noopener noreferrer"
             class="link">
-            Permissions fuide
+            Permissions guide
         </a>.
     </p>
     <svelte:fragment slot="aside">