From 4ff34725dea56fc79de7befb18ddb041da9c8e50 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Wed, 25 Feb 2026 13:36:28 +0100 Subject: [PATCH] design: person-mention wireframes Three UI states for @mention autocomplete: - Autocomplete open with person suggestions - No results state - After selection showing inserted wikilink Co-Authored-By: Claude Opus 4.6 --- design/person-mention.pen | 309 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 309 insertions(+) create mode 100644 design/person-mention.pen diff --git a/design/person-mention.pen b/design/person-mention.pen new file mode 100644 index 00000000..c29207b0 --- /dev/null +++ b/design/person-mention.pen @@ -0,0 +1,309 @@ +{ + "children": [ + { + "type": "frame", + "id": "pm-auto-open", + "x": 0, + "y": 0, + "name": "Person Mention — Autocomplete Open", + "clip": true, + "width": 600, + "height": 340, + "fill": "$--background", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "text", + "id": "pm-desc1", + "content": "User types @ in the editor. Autocomplete popup appears filtered to Person entries only.", + "fontSize": 11, + "color": "$--muted-foreground", + "width": "fill_container", + "padding": [8, 12] + }, + { + "type": "frame", + "id": "pm-editor-area1", + "name": "Editor Area", + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "padding": [24, 40], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "pm-line1", + "content": "Meeting notes from today. Discussed with @mat", + "fontSize": 15, + "color": "$--foreground" + }, + { + "type": "frame", + "id": "pm-popup1", + "name": "Mention Popup", + "width": 280, + "fill": "$--popover", + "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "cornerRadius": 6, + "layout": "vertical", + "padding": [4, 4], + "gap": 0, + "children": [ + { + "type": "frame", + "id": "pm-item1", + "name": "Selected Item", + "width": "fill_container", + "fill": "$--accent", + "cornerRadius": 4, + "padding": [6, 10], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pm-item1-icon", + "content": "@", + "fontSize": 13, + "fontWeight": "600", + "color": "$--accent-blue" + }, + { + "type": "text", + "id": "pm-item1-title", + "content": "Matteo Cellini", + "fontSize": 13, + "color": "$--foreground" + }, + { + "type": "text", + "id": "pm-item1-type", + "content": "Person", + "fontSize": 11, + "fontWeight": "500", + "color": "$--accent-blue" + } + ] + }, + { + "type": "frame", + "id": "pm-item2", + "name": "Unselected Item", + "width": "fill_container", + "cornerRadius": 4, + "padding": [6, 10], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pm-item2-icon", + "content": "@", + "fontSize": 13, + "fontWeight": "600", + "color": "$--muted-foreground" + }, + { + "type": "text", + "id": "pm-item2-title", + "content": "Maria Bianchi", + "fontSize": 13, + "color": "$--foreground" + }, + { + "type": "text", + "id": "pm-item2-type", + "content": "Person", + "fontSize": 11, + "fontWeight": "500", + "color": "$--accent-blue" + } + ] + }, + { + "type": "frame", + "id": "pm-item3", + "name": "Unselected Item 2", + "width": "fill_container", + "cornerRadius": 4, + "padding": [6, 10], + "gap": 12, + "alignItems": "center", + "children": [ + { + "type": "text", + "id": "pm-item3-icon", + "content": "@", + "fontSize": 13, + "fontWeight": "600", + "color": "$--muted-foreground" + }, + { + "type": "text", + "id": "pm-item3-title", + "content": "Marco Verdi", + "fontSize": 13, + "color": "$--foreground" + }, + { + "type": "text", + "id": "pm-item3-type", + "content": "Person", + "fontSize": 11, + "fontWeight": "500", + "color": "$--accent-blue" + } + ] + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "pm-no-results", + "x": 620, + "y": 0, + "name": "Person Mention — No Results", + "clip": true, + "width": 600, + "height": 220, + "fill": "$--background", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "text", + "id": "pm-desc2", + "content": "User types @xyz — no matching Person entries found.", + "fontSize": 11, + "color": "$--muted-foreground", + "width": "fill_container", + "padding": [8, 12] + }, + { + "type": "frame", + "id": "pm-editor-area2", + "name": "Editor Area", + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "padding": [24, 40], + "layout": "vertical", + "gap": 8, + "children": [ + { + "type": "text", + "id": "pm-line2", + "content": "Need to follow up with @xyz", + "fontSize": 15, + "color": "$--foreground" + }, + { + "type": "frame", + "id": "pm-popup2", + "name": "Empty Popup", + "width": 280, + "fill": "$--popover", + "stroke": { "align": "inside", "thickness": 1, "fill": "$--border" }, + "cornerRadius": 6, + "padding": [8, 12], + "children": [ + { + "type": "text", + "id": "pm-empty-text", + "content": "No results", + "fontSize": 13, + "color": "$--muted-foreground" + } + ] + } + ] + } + ] + }, + { + "type": "frame", + "id": "pm-inserted", + "x": 0, + "y": 360, + "name": "Person Mention — After Selection (Wikilink Inserted)", + "clip": true, + "width": 600, + "height": 180, + "fill": "$--background", + "layout": "vertical", + "gap": 0, + "children": [ + { + "type": "text", + "id": "pm-desc3", + "content": "After selecting a person, a wikilink [[Person Name]] is inserted. Renders as clickable link.", + "fontSize": 11, + "color": "$--muted-foreground", + "width": "fill_container", + "padding": [8, 12] + }, + { + "type": "frame", + "id": "pm-editor-area3", + "name": "Editor Area", + "width": "fill_container", + "height": "fill_container", + "fill": "$--background", + "padding": [24, 40], + "layout": "vertical", + "gap": 4, + "children": [ + { + "type": "frame", + "id": "pm-line3-wrap", + "name": "Text Line", + "width": "fill_container", + "gap": 0, + "alignItems": "baseline", + "children": [ + { + "type": "text", + "id": "pm-line3a", + "content": "Meeting notes from today. Discussed with ", + "fontSize": 15, + "color": "$--foreground" + }, + { + "type": "text", + "id": "pm-wikilink", + "content": "Matteo Cellini", + "fontSize": 15, + "fontWeight": "500", + "color": "$--accent-blue" + }, + { + "type": "text", + "id": "pm-line3b", + "content": " about the sponsorship deal.", + "fontSize": 15, + "color": "$--foreground" + } + ] + }, + { + "type": "text", + "id": "pm-line3-note", + "content": "Stored in markdown as: ...Discussed with [[Matteo Cellini]] about...", + "fontSize": 11, + "color": "$--muted-foreground", + "padding": [8, 0, 0, 0] + } + ] + } + ] + } + ], + "variables": {} +}