6baa7795df
* feat: add pendingSave status indicator for new note creation Track disk write state during note creation with a pulsing green dot on tab and breadcrumb bar. The pending state resolves to 'new' once the file is written to disk, giving users clear feedback during the async save. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * test: add tests for pendingSave status lifecycle Cover resolveNoteStatus priority, createAndPersist callbacks, TabBar pulsing dot indicator, and BreadcrumbBar "Saving…" text. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * docs: add design frames for new note creation pending save state Two frames in design/new-note-creation.pen: - Pending save: pulsing green dot, italic title - Saved: static green dot, normal title Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com> * design: add new-note-creation frames (pending save + after first save) --------- Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
184 lines
4.4 KiB
Plaintext
184 lines
4.4 KiB
Plaintext
{
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_pending_save",
|
|
"name": "New Note Creation — Pending Save State",
|
|
"x": 0,
|
|
"y": 0,
|
|
"width": 800,
|
|
"height": 120,
|
|
"fill": "$--background",
|
|
"layout": "horizontal",
|
|
"gap": 0,
|
|
"padding": [
|
|
0,
|
|
0
|
|
],
|
|
"theme": {
|
|
"Mode": "Light"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_tab_bar",
|
|
"name": "Tab Bar",
|
|
"layout": "horizontal",
|
|
"width": 800,
|
|
"height": 40,
|
|
"fill": "$--card",
|
|
"gap": 0,
|
|
"padding": [
|
|
0,
|
|
8
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_tab_active",
|
|
"name": "Tab — New Note (unsaved)",
|
|
"layout": "horizontal",
|
|
"width": 180,
|
|
"height": 40,
|
|
"fill": "$--background",
|
|
"gap": 6,
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "rectangle",
|
|
"id": "nnc_dot_pending",
|
|
"width": 8,
|
|
"height": 8,
|
|
"cornerRadius": 4,
|
|
"fill": "#22c55e"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "nnc_tab_label",
|
|
"content": "Untitled",
|
|
"fill": "$--foreground",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_editor_area",
|
|
"name": "Editor — Empty New Note",
|
|
"layout": "vertical",
|
|
"width": 800,
|
|
"height": 80,
|
|
"fill": "$--background",
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
24
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "nnc_placeholder",
|
|
"content": "Start typing...",
|
|
"fill": "$--muted-foreground",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_after_first_save",
|
|
"name": "New Note Creation — After First Save",
|
|
"x": 820,
|
|
"y": 0,
|
|
"width": 800,
|
|
"height": 120,
|
|
"fill": "$--background",
|
|
"layout": "vertical",
|
|
"gap": 0,
|
|
"padding": [
|
|
0,
|
|
0
|
|
],
|
|
"theme": {
|
|
"Mode": "Light"
|
|
},
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_tab_bar_saved",
|
|
"name": "Tab Bar — Saved",
|
|
"layout": "horizontal",
|
|
"width": 800,
|
|
"height": 40,
|
|
"fill": "$--card",
|
|
"gap": 0,
|
|
"padding": [
|
|
0,
|
|
8
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_tab_saved",
|
|
"name": "Tab — Saved Note",
|
|
"layout": "horizontal",
|
|
"width": 180,
|
|
"height": 40,
|
|
"fill": "$--background",
|
|
"gap": 6,
|
|
"padding": [
|
|
0,
|
|
12
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "nnc_tab_label_saved",
|
|
"content": "My New Note",
|
|
"fill": "$--foreground",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "400"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "nnc_editor_saved",
|
|
"name": "Editor — Note with Content",
|
|
"layout": "vertical",
|
|
"width": 800,
|
|
"height": 80,
|
|
"fill": "$--background",
|
|
"gap": 8,
|
|
"padding": [
|
|
16,
|
|
24
|
|
],
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "nnc_content",
|
|
"content": "My New Note content...",
|
|
"fill": "$--foreground",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 14
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
} |