cmux-next sidebar: account chip and Search on one line above the bottom margin; profile picture in the avatar

Merged
TE
16d ago
+213-16

This fixes two things in Leo's sidebar-footer screenshot:

  • The account row and the Search button sat too high above the window's bottom edge.
  • The account avatar showed the "L" letter tile instead of the profile picture.

Alignment

The footer section stacked its own 4 pt bottom padding on top of the 8 pt bottom margin from #22663. The Search button is 28 pt tall and the compact account row is 24 pt, so Search also stuck out past the row. As a result the line ended 2 pt (compact, expanded) or 4 pt (comfortable) short of the 8 pt margin. In the test harness the centers of Search and the avatar already matched on base, so the misalignment I could measure is the bottom margin, not the centers; the test pins both.

The fix is in SidebarFooterBand.footerBottomPadding(rowHeight:) and SidebarView+Sections.updateBands. The footer's bottom padding is now exactly how far Search sticks out past the row (2 pt compact, 0 pt comfortable). The account chip, its avatar circle and Search now share one center line, and whichever control is taller ends exactly SidebarStyle.bottomInset (8 pt) above the window's bottom edge. When the Search button is hidden, the padding is 0.

Profile picture

I found no earlier "avatar into a circle" PR or branch to land. The circle crop has been on main since #17601. SidebarAvatarView already clips imageData round, so the "L" means the picture never loaded. AccountAvatarImages (SidebarAccount.swift) dropped it in two ways, and this PR fixes both:

  • A Stack Auth uploaded picture is a data:image/...;base64, URL, and the loader only fetched https URLs. It now decodes these in place, with a 2 MB cap and a check that the bytes are a real image.
  • One failed https fetch kept the letter for the rest of the app's life. It now retries up to 4 times with the repo's Backoff (5 s, 25 s, 2 min). Only a 200 response whose body decodes as an image is accepted.

Tests

  • SidebarFooterAlignmentTests checks every density at widths of 240 and 120 pt: Search, the chip and the avatar share one center (±0.25 pt), the name is centered on the avatar, and the line ends at the 8 pt margin. At e18611cb, the commit that adds only the test, it fails on the fleet (step ec2d44d8, --red): all 6 cases fail the margin check ("the footer line ends at 590.0, the margin at 592.0" compact/expanded, 588.0 comfortable) and the center checks pass. With the fix, it runs in PR CI. To reproduce on the fleet: cmux-ci run --class light --script scripts/ci/run-swift-testing-suites.sh --arg Packages/macOS/CmuxNext --ref <sha> --key <key> [--red].
  • AccountAvatarImagesTests covers four cases: an inline picture round-trips, other URLs are not treated as inline, a payload that isn't a picture yields nothing, and the signed-in account's footer avatar draws the loaded picture with "L" kept only as the fallback.

Gallery

scripts/cmux-next/media/tours/sidebar-footer.json tours the footer at compact, comfortable and expanded. The media-tour label is set, so the before/after stills appear in the cmux-pr-status comment.

Observed / Not run

  • I did not build or launch anything locally. The checks above come from CI and fleet runs.
  • I don't know which of the two failures caused Leo's account to show "L" (an inline data URL, or a failed https fetch). Both are fixed. If "L" still shows after this lands, his account has no picture URL at all.
  • With the Search button visible, an empty footer band keeps base's layout: Search is centered in the 32 pt footer and ends 2 pt above the margin.
  • #22845 (palette-audit-43, account menu) touches the same files. It merges cleanly with this PR, and the alignment test passes with either the chip or the avatar-only control.

Changelog

Fixed: The sidebar's account row and Search button sit on one line, 8 pt above the window's bottom edge, and the account avatar shows the profile picture.

Agent session: cosmic-gray


View with [code]smith Autofix with [code]smith
Need help on this PR? Tag @codesmith-bot with what you need.


Summary by cubic

Fixes the cmux-next sidebar footer: the account chip, its avatar, and the Search button now share one line whose taller control ends 8 pt above the window's bottom edge. The footer previously stacked its own padding on top of the bottom margin and the 28 pt Search button overhung the 24 pt account row, so the row sat too high and Search floated above the avatar's center.

The footer avatar now draws the signed-in profile picture, including Stack Auth's data:image base64 URLs, which the HTTPS-only loader dropped. A failed fetch is retried after 5 s, 30 s, and 2 min instead of keeping the initial letter for the app's lifetime.

Bug Fixes

  • Pins the footer line's center and bottom margin across both densities and the 240/120 pt widths.
  • Decodes inline profile pictures in place and retries failed HTTPS fetches.