Init

src/lib/components/FileTreeNode.svelte

@@ -0,0 +1,168 @@
+<script lang="ts" module>
+	export interface Node {
+		path: string;
+		name: string;
+		kind: 'folder' | 'canvas';
+		children: Node[];
+	}
+</script>
+
+<script lang="ts">
+	import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+	import Self from './FileTreeNode.svelte';
+
+	interface Props {
+		node: Node;
+		depth: number;
+		open: Set<string>;
+		renaming: string | null;
+		activePath: string | null;
+		onToggle: (path: string) => void;
+		onOpen: (path: string) => void;
+		onContext: (e: MouseEvent, n: Node) => void;
+		onRename: (path: string, kind: Node['kind'], name: string) => void;
+		onCancelRename: () => void;
+		onDrop: (targetDir: string, source: string) => void;
+	}
+
+	let props: Props = $props();
+	const { node, depth } = $derived(props);
+	const isOpen = $derived(props.open.has(node.path));
+	let dragOver = $state(false);
+
+	function focusSelect(el: HTMLInputElement) {
+		el.focus();
+		el.select();
+	}
+
+	function onKey(e: KeyboardEvent) {
+		const input = e.currentTarget as HTMLInputElement;
+		if (e.key === 'Enter') props.onRename(node.path, node.kind, input.value);
+		else if (e.key === 'Escape') props.onCancelRename();
+	}
+
+	function click() {
+		if (node.kind === 'folder') props.onToggle(node.path);
+		else props.onOpen(node.path);
+	}
+</script>
+
+<div
+	class="row"
+	class:active={node.kind === 'canvas' && props.activePath === node.path}
+	class:drag-over={dragOver}
+	style="padding-left: {8 + depth * 14}px"
+	role="treeitem"
+	aria-selected={props.activePath === node.path}
+	aria-expanded={node.kind === 'folder' ? isOpen : undefined}
+	tabindex="0"
+	draggable={props.renaming !== node.path}
+	onclick={click}
+	onkeydown={(e) => e.key === 'Enter' && props.renaming !== node.path && click()}
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		props.onContext(e, node);
+	}}
+	ondragstart={(e) => e.dataTransfer?.setData('text/x-papure-path', node.path)}
+	ondragover={(e) => {
+		if (node.kind !== 'folder') return;
+		e.preventDefault();
+		e.stopPropagation();
+		dragOver = true;
+	}}
+	ondragleave={() => (dragOver = false)}
+	ondrop={(e) => {
+		if (node.kind !== 'folder') return;
+		e.preventDefault();
+		e.stopPropagation();
+		dragOver = false;
+		props.onDrop(node.path, e.dataTransfer?.getData('text/x-papure-path') ?? '');
+	}}
+>
+	{#if node.kind === 'folder'}
+		<span class="chev" class:open={isOpen}><ChevronRightIcon size={14} strokeWidth={2} /></span>
+	{/if}
+	{#if props.renaming === node.path}
+		<input
+			class="rename"
+			value={node.name}
+			use:focusSelect
+			onkeydown={onKey}
+			onclick={(e) => e.stopPropagation()}
+			onblur={(e) => props.onRename(node.path, node.kind, e.currentTarget.value)}
+		/>
+	{:else}
+		<span class="name" class:folder={node.kind === 'folder'}>{node.name}</span>
+	{/if}
+</div>
+
+{#if node.kind === 'folder' && isOpen}
+	<div class="children" style="--guide: {14 + depth * 14}px">
+		{#each node.children as child (child.path)}
+			<Self {...props} node={child} depth={depth + 1} />
+		{/each}
+	</div>
+{/if}
+
+<style>
+	.row {
+		display: flex;
+		align-items: center;
+		gap: 2px;
+		height: 28px;
+		padding-right: 8px;
+		border-radius: 4px;
+		cursor: pointer;
+		color: var(--muted);
+		user-select: none;
+		outline: none;
+	}
+	.row:hover,
+	.row:focus-visible {
+		background: var(--hover);
+		color: var(--text);
+	}
+	.row.active {
+		background: var(--accent-soft);
+		color: var(--text);
+	}
+	.row.drag-over {
+		box-shadow: inset 0 0 0 1px var(--accent);
+	}
+	.chev {
+		display: inline-grid;
+		place-items: center;
+		width: 16px;
+		color: var(--faint);
+		transition: transform 0.12s;
+	}
+	.chev.open {
+		transform: rotate(90deg);
+	}
+	.name {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding-left: 4px;
+	}
+	.name.folder {
+		padding-left: 0;
+	}
+	.rename {
+		flex: 1;
+		min-width: 0;
+		height: 22px;
+		padding: 2px 6px;
+	}
+	.children {
+		position: relative;
+	}
+	.children::before {
+		content: '';
+		position: absolute;
+		left: var(--guide);
+		top: 0;
+		bottom: 0;
+		border-left: 1px solid var(--border);
+	}
+</style>