From 8b3858455531508ba4a95193213dbfffecb8125a Mon Sep 17 00:00:00 2001
From: flemming-it <sf@flemming.it>
Date: Tue, 9 Jun 2026 01:57:30 +0200
Subject: [PATCH] feat(editor): flow list rows get icons + smarter byte
 formatting
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The FLOWS sidebar entries showed just "name" + "1234 B" — two
plain lines, no glyph, no visual hierarchy. Replaced with:

  - leading 28×28 rounded icon tile (account_tree_outlined),
    accent-tinted when the row is active so selection reads
    at a glance.
  - active row title bumps to FontWeight.w600 + onSecondaryContainer.
  - sizes formatted compactly: bytes / KB / MB so a 4.3 KB
    flow doesn't render as "4321 B" and a long one doesn't
    overflow into a multi-line ellipsis.

Bumped to 0.20.1.

Signed-off-by: flemming-it <sf@flemming.it>
---
 lib/src/flow_editor_page.dart | 70 +++++++++++++++++++++++++++++------
 pubspec.yaml                  |  2 +-
 2 files changed, 60 insertions(+), 12 deletions(-)

diff --git a/lib/src/flow_editor_page.dart b/lib/src/flow_editor_page.dart
index 45feef5..d4a60e1 100644
--- a/lib/src/flow_editor_page.dart
+++ b/lib/src/flow_editor_page.dart
@@ -1051,6 +1051,17 @@ class _FlowFile {
   });
 }
 
+/// Compact byte-count formatter used in the flow-list rows.
+/// '12 B' / '4.3 KB' / '1.2 MB'. Avoids overflowing the
+/// narrow sidebar with raw byte counts on long flows.
+String _formatBytes(int bytes) {
+  if (bytes < 1024) return '$bytes B';
+  if (bytes < 1024 * 1024) {
+    return '${(bytes / 1024).toStringAsFixed(1)} KB';
+  }
+  return '${(bytes / (1024 * 1024)).toStringAsFixed(1)} MB';
+}
+
 class _FileList extends StatelessWidget {
   final Future<List<_FlowFile>> filesFuture;
   final String? activeName;
@@ -1161,20 +1172,57 @@ class _FileList extends StatelessWidget {
                     ),
                   ),
                 ),
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
+                child: Row(
+                  crossAxisAlignment: CrossAxisAlignment.center,
                   children: [
-                    Text(
-                      f.name,
-                      style: theme.textTheme.bodyMedium?.copyWith(
-                        fontWeight: FontWeight.w500,
+                    // Subtle leading icon that distinguishes a
+                    // flow file from any other row in the
+                    // sidebar. Active row gets the accent
+                    // colour, others stay muted so the active
+                    // selection reads at a glance.
+                    Container(
+                      width: 28,
+                      height: 28,
+                      margin: const EdgeInsets.only(right: FaiSpace.sm),
+                      decoration: BoxDecoration(
+                        color: isActive
+                            ? theme.colorScheme.primary.withValues(alpha: 0.15)
+                            : theme.colorScheme.surfaceContainerHigh,
+                        borderRadius: BorderRadius.circular(FaiRadius.sm),
+                      ),
+                      child: Icon(
+                        Icons.account_tree_outlined,
+                        size: 16,
+                        color: isActive
+                            ? theme.colorScheme.primary
+                            : theme.colorScheme.onSurfaceVariant,
                       ),
-                      overflow: TextOverflow.ellipsis,
                     ),
-                    Text(
-                      '${f.sizeBytes} B',
-                      style: theme.textTheme.bodySmall?.copyWith(
-                        color: theme.colorScheme.onSurfaceVariant,
+                    Expanded(
+                      child: Column(
+                        crossAxisAlignment: CrossAxisAlignment.start,
+                        children: [
+                          Text(
+                            f.name,
+                            style: theme.textTheme.bodyMedium?.copyWith(
+                              fontWeight: isActive
+                                  ? FontWeight.w600
+                                  : FontWeight.w500,
+                              color: isActive
+                                  ? theme.colorScheme.onSecondaryContainer
+                                  : null,
+                            ),
+                            overflow: TextOverflow.ellipsis,
+                          ),
+                          const SizedBox(height: 1),
+                          Text(
+                            _formatBytes(f.sizeBytes),
+                            style: theme.textTheme.bodySmall?.copyWith(
+                              color: theme.colorScheme.onSurfaceVariant,
+                              fontSize: 11,
+                            ),
+                          ),
+                        ],
                       ),
                     ),
                   ],
diff --git a/pubspec.yaml b/pubspec.yaml
index e77161c..9dc664f 100644
--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -1,6 +1,6 @@
 name: fai_studio_flow_editor
 description: Swappable inline YAML editor for F∆I Studio flows.
-version: 0.20.0
+version: 0.20.1
 publish_to: 'none'
 repository: https://git.flemming.ai/fai/studio-flow-editor