Skip to content

Tab Reordering In Workspace Tabs (Persisted Order + Keyboard/Pointer Support) #65

@knightedcodemonkey

Description

@knightedcodemonkey

Issue #62 delivered the multi-tab workspace hardening, persistence, preview/runtime stability, and full validation, but one acceptance item remains outstanding: tab reordering.

This issue tracks implementing reordering as a focused follow-up without broad UX redesign.

Summary

Add deterministic tab reordering for workspace tabs in @knighted/develop, with local persistence and safe interaction behavior across component/styles/entry tabs.

Why

Current tab operations support add/rename/remove/switch, but users cannot reorder tabs. Reordering improves navigation for larger workspaces and fully aligns behavior with the original #62 acceptance criteria.

In Scope

  1. Reorder interactions in tab strip:

  2. Pointer-based drag/drop or equivalent reorder gesture.

  3. Keyboard-accessible reorder flow (for example move left/right).

  4. Clear visual affordance while reordering.

  5. State and persistence:

  6. Update internal tab ordering source-of-truth in workspaceTabsState.

  7. Persist reordered tab order in workspace storage.

  8. Preserve active tab id and editor visibility semantics during/after reorder.

  9. Constraints/guards:

  10. Entry tab remains non-removable (existing contract unchanged).

  11. Reordering must not mutate tab content/path/name.

  12. Reordering must not break add/rename/remove flows.

  13. Startup/restore:

  14. Reordered tab order restores across reload.

  15. Active tab restore remains stable after reorder.

  16. Testing:

  17. Add focused Playwright coverage for reorder behavior.

  18. Validate persistence round-trip with reload.

  19. Validate no regressions in existing workspace tab tests.

Out of Scope

  1. Broad redesign of tab strip visual language.
  2. New dependencies.
  3. Changes to preview/runtime architecture unrelated to reorder operations.

Acceptance Criteria

  1. User can reorder tabs in the workspace strip.
  2. Reordered tab order persists across reload.
  3. Active tab id and visible editor lane remain correct after reorder.
  4. Entry tab guard behavior remains unchanged.
  5. No regressions in add/rename/remove/switch behavior.
  6. Lint/build/tests pass with new reorder coverage.

Suggested Files

  1. workspace-tabs-state.js
  2. app.js
  3. workspace-tabs.spec.ts
  4. app-test-helpers.ts

Validation

  1. npm run lint
  2. npm run build
  3. npx playwright test playwright/workspace-tabs.spec.ts
  4. npm run test:e2e (final gate)

Notes

Keep changes modular and localized; reuse existing workspace tab state and persistence boundaries from #62 hardening work.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions