feat(ui): add icons to navigation bar

[cdrage]

feat(ui): add icons to navigation bar

What does this PR do?

Some leftover code I had from a while ago, this adds the icons to the
navbar similar to the podman desktop settings style.

We also upgrade to the newest ui svelte in order to incorporate the
"spacing changes" added for preferences.

Screenshot / video of UI

Before:

After:

What issues does this PR fix or reference?

Closes #2298

How to test this PR?

Open up bootc and see the new icons on the navbar :)

Signed-off-by: Charlie Drage charlie@charliedrage.com

[cdrage]

FYI these changes to shadow-sm is because I noticed that the classes were difference vs our "Preferences navigation".

So this was changed to better reflect how we do it elsewhere: https://github.com/podman-desktop/podman-desktop/blob/64935c23cd6ae83fceeace34d944da2279266cd1/packages/renderer/src/PreferencesNavigation.svelte#L85-L86

[coderabbitai]

📝 Walkthrough

Walkthrough

Bumps "@podman-desktop/ui-svelte" from 1.21.0 to 1.25.1 and updates the Navigation component to add FontAwesome icons for items, introduce a BootcImageIcon in the header, apply transition classes, and adjust header/layout styling.

Changes

Cohort / File(s)	Summary
Dependency Update packages/frontend/package.json	Bumps dev dependency @podman-desktop/ui-svelte from 1.21.0 to 1.25.1.
Navigation icons & header styling packages/frontend/src/Navigation.svelte	Adds FontAwesome icons (faTableCellsLarge, faCompactDisc, faBookOpen) and BootcImageIcon usage; updates nav item rendering to include icons, adds transition classes, and adjusts header layout (left border, padding/alignments, overflow and container structure).

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: adding icons to the navigation bar, which is the primary focus of this PR.
Description check	✅ Passed	The description clearly explains what the PR does, includes before/after screenshots, references the related issue (#2298), and provides testing instructions.
Linked Issues check	✅ Passed	The PR successfully implements the objective from issue #2298 by adding icons to navbar entries (Images with folder icon, Disk Images with disk icon, Examples with document icon) for improved visual consistency.
Out of Scope Changes check	✅ Passed	All changes are directly related to the stated objectives: navbar icon additions and UI Svelte upgrade for spacing changes. The dependency version bump supports the feature implementation.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

---

No actionable comments were generated in the recent review. 🎉

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

---

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 and usage tips.}

[deboer-tim]

Should use DiskImageIcon here to match the page.

[deboer-tim]

Good as-is, but wondering if we should use the extension icon? i.e. the purple seal icon we use in the main nav? Or even a purple version of this icon.