feat: resizable submission and story section on tablet. (#472)

components/synced_shared_preferences/pubspec.lock

@@ -63,18 +63,18 @@ packages:
     dependency: transitive
     description:
       name: leak_tracker
-      sha256: "7f0df31977cb2c0b88585095d168e689669a2cc9b97c309665e3386f3e9d341a"
+      sha256: "3f87a60e8c63aecc975dda1ceedbc8f24de75f09e4856ea27daf8958f2f0ce05"
       url: "https://pub.dev"
     source: hosted
-    version: "10.0.4"
+    version: "10.0.5"
   leak_tracker_flutter_testing:
     dependency: transitive
     description:
       name: leak_tracker_flutter_testing
-      sha256: "06e98f569d004c1315b991ded39924b21af84cf14cc94791b8aea337d25b57f8"
+      sha256: "932549fb305594d82d7183ecd9fa93463e9914e1b67cacc34bc40906594a1806"
       url: "https://pub.dev"
     source: hosted
-    version: "3.0.3"
+    version: "3.0.5"
   leak_tracker_testing:
     dependency: transitive
     description:
@@ -95,18 +95,18 @@ packages:
     dependency: transitive
     description:
       name: material_color_utilities
-      sha256: "0e0a020085b65b6083975e499759762399b4475f766c21668c4ecca34ea74e5a"
+      sha256: f7142bb1154231d7ea5f96bc7bde4bda2a0945d2806bb11670e30b850d56bdec
       url: "https://pub.dev"
     source: hosted
-    version: "0.8.0"
+    version: "0.11.1"
   meta:
     dependency: transitive
     description:
       name: meta
-      sha256: "7687075e408b093f36e6bbf6c91878cc0d4cd10f409506f7bc996f68220b9136"
+      sha256: bdb68674043280c3428e9ec998512fb681678676b3c54e773629ffe74419f8c7
       url: "https://pub.dev"
     source: hosted
-    version: "1.12.0"
+    version: "1.15.0"
   path:
     dependency: transitive
     description:
@@ -164,10 +164,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "9955ae474176f7ac8ee4e989dadfb411a58c30415bcfb648fa04b2b8a03afa7f"
+      sha256: "5b8a98dafc4d5c4c9c72d8b31ab2b23fc13422348d2997120294d3bac86b4ddb"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.0"
+    version: "0.7.2"
   vector_math:
     dependency: transitive
     description:
@@ -180,10 +180,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: "3923c89304b715fb1eb6423f017651664a03bf5f4b29983627c4da791f74a4ec"
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.1"
+    version: "14.2.5"
 sdks:
   dart: ">=3.3.0 <4.0.0"
   flutter: ">=3.18.0-18.0.pre.54"

fastlane/metadata/android/en-US/changelogs/149.txt

@@ -0,0 +1 @@
+- Improved tablet mode, you can now resize submission panel.

ios/Podfile.lock

@@ -156,6 +156,6 @@ SPEC CHECKSUMS:
   webview_flutter_wkwebview: 2a23822e9039b7b1bc52e5add778e5d89ad488d1
   workmanager: 0afdcf5628bbde6924c21af7836fed07b42e30e6
 
-PODFILE CHECKSUM: f03c7c11cf2b623592c89c68c628682778bb78b4
+PODFILE CHECKSUM: 4f065ae0c88ce0d29cd933be6950e8da0fa046fc
 
 COCOAPODS: 1.15.2

ios/Runner/Info.plist

@@ -46,7 +46,7 @@
 			<string>mailto</string>
 		</array>
 		<key>LSMinimumSystemVersion</key>
-		<string>15.0</string>
+		<string>14.0</string>
 		<key>LSRequiresIPhoneOS</key>
 		<true/>
 		<key>UIBackgroundModes</key>

lib/cubits/split_view/split_view_cubit.dart

@@ -1,13 +1,14 @@
-import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
+import 'package:hacki/config/constants.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/services/services.dart';
+import 'package:hydrated_bloc/hydrated_bloc.dart';
 
 part 'split_view_state.dart';
 
-class SplitViewCubit extends Cubit<SplitViewState> with Loggable {
+class SplitViewCubit extends HydratedCubit<SplitViewState> with Loggable {
   SplitViewCubit({
     CommentCache? commentCache,
   })  : _commentCache = commentCache ?? locator.get<CommentCache>(),
@@ -25,8 +26,36 @@ class SplitViewCubit extends Cubit<SplitViewState> with Loggable {
 
   void disableSplitView() => emit(state.copyWith(enabled: false));
 
-  void zoom() => emit(state.copyWith(expanded: !state.expanded));
+  void zoom() => emit(
+        state.copyWith(
+          expanded: !state.expanded,
+          resizingAnimationDuration: AppDurations.ms300,
+        ),
+      );
+
+  void updateSubmissionPanelWidth(double width) => emit(
+        state.copyWith(
+          submissionPanelWidth: width,
+          resizingAnimationDuration: Duration.zero,
+        ),
+      );
 
   @override
   String get logIdentifier => '[SplitViewCubit]';
+
+  static const String _submissionPanelWidthKey = 'submissionPanelWidth';
+
+  @override
+  SplitViewState? fromJson(Map<String, dynamic> json) {
+    return state.copyWith(
+      submissionPanelWidth: json[_submissionPanelWidthKey] as double?,
+    );
+  }
+
+  @override
+  Map<String, dynamic>? toJson(SplitViewState state) {
+    return <String, dynamic>{
+      _submissionPanelWidthKey: state.submissionPanelWidth,
+    };
+  }
 }

lib/cubits/split_view/split_view_state.dart

@@ -5,25 +5,36 @@ class SplitViewState extends Equatable {
     required this.itemScreenArgs,
     required this.expanded,
     required this.enabled,
+    required this.resizingAnimationDuration,
+    this.submissionPanelWidth,
   });
 
   const SplitViewState.init()
       : enabled = false,
         expanded = false,
+        submissionPanelWidth = null,
+        resizingAnimationDuration = Duration.zero,
         itemScreenArgs = null;
 
   final bool enabled;
   final bool expanded;
+  final double? submissionPanelWidth;
+  final Duration resizingAnimationDuration;
   final ItemScreenArgs? itemScreenArgs;
 
   SplitViewState copyWith({
     bool? enabled,
     bool? expanded,
+    double? submissionPanelWidth,
+    Duration? resizingAnimationDuration,
     ItemScreenArgs? itemScreenArgs,
   }) {
     return SplitViewState(
       enabled: enabled ?? this.enabled,
       expanded: expanded ?? this.expanded,
+      submissionPanelWidth: submissionPanelWidth ?? this.submissionPanelWidth,
+      resizingAnimationDuration:
+          resizingAnimationDuration ?? this.resizingAnimationDuration,
       itemScreenArgs: itemScreenArgs ?? this.itemScreenArgs,
     );
   }
@@ -32,6 +43,8 @@ class SplitViewState extends Equatable {
   List<Object?> get props => <Object?>[
         enabled,
         expanded,
+        submissionPanelWidth,
+        resizingAnimationDuration,
         itemScreenArgs,
       ];
 }

lib/screens/home/widgets/tablet_home_screen.dart

@@ -1,6 +1,6 @@
 import 'package:flutter/material.dart' hide Badge;
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:hacki/config/constants.dart';
+import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
@@ -14,6 +14,8 @@ class TabletHomeScreen extends StatelessWidget {
   });
 
   final Widget homeScreen;
+  static const double _dragPanelWidth = Dimens.pt6;
+  static const double _dragDotHeight = Dimens.pt30;
 
   @override
   Widget build(BuildContext context) {
@@ -28,16 +30,26 @@ class TabletHomeScreen extends StatelessWidget {
 
         return BlocBuilder<SplitViewCubit, SplitViewState>(
           buildWhen: (SplitViewState previous, SplitViewState current) =>
-              previous.expanded != current.expanded,
+              previous.expanded != current.expanded ||
+              previous.submissionPanelWidth != current.submissionPanelWidth,
           builder: (BuildContext context, SplitViewState state) {
+            double submissionPanelWidth =
+                state.submissionPanelWidth ?? homeScreenWidth;
+
+            /// Prevent overflow after orientation change.
+            if (submissionPanelWidth > MediaQuery.of(context).size.width) {
+              submissionPanelWidth =
+                  MediaQuery.of(context).size.width - Dimens.pt64;
+            }
+
             return Stack(
               children: <Widget>[
                 AnimatedPositioned(
                   left: Dimens.zero,
                   top: Dimens.zero,
                   bottom: Dimens.zero,
-                  width: homeScreenWidth,
-                  duration: AppDurations.ms300,
+                  width: submissionPanelWidth,
+                  duration: state.resizingAnimationDuration,
                   curve: Curves.elasticOut,
                   child: homeScreen,
                 ),
@@ -46,7 +58,7 @@ class TabletHomeScreen extends StatelessWidget {
                     left: Dimens.pt24,
                     bottom: Dimens.pt36,
                     height: Dimens.pt40,
-                    width: homeScreenWidth - Dimens.pt24,
+                    width: submissionPanelWidth - Dimens.pt48,
                     child: const CountdownReminder(),
                   )
                 else
@@ -54,18 +66,68 @@ class TabletHomeScreen extends StatelessWidget {
                     left: Dimens.pt24,
                     bottom: Dimens.pt36,
                     height: Dimens.pt40,
-                    width: homeScreenWidth - Dimens.pt24,
+                    width: submissionPanelWidth - Dimens.pt48,
                     child: const DownloadProgressReminder(),
                   ),
                 AnimatedPositioned(
                   right: Dimens.zero,
                   top: Dimens.zero,
                   bottom: Dimens.zero,
-                  left: state.expanded ? Dimens.zero : homeScreenWidth,
-                  duration: AppDurations.ms300,
+                  left: state.expanded
+                      ? Dimens.zero
+                      : submissionPanelWidth + _dragPanelWidth,
+                  duration: state.resizingAnimationDuration,
                   curve: Curves.elasticOut,
                   child: const _TabletStoryView(),
                 ),
+                Positioned(
+                  left: submissionPanelWidth,
+                  top: Dimens.zero,
+                  bottom: Dimens.zero,
+                  width: _dragPanelWidth,
+                  child: GestureDetector(
+                    onHorizontalDragUpdate: (DragUpdateDetails details) {
+                      context.read<SplitViewCubit>().updateSubmissionPanelWidth(
+                            details.globalPosition.dx,
+                          );
+                    },
+                    child: ColoredBox(
+                      color: Theme.of(context).colorScheme.tertiary,
+                      child: const SizedBox.shrink(),
+                    ),
+                  ),
+                ),
+                Positioned(
+                  left: submissionPanelWidth +
+                      _dragPanelWidth / 2 -
+                      _dragDotHeight / 2,
+                  top:
+                      (MediaQuery.of(context).size.height - _dragDotHeight) / 2,
+                  height: _dragDotHeight,
+                  width: _dragDotHeight,
+                  child: GestureDetector(
+                    onHorizontalDragUpdate: (DragUpdateDetails details) {
+                      context.read<SplitViewCubit>().updateSubmissionPanelWidth(
+                            details.globalPosition.dx,
+                          );
+                    },
+                    child: Container(
+                      width: _dragDotHeight,
+                      height: _dragDotHeight,
+                      decoration: BoxDecoration(
+                        color: Theme.of(context).colorScheme.tertiary,
+                        shape: BoxShape.circle,
+                      ),
+                      child: Center(
+                        child: FaIcon(
+                          FontAwesomeIcons.gripLinesVertical,
+                          color: Theme.of(context).colorScheme.onTertiary,
+                          size: TextDimens.pt16,
+                        ),
+                      ),
+                    ),
+                  ),
+                ),
               ],
             );
           },

lib/styles/dimens.dart

@@ -13,6 +13,7 @@ abstract class Dimens {
   static const double pt18 = 18;
   static const double pt20 = 20;
   static const double pt24 = 24;
+  static const double pt30 = 30;
   static const double pt36 = 36;
   static const double pt40 = 40;
   static const double pt48 = 48;

pubspec.lock

@@ -1421,10 +1421,10 @@ packages:
     dependency: transitive
     description:
       name: vm_service
-      sha256: f652077d0bdf60abe4c1f6377448e8655008eef28f128bc023f7b5e8dfeb48fc
+      sha256: "5c5f338a667b4c644744b661f309fb8080bb94b18a7e91ef1dbd343bed00ed6d"
       url: "https://pub.dev"
     source: hosted
-    version: "14.2.4"
+    version: "14.2.5"
   wakelock_plus:
     dependency: "direct main"
     description:
@@ -1571,4 +1571,4 @@ packages:
     version: "3.1.2"
 sdks:
   dart: ">=3.4.0 <4.0.0"
-  flutter: ">=3.24.0"
+  flutter: ">=3.24.2"

pubspec.yaml

@@ -1,11 +1,11 @@
 name: hacki
 description: A Hacker News reader.
-version: 2.9.0+148
+version: 2.9.1+149
 publish_to: none
 
 environment:
   sdk: ">=3.0.0 <4.0.0"
-  flutter: "3.24.0"
+  flutter: "3.24.2"
 
 dependencies:
   adaptive_theme: ^3.2.0