design: click-opens-new-tab wireframes
Two frames showing click vs Cmd+Click behavior: 1. Click — Replace Current Tab (note replaces active tab content) 2. Cmd+Click — Open New Tab (new tab created, original preserved) Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
lucaronin
387
design/click-opens-new-tab.pen
Normal file
387
design/click-opens-new-tab.pen
Normal file
@@ -0,0 +1,387 @@
|
||||
{
|
||||
"version": 1,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-replace-tab",
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"name": "Click — Replace Current Tab",
|
||||
"clip": true,
|
||||
"width": 900,
|
||||
"height": 500,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-title",
|
||||
"text": "Click on note = Replace current tab",
|
||||
"fontSize": 20,
|
||||
"fontWeight": 700,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 16, "left": 16, "right": 16, "bottom": 8 }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-desc",
|
||||
"text": "Regular click on a note in NoteList replaces the active tab's content.\nNo new tab is created — the current tab simply shows the clicked note.\nIf the note is already open in another tab, that tab becomes active instead.",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 0, "left": 16, "right": 16, "bottom": 16 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-diagram",
|
||||
"name": "Click Flow Diagram",
|
||||
"width": "fill_container",
|
||||
"height": 300,
|
||||
"fill": "$--card",
|
||||
"layout": "horizontal",
|
||||
"padding": { "top": 24, "left": 24, "right": 24, "bottom": 24 },
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-before",
|
||||
"name": "Before Click",
|
||||
"width": 200,
|
||||
"height": 250,
|
||||
"fill": "$--muted",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-before-label",
|
||||
"text": "BEFORE",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 8, "left": 12, "right": 12, "bottom": 4 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-before-tab",
|
||||
"name": "Tab Bar",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "$--sidebar",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-before-tab-text",
|
||||
"text": "Note A (active)",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-before-list",
|
||||
"name": "Note List",
|
||||
"width": "fill_container",
|
||||
"height": 160,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-note-a",
|
||||
"text": "Note A",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-note-b-highlight",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "$--accent-blue-light",
|
||||
"stroke": { "align": "inside", "thickness": { "left": 3 }, "color": "$--accent-blue" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-note-b",
|
||||
"text": "Note B <-- Click",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--accent-blue",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-note-c",
|
||||
"text": "Note C",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-arrow",
|
||||
"text": "-->",
|
||||
"fontSize": 24,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 100 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-after",
|
||||
"name": "After Click",
|
||||
"width": 200,
|
||||
"height": 250,
|
||||
"fill": "$--muted",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-after-label",
|
||||
"text": "AFTER",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--accent-green",
|
||||
"padding": { "top": 8, "left": 12, "right": 12, "bottom": 4 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "click-after-tab",
|
||||
"name": "Tab Bar — same tab, new content",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "$--accent-blue-light",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-after-tab-text",
|
||||
"text": "Note B (replaced A)",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--accent-blue",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "click-after-note",
|
||||
"text": "Still 1 tab.\nTab content changed\nfrom A to B.",
|
||||
"fontSize": 12,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 16, "left": 12 }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-click-new-tab",
|
||||
"x": 950,
|
||||
"y": 0,
|
||||
"name": "Cmd+Click — Open New Tab",
|
||||
"clip": true,
|
||||
"width": 900,
|
||||
"height": 500,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-title",
|
||||
"text": "Cmd+Click on note = Open new tab",
|
||||
"fontSize": 20,
|
||||
"fontWeight": 700,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 16, "left": 16, "right": 16, "bottom": 8 }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-desc",
|
||||
"text": "Cmd+Click (macOS) or Ctrl+Click (Windows/Linux) opens the note in a new tab.\nIf the note is already open in any tab, that tab becomes active (no duplicates).\nThis matches the browser-standard pattern used by Bear, Obsidian, etc.",
|
||||
"fontSize": 14,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 0, "left": 16, "right": 16, "bottom": 16 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-diagram",
|
||||
"name": "Cmd+Click Flow Diagram",
|
||||
"width": "fill_container",
|
||||
"height": 300,
|
||||
"fill": "$--card",
|
||||
"layout": "horizontal",
|
||||
"padding": { "top": 24, "left": 24, "right": 24, "bottom": 24 },
|
||||
"gap": 24,
|
||||
"children": [
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-before",
|
||||
"name": "Before Cmd+Click",
|
||||
"width": 200,
|
||||
"height": 250,
|
||||
"fill": "$--muted",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-before-label",
|
||||
"text": "BEFORE",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 8, "left": 12, "right": 12, "bottom": 4 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-before-tab",
|
||||
"name": "Tab Bar — 1 tab",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "$--sidebar",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-before-tab-text",
|
||||
"text": "Note A (active)",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-before-list",
|
||||
"name": "Note List",
|
||||
"width": "fill_container",
|
||||
"height": 160,
|
||||
"fill": "$--background",
|
||||
"layout": "vertical",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-note-a",
|
||||
"text": "Note A",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-note-b-highlight",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "$--accent-purple-light",
|
||||
"stroke": { "align": "inside", "thickness": { "left": 3 }, "color": "$--accent-purple" },
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-note-b",
|
||||
"text": "Note B <-- Cmd+Click",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--accent-purple",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-note-c",
|
||||
"text": "Note C",
|
||||
"fontSize": 12,
|
||||
"fill": "$--foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-arrow",
|
||||
"text": "-->",
|
||||
"fontSize": 24,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 100 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-after",
|
||||
"name": "After Cmd+Click",
|
||||
"width": 200,
|
||||
"height": 250,
|
||||
"fill": "$--muted",
|
||||
"layout": "vertical",
|
||||
"cornerRadius": 8,
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-after-label",
|
||||
"text": "AFTER",
|
||||
"fontSize": 10,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--accent-green",
|
||||
"padding": { "top": 8, "left": 12, "right": 12, "bottom": 4 }
|
||||
},
|
||||
{
|
||||
"type": "frame",
|
||||
"id": "cmd-after-tabs",
|
||||
"name": "Tab Bar — 2 tabs",
|
||||
"width": "fill_container",
|
||||
"height": 32,
|
||||
"fill": "$--sidebar",
|
||||
"layout": "horizontal",
|
||||
"children": [
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-after-tab-a",
|
||||
"text": "Note A",
|
||||
"fontSize": 12,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-after-tab-b",
|
||||
"text": "Note B (new)",
|
||||
"fontSize": 12,
|
||||
"fontWeight": 600,
|
||||
"fill": "$--accent-purple",
|
||||
"padding": { "top": 8, "left": 12 }
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"id": "cmd-after-note",
|
||||
"text": "Now 2 tabs.\nNew tab created for B.\nA stays open.",
|
||||
"fontSize": 12,
|
||||
"fill": "$--muted-foreground",
|
||||
"padding": { "top": 16, "left": 12 }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"variables": {},
|
||||
"themes": {},
|
||||
"fonts": []
|
||||
}
|
||||
Reference in New Issue
Block a user