42 lines
1.6 KiB
Markdown
42 lines
1.6 KiB
Markdown
# 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.
|