1e1c177a54
3 frames showing the dirty indicator UI states: - NoteList: orange dot before title for modified/added notes - TabBar: orange dot between title and close button - StatusBar: "N pending" counter with CircleDot icon Design decision: used accent-orange (--accent-orange) for the indicator to differentiate from type-colored icons and provide a warm "uncommitted changes" signal without being alarming. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
538 lines
18 KiB
Plaintext
538 lines
18 KiB
Plaintext
{
|
|
"version": "2.8",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni01",
|
|
"x": 0,
|
|
"y": 0,
|
|
"name": "Modified Note Indicator — NoteList States",
|
|
"width": 340,
|
|
"height": "fit_content(600)",
|
|
"fill": "$--card",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni01t",
|
|
"fill": "$--muted-foreground",
|
|
"content": "NoteList — Modified vs Clean",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "600",
|
|
"textTransform": "uppercase",
|
|
"letterSpacing": 1,
|
|
"width": "fill_container",
|
|
"padding": [8, 16]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni02",
|
|
"name": "Note Item — Modified",
|
|
"width": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"padding": [14, 16],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni02r",
|
|
"name": "titleRow",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni02tg",
|
|
"gap": 6,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mni02dot",
|
|
"name": "Modified Indicator",
|
|
"width": 6,
|
|
"height": 6,
|
|
"fill": "$--accent-orange"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni02ti",
|
|
"fill": "$--foreground",
|
|
"content": "Build Laputa App",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni02ic",
|
|
"width": 14,
|
|
"height": 14,
|
|
"iconFontName": "wrench",
|
|
"iconFontFamily": "phosphor",
|
|
"fill": "$--accent-red"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni02sn",
|
|
"fill": "$--muted-foreground",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Personal knowledge management app built with Tauri + React.",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni02tm",
|
|
"fill": "$--muted-foreground",
|
|
"content": "2m ago",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni03",
|
|
"name": "Note Item — Clean (no indicator)",
|
|
"width": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"padding": [14, 16],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni03r",
|
|
"name": "titleRow",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni03ti",
|
|
"fill": "$--foreground",
|
|
"content": "Facebook Ads Strategy",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni03ic",
|
|
"width": 14,
|
|
"height": 14,
|
|
"iconFontName": "file-text",
|
|
"iconFontFamily": "phosphor",
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni03sn",
|
|
"fill": "$--muted-foreground",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "Lookalike audiences convert 3x better than cold.",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni03tm",
|
|
"fill": "$--muted-foreground",
|
|
"content": "1h ago",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni04",
|
|
"name": "Note Item — Added (new file)",
|
|
"width": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" },
|
|
"layout": "vertical",
|
|
"gap": 4,
|
|
"padding": [14, 16],
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni04r",
|
|
"name": "titleRow",
|
|
"width": "fill_container",
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni04tg",
|
|
"gap": 6,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mni04dot",
|
|
"name": "Modified Indicator",
|
|
"width": 6,
|
|
"height": 6,
|
|
"fill": "$--accent-orange"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni04ti",
|
|
"fill": "$--foreground",
|
|
"content": "AI Agents Primer",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 13,
|
|
"fontWeight": "500"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni04ic",
|
|
"width": 14,
|
|
"height": 14,
|
|
"iconFontName": "file-text",
|
|
"iconFontFamily": "phosphor",
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni04sn",
|
|
"fill": "$--muted-foreground",
|
|
"textGrowth": "fixed-width",
|
|
"width": "fill_container",
|
|
"content": "How autonomous agents are changing software development.",
|
|
"lineHeight": 1.5,
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "text",
|
|
"id": "mni04tm",
|
|
"fill": "$--muted-foreground",
|
|
"content": "5m ago",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 11,
|
|
"fontWeight": "normal"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni10",
|
|
"x": 380,
|
|
"y": 0,
|
|
"name": "Modified Note Indicator — TabBar States",
|
|
"width": 800,
|
|
"height": 120,
|
|
"fill": "$--sidebar",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni10t",
|
|
"fill": "$--muted-foreground",
|
|
"content": "TabBar — Modified Dot on Dirty Tabs",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "600",
|
|
"textTransform": "uppercase",
|
|
"letterSpacing": 1,
|
|
"padding": [8, 16]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni11",
|
|
"name": "Tab Bar with Modified Indicators",
|
|
"width": "fill_container",
|
|
"height": 45,
|
|
"fill": "$--sidebar",
|
|
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--sidebar-border" },
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni11a",
|
|
"name": "Tab Active — Modified",
|
|
"height": "fill_container",
|
|
"fill": "$--background",
|
|
"stroke": { "align": "inside", "thickness": { "right": 1 }, "fill": "$--border" },
|
|
"gap": 6,
|
|
"padding": [0, 14],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni11at",
|
|
"fill": "$--foreground",
|
|
"content": "Build Laputa App",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "500"
|
|
},
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mni11adot",
|
|
"name": "Tab Modified Dot",
|
|
"width": 6,
|
|
"height": 6,
|
|
"fill": "$--accent-orange"
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni11ax",
|
|
"width": 14,
|
|
"height": 14,
|
|
"iconFontName": "x",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni11b",
|
|
"name": "Tab Inactive — Clean",
|
|
"height": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" },
|
|
"gap": 6,
|
|
"padding": [0, 14],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni11bt",
|
|
"fill": "$--muted-foreground",
|
|
"content": "Facebook Ads Strategy",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni11bx",
|
|
"opacity": 0,
|
|
"width": 14,
|
|
"height": 14,
|
|
"iconFontName": "x",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni11c",
|
|
"name": "Tab Inactive — Modified",
|
|
"height": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "right": 1, "bottom": 1 }, "fill": "$--sidebar-border" },
|
|
"gap": 6,
|
|
"padding": [0, 14],
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni11ct",
|
|
"fill": "$--muted-foreground",
|
|
"content": "AI Agents Primer",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 12,
|
|
"fontWeight": "normal"
|
|
},
|
|
{
|
|
"type": "ellipse",
|
|
"id": "mni11cdot",
|
|
"name": "Tab Modified Dot",
|
|
"width": 6,
|
|
"height": 6,
|
|
"fill": "$--accent-orange"
|
|
},
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni11cx",
|
|
"opacity": 0,
|
|
"width": 14,
|
|
"height": 14,
|
|
"iconFontName": "x",
|
|
"iconFontFamily": "lucide",
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni11sp",
|
|
"name": "tabSpacer",
|
|
"width": "fill_container",
|
|
"height": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "bottom": 1 }, "fill": "$--border" }
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni11ctrl",
|
|
"name": "tabControls",
|
|
"height": "fill_container",
|
|
"stroke": { "align": "inside", "thickness": { "bottom": 1, "left": 1 }, "fill": "$--border" },
|
|
"gap": 12,
|
|
"padding": [0, 12],
|
|
"justifyContent": "space_around",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "icon_font",
|
|
"id": "mni11plus",
|
|
"width": 16,
|
|
"height": 16,
|
|
"iconFontName": "plus",
|
|
"iconFontFamily": "phosphor",
|
|
"fill": "$--muted-foreground"
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni20",
|
|
"x": 0,
|
|
"y": 400,
|
|
"name": "Modified Note Indicator — StatusBar Pending Count",
|
|
"width": 800,
|
|
"height": 80,
|
|
"fill": "$--background",
|
|
"layout": "vertical",
|
|
"children": [
|
|
{
|
|
"type": "text",
|
|
"id": "mni20t",
|
|
"fill": "$--muted-foreground",
|
|
"content": "StatusBar — Pending Changes Counter",
|
|
"fontFamily": "Inter",
|
|
"fontSize": 10,
|
|
"fontWeight": "600",
|
|
"textTransform": "uppercase",
|
|
"letterSpacing": 1,
|
|
"padding": [8, 16]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21",
|
|
"name": "StatusBar with Pending Count",
|
|
"width": "fill_container",
|
|
"height": 30,
|
|
"fill": "$--sidebar",
|
|
"stroke": { "align": "inside", "thickness": { "top": 1 }, "fill": "$--border" },
|
|
"padding": [0, 8],
|
|
"justifyContent": "space_between",
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21l",
|
|
"name": "left",
|
|
"gap": 12,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21v",
|
|
"gap": 4,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{ "type": "icon_font", "id": "mni21fi", "width": 13, "height": 13, "iconFontName": "folder-open", "iconFontFamily": "lucide", "fill": "$--muted-foreground" },
|
|
{ "type": "text", "id": "mni21fl", "fill": "$--muted-foreground", "content": "Demo v2", "fontFamily": "Inter", "fontSize": 11 }
|
|
]
|
|
},
|
|
{ "type": "text", "id": "mni21s1", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 },
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21br",
|
|
"gap": 4,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{ "type": "icon_font", "id": "mni21gi", "width": 13, "height": 13, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$--muted-foreground" },
|
|
{ "type": "text", "id": "mni21gl", "fill": "$--muted-foreground", "content": "main", "fontFamily": "Inter", "fontSize": 11 }
|
|
]
|
|
},
|
|
{ "type": "text", "id": "mni21s2", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 },
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21sy",
|
|
"gap": 4,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{ "type": "icon_font", "id": "mni21ri", "width": 13, "height": 13, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$--accent-green" },
|
|
{ "type": "text", "id": "mni21rl", "fill": "$--muted-foreground", "content": "Synced 2m ago", "fontFamily": "Inter", "fontSize": 11 }
|
|
]
|
|
},
|
|
{ "type": "text", "id": "mni21s3", "fill": "$--border", "content": "|", "fontFamily": "Inter", "fontSize": 11 },
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21pd",
|
|
"name": "Pending Count",
|
|
"gap": 4,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{ "type": "icon_font", "id": "mni21pi", "width": 13, "height": 13, "iconFontName": "circle-dot", "iconFontFamily": "lucide", "fill": "$--accent-orange" },
|
|
{ "type": "text", "id": "mni21pl", "fill": "$--muted-foreground", "content": "3 pending", "fontFamily": "Inter", "fontSize": 11 }
|
|
]
|
|
}
|
|
]
|
|
},
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21r",
|
|
"name": "right",
|
|
"gap": 12,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{
|
|
"type": "frame",
|
|
"id": "mni21nc",
|
|
"gap": 4,
|
|
"alignItems": "center",
|
|
"children": [
|
|
{ "type": "icon_font", "id": "mni21ni", "width": 13, "height": 13, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$--muted-foreground" },
|
|
{ "type": "text", "id": "mni21nl", "fill": "$--muted-foreground", "content": "9,200 notes", "fontFamily": "Inter", "fontSize": 11 }
|
|
]
|
|
},
|
|
{ "type": "icon_font", "id": "mni21set", "width": 14, "height": 14, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$--muted-foreground" }
|
|
]
|
|
}
|
|
]
|
|
}
|
|
]
|
|
}
|
|
],
|
|
"themes": { "Mode": ["Dark"] },
|
|
"variables": {},
|
|
"fonts": []
|
|
}
|