Stand the pin upright once a tab is pinned

The pinned state and the hover affordance drew the same slanted pin, so the
only difference was opacity. Rotating the pinned one to vertical separates
"this is pinned" from "click to pin", and the short transition reads as the
toggle landing.

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

README.md

@@ -53,9 +53,9 @@ the close button replaces on hover.
 - `verticalTabs.pinnedFirst` — list pinned tabs above the rest (default `true`)
 - `verticalTabs.colorByProject` — colour each row's left border by project (default `true`)
 - `verticalTabs.borderWidth` — width of that border in pixels (default `3`)
-- `verticalTabs.rowSpacing` — pixels between rows (default `2`)
-- `verticalTabs.showProject` — also show the project name as text (default `true`); turn it off and the file
-  name gets the whole row, with the border still telling you the project
+- `verticalTabs.rowSpacing` — pixels between rows (default `3`)
+- `verticalTabs.showProject` — also show the project name as text (default `false`, so the file name gets
+  the whole row and the border alone tells you the project); turn it on for the name in text too
 - `verticalTabs.showDirectory` — when to show the directory: `never`, `duplicates` (default — only when two
   open tabs share a file name), or `always`
 - `verticalTabs.allGroups` — list every editor group, not just the active one (default `true`)

media/tabs.css

@@ -160,6 +160,16 @@ button.marker:focus-visible {
     outline-offset: -1px;
 }
 
+/* The pin leans over while it is only an offer; once the tab is really pinned it
+   stands upright, so the state reads apart from the hover affordance. */
+button.pin svg {
+    transition: transform 80ms ease-out;
+}
+
+button.pin.on svg {
+    transform: rotate(-45deg);
+}
+
 /* An unsaved file shows a dot, which the close button replaces on hover. */
 .dirty {
     flex: 0 0 auto;

package.json

@@ -110,8 +110,8 @@
         },
         "verticalTabs.showProject": {
           "type": "boolean",
-          "default": true,
-          "description": "Show the project name beside the file. The row's left border already encodes the project, so turning this off gives the file name the whole row."
+          "default": false,
+          "description": "Show the project name beside the file. Off by default: the row's left border already encodes the project, so the file name gets the whole row."
         },
         "verticalTabs.showDirectory": {
           "type": "string",
@@ -159,7 +159,7 @@
         },
         "verticalTabs.rowSpacing": {
           "type": "number",
-          "default": 2,
+          "default": 3,
           "minimum": 0,
           "maximum": 10,
           "description": "Pixels of vertical space between rows."

src/view.ts

@@ -142,13 +142,13 @@ export class TabsView implements vscode.WebviewViewProvider {
         void this.view.webview.postMessage({
             type: 'rows',
             followActive,
-            rowSpacing: cfg.get<number>('rowSpacing', 2),
+            rowSpacing: cfg.get<number>('rowSpacing', 3),
             borderWidth: cfg.get<number>('borderWidth', 3),
             rows: this.entries.map((entry): Row => ({
                 id: entry.id,
                 label: entry.label,
                 detail: describeEntry(entry, {
-                    showProject: cfg.get<boolean>('showProject', true),
+                    showProject: cfg.get<boolean>('showProject', false),
                     showDirectory: showDirectory(entry),
                     showColumn,
                 }),