rvlib-shipkit 2.2.0 → 2.3.0

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

@@ -0,0 +1,156 @@
+// the review page's left column: the search and the filters, one card per thread, its older versions nested
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef } from 'react'
+import { aboutText, firstView, isGallery, isPair, laneOf, MOVE_LABEL, STATUS_LABEL, subjectLabel, verdictOf, type Move, type ReviewItem, type ShownStatus } from '../../../review/model.ts'
+import type { Thread } from '../../../review/threads.ts'
+import { AutoTag, LaneTag, laneColor, Listeners, Rework, ThumbOf, toneOf } from './kit.tsx'
+import { ReviewBoard } from './review-board.tsx'
+import type { ReviewSt } from './review-st.ts'
+import { Caret } from '../tree-row.tsx'
+
+const ALL = ''
+
+export const ReviewList = observer(({ rv }: { rv: ReviewSt }) => {
+    const shown = rv.visible
+    const open = rv.open?.item.id
+    return (
+        <div className="rv-listcol">
+            <div className="rv-filters">
+                <input className="rv-search" placeholder="search" aria-label="search the cards" value={rv.query} onChange={(e) => rv.setQuery(e.currentTarget.value)}
+                    onKeyDown={(e) => { if (e.key === 'Escape') { rv.setQuery(''); e.currentTarget.blur() } }} />
+                <div className="rv-selects">
+                    <select aria-label="subject" value={rv.subject ?? ALL} onChange={(e) => rv.setFilter({ subject: e.currentTarget.value === ALL ? null : e.currentTarget.value })}>
+                        <option value={ALL}>every subject</option>
+                        {rv.subjects.map((k) => <option key={k} value={k}>{subjectLabel(k, rv.spec ?? undefined)}</option>)}
+                    </select>
+                    <select aria-label="state" value={rv.status ?? ALL} onChange={(e) => rv.setFilter({ status: e.currentTarget.value === ALL ? null : (e.currentTarget.value as ShownStatus) })}>
+                        <option value={ALL}>every state</option>
+                        {(Object.keys(STATUS_LABEL) as ShownStatus[]).map((s) => <option key={s} value={s}>{STATUS_LABEL[s]}</option>)}
+                    </select>
+                </div>
+                <span className="seg rv-whose" aria-label="whose move">
+                    <button className={rv.whose === null ? 'on' : ''} onClick={() => rv.setFilter({ whose: null })}>all</button>
+                    {(['owner', 'agents', 'none'] as const).map((m: Move) => (
+                        <button key={m} className={rv.whose === m ? 'on' : ''} onClick={() => rv.setFilter({ whose: m })}>{MOVE_LABEL[m]}</button>
+                    ))}
+                </span>
+                <div className="rv-switches">
+                    <label className="rv-switch"><input type="checkbox" checked={rv.hideHandled} onChange={(e) => rv.setHideHandled(e.currentTarget.checked)} />hide handled</label>
+                    <label className="rv-switch"><input type="checkbox" checked={rv.byLane} onChange={(e) => rv.setByLane(e.currentTarget.checked)} />by lane</label>
+                    {rv.spec?.dispatcher ? <label className="rv-switch"><input type="checkbox" checked={rv.board} onChange={(e) => rv.setBoard(e.currentTarget.checked)} />board</label> : null}
+                </div>
+                <div className="rv-count">
+                    {rv.activeCount} active · {rv.pendingCount} waiting{rv.hideHandled ? '' : ` · ${shown.length} / ${rv.threads.length} threads`}
+                </div>
+            </div>
+            {rv.board && rv.spec?.dispatcher ? <ReviewBoard rv={rv} /> : <div className="rv-listscroll">
+                {rv.byLane
+                    ? rv.laneGroups.map((g) => (
+                        <div key={g.lane ?? ''}>
+                            <LaneHeader rv={rv} lane={g.lane} threads={g.threads} />
+                            {g.threads.map((t) => <ThreadRow key={t.head.item.id} rv={rv} t={t} openId={open} />)}
+                        </div>
+                    ))
+                    : shown.map((t) => <ThreadRow key={t.head.item.id} rv={rv} t={t} openId={open} />)}
+                {shown.length === 0 && rv.list != null ? (
+                    <div className="rv-empty">{rv.items.length === 0 ? 'No card yet. An agent sends one with sk review add.' : rv.hideHandled ? 'Nothing active: « hide handled » hides the handled threads.' : 'No card matches.'}</div>
+                ) : null}
+                {rv.list == null && rv.listError == null ? <div className="rv-empty"><span className="spin" /> reading the cards…</div> : null}
+                {rv.listError != null ? <div className="rv-err">{rv.listError}</div> : null}
+                {rv.broken.map((b) => <div key={b.id} className="rv-err">unreadable: {b.id} ({b.error})</div>)}
+            </div>}
+        </div>
+    )
+})
+
+const LaneHeader = observer(({ rv, lane, threads }: { rv: ReviewSt; lane: string | null; threads: readonly Thread[] }) => (
+    <div className="rv-lanehead" style={lane ? { ['--lane' as string]: laneColor(lane) } : undefined}>
+        <b>{lane ?? 'no lane'}</b>
+        <span className="rv-dim">{threads.length}</span>
+        <span className="sp" />
+        <Listeners rv={rv} cards={threads.map((t) => t.head)} />
+    </div>
+))
+
+const ThreadRow = observer(({ rv, t, openId }: { rv: ReviewSt; t: Thread; openId: string | undefined }) => {
+    const older = t.versions.slice(1)
+    const unfolded = older.length > 0 && rv.showsVersions(t)
+    const n = t.versions.length
+    return (
+        <>
+            <ReviewRow rv={rv} x={t.head} on={t.head.item.id === openId} unread={rv.unread(t)} version={n}
+                fold={older.length > 0 ? { open: unfolded, toggle: () => rv.fold(t.head.item.id) } : undefined} />
+            {unfolded ? older.map((x, i) => <VersionRow key={x.item.id} rv={rv} x={x} n={n - 1 - i} on={x.item.id === openId} />) : null}
+        </>
+    )
+})
+
+const laneStyle = (x: ReviewItem): React.CSSProperties | undefined => {
+    const lane = laneOf(x)
+    return lane ? { ['--lane' as string]: laneColor(lane) } : undefined
+}
+
+/** an older version under its thread's head: small, its own status, a click opens it */
+const VersionRow = observer(({ rv, x, n, on }: { rv: ReviewSt; x: ReviewItem; n: number; on: boolean }) => {
+    const status = rv.statusOf(x)
+    const lane = laneOf(x)
+    return (
+        <div className={`rv-vrow ${toneOf(status)}${on ? ' on' : ''}${lane ? ' laned' : ''}`} style={laneStyle(x)} onClick={() => rv.pick(x.item.id)}>
+            <div className="rv-thumb sm"><ThumbOf rv={rv} x={x} /></div>
+            <b className="rv-vn">v{n}</b>
+            <span className="rv-badge">{STATUS_LABEL[status]}</span>
+            {lane ? <LaneTag lane={lane} /> : null}
+            {x.item.origin.by === 'auto' ? <AutoTag rule={x.item.origin.rule} /> : null}
+            <span className="rv-vtitle">{x.item.title}</span>
+        </div>
+    )
+})
+
+const ReviewRow = observer(({ rv, x, on, version, unread, fold }: {
+    rv: ReviewSt
+    x: ReviewItem
+    on: boolean
+    version: number
+    unread: boolean
+    fold: { open: boolean; toggle: () => void } | undefined
+}) => {
+    const r = x.item
+    const status = rv.statusOf(x)
+    const rework = rv.reworkOf(x)
+    // handled by the agent: its answer marked seen, or a newer version sent; never while a lane reworks it
+    const muted = !on && !rework && (verdictOf(x)?.seen === true || status === 'superseded' || status === 'withdrawn')
+    const lane = laneOf(x)
+    const ref = useRef<HTMLDivElement>(null)
+    useEffect(() => {
+        if (on) ref.current?.scrollIntoView({ block: 'nearest' })
+    }, [on])
+    const first = firstView(r)
+    return (
+        <div ref={ref} className={`rv-row ${toneOf(status)}${on ? ' on' : ''}${muted ? ' muted' : ''}${lane ? ' laned' : ''}`} style={laneStyle(x)} onClick={() => rv.pick(r.id)}>
+            <div className="rv-thumb"><ThumbOf rv={rv} x={x} /></div>
+            <div className="rv-rowbody">
+                <div className={`rv-rowtitle${on || status === 'pending' ? ' strong' : ''}`}>
+                    {unread ? <span className="rv-unread" title="a message of the agent to read" /> : null}
+                    {r.title}
+                </div>
+                <div className="rv-rowmeta">
+                    <span className="rv-badge">{STATUS_LABEL[status]}</span>
+                    {version > 1 ? <span className="rv-badge outline">v{version}</span> : null}
+                    {lane ? <LaneTag lane={lane} /> : null}
+                    {r.origin.by === 'auto' ? <AutoTag rule={r.origin.rule} /> : null}
+                    <span className="rv-about">
+                        {aboutText(r, rv.spec ?? undefined)}
+                        {r.views.some((v) => !isGallery(v) && v.clip) ? ' · clip' : ''}
+                        {first && isPair(first.files) ? ' · before/after' : ''}
+                    </span>
+                </div>
+                <Rework rv={rv} x={x} />
+            </div>
+            {fold ? (
+                <button className="rv-fold" aria-label={fold.open ? 'fold the versions' : 'unfold the versions'} onClick={(e) => { e.stopPropagation(); fold.toggle() }}>
+                    <Caret open={fold.open} />
+                </button>
+            ) : null}
+        </div>
+    )
+})

package/src/serve/hub-app/review/review-page.tsx

@@ -0,0 +1,101 @@
+// a repo's review page (`#page:review`, wiki build/shipkit/review.md, The review page): the cards on the left, the open
+// one in the middle with every view stacked, the answer on the right; narrower than STACK_PX, the card over the answer
+// in one column. On a phone one pane at a time, the verdicts in a bar under the thumb. The list is read while the page
+// shows
+import { observer } from 'mobx-react-lite'
+import { useEffect, useRef } from 'react'
+import { Group, Panel, Separator } from 'react-resizable-panels'
+import type { RepoSt } from '../repo-st.ts'
+import { ReviewForm, VerdictBar } from './review-answer.tsx'
+import { ReviewList } from './review-list.tsx'
+import type { PhonePane } from './review-st.ts'
+import { ReviewImage } from './review-views.tsx'
+
+const PANE_LABEL: Record<PhonePane, string> = { list: 'cards', card: 'card', answer: 'answer' }
+
+export const ReviewPage = observer(({ app }: { app: RepoSt }) => {
+    const rv = app.review
+    const el = useRef<HTMLDivElement | null>(null)
+    useEffect(() => {
+        rv.start()
+        return () => rv.stop()
+    }, [rv])
+    useEffect(() => {
+        const node = el.current
+        if (node == null || typeof ResizeObserver === 'undefined') return
+        // the pick lands on the next frame: a relayout inside the callback is the observer's loop error
+        let raf = 0
+        const ro = new ResizeObserver(([e]) => {
+            const w = e!.contentRect.width
+            cancelAnimationFrame(raf)
+            raf = requestAnimationFrame(() => rv.fit(w))
+        })
+        ro.observe(node)
+        return () => {
+            cancelAnimationFrame(raf)
+            ro.disconnect()
+        }
+    }, [rv, rv.phone.on])
+    if (rv.phone.on)
+        return (
+            <div className="rv-phone">
+                <PhoneTop app={app} />
+                <div className="rv-phonetabs seg">
+                    {(['list', 'card', 'answer'] as const).map((p) => (
+                        <button key={p} className={rv.phone.pane === p ? 'on' : ''} onClick={() => rv.phone.show(p)}>
+                            {PANE_LABEL[p]}{p === 'list' && rv.pendingCount > 0 ? ` · ${rv.pendingCount}` : ''}
+                        </button>
+                    ))}
+                </div>
+                <div className="rv-phonepane">
+                    {rv.phone.pane === 'list' ? <ReviewList rv={rv} /> : rv.phone.pane === 'card' ? <ReviewImage rv={rv} /> : <ReviewForm rv={rv} />}
+                </div>
+                {rv.phone.pane === 'list' ? null : <VerdictBar rv={rv} />}
+            </div>
+        )
+    return (
+        <Group className="rv-cols" orientation="horizontal" elementRef={el}>
+            <Panel id="review-list" defaultSize={rv.stacked ? '32%' : '20%'} minSize={160} className="rv-pane" style={PANEL}>
+                <ReviewList rv={rv} />
+            </Panel>
+            <Separator className="rsep" />
+            {rv.stacked ? (
+                // one column: the card over its answer, the boundary dragged
+                <Panel id="review-stack" defaultSize="68%" minSize={300} className="rv-pane" style={PANEL}>
+                    <Group className="rv-stack" orientation="vertical">
+                        <Panel id="review-image" defaultSize="62%" minSize={160} className="rv-pane" style={PANEL}>
+                            <div className="rv-scroll"><ReviewImage rv={rv} /></div>
+                        </Panel>
+                        <Separator className="rsep hsep" />
+                        <Panel id="review-form" defaultSize="38%" minSize={140} className="rv-pane" style={PANEL}>
+                            <div className="rv-scroll"><ReviewForm rv={rv} /></div>
+                        </Panel>
+                    </Group>
+                </Panel>
+            ) : (
+                <>
+                    <Panel id="review-image" defaultSize="54%" minSize={300} className="rv-pane" style={PANEL}>
+                        <div className="rv-scroll"><ReviewImage rv={rv} /></div>
+                    </Panel>
+                    <Separator className="rsep" />
+                    <Panel id="review-form" defaultSize="26%" minSize={260} className="rv-pane" style={PANEL}>
+                        <div className="rv-scroll"><ReviewForm rv={rv} /></div>
+                    </Panel>
+                </>
+            )}
+        </Group>
+    )
+})
+
+/** the phone's top line: the way back to the hub, and the repo the page is of. On a phone the page covers the hub's
+ *  panes, which leave it no room */
+export const PhoneTop = observer(({ app }: { app: RepoSt }) => (
+    <div className="rv-phonetop">
+        <button className="ghost" onClick={() => app.showReadme()}>◂ hub</button>
+        <b>{app.name}</b>
+        <span className="rv-dim">{app.sel?.t === 'trailer' ? 'trailer' : 'review'}</span>
+    </div>
+))
+
+/** a panel never scrolls itself: the column inside it does (hub-app.tsx, PANEL) */
+export const PANEL = { overflow: 'hidden' } as const