Library UI cards with logos and descriptions (PP-3116) - #202
Merged
Merged
Conversation
tdilauro
added this pull request to stack #204
September 28, 2026 01:01
This was referenced Sep 28, 2026
PoorBillyPilgrim
approved these changes
Sep 28, 2026
PoorBillyPilgrim
left a comment
PoorBillyPilgrim
left a comment
Contributor
There was a problem hiding this comment.
These look great, @tdilauro. The styling is nice and they're all appropriately accessible.
I have one comment that doesn't need to be addressed in this ticket, but I wanted to mention. As these library lists grow, we should consider virtualizing them, especially now that we're rendering more elements. The performance locally doesn't seem impacted at all -- which is why I don't think we need to address this now -- but I do think performance could be impacted at some point.
tdilauro
added a commit
that referenced
this pull request
Sep 29, 2026
## Description Adds basic library pinning, behind a new feature flag. - **Feature flag:** set the `PALACE_CPW_FEATURE_PINNING` environment variable to `true` to enable pinning. It is off by default; while off, pin controls are hidden and stored pins are ignored. The flag is documented in the README with the other feature flags. - **Pin and unpin** from a library's page (header, next to the language selector) and from each card on the multi-library home page. The item landing page has no pin controls. - **My Libraries** section above the search on the home page and the item landing page. It lists pinned libraries in pinned order and leaves out any that are no longer available. - **With pins shown:** the search heading becomes "Find another library:" and the full library list shows only while the search box holds text. Pinning or unpinning from the home page clears the search. - **Public computer warning** on the first pin, with a "Do not show this again." option and a "Reset the shared computer warning" button in My Libraries. - **Unpinning a library the user is signed in to** asks for confirmation and signs out. From the library page this runs the full sign-out flow, now shared with the Sign Out button through a new `useSignOutFlow` hook. From the home page it clears the stored credentials only. - **Accessibility:** - Pin and unpin are announced to screen readers. - When the pressed button disappears, focus moves to the library's new button, a neighboring library's button, or the heading. - The dialogs are named and described by their visible heading and message. - The search box is named by its heading. - **Shared pieces:** an `AlertDialog` component for confirmation dialogs; `LibraryCard` gains a slot for the pin button. - **Dialog fix:** dialogs and their backdrop now sit on the theme's `modal` layer, so page content no longer shows through. This applies to all dialogs. - **Translations:** new strings in French, Italian, German, and Spanish, plus pinning terms in the translation glossary. Known limitations: - VoiceOver in Safari can miss the pin and unpin announcements when focus moves at the same time. VoiceOver-specific support is deferred for now. - Unpinning a signed-in library from the home page does not call the server-side logout. > [!IMPORTANT] > This branch is stacked on PR #202. This PR must not be merged until that one lands. ## Motivation and Context Patrons should not have to find their library(ies) in the full list on every visit. Pinning keeps those libraries at the top of the library pickers on this device. The `PALACE_CPW_FEATURE_PINNING` flag allows us to test the feature without it surfacing to users before it is ready. [Jira PP-3116] ## How Has This Been Tested? - Unit tests cover: - the pin button, both dialogs, and the announcements; - the My Libraries section, including focus after pin and unpin and changes from another tab; - both library pickers, with the hidden list and the search reset; - the header pin and both sign-out paths; - the feature flag. - Checked by hand in Chrome and Safari: keyboard focus, dialog behavior, and the dialog layering. - All tests pass locally and [in CI](https://github.com/ThePalaceProject/web-patron/actions/runs/36363276245). ## Checklist: - [x] I have updated the documentation accordingly. - [x] All new and existing tests passed. ## Screenshots Initially the full "Choose a library" and we click the pin icon <img width="732" height="302" alt="Untitled 11" src="https://github.com/user-attachments/assets/c32aeeef-af3d-4a48-b597-e161c3e2de07" /> Confirm the pin <img width="844" height="645" alt="Untitled 6" src="https://github.com/user-attachments/assets/f04d04ae-8482-4974-9aaf-3ce8d7e09071" /> Now the library is pinned in "My Libraries" <img width="737" height="454" alt="Untitled 7" src="https://github.com/user-attachments/assets/3ef55ce0-dbac-4152-8c80-dbdcc79a1081" /> Find another library <img width="706" height="492" alt="Untitled 8" src="https://github.com/user-attachments/assets/62e2aff7-00d0-476a-a87f-a8b985ff988c" /> Confirm the pin and click "Do not show again" <img width="828" height="560" alt="Untitled 9" src="https://github.com/user-attachments/assets/a3ebefbb-196a-48cc-9a25-9726a08712d9" /> The second library is pinned and we have the option to reset the confirmation dialog <img width="742" height="496" alt="Untitled 10" src="https://github.com/user-attachments/assets/8677bfef-184d-478b-bcee-c436fb1147d7" />
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Known issues:
logoUrl, and no description when they have nodescription. This is true even when their authentication document has a logo or a description. We do not currently use authentication documents to generate the cards.Motivation and Context
Logos and descriptions make libraries easier to recognize and tell apart than a list of names alone. The library list already includes a logo and a description whenever the static library config or the registry provides them, but previously nothing displayed them.
[Jira PP-3116]
How Has This Been Tested?
Checklist: