davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a95625e2bb705d4febdc59fddfca832ca45c36f7
tolaria/design/vista-changes.pen
lucaronin 68b5b5fed3 test: add tests for Changes view + design wireframes 
- NoteList: 4 tests for changes filter (shows only modified, header,
  empty state, real-time update on rerender)
- StatusBar: 2 tests for onClickPending callback + accessibility
- Sidebar: 3 tests for Changes nav item visibility + click handler
- design/vista-changes.pen: 3 frames (pending notes, empty state,
  real-time update)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-24 15:32:23 +01:00

496 lines
18 KiB
Plaintext
Raw Blame History

{
"children": [
{
"type": "frame",
"id": "vc001",
"x": 0,
"y": 0,
"name": "Changes — sidebar section with pending notes",
"clip": true,
"width": 550,
"height": 500,
"fill": "$--background",
"layout": "horizontal",
"children": [
{
"type": "frame",
"id": "vc002",
"name": "Sidebar",
"width": 250,
"height": "fill_container",
"fill": "$--sidebar",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vc003",
"name": "Filters",
"width": "fill_container",
"layout": "vertical",
"gap": 1,
"padding": [8, 8],
"stroke": {
"align": "inside",
"thickness": { "bottom": 1 },
"fill": "$--border"
},
"children": [
{
"type": "frame",
"id": "vc004",
"name": "filterAll",
"width": "fill_container",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc005", "text": "All Notes", "fontSize": 13, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc006",
"name": "filterFavorites",
"width": "fill_container",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc007", "text": "Favorites", "fontSize": 13, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc008",
"name": "filterTrash",
"width": "fill_container",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc009", "text": "Trash", "fontSize": 13, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc010",
"name": "filterChanges-active",
"width": "fill_container",
"fill": "#F5750018",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"justifyContent": "space-between",
"children": [
{ "type": "text", "id": "vc011", "text": "Changes", "fontSize": 13, "fontWeight": 500, "fill": "$--accent-orange" },
{
"type": "frame",
"id": "vc012",
"name": "badge",
"fill": "$--accent-orange",
"cornerRadius": 9999,
"padding": [0, 6],
"height": 20,
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc013", "text": "3", "fontSize": 10, "fontWeight": 600, "fill": "$--white" }
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "vc014",
"name": "NoteList: Changes",
"width": 300,
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"stroke": {
"align": "inside",
"thickness": { "right": 1 },
"fill": "$--border"
},
"children": [
{
"type": "frame",
"id": "vc015",
"name": "header",
"width": "fill_container",
"height": 45,
"padding": [0, 16],
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "text", "id": "vc016", "text": "Changes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc017",
"name": "note1-modified",
"width": "fill_container",
"padding": [10, 16],
"gap": 4,
"layout": "vertical",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{
"type": "frame",
"id": "vc018",
"name": "titleRow",
"gap": 6,
"alignItems": "center",
"children": [
{ "type": "ellipse", "id": "vc019", "name": "modifiedDot", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc020", "text": "Build Laputa App", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }
]
},
{ "type": "text", "id": "vc021", "text": "This paragraph has bold text, italic text…", "fontSize": 12, "fill": "$--muted-foreground" }
]
},
{
"type": "frame",
"id": "vc022",
"name": "note2-modified",
"width": "fill_container",
"padding": [10, 16],
"gap": 4,
"layout": "vertical",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{
"type": "frame",
"id": "vc023",
"name": "titleRow",
"gap": 6,
"alignItems": "center",
"children": [
{ "type": "ellipse", "id": "vc024", "name": "modifiedDot", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc025", "text": "Facebook Ads Strategy", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }
]
},
{ "type": "text", "id": "vc026", "text": "Lookalike audiences from newsletter subscribers…", "fontSize": 12, "fill": "$--muted-foreground" }
]
},
{
"type": "frame",
"id": "vc027",
"name": "note3-added",
"width": "fill_container",
"padding": [10, 16],
"gap": 4,
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vc028",
"name": "titleRow",
"gap": 6,
"alignItems": "center",
"children": [
{ "type": "ellipse", "id": "vc029", "name": "modifiedDot", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc030", "text": "AI Agents Primer", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" }
]
},
{ "type": "text", "id": "vc031", "text": "AI agents are autonomous systems that can plan…", "fontSize": 12, "fill": "$--muted-foreground" }
]
}
]
}
]
},
{
"type": "frame",
"id": "vc100",
"x": 600,
"y": 0,
"name": "Changes — empty state (0 pending)",
"clip": true,
"width": 550,
"height": 400,
"fill": "$--background",
"layout": "horizontal",
"children": [
{
"type": "frame",
"id": "vc101",
"name": "Sidebar (no Changes item)",
"width": 250,
"height": "fill_container",
"fill": "$--sidebar",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vc102",
"name": "Filters",
"width": "fill_container",
"layout": "vertical",
"gap": 1,
"padding": [8, 8],
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{
"type": "frame",
"id": "vc103",
"name": "filterAll-active",
"width": "fill_container",
"fill": "#4a9eff18",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc104", "text": "All Notes", "fontSize": 13, "fontWeight": 500, "fill": "$--primary" }
]
},
{
"type": "frame",
"id": "vc105",
"name": "filterFavorites",
"width": "fill_container",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc106", "text": "Favorites", "fontSize": 13, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc107",
"name": "filterTrash",
"width": "fill_container",
"cornerRadius": 6,
"gap": 8,
"padding": [6, 16],
"alignItems": "center",
"children": [
{ "type": "text", "id": "vc108", "text": "Trash", "fontSize": 13, "fill": "$--foreground" }
]
}
]
},
{
"type": "frame",
"id": "vc109",
"name": "annotation",
"width": "fill_container",
"padding": [12, 16],
"children": [
{ "type": "text", "id": "vc110", "text": "← No \"Changes\" item when 0 pending", "fontSize": 11, "fill": "$--muted-foreground", "fontStyle": "italic" }
]
}
]
},
{
"type": "frame",
"id": "vc111",
"name": "NoteList: All Notes",
"width": 300,
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" },
"children": [
{
"type": "frame",
"id": "vc112",
"name": "header",
"width": "fill_container",
"height": 45,
"padding": [0, 16],
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "text", "id": "vc113", "text": "Notes", "fontSize": 14, "fontWeight": 600, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc114",
"name": "notesList",
"width": "fill_container",
"height": "fill_container",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "vc115",
"name": "note-no-dot",
"width": "fill_container",
"padding": [10, 16],
"gap": 4,
"layout": "vertical",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "text", "id": "vc116", "text": "Build Laputa App", "fontSize": 13, "fontWeight": 600, "fill": "$--foreground" },
{ "type": "text", "id": "vc117", "text": "No orange dot — all committed", "fontSize": 12, "fill": "$--muted-foreground" }
]
}
]
}
]
}
]
},
{
"type": "frame",
"id": "vc200",
"x": 0,
"y": 560,
"name": "Changes — real-time update (note disappears after save)",
"clip": true,
"width": 800,
"height": 300,
"fill": "$--background",
"layout": "horizontal",
"gap": 40,
"padding": [20, 20],
"children": [
{
"type": "frame",
"id": "vc201",
"name": "Before: 3 pending",
"width": 340,
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"cornerRadius": 8,
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
"children": [
{
"type": "frame",
"id": "vc202",
"name": "header",
"width": "fill_container",
"height": 36,
"padding": [0, 12],
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "text", "id": "vc203", "text": "Changes (before save)", "fontSize": 12, "fontWeight": 600, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc204",
"name": "item1",
"width": "fill_container",
"padding": [8, 12],
"gap": 6,
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "ellipse", "id": "vc205", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc206", "text": "Build Laputa App", "fontSize": 12, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc207",
"name": "item2-highlight",
"width": "fill_container",
"padding": [8, 12],
"gap": 6,
"fill": "#F5750010",
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "ellipse", "id": "vc208", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc209", "text": "Facebook Ads Strategy ← saving…", "fontSize": 12, "fontWeight": 500, "fill": "$--accent-orange" }
]
},
{
"type": "frame",
"id": "vc210",
"name": "item3",
"width": "fill_container",
"padding": [8, 12],
"gap": 6,
"alignItems": "center",
"children": [
{ "type": "ellipse", "id": "vc211", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc212", "text": "AI Agents Primer", "fontSize": 12, "fill": "$--foreground" }
]
}
]
},
{
"type": "frame",
"id": "vc220",
"name": "After: 2 pending (note committed)",
"width": 340,
"height": "fill_container",
"fill": "$--card",
"layout": "vertical",
"cornerRadius": 8,
"stroke": { "align": "inside", "thickness": 1, "fill": "$--border" },
"children": [
{
"type": "frame",
"id": "vc221",
"name": "header",
"width": "fill_container",
"height": 36,
"padding": [0, 12],
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "text", "id": "vc222", "text": "Changes (after save + commit)", "fontSize": 12, "fontWeight": 600, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc223",
"name": "item1",
"width": "fill_container",
"padding": [8, 12],
"gap": 6,
"alignItems": "center",
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
"children": [
{ "type": "ellipse", "id": "vc224", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc225", "text": "Build Laputa App", "fontSize": 12, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc226",
"name": "item2",
"width": "fill_container",
"padding": [8, 12],
"gap": 6,
"alignItems": "center",
"children": [
{ "type": "ellipse", "id": "vc227", "fill": "$--accent-orange", "width": 6, "height": 6 },
{ "type": "text", "id": "vc228", "text": "AI Agents Primer", "fontSize": 12, "fill": "$--foreground" }
]
},
{
"type": "frame",
"id": "vc229",
"name": "removedNote",
"width": "fill_container",
"padding": [12, 12],
"children": [
{ "type": "text", "id": "vc230", "text": "Facebook Ads Strategy removed (committed)", "fontSize": 11, "fontStyle": "italic", "fill": "$--muted-foreground" }
]
}
]
}
]
}
],
"variables": {}
}
Reference in New Issue View Git Blame Copy Permalink