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

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

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

ios/Podfile

@@ -1,5 +1,5 @@
 # Uncomment this line to define a global platform for your project
-platform :ios, '14.0'
+platform :ios, '15.0'
 
 # CocoaPods analytics sends network stats synchronously affecting flutter build latency.
 ENV['COCOAPODS_DISABLE_STATS'] = 'true'

ios/Runner.xcodeproj/project.pbxproj

@@ -549,7 +549,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				MARKETING_VERSION = "$(FLUTTER_BUILD_NAME)";
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
@@ -575,7 +575,7 @@
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Hacki;
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.news";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -639,7 +639,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				MARKETING_VERSION = "$(FLUTTER_BUILD_NAME)";
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
@@ -690,7 +690,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				MARKETING_VERSION = "$(FLUTTER_BUILD_NAME)";
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
@@ -718,7 +718,7 @@
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Hacki;
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.news";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -753,7 +753,7 @@
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = Hacki;
 				INFOPLIST_KEY_LSApplicationCategoryType = "public.app-category.news";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -789,7 +789,7 @@
 				INFOPLIST_FILE = "Share Extension/Info.plist";
 				INFOPLIST_KEY_CFBundleDisplayName = "Share Extension";
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -831,7 +831,7 @@
 				INFOPLIST_FILE = "Share Extension/Info.plist";
 				INFOPLIST_KEY_CFBundleDisplayName = "Share Extension";
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -869,7 +869,7 @@
 				INFOPLIST_FILE = "Share Extension/Info.plist";
 				INFOPLIST_KEY_CFBundleDisplayName = "Share Extension";
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -908,7 +908,7 @@
 				INFOPLIST_FILE = "Action Extension/Info.plist";
 				INFOPLIST_KEY_CFBundleDisplayName = "Open in Hacki";
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -952,7 +952,7 @@
 				INFOPLIST_FILE = "Action Extension/Info.plist";
 				INFOPLIST_KEY_CFBundleDisplayName = "Open in Hacki";
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -992,7 +992,7 @@
 				INFOPLIST_FILE = "Action Extension/Info.plist";
 				INFOPLIST_KEY_CFBundleDisplayName = "Open in Hacki";
 				INFOPLIST_KEY_NSHumanReadableCopyright = "";
-				IPHONEOS_DEPLOYMENT_TARGET = 14.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 15.0;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",

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,26 +58,76 @@ 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
                   Positioned(
                     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

@@ -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