Web UI migration to Vite and Vue3 and improvements to the UX

[TheElixZammuto]

TO-DO

• Add Vite Build step (You can build the html assets by simply running npx vite build after an npm install)
• Update Docs
• Test the Configuration Page
• handle the SRC_ASSETS from CMake
• Packaging (folders are now correctly places, must be tested on all combinations)

Description

This PR is a big one, but the biggest changes couldn't be split and I did the smallest while fixing the biggest:

1. Use Vite as a build system for building and bundling the assets, instead of using directly node_modules. This allows us to use npm dependencies like ES modules, and to simplify the deployment of the static assets.

2. Moved the bundling of the HTML header and content from Sunshine to Vite, using EJS. This allows us to self-host the UI without Sunshine, for testing (we can deploy the UI on GitHub pages e.g.) and for helping with tralsation tools. The shared HTML components (like the header) are now Vue Single File Components

3. Migrated Vue from version 2 to version 3, with all the breaking changes done

4. A revamped welcome page, with links to the support and legal directly in the welcome page

5. Minor fixes to the applications page: now detatched command lists behave in the same way as the do-undo commands

6. Minor styling changes to the app and PIN pages

Screenshot

Issues Fixed or Closed

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Dependency update (updates to dependencies)
• Documentation update (changes to documentation)
• Repository update (changes to repository files, e.g. .github/...)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have added or updated the in code docstring/documentation-blocks for new or existing methods/components

Branch Updates

LizardByte requires that branches be up-to-date before merging. This means that after any PR is merged, this branch
must be updated before it can be merged. You must also
Allow edits from maintainers.

• I want maintainers to keep my branch updated

[Nonary]

I'll take a look at this over the weekend, I am a full stack dev and have experience in Vue so if you need an extra pair of eyes for a code review I'm down for that.

[ReenigneArcher]

In addition to pinning dependencies, can you also ensure new lines exist at the end of files?

I haven't dug into the rest of it yet. Would be nice to incorporate #972 into this or a separate PR shortly after this one. The dev of that one hasn't been active, probably easier to recreate their work than rebase the PR now.

[ReenigneArcher]

In addition to the build comments. Here are a few related to the UI.

Can you add some padding at the bottom of the home page? If it matched the troubleshooting page, I think that would be fine.

On Applications, the "edit" button doesn't work, unless the lower portion is already expanded with the "add new" button

The "x" does not work for the cover finder. Actually, neither does selecting an image. (Clicking off of the modal does close it though)

Add Detached Command button does not work.

Save application does not work for existing applications. I added "test.log" to output, saved, and then edited again, but the field remained blank. Seems to work for new applications.

Configuration seems a little wonky. There is a square around some options, but not others.

Moving to the "Files" tab, the options from general that were not in the box, appear at the top of "Files".

And the files options appear at the bottom in a "cutoff" box.

That behavior continues for the remainder of the tabs. (The non boxed options from "General" appear at the top of each tab.

I did not test any of the buttons in the Configuration section.

Troubleshooting/Logs... can be a separate PR, but could the "Find" feature ignore the case?

I am using Firefox, I don't know if that has any impact on anything. I reloaded the UI with no cache as well.

Lastly, the tray icon has no image.

Tested on Windows 11.

[TheElixZammuto]

Thank you, I've checked everything (paddings, configration page issues, app page issues, missing tray icon) and everything should now be in order

[ReenigneArcher]

One more observation:

The delete button doesn't work for command preparations

I think everything else is good to go.

[ReenigneArcher]

@TheElixZammuto not sure if you saw my last review. #1673 (comment)

That's the only thing I saw not working. It's possible it doesn't work in the current version as well (I didn't check).

[TheElixZammuto]

Fixed that (it already worked on app list, only global commands did not work)