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

feat(front-hall): implement three-mode layout with quick links panel

Browse Source 
Phase 2 of Organizr Migration - Front Hall restructure:

- Add FrontHallState provider with three modes (dashboard, iframe, settings)
- Create QuickLinksPanel widget with categorized links and overflow menus
- Add IframeView with platform-aware implementation (web iframe, mobile fallback)
- Extract DashboardContent from FrontHallPage
- Add QuickLinkSettingsContent placeholder for Phase 4 link editor
- Implement QuickLink entity and data layer with Core API datasource
- Add default quick links fallback when API unavailable
- Update UI_LAYOUT.md with Front Hall panel configurations

🤖 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
2026-01-02 22:24:20 +01:00
co-authored by Claude Opus 4.5
parent 4f8d0f521f
commit 40db92d9d5
13 changed files with 1693 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/features/front_hall/presentation/pages/front_hall_page.dart
+51 -129
View File
@@ -1,142 +1,64 @@
import 'package:flutter/material.dart';
import 'package:tatlock_ui/version.g.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:tatlock_ui/features/front_hall/presentation/providers/front_hall_state_provider.dart';
import 'package:tatlock_ui/features/front_hall/presentation/widgets/dashboard_content.dart';
import 'package:tatlock_ui/features/front_hall/presentation/widgets/iframe_view.dart';
import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_link_settings_content.dart';
import 'package:tatlock_ui/features/front_hall/presentation/widgets/quick_links_panel.dart';
/// Front Hall - estate overview and quick access.
class FrontHallPage extends StatelessWidget {
///
/// Three-mode content area:
/// - Dashboard: Stats, weather, welcome message
/// - Iframe: Embedded external content (web only)
/// - Settings: Quick link management
class FrontHallPage extends ConsumerWidget {
const FrontHallPage({super.key});
@override
Widget build(BuildContext context) {
Widget build(BuildContext context, WidgetRef ref) {
final colorScheme = Theme.of(context).colorScheme;
final frontHallState = ref.watch(frontHallStateProvider);
// No Scaffold/AppBar needed - header is provided by AppScaffold
return ListView(
padding: const EdgeInsets.all(16),
children: [
// Welcome card
Card(
child: Padding(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Icon(
Icons.waving_hand,
size: 32,
color: colorScheme.primary,
),
const SizedBox(width: 12),
Flexible(
child: Text(
'Welcome to Tatlock',
style: Theme.of(context).textTheme.headlineSmall,
),
),
],
),
const SizedBox(height: 12),
Text(
'Your homelab dashboard is ready. More features coming soon.',
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: colorScheme.onSurfaceVariant,
),
),
],
),
),
),
const SizedBox(height: 16),
return Row(
children: [
// Left panel - Quick Links
const QuickLinksPanel(),
// Quick stats placeholder
Wrap(
spacing: 12,
runSpacing: 12,
children: [
SizedBox(
width: 160,
child: _StatCard(
icon: Icons.memory,
label: 'CPU',
value: '--',
color: colorScheme.primary,
),
),
SizedBox(
width: 160,
child: _StatCard(
icon: Icons.storage,
label: 'Memory',
value: '--',
color: colorScheme.secondary,
),
),
SizedBox(
width: 160,
child: _StatCard(
icon: Icons.dns,
label: 'Containers',
value: '--',
color: colorScheme.tertiary,
),
),
],
),
const SizedBox(height: 24),
// Version info
Center(
child: Text(
'${AppVersion.name} v${AppVersion.fullVersion}',
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: colorScheme.outline,
),
),
),
],
);
}
}
class _StatCard extends StatelessWidget {
const _StatCard({
required this.icon,
required this.label,
required this.value,
required this.color,
});
final IconData icon;
final String label;
final String value;
final Color color;
@override
Widget build(BuildContext context) {
return Card(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Icon(icon, size: 32, color: color),
const SizedBox(height: 8),
Text(
value,
style: Theme.of(context).textTheme.headlineMedium?.copyWith(
fontWeight: FontWeight.bold,
),
),
const SizedBox(height: 4),
Text(
label,
style: Theme.of(context).textTheme.bodySmall?.copyWith(
color: Theme.of(context).colorScheme.outline,
),
),
],
// Vertical divider
VerticalDivider(
width: 1,
thickness: 1,
color: colorScheme.outlineVariant,
),
),
// Main content area - switches based on mode
Expanded(
child: _buildContent(context, ref, frontHallState),
),
],
);
}
Widget _buildContent(
BuildContext context,
WidgetRef ref,
FrontHallState state,
) {
switch (state.mode) {
case FrontHallMode.dashboard:
return const DashboardContent();
case FrontHallMode.iframe:
return IframeView(
url: state.activeIframeUrl!,
title: state.activeIframeTitle ?? 'External Content',
onClose: () =>
ref.read(frontHallStateProvider.notifier).showDashboard(),
);
case FrontHallMode.settings:
return const QuickLinkSettingsContent();
}
}
}