Merge branch '8.x' into 'feat-documentsdb'.

package.json

@@ -24,9 +24,9 @@
         "@ai-sdk/svelte": "^1.1.24",
         "@appwrite.io/console": "https://pkg.vc/-/@appwrite/@appwrite.io/console@3ec199d",
         "@appwrite.io/pink-icons": "0.25.0",
-        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc",
+        "@appwrite.io/pink-icons-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bbad65f",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@865e2fc",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bbad65f",
         "@codemirror/autocomplete": "^6.19.0",
         "@codemirror/commands": "^6.9.0",
         "@codemirror/lang-javascript": "^6.2.4",

pnpm-lock.yaml

@@ -18,14 +18,14 @@ importers:
         specifier: 0.25.0
         version: 0.25.0
       '@appwrite.io/pink-icons-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bbad65f
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bbad65f(svelte@5.25.3)
       '@appwrite.io/pink-legacy':
         specifier: ^1.0.3
         version: 1.0.3
       '@appwrite.io/pink-svelte':
-        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@865e2fc
-        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@865e2fc(svelte@5.25.3)
+        specifier: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bbad65f
+        version: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bbad65f(svelte@5.25.3)
       '@codemirror/autocomplete':
         specifier: ^6.19.0
         version: 6.19.0
@@ -314,8 +314,8 @@ packages:
     peerDependencies:
       svelte: ^4.0.0
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc}
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bbad65f':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bbad65f}
     version: 2.0.0-RC.1
     peerDependencies:
       svelte: ^4.0.0
@@ -329,8 +329,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@865e2fc':
-    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@865e2fc}
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bbad65f':
+    resolution: {tarball: https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bbad65f}
     version: 2.0.0-RC.2
     peerDependencies:
       svelte: ^4.0.0
@@ -3910,7 +3910,7 @@ snapshots:
     dependencies:
       svelte: 5.25.3
 
-  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@865e2fc(svelte@5.25.3)':
+  '@appwrite.io/pink-icons-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@bbad65f(svelte@5.25.3)':
     dependencies:
       svelte: 5.25.3
 
@@ -3923,7 +3923,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@865e2fc(svelte@5.25.3)':
+  '@appwrite.io/pink-svelte@https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@bbad65f(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

src/lib/profiles/css/base.css

@@ -0,0 +1,6 @@
+.responsive-table {
+    overflow: hidden;
+    width: 100%;
+    scrollbar-width: thin;
+    position: relative;
+}

src/routes/(console)/organization-[organization]/domains/domain-[domain]/+page.svelte

@@ -13,9 +13,16 @@
     } from '@appwrite.io/pink-svelte';
     import DomainMetrics from './domainMetrics.svelte';
     import { base } from '$app/paths';
+    import { isSmallViewport } from '$lib/stores/viewport';
     import { app } from '$lib/stores/app';
     import { Button } from '$lib/elements/forms';
-    import { IconDownload, IconPlus, IconUpload } from '@appwrite.io/pink-icons-svelte';
+    import {
+        IconDownload,
+        IconPlus,
+        IconUpload,
+        IconAdjustments
+    } from '@appwrite.io/pink-icons-svelte';
+    import DisplaySettingsModal from '$lib/layout/displaySettingsModal.svelte';
     import { ViewSelector } from '$lib/components';
     import { View } from '$lib/helpers/load';
     import { columns, presets } from './store';
@@ -33,6 +40,7 @@
     let showCreate = false;
     let showPresetModal = false;
     let showImportModal = false;
+    let showDisplaySettingsModal = false;
     let selectedPreset = '';
 
     async function downloadRecords() {
@@ -70,23 +78,55 @@
 
         <Layout.Stack gap="l">
             {#if data.recordList.total}
-                <Layout.Stack direction="row" justifyContent="space-between">
-                    <Layout.Stack direction="row" gap="s" inline>
-                        <Button secondary on:click={() => (showImportModal = true)}>
-                            <Icon icon={IconUpload} size="s" slot="start" />
-                            Import zone file
+                <Layout.Stack direction="row" gap="s" alignItems="center" wrap="wrap">
+                    <div style:order={$isSmallViewport ? 2 : undefined}>
+                        <Button
+                            secondary
+                            icon={$isSmallViewport}
+                            ariaLabel={$isSmallViewport ? 'Import zone file' : undefined}
+                            on:click={() => (showImportModal = true)}>
+                            {#if $isSmallViewport}
+                                <Icon size="m" icon={IconUpload} />
+                            {:else}
+                                <Icon icon={IconUpload} size="s" slot="start" />
+                                Import zone file
+                            {/if}
                         </Button>
+                    </div>
+
+                    <div style:order={$isSmallViewport ? 3 : undefined}>
                         <Tooltip>
                             <PinkButton.Button variant="secondary" icon on:click={downloadRecords}>
-                                <Icon icon={IconDownload} size="s" />
+                                <Icon icon={IconDownload} size={$isSmallViewport ? 'm' : 's'} />
                             </PinkButton.Button>
                             <svelte:fragment slot="tooltip">Export as .txt</svelte:fragment>
                         </Tooltip>
-                    </Layout.Stack>
-                    <Layout.Stack direction="row" gap="s" inline>
-                        <ViewSelector ui="new" view={View.Table} {columns} hideView />
+                    </div>
+
+                    {#if !$isSmallViewport}
+                        <div style="flex: 1"></div>
+                    {/if}
+
+                    <div style:order={$isSmallViewport ? 4 : undefined}>
+                        {#if $isSmallViewport}
+                            <Button
+                                secondary
+                                icon
+                                ariaLabel="Display settings"
+                                on:click={() => (showDisplaySettingsModal = true)}>
+                                <Icon icon={IconAdjustments} />
+                            </Button>
+                        {:else}
+                            <ViewSelector ui="new" view={View.Table} {columns} hideView />
+                        {/if}
+                    </div>
+
+                    <div
+                        style:order={$isSmallViewport ? 1 : undefined}
+                        style:flex={$isSmallViewport ? 1 : undefined}>
                         <Popover let:toggle padding="none">
-                            <Button secondary on:click={toggle}>Add preset</Button>
+                            <Button secondary fullWidth={$isSmallViewport} on:click={toggle}
+                                >Add preset</Button>
                             <svelte:fragment slot="tooltip" let:toggle>
                                 <ActionMenu.Root>
                                     {#each presets as preset}
@@ -100,11 +140,16 @@
                                 </ActionMenu.Root>
                             </svelte:fragment>
                         </Popover>
-                        <Button size="s" on:click={() => (showCreate = true)}>
+                    </div>
+
+                    <div
+                        style:order={$isSmallViewport ? 5 : undefined}
+                        style:width={$isSmallViewport ? '100%' : undefined}>
+                        <Button fullWidth={$isSmallViewport} on:click={() => (showCreate = true)}>
                             <Icon size="s" icon={IconPlus} slot="start" />
                             Create record
                         </Button>
-                    </Layout.Stack>
+                    </div>
                 </Layout.Stack>
                 <Table {data} />
             {:else}
@@ -153,3 +198,11 @@
 {#if showRetry}
     <RetryDomainModal bind:show={showRetry} selectedDomain={data.domain} />
 {/if}
+
+{#if showDisplaySettingsModal}
+    <DisplaySettingsModal
+        bind:show={showDisplaySettingsModal}
+        {columns}
+        hideView
+        view={View.Table} />
+{/if}

src/routes/(console)/organization-[organization]/domains/domain-[domain]/table.svelte

@@ -50,7 +50,10 @@
 </script>
 
 <Layout.Stack>
-    <Table.Root columns={[...$columns, { id: 'actions', width: 40 }]} let:root>
+    <Table.Root
+        class="responsive-table"
+        columns={[...$columns, { id: 'actions', width: 40 }]}
+        let:root>
         <svelte:fragment slot="header" let:root>
             {#each $columns as { id, title } (id)}
                 <Table.Header.Cell column={id} {root}>

src/routes/(console)/project-[region]-[project]/databases/create/+page.svelte

@@ -10,7 +10,7 @@
     import { IconPencil } from '@appwrite.io/pink-icons-svelte';
     import { addNotification } from '$lib/stores/notifications';
     import { ID, type Models } from '@appwrite.io/console';
-    import { type DatabaseType, useDatabasesSdk } from '$database/(entity)';
+    import { type DatabaseType, useDatabaseSdk } from '$database/(entity)';
     import { isCloud } from '$lib/system';
     import { upgradeURL } from '$lib/stores/billing';
     import { currentPlan } from '$lib/stores/organization';
@@ -123,9 +123,9 @@
             databaseId ??= ID.unique();
 
             let database: Models.Database;
-            const databasesSdk = useDatabasesSdk(page.params.region, page.params.project);
+            const databaseSdk = useDatabaseSdk(page.params.region, page.params.project);
 
-            database = await databasesSdk.create(type, {
+            database = await databaseSdk.create(type, {
                 databaseId,
                 name: databaseName
             });

src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/helpers/init.ts

@@ -17,7 +17,7 @@ export type Terminologies = {
     analytics: AnalyticsResult;
     terminology: TerminologyResult;
     dependencies: DependenciesResult;
-    databasesSdk: DatabaseSdkResult;
+    databaseSdk: DatabaseSdkResult;
 };
 
 export function getTerminologies(): Terminologies {

src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/field/editPermissions.svelte

@@ -26,7 +26,7 @@
 
     let showPermissionAlert = $state(true);
 
-    const { analytics, dependencies, terminology, databasesSdk } = getTerminologies();
+    const { analytics, dependencies, terminology, databaseSdk } = getTerminologies();
     const entityTerm = terminology.entity.lower.singular;
     const recordTerm = terminology.record.lower.singular;
 
@@ -41,7 +41,7 @@
         try {
             const { $databaseId: databaseId, $id: recordId, entityId } = toSupportiveRecord(record);
 
-            await databasesSdk.updateRecordPermissions({
+            await databaseSdk.updateRecordPermissions({
                 databaseId,
                 entityId,
                 recordId,

src/routes/(console)/project-[region]-[project]/databases/database-[database]/+layout.svelte

@@ -28,7 +28,7 @@
     const project = page.params.project;
     const databaseId = page.params.database;
 
-    const { databasesSdk, terminology } = getTerminologies();
+    const { databaseSdk, terminology } = getTerminologies();
 
     $: $registerCommands([
         {
@@ -144,7 +144,7 @@
     $noWidthTransition = true;
 
     async function createEntity(entityId: string, name: string) {
-        const entity = await databasesSdk.createEntity({
+        const entity = await databaseSdk.createEntity({
             databaseId,
             entityId,
             name

src/routes/(console)/project-[region]-[project]/databases/database-[database]/+page.svelte

@@ -17,7 +17,7 @@
 
     const { data }: PageProps = $props();
 
-    const { databasesSdk, terminology } = getTerminologies();
+    const { databaseSdk, terminology } = getTerminologies();
     const entityTitle = terminology.entity.title;
     const entityLower = terminology.entity.lower;
 
@@ -76,7 +76,7 @@
         {#if data.view === 'grid'}
             <Grid {data} {terminology} bind:showCreate={$showCreateEntity} />
         {:else}
-            <Table {terminology} {databasesSdk} entities={data.entities} />
+            <Table {terminology} {databaseSdk} entities={data.entities} />
         {/if}
 
         <PaginationWithLimit

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/+layout.ts

@@ -1,15 +1,15 @@
 import Header from './header.svelte';
 import type { LayoutLoad } from './$types';
 import { Dependencies } from '$lib/constants';
-import { Breadcrumbs, useDatabasesSdk } from '$database/(entity)';
+import { Breadcrumbs, useDatabaseSdk } from '$database/(entity)';
 
 export const load: LayoutLoad = async ({ params, depends, parent }) => {
     const { database } = await parent();
     depends(Dependencies.COLLECTION);
 
-    const databasesSdk = useDatabasesSdk(params.region, params.project, database.type);
+    const databaseSdk = useDatabaseSdk(params.region, params.project, database.type);
 
-    const collection = await databasesSdk.getEntity({
+    const collection = await databaseSdk.getEntity({
         databaseId: params.database,
         entityId: params.collection
     });

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte

@@ -62,8 +62,7 @@
 <Form onSubmit={updateDisplayName}>
     <CardGrid>
         <svelte:fragment slot="title">Display name</svelte:fragment>
-        Add up to 5 document keys to display in the spreadsheet and identify documents in the Appwrite
-        console. These keys will be shown as custom columns in your spreadsheet view.
+        Add up to 5 document fields to display as columns in the collection view.
 
         <svelte:fragment slot="aside">
             <Layout.Stack gap="s">
@@ -75,7 +74,7 @@
                         bind:tags={names} />
                 {/key}
                 <Input.Helper state="default">
-                    Maximum 5 document keys allowed. System keys are automatically filtered out.
+                    ID, createdAt, and updatedAt are always included and cannot be modified
                 </Input.Helper>
             </Layout.Stack>
         </svelte:fragment>

src/routes/(console)/project-[region]-[project]/databases/database-[database]/delete.svelte

@@ -24,7 +24,7 @@
     let entityItems = $state([]);
     let entities: EntityList | null = $state(null);
 
-    const { databasesSdk } = getTerminologies();
+    const { databaseSdk } = getTerminologies();
     const database = $derived(page.data.database);
 
     function buildQueries(): string[] {
@@ -48,7 +48,7 @@
 
         try {
             const queries = buildQueries();
-            entities = await databasesSdk.listEntities({
+            entities = await databaseSdk.listEntities({
                 databaseId: page.params.database,
                 queries
             });
@@ -71,7 +71,7 @@
 
     const handleDelete = async () => {
         try {
-            await databasesSdk.delete({
+            await databaseSdk.delete({
                 databaseId: page.params.database
             });
 

src/routes/(console)/project-[region]-[project]/databases/database-[database]/settings/+page.svelte

@@ -27,14 +27,14 @@
     let errorType: 'error' | 'warning' | 'success' = $state('error');
     let showError: false | 'name' | 'email' | 'password' = $state(false);
 
-    const { databasesSdk, terminology } = getTerminologies();
+    const { databaseSdk, terminology } = getTerminologies();
 
     onMount(async () => {
         databaseName ??= database.name;
     });
 
     async function loadEntityCount() {
-        const { total } = await databasesSdk.listEntities({
+        const { total } = await databaseSdk.listEntities({
             databaseId: page.params.database,
             queries: [Query.limit(1)]
         });

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/editRelated.svelte

@@ -42,7 +42,7 @@
     let workData = $state<Map<string, Writable<Models.Row>>>(new Map());
     let columnFormWrapper = $state<HTMLElement | null>(null);
 
-    const { databasesSdk } = getTerminologies();
+    const { databaseSdk } = getTerminologies();
 
     onMount(() => {
         if (rows && tableId) {
@@ -74,7 +74,7 @@
                     });
 
                 // cannot use page.data.entities!
-                relatedTable = await databasesSdk.getEntity({
+                relatedTable = await databaseSdk.getEntity({
                     databaseId,
                     entityId: tableId
                 });
@@ -93,7 +93,7 @@
                 });
 
                 if (missingTableIds.length > 0) {
-                    const tablesResponse = await databasesSdk.listEntities({
+                    const tablesResponse = await databaseSdk.listEntities({
                         databaseId,
                         queries: [
                             Query.equal('$id', missingTableIds),

src/routes/(console)/project-[region]-[project]/databases/database-[database]/table.svelte

@@ -23,17 +23,17 @@
     const {
         entities,
         terminology,
-        databasesSdk
+        databaseSdk
     }: {
         entities: EntityList;
         terminology: TerminologyResult;
-        databasesSdk: DatabaseSdkResult;
+        databaseSdk: DatabaseSdkResult;
     } = $props();
 
     const entitySingular = $derived(terminology.entity.lower.singular);
     async function onDelete(batchDelete: DeleteOperation): Promise<DeleteOperationState> {
         const result = await batchDelete((entityId) =>
-            databasesSdk.deleteEntity({
+            databaseSdk.deleteEntity({
                 databaseId: page.params.database,
                 entityId
             })

src/routes/(console)/project-[region]-[project]/functions/create-function/template-[template]/permissions.svelte

@@ -17,7 +17,7 @@
         });
 </script>
 
-<Fieldset legend="Permissions">
+<Fieldset legend="Security">
     <Layout.Stack gap="l">
         <Selector.Switch
             id="execute"

src/routes/+layout.svelte

@@ -17,6 +17,7 @@
     import { ThemeDark, ThemeLight, ThemeDarkCloud, ThemeLightCloud } from '../themes';
     import { isSmallViewport, updateViewport } from '$lib/stores/viewport';
     import { feedback } from '$lib/stores/feedback';
+    import '$lib/profiles/css/base.css';
 
     function resolveTheme(theme: AppStore['themeInUse']) {
         switch (theme) {