Update 1.2.2.2 beta

AppImage/ProxMenux-Monitor.AppImage.sha256

@@ -1 +1 @@
-5dd5ce284a6d83250dec808b5d07fe14cd0b0ac71769a113f6f355e57c0a9882  ProxMenux-1.2.2.2-beta.AppImage
+df043f28424d41dbb31b91cd525daafa4c0e7604334c8adbd5ed51c34f0727ff  ProxMenux-1.2.2.2-beta.AppImage

AppImage/components/host-backup.tsx

@@ -49,6 +49,7 @@ import { ScriptTerminalModal } from "./script-terminal-modal"
 import { fetchApi, getApiUrl } from "../lib/api-config"
 import { fetchTerminalTicket } from "../lib/terminal-ws"
 import { formatStorage, formatBytes } from "../lib/utils"
+import { getStorageUsageColor } from "../lib/storage-usage-color"
 
 // ── Shape contracts with the backend (flask_server.py: api_host_backups_*) ──
 
@@ -4581,11 +4582,15 @@ function DestinationRow({
       </div>
 
       {/* Capacity bar — matches the height of the <Progress> component
-          used on the Storage page (h-2). bg-muted track + solid blue
-          fill, no border. */}
+          used on the Storage page (h-2). Bar colour comes from the
+          shared storage palette so a 100% PBS datastore flags red
+          here too, not just on the Storage page. */}
       {capacity?.total && capacity.available !== undefined && (
         <div className="mb-3 h-2 bg-muted rounded-full overflow-hidden">
-          <div className="h-full rounded-full bg-blue-500" style={{ width: `${pct}%` }} />
+          <div
+            className={`h-full rounded-full ${getStorageUsageColor(pct ?? 0).bgClass}`}
+            style={{ width: `${pct}%` }}
+          />
         </div>
       )}
 
@@ -4609,7 +4614,11 @@ function DestinationRow({
         {capacity?.available !== undefined && (
           <div>
             <p className="text-sm text-muted-foreground">Free</p>
-            <p className={`font-medium ${pct !== null && pct > 90 ? "text-red-400" : pct !== null && pct > 75 ? "text-amber-400" : ""}`}>
+            <p
+              className={`font-medium ${
+                pct === null ? "" : getStorageUsageColor(pct).textClass
+              }`}
+            >
               {formatBytes(capacity.available)}
             </p>
           </div>

AppImage/lib/storage-usage-color.ts

@@ -0,0 +1,44 @@
+// Shared usage-bar palette for storage capacity widgets. Extracted
+// so the Storage page (overview cards + per-storage rows) and the
+// Backups page (Available Archives → per-archive capacity bar) flag
+// a full datastore with the same colour. Previously the Backups bar
+// was hard-coded to blue, so a 100%-full PBS-Cloud appeared in red
+// on Storage and in blue on Backups — same datastore, two different
+// signals.
+//
+// Thresholds: < 75 % green, 75–89 % amber, ≥ 90 % red. Matches the
+// existing Storage page palette and the "Free" text colour on the
+// Backups page (which was already amber/red, just disconnected from
+// the bar).
+
+export type UsageBarColor = {
+  /** Inline `background` value for SVG / style={} consumers. */
+  hex: string
+  /** Tailwind `bg-*` class for div consumers. */
+  bgClass: string
+  /** Tailwind `text-*` class for "Free" / counters that should
+   *  share the urgency signal. */
+  textClass: string
+}
+
+const GREEN: UsageBarColor = {
+  hex: "#22c55e",
+  bgClass: "bg-green-500",
+  textClass: "text-green-500",
+}
+const AMBER: UsageBarColor = {
+  hex: "#f59e0b",
+  bgClass: "bg-amber-500",
+  textClass: "text-amber-400",
+}
+const RED: UsageBarColor = {
+  hex: "#ef4444",
+  bgClass: "bg-red-500",
+  textClass: "text-red-400",
+}
+
+export function getStorageUsageColor(percent: number): UsageBarColor {
+  if (percent >= 90) return RED
+  if (percent >= 75) return AMBER
+  return GREEN
+}