feat(ui): collapse header actions into inline dropdown #183

Merged

dries merged 3 commits from feat/header-actions-menu into main 2026-06-30 20:53:50 +02:00

Conversation 1 Commits 3 Files changed 7 +274 -225

dries commented 2026-06-30 16:34:00 +02:00

Owner

Copy link

Replace the stacked header (logo + breadcrumb above a per-route action button strip) with a logo-only brand mark and a single inline actions dropdown next to the project label, lowering the header height.

Changes

• Header: ocman text replaced by the existing favicon.svg logo (reused from favicon/desktop icon); leading slash in the breadcrumb removed; <h1> is now a flex row so logo + breadcrumb are vertically centered. Header padding 16px → 8px, h1 font 24px → 18px.
• Actions dropdown: per-route action buttons (tmux / launch / VS Code / new session / share) collapse into a single ⋯ native <details> menu rendered inline with the project label. Flat, single level deep, with separators:
  1. New session
  2. Download Markdown / Print / Save as PDF / Share link…
  3. Switch tmux / Launch opencode / Open in VS Code
• Share links: the share-link manager (create/list/copy/revoke) moved out of a nested popover into a modal (ShareLinkModal) opened from the menu, keeping the dropdown one level deep.

Verification

• pnpm exec tsc -b — clean
• pnpm lint (eslint) — clean

Note: the pre-commit full-suite hook flagged a failing SharedConversationView.test.tsx, which belongs to unrelated in-progress work and is not part of this branch (only the 5 header files are included).

Replace the stacked header (logo + breadcrumb above a per-route action button strip) with a logo-only brand mark and a single inline actions dropdown next to the project label, lowering the header height. ## Changes - **Header**: `ocman` text replaced by the existing `favicon.svg` logo (reused from favicon/desktop icon); leading slash in the breadcrumb removed; `<h1>` is now a flex row so logo + breadcrumb are vertically centered. Header padding `16px → 8px`, h1 font `24px → 18px`. - **Actions dropdown**: per-route action buttons (tmux / launch / VS Code / new session / share) collapse into a single `⋯` native `<details>` menu rendered inline with the project label. Flat, single level deep, with separators: 1. New session 2. Download Markdown / Print / Save as PDF / Share link… 3. Switch tmux / Launch opencode / Open in VS Code - **Share links**: the share-link manager (create/list/copy/revoke) moved out of a nested popover into a modal (`ShareLinkModal`) opened from the menu, keeping the dropdown one level deep. ## Verification - `pnpm exec tsc -b` — clean - `pnpm lint` (eslint) — clean Note: the pre-commit full-suite hook flagged a failing `SharedConversationView.test.tsx`, which belongs to unrelated in-progress work and is not part of this branch (only the 5 header files are included).

dries added 1 commit 2026-06-30 16:34:01 +02:00

feat(ui): collapse header actions into inline dropdown ... 43f9133dbf

Replace the stacked logo/breadcrumb header and per-route action button
strip with a logo-only brand mark and a single inline actions dropdown
next to the project label, lowering the header height.

The dropdown is a flat, single-level native <details> menu with
separators: New session, then export actions (Download Markdown, Print,
Share link), then host actions (tmux, launch, VS Code). The share-link
manager moves from a nested popover into a modal opened from the menu.

forgejo-actions commented 2026-06-30 16:43:27 +02:00

Copy link

Coverage ratchet: ✅ pass

Suite	Baseline	This PR	Δ
go	69.50%	69.50%	+0.00	✅
frontend	58.30%	58.34%	+0.04	✅

Tolerance: -0.1%. Baseline stored on gh-pages.

<!-- coverage-ratchet --> ### Coverage ratchet: ✅ pass | Suite | Baseline | This PR | Δ | | |---|---|---|---|---| | go | 69.50% | 69.50% | +0.00 | ✅ | | frontend | 58.30% | 58.34% | +0.04 | ✅ | _Tolerance: -0.1%. Baseline stored on `gh-pages`._

dries added 1 commit 2026-06-30 17:03:43 +02:00

test(e2e): open actions menu before asserting session actions ... 53f4fff848

The header actions (New session, Open in VS Code) moved into a
collapsed details dropdown, so the buttons are no longer visible
on load. Open the menu via its 'Session actions' label and assert
the menuitems, fixing the Playwright E2E failure.

dries added 1 commit 2026-06-30 20:39:37 +02:00

test(e2e): assert header logo by alt text, not h1 text content ... d1c34ffbfc

The header 'ocman' wordmark was replaced by an <img alt="ocman">
logo, so the h1 no longer contains the literal text 'ocman' and
toContainText fails. Assert the logo image by its accessible name
instead.

dries merged commit 1366039324 into main 2026-06-30 20:53:50 +02:00

dries referenced this pull request from a commit 2026-06-30 20:53:52 +02:00

feat(ui): collapse header actions into inline dropdown (#183)

Sign in to join this conversation.

Reviewers

No reviewers

Labels

Clear labels   

backend

Go backend code

  

bug

Something is broken or incorrect

  

chore

Maintenance, tooling, or cleanup

  

duplication

Code duplication to be addressed

  

effort:complex

Significant effort or risk

  

effort:medium

Moderate effort required

  

effort:trivial

Quick fix, low complexity

  

enhancement

New feature or capability

  

frontend

TypeScript / React frontend code

  

fullstack

Touches both backend and frontend

  

priority:high

Should be addressed soon

  

ready-for-agent

Agent-grabbable ticket, fully specced

  

refactor

Code restructuring without behaviour change

  

security

Security related

No labels

backend

bug

chore

duplication

effort:complex

effort:medium

effort:trivial

enhancement

frontend

fullstack

priority:high

ready-for-agent

refactor

security

Milestone

Clear milestone

No items

No milestone

Projects

Clear projects

No items

No project

Assignees

Clear assignees

No assignees

2 participants

Notifications

Subscribe

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

dries/ocman!183

No description provided.