update(ui): hide sidebar when no projects

packages/app/e2e/app/home.spec.ts

@@ -19,3 +19,42 @@ test("server picker dialog opens from home", async ({ page }) => {
   await expect(dialog).toBeVisible()
   await expect(dialog.getByRole("textbox").first()).toBeVisible()
 })
+
+test("home hides desktop history and sidebar controls", async ({ page }) => {
+  await page.setViewportSize({ width: 1400, height: 900 })
+  await page.goto("/")
+
+  await expect(page.getByRole("button", { name: "Toggle sidebar" })).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "Go back" })).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "Go forward" })).toHaveCount(0)
+  await expect(page.getByRole("button", { name: "Toggle menu" })).toHaveCount(0)
+})
+
+test("home keeps the mobile menu available", async ({ page }) => {
+  await page.setViewportSize({ width: 430, height: 900 })
+  await page.goto("/")
+
+  const toggle = page.getByRole("button", { name: "Toggle menu" }).first()
+  await expect(toggle).toBeVisible()
+  await toggle.click()
+
+  const nav = page.locator('[data-component="sidebar-nav-mobile"]')
+  await expect(nav).toBeVisible()
+  await expect.poll(async () => (await nav.boundingBox())?.width ?? 0).toBeLessThan(120)
+  await expect(nav.getByRole("button", { name: "Settings" })).toBeVisible()
+  await expect(nav.getByRole("button", { name: "Help" })).toBeVisible()
+
+  await page.setViewportSize({ width: 1400, height: 900 })
+  await expect(nav).toBeHidden()
+
+  await page.setViewportSize({ width: 430, height: 900 })
+  await expect(toggle).toBeVisible()
+  await expect(toggle).toHaveAttribute("aria-expanded", "false")
+  await expect(nav).toHaveClass(/-translate-x-full/)
+
+  await toggle.click()
+  await expect(nav).toBeVisible()
+
+  await nav.getByRole("button", { name: "Settings" }).click()
+  await expect(page.getByRole("dialog")).toBeVisible()
+})

packages/app/e2e/session/session-review.spec.ts

@@ -123,6 +123,101 @@ async function spot(page: Parameters<typeof test>[0]["page"], file: string) {
   }, file)
 }
 
+async function comment(page: Parameters<typeof test>[0]["page"], file: string, note: string) {
+  const row = page.locator(`[data-file="${file}"]`).first()
+  await expect(row).toBeVisible()
+
+  const line = row.locator('diffs-container [data-line="2"]').first()
+  await expect(line).toBeVisible()
+  await line.hover()
+
+  const add = row.getByRole("button", { name: /^Comment$/ }).first()
+  await expect(add).toBeVisible()
+  await add.click()
+
+  const area = row.locator('[data-slot="line-comment-textarea"]').first()
+  await expect(area).toBeVisible()
+  await area.fill(note)
+
+  const submit = row.locator('[data-slot="line-comment-action"][data-variant="primary"]').first()
+  await expect(submit).toBeEnabled()
+  await submit.click()
+
+  await expect(row.locator('[data-slot="line-comment-content"]').filter({ hasText: note }).first()).toBeVisible()
+  await expect(row.locator('[data-slot="line-comment-tools"]').first()).toBeVisible()
+}
+
+async function overflow(page: Parameters<typeof test>[0]["page"], file: string) {
+  const row = page.locator(`[data-file="${file}"]`).first()
+  const view = page.locator('[data-slot="session-review-scroll"] .scroll-view__viewport').first()
+  const pop = row.locator('[data-slot="line-comment-popover"][data-inline-body]').first()
+  const tools = row.locator('[data-slot="line-comment-tools"]').first()
+
+  const [width, viewBox, popBox, toolsBox] = await Promise.all([
+    view.evaluate((el) => el.scrollWidth - el.clientWidth),
+    view.boundingBox(),
+    pop.boundingBox(),
+    tools.boundingBox(),
+  ])
+
+  if (!viewBox || !popBox || !toolsBox) return null
+
+  return {
+    width,
+    pop: popBox.x + popBox.width - (viewBox.x + viewBox.width),
+    tools: toolsBox.x + toolsBox.width - (viewBox.x + viewBox.width),
+  }
+}
+
+test("review applies inline comment clicks without horizontal overflow", async ({ page, withProject }) => {
+  test.setTimeout(180_000)
+
+  const tag = `review-comment-${Date.now()}`
+  const file = `review-comment-${tag}.txt`
+  const note = `comment ${tag}`
+
+  await page.setViewportSize({ width: 1280, height: 900 })
+
+  await withProject(async (project) => {
+    const sdk = createSdk(project.directory)
+
+    await withSession(sdk, `e2e review comment ${tag}`, async (session) => {
+      await patch(sdk, session.id, seed([{ file, mark: tag }]))
+
+      await expect
+        .poll(
+          async () => {
+            const diff = await sdk.session.diff({ sessionID: session.id }).then((res) => res.data ?? [])
+            return diff.length
+          },
+          { timeout: 60_000 },
+        )
+        .toBe(1)
+
+      await project.gotoSession(session.id)
+      await show(page)
+
+      const tab = page.getByRole("tab", { name: /Review/i }).first()
+      await expect(tab).toBeVisible()
+      await tab.click()
+
+      await expand(page)
+      await waitMark(page, file, tag)
+      await comment(page, file, note)
+
+      await expect
+        .poll(async () => (await overflow(page, file))?.width ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+        .toBeLessThanOrEqual(1)
+      await expect
+        .poll(async () => (await overflow(page, file))?.pop ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+        .toBeLessThanOrEqual(1)
+      await expect
+        .poll(async () => (await overflow(page, file))?.tools ?? Number.POSITIVE_INFINITY, { timeout: 10_000 })
+        .toBeLessThanOrEqual(1)
+    })
+  })
+})
+
 test("review keeps scroll position after a live diff update", async ({ page, withProject }) => {
   test.skip(Boolean(process.env.CI), "Flaky in CI for now.")
   test.setTimeout(180_000)

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
@@ -198,91 +199,93 @@ export function Titlebar() {
             />
           </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()}
+        <Show when={!home()}>
+          <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")}
             >
-              <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}
+              <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="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(),
-                  }}
+                  class="flex items-center shrink-0 w-8 mr-1"
+                  aria-hidden={layout.sidebar.opened() ? "true" : undefined}
                 >
-                  <TooltipKeybind
-                    placement="bottom"
-                    title={language.t("command.session.new")}
-                    keybind={command.keybind("session.new")}
-                    openDelay={2000}
+                  <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(),
+                    }}
                   >
-                    <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>
+                    <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 gap-0 transition-transform"
+                classList={{
+                  "translate-x-0": !layout.sidebar.opened(),
+                  "-translate-x-[36px]": layout.sidebar.opened(),
+                  "duration-180 ease-out": !layout.sidebar.opened(),
+                  "duration-180 ease-in": layout.sidebar.opened(),
+                }}
+              >
+                <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
-              class="flex items-center gap-0 transition-transform"
-              classList={{
-                "translate-x-0": !layout.sidebar.opened(),
-                "-translate-x-[36px]": layout.sidebar.opened(),
-                "duration-180 ease-out": !layout.sidebar.opened(),
-                "duration-180 ease-in": layout.sidebar.opened(),
-              }}
-            >
-              <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>
           </div>
-        </div>
+        </Show>
         <div id="opencode-titlebar-left" class="flex items-center gap-3 min-w-0 px-2" />
       </div>
 

packages/app/src/pages/layout.tsx

@@ -200,13 +200,20 @@ export default function Layout(props: ParentProps) {
 
   onMount(() => {
     const stop = () => setState("sizing", false)
+    const sync = () => {
+      if (!window.matchMedia("(min-width: 1280px)").matches) return
+      layout.mobileSidebar.hide()
+    }
     window.addEventListener("pointerup", stop)
     window.addEventListener("pointercancel", stop)
     window.addEventListener("blur", stop)
+    window.addEventListener("resize", sync)
+    sync()
     onCleanup(() => {
       window.removeEventListener("pointerup", stop)
       window.removeEventListener("pointercancel", stop)
       window.removeEventListener("blur", stop)
+      window.removeEventListener("resize", sync)
     })
   })
 
@@ -2242,6 +2249,7 @@ export default function Layout(props: ParentProps) {
     <SidebarContent
       mobile={mobile}
       opened={() => layout.sidebar.opened()}
+      hasPanel={() => !!currentProject()}
       aimMove={aim.move}
       projects={projects}
       renderProject={(project) => (
@@ -2340,7 +2348,9 @@ export default function Layout(props: ParentProps) {
                 aria-label={language.t("sidebar.nav.projectsAndSessions")}
                 data-component="sidebar-nav-mobile"
                 classList={{
-                  "@container fixed top-10 bottom-0 left-0 z-50 w-full max-w-[400px] overflow-hidden border-r border-border-weaker-base bg-background-base transition-transform duration-200 ease-out": true,
+                  "@container fixed top-10 bottom-0 left-0 z-50 overflow-hidden border-r border-border-weaker-base bg-background-base transition-transform duration-200 ease-out": true,
+                  "w-16": !currentProject(),
+                  "w-full max-w-[400px]": !!currentProject(),
                   "translate-x-0": layout.mobileSidebar.opened(),
                   "-translate-x-full": !layout.mobileSidebar.opened(),
                 }}

packages/app/src/pages/layout/sidebar-shell.tsx

@@ -15,6 +15,7 @@ import { type LocalProject } from "@/context/layout"
 export const SidebarContent = (props: {
   mobile?: boolean
   opened: Accessor<boolean>
+  hasPanel?: Accessor<boolean>
   aimMove: (event: MouseEvent) => void
   projects: Accessor<LocalProject[]>
   renderProject: (project: LocalProject) => JSX.Element
@@ -33,6 +34,7 @@ export const SidebarContent = (props: {
   renderPanel: () => JSX.Element
 }): JSX.Element => {
   const expanded = createMemo(() => !!props.mobile || props.opened())
+  const hasPanel = createMemo(() => props.hasPanel?.() ?? true)
   const placement = () => (props.mobile ? "bottom" : "right")
   let panel: HTMLDivElement | undefined
 
@@ -111,15 +113,17 @@ export const SidebarContent = (props: {
         </div>
       </div>
 
-      <div
-        ref={(el) => {
-          panel = el
-        }}
-        classList={{ "flex-1 flex h-full min-h-0 min-w-0 overflow-hidden": true, "pointer-events-none": !expanded() }}
-        aria-hidden={!expanded()}
-      >
-        {props.renderPanel()}
-      </div>
+      <Show when={hasPanel()}>
+        <div
+          ref={(el) => {
+            panel = el
+          }}
+          classList={{ "flex-1 flex h-full min-h-0 min-w-0 overflow-hidden": true, "pointer-events-none": !expanded() }}
+          aria-hidden={!expanded()}
+        >
+          {props.renderPanel()}
+        </div>
+      </Show>
     </div>
   )
 }

packages/ui/src/components/line-comment-styles.ts

@@ -15,6 +15,7 @@ export const lineCommentStyles = `
   right: auto;
   display: flex;
   width: 100%;
+  min-width: 0;
   align-items: flex-start;
 }
 
@@ -64,6 +65,7 @@ export const lineCommentStyles = `
   z-index: var(--line-comment-popover-z, 40);
   min-width: 200px;
   max-width: none;
+  box-sizing: border-box;
   border-radius: 8px;
   background: var(--surface-raised-stronger-non-alpha);
   box-shadow: var(--shadow-xxs-border);
@@ -75,9 +77,10 @@ export const lineCommentStyles = `
   top: auto;
   right: auto;
   margin-left: 8px;
-  flex: 0 1 600px;
-  width: min(100%, 600px);
-  max-width: min(100%, 600px);
+  flex: 1 1 0%;
+  width: auto;
+  max-width: 100%;
+  min-width: 0;
 }
 
 [data-component="line-comment"][data-inline] [data-slot="line-comment-popover"][data-inline-body] {
@@ -96,23 +99,27 @@ export const lineCommentStyles = `
 }
 
 [data-component="line-comment"][data-inline][data-variant="editor"] [data-slot="line-comment-popover"] {
-  flex-basis: 600px;
+  width: 100%;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-content"] {
   display: flex;
   flex-direction: column;
   gap: 6px;
+  width: 100%;
+  min-width: 0;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-head"] {
   display: flex;
   align-items: flex-start;
   gap: 8px;
+  min-width: 0;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-text"] {
   flex: 1;
+  min-width: 0;
   font-family: var(--font-family-sans);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-regular);
@@ -120,6 +127,7 @@ export const lineCommentStyles = `
   letter-spacing: var(--letter-spacing-normal);
   color: var(--text-strong);
   white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-tools"] {
@@ -127,6 +135,7 @@ export const lineCommentStyles = `
   display: flex;
   align-items: center;
   justify-content: flex-end;
+  min-width: 0;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-label"],
@@ -137,17 +146,22 @@ export const lineCommentStyles = `
   line-height: var(--line-height-large);
   letter-spacing: var(--letter-spacing-normal);
   color: var(--text-weak);
-  white-space: nowrap;
+  min-width: 0;
+  white-space: normal;
+  overflow-wrap: anywhere;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-editor"] {
   display: flex;
   flex-direction: column;
   gap: 8px;
+  width: 100%;
+  min-width: 0;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-textarea"] {
   width: 100%;
+  box-sizing: border-box;
   resize: vertical;
   padding: 8px;
   border-radius: var(--radius-md);
@@ -167,11 +181,14 @@ export const lineCommentStyles = `
 [data-component="line-comment"] [data-slot="line-comment-actions"] {
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: 8px;
   padding-left: 8px;
+  min-width: 0;
 }
 
 [data-component="line-comment"] [data-slot="line-comment-editor-label"] {
+  flex: 1 1 220px;
   margin-right: auto;
 }
 

packages/ui/src/components/line-comment.tsx

@@ -206,6 +206,16 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
   const [text, setText] = createSignal(split.value)
 
   const focus = () => refs.textarea?.focus()
+  const hold: JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+  const click =
+    (fn: VoidFunction): JSX.EventHandlerUnion<HTMLButtonElement, MouseEvent> =>
+    (e) => {
+      e.stopPropagation()
+      fn()
+    }
 
   createEffect(() => {
     setText(split.value)
@@ -268,7 +278,8 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
                   type="button"
                   data-slot="line-comment-action"
                   data-variant="ghost"
-                  on:click={split.onCancel as any}
+                  on:mousedown={hold as any}
+                  on:click={click(split.onCancel) as any}
                 >
                   {split.cancelLabel ?? i18n.t("ui.common.cancel")}
                 </button>
@@ -277,7 +288,8 @@ export const LineCommentEditor = (props: LineCommentEditorProps) => {
                   data-slot="line-comment-action"
                   data-variant="primary"
                   disabled={text().trim().length === 0}
-                  on:click={submit as any}
+                  on:mousedown={hold as any}
+                  on:click={click(submit) as any}
                 >
                   {split.submitLabel ?? i18n.t("ui.lineComment.submit")}
                 </button>