Merge pull request #30 from refactoringhq/task/wikilink-underline
Fix: wikilink underline follows type color
This commit is contained in:
Luca Rossi
22
.claude-done
22
.claude-done
@@ -1,20 +1,2 @@
|
||||
Task: modified-notes-indicator
|
||||
Summary: Implemented visual indicators for uncommitted modified notes across the UI.
|
||||
|
||||
Changes:
|
||||
- NoteItem: Orange dot (accent-orange) before title for notes in git modified/added state
|
||||
- TabBar: Orange dot between title and close button for tabs with uncommitted changes
|
||||
- StatusBar: "N pending" counter with CircleDot icon when modified files exist
|
||||
- useEditorSave: Added onAfterSave callback to refresh modified files list after save
|
||||
- mock-tauri: Dynamically tracks saved files as modified, clears on commit
|
||||
- Design file: 3 frames showing NoteList, TabBar, and StatusBar indicator states
|
||||
|
||||
Product decisions:
|
||||
- Used accent-orange (#D9730D) for the indicator dot to stand out from type-colored icons
|
||||
- Dot appears before title in NoteList (consistent with how editors show file state)
|
||||
- Dot appears between title and close button in TabBar (visible but non-intrusive)
|
||||
- StatusBar shows "N pending" text (not just a number) for clarity
|
||||
- Indicators disappear after git commit (mockHasChanges + mockSavedPaths cleared)
|
||||
|
||||
Tests: 12 new tests covering NoteList (4), TabBar (3), StatusBar (3), useEditorSave (2)
|
||||
All 543 tests pass. Build succeeds. Code health gates passed.
|
||||
Task: wikilink-underline
|
||||
Summary: wikilink underline now follows type color
|
||||
|
||||
185
design/wikilink-underline.pen
Normal file
185
design/wikilink-underline.pen
Normal file
@@ -0,0 +1,185 @@
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUnd1",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Wikilink Underline — Colored (Light)",
|
||||
"theme": { "Mode": "Light" },
|
||||
"clip": true,
|
||||
"width": 600,
|
||||
"height": 320,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"gap": 8,
|
||||
"padding": [24, 32],
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkUndTitle",
|
||||
"content": "Wikilink Underline: Color Follows Type",
|
||||
"fontSize": 18,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--foreground",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkUndDesc",
|
||||
"content": "border-bottom uses currentColor so the underline inherits the type color.",
|
||||
"fontSize": 13,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": "fill_container"
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUndSpacer",
|
||||
"width": "fill_container",
|
||||
"height": 12
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUndRow1",
|
||||
"name": "Row: Project (Red)",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLbl1",
|
||||
"content": "Project →",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": 100
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLink1",
|
||||
"content": "[[Laputa App]]",
|
||||
"fontSize": 14,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--accent-red",
|
||||
"textDecoration": "underline",
|
||||
"textDecorationStyle": "dotted"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUndRow2",
|
||||
"name": "Row: Person (Yellow)",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLbl2",
|
||||
"content": "Person →",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": 100
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLink2",
|
||||
"content": "[[Luca Ferraro]]",
|
||||
"fontSize": 14,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--accent-yellow",
|
||||
"textDecoration": "underline",
|
||||
"textDecorationStyle": "dotted"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUndRow3",
|
||||
"name": "Row: Topic (Green)",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLbl3",
|
||||
"content": "Topic →",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": 100
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLink3",
|
||||
"content": "[[Knowledge Management]]",
|
||||
"fontSize": 14,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--accent-green",
|
||||
"textDecoration": "underline",
|
||||
"textDecorationStyle": "dotted"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUndRow4",
|
||||
"name": "Row: Responsibility (Purple)",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLbl4",
|
||||
"content": "Responsibility →",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": 100
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLink4",
|
||||
"content": "[[Backend Development]]",
|
||||
"fontSize": 14,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--accent-purple",
|
||||
"textDecoration": "underline",
|
||||
"textDecorationStyle": "dotted"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "wkUndRow5",
|
||||
"name": "Row: Type (Blue, default)",
|
||||
"width": "fill_container",
|
||||
"gap": 12,
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLbl5",
|
||||
"content": "Type →",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"width": 100
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "wkLink5",
|
||||
"content": "[[Project]]",
|
||||
"fontSize": 14,
|
||||
"fontWeight": 500,
|
||||
"fill": "$--accent-blue",
|
||||
"textDecoration": "underline",
|
||||
"textDecorationStyle": "dotted"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
@@ -83,7 +83,7 @@ const WikiLink = createReactInlineContentSpec(
|
||||
<span
|
||||
className={`wikilink${isBroken ? ' wikilink--broken' : ''}`}
|
||||
data-target={target}
|
||||
style={{ color, textDecorationColor: color }}
|
||||
style={{ color }}
|
||||
>
|
||||
{target}
|
||||
</span>
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
"wikilink": {
|
||||
"color": "var(--accent-blue)",
|
||||
"textDecoration": "none",
|
||||
"borderBottom": "1px dotted var(--accent-blue)",
|
||||
"borderBottom": "1px dotted currentColor",
|
||||
"cursor": "pointer"
|
||||
}
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user