Merge branch 'main' into fix-usage-layout-shifts

ItzNotABug · web-flow · commit c4b925cec771 · 2025-09-10T13:07:09.000+05:30
diff --git a/src/lib/layout/displaySettingsModal.svelte b/src/lib/layout/displaySettingsModal.svelte
@@ -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"
diff --git a/src/lib/layout/gridHeader.svelte b/src/lib/layout/gridHeader.svelte
@@ -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>
diff --git a/src/lib/layout/responsiveContainerHeader.svelte b/src/lib/layout/responsiveContainerHeader.svelte
@@ -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()}
diff --git a/src/lib/system.ts b/src/lib/system.ts
@@ -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;
+    }
+}
diff --git a/src/routes/(console)/organization-[organization]/domains/+page.svelte b/src/routes/(console)/organization-[organization]/domains/+page.svelte
@@ -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, {
diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte
@@ -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>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/+page.svelte
@@ -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>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/createTeam.svelte b/src/routes/(console)/project-[region]-[project]/auth/createTeam.svelte
@@ -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}>
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/identities/+page.svelte
@@ -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 />
diff --git a/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte b/src/routes/(console)/project-[region]-[project]/auth/user-[user]/targets/+page.svelte
@@ -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>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/+page.svelte
@@ -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}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte
@@ -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}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -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}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/createColumn.svelte
@@ -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
         }
     }
 
diff --git a/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts b/src/routes/(console)/project-[region]-[project]/functions/function-[function]/+page.ts
@@ -40,7 +40,8 @@ export const load: PageLoad = async ({ params, depends, url, route, parent }) =>
                         'totalSize',
                         'buildDuration',
                         'status',
-                        'type'
+                        'type',
+                        'resourceId'
                     ]),
                     ...parsedQueries.values()
                 ]
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/providers/+page.svelte
@@ -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">
diff --git a/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte b/src/routes/(console)/project-[region]-[project]/messaging/topics/topic-[topic]/+page.svelte
@@ -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;
diff --git a/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte b/src/routes/(console)/project-[region]-[project]/settings/webhooks/+page.svelte
@@ -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`}
diff --git a/src/routes/(console)/project-[region]-[project]/sites/+page.svelte b/src/routes/(console)/project-[region]-[project]/sites/+page.svelte
@@ -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" />
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/+page.ts
@@ -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({
diff --git a/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.ts b/src/routes/(console)/project-[region]-[project]/sites/site-[site]/deployments/+page.ts
@@ -28,7 +28,8 @@ export const load = async ({ params, depends, url, route, parent }) => {
                     'totalSize',
                     'buildDuration',
                     'status',
-                    'type'
+                    'type',
+                    'resourceId'
                 ]),
                 ...parsedQueries.values()
             ]
diff --git a/src/routes/(console)/project-[region]-[project]/storage/+page.svelte b/src/routes/(console)/project-[region]-[project]/storage/+page.svelte
@@ -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}
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -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)}>
diff --git a/src/themes/dark-cloud.json b/src/themes/dark-cloud.json
@@ -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%)",
diff --git a/src/themes/dark.json b/src/themes/dark.json
@@ -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%)",
diff --git a/src/themes/light-cloud.json b/src/themes/light-cloud.json
@@ -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%)",
diff --git a/src/themes/light.json b/src/themes/light.json
@@ -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%)",
diff --git a/static/scripts/gtm.js b/static/scripts/gtm.js

Original file line number	Diff line number	Diff line change
`@@ -39,3 +39,12 @@ export function isMultiRegionSupported(url: URL): boolean {`
`39`	`39`	`return false;`
`40`	`40`	`}`
`41`	`41`	`}`
	`42`	`+`
	`43`	`+// there can be multiple internal cloud instances.`
	`44`	`+export function isProductionCloud(url: URL): boolean {`
	`45`	`+ try {`
	`46`	`+ return url.hostname === 'cloud.appwrite.io';`
	`47`	`+ } catch {`
	`48`	`+ return false;`
	`49`	`+ }`
	`50`	`+}`