rvlib-shipkit 1.2.0 → 1.4.0

package/src/serve/hub-app/pill-row.tsx

@@ -0,0 +1,65 @@
+// a row of small boxes that stays one row at any width: the ones that do not
+// fit fold into a `+N` box at its end, whose hover lists them. An invisible
+// copy of every box, out of the flow, gives their widths, so what shows is
+// decided before the paint and never wraps. Each box's hover is its title.
+import { observer, useLocalObservable } from 'mobx-react-lite'
+import { useLayoutEffect, useRef, type ReactNode } from 'react'
+import { Tip } from './floating.tsx'
+
+export type PillItem = { key: string; node: ReactNode; title: string }
+
+/** how many boxes of these widths fit in `avail`, a `+N` box of `plusW`
+ *  taking its room as soon as one does not */
+export function fitCount(widths: number[], avail: number, plusW: number, gap: number): number {
+    const all = widths.reduce((a, w) => a + w, 0) + gap * Math.max(0, widths.length - 1)
+    if (all <= avail) return widths.length
+    let used = plusW
+    for (let i = 0; i < widths.length; i++) {
+        used += widths[i]! + gap
+        if (used > avail) return i
+    }
+    return widths.length
+}
+
+const lines = (text: string): ReactNode => text.split('\n').map((l, i) => <div key={i}>{l}</div>)
+
+export const PillRow = observer(({ items, className }: { items: PillItem[]; className?: string }) => {
+    const st = useLocalObservable(() => ({ n: Number.POSITIVE_INFINITY, set(v: number) { this.n = v } }))
+    const box = useRef<HTMLDivElement | null>(null)
+    const probe = useRef<HTMLDivElement | null>(null)
+    const measure = (): void => {
+        const b = box.current
+        const p = probe.current
+        if (b == null || p == null) return
+        const kids = [...p.children] as HTMLElement[]
+        const plus = kids.pop()
+        if (plus == null) return
+        const gap = Number.parseFloat(getComputedStyle(b).columnGap) || 0
+        st.set(fitCount(kids.map((k) => k.getBoundingClientRect().width), b.clientWidth, plus.getBoundingClientRect().width, gap))
+    }
+    // after every render: the boxes' words change with the clock
+    useLayoutEffect(measure)
+    useLayoutEffect(() => {
+        const b = box.current
+        if (b == null || typeof ResizeObserver === 'undefined') return
+        const ro = new ResizeObserver(() => measure())
+        ro.observe(b)
+        return () => ro.disconnect()
+    }, [])
+    const n = Math.min(st.n, items.length)
+    const hidden = items.slice(n)
+    return (
+        <div ref={box} className={`pchips${className == null ? '' : ` ${className}`}`}>
+            {items.slice(0, n).map((it) => <Tip key={it.key} className="pchipw" content={lines(it.title)}>{it.node}</Tip>)}
+            {hidden.length === 0 ? null : (
+                <Tip className="pchipw" content={hidden.map((h) => <div key={h.key}>{lines(h.title)}</div>)}>
+                    <span className="pchip dim">+{hidden.length}</span>
+                </Tip>
+            )}
+            <div ref={probe} className="pchips pchipprobe" aria-hidden="true">
+                {items.map((it) => <span key={it.key} className="pchipw">{it.node}</span>)}
+                <span className="pchip dim">+{items.length}</span>
+            </div>
+        </div>
+    )
+})

package/src/serve/hub-app/planned-st.ts

@@ -1,100 +1,25 @@
 // the planned page's state: the machine's one plan as the daemon answers it,
-// as ONE list ordered by time (now, late, next), filtered by a text that
+// as ONE list ordered by time (now, next), filtered by a text that
 // matches the project or the check. A check that only waits for a save has no
 // time, so it is not listed. The order and every word a row says are pure
 // functions, so a test pins them rather than a screenshot.
 import { makeAutoObservable, observableRef, runInAction } from 'mobx'
 import type { PlannedAnswer } from '../../home/home-routes.ts'
-import type { LastStatus } from '../../plan/cadence.ts'
-import type { PlanReason, PlanRow } from '../../plan/planner.ts'
+import type { PlanRow } from '../../plan/planner.ts'
+import { sectionOf, timeline, titleWords, waitingRows, waitingWords } from '../../plan/plan-timeline.ts'
 import type { HomeSt } from './home-st.ts'
 
 export const PLANNED_POLL_MS = 1_000
 
-export type Section = 'now' | 'late' | 'next'
-
-/** the section a row sits in; null for a check with no time of its own */
-export function sectionOf(r: PlanRow): Section | null {
-    if (r.state === 'running' || r.state === 'due') return 'now'
-    if (r.state === 'late') return 'late'
-    if (r.state === 'next') return 'next'
-    return null
-}
-
-/** a row matches a text filter when its project or check holds every word
- *  of it, in any case */
-export function matches(r: PlanRow, query: string): boolean {
-    const words = query.toLowerCase().split(/\s+/).filter((w) => w !== '')
-    const hay = `${r.repo} ${r.check}`.toLowerCase()
-    return words.every((w) => hay.includes(w))
-}
-
-/** the one list: running first, then due, the late ones most late first,
- *  then the next ones soonest first. Each row carries its section */
-export function timeline(rows: PlanRow[], query = ''): { section: Section; row: PlanRow }[] {
-    const rank = (r: PlanRow): number => (r.state === 'running' ? 0 : r.state === 'due' ? 1 : r.state === 'late' ? 2 : 3)
-    return rows
-        .filter((r) => sectionOf(r) != null && matches(r, query))
-        .sort((a, b) => rank(a) - rank(b) || (a.dueAt ?? Infinity) - (b.dueAt ?? Infinity) || a.repo.localeCompare(b.repo) || a.check.localeCompare(b.check))
-        .map((row) => ({ section: sectionOf(row)!, row }))
-}
-
-const MIN = 60_000
-const HOUR = 60 * MIN
-const DAY = 24 * HOUR
-
-/** a span in its largest unit: `<1m`, `25m`, `2h`, `3d` */
-export function spanShort(ms: number): string {
-    if (ms < MIN) return '<1m'
-    if (ms < HOUR) return `${Math.round(ms / MIN)}m`
-    if (ms < DAY) return `${Math.round(ms / HOUR)}h`
-    return `${Math.round(ms / DAY)}d`
-}
-
-/** when the row runs, relative to now: `now`, `in 4m`, `late 2h` */
-export function whenWords(r: PlanRow, now: number): string {
-    if (r.dueAt == null || r.state === 'running' || r.state === 'due') return 'now'
-    const d = r.dueAt - now
-    if (r.state === 'late') return `late ${spanShort(Math.max(0, -d))}`
-    return d > 0 ? `in ${spanShort(d)}` : 'now'
-}
-
-export type Mark = 'running' | 'failed' | 'late' | 'due' | 'next'
-
-/** the one mark a row shows and its few words: running wins, then a failed
- *  last result, then late with why it waits */
-export function markOf(r: PlanRow): { mark: Mark; words: string } {
-    if (r.state === 'running') return { mark: 'running', words: 'running' }
-    if (r.last?.status === 'fail') return { mark: 'failed', words: 'last failed' }
-    if (r.state === 'late') return { mark: 'late', words: 'waits: repo inactive' }
-    if (r.state === 'due') return { mark: 'due', words: 'due' }
-    return { mark: 'next', words: '' }
-}
-
-/** why it is due or planned, in words */
-export const REASON_WORDS: Record<PlanReason, string> = {
-    changed: 'files changed',
-    scheduled: 'scheduled',
-    late: 'overdue',
-    asked: 'asked by hand',
-}
-
-export const reasonWords = (r: PlanRow): string => (r.reason == null ? '' : REASON_WORDS[r.reason])
-
-/** the tone of a last result: red failing, warn warning, ok passing */
-export const LAST_TONE: Record<LastStatus, 'red' | 'warn' | 'ok' | 'dim'> = { fail: 'red', warn: 'warn', pass: 'ok', skip: 'dim' }
-
-/** a title worth showing beside the id: a title that repeats the id loses it */
-export function titleWords(title: string | null, check: string): string | null {
-    const t = title?.startsWith(check) === true ? title.slice(check.length).replace(/^[\s:·]+/, '') : title
-    return t == null || t === '' ? null : t
-}
+export * from '../../plan/plan-timeline.ts'
 
 export class PlannedSt {
     data: PlannedAnswer | null = null
     error = ''
     /** the text filter, the `?q=` of /planned: every word must be in the project or the check */
     query = ''
+    /** the checks waiting for their repo to be active, listed under their line */
+    waitingOpen = false
     private timer: ReturnType<typeof setInterval> | null = null
 
     constructor(private st: HomeSt) {
@@ -105,6 +30,20 @@ export class PlannedSt {
         return timeline(this.data?.rows ?? [], this.query)
     }
 
+    /** the checks waiting for their repo to be active, the filter applied */
+    get waiting(): PlanRow[] {
+        return waitingRows(this.data?.rows ?? [], this.query)
+    }
+
+    /** their one line, or '' */
+    get waitingLine(): string {
+        return waitingWords(this.data?.rows ?? [], this.query)
+    }
+
+    toggleWaiting(): void {
+        this.waitingOpen = !this.waitingOpen
+    }
+
     /** how many checks have a time of their own, filter aside */
     get timed(): number {
         return (this.data?.rows ?? []).filter((r) => sectionOf(r) != null).length
@@ -127,11 +66,8 @@ export class PlannedSt {
         this.st.select(repo)
     }
 
-    /** the check: its own page in its repo. The selection is written before
-     *  the repo is shown, so the one history entry already names the check */
     openCheck(repo: string, check: string): void {
-        this.st.repo(repo).cols.select('checks', `check:${check}`)
-        this.st.select(repo)
+        this.st.openCheck(repo, check)
     }
 
     /** the check's title as its repo's hub names it, once that hub was read */

package/src/serve/hub-app/planned-view.tsx

@@ -1,5 +1,7 @@
 // `/planned`: every check the machine runs on its own time, in ONE list
-// ordered by time under three small labels (now, late, next). A row says
+// ordered by time under two small labels (now, next), then one quiet line
+// counting the checks that wait for their repo to be active, which opens on a
+// click. A row says
 // when, which project and check, and one mark; everything else (the rule,
 // the reason, the last result, the inactive policy, an error, run now) is in
 // the card that floats over the row on hover. The project opens its repo in
@@ -8,16 +10,11 @@ import { observer } from 'mobx-react-lite'
 import type { CSSProperties, MouseEvent, ReactNode } from 'react'
 import type { PlanRow } from '../../plan/planner.ts'
 import { Tip } from './floating.tsx'
-import { hashFor } from './hash-route.ts'
 import type { HomeSt } from './home-st.ts'
-import { plainClick, repoPage } from './home-st.ts'
+import { checkAddress, plainClick, repoPage } from './home-st.ts'
 import { LAST_TONE, markOf, reasonWords, whenWords, type Section } from './planned-st.ts'
 import { ageWords, stampWords } from './time-ago.tsx'
 
-/** where a check's own page answers on the home */
-export const checkAddress = (repo: string, check: string): string =>
-    `${repoPage(repo)}#${hashFor({ t: 'item', col: 'checks', id: `check:${check}` })}`
-
 /** a link that works as one (a new tab on cmd+click) and moves in place on a plain click */
 const InPlace = ({ href, className, go, children }: { href: string; className: string; go: () => void; children: ReactNode }) => (
     <a className={className} href={href} onClick={(e: MouseEvent) => {
@@ -94,6 +91,7 @@ export const PlannedView = observer(({ app }: { app: HomeSt }) => {
         <div className="hall planned">
             <input className="plfind" type="search" placeholder="filter" aria-label="filter by project or check" value={st.query} onChange={(e) => st.setQuery(e.currentTarget.value)} />
             {st.error !== '' ? <div className="hnote">{st.error}</div> : null}
+            {(d?.held ?? []).map((h) => <div key={h} className="pldim">{h}</div>)}
             {(d?.errors ?? []).map((e) => <div key={e.repo} className="hnote">{e.repo}: {e.error}</div>)}
             <div className="pllist">
                 {st.rows.flatMap(({ section, row }) => {
@@ -104,6 +102,13 @@ export const PlannedView = observer(({ app }: { app: HomeSt }) => {
                 })}
                 {d == null ? <div className="pldim">loading…</div> : st.rows.length === 0 ? <div className="pldim">{st.timed === 0 ? 'nothing is planned' : 'nothing matches'}</div> : null}
             </div>
+            {st.waitingLine !== '' ? (
+                <div className="plwait">
+                    <button className="plwaitline" aria-expanded={st.waitingOpen} onClick={() => st.toggleWaiting()}>{st.waitingOpen ? '▾' : '▸'} {st.waitingLine}</button>
+                    {st.waitingOpen ? <div className="pllist">{st.waiting.map((r) => <Row key={`${r.repo}\0${r.check}`} app={app} r={r} now={now} />)}</div> : null}
+                </div>
+            ) : null}
+            <p className="hdim">in the console: shipkit planned</p>
         </div>
     )
 })

package/src/serve/hub-app/planned.css

@@ -11,7 +11,7 @@
 .plr{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;column-gap:var(--s3);padding:var(--s0) var(--s2);border-radius:3px;white-space:nowrap}
 .plr:hover{background:var(--panel)}
 .plwhen{color:var(--dim);font-variant-numeric:tabular-nums}
-.m-late .plwhen{color:var(--warn)}
+.m-waiting .plwhen{color:var(--dim)}
 .m-running .plwhen{color:var(--accent)}
 .plwhat{min-width:0;overflow:hidden;text-overflow:ellipsis}
 .plrepo,.plcheck{color:inherit;text-decoration:none}
@@ -24,7 +24,10 @@
 .plsym{display:inline-block;width:7px;height:7px;border-radius:50%;flex:none;box-sizing:border-box}
 .s-next{border:1px solid var(--dim)}
 .s-due{background:var(--ink)}
-.s-late{background:var(--warn)}
+.s-waiting{border:1px dashed var(--dim)}
+.plwait{margin-top:var(--s3)}
+.plwaitline{all:unset;cursor:pointer;color:var(--dim);font-size:12px}
+.plwaitline:hover{color:var(--ink)}
 .s-failed{width:auto;height:auto;border-radius:0;font-style:normal;color:var(--red)}
 .s-failed::before{content:'✕'}
 .m-failed .plmark{color:var(--red)}

package/src/serve/hub-app/project-list.css

@@ -5,19 +5,53 @@
    tests/hub-css-invariants.test.ts reads this sheet too. Every icon is 18px
    here AND as attributes on the img (ROW_ICON), so a sheet that fails to
    apply still draws a row, never a 512px icon. */
-.pjlist{flex:1;width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg);min-width:0}
-.pjhead{flex:none;display:flex;align-items:center;gap:var(--s1);height:36px;padding:0 var(--s2);border-bottom:1px solid var(--line)}
-.pjhead .sp{flex:1}
+.pjlist{flex:1;width:100%;height:100%;display:flex;flex-direction:column;background:var(--bg-side);min-width:0}
+/* the home's global pages: a section of lines in the repo rows' style, then
+   a thin divider before the repos */
+.pjhead{flex:none;display:flex;flex-direction:column;padding:var(--s1) 0;border-bottom:1px solid var(--line)}
 /* the rows scroll, the head does not, and no scrollbar draws a band beside
    them: WebKit (the macOS app) ignores scrollbar-width, hence the pseudo */
+.pjfoot{flex:none;display:flex;align-items:center;gap:var(--s1);height:32px;padding:0 var(--s2);border-top:1px solid var(--line)}
+/* the archived rows, just above the foot while its archived button is on:
+   the rows panel gives up the room, the foot stays put */
+.pjarch{flex:none;border-top:1px solid var(--line);max-height:40%;overflow-y:auto;scrollbar-width:none;padding:var(--s1) 0}
+.pjarch::-webkit-scrollbar{display:none}
+.pjarow{text-decoration:none;display:flex;align-items:center;gap:var(--s2);width:100%;height:22px;padding:0 var(--s2) 0 var(--s3);border:0;border-radius:0;background:none;color:var(--dim);font-size:12px;text-align:left;cursor:pointer;opacity:.6}
+.pjarow:hover,.pjarow.cur{opacity:1;background:var(--panel2)}
+.pjarow span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
+.pjarow img{flex:none;border-radius:3px;object-fit:contain}
+.pjaini{flex:none;width:14px;height:14px;border-radius:3px;background:var(--panel2)}
+/* the foot's two buttons: sort names the order the list is in, archived
+   carries its count and stays lit while its rows show */
+.pgsort,.pjarbtn{flex:none;display:inline-flex;align-items:center;gap:var(--s1);height:22px;padding:0 var(--s1);background:transparent;border:1px solid var(--line);border-radius:3px;
+ color:var(--dim);font-size:11px;cursor:pointer}
+.pgsort{flex:0 1 auto;min-width:0}
+.pgsortl{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.pgsort .hico,.pjarbtn .hico{flex:none;width:14px;height:14px}
+.pgsort:hover,.pjarbtn:hover{color:var(--ink);border-color:var(--accent)}
+.pjarbtn.on{color:var(--ink);background:var(--sel);border-color:var(--accent)}
+.pjarbtn span{font-variant-numeric:tabular-nums}
+/* the sort menu: over the foot, placed by floating-ui (floating.tsx) */
+.pgmenu{z-index:30;min-width:180px;padding:var(--s1) 0;background:var(--panel);border:1px solid var(--line);border-radius:4px;box-shadow:0 6px 20px var(--shadow);font-size:12px}
+.pgmhead{padding:var(--s1) var(--s2);color:var(--dim);font-size:11px}
+.pgmi{display:flex;align-items:center;gap:var(--s1);width:100%;height:24px;padding:0 var(--s2);background:none;border:0;border-radius:0;text-align:left;color:var(--ink);font-size:12px;cursor:pointer}
+.pgmi:hover:not(:disabled){background:var(--panel2)}
+.pgmi.on{font-weight:600}
+.pgmi.manual{color:var(--dim);cursor:default;border-top:1px solid var(--line)}
+.pgmi small{margin-left:auto;color:var(--dim);font-size:10px;font-weight:400}
+.pgmck{flex:none;width:12px;color:var(--accent)}
 .pjrows{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:var(--s1) 0;scrollbar-width:none}
 .pjrows::-webkit-scrollbar{display:none}
 .pjwait{display:flex;align-items:center;gap:var(--s2);padding:var(--s1) var(--s3);font-size:12px;color:var(--dim)}
-.pjrow{position:relative;display:flex;align-items:center;gap:var(--s2);width:100%;height:28px;padding:0 var(--s3);
+.pjrow,.pjpl{position:relative;display:flex;align-items:center;gap:var(--s2);width:100%;height:28px;padding:0 var(--s3);
  background:transparent;border:0;border-radius:0;text-align:left;color:var(--dim);font-size:13px;cursor:pointer}
-.pjrow:hover{background:var(--panel2);color:var(--ink)}
-/* the shown repo: its row lit, marked on the left in its identity colour */
-.pjrow.cur{background:var(--sel);color:var(--pjc,var(--ink));box-shadow:inset 3px 0 0 var(--pjc,var(--accent));font-weight:600}
+.pjrow:hover,.pjpl:hover{background:var(--panel2);color:var(--ink)}
+/* the shown repo: its row lit, marked on the left in its identity colour
+   (a global page's line: in the accent) */
+.pjrow.cur,.pjpl.cur{background:var(--sel);color:var(--pjc,var(--ink));box-shadow:inset 3px 0 0 var(--pjc,var(--accent));font-weight:600}
+.pjpl .hico{flex:none;width:18px;height:18px;color:inherit}
+/* the selected repo while a global page is up: still marked, dimmer */
+.pjrow.cur.away{background:none;font-weight:500}
 .pjrow img,.pjrow .pgi{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain;pointer-events:none}
 .pjname{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* the initial on a hue hashed from the name (projects-svc hueOf) */
@@ -34,7 +68,7 @@
 .pjrow.dim img,.pjrow.dim .pgi,.pjrow.dim .pjname{opacity:.5}
 /* ⌘1 to ⌘9 select the first nine rows (keys.ts): the hint sits at the row's end */
 .pjkey{flex:none;font:10px/1 ui-monospace,Menlo,monospace;color:var(--dim);opacity:.6;background:none;border:0;padding:0}
-.pjrow:hover .pjkey,.pjrow.cur .pjkey{opacity:1}
+.pjrow:hover .pjkey,.pjrow.cur .pjkey,.pjpl:hover .pjkey,.pjpl.cur .pjkey{opacity:1}
 /* the one badge: open asks, at the end of the row */
 .pga{flex:none;min-width:16px;height:16px;padding:0 var(--s1);border-radius:8px;
  font-size:10px;font-weight:700;line-height:16px;text-align:center;color:var(--bg);background:var(--warn)}
@@ -70,19 +104,7 @@
 .pgcfacts .wk{flex-basis:64px;white-space:nowrap}
 .pgcfacts .wv{text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;word-break:normal}
 .pgcfacts .wv.warn{color:var(--warn)}
-.pgerr{font-size:12px;font-weight:700;color:var(--red);cursor:help}
-/* the home only: the overview and the plan, one button each, the page shown
-   marked, its shortcut small in the bottom right corner */
-.pgplace{position:relative;flex:none;width:40px;height:26px;display:flex;align-items:center;justify-content:center;padding:0;
- background:transparent;border:1px solid var(--line);border-radius:4px;color:var(--dim);cursor:pointer}
-.pgplace:hover{color:var(--ink);background:var(--panel2)}
-.pgplace.on{color:var(--accent);background:var(--sel);border-color:var(--accent)}
-.pgplace .hico{flex:none;color:inherit;margin-right:var(--s2)}
-.pgplace kbd{position:absolute;right:var(--s0);bottom:0;font:8px/1 ui-monospace,Menlo,monospace;color:var(--dim);background:none;border:0;padding:0}
-/* the one time sort by last activity */
-.pgsort{flex:none;width:28px;height:20px;padding:0;background:transparent;border:1px solid var(--line);border-radius:3px;
- color:var(--dim);font-size:12px;line-height:18px;cursor:pointer}
-.pgsort:hover{color:var(--ink);border-color:var(--accent)}
+.pgerr{padding:0 var(--s3);font-size:12px;font-weight:700;color:var(--red);cursor:help;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 /* a drag: the row being moved fades, and the gap it would land in is a line
    drawn on a row edge */
 .pjrow.dragging{opacity:.4}

package/src/serve/hub-app/project-list.tsx

@@ -9,24 +9,33 @@
 // else is the hover card, placed by floating-ui beside the row. A click
 // selects the repo in place (so does ⌘1 to ⌘9 for the first nine rows, the
 // hint at each row's end), a double click opens the folder in VS Code, a
-// drag reorders the list, the button on top sorts it once by last activity,
-// and on the home two buttons open the overview and the plan, each with its
-// shortcut in its corner. It renders from
-// the first paint with the list this browser kept, so a load moves nothing.
-import { autoUpdate, FloatingPortal, useFloating, useHover, useInteractions } from '@floating-ui/react'
+// drag reorders the list. The foot holds two buttons: sort opens a menu of
+// labeled sorts (a pick sorts once, the button names the order the list is
+// in), archived shows or hides the archived repos just above the foot
+// (names only, no ⌘ number, a row opens the archived page, nothing loads),
+// the foot never moving. On the home a section of four lines on top, in the
+// repo rows' style, opens the picker, the overview, the activity and the
+// plan, each with its shortcut at the line's end, the page shown lit. It
+// renders from the first paint with the list this browser kept, so a load
+// moves nothing.
+import { autoUpdate, FloatingPortal, useDismiss, useFloating, useHover, useInteractions, useRole } from '@floating-ui/react'
 import { observer } from 'mobx-react-lite'
 import { useEffect, type CSSProperties } from 'react'
 import { middleware, OPEN_MS } from './floating.tsx'
 import { Icon, ICON } from './icons.tsx'
-import { PLACE_KEY } from './keys.ts'
-import { cardModel, faceOf, hueOf, type Place, type Project, type ProjectsSvc } from './projects-svc.ts'
+import { plainClick } from './home-st.ts'
+import { PICKER_KEY, PLACE_KEY } from './keys.ts'
+import { cardModel, faceOf, hueOf, SORTS, type Place, type Project, type ProjectsSvc } from './projects-svc.ts'
 
 /** what the list needs of its page: the hub and the home both carry one */
 export type ListHost = { projects: ProjectsSvc }
 
-/** the two places of the home, at the top of the list */
-const PLACES: { id: Place; label: string; title: string }[] = [
-    { id: 'overview', label: 'home', title: 'the overview: shipkit, every global process and every repo on this machine' },
+/** the lines on top of the list, in their order: the picker, the overview,
+ *  then the places, their shortcuts ⌘J ⌘K ⌘L ⌘' top to bottom */
+const PLACES: { id: Place | 'picker'; label: string; title: string }[] = [
+    { id: 'picker', label: 'jump to…', title: 'jump to a page, a repo or one of its resources' },
+    { id: 'overview', label: 'overview', title: 'the overview: shipkit, every global process and every repo on this machine' },
+    { id: 'activity', label: 'activity', title: 'what every repo committed lately, what it holds uncommitted, its branch and whether it is pushed' },
     { id: 'planned', label: 'planned', title: 'every check the machine runs on its own: now, next, late, and why' },
 ]
 
@@ -51,7 +60,7 @@ export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: numb
     // the drop line rides on a row edge, so showing it moves nothing
     const edge = gap === i ? ' dropb' : gap === i + 1 && i === s.list.length - 1 ? ' dropa' : ''
     const cur = s.isCurrent(p)
-    const cls = `pjrow${cur ? ' cur' : ''}${face.dim ? ' dim' : ''}${s.drag === p.name ? ' dragging' : ''}${edge}`
+    const cls = `pjrow${cur ? ' cur' : ''}${cur && s.away ? ' away' : ''}${face.dim ? ' dim' : ''}${s.drag === p.name ? ' dragging' : ''}${edge}`
     const dot = s.dotOf(p.name)
     const warn = s.warnOf(p.name)
     // the shown repo's row is marked in its own colour
@@ -100,7 +109,7 @@ export const Row = observer(({ app, p, i }: { app: ListHost; p: Project; i: numb
 
 // the img carries its size as attributes too: an icon file is 512px, and
 // without them a sheet that fails to apply draws it at that size
-const Face = ({ p, px }: { p: Project; px: number }) => (p.icon != null
+export const Face = ({ p, px }: { p: Project; px: number }) => (p.icon != null
     ? <img src={p.icon} alt="" width={px} height={px} draggable={false} />
     : <span className={`pgi h${hueOf(p.name)}`}>{(p.name.match(/[a-zA-Z]/)?.[0] ?? p.name.charAt(0)).toUpperCase()}</span>)
 
@@ -147,21 +156,111 @@ export const ProjectList = observer(({ app }: { app: ListHost }) => {
     const s = app.projects
     return (
         <nav className="pjlist" aria-label="projects">
-            <div className="pjhead">
-                {s.onPlace == null ? null : PLACES.map((pl) => (
-                    <button key={pl.id} className={`pgplace${s.place === pl.id ? ' on' : ''}`} aria-label={pl.label} title={`${pl.title} (${PLACE_KEY[pl.id]})`} onClick={() => s.onPlace?.(pl.id)}>
-                        <Icon d={ICON[pl.id === 'overview' ? 'home' : 'planned']} />
-                        <kbd>{PLACE_KEY[pl.id]}</kbd>
-                    </button>
-                ))}
-                <span className="sp" />
-                {s.error !== '' ? <span className="pgerr" title={s.error}>!</span> : null}
-                <button className="pgsort" title="sort by last activity, once: the result is the new manual order" onClick={() => s.sortByActivity()}>⇅</button>
-            </div>
+            {s.onPlace == null && s.onPicker == null && s.error === '' ? null : (
+                <div className="pjhead">
+                    {PLACES.map((pl) => {
+                        const id = pl.id
+                        const run = id === 'picker' ? s.onPicker : s.onPlace == null ? null : () => s.onPlace?.(id)
+                        if (run == null) return null
+                        const on = id === 'picker' ? s.pickerOpen() : s.place === id
+                        const key = id === 'picker' ? PICKER_KEY : PLACE_KEY[id]
+                        return (
+                            <button key={id} className={`pjpl${on ? ' cur' : ''}`} aria-label={pl.label} title={`${pl.title} (${key})`} onClick={run}>
+                                <Icon d={ICON[id === 'picker' ? 'search' : id === 'overview' ? 'home' : id]} />
+                                <span className="pjname">{pl.label}</span>
+                                <kbd className="pjkey">{key}</kbd>
+                            </button>
+                        )
+                    })}
+                    {s.error !== '' ? <span className="pgerr" title={s.error}>! {s.error}</span> : null}
+                </div>
+            )}
             <div className="pjrows">
                 {s.list.length === 0 && s.error === '' ? <span className="pjwait"><span className="spin" />reading the repos…</span> : null}
                 {s.list.map((p, i) => <Row key={p.name} app={app} p={p} i={i} />)}
             </div>
+            {s.archivedOpen && s.archived.length > 0 && s.onArchived != null ? (
+                <div className="pjarch">
+                    {s.archived.map((p) => (
+                        <a key={p.name} className="pjarow" href="/archived" title={`${p.name} is archived: nothing runs there`} onClick={(e) => {
+                            if (!plainClick(e)) return
+                            e.preventDefault()
+                            s.onArchived?.()
+                        }}>
+                            {p.icon != null ? <img src={p.icon} alt="" width={14} height={14} draggable={false} /> : <i className="pjaini" />}
+                            <span>{p.name}</span>
+                        </a>
+                    ))}
+                </div>
+            ) : null}
+            <div className="pjfoot">
+                <SortButton s={s} />
+                {s.archived.length === 0 || s.onArchived == null ? null : (
+                    <button className={`pjarbtn${s.archivedOpen ? ' on' : ''}`} aria-pressed={s.archivedOpen}
+                        title={`${s.archivedOpen ? 'hide' : 'show'} the ${s.archived.length} archived repos: nothing runs there, a row opens the archived page`}
+                        onClick={() => s.toggleArchivedOpen()}>
+                        <Icon d={ICON.archived} /><span>{s.archived.length}</span>
+                    </button>
+                )}
+            </div>
         </nav>
     )
 })
+
+/** the words for the order the list is in */
+const orderWords = (s: ProjectsSvc): string => {
+    const m = s.sortMode
+    return m === 'manual' ? 'manual order' : SORTS.find((x) => x.id === m)!.label
+}
+
+/** the sort button: it names the order the list is in and opens the menu,
+ *  and sorts nothing itself */
+const SortButton = observer(({ s }: { s: ProjectsSvc }) => {
+    const f = useFloating({
+        open: s.sortMenuOpen,
+        onOpenChange: (v) => s.setSortMenu(v),
+        placement: 'top-start',
+        strategy: 'fixed',
+        middleware: middleware(6),
+        whileElementsMounted: autoUpdate,
+    })
+    const dismiss = useDismiss(f.context)
+    const role = useRole(f.context, { role: 'menu' })
+    const { getReferenceProps, getFloatingProps } = useInteractions([dismiss, role])
+    return (
+        <>
+            <button ref={f.refs.setReference} className="pgsort" title={`the list is in ${orderWords(s)}: pick a sort`}
+                {...getReferenceProps({ onClick: () => s.toggleSortMenu() })}>
+                <Icon d={ICON.sort} /><span className="pgsortl">{orderWords(s)}</span>
+            </button>
+            {s.sortMenuOpen ? (
+                <FloatingPortal>
+                    <div ref={f.refs.setFloating} className="pgmenu" style={f.floatingStyles} {...getFloatingProps()}>
+                        <SortMenu s={s} />
+                    </div>
+                </FloatingPortal>
+            ) : null}
+        </>
+    )
+})
+
+/** the menu's lines: one per sort, the order the list is in checked. The
+ *  manual order is a state a drag makes, never a pick */
+export const SortMenu = observer(({ s }: { s: ProjectsSvc }) => {
+    const cur = s.sortMode
+    return (
+        <>
+            <div className="pgmhead">sort the list once by</div>
+            {SORTS.map((m) => (
+                <button key={m.id} role="menuitemradio" aria-checked={cur === m.id} className={`pgmi${cur === m.id ? ' on' : ''}`}
+                    title={m.title} onClick={() => s.sortBy(m.id)}>
+                    <span className="pgmck">{cur === m.id ? '✓' : ''}</span>{m.label}
+                </button>
+            ))}
+            <button role="menuitemradio" aria-checked={cur === 'manual'} className={`pgmi manual${cur === 'manual' ? ' on' : ''}`} disabled
+                title="a drag of a row makes the manual order, and every sort ends in it">
+                <span className="pgmck">{cur === 'manual' ? '✓' : ''}</span>manual order<small>drag a row</small>
+            </button>
+        </>
+    )
+})