Repository navigation
docs(design): ship the full UI redesign spec set (7 pages, phone + tablet) - #12
Merged
Merged
Conversation
Design-of-record for the repo tree screen grounded in four levels of on-device screenshots (final = boards): breadcrumb path row, unified row component with folder file-counts and per-file reading progress, language-tinted icon tiles, an always-present dashed guide card on both folder and file levels (user confirmed), and a search bar unified to the card token set. Tablet layouts: centered portrait, landscape tree-plus-preview two-pane. Implementation lands separately.
Design-of-record for both search surfaces (global full-text and in-repo file-name search) from on-device screenshots (final = boards): one control row (body/title segmented switch plus source chips), grouped results with per-file match counts and snippet highlighting, and an in-repo variant with match counts, highlighted file names and paths, plus an actionable empty state that points at global search. Implementation lands separately.
Design-of-record for the home page overhaul decided during the iOS acceptance audit (four iteration boards, final = temp/home-redesign/ iter9): quiet top half (continue-reading + recent reads as hairline rows), mutually exclusive repo/local segmented tabs, one unified white card token set, pins shown once, destructive actions moved into the overflow menu, and tablet layouts (portrait two-column grid, landscape two-pane) with content-enlargement for sparse states instead of whitespace. Flutter implementation lands separately.
docs/design/ is the designer's home for UI deliverables going forward: one sub-directory per redesign topic, each with a spec (structure, tokens, interaction rules, acceptance list) and milestone design boards rendered losslessly from the HTML mockups. Process drafts stay in temp/ and are never committed. The home-redesign topic moves here with its three milestone boards (directions, segmented-tabs states, final phone/tablet/sparse-state).
Design-of-record for the reading screen decided over six iteration boards grounded in on-device screenshots (final = boards5/boards6): persistent pine TOC primary button with collapsed prev/next mini buttons, redesigned overflow menu (three groups, icons, current-state values, verified against the real device menu items), translucent position toast that never covers body text, table cards with the existing wrap toggle plus a right-edge fade hint, and tablet layouts (landscape two-pane with a persistent TOC sidebar, portrait centered measure). Implementation lands separately.
Design-of-record for the code viewer, modeled on GitHub Mobile's blob view per the user's direction (final = boards-gh/boards-tablet): breadcrumb path row, language/size/lines chip row with a single copy entry, blob-style code with GitHub Light syntax colors and a right-edge fade hint, block selection highlight with a light toolbar (no black overlay in light mode), and tablet layouts (landscape persistent symbol sidebar two-pane, portrait phone-like). Implementation lands separately.
The two spec markdown files were written to the worktree but never staged, so the earlier commits on the design branch carried only the board PNGs. Commit them here on main so every approved page has its spec and boards together in docs/design/.
Design-of-record for the update inbox and the bookmarks sheet, from on-device screenshots (final = phone/tablet HTML+PNG): group headers with sync time, de-emphasized config-only changes, an actionable empty state, bookmark entries that carry their source file and position, and a landscape two-pane tablet layout with a diff summary detail pane. HTML sources ship alongside PNGs per the new delivery convention.
…vice Per the new delivery convention (recorded in README): HTML design files are a formal deliverable readable by agents without vision, and phone and tablet layouts must ship as separate files. Adds phone.html/tablet.html plus rendered PNGs for home, reader, code viewer, tree and search; adds the previously missing tree and search tablet boards (landscape tree-plus-preview two-pane and centered portrait; search bar top with centered results column).
Design-of-record for the settings area from on-device screenshots (final = phone/tablet HTML+PNG): tinted icon tiles unified with the rest of the app, pine-green switches and sliders with value-aligned rows, and an iPad-style two-pane tablet layout (category sidebar with a solid pine selected state plus a linked content pane) per the user's direction. Implementation lands separately.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
Design-of-record for every reader surface, produced by the designer track (spec + boards only; implementation lands separately). Each topic under docs/design/ carries:
Topics
Also restores the home/reader/code specs that previously lived only on the docs/home-redesign-spec branch, and adds the previously missing tree/search/settings tablet boards.
Verification
Boards are static HTML/PNG deliverables; CI (analyze + tests) is unaffected by docs-only changes.