From 9b26969d2f3a9727d3522f50807f2ea513ca0c59 Mon Sep 17 00:00:00 2001 From: lucaronin Date: Mon, 23 Feb 2026 20:14:23 +0100 Subject: [PATCH] design: click-opens-new-tab wireframes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 --- design/click-opens-new-tab.pen | 387 +++++++++++++++++++++++++++++++++ 1 file changed, 387 insertions(+) create mode 100644 design/click-opens-new-tab.pen diff --git a/design/click-opens-new-tab.pen b/design/click-opens-new-tab.pen new file mode 100644 index 00000000..4bc397ad --- /dev/null +++ b/design/click-opens-new-tab.pen @@ -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": [] +} \ No newline at end of file