Skip to content

fix(desktop): make the About update row act on its state and align its support buttons - #4857

Draft
Astro-Han wants to merge 2 commits into
mainfrom
fix/about-page-update-action-and-layout
Draft

fix(desktop): make the About update row act on its state and align its support buttons#4857
Astro-Han wants to merge 2 commits into
mainfrom
fix/about-page-update-action-and-layout

Conversation

@Astro-Han

@Astro-Han Astro-Han commented Sep 5, 2026

Copy link
Copy Markdown
Contributor

Summary

Three things were wrong with 设置 → 关于 after #4571:

  1. The update button did nothing on a nightly. checkForUpdatesNow returns the current status untouched while an update is downloading, verifying, downloaded or installing (app-update-service.ts), but the page kept rendering an enabled 检查更新 through all of those. Nightly auto-downloads, so its steady state is downloaded — which means the button was a no-op every time a nightly user pressed it. The page also hand-swapped the button label to 检查中… instead of using Astryx's isLoading.
  2. The three support controls did not share an edge. 复制 was a ghost button followed by the shortcut keycaps, 报告问题 was a bare Link, 键盘快捷键 was a ghost button — three faces, three right edges (measured at 1108 / 1196 / 1184 px on a 1280-wide story).
  3. The page was mostly empty. A text row, three support rows and three bullets ended two-thirds of the way down the pane, and nothing on it identified the product beyond a Heading reading "Maka".

This PR:

  • Moves update status into its own labeled group, 软件更新, as one row whose control follows the state. aboutUpdateRow (pure, unit-tested) maps the updater state to a label, a next-step description, and one of check / checking / install / retry / busy. install (重启并更新) and retry go through the same handshake the sidebar footer uses — active-task confirmation, failure toasts, the in-flight latch — because that handshake now lives once in openAppUpdate (app-shell-app-update.ts, a plain function with a module-level install latch, so the sidebar and About share one); the shell's 50-line copy of it is gone. busy states show an inline spinner instead of a button the service would ignore; checking is the check button with isLoading. The idle / up-to-date row says when Maka checks on its own (launch, window focus, every 4 hours), so nobody has to press the button to be current.
  • Makes every support row end in the same ghost sm button. The issue link is that same Button with an href; the keycaps sit before the copy button rather than after it. All three faces now end at the same x.
  • Leads with the wordmark and ends with the project. The lead uses MakaWordmark — the asset the onboarding hero and the dock icon are traced from — beside the channel token, in brand colour like the two heroes. A trailing 开源 group names Apache Maka (incubating), the license, and links to the source, release notes and license text. Nothing on the page is styled outside Astryx.
  • Crops the wordmark's viewBox to its ink. The trace sits on a 460×120 canvas with 27 units of bearing on the left and 21 below, which a left-aligned mark showed as a 7.5px indent off the column edge. The viewBox is now the ink's box (27 0 385 99), and the two centered consumers — onboarding hero, empty-chat hero — take widths of 94 and 134 so their ink renders at exactly the size it did (measured 93.7→93.9 and 133.8→133.9 px); they gain only true centering.

Copy: the update strings drop their trailing punctuation to read as row labels, updateDownloaded no longer points at the sidebar, updateCheckFailed / updateCheckFailedDetail / copying are replaced by updateFailed[operation] and the button's isLoading. All three catalogs updated.

Before (main) vs. after, nightly with a downloaded update, same viewport:

Before and after, nightly

Before and after, nightly, dark

Dev checkout, where there is no update group:

Before and after, dev

Before and after, dev, dark

The new failed-download story, which has no main counterpart:

After, update failed

Verification

  • npm run format, npm run lint at the root: clean.
  • apps/desktop: tsc -p tsconfig.renderer.json and tsconfig.storybook.json report only the three pre-existing Astryx prop errors in packages/ui; node --test dist/main/__tests__/about-update-status.test.js dist/main/__tests__/about-settings-page.test.js dist/main/__tests__/app-update-install.test.js (12 pass); npx playwright test --config e2e/playwright.config.ts e2e/about-page.spec.ts (1 passed).
  • Storybook product-settings-pages--about, --about-nightly, --about-release, --about-update-failed, light and dark, 1280 wide: the three support controls measure the same right edge.

AI use

Select exactly one:

  • No generative tool made a substantive contribution
  • Generative tooling made a substantive contribution

Tool(s) and scope: Claude Code drafted the page, hook, tests, stories and this description under review.

Checklist

  • Tests cover the change and fail without it
  • Lint, format, typecheck and the affected suites pass locally

Does this PR entail a change in behavior?

  • Yes — described under Summary above
  • No

…s support buttons

The About page rendered an enabled 检查更新 through every updater state, but
the service returns the current status untouched while an update is
downloading, verifying, downloaded or installing — so on a nightly, whose
steady state is downloaded, the button did nothing when pressed. The row now
carries the one control its state can honour (check / restart / retry, or an
inline spinner while the updater works), and restart and retry go through the
sidebar footer's own handshake, which now lives once in useAppUpdateReminder
instead of being spelled out in app-shell.

The three support rows end in the same ghost button so their faces share one
right edge; the keycaps sit before the copy button. The lead is the wordmark
in brand colour, and a trailing 开源 group names the ASF project and links to
source, release notes and license, so the page no longer ends two-thirds down
the pane.

The wordmark's viewBox is cropped to its ink: the trace carries 27 units of
bearing on the left and 21 below, which a left-aligned mark showed as a 7.5px
indent. The two centered heroes take compensating widths so their ink renders
at the size it did.

Generated-by: Claude Code
@github-actions github-actions Bot added the effort/L Under 1000 readable lines label Sep 5, 2026
The #4109 gate rejects a new hook in AppShellContent's render body, and
useAppUpdateReminder held no React state anyway. It is now openAppUpdate, a
plain function the shell and the About page both call with their toast and
locale; the install latch is module-level, so the sidebar and the About page
share one instead of each holding their own.

Generated-by: Claude Code
@Astro-Han
Astro-Han force-pushed the fix/about-page-update-action-and-layout branch from 0f0b32e to 99b276c Compare September 5, 2026 16:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

effort/L Under 1000 readable lines

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant