app: Initial tabs impl (#28436)

packages/app/src/components/titlebar.tsx

@@ -1,11 +1,12 @@
-import { createEffect, createMemo, Show, untrack } from "solid-js"
-import { createStore } from "solid-js/store"
-import { useLocation, useNavigate, useParams } from "@solidjs/router"
+import { createEffect, createMemo, For, mapArray, Match, Show, startTransition, Switch, untrack } from "solid-js"
+import { createStore, produce } from "solid-js/store"
+import { useLocation, useMatch, useNavigate, useParams } from "@solidjs/router"
 import { IconButton } from "@opencode-ai/ui/icon-button"
 import { Icon } from "@opencode-ai/ui/icon"
 import { Button } from "@opencode-ai/ui/button"
 import { Tooltip, TooltipKeybind } from "@opencode-ai/ui/tooltip"
 import { useTheme } from "@opencode-ai/ui/theme/context"
+import { IconButtonV2 } from "@opencode-ai/ui/v2/components/icon-button-v2.jsx"
 
 import { useLayout } from "@/context/layout"
 import { usePlatform } from "@/context/platform"
@@ -14,6 +15,9 @@ import { useLanguage } from "@/context/language"
 import { useSettings } from "@/context/settings"
 import { WindowsAppMenu } from "./windows-app-menu"
 import { applyPath, backPath, forwardPath } from "./titlebar-history"
+import { useGlobalSync } from "@/context/global-sync"
+import { decodeDirectory } from "@/pages/directory-layout"
+import { iife } from "@opencode-ai/core/util/iife"
 
 type TauriDesktopWindow = {
   startDragging?: () => Promise<void>
@@ -40,6 +44,8 @@ const titlebarHeight = 40
 const minTitlebarZoom = 0.25
 const windowsControlsBaseWidth = 138 // 3 native Windows caption buttons at 46px each.
 
+const makeSessionHref = (b64Dir: string, sessionId: string) => `/${b64Dir}/session/${sessionId}`
+
 export function Titlebar() {
   const layout = useLayout()
   const platform = usePlatform()
@@ -53,6 +59,7 @@ export function Titlebar() {
 
   const mac = createMemo(() => platform.platform === "desktop" && platform.os === "macos")
   const windows = createMemo(() => platform.platform === "desktop" && platform.os === "windows")
+  const linux = createMemo(() => platform.platform === "desktop" && platform.os === "linux")
   const web = createMemo(() => platform.platform === "web")
   const zoom = () => platform.webviewZoom?.() ?? 1
   const titlebarZoom = () => (windows() ? Math.max(zoom(), minTitlebarZoom) : zoom())
@@ -176,165 +183,378 @@ export function Titlebar() {
 
   return (
     <header
-      class="h-10 shrink-0 bg-background-base relative overflow-hidden"
-      style={{ "min-height": minHeight() }}
+      class="h-10 shrink-0 bg-background-base relative overflow-hidden flex flex-row"
+      style={{ "min-height": minHeight(), "padding-left": mac() ? `${84 / zoom()}px` : 0 }}
       data-tauri-drag-region
       onMouseDown={drag}
       onDblClick={maximize}
     >
-      <div
-        class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
-        style={{ zoom: counterZoom() }}
-      >
-        <div
-          classList={{
-            "flex items-center min-w-0": true,
-            "pl-2": !mac(),
-          }}
-        >
-          <Show when={windows()}>
-            <WindowsAppMenu command={command} platform={platform} />
-          </Show>
-          <Show when={mac()}>
-            <div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
-            <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
-              <IconButton
-                icon="menu"
-                variant="ghost"
-                class="titlebar-icon rounded-md"
-                onClick={layout.mobileSidebar.toggle}
-                aria-label={language.t("sidebar.menu.toggle")}
-                aria-expanded={layout.mobileSidebar.opened()}
-              />
-            </div>
-          </Show>
-          <Show when={!mac()}>
-            <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
-              <IconButton
-                icon="menu"
-                variant="ghost"
-                class="titlebar-icon rounded-md"
-                onClick={layout.mobileSidebar.toggle}
-                aria-label={language.t("sidebar.menu.toggle")}
-                aria-expanded={layout.mobileSidebar.opened()}
-              />
-            </div>
-          </Show>
-          <div class="flex items-center gap-1 shrink-0">
-            <TooltipKeybind
-              class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
-              placement="bottom"
-              title={language.t("command.sidebar.toggle")}
-              keybind={command.keybind("sidebar.toggle")}
-            >
-              <Button
-                variant="ghost"
-                class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
-                onClick={layout.sidebar.toggle}
-                aria-label={language.t("command.sidebar.toggle")}
-                aria-expanded={layout.sidebar.opened()}
-              >
-                <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
-              </Button>
-            </TooltipKeybind>
-            <div class="hidden xl:flex items-center shrink-0">
-              <Show when={params.dir}>
-                <div
-                  class="flex items-center shrink-0 w-8 mr-1"
-                  aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+      <Switch>
+        <Match when={import.meta.env.VITE_OPENCODE_CHANNEL !== "prod"}>
+          {(_) => {
+            const globalSync = useGlobalSync()
+            const navigate = useNavigate()
+
+            type Tab = { dir: string; sessionId: string; params: any; href: string }
+
+            const [tabsStore, tabsStoreActions] = iife(() => {
+              const [store, setStore] = createStore<Tab[]>(
+                iife(() => {
+                  if (!params.dir || !params.id) return []
+                  return [
+                    {
+                      dir: decodeDirectory(params.dir) ?? "",
+                      sessionId: params.id,
+                      params: { id: params.id, dir: params.dir },
+                      href: makeSessionHref(params.dir, params.id),
+                    },
+                  ]
+                }),
+              )
+
+              const actions = {
+                addTab: (tab: Tab) => {
+                  setStore(
+                    produce((tabs) => {
+                      if (tabs.some((t) => t.href === tab.href)) return
+
+                      tabs.push(tab)
+                    }),
+                  )
+                },
+                removeTab: (href: string) => {
+                  startTransition(() => {
+                    setStore(
+                      produce((tabs) => {
+                        const index = tabs.findIndex((t) => t.href === href)
+                        if (index === -1) return
+                        tabs.splice(index, 1)
+                        const nextTab = tabs[index] ?? tabs[tabs.length - 1]
+                        if (nextTab) navigate(nextTab.href)
+                        else navigate("/")
+                      }),
+                    )
+                  })
+                },
+              }
+
+              return [store, actions]
+            })
+
+            createEffect(() => {
+              const params = useParams()
+              if (!(params.dir && params.id)) return
+
+              tabsStoreActions.addTab({
+                dir: decodeDirectory(params.dir) ?? "",
+                sessionId: params.id,
+                params: { id: params.id, dir: params.dir },
+                href: makeSessionHref(params.dir, params.id),
+              })
+            })
+
+            const tabsEnriched = iife(() => {
+              const base = mapArray(
+                () => tabsStore,
+                (tab) => {
+                  const sync = globalSync.createDirSyncContext(tab.dir)
+                  const session = sync.session.get(tab.sessionId)
+                  return session ? { ...tab, info: session } : null
+                },
+              )
+
+              return () => base().flatMap((s) => (s ? [s] : []))
+            })
+
+            return (
+              <div class="h-full flex-1 flex flex-row items-center gap-1.5 pr-3">
+                <ChannelIndicator />
+                <Show when={windows() || linux()}>
+                  <WindowsAppMenu command={command} platform={platform} />
+                </Show>
+                <IconButtonV2
+                  as="a"
+                  href="/"
+                  variant="ghost-muted"
+                  size="large"
+                  class="!w-8"
+                  state={!!useMatch(() => "/")() ? "pressed" : undefined}
                 >
-                  <div
-                    class="transition-opacity"
-                    classList={{
-                      "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
-                      "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
-                    }}
-                  >
-                    <TooltipKeybind
-                      placement="bottom"
-                      title={language.t("command.session.new")}
-                      keybind={command.keybind("session.new")}
-                      openDelay={2000}
+                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+                    <path
+                      d="M13.9948 11.668H9.32812M11.6641 9.33203V13.9987M6.66667 9.33203V13.9987H2V9.33203H6.66667ZM6.66667 2V6.66667H2V2H6.66667ZM13.9948 2V6.66667H9.32812V2H13.9948Z"
+                      stroke="currentColor"
+                      stroke-miterlimit="10"
+                      stroke-linecap="square"
+                    />
+                  </svg>
+                </IconButtonV2>
+                <div class="flex flex-row items-center gap-2">
+                  <For each={tabsEnriched()}>
+                    {(tab, i) => (
+                      <>
+                        {i() !== 0 && <div class="w-[1.5px] h-3 rounded-full bg-[var(--v2-background-bg-layer-02)]" />}
+                        <TabNavItem
+                          href={tab.href}
+                          title={tab.info.title}
+                          onClose={() => tabsStoreActions.removeTab(tab.href)}
+                          hideClose={tabsEnriched().length < 2}
+                        />
+                      </>
+                    )}
+                  </For>
+                </div>
+                <button>
+                  <div class="p-1.5">
+                    <svg
+                      xmlns="http://www.w3.org/2000/svg"
+                      width="16"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      fill="none"
+                      class="size-4"
                     >
-                      <Button
-                        variant="ghost"
-                        icon={creating() ? "new-session-active" : "new-session"}
-                        class="titlebar-icon w-8 h-6 p-0 box-border"
-                        disabled={layout.sidebar.opened()}
-                        tabIndex={layout.sidebar.opened() ? -1 : undefined}
-                        onClick={() => {
-                          if (!params.dir) return
-                          navigate(`/${params.dir}/session`)
-                        }}
-                        aria-label={language.t("command.session.new")}
-                        aria-current={creating() ? "page" : undefined}
+                      <path
+                        d="M7.99978 2.88867V13.1109M2.88867 7.99978H13.1109"
+                        stroke="#808080"
+                        stroke-linejoin="round"
                       />
-                    </TooltipKeybind>
+                    </svg>
                   </div>
+                </button>
+
+                <div class="flex-1" />
+                {/*<button class="px-2.5 py-1.5 bg-[rgba(0,0,0,0.08)] rounded-[6px]">
+                  <svg
+                    xmlns="http://www.w3.org/2000/svg"
+                    width="16"
+                    height="16"
+                    viewBox="0 0 16 16"
+                    fill="none"
+                    class="size-4"
+                  >
+                    <path
+                      d="M10.4443 2.44436V13.5555M1.55546 13.5554H14.4443V2.44434H1.55542L1.55546 13.5554Z"
+                      stroke="#3A3A3A"
+                    />
+                  </svg>
+                </button>*/}
+              </div>
+            )
+          }}
+        </Match>
+        <Match when>
+          <div
+            class="grid h-full min-h-full w-full grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] items-center"
+            style={{ zoom: counterZoom() }}
+          >
+            <div
+              classList={{
+                "flex items-center min-w-0": true,
+                "pl-2": !mac(),
+              }}
+            >
+              <Show when={windows() || linux()}>
+                <WindowsAppMenu command={command} platform={platform} />
+              </Show>
+              <Show when={mac()}>
+                <div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
+                <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
+                  <IconButton
+                    icon="menu"
+                    variant="ghost"
+                    class="titlebar-icon rounded-md"
+                    onClick={layout.mobileSidebar.toggle}
+                    aria-label={language.t("sidebar.menu.toggle")}
+                    aria-expanded={layout.mobileSidebar.opened()}
+                  />
                 </div>
               </Show>
-              <div
-                class="flex items-center shrink-0"
-                classList={{
-                  "-translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
-                  "duration-180 ease-out": !layout.sidebar.opened(),
-                  "duration-180 ease-in": layout.sidebar.opened(),
-                }}
-              >
-                <Show when={hasProjects() && nav()}>
-                  <div class="flex items-center gap-0 transition-transform">
-                    <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
-                      <Button
-                        variant="ghost"
-                        icon="chevron-left"
-                        class="titlebar-icon w-6 h-6 p-0 box-border"
-                        disabled={!canBack()}
-                        onClick={back}
-                        aria-label={language.t("common.goBack")}
-                      />
-                    </Tooltip>
-                    <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
-                      <Button
-                        variant="ghost"
-                        icon="chevron-right"
-                        class="titlebar-icon w-6 h-6 p-0 box-border"
-                        disabled={!canForward()}
-                        onClick={forward}
-                        aria-label={language.t("common.goForward")}
-                      />
-                    </Tooltip>
+              <Show when={!mac()}>
+                <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
+                  <IconButton
+                    icon="menu"
+                    variant="ghost"
+                    class="titlebar-icon rounded-md"
+                    onClick={layout.mobileSidebar.toggle}
+                    aria-label={language.t("sidebar.menu.toggle")}
+                    aria-expanded={layout.mobileSidebar.opened()}
+                  />
+                </div>
+              </Show>
+              <div class="flex items-center gap-1 shrink-0">
+                <TooltipKeybind
+                  class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
+                  placement="bottom"
+                  title={language.t("command.sidebar.toggle")}
+                  keybind={command.keybind("sidebar.toggle")}
+                >
+                  <Button
+                    variant="ghost"
+                    class="group/sidebar-toggle titlebar-icon w-8 h-6 p-0 box-border"
+                    onClick={layout.sidebar.toggle}
+                    aria-label={language.t("command.sidebar.toggle")}
+                    aria-expanded={layout.sidebar.opened()}
+                  >
+                    <Icon size="small" name={layout.sidebar.opened() ? "sidebar-active" : "sidebar"} />
+                  </Button>
+                </TooltipKeybind>
+                <div class="hidden xl:flex items-center shrink-0">
+                  <Show when={params.dir}>
+                    <div
+                      class="flex items-center shrink-0 w-8 mr-1"
+                      aria-hidden={layout.sidebar.opened() ? "true" : undefined}
+                    >
+                      <div
+                        class="transition-opacity"
+                        classList={{
+                          "opacity-100 duration-120 ease-out": !layout.sidebar.opened(),
+                          "opacity-0 duration-120 ease-in delay-0 pointer-events-none": layout.sidebar.opened(),
+                        }}
+                      >
+                        <TooltipKeybind
+                          placement="bottom"
+                          title={language.t("command.session.new")}
+                          keybind={command.keybind("session.new")}
+                          openDelay={2000}
+                        >
+                          <Button
+                            variant="ghost"
+                            icon={creating() ? "new-session-active" : "new-session"}
+                            class="titlebar-icon w-8 h-6 p-0 box-border"
+                            disabled={layout.sidebar.opened()}
+                            tabIndex={layout.sidebar.opened() ? -1 : undefined}
+                            onClick={() => {
+                              if (!params.dir) return
+                              navigate(`/${params.dir}/session`)
+                            }}
+                            aria-label={language.t("command.session.new")}
+                            aria-current={creating() ? "page" : undefined}
+                          />
+                        </TooltipKeybind>
+                      </div>
+                    </div>
+                  </Show>
+                  <div
+                    class="flex items-center shrink-0"
+                    classList={{
+                      "-translate-x-[36px]": layout.sidebar.opened() && !!params.dir,
+                      "duration-180 ease-out": !layout.sidebar.opened(),
+                      "duration-180 ease-in": layout.sidebar.opened(),
+                    }}
+                  >
+                    <Show when={hasProjects() && nav()}>
+                      <div class="flex items-center gap-0 transition-transform">
+                        <Tooltip placement="bottom" value={language.t("common.goBack")} openDelay={2000}>
+                          <Button
+                            variant="ghost"
+                            icon="chevron-left"
+                            class="titlebar-icon w-6 h-6 p-0 box-border"
+                            disabled={!canBack()}
+                            onClick={back}
+                            aria-label={language.t("common.goBack")}
+                          />
+                        </Tooltip>
+                        <Tooltip placement="bottom" value={language.t("common.goForward")} openDelay={2000}>
+                          <Button
+                            variant="ghost"
+                            icon="chevron-right"
+                            class="titlebar-icon w-6 h-6 p-0 box-border"
+                            disabled={!canForward()}
+                            onClick={forward}
+                            aria-label={language.t("common.goForward")}
+                          />
+                        </Tooltip>
+                      </div>
+                    </Show>
+                    <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
+                    <ChannelIndicator />
                   </div>
-                </Show>
-                <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
-                {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
-                  <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
-                    {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
-                  </div>
-                )}
+                </div>
               </div>
             </div>
+
+            <div class="min-w-0 flex items-center justify-center pointer-events-none">
+              <div
+                id="opencode-titlebar-center"
+                class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full"
+              />
+            </div>
+
+            <div
+              classList={{
+                "flex items-center min-w-0 justify-end": true,
+                "pr-2": !windows(),
+              }}
+              data-tauri-drag-region
+              onMouseDown={drag}
+            >
+              <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
+              <Show when={windows()}>
+                {!tauriApi() && <div class="shrink-0" style={{ width: windowsControlsWidth() }} />}
+                <div data-tauri-decorum-tb class="flex flex-row" />
+              </Show>
+            </div>
           </div>
-        </div>
-
-        <div class="min-w-0 flex items-center justify-center pointer-events-none">
-          <div id="opencode-titlebar-center" class="pointer-events-auto min-w-0 flex justify-center w-fit max-w-full" />
-        </div>
-
-        <div
-          classList={{
-            "flex items-center min-w-0 justify-end": true,
-            "pr-2": !windows(),
-          }}
-          data-tauri-drag-region
-          onMouseDown={drag}
-        >
-          <div id="opencode-titlebar-right" class="flex items-center gap-1 shrink-0 justify-end" />
-          <Show when={windows()}>
-            {!tauriApi() && <div class="shrink-0" style={{ width: windowsControlsWidth() }} />}
-            <div data-tauri-decorum-tb class="flex flex-row" />
-          </Show>
-        </div>
-      </div>
+        </Match>
+      </Switch>
     </header>
   )
 }
+
+function TabNavItem(props: { href: string; title: string; hideClose?: boolean; onClose: () => void }) {
+  const match = useMatch(() => props.href)
+  const isActive = () => !!match()
+  return (
+    <div
+      class="group flex flex-row items-center max-w-60 whitespace-nowrap [--tab-bg:var(--v2-background-bg-deep)] data-[active='true']:[--tab-bg:var(--v2-background-bg-layer-02)] hover:[--tab-bg:var(--v2-background-bg-layer-02)] bg-[var(--tab-bg)] h-7 rounded-[6px] relative overflow-hidden"
+      data-active={isActive()}
+    >
+      <a
+        href={props.href}
+        class="w-full h-full pl-1.5 flex-1 max-w-full flex flex-row items-center overflow-hidden font-medium"
+      >
+        {props.title}
+      </a>
+
+      <div class="absolute right-0 inset-y-0 flex flex-row items-center pr-1 py-1 w-8 pl-2">
+        <div
+          class="absolute inset-0 bg-(image:--inactive-bg) group-hover:bg-(image:--active-bg) group-data-[active=true]:bg-(image:--active-bg)"
+          style={{
+            "--inactive-bg": "linear-gradient(to right, transparent 0%, var(--tab-bg) 80%)",
+            "--active-bg": "linear-gradient(90deg, transparent 0%, var(--tab-bg) 25%)",
+          }}
+        />
+        <IconButtonV2
+          size="small"
+          variant="ghost-muted"
+          class="opacity-0 group-hover:opacity-100 group-data-[active='true']:opacity-100"
+          onClick={props.onClose}
+          icon={
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              height="16"
+              viewBox="0 0 16 16"
+              fill="none"
+              class="size-4"
+            >
+              <path d="M4.25 11.75L11.75 4.25M11.75 11.75L4.25 4.25" stroke="currentColor" />
+            </svg>
+          }
+        />
+      </div>
+    </div>
+  )
+}
+function ChannelIndicator() {
+  return (
+    <>
+      {["beta", "dev"].includes(import.meta.env.VITE_OPENCODE_CHANNEL) && (
+        <div class="bg-icon-interactive-base text-[#FFF] font-medium px-2 rounded-sm uppercase font-mono">
+          {import.meta.env.VITE_OPENCODE_CHANNEL.toUpperCase()}
+        </div>
+      )}
+    </>
+  )
+}