feat(app): add browser shortcut to new-tab menu (#48044)

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

@@ -58,6 +58,7 @@ export const dict = {
 
   "command.session.new": "New session",
   "command.file.open": "Open file",
+  "command.browser.open": "Open browser",
   "command.tab.close": "Close tab",
   "command.tab.reopenClosed": "Reopen closed tab",
   "command.context.addSelection": "Add selection to context",

packages/app/src/session/browser/model.ts

@@ -4,6 +4,7 @@ import { createStore } from "solid-js/store"
 import { useLanguage } from "@/runtime/i18n/language"
 import type { BrowserPaneCommand } from "@/runtime/platform/browser-pane"
 import { useServer } from "@/runtime/server/current"
+import { useCommand } from "@/shell/commands/command"
 import type { SessionModel } from "../model"
 import { isSessionBrowserTab, sessionBrowserTab } from "../helpers"
 import { useBrowserAttachments } from "./attachments"
@@ -12,6 +13,7 @@ export function createSessionBrowser(session: SessionModel) {
   const attachments = useBrowserAttachments()
   const language = useLanguage()
   const server = useServer()
+  const commands = useCommand()
   const [local, setLocal] = createStore({ error: undefined as string | undefined })
   const attachment = () => {
     const sessionID = session.identity.sessionID()
@@ -47,6 +49,20 @@ export function createSessionBrowser(session: SessionModel) {
       if (owner.current()) setLocal("error", language.t("common.requestFailed"))
     })
   }
+  const open = () => {
+    if (!available()) return
+    command({ type: "tabs.open" })
+  }
+  commands.register("session.browser", () => [
+    {
+      id: "browser.open",
+      title: language.t("command.browser.open"),
+      category: language.t("command.category.view"),
+      keybind: "mod+shift+b",
+      disabled: !available(),
+      onSelect: open,
+    },
+  ])
   createEffect(() => {
     const sessionID = session.identity.sessionID()
     if (!sessionID) return
@@ -109,7 +125,7 @@ export function createSessionBrowser(session: SessionModel) {
     error: () => local.error ?? attachment()?.error,
     registration: () => attachment()?.registration,
     close: (tabID: Browser.TabID) => session.layout.tabs().close(sessionBrowserTab(tabID)),
-    open: () => command({ type: "tabs.open" }),
+    open,
     command,
   }
 }

packages/app/src/session/files/session-side-panel.tsx

@@ -228,6 +228,7 @@ export function SessionSidePanel(props: {
     return active !== "review" && active !== "context" && active !== "empty" && !isSessionBrowserTab(active)
   })
   const openFileKeybind = createMemo(() => command.keybindParts("file.open"))
+  const openBrowserKeybind = createMemo(() => command.keybindParts("browser.open"))
   const closeTabKeybind = createMemo(() => command.keybindParts("file.close"))
   createEffect(() => {
     if (!file.ready()) return
@@ -465,7 +466,7 @@ export function SessionSidePanel(props: {
                                 placement="bottom"
                                 class="flex items-center"
                               >
-                                <Menu appearance="standard" modal={false} placement="bottom-end" gutter={4}>
+                                <Menu appearance="standard" modal={false} placement="bottom-start" gutter={4}>
                                   <Menu.Trigger
                                     as={IconButton}
                                     icon={<Icon name="plus" />}
@@ -479,6 +480,7 @@ export function SessionSidePanel(props: {
                                   <Menu.Portal>
                                     <Menu.Content>
                                       <Menu.Item
+                                        class="!gap-6"
                                         onSelect={openFileBrowser}
                                         shortcut={
                                           <Show when={openFileKeybind().length > 0}>
@@ -491,7 +493,15 @@ export function SessionSidePanel(props: {
                                           <span>{language.t("command.file.open")}</span>
                                         </div>
                                       </Menu.Item>
-                                      <Menu.Item onSelect={props.browser.open}>
+                                      <Menu.Item
+                                        class="!gap-6"
+                                        onSelect={props.browser.open}
+                                        shortcut={
+                                          <Show when={openBrowserKeybind().length > 0}>
+                                            <Keybind keys={openBrowserKeybind()} variant="neutral" />
+                                          </Show>
+                                        }
+                                      >
                                         <div class="flex items-center gap-2">
                                           <Icon name="window-cursor" size="small" />
                                           <span>{language.t("session.tab.browser")}</span>