update: add delay to tooltips;

update: proper id hashing for spreadsheet keys;
update: state management issues with column swaps and resizing;
update: handle horizontal grid scroll with restore on url query sorting;

Author: ItzNotABug

package.json

@@ -26,7 +26,7 @@
         "@appwrite.io/pink-icons": "0.25.0",
         "@appwrite.io/pink-icons-svelte": "^2.0.0-RC.1",
         "@appwrite.io/pink-legacy": "^1.0.3",
-        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0468c93",
+        "@appwrite.io/pink-svelte": "https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@0c30e2f",
         "@faker-js/faker": "^9.9.0",
         "@popperjs/core": "^2.11.8",
         "@sentry/sveltekit": "^8.38.0",

pnpm-lock.yaml

@@ -1,18 +1,32 @@
 <script lang="ts">
-    import { trackEvent } from '$lib/actions/analytics';
-    import { clickOnEnter } from '$lib/helpers/a11y';
+    import type { Snippet } from 'svelte';
     import { copy } from '$lib/helpers/copy';
-    import { addNotification } from '$lib/stores/notifications';
+    import { clickOnEnter } from '$lib/helpers/a11y';
     import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
 
-    export let value: string;
-    export let event: string = null;
-    export let eventContext = 'click_id_tag';
-    export let tooltipDisabled = false;
-    export let tooltipPortal = false;
-    export let copyText: string = 'Click to copy';
+    let {
+        value,
+        event = null,
+        eventContext = 'click_id_tag',
+        tooltipDisabled = false,
+        tooltipPortal = false,
+        copyText = 'Click to copy',
+        delay = 0,
+        children
+    }: {
+        value: string;
+        event?: string;
+        eventContext?: string;
+        tooltipDisabled?: boolean;
+        tooltipPortal?: boolean;
+        copyText?: string;
+        delay?: number;
+        children?: Snippet;
+    } = $props();
 
-    let content = copyText;
+    let content = $state(copyText);
 
     async function handleClick() {
         const success = await copy(value);
@@ -35,17 +49,21 @@
     //TODO: remove this component
 </script>
 
-<Tooltip disabled={tooltipDisabled} portal={tooltipPortal}>
+<Tooltip disabled={tooltipDisabled} portal={tooltipPortal} {delay}>
     <span
         data-private
         style:display="inline-flex"
         role="button"
         tabindex="0"
         style:cursor="pointer"
-        on:click|preventDefault|stopPropagation={handleClick}
-        on:keyup={clickOnEnter}
-        on:mouseenter={() => setTimeout(() => (content = copyText))}>
-        <slot />
+        onclick={(event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            handleClick();
+        }}
+        onkeyup={clickOnEnter}
+        onmouseenter={() => setTimeout(() => (content = copyText))}>
+        {@render children?.()}
     </span>
     <p slot="tooltip" let:showing>
         {#if showing}

src/lib/components/copy.svelte

@@ -48,11 +48,13 @@
 
     export let value: string;
     export let event: string = null;
+
     export let tooltipPortal = false;
+    export let tooltipDelay: number = 0;
 </script>
 
 {#key value}
-    <Copy {value} {event} {tooltipPortal}>
+    <Copy {value} {event} {tooltipPortal} delay={tooltipDelay}>
         <Tag size="xs" variant="code">
             <Icon icon={IconDuplicate} size="s" slot="start" />
             <span

src/lib/components/id.svelte

@@ -60,3 +60,12 @@ export const hostnameRegex = String.raw`(\*)|(\*\.)?(?!-)[A-Za-z0-9\-]+([\-\.]{1
  * Supports domains, localhost, wildcards, ip-addresses and Chrome extension IDs!
  */
 export const extendedHostnameRegex = String.raw`(\*)|(\*\.)?((?!-)[A-Za-z0-9\-]+([\-\.]{1}[a-z0-9]+)*\.[A-Za-z]{2,18}|localhost|(\d{1,3}\.){3}\d{1,3}|[a-z0-9]{32})`;
+
+export function hash(input: string | string[], delimiter: string = ','): string {
+    const str = Array.isArray(input) ? input.join(delimiter) : input;
+    let hash = 0;
+    for (let i = 0; i < str.length; i++) {
+        hash = ((hash << 5) - hash + str.charCodeAt(i)) & 0xffffffff;
+    }
+    return Math.abs(hash).toString(36);
+}

src/lib/helpers/string.ts

@@ -192,13 +192,15 @@
         </svelte:fragment>
 
         <svelte:fragment slot="footer">
-            <Layout.Stack
-                direction="row"
-                alignContent="center"
-                alignItems="center"
-                justifyContent="space-between">
-                <Skeleton variant="line" height={18} width={125} />
-            </Layout.Stack>
+            {#if $spreadsheetLoading}
+                <Layout.Stack
+                    direction="row"
+                    alignContent="center"
+                    alignItems="center"
+                    justifyContent="space-between">
+                    <Skeleton variant="line" height={18} width={125} />
+                </Layout.Stack>
+            {/if}
         </svelte:fragment>
     </Spreadsheet.Root>
 
@@ -295,7 +297,7 @@
         top: 29%;
         bottom: 0;
         width: 100%;
-        height: 70vh;
+        height: 70.5vh;
         position: fixed;
         background: linear-gradient(
             180deg,

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

@@ -1,13 +1,35 @@
 <script lang="ts">
+    import { scrollStore } from '../store';
+
     let spreadsheetHeight = '74.5vh';
     let spreadsheetWrapper: HTMLDivElement;
+    let spreadsheetGridContainer: HTMLDivElement;
+
+    function initSpreadsheetGridContainer() {
+        if (!spreadsheetWrapper) return false;
+
+        spreadsheetGridContainer = spreadsheetWrapper.querySelector('.spreadsheet-container');
+        return !!spreadsheetGridContainer;
+    }
 
-    function resizeSheet() {
+    /** adjust height to fill remaining viewport space */
+    export function resizeSheet() {
         if (!spreadsheetWrapper) return;
         const rect = spreadsheetWrapper.getBoundingClientRect();
         spreadsheetHeight = window.innerHeight - rect.top + 'px';
     }
 
+    export function saveGridSheetScroll() {
+        initSpreadsheetGridContainer();
+        scrollStore.set(spreadsheetGridContainer?.scrollLeft);
+    }
+
+    export function restoreGridSheetScroll() {
+        if (initSpreadsheetGridContainer() && spreadsheetGridContainer.scrollWidth > 0) {
+            spreadsheetGridContainer.scrollLeft = $scrollStore;
+        }
+    }
+
     resizeSheet();
 </script>