Refine views for mobile-first and responsive layouts
This commit is contained in:
Rijad Zuzo
@@ -2,6 +2,31 @@
|
||||
|
||||
Updated: 2026-02-15
|
||||
|
||||
## Latest Milestone (2026-02-15): Cross-View Responsive Pass
|
||||
|
||||
Audited and adjusted the main product views for mobile-first behavior while preserving desktop/web UX:
|
||||
|
||||
- Updated responsive behavior and compact spacing for:
|
||||
- `lib/features/dashboard/dashboard_view.dart`
|
||||
- `lib/features/moments/moments_view.dart`
|
||||
- `lib/features/ideas/ideas_view.dart`
|
||||
- `lib/features/reminders/reminders_view.dart`
|
||||
- `lib/features/signals/signals_view.dart`
|
||||
- `lib/features/settings/settings_view.dart`
|
||||
- `lib/features/sync/sync_view.dart`
|
||||
- `lib/features/auth/sign_in_view.dart`
|
||||
- `lib/features/people/people_view.dart`
|
||||
- Removed narrow-width overflow hotspots:
|
||||
- stacked compact headers/actions instead of single fixed rows
|
||||
- converted key action rows to `Wrap`/column where needed
|
||||
- improved list-item text constraints (`maxLines`, `ellipsis`)
|
||||
- made editor dialogs width-safe using max-width constraints
|
||||
|
||||
Validation for this milestone:
|
||||
|
||||
- `flutter analyze` -> pass
|
||||
- `flutter test` -> pass
|
||||
|
||||
## Latest Milestone (2026-02-15): People Mobile Layout Fix
|
||||
|
||||
Fixed the `People` view so it is mobile-friendly and no longer overflows on iOS narrow screens:
|
||||
|
||||
@@ -45,7 +45,10 @@ class _SignInViewState extends ConsumerState<SignInView> {
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: FrostedCard(
|
||||
child: Column(
|
||||
child: LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 480;
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
@@ -61,6 +64,31 @@ class _SignInViewState extends ConsumerState<SignInView> {
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 18),
|
||||
if (compact)
|
||||
DropdownButtonFormField<SignInMethod>(
|
||||
initialValue: _method,
|
||||
items: SignInMethod.values
|
||||
.map(
|
||||
(SignInMethod method) =>
|
||||
DropdownMenuItem<SignInMethod>(
|
||||
value: method,
|
||||
child: Text(_labelForMethod(method)),
|
||||
),
|
||||
)
|
||||
.toList(growable: false),
|
||||
onChanged: busy
|
||||
? null
|
||||
: (SignInMethod? value) {
|
||||
if (value == null) {
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_method = value;
|
||||
});
|
||||
},
|
||||
decoration: const InputDecoration(labelText: 'Method'),
|
||||
)
|
||||
else
|
||||
SegmentedButton<SignInMethod>(
|
||||
segments: const <ButtonSegment<SignInMethod>>[
|
||||
ButtonSegment<SignInMethod>(
|
||||
@@ -99,26 +127,32 @@ class _SignInViewState extends ConsumerState<SignInView> {
|
||||
controller: _passwordController,
|
||||
obscureText: true,
|
||||
enabled: !busy,
|
||||
decoration: const InputDecoration(labelText: 'Password'),
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Password',
|
||||
),
|
||||
),
|
||||
if (_method == SignInMethod.oidc)
|
||||
TextField(
|
||||
controller: _idTokenController,
|
||||
enabled: !busy,
|
||||
decoration: const InputDecoration(labelText: 'ID Token'),
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'ID Token',
|
||||
),
|
||||
),
|
||||
if (error != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 10),
|
||||
child: Text(
|
||||
'Sign-in failed: $error',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: const Color(0xFFC83030),
|
||||
),
|
||||
style: Theme.of(context).textTheme.bodyMedium
|
||||
?.copyWith(color: const Color(0xFFC83030)),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Row(
|
||||
Wrap(
|
||||
spacing: 12,
|
||||
runSpacing: 8,
|
||||
crossAxisAlignment: WrapCrossAlignment.center,
|
||||
children: <Widget>[
|
||||
FilledButton.icon(
|
||||
onPressed: busy ? null : _submit,
|
||||
@@ -134,18 +168,18 @@ class _SignInViewState extends ConsumerState<SignInView> {
|
||||
: const Icon(Icons.login_rounded),
|
||||
label: const Text('Sign In'),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
AppConfig.useFakeBackend
|
||||
? 'Fake mode enabled'
|
||||
: 'REST mode (${AppConfig.backendBaseUrl})',
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
style: Theme.of(context).textTheme.bodyMedium
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
),
|
||||
@@ -173,4 +207,12 @@ class _SignInViewState extends ConsumerState<SignInView> {
|
||||
idToken: idToken,
|
||||
);
|
||||
}
|
||||
|
||||
String _labelForMethod(SignInMethod method) {
|
||||
return switch (method) {
|
||||
SignInMethod.password => 'Password',
|
||||
SignInMethod.emailMagicLink => 'Magic Link',
|
||||
SignInMethod.oidc => 'OIDC',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -19,43 +19,58 @@ class DashboardView extends ConsumerWidget {
|
||||
final DashboardSummary summary = data.summary();
|
||||
final List<DashboardTask> tasks = data.tasks;
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 720;
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 36),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 24 : 36,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text('Today', style: Theme.of(context).textTheme.headlineMedium),
|
||||
Text(
|
||||
'Today',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Focus on consistency over intensity. Small moments compound.',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 22),
|
||||
Wrap(
|
||||
spacing: 16,
|
||||
runSpacing: 16,
|
||||
spacing: 12,
|
||||
runSpacing: 12,
|
||||
children: <Widget>[
|
||||
_StatCard(
|
||||
label: 'Active People',
|
||||
value: '${summary.activePeople}',
|
||||
accent: const Color(0xFF16B8CA),
|
||||
compact: compact,
|
||||
),
|
||||
_StatCard(
|
||||
label: 'Upcoming Plans',
|
||||
value: '${summary.upcomingPlans}',
|
||||
accent: const Color(0xFF2B7FFF),
|
||||
compact: compact,
|
||||
),
|
||||
_StatCard(
|
||||
label: 'Pending Ideas',
|
||||
value: '${summary.pendingIdeas}',
|
||||
accent: const Color(0xFFFFA447),
|
||||
compact: compact,
|
||||
),
|
||||
_StatCard(
|
||||
label: 'Weekly Rhythm',
|
||||
value: '${summary.weeklyConsistency}%',
|
||||
accent: const Color(0xFF30B66A),
|
||||
compact: compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -72,6 +87,7 @@ class DashboardView extends ConsumerWidget {
|
||||
...tasks.map(
|
||||
(DashboardTask task) => _TaskRow(
|
||||
task: task,
|
||||
compact: compact,
|
||||
onToggleDone: () {
|
||||
ref
|
||||
.read(localRepositoryProvider.notifier)
|
||||
@@ -86,6 +102,8 @@ class DashboardView extends ConsumerWidget {
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (Object error, StackTrace stackTrace) {
|
||||
return Center(
|
||||
@@ -104,18 +122,20 @@ class _StatCard extends StatelessWidget {
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.accent,
|
||||
required this.compact,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
final Color accent;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return FrostedCard(
|
||||
padding: const EdgeInsets.all(16),
|
||||
child: SizedBox(
|
||||
width: 188,
|
||||
width: compact ? double.infinity : 188,
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
@@ -149,10 +169,15 @@ class _StatCard extends StatelessWidget {
|
||||
}
|
||||
|
||||
class _TaskRow extends StatelessWidget {
|
||||
const _TaskRow({required this.task, required this.onToggleDone});
|
||||
const _TaskRow({
|
||||
required this.task,
|
||||
required this.onToggleDone,
|
||||
required this.compact,
|
||||
});
|
||||
|
||||
final DashboardTask task;
|
||||
final VoidCallback onToggleDone;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
@@ -200,6 +225,7 @@ class _TaskRow extends StatelessWidget {
|
||||
],
|
||||
),
|
||||
),
|
||||
if (!compact) ...<Widget>[
|
||||
const SizedBox(width: 12),
|
||||
Text(
|
||||
_shortDate(task.when),
|
||||
@@ -208,6 +234,7 @@ class _TaskRow extends StatelessWidget {
|
||||
).textTheme.labelLarge?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
@@ -21,11 +21,42 @@ class IdeasView extends ConsumerWidget {
|
||||
for (final PersonProfile person in data.people) person.id: person,
|
||||
};
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 760;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 20 : 28,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
if (compact)
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
'Ideas',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Capture gift and event ideas before they slip away.',
|
||||
style: Theme.of(context).textTheme.bodyLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
FilledButton.icon(
|
||||
onPressed: () => _addIdea(context, ref, data.people),
|
||||
icon: const Icon(Icons.lightbulb_outline_rounded),
|
||||
label: const Text('Add Idea'),
|
||||
),
|
||||
],
|
||||
)
|
||||
else
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
@@ -34,7 +65,9 @@ class IdeasView extends ConsumerWidget {
|
||||
children: <Widget>[
|
||||
Text(
|
||||
'Ideas',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
@@ -63,27 +96,35 @@ class IdeasView extends ConsumerWidget {
|
||||
? null
|
||||
: peopleById[idea.personId!];
|
||||
return FrostedCard(
|
||||
child: Row(
|
||||
child: compact
|
||||
? Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
children: <Widget>[
|
||||
_IdeaTypeTag(type: idea.type),
|
||||
const SizedBox(width: 12),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
child: Text(
|
||||
idea.title,
|
||||
style: Theme.of(context).textTheme.titleMedium
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.titleMedium
|
||||
?.copyWith(
|
||||
decoration: idea.isArchived
|
||||
? TextDecoration.lineThrough
|
||||
? TextDecoration
|
||||
.lineThrough
|
||||
: null,
|
||||
),
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (idea.details.trim().isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 6),
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Text(
|
||||
idea.details,
|
||||
style: Theme.of(context)
|
||||
@@ -96,9 +137,118 @@ class IdeasView extends ConsumerWidget {
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
person == null ? 'Unassigned' : person.name,
|
||||
style: Theme.of(context).textTheme.labelLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
person == null
|
||||
? 'Unassigned'
|
||||
: person.name,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 6,
|
||||
runSpacing: 6,
|
||||
children: <Widget>[
|
||||
OutlinedButton.icon(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.toggleIdeaArchived(idea.id);
|
||||
},
|
||||
icon: Icon(
|
||||
idea.isArchived
|
||||
? Icons.unarchive_outlined
|
||||
: Icons.archive_outlined,
|
||||
),
|
||||
label: Text(
|
||||
idea.isArchived
|
||||
? 'Unarchive'
|
||||
: 'Archive',
|
||||
),
|
||||
),
|
||||
OutlinedButton.icon(
|
||||
onPressed: () => _editIdea(
|
||||
context,
|
||||
ref,
|
||||
data.people,
|
||||
idea,
|
||||
),
|
||||
icon: const Icon(Icons.edit_rounded),
|
||||
label: const Text('Edit'),
|
||||
),
|
||||
TextButton.icon(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.deleteIdea(idea.id);
|
||||
},
|
||||
icon: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
),
|
||||
label: const Text('Delete'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
)
|
||||
: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
_IdeaTypeTag(type: idea.type),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
idea.title,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.titleMedium
|
||||
?.copyWith(
|
||||
decoration: idea.isArchived
|
||||
? TextDecoration
|
||||
.lineThrough
|
||||
: null,
|
||||
),
|
||||
),
|
||||
if (idea.details.trim().isNotEmpty)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(
|
||||
top: 6,
|
||||
),
|
||||
child: Text(
|
||||
idea.details,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium
|
||||
?.copyWith(
|
||||
color: AppTheme
|
||||
.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
person == null
|
||||
? 'Unassigned'
|
||||
: person.name,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -109,7 +259,10 @@ class IdeasView extends ConsumerWidget {
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(localRepositoryProvider.notifier)
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.toggleIdeaArchived(idea.id);
|
||||
},
|
||||
icon: Icon(
|
||||
@@ -122,18 +275,27 @@ class IdeasView extends ConsumerWidget {
|
||||
: 'Archive',
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () =>
|
||||
_editIdea(context, ref, data.people, idea),
|
||||
onPressed: () => _editIdea(
|
||||
context,
|
||||
ref,
|
||||
data.people,
|
||||
idea,
|
||||
),
|
||||
icon: const Icon(Icons.edit_rounded),
|
||||
tooltip: 'Edit',
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(localRepositoryProvider.notifier)
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.deleteIdea(idea.id);
|
||||
},
|
||||
icon: const Icon(Icons.delete_outline_rounded),
|
||||
icon: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
),
|
||||
tooltip: 'Delete',
|
||||
),
|
||||
],
|
||||
@@ -148,6 +310,8 @@ class IdeasView extends ConsumerWidget {
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (Object error, StackTrace stackTrace) {
|
||||
return const Center(child: Text('Unable to load ideas'));
|
||||
@@ -293,9 +457,9 @@ class _IdeaEditorDialogState extends State<_IdeaEditorDialog> {
|
||||
Widget build(BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: Text(widget.title),
|
||||
content: SizedBox(
|
||||
width: 430,
|
||||
child: SingleChildScrollView(
|
||||
content: SingleChildScrollView(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 430),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
|
||||
@@ -44,8 +44,16 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
? _selectedPersonId
|
||||
: fallbackPersonId;
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 760;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 20 : 28,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
@@ -56,19 +64,19 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Capture wins and signals from everyday interactions.',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FrostedCard(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: TextField(
|
||||
TextField(
|
||||
controller: _captureController,
|
||||
minLines: 1,
|
||||
maxLines: compact ? 4 : 2,
|
||||
decoration: InputDecoration(
|
||||
hintText:
|
||||
'Quick capture: what happened, how it felt, what to repeat...',
|
||||
@@ -77,8 +85,46 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
border: InputBorder.none,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
if (compact)
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: <Widget>[
|
||||
if (people.isNotEmpty)
|
||||
DropdownButtonFormField<String>(
|
||||
initialValue: activePerson,
|
||||
items: people
|
||||
.map(
|
||||
(PersonProfile person) =>
|
||||
DropdownMenuItem<String>(
|
||||
value: person.id,
|
||||
child: Text(person.name),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
)
|
||||
.toList(growable: false),
|
||||
onChanged: (String? value) {
|
||||
setState(() {
|
||||
_selectedPersonId = value;
|
||||
});
|
||||
},
|
||||
decoration: const InputDecoration(
|
||||
labelText: 'Person',
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
FilledButton.icon(
|
||||
onPressed:
|
||||
people.isEmpty || activePerson == null
|
||||
? null
|
||||
: () => _addCapture(activePerson),
|
||||
icon: const Icon(Icons.add_rounded),
|
||||
label: const Text('Add Capture'),
|
||||
),
|
||||
],
|
||||
)
|
||||
else
|
||||
Row(
|
||||
children: <Widget>[
|
||||
if (people.isNotEmpty)
|
||||
DropdownButton<String>(
|
||||
value: activePerson,
|
||||
@@ -100,7 +146,8 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
FilledButton.icon(
|
||||
onPressed: people.isEmpty || activePerson == null
|
||||
onPressed:
|
||||
people.isEmpty || activePerson == null
|
||||
? null
|
||||
: () => _addCapture(activePerson),
|
||||
icon: const Icon(Icons.add_rounded),
|
||||
@@ -127,9 +174,69 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
separatorBuilder: (_, _) => const SizedBox(height: 12),
|
||||
itemBuilder: (BuildContext context, int index) {
|
||||
final RelationshipMoment moment = moments[index];
|
||||
final PersonProfile? person = peopleById[moment.personId];
|
||||
final PersonProfile? person =
|
||||
peopleById[moment.personId];
|
||||
return FrostedCard(
|
||||
child: Row(
|
||||
child: compact
|
||||
? Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Container(
|
||||
width: 10,
|
||||
height: 10,
|
||||
decoration: const BoxDecoration(
|
||||
color: Color(0xFF1AB6C8),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
moment.title,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.titleMedium,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.deleteMoment(moment.id);
|
||||
},
|
||||
icon: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
),
|
||||
tooltip: 'Delete capture',
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
'${person?.name ?? 'Unknown'} • ${moment.type.toUpperCase()} • ${moment.at.month}/${moment.at.day}',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
moment.summary,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodyLarge,
|
||||
),
|
||||
],
|
||||
)
|
||||
: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Container(
|
||||
@@ -144,7 +251,8 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
moment.title,
|
||||
@@ -155,34 +263,50 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'${person?.name ?? 'Unknown'} • ${moment.type.toUpperCase()}',
|
||||
style: Theme.of(context).textTheme.labelLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
moment.summary,
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodyLarge,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.end,
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.end,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
'${moment.at.month}/${moment.at.day}',
|
||||
style: Theme.of(context).textTheme.labelLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(localRepositoryProvider.notifier)
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.deleteMoment(moment.id);
|
||||
},
|
||||
icon: const Icon(Icons.delete_outline_rounded),
|
||||
icon: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
),
|
||||
tooltip: 'Delete capture',
|
||||
),
|
||||
],
|
||||
@@ -197,6 +321,8 @@ class _MomentsViewState extends ConsumerState<MomentsView> {
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (Object error, StackTrace stackTrace) {
|
||||
return const Center(child: Text('Unable to load moments'));
|
||||
|
||||
@@ -585,8 +585,8 @@ class _PersonEditorDialogState extends State<_PersonEditorDialog> {
|
||||
return AlertDialog(
|
||||
title: Text(widget.title),
|
||||
content: SingleChildScrollView(
|
||||
child: SizedBox(
|
||||
width: 420,
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
|
||||
@@ -21,15 +21,21 @@ class RemindersView extends ConsumerWidget {
|
||||
for (final PersonProfile person in data.people) person.id: person,
|
||||
};
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 760;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 20 : 28,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Column(
|
||||
if (compact)
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
@@ -42,11 +48,40 @@ class RemindersView extends ConsumerWidget {
|
||||
style: Theme.of(context).textTheme.bodyLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
FilledButton.icon(
|
||||
onPressed: () =>
|
||||
_addReminder(context, ref, data.people),
|
||||
icon: const Icon(Icons.alarm_add_rounded),
|
||||
label: const Text('Add Reminder'),
|
||||
),
|
||||
],
|
||||
)
|
||||
else
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
'Reminders',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Set recurring nudges so good intentions become habits.',
|
||||
style: Theme.of(context).textTheme.bodyLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
FilledButton.icon(
|
||||
onPressed: () => _addReminder(context, ref, data.people),
|
||||
onPressed: () =>
|
||||
_addReminder(context, ref, data.people),
|
||||
icon: const Icon(Icons.alarm_add_rounded),
|
||||
label: const Text('Add Reminder'),
|
||||
),
|
||||
@@ -64,11 +99,96 @@ class RemindersView extends ConsumerWidget {
|
||||
: peopleById[reminder.personId!];
|
||||
|
||||
return FrostedCard(
|
||||
child: Row(
|
||||
child: compact
|
||||
? Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Text(
|
||||
reminder.title,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.titleMedium,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
),
|
||||
),
|
||||
Switch(
|
||||
value: reminder.enabled,
|
||||
onChanged: (_) {
|
||||
ref
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.toggleReminderEnabled(
|
||||
reminder.id,
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
'${_labelForCadence(reminder.cadence)} • ${_formatDateTime(reminder.nextAt)}',
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
person == null
|
||||
? 'Unassigned'
|
||||
: person.name,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
children: <Widget>[
|
||||
OutlinedButton.icon(
|
||||
onPressed: () => _editReminder(
|
||||
context,
|
||||
ref,
|
||||
data.people,
|
||||
reminder,
|
||||
),
|
||||
icon: const Icon(Icons.edit_rounded),
|
||||
label: const Text('Edit'),
|
||||
),
|
||||
TextButton.icon(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(
|
||||
localRepositoryProvider
|
||||
.notifier,
|
||||
)
|
||||
.deleteReminder(reminder.id);
|
||||
},
|
||||
icon: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
),
|
||||
label: const Text('Delete'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
)
|
||||
: Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
crossAxisAlignment:
|
||||
CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
reminder.title,
|
||||
@@ -79,14 +199,24 @@ class RemindersView extends ConsumerWidget {
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'${_labelForCadence(reminder.cadence)} • ${_formatDateTime(reminder.nextAt)}',
|
||||
style: Theme.of(context).textTheme.bodyMedium
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.bodyMedium
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
person == null ? 'Unassigned' : person.name,
|
||||
style: Theme.of(context).textTheme.labelLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
person == null
|
||||
? 'Unassigned'
|
||||
: person.name,
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelLarge
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -95,7 +225,9 @@ class RemindersView extends ConsumerWidget {
|
||||
value: reminder.enabled,
|
||||
onChanged: (_) {
|
||||
ref
|
||||
.read(localRepositoryProvider.notifier)
|
||||
.read(
|
||||
localRepositoryProvider.notifier,
|
||||
)
|
||||
.toggleReminderEnabled(reminder.id);
|
||||
},
|
||||
),
|
||||
@@ -112,10 +244,14 @@ class RemindersView extends ConsumerWidget {
|
||||
IconButton(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(localRepositoryProvider.notifier)
|
||||
.read(
|
||||
localRepositoryProvider.notifier,
|
||||
)
|
||||
.deleteReminder(reminder.id);
|
||||
},
|
||||
icon: const Icon(Icons.delete_outline_rounded),
|
||||
icon: const Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
),
|
||||
tooltip: 'Delete',
|
||||
),
|
||||
],
|
||||
@@ -128,6 +264,8 @@ class RemindersView extends ConsumerWidget {
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
error: (Object error, StackTrace stackTrace) {
|
||||
return const Center(child: Text('Unable to load reminders'));
|
||||
@@ -238,9 +376,9 @@ class _ReminderEditorDialogState extends State<_ReminderEditorDialog> {
|
||||
Widget build(BuildContext context) {
|
||||
return AlertDialog(
|
||||
title: Text(widget.title),
|
||||
content: SizedBox(
|
||||
width: 420,
|
||||
child: SingleChildScrollView(
|
||||
content: SingleChildScrollView(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 420),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: <Widget>[
|
||||
@@ -291,7 +429,28 @@ class _ReminderEditorDialogState extends State<_ReminderEditorDialog> {
|
||||
decoration: const InputDecoration(labelText: 'Person'),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Row(
|
||||
LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 360;
|
||||
if (compact) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
_formatDateTime(_nextAt),
|
||||
style: Theme.of(context).textTheme.bodyLarge,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton.icon(
|
||||
onPressed: _pickDateTime,
|
||||
icon: const Icon(Icons.schedule_rounded),
|
||||
label: const Text('Pick Time'),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
child: Text(
|
||||
@@ -305,6 +464,8 @@ class _ReminderEditorDialogState extends State<_ReminderEditorDialog> {
|
||||
label: const Text('Pick Time'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
@@ -16,18 +16,30 @@ class SettingsView extends ConsumerWidget {
|
||||
.asData
|
||||
?.value;
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 760;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 20 : 28,
|
||||
),
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text('Settings', style: Theme.of(context).textTheme.headlineMedium),
|
||||
Text(
|
||||
'Settings',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Environment and integration configuration for this build.',
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.bodyLarge?.copyWith(color: AppTheme.textSecondary),
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
FrostedCard(
|
||||
@@ -35,6 +47,7 @@ class SettingsView extends ConsumerWidget {
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
_SettingRow(
|
||||
compact: compact,
|
||||
label: 'Signed in as',
|
||||
value:
|
||||
session?.user.email ??
|
||||
@@ -43,20 +56,28 @@ class SettingsView extends ConsumerWidget {
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_SettingRow(
|
||||
compact: compact,
|
||||
label: 'Gateway mode',
|
||||
value: AppConfig.useFakeBackend
|
||||
? 'Fake (offline-safe)'
|
||||
: 'REST',
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
_SettingRow(label: 'Base URL', value: AppConfig.backendBaseUrl),
|
||||
_SettingRow(
|
||||
compact: compact,
|
||||
label: 'Base URL',
|
||||
value: AppConfig.backendBaseUrl,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
const _SettingRow(
|
||||
_SettingRow(
|
||||
compact: compact,
|
||||
label: 'Realtime',
|
||||
value: 'Planned later (SSE/WebSocket)',
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
Row(
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 8,
|
||||
children: <Widget>[
|
||||
FilledButton.icon(
|
||||
onPressed: session == null
|
||||
@@ -65,13 +86,14 @@ class SettingsView extends ConsumerWidget {
|
||||
icon: const Icon(Icons.logout_rounded),
|
||||
label: const Text('Sign Out'),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
OutlinedButton.icon(
|
||||
onPressed: session == null
|
||||
? null
|
||||
: () {
|
||||
ref
|
||||
.read(sessionControllerProvider.notifier)
|
||||
.read(
|
||||
sessionControllerProvider.notifier,
|
||||
)
|
||||
.refreshProfile();
|
||||
},
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
@@ -91,6 +113,9 @@ class SettingsView extends ConsumerWidget {
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
@@ -105,13 +130,34 @@ class SettingsView extends ConsumerWidget {
|
||||
}
|
||||
|
||||
class _SettingRow extends StatelessWidget {
|
||||
const _SettingRow({required this.label, required this.value});
|
||||
const _SettingRow({
|
||||
required this.label,
|
||||
required this.value,
|
||||
required this.compact,
|
||||
});
|
||||
|
||||
final String label;
|
||||
final String value;
|
||||
final bool compact;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (compact) {
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.titleMedium?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(value, style: Theme.of(context).textTheme.bodyLarge),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
|
||||
@@ -14,11 +14,45 @@ class SignalsView extends ConsumerWidget {
|
||||
signalsControllerProvider,
|
||||
);
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 760;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 20 : 28,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
if (compact)
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
'Signals',
|
||||
style: Theme.of(context).textTheme.headlineMedium,
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Backend-driven recommendations and trends you can act on.',
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
IconButton.filledTonal(
|
||||
onPressed: () {
|
||||
ref.read(signalsControllerProvider.notifier).refresh();
|
||||
},
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
tooltip: 'Refresh feed',
|
||||
),
|
||||
],
|
||||
)
|
||||
else
|
||||
Row(
|
||||
children: <Widget>[
|
||||
Expanded(
|
||||
@@ -32,9 +66,8 @@ class SignalsView extends ConsumerWidget {
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Backend-driven recommendations and trends you can act on.',
|
||||
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
style: Theme.of(context).textTheme.bodyLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -78,7 +111,9 @@ class SignalsView extends ConsumerWidget {
|
||||
),
|
||||
child: Text(
|
||||
item.type.toUpperCase(),
|
||||
style: Theme.of(context).textTheme.labelMedium
|
||||
style: Theme.of(context)
|
||||
.textTheme
|
||||
.labelMedium
|
||||
?.copyWith(
|
||||
color: AppTheme.primary,
|
||||
fontWeight: FontWeight.w700,
|
||||
@@ -89,7 +124,9 @@ class SignalsView extends ConsumerWidget {
|
||||
Text(
|
||||
'${item.createdAt.month}/${item.createdAt.day}',
|
||||
style: Theme.of(context).textTheme.bodySmall
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -98,32 +135,45 @@ class SignalsView extends ConsumerWidget {
|
||||
item.title,
|
||||
style: Theme.of(context).textTheme.titleLarge,
|
||||
),
|
||||
if (item.description case final String description)
|
||||
if (item.description
|
||||
case final String description)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 6),
|
||||
child: Text(
|
||||
description,
|
||||
style: Theme.of(context).textTheme.bodyLarge
|
||||
?.copyWith(color: AppTheme.textSecondary),
|
||||
?.copyWith(
|
||||
color: AppTheme.textSecondary,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 14),
|
||||
Row(
|
||||
Wrap(
|
||||
spacing: 8,
|
||||
runSpacing: 6,
|
||||
children: <Widget>[
|
||||
OutlinedButton.icon(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(signalsControllerProvider.notifier)
|
||||
.acknowledge(item.id, SignalAction.saved);
|
||||
.read(
|
||||
signalsControllerProvider.notifier,
|
||||
)
|
||||
.acknowledge(
|
||||
item.id,
|
||||
SignalAction.saved,
|
||||
);
|
||||
},
|
||||
icon: const Icon(Icons.bookmark_add_outlined),
|
||||
icon: const Icon(
|
||||
Icons.bookmark_add_outlined,
|
||||
),
|
||||
label: const Text('Save'),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
TextButton.icon(
|
||||
onPressed: () {
|
||||
ref
|
||||
.read(signalsControllerProvider.notifier)
|
||||
.read(
|
||||
signalsControllerProvider.notifier,
|
||||
)
|
||||
.acknowledge(
|
||||
item.id,
|
||||
SignalAction.dismissed,
|
||||
@@ -148,11 +198,14 @@ class SignalsView extends ConsumerWidget {
|
||||
),
|
||||
);
|
||||
},
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
loading: () =>
|
||||
const Center(child: CircularProgressIndicator()),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,8 +23,16 @@ class _SyncViewState extends ConsumerState<SyncView> {
|
||||
syncQueueRepositoryProvider,
|
||||
);
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (BuildContext context, BoxConstraints constraints) {
|
||||
final bool compact = constraints.maxWidth < 760;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(28, 24, 28, 28),
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
compact ? 16 : 28,
|
||||
compact ? 16 : 24,
|
||||
compact ? 16 : 28,
|
||||
compact ? 20 : 28,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
@@ -39,8 +47,10 @@ class _SyncViewState extends ConsumerState<SyncView> {
|
||||
const SizedBox(height: 16),
|
||||
Expanded(
|
||||
child: syncState.when(
|
||||
data: (SyncState state) => _buildBody(context, state),
|
||||
loading: () => const Center(child: CircularProgressIndicator()),
|
||||
data: (SyncState state) =>
|
||||
_buildBody(context, state, compact),
|
||||
loading: () =>
|
||||
const Center(child: CircularProgressIndicator()),
|
||||
error: (Object error, StackTrace stackTrace) {
|
||||
return Center(
|
||||
child: Text(
|
||||
@@ -56,9 +66,11 @@ class _SyncViewState extends ConsumerState<SyncView> {
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(BuildContext context, SyncState state) {
|
||||
Widget _buildBody(BuildContext context, SyncState state, bool compact) {
|
||||
return ListView(
|
||||
children: <Widget>[
|
||||
FrostedCard(
|
||||
@@ -111,12 +123,36 @@ class _SyncViewState extends ConsumerState<SyncView> {
|
||||
style: Theme.of(context).textTheme.titleMedium,
|
||||
),
|
||||
const SizedBox(height: 10),
|
||||
_infoRow('Pending changes', '${state.pendingChanges.length}'),
|
||||
_infoRow('Cursor', state.cursor ?? 'not set'),
|
||||
_infoRow('Last sync', _formatDateTime(state.lastSyncAt)),
|
||||
_infoRow('Last attempt', _formatDateTime(state.lastAttemptAt)),
|
||||
_infoRow('Last rejected count', '${state.lastRejected.length}'),
|
||||
_infoRow('Last error', state.lastError ?? 'none'),
|
||||
_infoRow(
|
||||
label: 'Pending changes',
|
||||
value: '${state.pendingChanges.length}',
|
||||
compact: compact,
|
||||
),
|
||||
_infoRow(
|
||||
label: 'Cursor',
|
||||
value: state.cursor ?? 'not set',
|
||||
compact: compact,
|
||||
),
|
||||
_infoRow(
|
||||
label: 'Last sync',
|
||||
value: _formatDateTime(state.lastSyncAt),
|
||||
compact: compact,
|
||||
),
|
||||
_infoRow(
|
||||
label: 'Last attempt',
|
||||
value: _formatDateTime(state.lastAttemptAt),
|
||||
compact: compact,
|
||||
),
|
||||
_infoRow(
|
||||
label: 'Last rejected count',
|
||||
value: '${state.lastRejected.length}',
|
||||
compact: compact,
|
||||
),
|
||||
_infoRow(
|
||||
label: 'Last error',
|
||||
value: state.lastError ?? 'none',
|
||||
compact: compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -131,7 +167,30 @@ class _SyncViewState extends ConsumerState<SyncView> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _infoRow(String label, String value) {
|
||||
Widget _infoRow({
|
||||
required String label,
|
||||
required String value,
|
||||
required bool compact,
|
||||
}) {
|
||||
if (compact) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 4),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: <Widget>[
|
||||
Text(
|
||||
label,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.labelLarge?.copyWith(color: AppTheme.textSecondary),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(value, style: Theme.of(context).textTheme.bodyMedium),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 2),
|
||||
child: Row(
|
||||
|
||||
Reference in New Issue
Block a user