VS Code FileTreeView

Comments.js

// https://stackblitz.com/edit/shopify-hydrogen-z8a9cx?file=package.json&title=Hydrogen

Component.html

<div>
  <div class="react-contextmenu-wrapper">
    <div
      class="FileItem-module-FileItem-K_RSo"
      style="--itemDepth: 1;"
      tabindex="0"
      data-cy="src"
    >
      <button
        class="Arrow Arrow-module-Arrow-DD4Na FileItem-module-Arrow-gsFKC"
      >
        <svg
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          fill="currentColor"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path d="M5.7 13.7L5 13l4.6-4.6L5 3.7l.7-.7 5 5v.7l-5 5z"></path>
        </svg></button
      ><span class="FileItem-module-Marker-n6Zw3"></span>
      <div class="FileName-module-root-fYtum" draggable="true">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          viewBox="0 0 16 16"
          fill="#2196F3"
          width="1em"
          height="1em"
          class="FileName-module-icon-SEpzz"
        >
          <path
            d="M6.56 2.48H2.24c-.8 0-1.44.64-1.44 1.44v8.64c0 .79.65 1.44 1.44 1.44h11.52c.79 0 1.44-.65 1.44-1.44v-7.2c0-.8-.65-1.44-1.44-1.44H8L6.56 2.48z"
          ></path></svg
        ><span class="FileName-module-name-aJJGC">src</span>
      </div>
      <span class="FileItem-module-Actions-B4gD0"
        ><button
          class="FileItem-module-ActionButton-bFuFm"
          aria-label="Add file"
          data-cy="add-file"
        >
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="vscode-icon"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M4 7H3V4H0V3h3V0h1v3h3v1H4v3zm6.5-5.9l3.4 3.5.1.4v8.5l-.5.5h-10l-.5-.5V8h1v5h9V6H9V2H5V1h5.2l.3.1zM10 2v3h2.9L10 2z"
              fill="#C5C5C5"
            ></path>
          </svg></button
        ><button
          class="FileItem-module-ActionButton-bFuFm"
          aria-label="Add folder"
          data-cy="add-folder"
        >
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="vscode-icon"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M7 3H4V0H3v3H0v1h3v3h1V4h3V3zM5.5 7H5V6h.3l.8-.9.4-.1H14V4H8V3h6.5l.5.5v10l-.5.5h-13l-.5-.5V5h1v8h12V6H6.7l-.8.9-.4.1z"
              fill="#C5C5C5"
            ></path>
          </svg></button
        ><button class="FileItem-module-ActionButton-bFuFm" aria-label="Rename">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="vscode-icon"
          >
            <path
              d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z"
              fill="#C5C5C5"
            ></path>
          </svg></button
        ><button class="FileItem-module-ActionButton-bFuFm" aria-label="Remove">
          <svg
            width="1em"
            height="1em"
            viewBox="0 0 16 16"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
            class="vscode-icon"
          >
            <path
              fill-rule="evenodd"
              clip-rule="evenodd"
              d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 011-1h3a1 1 0 011 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z"
              fill="#C5C5C5"
            ></path>
          </svg></button
      ></span>
    </div>
  </div>
  <nav
    role="menu"
    tabindex="-1"
    style="position: fixed; opacity: 0; pointer-events: none;"
    class="react-contextmenu"
  >
    <div
      class="react-contextmenu-item"
      role="menuitem"
      tabindex="-1"
      aria-disabled="false"
    >
      <span class="react-contextmenu-icon"
        ><svg
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="vscode-icon"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M4 7H3V4H0V3h3V0h1v3h3v1H4v3zm6.5-5.9l3.4 3.5.1.4v8.5l-.5.5h-10l-.5-.5V8h1v5h9V6H9V2H5V1h5.2l.3.1zM10 2v3h2.9L10 2z"
            fill="#C5C5C5"
          ></path></svg></span
      ><span class="react-contextmenu-label">New File</span>
    </div>
    <div
      class="react-contextmenu-item"
      role="menuitem"
      tabindex="-1"
      aria-disabled="false"
    >
      <span class="react-contextmenu-icon"
        ><svg
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="vscode-icon"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M7 3H4V0H3v3H0v1h3v3h1V4h3V3zM5.5 7H5V6h.3l.8-.9.4-.1H14V4H8V3h6.5l.5.5v10l-.5.5h-13l-.5-.5V5h1v8h12V6H6.7l-.8.9-.4.1z"
            fill="#C5C5C5"
          ></path></svg></span
      ><span class="react-contextmenu-label">New Folder</span>
    </div>
    <div
      class="react-contextmenu-item react-contextmenu-item--divider"
      role="menuitem"
      tabindex="-1"
      aria-disabled="false"
      aria-orientation="horizontal"
    ></div>
    <div
      class="react-contextmenu-item"
      role="menuitem"
      tabindex="-1"
      aria-disabled="false"
    >
      <span class="react-contextmenu-icon"
        ><svg
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="vscode-icon"
        >
          <path
            d="M13.23 1h-1.46L3.52 9.25l-.16.22L1 13.59 2.41 15l4.12-2.36.22-.16L15 4.23V2.77L13.23 1zM2.41 13.59l1.51-3 1.45 1.45-2.96 1.55zm3.83-2.06L4.47 9.76l8-8 1.77 1.77-8 8z"
            fill="#C5C5C5"
          ></path></svg></span
      ><span class="react-contextmenu-label">Rename</span>
    </div>
    <div
      class="react-contextmenu-item"
      role="menuitem"
      tabindex="-1"
      aria-disabled="false"
    >
      <span class="react-contextmenu-icon"
        ><svg
          width="1em"
          height="1em"
          viewBox="0 0 16 16"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
          class="vscode-icon"
        >
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M10 3h3v1h-1v9l-1 1H4l-1-1V4H2V3h3V2a1 1 0 011-1h3a1 1 0 011 1v1zM9 2H6v1h3V2zM4 13h7V4H4v9zm2-8H5v7h1V5zm1 0h1v7H7V5zm2 0h1v7H9V5z"
            fill="#C5C5C5"
          ></path></svg></span
      ><span class="react-contextmenu-label">Delete</span>
    </div>
  </nav>
</div>

contect-menu.css

.react-contextmenu {
 background-color:var(--sb-menu-background);
 border-radius:2px;
 box-shadow:0 2px 4px var(--sb-menu-shadow,#0008),0 4px 12px var(--sb-menu-shadow,#0008);
 min-width:140px;
 opacity:0;
 outline:0;
 padding:8px 0;
 position:absolute;
 transition:opacity .1s ease;
 user-select:none;
 z-index:100
}
.react-contextmenu.react-contextmenu--visible {
 opacity:1;
 pointer-events:auto;
 z-index:9999
}
.react-contextmenu:after {
 border:1px solid var(--sb-menu-border);
 border-radius:inherit;
 bottom:0;
 content:"";
 left:0;
 pointer-events:none;
 position:absolute;
 right:0;
 top:0
}
.react-contextmenu-item {
 align-items:center;
 background:#0000;
 color:var(--sb-foreground);
 cursor:pointer;
 display:flex;
 font-size:13px;
 font-weight:400;
 line-height:1.2307;
 padding:6px 16px;
 text-align:left;
 text-decoration:none;
 white-space:nowrap
}
.react-contextmenu-item.react-contextmenu-item--active,
.react-contextmenu-item.react-contextmenu-item--selected {
 background-color:var(--sb-menu-active-background);
 color:var(--sb-foreground-active)
}
.react-contextmenu-item.react-contextmenu-item--active path,
.react-contextmenu-item.react-contextmenu-item--selected path {
 fill:currentColor
}
.react-contextmenu-item.react-contextmenu-item--disabled,
.react-contextmenu-item.react-contextmenu-item--disabled:hover {
 background-color:initial;
 border-color:#00000026;
 color:var(--sb-foreground-disabled)
}
.react-contextmenu-item--divider {
 background-color:initial;
 border:none;
 cursor:inherit;
 display:block;
 padding:8px 0
}
.react-contextmenu-item--divider:before {
 border-top:1px solid var(--sb-separator-strong);
 content:"";
 display:block
}
.react-contextmenu-icon {
 align-items:center;
 display:flex;
 flex:none;
 height:16px;
 justify-content:center;
 margin-inline-end:8px;
 width:16px
}
.react-contextmenu-label {
 display:block;
 flex:1 1 auto;
 overflow:hidden;
 text-overflow:ellipsis
}
.react-contextmenu-item.react-contextmenu-submenu {
 padding:0
}
.react-contextmenu-submenu>.react-contextmenu-item:after {
 background-color:currentColor;
 content:"";
 display:block;
 height:16px;
 margin-left:10px;
 margin-right:-6px;
 -webkit-mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%23fff"><path d="M5.7 13.7L5 13L9.6 8.4L5 3.7L5.7 3L10.7 8V8.7L5.7 13.7Z"/></svg>');
 mask-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="%23fff"><path d="M5.7 13.7L5 13L9.6 8.4L5 3.7L5.7 3L10.7 8V8.7L5.7 13.7Z"/></svg>');
 opacity:.8;
 width:16px
}
.react-contextmenu-submenu>.react-contextmenu[style*="top:0"],
.react-contextmenu-submenu>.react-contextmenu[style*="top: 0"] {
 margin-top:-8px
}

style.css

.FileTree-module-FileTree-AITTG {
 overflow-x:hidden
}
.FileTree-module-SectionAction-bHItX {
 color:var(--sb-foreground-alt);
 display:inline-block;
 padding:4px
}
.FileTree-module-SectionAction-bHItX:hover {
 color:var(--sb-foreground-active)
}
.FileTree-module-SectionAction-bHItX svg {
 fill:currentColor;
 display:block;
 height:14px;
 width:14px
}
.FileTree-module-SectionAction-bHItX path {
 fill:currentColor
}
.FileItem-module-FileItem-K_RSo {
 --textColor:currentColor;
 --action-icon-color:var(--sb-foreground-alt);
 color:var(--sb-foreground);
 cursor:pointer;
 display:flex;
 height:22px;
 padding-left:calc(var(--itemDepth, 0)*10px);
 position:relative
}
.FileItem-module-Disabled-eiHMw {
 opacity:.3;
 pointer-events:none
}
.FileItem-module-Ignored-e2LCc {
 color:var(--sb-foreground-disabled)
}
.FileItem-module-FileItem-K_RSo:hover {
 background-color:var(--list-hoverBackground)
}
.FileItem-module-FileItem-K_RSo.FileItem-module-Selected-J2vGW {
 --textColor:currentColor!important;
 background-color:var(--list-inactiveSelectionBackground);
 color:var(--sb-foreground)
}
.FileItem-module-Focused-VF2LR:not(.FileItem-module-Disabled-eiHMw):focus,
.FileTree:focus-within .FileItem-module-Focused-VF2LR:not(.FileItem-module-Disabled-eiHMw) {
 --action-icon-color:var(--sb-foreground);
 background-color:var(--list-focusBackground)
}
.FileItem-module-Selected-J2vGW:not(.FileItem-module-Disabled-eiHMw):focus,
.FileTree:focus-within .FileItem-module-Selected-J2vGW:not(.FileItem-module-Disabled-eiHMw) {
 --textColor:currentColor!important;
 background-color:var(--list-activeSelectionBackground);
 color:var(--list-activeSelectionForeground)
}
.FileItem-module-IsFile-_zkSP .FileItem-module-Arrow-gsFKC {
 visibility:hidden
}
.FileItem-module-Input-d6baV {
 background:var(--sb-luminosity-minus1);
 border:1px solid var(--sb-control-border-focus);
 color:var(--sb-foreground-active);
 flex-grow:1;
 height:100%;
 margin-left:-2px;
 padding:2px 3px;
 position:relative;
 width:100%
}
.FileItem-module-Actions-B4gD0 {
 align-items:center;
 background-color:inherit;
 bottom:0;
 display:flex;
 opacity:0;
 padding:0 2px;
 position:absolute;
 right:0;
 top:0
}
.FileItem-module-FileItem-K_RSo:hover .FileItem-module-Actions-B4gD0 {
 opacity:1
}
.FileItem-module-ActionButton-bFuFm {
 color:var(--action-icon-color);
 padding:4px
}
.FileItem-module-ActionButton-bFuFm:hover {
 color:var(--sb-foreground-active)!important
}
.FileItem-module-ActionButton-bFuFm svg {
 color:inherit;
 display:block;
 height:14px;
 width:14px
}
.FileItem-module-Marker-n6Zw3 {
 background-color:var(--markerColor,#0000);
 border-radius:8px;
 display:block;
 height:8px;
 margin-left:-8px;
 position:absolute;
 top:7px;
 width:8px
}
.FileItem-module-IsFile-_zkSP .FileItem-module-Marker-n6Zw3 {
 margin-left:5px
}
.FileItem-module-DropTarget-dx6by {
 font-weight:700
}
.FileItem-module-DropTarget-dx6by:before {
 border-color:#ffffff22 #0000;
 border-style:dashed;
 border-width:1px;
 bottom:1px;
 content:"";
 left:1px;
 position:absolute;
 right:1px;
 top:1px
}
.FileName-module-root-fYtum {
 align-items:center;
 color:var(--textColor,currentColor);
 display:flex;
 flex-grow:1;
 font-size:13px;
 gap:4px;
 user-select:none
}
.FileName-module-icon-SEpzz,
.FileName-module-root-fYtum>svg {
 flex-shrink:0;
 height:15px;
 width:15px
}
.FileName-module-name-aJJGC {
 flex-grow:1;
 line-height:normal;
 overflow:hidden;
 padding:2px;
 text-overflow:ellipsis;
 white-space:nowrap
}