design: merge modified-notes-indicator frames into ui-design.pen
This commit is contained in:
lucaronin
729
ui-design.pen
729
ui-design.pen
@@ -16885,6 +16885,735 @@
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"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": {
|
||||
|
||||
Reference in New Issue
Block a user