feat(ui): readability + body font + phase auto-collapse polish bundle#24
Merged
feat(ui): readability + body font + phase auto-collapse polish bundle#24
Conversation
PAI Orch v1 Phase 2 polish round — surfaced 2026-04-27 EOD by Nick during
soak ("hard to read; dark mode better than light, but Tasks area description
font needs to be bigger; eyes-at-47 want more contrast in BOTH modes and a
slightly easier-to-read body font") + 2026-04-30 ("collapse phase sections
when everything is checked off").
WHAT CHANGED
Body typography (app.css)
- Added --font-sans token: -apple-system, BlinkMacSystemFont, 'SF Pro Text',
'Segoe UI', Roboto, system-ui, sans-serif. Uses iOS native San Francisco
on Nick's primary device (PWA on iPhone).
- html/body font-family: var(--font-mono) -> var(--font-sans).
- html/body font-size: 14px -> 15px.
- Code/pre/kbd remain on var(--font-code) (JetBrains Mono Variable).
Task row hierarchy (TaskRow.svelte)
- Title: added font-semibold (600) for clearer separation from description.
- Description: text-xs (12px) -> text-sm (14px); mt-0.5 -> mt-1 for breathing
room.
Muted-foreground contrast (app.css)
- Light mode lightness 55.1% -> 44% (deeper gray, same hue/chroma — more
legible against white).
- Dark mode lightness 68.3% -> 78% (lighter gray — more legible against
near-black background).
- Affects all secondary text app-wide: task descriptions, phase labels,
timestamps, blockquote text, scrollbar hover, etc.
Phase auto-collapse (TaskBoard.svelte) — closes pai-p2-ux-collapse-phases
- isCollapsed() now takes section.tasks and returns:
* user-toggled value if explicit (always wins)
* else: true when every task in section is status=done
* else: false (default expanded)
- toggleSection() inverts the *currently visible* state (whether explicit
or auto-default) so a user can always expand a fully-done section even
if they have no prior toggle.
- Result: page loads with completed phases tucked away (Phase 0/1) and
in-flight phases expanded (Phase 2/3). When the last pending task in a
phase is marked done, that phase auto-collapses on the spot.
Dev tooling (vite.config.ts)
- server.allowedHosts: ['.trycloudflare.com', 'localhost', '127.0.0.1']
so Cloudflare quick tunnels (used during this polish iteration) reach
the dev server. Dev-only — has zero effect on production builds.
NOT IN BUNDLE (already shipped, discovered during scan)
- Auto-scroll chat + new-message pill (was tracked as GH#35) — implemented
in both project & area chat thread +page.svelte files with AC-15/16/17
references. Stale-task entry; will be marked done in tasks.json.
TEST PLAN
- [x] Dev-server preview verified on iPhone via Cloudflare Tunnel
- [x] Light mode: task description and phase labels noticeably more readable
- [x] Dark mode: muted text contrast improved without losing hierarchy
- [x] Title/description hierarchy: bold title + larger sub-text reads cleanly
- [x] Phase auto-collapse: completed phases tucked away on load, pending
phases expanded, manual toggle still works in both directions
- [ ] Production deploy — visual regression sweep on the live oracle.aptoworks.cloud
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
📝 WalkthroughWalkthroughUpdated theme tokens with new sans-serif font family and adjusted muted text colors. Refactored TaskBoard section collapse logic to compute state from user preferences or task completion status. Enhanced TaskRow typography styling. Added Cloudflare tunnel and localhost to Vite server allowed hosts. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~18 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Review rate limit: 0/1 reviews remaining, refill in 60 minutes.Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/lib/components/TaskBoard.svelte`:
- Around line 68-83: The auto-collapse logic in isCollapsed/toggleSection causes
sections to unmount while a task's 5s undo toast is live; modify isCollapsed
(and the related collapse behavior used at lines referenced 174-194) to treat
any task with an active undo as "not done" by checking a shared undo state
(e.g., a task.undoActive flag or a central pendingUndo map) and returning false
if any task in section has undoActive, and ensure toggleSection does not invert
to a collapsed state when an undo is active for the section; this keeps TaskRow
mounted until the undo window closes (or alternatively hoist the toast out of
TaskRow and use the same shared undo state).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 94691a17-3ded-4082-a87e-c84be643409f
📒 Files selected for processing (4)
src/app.csssrc/lib/components/TaskBoard.sveltesrc/lib/components/TaskRow.sveltevite.config.ts
Comment on lines
+68
to
83
| function isCollapsed(name: string | null, sectionTasks: Task[]): boolean { | ||
| const key = collapseKey(name); | ||
| collapsed[key] = !collapsed[key]; | ||
| // User-toggled state always wins. | ||
| if (key in collapsed) return collapsed[key]; | ||
| // Default: collapse the section when every task is done — keeps "live" | ||
| // sections (anything still pending) visible by default and tucks away | ||
| // fully-completed phases automatically. | ||
| if (sectionTasks.length === 0) return false; | ||
| return sectionTasks.every((t) => t.status === 'done'); | ||
| } | ||
|
|
||
| function isCollapsed(name: string | null): boolean { | ||
| return collapsed[collapseKey(name)] ?? false; | ||
| function toggleSection(name: string | null, sectionTasks: Task[]) { | ||
| const key = collapseKey(name); | ||
| // Invert the *currently visible* state (whether explicit or default). | ||
| collapsed[key] = !isCollapsed(name, sectionTasks); | ||
| } |
There was a problem hiding this comment.
Do not auto-collapse a section while its undo toast is still live.
When the last pending task flips to done, this logic hides the entire list immediately. That unmounts TaskRow.svelte and drops the 5s undo toast before the user can revert the completion, so the new collapse behavior breaks an existing recovery path.
Please keep the section mounted until the undo window closes, or hoist the toast out of the row component.
Also applies to: 174-194
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@src/lib/components/TaskBoard.svelte` around lines 68 - 83, The auto-collapse
logic in isCollapsed/toggleSection causes sections to unmount while a task's 5s
undo toast is live; modify isCollapsed (and the related collapse behavior used
at lines referenced 174-194) to treat any task with an active undo as "not done"
by checking a shared undo state (e.g., a task.undoActive flag or a central
pendingUndo map) and returning false if any task in section has undoActive, and
ensure toggleSection does not invert to a collapsed state when an undo is active
for the section; this keeps TaskRow mounted until the undo window closes (or
alternatively hoist the toast out of TaskRow and use the same shared undo
state).
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
1 participant
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.
Summary
Phase 2 polish round for Oracle App — six surgical UI changes Nick + Alfred iterated on during a Cloudflare-tunnel session 2026-04-30.
text-xs(12px) →text-sm(14px),mt-0.5→mt-1TaskRow.sveltefont-semibold(clearer hierarchy vs description)TaskRow.svelteapp.css--muted-foreground: 55% → 44% lightness (more contrast)app.css--muted-foreground: 68% → 78% lightness (more contrast)app.cssTaskBoard.svelteserver.allowedHostsfor Cloudflare quick tunnelsvite.config.tsWhy
Nick during 2026-04-27 EOD soak: "hard to read; dark mode better than light, but Tasks area description font needs to be bigger; eyes-at-47 want more contrast in BOTH modes and a slightly easier-to-read body font."
Plus 2026-04-30: "I would like the phases to be collapsed if everything is clicked off ... default to being expanded if there's something that still needs to be checked off."
Phase auto-collapse behavior
Discovery during the scan
+page.sveltechat thread files (AC-15/16/17 referenced in code). Stale task entry — will be marked done intasks.jsonseparately.Test plan
https://reserves-pump-action-patents.trycloudflare.com)oracle.aptoworks.cloudafter mergeCloses
pai-p2-ux-readability-polish(PAI Orch v1 Phase 2)pai-p2-ux-collapse-phases(PAI Orch v1 Phase 2)🤖 Generated with Claude Code
Summary by CodeRabbit
Style
Improvements