feat: add NPM and Authentik sections to Control Room navigation

- Add ControlRoomNav enum with section grouping (Portainer, NPM, Authentik)
- Update NavPanel to support conditional section headers
- Rename NavSection to NavItem with optional section field
- Add routes for NPM: Proxy Hosts, Redirections, Streams, SSL Certificates
- Add routes for Authentik: Users, Groups, Applications
- Section headers auto-show when multiple sections exist

🤖 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 16:52:10 +01:00
co-authored by Claude Opus 4.5
parent cbf6ca5338
commit ae2bbcd58d
3 changed files with 198 additions and 132 deletions
@@ -11,35 +11,15 @@ import 'package:tatlock_ui/features/control_room/stacks/presentation/widgets/sta
import 'package:tatlock_ui/shared/layouts/widgets/filter_panel.dart';
import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
/// Control Room navigation sections.
enum ControlRoomSection {
containers('containers', 'Containers', Icons.dns),
networks('networks', 'Networks', Icons.hub),
volumes('volumes', 'Volumes', Icons.storage),
images('images', 'Images', Icons.photo_library);
const ControlRoomSection(this.id, this.label, this.icon);
final String id;
final String label;
final IconData icon;
NavSection toNavSection() => NavSection(
id: id,
label: label,
icon: icon,
);
}
/// Main Control Room page with nav panel and section content.
class ControlRoomPage extends ConsumerWidget {
const ControlRoomPage({
super.key,
this.section = ControlRoomSection.containers,
this.nav = ControlRoomNav.containers,
});
/// The current section to display.
final ControlRoomSection section;
/// The current nav item to display.
final ControlRoomNav nav;
@override
Widget build(BuildContext context, WidgetRef ref) {
@@ -48,20 +28,18 @@ class ControlRoomPage extends ConsumerWidget {
return Scaffold(
body: Row(
children: [
// Nav Panel - section navigation
// Nav Panel - section navigation with grouping
NavPanel(
title: 'Sections',
icon: Icons.dns_outlined,
sections: ControlRoomSection.values
.map((s) => s.toNavSection())
.toList(),
selectedId: section.id,
onSectionSelected: (id) {
final newSection = ControlRoomSection.values.firstWhere(
(s) => s.id == id,
items: ControlRoomNav.values.map((n) => n.toNavItem()).toList(),
selectedId: nav.id,
onItemSelected: (id) {
final newNav = ControlRoomNav.values.firstWhere(
(n) => n.id == id,
);
// Navigate to section URL
context.go(pathForSection(newSection));
context.go(pathForNav(newNav));
// Clear stack selection when changing sections
ref.read(selectedStackProvider.notifier).clear();
},
@@ -74,7 +52,7 @@ class ControlRoomPage extends ConsumerWidget {
),
// Section content
Expanded(
child: _SectionContent(section: section),
child: _SectionContent(nav: nav),
),
],
),
@@ -82,21 +60,19 @@ class ControlRoomPage extends ConsumerWidget {
}
}
/// Renders content for the selected section.
/// Renders content for the selected nav item.
class _SectionContent extends ConsumerWidget {
const _SectionContent({required this.section});
const _SectionContent({required this.nav});
final ControlRoomSection section;
final ControlRoomNav nav;
@override
Widget build(BuildContext context, WidgetRef ref) {
switch (section) {
case ControlRoomSection.containers:
switch (nav) {
case ControlRoomNav.containers:
return const _ContainersSection();
case ControlRoomSection.networks:
case ControlRoomSection.volumes:
case ControlRoomSection.images:
return _PlaceholderSection(section: section);
default:
return _PlaceholderSection(nav: nav);
}
}
}
@@ -131,11 +107,11 @@ class _ContainersSection extends ConsumerWidget {
}
}
/// Placeholder for sections not yet implemented.
/// Placeholder for nav items not yet implemented.
class _PlaceholderSection extends StatelessWidget {
const _PlaceholderSection({required this.section});
const _PlaceholderSection({required this.nav});
final ControlRoomSection section;
final ControlRoomNav nav;
@override
Widget build(BuildContext context) {
@@ -147,20 +123,20 @@ class _PlaceholderSection extends StatelessWidget {
mainAxisSize: MainAxisSize.min,
children: [
Icon(
section.icon,
nav.icon,
size: 64,
color: colorScheme.outline,
),
const SizedBox(height: 16),
Text(
section.label,
nav.label,
style: textTheme.headlineSmall?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
Text(
'Coming soon',
'${nav.section} • Coming soon',
style: textTheme.bodyMedium?.copyWith(
color: colorScheme.outline,
),