feat(ui): "+" between cells to insert a cell before/after #3

Merged

s-celles merged 1 commit from feat/insert-cell-between-buttons into main

2026-07-15 21:06:09 -07:00

s-celles commented

2026-07-15 13:45:26 -07:00

(Migrated from github.com)

What

Adds an inter-cell insert affordance: a thin hover zone in the gap between cells (and above the first / below the last) that reveals a round + to insert a cell right there — so you no longer have to add a cell below an existing one and then move it into place.

Left-click inserts a code cell at that position (in edit mode).
Right-click opens the code/markdown chooser.

How

notebook.js: a CellGap component interleaved in <Notebook> — one gap before the first cell and one after each cell (N+1 gaps for N cells). It reuses the existing addCell(after, kind, before, edit) path (/api/cell-add): a gap after a cell inserts with before=false; the top gap inserts before the first cell. Gaps are hidden in dep-focus (the read-oriented view).
notebook.css: .cellgap uses negative vertical margins so it adds no height at rest and is invisible until hovered, then shows a faint accent rule + the + centred in the gap.

No server change — the insert API already supported before/after positioning; this is a pure front-end affordance.

Verification

Rendered live in a notebook: 40 cells → 41 gaps (correct interleaving), each with its insert button; the gap reveals on hover and inserts at the right position.

Developed with AI assistance.

## What Adds an inter-cell insert affordance: a thin hover zone in the gap between cells (and above the first / below the last) that reveals a round **+** to insert a cell right there — so you no longer have to add a cell below an existing one and then move it into place. - **Left-click** inserts a code cell at that position (in edit mode). - **Right-click** opens the code/markdown chooser. ## How - `notebook.js`: a `CellGap` component interleaved in `<Notebook>` — one gap before the first cell and one after each cell (N+1 gaps for N cells). It reuses the existing `addCell(after, kind, before, edit)` path (`/api/cell-add`): a gap after a cell inserts with `before=false`; the top gap inserts before the first cell. Gaps are hidden in dep-focus (the read-oriented view). - `notebook.css`: `.cellgap` uses negative vertical margins so it adds no height at rest and is invisible until hovered, then shows a faint accent rule + the **+** centred in the gap. No server change — the insert API already supported before/after positioning; this is a pure front-end affordance. ## Verification Rendered live in a notebook: 40 cells → 41 gaps (correct interleaving), each with its insert button; the gap reveals on hover and inserts at the right position. --- Developed with AI assistance.

🎉 1

s-celles commented

2026-07-15 22:43:06 -07:00

(Migrated from github.com)

Thanks @kahliburke for merging

❤️ 1