docs: add design file for flat list autocomplete UI
Shows the new flat suggestion menu layout: note titles on the left, discrete type badges with accent colors on the right, no group headers. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
247
design/autocomplete-flat-list.pen
Normal file
247
design/autocomplete-flat-list.pen
Normal file
@@ -0,0 +1,247 @@
|
||||
{
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acFlatList",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Autocomplete — Flat List with Type Badge",
|
||||
"clip": true,
|
||||
"width": 400,
|
||||
"height": 380,
|
||||
"fill": "#FFFFFF",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acHeader",
|
||||
"name": "Context: Editor line with [[query",
|
||||
"width": "fill_container",
|
||||
"height": 40,
|
||||
"fill": "#FAFAFA",
|
||||
"padding": [10, 16],
|
||||
"alignItems": "center",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acQueryLine",
|
||||
"content": "Working on [[proj",
|
||||
"fontSize": 15,
|
||||
"fill": "#1a1a1a"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acMenu",
|
||||
"name": "Suggestion Menu (flat, no group headers)",
|
||||
"width": 320,
|
||||
"fill": "#FFFFFF",
|
||||
"layout": "vertical",
|
||||
"gap": 0,
|
||||
"padding": 4,
|
||||
"cornerRadius": 6,
|
||||
"stroke": {
|
||||
"align": "outside",
|
||||
"thickness": 1,
|
||||
"fill": "rgba(0,0,0,0.1)"
|
||||
},
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acItem1",
|
||||
"name": "Item: Build Laputa (Project)",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [6, 10],
|
||||
"cornerRadius": 4,
|
||||
"fill": "rgba(21,93,255,0.08)",
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acTitle1",
|
||||
"content": "Build Laputa",
|
||||
"fontSize": 13,
|
||||
"fill": "#1a1a1a",
|
||||
"fontWeight": "400"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acType1",
|
||||
"content": "Project",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"fill": "var(--accent-red, #E53935)",
|
||||
"opacity": 0.8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acItem2",
|
||||
"name": "Item: Project Planning (Responsibility)",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [6, 10],
|
||||
"cornerRadius": 4,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acTitle2",
|
||||
"content": "Project Planning",
|
||||
"fontSize": 13,
|
||||
"fill": "#1a1a1a",
|
||||
"fontWeight": "400"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acType2",
|
||||
"content": "Responsibility",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"fill": "var(--accent-purple, #7B1FA2)",
|
||||
"opacity": 0.8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acItem3",
|
||||
"name": "Item: Q1 Project Review (no type = Note)",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [6, 10],
|
||||
"cornerRadius": 4,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acTitle3",
|
||||
"content": "Q1 Project Review",
|
||||
"fontSize": 13,
|
||||
"fill": "#1a1a1a",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acItem4",
|
||||
"name": "Item: Project Kickoff (Event)",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [6, 10],
|
||||
"cornerRadius": 4,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acTitle4",
|
||||
"content": "Project Kickoff",
|
||||
"fontSize": 13,
|
||||
"fill": "#1a1a1a",
|
||||
"fontWeight": "400"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acType4",
|
||||
"content": "Event",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"fill": "var(--accent-yellow, #F9A825)",
|
||||
"opacity": 0.8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acItem5",
|
||||
"name": "Item: Side Project Ideas (Topic)",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [6, 10],
|
||||
"cornerRadius": 4,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acTitle5",
|
||||
"content": "Side Project Ideas",
|
||||
"fontSize": 13,
|
||||
"fill": "#1a1a1a",
|
||||
"fontWeight": "400"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acType5",
|
||||
"content": "Topic",
|
||||
"fontSize": 11,
|
||||
"fontWeight": "500",
|
||||
"fill": "var(--accent-green, #43A047)",
|
||||
"opacity": 0.8
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acItem6",
|
||||
"name": "Item: Project Retrospective (no type)",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"padding": [6, 10],
|
||||
"cornerRadius": 4,
|
||||
"alignItems": "center",
|
||||
"justifyContent": "space-between",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acTitle6",
|
||||
"content": "Project Retrospective",
|
||||
"fontSize": 13,
|
||||
"fill": "#1a1a1a",
|
||||
"fontWeight": "400"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "acAnnotation",
|
||||
"name": "Design Notes",
|
||||
"width": "fill_container",
|
||||
"padding": [12, 16],
|
||||
"layout": "vertical",
|
||||
"gap": 6,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acNote1",
|
||||
"content": "Key changes from previous design:",
|
||||
"fontSize": 12,
|
||||
"fontWeight": "600",
|
||||
"fill": "#666"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "acNote2",
|
||||
"content": "• Flat list — no group headers for type sections\n• Sorted by match relevance (fuzzy score)\n• Type badge on right with accent color\n• No badge for untyped notes (\"Note\")\n• Max 10 results visible\n• Long type names truncated with ellipsis",
|
||||
"fontSize": 11,
|
||||
"fill": "#999",
|
||||
"lineHeight": 1.6
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {}
|
||||
}
|
||||
Reference in New Issue
Block a user