Skip to content

feat(about): redesign the About window as a centred credits roll - #753

Draft
kud wants to merge 2 commits into
gnachman:masterfrom
kud:feat/about-tahoe-redesign
Draft

kud wants to merge 2 commits into
gnachman:masterfrom
kud:feat/about-tahoe-redesign

Conversation

@kud

@kud kud commented Sep 10, 2026

Copy link
Copy Markdown
Contributor

Note

Stacks on #632 (its commit is the first of the two here). Two things I'd like your view on before this leaves draft, both under Open questions below: the window height, and transparent versions of two sponsor logos.

📄 Description

Redesigns the About window as one centred column, read top to bottom like a credits roll: who made it, who sponsors it, who backs it, and how to join them.

  • Header: app icon at 96pt, centred, so a layered Tahoe icon shows its layers; iTerm2 at 22pt semibold; the byline in secondaryLabelColor; the build number and What's New on one line in tertiaryLabelColor. The three underlined text links become small push buttons, which macOS 26 renders as capsules with no code of their own. The separator line is gone; fills do the grouping now.
  • Sponsors: a SPONSORS eyebrow over the row of cards. Cards are 56pt tall with 12pt radius on 26 (8pt before). A card whose logo has a flat colour baked into the image (currently CodeRabbit and BairesDev, which are white) becomes a tile of that colour, so the image's edge disappears into the card's rounded corners instead of showing as a rectangle inside a grey box; transparent logos keep the neutral fill. That is decided by sampling the image's four corners at runtime, so a new logo needs no code change, and a gradient or photo falls back to neutral rather than a guess.
  • Backers: a BACKERS 159 eyebrow (the count from the feed) over a rounded well sharing the cards' fill and radius. Names are centred at 13pt with 1.6 line height, separated by middle dots rather than commas, and never wrap inside a name. The feed marks higher-tier backers by wrapping the name in ⭐️; those are listed first in medium weight with a small gold star.fill before each, everyone else follows in secondaryLabelColor. Tier is carried by weight, colour and position as well as the star, so it survives colourblindness.
  • Footer: "Support iTerm2 on Patreon or GitHub Sponsors" in secondaryLabelColor, taking over the call to action from the old bold heading.
  • Theming: as in style(about): follow the app theme; plain window on macOS 26, frosted glass before #632. On 26 the body is plain windowBackground; before 26, dark themes get frosted glass with a scrim behind the backers.

The window still grows to fit the backer list, as it always has. New: it stops at the screen's visible height, and past that the well scrolls, so a long list can no longer push the window off screen.

Built and checked in the running app on macOS 26.6 under the Dark theme.

🛠️ How it's built

  • Positioning is frame-based, in code, in iTermAboutWindowContentView -layoutContent, the same way the sponsor row was already laid out. No Auto Layout.
  • The nib keeps its views and gains outlets for them; the separator box and the old fixed positions are the only things removed. Window content size goes from 960×413 to 960×600 as the starting height before the backers load.
  • Every measurement is a named static const at file scope, on an 8pt scale except where type sets it.
  • Containers paint from updateLayer (the iTermSponsorBoxView idiom); the well is iTermAboutBackersWellView.
  • The star is an SF Symbol through SFSymbolGetString(SFSymbolStarFill).
  • New user-visible strings go through NSLocalizedStringWithDefaultValue with keys AboutWindow.SponsorsHeading, AboutWindow.BackersHeading, AboutWindow.HigherTierBackerMarker and About.SupportFooter; the old About.BackersHeading heading is no longer used. I have not run make extract-strings, per docs/localization.md, so the catalog picks them up at the next extraction.

❓ Open questions

  1. Height. The design wants more vertical room than 413pt: with today's 159 backers the window is about 920pt tall on a large display, and on a 900pt display it caps and the well scrolls. I kept "grows to fit" because you asked for it in the first review; if you would rather cap the well at a fixed height (180pt, say) and have it always scroll, that is a one-constant change and the window settles around 620pt.
  2. Logos. CodeRabbit and BairesDev ship with white baked into the PNG. The tile rule above makes them look intentional, but two white tiles beside three dark cards is still uneven on the dark window. If the sponsors can supply transparent versions, the rule falls back to the neutral fill by itself the day they land.

✅ How to Validate

  1. About iTerm2 on macOS 26, Dark theme: matches the screenshot in the first comment.
  2. Same under Light: plain light window, same layout, white tiles for the two baked logos, neutral fill for the rest.
  3. Click each of the three buttons and each sponsor card: they open the right pages. Click What's New: it opens the in-app page.
  4. Wait for the backer list to load: the count appears in the BACKERS eyebrow, starred backers come first.
  5. On a display shorter than the window wants: the window fills the visible height and the well scrolls.
  6. Switch theme with the window open: it re-themes in place.

🛠️ Developer Checklist

kud added 2 commits September 10, 2026 17:48
- Observe appearance changes to apply styling dynamically when switching themes
- macOS 26: use container-based design matching sponsor cards
- Pre-26 systems: frosted glass with dark scrim for dark themes only
- New iTermAboutCreditsWellView class to manage credits background
- Shared helpers (iTermAboutContainerCornerRadius, iTermAboutContainerFillColor) for consistent styling
- Reorganize into single centered column with app icon, title, version, and action buttons
- Add action buttons (Home, Report Bug, Credits) with responder chain routing
- Display sponsor cards in a row and backers in a rounded well (renamed from credits)
- Increase window height from 413 to 600px to accommodate new layout
- Add iTermAboutBakedBackgroundColorOfImage() helper to extract colors from sponsor images
- Refactor typography with explicit font sizes and spacing constants aligned to 8pt scale
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.

1 participant