jpmschweitzer/tatlock-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 5 Wiki Activity

feat: add reusable panel system with FilterPanel widget

Browse Source 
- 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>
This commit is contained in:
Jeroen Schweitzer
2025-12-31 14:54:14 +01:00
co-authored by Claude Opus 4.5
parent de739e8f7a
commit 948e104ce5
4 changed files with 331 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/control_room/presentation/pages/control_room_page.dart
+14 -102
View File
@@ -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,
);
}
}