Theme and native-menu polish for command view

Author: FolderView Plus Test

archive/folderview.plus-2026.04.14.08.txz.sha256

@@ -0,0 +1 @@
+5e40104f4e8d1915b0da036e040bd8fb0a142f289fabbcb98c5da8afcfbc6319  folderview.plus-2026.04.15.21.txz

archive/folderview.plus-2026.04.14.08.txz archive/folderview.plus-2026.04.15.21.txzarchive/folderview.plus-2026.04.14.08.txz renamed to archive/folderview.plus-2026.04.15.21.txz

@@ -0,0 +1,3 @@
+- UX: Docker command-view container cards now restore the outlined member-tile treatment, but the outline colors are theme-aware and use the plugin runtime status/border tokens instead of hardcoded orange chrome.
+- UX: Command-view quick actions now reuse the regular FolderView Docker preview action classes, and the branch action buttons gain a subtle theme-token outline so they sit closer to the rest of the plugin controls.
+- Fix: Command-view member surfaces now hydrate Unraid's native Docker trigger handlers onto the visible tile itself and hydrate from the staged full runtime payload for WebUI URLs, so clicking a container uses the native Unraid menu path and the WebUI quick action can render when available.

archive/folderview.plus-2026.04.15.21.txz.sha256

@@ -6,13 +6,19 @@
 <!ENTITY launch "Settings/FolderViewPlus">
 <!ENTITY plugdir "/usr/local/emhttp/plugins/&name;">
 <!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/dev/folderview.plus.plg">
-<!ENTITY version "2026.04.15.20">
-<!ENTITY md5 "cb5c9cfdb68417db5a05e88ac358d01d">
+<!ENTITY version "2026.04.15.21">
+<!ENTITY md5 "c2077648bc18417418c9c310f5bc550b">
 ]>
 
 <PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" icon="folder-icon.png" support="https://forums.unraid.net/topic/197631-plugin-folderview-plus/" min="7.0.0">
     <CHANGES>
 
+###2026.04.15.21
+- UX: Docker command-view container cards now restore the outlined member-tile treatment, but the outline colors are theme-aware and use the plugin runtime status/border tokens instead of hardcoded orange chrome.
+- UX: Command-view quick actions now reuse the regular FolderView Docker preview action classes, and the branch action buttons gain a subtle theme-token outline so they sit closer to the rest of the plugin controls.
+- Fix: Command-view member surfaces now hydrate Unraid's native Docker trigger handlers onto the visible tile itself and hydrate from the staged full runtime payload for WebUI URLs, so clicking a container uses the native Unraid menu path and the WebUI quick action can render when available.
+
+
 ###2026.04.15.20
 - UX: Docker command-view member tiles no longer render the boxed orange tile chrome; the member strip now stays visually closer to the normal FolderView preview surface.
 - UX: Command-view WebUI, console, and log actions now use the regular Docker preview action classes so their icons match the standard FolderView quick actions instead of a custom button style.

docs/releases/2026.04.15.21.md

@@ -284,6 +284,55 @@
             return trigger.dispatchEvent(event);
         };
 
+        const hydrateNativeMemberSurface = (surface, containerName) => {
+            if (!(surface instanceof HTMLElement)) {
+                return;
+            }
+            const safeName = String(containerName || '').trim();
+            if (!safeName) {
+                return;
+            }
+            const trigger = getNativeMemberTrigger(safeName);
+            if (!(trigger instanceof HTMLElement)) {
+                surface.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    proxyNativeMemberTrigger(safeName, 'click');
+                });
+                surface.addEventListener('contextmenu', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    proxyNativeMemberTrigger(safeName, 'contextmenu');
+                });
+                return;
+            }
+            const inlineClick = String(trigger.getAttribute('onclick') || '').trim();
+            const inlineContextMenu = String(trigger.getAttribute('oncontextmenu') || '').trim();
+            const title = String(trigger.getAttribute('title') || '').trim();
+            surface.classList.add('hand');
+            if (inlineClick) {
+                surface.setAttribute('onclick', inlineClick);
+            } else {
+                surface.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    proxyNativeMemberTrigger(safeName, 'click');
+                });
+            }
+            if (inlineContextMenu) {
+                surface.setAttribute('oncontextmenu', inlineContextMenu);
+            } else {
+                surface.addEventListener('contextmenu', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    proxyNativeMemberTrigger(safeName, 'contextmenu');
+                });
+            }
+            if (title) {
+                surface.setAttribute('title', title);
+            }
+        };
+
         const computeOrderedFolderIds = (folders, prefs, hostOrder, unraidOrder) => {
             const folderMap = folders && typeof folders === 'object' ? folders : {};
             const baseOrder = reorderFolderSlotsInBaseOrder(unraidOrder, folderMap, prefs);
@@ -492,6 +541,12 @@
                     </div>
                 </div>
             `;
+            root.querySelectorAll('[data-fv-command-member-surface="true"]').forEach((surface) => {
+                if (!(surface instanceof HTMLElement)) {
+                    return;
+                }
+                hydrateNativeMemberSurface(surface, String(surface.getAttribute('data-member-name') || '').trim());
+            });
             return true;
         };
 
@@ -532,18 +587,6 @@
                         return;
                     }
                 }
-                const memberSurface = event.target instanceof Element
-                    ? event.target.closest('[data-fv-command-member-surface="true"]')
-                    : null;
-                if (memberSurface instanceof HTMLElement) {
-                    const memberName = String(memberSurface.getAttribute('data-member-name') || '').trim();
-                    if (memberName) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                        proxyNativeMemberTrigger(memberName, 'click');
-                    }
-                    return;
-                }
                 const button = event.target instanceof Element
                     ? event.target.closest('[data-fv-command-action]')
                     : null;
@@ -608,25 +651,6 @@
                 }
             };
             rootNode.addEventListener('click', clickHandler);
-            if (contextMenuHandler) {
-                rootNode.removeEventListener('contextmenu', contextMenuHandler);
-            }
-            contextMenuHandler = (event) => {
-                const memberSurface = event.target instanceof Element
-                    ? event.target.closest('[data-fv-command-member-surface="true"]')
-                    : null;
-                if (!(memberSurface instanceof HTMLElement)) {
-                    return;
-                }
-                const memberName = String(memberSurface.getAttribute('data-member-name') || '').trim();
-                if (!memberName) {
-                    return;
-                }
-                event.preventDefault();
-                event.stopPropagation();
-                proxyNativeMemberTrigger(memberName, 'contextmenu');
-            };
-            rootNode.addEventListener('contextmenu', contextMenuHandler);
         };
 
         const resolveSnapshot = async (options = {}) => {
@@ -638,7 +662,15 @@
             const folders = parseJsonPayloadSafe(foldersPayload);
             const unraidOrder = Object.values(parseJsonPayloadSafe(orderPayload));
             const runtimeState = parseJsonPayloadSafe(statePayload);
-            const runtimeInfoByName = normalizeRuntimeInfoMap(runtimeState);
+            let runtimeInfoByName = normalizeRuntimeInfoMap(runtimeState);
+            if (requestBundle.fullInfo) {
+                try {
+                    const runtimeFull = parseJsonPayloadSafe(await requestBundle.fullInfo);
+                    runtimeInfoByName = normalizeRuntimeInfoMap(runtimeFull, runtimeInfoByName);
+                } catch (_error) {
+                    // The staged full-info hydration is optional for the experimental surface.
+                }
+            }
             const prefsResponse = parseJsonPayloadSafe(prefsPayload);
             const prefs = normalizePrefs(prefsResponse?.prefs || {});
             const hierarchy = buildFolderHierarchy(folders);