rvlib-shipkit 2.2.0 → 2.4.0

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

@@ -0,0 +1,96 @@
+// 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; `top` (or `auto` narrower than STACK_PX) reads in
+// one column from the top: the header and the verdicts, the views, the answer. 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 read from the top: the header and the verdicts, the views, then the answer
+                <Panel id="review-stack" defaultSize="68%" minSize={300} className="rv-pane" style={PANEL}>
+                    <div className="rv-scroll">
+                        <ReviewImage rv={rv} />
+                        <ReviewForm rv={rv} />
+                    </div>
+                </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 (none in another tool's frame), 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">
+        {app.home.embedded ? null : <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