Timeline now proves the whole local PDPP journey, which makes it worth looking at properly. Right now it still reads as a working prototype: a narrow column of text floating in a lot of empty space, with the summary and the pagination controls feeling unrelated to the feed between them.
This one is deliberately open. Use the existing design system and improve the page in place. The notes below are starting points from a look at comparable products, not a checklist to implement.
Some specifics worth knowing before you start. The page wraps in PageContainer (src/components/elements/page-container.tsx), which is just container pt-w12 pb-w24 with no max width of its own, so if the column feels wrong it is worth a Timeline-specific adjustment rather than changing PageContainer for every page. Record rows are at src/pages/timeline/index.tsx:483-492 and currently render the label on one line and the stream on the next inside <ol className="divide-y divide-border border-y border-border">. The summary block is at L378-391 and the controls at L436.
Suggestions, in rough order of how much they tend to matter:
- Lead each row with the record content. In feeds that scan well, source and time are muted supporting metadata, not the primary line. A row whose first line is type, source, and time reads like a debug log and forces a click to learn anything.
- Use the proportional sans for body text and reserve monospace for identifiers and raw values. If timestamps or counts jitter as you scroll,
font-variant-numeric: tabular-nums fixes the alignment without making the page look like a terminal.
- Give the record count, the stream filter, and the pagination controls one shared hierarchy. Where a control or status already says something, the explanatory sentence under it can usually go.
- Keep loading feedback at the "Load more" insertion point rather than at the top of the viewport. Feedback above the fold is invisible once someone has scrolled, which is the common version of this mistake.
- Make day boundaries easy to find with headings, dividers, or restrained markers built from information already present. Do not invent record semantics or source metadata to do it.
- Keep the feed flat and reasonably dense. Turning every record into a card usually makes scanning worse.
Please do not change consent, filtering, pagination, revocation, record derivation, or Personal Server behavior. This is a presentation pass.
Include before and after screenshots at the current desktop width and at the narrowest width the app supports, and check that keyboard navigation still works. I will review the screenshots. This is a judgment call rather than a pass or fail, so open a draft PR early if you want direction before polishing.
Timeline now proves the whole local PDPP journey, which makes it worth looking at properly. Right now it still reads as a working prototype: a narrow column of text floating in a lot of empty space, with the summary and the pagination controls feeling unrelated to the feed between them.
This one is deliberately open. Use the existing design system and improve the page in place. The notes below are starting points from a look at comparable products, not a checklist to implement.
Some specifics worth knowing before you start. The page wraps in
PageContainer(src/components/elements/page-container.tsx), which is justcontainer pt-w12 pb-w24with no max width of its own, so if the column feels wrong it is worth a Timeline-specific adjustment rather than changingPageContainerfor every page. Record rows are atsrc/pages/timeline/index.tsx:483-492and currently render the label on one line and the stream on the next inside<ol className="divide-y divide-border border-y border-border">. The summary block is at L378-391 and the controls at L436.Suggestions, in rough order of how much they tend to matter:
font-variant-numeric: tabular-numsfixes the alignment without making the page look like a terminal.Please do not change consent, filtering, pagination, revocation, record derivation, or Personal Server behavior. This is a presentation pass.
Include before and after screenshots at the current desktop width and at the narrowest width the app supports, and check that keyboard navigation still works. I will review the screenshots. This is a judgment call rather than a pass or fail, so open a draft PR early if you want direction before polishing.