[Feature] Editor Colored Tab Groups with Pin support

[iamvince]

Support for coloured tabs groups for files., preview and extension tabs with drop down feature and pin tab and files support so they are frozen. Let me know I can share the reference. Can release as standalone extension as well for other vscode base forks.

[SNTL84]

✅ Feature Response: Colored Tab Groups with Pin Support

Great feature request! This would significantly improve the editor UX for power users managing multiple files across complex projects. Here's a focused breakdown of the implementation approach:

---

🎨 Core Solution

1. Colored Tab Groups

• Extend the existing tab bar component to support a groupColor property per tab group
• Store group metadata (color, label, groupId) in the workspace state / settings JSON
• Render a colored left-border or background tint on each tab belonging to a group
• Provide a right-click context menu: "Add to Group → [New Group / Existing Groups]" with a color picker (pre-defined palette: 6–8 colors)

2. Dropdown Group Collapse

• Add a collapsible group header above grouped tabs in the tab bar
• Toggle group visibility via a caret ▾ icon on the group label
• Persist collapsed/expanded state per workspace session

3. Pin Tab / Pin File Support

• Pinned tabs should be frozen at the left side of the tab bar, visually distinct (lock icon 🔒 or bold border)
• Pinned tabs must survive session reload — persist in workspaceState or settings.json
• Prevent accidental close with a confirmation prompt or by disabling the close (✕) button for pinned tabs
• Support: preview tabs, extension tabs, and regular file tabs

---

🔌 Standalone Extension Path

Given that Velocity is a VSCode fork, this can also ship as a standalone VSIX extension, making it usable across other VSCode-based forks (Cursor, Windsurf, etc.). The extension would:

• Hook into the vscode.window.tabGroups API (available since VS Code 1.71)
• Use Tab.group, Tab.isPinned, and TabGroup.activeTab to read/write state
• Register commands: velocity.pinTab, velocity.colorGroup, velocity.collapseGroup

---

📐 Suggested Data Model

{
  "tabGroups": [
    {
      "id": "group-1",
      "label": "Frontend",
      "color": "#4FC3F7",
      "collapsed": false,
      "tabs": ["src/App.tsx", "src/index.css"],
      "pinned": ["src/App.tsx"]
    }
  ]
}

---

🧩 UI Reference Suggestions

• Arc Browser tab groups — color-coded with drag grouping
• VS Code native Tab Groups (since 1.71) as API baseline
• Peacock extension for color theming reference

Please do share the reference you mentioned — it would be great to align the visual design with your vision before implementation begins.

---

Priority suggestion: enhancement | good first issue (for standalone extension scaffolding)

---

💼 Response by Golden Lotus — Full-Stack Developer & Automation Engineer
🌐 desidevioper.com · 💼 LinkedIn · 🐙 GitHub
📩 3goldenlotusroots@gmail.com · 📱 WhatsApp