Skip to content

Redesign TUI shared header and embed the GitHub logo as an image#143

Open
skarim wants to merge 2 commits into
mainfrom
skarim/shared-header
Open

Redesign TUI shared header and embed the GitHub logo as an image#143
skarim wants to merge 2 commits into
mainfrom
skarim/shared-header

Conversation

@skarim

@skarim skarim commented Jun 24, 2026

Copy link
Copy Markdown
Collaborator

Rework the shared gh-stack header (used by view and modify, and reused
by submit later in this stack) for a cleaner, more responsive look, and
replace the braille/ASCII Invertocat with a real image of the GitHub mark.

  • Logo: embed the Invertocat PNG with go:embed and draw it via an inline-
    image protocol (kitty or iTerm2). It is image-or-nothing: when no protocol
    is available, stdout is not a TTY, or we are inside tmux/screen, no logo is
    drawn and the text falls back to the normal left padding. Detection is
    environment-based and cached so it never blocks the TUI, and a fixed kitty
    image id lets the header clear or replace the logo in place instead of
    leaving copies behind.
  • Layout: place the logo in the top-left corner beside the title and version,
    with the stack-info lines left-aligned beneath it on the same left margin.
    Size the box to its content for each view so there is no trailing empty row.
  • Responsiveness: hide the logo progressively — first when the viewport is too
    narrow, then a little before the rest of the header at short heights, where
    a vertical resize could otherwise leave a ghost of the inline image.
  • Add unit tests for the header's responsive thresholds.
Old Design New Design
Screenshot 2026-06-24 at 12 20 10 PM Screenshot 2026-06-24 at 12 20 43 PM

Rework the shared gh-stack header (used by `view` and `modify`, and reused
by `submit` later in this stack) for a cleaner, more responsive look, and
replace the braille/ASCII Invertocat with a real image of the GitHub mark.

- Logo: embed the Invertocat PNG with go:embed and draw it via an inline-
  image protocol (kitty or iTerm2). It is image-or-nothing: when no protocol
  is available, stdout is not a TTY, or we are inside tmux/screen, no logo is
  drawn and the text falls back to the normal left padding. Detection is
  environment-based and cached so it never blocks the TUI, and a fixed kitty
  image id lets the header clear or replace the logo in place instead of
  leaving copies behind.
- Layout: place the logo in the top-left corner beside the title and version,
  with the stack-info lines left-aligned beneath it on the same left margin.
  Size the box to its content for each view so there is no trailing empty row.
- Responsiveness: hide the logo progressively — first when the viewport is too
  narrow, then a little before the rest of the header at short heights, where
  a vertical resize could otherwise leave a ghost of the inline image.
- Add unit tests for the header's responsive thresholds.
Copilot AI review requested due to automatic review settings June 24, 2026 14:12
GitHub Advanced Security started work on behalf of skarim June 24, 2026 14:12 View session
GitHub Advanced Security finished work on behalf of skarim June 24, 2026 14:14
@skarim skarim changed the title Redesign the shared header and embed the GitHub logo as an image Redesign TUI shared header and embed the GitHub logo as an image Jun 24, 2026

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This pull request redesigns the shared TUI header used across view and modify by replacing the prior ASCII/braille art with an embedded GitHub Invertocat PNG rendered via terminal inline-image protocols, while also making the header height responsive to its configured content.

Changes:

  • Introduces inline-image logo rendering (kitty/iTerm2) with environment-based detection, go:embed PNG, and explicit clearing to prevent lingering kitty graphics.
  • Refactors header layout/height logic so the header box sizes to its content and click/scroll computations use the computed header height.
  • Adds unit tests covering viewport thresholds for hiding the logo.
Show a summary per file
File Description
internal/tui/stackview/model.go Uses computed header height for click/scroll math and clears the inline logo when the header is hidden.
internal/tui/modifyview/model.go Uses computed header height for click/scroll math and clears the inline logo when the header is hidden.
internal/tui/shared/render.go Updates click handling API to accept headerHeight instead of a showHeader boolean.
internal/tui/shared/logo.go Adds embedded PNG logo rendering and protocol detection/clearing logic.
internal/tui/shared/header.go Reworks header layout to support the inline logo, progressive disclosure, and dynamic content-driven height.
internal/tui/shared/header_test.go Adds tests for logo viewport-fit thresholds and ordering vs header visibility.
go.mod Adds dependencies needed for inline-image detection/TTY checks.
go.sum Records checksums for newly introduced dependencies.

Copilot's findings

  • Files reviewed: 7/9 changed files
  • Comments generated: 3

Comment thread internal/tui/shared/header.go Outdated
Comment thread internal/tui/stackview/model.go
Comment thread internal/tui/modifyview/model.go
Follow-up to review feedback on the shared-header redesign:

- Remove the HeaderHeight constant. Nothing referenced it (callers compute
  height via HeaderHeightFor), and its doc described a "maximum" that
  HeaderHeightFor does not actually enforce, so the comment was misleading.
- In the view and modify View() methods, build the header config once and reuse
  it for both RenderHeader and the height reservation instead of rebuilding it
  twice per frame. The click/scroll handlers keep deriving the height from the
  same config, so the header's dimensions remain a single source of truth.
GitHub Advanced Security started work on behalf of skarim June 24, 2026 17:03 View session
GitHub Advanced Security finished work on behalf of skarim June 24, 2026 17:04

@Lukeghenco Lukeghenco left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changes look good. Removing the ASCII art makes this less endearing though and removes the whimsicalness from the DX here. I wish we could just 1/2 size the character count on the ASCII art instead though 😢

@ktravers ktravers left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Very cool, never realized you could just use a png, but it makes sense now!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants