address comments, fix nav bug.

2026-06-06 19:27:48 +00:00 · 2025-10-09 17:35:39 +05:30
parent 2ce3811a44
commit db8420dc0a
5 changed files with 60 additions and 53 deletions
@@ -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);
@@ -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,13 +138,13 @@
        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;
        }
@@ -144,6 +152,7 @@

    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>

@@ -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([]);
@@ -4,7 +4,7 @@
    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,
@@ -12,7 +12,6 @@
    }: {
        total: number;
        count: Metric[];
-        type?: DatabaseType;
    } = $props();

    const { terminology } = getTerminologies();
@@ -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} />