fix(app): keep side panel tab close buttons in view and add a tab menu (#60244)

Co-authored-by: neriousy <34747899+neriousy@users.noreply.github.com>

Author: opencode-agent[bot]

packages/app/e2e/regression/side-panels.spec.ts

@@ -212,6 +212,54 @@ test("closing the last New tab closes the side region, and only a New tab lists
   await expect(review).toBeVisible()
 })
 
+test("tabs in a narrow side strip shrink to keep their close buttons, and a tab's menu closes the others", async ({
+  page,
+}) => {
+  await page.setViewportSize({ width: 1000, height: 700 })
+  const directory = "C:/OpenCode/NarrowStrip"
+  const key = `local\u0000${base64Encode(directory)}/ses_narrowstrip`
+  const files = ["a.md", "a-file-name-long-enough-to-overflow-the-side-strip-by-itself.md", "b.md"]
+
+  await openSession(page, {
+    name: "NarrowStrip",
+    fileList: () => [],
+    fileContent: (path) => ({ type: "text", content: `contents:${path}` }),
+    seed: {
+      panes: { ses_narrowstrip: { review: true, sessionWidth: 640 } },
+      storage: {
+        "opencode.global.dat:layout": {
+          sessionTabs: { [key]: { all: files.map((file) => `file://${file}`), active: `file://${files[1]}` } },
+        },
+      },
+    },
+  })
+
+  const side = page.locator('[data-pane-content="side"]')
+  const add = side.getByRole("button", { name: "Add tab", exact: true })
+  await expect(side.getByRole("tab", { name: files[1], exact: true })).toHaveAttribute("aria-selected", "true")
+
+  // Every tab's close button stays left of "+", instead of the strip scrolling it away under its edge fade.
+  const end = (await add.boundingBox())!.x
+  const closes = side.locator('[data-pane-strip="side"] [data-slot="tabs-trigger-close-button"]')
+  await expect(closes).toHaveCount(files.length)
+
+  for (const close of await closes.all()) {
+    const box = (await close.boundingBox())!
+    expect(box.x + box.width).toBeLessThanOrEqual(end)
+  }
+
+  await side.getByRole("tab", { name: "b.md", exact: true }).click({ button: "right" })
+  await page.getByRole("menuitem", { name: "Close other tabs", exact: true }).click()
+  await expect(side.getByRole("tab")).toHaveCount(1)
+  await expect(side.getByRole("tab", { name: "b.md", exact: true })).toHaveAttribute("aria-selected", "true")
+
+  // With nothing else to close, the menu offers only the tab itself.
+  await side.getByRole("tab", { name: "b.md", exact: true }).click({ button: "right" })
+  await expect(page.getByRole("menuitem", { name: "Close other tabs", exact: true })).toBeDisabled()
+  await page.getByRole("menuitem", { name: "Close tab", exact: true }).click()
+  await expect(side.getByRole("tab", { name: "b.md", exact: true })).toHaveCount(0)
+})
+
 // A DOM mark survives only while the same node stays mounted.
 function mark(locator: Locator) {
   return locator.evaluate((element) => element.setAttribute("data-e2e-mounted", "original"))

packages/app/src/runtime/i18n/am.ts

@@ -725,6 +725,7 @@ export const dict = {
   "toast.migration.progress.working.progress": "ውሂብ በማዛወር ላይ {{current}}/{{total}}",
   "home.workspaceTip": "ለውጦችን ለብለል ለማቆየት ቀጣዩን ክፍለ ጊዜ በአዲስ የስራ ቦታ ይጀምሩ",
   "session.tab.add": "ትር አክል",
+  "session.tab.closeOthers": "ሌሎች ትሮችን ዝጋ",
   "session.queue.attachments.one": "ፕላስ {{count}} አባሪ",
   "session.queue.attachments.other": "ፕላስ {{count}} አባሪዎች",
   "settings.backToSettings": "ወደ ቅንብሮች ተመለስ",

packages/app/src/runtime/i18n/ar.ts

@@ -777,6 +777,7 @@ export const dict = {
   "dialog.server.menu.remove": "إزالة",
   "home.workspaceTip": "ابدأ الجلسة التالية في شجرة عمل جديدة لإبقاء التغييرات معزولة",
   "session.tab.add": "إضافة علامة تبويب",
+  "session.tab.closeOthers": "إغلاق علامات التبويب الأخرى",
   "session.queue.attachments.one": "بالإضافة إلى {{count}} مرفق",
   "session.queue.attachments.other": "بالإضافة إلى \u2068{{count}}\u2069 مرفقات",
   "settings.backToSettings": "العودة إلى الإعدادات",

packages/app/src/runtime/i18n/az.ts

@@ -749,6 +749,7 @@ export const dict = {
   "toast.migration.progress.working.progress": "Məlumatlar köçürülür {{current}}/{{total}}",
   "home.workspaceTip": "Dəyişiklikləri izolə etmək üçün növbəti sessiyanı yeni iş sahəsində başlayın",
   "session.tab.add": "Tab əlavə et",
+  "session.tab.closeOthers": "Digər tabları bağla",
   "session.queue.attachments.one": "{{count}} əlavə əlavə et",
   "session.queue.attachments.other": "{{count}} əlavə əlavələr əlavə et",
   "settings.backToSettings": "Parametrlərə qayıt",

packages/app/src/runtime/i18n/bg.ts

@@ -748,6 +748,7 @@ export const dict = {
   "toast.migration.progress.working.progress": "Мигриране на данни {{current}}/{{total}}",
   "home.workspaceTip": "Започнете следващата сесия в ново работно пространство, за да запазите промените изолирани",
   "session.tab.add": "Добавяне на раздел",
+  "session.tab.closeOthers": "Затваряне на другите раздели",
   "session.queue.attachments.one": "Плюс {{count}} прикачен файл",
   "session.queue.attachments.other": "Плюс {{count}} прикачени файла",
   "settings.backToSettings": "Назад към настройките",

packages/app/src/runtime/i18n/bn.ts

@@ -749,6 +749,7 @@ export const dict = {
   "toast.migration.progress.working.progress": "ডেটা স্থানান্তরিত হচ্ছে {{current}}/{{total}}",
   "home.workspaceTip": "পরিবর্তনগুলিকে বিচ্ছিন্ন রাখতে একটি নতুন কর্মক্ষেত্রে পরবর্তী সেশন শুরু করুন৷",
   "session.tab.add": "ট্যাব যোগ করুন",
+  "session.tab.closeOthers": "অন্য ট্যাবগুলো বন্ধ করুন",
   "session.queue.attachments.one": "প্লাস {{count}} সংযুক্তি",
   "session.queue.attachments.other": "প্লাস {{count}}টি সংযুক্তি৷",
   "settings.backToSettings": "সেটিংসে ফিরে যান",

packages/app/src/runtime/i18n/br.ts

@@ -37,6 +37,7 @@ export const dict = {
   "dialog.server.menu.remove": "Remover",
   "home.workspaceTip": "Inicie a próxima sessão em um novo espaço de trabalho para manter as alterações isoladas",
   "session.tab.add": "Adicionar guia",
+  "session.tab.closeOthers": "Fechar outras abas",
   "session.queue.attachments.one": "Mais acessório {{count}}",
   "session.queue.attachments.other": "Mais acessórios {{count}}",
   "settings.backToSettings": "Voltar às configurações",

packages/app/src/runtime/i18n/bs.ts

@@ -813,6 +813,7 @@ export const dict = {
   "toast.migration.progress.working.progress": "Migracija podataka {{current}}/{{total}}",
   "home.workspaceTip": "Pokrenite sljedeću sesiju u novom radnom prostoru kako bi promjene ostale izolovane",
   "session.tab.add": "Dodaj karticu",
+  "session.tab.closeOthers": "Zatvori ostale kartice",
   "session.queue.attachments.one": "Još {{count}} prilog",
   "session.queue.attachments.few": "Još {{count}} priloga",
   "session.queue.attachments.other": "Još {{count}} priloga",

packages/app/src/runtime/i18n/ca.ts

@@ -744,6 +744,7 @@ export const dict = {
   "dialog.server.menu.remove": "Elimina",
   "home.workspaceTip": "Inicieu la propera sessió en un nou espai de treball per mantenir els canvis aïllats",
   "session.tab.add": "Afegeix una pestanya",
+  "session.tab.closeOthers": "Tanca les altres pestanyes",
   "session.queue.attachments.one": "Més adjunt {{count}}",
   "session.queue.attachments.other": "Més fitxers adjunts {{count}}",
   "settings.backToSettings": "Tornar a la configuració",

packages/app/src/runtime/i18n/cs.ts

@@ -758,6 +758,7 @@ export const dict = {
   "toast.migration.progress.working.progress": "Migrace dat {{current}}/{{total}}",
   "home.workspaceTip": "Spusťte příští relaci v novém pracovním prostoru, aby změny zůstaly oddělené",
   "session.tab.add": "Přidat kartu",
+  "session.tab.closeOthers": "Zavřít ostatní karty",
   "session.queue.attachments.one": "A {{count}} příloha",
   "session.queue.attachments.few": "A {{count}} přílohy",
   "session.queue.attachments.many": "A {{count}} přílohy",