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.
This PR renames the `IconElement` component to just `Icon`.
This better matches the rest of our components, as `IconElement` was the
only one using this naming convention.
The `Icon` enum has been renamed to `IconName` to free up the name.
I was trying to come up with a way that would allow rendering an
`Icon::Zed` directly (and thus make the `IconElement` a hidden part of
the API), but I couldn't come up with a way to do this cleanly.
Release Notes:
- N/A
This PR adds some basic stories for collab notifications to make them
easier to work on:
<img width="1076" alt="Screenshot 2024-01-08 at 9 43 39 PM"
src="https://github.com/zed-industries/zed/assets/1486634/4a0adcfa-1134-49c2-b589-74ac1d52af4c">
I factored out a `CollabNotification` component that defines the general
structure for one of these notifications, and this is the component that
we use in the stories, with representative values passed to it to
simulate the different instances of the notification.
We can't use the actual notification components in the stories due to
their data dependencies.
Release Notes:
- N/A
This PR improves the empty states for the chat panel:
- The signed-out state has been updated to match our other signed-out
panel states.
- A new state has been added to account for the case where a user is
signed in but doesn't have an active chat.
Release Notes:
- Improved the design of empty states in the chat panel.
This PR fixes the layout shift that would occur in the channel list when
opening a rename editor for a channel.
Release Notes:
- Fixed layout shift when opening a rename editor for a channel.
This PR adjusts the spacing of the indicator showing the number of extra
call participants that appears after the facepile:
<img width="242" alt="Screenshot 2024-01-08 at 1 09 39 PM"
src="https://github.com/zed-industries/zed/assets/1486634/6d9cbefa-3b4e-4501-ab11-51026dfb5b6c">
Release Notes:
- Added more space between the call participant facepile and the number
indicating additional call participants.
This commit mostly fixes invalid URLs in docstrings. It also
encapsulates crates we reexport (serde stuff + linkme) into a public
module named "private" in order to reduce the API surfaced through docs.
Moreover, I fixed up a bunch of crates that were pulling serde_json in
through gpui explicitly instead of using Cargo manifest.
Release Notes:
- N/A
This PR tidies up the styling of the connection status indicators in the
title bar.
Removed some debug styles and tweaked the styling to match the rest of
the title bar overall.
Release Notes:
- Improved the connection status indicators in the title bar.
This PR introduces Tinted button styles and the `selected_style` field
on buttons to allow replicating the previous design of titlebar call
controls. It also updates the styles of the titlebar controls.
### Creating a tinted button:
```
Button::new("accept-cta", "Accept")
.style(ButtonStyle::Tinted(TintColor::Accent))
.on_click(...)
```
Ths button will always be tinted blue.
### Creating a button that becomes tinted when selected::
```rust
IconButton::new("screen-share", Icon::Screen)
.style(ButtonStyle::Subtle)
.selected(is_screen_sharing)
.selected_style(ButtonStyle::Tinted(TintColor::Accent))
.on_click(...),
```
This button will be flat/subtle by default, but be tinted blue when it
is `selected`.
Note: There appears to be some issue where `is_deafened` isn't
activating correctly, making the speaker icon not toggle when selected.
Release Notes:
- Restore call control styles to a similar look to Zed 1.
This PR makes it so we respect the setting to show/hide the assistant
and chat panels.
Resolves https://github.com/zed-industries/community/issues/2370.
Release Notes:
- Fixed an issue where the settings to show/hide certain panels were not
respected.
This PR takes another pass at the collab panel filter input to improve
its styling.
Release Notes:
- Improved the look of the filter input in the collab panel.
