feat: color wikilinks by destination note type

Wikilinks in the editor now show the accent color of the target note's
type (Project=red, Person=yellow, Topic=green, etc.) instead of always
being blue. Broken links (target not found) show muted text with a
dashed underline.

- Extract wikilink color resolution to src/utils/wikilinkColors.ts
- Use getTypeColor from typeColors.ts (single source of truth)
- Support alias and pipe-syntax matching in findEntryByTarget
- Add wikilink--broken CSS class for non-existent targets
- Add 17 unit tests covering all color resolution cases
- Update mock data with wikilinks to various note types + broken link

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
2026-02-23 20:44:30 +01:00
parent 6e8c7a63d8
commit 3d35eaff20
5 changed files with 190 additions and 31 deletions

View File

@@ -1,6 +1,5 @@
/* Wikilink inline content */
/* Wikilink inline content — color is set via inline style per note type */
.wikilink {
color: var(--accent-blue, #2196f3);
cursor: pointer;
text-decoration: underline;
text-decoration-style: dotted;
@@ -10,8 +9,18 @@
}
.wikilink:hover {
background: var(--accent-blue-bg, rgba(33, 150, 243, 0.1));
text-decoration-style: solid;
opacity: 0.85;
}
/* Broken wikilink: dashed underline + lower opacity */
.wikilink--broken {
text-decoration-style: dashed;
opacity: 0.7;
}
.wikilink--broken:hover {
opacity: 0.55;
}
/* BlockNote container */