From cd5c781e5fc22ae7e8971c44b20dc8fca64357fa Mon Sep 17 00:00:00 2001
From: Darshan <itznotabug@gmail.com>
Date: Mon, 29 Sep 2025 20:02:28 +0530
Subject: [PATCH] remove: duplicate components.

---
 .../(entity)/views/indexes/view.svelte        |  10 +-
 .../(suggestions)/empty.svelte                |   2 +-
 .../(suggestions)/options.svelte              |   2 +-
 .../table-[table]/+layout.svelte              |   2 +-
 .../table-[table]/columns/+page.svelte        |   3 +-
 .../table-[table]/indexes/+page.svelte        |  13 +-
 .../table-[table]/layout/emptySheet.svelte    |   2 +-
 .../table-[table]/layout/sidesheet.svelte     | 174 ------------------
 .../table-[table]/layout/spreadsheet.svelte   | 123 -------------
 .../table-[table]/rows/create.svelte          |   2 +-
 .../table-[table]/settings/+page.svelte       |   8 +-
 .../table-[table]/spreadsheet.svelte          |   2 +-
 12 files changed, 22 insertions(+), 321 deletions(-)
 delete mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
 delete mode 100644 src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte

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
index 4a2873d12..1b06399dc 100644
--- 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
@@ -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}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
index 38ee34a9a..2fce68c9d 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/empty.svelte
@@ -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';
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte
index 9f6ca1691..5f77a5b35 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/(suggestions)/options.svelte
@@ -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,
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
index 6c8a262c2..5f475cc9e 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/+layout.svelte
@@ -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';
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
index fc6e021ca..1694c7f1c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/columns/+page.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';
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
index fe838a1fa..c6a047835 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/indexes/+page.svelte
@@ -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}
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
index bdc92fb75..440bebdc8 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/emptySheet.svelte
@@ -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';
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
deleted file mode 100644
index 68b981d3a..000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/sidesheet.svelte
+++ /dev/null
@@ -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>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
deleted file mode 100644
index 185f2aec7..000000000
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/layout/spreadsheet.svelte
+++ /dev/null
@@ -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>
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/create.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/create.svelte
index b1fa02ce4..c665fb50a 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/create.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/rows/create.svelte
@@ -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';
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
index 90d4eb3c0..fb37af442 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/settings/+page.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>
 
diff --git a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
index 9fea5d2a6..3cbad674c 100644
--- a/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
+++ b/src/routes/(console)/project-[region]-[project]/databases/database-[database]/table-[table]/spreadsheet.svelte
@@ -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';