From fd5101f011c6f3149c3e36f0e4512ec0828705f3 Mon Sep 17 00:00:00 2001 From: Noklef <281545466+Noklef@users.noreply.github.com> Date: Fri, 22 May 2026 11:58:39 +1000 Subject: [PATCH 1/9] feat(web-ui): Moved new app button into actions toolbar - Wrapped new app button to stick to the left side of the toolbar --- src_assets/common/assets/web/apps.html | 56 ++++++++++++++------------ 1 file changed, 30 insertions(+), 26 deletions(-) diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html index 13a53fd5ad9..45117288b77 100644 --- a/src_assets/common/assets/web/apps.html +++ b/src_assets/common/assets/web/apps.html @@ -14,28 +14,38 @@

{{ $t('apps.applications_title') }} ({{ appCountLab -
- - - -
- - - - -
+ +
+ + + +
+ + + + + +
+
@@ -432,12 +442,6 @@

{{ $t('apps.env_vars_about') }}

-
- -
-
-
+ + + + + @@ -572,7 +584,6 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
data() { return { apps: [], - showEditForm: false, editForm: null, detachedCmd: "", coverSearching: false, @@ -667,7 +678,7 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
"image-path": "" }; this.editForm.index = -1; - this.showEditForm = true; + this.openEditModal(); }, editApp(id) { this.editForm = JSON.parse(JSON.stringify(this.apps[id])); @@ -690,7 +701,7 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
if (this.editForm["exit-timeout"] === undefined) { this.editForm["exit-timeout"] = 5; } - this.showEditForm = true; + this.openEditModal(); }, showDeleteForm(id) { let resp = confirm( @@ -730,6 +741,8 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
this.coverCandidates = []; this.coverSearchQuery = ""; + this.showStacked(this.$refs.coverFinderModal); + // Perform initial search with app name this.performCoverSearch(); }, @@ -827,7 +840,7 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
this.fileBrowserTypedPath = startPath || ''; this.fileBrowserError = ''; this.fileBrowserNavigate(startPath || ''); - Modal.getOrCreateInstance(this.$refs.fileBrowserModal).show(); + this.showStacked(this.$refs.fileBrowserModal); }, fileBrowserClose() { const modal = Modal.getInstance(this.$refs.fileBrowserModal); @@ -927,6 +940,32 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
else this.sortMode = "default"; }, + openEditModal() { + // Use $nextTick because if the edit version of the modal is created too early, it breaks... + this.$nextTick(() => { + Modal.getOrCreateInstance(this.$refs.editModal).show(); + }); + }, + closeEditModal() { + const modal = Modal.getInstance(this.$refs.editModal); + if (modal) modal.hide(); + }, + // We need to update the z-index since bootstrap gives all modals the same z-index + // Fixes the stacking issue of modals (cover finder / file browser) + showStacked(modalEl) { + modalEl.addEventListener('show.bs.modal', () => { + const openCount = document.querySelectorAll('.modal.show').length; + const z = 1055 + (openCount + 1) * 20; + modalEl.style.zIndex = z; + + requestAnimationFrame(() => { + const backdrops = document.querySelectorAll('.modal-backdrop'); + const backdrop = backdrops[backdrops.length - 1]; + if (backdrop) backdrop.style.zIndex = z - 10; + }); + }, { once: true }); + Modal.getOrCreateInstance(modalEl).show(); + }, }, }); From be556e803ea0720418537757876150fe7485443f Mon Sep 17 00:00:00 2001 From: Noklef <281545466+Noklef@users.noreply.github.com> Date: Fri, 22 May 2026 15:43:36 +1000 Subject: [PATCH 4/9] fix(web-ui): Some small fix-ups - Remove duplicate set of index to `-1` - Fixed key in for loop not just being the literal string 'i' - Fixed indenting on the modal --- src_assets/common/assets/web/apps.html | 521 ++++++++++++------------- 1 file changed, 260 insertions(+), 261 deletions(-) diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html index 66560768075..56fbcf262fd 100644 --- a/src_assets/common/assets/web/apps.html +++ b/src_assets/common/assets/web/apps.html @@ -117,265 +117,265 @@
- -
- - -
{{ $t('apps.app_name_desc') }}
-
- -
- -
- - -
-
{{ $t('apps.output_desc') }}
-
- - -
- -
{{ $t('apps.cmd_prep_desc') }}
-
- -
- - - - - - - - - - - - - - - - - -
- - {{ $t('_common.do_cmd') }} - - - {{ $t('_common.undo_cmd') }} - - - {{ $t('_common.run_as') }} -
-
- - -
- 		-
- - -
- 		- - - - -
-
- -
- -
- - - - -
-
- -
-
- {{ $t('apps.detached_cmds_desc') }}
- {{ $t('_common.note') }} {{ $t('apps.detached_cmds_note') }} -
-
- -
- -
- - -
-
- {{ $t('apps.cmd_desc') }}
- {{ $t('_common.note') }} {{ $t('apps.cmd_note') }} -
-
- -
- -
- - -
-
{{ $t('apps.working_dir_desc') }}
-
- - - - - - - -
- - -
{{ $t('apps.exit_timeout_desc') }}
-
-
- -
- - - -
-
{{ $t('apps.image_desc') }}
-
-
-
-

{{ $t('apps.env_vars_about') }}

- {{ $t('apps.env_vars_desc') }} -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
{{ $t('apps.env_var_name') }}
SUNSHINE_APP_ID{{ $t('apps.env_app_id') }}
SUNSHINE_APP_NAME{{ $t('apps.env_app_name') }}
SUNSHINE_CLIENT_WIDTH{{ $t('apps.env_client_width') }}
SUNSHINE_CLIENT_HEIGHT{{ $t('apps.env_client_height') }}
SUNSHINE_CLIENT_FPS{{ $t('apps.env_client_fps') }}
SUNSHINE_CLIENT_HDR{{ $t('apps.env_client_hdr') }}
SUNSHINE_CLIENT_GCMAP{{ $t('apps.env_client_gcmap') }}
SUNSHINE_CLIENT_HOST_AUDIO{{ $t('apps.env_client_host_audio') }}
SUNSHINE_CLIENT_ENABLE_SOPS{{ $t('apps.env_client_enable_sops') }}
SUNSHINE_CLIENT_AUDIO_CONFIGURATION{{ $t('apps.env_client_audio_config') }}
-
{{ $t('apps.env_qres_example') }} - 
cmd /C <{{ $t('apps.env_qres_path') }}>\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT% /R:%SUNSHINE_CLIENT_FPS%
-
-
{{ $t('apps.env_xrandr_example') }} - 
sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate ${SUNSHINE_CLIENT_FPS}"
-
-
{{ $t('apps.env_displayplacer_example') }} - 
sh -c "displayplacer "id:<screenId> res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:${SUNSHINE_CLIENT_FPS} scaling:on origin:(0,0) degree:0""
-
-
{{ $t('_common.see_more') }}
-
+ +
+ + +
{{ $t('apps.app_name_desc') }}
+
+ +
+ +
+ + +
+
{{ $t('apps.output_desc') }}
+
+ + +
+ +
{{ $t('apps.cmd_prep_desc') }}
+
+ +
+ + + + + + + + + + + + + + + + + +
+ + {{ $t('_common.do_cmd') }} + + + {{ $t('_common.undo_cmd') }} + + + {{ $t('_common.run_as') }} +
+
+ + +
+ 		+
+ + +
+ 		+ + + + +
+
+ +
+ +
+ + + + +
+
+ +
+
+ {{ $t('apps.detached_cmds_desc') }}
+ {{ $t('_common.note') }} {{ $t('apps.detached_cmds_note') }} +
+
+ +
+ +
+ + +
+
+ {{ $t('apps.cmd_desc') }}
+ {{ $t('_common.note') }} {{ $t('apps.cmd_note') }} +
+
+ +
+ +
+ + +
+
{{ $t('apps.working_dir_desc') }}
+
+ + + + + + + +
+ + +
{{ $t('apps.exit_timeout_desc') }}
+
+
+ +
+ + + +
+
{{ $t('apps.image_desc') }}
+
+
+
+

{{ $t('apps.env_vars_about') }}

+ {{ $t('apps.env_vars_desc') }} +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
{{ $t('apps.env_var_name') }}
SUNSHINE_APP_ID{{ $t('apps.env_app_id') }}
SUNSHINE_APP_NAME{{ $t('apps.env_app_name') }}
SUNSHINE_CLIENT_WIDTH{{ $t('apps.env_client_width') }}
SUNSHINE_CLIENT_HEIGHT{{ $t('apps.env_client_height') }}
SUNSHINE_CLIENT_FPS{{ $t('apps.env_client_fps') }}
SUNSHINE_CLIENT_HDR{{ $t('apps.env_client_hdr') }}
SUNSHINE_CLIENT_GCMAP{{ $t('apps.env_client_gcmap') }}
SUNSHINE_CLIENT_HOST_AUDIO{{ $t('apps.env_client_host_audio') }}
SUNSHINE_CLIENT_ENABLE_SOPS{{ $t('apps.env_client_enable_sops') }}
SUNSHINE_CLIENT_AUDIO_CONFIGURATION{{ $t('apps.env_client_audio_config') }}
+
{{ $t('apps.env_qres_example') }} + 
cmd /C <{{ $t('apps.env_qres_path') }}>\QRes.exe /X:%SUNSHINE_CLIENT_WIDTH% /Y:%SUNSHINE_CLIENT_HEIGHT% /R:%SUNSHINE_CLIENT_FPS%
+
+
{{ $t('apps.env_xrandr_example') }} + 
sh -c "xrandr --output HDMI-1 --mode \"${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT}\" --rate ${SUNSHINE_CLIENT_FPS}"
+
+
{{ $t('apps.env_displayplacer_example') }} + 
sh -c "displayplacer "id:<screenId> res:${SUNSHINE_CLIENT_WIDTH}x${SUNSHINE_CLIENT_HEIGHT} hz:${SUNSHINE_CLIENT_FPS} scaling:on origin:(0,0) degree:0""
+
+
{{ $t('_common.see_more') }}
+
@@ -433,7 +433,7 @@
-
@@ -677,7 +677,6 @@
{{ fileBrowserTitle || $t('file_browser.title') }}
detached: [], "image-path": "" }; - this.editForm.index = -1; this.openEditModal(); }, editApp(id) { From 3f9c89b81510e8b69843d1104ef9f232f3411d78 Mon Sep 17 00:00:00 2001 From: Noklef <281545466+Noklef@users.noreply.github.com> Date: Fri, 22 May 2026 16:13:21 +1000 Subject: [PATCH 5/9] feat(web-ui): Implemented a Delete modal instead of relying on a browser `confirm()` dialogue - Created Delete confirmation modal - Renamed `showDeleteForm` to `showDeleteModal` --- src_assets/common/assets/web/apps.html | 62 ++++++++++++++----- .../assets/web/public/assets/locale/en.json | 2 + 2 files changed, 49 insertions(+), 15 deletions(-) diff --git a/src_assets/common/assets/web/apps.html b/src_assets/common/assets/web/apps.html index 56fbcf262fd..b2d17ec57c8 100644 --- a/src_assets/common/assets/web/apps.html +++ b/src_assets/common/assets/web/apps.html @@ -81,7 +81,7 @@
{{ app.name }}
{{ $t('apps.edit') }} -
@@ -455,6 +455,32 @@
+ + +