@shivaedev/work-board 0.13.0 → 0.14.0

package/src/client/react/ResultCriteria.tsx

@@ -1,4 +1,4 @@
-import { Fragment } from "react";
+import { Fragment, type ReactNode } from "react";
 import type { ResultProjection } from "#browser/views/ResultProjection.ts";
 import { keyed } from "./keyed.ts";
 import { shellIds } from "./shellIds.ts";
@@ -10,13 +10,10 @@ export function ResultCriteria({ data }: { readonly data: ResultProjection }) {
 	const targets = data.targets.map((target) => <TargetRow key={target.link.label} target={target} />);
 	return (
 		<section id={shellIds.resultCriteria}>
-			<h2>Criteria and this result’s claims</h2>
-			<p>
-				Only explicit relationships and criterion references are associated. Missing provenance stays missing. Git revisions are authored records;
-				Work Board does not compare them with the current checkout. Evidence freshness is unknown.
-			</p>
+			<h2 title="Only explicit relationships and criterion references are associated. Git revisions are authored records; Work Board does not compare them with the current checkout. Evidence freshness is unknown. This result does not change the linked work’s status.">
+				Criteria and this result’s claims
+			</h2>
 			{targets.length > 0 ? <ul>{targets}</ul> : <p>No explicitly linked work or criteria.</p>}
-			<p>{data.document.file} does not change the linked work’s status.</p>
 		</section>
 	);
 }
@@ -27,7 +24,7 @@ function TargetRow({ target }: { readonly target: Target }) {
 			<a href={target.link.href}>{target.link.label}</a>
 			{target.available ? (
 				<>
-					<span> · source status: {target.status ?? "Not recorded"}</span>
+					{Boolean(target.status) && <span> · source status: {target.status}</span>}
 					{criteria.length > 0 ? <ul>{criteria}</ul> : <p>No criteria declared in this source.</p>}
 				</>
 			) : (
@@ -37,14 +34,16 @@ function TargetRow({ target }: { readonly target: Target }) {
 	);
 }
 function CriterionRow({ criterion }: { readonly criterion: Criterion }) {
-	let evidence = <p>No recorded evidence in this result naming this criterion. Acceptance is not established.</p>;
+	let evidence: ReactNode = null;
 	if (!criterion.link.href) {
 		evidence = <p>This criterion identity is ambiguous; evidence association unavailable.</p>;
 	} else if (criterion.claims.length > 0) {
 		const claims = keyed(criterion.claims, (entry) => entry.source.label).map(({ key, value }) => <ClaimRow claim={value} key={key} />);
 		evidence = (
 			<>
-				<p>{criterion.claims.length} recorded claim(s) in this result; not verified acceptance.</p>
+				<p title="Recorded claims do not establish verified acceptance.">
+					{criterion.claims.length} recorded {criterion.claims.length === 1 ? "claim" : "claims"}
+				</p>
 				<ul>{claims}</ul>
 			</>
 		);
@@ -65,7 +64,7 @@ function ClaimRow({ claim }: { readonly claim: Claim }) {
 	].map(([label, value]) => (
 		<Fragment key={label}>
 			<dt>{label}</dt>
-			<dd>{value ?? "Not recorded"}</dd>
+			<dd>{value ?? ""}</dd>
 		</Fragment>
 	));
 	return (

package/src/client/react/ResultPage.tsx

@@ -1,6 +1,7 @@
 import type { ResultProjection } from "#browser/views/ResultProjection.ts";
 import { fileUrl } from "#files/url.ts";
 import { DocumentMetadata } from "./DocumentMetadata.tsx";
+import { ReadingPanel } from "./ReadingPanel.tsx";
 import { ResponseMarkdown } from "./ResponseMarkdown.tsx";
 import { ResultCriteria } from "./ResultCriteria.tsx";
 import { ResultFeedback } from "./ResultFeedback.tsx";
@@ -18,11 +19,12 @@ export function ResultPage({ data }: { readonly data: ResultProjection }) {
 		</li>
 	));
 	return (
-		<section className="response-panel">
+		<ReadingPanel className="response-panel">
 			<h1>Review returned result · {document.identity}</h1>
 			<p>
-				Result status (source): <b>{document.metadata.status ?? "Not recorded"}</b>. This is a supplied claim, not an execution receipt or work
-				acceptance.
+				<span title="A supplied claim does not establish execution or work acceptance.">
+					Result status: <b>{document.metadata.status}</b>
+				</span>
 			</p>
 			<p>
 				Current report SHA-256: <code>{data.revision}</code> · <a href={fileUrl(document.file)}>Read source</a>
@@ -45,6 +47,6 @@ export function ResultPage({ data }: { readonly data: ResultProjection }) {
 				<ResponseMarkdown file={document.file} source={document.source} />
 			</section>
 			<ResultFeedback data={data} />
-		</section>
+		</ReadingPanel>
 	);
 }

package/src/client/react/SearchDialog.tsx

@@ -1,11 +1,7 @@
-import { Option } from "effect";
-import { useEffect, useRef, useState } from "react";
-import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { useState } from "react";
 import { Modal } from "#client/react/Modal.tsx";
-import { SearchResults } from "#client/react/SearchResults.tsx";
+import { SearchPalette } from "#client/react/SearchPalette.tsx";
 import type { ShellApi } from "#client/react/ShellApi.ts";
-import { type SearchItem, searchCommands } from "#client/react/searchCommands.ts";
-import { searchStatus } from "#client/react/searchStatus.ts";
 import { shellIds } from "#client/react/shellIds.ts";
 import type { AppearanceControls } from "#client/react/useAppearance.ts";
 
@@ -26,111 +22,24 @@ export function SearchDialog({
 }) {
 	const [input, setInput] = useState("");
 	return (
-		<Modal close={close} focus="search-query" id={shellIds.searchDialog} open={open} returnFocus={returnFocus} title="search-title">
+		<Modal
+			className="command-palette"
+			close={close}
+			focus="search-query"
+			id={shellIds.searchDialog}
+			open={open}
+			returnFocus={returnFocus}
+			title="search-title"
+		>
 			<div className="search-header">
 				<h2 id={shellIds.searchTitle}>Find work</h2>
 				<button aria-label="Close search" id={shellIds.searchClose} onClick={() => close()} type="button">
 					Close
 				</button>
 			</div>
-			{open ? <Search api={api} appearance={appearance} close={close} input={input} setInput={setInput} toggleSidebar={toggleSidebar} /> : null}
+			{open ? (
+				<SearchPalette api={api} appearance={appearance} close={close} input={input} setInput={setInput} toggleSidebar={toggleSidebar} />
+			) : null}
 		</Modal>
 	);
 }
-function Search({
-	api,
-	close,
-	appearance,
-	toggleSidebar,
-	input,
-	setInput,
-}: {
-	readonly api: ShellApi;
-	readonly close: () => void;
-	readonly appearance: AppearanceControls;
-	readonly toggleSidebar: () => void;
-	readonly input: string;
-	readonly setInput: (input: string) => void;
-}) {
-	const [text, setText] = useState(() => input.trim());
-	const [selected, setSelected] = useState(0);
-	const ref = useRef<HTMLInputElement>(null);
-	const query = useQuery(api.search.query({ query: text }));
-	const data = Option.getOrUndefined(query.data);
-	const commands = searchCommands.filter((item) => item.title.toLowerCase().includes(text.toLowerCase()));
-	const editing = input.trim() !== text;
-	const items = editing ? [] : [...commands, ...(text && data ? data.results : [])];
-	useEffect(() => {
-		setSelected((current) => Math.min(current, Math.max(0, items.length - 1)));
-	}, [items.length]);
-	useEffect(() => {
-		const timer = setTimeout(() => {
-			setText(input.trim());
-			setSelected(0);
-		}, 150);
-		return () => clearTimeout(timer);
-	}, [input]);
-	useEffect(() => {
-		document.getElementById(`search-result-${selected}`)?.scrollIntoView({ block: "nearest" });
-	}, [selected]);
-	function activate(item: SearchItem) {
-		if (item.command === "sidebar-toggle") {
-			toggleSidebar();
-		}
-		if (item.command === "density") {
-			appearance.change({ density: appearance.density === "compact" ? "comfortable" : "compact" });
-		}
-		if (item.command === "theme") {
-			appearance.change({ theme: appearance.theme === "dark" ? "light" : "dark" });
-		}
-		if (!item.command) {
-			ref.current?.closest("dialog")?.close("navigate");
-		}
-		close();
-	}
-	const status = searchStatus(text, query.pending || editing, Option.isSome(query.cause), data);
-	return (
-		<>
-			<form
-				id={shellIds.searchForm}
-				onSubmit={(event) => {
-					event.preventDefault();
-					setText(input.trim());
-					query.refresh();
-				}}
-			>
-				<label htmlFor="search-query">Search documents, headings, and passages</label>
-				<input
-					aria-activedescendant={items[selected] ? `search-result-${selected}` : undefined}
-					aria-autocomplete="list"
-					aria-controls="search-results"
-					aria-expanded="true"
-					autoComplete="off"
-					id={shellIds.searchQuery}
-					maxLength={200}
-					onInput={(event) => setInput(event.currentTarget.value)}
-					onKeyDown={(event) => {
-						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-							event.preventDefault();
-							setSelected((current) => (items.length > 0 ? (current + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length : 0));
-						}
-						if (event.key === "Enter" && items[selected]) {
-							event.preventDefault();
-							document.getElementById(`search-result-${selected}`)?.click();
-						}
-					}}
-					ref={ref}
-					role="combobox"
-					type="search"
-					value={input}
-				/>
-				<button type="submit">Search</button>
-			</form>
-			<p className="search-help">Ctrl/Cmd+K to open · ↑/↓ to choose · Enter to open · Escape to close</p>
-			<p id={shellIds.searchStatus} role="status">
-				{status}
-			</p>
-			<SearchResults activate={activate} items={items} selected={selected} />
-		</>
-	);
-}

package/src/client/react/SearchPalette.tsx

@@ -0,0 +1,129 @@
+import { Option } from "effect";
+import { useEffect, useRef, useState } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import { SearchResults } from "#client/react/SearchResults.tsx";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { matchingCommands, type SearchItem } from "#client/react/searchCommands.ts";
+import { searchStatus } from "#client/react/searchStatus.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import type { AppearanceControls } from "#client/react/useAppearance.ts";
+import { KeyboardHints } from "./KeyboardHints.tsx";
+
+export function SearchPalette({
+	api,
+	close,
+	appearance,
+	toggleSidebar,
+	input,
+	setInput,
+}: {
+	readonly api: ShellApi;
+	readonly close: () => void;
+	readonly appearance: AppearanceControls;
+	readonly toggleSidebar: () => void;
+	readonly input: string;
+	readonly setInput: (input: string) => void;
+}) {
+	const [text, setText] = useState(() => input.trim());
+	const [selected, setSelected] = useState(0);
+	const ref = useRef<HTMLInputElement>(null);
+	const query = useQuery(api.search.query({ query: text }));
+	const data = Option.getOrUndefined(query.data);
+	const goals = useQuery(api.goals.query());
+	const commands = matchingCommands(Option.getOrUndefined(goals.data)?.goals ?? [], text);
+	const editing = input.trim() !== text;
+	const destinations = new Set<string>();
+	const items = editing
+		? []
+		: [...commands, ...(text && data ? data.results : [])].filter((item: SearchItem) => {
+				const destination = item.href ?? item.command;
+				if (!destination) {
+					return true;
+				}
+				if (destinations.has(destination)) {
+					return false;
+				}
+				destinations.add(destination);
+				return true;
+			});
+	useEffect(() => {
+		setSelected((current) => Math.min(current, Math.max(0, items.length - 1)));
+	}, [items.length]);
+	useEffect(() => {
+		const timer = setTimeout(() => {
+			setText(input.trim());
+			setSelected(0);
+		}, 150);
+		return () => clearTimeout(timer);
+	}, [input]);
+	useEffect(() => {
+		document.getElementById(`search-result-${selected}`)?.scrollIntoView({ block: "nearest" });
+	}, [selected]);
+	function activate(item: SearchItem) {
+		activateAppearance(item.command, appearance, toggleSidebar);
+		if (!item.command) {
+			ref.current?.closest("dialog")?.close("navigate");
+		}
+		close();
+	}
+	const status = searchStatus(text, query.pending || editing, Option.isSome(query.cause), data);
+	return (
+		<>
+			<form
+				id={shellIds.searchForm}
+				onSubmit={(event) => {
+					event.preventDefault();
+					setText(input.trim());
+					query.refresh();
+				}}
+			>
+				<label htmlFor="search-query">Search work or go to a view</label>
+				<input
+					aria-activedescendant={items[selected] ? `search-result-${selected}` : undefined}
+					aria-autocomplete="list"
+					aria-controls="search-results"
+					aria-expanded="true"
+					autoComplete="off"
+					id={shellIds.searchQuery}
+					maxLength={200}
+					onInput={(event) => setInput(event.currentTarget.value)}
+					onKeyDown={(event) => {
+						if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+							event.preventDefault();
+							setSelected((current) => (items.length > 0 ? (current + (event.key === "ArrowDown" ? 1 : -1) + items.length) % items.length : 0));
+						}
+						if (event.key === "Enter" && items[selected]) {
+							event.preventDefault();
+							document.getElementById(`search-result-${selected}`)?.click();
+						}
+					}}
+					ref={ref}
+					role="combobox"
+					type="search"
+					value={input}
+				/>
+				<button type="submit">Search</button>
+			</form>
+			<KeyboardHints>
+				<p className="search-help">↑/↓ to choose · Enter to open · Escape to close</p>
+			</KeyboardHints>
+			<p className="mx-4 my-2 text-muted-foreground text-xs">Use records: to include Fleet records.</p>
+			<p id={shellIds.searchStatus} role="status">
+				{status}
+			</p>
+			<SearchResults activate={activate} items={items} selected={selected} />
+		</>
+	);
+}
+
+function activateAppearance(command: string | undefined, appearance: AppearanceControls, toggleSidebar: () => void) {
+	if (command === "sidebar-toggle") {
+		toggleSidebar();
+	}
+	if (command === "density") {
+		appearance.change({ density: appearance.density === "compact" ? "comfortable" : "compact" });
+	}
+	if (command === "theme") {
+		appearance.change({ theme: appearance.theme === "dark" ? "light" : "dark" });
+	}
+}

package/src/client/react/SearchResults.tsx

@@ -1,3 +1,4 @@
+import { StatusChip } from "#client/react/components/ui/StatusChip.tsx";
 import type { SearchItem } from "./searchCommands.ts";
 import { shellIds } from "./shellIds.ts";
 export function SearchResults({
@@ -11,7 +12,7 @@ export function SearchResults({
 }) {
 	const occurrences = new Map<string, number>();
 	function resultKey(item: SearchItem) {
-		const identity = JSON.stringify([item.command, item.href, item.file, item.kind, item.line, item.snippet, item.title]);
+		const identity = JSON.stringify([item.command, item.href, item.file, item.id, item.kind, item.line, item.snippet, item.title]);
 		const occurrence = occurrences.get(identity) ?? 0;
 		occurrences.set(identity, occurrence + 1);
 		return `${identity}:${occurrence}`;
@@ -36,8 +37,10 @@ export function SearchResults({
 					>
 						<strong>{item.title}</strong>
 						<small>
-							{item.kind}
-							{item.file ? ` · ${item.file}${item.line ? `:${item.line}` : ""}` : ""}
+							{item.itemKind ?? item.kind}
+							{Boolean(item.id) && <code className="font-mono">{item.id}</code>}
+							{Boolean(item.status) && <StatusChip status={item.status} />}
+							{!item.id && item.file ? ` · ${item.file}${item.line ? `:${item.line}` : ""}` : ""}
 						</small>
 						{Boolean(item.snippet) && <p>{item.snippet}</p>}
 					</a>

package/src/client/react/SettingsPopover.tsx

@@ -0,0 +1,43 @@
+import { Settings } from "lucide-react";
+import type { ReactNode } from "react";
+import { Popover } from "#client/react/components/ui/Popover.tsx";
+import { shellIds } from "./shellIds.ts";
+import type { AppearanceControls } from "./useAppearance.ts";
+export function SettingsPopover({ appearance, updates }: { readonly appearance: AppearanceControls; readonly updates: ReactNode }) {
+	return (
+		<Popover label="Settings" trigger={<Settings aria-hidden="true" />} triggerId="settings-open">
+			<fieldset aria-label="Reading preferences" className="m-0 grid gap-4 border-0 p-0">
+				<legend className="mb-3 font-semibold">Settings</legend>
+				<label className="grid gap-1" htmlFor={shellIds.theme}>
+					Theme
+					<select
+						className="h-9 rounded-md border bg-background px-2 text-foreground"
+						id={shellIds.theme}
+						onChange={(event) => appearance.change({ theme: event.target.value })}
+						value={appearance.theme}
+					>
+						<option value="system">System</option>
+						<option value="light">Light</option>
+						<option value="dark">Dark</option>
+					</select>
+				</label>
+				<label className="grid gap-1" htmlFor={shellIds.density}>
+					Density
+					<select
+						className="h-9 rounded-md border bg-background px-2 text-foreground"
+						id={shellIds.density}
+						onChange={(event) => appearance.change({ density: event.target.value })}
+						value={appearance.density}
+					>
+						<option value="comfortable">Comfortable</option>
+						<option value="compact">Compact</option>
+					</select>
+				</label>
+				{updates}
+				<span className="text-muted-foreground text-xs empty:hidden" id={shellIds.preferenceStatus} role="status">
+					{appearance.notice}
+				</span>
+			</fieldset>
+		</Popover>
+	);
+}

package/src/client/react/ShellApi.ts

@@ -3,11 +3,12 @@ export interface ShellApi {
 	readonly board: Pick<BrowserClient["api"]["board"], "query">;
 	readonly diagnostics: Pick<BrowserClient["api"]["diagnostics"], "query">;
 	readonly document: Pick<BrowserClient["api"]["document"], "query">;
+	readonly fleetItems: Pick<BrowserClient["api"]["fleetItems"], "query">;
+	readonly goals: Pick<BrowserClient["api"]["goals"], "query">;
 	readonly handoff: Pick<BrowserClient["api"]["handoff"], "query">;
-	readonly history: Pick<BrowserClient["api"]["history"], "query">;
 	readonly inbox: Pick<BrowserClient["api"]["inbox"], "query">;
+	readonly library: Pick<BrowserClient["api"]["library"], "query">;
 	readonly navigation: Pick<BrowserClient["api"]["navigation"], "query">;
-	readonly overview: Pick<BrowserClient["api"]["overview"], "query">;
 	readonly respond: Pick<BrowserClient["api"]["respond"], "query">;
 	readonly result: Pick<BrowserClient["api"]["result"], "query">;
 	readonly search: Pick<BrowserClient["api"]["search"], "query">;

package/src/client/react/Sidebar.tsx

@@ -1,57 +1,45 @@
-import { useEffect } from "react";
-import type { Navigation } from "#browser/navigation/schema.ts";
-import { InboxCount } from "./Header.tsx";
-import type { MainLocation } from "./mainLocation.ts";
-import { NavigationTree } from "./NavigationTree.tsx";
-import { shellIds } from "./shellIds.ts";
-import type { SidebarControls } from "./useSidebar.ts";
+import { Option } from "effect";
+import { PanelsTopLeft } from "lucide-react";
+import { useContext, useEffect } from "react";
+import { useQuery } from "@shivaedev/effect-react/result-state.ts";
+import type { Navigation } from "#browser/Navigation.ts";
+import { Badge } from "#client/react/components/ui/Badge.tsx";
+import { buttonVariants } from "#client/react/components/ui/buttonVariants.ts";
+import { GoalProgress } from "#client/react/GoalProgress.tsx";
+import { InboxCount } from "#client/react/Header.tsx";
+import { cn } from "#client/react/lib/cn.ts";
+import type { MainLocation } from "#client/react/mainLocation.ts";
+import { type Item, LibraryContext } from "#client/react/readingLibrary.ts";
+import type { ShellApi } from "#client/react/ShellApi.ts";
+import { shellIds } from "#client/react/shellIds.ts";
+import type { SidebarControls } from "#client/react/useSidebar.ts";
+import { workspaceDestinations } from "#client/react/workspaceDestinations.ts";
+import { fileUrl } from "#files/url.ts";
 
-const views = [
-	["overview", "Overview"],
-	["work", "Work"],
-	["changes", "Changes"],
-	["diagnostics", "Diagnostics"],
-] as const;
 export function Sidebar({
+	api,
 	data,
 	main,
 	home,
 	controls,
 	openLibrary,
 }: {
+	readonly api: ShellApi;
 	readonly data: Navigation | undefined;
 	readonly main: MainLocation;
 	readonly home: boolean;
 	readonly controls: SidebarControls;
 	readonly openLibrary: () => void;
 }) {
+	const reading = useContext(LibraryContext);
+	const query = useQuery(api.goals.query(undefined, { timeToLive: 60_000 }), { keepPreviousData: true });
+	const goals = Option.getOrUndefined(query.data)?.goals;
+	const counts = {
+		today: data?.inboxCount,
+		work: data?.counts.now,
+	};
 	useEffect(() => {
-		if (!controls.open) {
-			return;
-		}
-		const frame = requestAnimationFrame(() => {
-			const selected = main.file;
-			const tree = document.getElementById("files");
-			const active = tree?.querySelector('a[aria-current="page"]');
-			if (!(data && selected && tree && active)) {
-				return;
-			}
-			if (active.closest("details:not([open])")) {
-				return;
-			}
-			const bounds = tree.getBoundingClientRect();
-			const row = active.getBoundingClientRect();
-			if (row.top < bounds.top) {
-				tree.scrollTop += row.top - bounds.top;
-			} else if (row.bottom > bounds.bottom) {
-				tree.scrollTop += row.bottom - bounds.bottom;
-			}
-		});
-		return () => cancelAnimationFrame(frame);
-	}, [data, main.file, controls.open]);
-
-	useEffect(() => {
-		const sidebar = document.getElementById("sidebar");
+		const sidebar = document.getElementById(shellIds.sidebar);
 		if (controls.narrow && controls.open) {
 			sidebar?.setAttribute("aria-modal", "true");
 		} else {
@@ -61,42 +49,74 @@ export function Sidebar({
 	return (
 		<aside
 			aria-label="Workspace navigation"
-			className="sidebar"
+			className="sticky top-0 flex h-dvh flex-col gap-5 overflow-y-auto border-r bg-card p-4 text-card-foreground max-md:fixed max-md:inset-y-0 max-md:left-0 max-md:z-40 max-md:w-[min(320px,calc(100vw-48px))] print:hidden"
 			hidden={!controls.open}
 			id={shellIds.sidebar}
 			role={controls.narrow && controls.open ? "dialog" : undefined}
 		>
-			<a className="brand" href="/">
-				work board<span>Local workspace</span>
+			<a
+				aria-current={home ? "page" : undefined}
+				className="flex items-center gap-2 px-2 py-3 font-semibold text-lg text-primary no-underline"
+				href="/"
+			>
+				<PanelsTopLeft aria-hidden="true" className="size-5" />
+				work board
 			</a>
-			<nav aria-label="Workspace" className="primary-navigation" id={shellIds.primaryNavigation}>
-				<a aria-current={home ? "page" : undefined} href="/" id={shellIds.homeOpen}>
-					Home
-				</a>
-				<a aria-current={main.view === "inbox" ? "page" : undefined} className="inbox-link" href="/_board/inbox" id={shellIds.inboxOpen}>
-					Inbox <InboxCount count={data?.inboxCount ?? null} id={shellIds.inboxCount} />
-				</a>
-				{views.map(([view, label]) => (
+			<nav aria-label="Workspace" className="grid shrink-0 gap-1" data-inbox-count={String(data?.inboxCount ?? "?")} id={shellIds.primaryNavigation}>
+				{workspaceDestinations.map(({ label, href, view, id }) => (
 					<a
-						aria-current={main.view === view ? "page" : undefined}
-						href={`/_board/${view}${view === "work" ? "?view=board" : ""}`}
-						id={`${view}-open`}
+						aria-current={(view === "today" ? home : main.view === view) ? "page" : undefined}
+						className={cn(
+							buttonVariants({ variant: "ghost" }),
+							"justify-between no-underline",
+							(view === "today" ? home : main.view === view) && "bg-accent",
+						)}
+						href={href}
+						id={id}
 						key={view}
 					>
-						{label}
+						<span>{label}</span>
+						{view === "today" && <InboxCount count={counts.today ?? null} id={shellIds.inboxCount} />}
+						{view === "work" && <Badge>{counts.work ?? "?"}</Badge>}
 					</a>
 				))}
 			</nav>
-			<button aria-controls="library-dialog" aria-haspopup="dialog" id={shellIds.libraryOpen} onClick={() => openLibrary()} type="button">
-				Recent documents
+			<ReadingSection current={main.file} items={reading.favorites} title="Pinned" />
+			<section aria-label="Active goals">
+				<h2 className="mb-2 px-2 font-semibold text-muted-foreground text-xs">Active goals</h2>
+				{goals?.length === 0 && <p className="px-2 text-muted-foreground text-xs">No active goals.</p>}
+				{goals?.map((goal) => (
+					<div className="mb-3 px-2" key={goal.id}>
+						<a className="block truncate text-sm" href={`/_board/item/${encodeURIComponent(goal.id)}/`}>
+							{goal.title}
+						</a>
+						<GoalProgress compact counts={goal.counts} title={goal.title} />
+					</div>
+				))}
+			</section>
+			<ReadingSection current={main.file} items={reading.recents.slice(0, 5)} title="Recent" />
+			<button className="mt-auto text-left text-muted-foreground text-xs" id={shellIds.libraryOpen} onClick={() => openLibrary()} type="button">
+				Reading history
 			</button>
-			<a className="start-open" href="/_board/start" id={shellIds.startOpen}>
-				Getting started
-			</a>
-			<h2 className="nav-heading">Project files</h2>
-			<nav aria-label="Project files" className="files" id={shellIds.files}>
-				{data ? <NavigationTree current={main.view ? "" : main.file} data={data} /> : <p role="status">Loading files…</p>}
-			</nav>
 		</aside>
 	);
 }
+function ReadingSection({ title, items, current }: { readonly title: string; readonly items: readonly Item[]; readonly current: string }) {
+	return (
+		<section aria-label={title}>
+			<h2 className="mb-2 px-2 font-semibold text-muted-foreground text-xs">{title}</h2>
+			<ul className="m-0 grid list-none gap-2 p-0">
+				{items.map((item) => (
+					<li className="min-w-0 px-2 text-sm" key={item.file}>
+						<a aria-current={item.file === current ? "page" : undefined} className="block truncate" href={fileUrl(item.file)} title={item.title}>
+							{item.title}
+						</a>
+					</li>
+				))}
+			</ul>
+			{items.length === 0 && (
+				<p className="px-2 text-muted-foreground text-xs">{title === "Pinned" ? "Pin a document to keep it here." : "No recent documents."}</p>
+			)}
+		</section>
+	);
+}