PR: #544: Story-2166: RegisterView Storybook prototype (Record page redesign) by @ankitmaheshwari-com
View PR →
Story-2166 · pramaan-app · prototype gate

The Record page redesign — RegisterView

A Storybook-only prototype of the RegisterView primitive family — the Evidentiary Record register. One dataset, saveable table views à la GitHub Projects, worded for lawyers. Built bottom-up (badges → row → grouped table → view chrome → filter bar → side peek → arriving rows → empty state) and composed into the full surface. No live route is touched; founder approval gates the wiring. Fixtures are the design contract's own Rathode arbitration set. Every screenshot below is a real render of a Storybook story (static build, no mocks beyond fixtures).

1a · Default register

Grouped by side (Client's / Opponent's / Other) with count·size subtotals; booktabs discipline (single hairlines, no vertical rules); the Document column is sticky and the table pans horizontally. HOLD chip on D-03, live Indexing status on D-05, the privileged D-07 muted with a lock, and the D-08 duplicate-of marker.

Default register grouped by side

RegisterViewRegisterTable RegisterGroupHeaderRegisterRow SideBadgeRecordStatusIndicator TagListHoldChipDuplicateMarker AnimatedList (reuse)

1b · The View menu

Plain words, one control per line — Group into sections not "Group by", Order rows not "Sort", Browse by tag not "Slice". Each row shows its current value, so the menu doubles as a summary of the view. Opens on click or shift-v.

View options menu open

ViewMenu

1c · Filters active + tag-browse rail

One box, no query language. Structured chips (Side / Type) AND together with a remove affordance; a "Narrow by" row offers one-click chips from what's on screen; the Browse-by-tag left rail carries counts; a muted footer states how many documents are hidden.

Filters active with tag rail

FilterBarNarrowByRow HiddenByFiltersTagBrowseRail

1d · Quick-preview side peek

Space or the eye icon opens the peek over the (dimmed) table without leaving the register; ↑↓ walk rows while it stays open. Summary, tags, a provenance block (brought in by / source / original name / sha256 fingerprint), threaded notes, and Download / Copy permalink / Reclassify in the footer.

Quick preview peek open on D-06

DocumentPeekRegisterRow (selected)

1e · Arriving optimistic rows

Documents arriving from the import drawer pin on top of the register with the four-stage journey — Received → Scanned → Read → On the record — then settle into their group. Rows animate through AnimatedList.

Arriving rows with the stage journey

ArrivingStripArrivingRowAnimatedList (reuse)

1f · Unsaved view changes

Changing the view marks the tab with a dot and shows the quiet save bar — Discard / Save as new view / Save changes. The bar enters and exits with the shared 0.24s micro-transition (symmetric).

Unsaved view changes save bar

ViewTabsModifiedViewBar

1g · Empty first run

No upload button on the page — the invitation points to the cloud icon in the matter rail (which the shell pulses) or a drop-anywhere gesture.

Empty first-run state

RecordEmptyState

Keyboard model

Wired in useRegisterKeyboard, demonstrated live in the RegisterView / KeyboardDemo story (input-aware — ignored while typing, except Esc).

j / k
next / previous row
space
open / close quick preview
enter / o
open document page
/
focus the filter box
v
cycle saved views · shift-v opens the View menu
esc
close peek / clear focus / discard unsaved view changes

Component inventory

PrimitiveFileRole
Badgesbadges.tsxSideBadge, RecordStatusIndicator, DocKindGlyph, TagList, HoldChip, DuplicateMarker
RegisterRowregister-row.tsxSticky Document cell + scalar columns; hover/selected action cluster; privileged + duplicate variants
RegisterGroupHeaderregister-group-header.tsxParty section header with subtotal
RegisterTableregister-table.tsxPanning grid, sticky column, grouped body via AnimatedList
ViewTabsview-tabs.tsxSaved-view tabs + unsaved dot + New view
ModifiedViewBarmodified-view-bar.tsxQuiet save bar (Discard / Save as new / Save changes)
ViewMenuview-menu.tsxColumns / Group / Order / Browse-by-tag with current-value summaries
FilterBar + NarrowByRow + HiddenByFiltersfilter-bar.tsxOne-box typed chips, suggestions, hidden-count
TagBrowseRailtag-browse-rail.tsxLeft rail, tag counts
DocumentPeekdocument-peek.tsxSide peek: summary, tags, provenance, notes, footer
ArrivingRow + ArrivingStriparriving-row.tsxFour-stage optimistic journey
RecordEmptyStaterecord-empty-state.tsxEmpty first-run invitation
RegisterViewregister-view.tsxComposed surface + keyboard wiring

Reused shared primitives: AnimatedList / AnimatedListRow MICRO_TRANSITION (motion.ts). Copy is single-sourced through the i18n-ready RegisterCopy object; presentation colour/label logic lives in presentation.ts.

Design-contract reconciliation & token discipline

The design contract's literal side/status hexes were reconciled onto the nearest design/v1 palette steps, so the prototype ships tokens-only (no new tokens, no inline colour literals — the token & i18n scans are clean): No conflicts required a silent pick; the only substitution beyond palette mapping is the peek's left-cast box-shadow, rendered with the shadow-xl utility instead of an rgba literal.

Prototype gate — the live-wiring seam

This is the component boundary, verified in Storybook against the design contract's own fixtures. It is not the system boundary. Live wiring (founder-gated) must add: the register list proxy + useAppList hook (forum data pattern), next-intl keys swapped in for the RegisterCopy default (both en and hi), optimistic reclassify/side-change writes, and the real empty/first-run run against an empty matter. The register is a distinct view under the matter shell, so it lands as its own route (route-per-mode), not a client tab.

Files changed

40 file(s), +2725 / -0 lines

Path Role + -
docs/walkthroughs/assets/story-2166/1a-default-register.pngWalkthroughbinbin
docs/walkthroughs/assets/story-2166/1b-view-menu.pngWalkthroughbinbin
docs/walkthroughs/assets/story-2166/1c-filters-active.pngWalkthroughbinbin
docs/walkthroughs/assets/story-2166/1d-quick-preview.pngWalkthroughbinbin
docs/walkthroughs/assets/story-2166/1e-arriving.pngWalkthroughbinbin
docs/walkthroughs/assets/story-2166/1f-unsaved-view.pngWalkthroughbinbin
docs/walkthroughs/assets/story-2166/1g-empty-first-run.pngWalkthroughbinbin
src/components/shared/register/arriving-row.stories.tsxComponent+53-0
src/components/shared/register/arriving-row.tsxComponent+100-0
src/components/shared/register/badges.stories.tsxComponent+67-0
src/components/shared/register/badges.tsxComponent+137-0
src/components/shared/register/copy.tsComponent+175-0
src/components/shared/register/document-peek.stories.tsxComponent+52-0
src/components/shared/register/document-peek.tsxComponent+163-0
src/components/shared/register/filter-bar.stories.tsxComponent+58-0
src/components/shared/register/filter-bar.tsxComponent+162-0
src/components/shared/register/fixtures.tsComponent+216-0
src/components/shared/register/grid.tsComponent+11-0
src/components/shared/register/grouping.tsComponent+25-0
src/components/shared/register/modified-view-bar.stories.tsxComponent+42-0
src/components/shared/register/modified-view-bar.tsxComponent+72-0
src/components/shared/register/presentation.tsComponent+83-0
src/components/shared/register/record-empty-state.stories.tsxComponent+18-0
src/components/shared/register/record-empty-state.tsxComponent+26-0
src/components/shared/register/register-group-header.tsxComponent+50-0
src/components/shared/register/register-header.tsxComponent+32-0
src/components/shared/register/register-row.stories.tsxComponent+50-0
src/components/shared/register/register-row.tsxComponent+166-0
src/components/shared/register/register-table.stories.tsxComponent+23-0
src/components/shared/register/register-table.tsxComponent+123-0
src/components/shared/register/register-view.stories.tsxComponent+109-0
src/components/shared/register/register-view.tsxComponent+182-0
src/components/shared/register/tag-browse-rail.stories.tsxComponent+20-0
src/components/shared/register/tag-browse-rail.tsxComponent+114-0
src/components/shared/register/types.tsComponent+90-0
src/components/shared/register/use-register-keyboard.tsComponent+77-0
src/components/shared/register/view-menu.stories.tsxComponent+23-0
src/components/shared/register/view-menu.tsxComponent+117-0
src/components/shared/register/view-tabs.stories.tsxComponent+23-0
src/components/shared/register/view-tabs.tsxComponent+66-0