site design revamp: polished and friendly, not brutalist #10

closed cmc opened this on 2026-08-24 02:52 UTC · design roadmap

Discussion

cmc 2026-08-24 02:52 UTC

The current UI is intentionally minimal, but it has landed on the brutalist end: bare tables, no visual hierarchy, default-looking everything. gitbay is meant to feel polished and friendly — a product, not a debug view. This issue is the umbrella for a design pass across the site.

Keep the principles that are working:

  • server-rendered, no build step, JavaScript optional at most
  • fast on any connection; light and dark from one stylesheet
  • content-first: code, diffs, and text stay the stars

Areas to address:

  • identity: a wordmark/logo, a considered color palette beyond default-blue links, a favicon
  • typography and rhythm: real type scale, comfortable line lengths and spacing instead of browser defaults
  • header/nav: a proper site header; repo pages need clearer hierarchy between owner, repo, and tabs
  • index and owner pages: repo entries with descriptions (#4), last-activity, language hints — a richer list instead of a three-column table
  • repo browsing: file table styling, README framing, commit list layout, nicer signature badges
  • issues/MRs: readable discussion threads with clear authorship, state chips, label colors (the labels table already has a color column, unused)
  • empty states and errors: friendly guidance instead of bare "no issues" and default 404 pages
  • mobile: everything usable at phone width

Suggest a small design-token layer first (spacing, type, color variables), then rework page by page: index, owner, repo home, log, issue/MR views.

cmc 2026-08-24 17:21 UTC

Design pass shipped and deployed (2baa586..027a724).

  • token layer: spacing/type/radius scales, sea-blue accent, semantic badge colors (green/amber/red/muted kept distinct, purple for merged), color-scheme declared for native dark form controls
  • identity: wordmark with inline-SVG wave glyph, /favicon.svg (reserved word added), footer with gitbay link + build revision
  • header/nav: owner/repo hierarchy, description, tab bar with per-handler active state; clone line moved to the files page
  • index/owner: repo lists with description, default branch, private/archived chips; owner profiles as lede + member chips
  • browsing: path bar with ref chip and breadcrumbs, README card with filename header, log rows with subject/author/badge/sha hierarchy, commit and refs cleanup, empty-repo push hint
  • issues/MRs: comment cards with author/timestamp headers, state chips, segmented filters; labels.color wired (stored hex or stable palette default by name hash) with new store methods LabelColors/ListIssueLabels
  • review threads: inline cards under diff lines, resolved/stale accents kept
  • 404: designed page via a notFound helper (status still 404, private repos indistinguishable)
  • mobile: usable at 375px, no page-level horizontal scroll; mode column hidden narrow
  • also surfaced archived chips and topic chips from d298215

Verified with screenshots at desktop/375px in light and dark against a seeded scratch instance; full test suite green. Leaving open for visual review.

cmc 2026-08-24 18:06 UTC

Follow-up layout pass in 069bd1e after cmc's review: shared .container aligning header/main/footer to one 64rem column (the wordmark and content now share a left edge on wide screens), repo listings as a responsive card grid with a profile header block on owner pages, bordered-card treatment unified across tree/refs tables, log rows, and issue lists, and a 48rem reading measure on discussion threads. Deployed.

referenced in commit 33f4fa3490: web: top nav, linked footer, privacy page, blue accent

2026-08-24 22:21 UTC

referenced in commit 542b37e732: web: repo rows, file table headers, README fixes, branch dropdown

2026-08-24 23:04 UTC

referenced in commit 35cb93f6f1: Commit-reference entries become system messages with linked shas

2026-08-24 23:07 UTC

referenced in commit a733a81313: web: pinning, org repos, labels, linked authors and parents

2026-08-24 23:21 UTC

referenced in commit b44a1e91cd: Editable issues and MRs: SSH commands, system messages, web forms

2026-08-24 23:27 UTC
cmc 2026-08-24 23:28 UTC

Review round shipped in !20-!24, all deployed: top nav bar (explore / new repository / profile / logout on every page; 'logged in as' links the profile; stray middot gone), repo listings as full rows (title+visibility, description, clickable topic chips, branch · license · last-updated), file table column headers, clickable README card header, relative README links resolved to blob/raw (org .html exports map back to source files), branch dropdown on tree and blob pages, web pin/unpin on repo headers, org owner picker on the new-repo form, labels on the new-issue form plus label chips filtering ?label=, clickable usernames throughout, linked footer hash and a /privacy page (project statement + web.privacy_notice for the operator), accent moved to #0000f0 light / #8899ff dark (both WCAG AA+), commit pages link parents, and issues/MRs are now editable (new issue edit / mr edit over SSH — author or write — with matching web forms; labels replaceable with write access). Commit references also became system messages with clickable shas per the follow-up note. Left open for your review.

referenced in commit 72a8464508: web: disclosure arrow on collapsible diffs

2026-08-24 23:45 UTC
cmc 2026-08-24 23:51 UTC

Closing per cmc after visual review: the founding revamp is done — tokens and identity, top nav, blue accent, row listings, browsing polish, collapsible diffs with disclosure arrows, editable issues/MRs, privacy page, and the rest of the review round (!20-!26 plus the original agent pass). Future design work is iteration and gets its own issues.

referenced in commit 4a92b36565: docs: #10 closed, Phase 2 complete

2026-08-24 23:52 UTC

referenced in commit 71e32809de: Add admin migrate-commit-refs backfill

2026-08-25 00:54 UTC

referenced in commit 794702c58d: Fix mobile layout overflows and link mirror targets

2026-08-25 15:08 UTC

referenced in commit e278948b45: Class-based syntax highlighting with light and dark palettes

2026-08-25 20:12 UTC

referenced in commit af7479c3da: Scheme-aware highlighting everywhere code renders

2026-08-25 20:34 UTC