feat: Tweak Lyra popup UI by bramschulting · Pull Request #768 · crosspoint-reader/crosspoint-reader

bramschulting · 2026-02-08T11:59:28Z

Summary

I want to preface this PR by stating that the proposed changes are subjective to people's opinions. The following is just my suggestion, but I'm of course open to changes.

The popups in the currently implemented version of the Lyra theme feel a bit out of place. This PR suggests an updated version which looks a bit more polished and in line with the rest of the theme.

I've also taken the liberty to remove the ellipsis behind the text of the popups, as they made the popup feel a bit off balance (example below).

With the applied changes, popups will look like this.

The vertical position is (more or less) aligned to be in line with the sleep button. I'm aware the popup is used for other purposes aside from the sleep message, but this still felt like a good place. It's also a place where your eyes naturally 'rest'.

The popup has a small 2px white outline, neatly separating it from whatever is behind it.

Alternatives considered and rationale behind proposal

Initially I started out worked off the Figma design for the Lyra theme, which moves the popups to the bottom of the screen. To me, this results in popups that are much too easy to miss:

After this, I tried moving the popup back up (to the position of the sleep button), but to me it still kinda disappeared into the text of the book:

Inverting the colors of the popup made things stand out the perfect amount in my opinion. The white outline separates the popup from what is behind it.

This looked much better to me. The only thing that felt a bit off to me, was the balance due to the ellipsis at the end of the popup text. Also, "Entering Sleep..." felt a bit.. engineer-y. I felt something a bit more 'conversational' makes at all feel a bit more human-centric. But I'm no copywriter, and English is not even my native language. So feel free to chip in!

After tweaking that, I ended up with the final result:

(Same picture as the first one shown in this PR)

Additional Context

Figma design: https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2011-19296&t=Ppj6B2MrFRfUo9YX-1

AI Usage

While CrossPoint doesn't have restrictions on AI tools in contributing, please be transparent about their usage as it
helps set the right context for reviewers.

Did you use AI tools to help write this code? NO

This commit implements some tweaks to the popup UI of the Lyra theme, based on the Figma design. The Figma design was not implemented exactly, as I felt it resulted in popups being too easy to miss. After exploring some options, I feels this strikes a good balance between being functional and looking polished and fitting with the rest of the theme.

In most instances, the trailing ellipsis ("...") have been removed, as they resulted in the popup feeling off balance. Additionally, the string for used to indicate the activation of sleep mode has been rewritten to something a little more 'conversational' and less technical.

bramschulting · 2026-02-08T12:33:29Z

I realised I missed creating a fillPopupProgress implementation to work with the suggested popup. Once we've landed on what style we want to use, I will update my PR to make sure this works as intended.

The BaseTheme implementation is invisible with the updated LyraTheme::drawPopup.

bramschulting · 2026-02-08T18:56:26Z

I've pushed a commit that implements fillPopupProgress. It works almost the same as in the BaseTheme, where a bar is rendered in the margin of the popup.

Of course if the popup will change, this might need to change too. But having this PR merge ready before the end of the weekend worked best for me.

yagofarias · 2026-02-09T12:59:25Z

Really lovely improvement! If I may, here some visual improvements i would do:

I would bring the popup closer to the corners. Right now it doesn't seem to be aligned with anything. Decreasing the padding would make it easier to see.
Loved the black version! For the Outline one i would increase the border size to make it more obvious when above book file similar to your case. Also you might consider adding outline white on black version to make it really "pop" from the content bellow.
On popup with progress i would increase the padding to make it consistent with top alignment

Despite from that it's a much better improvement from current version! Congrats

bramschulting · 2026-02-09T16:55:03Z

@yagofarias

I would bring the popup closer to the corners. Right now it doesn't seem to be aligned with anything. Decreasing the padding would make it easier to see.

Do you mean moving the entire popup to one of the corners?

Loved the black version! For the Outline one i would increase the border size to make it more obvious when above book file similar to your case. Also you might consider adding outline white on black version to make it really "pop" from the content bellow.

Yep, I like the black one best too! It already has a white outline actually.

On popup with progress i would increase the padding to make it consistent with top alignment

Yeah I think I'll leave this as a followup PR, due to how this works in code now. Basically first a 'regular' popup is rendered, and then separately the progress bar is drawn inside it. They are two separate things drawn on top of each other. So we can't say: use a bigger margin in case there is a progress bar. Not without changing the API of these method at least.

yagofarias · 2026-02-09T17:51:31Z

Do you mean moving the entire popup to one of the corners?

Yes, positioning based on the Reading Orientation set by the user

bramschulting · 2026-02-10T16:14:12Z

Yes, positioning based on the Reading Orientation set by the user

Ah I see. Yeah maybe in landscape mode this could be an option. To position it in the top-right maybe, a but like notifications on MacOS? In portrait I think it might look strange, because of how narrow the screen is.

What do you think @daveallie? (Also of this PR in general)

daveallie · 2026-02-16T12:08:24Z

The popup is currently positioned middle center regardless of reading orientation, and it's usually in response to a user operation, so there's no need to move it out of the way (top corner for example), I think the placement is fine. Regarding the style, I don't really mind either way tbh. @CaptainFrito has been running a lot of the theming so I'd like to lean on his opinion here.

CaptainFrito · 2026-02-16T12:50:42Z

Looks great to me, thanks @bramschulting!

daveallie · 2026-02-16T13:29:56Z

Apologies, with the merge of #728, updating strings has changed a bit, if you could update the translation files as part of resolving the conflicts that would be amazing.

…tweaks

After the i18n support was merged, these changes needed to be applied again in the new system. An extra key is added for the loading popup, where the trailing ellipsis is omitted. This is done because the existing loading key is also used in other screens, where the ellipsis should remain.

coderabbitai · 2026-02-16T20:34:50Z

📝 Walkthrough

Walkthrough

The changes add a new STR_LOADING_POPUP enum member and corresponding translations across eight supported languages. Ellipses are removed from existing loading-related strings. HomeActivity is updated to reference the new popup string, and LyraTheme gains enhanced popup rendering with progress bar functionality.

Changes

Cohort / File(s)	Summary
Enum Definition `lib/I18n/I18nKeys.h`	Added `STR_LOADING_POPUP` enum member to `StrId` after `STR_LOADING`.
Translation Files `lib/I18n/translations/czech.yaml`, `english.yaml`, `french.yaml`, `german.yaml`, `portuguese.yaml`, `spanish.yaml`, `swedish.yaml`, `russian.yaml`	Added `STR_LOADING_POPUP` translation key with localized values across all languages. Removed trailing ellipses from `STR_ENTERING_SLEEP`, `STR_INDEXING`, and `STR_LOADING` in each file.
String Reference Update `src/activities/home/HomeActivity.cpp`	Updated two popup text references from `STR_LOADING` to `STR_LOADING_POPUP` in `loadRecentCovers` method.
Popup Rendering Enhancement `src/components/themes/lyra/LyraTheme.h`, `LyraTheme.cpp`	Added public method `fillPopupProgress()` to render progress bars in popups. Enhanced `drawPopup()` with improved styling: rounded white background, black inner rectangle, refined text positioning, and outline-based border rendering.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'feat: Tweak Lyra popup UI' directly relates to the main purpose of the PR, which is to improve the visual appearance and styling of popups in the Lyra theme.
Description check	✅ Passed	The description provides comprehensive context about the popup UI changes, including rationale for design decisions, visual examples, and technical implementation details related to the changeset.
Merge Conflict Detection	✅ Passed	✅ No merge conflicts detected when merging into `master`

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

bramschulting · 2026-02-16T20:39:08Z

@daveallie No worries! The conflicts have been resolved, and I've reapplied the changes in the i18n system.

While I did change the English "Entering Sleep..." to "Going to sleep", I did not update the actual translations of other languages. I did remove the ellipsis, but the 'main' translations are unchanged. I don't speak any of these languages, and using Google Translate or something similar seems like the wrong choice in my opinion. But if preferred, I can still do that of course.

…tweaks

coderabbitai

🤖 Fix all issues with AI agents

Verify each finding against the current code and only fix it if needed.


In `@lib/I18n/translations/russian.yaml`:
- Line 8: Update the Russian translation for STR_ENTERING_SLEEP to match the new
conversational English tone ("Going to sleep") by replacing the formal/nominal
"Переход в сон" with a verb-phrase alternative such as "Засыпаю" or "Ухожу
спать" so the copy tone is consistent across languages; locate
STR_ENTERING_SLEEP in the translations file and substitute the value
accordingly.

🧹 Nitpick comments (1)

🤖 Fix all nitpicks with AI agents

Verify each finding against the current code and only fix it if needed.


In `@lib/I18n/translations/russian.yaml`:
- Line 8: Update the Russian translation for STR_ENTERING_SLEEP to match the new
conversational English tone ("Going to sleep") by replacing the formal/nominal
"Переход в сон" with a verb-phrase alternative such as "Засыпаю" or "Ухожу
спать" so the copy tone is consistent across languages; locate
STR_ENTERING_SLEEP in the translations file and substitute the value
accordingly.

lib/I18n/translations/russian.yaml (1)

8-8: Consider aligning Russian tone with the new conversational copy.
English changed to “Going to sleep,” while “Переход в сон” remains more formal/nominal. If you want tone parity, consider a verb phrase like “Засыпаю” or “Ухожу спать.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@lib/I18n/translations/russian.yaml` at line 8, Update the Russian translation
for STR_ENTERING_SLEEP to match the new conversational English tone ("Going to
sleep") by replacing the formal/nominal "Переход в сон" with a verb-phrase
alternative such as "Засыпаю" or "Ухожу спать" so the copy tone is consistent
across languages; locate STR_ENTERING_SLEEP in the translations file and
substitute the value accordingly.

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1caf40b and 80799fd.

📒 Files selected for processing (1)

lib/I18n/translations/russian.yaml

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

GitHub Check: build
GitHub Check: cppcheck

🔇 Additional comments (2)

lib/I18n/translations/russian.yaml (2)

22-22: LGTM — ellipsis removal is consistent.

28-28: LGTM — new popup key has a clear translation.

## Summary I want to preface this PR by stating that the proposed changes are subjective to people's opinions. The following is just my suggestion, but I'm of course open to changes. The popups in the currently implemented version of the Lyra theme feel a bit out of place. This PR suggests an updated version which looks a bit more polished and in line with the rest of the theme. I've also taken the liberty to remove the ellipsis behind the text of the popups, as they made the popup feel a bit off balance (example below). With the applied changes, popups will look like this. ![IMG_0012](https://github.com/user-attachments/assets/a954de12-97b8-4102-be17-a702c0fe7d1e) The vertical position is (more or less) aligned to be in line with the sleep button. I'm aware the popup is used for other purposes aside from the sleep message, but this still felt like a good place. It's also a place where your eyes naturally 'rest'. The popup has a small 2px white outline, neatly separating it from whatever is behind it. ### Alternatives considered and rationale behind proposal Initially I started out worked off the Figma design for the Lyra theme, which [moves the popups](https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2011-19296&t=Ppj6B2MrFRfUo9YX-1) to the bottom of the screen. To me, this results in popups that are much too easy to miss: ![IMG_0006](https://github.com/user-attachments/assets/b8ce3632-94a9-494e-8256-d87a6ee60cdf) After this, I tried moving the popup back up (to the position of the sleep button), but to me it still kinda disappeared into the text of the book: ![IMG_0008](https://github.com/user-attachments/assets/4b05df7c-932e-432b-9c10-130da3109050) Inverting the colors of the popup made things stand out the perfect amount in my opinion. The white outline separates the popup from what is behind it. ![IMG_0011](https://github.com/user-attachments/assets/77b1e8cc-0a57-4f4b-9abb-a9d10988d919) This looked much better to me. The only thing that felt a bit off to me, was the balance due to the ellipsis at the end of the popup text. Also, "Entering Sleep..." felt a bit.. engineer-y. I felt something a bit more 'conversational' makes at all feel a bit more human-centric. But I'm no copywriter, and English is not even my native language. So feel free to chip in! After tweaking that, I ended up with the final result: _(Same picture as the first one shown in this PR)_ ![IMG_0012](https://github.com/user-attachments/assets/a954de12-97b8-4102-be17-a702c0fe7d1e) ## Additional Context * Figma design: https://www.figma.com/design/UhxoV4DgUnfrDQgMPPTXog/Lyra-Theme?node-id=2011-19296&t=Ppj6B2MrFRfUo9YX-1 --- ### AI Usage While CrossPoint doesn't have restrictions on AI tools in contributing, please be transparent about their usage as it helps set the right context for reviewers. Did you use AI tools to help write this code? _**NO**_

bramschulting added 3 commits February 8, 2026 12:28

Fix code formatting

7fdb641

Implement LyraTheme::fillPopupProgress

7fd5e19

The BaseTheme implementation is invisible with the updated LyraTheme::drawPopup.

daveallie requested a review from CaptainFrito February 16, 2026 12:08

CaptainFrito previously approved these changes Feb 16, 2026

View reviewed changes

daveallie previously approved these changes Feb 16, 2026

View reviewed changes

bramschulting added 2 commits February 16, 2026 21:13

Merge remote-tracking branch 'upstream/master' into feature/popup-ui-…

e47cb03

…tweaks

bramschulting dismissed stale reviews from daveallie and CaptainFrito via 1caf40b February 16, 2026 20:34

coderabbitai bot previously approved these changes Feb 16, 2026

View reviewed changes

Merge remote-tracking branch 'upstream/master' into feature/popup-ui-…

80799fd

…tweaks

bramschulting dismissed coderabbitai[bot]’s stale review via 80799fd February 16, 2026 20:45

coderabbitai bot reviewed Feb 16, 2026

View reviewed changes

coderabbitai bot approved these changes Feb 16, 2026

View reviewed changes

daveallie approved these changes Feb 19, 2026

View reviewed changes

daveallie merged commit f16c0e5 into crosspoint-reader:master Feb 19, 2026
6 checks passed

daveallie mentioned this pull request Feb 19, 2026

chore(release): 1.1.0 Release Candidate #992

Merged

This was referenced Feb 19, 2026

feat: Take screenshots #759

Merged

feat: Bookmarks #781

Open

This was referenced Feb 22, 2026

feat: Set sleep cover from BMP viewer #1104

Open

feat: add Lyra graphical home theme #1150

Draft

feat: Add push progress and sleep option #1090

Open

Uh oh!

Conversation

bramschulting commented Feb 8, 2026

Summary

Alternatives considered and rationale behind proposal

Additional Context

AI Usage

Uh oh!

bramschulting commented Feb 8, 2026

Uh oh!

bramschulting commented Feb 8, 2026

Uh oh!

yagofarias commented Feb 9, 2026

Uh oh!

bramschulting commented Feb 9, 2026

Uh oh!

yagofarias commented Feb 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bramschulting commented Feb 10, 2026

Uh oh!

daveallie commented Feb 16, 2026

Uh oh!

CaptainFrito commented Feb 16, 2026

Uh oh!

daveallie commented Feb 16, 2026

Uh oh!

coderabbitai bot commented Feb 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Uh oh!

bramschulting commented Feb 16, 2026

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

yagofarias commented Feb 9, 2026 •

edited

Loading

coderabbitai bot commented Feb 16, 2026 •

edited

Loading