feat: change grid size with gesture (#20455)

mobile/lib/presentation/widgets/timeline/timeline.widget.dart

@@ -3,6 +3,7 @@ import 'dart:math' as math;
 
 import 'package:collection/collection.dart';
 import 'package:flutter/foundation.dart';
+import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/rendering.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -88,10 +89,23 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
   final _scrollController = ScrollController();
   StreamSubscription? _eventSubscription;
 
+  int _perRow = 4;
+  double _scaleFactor = 3.0;
+  double _baseScaleFactor = 3.0;
+
   @override
   void initState() {
     super.initState();
     _eventSubscription = EventStream.shared.listen(_onEvent);
+
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      final currentTilesPerRow = ref.read(settingsProvider).get(Setting.tilesPerRow);
+      setState(() {
+        _perRow = currentTilesPerRow;
+        _scaleFactor = 7.0 - _perRow;
+        _baseScaleFactor = _scaleFactor;
+      });
+    });
   }
 
   void _onEvent(Event event) {
@@ -177,6 +191,31 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
 
           return PrimaryScrollController(
             controller: _scrollController,
+            child: RawGestureDetector(
+              gestures: {
+                CustomScaleGestureRecognizer: GestureRecognizerFactoryWithHandlers<CustomScaleGestureRecognizer>(
+                  () => CustomScaleGestureRecognizer(),
+                  (CustomScaleGestureRecognizer scale) {
+                    scale.onStart = (details) {
+                      _baseScaleFactor = _scaleFactor;
+                    };
+
+                    scale.onUpdate = (details) {
+                      final newScaleFactor = math.max(math.min(5.0, _baseScaleFactor * details.scale), 1.0);
+                      final newPerRow = 7 - newScaleFactor.toInt();
+
+                      if (newPerRow != _perRow) {
+                        setState(() {
+                          _scaleFactor = newScaleFactor;
+                          _perRow = newPerRow;
+                        });
+
+                        ref.read(settingsProvider.notifier).set(Setting.tilesPerRow, _perRow);
+                      }
+                    };
+                  },
+                ),
+              },
               child: Stack(
                 children: [
                   Scrubber(
@@ -189,7 +228,10 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                       primary: true,
                       cacheExtent: maxHeight * 2,
                       slivers: [
-                      if (isSelectionMode) const SelectionSliverAppBar() else if (widget.appBar != null) widget.appBar!,
+                        if (isSelectionMode)
+                          const SelectionSliverAppBar()
+                        else if (widget.appBar != null)
+                          widget.appBar!,
                         if (widget.topSliverWidget != null) widget.topSliverWidget!,
                         _SliverSegmentedList(
                           segments: segments,
@@ -215,6 +257,7 @@ class _SliverTimelineState extends ConsumerState<_SliverTimeline> {
                   ],
                 ],
               ),
+            ),
           );
         },
       ),
@@ -443,3 +486,11 @@ class _MultiSelectStatusButton extends ConsumerWidget {
     );
   }
 }
+
+/// accepts a gesture even though it should reject it (because child won)
+class CustomScaleGestureRecognizer extends ScaleGestureRecognizer {
+  @override
+  void rejectGesture(int pointer) {
+    acceptGesture(pointer);
+  }
+}