feat: add reusable panel system with FilterPanel widget

- Update UI_LAYOUT.md with comprehensive panel taxonomy - Document Nav Panel, Filter Panel, Detail Panel, Chat Dock specs - Add panel header behavior (bottom-docked for left panels) - Add responsive breakpoints with panel folding summary - Create PanelHeader widget with dockToBottom option - Create FilterPanel widget for data filtering sidebars - Refactor Control Room to use FilterPanel - Remove external links from sidebar (cleanup) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2025-12-31 14:54:14 +01:00
parent de739e8f7a
commit 948e104ce5
4 changed files with 331 additions and 144 deletions
@@ -0,0 +1,64 @@
+import 'package:flutter/material.dart';
+
+import 'panel_header.dart';
+
+/// Left-side filter panel for data filtering and selection.
+///
+/// Used within primary content area to filter data grids (e.g., stack list
+/// in Control Room). Header content is docked to bottom to accommodate
+/// the logo bulge overlay.
+///
+/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
+class FilterPanel extends StatelessWidget {
+  const FilterPanel({
+    super.key,
+    required this.title,
+    required this.icon,
+    required this.child,
+    this.width = 280,
+    this.onRefresh,
+  });
+
+  /// Panel title displayed in header.
+  final String title;
+
+  /// Leading icon for the header.
+  final IconData icon;
+
+  /// Panel content (e.g., list, search field, filters).
+  final Widget child;
+
+  /// Panel width (default 280px per UI_LAYOUT.md spec).
+  final double width;
+
+  /// Optional refresh callback - adds refresh button to header.
+  final VoidCallback? onRefresh;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          PanelHeader(
+            title: title,
+            icon: icon,
+            dockToBottom: true, // Left-side panel
+            actions: [
+              if (onRefresh != null)
+                IconButton(
+                  icon: const Icon(Icons.refresh, size: 20),
+                  tooltip: 'Refresh',
+                  onPressed: onRefresh,
+                  padding: EdgeInsets.zero,
+                  constraints: const BoxConstraints(),
+                ),
+            ],
+          ),
+          Expanded(child: child),
+        ],
+      ),
+    );
+  }
+}
@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+/// Panel header with configurable content alignment.
+///
+/// Left-side panels (Nav, Filter) should use [dockToBottom: true] to
+/// accommodate the logo bulge overlay. Right-side panels use default centering.
+///
+/// See UI_LAYOUT.md for panel taxonomy and layout specifications.
+class PanelHeader extends StatelessWidget {
+  const PanelHeader({
+    super.key,
+    required this.title,
+    required this.icon,
+    this.actions,
+    this.dockToBottom = false,
+    this.height = 56.0,
+  });
+
+  /// Panel title text.
+  final String title;
+
+  /// Leading icon for the panel.
+  final IconData icon;
+
+  /// Optional action widgets (e.g., refresh button).
+  final List<Widget>? actions;
+
+  /// Whether to dock content to bottom (for left-side panels under logo bulge).
+  final bool dockToBottom;
+
+  /// Header height (should match app header height).
+  final double height;
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    return Container(
+      height: height,
+      padding: EdgeInsets.only(
+        left: 16,
+        right: 8,
+        bottom: dockToBottom ? 8 : 0,
+      ),
+      alignment: dockToBottom ? Alignment.bottomCenter : Alignment.center,
+      decoration: BoxDecoration(
+        color: colorScheme.surfaceContainerHighest,
+        border: Border(
+          bottom: BorderSide(color: colorScheme.outlineVariant),
+        ),
+      ),
+      child: Row(
+        crossAxisAlignment:
+            dockToBottom ? CrossAxisAlignment.end : CrossAxisAlignment.center,
+        children: [
+          Icon(icon, color: colorScheme.primary),
+          const SizedBox(width: 12),
+          Text(
+            title,
+            style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                  fontWeight: FontWeight.w600,
+                ),
+          ),
+          const Spacer(),
+          if (actions != null) ...actions!,
+        ],
+      ),
+    );
+  }
+}