Skip to content

feat(editor): allow reordering tabs via drag-and-drop#517

Open
maximumbreak wants to merge 1 commit into
TabularisDB:mainfrom
maximumbreak:feat/reorder-editor-tabs
Open

feat(editor): allow reordering tabs via drag-and-drop#517
maximumbreak wants to merge 1 commit into
TabularisDB:mainfrom
maximumbreak:feat/reorder-editor-tabs

Conversation

@maximumbreak

Copy link
Copy Markdown
Contributor

Demo

Screen.Recording.2569-07-23.at.17.30.11.mov

Summary

  • Console, table, query-builder, and notebook tabs all share one tab bar and one flat tabs array, so tabs of any type can now be dragged to reorder — no artificial restriction to console-only.
  • Reordering is scoped to the active connection: dragging only reshuffles that connection's own tabs; tabs belonging to other connections keep their original slots in the underlying array.
  • Follows the existing native HTML5 drag-and-drop pattern already used for notebook cell reordering (src/utils/notebookDnd.ts) — same auto-scroll behavior near the edges, same gap-based insertion model, default browser drag ghost with reduced opacity on the source tab, and an insertion-line indicator showing where the tab will land.
  • No new persistence code: the existing tab-save effect (EditorProvider) already writes to preferences.json whenever tabs changes, so the new order is picked up automatically.

Changes

  • src/utils/tabDnd.ts (new): moveTab() — pure, connection-scoped array reorder.
  • tests/utils/tabDnd.test.ts (new): unit tests covering forward/backward moves, first/last position, no-ops, unknown ids, out-of-range input, and the multi-connection interleaving case.
  • src/contexts/EditorContext.ts / EditorProvider.tsx: added reorderTab(fromTabId, insertAt).
  • src/pages/Editor.tsx: wired up draggable/drag handlers on tab elements, container-level drop + auto-scroll, and the insertion-line indicator.

Test plan

  • pnpm typecheck — clean
  • pnpm lint — clean
  • pnpm test — 170 files / 3121 tests passing
  • Manually verified in pnpm tauri dev against a live Postgres connection
  • Reviewer: drag tabs across a few connections, confirm order persists after switching away and back

Console/table/query-builder/notebook tabs share one tab bar and array,
so dragging works uniformly across types. Reordering is scoped to the
active connection's own tabs (other connections' tabs keep their
original slots) and follows the existing native HTML5 DnD pattern used
for notebook cell reordering. Persistence is automatic — it reuses the
tab-save effect already wired to the `tabs` state.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@debba

debba commented Jul 23, 2026

Copy link
Copy Markdown
Collaborator

Looks promising, it's something we'd like to integrate.
I will test it ASAP

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants