@twango/twiki 0.0.0-stage → 0.1.0-rc.0

package/site/src/lib/components/files/FileTabs.svelte

@@ -0,0 +1,180 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { tick } from 'svelte';
+	import { flip } from 'svelte/animate';
+	import { prefersReducedMotion } from 'svelte/motion';
+	import X from '@lucide/svelte/icons/x';
+	import { fileRoute } from '$lib/files';
+	import { sameFile, tabLabel, type FileTab } from '$lib/file-tabs';
+	import { fileWorkspace } from './file-workspace.svelte';
+	import FileIcon from './FileIcon.svelte';
+	const { course, path, isFile }: { course: string; path: string; isFile: boolean } = $props();
+	const workspace = fileWorkspace();
+	const tabs = $derived(
+		workspace.ready
+			? workspace.tabs
+			: isFile
+				? [{ course, path, pinned: false, top: 0, left: 0 }]
+				: []
+	);
+	let strip = $state<HTMLElement>();
+	let dragging = $state<FileTab>();
+	let preview = $state({ left: 0, top: 0, width: 0, height: 0 });
+	let gesture: { tab: FileTab; x: number; left: number; centers: number[] } | undefined;
+	let suppressClick = false;
+
+	function startDrag(event: PointerEvent, tab: FileTab) {
+		if (
+			event.button !== 0 ||
+			event.ctrlKey ||
+			event.metaKey ||
+			event.altKey ||
+			event.shiftKey ||
+			!strip
+		)
+			return;
+		suppressClick = false;
+		const bounds = (event.currentTarget as HTMLElement).parentElement!.getBoundingClientRect();
+		preview = { left: bounds.left, top: bounds.top, width: bounds.width, height: bounds.height };
+		gesture = {
+			tab,
+			x: event.clientX,
+			left: bounds.left,
+			centers: Array.from(strip.children, (child) => {
+				const element = child as HTMLElement;
+				return element.offsetLeft + element.offsetWidth / 2;
+			})
+		};
+	}
+
+	function drag(event: PointerEvent) {
+		if (!gesture || !strip) return;
+		if (event.buttons === 0) return endDrag();
+		if (!dragging && Math.abs(event.clientX - gesture.x) < 6) return;
+		if (!dragging) {
+			dragging = gesture.tab;
+			strip.setPointerCapture(event.pointerId);
+		}
+		preview.left = gesture.left + event.clientX - gesture.x;
+		const bounds = strip.getBoundingClientRect();
+		if (event.clientX < bounds.left + 32) strip.scrollLeft -= 16;
+		else if (event.clientX > bounds.right - 32) strip.scrollLeft += 16;
+		const x = event.clientX - bounds.left + strip.scrollLeft;
+		const destination = gesture.centers.reduce(
+			(nearest, center, index, centers) =>
+				Math.abs(center - x) < Math.abs(centers[nearest] - x) ? index : nearest,
+			0
+		);
+		workspace.move(gesture.tab, destination);
+	}
+
+	function endDrag() {
+		if (!gesture) return;
+		suppressClick = !!dragging;
+		dragging = undefined;
+		gesture = undefined;
+	}
+
+	function activate(event: MouseEvent, tab: FileTab) {
+		if (suppressClick) {
+			event.preventDefault();
+			suppressClick = false;
+			return;
+		}
+		workspace.activate(event, tab.course, tab.path);
+	}
+
+	async function reorderWithKeyboard(event: KeyboardEvent, tab: FileTab) {
+		if (!event.altKey || !['ArrowLeft', 'ArrowRight'].includes(event.key)) return;
+		event.preventDefault();
+		const link = event.currentTarget as HTMLElement;
+		workspace.move(
+			tab,
+			tabs.findIndex((item) => sameFile(item, tab)) + (event.key === 'ArrowLeft' ? -1 : 1)
+		);
+		await tick();
+		link.focus({ preventScroll: true });
+	}
+	$effect(() => {
+		course;
+		path;
+		tabs.length;
+		void tick().then(() => {
+			const active = strip?.querySelector<HTMLElement>('[aria-current="page"]');
+			if (!active || !strip) return;
+			const bounds = strip.getBoundingClientRect();
+			const item = active.getBoundingClientRect();
+			if (item.left < bounds.left) strip.scrollLeft += item.left - bounds.left;
+			else if (item.right > bounds.right) strip.scrollLeft += item.right - bounds.right;
+		});
+	});
+	async function close(tab: FileTab) {
+		const next = workspace.close(tab);
+		if (sameFile(tab, { course, path })) await goto(fileRoute(next?.course ?? course, next?.path));
+	}
+</script>
+
+<nav
+	class="relative flex min-w-0 flex-1 overflow-x-auto select-none [scrollbar-width:thin]"
+	aria-label="Open files"
+	bind:this={strip}
+	onpointermove={drag}
+	onpointerup={endDrag}
+	onpointercancel={endDrag}
+	onlostpointercapture={(event) => {
+		if (event.target === strip) endDrag();
+	}}
+	onpointerleave={() => {
+		if (!dragging) endDrag();
+	}}
+>
+	{#each tabs as tab (`${tab.course}/${tab.path}`)}
+		<div
+			animate:flip={{
+				duration: prefersReducedMotion.current || (dragging && sameFile(dragging, tab)) ? 0 : 160
+			}}
+			class="group flex shrink-0 items-center border-r border-border"
+			class:bg-bg={isFile && sameFile(tab, { course, path })}
+			class:opacity-0={dragging && sameFile(dragging, tab)}
+		>
+			<a
+				class="flex min-w-0 touch-pan-y items-center gap-2 py-2 pl-3 pr-1 font-mono text-xs text-muted no-underline aria-[current=page]:text-text"
+				class:italic={!tab.pinned}
+				href={fileRoute(tab.course, tab.path)}
+				aria-current={isFile && sameFile(tab, { course, path }) ? 'page' : undefined}
+				title={`${tab.course}/${tab.path}${!tab.pinned ? ' — double-click to keep open' : ''}`}
+				draggable="false"
+				ondragstart={(event) => event.preventDefault()}
+				aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
+				onpointerdown={(event) => startDrag(event, tab)}
+				onclick={(event) => activate(event, tab)}
+				onkeydown={(event) => reorderWithKeyboard(event, tab)}
+			>
+				<FileIcon name={tab.path.split('/').at(-1)!} /><span class="max-w-64 truncate"
+					>{tabLabel(tab, tabs)}</span
+				>
+			</a>
+			<button
+				class="m-0.5 flex size-6 shrink-0 cursor-pointer items-center justify-center rounded text-muted hover:bg-surface hover:text-text"
+				aria-label={`Close ${tabLabel(tab, tabs)}`}
+				disabled={!workspace.ready}
+				onclick={() => close(tab)}><X size={12} /></button
+			>
+		</div>
+	{/each}
+</nav>
+
+{#if dragging}
+	<div
+		aria-hidden="true"
+		data-drag-preview
+		class="pointer-events-none fixed z-50 flex items-center gap-2 border border-border bg-bg px-3 font-mono text-xs text-text shadow-md"
+		style:left={`${preview.left}px`}
+		style:top={`${preview.top}px`}
+		style:width={`${preview.width}px`}
+		style:height={`${preview.height}px`}
+	>
+		<FileIcon name={dragging.path.split('/').at(-1)!} />
+		<span class="truncate">{tabLabel(dragging, tabs)}</span>
+	</div>
+{/if}

package/site/src/lib/components/files/FileTree.svelte

@@ -0,0 +1,67 @@
+<script lang="ts">
+	import ChevronRight from '@lucide/svelte/icons/chevron-right';
+	import LockKeyhole from '@lucide/svelte/icons/lock-keyhole';
+	import FileIcon from './FileIcon.svelte';
+	import { fileWorkspace } from './file-workspace.svelte';
+	import { fileRoute, type FileNode } from '$lib/files';
+	import Self from './FileTree.svelte';
+	let {
+		nodes,
+		course,
+		current,
+		focus,
+		expanded = $bindable({})
+	}: {
+		nodes: FileNode[];
+		course: string;
+		current: string;
+		focus: string;
+		expanded?: Record<string, boolean>;
+	} = $props();
+	const uid = $props.id();
+	const workspace = fileWorkspace();
+	function open(node: FileNode) {
+		return expanded[node.path] ?? (focus === node.path || focus.startsWith(node.path + '/'));
+	}
+</script>
+
+<ul class="m-0 list-none p-0 select-none">
+	{#each nodes as node (node.path)}
+		<li>
+			<div class="flex min-w-0 items-center rounded hover:bg-surface">
+				{#if node.children}
+					<button
+						class="flex size-6 shrink-0 cursor-pointer items-center justify-center text-muted"
+						aria-label={`Expand ${node.name}`}
+						aria-expanded={open(node)}
+						aria-controls={`${uid}-${node.path}`}
+						onclick={() => (expanded = { ...expanded, [node.path]: !open(node) })}
+					>
+						<ChevronRight size={12} class={open(node) ? 'rotate-90' : ''} />
+					</button>
+				{:else}<span class="w-6 shrink-0"></span>{/if}
+				<a
+					class="flex min-w-0 flex-1 items-center gap-1.5 py-1 pr-1 text-xs text-muted no-underline hover:text-text aria-[current=page]:text-accent"
+					href={fileRoute(course, node.path)}
+					title={node.name}
+					aria-current={current === node.path ? 'page' : undefined}
+					onclick={(event) => {
+						if (node.file) workspace.activate(event, course, node.path);
+					}}
+				>
+					<FileIcon name={node.name} folder={!!node.children} expanded={open(node)} />
+					<span class="truncate">{node.name}</span>
+					{#if node.file?.locked}<LockKeyhole
+							class="ml-auto size-3 shrink-0"
+							aria-label="Locked"
+						/>{/if}
+				</a>
+			</div>
+			{#if node.children && open(node)}
+				<div id={`${uid}-${node.path}`} class="ml-3 border-l border-border pl-1">
+					<Self nodes={node.children} {course} {current} {focus} bind:expanded />
+				</div>
+			{/if}
+		</li>
+	{/each}
+</ul>

package/site/src/lib/components/files/blame-gutter.ts

@@ -0,0 +1,45 @@
+import { gutter, GutterMarker } from '@codemirror/view';
+import { blameAt, type FileBlame, type FileCommit } from '$lib/file-history';
+
+class BlameMarker extends GutterMarker {
+	constructor(
+		readonly commit: FileCommit,
+		readonly first: boolean,
+		readonly select: (id: string) => void
+	) {
+		super();
+	}
+	eq(other: BlameMarker) {
+		return this.commit.id === other.commit.id && this.first === other.first;
+	}
+	toDOM() {
+		const button = document.createElement('button');
+		button.className = 'file-blame-line';
+		button.tabIndex = this.first ? 0 : -1;
+		button.textContent = this.first ? `${this.commit.id.slice(0, 7)} ${this.commit.author}` : '│';
+		button.title = `${this.commit.author} · ${this.commit.date.slice(0, 10)}\n${this.commit.subject}`;
+		button.setAttribute(
+			'aria-label',
+			`Commit ${this.commit.id.slice(0, 7)}: ${this.commit.subject}`
+		);
+		button.onclick = () => this.select(this.commit.id);
+		return button;
+	}
+}
+
+export function blameGutter(blame: FileBlame, select: (id: string) => void) {
+	return gutter({
+		class: 'file-blame',
+		lineMarker(view, line) {
+			const number = view.state.doc.lineAt(line.from).number;
+			const found = blameAt(blame, number);
+			return found?.commit
+				? new BlameMarker(
+						found.commit,
+						found.start === number || line.from === view.viewport.from,
+						select
+					)
+				: null;
+		}
+	});
+}

package/site/src/lib/components/files/code-view.ts

@@ -0,0 +1,98 @@
+import { Compartment, EditorState } from '@codemirror/state';
+import { EditorView, drawSelection, keymap, lineNumbers } from '@codemirror/view';
+import { defaultKeymap } from '@codemirror/commands';
+import { search, searchKeymap } from '@codemirror/search';
+import {
+	defaultHighlightStyle,
+	LanguageDescription,
+	syntaxHighlighting
+} from '@codemirror/language';
+import { languages } from '@codemirror/language-data';
+import type { FileBlame } from '$lib/file-history';
+import { blameGutter } from './blame-gutter';
+
+const theme = EditorView.theme({
+	'.file-blame-line': {
+		display: 'block',
+		width: '13rem',
+		height: '19.8px',
+		padding: '0 8px',
+		overflow: 'hidden',
+		textOverflow: 'ellipsis',
+		whiteSpace: 'nowrap',
+		textAlign: 'left',
+		cursor: 'pointer',
+		font: 'inherit'
+	},
+	'&': {
+		height: '100%',
+		fontSize: '12px',
+		color: 'var(--color-text)',
+		backgroundColor: 'var(--color-bg)'
+	},
+	'&.cm-focused': { outline: 'none' },
+	'.cm-scroller': {
+		fontFamily: 'var(--font-mono, monospace)',
+		lineHeight: '1.65',
+		overflow: 'auto'
+	},
+	'.cm-content': { padding: '8px 0' },
+	'.cm-line': { padding: '0 8px' },
+	'.cm-gutters': {
+		backgroundColor: 'var(--color-bg)',
+		color: 'var(--color-muted)',
+		borderRight: '1px solid var(--color-border)'
+	},
+	'.cm-lineNumbers .cm-gutterElement': { minWidth: '3rem', padding: '0 8px' },
+	'.cm-selectionBackground, &.cm-focused .cm-selectionBackground': {
+		backgroundColor: 'color-mix(in srgb, var(--color-accent) 25%, transparent)'
+	},
+	'.cm-panels': { backgroundColor: 'var(--color-surface)', color: 'var(--color-text)' },
+	'.cm-textfield, .cm-button': {
+		background: 'var(--color-bg)',
+		color: 'var(--color-text)',
+		border: '1px solid var(--color-border)'
+	},
+	'.cm-searchMatch': { backgroundColor: 'color-mix(in srgb, var(--color-accent) 25%, transparent)' }
+});
+
+export function createCodeView(parent: HTMLElement, text: string, filename: string) {
+	const language = new Compartment();
+	const blame = new Compartment();
+	const view = new EditorView({
+		parent,
+		state: EditorState.create({
+			doc: text,
+			extensions: [
+				EditorState.readOnly.of(true),
+				EditorView.editable.of(false),
+				EditorView.contentAttributes.of({ tabindex: '0', 'aria-label': 'Source code' }),
+				blame.of([]),
+				lineNumbers(),
+				drawSelection(),
+				search({ top: true }),
+				keymap.of([...searchKeymap, ...defaultKeymap]),
+				syntaxHighlighting(defaultHighlightStyle),
+				language.of([]),
+				theme
+			]
+		})
+	});
+	view.scrollDOM.classList.add('file-content');
+	let disposed = false;
+	void LanguageDescription.matchFilename(languages, filename)
+		?.load()
+		.then((extension) => {
+			if (!disposed) view.dispatch({ effects: language.reconfigure(extension) });
+		})
+		.catch(() => {});
+	return {
+		view,
+		setBlame: (data: FileBlame | undefined, select: (id: string) => void) =>
+			view.dispatch({ effects: blame.reconfigure(data ? blameGutter(data, select) : []) }),
+		destroy: () => {
+			disposed = true;
+			view.destroy();
+		}
+	};
+}

package/site/src/lib/components/files/file-workspace.svelte.ts

@@ -0,0 +1,100 @@
+import { getContext, setContext } from 'svelte';
+import { goto } from '$app/navigation';
+import { fileRoute } from '$lib/files';
+import { moveTab, openFile, restoreTabs, sameFile, type FileTab } from '$lib/file-tabs';
+import { page } from '$app/state';
+
+const context = Symbol('file-workspace');
+function storageKey() {
+	return page.data.edition === 'public' ? 'wisconsin-public-file-tabs' : 'wisconsin-file-tabs';
+}
+
+class FileWorkspace {
+	tabs = $state<FileTab[]>([]);
+	ready = $state(false);
+	private lastClick?: { course: string; path: string; time: number };
+	private touchNavigation?: ReturnType<typeof setTimeout>;
+
+	activate(event: MouseEvent, course: string, path: string) {
+		if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)
+			return;
+		const repeated =
+			event.detail > 0 &&
+			this.lastClick &&
+			sameFile(this.lastClick, { course, path }) &&
+			event.timeStamp - this.lastClick.time < 500;
+		const pinned = event.detail > 1 || !!repeated;
+		this.lastClick =
+			pinned || event.detail === 0 ? undefined : { course, path, time: event.timeStamp };
+		this.open(course, path, pinned);
+		if ('pointerType' in event && event.pointerType === 'touch') {
+			event.preventDefault();
+			clearTimeout(this.touchNavigation);
+			if (pinned) void goto(fileRoute(course, path));
+			else
+				this.touchNavigation = setTimeout(() => {
+					void goto(fileRoute(course, path));
+				}, 300);
+		}
+	}
+
+	restore() {
+		try {
+			this.tabs = restoreTabs(sessionStorage.getItem(storageKey()));
+		} catch {
+			this.tabs = [];
+		}
+		this.ready = true;
+	}
+
+	private save() {
+		if (!this.ready) return;
+		try {
+			sessionStorage.setItem(storageKey(), JSON.stringify(this.tabs));
+		} catch {}
+	}
+
+	open(course: string, path: string, pinned = false) {
+		this.tabs = openFile(this.tabs, course, path, pinned);
+		this.save();
+	}
+
+	remember(course: string, path: string, viewport: HTMLElement) {
+		this.tabs = this.tabs.map((tab) =>
+			sameFile(tab, { course, path })
+				? { ...tab, top: viewport.scrollTop, left: viewport.scrollLeft }
+				: tab
+		);
+		this.save();
+	}
+
+	close(tab: FileTab) {
+		const index = this.tabs.findIndex((item) => sameFile(item, tab));
+		this.tabs = this.tabs.filter((item) => !sameFile(item, tab));
+		this.save();
+		return this.tabs[Math.min(index, this.tabs.length - 1)];
+	}
+
+	move(tab: FileTab, destination: number) {
+		this.lastClick = undefined;
+		const reordered = moveTab(this.tabs, tab, destination);
+		if (reordered === this.tabs) return;
+		this.tabs = reordered;
+		this.save();
+	}
+
+	clear() {
+		clearTimeout(this.touchNavigation);
+		this.lastClick = undefined;
+		this.tabs = [];
+		this.save();
+	}
+}
+
+export function provideFileWorkspace() {
+	return setContext(context, new FileWorkspace());
+}
+
+export function fileWorkspace() {
+	return getContext<FileWorkspace>(context);
+}