Editor has no 'multi-document' or 'tabs' — user working on 3 designs at once has to switch between them in the Gallery, no in-editor tabs #308

New issue

Closed

opened 2026-10-04 03:49:44 +00:00 by Mark · 0 comments

Mark commented

2026-10-04 03:49:44 +00:00

Owner

Finding

The editor is a single-design surface. A user with 3 in-progress designs:

Saves the current one
Goes to Gallery
Opens the next
Edits
Saves
Goes to Gallery
Opens the third
Edits
Saves

No way to have multiple designs open at once. The editor's session state (per #161) is per-design.

grep -rn 'editorTabs\|multiDoc' src/components/editor/ returns 0.

A user with 3 designs they want to compare or work on in parallel:

Has to context-switch via the Gallery
Loses the editor's state on each switch

The fix is tabs in the editor.

Where

Editor's main surface: src/components/editor/EditorCanvas.tsx
No tabs: grep -rn 'editorTabs' src/components/editor/ returns 0
The browser's tab bar is the closest analog; the editor has no in-app tab bar

Suggested fix shape

Tab bar: at the top of the editor (above the canvas), a tab bar with each open design's filename:

<div className="flex items-center gap-1 border-b" style={{ borderColor: '#D9D2C8' }}>
  {openDesigns.map((design) => (
    <div
      key={design.id}
      className={`flex items-center gap-1 px-3 py-1.5 cursor-pointer ${design.id === activeDesignId ? 'active' : ''}`}
      onClick={() => setActiveDesignId(design.id)}
    >
      <span className="text-[12px]">{design.filename}</span>
      <button onClick={() => closeTab(design.id)}>
        <X size={10} />
      </button>
    </div>
  ))}
  <button onClick={openNewTab} title="Open a design from Gallery">
    <Plus size={12} />
  </button>
</div>

State: a list of open designs in the editor's state, with activeDesignId pointing to the current.
Persistence: the tab list is session-local; on refresh, the active design is restored from sessionStorage (per #161).
Keyboard: Cmd+1/2/3 to switch tabs.
Limit: 5-10 tabs max (to prevent memory issues).

Severity

Low. The user can context-switch via the Gallery. Power users with multiple in-progress designs notice.

Discovered by

Gap analysis (2026-10-02) of editor multi-document.

The session restore (per #161) is per-design. Multi-tabs would extend this.
The Gallery → Editor bridge (per #111) opens one design. Tabs would let multiple be open.
Figma/Illustrator have tabs. Most modern editors do.

## Finding The editor is a single-design surface. A user with 3 in-progress designs: - Saves the current one - Goes to Gallery - Opens the next - Edits - Saves - Goes to Gallery - Opens the third - Edits - Saves No way to have multiple designs open at once. The editor's session state (per #161) is per-design. `grep -rn 'editorTabs\|multiDoc' src/components/editor/` returns 0. A user with 3 designs they want to compare or work on in parallel: - Has to context-switch via the Gallery - Loses the editor's state on each switch The fix is tabs in the editor. ## Where - Editor's main surface: `src/components/editor/EditorCanvas.tsx` - No tabs: `grep -rn 'editorTabs' src/components/editor/` returns 0 - The browser's tab bar is the closest analog; the editor has no in-app tab bar ## Suggested fix shape 1. **Tab bar**: at the top of the editor (above the canvas), a tab bar with each open design's filename: ```tsx <div className="flex items-center gap-1 border-b" style={{ borderColor: '#D9D2C8' }}> {openDesigns.map((design) => ( <div key={design.id} className={`flex items-center gap-1 px-3 py-1.5 cursor-pointer ${design.id === activeDesignId ? 'active' : ''}`} onClick={() => setActiveDesignId(design.id)} > <span className="text-[12px]">{design.filename}</span> <button onClick={() => closeTab(design.id)}> <X size={10} /> </button> </div> ))} <button onClick={openNewTab} title="Open a design from Gallery"> <Plus size={12} /> </button> </div> ``` 2. **State**: a list of open designs in the editor's state, with `activeDesignId` pointing to the current. 3. **Persistence**: the tab list is session-local; on refresh, the active design is restored from sessionStorage (per #161). 4. **Keyboard**: Cmd+1/2/3 to switch tabs. 5. **Limit**: 5-10 tabs max (to prevent memory issues). ## Severity Low. The user can context-switch via the Gallery. Power users with multiple in-progress designs notice. ## Discovered by Gap analysis (2026-10-02) of editor multi-document. ## Related - The session restore (per #161) is per-design. Multi-tabs would extend this. - The Gallery → Editor bridge (per #111) opens one design. Tabs would let multiple be open. - Figma/Illustrator have tabs. Most modern editors do.