File tree

<script lang="ts">
	import FileTree, { type TreeNode } from '#lib/ui/FileTree.svelte';

	const archive: TreeNode[] = [
		{
			id: 'medicine',
			name: 'Medicine',
			children: [
				{
					id: 'canon',
					name: 'The Canon of Medicine',
					children: [
						{ id: 'canon-1', name: 'Book one — General principles.pdf' },
						{ id: 'canon-2', name: 'Book two — Simple medicines.pdf' },
						{ id: 'canon-scan', name: 'Frontispiece.png' }
					]
				},
				{ id: 'tasrif', name: 'Kitāb al-Taṣrīf.pdf' }
			]
		},
		{
			id: 'mathematics',
			name: 'Mathematics',
			children: [
				{ id: 'jabr', name: 'Al-Jabr.pdf' },
				{ id: 'tables', name: 'Astronomical tables.json' }
			]
		},
		{ id: 'optics', name: 'Optics', children: [{ id: 'manazir', name: 'Kitāb al-Manāẓir.pdf' }] },
		{ id: 'readme', name: 'Catalog notes.md' }
	];

	let expanded = $state(['medicine', 'canon']);
	let selected = $state('canon-1');
</script>

<div class="layout">
	<FileTree label="Archive" items={archive} bind:expanded bind:selected />
	<p>Selected: <strong>{selected}</strong></p>
</div>

<style>
	.layout {
		display: grid;
		gap: 0.75rem;
		inline-size: min(100%, 22rem);
	}
	p {
		margin: 0;
		color: var(--ui-muted);
		font-size: 0.875rem;
	}
</style>

<script lang="ts">
	import FileTree, { type TreeNode } from '#lib/ui/FileTree.svelte';

	// 20 wings × 30 shelves × 200 manuscripts: over 120,000 items. Only the rows in view are drawn.
	const subjects = [
		'Optics',
		'Algebra',
		'Medicine',
		'Astronomy',
		'Geography',
		'Poetry',
		'Law',
		'Music'
	];
	const items: TreeNode[] = Array.from({ length: 20 }, (_, w) => ({
		id: `w${w}`,
		name: `Wing ${w + 1}`,
		children: Array.from({ length: 30 }, (_, s) => ({
			id: `w${w}s${s}`,
			name: `Shelf ${s + 1} · ${subjects[(w + s) % subjects.length]}`,
			children: Array.from({ length: 200 }, (_, m) => ({
				id: `w${w}s${s}m${m}`,
				name: `MS-${String(w * 6000 + s * 200 + m + 1).padStart(6, '0')}.pdf`
			}))
		}))
	}));
	let expanded = $state(['w0', 'w0s0']);
</script>

<FileTree label="Catalog" {items} bind:expanded searchLabel="Search the catalog" height="22rem" />

<script lang="ts">
	import FileTree, { type TreeNode } from '#lib/ui/FileTree.svelte';

	// Folders start empty and fetch their contents the first time they open, as from a server.
	const folder = (id: string, name: string): TreeNode => ({ id, name, children: [] });
	const items: TreeNode[] = [
		folder('baghdad', 'Baghdad'),
		folder('cairo', 'Cairo'),
		folder('cordoba', 'Córdoba')
	];

	async function load(node: TreeNode): Promise<TreeNode[]> {
		await new Promise((r) => setTimeout(r, 700));
		return [
			folder(`${node.id}/letters`, 'Letters'),
			...Array.from({ length: 5 }, (_, i) => ({
				id: `${node.id}/${i}`,
				name: `${node.name} register ${i + 1}.pdf`
			}))
		];
	}
</script>

<FileTree label="Cities" {items} {load} height="16rem" />