Files
tolaria/design/autocomplete-flat-list.pen
lucaronin f51f061e91 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>
2026-02-24 23:43:21 +01:00

248 lines
7.5 KiB
Plaintext

{
"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": {}
}