feat: add Nav Panel with URL-routed section navigation
- 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
co-authored by
Claude Opus 4.5
Claude Opus 4.5
parent
c2b487610c
commit
b189c3518b
@@ -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) {
|
||||
|
||||
@@ -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),
|
||||
),
|
||||
];
|
||||
}
|
||||
Reference in New Issue
Block a user