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

feat: add Nav Panel with URL-routed section navigation

Browse Source 
- Add NavPanel widget for room-level section navigation
- Add Control Room feature router with URL routes:
  - /control-room/containers
  - /control-room/networks
  - /control-room/volumes
  - /control-room/images
- Sections: Containers, Networks, Volumes, Images
- Navigation updates URL and vice versa (deep-linkable)
- Remove redundant Stacks section (handled by filter panel)

🤖 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:28:01 +01:00
co-authored by Claude Opus 4.5
parent c2b487610c
commit b189c3518b
5 changed files with 411 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/control_room/presentation/pages/control_room_page.dart
+145 -13
View File
@@ -1,37 +1,80 @@
import 'package:flutter/material.dart' hide Stack;
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import 'package:tatlock_ui/features/control_room/containers/presentation/pages/containers_list_page.dart';
import 'package:tatlock_ui/features/control_room/router.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';
import 'package:tatlock_ui/shared/layouts/widgets/nav_panel.dart';
/// Main Control Room page with stacks sidebar and containers view.
/// 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});
const ControlRoomPage({
super.key,
this.section = ControlRoomSection.containers,
});
/// The current section to display.
final ControlRoomSection section;
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedStack = ref.watch(selectedStackProvider);
final colorScheme = Theme.of(context).colorScheme;
return Scaffold(
body: Row(
children: [
// Stacks sidebar
const _StacksSidebar(),
// Nav Panel - section navigation
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,
);
// Navigate to section URL
context.go(pathForSection(newSection));
// Clear stack selection when changing sections
ref.read(selectedStackProvider.notifier).clear();
},
),
// Divider
VerticalDivider(
width: 1,
thickness: 1,
color: Theme.of(context).colorScheme.outlineVariant,
color: colorScheme.outlineVariant,
),
// Main content area - shows either all containers or stack detail
// Section content
Expanded(
child: selectedStack == null
? const ContainersListPage()
: StackDetailPage(stackId: selectedStack),
child: _SectionContent(section: section),
),
],
),
@@ -39,9 +82,98 @@ class ControlRoomPage extends ConsumerWidget {
}
}
/// Sidebar showing stacks list (Filter Panel per UI_LAYOUT.md).
class _StacksSidebar extends ConsumerWidget {
const _StacksSidebar();
/// Renders content for the selected section.
class _SectionContent extends ConsumerWidget {
const _SectionContent({required this.section});
final ControlRoomSection section;
@override
Widget build(BuildContext context, WidgetRef ref) {
switch (section) {
case ControlRoomSection.containers:
return const _ContainersSection();
case ControlRoomSection.networks:
case ControlRoomSection.volumes:
case ControlRoomSection.images:
return _PlaceholderSection(section: section);
}
}
}
/// Containers section with optional stack filter.
class _ContainersSection extends ConsumerWidget {
const _ContainersSection();
@override
Widget build(BuildContext context, WidgetRef ref) {
final selectedStack = ref.watch(selectedStackProvider);
final colorScheme = Theme.of(context).colorScheme;
return Row(
children: [
// Stacks filter panel
const _StacksFilterPanel(),
// Divider
VerticalDivider(
width: 1,
thickness: 1,
color: colorScheme.outlineVariant,
),
// Main content - containers list or stack detail
Expanded(
child: selectedStack == null
? const ContainersListPage()
: StackDetailPage(stackId: selectedStack),
),
],
);
}
}
/// Placeholder for sections not yet implemented.
class _PlaceholderSection extends StatelessWidget {
const _PlaceholderSection({required this.section});
final ControlRoomSection section;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;
return Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
section.icon,
size: 64,
color: colorScheme.outline,
),
const SizedBox(height: 16),
Text(
section.label,
style: textTheme.headlineSmall?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 8),
Text(
'Coming soon',
style: textTheme.bodyMedium?.copyWith(
color: colorScheme.outline,
),
),
],
),
);
}
}
/// Stacks filter panel for Containers section (includes "All Containers" option).
class _StacksFilterPanel extends ConsumerWidget {
const _StacksFilterPanel();
@override
Widget build(BuildContext context, WidgetRef ref) {
lib/features/control_room/router.dart
+77
View File
@@ -0,0 +1,77 @@
import 'package:go_router/go_router.dart';
import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
/// Route paths for Control Room.
abstract class ControlRoomRoutes {
static const base = '/control-room';
static const containers = '/control-room/containers';
static const networks = '/control-room/networks';
static const volumes = '/control-room/volumes';
static const images = '/control-room/images';
}
/// Control Room section from route.
ControlRoomSection? sectionFromPath(String path) {
if (path.startsWith(ControlRoomRoutes.networks)) {
return ControlRoomSection.networks;
} else if (path.startsWith(ControlRoomRoutes.volumes)) {
return ControlRoomSection.volumes;
} else if (path.startsWith(ControlRoomRoutes.images)) {
return ControlRoomSection.images;
} else if (path.startsWith(ControlRoomRoutes.containers) ||
path == ControlRoomRoutes.base) {
return ControlRoomSection.containers;
}
return null;
}
/// Get route path for a section.
String pathForSection(ControlRoomSection section) {
switch (section) {
case ControlRoomSection.containers:
return ControlRoomRoutes.containers;
case ControlRoomSection.networks:
return ControlRoomRoutes.networks;
case ControlRoomSection.volumes:
return ControlRoomRoutes.volumes;
case ControlRoomSection.images:
return ControlRoomRoutes.images;
}
}
/// Control Room routes for go_router.
List<RouteBase> controlRoomRoutes() {
return [
// Redirect /control-room to /control-room/containers
GoRoute(
path: ControlRoomRoutes.base,
name: 'controlRoom',
redirect: (context, state) => ControlRoomRoutes.containers,
),
// Section routes
GoRoute(
path: ControlRoomRoutes.containers,
name: 'controlRoomContainers',
builder: (context, state) =>
const ControlRoomPage(section: ControlRoomSection.containers),
),
GoRoute(
path: ControlRoomRoutes.networks,
name: 'controlRoomNetworks',
builder: (context, state) =>
const ControlRoomPage(section: ControlRoomSection.networks),
),
GoRoute(
path: ControlRoomRoutes.volumes,
name: 'controlRoomVolumes',
builder: (context, state) =>
const ControlRoomPage(section: ControlRoomSection.volumes),
),
GoRoute(
path: ControlRoomRoutes.images,
name: 'controlRoomImages',
builder: (context, state) =>
const ControlRoomPage(section: ControlRoomSection.images),
),
];
}
lib/routing/app_router.dart
+2 -9
View File
@@ -1,7 +1,7 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'package:tatlock_ui/features/control_room/presentation/pages/control_room_page.dart';
import 'package:tatlock_ui/features/control_room/router.dart';
import 'package:tatlock_ui/features/front_hall/presentation/pages/front_hall_page.dart';
import 'package:tatlock_ui/shared/layouts/app_scaffold.dart';
@@ -10,9 +10,6 @@ part 'app_router.g.dart';
/// Route paths as constants.
abstract class AppRoutes {
static const frontHall = '/';
static const controlRoom = '/control-room';
static const containers = '/control-room/containers';
static const containerDetail = '/control-room/containers/:id';
static const parlor = '/parlor';
static const settings = '/settings';
}
@@ -32,11 +29,7 @@ GoRouter appRouter(AppRouterRef ref) {
name: 'frontHall',
builder: (context, state) => const FrontHallPage(),
),
GoRoute(
path: AppRoutes.controlRoom,
name: 'controlRoom',
builder: (context, state) => const ControlRoomPage(),
),
...controlRoomRoutes(),
GoRoute(
path: AppRoutes.parlor,
name: 'parlor',
lib/shared/layouts/app_scaffold.dart
+3 -2
View File
@@ -1,5 +1,6 @@
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import 'package:tatlock_ui/features/control_room/router.dart';
import 'package:tatlock_ui/routing/app_router.dart';
import 'package:tatlock_ui/shared/layouts/widgets/top_header_bar.dart';
@@ -52,7 +53,7 @@ class AppScaffold extends StatelessWidget {
int _selectedIndex(BuildContext context) {
final location = GoRouterState.of(context).matchedLocation;
if (location.startsWith(AppRoutes.controlRoom)) return 1;
if (location.startsWith(ControlRoomRoutes.base)) return 1;
if (location.startsWith(AppRoutes.parlor)) return 2;
// Settings is no longer in main nav (accessed via Profile dropdown)
return 0; // Front Hall
@@ -61,7 +62,7 @@ class AppScaffold extends StatelessWidget {
void _onNavSelected(BuildContext context, int index) {
final route = switch (index) {
0 => AppRoutes.frontHall,
1 => AppRoutes.controlRoom,
1 => ControlRoomRoutes.containers,
2 => AppRoutes.parlor,
_ => AppRoutes.frontHall,
};
lib/shared/layouts/widgets/nav_panel.dart
+184
View File
@@ -0,0 +1,184 @@
import 'package:flutter/material.dart';
import 'panel_header.dart';
/// A navigation section item in the NavPanel.
class NavSection {
const NavSection({
required this.id,
required this.label,
required this.icon,
this.badge,
});
/// Unique identifier for routing.
final String id;
/// Display label.
final String label;
/// Section icon.
final IconData icon;
/// Optional badge (e.g., item count).
final String? badge;
}
/// Left-side navigation panel for room-level section navigation.
///
/// Shows a list of sections within the current room (e.g., Containers, Stacks,
/// Networks for 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 NavPanel extends StatelessWidget {
const NavPanel({
super.key,
required this.title,
required this.icon,
required this.sections,
required this.selectedId,
required this.onSectionSelected,
this.width = 280,
this.trailing,
});
/// Panel title displayed in header.
final String title;
/// Leading icon for the header.
final IconData icon;
/// List of navigation sections.
final List<NavSection> sections;
/// Currently selected section ID.
final String selectedId;
/// Callback when a section is tapped.
final ValueChanged<String> onSectionSelected;
/// Panel width (default 280px per UI_LAYOUT.md spec).
final double width;
/// Optional trailing widget below sections (e.g., external links).
final Widget? trailing;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return SizedBox(
width: width,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
PanelHeader(
title: title,
icon: icon,
dockToBottom: true, // Left-side panel
),
Expanded(
child: ListView.builder(
padding: const EdgeInsets.symmetric(vertical: 8),
itemCount: sections.length,
itemBuilder: (context, index) {
final section = sections[index];
final isSelected = section.id == selectedId;
return _NavTile(
section: section,
isSelected: isSelected,
onTap: () => onSectionSelected(section.id),
);
},
),
),
if (trailing != null) ...[
Divider(height: 1, color: colorScheme.outlineVariant),
trailing!,
],
],
),
);
}
}
class _NavTile extends StatelessWidget {
const _NavTile({
required this.section,
required this.isSelected,
required this.onTap,
});
final NavSection section;
final bool isSelected;
final VoidCallback onTap;
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final textTheme = Theme.of(context).textTheme;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
child: Material(
color: isSelected
? colorScheme.primaryContainer.withValues(alpha: 0.4)
: Colors.transparent,
borderRadius: BorderRadius.circular(8),
child: InkWell(
onTap: onTap,
borderRadius: BorderRadius.circular(8),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
child: Row(
children: [
Icon(
section.icon,
size: 20,
color: isSelected
? colorScheme.primary
: colorScheme.onSurfaceVariant,
),
const SizedBox(width: 12),
Expanded(
child: Text(
section.label,
style: textTheme.bodyMedium?.copyWith(
color: isSelected
? colorScheme.primary
: colorScheme.onSurface,
fontWeight: isSelected ? FontWeight.w600 : null,
),
),
),
if (section.badge != null)
Container(
padding: const EdgeInsets.symmetric(
horizontal: 8,
vertical: 2,
),
decoration: BoxDecoration(
color: isSelected
? colorScheme.primary.withValues(alpha: 0.2)
: colorScheme.surfaceContainerHighest,
borderRadius: BorderRadius.circular(12),
),
child: Text(
section.badge!,
style: textTheme.labelSmall?.copyWith(
color: isSelected
? colorScheme.primary
: colorScheme.onSurfaceVariant,
),
),
),
],
),
),
),
),
);
}
}