Improvements to Symbols Tree in React components

[maclong9]

Check for existing issues

• Completed

Describe the feature

The symbols tree in React pages and components is a little lackluster, it would be great to have a more detailed outline of the component I am working on, for example see the Zed symbols tree compared to JetBrains Fleet's for the same file:

Environment

Zed: v0.163.2 (Zed)
OS: macOS 15.1.0
Memory: 18 GiB
Architecture: aarch64

If applicable, add mockups / screenshots to help present your vision of the feature

No response

[maxbrunsfeld]

Can you share the source file for this example?

[maclong9]

Hey @maxbrunsfeld sorry about the delay, here is a subset of the source file as it's quite a large file:

/**
 * Builder component that renders a page based on the given `content` array.
 *
 * The `content` array is expected to be an array of objects with a `_type`
 * property that determines which component to render.
 */
const Builder = async ({ content }: BuilderProps) => {
  const siteSettings = await getSiteSettings();

  return (
    <>
      {content?.map(async (block, index) => {
        switch (block._type) {
          // Hero Carousel
          case "heroCarousel":
            return (
              <HeroCarousel
                key={index}
                slides={block.slides || []}
                isRolex={isRolex}
              />
            );

          // Featured Items
          case "featuredItems":
            return <FeaturedItems key={index} items={block.items || []} />;

          // Image Call to Action
          case "imageCta":
            return (
              <ImageCta
                key={index}
                imageSrc={
                  urlFor(block.image || { _type: "image" })?.url() as string
                }
                imageAlt={block.title as string}
                title={block.title as string}
                description={block.description as string}
                linkHref={block.href as string}
                linkText={block.text as string}
              />
            );

          default:
            return null;
        }
      })}
    </>
  )
};

export default Builder;

[maxbrunsfeld]

Ok, so the idea is that we'd include an outline entry for every JSX element expression?

[maclong9]

Pretty much with obvious folding at the root of each nested tree of elements.

Just makes navigating a react file a little more convenient when you can jump to symbols.