From 9f86016a2ccb208bc0fe84f8fb880c9faac582ce Mon Sep 17 00:00:00 2001
From: Leonid Pershin <lpershin@syntellect.ru>
Date: Mon, 27 Jul 2026 23:54:05 +0300
Subject: [PATCH] Enhance StoragePanel with improved volume color coding and
 metric display

Added a color coding system for volume segments in the StoragePanel to visually distinguish between owned, foreign, and free storage. Updated the Metric component to include a swatch for better visual association with the corresponding volume. Enhanced comments for clarity and improved the display logic for free storage, ensuring users can easily identify low space conditions.
---
 .../features/admin/storage/StoragePanel.tsx   | 38 ++++++++++++++++---
 1 file changed, 33 insertions(+), 5 deletions(-)

diff --git a/frontend/src/features/admin/storage/StoragePanel.tsx b/frontend/src/features/admin/storage/StoragePanel.tsx
index 6ca1dfb..d56003a 100644
--- a/frontend/src/features/admin/storage/StoragePanel.tsx
+++ b/frontend/src/features/admin/storage/StoragePanel.tsx
@@ -10,6 +10,14 @@ import { Card, CardContent } from '@/shared/ui/card'
 import { getStorageStats } from './api'
 import { formatBytes, percentOf } from './format'
 
+/** Доли тома: своё, чужое и свободное. Свободное краснеет у порога — там его и надо заметить. */
+const VOLUME_COLORS = {
+  ours: 'bg-primary',
+  foreign: 'bg-muted-foreground/50',
+  free: 'bg-emerald-500/25',
+  lowFree: 'bg-destructive/50',
+}
+
 /** Цвета областей — те же и в полосе, и в списке: полоса без легенды не читается. */
 const AREA_COLORS: Record<StorageArea, string> = {
   Assets: 'bg-emerald-500',
@@ -101,18 +109,24 @@ export function StoragePanel() {
 
           {volumeKnown ? (
             <>
-              {/* Полоса тома: своё, чужое, свободное. */}
+              {/* Полоса тома: своё, чужое, свободное. Свободное — такая же доля, а не пустой
+                  остаток полосы: иначе непонятно, кончился ли диск или просто кончилась заливка. */}
               <div className="flex h-4 overflow-hidden rounded-full bg-muted/40">
                 <div
-                  className="bg-primary"
+                  className={VOLUME_COLORS.ours}
                   style={{ width: `${percentOf(storage, total)}%` }}
                   title={`${t('admin.storage.ours')} · ${formatBytes(storage)}`}
                 />
                 <div
-                  className="bg-muted-foreground/50"
+                  className={VOLUME_COLORS.foreign}
                   style={{ width: `${percentOf(foreign, total)}%` }}
                   title={`${t('admin.storage.foreign')} · ${formatBytes(foreign)}`}
                 />
+                <div
+                  className={lowSpace ? VOLUME_COLORS.lowFree : VOLUME_COLORS.free}
+                  style={{ width: `${percentOf(free, total)}%` }}
+                  title={`${t('admin.storage.free')} · ${formatBytes(free)}`}
+                />
               </div>
 
               <div className="grid gap-3 text-sm sm:grid-cols-4">
@@ -122,17 +136,20 @@ export function StoragePanel() {
                   value={formatBytes(storage)}
                   hint={`${percentOf(storage, total).toFixed(1)}%`}
                   accent="text-primary"
+                  swatch={VOLUME_COLORS.ours}
                 />
                 <Metric
                   label={t('admin.storage.foreign')}
                   value={formatBytes(foreign)}
                   hint={t('admin.storage.foreignHint')}
+                  swatch={VOLUME_COLORS.foreign}
                 />
                 <Metric
                   label={t('admin.storage.free')}
                   value={formatBytes(free)}
                   hint={`${percentOf(free, total).toFixed(1)}%`}
                   accent={lowSpace ? 'text-destructive' : 'text-emerald-500'}
+                  swatch={lowSpace ? VOLUME_COLORS.lowFree : VOLUME_COLORS.free}
                 />
               </div>
             </>
@@ -196,10 +213,21 @@ function Metric({
   value,
   hint,
   accent,
-}: Readonly<{ label: string; value: string; hint?: string; accent?: string }>) {
+  swatch,
+}: Readonly<{
+  label: string
+  value: string
+  hint?: string
+  accent?: string
+  /** Цвет доли на полосе тома: без него подпись и сегмент не связать глазами. */
+  swatch?: string
+}>) {
   return (
     <div className="flex flex-col">
-      <span className="text-xs uppercase tracking-wide text-muted-foreground">{label}</span>
+      <span className="flex items-center gap-1.5 text-xs uppercase tracking-wide text-muted-foreground">
+        {swatch && <span className={cn('h-2.5 w-2.5 shrink-0 rounded-sm', swatch)} />}
+        {label}
+      </span>
       <span className={cn('font-mono text-lg tabular-nums', accent)}>{value}</span>
       {hint && <span className="text-xs text-muted-foreground">{hint}</span>}
     </div>