2026-07-28 12:11:09 -04:00

6.8 KiB
Raw Permalink Blame History

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 15 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-through authoritative.

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: none to .gtd-kanban-card in src/event-calendar.css.
  • Keep the generic .gtd-calendar-clickable underline 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-card element.
  • Confirm incomplete cards receive no inline text decoration.
  • Confirm completed cards still set line-through on the title row.
  • Confirm custom fg-colour and bg-colour remain 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.css and 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.