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 <noreply@anthropic.com>
This commit is contained in:
lucaronin
309
design/person-mention.pen
Normal file
309
design/person-mention.pen
Normal file
@@ -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": {}
|
||||
}
|
||||
Reference in New Issue
Block a user