6.8 KiB
SLICE 13 — Remove underlines from kanban and matrix cards
State-saving rule: update this file after every completed task and whenever work pauses. Keep implementation, automated validation, production packaging, and manual Joplin acceptance as separate status boundaries.
Status
COMPLETE. Phases 1–5 are implemented and validated. Automation and package inspection passed, and the user confirmed manual Joplin acceptance on 2026-07-28.
Goal
Remove the distracting underline from every kanban and matrix card title while preserving the visual distinction for completed items and every existing card interaction.
The change applies equally to:
- ordinary project notes;
- incomplete native to-dos;
- completed native to-dos in Kanban Done;
- completed ordinary notes in Kanban Done;
- cards in both Skeleton and Eisenhower matrices;
- single and notebook-grouped layouts.
Confirmed diagnosis
Kanban and matrix cards are rendered by the shared renderCard function as:
<div class="gtd-kanban-card gtd-calendar-clickable">
<div class="gtd-kanban-card-title">...</div>
</div>
The underline is real and comes from the generic clickable rule:
.gtd-calendar-clickable {
cursor: pointer;
text-decoration: underline;
}
Calendar items already suppress that decoration through a calendar-scoped override. Kanban and matrix cards do not, so the parent decoration propagates through their title text.
Completed-card strikethrough is separate. renderCard applies an inline
line-through directly to .gtd-kanban-card-title when card.completed is
true. Removing the parent underline therefore must not remove Done styling.
Confirmed design
Add a card-scoped override to the existing .gtd-kanban-card rule:
.gtd-kanban-card {
text-decoration: none;
}
This selector is deliberately narrow:
- It affects both kanban and matrix because they share
renderCard. - It affects both notes and to-dos because both use the same card element.
- It does not change calendar events, unscheduled items, Gantt rows, debug output, warnings, or other clickable elements.
- It does not change
cursor: pointer, card borders, hover borders, custom colours, glyphs, recurrence marks, details, pagination, or click navigation. - It leaves the completed title's inline
line-throughauthoritative.
Do not remove text-decoration: underline from the generic
.gtd-calendar-clickable rule. Other renderers may rely on that default, and a
global change would make this small visual correction unnecessarily broad.
Visual state table
| Card | Before | After |
|---|---|---|
| Backlog/In Progress note | Underline | No decoration |
| Backlog/In Progress to-do | Underline | No decoration |
| Done ordinary note | Underline + line-through | Line-through only |
| Done native to-do | Underline + line-through | Line-through only |
| Matrix note or to-do | Underline | No decoration |
Custom foreground colours, including intentionally red text, remain unchanged; only the underline is removed.
Accessibility and interaction boundary
Cards remain visually identifiable as interactive controls through their card container, border, hover-border change, glyph, and pointer cursor. Click-to-open behavior is unchanged.
This slice does not redesign keyboard semantics or convert cards from div
elements to buttons/links. That would be a separate accessibility task with a
larger markup, focus, key handling, and styling surface.
Implementation plan
Phase 1 — CSS correction
- Add
text-decoration: noneto.gtd-kanban-cardinsrc/event-calendar.css. - Keep the generic
.gtd-calendar-clickableunderline rule unchanged. - Keep the existing calendar-scoped decoration override unchanged.
- Make no JavaScript or payload changes.
Phase 2 — Static and rendering regression audit
- Confirm kanban and matrix still use the shared
.gtd-kanban-cardelement. - Confirm incomplete cards receive no inline text decoration.
- Confirm completed cards still set
line-throughon the title row. - Confirm custom
fg-colourandbg-colourremain inline card styles. - Confirm hover details, card-detail modes, click navigation, glyphs, and recurrence marks use unchanged code paths.
- Confirm single and notebook-grouped layouts use the same renderer.
Phase 3 — Documentation
- Add an unreleased CHANGELOG entry describing the visual cleanup.
- Update README or SPEC only if existing text claims cards are underlined; otherwise avoid unnecessary documentation churn.
- Record the screenshot-derived acceptance intent in this file.
Phase 4 — Automated validation and packaging
- Run the complete Jest suite (251 tests across 16 suites).
- Run TypeScript validation and webview JavaScript syntax checking.
- Run CSS/build, whitespace, and prohibited-reference audits.
- Build the production JPL.
- Inspect the packaged
event-calendar.cssand confirm the scoped override is present. - Inspect archive contents; SHA-256:
final v1.0.0 artifact
0b28fb0f5ffcb60d92e017fb0972ecaa456fcc3c24b144891dce7d72dc7d98ef.
Phase 5 — Manual Joplin acceptance
- Backlog project-note titles are not underlined.
- In Progress project-note titles are not underlined.
- Backlog and In Progress to-do titles are not underlined.
- Done note titles show line-through without underline.
- Done to-do titles show line-through without underline.
- Skeleton matrix note and to-do titles are not underlined.
- Eisenhower matrix note and to-do titles are not underlined.
- Custom foreground/background colours still render correctly.
- Hover borders and card-detail behavior still work.
- Clicking every card type still opens its source note.
- Single and notebook-grouped views render consistently.
- Record explicit user sign-off separately from automated checks.
Out of scope
- Changing the generic clickable style globally.
- Changing calendar, Unscheduled, Gantt, warning, or debug decorations.
- Changing completed-item semantics or removing line-through.
- Altering card colours, borders, spacing, typography, glyphs, or pagination.
- Changing card markup, focus behavior, keyboard behavior, or ARIA semantics.
- Changing kanban/matrix filtering, sorting, grouping, or data collection.
- Bumping the plugin version or performing the v1.0.0 release.
Acceptance criteria
- No kanban or matrix card title is underlined solely because it is clickable.
- Completed kanban notes and to-dos retain line-through styling.
- The change applies identically to notes, to-dos, matrix modes, and grouped layouts through the shared card renderer.
- No other clickable view element changes decoration.
- Automated validation, production packaging, and explicit manual acceptance are completed and recorded separately.