Merge pull request #623 from lichess-org/puzzle_tab_improvements

Puzzle tab improvements

lib/src/app.dart

@@ -166,11 +166,6 @@ class _AppState extends ConsumerState<Application> {
                           ? LichessColors.primary
                           : const Color(0xFF3692E7),
                       brightness: brightness,
-                      barBackgroundColor:
-                          const CupertinoDynamicColor.withBrightness(
-                        color: Color(0xC8F9F9F9),
-                        darkColor: Color(0xC81D1D1D),
-                      ),
                       scaffoldBackgroundColor: brightness == Brightness.light
                           ? CupertinoColors.systemGroupedBackground
                           : null,

lib/src/model/puzzle/puzzle_providers.dart

@@ -79,11 +79,12 @@ Future<IMap<String, int>> savedOpeningBatches(
 @riverpod
 Future<PuzzleDashboard?> puzzleDashboard(
   PuzzleDashboardRef ref,
+  int days,
 ) async {
   final session = ref.watch(authSessionProvider);
   if (session == null) return null;
   return ref.withClientCacheFor(
-    (client) => PuzzleRepository(client).puzzleDashboard(),
+    (client) => PuzzleRepository(client).puzzleDashboard(days),
     const Duration(hours: 3),
   );
 }

lib/src/model/puzzle/puzzle_repository.dart

@@ -157,9 +157,9 @@ class PuzzleRepository {
         );
   }
 
-  Future<PuzzleDashboard> puzzleDashboard() {
+  Future<PuzzleDashboard> puzzleDashboard(int days) {
     return client.readJson(
-      Uri.parse('$kLichessHost/api/puzzle/dashboard/30'),
+      Uri.parse('$kLichessHost/api/puzzle/dashboard/$days'),
       mapper: _puzzleDashboardFromJson,
     );
   }

lib/src/styles/styles.dart

@@ -12,6 +12,10 @@ abstract class Styles {
     fontSize: 20.0,
     fontWeight: FontWeight.bold,
   );
+  static const subtitle = TextStyle(
+    fontSize: 16,
+    fontWeight: FontWeight.w500,
+  );
   static const callout = TextStyle(
     fontSize: 18.0,
     fontWeight: FontWeight.w600,
@@ -111,25 +115,33 @@ class CustomColors extends ThemeExtension<CustomColors> {
     required this.good,
     required this.error,
     required this.fancy,
+    required this.purple,
+    required this.primary,
   });
 
   final Color brag;
   final Color good;
   final Color error;
   final Color fancy;
+  final Color purple;
+  final Color primary;
 
   @override
   CustomColors copyWith({
     Color? brag,
     Color? good,
     Color? error,
     Color? fancy,
+    Color? purple,
+    Color? primary,
   }) {
     return CustomColors(
       brag: brag ?? this.brag,
       good: good ?? this.good,
       error: error ?? this.error,
       fancy: fancy ?? this.fancy,
+      purple: purple ?? this.purple,
+      primary: primary ?? this.primary,
     );
   }
 
@@ -143,6 +155,8 @@ class CustomColors extends ThemeExtension<CustomColors> {
       good: Color.lerp(good, other.good, t) ?? good,
       error: Color.lerp(error, other.error, t) ?? error,
       fancy: Color.lerp(fancy, other.fancy, t) ?? fancy,
+      purple: Color.lerp(purple, other.purple, t) ?? purple,
+      primary: Color.lerp(primary, other.primary, t) ?? primary,
     );
   }
 
@@ -152,6 +166,8 @@ class CustomColors extends ThemeExtension<CustomColors> {
       good: good.harmonizeWith(colorScheme.primary),
       error: error.harmonizeWith(colorScheme.primary),
       fancy: fancy.harmonizeWith(colorScheme.primary),
+      purple: purple.harmonizeWith(colorScheme.primary),
+      primary: primary.harmonizeWith(colorScheme.primary),
     );
   }
 }
@@ -161,6 +177,8 @@ const lichessCustomColors = CustomColors(
   good: LichessColors.good,
   error: LichessColors.error,
   fancy: LichessColors.fancy,
+  purple: LichessColors.purple,
+  primary: LichessColors.primary,
 );
 
 extension CustomColorsBuildContext on BuildContext {

lib/src/view/puzzle/puzzle_dashboard_widget.dart → lib/src/view/puzzle/dashboard_screen.dart

@@ -1,22 +1,73 @@
 import 'package:collection/collection.dart';
 import 'package:fl_chart/fl_chart.dart';
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:http/http.dart' show ClientException;
+import 'package:lichess_mobile/src/model/auth/auth_session.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle_providers.dart';
 import 'package:lichess_mobile/src/model/puzzle/puzzle_theme.dart';
+import 'package:lichess_mobile/src/model/user/user.dart';
 import 'package:lichess_mobile/src/styles/styles.dart';
 import 'package:lichess_mobile/src/utils/l10n_context.dart';
 import 'package:lichess_mobile/src/utils/string.dart';
+import 'package:lichess_mobile/src/widgets/adaptive_choice_picker.dart';
+import 'package:lichess_mobile/src/widgets/buttons.dart';
 import 'package:lichess_mobile/src/widgets/list.dart';
 import 'package:lichess_mobile/src/widgets/shimmer.dart';
 import 'package:lichess_mobile/src/widgets/stat_card.dart';
 
+final daysProvider = StateProvider<Days>((ref) => Days.month);
+
+class PuzzleDashboardScreen extends StatelessWidget {
+  const PuzzleDashboardScreen({super.key, required this.user});
+
+  final LightUser user;
+
+  @override
+  Widget build(BuildContext context) {
+    return Theme.of(context).platform == TargetPlatform.iOS
+        ? CupertinoPageScaffold(
+            navigationBar: const CupertinoNavigationBar(
+              middle: SizedBox.shrink(),
+              trailing: DaysSelector(),
+            ),
+            child: _Body(user: user),
+          )
+        : Scaffold(
+            body: _Body(user: user),
+            appBar: AppBar(
+              title: const SizedBox.shrink(),
+              actions: const [DaysSelector()],
+            ),
+          );
+  }
+}
+
+class _Body extends ConsumerWidget {
+  const _Body({required this.user});
+
+  final LightUser user;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    return SafeArea(
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          PuzzleDashboardWidget(),
+        ],
+      ),
+    );
+  }
+}
+
 class PuzzleDashboardWidget extends ConsumerWidget {
   @override
   Widget build(BuildContext context, WidgetRef ref) {
-    final puzzleDashboard = ref.watch(puzzleDashboardProvider);
+    final puzzleDashboard =
+        ref.watch(puzzleDashboardProvider(ref.read(daysProvider).days));
 
     return puzzleDashboard.when(
       data: (dashboard) {
@@ -31,9 +82,8 @@ class PuzzleDashboardWidget extends ConsumerWidget {
             children: [
               Text(context.l10n.puzzlePuzzleDashboard),
               Text(
-                context.l10n.nbDays(30),
-                style: TextStyle(
-                  fontSize: 14,
+                context.l10n.puzzlePuzzleDashboardDescription,
+                style: Styles.subtitle.copyWith(
                   color: textShade(context, Styles.subtitleOpacity),
                 ),
               ),
@@ -180,3 +230,59 @@ class PuzzleChart extends StatelessWidget {
     );
   }
 }
+
+class DaysSelector extends ConsumerWidget {
+  const DaysSelector();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final session = ref.watch(authSessionProvider);
+    final day = ref.watch(daysProvider);
+    return session != null
+        ? AppBarTextButton(
+            onPressed: () => showChoicePicker(
+              context,
+              choices: Days.values,
+              selectedItem: day,
+              labelBuilder: (t) => Text(_daysL10n(context, t)),
+              onSelectedItemChanged: (newDay) {
+                ref.read(daysProvider.notifier).state = newDay;
+              },
+            ),
+            child: Text(_daysL10n(context, day)),
+          )
+        : const SizedBox.shrink();
+  }
+}
+
+enum Days {
+  oneday(1),
+  twodays(2),
+  week(7),
+  twoweeks(14),
+  month(30),
+  twomonths(60),
+  threemonths(90);
+
+  const Days(this.days);
+  final int days;
+}
+
+String _daysL10n(BuildContext context, Days day) {
+  switch (day) {
+    case Days.oneday:
+      return context.l10n.nbDays(1);
+    case Days.twodays:
+      return context.l10n.nbDays(2);
+    case Days.week:
+      return context.l10n.nbDays(7);
+    case Days.twoweeks:
+      return context.l10n.nbDays(14);
+    case Days.month:
+      return context.l10n.nbDays(30);
+    case Days.twomonths:
+      return context.l10n.nbDays(60);
+    case Days.threemonths:
+      return context.l10n.nbDays(90);
+  }
+}