Give the file name the row, and stop repeating the project

On a real project the name lost the width fight and the trailing text read
"MyGame.Runtime MyGame.Runtime" — the directory and the project were the
same string, printed twice.

- The detail text now has a shrink factor of 1000 against the name's 1, plus
  a 45% cap, so it gives up its width first and the name is the last thing to
  ellipsize.
- A directory that already begins with the project name says everything the
  project name would, so only one of the two is shown.
- verticalTabs.showDirectory became never / duplicates / always, defaulting
  to duplicates: width goes to a directory only when two open tabs share a
  file name, which is the usual reason to want it. Turning showProject off
  as well gives the name the whole row.
- The trailing text is composed in the extension now rather than the webview,
  so the deduplication is unit-testable and there is one implementation.

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

media/tabs.css

@@ -78,6 +78,8 @@ body {
 
 /* --- the file name ------------------------------------------------------ */
 
+/* The name is the point of the row, so it shrinks last: the detail text has a huge
+   shrink factor and gives up its width first. */
 .name {
     display: flex;
     flex: 1 1 auto;
@@ -102,12 +104,14 @@ body {
     font-style: italic;
 }
 
-.dir {
-    flex: 0 1 auto;
+.detail {
+    flex: 0 1000 auto;
     min-width: 0;
+    max-width: 45%;
     overflow: hidden;
     color: var(--vscode-descriptionForeground);
     font-size: 0.9em;
+    text-align: right;
     text-overflow: ellipsis;
     white-space: nowrap;
 }

media/tabs.js

@@ -98,21 +98,11 @@
         }
         div.appendChild(name);
 
-        const trailing = [];
-        if (data.showDirectory && row.dir) {
-            trailing.push(row.dir);
-        }
-        if (data.showProject && row.project) {
-            trailing.push(row.project);
-        }
-        if (data.showColumn && row.column) {
-            trailing.push(`#${row.column}`);
-        }
-        if (trailing.length > 0) {
-            const dir = document.createElement('span');
-            dir.className = 'dir';
-            dir.textContent = trailing.join('  ');
-            div.appendChild(dir);
+        if (row.detail) {
+            const detail = document.createElement('span');
+            detail.className = 'detail';
+            detail.textContent = row.detail;
+            div.appendChild(detail);
         }
 
         const dirty = document.createElement('span');