Skip to content

feat(web-ui): Updated Add / Edit app form to use modals + new Delete App UI flow#5166

Merged
ReenigneArcher merged 10 commits into
LizardByte:masterfrom
Noklef:add-edit-modal
May 30, 2026
Merged

feat(web-ui): Updated Add / Edit app form to use modals + new Delete App UI flow#5166
ReenigneArcher merged 10 commits into
LizardByte:masterfrom
Noklef:add-edit-modal

Conversation

@Noklef
Copy link
Copy Markdown
Contributor

@Noklef Noklef commented May 22, 2026

Description

  • Moved the Add New apps button to the new apps toolbar (left side of the screen)
  • Converted the Add / Edit apps form from the bottom of the screen to a new full-screen modal
    • Allows for nesting of modals as well, so File browser / Cover art modals appear over the Add / Edit modal
  • Added a Delete app modal now instead of browser confirm popup
  • Added delete_title and delete_confirm to the en.json translation file
  • Updated Add / Edit / Delete UI flows to not hard force refresh (now just re-populates via calling the apps endpoint)

Screenshots

image image image image image image

Issues Fixed or Closed

Roadmap Issues

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

Comment thread src_assets/common/assets/web/public/assets/css/sunshine.css Outdated
Comment thread src_assets/common/assets/web/public/assets/css/sunshine.css Outdated
Comment thread src_assets/common/assets/web/apps.html Outdated
Comment thread src_assets/common/assets/web/apps.html
@sonarqubecloud
Copy link
Copy Markdown

Comment thread src_assets/common/assets/web/apps.html Outdated
@ReenigneArcher ReenigneArcher added this to the stable release milestone May 27, 2026
Noklef added 9 commits May 30, 2026 11:04
- Wrapped new app button to stick to the left side of the toolbar
- Moved the `Add New` button to the top action bar now (doesn't make sense to keep it at the bottom
- Moved the `Cover Finder Modal` from being nested in the edit form
- Added `OpenEditModal`, `CloseEditModal` functions to control opening / closing of the modal
- Created `ShowStacked()` to allow for modals to be stacked on one-another
  - Currently, only 1 modal will be stacked max, so it's safe to just keep it as a single stack
- Moved some of the modals around so they're not nested within one another and can be created indipendently
- Remove duplicate set of index to `-1`
- Fixed key in for loop not just being the literal string 'i'
- Fixed indenting on the modal
…ser `confirm()` dialogue

- Created Delete confirmation modal
- Renamed `showDeleteForm` to `showDeleteModal`
- Implemented `loadApps()` to wrap the api calling the load apps endpoint
- Use this endpoint when editing / addding / deleting an app (instead of hard refresh)
- Added `encodeURIComponent(app['image-path'])"` onto the end of the covers API fetch to invalidate the cache (and fix a bug with covers sticking around...)
…n name that's being entered

- Cretaed `editModalTitle` function to track the typing of `editForm`'s name property
- Removed trailing spaces as well
…leted application's name

- Switched the translation delete message to the `Component` version, so we can style the `name`
- Added a bottom border to the header, and the background colour
- Removed modal header border
- Bumped down the toolbar group to 14rem
- Removed cache busting in favor of hard refresh
- Merged magnifying glass / clear text `X` icon for search on the right side
@ReenigneArcher
Copy link
Copy Markdown
Member

❌ The last analysis has failed.

See analysis details on SonarQube Cloud

This can happen if too many pushes happen too fast. If you can force push it'll probably resolve itself.

@sonarqubecloud
Copy link
Copy Markdown

@codecov
Copy link
Copy Markdown

codecov Bot commented May 30, 2026

Bundle Report

Changes will increase total bundle size by 962 bytes (0.04%) ⬆️. This is within the configured threshold ✅

Detailed changes
Bundle name Size Change
sunshine-esm 797.19kB 962 bytes (0.12%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: sunshine-esm

Assets Changed:

Asset Name Size Change Total Size Change (%)
assets/createLucideIcon-*.js 91 bytes 356.97kB 0.03%
assets/config-*.js -10 bytes 69.48kB -0.01%
assets/Navbar-*.js -5 bytes 19.61kB -0.03%
assets/apps-*.js 891 bytes 13.39kB 7.13% ⚠️
assets/SimpleIcon-*.js 10 bytes 3.69kB 0.27%
assets/ResourceCard-*.js -10 bytes 2.64kB -0.38%
assets/trash-*.js -5 bytes 1.05kB -0.48%

Files in assets/createLucideIcon-*.js:

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

Files in assets/apps-*.js:

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

@codecov
Copy link
Copy Markdown

codecov Bot commented May 30, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 17.80%. Comparing base (a682ab0) to head (cf47e34).
✅ All tests successful. No failed tests found.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##           master    #5166      +/-   ##
==========================================
- Coverage   17.81%   17.80%   -0.01%     
==========================================
  Files         111      111              
  Lines       24173    24173              
  Branches    10695    10695              
==========================================
- Hits         4307     4305       -2     
+ Misses      17248    15599    -1649     
- Partials     2618     4269    +1651     
Flag Coverage Δ
Archlinux 11.22% <ø> (ø)
FreeBSD-aarch64 ?
FreeBSD-amd64 13.35% <ø> (ø)
Homebrew-ubuntu-22.04 13.57% <ø> (ø)
Linux-AppImage 12.15% <ø> (ø)
Windows-AMD64 14.85% <ø> (ø)
Windows-ARM64 13.19% <ø> (ø)
macOS-arm64 18.86% <ø> (ø)
macOS-x86_64 18.34% <ø> (+0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.
see 28 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update a682ab0...cf47e34. Read the comment docs.

@ReenigneArcher ReenigneArcher merged commit 3d9e6d2 into LizardByte:master May 30, 2026
73 of 74 checks passed
@Noklef Noklef deleted the add-edit-modal branch May 30, 2026 13:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants