Implement multi-screen app UI flow and navigation

2026-02-15 13:57:24 +01:00
parent d5146d6b09
commit ac9577c759
21 changed files with 1648 additions and 60 deletions
@@ -0,0 +1,116 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:relationship_saver/core/config/app_theme.dart';
+import 'package:relationship_saver/features/local/local_models.dart';
+import 'package:relationship_saver/features/local/local_repository.dart';
+import 'package:relationship_saver/features/shared/frosted_card.dart';
+
+class MomentsView extends ConsumerWidget {
+  const MomentsView({super.key});
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final LocalRepository repository = ref.watch(localRepositoryProvider);
+    final List<RelationshipMoment> moments = repository.moments();
+    final Map<String, PersonProfile> peopleById = <String, PersonProfile>{
+      for (final PersonProfile person in repository.people()) person.id: person,
+    };
+
+    return Padding(
+      padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: <Widget>[
+          Text('Moments', style: Theme.of(context).textTheme.headlineMedium),
+          const SizedBox(height: 6),
+          Text(
+            'Capture wins and signals from everyday interactions.',
+            style: Theme.of(
+              context,
+            ).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
+          ),
+          const SizedBox(height: 16),
+          FrostedCard(
+            child: Row(
+              children: <Widget>[
+                Expanded(
+                  child: TextField(
+                    decoration: InputDecoration(
+                      hintText:
+                          'Quick capture: what happened, how it felt, what to repeat...',
+                      hintStyle: Theme.of(context).textTheme.bodyMedium
+                          ?.copyWith(color: AppTheme.textSecondary),
+                      border: InputBorder.none,
+                    ),
+                  ),
+                ),
+                FilledButton.icon(
+                  onPressed: () {},
+                  icon: const Icon(Icons.add_rounded),
+                  label: const Text('Add Capture'),
+                ),
+              ],
+            ),
+          ),
+          const SizedBox(height: 16),
+          Expanded(
+            child: ListView.separated(
+              itemCount: moments.length,
+              separatorBuilder: (_, _) => const SizedBox(height: 12),
+              itemBuilder: (BuildContext context, int index) {
+                final RelationshipMoment moment = moments[index];
+                final PersonProfile? person = peopleById[moment.personId];
+                return FrostedCard(
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: <Widget>[
+                      Container(
+                        width: 12,
+                        height: 12,
+                        margin: const EdgeInsets.only(top: 6),
+                        decoration: const BoxDecoration(
+                          color: Color(0xFF1AB6C8),
+                          shape: BoxShape.circle,
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: <Widget>[
+                            Text(
+                              moment.title,
+                              style: Theme.of(context).textTheme.titleMedium,
+                            ),
+                            const SizedBox(height: 4),
+                            Text(
+                              '${person?.name ?? 'Unknown'} • ${moment.type.toUpperCase()}',
+                              style: Theme.of(context).textTheme.labelLarge
+                                  ?.copyWith(color: AppTheme.textSecondary),
+                            ),
+                            const SizedBox(height: 8),
+                            Text(
+                              moment.summary,
+                              style: Theme.of(context).textTheme.bodyLarge,
+                            ),
+                          ],
+                        ),
+                      ),
+                      const SizedBox(width: 12),
+                      Text(
+                        '${moment.at.month}/${moment.at.day}',
+                        style: Theme.of(context).textTheme.labelLarge?.copyWith(
+                          color: AppTheme.textSecondary,
+                        ),
+                      ),
+                    ],
+                  ),
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}