# Vertical Tabs

Your open editors as a flat vertical list, colour-coded by project. Built for working with the tab bar turned
off (`"workbench.editor.showTabs": "none"`), where a side list *is* the tab bar.

It shows up as a **Tabs** view in the Explorer — drag it wherever you want it, including the secondary side bar.

## What it adds over the built-in Open Editors view

- **A colour per project.** Each row's icon is tinted by the project that contains the file — the nearest
  `.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`, `pyproject.toml`, `pom.xml` or
  `build.gradle` above it. The colour comes from a hash of the project name, so a project keeps the same colour
  across sessions and windows.
- **A flat list, not a tree.** One row per open editor, no group nodes to expand.
- **Sorting.** Open order (matching the tab bar), by project so the colours run in blocks, or by file name.
  Pinned tabs stay on top.
- **The project name beside the file**, along with the directory when two files share a name.

Pinning is VS Code's own — this view just exposes it per row, and pinned tabs sort first.

## Usage

| Action | How |
| --- | --- |
| Focus a tab | Click the row |
| Close | The `×` on hover, or the context menu |
| Pin / unpin | The pin icon on hover, or the context menu |
| Close others | Context menu — keeps pinned tabs |
| Change sorting | The view's `…` menu |

The list follows the active editor, so whatever you switch to is selected.

## Settings

- `verticalTabs.order` — `open` (default), `project`, or `name`
- `verticalTabs.pinnedFirst` — list pinned tabs above the rest (default `true`)
- `verticalTabs.showProject` — show the project name beside the file (default `true`)
- `verticalTabs.showDirectory` — show the directory beside the file (default `true`)
- `verticalTabs.colorByProject` — tint each row's icon by project (default `true`)
- `verticalTabs.allGroups` — list every editor group, not just the active one (default `true`)
- `verticalTabs.projectFiles` — file names or extensions that mark a project root

The eight project colours are theme colours (`verticalTabs.project1` … `project8`, plus
`verticalTabs.noProject`), so you can override any of them in `workbench.colorCustomizations`.

## Known limitations

- **Webview tabs cannot be focused from the list.** There is no API to activate an arbitrary tab; a file-backed
  tab is focused by re-opening its resource, which webviews (Settings, Keyboard Shortcuts, Markdown preview,
  extension panels) do not have. They are listed, with a tooltip saying so, but clicking them does nothing.
- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so pinning a row means
  opening it and then pinning. Clicking a row's pin icon therefore also switches to it.
- **No drag to reorder.** The list reflects VS Code's own tab order; it cannot rearrange it. Note that VS Code
  moves a pinned tab to the front of its group, so `open` order shows pinned tabs first regardless of
  `verticalTabs.pinnedFirst` — that setting only changes the `project` and `name` orders.
- **The colour replaces the file-type icon.** Each row shows a tinted dot instead of the usual `.cs`/`.json`
  icon. Set `verticalTabs.colorByProject` to `false` to get file icons back and keep the project name in the
  description.
- The colour is on the row's icon, not its label. Labels get the theme's own colouring (including Git status),
  which an extension cannot override without also recolouring the Explorer.

## Tests

`npm test` launches VS Code with all other extensions disabled on a multi-project folder, opens editors, and
asserts on the resulting list — projects resolved, ordering, pinning through the commands, diff tabs reporting
their modified side, and webview tabs correctly reporting that they cannot be activated.

Point it at your own multi-project folder with `VERTICAL_TABS_TEST_FOLDER`:

```bash
VERTICAL_TABS_TEST_FOLDER=/path/to/solution npm test
```