Improve docker command view tiles and button chrome

Author: FolderView Plus Test

archive/folderview.plus-2026.04.14.06.txz.sha256

@@ -0,0 +1 @@
+21d9133f0ea5e43bb5ad42aac6da06ebcdd8a64684da3f6c7f54c55cc1b906f4  folderview.plus-2026.04.15.18.txz

archive/folderview.plus-2026.04.14.06.txz archive/folderview.plus-2026.04.15.18.txzarchive/folderview.plus-2026.04.14.06.txz renamed to archive/folderview.plus-2026.04.15.18.txz

@@ -0,0 +1,3 @@
+- UX: Docker `Command view (experimental)` now uses the shared FolderView Plus button chrome instead of a one-off button skin, so its action rows match the rest of the plugin surfaces more closely.
+- UX: Command-view folder cards now render visible container tiles with app icons, name pills, state badges, and update badges across the row instead of limiting members to a few small text chips.
+- Quality: Added regression coverage to keep the isolated command-view module on the shared button variables and the richer member-tile rendering path, and hardened `pkg_build.sh` to use a relative build lock path so dev packaging does not stall on the Windows/WSL lockfile path.

archive/folderview.plus-2026.04.15.18.txz.sha256

@@ -6,13 +6,20 @@
 <!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.16">
-<!ENTITY md5 "e5ac4572a2ff30dfdca16df70243ab58">
+<!ENTITY version "2026.04.15.18">
+<!ENTITY md5 "1c868cfd5fef54417e7f30d8c4d39b45">
 ]>
 
 <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.18
+- Fix: Docker runtime rows, folder state, and container interactions.
+- UX: Settings workspace layout, section flows, and table behavior.
+- Quality: Release automation, CI smoke coverage, and packaging guards.
+- Docs: Project documentation and support guidance.
+
+
 ###2026.04.15.16
 - Feature: Added an isolated Docker `Command view (experimental)` mode that loads from its own runtime module and stylesheet, reuses the existing folder/runtime data model, and keeps FolderView and host-list modes on separate paths.
 - UX: Docker command view renders a dedicated folder command surface with branch status summaries, member chips, and quick actions for start, stop, update, WebUI, edit, pin, and lock.

docs/releases/2026.04.15.18.md

@@ -20,7 +20,7 @@ validate_after_build=true
 dry_run=false
 run_install_smoke=false
 tmpdir=""
-lockfile="$CWD/tmp/pkg_build.lock"
+lockfile="tmp/pkg_build.lock"
 lockdir=""
 branch_override="${FVPLUS_BUILD_BRANCH:-}"
 
@@ -269,7 +269,7 @@ sync_ca_template_metadata() {
 }
 
 acquire_build_lock() {
-    mkdir -p "$CWD/tmp"
+    mkdir -p "$(dirname "$lockfile")"
     if command -v flock >/dev/null 2>&1; then
         exec 9>"$lockfile"
         if ! flock -n 9; then

folderview.plus.plg

@@ -12,6 +12,7 @@
         : (typeof window !== 'undefined' ? window : null);
     const ROOT_ID = 'fvplus-docker-command-view-root';
     const BODY_ATTR = 'data-fvplus-docker-command-view-mounted';
+    const DOCKER_ICON_FALLBACK = '/plugins/dynamix.docker.manager/images/question.png';
 
     const createApi = (deps = {}) => {
         const win = deps.window || fallbackWindow;
@@ -47,6 +48,15 @@
         const normalizePrefs = typeof utils.normalizePrefs === 'function'
             ? utils.normalizePrefs
             : ((prefs = {}) => (prefs && typeof prefs === 'object' ? prefs : {}));
+        const sanitizeImageSrc = typeof utils.sanitizeImageSrc === 'function'
+            ? utils.sanitizeImageSrc
+            : ((value, fallback = DOCKER_ICON_FALLBACK) => {
+                const raw = String(value || '').trim();
+                if (!raw || /^javascript:/i.test(raw)) {
+                    return fallback;
+                }
+                return escapeHtml(raw);
+            });
         const normalizeRuntimeInfoMap = typeof deps.normalizeDockerRuntimeInfoMap === 'function'
             ? deps.normalizeDockerRuntimeInfoMap
             : ((value) => (value && typeof value === 'object' ? value : {}));
@@ -197,6 +207,17 @@
             || entry?.info?.State?.Updated === true
         );
 
+        const getContainerStateMeta = (entry = {}) => {
+            const state = resolveContainerState(entry);
+            if (state === 'paused') {
+                return { state, label: 'paused', icon: 'fa-pause' };
+            }
+            if (state === 'running') {
+                return { state, label: 'running', icon: 'fa-play' };
+            }
+            return { state, label: 'stopped', icon: 'fa-stop' };
+        };
+
         const computeOrderedFolderIds = (folders, prefs, hostOrder, unraidOrder) => {
             const folderMap = folders && typeof folders === 'object' ? folders : {};
             const baseOrder = reorderFolderSlotsInBaseOrder(unraidOrder, folderMap, prefs);
@@ -240,8 +261,10 @@
             const branchContainers = getScopedRuntimeContainersForFolder(folderId, true) || {};
             const members = Object.entries(branchContainers).map(([name, entry]) => ({
                 name,
-                state: resolveContainerState(entry),
-                updateReady: containerHasUpdate(entry)
+                icon: sanitizeImageSrc(entry?.icon || DOCKER_ICON_FALLBACK, DOCKER_ICON_FALLBACK),
+                stateMeta: getContainerStateMeta(entry),
+                updateReady: containerHasUpdate(entry),
+                managed: entry?.managed === true || entry?.manager === 'dockerman'
             })).sort((left, right) => left.name.localeCompare(right.name));
             const actionCounts = summarizeFolderActionCounts(branchContainers);
             const directMatches = snapshot.matchCache[folderId] || {};
@@ -253,9 +276,9 @@
             let stopped = 0;
             let updates = 0;
             members.forEach((member) => {
-                if (member.state === 'running') {
+                if (member.stateMeta.state === 'running') {
                     running += 1;
-                } else if (member.state === 'paused') {
+                } else if (member.stateMeta.state === 'paused') {
                     paused += 1;
                 } else {
                     stopped += 1;
@@ -333,13 +356,23 @@
                                 `${card.branchMemberCount} in branch`,
                                 card.childCount > 0 ? `${card.childCount} child folders` : ''
                             ].filter(Boolean).join(' • ');
-                            const memberChips = card.members.slice(0, 6).map((member) => `
-                                <span class="fv-docker-command-member ${escapeHtml(member.state)}">
-                                    <span class="fv-docker-command-member-name">${escapeHtml(member.name)}</span>
-                                    ${member.updateReady ? '<span class="fv-docker-command-member-update">update</span>' : ''}
-                                </span>
+                            const memberTiles = card.members.map((member) => `
+                                <div class="fv-docker-command-member-tile ${escapeHtml(member.stateMeta.state)}${member.updateReady ? ' has-update' : ''}">
+                                    <span class="fv-docker-command-member-icon-wrap">
+                                        <img src="${member.icon}" class="fv-docker-command-member-icon" alt="" loading="lazy" onerror='this.src="${DOCKER_ICON_FALLBACK}"'>
+                                    </span>
+                                    <span class="fv-docker-command-member-content">
+                                        <span class="fv-docker-command-member-pill">${escapeHtml(member.name)}</span>
+                                        <span class="fv-docker-command-member-meta">
+                                            <span class="fv-docker-command-member-state ${escapeHtml(member.stateMeta.state)}">
+                                                <i class="fa ${escapeHtml(member.stateMeta.icon)}" aria-hidden="true"></i>
+                                                <span>${escapeHtml(member.stateMeta.label)}</span>
+                                            </span>
+                                            ${member.updateReady ? '<span class="fv-docker-command-member-update">update ready</span>' : ''}
+                                        </span>
+                                    </span>
+                                </div>
                             `).join('');
-                            const hiddenCount = Math.max(0, card.members.length - 6);
                             return `
                                 <article class="fv-docker-command-card" data-folder-id="${escapeHtml(card.folderId)}" style="--fv-docker-command-depth:${card.depth};">
                                     <div class="fv-docker-command-card-head">
@@ -360,7 +393,7 @@
                                         <span class="fv-docker-command-stat update"><i class="fa fa-cloud-download"></i> ${card.updates} updates</span>
                                     </div>
                                     <div class="fv-docker-command-members">
-                                        ${memberChips}${hiddenCount > 0 ? `<span class="fv-docker-command-member more">+${hiddenCount} more</span>` : ''}
+                                        ${memberTiles || '<span class="fv-docker-command-member-empty">No containers matched this folder yet.</span>'}
                                     </div>
                                     <div class="fv-docker-command-actions">
                                         <button type="button" class="fv-docker-command-button" data-fv-command-action="start-branch">Start branch</button>

pkg_build.sh

@@ -77,8 +77,7 @@ body[data-fvplus-docker-command-view-mounted="true"] table#docker_containers {
 .fv-docker-command-toolbar,
 .fv-docker-command-actions,
 .fv-docker-command-card-flags,
-.fv-docker-command-stats,
-.fv-docker-command-members {
+.fv-docker-command-stats {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
@@ -90,29 +89,35 @@ body[data-fvplus-docker-command-view-mounted="true"] table#docker_containers {
 
 .fv-docker-command-button {
     appearance: none;
-    border: 1px solid rgba(255, 154, 60, 0.56);
-    border-radius: 10px;
-    background: linear-gradient(180deg, rgba(255, 154, 60, 0.18), rgba(255, 154, 60, 0.08));
-    color: #ffb56d;
+    border: 0 !important;
+    border-radius: 8px !important;
+    background: linear-gradient(180deg, var(--fvplus-settings-button-bg-top), var(--fvplus-settings-button-bg-bottom)) !important;
+    color: var(--fvplus-settings-button-fg) !important;
+    box-shadow: var(--fvplus-settings-button-shadow) !important;
+    text-shadow: none !important;
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 0.08em;
     text-transform: uppercase;
     padding: 0.5rem 0.8rem;
     cursor: pointer;
-    transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
+    transition: background 120ms ease, box-shadow 120ms ease, color 120ms ease;
 }
 
 .fv-docker-command-button:hover,
 .fv-docker-command-button:focus-visible {
-    transform: translateY(-1px);
-    border-color: rgba(255, 183, 120, 0.92);
-    background: linear-gradient(180deg, rgba(255, 154, 60, 0.28), rgba(255, 154, 60, 0.12));
+    background: linear-gradient(180deg, var(--fvplus-settings-button-hover-top), var(--fvplus-settings-button-hover-bottom)) !important;
+    box-shadow: var(--fvplus-settings-button-shadow-hover) !important;
+}
+
+.fv-docker-command-button:active {
+    background: linear-gradient(180deg, var(--fvplus-settings-button-active-top), var(--fvplus-settings-button-active-bottom)) !important;
+    box-shadow: var(--fvplus-settings-button-shadow-active) !important;
 }
 
-.fv-docker-command-button.is-primary {
-    color: #17100a;
-    background: linear-gradient(180deg, rgba(255, 176, 96, 0.98), rgba(255, 149, 50, 0.92));
+.fv-docker-command-button:disabled {
+    opacity: 0.56;
+    box-shadow: none !important;
 }
 
 .fv-docker-command-overview {
@@ -179,8 +184,7 @@ body[data-fvplus-docker-command-view-mounted="true"] table#docker_containers {
 }
 
 .fv-docker-command-flag,
-.fv-docker-command-stat,
-.fv-docker-command-member {
+.fv-docker-command-stat {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
@@ -206,17 +210,17 @@ body[data-fvplus-docker-command-view-mounted="true"] table#docker_containers {
 }
 
 .fv-docker-command-stat.running,
-.fv-docker-command-member.running {
+.fv-docker-command-member-state.running {
     color: #7ad05a;
 }
 
 .fv-docker-command-stat.paused,
-.fv-docker-command-member.paused {
+.fv-docker-command-member-state.paused {
     color: #d7a418;
 }
 
 .fv-docker-command-stat.stopped,
-.fv-docker-command-member.stopped {
+.fv-docker-command-member-state.stopped {
     color: #ff6363;
 }
 
@@ -226,20 +230,114 @@ body[data-fvplus-docker-command-view-mounted="true"] table#docker_containers {
     margin-top: 0.75rem;
 }
 
-.fv-docker-command-member-name {
-    max-width: 18rem;
+.fv-docker-command-members {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+    gap: 0.6rem;
+}
+
+.fv-docker-command-member-tile {
+    display: flex;
+    align-items: center;
+    gap: 0.7rem;
+    min-width: 0;
+    padding: 0.62rem 0.72rem;
+    border-radius: 12px;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    background: rgba(255, 255, 255, 0.04);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02);
+}
+
+.fv-docker-command-member-tile.running {
+    border-color: rgba(122, 208, 90, 0.26);
+}
+
+.fv-docker-command-member-tile.paused {
+    border-color: rgba(215, 164, 24, 0.24);
+}
+
+.fv-docker-command-member-tile.stopped {
+    border-color: rgba(255, 99, 99, 0.22);
+}
+
+.fv-docker-command-member-tile.has-update {
+    box-shadow: inset 0 0 0 1px rgba(255, 154, 60, 0.18);
+}
+
+.fv-docker-command-member-icon-wrap {
+    flex: 0 0 auto;
+    width: 36px;
+    height: 36px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 10px;
+    background: rgba(255, 255, 255, 0.05);
+    overflow: hidden;
+}
+
+.fv-docker-command-member-icon {
+    display: block;
+    width: 28px;
+    height: 28px;
+    object-fit: contain;
+}
+
+.fv-docker-command-member-content {
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.32rem;
+}
+
+.fv-docker-command-member-pill {
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+    max-width: 100%;
+    width: fit-content;
+    padding: 0.2rem 0.56rem;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: #f3f5f7;
+    font-size: 0.82rem;
+    font-weight: 600;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.fv-docker-command-member-meta {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.35rem;
+    min-width: 0;
+}
+
+.fv-docker-command-member-state,
+.fv-docker-command-member-update {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0.14rem 0.44rem;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    font-size: 0.73rem;
+}
+
 .fv-docker-command-member-update {
-    font-size: 0.68rem;
     text-transform: uppercase;
     letter-spacing: 0.06em;
+    color: #ff9a3c;
 }
 
-.fv-docker-command-member.more {
+.fv-docker-command-member-empty {
+    display: inline-flex;
+    align-items: center;
+    min-height: 52px;
+    padding: 0 0.2rem;
     color: rgba(255, 255, 255, 0.66);
 }
 
@@ -276,4 +374,8 @@ body[data-fvplus-docker-command-view-mounted="true"] table#docker_containers {
     .fv-docker-command-card-head {
         flex-direction: column;
     }
+
+    .fv-docker-command-members {
+        grid-template-columns: 1fr;
+    }
 }

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/scripts/docker.runtime.command-view.js

@@ -231,9 +231,19 @@ test('docker runtime consumes shared state store and guarded async action wrappe
 test('docker command-view stylesheet only hides the host table when the isolated command module is mounted', () => {
     assert.match(dockerCommandViewCss, /body\[data-fvplus-docker-command-view-mounted="true"\] table#docker_containers/);
     assert.match(dockerCommandViewCss, /\.fv-docker-command-shell/);
+    assert.match(dockerCommandViewCss, /var\(--fvplus-settings-button-bg-top\)/);
+    assert.match(dockerCommandViewCss, /\.fv-docker-command-member-tile/);
     assert.doesNotMatch(dockerCommandViewCss, /body\[data-fvplus-docker-page-view="command"\] table#docker_containers/);
 });
 
+test('docker command-view renders visible member tiles instead of name-only chips', () => {
+    assert.match(dockerCommandViewJs, /const sanitizeImageSrc = typeof utils\.sanitizeImageSrc === 'function'/);
+    assert.match(dockerCommandViewJs, /class="fv-docker-command-member-tile/);
+    assert.match(dockerCommandViewJs, /class="fv-docker-command-member-pill"/);
+    assert.match(dockerCommandViewJs, /class="fv-docker-command-member-icon"/);
+    assert.doesNotMatch(dockerCommandViewJs, /class="fv-docker-command-member more"/);
+});
+
 test('docker CSS keeps docker-specific layout tokens while shared stylesheet owns shared dropdown geometry', () => {
     assert.match(dockerCss, /--fvplus-docker-folder-right-gutter:\s*28px/);
     assert.match(dockerCss, /--fvplus-docker-folder-outer-reserved-width:\s*106px/);