fix(ui): remove left sidebar and back/forward nav when no project

packages/app/src/components/titlebar.tsx

@@ -58,6 +58,7 @@ export function Titlebar() {
   })
 
   const path = () => `${location.pathname}${location.search}${location.hash}`
+  const home = createMemo(() => !params.dir)
   const creating = createMemo(() => {
     if (!params.dir) return false
     if (params.id) return false
@@ -175,6 +176,7 @@ export function Titlebar() {
       >
         <Show when={mac()}>
           <div class="h-full shrink-0" style={{ width: `${72 / zoom()}px` }} />
+          <Show when={!home()}>
             <div class="xl:hidden w-10 shrink-0 flex items-center justify-center">
               <IconButton
                 icon="menu"
@@ -186,7 +188,9 @@ export function Titlebar() {
               />
             </div>
           </Show>
+        </Show>
         <Show when={!mac()}>
+          <Show when={!home()}>
             <div class="xl:hidden w-[48px] shrink-0 flex items-center justify-center">
               <IconButton
                 icon="menu"
@@ -198,7 +202,9 @@ export function Titlebar() {
               />
             </div>
           </Show>
+        </Show>
         <div class="flex items-center gap-1 shrink-0">
+          <Show when={!home()}>
             <TooltipKeybind
               class={web() ? "hidden xl:flex shrink-0 ml-14" : "hidden xl:flex shrink-0 ml-2"}
               placement="bottom"
@@ -282,6 +288,7 @@ export function Titlebar() {
                 </Tooltip>
               </div>
             </div>
+          </Show>
         </div>
         <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
       </div>

packages/app/src/pages/layout.tsx

@@ -111,6 +111,7 @@ export default function Layout(props: ParentProps) {
   let scrollContainerRef: HTMLDivElement | undefined
 
   const params = useParams()
+  const home = createMemo(() => !params.dir)
   const globalSDK = useGlobalSDK()
   const globalSync = useGlobalSync()
   const layout = useLayout()
@@ -2241,7 +2242,7 @@ export default function Layout(props: ParentProps) {
   const sidebarContent = (mobile?: boolean) => (
     <SidebarContent
       mobile={mobile}
-      opened={() => layout.sidebar.opened()}
+      opened={() => (home() ? false : layout.sidebar.opened())}
       aimMove={aim.move}
       projects={projects}
       renderProject={(project) => (
@@ -2285,7 +2286,7 @@ export default function Layout(props: ParentProps) {
                 "absolute inset-y-0 left-0": true,
                 "z-10": true,
               }}
-              style={{ width: `${Math.max(layout.sidebar.width(), 244)}px` }}
+              style={{ width: home() ? "4rem" : `${Math.max(layout.sidebar.width(), 244)}px` }}
               ref={(el) => {
                 setState("nav", el)
               }}
@@ -2294,13 +2295,14 @@ export default function Layout(props: ParentProps) {
               }}
               onMouseLeave={() => {
                 aim.reset()
+                if (home()) return
                 if (!sidebarHovering()) return
 
                 arm()
               }}
             >
               <div class="@container w-full h-full contain-strict">{sidebarContent()}</div>
-              <Show when={layout.sidebar.opened()}>
+              <Show when={!home() && layout.sidebar.opened()}>
                 <div onPointerDown={() => setState("sizing", true)}>
                   <ResizeHandle
                     direction="horizontal"
@@ -2325,6 +2327,7 @@ export default function Layout(props: ParentProps) {
               style={{ left: "calc(4rem + 12px)" }}
             />
 
+            <Show when={!home()}>
               <div class="xl:hidden">
                 <div
                   classList={{
@@ -2349,22 +2352,29 @@ export default function Layout(props: ParentProps) {
                   {sidebarContent(true)}
                 </nav>
               </div>
+            </Show>
 
             <div
               classList={{
                 "absolute inset-0": true,
-                "xl:inset-y-0 xl:right-0 xl:left-[var(--main-left)]": true,
+                "xl:inset-y-0 xl:right-0": true,
+                "xl:left-[var(--main-left)]": true,
                 "z-20": true,
                 "transition-[left] duration-200 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-[left] motion-reduce:transition-none":
                   !state.sizing,
               }}
               style={{
-                "--main-left": layout.sidebar.opened() ? `${Math.max(layout.sidebar.width(), 244)}px` : "4rem",
+                "--main-left": home()
+                  ? "4rem"
+                  : layout.sidebar.opened()
+                    ? `${Math.max(layout.sidebar.width(), 244)}px`
+                    : "4rem",
               }}
             >
               <main
                 classList={{
-                  "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base xl:border-l xl:rounded-tl-[12px]": true,
+                  "size-full overflow-x-hidden flex flex-col items-start contain-strict border-t border-border-weak-base bg-background-base": true,
+                  "xl:border-l xl:rounded-tl-[12px]": true,
                 }}
               >
                 <Show when={!autoselecting()} fallback={<div class="size-full" />}>
@@ -2373,6 +2383,7 @@ export default function Layout(props: ParentProps) {
               </main>
             </div>
 
+            <Show when={!home()}>
               <div
                 classList={{
                   "hidden xl:flex absolute inset-y-0 left-16 z-30": true,
@@ -2396,7 +2407,9 @@ export default function Layout(props: ParentProps) {
                   <SidebarPanel project={peekProject} merged={false} />
                 </Show>
               </div>
+            </Show>
 
+            <Show when={!home()}>
               <div
                 classList={{
                   "hidden xl:block pointer-events-none absolute inset-y-0 right-0 z-25 overflow-hidden": true,
@@ -2410,6 +2423,7 @@ export default function Layout(props: ParentProps) {
               >
                 <div class="h-full w-px" style={{ "box-shadow": "var(--shadow-sidebar-overlay)" }} />
               </div>
+            </Show>
           </div>
         </div>
         {import.meta.env.DEV && <DebugBar />}