Something went wrong. Try again.
forked from tangled.org/core
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140<script module lang="ts"> import { tv } from "tailwind-variants";
const treeRow = tv({ slots: { root: "diff-file-tree pt-2xs pr-md pb-2xl pl-1.5", row: "tree-entry group my-3xs inline-flex w-full items-center gap-xs rounded-md px-1.5 py-0.75 text-foreground-default hover:bg-background-subtle", icon: "size-3.5 shrink-0 text-foreground-placeholder group-hover:text-foreground-default", name: "tree-name truncate select-none", children: "tree-children ml-[12.5px] border-l border-border-subtle pl-3xs" }, variants: { kind: { dir: { row: "tree-directory cursor-pointer text-left", icon: "tree-toggle transition-[rotate] duration-(--fold-duration) ease-(--fold-easing) group-aria-expanded:rotate-90", name: "text-foreground-muted group-hover:text-inherit" }, file: { row: "tree-file flex items-center gap-xs", icon: "tree-icon" } } } });
interface TreeDir { type: "dir"; name: string; path: string; children: TreeNode[]; }
interface TreeFile { type: "file"; name: string; path: string; }
type TreeNode = TreeDir | TreeFile;
const buildTree = (paths: string[]): TreeNode[] => { const roots: TreeNode[] = []; const dirs: Record<string, TreeDir> = Object.create(null); for (const path of paths) { const parts = path.split("/"); let siblings = roots; let prefix = ""; for (const dir of parts.slice(0, -1)) { prefix = prefix ? `${prefix}/${dir}` : dir; let node = dirs[prefix]; if (!node) { node = { type: "dir", name: dir, path: prefix, children: [] }; dirs[prefix] = node; siblings.push(node); } siblings = node.children; } siblings.push({ type: "file", name: parts.at(-1) ?? path, path }); } return roots; };</script>
<script lang="ts"> import File from "$icon/file"; import { fileAnchor } from "#lib/components/repo/fileAnchor.svelte.ts"; import ChevronRight from "$icon/chevron-right"; import { prefersReducedMotion } from "svelte/motion"; import { CROSSFADE_DURATION, CROSSFADE_EASING, crossfadeEasing } from "#lib/motion/spring.ts"; import { revealHeight } from "#lib/motion/reveal.ts";
interface Props { /** full slash-separated paths, linked as the diff's own file anchors */ files: { name: string }[]; /** when the diff owns its own scroller, jumping is a call, not an anchor */ onSelect?: (path: string) => void; }
let { files, onSelect }: Props = $props();
const tree = $derived(buildTree(files.map((file) => file.name)));
let closed = $state<Record<string, boolean>>({});
const uid = $props.id(); const duration = $derived(prefersReducedMotion.current ? 0 : CROSSFADE_DURATION);
const dir = treeRow({ kind: "dir" }); const file = treeRow({ kind: "file" });</script>
{#snippet nodes(list: TreeNode[])} {#each list as node (`${node.type}:${node.path}`)} {#if node.type === "dir"} {@const open = !closed[node.path]} {@const id = `${uid}-${node.path}`} <button type="button" class={dir.row()} data-kind="directory" aria-expanded={open} aria-controls={open ? id : undefined} onclick={() => (closed[node.path] = open)} > <ChevronRight class={dir.icon()} aria-hidden="true" /> <span class={dir.name()}>{node.name}</span> </button> {#if open} <div {id} class={dir.children()} transition:revealHeight={{ duration, easing: crossfadeEasing }} > {@render nodes(node.children)} </div> {/if} {:else} <!-- an in-page anchor the scroller honours, so there is no route to resolve --> <!-- eslint-disable svelte/no-navigation-without-resolve --> <a href={fileAnchor(node.path)} class={file.row()} data-kind="file" onclick={onSelect ? (event) => { event.preventDefault(); onSelect(node.path); } : undefined} > <File class={file.icon()} aria-hidden="true" /> <span class={file.name()}>{node.name}</span> </a> <!-- eslint-enable svelte/no-navigation-without-resolve --> {/if} {/each}{/snippet}
<div class={dir.root()} style:--fold-duration="{duration}ms" style:--fold-easing={CROSSFADE_EASING}> {@render nodes(tree)}</div>