zentral/docs/development/devlog/2025-12-06-011000_tab_ux_improvements.md

Tab UX Improvements

Overview

Improve the user experience of the tab bar above the viewport. The goal is to make it more flexible and user-friendly.

Features

1. Middle-click to close: Allow closing tabs by clicking with the middle mouse button.
2. Drag and Drop: Allow reordering tabs freely.
3. Tab Groups (Sessions): Allow saving the current set of open tabs as a named group/session and restoring it later.
4. Context Menu: Add a right-click context menu to tabs with options like:
   • Close
   • Close Others
   • Close to Right
   • Pin Tab (optional, if time permits)

Implementation Plan

1. Dependencies

• Install @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities.

2. Context Update (TabContext.tsx)

• Add reorderTabs(newOrder: Tab[]) function.
• Add state for tabGroups (saved in localStorage).
• Add saveTabGroup(name: string) function.
• Add loadTabGroup(name: string) function.
• Add deleteTabGroup(name: string) function.
• Add closeOtherTabs(path: string) function.
• Add closeTabsToRight(path: string) function.

3. Component Update (TabsBar.tsx)

• Wrap tabs in DndContext and SortableContext.
• Create a SortableTab component.
• Implement onAuxClick for middle-click closing.
• Add a "Tab Groups" button/menu to the right of the tabs.
  • Show saved groups.
  • Option to save current session.
• Implement a custom Context Menu for tabs.

Technical Details

• Storage: Use localStorage for now. Keys: zentral_tabs, zentral_active_tab, zentral_tab_groups.
• Styling: Use MUI components and system.