improved sticky folders

website/src/lib/components/collapsible-tree/CollapsibleTree.svelte

@@ -1,18 +1,26 @@
 <script lang="ts">
-    import { setContext, type Snippet } from 'svelte';
+    import { getContext, setContext, type Snippet } from 'svelte';
-    import { CollapsibleTreeState } from './utils.svelte';
+    import { CollapsibleTreeState, StuckRows } from './utils.svelte';
+    import { stickyKey, type StickyLevel } from './sticky';
 
     const {
         defaultState = 'open',
         side = 'right',
         nohover = false,
         slotInsideTrigger = true,
+        sticky = false,
         children,
     }: {
         defaultState?: 'open' | 'closed';
         side?: 'left' | 'right';
         nohover?: boolean;
         slotInsideTrigger?: boolean;
+        /**
+         * The rows of the nodes stick to the top of the scrolled area while some of the content of
+         * their node is in view, each under the rows of the nodes it is in. A tree in a tree is
+         * like its node.
+         */
+        sticky?: boolean;
         children: Snippet;
     } = $props();
 
@@ -23,6 +31,15 @@
     setContext('collapsible-tree-nohover', nohover);
     setContext('collapsible-tree-parent-id', 'root');
     setContext('collapsible-tree-slot-inside-trigger', slotInsideTrigger);
+    setContext<StickyLevel>(
+        stickyKey,
+        getContext<StickyLevel | undefined>(stickyKey) ?? {
+            enabled: sticky,
+            top: 0,
+            depth: 0,
+            stuckRows: new StuckRows(),
+        }
+    );
 </script>
 
 {@render children()}

website/src/lib/components/collapsible-tree/CollapsibleTreeNode.svelte

@@ -5,37 +5,58 @@
     import { getContext, setContext, type Snippet } from 'svelte';
     import type { ClassValue } from 'svelte/elements';
     import type { CollapsibleTreeState } from './utils.svelte';
+    import { stickyKey, stickyZIndex, trackStuck, type StickyLevel } from './sticky';
 
     const props: {
         id: string | number;
         class?: ClassValue;
         trigger: Snippet;
-        /** Classes and style of the trigger row (when the trigger holds the content), to make it stick. */
-        triggerClass?: ClassValue;
-        triggerStyle?: string;
         /** Gets whether the node is open, for contents that are only worth building then. */
         content: Snippet<[boolean]>;
     } = $props();
 
-    let state = getContext<CollapsibleTreeState>('collapsible-tree-state');
+    let treeState = getContext<CollapsibleTreeState>('collapsible-tree-state');
     let side = getContext<'left' | 'right'>('collapsible-tree-side');
     let nohover = getContext<boolean>('collapsible-tree-nohover');
     let slotInsideTrigger = getContext<boolean>('collapsible-tree-slot-inside-trigger');
     let parentId = getContext<string>('collapsible-tree-parent-id');
+    // where the row sticks, under the rows of the nodes this one is in
+    let level = getContext<StickyLevel>(stickyKey);
 
     let fullId = `${parentId}.${props.id}`;
     setContext('collapsible-tree-parent-id', fullId);
 
-    let open = state.get(fullId);
+    let open = treeState.get(fullId);
+
+    // the rows of the nodes in this one stick under this row, whatever its height
+    let rowHeight = $state(0);
+    setContext<StickyLevel>(stickyKey, {
+        get enabled() {
+            return level.enabled;
+        },
+        get top() {
+            return level.top + rowHeight;
+        },
+        get depth() {
+            return level.depth + 1;
+        },
+        get stuckRows() {
+            return level.stuckRows;
+        },
+    });
+    // the row is on top of the content that goes under it
+    let stuck = $state(false);
+    // only the deepest row that is stuck has a border: the rows above it run into it
+    let bordered = $derived(stuck && level.stuckRows.deepest === level.depth);
 
     export function openNode() {
         open.current = true;
     }
 </script>
 
-<Collapsible.Root bind:open={open.current} class={props.class}>
+{#snippet row()}
     {#if slotInsideTrigger}
-        <Collapsible.Trigger class={['w-full', props.triggerClass]} style={props.triggerStyle}>
+        <Collapsible.Trigger class="w-full">
             <Button
                 variant="ghost"
                 size="icon"
@@ -91,6 +112,35 @@
             {/if}
         </Button>
     {/if}
+{/snippet}
+
+<Collapsible.Root bind:open={open.current} class={props.class}>
+    {#if level.enabled}
+        <!-- sticks while some of the content of the node is in view, with a border when it does -->
+        <div
+            class={['sticky bg-background', bordered && 'border-b']}
+            style="top: {level.top}px; z-index: {stickyZIndex(level.depth)}"
+            bind:clientHeight={rowHeight}
+            {@attach (row) => {
+                const stop = trackStuck(
+                    row,
+                    () => level.top,
+                    (value) => {
+                        stuck = value;
+                        level.stuckRows.set(fullId, level.depth, value);
+                    }
+                );
+                return () => {
+                    stop?.();
+                    level.stuckRows.set(fullId, level.depth, false);
+                };
+            }}
+        >
+            {@render row()}
+        </div>
+    {:else}
+        {@render row()}
+    {/if}
     <Collapsible.Content>
         {@render props.content(open.current)}
     </Collapsible.Content>

website/src/lib/components/collapsible-tree/sticky.ts

@@ -0,0 +1,79 @@
+import type { StuckRows } from './utils.svelte';
+
+/**
+ * Where the row of a node of a sticky tree sticks: under the rows of the nodes it is in, which stay
+ * in view as long as some of their content can be seen.
+ */
+export type StickyLevel = {
+    /** Whether the rows stick. */
+    readonly enabled: boolean;
+    /** How far from the top of the scrolled area the rows of this level stick. */
+    readonly top: number;
+    /** How many nodes the rows of this level are in. */
+    readonly depth: number;
+    /** Which rows of the tree are stuck. */
+    readonly stuckRows: StuckRows;
+};
+
+/** The key of the context that holds the `StickyLevel`. */
+export const stickyKey = 'collapsible-tree-sticky';
+
+/** The rows of the outer levels are above the ones of the inner levels. */
+export function stickyZIndex(depth: number): number {
+    return Math.max(100 - depth, 1);
+}
+
+/** The first ancestor that scrolls (or clips), which a sticky row sticks to. */
+function scrollParent(node: HTMLElement): HTMLElement | null {
+    for (let parent = node.parentElement; parent; parent = parent.parentElement) {
+        if (getComputedStyle(parent).overflowY !== 'visible') {
+            return parent;
+        }
+    }
+    return null;
+}
+
+/**
+ * Tells whether a sticky row is stuck, and in view: it is held at `top()` from the top of the
+ * scrolled area, further down than the beginning of the node it is in. A row that is on its way out
+ * with the end of its node (pushed up under the row of the node above) is not.
+ */
+export function trackStuck(
+    row: HTMLElement,
+    top: () => number,
+    onChange: (stuck: boolean) => void
+) {
+    const node = row.parentElement;
+    const scroller = scrollParent(row);
+    if (!node || !scroller) {
+        return;
+    }
+    let stuck = false;
+    let frame = 0;
+    const check = () => {
+        frame = 0;
+        const rowTop = row.getBoundingClientRect().top;
+        const held = scroller.getBoundingClientRect().top + scroller.clientTop + top();
+        const now =
+            rowTop - node.getBoundingClientRect().top > 0.5 && Math.abs(rowTop - held) < 0.5;
+        if (now !== stuck) {
+            stuck = now;
+            onChange(stuck);
+        }
+    };
+    const schedule = () => {
+        if (!frame) {
+            frame = requestAnimationFrame(check);
+        }
+    };
+    scroller.addEventListener('scroll', schedule, { passive: true });
+    // the node changes when it is opened or closed, or its content does
+    const observer = new ResizeObserver(schedule);
+    observer.observe(node);
+    schedule();
+    return () => {
+        scroller.removeEventListener('scroll', schedule);
+        observer.disconnect();
+        cancelAnimationFrame(frame);
+    };
+}

website/src/lib/components/collapsible-tree/utils.svelte.ts

@@ -29,3 +29,24 @@ export class CollapsibleTreeState {
         return this._open[id];
     }
 }
+
+/**
+ * The rows of a sticky tree that are stuck, by node, with how deep they are: only the deepest one
+ * gets the border that shows where the rows end.
+ */
+export class StuckRows {
+    private rows: Record<string, number> = $state({});
+
+    set(id: string, depth: number, stuck: boolean) {
+        if (stuck) {
+            this.rows[id] = depth;
+        } else if (id in this.rows) {
+            delete this.rows[id];
+        }
+    }
+
+    /** The depth of the deepest row that is stuck, -1 if none is. */
+    get deepest(): number {
+        return Math.max(-1, ...Object.values(this.rows));
+    }
+}

website/src/lib/components/explorer/Explorer.svelte

@@ -2,7 +2,6 @@
     import { CollapsibleTree, CollapsibleTreeNode } from '$lib/components/collapsible-tree/index';
     import { ScrollArea } from '$lib/components/ui/scroll-area/index';
     import ExplorerTree from './ExplorerTree.svelte';
-    import { stickyRowStyle } from './sticky';
     import { i18n } from '$lib/i18n/i18n.svelte';
     import { engine } from '$lib/engine';
     import { folderName } from '$lib/engine/workspace';
@@ -24,12 +23,8 @@
                 <!-- starts over when another folder is opened -->
                 {#key folder}
                     <!-- the folder itself, which is open at first -->
-                    <CollapsibleTree side="left" defaultState="open">
+                    <CollapsibleTree side="left" defaultState="open" sticky>
-                        <CollapsibleTreeNode
+                        <CollapsibleTreeNode id="folder">
-                            id="folder"
-                            triggerClass="sticky flex items-center bg-background"
-                            triggerStyle={stickyRowStyle(0)}
-                        >
                             {#snippet trigger()}
                                 <span class="grow truncate text-left" title={folder}>
                                     {folderName(folder)}

website/src/lib/components/explorer/ExplorerTree.svelte

@@ -3,7 +3,6 @@
     import { Button } from '$lib/components/ui/button';
     import { FileText } from '@lucide/svelte';
     import ExplorerTree from './ExplorerTree.svelte';
-    import { stickyRowStyle } from './sticky';
     import { openPath } from '$lib/actions/file-actions';
     import { engine, type FolderEntry } from '$lib/engine';
     import { selectedFileIds } from '$lib/engine/selection-helpers';
@@ -11,12 +10,9 @@
 
     let {
         path,
-        depth = 1,
     }: {
         /** The folder whose content is listed, the open folder if it is not given. */
         path?: string;
-        /** How many folders deep the folders listed are (the open folder is 0). */
-        depth?: number;
     } = $props();
 
     const { workspace, selection, folderVersion } = engine;
@@ -49,11 +45,7 @@
 
 {#each entries as entry (entry.path)}
     {#if entry.isDir}
-        <CollapsibleTreeNode
+        <CollapsibleTreeNode id={entry.name}>
-            id={entry.name}
-            triggerClass="sticky flex items-center bg-background"
-            triggerStyle={stickyRowStyle(depth)}
-        >
             {#snippet trigger()}
                 <span class="grow truncate text-left">{entry.name}</span>
             {/snippet}
@@ -61,7 +53,7 @@
                 <!-- the content of a folder is only read when it is opened -->
                 {#if opened}
                     <div class="ml-4">
-                        <ExplorerTree path={entry.path} depth={depth + 1} />
+                        <ExplorerTree path={entry.path} />
                     </div>
                 {/if}
             {/snippet}

website/src/lib/components/explorer/sticky.test.ts

@@ -1,17 +0,0 @@
-import assert from 'node:assert/strict';
-import { describe, it } from 'node:test';
-import { rowHeight, stickyRowStyle } from './sticky';
-
-describe('stickyRowStyle', () => {
-    it('puts each row under the ones of the folders it is in', () => {
-        assert.match(stickyRowStyle(0), /top: 0px/);
-        assert.match(stickyRowStyle(2), new RegExp(`top: ${2 * rowHeight}px`));
-    });
-
-    it('puts the rows of the folders above over the rows below', () => {
-        const zIndex = (depth: number) => Number(/z-index: (\d+)/.exec(stickyRowStyle(depth))![1]);
-        assert.ok(zIndex(0) > zIndex(1));
-        assert.ok(zIndex(1) > zIndex(5));
-        assert.ok(zIndex(500) >= 1);
-    });
-});

website/src/lib/components/explorer/sticky.ts

@@ -1,11 +0,0 @@
-/** The height of a row of the explorer. */
-export const rowHeight = 28;
-
-/**
- * The style of the row of a folder that is `depth` folders deep (0 for the open folder), to stick
- * under the rows of the folders it is in while any of its content can be seen: the rows of the
- * folders above are above it too.
- */
-export function stickyRowStyle(depth: number): string {
-    return `top: ${depth * rowHeight}px; height: ${rowHeight}px; z-index: ${Math.max(100 - depth, 1)};`;
-}