# Issue Tracker > An issue list you drive with your hands on the keys: J and K to move, S, P, A and L to change status, priority, assignee and labels, X to multi-select, ⌘K for everything else, and rows glide to their new group when they change. A shadcn/ui block from the [@devl](https://devl.dev/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/devl/issue-tracker). - Page, with a live preview: https://shadcn.exchange/r/devl/issue-tracker - Screenshot: https://shadcn.exchange/shot/devl/issue-tracker/light.png - Registry item: https://devl.dev/r/issue-tracker.json - Categories: screen, Dev - Listed: 2026-10-28, source last changed 2026-10-28 ## Install ```bash npx shadcn@latest add https://shadcn.exchange/r/devl/issue-tracker.json ``` Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on. ## Dependencies - npm packages: `lucide-react`, `motion` - Registry items: `utils`, `https://coss.com/ui/r/avatar.json`, `https://coss.com/ui/r/button.json`, `https://coss.com/ui/r/kbd.json` ## Files ### `registry/devl/issue-tracker.tsx` ```tsx "use client"; import { AnimatePresence, LayoutGroup, MotionConfig, motion } from "motion/react"; import { ArrowLeftIcon, CheckIcon, ChevronDownIcon, CircleDotIcon, CopyIcon, CornerDownLeftIcon, ArchiveIcon, CalendarIcon, LayersIcon, ListFilterIcon, type LucideIcon, MenuIcon, PlusIcon, SearchIcon, TagIcon, Trash2Icon, UserRoundIcon, XIcon, } from "lucide-react"; import { type KeyboardEvent, type ReactNode, useEffect, useMemo, useRef, useState, } from "react"; import { Avatar, AvatarFallback } from "@/components/ui/avatar"; import { Button } from "@/components/ui/button"; import { Kbd } from "@/components/ui/kbd"; import { cn } from "@/lib/utils"; export type IssueStatus = "backlog" | "todo" | "in_progress" | "in_review" | "done"; export type IssuePriority = 0 | 1 | 2 | 3 | 4; export type IssueTone = "blue" | "orange" | "teal" | "violet" | "rose" | "amber" | "emerald" | "sky"; export interface IssuePerson { id: string; name: string; tone: IssueTone; } export interface IssueLabel { id: string; name: string; tone: IssueTone; } export interface IssueActivity { who: string; text: string; when: string; comment?: boolean; } export interface Issue { id: string; title: string; status: IssueStatus; priority: IssuePriority; assignee?: string; labels?: string[]; estimate?: number; due?: string; created: string; description?: string[]; subtasks?: { title: string; done: boolean }[]; activity?: IssueActivity[]; } export interface IssueTrackerProps { team?: { name: string; key: string }; me?: string; people?: IssuePerson[]; labels?: IssueLabel[]; issues?: Issue[]; className?: string; } const avatarTone: Record = { blue: "bg-blue-500/14 text-blue-700 dark:text-blue-300", orange: "bg-orange-500/14 text-orange-700 dark:text-orange-300", teal: "bg-teal-500/16 text-teal-700 dark:text-teal-300", violet: "bg-violet-500/16 text-violet-700 dark:text-violet-300", rose: "bg-rose-500/14 text-rose-700 dark:text-rose-300", amber: "bg-amber-500/18 text-amber-700 dark:text-amber-300", emerald: "bg-emerald-500/16 text-emerald-700 dark:text-emerald-300", sky: "bg-sky-500/16 text-sky-700 dark:text-sky-300", }; const dotTone: Record = { blue: "bg-blue-500", orange: "bg-orange-500", teal: "bg-teal-500", violet: "bg-violet-500", rose: "bg-rose-500", amber: "bg-amber-500", emerald: "bg-emerald-500", sky: "bg-sky-500", }; const ease = [0.23, 1, 0.32, 1] as const; const glide = { type: "spring", stiffness: 500, damping: 44 } as const; const groupTone: Record = { backlog: "from-muted/80 to-muted/80 dark:from-muted/60 dark:to-muted/60", todo: "from-muted/80 to-muted/80 dark:from-muted/60 dark:to-muted/60", in_progress: "from-amber-500/6 to-amber-500/6 dark:from-amber-400/7 dark:to-amber-400/7", in_review: "from-emerald-500/6 to-emerald-500/6 dark:from-emerald-400/7 dark:to-emerald-400/7", done: "from-blue-500/6 to-blue-500/6 dark:from-blue-400/7 dark:to-blue-400/7", }; const STATUSES: { id: IssueStatus; label: string }[] = [ { id: "in_progress", label: "In Progress" }, { id: "in_review", label: "In Review" }, { id: "todo", label: "Todo" }, { id: "backlog", label: "Backlog" }, { id: "done", label: "Done" }, ]; const statusLabel = (s: IssueStatus) => STATUSES.find((x) => x.id === s)?.label ?? s; const PRIORITIES: { id: IssuePriority; label: string }[] = [ { id: 1, label: "Urgent" }, { id: 2, label: "High" }, { id: 3, label: "Medium" }, { id: 4, label: "Low" }, { id: 0, label: "No priority" }, ]; const priorityLabel = (p: IssuePriority) => PRIORITIES.find((x) => x.id === p)?.label ?? ""; const initials = (name: string) => name .split(" ") .map((p) => p[0]) .slice(0, 2) .join("") .toUpperCase(); function StatusIcon({ status, className }: { status: IssueStatus; className?: string }) { const c = cn("size-3.5 shrink-0", className); if (status === "backlog") return ( ); if (status === "todo") return ( ); if (status === "in_progress") return ( ); if (status === "in_review") return ( ); return ( ); } function PriorityIcon({ priority, className }: { priority: IssuePriority; className?: string }) { if (priority === 1) return ( ! ); if (priority === 0) return ( {[2.5, 6, 9.5].map((x) => ( ))} ); const filled = 5 - priority; return ( {[0, 1, 2].map((i) => ( ))} ); } function PersonAvatar({ person, size = "size-5" }: { person?: IssuePerson; size?: string }) { if (!person) return ( ); return ( {initials(person.name)} ); } const defaultPeople: IssuePerson[] = [ { id: "maya", name: "Maya Okafor", tone: "teal" }, { id: "sam", name: "Sam Whitfield", tone: "amber" }, { id: "jonas", name: "Jonas Weber", tone: "blue" }, { id: "leo", name: "Leo Marchetti", tone: "rose" }, { id: "ana", name: "Ana Sousa", tone: "orange" }, { id: "priya", name: "Priya Raman", tone: "violet" }, ]; const defaultLabels: IssueLabel[] = [ { id: "bug", name: "Bug", tone: "rose" }, { id: "feature", name: "Feature", tone: "violet" }, { id: "infra", name: "Infra", tone: "sky" }, { id: "perf", name: "Performance", tone: "amber" }, { id: "docs", name: "Docs", tone: "emerald" }, ]; const defaultIssues: Issue[] = [ { id: "PLT-231", title: "Poison messages stall the webhook consumer", status: "in_progress", priority: 1, assignee: "sam", labels: ["bug", "infra"], estimate: 3, due: "Oct 24", created: "Oct 21", description: [ "A single malformed payload blocks the consumer for its partition. Retries keep it at the head of the queue, so deliveries behind it wait until the message expires.", "Move messages that fail three times to a dead-letter queue and keep the consumer moving. Surface them in the delivery dashboard with a one-click replay.", ], subtasks: [ { title: "Dead-letter queue with 7-day retention", done: true }, { title: "Skip after 3 failed attempts", done: true }, { title: "Replay from the dashboard", done: false }, ], activity: [ { who: "jonas", text: "created the issue", when: "Oct 21" }, { who: "jonas", text: "set priority to Urgent", when: "Oct 21" }, { who: "sam", text: "Reproduced with a truncated JSON body from a customer integration. Patch is up behind a flag.", when: "Oct 22", comment: true }, ], }, { id: "PLT-224", title: "Replay tool for missed webhook deliveries", status: "in_progress", priority: 2, assignee: "jonas", labels: ["feature"], estimate: 5, due: "Oct 30", created: "Oct 19" }, { id: "PLT-215", title: "Move job scheduler to the new queue", status: "in_progress", priority: 3, assignee: "maya", labels: ["infra"], estimate: 8, created: "Oct 12" }, { id: "PLT-218", title: "Rate limit headers missing on 429 responses", status: "in_review", priority: 3, assignee: "leo", labels: ["bug"], estimate: 1, created: "Oct 17" }, { id: "PLT-198", title: "Flaky test: delivery ordering under load", status: "in_review", priority: 4, assignee: "sam", labels: ["bug"], estimate: 2, created: "Oct 9" }, { id: "PLT-212", title: "p95 latency regression on /v2/events", status: "todo", priority: 1, assignee: "ana", labels: ["perf", "bug"], estimate: 3, due: "Oct 25", created: "Oct 20" }, { id: "PLT-229", title: "Alert when consumer lag exceeds 2 minutes", status: "todo", priority: 2, assignee: "sam", labels: ["infra"], estimate: 2, created: "Oct 22" }, { id: "PLT-209", title: "Rotate signing secrets without downtime", status: "todo", priority: 3, labels: ["feature"], estimate: 5, created: "Oct 15" }, { id: "PLT-205", title: "Document retry semantics for webhooks", status: "todo", priority: 4, assignee: "priya", labels: ["docs"], estimate: 1, created: "Oct 14" }, { id: "PLT-196", title: "Per-endpoint delivery dashboard", status: "backlog", priority: 3, assignee: "priya", labels: ["feature"], created: "Oct 8" }, { id: "PLT-201", title: "Deprecate the v1 events endpoint", status: "backlog", priority: 4, labels: ["docs"], created: "Oct 11" }, { id: "PLT-185", title: "Batch webhook deliveries per endpoint", status: "backlog", priority: 0, labels: ["perf"], created: "Oct 2" }, { id: "PLT-190", title: "Upgrade Postgres to 17", status: "done", priority: 2, assignee: "leo", labels: ["infra"], estimate: 5, created: "Oct 3" }, { id: "PLT-188", title: "Add jitter to retry backoff", status: "done", priority: 3, assignee: "sam", labels: ["infra"], estimate: 1, created: "Oct 1" }, ]; type PaletteMode = "root" | "status" | "priority" | "assignee" | "label"; interface Command { id: string; label: string; group: string; icon: ReactNode; hint?: string; checked?: boolean; keepOpen?: boolean; run: () => void; } function Palette({ mode, commands, target, onClose, onBack, }: { mode: PaletteMode; commands: Command[]; target: string; onClose: () => void; onBack: () => void; }) { const [query, setQuery] = useState(""); const [active, setActive] = useState(0); const inputRef = useRef(null); const listRef = useRef(null); const q = query.trim().toLowerCase(); const filtered = commands.filter((c) => !q || c.label.toLowerCase().includes(q) || c.group.toLowerCase().includes(q)); const groups = Array.from(new Set(filtered.map((c) => c.group))); useEffect(() => { inputRef.current?.focus(); }, []); useEffect(() => { setActive(0); setQuery(""); }, [mode]); useEffect(() => { const el = listRef.current?.querySelector(`[data-index="${active}"]`); if (el && listRef.current) { const box = listRef.current; if (el.offsetTop < box.scrollTop) box.scrollTop = el.offsetTop - 4; else if (el.offsetTop + el.offsetHeight > box.scrollTop + box.clientHeight) box.scrollTop = el.offsetTop + el.offsetHeight - box.clientHeight + 4; } }, [active]); const placeholder: Record = { root: "Type a command or search…", status: "Change status…", priority: "Set priority…", assignee: "Assign to…", label: "Add or remove labels…", }; return ( { if (e.target === e.currentTarget) onClose(); }} transition={{ duration: 0.12 }} >
{target}
{ setQuery(e.target.value); setActive(0); }} onKeyDown={(e) => { if (e.key === "ArrowDown") { e.preventDefault(); setActive((a) => Math.min(filtered.length - 1, a + 1)); } else if (e.key === "ArrowUp") { e.preventDefault(); setActive((a) => Math.max(0, a - 1)); } else if (e.key === "Enter") { e.preventDefault(); const c = filtered[active]; if (c) { c.run(); if (!c.keepOpen) onClose(); } } else if (e.key === "Escape") { e.preventDefault(); e.stopPropagation(); onClose(); } else if (e.key === "Backspace" && !query && mode !== "root") { e.preventDefault(); onBack(); } }} placeholder={placeholder[mode]} ref={inputRef} role="combobox" value={query} /> Esc
{filtered.length === 0 &&
No commands match “{query}”
} {groups.map((g) => (
{g}
{filtered .filter((c) => c.group === g) .map((c) => { const i = filtered.indexOf(c); return (
{ c.run(); if (!c.keepOpen) onClose(); }} onMouseMove={() => setActive(i)} role="option" > {c.icon} {c.label} {c.checked && } {c.hint && {c.hint}}
); })}
))}
↑ ↓ navigate {" "} select {mode !== "root" && ( ⌫ back )}
); } function Property({ label, onClick, children }: { label: string; onClick?: () => void; children: ReactNode }) { return (
{label}
); } type IssueView = "mine" | "active" | "backlog" | "all"; const navItems: { id: IssueView; label: string; title: string; icon: LucideIcon }[] = [ { id: "mine", label: "My issues", title: "My issues", icon: CircleDotIcon }, { id: "active", label: "Active", title: "Active issues", icon: LayersIcon }, { id: "backlog", label: "Backlog", title: "Backlog", icon: ArchiveIcon }, { id: "all", label: "All issues", title: "All issues", icon: ListFilterIcon }, ]; const inView = (view: IssueView, i: Issue, me: string) => view === "mine" ? i.assignee === me : view === "active" ? i.status !== "backlog" : view === "backlog" ? i.status === "backlog" : true; export function IssueTracker({ team = { name: "Platform", key: "PLT" }, me = "maya", people = defaultPeople, labels = defaultLabels, issues: initialIssues = defaultIssues, className, }: IssueTrackerProps) { const [issues, setIssues] = useState(initialIssues); const [cursor, setCursor] = useState(initialIssues[0]?.id ?? ""); const [picked, setPicked] = useState>(() => new Set()); const [openId, setOpenId] = useState(null); const [palette, setPalette] = useState<{ mode: PaletteMode; ids: string[] } | null>(null); const [collapsed, setCollapsed] = useState>(() => new Set()); const [query, setQuery] = useState(""); const [view, setView] = useState("active"); const [searchOpen, setSearchOpen] = useState(false); const [drawer, setDrawer] = useState(false); const [comment, setComment] = useState(""); const [toast, setToast] = useState<{ key: number; text: string } | null>(null); const rootRef = useRef(null); const listRef = useRef(null); const searchRef = useRef(null); const mobileSearchRef = useRef(null); const focusSearch = () => requestAnimationFrame(() => (searchRef.current?.offsetParent ? searchRef.current : mobileSearchRef.current)?.focus()); const titleRef = useRef(null); const rowRefs = useRef(new Map()); const detailRef = useRef(null); useEffect(() => { if (!toast) return; const id = window.setTimeout(() => setToast(null), 2600); return () => window.clearTimeout(id); }, [toast]); const person = (id?: string) => people.find((p) => p.id === id); const label = (id: string) => labels.find((l) => l.id === id); const filtered = useMemo(() => { const q = query.trim().toLowerCase(); return issues.filter( (i) => inView(view, i, me) && (!q || i.title.toLowerCase().includes(q) || i.id.toLowerCase().includes(q)), ); }, [issues, query, view, me]); const groups = STATUSES.map((s) => ({ ...s, items: filtered.filter((i) => i.status === s.id).sort((a, b) => (a.priority || 9) - (b.priority || 9)), })).filter((g) => g.items.length > 0); const flat = groups.flatMap((g) => (collapsed.has(g.id) ? [] : g.items)); const open = issues.find((i) => i.id === openId) ?? null; // biome-ignore lint/correctness/useExhaustiveDependencies: reset when another issue opens useEffect(() => { if (detailRef.current) detailRef.current.scrollTop = 0; }, [openId]); const focusRow = (id: string) => { setCursor(id); const el = rowRefs.current.get(id); const box = listRef.current; if (el && box) { el.focus({ preventScroll: true }); const top = el.offsetTop - 36; const bottom = el.offsetTop + el.offsetHeight; if (top < box.scrollTop) box.scrollTop = top; else if (bottom > box.scrollTop + box.clientHeight) box.scrollTop = bottom - box.clientHeight + 8; } }; const move = (d: number) => { if (!flat.length) return; const i = flat.findIndex((x) => x.id === cursor); const next = flat[Math.max(0, Math.min(flat.length - 1, (i < 0 ? 0 : i + d)))]; if (!next) return; focusRow(next.id); if (openId) setOpenId(next.id); }; const targets = () => (picked.size ? Array.from(picked) : cursor ? [cursor] : []); const describe = (ids: string[]) => (ids.length === 1 ? ids[0] : `${ids.length} issues`); const update = (ids: string[], fn: (i: Issue) => Partial, log?: (i: Issue) => string) => setIssues((all) => all.map((i) => { if (!ids.includes(i.id)) return i; const p = fn(i); const entry = log?.(i); return { ...i, ...p, activity: entry ? [...(i.activity ?? []), { who: me, text: entry, when: "just now" }] : i.activity }; }), ); const setStatus = (ids: string[], status: IssueStatus) => { update(ids, () => ({ status }), () => `moved to ${statusLabel(status)}`); if (status === "done" && collapsed.has("done")) setToast({ key: Date.now(), text: `${describe(ids)} marked done` }); }; const setPriority = (ids: string[], priority: IssuePriority) => update(ids, () => ({ priority }), () => `set priority to ${priorityLabel(priority)}`); const setAssignee = (ids: string[], assignee?: string) => update(ids, () => ({ assignee }), () => (assignee ? `assigned ${person(assignee)?.name.split(" ")[0]}` : "removed the assignee")); const toggleLabel = (ids: string[], lid: string) => { const allHave = ids.every((id) => issues.find((i) => i.id === id)?.labels?.includes(lid)); update(ids, (i) => ({ labels: allHave ? (i.labels ?? []).filter((l) => l !== lid) : Array.from(new Set([...(i.labels ?? []), lid])) })); }; const createIssue = (status: IssueStatus = view === "backlog" ? "backlog" : "todo") => { const n = Math.max(0, ...issues.map((i) => Number(i.id.split("-")[1]) || 0)) + 1; const id = `${team.key}-${n}`; setIssues((all) => [ { id, title: "", status, priority: 0, assignee: me, created: "Today", activity: [{ who: me, text: "created the issue", when: "just now" }] }, ...all, ]); setQuery(""); setCollapsed((c) => { const next = new Set(c); next.delete(status); return next; }); setCursor(id); setOpenId(id); requestAnimationFrame(() => titleRef.current?.focus()); }; const remove = (ids: string[]) => { setIssues((all) => all.filter((i) => !ids.includes(i.id))); setPicked(new Set()); if (openId && ids.includes(openId)) setOpenId(null); setToast({ key: Date.now(), text: `Deleted ${describe(ids)}` }); rootRef.current?.focus({ preventScroll: true }); }; const commandsFor = (mode: PaletteMode, ids: string[]): Command[] => { const one = ids.length === 1 ? issues.find((i) => i.id === ids[0]) : undefined; if (mode === "status") return STATUSES.map((s) => ({ id: `s-${s.id}`, label: s.label, group: "Status", icon: , checked: one?.status === s.id, run: () => setStatus(ids, s.id), })); if (mode === "priority") return PRIORITIES.map((p) => ({ id: `p-${p.id}`, label: p.label, group: "Priority", icon: , hint: String(p.id), checked: one?.priority === p.id, run: () => setPriority(ids, p.id), })); if (mode === "assignee") return [ ...people.map((p) => ({ id: `a-${p.id}`, label: p.id === me ? `${p.name} (you)` : p.name, group: "Assignee", icon: , checked: one?.assignee === p.id, run: () => setAssignee(ids, p.id), })), { id: "a-none", label: "No assignee", group: "Assignee", icon: , checked: one ? !one.assignee : false, run: () => setAssignee(ids, undefined) }, ]; if (mode === "label") return labels.map((l) => ({ id: `l-${l.id}`, label: l.name, group: "Labels", icon: , checked: ids.every((id) => issues.find((i) => i.id === id)?.labels?.includes(l.id)), keepOpen: true, run: () => toggleLabel(ids, l.id), })); const has = ids.length > 0; return [ ...(has ? [ { id: "c-status", label: "Change status…", group: "Issue", icon: , hint: "S", keepOpen: true, run: () => setPalette({ mode: "status", ids }) }, { id: "c-priority", label: "Set priority…", group: "Issue", icon: , hint: "P", keepOpen: true, run: () => setPalette({ mode: "priority", ids }) }, { id: "c-assign", label: "Assign to…", group: "Issue", icon: , hint: "A", keepOpen: true, run: () => setPalette({ mode: "assignee", ids }) }, { id: "c-label", label: "Add label…", group: "Issue", icon: , hint: "L", keepOpen: true, run: () => setPalette({ mode: "label", ids }) }, { id: "c-me", label: "Assign to me", group: "Issue", icon: , hint: "I", run: () => setAssignee(ids, me) }, { id: "c-copy", label: ids.length === 1 ? `Copy ${ids[0]}` : "Copy IDs", group: "Issue", icon: , run: () => { navigator.clipboard?.writeText(ids.join(", ")).catch(() => {}); setToast({ key: Date.now(), text: `Copied ${describe(ids)}` }); }, }, { id: "c-delete", label: ids.length === 1 ? "Delete issue" : `Delete ${ids.length} issues`, group: "Issue", icon: , run: () => remove(ids) }, ] : []), { id: "c-new", label: "Create new issue", group: "Workspace", icon: , hint: "C", run: () => createIssue() }, ...navItems .filter((n) => n.id !== view) .map((n) => ({ id: `v-${n.id}`, label: `Go to ${n.label}`, group: "Views", icon: , run: () => goView(n.id) })), { id: "c-done", label: collapsed.has("done") ? "Show completed issues" : "Hide completed issues", group: "Workspace", icon: , run: () => setCollapsed((c) => { const next = new Set(c); if (next.has("done")) next.delete("done"); else next.add("done"); return next; }), }, ]; }; const goView = (v: IssueView) => { setView(v); setPicked(new Set()); setDrawer(false); listRef.current?.scrollTo({ top: 0 }); if (v === "backlog") setCollapsed((c) => { const next = new Set(c); next.delete("backlog"); return next; }); }; const closePalette = () => { setPalette(null); requestAnimationFrame(() => { const el = rowRefs.current.get(cursor); (el ?? rootRef.current)?.focus({ preventScroll: true }); }); }; const onKeyDown = (e: KeyboardEvent) => { if (palette) return; if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setPalette({ mode: "root", ids: targets() }); return; } const t = e.target as HTMLElement; if (t.tagName === "INPUT" || t.tagName === "TEXTAREA") { if (e.key === "Escape") { t.blur(); rootRef.current?.focus({ preventScroll: true }); } return; } if (e.metaKey || e.ctrlKey || e.altKey) return; const k = e.key.toLowerCase(); if (k === "j" || e.key === "ArrowDown") { e.preventDefault(); move(1); } else if (k === "k" || e.key === "ArrowUp") { e.preventDefault(); move(-1); } else if (e.key === "Enter" || k === "o") { e.preventDefault(); if (cursor) setOpenId(cursor); } else if (e.key === "Escape") { if (drawer) setDrawer(false); else if (openId) { setOpenId(null); focusRow(cursor); } else if (picked.size) setPicked(new Set()); } else if (k === "x" && cursor) { e.preventDefault(); setPicked((p) => { const next = new Set(p); if (next.has(cursor)) next.delete(cursor); else next.add(cursor); return next; }); } else if (k === "s" || k === "p" || k === "a" || k === "l") { e.preventDefault(); const ids = targets(); if (ids.length) setPalette({ mode: ({ s: "status", p: "priority", a: "assignee", l: "label" } as const)[k], ids }); } else if (k === "i") { const ids = targets(); if (ids.length) setAssignee(ids, me); } else if (["0", "1", "2", "3", "4"].includes(e.key)) { const ids = targets(); if (ids.length) setPriority(ids, Number(e.key) as IssuePriority); } else if (k === "c") { e.preventDefault(); createIssue(); } else if (e.key === "/") { e.preventDefault(); setSearchOpen(true); focusSearch(); } }; const sidebar = (onClose?: () => void) => (
{team.key.slice(0, 2)}
Kestrel
{team.name} team
{onClose && ( )}
Cycle 42 · ends Oct 30
i.status === "done").length / Math.max(1, issues.length)) * 100}%` }} />
i.status === "in_review").length / Math.max(1, issues.length)) * 100}%` }} />
i.status === "in_progress").length / Math.max(1, issues.length)) * 100}%` }} />
{issues.filter((i) => i.status === "done").length} of {issues.length} done 6 days left
{[ ["J K", "move"], ["S P A L", "set fields"], ["X", "select"], ["⌘K", "everything else"], ].map(([k, v]) => (
{k.split(" ").map((x) => ( {x} ))} {v}
))}
); return (
{drawer && ( <> setDrawer(false)} /> {sidebar(() => setDrawer(false))} )}

{navItems.find((n) => n.id === view)?.title}

{filtered.filter((i) => i.status !== "done").length}
{searchOpen && (
setQuery(e.target.value)} onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLInputElement).blur(); } if (e.key === "Escape") { setQuery(""); setSearchOpen(false); } }} placeholder="Filter by title or ID" ref={mobileSearchRef} value={query} />
)} {picked.size > 0 && ( {picked.size} selected
)}
{groups.length === 0 ? (

{query ? "No issues match" : "Nothing here"}

{query ? `Nothing in ${navItems.find((n) => n.id === view)?.label} mentions “${query}”.` : "Press C to create an issue."}

) : ( {groups.map((g) => { const isCollapsed = collapsed.has(g.id); return (
{g.id !== "done" && ( )}
{!isCollapsed && (
    {g.items.map((issue) => { const isCursor = issue.id === cursor; const isPicked = picked.has(issue.id); const a = person(issue.assignee); return (
    { setCursor(issue.id); setOpenId(issue.id); }} onFocus={() => setCursor(issue.id)} ref={(el) => { if (el) rowRefs.current.set(issue.id, el); else rowRefs.current.delete(issue.id); }} role="row" tabIndex={isCursor ? 0 : -1} > {isCursor && } {issue.id} {issue.title || "Untitled issue"} {issue.labels?.map((lid) => { const l = label(lid); return l ? ( {l.name} ) : null; })} {issue.due && ( {issue.due} )} {issue.created}
    ); })}
)}
); })} )}
{open && (
{open.id}
J K