Add semi-transparent background to metadata overlay text

[timcogan]

Summary by CodeRabbit

• Style
  • Improved metadata overlay readability with a semi-transparent dark background behind metadata text.
  • Applied consistent styling across metadata keys/values, empty-state messaging, and overlay action labels.
  • Preserved existing interaction behavior, including enabled/hover colors and cursor handling.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: fa548d80-be3c-491a-a972-720eaa195220

📥 Commits

Reviewing files that changed from the base of the PR and between 9c22286 and 5c63b95.

📒 Files selected for processing (1)

• src/app/metadata.rs

🚧 Files skipped from review as they are similar to previous changes (1)

• src/app/metadata.rs

---

📝 Walkthrough

Walkthrough

Metadata overlay text now uses a shared styled-text helper with a half-transparent black background. Field labels, values, empty-state messaging, and overlay actions use the helper, while action rendering switches to galley painting. A unit test verifies the background styling.

Changes

Metadata Overlay Styling

Layer / File(s)	Summary
Shared overlay text styling src/app/metadata.rs	Adds the overlay background constant and metadata_overlay_text helper, with a test verifying the expected background color.
Overlay rendering integration src/app/metadata.rs	Applies styled rich text to metadata rows and empty-state text, and paints action text using the computed galley.

Estimated code review effort: 2 (Simple) | ~10 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	No pull request description was provided, so the required template sections are missing.	Add the Summary, Testing, Screenshots, and Checklist sections, and briefly describe what changed and how it was tested.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely describes the main UI change in this PR.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/metadata-overlay-text-background

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

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

[coderabbitai]

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

src/app/metadata.rs (1)

235-265: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick win

Hover and disabled text colors will not be applied.

RichText::append_to resolves the text color using ui.style().visuals.text_color() and bakes it into the LayoutJob. Because the glyphs in the resulting Galley possess a concrete color, the fallback color passed to ui.painter().galley(...) will be ignored. Consequently, the hover and disabled visual states will not render.

To fix this, clone the initial LayoutJob to calculate dimensions, then mutate the text section's format color before requesting the final galley.

🐛 Proposed fix to apply the correct interaction color

     fn metadata_overlay_action(ui: &mut egui::Ui, text: &str, enabled: bool) -> egui::Response {
         let font_id = egui::TextStyle::Body.resolve(ui.style());
         let mut layout_job = egui::text::LayoutJob::default();
         Self::metadata_overlay_text(text).font(font_id).append_to(
             &mut layout_job,
             ui.style(),
             egui::FontSelection::Default,
             egui::Align::BOTTOM,
         );
-        let galley = ui.painter().layout_job(layout_job);
+        let galley = ui.painter().layout_job(layout_job.clone());
         let sense = if enabled {
             egui::Sense::click()
         } else {
             egui::Sense::hover()
         };
         let (rect, response) = ui.allocate_exact_size(galley.size(), sense);
         let response = if enabled {
             response.on_hover_cursor(egui::CursorIcon::PointingHand)
         } else {
             response
         };
         let color = if enabled && response.hovered() {
             egui::Color32::WHITE
         } else if enabled {
             ui.visuals().weak_text_color()
         } else {
             ui.visuals().weak_text_color().gamma_multiply(0.65)
         };
+        layout_job.sections[0].format.color = color;
+        let galley = ui.painter().layout_job(layout_job);
         ui.painter().galley(rect.left_top(), galley, color);
         response
     }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/metadata.rs` around lines 235 - 265, Update metadata_overlay_action
so the layout job used for size allocation is cloned, then set the text
section’s format color on the final job to the computed interaction color before
creating the galley. Ensure the hover, enabled, and disabled colors selected by
the existing color logic are embedded in the galley rather than relying on the
painter’s fallback color.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Outside diff comments:
In `@src/app/metadata.rs`:
- Around line 235-265: Update metadata_overlay_action so the layout job used for
size allocation is cloned, then set the text section’s format color on the final
job to the computed interaction color before creating the galley. Ensure the
hover, enabled, and disabled colors selected by the existing color logic are
embedded in the galley rather than relying on the painter’s fallback color.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Run ID: e70e3caf-c206-4f40-bbda-19937df5664e

📥 Commits

Reviewing files that changed from the base of the PR and between 1500d37 and 9c22286.

📒 Files selected for processing (1)

• src/app/metadata.rs