remove: duplicate components.

2026-06-06 19:27:48 +00:00 · 2025-09-29 20:02:28 +05:30
parent bc16dea7b0
commit cd5c781e5f
12 changed files with 22 additions and 321 deletions
@@ -25,7 +25,7 @@
        IconPlus,
        IconTrash
    } from '@appwrite.io/pink-icons-svelte';
-    import { type ComponentProps, onDestroy, type Snippet } from 'svelte';
+    import { type ComponentProps, type Snippet } from 'svelte';
    import { Click, trackEvent } from '$lib/actions/analytics';
    import { isSmallViewport } from '$lib/stores/viewport';
    import { type Entity, EntityContainer } from '$database/(entity)';
@@ -36,18 +36,16 @@

    let {
        entity,
-        showCreateColumnSheet = $bindable(),
        onCreateIndex,
        onDeleteIndexes,
        emptyIndexesSheetView,
        emptyColumnsSheetView
    }: {
        entity: Entity;
-        showCreateColumnSheet: boolean;
        onCreateIndex: (index: CreateIndexesCallbackType) => Promise<void>;
        onDeleteIndexes: (indexKeys: string[]) => Promise<void>;
        emptyIndexesSheetView: Snippet<[() => void]>;
-        emptyColumnsSheetView?: Snippet<[() => void]>;
+        emptyColumnsSheetView?: Snippet;
    } = $props();

    let showCreateIndex = $state(false);
@@ -83,8 +81,6 @@
        }
    }

-    onDestroy(() => (showCreateColumnSheet = false));
-
    const emptyCellsLimit = $derived($isSmallViewport ? 14 : 17);
    const emptyCellsCount = $derived(
        entity.indexes.length >= emptyCellsLimit ? 0 : emptyCellsLimit - entity.indexes.length
@@ -237,7 +233,7 @@
                    {@render emptyIndexesSheetView(() => (showCreateIndex = true))}
                {/if}
            {:else}
-                {@render emptyColumnsSheetView(() => (showCreateColumnSheet = true))}
+                {@render emptyColumnsSheetView()}
            {/if}

            {#if selectedIndexes.length > 0}
@@ -14,7 +14,7 @@
    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
    import type { Column } from '$lib/helpers/types';
    import { expandTabs } from '../table-[table]/store';
-    import SpreadsheetContainer from '../table-[table]/layout/spreadsheet.svelte';
+    import { SpreadsheetContainer } from '$database/(entity)/views/(layouts)';
    import { onDestroy, onMount, tick } from 'svelte';
    import { sdk } from '$lib/stores/sdk';
    import { page } from '$app/state';
@@ -2,7 +2,7 @@
    import type { Snippet } from 'svelte';
    import { Popover } from '@appwrite.io/pink-svelte';
    import { isSmallViewport } from '$lib/stores/viewport';
-    import SideSheet from '../table-[table]/layout/sidesheet.svelte';
+    import { SideSheet } from '$database/(entity)/views/(layouts)';

    let {
        children,
@@ -46,7 +46,7 @@
    import { base } from '$app/paths';
    import { canWriteTables } from '$lib/stores/roles';
    import { IconEye, IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
-    import SideSheet from './layout/sidesheet.svelte';
+    import { SideSheet } from '$database/(entity)/views/(layouts)';
    import EditRow from './rows/edit.svelte';
    import EditRelatedRow from './rows/editRelated.svelte';
    import EditColumn from './columns/edit.svelte';
@@ -45,8 +45,7 @@
    import { Click, trackEvent } from '$lib/actions/analytics';
    import CsvDisabled from '../csvDisabled.svelte';
    import { isSmallViewport } from '$lib/stores/viewport';
-    import SideSheet from '../layout/sidesheet.svelte';
-    import SpreadsheetContainer from '../layout/spreadsheet.svelte';
+    import { SideSheet, SpreadsheetContainer } from '$database/(entity)/views/(layouts)';
    import { showCreateColumnSheet } from '../store';
    import { type Models } from '@appwrite.io/console';
    import { preferences } from '$lib/stores/preferences';
@@ -5,6 +5,7 @@
    import EmptySheet from '../layout/emptySheet.svelte';
    import { showCreateColumnSheet } from '$database/table-[table]/store';
    import { type CreateIndexesCallbackType, Indexes } from '$database/(entity)';
+    import { onDestroy } from 'svelte';

    let { data }: PageProps = $props();

@@ -36,13 +37,11 @@
            )
        );
    }
+
+    onDestroy(() => ($showCreateColumnSheet.show = false));
 </script>

-<Indexes
-    {onCreateIndex}
-    {onDeleteIndexes}
-    entity={data.table}
-    showCreateColumnSheet={$showCreateColumnSheet.show}>
+<Indexes {onCreateIndex} {onDeleteIndexes} entity={data.table}>
    {#snippet emptyIndexesSheetView(toggle)}
        <EmptySheet
            mode="indexes"
@@ -54,14 +53,14 @@
            }} />
    {/snippet}

-    {#snippet emptyColumnsSheetView(toggle)}
+    {#snippet emptyColumnsSheetView()}
        <EmptySheet
            mode="indexes"
            title="You have no columns yet"
            actions={{
                primary: {
                    text: 'Create columns',
-                    onClick: toggle
+                    onClick: () => ($showCreateColumnSheet.show = true)
                }
            }} />
    {/snippet}
@@ -18,7 +18,7 @@
        spreadsheetLoading,
        expandTabs
    } from '../store';
-    import SpreadsheetContainer from './spreadsheet.svelte';
+    import { SpreadsheetContainer } from '$database/(entity)/views/(layouts)';
    import { onDestroy, onMount } from 'svelte';
    import { debounce } from '$lib/helpers/debounce';
    import { columnOptions } from '../columns/store';
@@ -1,174 +0,0 @@
-<script lang="ts">
-    import type { Snippet } from 'svelte';
-    import { Copy } from '$lib/components';
-    import { writable } from 'svelte/store';
-    import { Button, Form } from '$lib/elements/forms';
-    import { isTabletViewport } from '$lib/stores/viewport';
-    import { Badge, Divider, Layout, Sheet, Tag, Typography } from '@appwrite.io/pink-svelte';
-
-    let {
-        show = $bindable(false),
-        title,
-        closeOnBlur = false,
-        submit,
-        children = null,
-        footer = null,
-        titleBadge = null,
-        topAction = null
-    }: {
-        show: boolean;
-        title: string;
-        titleBadge?: string;
-        closeOnBlur?: boolean;
-        topAction?:
-            | {
-                  text: string;
-                  value: string;
-                  show?: boolean;
-                  mode?: 'copy-tag' | 'plaintext';
-                  onClick?: () => string | Promise<string>;
-              }
-            | undefined;
-        submit?:
-            | {
-                  text: string;
-                  disabled?: boolean;
-                  onClick?: () => boolean | void | Promise<boolean | void>;
-              }
-            | undefined;
-        children?: Snippet;
-        footer?: Snippet | null;
-    } = $props();
-
-    let form: Form;
-    let submitting = $state(writable(false));
-
-    let copyText = $state(undefined);
-</script>
-
-<div class="sheet-container" data-side-sheet-visible={show}>
-    <Sheet bind:open={show} {closeOnBlur}>
-        <div slot="header" style:width="100%">
-            <Layout.Stack direction="row" justifyContent="space-between" alignItems="center">
-                <Layout.Stack direction="row" gap="m" alignItems="center">
-                    <Typography.Text variant="m-400">{title}</Typography.Text>
-                    {#if titleBadge}
-                        <Badge variant="secondary" content={titleBadge} size="s" />
-                    {/if}
-
-                    {#if topAction && topAction.text && topAction.show}
-                        {#if topAction.mode === 'copy-tag'}
-                            <Copy value={topAction.value} {copyText}>
-                                <Tag size="xs" variant="code">
-                                    {topAction.text}
-                                </Tag>
-                            </Copy>
-                        {:else}
-                            <Button
-                                extraCompact
-                                text
-                                size="xs"
-                                on:click={topAction.onClick ?? undefined}>
-                                {topAction.text}
-                            </Button>
-                        {/if}
-                    {/if}
-                </Layout.Stack>
-            </Layout.Stack>
-        </div>
-
-        <Layout.Stack direction="column" justifyContent="space-evenly">
-            <Form
-                bind:this={form}
-                bind:isSubmitting={submitting}
-                onSubmit={async () => {
-                    try {
-                        const keepOpen = await submit?.onClick?.();
-                        if (!keepOpen) {
-                            show = false;
-                        }
-                    } catch (error) {
-                        // error occurred, dont close the sidebar
-                    }
-                }}>
-                <Layout.Stack gap="xl" class="sheet-content">
-                    {@render children?.()}
-                </Layout.Stack>
-            </Form>
-
-            {#if submit}
-                <div class="sheet-footer">
-                    <Layout.Stack gap="l">
-                        <Divider />
-
-                        <div class="sheet-footer-actions">
-                            <Layout.Stack
-                                gap="m"
-                                direction="row"
-                                justifyContent="flex-end"
-                                alignItems="center">
-                                {#if footer}
-                                    {@render footer?.()}
-                                {/if}
-                                <Button size="s" secondary on:click={() => (show = false)}
-                                    >Cancel</Button>
-                                <Button
-                                    size="s"
-                                    submit
-                                    disabled={submit.disabled || $submitting}
-                                    forceShowLoader={$submitting && $isTabletViewport}
-                                    submissionLoader={$submitting && $isTabletViewport}
-                                    on:click={() => form?.triggerSubmit()}>
-                                    {submit.text}
-                                </Button>
-                            </Layout.Stack>
-                        </div>
-                    </Layout.Stack>
-                </div>
-            {/if}
-        </Layout.Stack>
-    </Sheet>
-</div>
-
-<style lang="scss">
-    .sheet-container {
-        top: 0;
-        position: absolute;
-
-        @media (max-width: 768px) {
-            & :global(aside header) {
-                margin-top: 6rem;
-            }
-        }
-
-        & :global(.sheet-content) {
-            // overflow-y: auto;
-            padding-bottom: 5rem;
-
-            @media (max-width: 768px) {
-                /*
-                 * different mobile browsers handle bottom spaces differently,
-                 * therefore, having extra bottom space doesn't hurt anyone imo!
-                 */
-                padding-bottom: 15rem;
-            }
-        }
-    }
-
-    .sheet-footer {
-        left: 0;
-        right: 0;
-        bottom: 0;
-        position: absolute;
-        background: var(--bgcolor-neutral-primary);
-
-        @media (max-width: 768px) {
-            position: fixed;
-        }
-
-        & .sheet-footer-actions {
-            padding-inline: var(--space-8);
-            padding-block-end: var(--space-6);
-        }
-    }
-</style>
@@ -1,123 +0,0 @@
-<script lang="ts">
-    import { debounce } from '$lib/helpers/debounce';
-    import { scrollStore, sheetHeightStore } from '../store';
-    import { onMount, onDestroy, type Snippet, tick } from 'svelte';
-
-    let {
-        children
-    }: {
-        children: Snippet;
-    } = $props();
-
-    let spreadsheetWrapper: HTMLDivElement;
-    let spreadsheetGridContainer: HTMLDivElement;
-
-    /** resizing logic variables */
-    let resizeObserver: ResizeObserver;
-    let mutationObserver: MutationObserver;
-
-    /** to avoid querySelector for perf! */
-    let cachedElements = new Set<Element>();
-
-    /** writable store to prevent jumps when changing views */
-    let spreadsheetHeight = $state($sheetHeightStore);
-
-    const handleResize = debounce(() => resizeSheet(), 125);
-
-    function observeElement(selector: string) {
-        const element = document.querySelector(selector);
-        if (element && !cachedElements.has(element)) {
-            cachedElements.add(element);
-            resizeObserver.observe(element);
-        }
-    }
-
-    /** get the actual spreadsheet-container */
-    function initSpreadsheetGridContainer(): boolean {
-        if (spreadsheetGridContainer) return true;
-
-        spreadsheetGridContainer = spreadsheetWrapper?.querySelector('.spreadsheet-container');
-        return !!spreadsheetGridContainer;
-    }
-
-    /** adjust height to fill remaining viewport space */
-    function resizeSheet(): void {
-        if (!spreadsheetWrapper) return;
-        const wrapperRect = spreadsheetWrapper.getBoundingClientRect();
-        const wrapperTop = wrapperRect.top;
-        const viewportHeight = window.innerHeight;
-        const availableHeight = viewportHeight - wrapperTop;
-        const finalHeight = Math.max(100, availableHeight);
-
-        const currentHeight = parseFloat(spreadsheetHeight);
-        const heightChanged = Math.abs(currentHeight - finalHeight) > 1;
-
-        if (heightChanged) {
-            const newHeight = `${finalHeight}px`;
-            spreadsheetHeight = newHeight;
-            sheetHeightStore.set(newHeight);
-        }
-    }
-
-    function addObservers() {
-        /** grab the sheet container */
-        initSpreadsheetGridContainer();
-
-        resizeObserver = new ResizeObserver(handleResize);
-
-        /** banners */
-        observeElement('.top-banner');
-
-        /** expand / collapse tabs */
-        observeElement('.layout-header');
-
-        /** just in case */
-        resizeObserver.observe(document.body);
-
-        /** add an observer when a banner pops-in */
-        mutationObserver = new MutationObserver(() => {
-            observeElement('.top-banner');
-        });
-
-        mutationObserver.observe(document.body, {
-            childList: true,
-            subtree: true
-        });
-    }
-
-    /** save grid sheet scroll for restore */
-    export function saveGridSheetScroll(): void {
-        if (initSpreadsheetGridContainer()) {
-            scrollStore.set(spreadsheetGridContainer.scrollLeft || 0);
-        }
-    }
-
-    /** restore grid sheet scroll from before */
-    export function restoreGridSheetScroll(): void {
-        if (initSpreadsheetGridContainer() && spreadsheetGridContainer.scrollWidth > 0) {
-            spreadsheetGridContainer.scrollTop = 0;
-            spreadsheetGridContainer.scrollLeft = $scrollStore;
-        }
-    }
-
-    onMount(async () => {
-        await tick();
-        addObservers();
-        resizeSheet();
-    });
-
-    onDestroy(() => {
-        resizeObserver?.disconnect();
-        mutationObserver?.disconnect();
-    });
-</script>
-
-<div bind:this={spreadsheetWrapper} class="spreadsheet-wrapper" style:height={spreadsheetHeight}>
-    {@render children()}
-</div>
-
-<style>
-    .spreadsheet-wrapper {
-        transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
-    }
-</style>
@@ -10,7 +10,7 @@
    import { type Columns, spreadsheetRenderKey } from '../store';
    import { ID, type Models } from '@appwrite.io/console';
    import { Alert, Layout, Typography, Selector } from '@appwrite.io/pink-svelte';
-    import SideSheet from '../layout/sidesheet.svelte';
+    import { SideSheet } from '$database/(entity)/views/(layouts)';
    import { invalidate } from '$app/navigation';
    import { Dependencies } from '$lib/constants';
    import { tick } from 'svelte';
@@ -21,7 +21,9 @@
    });

    async function deleteTable() {
-        await sdk.forProject(page.params.region, page.params.project).tablesDB.deleteTable({ ...params });
+        await sdk
+            .forProject(page.params.region, page.params.project)
+            .tablesDB.deleteTable({ ...params });
    }

    async function updateTable(
@@ -32,7 +34,9 @@
            rowSecurity: boolean;
        }>
    ) {
-        await sdk.forProject(page.params.region, page.params.project).tablesDB.updateTable({ ...params, ...updates });
+        await sdk
+            .forProject(page.params.region, page.params.project)
+            .tablesDB.updateTable({ ...params, ...updates });
    }
 </script>

@@ -83,7 +83,7 @@
    import type { HeaderCellAction, RowCellAction } from './sheetOptions.svelte';
    import SheetOptions from './sheetOptions.svelte';
    import { isSmallViewport, isTabletViewport } from '$lib/stores/viewport';
-    import SpreadsheetContainer from './layout/spreadsheet.svelte';
+    import { SpreadsheetContainer } from '$database/(entity)/views/(layouts)';
    import EditRowCell from './rows/cell/edit.svelte';
    import { copy } from '$lib/helpers/copy';
    import { writable } from 'svelte/store';