Render docker context quick actions as icon-only top row

Author: alexphillips-dev

archive/folderview.plus-2026.03.19.16.txz.sha256

@@ -0,0 +1 @@
+948bbe275b3556713fadcf31d8f7840d0528de2eb0e80f75884ff2327f834fcc  folderview.plus-2026.03.20.12.txz

archive/folderview.plus-2026.03.19.16.txz archive/folderview.plus-2026.03.20.12.txzarchive/folderview.plus-2026.03.19.16.txz renamed to archive/folderview.plus-2026.03.20.12.txz

@@ -6,13 +6,18 @@
 <!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.03.20.11">
-<!ENTITY md5 "fce4cb8d9ae6540de09ea38d87ecf076">
+<!ENTITY version "2026.03.20.12">
+<!ENTITY md5 "53ab38d43d84b573e23ca2fa27198c3f">
 ]>
 
 <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.03.20.12
+- UX: Changed Docker folder click menu so `Focus`, `Pin`, and `Lock` render as icon-only quick actions on one top row.
+- Regression guard: Added runtime/test coverage for context quick-action strip detection and styling.
+
+
 ###2026.03.20.11
 - Fix: Restored Docker folder rows after row-action regression that hid folder names.
 - UX: Moved `Focus`, `Pin/Unpin`, and `Lock/Unlock` into the top of the existing folder click menu.

archive/folderview.plus-2026.03.20.12.txz.sha256

@@ -4066,6 +4066,84 @@ const folderCustomAction = async (id, actionIndex) => {
 };
 
 
+const DOCKER_CONTEXT_QUICK_ACTION_LABELS = new Set([
+    'focus folder',
+    'clear focus',
+    'pin folder',
+    'unpin folder',
+    'lock folder',
+    'unlock folder'
+]);
+
+const normalizeDockerContextActionLabel = (value) => String(value || '').trim().replace(/\s+/g, ' ').toLowerCase();
+
+const findVisibleDockerContextMenu = () => {
+    const selectors = [
+        'ul.context-menu-list:visible',
+        'ul.contextMenuPlugin:visible',
+        'ul.context-menu:visible',
+        'ul.dropdown-menu:visible'
+    ];
+    for (const selector of selectors) {
+        const $menus = $(selector);
+        for (let idx = $menus.length - 1; idx >= 0; idx--) {
+            const $menu = $($menus.get(idx));
+            const quickCount = $menu.children('li').filter((_, item) => {
+                const label = normalizeDockerContextActionLabel($(item).text());
+                return DOCKER_CONTEXT_QUICK_ACTION_LABELS.has(label);
+            }).length;
+            if (quickCount >= 3) {
+                return $menu;
+            }
+        }
+    }
+    return $();
+};
+
+const styleDockerFolderContextQuickIcons = () => {
+    const $menu = findVisibleDockerContextMenu();
+    if (!$menu.length) {
+        return false;
+    }
+    const $quickItems = $menu.children('li').filter((_, item) => {
+        const label = normalizeDockerContextActionLabel($(item).text());
+        return DOCKER_CONTEXT_QUICK_ACTION_LABELS.has(label);
+    }).slice(0, 3);
+    if ($quickItems.length < 3) {
+        return false;
+    }
+    $menu.addClass('fvplus-docker-context-menu');
+    $quickItems.each((_, item) => {
+        const $item = $(item);
+        const label = String($item.text() || '').trim().replace(/\s+/g, ' ');
+        $item.addClass('fvplus-docker-quick-item');
+        const $interactive = $item.find('a, .context-menu-item').first();
+        if ($interactive.length) {
+            $interactive.addClass('fvplus-docker-quick-link');
+            $interactive.attr('title', label);
+            $interactive.attr('aria-label', label);
+        } else {
+            $item.attr('title', label);
+            $item.attr('aria-label', label);
+        }
+    });
+    const $firstNonQuick = $menu.children('li').not('.fvplus-docker-quick-item').first();
+    if ($firstNonQuick.length) {
+        $firstNonQuick.addClass('fvplus-docker-quick-clear');
+    }
+    return true;
+};
+
+const queueDockerFolderContextQuickIcons = (attempt = 0) => {
+    if (styleDockerFolderContextQuickIcons()) {
+        return;
+    }
+    if (attempt >= 8) {
+        return;
+    }
+    setTimeout(() => queueDockerFolderContextQuickIcons(attempt + 1), 18 * (attempt + 1));
+};
+
 /**
  * Atach the menu when clicking the folder icon
  * @param {string} id the id of the folder
@@ -4412,6 +4490,7 @@ const addDockerFolderContext = (id) => {
     folderEvents.dispatchEvent(new CustomEvent('docker-folder-context', {detail: { id, opts }}));
 
     context.attach('#' + id, opts);
+    queueDockerFolderContextQuickIcons();
     if (FOLDER_VIEW_DEBUG_MODE) console.log(`[FV3_DEBUG] addDockerFolderContext (id: ${id}): Context menu attached to #${id}. Exit.`);
 };
 

folderview.plus.plg

@@ -716,6 +716,37 @@ div.folder-preview-4 span.outer {
     background-color: var(--fvplus-hover-bg);
 }
 
+/* Docker folder context quick actions: icon-only strip on first row. */
+.fvplus-docker-context-menu > li.fvplus-docker-quick-item {
+    display: inline-flex !important;
+    width: 34px;
+    margin: 0 4px 0 0;
+    vertical-align: top;
+}
+
+.fvplus-docker-context-menu > li.fvplus-docker-quick-item > a,
+.fvplus-docker-context-menu > li.fvplus-docker-quick-item .context-menu-item {
+    width: 30px;
+    min-width: 30px;
+    height: 26px;
+    padding: 2px 0 !important;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 0 !important;
+    line-height: 1;
+}
+
+.fvplus-docker-context-menu > li.fvplus-docker-quick-item > a i,
+.fvplus-docker-context-menu > li.fvplus-docker-quick-item .context-menu-item i,
+.fvplus-docker-context-menu > li.fvplus-docker-quick-item::before {
+    font-size: 14px !important;
+}
+
+.fvplus-docker-context-menu > li.fvplus-docker-quick-clear {
+    clear: both;
+}
+
 /* Touch/mobile behavior: avoid hover-only interactions. */
 @media (hover: none), (pointer: coarse) {
     .hover div.folder-preview div {

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/scripts/docker.js

@@ -8,6 +8,10 @@ const dockerScript = fs.readFileSync(
     path.join(repoRoot, 'src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/scripts/docker.js'),
     'utf8'
 );
+const dockerCss = fs.readFileSync(
+    path.join(repoRoot, 'src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/styles/docker.css'),
+    'utf8'
+);
 
 test('docker context menu keeps focus/pin/lock quick actions at the top', () => {
     assert.match(dockerScript, /text:\s*focused \? 'Clear focus' : 'Focus folder'/);
@@ -16,6 +20,8 @@ test('docker context menu keeps focus/pin/lock quick actions at the top', () =>
     assert.match(dockerScript, /toggleDockerFolderFocus\(id\)/);
     assert.match(dockerScript, /toggleDockerFolderPin\(id\)/);
     assert.match(dockerScript, /toggleDockerFolderLock\(id\)/);
+    assert.match(dockerScript, /queueDockerFolderContextQuickIcons\(/);
+    assert.match(dockerScript, /fvplus-docker-context-menu/);
     assert.doesNotMatch(dockerScript, /fv-folder-row-actions/);
 });
 
@@ -25,3 +31,8 @@ test('docker runtime exposes and applies focus\/lock state guards', () => {
     assert.match(dockerScript, /ensureDockerFolderUnlocked/);
     assert.match(dockerScript, /Folder locked/);
 });
+
+test('docker context menu quick-action strip styles remain defined', () => {
+    assert.match(dockerCss, /\.fvplus-docker-context-menu > li\.fvplus-docker-quick-item/);
+    assert.match(dockerCss, /\.fvplus-docker-context-menu > li\.fvplus-docker-quick-item > a/);
+});