UX-22: Today - reduce card density and add visual hierarchy

[Chris0Jeky]

Summary

• Zero-count collapse: Stats with count=0 now render as a compact chip row instead of full cards, reducing visual noise when things are clear
• Visual hierarchy: Ember accent left-border on urgent stat cards (review, overdue) and agenda sections; muted styling for zero-count badges
• Progressive disclosure: Only the first 3 agenda sections are expanded by default; remaining sections hidden behind a "Show more" button
• Spacing: Increased gaps from space-3/space-4 to space-5/space-6 (~1.1-1.3rem) for better breathing room
• Card differentiation: Left-border color coding - ember for urgent sections (review, capture, overdue), neutral for informational (due today, blocked)

Closes #622

Test plan

• Verify stats with non-zero counts render as full cards with ember left-border on review/overdue
• Verify stats with zero counts render as compact chip row below the stats grid
• Verify only first 3 agenda sections are visible initially
• Verify "Show more" button appears and reveals remaining sections when clicked
• Verify ember left-border on review/capture/overdue agenda cards
• Verify neutral left-border on due-today/blocked agenda cards
• Verify zero-count badge uses muted styling instead of red
• Verify increased spacing between sections is visually coherent
• Verify responsive behavior at mobile breakpoint (768px)
• Run npm run typecheck and npm run build - both pass

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.
To continue using code reviews, you can upgrade your account or add credits to your account and enable them for code reviews in your settings.

[Chris0Jeky]

Adversarial Self-Review

Acceptance Criteria Check

• Zero-count collapse: Stats with count=0 render as compact chip row -- implemented via activeStats/zeroStats split
• Visual hierarchy: Ember accent on urgent stat cards and agenda sections -- .td-today-stat--urgent and .td-today-card--ember
• Progressive disclosure: First 3 sections expanded, rest behind "Show more" -- visibleAgendaSections with INITIAL_VISIBLE_SECTIONS = 3
• Spacing: Gaps increased to 1.1-1.3rem range -- space-5 (1.1rem) and space-6 (1.3rem)
• Card differentiation: Left-border color coding -- ember for urgent, neutral (tertiary text color) for informational

Potential Issues Found

1. Edge case: all stats are zero -- If every stat has value=0, the activeStats grid renders empty (no <article> elements) and the <section class="td-today__stats"> will be an empty container taking up space. This is a minor visual issue since the zero-chips row still renders below. Could add v-if="activeStats.length > 0" to the stats section for cleanliness, but it is not a functional bug.

2. showAllSections resets on component re-mount -- The ref(false) resets when navigating away and back. This is acceptable behavior (user returns to a collapsed view) and matches keep-alive semantics since onActivated refreshes data anyway.

3. Border conflict on .td-today-card -- The card has both border: 0.5px solid var(--td-border-ghost) and border-left: 3px solid .... The border-left override works correctly in CSS specificity since it is more specific than the shorthand's left component. Verified visually: left gets 3px colored, other three sides get the 0.5px ghost. No issue.

4. No "Show less" / collapse button -- Once expanded, sections stay expanded until navigation. This is intentional progressive disclosure (expand-only within a session). Acceptable for the issue scope.

5. Stat urgency is hardcoded by ID -- stat.id === 'review' || stat.id === 'overdue' is a simple approach. If stat IDs change, the urgency logic breaks. However, the stats and their IDs are defined in the same file, so this coupling is local and acceptable.

Verdict

No blocking issues found. One minor improvement opportunity (empty stats section guard) that I will fix now.

[gemini-code-assist]

Code Review

This pull request refactors the TodayView to improve information density and visual hierarchy. It introduces progressive disclosure for agenda sections via a 'Show more' button and categorizes statistics into active cards and compact chips for zero values. Additionally, it implements urgency-based styling for both stats and agenda cards. Feedback suggests extending the urgent highlighting to the 'triage' statistic to maintain consistency with the corresponding agenda section.

[gemini-code-assist]

For visual consistency with the agenda sections, the 'Needs triage' stat (ID: triage) should also be marked as urgent. Currently, only review and overdue are highlighted, but the corresponding 'Capture triage' agenda section is marked as ember (urgent). Using an array with .includes() also makes this logic more readable and easier to maintain.

:class="{ 'td-today-stat--urgent': ['review', 'overdue', 'triage'].includes(stat.id) }"