appwrite · ArmanNik · Aug 22, 2023 · May 31, 2023 · Jun 2, 2023 · Jun 5, 2023
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -24,5 +24,8 @@ module.exports = {
         browser: true,
         es2017: true,
         node: true
+    },
+    globals: {
+        globalThis: false // false means it is not writeable
     }
 };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -19,15 +19,16 @@
     },
     "dependencies": {
         "@analytics/google-analytics": "^1.0.5",
-        "@appwrite.io/console": "npm:christy-console@^0.4.0",
-        "@appwrite.io/pink": "0.1.0-next.3",
-        "@appwrite.io/pink-icons": "^0.1.0-next.3",
         "@analytics/google-tag-manager": "^0.5.3",
+        "@appwrite.io/console": "npm:[email protected]",
+        "@appwrite.io/pink": "0.1.0-next.4",
+        "@appwrite.io/pink-icons": "^0.1.0-next.4",
         "@popperjs/core": "^2.11.6",
         "@sentry/svelte": "^7.44.2",
         "@sentry/tracing": "^7.44.2",
         "ai": "^2.1.15",
         "analytics": "^0.8.1",
+        "dayjs": "^1.11.9",
         "dotenv": "^16.0.3",
         "echarts": "^5.4.1",
         "logrocket": "^3.0.1",

diff --git a/src/app.html b/src/app.html
@@ -47,7 +47,7 @@
 
         %sveltekit.head%
     </head>
-    <body>
+    <body data-sveltekit-preload-data="hover">
         <div id="svelte">%sveltekit.body%</div>
     </body>
 </html>
diff --git a/src/lib/actions/analytics.ts b/src/lib/actions/analytics.ts
@@ -183,15 +183,21 @@ export enum Submit {
     FunctionUpdateName = 'submit_function_update_name',
     FunctionUpdatePermissions = 'submit_function_update_permissions',
     FunctionUpdateSchedule = 'submit_function_update_schedule',
+    FunctionUpdateConfiguration = 'submit_function_update_configuration',
+    FunctionUpdateLogging = 'submit_function_update_logging',
     FunctionUpdateTimeout = 'submit_function_update_timeout',
     FunctionUpdateEvents = 'submit_function_update_events',
+    FunctionConnectRepo = 'submit_function_disconnect_repo',
+    FunctionDisconnectRepo = 'submit_function_disconnect_repo',
+    FunctionRedeploy = 'submit_function_redeploy',
     DeploymentCreate = 'submit_deployment_create',
     DeploymentDelete = 'submit_deployment_delete',
     DeploymentUpdate = 'submit_deployment_update',
     ExecutionCreate = 'submit_execution_create',
     VariableCreate = 'submit_variable_create',
     VariableDelete = 'submit_variable_delete',
     VariableUpdate = 'submit_variable_update',
+    VariableEditor = 'submit_variable_editor',
     KeyCreate = 'submit_key_create',
     KeyDelete = 'submit_key_delete',
     KeyUpdateName = 'submit_key_update_name',
@@ -223,6 +229,8 @@ export enum Submit {
     FileCreate = 'submit_file_create',
     FileDelete = 'submit_file_delete',
     FileUpdatePermissions = 'submit_file_update_permissions',
+    InstallationCreate = 'submit_installation_create',
+    InstallationDelete = 'submit_installation_delete',
     EmailChangeLocale = 'submit_email_change_locale',
     EmailResetTemplate = 'submit_email_reset_template',
     EmailUpdateInviteTemplate = 'submit_email_update_invite_template',

diff --git a/src/lib/commandCenter/panels/ai.svelte b/src/lib/commandCenter/panels/ai.svelte
@@ -10,8 +10,13 @@
     import CoolerAppwrite from '$lib/images/appwrite-cooler.svg';
     import { VARS } from '$lib/system';
 
+    const endpoint = VARS.APPWRITE_ENDPOINT ?? `${globalThis?.location?.origin}/v1`;
+
     const { input, handleSubmit, completion, isLoading, complete } = useCompletion({
-        api: VARS.ASSISTANT_ENDPOINT
+        api: endpoint + '/console/assistant',
+        headers: {
+            'content-type': 'application/json'
+        }
     });
 
     const examples = [

diff --git a/src/lib/commandCenter/searchers/functions.ts b/src/lib/commandCenter/searchers/functions.ts
@@ -5,7 +5,7 @@ import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { page } from '$app/stores';
-import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/+page.svelte';
+import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/store';
 
 const getFunctionCommand = (fn: Models.Function, projectId: string) => {
     return {
@@ -37,7 +37,7 @@ export const functionsSearcher = (async (query: string) => {
                     if (!$page.url.pathname.endsWith(func.$id)) {
                         await goto(`/console/project-${projectId}/functions/function-${func.$id}`);
                     }
-                    showCreateDeployment();
+                    showCreateDeployment.set(true);
                 },
                 group: 'functions',
                 icon: 'plus'

diff --git a/src/lib/components/alert.svelte b/src/lib/components/alert.svelte
@@ -4,7 +4,6 @@
 
     export let dismissible = false;
     export let type: 'info' | 'success' | 'warning' | 'error' = 'info';
-    export let standalone = false;
     export let buttons: Buttons[] = [];
     export let isAction = false;
     export let isStandalone = false;

diff --git a/src/lib/components/avatarGroup.svelte b/src/lib/components/avatarGroup.svelte
@@ -2,21 +2,39 @@
     import AvatarInitials from './avatarInitials.svelte';
 
     export let avatars: string[] = [];
+    export let icons: string[] = [];
     export let total = avatars.length;
     export let size = 40;
+    export let avatarSize: keyof typeof Sizes = 'medium';
+    export let bordered = false;
+
+    enum Sizes {
+        xsmall = 'is-size-x-small',
+        small = 'is-size-small',
+        medium = '',
+        large = 'is-size-large',
+        xlarge = 'is-size-x-large'
+    }
 </script>
 
-<ul class="avatars-group">
+<ul class="avatars-group" class:is-with-border={bordered}>
     {#each avatars as name, index}
         {#if index < 2}
             <li class="avatars-group-item">
                 <AvatarInitials {size} {name} />
             </li>
         {/if}
     {/each}
+
+    {#each icons as icon}
+        <li class="avatars-group-item">
+            <span class="avatar {Sizes[avatarSize]}"><span class={`icon-${icon}`} /></span>
+        </li>
+    {/each}
+
     {#if total > 2}
         <li class="avatars-group-item">
-            <div class="avatar">+{total - 2}</div>
+            <div class="avatar {Sizes[avatarSize]}">+{total - 2}</div>
         </li>
     {/if}
 </ul>
diff --git a/src/lib/components/box.svelte b/src/lib/components/box.svelte
@@ -1,9 +1,20 @@
-<div class="box">
-    <div class="u-flex u-gap-16">
-        <slot name="image" />
-        <div class="u-cross-child-center u-line-height-1-5">
-            <slot name="title" />
-            <slot />
-        </div>
-    </div>
+<script lang="ts">
+    export let radius: keyof typeof radiuses = 'small';
+    export let padding = 24;
+    let classes = '';
+    export { classes as class };
+
+    enum radiuses {
+        xsmall = '--border-radius-extra-large',
+        small = '--border-radius-small',
+        medium = '--border-radius-medium',
+        large = '--border-radius-large'
+    }
+</script>
+
+<div
+    class="box {classes}"
+    style:--box-border-radius={`var(${radiuses[radius]})`}
+    style:--box-padding={`${padding / 16}rem`}>
+    <slot />
 </div>
diff --git a/src/lib/components/boxAvatar.svelte b/src/lib/components/boxAvatar.svelte
@@ -0,0 +1,9 @@
+<div class="box">
+    <div class="u-flex u-gap-16">
+        <slot name="image" />
+        <div class="u-cross-child-center u-line-height-1-5">
+            <slot name="title" />
+            <slot />
+        </div>
+    </div>
+</div>
diff --git a/src/lib/components/collapsibleItem.svelte b/src/lib/components/collapsibleItem.svelte
@@ -11,7 +11,9 @@
             <slot name="beforetitle" />
             <div>
                 <span class="text"><slot name="title" /></span>
-                <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                {#if $$slots.subtitle}
+                    <span class="collapsible-button-optional"><slot name="subtitle" /></span>
+                {/if}
             </div>
             <div class="icon">
                 <span class="icon-cheveron-down" aria-hidden="true" />

diff --git a/src/lib/components/customId.svelte b/src/lib/components/customId.svelte
@@ -7,6 +7,7 @@
     export let name: string;
     export let id: string;
     export let autofocus = true;
+    export let fullWidth = false;
 
     $: if (!show) {
         id = null;
@@ -21,7 +22,7 @@
     }
 </script>
 
-<InnerModal bind:show>
+<InnerModal bind:show {fullWidth}>
     <svelte:fragment slot="title">{name} ID</svelte:fragment>
     <svelte:fragment slot="subtitle">
         Enter a custom {name} ID. Leave blank for a randomly generated one.

diff --git a/src/lib/components/dropListLink.svelte b/src/lib/components/dropListLink.svelte
@@ -4,10 +4,16 @@
     export let href: string;
     export let icon: string = null;
     export let disabled = false;
+    export let external = false;
 </script>
 
 <li class="drop-list-item" on:click on:keyup={clickOnEnter}>
-    <a {href} class="drop-button" class:is-disabled={disabled}>
+    <a
+        {href}
+        class="drop-button"
+        class:is-disabled={disabled}
+        target={external ? '_blank' : ''}
+        rel={external ? 'noopener noreferrer' : ''}>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />

diff --git a/src/lib/components/emptySearch.svelte b/src/lib/components/emptySearch.svelte
@@ -4,6 +4,7 @@
     import Dark from '$lib/images/search-dark.svg';
     import PaginationInline from './paginationInline.svelte';
 
+    export let hidePagination = false;
     export let hidePages = false;
 </script>
 
@@ -18,7 +19,9 @@
     </div>
 </article>
 
-<div class="u-flex u-margin-block-start-32 u-main-space-between">
-    <p class="text">Total results: 0</p>
-    <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
-</div>
+{#if !hidePagination}
+    <div class="u-flex u-margin-block-start-32 u-main-space-between">
+        <p class="text">Total results: 0</p>
+        <PaginationInline limit={1} offset={0} sum={0} {hidePages} />
+    </div>
+{/if}
diff --git a/src/lib/components/eventModal.svelte b/src/lib/components/eventModal.svelte
@@ -246,7 +246,7 @@
 </script>
 
 <Modal bind:show onSubmit={create} size="big">
-    <svelte:fragment slot="header">Create Event</svelte:fragment>
+    <svelte:fragment slot="header">Create event</svelte:fragment>
     <slot />
     <div>
         <p class="u-text">Choose a service</p>

diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -29,6 +29,7 @@ export { default as AvatarInitials } from './avatarInitials.svelte';
 export { default as AvatarGroup } from './avatarGroup.svelte';
 export { default as Alert } from './alert.svelte';
 export { default as Box } from './box.svelte';
+export { default as BoxAvatar } from './boxAvatar.svelte';
 export { default as Search } from './search.svelte';
 export { default as SearchQuery } from './searchQuery.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
@@ -52,6 +53,8 @@ export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
 export { default as ClickableList } from './clickableList.svelte';
 export { default as ClickableListItem } from './clickableListItem.svelte';
 export { default as Id } from './id.svelte';
+export { default as NumericList } from './numericList.svelte';
+export { default as NumericListItem } from './numericListItem.svelte';
 export { default as EyebrowHeading } from './eyebrowHeading.svelte';
 export { default as SvgIcon } from './svgIcon.svelte';
 export { default as MigrationBox } from './migrationBox.svelte';

diff --git a/src/lib/components/innerModal.svelte b/src/lib/components/innerModal.svelte
@@ -3,11 +3,12 @@
 
     export let show = false;
     export let closable = true;
+    export let fullWidth = false;
 </script>
 
 {#if show}
     <FormItem>
-        <section class="modal is-inner-modal">
+        <section class="modal is-inner-modal" class:u-width-full-line={fullWidth}>
             <div class="modal-form">
                 <header class="modal-header">
                     <div class="u-flex u-main-space-between u-cross-center u-gap-16">

diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
@@ -31,10 +31,14 @@
             bind:group
             on:click />
         <div class="u-flex u-flex-vertical u-gap-4">
-            <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
-            <p class="u-color-text-gray u-small">
-                <slot />
-            </p>
+            {#if $$slots.title}
+                <h4 class="body-text-2 u-bold"><slot name="title" /></h4>
+            {/if}
+            {#if $$slots.default}
+                <p class="u-color-text-gray u-small">
+                    <slot />
+                </p>
+            {/if}
         </div>
         {#if icon}
             <span class={`icon-${icon} u-margin-inline-start-auto`} aria-hidden="true" />

diff --git a/src/lib/components/numericList.svelte b/src/lib/components/numericList.svelte
@@ -0,0 +1,3 @@
+<ol class="numeric-list">
+    <slot />
+</ol>
diff --git a/src/lib/components/numericListItem.svelte b/src/lib/components/numericListItem.svelte
@@ -0,0 +1,7 @@
+<script lang="ts">
+    export let fullWidth = false;
+</script>
+
+<li class="numeric-list-item">
+    <div class="u-margin-block-start-8" class:u-width-full-line={fullWidth}><slot /></div>
+</li>
diff --git a/src/lib/components/permissions/permissions.svelte b/src/lib/components/permissions/permissions.svelte
@@ -19,8 +19,8 @@
         TableRow
     } from '$lib/elements/table';
     import { symmetricDifference } from '$lib/helpers/array';
-    import { onDestroy, onMount } from 'svelte';
-    import { writable, type Unsubscriber } from 'svelte/store';
+    import { onMount } from 'svelte';
+    import { writable } from 'svelte/store';
     import Actions from './actions.svelte';
     import Row from './row.svelte';
     import Table from '$lib/elements/table/table.svelte';
@@ -32,26 +32,19 @@
     let showTeam = false;
     let showCustom = false;
     let showDropdown = false;
-    let unsubscribe: Unsubscriber;
 
     const groups = writable<Map<string, Permission>>(new Map());
 
     onMount(() => {
         permissions.forEach(fromPermissionString);
-        unsubscribe = groups.subscribe(() => {
+        return groups.subscribe(() => {
             const current = exportRoles();
             if (symmetricDifference(current, permissions).length) {
                 permissions = current;
             }
         });
     });
 
-    onDestroy(() => {
-        if (unsubscribe) {
-            unsubscribe();
-        }
-    });
-
     function create(event: CustomEvent<string[]>) {
         for (const role of event.detail) {
             addRole(role);