move: attribute creation on top level.

src/lib/helpers/sidebar.ts

@@ -8,7 +8,7 @@ const userPreferences = () => get(user)?.prefs;
 // for spreadsheet, closed with icons
 const isInDatabasesRoute = (page: Page) => {
     return page.route.id?.includes('databases/database-[database]');
-}
+};
 
 export function updateSidebarState(page: Page, state: 'closed' | 'open' | 'icons') {
     if (isInDatabasesRoute(page)) return;

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

@@ -202,10 +202,10 @@
 
 <slot />
 
-{#if $createAttributeArgs.showCreate}
-    <CreateAttribute {...$createAttributeArgs} />
-{/if}
+<!--{#if $createAttributeArgs.showCreate}-->
+<!--    <CreateAttribute {...$createAttributeArgs} />-->
+<!--{/if}-->
 
-{#if $showCreateIndex}
-    <CreateIndex bind:showCreateIndex={$showCreateIndex} />
-{/if}
+<!--{#if $showCreateIndex}-->
+<!--    <CreateIndex bind:showCreateIndex={$showCreateIndex} />-->
+<!--{/if}-->

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

@@ -9,7 +9,13 @@
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
     import { Icon, Layout, Divider } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
-    import { collection, columns, isCsvImportInProgress, showRecordsCreateSheet } from './store';
+    import {
+        collection,
+        columns,
+        isCsvImportInProgress,
+        showRecordsCreateSheet,
+        showCreateAttributeSheet
+    } from './store';
     import SpreadSheet from './spreadsheet.svelte';
     import { writable } from 'svelte/store';
     import FilePicker from '$lib/components/filePicker.svelte';
@@ -18,17 +24,20 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Click, Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { isSmallViewport } from '$lib/stores/viewport';
-    import { IconPlus, IconSearch } from '@appwrite.io/pink-icons-svelte';
+    import { IconPlus } from '@appwrite.io/pink-icons-svelte';
     import type { Models } from '@appwrite.io/console';
     import EmptySheet from './layout/emptySheet.svelte';
     import CreateRecord from './createRecord.svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
+    import SideSheet from './layout/sidesheet.svelte';
+    import CreateAttribute from './createAttribute.svelte';
+    import { type Option } from './attributes/store';
 
     export let data: PageData;
 
     let showImportCSV = false;
     const filterColumns = writable<Column[]>([]);
+    let createAttribute: CreateAttribute;
+    let selectedOption: Option['name'] = 'String';
 
     $: selected = preferences.getCustomCollectionColumns(page.params.collection);
 
@@ -185,9 +194,7 @@
                     primary: {
                         text: 'Create column',
                         onClick: async () => {
-                            await goto(
-                                `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/attributes`
-                            );
+                            $showCreateAttributeSheet = true;
                         }
                     }
                 }} />
@@ -212,3 +219,17 @@
     collection={$collection}
     bind:showSheet={$showRecordsCreateSheet.show}
     bind:existingData={$showRecordsCreateSheet.document} />
+
+<SideSheet
+    title="Insert column"
+    bind:show={$showCreateAttributeSheet}
+    submit={{
+        text: 'Insert',
+        onClick: async () => await createAttribute?.submit(),
+        disabled: !selectedOption
+    }}>
+    <CreateAttribute
+        showCreate={$showCreateAttributeSheet}
+        bind:selectedOption
+        bind:this={createAttribute} />
+</SideSheet>

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

@@ -14,14 +14,13 @@
         Tooltip,
         Typography
     } from '@appwrite.io/pink-svelte';
-    import CreateAttribute from '../createAttribute.svelte';
     import { isRelationship, isString } from '../document-[document]/attributes/store';
     import FailedModal from '../failedModal.svelte';
     import CreateIndex from '../indexes/createIndex.svelte';
     import { attributes, type Attributes, indexes, isCsvImportInProgress } from '../store';
     import Delete from './deleteAttribute.svelte';
     import EditAttribute from './edit.svelte';
-    import { attributeOptions, type Option } from './store';
+    import { attributeOptions } from './store';
     import {
         IconArrowSmRight,
         IconDotsHorizontal,
@@ -41,11 +40,10 @@
     import SideSheet from '../layout/sidesheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
     import EmptySheet from '../layout/emptySheet.svelte';
+    import { showCreateAttributeSheet } from '../store';
 
     let showDropdown = [];
-    let selectedOption: Option['name'] = 'String';
     let selectedAttribute: Attributes = null;
-    let showCreate = false;
     let showDelete = false;
     let showCreateIndex = false;
     let showFailed = false;
@@ -54,7 +52,6 @@
     let showEdit = false;
     let createIndex: CreateIndex;
     let editAttribute: EditAttribute;
-    let createAttribute: CreateAttribute;
 
     const attributeFormatIcon = {
         ip: IconLocationMarker,
@@ -89,7 +86,7 @@
                 size="s"
                 secondary
                 disabled={$isCsvImportInProgress}
-                on:click={() => (showCreate = true)}
+                on:click={() => ($showCreateAttributeSheet = true)}
                 event="create_attribute">
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Create column
@@ -273,23 +270,12 @@
             showActions={$canWriteCollections}
             actions={{
                 primary: {
-                    onClick: () => (showCreate = true)
+                    onClick: () => ($showCreateAttributeSheet = true)
                 }
             }} />
     {/if}
 </div>
 
-<SideSheet
-    title="Insert column"
-    bind:show={showCreate}
-    submit={{
-        text: 'Insert',
-        onClick: async () => await createAttribute.submit(),
-        disabled: !selectedOption
-    }}>
-    <CreateAttribute {showCreate} bind:selectedOption bind:this={createAttribute} />
-</SideSheet>
-
 {#if showDelete}
     <Delete bind:showDelete {selectedAttribute} />
 {/if}

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

@@ -28,12 +28,11 @@
     import { Click, trackEvent } from '$lib/actions/analytics';
     import EmptySheet from '../layout/emptySheet.svelte';
     import SpreadsheetContainer from '../layout/spreadsheet.svelte';
-    import { goto } from '$app/navigation';
-    import { base } from '$app/paths';
     import { page } from '$app/state';
     import SideSheet from '../layout/sidesheet.svelte';
     import { flags } from '$lib/flags';
     import type { PageData } from './$types';
+    import { showCreateAttributeSheet } from '../store';
 
     let {
         data
@@ -201,9 +200,7 @@
                 primary: {
                     text: 'Create columns',
                     onClick: async () => {
-                        await goto(
-                            `${base}/project-${page.params.region}-${page.params.project}/databases/database-${page.params.database}/collection-${page.params.collection}/attributes`
-                        );
+                        $showCreateAttributeSheet = true;
                     }
                 }
             }} />

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

@@ -19,7 +19,7 @@
             | {
                   text: string;
                   disabled?: boolean;
-                  onClick: () => void | Promise<void>;
+                  onClick?: () => void | Promise<void>;
               }
             | undefined;
         children?: Snippet;

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

@@ -67,3 +67,5 @@ export const sortState = writable({
     column: null as string,
     direction: 'default' as SortDirection
 });
+
+export const showCreateAttributeSheet = writable(false);