address comments, fix nav bug.

ItzNotABug · ItzNotABug · commit db8420dc0ab3 · 2025-10-09T17:35:39.000+05:30
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/header.svelte
@@ -8,6 +8,9 @@
     import { type Entity, useTerminology } from '$database/(entity)';
     import { resolveRoute, withPath } from '$lib/stores/navigation';
 
+    import { preferences } from '$lib/stores/preferences';
+    import { expandTabs } from '$database/table-[table]/store';
+
     interface EntityTab {
         href: string;
         title: string;
@@ -18,13 +21,11 @@
     let {
         entity,
         parentHref,
-        tabs,
-        expanded = $bindable(true)
+        tabs
     }: {
         entity: Entity;
         parentHref: string;
         tabs: EntityTab[];
-        expanded?: boolean;
     } = $props();
 
     /**
@@ -45,25 +46,38 @@
             `${entityType}-${entityId}`
         );
     });
+
+    const nonSheetPages = $derived.by(() => {
+        const endings = ['table-[table]', 'table-[table]/columns', 'table-[table]/indexes'];
+        const isSpreadsheetPage = endings.some((end) => page.route.id?.endsWith(end));
+        return !isSpreadsheetPage;
+    });
+
+    $effect(() => {
+        if (nonSheetPages) expandTabs.set(true);
+        else {
+            expandTabs.set(preferences.getKey('tableHeaderExpanded', true));
+        }
+    });
 </script>
 
-{#if entity}
-    <Cover animate {expanded} collapsed={!expanded} blocksize={expanded ? '152px' : '90px'}>
+<div class:nonSheetPages>
+    <Cover animate expanded collapsed={!$expandTabs} blocksize={$expandTabs ? '152px' : '90px'}>
         <svelte:fragment slot="header">
             <Layout.Stack direction="row" alignContent="center" alignItems="center" inline>
-                <AnimatedTitle href={parentHref} collapsed={!expanded}>
-                    {entity.name}
+                <AnimatedTitle href={parentHref} collapsed={!$expandTabs}>
+                    {entity?.name}
                 </AnimatedTitle>
 
-                {#key entity.$id}
-                    <Id value={entity.$id} tooltipPlacement={expanded ? undefined : 'right'}>
-                        {entity.$id}
+                {#key entity?.$id}
+                    <Id value={entity?.$id} tooltipPlacement={$expandTabs ? undefined : 'right'}>
+                        {entity?.$id}
                     </Id>
                 {/key}
             </Layout.Stack>
         </svelte:fragment>
 
-        <div class="tabs-container" class:collapsed={!expanded}>
+        <div class="tabs-container" class:collapsed={!$expandTabs}>
             <Tabs>
                 {#each tabs as tab}
                     <Tab
@@ -76,9 +90,19 @@
             </Tabs>
         </div>
     </Cover>
-{/if}
+</div>
 
 <style lang="scss">
+    .nonSheetPages :global(.cover-container) {
+        @media (min-width: 1440px) {
+            padding-inline: 7px !important;
+        }
+
+        @media (min-width: 1728px) {
+            padding-inline: 10.25rem !important;
+        }
+    }
+
     .tabs-container {
         opacity: 1;
         transition: opacity 300ms cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/indexes/create.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/indexes/create.svelte
@@ -24,6 +24,7 @@
     import { resolveRoute, withPath } from '$lib/stores/navigation';
     import { IndexType } from '@appwrite.io/console';
     import { columnOptions as baseColumnOptions } from '$database/table-[table]/columns/store';
+    import { IndexOrder } from '$database/(suggestions)';
 
     let {
         entity,
@@ -33,12 +34,12 @@
     }: {
         entity: Entity;
         showCreateIndex: boolean;
-        externalFieldKey?: string;
+        externalFieldKey?: string | null;
         onCreateIndex: (index: CreateIndexesCallbackType) => Promise<void>;
     } = $props();
 
     let key = $state('');
-
+    let initializedForOpen = $state(false);
     let selectedType = $state<IndexType>(IndexType.Key);
 
     const { dependencies, terminology } = getTerminologies();
@@ -60,7 +61,11 @@
             }))
     );
 
-    let fieldList = $state([{ value: '', order: '', length: null }]);
+    let fieldList: Array<{
+        value: string;
+        order: IndexOrder | null;
+        length: number | null;
+    }> = $state([{ value: '', order: null, length: null }]);
 
     const types = [
         { value: IndexType.Key, label: 'Key' },
@@ -105,11 +110,14 @@
     function initialize() {
         const field = entity.fields.filter((field) => externalFieldKey === field.key);
         const isSpatial = field.length && isSpatialType(field[0]);
-        const order = isSpatial ? null : 'ASC';
+        const order = isSpatial ? null : IndexOrder.ASC;
+
         selectedType = isSpatial ? IndexType.Spatial : IndexType.Key;
+
         fieldList = externalFieldKey
             ? [{ value: externalFieldKey, order, length: null }]
             : [{ value: '', order, length: null }];
+
         key = `index_${entity.indexes.length + 1}`;
     }
 
@@ -130,20 +138,21 @@
         return withPath(base, `${type}-${entity.$id}`, 'indexes');
     });
 
-    let initializedForOpen = $state(false);
     $effect(() => {
         if (showCreateIndex && !initializedForOpen) {
             initialize();
             key = generateIndexKey();
             initializedForOpen = true;
         }
+
         if (!showCreateIndex && initializedForOpen) {
             initializedForOpen = false;
         }
     });
 
     export async function create() {
         const fieldType = terminology.field.lower.singular;
+
         if (!key || !selectedType || (selectedType !== IndexType.Spatial && addFieldDisabled)) {
             addNotification({
                 type: 'error',
@@ -153,7 +162,11 @@
         }
 
         try {
-            const orders = fieldList.map((a) => a.order).filter((order) => order !== null);
+            const orders = fieldList
+                .map((field) => field.order)
+                .filter((order: IndexOrder) => order !== null)
+                .map((order) => String(order));
+
             await onCreateIndex({
                 key,
                 type: selectedType,
@@ -194,8 +207,8 @@
     function addField() {
         if (addFieldDisabled) return;
 
-        // We assign instead of pushing to trigger Svelte's reactivity
-        fieldList = [...fieldList, { value: '', order: '', length: null }];
+        // we assign instead of pushing to trigger Svelte's reactivity
+        fieldList = [...fieldList, { value: '', order: null, length: null }];
     }
 </script>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/indexes/view.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/indexes/view.svelte
@@ -53,7 +53,7 @@
     } = $props();
 
     let showCreateIndex = $state(false);
-    let selectedIndex: Index = $state(null);
+    let selectedIndex: Index | null = $state(null);
 
     let createIndex: CreateIndex;
     let selectedIndexes = $state([]);
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/usage/view.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(entity)/views/usage/view.svelte
@@ -4,15 +4,14 @@
     import type { Metric } from '$lib/sdk/usage';
     import Container from '$lib/layout/container.svelte';
     import { resolveRoute, withPath } from '$lib/stores/navigation';
-    import { type DatabaseType, getTerminologies } from '$database/(entity)';
+    import { getTerminologies } from '$database/(entity)';
 
     let {
         total,
         count
     }: {
         total: number;
         count: Metric[];
-        type?: DatabaseType;
     } = $props();
 
     const { terminology } = getTerminologies();
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/header.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
     import { page } from '$app/state';
-    import { expandTabs } from './store';
     import { canWriteTables } from '$lib/stores/roles';
-    import { preferences } from '$lib/stores/preferences';
     import { resolveRoute } from '$lib/stores/navigation';
 
     import { type Entity, Header } from '$database/(entity)';
@@ -21,12 +19,6 @@
         )
     );
 
-    const nonSheetPages = $derived.by(() => {
-        const endings = ['table-[table]', 'table-[table]/columns', 'table-[table]/indexes'];
-        const isSpreadsheetPage = endings.some((end) => page.route.id?.endsWith(end));
-        return !isSpreadsheetPage;
-    });
-
     const table = $derived(page.data.table) as Entity;
 
     const tabs = $derived(
@@ -67,27 +59,6 @@
             }
         ].filter((tab) => !tab.disabled)
     );
-
-    $effect(() => {
-        if (nonSheetPages) expandTabs.set(true);
-        else {
-            expandTabs.set(preferences.getKey('tableHeaderExpanded', true));
-        }
-    });
 </script>
 
-<div class:nonSheetPages>
-    <Header {tabs} entity={table} parentHref={link} bind:expanded={$expandTabs} />
-</div>
-
-<style lang="scss">
-    .nonSheetPages :global(.cover-container) {
-        @media (min-width: 1440px) {
-            padding-inline: 7px !important;
-        }
-
-        @media (min-width: 1728px) {
-            padding-inline: 10.25rem !important;
-        }
-    }
-</style>
+<Header {tabs} entity={table} parentHref={link} />
