feat: color-code folder status text for started paused stopped

Author: alexphillips-dev

archive/folderview.plus-2026.03.05.9.txz

@@ -6,13 +6,20 @@
 <!ENTITY launch "Settings/FolderViewPlus">
 <!ENTITY plugdir "/usr/local/emhttp/plugins/&name;">
 <!ENTITY pluginURL "https://raw.githubusercontent.com/&github;/main/folderview.plus.plg">
-<!ENTITY version "2026.03.05.8">
-<!ENTITY md5 "c4ca972ced30d8cab3c4ac07354a9b07">
+<!ENTITY version "2026.03.05.9">
+<!ENTITY md5 "1d386e5f2c1a4a90a90f5155c5fb389a">
 ]>
 
 <PLUGIN name="&name;" author="&author;" version="&version;" launch="&launch;" pluginURL="&pluginURL;" icon="folder-open-o" support="https://github.com/alexphillips-dev/FolderView-Plus/issues" min="7.0.0">
     <CHANGES>
 
+###2026.03.05.9
+- Color-code folder state text for faster scanning:
+  - white for `started`,
+  - dark gold for `paused`,
+  - red for `stopped`.
+- Apply status text coloring to both Docker and VM folder views.
+
 ###2026.03.05.8
 - Improve folder status labels to show explicit state totals:
   - `X/N started` when any items are running,

folderview.plus.plg

@@ -1022,19 +1022,21 @@ const createFolder = (folder, id, positionInMainOrder, liveOrderArray, container
         if (FOLDER_VIEW_DEBUG_MODE) console.log(`[FV3_DEBUG] createFolder (id: ${id}): Set 'update ready' status in update column.`);
     }
     const total = Object.entries(folder.containers).length;
+    const $folderState = $(`tr.folder-id-${id} span.folder-state`);
+    $folderState.removeClass('fv-folder-state-started fv-folder-state-paused fv-folder-state-stopped');
     let folderStatusKind = 'stopped';
     if (started > 0) {
         folderStatusKind = 'running';
         $(`tr.folder-id-${id} i#load-folder-${id}`).attr('class', 'fa fa-play started green-text folder-load-status');
-        $(`tr.folder-id-${id} span.folder-state`).text(`${started}/${total} ${$.i18n('started')}`);
+        $folderState.text(`${started}/${total} ${$.i18n('started')}`).addClass('fv-folder-state-started');
     } else if (paused > 0) {
         folderStatusKind = 'paused';
         $(`tr.folder-id-${id} i#load-folder-${id}`).attr('class', 'fa fa-pause paused orange-text folder-load-status');
-        $(`tr.folder-id-${id} span.folder-state`).text(`${paused}/${total} ${$.i18n('paused')}`);
+        $folderState.text(`${paused}/${total} ${$.i18n('paused')}`).addClass('fv-folder-state-paused');
     } else {
         folderStatusKind = 'stopped';
         $(`tr.folder-id-${id} i#load-folder-${id}`).attr('class', 'fa fa-square stopped red-text folder-load-status');
-        $(`tr.folder-id-${id} span.folder-state`).text(`${stopped}/${total} ${$.i18n('stopped')}`);
+        $folderState.text(`${stopped}/${total} ${$.i18n('stopped')}`).addClass('fv-folder-state-stopped');
     }
     const badgePrefs = folderTypePrefs?.badges || {};
     const showRunningBadge = badgePrefs.running !== false;

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

@@ -361,19 +361,21 @@ const createFolder = (folder, id, position, order, vmInfo, foldersDone) => {
     //set tehe status of a folder
 
     const total = Object.entries(folder.containers).length;
+    const $folderState = $(`tr.folder-id-${id} span.folder-state`);
+    $folderState.removeClass('fv-folder-state-started fv-folder-state-paused fv-folder-state-stopped');
     let folderStatusKind = 'stopped';
     if (started > 0) {
         folderStatusKind = 'running';
         $(`tr.folder-id-${id} i#load-folder-${id}`).attr('class', 'fa fa-play started green-text folder-load-status');
-        $(`tr.folder-id-${id} span.folder-state`).text(`${started}/${total} ${$.i18n('started')}`);
+        $folderState.text(`${started}/${total} ${$.i18n('started')}`).addClass('fv-folder-state-started');
     } else if (paused > 0) {
         folderStatusKind = 'paused';
         $(`tr.folder-id-${id} i#load-folder-${id}`).attr('class', 'fa fa-pause paused orange-text folder-load-status');
-        $(`tr.folder-id-${id} span.folder-state`).text(`${paused}/${total} ${$.i18n('paused')}`);
+        $folderState.text(`${paused}/${total} ${$.i18n('paused')}`).addClass('fv-folder-state-paused');
     } else {
         folderStatusKind = 'stopped';
         $(`tr.folder-id-${id} i#load-folder-${id}`).attr('class', 'fa fa-square stopped red-text folder-load-status');
-        $(`tr.folder-id-${id} span.folder-state`).text(`${stopped}/${total} ${$.i18n('stopped')}`);
+        $folderState.text(`${stopped}/${total} ${$.i18n('stopped')}`).addClass('fv-folder-state-stopped');
     }
     const badgePrefs = folderTypePrefs?.badges || {};
     const showRunningBadge = badgePrefs.running !== false;

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

@@ -46,6 +46,18 @@
     white-space: nowrap;
 }
 
+span.folder-state.fv-folder-state-started {
+    color: #ffffff !important;
+}
+
+span.folder-state.fv-folder-state-paused {
+    color: #b8860b !important;
+}
+
+span.folder-state.fv-folder-state-stopped {
+    color: #ff4d4d !important;
+}
+
 .folder-storage {
     display: none;
 }

src/folderview.plus/usr/local/emhttp/plugins/folderview.plus/styles/docker.css

@@ -39,6 +39,18 @@
     flex-shrink: 0;
 }
 
+span.folder-state.fv-folder-state-started {
+    color: #ffffff !important;
+}
+
+span.folder-state.fv-folder-state-paused {
+    color: #b8860b !important;
+}
+
+span.folder-state.fv-folder-state-stopped {
+    color: #ff4d4d !important;
+}
+
 .folder-storage {
     display: none;
 }
@@ -88,4 +100,4 @@ div.folder-preview-4 span.outer{
 
 .folder-element-custom-btn {
     margin-left: 0.5em;
-}
+}