fix(web-ui): modernize UI

[ReenigneArcher]

Description

This PR overhauls the UI appearance, with more reliance on the sunshine.css for standardization. Font-awesome has been replaced by lucide-vue-next.

There are a lot of UI changes in this PR, feedback would definitely be appreciated.

Completed:

• use regex to highlight different log levels in different colors
• add next/prev buttons to logs to cycle to next/prev warning/error messages
• case insensitive log search
• add config/option search
• new themes
• fine tuning
• improve apps page, show app poster and maybe more information on the main page
  • depends on feat(api): add application image endpoint #4627 to complete
• add featured third-party applications (Awesome Sunshine)

LIKELY FOR A LATER PR: #4582

• show currently streaming application on home page, and optionally:
  • show in system tray
  • have ability to force close from now playing card
  • have ability to unpair current client from now playing card

Screenshot

new themes dropdown:

moonlight theme navbar:

pin page:

application page:

new featured apps page:

config page:

troubleshooting page:

Issues Fixed or Closed

Roadmap Issues

• Closes Sunshine: Refactor config page (add search and sections) roadmap#26
• Closes Sunshine: show featured addons/application in UI roadmap#39

Type of Change

• feat: New feature (non-breaking change which adds functionality)
• fix: Bug fix (non-breaking change which fixes an issue)
• docs: Documentation only changes
• style: Changes that do not affect the meaning of the code (white-space, formatting, missing semicolons, etc.)
• refactor: Code change that neither fixes a bug nor adds a feature
• perf: Code change that improves performance
• test: Adding missing tests or correcting existing tests
• build: Changes that affect the build system or external dependencies
• ci: Changes to CI configuration files and scripts
• chore: Other changes that don't modify src or test files
• revert: Reverts a previous commit
• BREAKING CHANGE: Introduces a breaking change (can be combined with any type above)

Checklist

• Code follows the style guidelines of this project
• Code has been self-reviewed
• Code has been commented, particularly in hard-to-understand areas
• Code docstring/documentation-blocks for new or existing methods/components have been added or updated
• Unit tests have been added or updated for any new or modified functionality

AI Usage

• None: No AI tools were used in creating this PR
• Light: AI provided minor assistance (formatting, simple suggestions)
• Moderate: AI helped with code generation or debugging specific parts
• Heavy: AI generated most or all of the code changes

[codecov]

Bundle Report

Changes will decrease total bundle size by 240.36kB (-23.77%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
sunshine-esm	770.71kB	-240.36kB (-23.77%) ⬇️

Affected Assets, Files, and Routes:

view changes for bundle: sunshine-esm

Assets Changed:

Asset Name	Size Change	Total Size	Change (%)
assets/_plugin-*.js	3.83kB	349.81kB	1.11%
assets/_plugin-*.css	-75.92kB	231.15kB	-24.72%
assets/config-*.js	6.27kB	67.09kB	10.3% ⚠️
assets/index-*.js	1.22kB	45.41kB	2.76%
assets/featured-*.js (New)	28.71kB	28.71kB	100.0% 🚀
assets/Navbar-*.js	12.93kB	18.0kB	254.88% ⚠️
assets/troubleshooting-*.js	4.91kB	8.59kB	133.28% ⚠️
assets/apps-*.js	2.4kB	6.42kB	59.59% ⚠️
assets/SimpleIcon-*.js (New)	3.7kB	3.7kB	100.0% 🚀
assets/Checkbox-*.js	5 bytes	2.11kB	0.24%
assets/ResourceCard-*.js	146 bytes	1.87kB	8.48% ⚠️
assets/pin-*.js	778 bytes	1.64kB	90.47% ⚠️
assets/triangle-*.js (New)	1.13kB	1.13kB	100.0% 🚀
assets/trash-*.js (New)	843 bytes	843 bytes	100.0% 🚀
assets/welcome-*.js	100 bytes	761 bytes	15.13% ⚠️
assets/password-*.js	46 bytes	684 bytes	7.21% ⚠️
assets/file-*.js (New)	577 bytes	577 bytes	100.0% 🚀
assets/save-*.js (New)	519 bytes	519 bytes	100.0% 🚀
assets/monitor-*.js (New)	451 bytes	451 bytes	100.0% 🚀
assets/circle-*.js (New)	442 bytes	442 bytes	100.0% 🚀
assets/search-*.js (New)	361 bytes	361 bytes	100.0% 🚀
assets/Navbar-*.css	-345 bytes	332 bytes	-50.96%
assets/fa-*.woff2 (Deleted)	-113.26kB	0 bytes	-100.0% 🗑️
assets/fa-*.woff2 (Deleted)	-101.18kB	0 bytes	-100.0% 🗑️
assets/fa-*.woff2 (Deleted)	-19.0kB	0 bytes	-100.0% 🗑️

Files in assets/_plugin-*.js:

• ./src_assets/common/assets/web/public/assets/locale/en.json → Total Size: 37.27kB

Files in assets/config-*.js:

• ./src_assets/common/assets/web/config.html → Total Size: 0 bytes

Files in assets/index-*.js:

• ./src_assets/common/assets/web/index.html → Total Size: 0 bytes

Files in assets/featured-*.js:

• ./src_assets/common/assets/web/featured.html → Total Size: 0 bytes

Files in assets/Navbar-*.js:

• ./src_assets/common/assets/web/ThemeToggle.vue → Total Size: 8.35kB

• ./src_assets/common/assets/web/theme.js → Total Size: 3.6kB

• ./src_assets/common/assets/web/Navbar.vue → Total Size: 5.36kB

Files in assets/troubleshooting-*.js:

• ./src_assets/common/assets/web/troubleshooting.html → Total Size: 0 bytes

Files in assets/apps-*.js:

• ./src_assets/common/assets/web/apps.html → Total Size: 0 bytes

Files in assets/SimpleIcon-*.js:

• ./src_assets/common/assets/web/SimpleIcon.vue → Total Size: 915 bytes

Files in assets/ResourceCard-*.js:

• ./src_assets/common/assets/web/ResourceCard.vue → Total Size: 3.6kB

Files in assets/pin-*.js:

• ./src_assets/common/assets/web/pin.html → Total Size: 0 bytes

Files in assets/password-*.js:

• ./src_assets/common/assets/web/password.html → Total Size: 0 bytes

[codecov]

Codecov Report

❌ Patch coverage is 0% with 15 lines in your changes missing coverage. Please review.
✅ Project coverage is 15.45%. Comparing base (76b3a85) to head (4bad014).
⚠️ Report is 1 commits behind head on master.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
src/confighttp.cpp	0.00%	9 Missing and 6 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #4631      +/-   ##
==========================================
- Coverage   15.50%   15.45%   -0.06%     
==========================================
  Files          94       94              
  Lines       19235    19248      +13     
  Branches     8898     8907       +9     
==========================================
- Hits         2982     2974       -8     
+ Misses      14375    12872    -1503     
- Partials     1878     3402    +1524     

Flag	Coverage Δ
Archlinux	11.60% <0.00%> (-0.02%)	⬇️
FreeBSD-14.3-aarch64	?
FreeBSD-14.3-amd64	13.74% <0.00%> (-0.04%)	⬇️
Homebrew-ubuntu-22.04	13.91% <0.00%> (-0.02%)	⬇️
Linux-AppImage	11.93% <0.00%> (-0.02%)	⬇️
Windows-AMD64	13.49% <0.00%> (-0.02%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files with missing lines	Coverage Δ
src/confighttp.cpp	0.00% <0.00%> (ø)

... and 26 files with indirect coverage changes

[sonarqubecloud]

Quality Gate failed

Failed conditions
6 New issues
C Reliability Rating on New Code (required ≥ A)
1 New Bugs (required ≤ 0)
5 New Code Smells (required ≤ 0)

See analysis details on SonarQube Cloud

Catch issues before they fail your Quality Gate with our IDE extension SonarQube for IDE