This PR changes the approach we're using to render the channel buttons to use a more straightforward (and less hacky) approach. ### Motivation Even with the variety of hacks that were employed to make the current approach work, there are still a number of issues with the current solution: - Hovering in the empty space to the left of a channel doesn't correctly apply the hover background to the container for the channel buttons - Hovering to the very right of the collab panel (right on top of the drag handle) causes the channel button container to apply its hover background without applying it to the rest of the row - The buttons would still get pushed off to the right by the indent space in the channel tree, resulting in jagged indicators at small sizes Additionally, the rectangular background placed behind the channel buttons still didn't look great when it overlapped with the channel names. ### Explanation For these reasons, I decided to explore a simpler approach that addresses these issues, albeit with some tradeoffs that I think are acceptable. We now render the absolutely-positioned button container as a sibling element of the `ListItem`. This is to avoid issues with the container getting pushed around based on the contents of the `ListItem` rather than staying absolutely positioned at the end of the row. We also have gotten rid of the background for the button container, and now rely on the background of the individual `IconButton`s to occlude the channel name behind them when the two are overlapping. Here are some examples of the new UI in various configurations: #### When the channel entry is hovered <img width="270" alt="Screenshot 2024-01-09 at 6 15 24 PM" src="https://github.com/zed-industries/zed/assets/1486634/0207a129-30eb-4067-8490-3b6c9cbf75ea"> #### Overlapping with the channel name <img width="229" alt="Screenshot 2024-01-09 at 6 15 43 PM" src="https://github.com/zed-industries/zed/assets/1486634/0a67507e-45c8-4325-a71e-d416edc3a115"> #### Narrow collab panel <img width="116" alt="Screenshot 2024-01-09 at 6 16 07 PM" src="https://github.com/zed-industries/zed/assets/1486634/887ebaa3-e4d6-4497-9141-afcc8b7cd356"> ### Tradeoffs The new approach comes with the following tradeoffs that I am currently aware of: The occlusion can look a little weird when the icons are in the middle of a channel name (as opposed to fully occluding the end of the channel name): <img width="190" alt="Screenshot 2024-01-09 at 6 24 32 PM" src="https://github.com/zed-industries/zed/assets/1486634/0062b806-1b8f-47eb-af8d-f061d9829366"> Hovering one of the icons causes the icon to be hovered instead of the row: <img width="232" alt="Screenshot 2024-01-09 at 6 31 38 PM" src="https://github.com/zed-industries/zed/assets/1486634/cbcc1a45-64d2-4890-8ad6-c5a5ee961b86"> Release Notes: - Improved the way channel buttons are displayed.
1 file changedLine totals unavailable