fai/chain-studio-flow-editor
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(editor): flow list rows get icons + smarter byte formatting

Browse source 
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>
This commit is contained in:
flemming-it 2026-06-09 01:57:30 +02:00
parent 5cd2745db5
commit 8b38584555
2 changed files with 60 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

70
lib/src/flow_editor_page.dart
View file

@ -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,
),
),
],
),
),
],