From 1f56d46b0db819e4b18cb1262c4d2ebf046fc5d0 Mon Sep 17 00:00:00 2001
From: taha-au <tahashabbir27@gmail.com>
Date: Wed, 11 Mar 2026 20:30:57 +0000
Subject: [PATCH] feat: show new session button in titlebar when sidebar is
 collapsed

Portal a new session icon button into #opencode-titlebar-left that
appears only when the sidebar is collapsed, giving users quick access
to start a new chat without expanding the sidebar first.

Co-authored-by: Codesmith <codesmith@blacksmith.sh>
---
 .../src/components/session/session-header.tsx | 27 ++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/components/session/session-header.tsx b/packages/app/src/components/session/session-header.tsx
index 18b607b965f..bdb61c23012 100644
--- a/packages/app/src/components/session/session-header.tsx
+++ b/packages/app/src/components/session/session-header.tsx
@@ -1,7 +1,7 @@
 import { createEffect, createMemo, onCleanup, Show } from "solid-js"
 import { createStore } from "solid-js/store"
 import { Portal } from "solid-js/web"
-import { useParams } from "@solidjs/router"
+import { useNavigate, useParams } from "@solidjs/router"
 import { useLayout } from "@/context/layout"
 import { useCommand } from "@/context/command"
 import { useLanguage } from "@/context/language"
@@ -34,6 +34,7 @@ export function SessionHeader() {
   const sync = useSync()
   const platform = usePlatform()
   const language = useLanguage()
+  const navigate = useNavigate()
 
   const projectDirectory = createMemo(() => decode64(params.dir) ?? "")
   const project = createMemo(() => {
@@ -288,11 +289,35 @@ export function SessionHeader() {
     platform.openLink(url)
   }
 
+  const leftMount = createMemo(() => document.getElementById("opencode-titlebar-left"))
   const centerMount = createMemo(() => document.getElementById("opencode-titlebar-center"))
   const rightMount = createMemo(() => document.getElementById("opencode-titlebar-right"))
 
   return (
     <>
+      <Show when={leftMount()}>
+        {(mount) => (
+          <Portal mount={mount()}>
+            <Show when={!layout.sidebar.opened()}>
+              <TooltipKeybind
+                class="hidden xl:flex shrink-0"
+                placement="bottom"
+                title={language.t("command.session.new")}
+                keybind={command.keybind("session.new")}
+              >
+                <Button
+                  variant="ghost"
+                  class="size-6 p-0"
+                  onClick={() => navigate(`/${params.dir}/session`)}
+                  aria-label={language.t("command.session.new")}
+                >
+                  <Icon size="small" name="plus-small" />
+                </Button>
+              </TooltipKeybind>
+            </Show>
+          </Portal>
+        )}
+      </Show>
       <Show when={centerMount()}>
         {(mount) => (
           <Portal mount={mount()}>