Update the README for the drawn list

The colour is a left border now, not a tinted icon; pinning is one toggle;
row spacing and border width are settings; and file-type icons are gone,
which is worth stating plainly along with the reason.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

README.md

@@ -7,66 +7,76 @@ It shows up as a **Tabs** view in the Explorer — drag it wherever you want it,
 
 ## 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
+- **A colour per project**, as a border down the left of each row — the way Visual Studio marks them. The
-  `.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`, `pyproject.toml`, `pom.xml` or
+  project is the nearest `.asmdef`, `.csproj`/`.fsproj`/`.vbproj`, `package.json`, `Cargo.toml`, `go.mod`,
-  `build.gradle` above it. The colour comes from a hash of the project name, so a project keeps the same colour
+  `pyproject.toml`, `pom.xml` or `build.gradle` above the file. The colour comes from a hash of the project
-  across sessions and windows.
+  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.
+- **Names that stay readable in a narrow strip.** The stem is ellipsized but the extension never is, so you
+  get `ClientDogSurgeryCompanionBeha… .cs` rather than losing the `.cs`.
 - **Sorting.** Open order (matching the tab bar), by project so the colours run in blocks, or by file name.
-  Pinned tabs stay on top.
+  Pinned tabs stay on top, with a rule under the pinned block.
-- **The project name beside the file**, along with the directory when two files share a name.
+- **Room to breathe.** Row spacing and border width are settings.
 
-Pinning is VS Code's own — this view just exposes it per row, and pinned tabs sort first.
+Pinning is VS Code's own — this view exposes it per row as a single toggle, and pinned tabs sort first.
 
 ## Usage
 
 | Action | How |
 | --- | --- |
 | Focus a tab | Click the row |
-| Close | The `×` on hover, or the context menu |
+| Close | The `×` on hover, middle-click, or `Delete` |
-| Pin / unpin | The pin icon on hover, or the context menu |
+| Pin / unpin | The pin icon on the left of the row — one button, filled when pinned |
-| Close others | Context menu — keeps pinned tabs |
+| Close others | Right-click → *Close Others* — keeps pinned tabs |
+| Copy path, reveal in Explorer | Right-click |
+| Move around | Arrow keys, `Home`, `End`, `Enter` to open |
 | Change sorting | The view's `…` menu |
 
-The list follows the active editor, so whatever you switch to is selected.
+The list follows the active editor, so whatever you switch to is selected. An unsaved file shows a dot, which
+the close button replaces on hover.
 
 ## 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.colorByProject` — colour each row's left border by project (default `true`)
-- `verticalTabs.showDirectory` — show the directory beside the file (default `true`)
+- `verticalTabs.borderWidth` — width of that border in pixels (default `3`)
-- `verticalTabs.colorByProject` — tint each row's icon by project (default `true`)
+- `verticalTabs.rowSpacing` — pixels between rows (default `2`)
+- `verticalTabs.showProject` — also show the project name as text (default `true`)
+- `verticalTabs.showDirectory` — also show the directory as text (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
+The twelve project colours are theme colours (`verticalTabs.project1` … `project12`, plus
-`verticalTabs.noProject`), so you can override any of them in `workbench.colorCustomizations`.
+`verticalTabs.noProject`), so you can pin a project to a specific colour 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.
+  extension panels) do not have. They are listed in italics, with a tooltip saying so, and clicking does
-- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so pinning a row means
+  nothing rather than pretending.
-  opening it and then pinning. Clicking a row's pin icon therefore also switches to it.
+- **Pinning another tab focuses it first.** VS Code can only pin the *active* editor, so the pin button also
-- **No drag to reorder.** The list reflects VS Code's own tab order; it cannot rearrange it. Note that VS Code
+  switches to that tab.
-  moves a pinned tab to the front of its group, so `open` order shows pinned tabs first regardless of
+- **No drag to reorder.** The list reflects VS Code's own tab order. Note that VS Code moves a pinned tab to
-  `verticalTabs.pinnedFirst` — that setting only changes the `project` and `name` orders.
+  the front of its group, so `open` order shows pinned tabs first regardless of `verticalTabs.pinnedFirst` —
-- **The colour replaces the file-type icon.** Each row shows a tinted dot instead of the usual `.cs`/`.json`
+  that setting only changes the `project` and `name` orders.
-  icon. Set `verticalTabs.colorByProject` to `false` to get file icons back and keep the project name in the
+- **No file-type icons.** The row shows the project border instead. Adding icons back would mean bundling an
-  description.
+  icon set, since a webview cannot reach the active file-icon theme.
-- The colour is on the row's icon, not its label. Labels get the theme's own colouring (including Git status),
+- Rows are drawn rather than native, so they do not pick up list styling from every theme the way a tree view
-  which an extension cannot override without also recolouring the Explorer.
+  would, and there is no native drag-and-drop.
 
 ## 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
+asserts on the resulting list — projects resolved, ordering, pinning through the real actions, diff tabs
-their modified side, and webview tabs correctly reporting that they cannot be activated.
+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
 ```
+
+The rendering itself is checked in a browser harness at side-bar width, driving the same `media/tabs.js` with
+stub tab data.