Add setting to show tab bar at bottom #2159
Conversation
WalkthroughThis change introduces support for configuring the position of the application's tab bar, allowing it to be placed either at the top or bottom of the workspace interface. A new configuration key, 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (2)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
schema/settings.json (1)
185-187: Add enum constraint for valid tabbar positions
Without an enum, users can set arbitrary strings, which may lead to unexpected behavior. To enforce correct usage, consider adding an"enum": ["top", "bottom"]constraint under the
"window:tabbarposition"property.frontend/types/gotypes.d.ts (1)
739-739: Strengthen type safety with union types
Instead of a genericstring, define the property as a union of valid values—e.g.:"window:tabbarposition"?: "top" | "bottom";This will catch invalid settings at compile time.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
frontend/app/tab/tabbar.scss(1 hunks)frontend/app/tab/tabbar.tsx(2 hunks)frontend/app/tab/workspaceswitcher.tsx(3 hunks)frontend/app/workspace/workspace.tsx(1 hunks)frontend/types/gotypes.d.ts(1 hunks)pkg/wconfig/defaultconfig/settings.json(1 hunks)pkg/wconfig/metaconsts.go(1 hunks)pkg/wconfig/settingsconfig.go(1 hunks)schema/settings.json(2 hunks)
🔇 Additional comments (13)
frontend/app/tab/tabbar.scss (1)
126-129: Consistent bottom padding adjustment
The reduced vertical padding for.tab-bar-wrapper.tab-bar-bottomaligns with the new bottom placement of the tab bar and complements the default top padding. Implementation is clear and correct.pkg/wconfig/metaconsts.go (1)
78-78: Ensure constant naming consistency
The newConfigKey_WindowTabBarPositionfollows the existing naming convention and key prefix for window-related settings. It fits well among the otherConfigKey_Window*constants.pkg/wconfig/settingsconfig.go (1)
123-123: Field integration looks correct
AddingWindowTabBarPosition *stringwith the proper JSON tag ("window:tabbarposition,omitempty") aligns perfectly with the new configuration key. Using a pointer differentiates between an unset value and an explicit empty string.pkg/wconfig/defaultconfig/settings.json (1)
18-18: Good addition of the tab bar position setting.The new setting
"window:tabbarposition": "top"follows the project's naming conventions and properly establishes the default tab bar position. This enables the configurable tab bar placement feature.frontend/app/workspace/workspace.tsx (2)
154-156: Good implementation for accessing the tab bar position setting.The code correctly reads the settings atom to retrieve the user's tab bar position preference.
158-158: Effective use of conditional class application for layout control.The implementation elegantly uses the
clsxutility to conditionally apply theflex-col-reverseclass when the tab bar position is set to bottom. This reverses the flex direction, placing the tab bar at the bottom of the workspace.frontend/app/tab/tabbar.tsx (4)
18-18: Added required clsx import.Properly added the clsx utility for conditional CSS class application.
652-654: Well-structured conditional logic for tab bar positioning.The code correctly reads the tab bar position setting and sets the appropriate workspace switcher placement based on the position. When the tab bar is at the bottom, the popover should open upward (top-start), and when at the top, it should open downward (bottom-start).
662-662: Good implementation of conditional styling for tab bar position.Correctly applies the "tab-bar-bottom" CSS class when the tab bar position is set to "bottom", which allows for specific styling adjustments in the SCSS file.
666-666: Properly updated WorkspaceSwitcher with dynamic placement.The code now correctly passes the dynamic placement prop to the WorkspaceSwitcher component, ensuring the popover opens in the appropriate direction based on the tab bar position.
frontend/app/tab/workspaceswitcher.tsx (3)
28-30: Well-defined type for the new placement prop.Good practice to explicitly define a type for the component props, with appropriate constraints on the placement values.
41-41: Properly updated component signature with typed props.The component now correctly accepts and destructures the new placement prop in its forwardRef implementation.
100-100: Effectively used the placement prop for popover positioning.The component correctly passes the placement prop to the Popover component, replacing the previously hardcoded value.
As a user, I want the option to have the tab bar at the bottom of the window, so that when I open Wave from my task bar, I can select a tab easily because they are closer to my mouse.