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.
Zed
Welcome to Zed, a lightning-fast, collaborative code editor that makes your dreams come true.
Development tips
Dependencies
-
Install Xcode from https://apps.apple.com/us/app/xcode/id497799835?mt=12, and accept the license:
sudo xcodebuild -license -
Install homebrew, node and rustup-init (rustup, rust, cargo, etc.)
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" brew install node rustup-init rustup-init # follow the installation steps -
Install postgres and configure the database
brew install postgresql@15 brew services start postgresql@15 psql -c "CREATE ROLE postgres SUPERUSER LOGIN" postgres psql -U postgres -c "CREATE DATABASE zed" -
Install the
LiveKitserver, thePostgRESTAPI server, and theforemanprocess supervisor:brew install livekit brew install postgrest brew install foreman -
Ensure the Zed.dev website is checked out in a sibling directory and install its dependencies:
cd .. git clone https://github.com/zed-industries/zed.dev cd zed.dev && npm install npm install -g vercel -
Return to Zed project directory and Initialize submodules
cd zed git submodule update --init --recursive -
Set up a local
zeddatabase and seed it with some initial users:Create a personal GitHub token to run
script/bootstraponce successfully: the token needs to have an access to private repositories for the script to work (repoOAuth scope). Then delete that token.GITHUB_TOKEN=<$token> script/bootstrap -
Now try running zed with collaboration disabled:
cargo run
Common errors
xcrun: error: unable to find utility "metal", not a developer tool or in PATH- You need to install Xcode and then run:
xcode-select --switch /Applications/Xcode.app/Contents/Developer - (see https://github.com/gfx-rs/gfx/issues/2309)
- You need to install Xcode and then run:
Testing against locally-running servers
Start the web and collab servers:
foreman start
If you want to run Zed pointed at the local servers, you can run:
script/zed-local
Dump element JSON
If you trigger cmd-alt-i, Zed will copy a JSON representation of the current window contents to the clipboard. You can paste this in a tool like DJSON to navigate the state of on-screen elements in a structured way.
Licensing
We use cargo-about to automatically comply with open source licenses. If CI is failing, check the following:
- Is it showing a
no license specifiederror for a crate you've created? If so, addpublish = falseunder[package]in your crate's Cargo.toml. - Is the error
failed to satisfy license requirementsfor a dependency? If so, first determine what license the project has and whether this system is sufficient to comply with this license's requirements. If you're unsure, ask a lawyer. Once you've verified that this system is acceptable add the license's SPDX identifier to theacceptedarray inscript/licenses/zed-licenses.toml. - Is
cargo-aboutunable to find the license for a dependency? If so, add a clarification field at the end ofscript/licenses/zed-licenses.toml, as specified in the cargo-about book.
Wasm Plugins
Zed has a Wasm-based plugin runtime which it currently uses to embed plugins. To compile Zed, you'll need to have the wasm32-wasi toolchain installed on your system. To install this toolchain, run:
rustup target add wasm32-wasi
Plugins can be found in the plugins folder in the root. For more information about how plugins work, check the Plugin Guide in crates/plugin_runtime/README.md.