Merge remote-tracking branch 'origin/main' into spatial-type-attributes

2026-06-06 19:27:48 +00:00 · 2025-09-09 11:54:51 +05:30
parent 2530966ca8 5b98696e4a
commit 64ec31f5dc
36 changed files with 210 additions and 91 deletions
@@ -26,7 +26,7 @@
        "@appwrite.io/pink-icons": "0.25.0",
        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@2cf27e0",
        "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed",
        "@faker-js/faker": "^9.9.0",
        "@popperjs/core": "^2.11.8",
        "@sentry/sveltekit": "^8.38.0",
@@ -24,8 +24,8 @@ importers:
        specifier: ^1.0.3
        version: 1.0.3
      '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed(svelte@5.25.3)
      '@faker-js/faker':
        specifier: ^9.9.0
        version: 9.9.0
@@ -284,8 +284,8 @@ packages:
  '@appwrite.io/pink-legacy@1.0.3':
    resolution: {integrity: sha512-GGde5fmPhs+s6/3aFeMPc/kKADG/gTFkYQSy6oBN8pK0y0XNCLrZZgBv+EBbdhwdtqVEWXa0X85Mv9w7jcIlwQ==}

-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed}
    version: 2.0.0-RC.2
    peerDependencies:
      svelte: ^4.0.0
@@ -3719,7 +3719,7 @@ snapshots:
      '@appwrite.io/pink-icons': 1.0.0
      the-new-css-reset: 1.11.3

-  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@40fb564(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@fb8b1ed(svelte@5.25.3)':
    dependencies:
      '@appwrite.io/pink-icons-svelte': 2.0.0-RC.1(svelte@5.25.3)
      '@floating-ui/dom': 1.6.13
@@ -14,6 +14,10 @@
    export let wrapperFullWidth = false;
    export let position: 'relative' | 'static' = 'relative';
    export let noMaxWidthList = false;
+    export let paddingBlock: string = undefined;
+    export let paddingInline: string = undefined;
+    export let resetListPadding: boolean = false;
+    export let gap: string = undefined;
    let classes: string = '';
    export { classes as class };
 </script>
@@ -34,14 +38,20 @@
            class="drop is-no-arrow {classes}"
            class:u-max-width-100-percent={fullWidth}
            style:--drop-width-size-desktop={width ? `${width}rem` : ''}
+            style:margin-block-start={gap}
            style:position>
            {#if $$slots.list}
                <section
                    class:u-overflow-y-auto={scrollable}
                    class:u-max-height-200={scrollable}
                    class="drop-section"
-                    style={noMaxWidthList ? 'max-inline-size: 100%' : ''}>
-                    <ul class="drop-list">
+                    style={noMaxWidthList ? 'max-inline-size: 100%' : ''}
+                    style:padding-block={paddingBlock}
+                    style:padding-inline={paddingInline}>
+                    <ul
+                        class="drop-list"
+                        style:padding={resetListPadding ? '0' : undefined}
+                        style:margin={resetListPadding ? '0' : undefined}>
                        <slot name="list" />
                    </ul>
                </section>
@@ -35,7 +35,7 @@
        {#if !hideColumns && $columns?.length}
            <Layout.Stack gap="xs">
                <Typography.Text>Columns</Typography.Text>
-                <ColumnSelector {columns} {isCustomTable}>
+                <ColumnSelector ui="new" {columns} {isCustomTable}>
                    {#snippet children(toggle, selectedColumnsNumber)}
                        <Button.Button
                            size="s"
@@ -17,7 +17,14 @@
 <header class="grid-header">
    <Typography.Title size="m">{title}</Typography.Title>
    <div class="u-flex u-gap-16 u-contents-mobile">
-        <ViewSelector {view} {columns} {isCustomTable} {hideView} {hideColumns} {allowNoColumns} />
+        <ViewSelector
+            ui="new"
+            {view}
+            {columns}
+            {isCustomTable}
+            {hideView}
+            {hideColumns}
+            {allowNoColumns} />
        <div class="grid-header-col-2">
            <slot />
        </div>
@@ -112,7 +112,7 @@
                </Layout.Stack>
                <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
                    {#if hasDisplaySettings}
-                        <ViewSelector {view} {columns} {hideView} {hideColumns} />
+                        <ViewSelector ui="new" {view} {columns} {hideView} {hideColumns} />
                    {/if}
                    {#if children}
                        {@render children()}
@@ -39,3 +39,12 @@ export function isMultiRegionSupported(url: URL): boolean {
        return false;
    }
 }
+
+// there can be multiple internal cloud instances.
+export function isProductionCloud(url: URL): boolean {
+    try {
+        return url.hostname === 'cloud.appwrite.io';
+    } catch {
+        return false;
+    }
+}
@@ -49,7 +49,7 @@
    <Layout.Stack direction="row" justifyContent="space-between">
        <SearchQuery placeholder="Search domains" />
        <Layout.Stack direction="row" gap="m" inline>
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
            <Button
                on:click={() => {
                    trackEvent(Click.DomainCreateClick, {
@@ -84,7 +84,7 @@
                        </Tooltip>
                    </Layout.Stack>
                    <Layout.Stack direction="row" gap="s" inline>
-                        <ViewSelector view={View.Table} {columns} hideView />
+                        <ViewSelector ui="new" view={View.Table} {columns} hideView />
                        <Popover let:toggle padding="none">
                            <Button secondary on:click={toggle}>Add preset</Button>
                            <svelte:fragment slot="tooltip" let:toggle>
@@ -59,7 +59,7 @@
            <SearchQuery placeholder="Search by name, email, phone, or ID" />
        </Layout.Stack>
        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
            <Button on:click={() => ($showCreateUser = true)} event="create_user" size="s">
                <Icon size="s" icon={IconPlus} slot="start" />
                <span class="text">Create user</span>
@@ -10,12 +10,14 @@
    import { Icon, Tag } from '@appwrite.io/pink-svelte';
    import { createEventDispatcher } from 'svelte';

-    export let showCreate = false;
+    let { showCreate = $bindable(false) }: { showCreate: boolean } = $props();

    const dispatch = createEventDispatcher();

-    let name: string, id: string, error: string;
-    let showCustomId = false;
+    let name = $state('');
+    let id = $state<string | null>(null);
+    let error = $state<string | null>(null);
+    let showCustomId = $state(false);

    const create = async () => {
        try {
@@ -42,10 +44,13 @@
        }
    };

-    $: if (!showCreate) {
-        showCustomId = false;
-        error = null;
-    }
+    $effect(() => {
+        if (!showCreate) {
+            showCustomId = false;
+            id = null;
+            error = null;
+        }
+    });
 </script>

 <Modal title="Create team" {error} size="m" bind:show={showCreate} onSubmit={create}>
@@ -52,13 +52,13 @@
            <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                <Filters query={data.query} {columns} />
                <div>
-                    <ViewSelector view={View.Table} {columns} hideView />
+                    <ViewSelector ui="new" view={View.Table} {columns} hideView />
                </div>
            </div>
        </div>
        <div class="u-flex u-gap-16 is-only-mobile u-margin-block-start-16">
            <div class="u-flex-basis-50-percent">
-                <ViewSelector view={View.Table} {columns} hideView />
+                <ViewSelector ui="new" view={View.Table} {columns} hideView />
            </div>
            <div class="u-flex-basis-50-percent">
                <Filters query={data.query} {columns} fullWidthMobile />
@@ -33,7 +33,7 @@

            <div class="u-flex u-main-end u-gap-16 is-not-mobile">
                <Filters query={data.query} {columns} />
-                <ViewSelector view={View.Table} {columns} hideView />
+                <ViewSelector ui="new" view={View.Table} {columns} hideView />
            </div>
        </div>
    </div>
@@ -52,6 +52,7 @@
        </Layout.Stack>
        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
            <ViewSelector
+                ui="new"
                {columns}
                view={data.view}
                hideColumns={!data.databases.total}
@@ -26,6 +26,7 @@

        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
            <ViewSelector
+                ui="new"
                view={data.view}
                columns={tableViewColumns}
                hideColumns={!data.tables.total}
@@ -178,7 +178,7 @@
 </script>

 <Container size="xxl" databasesMainScreen>
-    <div class="u-flex u-gap-32 u-flex-vertical-mobile">
+    <div class="backups-page u-flex u-gap-32 u-flex-vertical-mobile">
        {#if !isDisabled}
            <div class="u-flex-vertical u-gap-16 policies-holder-card">
                <ContainerHeader
@@ -285,4 +285,8 @@
            min-width: 330px;
        }
    }
+
+    :global(.backups-page .common-section) {
+        margin-block-start: 0 !important;
+    }
 </style>
@@ -2,9 +2,11 @@
    import { DropList } from '$lib/components';
    import { Button } from '$lib/elements/forms';
    import { IconInfo, IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { Badge, Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, Layout, Tag, Typography } from '@appwrite.io/pink-svelte';
    import { goto } from '$app/navigation';
    import { upgradeURL } from '$lib/stores/billing';
+    import { BillingPlan } from '$lib/constants';
+    import { organization } from '$lib/stores/organization';

    export let isFlex = true;
    export let title: string;
@@ -39,13 +41,32 @@

        {#if title === 'Policies' && policiesCreated >= maxPolicies}
            <div style:height="40px;" style:padding-block-start="4px">
-                <DropList bind:show={showDropdown} width="16">
-                    <Badge
-                        variant="secondary"
-                        content={`${policiesCreated}/${maxPolicies} created`}
-                        on:click={() => (showDropdown = true)}>
-                        <Icon icon={IconInfo} size="s" slot="start" />
-                    </Badge>
+                <DropList
+                    bind:show={showDropdown}
+                    width="16"
+                    noArrow
+                    placement="bottom-start"
+                    gap="6px"
+                    paddingBlock="var(--space-5, 12px)"
+                    paddingInline="var(--space-6, 16px)"
+                    resetListPadding>
+                    {#if $organization?.billingPlan === BillingPlan.PRO}
+                        <Tag
+                            size="s"
+                            style="white-space: nowrap; max-width: none;"
+                            on:click={() => (showDropdown = true)}>
+                            <Icon icon={IconInfo} size="s" />
+                            {policiesCreated}/{maxPolicies} created
+                        </Tag>
+                    {:else}
+                        <Badge
+                            style="white-space: nowrap; max-width: none;"
+                            variant="secondary"
+                            content={`${policiesCreated}/${maxPolicies} created`}
+                            on:click={() => (showDropdown = true)}>
+                            <Icon icon={IconInfo} size="s" slot="start" />
+                        </Badge>
+                    {/if}
                    <svelte:fragment slot="list">
                        <slot name="tooltip">
                            <span>
@@ -198,7 +198,7 @@

                    <!-- Prev / Next section -->
                    <div class="policy-cycles u-flex u-gap-24 u-padding-block-2">
-                        <div style="width: 128px" class="u-flex-vertical policy-item-caption">
+                        <div style="width: 160px" class="u-flex-vertical policy-item-caption">
                            <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
                                >Previous
                            </Typography.Caption>
@@ -225,7 +225,7 @@
                            <Divider vertical />
                        </div>

-                        <div style="width: 128px" class="u-flex-vertical policy-item-caption">
+                        <div style="width: 140px" class="u-flex-vertical policy-item-caption">
                            <Typography.Caption variant="400" color="--fgcolor-neutral-tertiary"
                                >Next
                            </Typography.Caption>
@@ -30,8 +30,8 @@ export const presetPolicies = writable<UserBackupPolicy[]>([

 export const columns = writable<Column[]>([
    { id: 'backups', title: 'Backups', type: 'string', width: { min: 180 } },
-    { id: 'size', title: 'Size', type: 'integer', width: { min: 163 } },
+    { id: 'size', title: 'Size', type: 'integer', width: { min: 100 } },
    { id: 'status', title: 'Status', type: 'enum', width: { min: 163 } },
-    { id: 'policy', title: 'Policy', type: 'string', width: { min: 163 } },
-    { id: 'actions', title: '', type: 'string', width: 48 }
+    { id: 'policy', title: 'Policy', type: 'string', width: { min: 100 } },
+    { id: 'actions', title: '', type: 'string', width: 64 }
 ]);
@@ -205,7 +205,7 @@
                <!--{/if}-->
            </Table.Cell>
            <Table.Cell column="policy" {root}>
-                <div class="u-flex u-main-space-between u-cross-baseline">
+                <div class="u-flex u-cross-baseline">
                    <Tooltip maxWidth="fit-content">
                        <span>
                            {policy?.name || 'Manual'}
@@ -217,51 +217,53 @@
                    </Tooltip>
                </div>
            </Table.Cell>
-            <Table.Cell column="action" {root}>
-                <Popover let:toggle padding="m" placement="bottom-end">
-                    <Button extraCompact on:click={toggle}>
-                        <Icon icon={IconDotsHorizontal} />
-                    </Button>
-                    <svelte:fragment slot="tooltip" let:toggle>
-                        <ActionMenu.Root width="180px" noPadding>
-                            {#if backup.status === 'completed'}
+            <Table.Cell column="actions" {root}>
+                <div class="action-cell u-flex u-main-end u-width-full-line">
+                    <Popover let:toggle padding="m" placement="bottom-end">
+                        <Button extraCompact on:click={toggle}>
+                            <Icon icon={IconDotsHorizontal} />
+                        </Button>
+                        <svelte:fragment slot="tooltip" let:toggle>
+                            <ActionMenu.Root width="180px" noPadding>
+                                {#if backup.status === 'completed'}
+                                    <ActionMenu.Item.Button
+                                        trailingIcon={IconRefresh}
+                                        on:click={(e) => {
+                                            toggle(e);
+                                            showRestore = true;
+                                            selectedBackup = backup;
+                                            showDropdown[index] = false;
+                                            trackEvent(Click.BackupRestoreClick);
+                                        }}>
+                                        Restore
+                                    </ActionMenu.Item.Button>
+                                {/if}
                                <ActionMenu.Item.Button
-                                    trailingIcon={IconRefresh}
+                                    trailingIcon={IconDuplicate}
                                    on:click={(e) => {
                                        toggle(e);
-                                        showRestore = true;
+                                        copy(backup.$id);
+                                        showDropdown[index] = false;
+                                        trackEvent(Click.BackupCopyIdClick);
+                                    }}>
+                                    Copy ID
+                                </ActionMenu.Item.Button>
+                                <ActionMenu.Item.Button
+                                    status="danger"
+                                    trailingIcon={IconTrash}
+                                    on:click={(e) => {
+                                        toggle(e);
+                                        showDelete = true;
                                        selectedBackup = backup;
                                        showDropdown[index] = false;
-                                        trackEvent(Click.BackupRestoreClick);
+                                        trackEvent(Click.BackupDeleteClick);
                                    }}>
-                                    Restore
+                                    Delete
                                </ActionMenu.Item.Button>
-                            {/if}
-                            <ActionMenu.Item.Button
-                                trailingIcon={IconDuplicate}
-                                on:click={(e) => {
-                                    toggle(e);
-                                    copy(backup.$id);
-                                    showDropdown[index] = false;
-                                    trackEvent(Click.BackupCopyIdClick);
-                                }}>
-                                Copy ID
-                            </ActionMenu.Item.Button>
-                            <ActionMenu.Item.Button
-                                status="danger"
-                                trailingIcon={IconTrash}
-                                on:click={(e) => {
-                                    toggle(e);
-                                    showDelete = true;
-                                    selectedBackup = backup;
-                                    showDropdown[index] = false;
-                                    trackEvent(Click.BackupDeleteClick);
-                                }}>
-                                Delete
-                            </ActionMenu.Item.Button>
-                        </ActionMenu.Root>
-                    </svelte:fragment>
-                </Popover>
+                            </ActionMenu.Root>
+                        </svelte:fragment>
+                    </Popover>
+                </div>
            </Table.Cell>
        </Table.Row.Base>
    {/each}
@@ -52,7 +52,7 @@
    import EditColumn from './columns/edit.svelte';
    import RowActivity from './rows/activity.svelte';
    import EditRowPermissions from './rows/editPermissions.svelte';
-    import { Dialog, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import { Dialog, Layout, Typography, Selector } from '@appwrite.io/pink-svelte';
    import { Button, Seekbar } from '$lib/elements/forms';
    import { generateFakeRecords, generateColumns } from '$lib/helpers/faker';
    import { addNotification } from '$lib/stores/notifications';
@@ -70,6 +70,7 @@
    let createIndex: CreateIndex;
    let createColumn: CreateColumn;
    let selectedOption: Option['name'] = 'String';
+    let createMoreColumns = false;

    /**
     * adding a lot of fake data will trigger the realtime below
@@ -327,6 +328,10 @@

        spreadsheetRenderKey.set(hash(rowIds));
    }
+
+    $: if (!$showCreateColumnSheet.show) {
+        createMoreColumns = false;
+    }
 </script>

 <svelte:head>
@@ -336,20 +341,27 @@
 <slot />

 <SideSheet
-    closeOnBlur
+    closeOnBlur={false}
    title={$showCreateColumnSheet.title}
    titleBadge={selectedOption === 'Relationship' ? 'Experimental' : undefined}
    bind:show={$showCreateColumnSheet.show}
    submit={{
        text: 'Create',
-        onClick: async () => {
-            await createColumn?.submit();
-        },
+        onClick: async () => await createColumn?.submit(),
        disabled: !selectedOption
    }}>
+    {#snippet footer()}
+        <Layout.Stack inline direction="row" alignItems="center">
+            <Selector.Switch
+                id="create-more-columns"
+                bind:checked={createMoreColumns}
+                label="Create more" />
+        </Layout.Stack>
+    {/snippet}
    <CreateColumn
        bind:selectedOption
        bind:this={createColumn}
+        bind:createMore={createMoreColumns}
        column={$showCreateColumnSheet.column}
        columns={$showCreateColumnSheet.columns}
        direction={$showCreateColumnSheet.direction}
@@ -19,6 +19,7 @@
        columnId = $bindable(null),
        columnsOrder = $bindable(null),
        selectedOption = $bindable('String'),
+        createMore = $bindable(false),
        onColumnsReorder = null
    }: {
        column?: Columns;
@@ -27,6 +28,7 @@
        columnsOrder?: string[];
        direction: ColumnDirection;
        selectedOption: Option['name'];
+        createMore?: boolean;
        onColumnsReorder?: (newOrder: string[]) => void;
    } = $props();

@@ -148,12 +150,19 @@
                message: `Column ${key ?? data?.key} has been created`
            });
            trackEvent(Submit.ColumnCreate);
+
+            if (createMore) {
+                init();
+                return true; // keep sheet open
+            }
+            return false; // close sheet
        } catch (e) {
            addNotification({
                type: 'error',
                message: e.message
            });
            trackError(e, Submit.ColumnCreate);
+            return true; // keep open on error
        }
    }

@@ -40,7 +40,8 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
                        'totalSize',
                        'buildDuration',
                        'status',
-                        'type'
+                        'type',
+                        'resourceId'
                    ]),
                    ...parsedQueries.values()
                ]
@@ -29,7 +29,7 @@
        </Layout.Stack>
        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
            <Filters query={data.query} {columns} analyticsSource="messaging_providers" />
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
            {#if $canWriteProviders}
                <CreateProviderDropdown let:toggle>
                    <Button on:click={toggle} event="create_provider">
@@ -92,7 +92,7 @@
        <SearchQuery placeholder="Search by type or IDs"></SearchQuery>
        <Layout.Stack direction="row" inline>
            <Filters query={data.query} {columns} analyticsSource="messaging_topics" />
-            <ViewSelector view={View.Table} {columns} hideView />
+            <ViewSelector ui="new" view={View.Table} {columns} hideView />
            <Button
                on:click={() => {
                    showAdd = true;
@@ -27,7 +27,7 @@

 <Container>
    <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-        <ViewSelector {columns} view={View.Table} hideView />
+        <ViewSelector ui="new" {columns} view={View.Table} hideView />
        {#if $canWriteWebhooks}
            <Button
                href={`${base}/project-${page.params.region}-${page.params.project}/settings/webhooks/create`}
@@ -63,7 +63,12 @@
            <SearchQuery placeholder="Search by name" />
        </Layout.Stack>
        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
-            <ViewSelector {columns} view={data.view} hideColumns hideView={!data.siteList.total} />
+            <ViewSelector
+                ui="new"
+                {columns}
+                view={data.view}
+                hideColumns
+                hideView={!data.siteList.total} />
            {#if $canWriteSites}
                <Button on:mousedown={() => (show = true)} event="create_site" size="s">
                    <Icon icon={IconPlus} slot="start" size="s" />
@@ -12,7 +12,11 @@ export const load = async ({ params, depends, parent }) => {
    const [deploymentList, prodReadyDeployments, proxyRuleList] = await Promise.all([
        sdk.forProject(params.region, params.project).sites.listDeployments({
            siteId: params.site,
-            queries: [Query.limit(4), Query.orderDesc(''), Query.select(['status', 'type'])]
+            queries: [
+                Query.limit(4),
+                Query.orderDesc(''),
+                Query.select(['status', 'type', 'resourceId'])
+            ]
        }),
        sdk.forProject(params.region, params.project).sites.listDeployments({
            siteId: params.site,
@@ -21,7 +25,14 @@ export const load = async ({ params, depends, parent }) => {
                Query.equal('activate', true),
                Query.limit(1),
                Query.orderDesc(''),
-                Query.select(['buildDuration', 'totalSize', 'sourceSize', 'buildSize', 'type'])
+                Query.select([
+                    'buildDuration',
+                    'totalSize',
+                    'sourceSize',
+                    'buildSize',
+                    'type',
+                    'resourceId'
+                ])
            ]
        }),
        sdk.forProject(params.region, params.project).proxy.listRules({
@@ -28,7 +28,8 @@ export const load = async ({ params, depends, url, route, parent }) => {
                    'totalSize',
                    'buildDuration',
                    'status',
-                    'type'
+                    'type',
+                    'resourceId'
                ]),
                ...parsedQueries.values()
            ]
@@ -39,6 +39,7 @@
        </Layout.Stack>
        <Layout.Stack direction="row" alignItems="center" justifyContent="flex-end">
            <ViewSelector
+                ui="new"
                {columns}
                view={data.view}
                hideColumns={!data.buckets.total}
@@ -6,7 +6,7 @@
    import { trackPageView } from '$lib/actions/analytics';
    import { Notifications, Progress } from '$lib/layout';
    import { app, type AppStore } from '$lib/stores/app';
-    import { isCloud } from '$lib/system';
+    import { isCloud, isProductionCloud } from '$lib/system';
    import { onMount } from 'svelte';
    import { requestedMigration } from './store';
    import { parseIfString } from '$lib/helpers/object';
@@ -173,6 +173,11 @@
        <link rel="preload" as="style" type="text/css" href="/console/fonts/cloud.css" />
        <link rel="stylesheet" href={`${base}/fonts/cloud.css`} />
    {/if}
+
+    <!-- add GTM only on main instance -->
+    {#if isCloud && isProductionCloud(page.url)}
+        <script defer src={`${base}/scripts/gtm.js`}></script>
+    {/if}
 </svelte:head>

 <Root theme={resolveTheme($app.themeInUse)}>
@@ -112,6 +112,7 @@
    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
    "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
    "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-hover-solid": "rgba(38, 38, 42, 100%)",
    "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
    "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
    "overlay-scrim": "rgba(0, 0, 0, 48%)",
@@ -112,6 +112,7 @@
    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
    "overlay-on-neutral": "rgba(255, 255, 255, 20%)",
    "overlay-neutral-hover": "rgba(255, 255, 255, 4%)",
+    "overlay-neutral-hover-solid": "rgba(38, 38, 42, 100%)",
    "overlay-neutral-pressed": "rgba(255, 255, 255, 8%)",
    "overlay-neutral-selected": "rgba(255, 255, 255, 8%)",
    "overlay-scrim": "rgba(0, 0, 0, 48%)",
@@ -112,6 +112,7 @@
    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
    "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
    "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-hover-solid": "rgba(248, 248, 248, 100%)",
    "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
    "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
    "overlay-scrim": "rgba(25, 25, 28, 80%)",
@@ -112,6 +112,7 @@
    "overlay-accent-pressed": "rgba(0, 0, 0, 40%)",
    "overlay-on-neutral": "rgba(0, 0, 0, 6%)",
    "overlay-neutral-hover": "rgba(25, 25, 28, 3%)",
+    "overlay-neutral-hover-solid": "rgba(248, 248, 248, 100%)",
    "overlay-neutral-pressed": "rgba(25, 25, 28, 4%)",
    "overlay-neutral-selected": "rgba(25, 25, 28, 4%)",
    "overlay-scrim": "rgba(25, 25, 28, 80%)",
@@ -0,0 +1,10 @@
+(function (w, d, s, l, i) {
+    w[l] = w[l] || [];
+    w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
+    var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != 'dataLayer' ? '&l=' + l : '';
+    j.async = true;
+    j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+    f.parentNode.insertBefore(j, f);
+})(window, document, 'script', 'dataLayer', 'GTM-WQ5WKK8');