feat(tabs): implement browser-like tab system with detach/attach support #12474
+1,250
−388
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Reorganized the AppShell component to utilize a new AppShellTabBar for improved tab management. - Removed the previous tab handling logic and integrated the new tab bar for better UI consistency. - Enhanced the layout structure to support a more flexible design with a sidebar and main content area. - Added functionality for handling tab interactions, including adding and closing tabs.
33 tasks
…ionality - Updated RendererPersistCacheSchema to support pinned tabs instead of tab state. - Refactored AppShellTabBar to include drag-and-drop capabilities for reordering both pinned and normal tabs. - Introduced SortableTabItem and SortablePinnedTab components for improved tab interaction. - Enhanced state management for active tabs during drag events, ensuring a smoother user experience. - Updated PinnedTabs and normal tab rendering to utilize new sortable components.
…handling - Added TabsContext to manage tab state and operations globally across the application. - Refactored App component to integrate TabsProvider for improved tab management. - Updated Sidebar and AppShell components to utilize the new context for accessing active tab information and updating tabs. - Enhanced tab handling logic, including the ability to reorder tabs and manage active states more effectively. - Removed legacy tab state management from useTabs hook, streamlining tab operations through the new context.
… management - Added DetachedWindowManager to handle the creation and management of detached windows for tabs. - Introduced detachedWindow.html for rendering content in detached windows. - Updated TabsContext to include detachTab functionality, allowing tabs to be moved to a new window. - Enhanced AppShell and AppShellTabBar components to support detaching tabs via drag-and-drop. - Refactored related components to accommodate the new detached window feature, improving user experience and tab management.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What this PR does
Before this PR:
After this PR:
Related to: #11460 (Feature 4 & 5)
Why we need it and why it was done in this way
This PR implements Feature 4 (Tab Detach) and Feature 5 (Tab Attach) from the v2 tab system design.
The following tradeoffs were made:
The following alternatives were considered:
TODO List
Completed
AppShellTabBar)useTabshook)detachTabcallback)isDetachedmode (hide Home Tab, close button, + button)DetachedAppShellcomponent for detached windows20260116-140606.mp4
Feature 1: Tab Detach (Drag Out to Window)
isDetachedmode for detached window UIDetachedAppShellwith URL query params initialization20260116-173507.mp4
Feature 2: Tab Attach (Drag Back to Main)
tab:attach-request/tab:attach-response)Breaking changes
None
Checklist