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>

lib/features/control_room/presentation/pages/control_room_page.dart

@@ -1,14 +1,12 @@
 import 'package:flutter/material.dart' hide Stack;
 import 'package:flutter_riverpod/flutter_riverpod.dart';
-import 'package:url_launcher/url_launcher.dart';
-
-import '../../../../core/config/app_config.dart';
-import '../../containers/presentation/pages/containers_list_page.dart';
-import '../../stacks/data/repositories/stack_repository_impl.dart';
-import '../../stacks/domain/entities/stack.dart';
-import '../../stacks/presentation/pages/stack_detail_page.dart';
-import '../../stacks/presentation/providers/stacks_provider.dart';
-import '../../stacks/presentation/widgets/stack_list_tile.dart';
+import 'package:tatlock_ui/features/control_room/containers/presentation/pages/containers_list_page.dart';
+import 'package:tatlock_ui/features/control_room/stacks/data/repositories/stack_repository_impl.dart';
+import 'package:tatlock_ui/features/control_room/stacks/domain/entities/stack.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/pages/stack_detail_page.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/providers/stacks_provider.dart';
+import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/stack_list_tile.dart';
+import 'package:tatlock_ui/shared/layouts/widgets/filter_panel.dart';
 
 /// Main Control Room page with stacks sidebar and containers view.
 class ControlRoomPage extends ConsumerWidget {
@@ -41,7 +39,7 @@ class ControlRoomPage extends ConsumerWidget {
   }
 }
 
-/// Sidebar showing stacks list.
+/// Sidebar showing stacks list (Filter Panel per UI_LAYOUT.md).
 class _StacksSidebar extends ConsumerWidget {
   const _StacksSidebar();
 
@@ -51,46 +49,18 @@ class _StacksSidebar extends ConsumerWidget {
     final selectedStack = ref.watch(selectedStackProvider);
     final colorScheme = Theme.of(context).colorScheme;
 
-    return SizedBox(
-      width: 280,
+    return FilterPanel(
+      title: 'Stacks',
+      icon: Icons.layers,
+      onRefresh: () => ref.invalidate(stacksProvider),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.stretch,
         children: [
-          // Header
-          Container(
-            padding: const EdgeInsets.all(16),
-            decoration: BoxDecoration(
-              color: colorScheme.surfaceContainerHighest,
-              border: Border(
-                bottom: BorderSide(color: colorScheme.outlineVariant),
-              ),
-            ),
-            child: Row(
-              children: [
-                Icon(
-                  Icons.layers,
-                  color: colorScheme.primary,
-                ),
-                const SizedBox(width: 12),
-                Text(
-                  'Stacks',
-                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
-                        fontWeight: FontWeight.w600,
-                      ),
-                ),
-                const Spacer(),
-                IconButton(
-                  icon: const Icon(Icons.refresh, size: 20),
-                  tooltip: 'Refresh stacks',
-                  onPressed: () => ref.invalidate(stacksProvider),
-                ),
-              ],
-            ),
-          ),
           // All containers option
           ListTile(
             selected: selectedStack == null,
-            selectedTileColor: colorScheme.primaryContainer.withValues(alpha: 0.3),
+            selectedTileColor:
+                colorScheme.primaryContainer.withValues(alpha: 0.3),
             leading: Icon(
               Icons.all_inbox,
               color: selectedStack == null
@@ -136,44 +106,6 @@ class _StacksSidebar extends ConsumerWidget {
               ),
             ),
           ),
-          // External links
-          const Divider(height: 1),
-          Padding(
-            padding: const EdgeInsets.all(8),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                Text(
-                  'External',
-                  style: Theme.of(context).textTheme.labelSmall?.copyWith(
-                        color: colorScheme.outline,
-                      ),
-                ),
-                const SizedBox(height: 4),
-                Wrap(
-                  spacing: 4,
-                  children: [
-                    _ExternalLinkChip(
-                      label: 'Portainer',
-                      icon: Icons.dashboard,
-                      onTap: () => launchUrl(
-                        Uri.parse(AppConfig.portainerUrl),
-                        mode: LaunchMode.externalApplication,
-                      ),
-                    ),
-                    _ExternalLinkChip(
-                      label: 'Netdata',
-                      icon: Icons.analytics,
-                      onTap: () => launchUrl(
-                        Uri.parse(AppConfig.netdataUrl),
-                        mode: LaunchMode.externalApplication,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
-            ),
-          ),
         ],
       ),
     );
@@ -358,23 +290,3 @@ class _StacksListState extends State<_StacksList> {
   }
 }
 
-class _ExternalLinkChip extends StatelessWidget {
-  const _ExternalLinkChip({
-    required this.label,
-    required this.icon,
-    required this.onTap,
-  });
-
-  final String label;
-  final IconData icon;
-  final VoidCallback onTap;
-
-  @override
-  Widget build(BuildContext context) {
-    return ActionChip(
-      avatar: Icon(icon, size: 16),
-      label: Text(label),
-      onPressed: onTap,
-    );
-  }
-}

lib/shared/layouts/widgets/filter_panel.dart

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

lib/shared/layouts/widgets/panel_header.dart

@@ -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!,
+        ],
+      ),
+    );
+  }
+}