175 lines
6.8 KiB
Markdown
175 lines
6.8 KiB
Markdown
# 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:
|
||
|
||
```html
|
||
<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:
|
||
|
||
```css
|
||
.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:
|
||
|
||
```css
|
||
.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
|
||
|
||
- [x] Add `text-decoration: none` to `.gtd-kanban-card` in
|
||
`src/event-calendar.css`.
|
||
- [x] Keep the generic `.gtd-calendar-clickable` underline rule unchanged.
|
||
- [x] Keep the existing calendar-scoped decoration override unchanged.
|
||
- [x] Make no JavaScript or payload changes.
|
||
|
||
### Phase 2 — Static and rendering regression audit
|
||
|
||
- [x] Confirm kanban and matrix still use the shared `.gtd-kanban-card` element.
|
||
- [x] Confirm incomplete cards receive no inline text decoration.
|
||
- [x] Confirm completed cards still set `line-through` on the title row.
|
||
- [x] Confirm custom `fg-colour` and `bg-colour` remain inline card styles.
|
||
- [x] Confirm hover details, card-detail modes, click navigation, glyphs, and
|
||
recurrence marks use unchanged code paths.
|
||
- [x] Confirm single and notebook-grouped layouts use the same renderer.
|
||
|
||
### Phase 3 — Documentation
|
||
|
||
- [x] Add an unreleased CHANGELOG entry describing the visual cleanup.
|
||
- [x] Update README or SPEC only if existing text claims cards are underlined;
|
||
otherwise avoid unnecessary documentation churn.
|
||
- [x] Record the screenshot-derived acceptance intent in this file.
|
||
|
||
### Phase 4 — Automated validation and packaging
|
||
|
||
- [x] Run the complete Jest suite (251 tests across 16 suites).
|
||
- [x] Run TypeScript validation and webview JavaScript syntax checking.
|
||
- [x] Run CSS/build, whitespace, and prohibited-reference audits.
|
||
- [x] Build the production JPL.
|
||
- [x] Inspect the packaged `event-calendar.css` and confirm the scoped override
|
||
is present.
|
||
- [x] Inspect archive contents; SHA-256:
|
||
final v1.0.0 artifact
|
||
`0b28fb0f5ffcb60d92e017fb0972ecaa456fcc3c24b144891dce7d72dc7d98ef`.
|
||
|
||
### Phase 5 — Manual Joplin acceptance
|
||
|
||
- [x] Backlog project-note titles are not underlined.
|
||
- [x] In Progress project-note titles are not underlined.
|
||
- [x] Backlog and In Progress to-do titles are not underlined.
|
||
- [x] Done note titles show line-through without underline.
|
||
- [x] Done to-do titles show line-through without underline.
|
||
- [x] Skeleton matrix note and to-do titles are not underlined.
|
||
- [x] Eisenhower matrix note and to-do titles are not underlined.
|
||
- [x] Custom foreground/background colours still render correctly.
|
||
- [x] Hover borders and card-detail behavior still work.
|
||
- [x] Clicking every card type still opens its source note.
|
||
- [x] Single and notebook-grouped views render consistently.
|
||
- [x] 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.
|