From 5d09e32b08d86de9795b74e3429adc37f178a7c2 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Tue, 24 Feb 2026 23:43:21 +0100 Subject: [PATCH] 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 --- design/autocomplete-flat-list.pen | 247 ++++++++++++++++++++++++++++++ 1 file changed, 247 insertions(+) create mode 100644 design/autocomplete-flat-list.pen diff --git a/design/autocomplete-flat-list.pen b/design/autocomplete-flat-list.pen new file mode 100644 index 00000000..8c37ffd1 --- /dev/null +++ b/design/autocomplete-flat-list.pen @@ -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": {} +}