[andrew-polk]

Problem

The new (React) Collection Settings dialog shows only a placeholder on its Front & Back Matter page. Choosing a front/back matter style, setting up the QR code on the "Made with Bloom" badge, and entering the place names that front matter shows can all still be done only in the old WinForms dialog.

Fix

The page now has real controls, laid out as in the card's mockup. Everything it shows comes from the dialog's own endpoints and values; it uses nothing from the old dialog.

• Style: a list of the front/back matter packs, with the chosen pack's description beneath it. GET collection/settings carries the packs and says whether the branding chose one (the list is then disabled). Opening a collection now replaces a saved project-specific pack that no branding chooses, as happens when the subscription that chose it expires, so books and both dialogs agree on the pack. In a Team Collection only an administrator makes that change, because it reaches the whole team.
• QR Codes: Show QR Codes and Caption, plus a live preview of the badge that follows the values as they will be saved. C# builds the preview with the code that builds books' badges (GET collection/qrBadge, with its QR image from GET collection/qrCode), and the dialog styles it with bloom-badge.less, the badge CSS books use, moved out of branding-base.less.
• Places: Country, Province and District, under a heading and an explanation that Config-R draws from the group's label and description (new in Config-R 1.0.0-alpha.33, feat: show a ConfigrGroup's description under its heading sillsdev/config-r#32).

The values were already in the save model. The caption box keeps the old dialog's behaviour of opening with the default wording filled in, and FrontBackMatterValues.QrcodeCaption says why C# stores the caption only if it changed. Page Numbering Style goes with the Languages page (BL-16739).

Screenshots

The page, with the chosen pack's description and the live badge preview:

Places, below it:

Risk Evaluation

Low to medium. Four shared paths changed:

• CollectionSettings.CheckAndFixDependencies, which runs on every collection open. Next to its existing replacement of an uninstalled pack, it now replaces a saved project-specific pack that no branding chooses, and saves. That changes books' front matter in a collection whose project subscription has lapsed. It is limited to Bloom's own project-specific packs that Settings doesn't offer, so custom-installed packs (including a project's own copy of its pack) are untouched, and an expired subscription's bookshelf is kept in the file. It is skipped on the command line, so the harvester keeps a book's pack, and for Team Collection members who are not administrators. (The older uninstalled-pack replacement does not have that check; BL-17046 tracks it.)
• BookStorage.UpdateQrCode, which every book's badge goes through. The per-badge code moved into UpdateBadge so the preview can use it too, and the QR bitmap into MakeLanguageQrCodeBitmap. What a book gets is unchanged: the same links, the same lang-qr-code.png, the same keep-if-present rule.
• The badge CSS moved verbatim from branding-base.less into bloom-badge.less, which branding-base.less imports at the same spot; the compiled CSS is identical. This is the first time the React UI bundles a stylesheet from src/content; the rules apply only inside .bloom-branding-wrapper.
• The old dialog's settings/xmatter reply is now built from the same pack helper as the new GET, and keeps its old shape.

Ecosystem Impact

• Published output: no change; books get the same badge, CSS and QR file as before.
• Older Blooms: no change to the settings file format.
• Localization: three new strings (Style, Places, and the Places explanation), all translate="no" while the dialog is alpha-only. The other labels reuse existing ids.
• Dependencies: @sillsdev/config-r 1.0.0-alpha.30 → alpha.33. That brings a group's description (Bl 253 localize tool tips #32), two sub-page fixes (BL-16739: staying on a sub-page when the client re-renders, and leaving the first page's sub-page when a search starts), and Config-R's own dev-tooling upgrades.

Automated Tests

• Front end (CollectionSettingsDialog.test.tsx): the Front & Back Matter page offers the packs and describes the chosen one, is disabled when the branding chooses the pack, asks C# for the badge with the QR setting, caption and badge language as they will be saved (including the sign language, and an untouched spaces-only caption), and shows the HTML C# returns.
• C#, badge (BookStorageTests): the preview badge is the one books get, with the QR code, bold language name and address, or the plain badge with QR codes off, and has no link.
• C#, opening a collection (CollectionSettingsTests): a project-specific pack no branding chooses is replaced and saved; it is kept for a Team Collection member who may not change settings, and when the user installed their own copy; an offered pack is kept; an expired subscription's bookshelf stays in the file.
• E2E: the new collection-settings-front-back-matter.spec.ts, described below.

Test of the change: the CollectionSettingsDialog.test.tsx, BookStorageTests and CollectionSettingsTests tests above, and collection-settings-front-back-matter.spec.ts.

E2E Coverage

New: collection-settings-front-back-matter.spec.ts.

• Choose a style, write a caption, enter a country, Restart: checks that the preview follows the caption, that the values are in the saved .bloomCollection, and that the reopened dialog shows them.
• A branding that picks the pack (via e2e/setBranding): the list shows only that pack, and it is disabled.

Not covered end to end: turning QR codes off, the sign-language badge, and replacing a project-specific pack on open, which the unit tests cover.

Live checks (in a running Bloom):

• The badge preview lines up with the Caption row, follows a typed caption with the language in bold, shows the default for an empty caption, and loads its QR image (f30c392).
• A real book's badge, rebuilt on selection, has the QR code, caption and address, and black caption text; with QR codes off it is the plain badge with no link (f30c392).
• Opening a collection with an expired subscription, a bookshelf and a project-specific pack (Kyrgyzstan2020) replaces the pack with Factory and keeps bookshelf: in the saved file (f30c392).
• Opening a collection whose pack is a project-specific one the user installed their own copy of (StoryProducer, in %LOCALAPPDATA%\SIL\Bloom\XMatter) keeps it, and the dialog's GET reports it as the pack (f30c392).
• Places shows the heading and explanation Config-R draws from the group, in the same style as the rows' descriptions (f30c392).
• In a throwaway folder Team Collection, a member's open changes the team's pack when the saved pack is not installed. That is master's existing behavior, unchanged by this PR, and is now BL-17046 (f30c392).

Notion Test Suite

None.

Preflight report: https://bloombooks.github.io/dev-process-artifacts/deciders/bloomdesktop-bl-16733-xmatter-settings.html

Ref: https://issues.bloomlibrary.org/youtrack/issue/BL-16733

🤖 Generated with Claude Code

---

This change is 

---

Devin review

Devin review

[andrew-polk]

@andrew-polk reviewed 16 files and all commit messages, and resolved 3 discussions.
Reviewable status: 0 of 16 files reviewed, all discussions resolved.

[andrew-polk]

[Claude Opus 5.5] Consulted Devin on 2026-10-26 19:20 UTC up to commit 76d166e. Its findings are on the PR as resolved threads, each with its outcome.

[greptile-apps]

[Medium impact] The PR appears safe to merge; no actionable defects were found.

Summary

Adds the Front & Back Matter page to React Collection Settings.

• The Front & Back Matter page now edits styles, places, and QR badge settings.
• The badge preview follows the settings that the books will use.
• Opening a collection replaces a project pack that is no longer offered.

No actionable defects were found. Tests and live UI checks were not run in this review. No previous review threads were supplied, and GitHub access was unavailable.

_{Reviews (2) · Last reviewed commit: "Collection Settings in React: Front & Ba..." · Reviewed by Greptile}

[andrew-polk]

@andrew-polk reviewed 21 files and all commit messages, and resolved 3 discussions.
Reviewable status: 0 of 24 files reviewed, all discussions resolved.

[StephenMcConnel]

@StephenMcConnel reviewed 24 files and all commit messages, and made 2 comments.
Reviewable status: all files reviewed, 2 unresolved discussions (waiting on andrew-polk).

---

src/BloomBrowserUI/collection/settingsPages/FrontBackMatterPage.tsx line 149 at r8 (raw file):

                <ConfigrInput
                    label={captionLabel}
                    path="frontBackMatter.qrcodeCaption"

Earlier and just below a few lines, frontBackMatter is treated as though it could be null. Shouldn't this be consistent throughout?

---

src/BloomBrowserUI/collection/settingsPages/FrontBackMatterPage.tsx line 171 at r8 (raw file):

                <ConfigrInput
                    label={countryLabel}
                    path="frontBackMatter.country"

Could frontBackMatter be null here (and in the next two inputs)?

[andrew-polk]

@andrew-polk+AI made 2 comments.
Reviewable status: 23 of 24 files reviewed, 2 unresolved discussions (waiting on StephenMcConnel).

---

src/BloomBrowserUI/collection/settingsPages/FrontBackMatterPage.tsx line 149 at r8 (raw file):

Previously, StephenMcConnel (Steve McConnel) wrote…

Earlier and just below a few lines, frontBackMatter is treated as though it could be null. Shouldn't this be consistent throughout?

[Claude Opus 5.5 from Andrew Polk's machine during reviewable-replies] Good question; two different things are both called frontBackMatter here, and the code didn't say so.

path="frontBackMatter.qrcodeCaption" is only a string: it tells Config-R where in its own values to read and write the field. Those are loadedSettings.values, and the dialog mounts the pane only once they are loaded (CollectionSettingsDialog.tsx, {loadedSettings && !notAllowedMessage && <ConfigrPane ...>}), so the path always resolves.

The ?. uses are on the hook's local frontBackMatter, from props.values. The page is a hook, which runs on every render of the dialog, including before the GET answers and after it closes, when props.values is undefined. While the pane is showing, it is always defined.

So nothing changes in behavior, but I added a comment above const frontBackMatter saying this (now in f30c392), so the next reader doesn't have to ask.

---

src/BloomBrowserUI/collection/settingsPages/FrontBackMatterPage.tsx line 171 at r8 (raw file):

Previously, StephenMcConnel (Steve McConnel) wrote…

Could frontBackMatter be null here (and in the next two inputs)?

[Claude Opus 5.5 from Andrew Polk's machine during reviewable-replies] No: like the caption, these paths are strings Config-R resolves against its own values, which always contain frontBackMatter once the pane is showing. See the other thread for the details, and the new comment above const frontBackMatter (f30c392).

[StephenMcConnel]

@StephenMcConnel reviewed 1 file and all commit messages, and resolved 2 discussions.
Reviewable status: complete! all files reviewed, all discussions resolved (waiting on andrew-polk).