# 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.