Pipeline redesign (0.7.0): plan and tracking #1191

New issue

Open

opened 2026-11-01 14:17:36 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-11-01 14:17:36 +00:00

Owner

The maintainer chose the Bold "Pipeline" direction from the redesign canvas (2026-11-01) and asked for a plan, filed as milestone 0.7.0.

Design: the redesign canvas, https://claude.ai/artifact/CTfX5t4BQiVq9cH97XFvcZ (private to the maintainer until shared). Each screen has three artboards: today, polished and bold; this milestone builds bold.

What the redesign is

A dark side rail instead of the top bar: groups Work (Today, Listings, Applications, Calendar) and Library (Documents, Companies), with Settings, Help and the account at the foot. On a phone it becomes a dark bottom bar with a central New.
A command bar, Jump to anything (Ctrl K): today's site search, plus actions.
Geist and Geist Mono: figures, dates and times in mono.
The pipeline as the organising idea: six stage colours, a segmented stage bar, and "what needs you next" first on every screen that has one.
One primary action per page; the rest secondary or under More.

What it costs (measured on `main` at `f0461985a`)

Size of the code it touches: 328 templates, 43 Cotton components, app.css about 3,300 lines, app.js about 9,200 lines.
Tests: 902 browser tests in 97 files, 12 of which name the navigation.
Pictures to retake: 37 wiki images, plus the README pictures.
Most of the look is cheap, because colour, radius and type already go through one set of tokens (#292).
The cost is elsewhere: the shell, the command bar, and four pieces of new data the screens assume.

Order

Each phase lands before the next starts. Within a phase, issues are independent unless one says otherwise.

Decisions and spec: settle the open decisions below, then draw dark mode on the canvas.
Foundation: tokens, fonts, stage components and the transition switch. After this the whole app wears the new colours and type in its old layout.
Shell: rail, phone bar, command bar.
Data: days in stage, furthest stage, needs-a-document, short sector names.
Screens: one PR per screen, Today and the board first.
Finish: translations, screenshots and docs; then the switch comes out.

Decisions (the maintainer's, with a recommendation)

Geist reverses #74 (system fonts only). Recommended: self-host Geist and Geist Mono under static/. The CSP stays font-src 'self', and scripts Geist lacks keep the system stack.
Dark mode for Bold: it is not drawn yet. Recommended: draw it on the canvas before the token issue lands.
Counts in the rail (Applications 30, Listings 12…): one query each per page. Recommended: keep them, cached per person and dropped when a record changes; otherwise drop them.
Transition: recommended a per-person Try the new look switch while the milestone is open, removed when it closes, so main is never half-old, half-new for everyone. Running two shells permanently is not recommended.
Short sector names need a new translated label per NACE section: new strings for Weblate.

Not in this milestone

The CV and letter document themes: they are separate, and unaffected.
The API: unaffected.
The browser extensions (chromium, firefox, thunderbird): they will look out of family. A follow-up in their own repos, after this lands.

Issues

1. Decisions and spec

#1192 settle the decisions and draw dark mode

2. Foundation

#1193 the Bold tokens in app.css
#1194 self-host Geist and Geist Mono
#1195 stage chip and stage bar components
#1196 a per-person "Try the new look" switch during the transition

3. Shell

#1197 the side rail shell
#1198 the phone bar with a central New
#1199 the command bar (Jump to anything, Ctrl K)

4. Data

#1200 days in the current stage, from the status history
#1201 a company's furthest stage
#1202 "needs a document next"
#1203 short sector names

5. Screens

#1204 Today (the dashboard)
#1205 the Pipeline board
#1206 the application page
#1207 Listings with a preview pane
#1208 Companies (pipeline, table and map views)
#1209 Documents
#1210 Calendar (the week ahead)
#1211 Settings

6. Finish

#1212 translate the new strings in every selected language
#1213 screenshots, wiki and the design section of CONTRIBUTING
#1214 remove the transition switch and the old shell

🤖 Generated with Claude Code

The maintainer chose the **Bold "Pipeline"** direction from the redesign canvas (2026-11-01) and asked for a plan, filed as milestone 0.7.0. Design: the redesign canvas, https://claude.ai/artifact/CTfX5t4BQiVq9cH97XFvcZ (private to the maintainer until shared). Each screen has three artboards: *today*, *polished* and *bold*; this milestone builds **bold**. ## What the redesign is - **A dark side rail instead of the top bar:** groups *Work* (Today, Listings, Applications, Calendar) and *Library* (Documents, Companies), with Settings, Help and the account at the foot. On a phone it becomes a dark bottom bar with a central **New**. - **A command bar, *Jump to anything* (Ctrl K):** today's site search, plus actions. - **Geist and Geist Mono:** figures, dates and times in mono. - **The pipeline as the organising idea:** six stage colours, a segmented stage bar, and "what needs you next" first on every screen that has one. - **One primary action per page;** the rest secondary or under *More*. ## What it costs (measured on `main` at `f0461985a`) - **Size of the code it touches:** 328 templates, 43 Cotton components, `app.css` about 3,300 lines, `app.js` about 9,200 lines. - **Tests:** 902 browser tests in 97 files, 12 of which name the navigation. - **Pictures to retake:** 37 wiki images, plus the README pictures. - **Most of the look is cheap,** because colour, radius and type already go through one set of tokens (#292). - **The cost is elsewhere:** the shell, the command bar, and four pieces of new data the screens assume. ## Order Each phase lands before the next starts. Within a phase, issues are independent unless one says otherwise. 1. **Decisions and spec:** settle the open decisions below, then draw dark mode on the canvas. 2. **Foundation:** tokens, fonts, stage components and the transition switch. After this the whole app wears the new colours and type in its old layout. 3. **Shell:** rail, phone bar, command bar. 4. **Data:** days in stage, furthest stage, needs-a-document, short sector names. 5. **Screens:** one PR per screen, Today and the board first. 6. **Finish:** translations, screenshots and docs; then the switch comes out. ## Decisions (the maintainer's, with a recommendation) - **Geist reverses #74** (system fonts only). Recommended: self-host Geist and Geist Mono under `static/`. The CSP stays `font-src 'self'`, and scripts Geist lacks keep the system stack. - **Dark mode for Bold:** it is not drawn yet. Recommended: draw it on the canvas before the token issue lands. - **Counts in the rail** (Applications 30, Listings 12…): one query each per page. Recommended: keep them, cached per person and dropped when a record changes; otherwise drop them. - **Transition:** recommended a per-person *Try the new look* switch while the milestone is open, removed when it closes, so `main` is never half-old, half-new for everyone. Running two shells permanently is not recommended. - **Short sector names** need a new translated label per NACE section: new strings for Weblate. ## Not in this milestone - **The CV and letter document themes:** they are separate, and unaffected. - **The API:** unaffected. - **The browser extensions** (chromium, firefox, thunderbird): they will look out of family. A follow-up in their own repos, after this lands. ## Issues **1. Decisions and spec** - [ ] #1192 settle the decisions and draw dark mode **2. Foundation** - [ ] #1193 the Bold tokens in app.css - [ ] #1194 self-host Geist and Geist Mono - [ ] #1195 stage chip and stage bar components - [ ] #1196 a per-person "Try the new look" switch during the transition **3. Shell** - [ ] #1197 the side rail shell - [ ] #1198 the phone bar with a central New - [ ] #1199 the command bar (Jump to anything, Ctrl K) **4. Data** - [ ] #1200 days in the current stage, from the status history - [ ] #1201 a company's furthest stage - [ ] #1202 "needs a document next" - [ ] #1203 short sector names **5. Screens** - [ ] #1204 Today (the dashboard) - [ ] #1205 the Pipeline board - [ ] #1206 the application page - [ ] #1207 Listings with a preview pane - [ ] #1208 Companies (pipeline, table and map views) - [ ] #1209 Documents - [ ] #1210 Calendar (the week ahead) - [ ] #1211 Settings **6. Finish** - [ ] #1212 translate the new strings in every selected language - [ ] #1213 screenshots, wiki and the design section of CONTRIBUTING - [ ] #1214 remove the transition switch and the old shell 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tiagoagueda added this to the 0.7.0 milestone

2026-11-01 14:17:36 +00:00

tiagoagueda added the

interface

enhancement

labels