Apply PR #11196: feat(app): command + w to close the current tab and fix issue of going to first tab when closing

Author: opencode-agent[bot]

packages/app/src/components/session/session-sortable-tab.tsx

@@ -3,11 +3,12 @@ import type { JSX } from "solid-js"
 import { createSortable } from "@thisbeyond/solid-dnd"
 import { FileIcon } from "@opencode-ai/ui/file-icon"
 import { IconButton } from "@opencode-ai/ui/icon-button"
-import { Tooltip } from "@opencode-ai/ui/tooltip"
+import { TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { Tabs } from "@opencode-ai/ui/tabs"
 import { getFilename } from "@opencode-ai/util/path"
 import { useFile } from "@/context/file"
 import { useLanguage } from "@/context/language"
+import { useCommand } from "@/context/command"
 
 export function FileVisual(props: { path: string; active?: boolean }): JSX.Element {
   return (
@@ -27,6 +28,7 @@ export function FileVisual(props: { path: string; active?: boolean }): JSX.Eleme
 export function SortableTab(props: { tab: string; onTabClose: (tab: string) => void }): JSX.Element {
   const file = useFile()
   const language = useLanguage()
+  const command = useCommand()
   const sortable = createSortable(props.tab)
   const path = createMemo(() => file.pathFromTab(props.tab))
   return (
@@ -36,15 +38,15 @@ export function SortableTab(props: { tab: string; onTabClose: (tab: string) => v
         <Tabs.Trigger
           value={props.tab}
           closeButton={
-            <Tooltip value={language.t("common.closeTab")} placement="bottom">
+            <TooltipKeybind title={language.t("common.closeTab")} keybind={command.keybind("tab.close")} placement="bottom">
               <IconButton
                 icon="close-small"
                 variant="ghost"
                 class="h-5 w-5"
                 onClick={() => props.onTabClose(props.tab)}
                 aria-label={language.t("common.closeTab")}
               />
-            </Tooltip>
+            </TooltipKeybind>
           }
           hideCloseButton
           onMiddleClick={() => props.onTabClose(props.tab)}

packages/app/src/context/layout.tsx

@@ -28,6 +28,7 @@ export function getAvatarColors(key?: string) {
 type SessionTabs = {
   active?: string
   all: string[]
+  history: string[]
 }
 
 type SessionView = {
@@ -621,16 +622,20 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
           ),
         )
 
-        const tabs = createMemo(() => store.sessionTabs[key()] ?? { all: [] })
+        const tabs = createMemo(() => store.sessionTabs[key()] ?? { all: [], history: [] })
         return {
           tabs,
           active: createMemo(() => (tabs().active === "review" ? undefined : tabs().active)),
           all: createMemo(() => tabs().all.filter((tab) => tab !== "review")),
           setActive(tab: string | undefined) {
             const session = key()
             if (tab === "review") return
-            if (!store.sessionTabs[session]) {
-              setStore("sessionTabs", session, { all: [], active: tab })
+            const current = store.sessionTabs[session]
+            if (current?.active && current.active !== tab) {
+              setStore("sessionTabs", session, "history", [...(current.history ?? []), current.active])
+            }
+            if (!current) {
+              setStore("sessionTabs", session, { all: [], active: tab, history: [] })
             } else {
               setStore("sessionTabs", session, "active", tab)
             }
@@ -639,41 +644,50 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
             const session = key()
             const next = all.filter((tab) => tab !== "review")
             if (!store.sessionTabs[session]) {
-              setStore("sessionTabs", session, { all: next, active: undefined })
+              setStore("sessionTabs", session, { all: next, active: undefined, history: [] })
             } else {
               setStore("sessionTabs", session, "all", next)
             }
           },
           async open(tab: string) {
             if (tab === "review") return
             const session = key()
-            const current = store.sessionTabs[session] ?? { all: [] }
+            const current = store.sessionTabs[session] ?? { all: [], history: [] }
+
+            const pushHistory = () => {
+              if (current.active && current.active !== tab) {
+                setStore("sessionTabs", session, "history", [...(current.history ?? []), current.active])
+              }
+            }
 
             if (tab === "context") {
               const all = [tab, ...current.all.filter((x) => x !== tab)]
               if (!store.sessionTabs[session]) {
-                setStore("sessionTabs", session, { all, active: tab })
+                setStore("sessionTabs", session, { all, active: tab, history: [] })
                 return
               }
+              pushHistory()
               setStore("sessionTabs", session, "all", all)
               setStore("sessionTabs", session, "active", tab)
               return
             }
 
             if (!current.all.includes(tab)) {
               if (!store.sessionTabs[session]) {
-                setStore("sessionTabs", session, { all: [tab], active: tab })
+                setStore("sessionTabs", session, { all: [tab], active: tab, history: [] })
                 return
               }
+              pushHistory()
               setStore("sessionTabs", session, "all", [...current.all, tab])
               setStore("sessionTabs", session, "active", tab)
               return
             }
 
             if (!store.sessionTabs[session]) {
-              setStore("sessionTabs", session, { all: current.all, active: tab })
+              setStore("sessionTabs", session, { all: current.all, active: tab, history: [] })
               return
             }
+            pushHistory()
             setStore("sessionTabs", session, "active", tab)
           },
           close(tab: string) {
@@ -682,12 +696,14 @@ export const { use: useLayout, provider: LayoutProvider } = createSimpleContext(
             if (!current) return
 
             const all = current.all.filter((x) => x !== tab)
+            const history = (current.history ?? []).filter((x) => x !== tab)
+
             batch(() => {
               setStore("sessionTabs", session, "all", all)
+              setStore("sessionTabs", session, "history", history)
               if (current.active !== tab) return
 
-              const index = current.all.findIndex((f) => f === tab)
-              const next = all[index - 1] ?? all[0]
+              const next = history.pop() ?? all[0]
               setStore("sessionTabs", session, "active", next)
             })
           },

packages/app/src/i18n/en.ts

@@ -43,6 +43,7 @@ export const dict = {
   "command.session.new": "New session",
   "command.file.open": "Open file",
   "command.file.open.description": "Search files and commands",
+  "command.tab.close": "Close tab",
   "command.context.addSelection": "Add selection to context",
   "command.context.addSelection.description": "Add selected lines from the current file",
   "command.terminal.toggle": "Toggle terminal",

packages/app/src/pages/session.tsx

@@ -689,6 +689,17 @@ export default function Page() {
       slash: "open",
       onSelect: () => dialog.show(() => <DialogSelectFile onOpenFile={() => showAllFiles()} />),
     },
+    {
+      id: "tab.close",
+      title: language.t("command.tab.close"),
+      category: language.t("command.category.file"),
+      keybind: "mod+w",
+      disabled: !tabs().active(),
+      onSelect: () => {
+        const active = tabs().active()
+        if (active) tabs().close(active)
+      },
+    },
     {
       id: "context.addSelection",
       title: language.t("command.context.addSelection"),