Marshall Bowers 8cb291baa4 Take a different approach to rendering channel buttons (#3991)
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.
2024-01-09 18:39:29 -05:00
2024-01-03 13:33:54 -08:00
2023-07-31 13:08:40 -04:00
2024-01-04 10:14:58 -05:00
2024-01-08 15:49:03 -07:00
2023-09-15 11:17:02 -04:00
2022-10-17 09:59:16 +02:00
2024-01-09 12:49:56 -05:00
WIP
2023-12-14 09:25:14 -07:00
2023-12-28 19:22:43 +01:00
2023-10-13 15:07:49 -06:00
2023-12-28 19:22:43 +01:00

Zed

CI

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 LiveKit server, the PostgREST API server, and the foreman process 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 zed database and seed it with some initial users:

    Create a personal GitHub token to run script/bootstrap once successfully: the token needs to have an access to private repositories for the script to work (repo OAuth 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

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 specified error for a crate you've created? If so, add publish = false under [package] in your crate's Cargo.toml.
  • Is the error failed to satisfy license requirements for 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 the accepted array in script/licenses/zed-licenses.toml.
  • Is cargo-about unable to find the license for a dependency? If so, add a clarification field at the end of script/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.

Description
Code at the speed of thought – Zed is a high-performance, multiplayer code editor from the creators of Atom and Tree-sitter.
Readme 586 MiB
Languages
Rust 94.7%
JSON-with-Comments 3.1%
Inno Setup 0.6%
Scheme 0.5%
Shell 0.3%
Other 0.4%