davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
3ce3e4e1507a534c45bbd9eb5ba26ec89cbcfbfa
tolaria/design/performance-note-list.pen
lucaronin f6a4ab14de test+design: add virtual list tests and design wireframes 
Add 7 new tests covering virtual list behavior with large datasets:
- 9000-entry rendering without crash
- Items rendered via Virtuoso mock
- Search filtering on large dataset
- Sorting correctness with large dataset
- Section group filtering with mixed types
- Selection highlighting in virtualized list
- Click handler on virtualized items

Add design/performance-note-list.pen with 4 frames:
1. Default state — 9000+ notes with scrollbar
2. Scrolled mid-list — items 4500+
3. Search filtering — active query narrowing results
4. Empty search result — no matching notes

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-23 21:56:25 +01:00

273 lines
16 KiB
Plaintext
Raw Blame History

{
"version": "2.8",
"children": [
{
"type": "frame",
"id": "vl001",
"x": 0,
"y": 0,
"name": "Virtual List — Default State (9000+ notes)",
"theme": {"Mode": "Light"},
"clip": true,
"width": 300,
"height": 900,
"fill": "$--card",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vl002",
"name": "Header",
"width": "fill_container",
"height": 45,
"fill": "$--card",
"stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"},
"padding": [0, 16],
"alignItems": "center",
"children": [
{"type": "text", "id": "vl003", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground"},
{"type": "text", "id": "vl004", "text": "9,236 items", "fontSize": 11, "fill": "$--muted-foreground", "x": 200}
]
},
{
"type": "frame",
"id": "vl005",
"name": "Virtualized Viewport",
"width": "fill_container",
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"clip": true,
"children": [
{"type": "frame", "id": "vl006", "name": "NoteItem-visible-1", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl007", "text": "Build Laputa App", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground"},
{"type": "text", "id": "vl008", "text": "This paragraph has bold text, italic text...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl009", "text": "2m ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl010", "name": "NoteItem-visible-2", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl011", "text": "Facebook Ads Strategy", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl012", "text": "Lookalike audiences convert 3x better...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl013", "text": "5h ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl014", "name": "NoteItem-visible-3", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl015", "text": "Quick Meeting 1", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl016", "text": "Key findings from the latest analysis...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl017", "text": "1d ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl018", "name": "NoteItem-visible-4", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl019", "text": "Advanced Strategy 2", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl020", "text": "Notes on process improvements...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl021", "text": "2d ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl022", "name": "NoteItem-visible-5-selected", "width": "fill_container", "height": 72, "fill": "#2383E210", "stroke": {"align": "inside", "thickness": {"left": 3, "bottom": 1}, "fill": "$--accent-blue"}, "padding": [14, 13], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl023", "text": "Daily Review 3", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground"},
{"type": "text", "id": "vl024", "text": "Summary of decisions made during review...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl025", "text": "3d ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl026", "name": "NoteItem-visible-6", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl027", "text": "Weekly Plan 4", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl028", "text": "Action items and follow-ups...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl029", "text": "4d ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl030", "name": "scrollbar-indicator", "width": 6, "height": 40, "fill": "$--muted-foreground", "opacity": 0.3, "cornerRadius": 3, "x": 290, "y": 200}
]
}
]
},
{
"type": "frame",
"id": "vl100",
"x": 340,
"y": 0,
"name": "Virtual List — Scrolled Mid-list",
"theme": {"Mode": "Light"},
"clip": true,
"width": 300,
"height": 900,
"fill": "$--card",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vl101",
"name": "Header",
"width": "fill_container",
"height": 45,
"fill": "$--card",
"stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"},
"padding": [0, 16],
"alignItems": "center",
"children": [
{"type": "text", "id": "vl102", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground"}
]
},
{
"type": "frame",
"id": "vl103",
"name": "Virtualized Viewport — items 4500-4512",
"width": "fill_container",
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"clip": true,
"children": [
{"type": "frame", "id": "vl104", "name": "NoteItem-mid-1", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl105", "text": "Final Report 4501", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl106", "text": "Draft outline for upcoming deliverable.", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl107", "text": "Jan 15", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl108", "name": "NoteItem-mid-2", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl109", "text": "Revised Checklist 4502", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl110", "text": "Reference material for ongoing initiative.", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl111", "text": "Jan 14", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl112", "name": "NoteItem-mid-3", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl113", "text": "Archived Template 4503", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl114", "text": "Tracking progress on quarterly objectives.", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl115", "text": "Jan 13", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl116", "name": "NoteItem-mid-4", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl117", "text": "New Framework 4504", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl118", "text": "Comparison of different approaches.", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl119", "text": "Jan 12", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl120", "name": "scrollbar-indicator-mid", "width": 6, "height": 40, "fill": "$--muted-foreground", "opacity": 0.3, "cornerRadius": 3, "x": 290, "y": 440}
]
}
]
},
{
"type": "frame",
"id": "vl200",
"x": 680,
"y": 0,
"name": "Virtual List — Search Filtering",
"theme": {"Mode": "Light"},
"clip": true,
"width": 300,
"height": 900,
"fill": "$--card",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vl201",
"name": "Header",
"width": "fill_container",
"height": 45,
"fill": "$--card",
"stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"},
"padding": [0, 16],
"alignItems": "center",
"children": [
{"type": "text", "id": "vl202", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground"}
]
},
{
"type": "frame",
"id": "vl203",
"name": "Search Bar",
"width": "fill_container",
"height": 40,
"fill": "$--card",
"stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"},
"padding": [8, 12],
"alignItems": "center",
"children": [
{"type": "frame", "id": "vl204", "name": "search-input", "width": "fill_container", "height": 32, "fill": "$--background", "cornerRadius": 6, "stroke": {"align": "inside", "thickness": 1, "fill": "$--border"}, "padding": [0, 8], "alignItems": "center", "children": [
{"type": "text", "id": "vl205", "text": "strategy", "fontSize": 13, "fill": "$--foreground"}
]}
]
},
{
"type": "frame",
"id": "vl206",
"name": "Filtered Results (23 matches)",
"width": "fill_container",
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"clip": true,
"children": [
{"type": "frame", "id": "vl207", "name": "NoteItem-filtered-1", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl208", "text": "Facebook Ads Strategy", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl209", "text": "Lookalike audiences convert 3x better...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl210", "text": "5h ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl211", "name": "NoteItem-filtered-2", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl212", "text": "Advanced Strategy 2", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl213", "text": "Notes on process improvements...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl214", "text": "2d ago", "fontSize": 10, "fill": "$--muted-foreground"}
]},
{"type": "frame", "id": "vl215", "name": "NoteItem-filtered-3", "width": "fill_container", "height": 72, "fill": "$--card", "stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"}, "padding": [14, 16], "layout": "vertical", "gap": 2, "children": [
{"type": "text", "id": "vl216", "text": "Quick Strategy 10", "fontSize": 13, "fontWeight": 500, "fill": "$--foreground"},
{"type": "text", "id": "vl217", "text": "Key findings from the latest analysis...", "fontSize": 12, "fill": "$--muted-foreground"},
{"type": "text", "id": "vl218", "text": "Jan 5", "fontSize": 10, "fill": "$--muted-foreground"}
]}
]
}
]
},
{
"type": "frame",
"id": "vl300",
"x": 1020,
"y": 0,
"name": "Virtual List — Empty Search Result",
"theme": {"Mode": "Light"},
"clip": true,
"width": 300,
"height": 400,
"fill": "$--card",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vl301",
"name": "Header",
"width": "fill_container",
"height": 45,
"fill": "$--card",
"stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"},
"padding": [0, 16],
"alignItems": "center",
"children": [
{"type": "text", "id": "vl302", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground"}
]
},
{
"type": "frame",
"id": "vl303",
"name": "Search Bar",
"width": "fill_container",
"height": 40,
"fill": "$--card",
"stroke": {"align": "inside", "thickness": {"bottom": 1}, "fill": "$--border"},
"padding": [8, 12],
"alignItems": "center",
"children": [
{"type": "frame", "id": "vl304", "name": "search-input", "width": "fill_container", "height": 32, "fill": "$--background", "cornerRadius": 6, "stroke": {"align": "inside", "thickness": 1, "fill": "$--border"}, "padding": [0, 8], "alignItems": "center", "children": [
{"type": "text", "id": "vl305", "text": "xyznonexistent", "fontSize": 13, "fill": "$--foreground"}
]}
]
},
{
"type": "frame",
"id": "vl306",
"name": "Empty State",
"width": "fill_container",
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"justifyContent": "center",
"alignItems": "center",
"padding": [32, 16],
"children": [
{"type": "text", "id": "vl307", "text": "No matching notes", "fontSize": 13, "fill": "$--muted-foreground", "textAlign": "center"}
]
}
]
}
],
"variables": {}
}
Reference in New Issue View Git Blame Copy Permalink