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

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>
2026-01-02 22:24:20 +01:00
parent 4f8d0f521f
commit 40db92d9d5
13 changed files with 1693 additions and 133 deletions
@@ -0,0 +1,144 @@
+import 'package:flutter/material.dart';
+import 'package:tatlock_ui/version.g.dart';
+
+/// Dashboard content shown in Front Hall when mode is dashboard.
+///
+/// Displays system stats, welcome message, and version info.
+/// Will be expanded with weather and air quality widgets in Phase 3.
+class DashboardContent extends StatelessWidget {
+  const DashboardContent({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    final colorScheme = Theme.of(context).colorScheme;
+
+    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),
+
+        // 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,
+                  ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}