v0.2.30 (#68)

* bumped version.

* cache  in case app gets killed in the background.

* bumped flutter version.

* updated

* improved 'ReplyBox'.

* fixed lint.

* fixed EditCubit.

* updated EditCubit.

* fixed navigation in tablet mode.

* clear cache after submission.

.github/workflows/github-actions.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     env:
       JAVA_VERSION: "11.0"
-      FLUTTER_VERSION: "3.0.0"
+      FLUTTER_VERSION: "3.0.5"
     steps:
       - uses: actions/checkout@v2
       - uses: actions/setup-java@v2
@@ -20,7 +20,7 @@ jobs:
           java-version: '17'
       - uses: subosito/flutter-action@v2
         with:
-          flutter-version: '3.0.0'
+          flutter-version: '3.0.5'
           channel: 'stable'
       - run: flutter pub get
       - run: flutter analyze

README.md

@@ -1,14 +1,13 @@
 
 # <img width="64" src="https://user-images.githubusercontent.com/7277662/167775086-0b234f28-dee4-44f6-aae4-14a28ed4bbb6.png"> Hacki for Hacker News
 
-A simple noiseless [Hacker News](https://news.ycombinator.com/) client made with Flutter that is just enough.
+A [Hacker News](https://news.ycombinator.com/) client made with Flutter that is just enough.
 
 [![App Store](https://img.shields.io/itunes/v/1602043763?label=App%20Store)](https://apps.apple.com/us/app/hacki/id1602043763?platform=iphone)
 [![Fdroid version](https://img.shields.io/f-droid/v/com.jiaqifeng.hacki)](https://f-droid.org/en/packages/com.jiaqifeng.hacki/)
 [![GH version](https://img.shields.io/github/release/livinglist/hacki.svg?logo=github)](https://github.com/Livinglist/Hacki/releases/latest)
-[![Visits Badge](https://badges.pufler.dev/visits/livinglist/Hacki)](https://badges.pufler.dev)
-[![GitHub](https://img.shields.io/github/stars/livinglist/Hacki?style=social)](https://img.shields.io/github/stars/livinglist/Hacki?style=social)
 [![style: effective dart](https://img.shields.io/badge/style-effective_dart-40c4ff.svg)](https://pub.dev/packages/effective_dart)
+[![GitHub](https://img.shields.io/github/stars/livinglist/Hacki?style=social)](https://img.shields.io/github/stars/livinglist/Hacki?style=social)
 
 [<img src="assets/images/app_store_badge.png" height="50">](https://apps.apple.com/us/app/hacki/id1602043763?platform=iphone) [<img src="assets/images/google_play_badge.png" height="50">](https://play.google.com/store/apps/details?id=com.jiaqifeng.hacki&hl=en_US&gl=US) [<img src="assets/images/f_droid_badge.png" height="50">](https://f-droid.org/en/packages/com.jiaqifeng.hacki/)
 

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

@@ -1 +0,0 @@
-- Bugfixes.

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

@@ -1 +0,0 @@
-- Updates to UI.

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

@@ -1 +0,0 @@
-- Updates to UI.

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

@@ -1 +0,0 @@
-- Updates to UI.

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

@@ -1 +0,0 @@
-- Tapping on comments in notification and history screen will lead you directly to the comment.

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

@@ -1,3 +0,0 @@
-- Tapping on comment in notification or history screen will now lead you directly to the comment.
-- Fixed the bug where reply box cannot be expanded in editing mode.
-- Fixed inconsistent font size in history screen.

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

@@ -1 +0,0 @@
-- Added offline mode.

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

@@ -1,2 +0,0 @@
-- Added offline mode.
-- Bugfixes.

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

@@ -1,2 +0,0 @@
-- Added offline mode.
-- Bugfixes.

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

@@ -1,2 +0,0 @@
-- Added offline mode.
-- Bugfixes.

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

@@ -1,3 +0,0 @@
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,3 +0,0 @@
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,3 +0,0 @@
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,4 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.

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

@@ -1,5 +0,0 @@
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.
-- Bugfixes.

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

@@ -1,6 +0,0 @@
-- You can now add filters for searching.
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.
-- Bugfixes.

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

@@ -1,6 +0,0 @@
-- You can now add filters for searching.
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.
-- Bugfixes.

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

@@ -1,6 +0,0 @@
-- You can now add filters for searching.
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.
-- Bugfixes.

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

@@ -1,6 +0,0 @@
-- You can now add filters for searching.
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.
-- Bugfixes.

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

@@ -1,7 +0,0 @@
-- You can share links.
-- You can now add filters for searching.
-- You can now participate in polls.
-- Pick up where you left off.
-- Swipe left on comment tile to view its parents without scrolling all the way up.
-- Huge performance boost.
-- Bugfixes.

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

@@ -0,0 +1,2 @@
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,2 @@
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,2 @@
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,2 @@
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,3 @@
+- Lazy loading.
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,3 @@
+- Lazy loading.
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,3 @@
+- Lazy loading.
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,3 @@
+- Lazy loading.
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

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

@@ -0,0 +1,3 @@
+- Lazy loading.
+- Offline mode now includes web pages.
+- You can now sort comments in story screen.

integration_test/app_test.dart

@@ -0,0 +1,46 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:hacki/main.dart' as app;
+import 'package:hacki/screens/widgets/story_tile.dart';
+import 'package:integration_test/integration_test.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  group('performance test', () {
+    testWidgets('scrolling performance on ItemScreen',
+        (WidgetTester tester) async {
+      await app.main(testing: true);
+      await tester.pump();
+
+      final Finder bestStoryTabFinder = find.text('BEST');
+
+      await tester.tap(bestStoryTabFinder);
+      await tester.pumpAndSettle(const Duration(seconds: 3));
+
+      final Finder storyTileFinder = find.byType(StoryTile);
+
+      await tester.tap(storyTileFinder.first);
+      await tester.pumpAndSettle(const Duration(seconds: 3));
+
+      TestGesture gesture = await tester.startGesture(const Offset(0, 300));
+      await gesture.moveBy(const Offset(0, -300));
+      await tester.pump();
+
+      gesture = await tester.startGesture(const Offset(0, 300));
+      await gesture.moveBy(const Offset(0, -300));
+      await tester.pump();
+
+      gesture = await tester.startGesture(const Offset(0, 300));
+      await gesture.moveBy(const Offset(0, -300));
+      await tester.pump();
+
+      gesture = await tester.startGesture(const Offset(0, 300));
+      await gesture.moveBy(const Offset(0, 900));
+      await tester.pump();
+
+      gesture = await tester.startGesture(const Offset(0, 300));
+      await gesture.moveBy(const Offset(0, -900));
+      await tester.pump();
+    });
+  });
+}

ios/Podfile.lock

@@ -19,6 +19,8 @@ PODS:
   - FMDB (2.7.5):
     - FMDB/standard (= 2.7.5)
   - FMDB/standard (2.7.5)
+  - integration_test (0.0.1):
+    - Flutter
   - OrderedSet (5.0.0)
   - path_provider_ios (0.0.1):
     - Flutter
@@ -50,6 +52,7 @@ DEPENDENCIES:
   - flutter_local_notifications (from `.symlinks/plugins/flutter_local_notifications/ios`)
   - flutter_secure_storage (from `.symlinks/plugins/flutter_secure_storage/ios`)
   - flutter_siri_suggestions (from `.symlinks/plugins/flutter_siri_suggestions/ios`)
+  - integration_test (from `.symlinks/plugins/integration_test/ios`)
   - path_provider_ios (from `.symlinks/plugins/path_provider_ios/ios`)
   - receive_sharing_intent (from `.symlinks/plugins/receive_sharing_intent/ios`)
   - share_plus (from `.symlinks/plugins/share_plus/ios`)
@@ -80,6 +83,8 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_secure_storage/ios"
   flutter_siri_suggestions:
     :path: ".symlinks/plugins/flutter_siri_suggestions/ios"
+  integration_test:
+    :path: ".symlinks/plugins/integration_test/ios"
   path_provider_ios:
     :path: ".symlinks/plugins/path_provider_ios/ios"
   receive_sharing_intent:
@@ -109,6 +114,7 @@ SPEC CHECKSUMS:
   flutter_secure_storage: 7953c38a04c3fdbb00571bcd87d8e3b5ceb9daec
   flutter_siri_suggestions: 226fb7ef33d25d3fe0d4aa2a8bcf4b72730c466f
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
+  integration_test: a1e7d09bd98eca2fc37aefd79d4f41ad37bdbbe5
   OrderedSet: aaeb196f7fef5a9edf55d89760da9176ad40b93c
   path_provider_ios: 14f3d2fd28c4fdb42f44e0f751d12861c43cee02
   ReachabilitySwift: 985039c6f7b23a1da463388634119492ff86c825

ios/Runner.xcodeproj/project.pbxproj

@@ -568,7 +568,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -577,7 +577,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.2.22;
+				MARKETING_VERSION = 0.2.30;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
@@ -705,7 +705,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -714,7 +714,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.2.22;
+				MARKETING_VERSION = 0.2.30;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";
@@ -736,7 +736,7 @@
 				CODE_SIGN_ENTITLEMENTS = Runner/Runner.entitlements;
 				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
-				CURRENT_PROJECT_VERSION = 1;
+				CURRENT_PROJECT_VERSION = 5;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -745,7 +745,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.2.22;
+				MARKETING_VERSION = 0.2.30;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

lib/blocs/stories/stories_bloc.dart

@@ -7,7 +7,9 @@ import 'package:hacki/config/locator.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/repositories.dart';
+import 'package:logger/logger.dart';
 import 'package:responsive_builder/responsive_builder.dart';
+import 'package:rxdart/rxdart.dart';
 
 part 'stories_event.dart';
 part 'stories_state.dart';
@@ -15,15 +17,18 @@ part 'stories_state.dart';
 class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
   StoriesBloc({
     required PreferenceCubit preferenceCubit,
-    CacheRepository? cacheRepository,
+    OfflineRepository? offlineRepository,
     StoriesRepository? storiesRepository,
     PreferenceRepository? preferenceRepository,
+    Logger? logger,
   })  : _preferenceCubit = preferenceCubit,
-        _cacheRepository = cacheRepository ?? locator.get<CacheRepository>(),
+        _offlineRepository =
+            offlineRepository ?? locator.get<OfflineRepository>(),
         _storiesRepository =
             storiesRepository ?? locator.get<StoriesRepository>(),
         _preferenceRepository =
             preferenceRepository ?? locator.get<PreferenceRepository>(),
+        _logger = logger ?? locator.get<Logger>(),
         super(const StoriesState.init()) {
     on<StoriesInitialize>(onInitialize);
     on<StoriesRefresh>(onRefresh);
@@ -39,9 +44,10 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
   }
 
   final PreferenceCubit _preferenceCubit;
-  final CacheRepository _cacheRepository;
+  final OfflineRepository _offlineRepository;
   final StoriesRepository _storiesRepository;
   final PreferenceRepository _preferenceRepository;
+  final Logger _logger;
   DeviceScreenType? deviceScreenType;
   StreamSubscription<PreferenceState>? _streamSubscription;
   static const int _smallPageSize = 10;
@@ -71,7 +77,7 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
         add(StoriesPageSizeChanged(pageSize: pageSize));
       }
     });
-    final bool hasCachedStories = await _cacheRepository.hasCachedStories;
+    final bool hasCachedStories = await _offlineRepository.hasCachedStories;
     final bool isComplexTile = _preferenceCubit.state.showComplexStoryTile;
     final int pageSize = _getPageSize(isComplexTile: isComplexTile);
     emit(
@@ -90,13 +96,13 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     required Emitter<StoriesState> emit,
   }) async {
     if (state.offlineReading) {
-      final List<int> ids = await _cacheRepository.getCachedStoryIds(of: of);
+      final List<int> ids = await _offlineRepository.getCachedStoryIds(of: of);
       emit(
         state
             .copyWithStoryIdsUpdated(of: of, to: ids)
             .copyWithCurrentPageUpdated(of: of, to: 0),
       );
-      _cacheRepository
+      _offlineRepository
           .getCachedStoriesStream(
         ids: ids.sublist(0, min(ids.length, state.currentPageSize)),
       )
@@ -167,7 +173,7 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
       }
 
       if (state.offlineReading) {
-        _cacheRepository
+        _offlineRepository
             .getCachedStoriesStream(
           ids: state.storyIdsByType[event.type]!.sublist(
             lower,
@@ -241,9 +247,9 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
       ),
     );
 
-    await _cacheRepository.deleteAllStoryIds();
-    await _cacheRepository.deleteAllStories();
-    await _cacheRepository.deleteAllComments();
+    await _offlineRepository.deleteAllStoryIds();
+    await _offlineRepository.deleteAllStories();
+    await _offlineRepository.deleteAllComments();
 
     final Set<int> prioritizedIds = <int>{};
     final List<StoryType> prioritizedTypes = <StoryType>[...types]
@@ -251,7 +257,7 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
 
     for (final StoryType type in prioritizedTypes) {
       final List<int> ids = await _storiesRepository.fetchStoryIds(of: type);
-      await _cacheRepository.cacheStoryIds(of: type, ids: ids);
+      await _offlineRepository.cacheStoryIds(of: type, ids: ids);
       prioritizedIds.addAll(ids);
     }
 
@@ -273,7 +279,7 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
       final List<int> ids = await _storiesRepository.fetchStoryIds(
         of: StoryType.latest,
       );
-      await _cacheRepository.cacheStoryIds(of: StoryType.latest, ids: ids);
+      await _offlineRepository.cacheStoryIds(of: StoryType.latest, ids: ids);
       latestIds.addAll(ids);
 
       await fetchAndCacheStories(
@@ -281,12 +287,6 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
         includingWebPage: event.includingWebPage,
         isPrioritized: false,
       );
-
-      emit(
-        state.copyWith(
-          downloadStatus: StoriesDownloadStatus.finished,
-        ),
-      );
     } catch (_) {
       emit(
         state.copyWith(
@@ -318,44 +318,53 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
         continue;
       }
 
-      await _cacheRepository.cacheStory(story: story);
+      await _offlineRepository.cacheStory(story: story);
 
       if (story.url.isNotEmpty && includingWebPage) {
-        await _cacheRepository.cacheUrl(url: story.url);
+        _logger.i('downloading ${story.url}');
+        await _offlineRepository.cacheUrl(url: story.url);
       }
 
-      final Completer<void> completer = Completer<void>();
       _storiesRepository
           .fetchAllChildrenComments(ids: story.kids)
-          .listen((Comment? comment) async {
-        if (comment != null) {
-          await _cacheRepository.cacheComment(comment: comment);
-        }
-      }).onDone(() {
-        completer.complete();
-        add(StoryDownloaded(skipped: false));
-      });
-
-      await completer.future;
+          .whereType<Comment>()
+          .listen(
+            (Comment comment) => unawaited(
+              _offlineRepository.cacheComment(comment: comment),
+            ),
+          )
+          .onDone(() => add(StoryDownloaded(skipped: false)));
     }
   }
 
   void onStoryDownloaded(StoryDownloaded event, Emitter<StoriesState> emit) {
     if (event.skipped) {
+      final int updatedStoriesToBeDownloaded = state.storiesToBeDownloaded - 1;
+
       emit(
         state.copyWith(
-          storiesToBeDownloaded: state.storiesToBeDownloaded - 1,
+          storiesToBeDownloaded: updatedStoriesToBeDownloaded,
+          downloadStatus:
+              state.storiesDownloaded == updatedStoriesToBeDownloaded
+                  ? StoriesDownloadStatus.finished
+                  : null,
         ),
       );
     } else {
       final int updatedStoriesDownloaded = state.storiesDownloaded + 1;
+      final int updatedStoriesToBeDownloaded =
+          updatedStoriesDownloaded > state.storiesToBeDownloaded
+              ? state.storiesToBeDownloaded + 1
+              : state.storiesToBeDownloaded;
+
       emit(
         state.copyWith(
           storiesDownloaded: updatedStoriesDownloaded,
-          storiesToBeDownloaded:
-              updatedStoriesDownloaded > state.storiesToBeDownloaded
-                  ? state.storiesToBeDownloaded + 1
-                  : state.storiesToBeDownloaded,
+          storiesToBeDownloaded: updatedStoriesToBeDownloaded,
+          downloadStatus:
+              updatedStoriesDownloaded == updatedStoriesToBeDownloaded
+                  ? StoriesDownloadStatus.finished
+                  : null,
         ),
       );
     }
@@ -373,10 +382,10 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     StoriesExitOffline event,
     Emitter<StoriesState> emit,
   ) async {
-    await _cacheRepository.deleteAllStoryIds();
-    await _cacheRepository.deleteAllStories();
-    await _cacheRepository.deleteAllComments();
-    await _cacheRepository.deleteAllWebPages();
+    await _offlineRepository.deleteAllStoryIds();
+    await _offlineRepository.deleteAllStories();
+    await _offlineRepository.deleteAllComments();
+    await _offlineRepository.deleteAllWebPages();
     emit(state.copyWith(offlineReading: false));
     add(StoriesInitialize());
   }

lib/config/custom_log_filter.dart

@@ -0,0 +1,31 @@
+import 'package:logger/logger.dart';
+
+class CustomLogFilter extends LogFilter {
+  @override
+  // ignore: overridden_fields
+  Level? level = Level.verbose;
+
+  /// The minimal level allowed in production.
+  static const Level _minimalLevel = Level.info;
+
+  @override
+  bool shouldLog(LogEvent event) {
+    bool shouldLog = false;
+
+    if (event.level.index >= _minimalLevel.index) {
+      return true;
+    }
+
+    assert(
+      () {
+        if (event.level.index >= level!.index) {
+          shouldLog = true;
+        }
+        return true;
+      }(),
+      '',
+    );
+
+    return shouldLog;
+  }
+}

lib/config/locator.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:get_it/get_it.dart';
+import 'package:hacki/config/custom_log_filter.dart';
 import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/services/services.dart';
 import 'package:logger/logger.dart';
@@ -10,16 +11,17 @@ final GetIt locator = GetIt.instance;
 /// Set up [GetIt] locator.
 Future<void> setUpLocator() async {
   locator
+    ..registerSingleton<Logger>(Logger(filter: CustomLogFilter()))
     ..registerSingleton<StoriesRepository>(StoriesRepository())
     ..registerSingleton<PreferenceRepository>(PreferenceRepository())
     ..registerSingleton<SearchRepository>(SearchRepository())
     ..registerSingleton<AuthRepository>(AuthRepository())
     ..registerSingleton<PostRepository>(PostRepository())
     ..registerSingleton<SembastRepository>(SembastRepository())
-    ..registerSingleton<CacheRepository>(CacheRepository())
-    ..registerSingleton<CacheService>(CacheService())
+    ..registerSingleton<OfflineRepository>(OfflineRepository())
+    ..registerSingleton<DraftCache>(DraftCache())
+    ..registerSingleton<CommentCache>(CommentCache())
     ..registerSingleton<LocalNotification>(LocalNotification())
-    ..registerSingleton<Logger>(Logger())
     ..registerSingleton<RouteObserver<ModalRoute<dynamic>>>(
       RouteObserver<ModalRoute<dynamic>>(),
     );

lib/cubits/collapse/collapse_cubit.dart

@@ -10,31 +10,31 @@ part 'collapse_state.dart';
 class CollapseCubit extends Cubit<CollapseState> {
   CollapseCubit({
     required int commentId,
-    CacheService? cacheService,
+    CollapseCache? collapseCache,
   })  : _commentId = commentId,
-        _cacheService = cacheService ?? locator.get<CacheService>(),
+        _collapseCache = collapseCache ?? locator.get<CollapseCache>(),
         super(const CollapseState.init());
 
   final int _commentId;
-  final CacheService _cacheService;
+  final CollapseCache _collapseCache;
   late final StreamSubscription<Map<int, Set<int>>> _streamSubscription;
 
   void init() {
     _streamSubscription =
-        _cacheService.hiddenComments.listen(hiddenCommentsStreamListener);
+        _collapseCache.hiddenComments.listen(hiddenCommentsStreamListener);
 
     emit(
       state.copyWith(
-        collapsedCount: _cacheService.totalHidden(_commentId),
-        collapsed: _cacheService.isCollapsed(_commentId),
-        hidden: _cacheService.isHidden(_commentId),
+        collapsedCount: _collapseCache.totalHidden(_commentId),
+        collapsed: _collapseCache.isCollapsed(_commentId),
+        hidden: _collapseCache.isHidden(_commentId),
       ),
     );
   }
 
   void collapse() {
     if (state.collapsed) {
-      _cacheService.uncollapse(_commentId);
+      _collapseCache.uncollapse(_commentId);
 
       emit(
         state.copyWith(
@@ -43,7 +43,7 @@ class CollapseCubit extends Cubit<CollapseState> {
         ),
       );
     } else {
-      final int count = _cacheService.collapse(_commentId);
+      final int count = _collapseCache.collapse(_commentId);
 
       emit(
         state.copyWith(

lib/cubits/comments/comments_cubit.dart

@@ -11,31 +11,56 @@ import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/services/services.dart';
+import 'package:logger/logger.dart';
 
 part 'comments_state.dart';
 
 class CommentsCubit extends Cubit<CommentsState> {
   CommentsCubit({
-    CacheService? cacheService,
-    CacheRepository? cacheRepository,
+    required CollapseCache collapseCache,
+    CommentCache? commentCache,
+    OfflineRepository? offlineRepository,
     StoriesRepository? storiesRepository,
     SembastRepository? sembastRepository,
+    Logger? logger,
     required bool offlineReading,
     required Item item,
-  })  : _cacheService = cacheService ?? locator.get<CacheService>(),
-        _cacheRepository = cacheRepository ?? locator.get<CacheRepository>(),
+    required FetchMode defaultFetchMode,
+    required CommentsOrder defaultCommentsOrder,
+  })  : _collapseCache = collapseCache,
+        _commentCache = commentCache ?? locator.get<CommentCache>(),
+        _offlineRepository =
+            offlineRepository ?? locator.get<OfflineRepository>(),
         _storiesRepository =
             storiesRepository ?? locator.get<StoriesRepository>(),
         _sembastRepository =
             sembastRepository ?? locator.get<SembastRepository>(),
-        super(CommentsState.init(offlineReading: offlineReading, item: item));
+        _logger = logger ?? locator.get<Logger>(),
+        super(
+          CommentsState.init(
+            offlineReading: offlineReading,
+            item: item,
+            fetchMode: defaultFetchMode,
+            order: defaultCommentsOrder,
+          ),
+        );
 
-  final CacheService _cacheService;
-  final CacheRepository _cacheRepository;
+  final CollapseCache _collapseCache;
+  final CommentCache _commentCache;
+  final OfflineRepository _offlineRepository;
   final StoriesRepository _storiesRepository;
   final SembastRepository _sembastRepository;
+  final Logger _logger;
+
+  /// The [StreamSubscription] for stream (both lazy or eager)
+  /// fetching comments posted directly to the story.
   StreamSubscription<Comment>? _streamSubscription;
 
+  /// The map of [StreamSubscription] for streams
+  /// fetching comments lazily. [int] is the id of parent comment.
+  final Map<int, StreamSubscription<Comment>> _streamSubscriptions =
+      <int, StreamSubscription<Comment>>{};
+
   static const int _pageSize = 20;
 
   @override
@@ -47,6 +72,7 @@ class CommentsCubit extends Cubit<CommentsState> {
 
   Future<void> init({
     bool onlyShowTargetComment = false,
+    bool useCommentCache = false,
     List<Comment>? targetParents,
   }) async {
     if (onlyShowTargetComment && (targetParents?.isNotEmpty ?? false)) {
@@ -59,7 +85,7 @@ class CommentsCubit extends Cubit<CommentsState> {
       );
 
       _streamSubscription = _storiesRepository
-          .fetchCommentsStream(
+          .fetchAllCommentsRecursivelyStream(
             ids: targetParents!.last.kids,
             level: targetParents.last.level + 1,
           )
@@ -69,7 +95,13 @@ class CommentsCubit extends Cubit<CommentsState> {
       return;
     }
 
-    emit(state.copyWith(status: CommentsStatus.loading));
+    emit(
+      state.copyWith(
+        status: CommentsStatus.loading,
+        comments: <Comment>[],
+        currentPage: 0,
+      ),
+    );
 
     final Item item = state.item;
     final Item updatedItem = state.offlineReading
@@ -80,15 +112,31 @@ class CommentsCubit extends Cubit<CommentsState> {
     emit(state.copyWith(item: updatedItem));
 
     if (state.offlineReading) {
-      _streamSubscription = _cacheRepository
+      _streamSubscription = _offlineRepository
           .getCachedCommentsStream(ids: kids)
           .listen(_onCommentFetched)
         ..onDone(_onDone);
     } else {
-      _streamSubscription = _storiesRepository
-          .fetchCommentsStream(ids: kids)
-          .listen(_onCommentFetched)
-        ..onDone(_onDone);
+      switch (state.fetchMode) {
+        case FetchMode.lazy:
+          _streamSubscription = _storiesRepository
+              .fetchCommentsStream(
+                ids: kids,
+                getFromCache: useCommentCache ? _commentCache.getComment : null,
+              )
+              .listen(_onCommentFetched)
+            ..onDone(_onDone);
+          break;
+        case FetchMode.eager:
+          _streamSubscription = _storiesRepository
+              .fetchAllCommentsRecursivelyStream(
+                ids: kids,
+                getFromCache: useCommentCache ? _commentCache.getComment : null,
+              )
+              .listen(_onCommentFetched)
+            ..onDone(_onDone);
+          break;
+      }
     }
   }
 
@@ -102,28 +150,47 @@ class CommentsCubit extends Cubit<CommentsState> {
       return;
     }
 
-    _cacheService
-      ..resetComments()
-      ..resetCollapsedComments();
-
     emit(
       state.copyWith(
         status: CommentsStatus.loading,
-        comments: <Comment>[],
       ),
     );
 
+    _collapseCache.resetCollapsedComments();
+
     await _streamSubscription?.cancel();
+    for (final int id in _streamSubscriptions.keys) {
+      await _streamSubscriptions[id]?.cancel();
+    }
+    _streamSubscriptions.clear();
+
+    emit(
+      state.copyWith(
+        comments: <Comment>[],
+        currentPage: 0,
+      ),
+    );
 
     final Item item = state.item;
     final Item updatedItem =
         await _storiesRepository.fetchItemBy(id: item.id) ?? item;
     final List<int> kids = sortKids(updatedItem.kids);
 
-    _streamSubscription = _storiesRepository
-        .fetchCommentsStream(ids: kids)
-        .listen(_onCommentFetched)
-      ..onDone(_onDone);
+    if (state.fetchMode == FetchMode.lazy) {
+      _streamSubscription = _storiesRepository
+          .fetchCommentsStream(
+            ids: kids,
+          )
+          .listen(_onCommentFetched)
+        ..onDone(_onDone);
+    } else {
+      _streamSubscription = _storiesRepository
+          .fetchAllCommentsRecursivelyStream(
+            ids: kids,
+          )
+          .listen(_onCommentFetched)
+        ..onDone(_onDone);
+    }
 
     emit(
       state.copyWith(
@@ -138,17 +205,67 @@ class CommentsCubit extends Cubit<CommentsState> {
     emit(
       state.copyWith(
         onlyShowTargetComment: false,
-        comments: <Comment>[],
         item: story,
       ),
     );
     init();
   }
 
-  void loadMore() {
-    if (_streamSubscription != null) {
-      emit(state.copyWith(status: CommentsStatus.loading));
-      _streamSubscription?.resume();
+  /// [comment] is only used for lazy fetching.
+  void loadMore({Comment? comment}) {
+    switch (state.fetchMode) {
+      case FetchMode.lazy:
+        if (comment == null) return;
+        if (_streamSubscriptions.containsKey(comment.id)) return;
+
+        final int level = comment.level + 1;
+        int offset = 0;
+
+        /// Ignoring because the subscription will be cancelled in close()
+        // ignore: cancel_subscriptions
+        final StreamSubscription<Comment> streamSubscription =
+            _storiesRepository
+                .fetchCommentsStream(ids: comment.kids)
+                .listen((Comment cmt) {
+          _collapseCache.addKid(cmt.id, to: cmt.parent);
+          _commentCache.cacheComment(cmt);
+          _sembastRepository.cacheComment(cmt);
+
+          final List<LinkifyElement> elements = _linkify(
+            cmt.text,
+          );
+
+          final BuildableComment buildableComment =
+              BuildableComment.fromComment(cmt, elements: elements);
+
+          emit(
+            state.copyWith(
+              comments: <Comment>[...state.comments]..insert(
+                  state.comments.indexOf(comment) + offset + 1,
+                  buildableComment.copyWith(level: level),
+                ),
+            ),
+          );
+          offset++;
+        })
+              ..onDone(() {
+                _streamSubscriptions[comment.id]?.cancel();
+                _streamSubscriptions.remove(comment.id);
+              })
+              ..onError((dynamic error) {
+                _logger.e(error);
+                _streamSubscriptions[comment.id]?.cancel();
+                _streamSubscriptions.remove(comment.id);
+              });
+
+        _streamSubscriptions[comment.id] = streamSubscription;
+        break;
+      case FetchMode.eager:
+        if (_streamSubscription != null) {
+          emit(state.copyWith(status: CommentsStatus.loading));
+          _streamSubscription?.resume();
+        }
+        break;
     }
   }
 
@@ -175,11 +292,30 @@ class CommentsCubit extends Cubit<CommentsState> {
   }
 
   void onOrderChanged(CommentsOrder? order) {
-    HapticFeedback.selectionClick();
     if (order == null) return;
+    if (state.order == order) return;
+    HapticFeedback.selectionClick();
     _streamSubscription?.cancel();
-    emit(state.copyWith(order: order, comments: <Comment>[]));
-    init();
+    for (final StreamSubscription<Comment> s in _streamSubscriptions.values) {
+      s.cancel();
+    }
+    _streamSubscriptions.clear();
+    emit(state.copyWith(order: order));
+    init(useCommentCache: true);
+  }
+
+  void onFetchModeChanged(FetchMode? fetchMode) {
+    if (fetchMode == null) return;
+    if (state.fetchMode == fetchMode) return;
+    _collapseCache.resetCollapsedComments();
+    HapticFeedback.selectionClick();
+    _streamSubscription?.cancel();
+    for (final StreamSubscription<Comment> s in _streamSubscriptions.values) {
+      s.cancel();
+    }
+    _streamSubscriptions.clear();
+    emit(state.copyWith(fetchMode: fetchMode));
+    init(useCommentCache: true);
   }
 
   List<int> sortKids(List<int> kids) {
@@ -205,9 +341,8 @@ class CommentsCubit extends Cubit<CommentsState> {
 
   void _onCommentFetched(Comment? comment) {
     if (comment != null) {
-      _cacheService
-        ..addKid(comment.id, to: comment.parent)
-        ..cacheComment(comment);
+      _collapseCache.addKid(comment.id, to: comment.parent);
+      _commentCache.cacheComment(comment);
       _sembastRepository.cacheComment(comment);
 
       final List<LinkifyElement> elements = _linkify(
@@ -224,21 +359,24 @@ class CommentsCubit extends Cubit<CommentsState> {
 
       emit(state.copyWith(comments: updatedComments));
 
-      if (updatedComments.length >= _pageSize + _pageSize * state.currentPage &&
-          updatedComments.length <=
-              _pageSize * 2 + _pageSize * state.currentPage) {
-        final bool isHidden = _cacheService.isHidden(comment.id);
+      if (state.fetchMode == FetchMode.eager) {
+        if (updatedComments.length >=
+                _pageSize + _pageSize * state.currentPage &&
+            updatedComments.length <=
+                _pageSize * 2 + _pageSize * state.currentPage) {
+          final bool isHidden = _collapseCache.isHidden(comment.id);
 
-        if (!isHidden) {
-          _streamSubscription?.pause();
+          if (!isHidden) {
+            _streamSubscription?.pause();
+          }
+
+          emit(
+            state.copyWith(
+              currentPage: state.currentPage + 1,
+              status: CommentsStatus.loaded,
+            ),
+          );
         }
-
-        emit(
-          state.copyWith(
-            currentPage: state.currentPage + 1,
-            status: CommentsStatus.loaded,
-          ),
-        );
       }
     }
   }
@@ -271,6 +409,9 @@ class CommentsCubit extends Cubit<CommentsState> {
   @override
   Future<void> close() async {
     await _streamSubscription?.cancel();
+    for (final StreamSubscription<Comment> s in _streamSubscriptions.values) {
+      await s.cancel();
+    }
     await super.close();
   }
 }

lib/cubits/comments/comments_state.dart

@@ -14,6 +14,11 @@ enum CommentsOrder {
   oldestFirst,
 }
 
+enum FetchMode {
+  lazy,
+  eager,
+}
+
 class CommentsState extends Equatable {
   const CommentsState({
     required this.item,
@@ -21,6 +26,7 @@ class CommentsState extends Equatable {
     required this.status,
     required this.fetchParentStatus,
     required this.order,
+    required this.fetchMode,
     required this.onlyShowTargetComment,
     required this.offlineReading,
     required this.currentPage,
@@ -29,10 +35,11 @@ class CommentsState extends Equatable {
   CommentsState.init({
     required this.offlineReading,
     required this.item,
+    required this.fetchMode,
+    required this.order,
   })  : comments = <Comment>[],
         status = CommentsStatus.init,
         fetchParentStatus = CommentsStatus.init,
-        order = CommentsOrder.natural,
         onlyShowTargetComment = false,
         currentPage = 0;
 
@@ -41,6 +48,7 @@ class CommentsState extends Equatable {
   final CommentsStatus status;
   final CommentsStatus fetchParentStatus;
   final CommentsOrder order;
+  final FetchMode fetchMode;
   final bool onlyShowTargetComment;
   final bool offlineReading;
   final int currentPage;
@@ -51,6 +59,7 @@ class CommentsState extends Equatable {
     CommentsStatus? status,
     CommentsStatus? fetchParentStatus,
     CommentsOrder? order,
+    FetchMode? fetchMode,
     bool? onlyShowTargetComment,
     bool? offlineReading,
     int? currentPage,
@@ -61,6 +70,7 @@ class CommentsState extends Equatable {
       fetchParentStatus: fetchParentStatus ?? this.fetchParentStatus,
       status: status ?? this.status,
       order: order ?? this.order,
+      fetchMode: fetchMode ?? this.fetchMode,
       onlyShowTargetComment:
           onlyShowTargetComment ?? this.onlyShowTargetComment,
       offlineReading: offlineReading ?? this.offlineReading,
@@ -68,6 +78,8 @@ class CommentsState extends Equatable {
     );
   }
 
+  Set<int> get commentIds => comments.map((Comment e) => e.id).toSet();
+
   @override
   List<Object?> get props => <Object?>[
         item,
@@ -75,6 +87,7 @@ class CommentsState extends Equatable {
         status,
         fetchParentStatus,
         order,
+        fetchMode,
         onlyShowTargetComment,
         offlineReading,
         currentPage,

lib/cubits/edit/edit_cubit.dart

@@ -1,26 +1,27 @@
-import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:hacki/config/locator.dart';
+import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/services/services.dart';
 import 'package:hacki/utils/debouncer.dart';
+import 'package:hydrated_bloc/hydrated_bloc.dart';
 
 part 'edit_state.dart';
 
-class EditCubit extends Cubit<EditState> {
-  EditCubit({CacheService? cacheService})
-      : _cacheService = cacheService ?? locator.get<CacheService>(),
+class EditCubit extends HydratedCubit<EditState> {
+  EditCubit({DraftCache? draftCache})
+      : _draftCache = draftCache ?? locator.get<DraftCache>(),
         _debouncer = Debouncer(delay: const Duration(seconds: 1)),
         super(const EditState.init());
 
-  final CacheService _cacheService;
+  final DraftCache _draftCache;
   final Debouncer _debouncer;
 
   void onReplyTapped(Item item) {
     emit(
       EditState(
         replyingTo: item,
-        text: _cacheService.getDraft(replyingTo: item.id),
+        text: _draftCache.getDraft(replyingTo: item.id),
       ),
     );
   }
@@ -44,9 +45,10 @@ class EditCubit extends Cubit<EditState> {
 
   void onReplySubmittedSuccessfully() {
     if (state.replyingTo != null) {
-      _cacheService.removeDraft(replyingTo: state.replyingTo!.id);
+      _draftCache.removeDraft(replyingTo: state.replyingTo!.id);
     }
     emit(const EditState.init());
+    clear();
   }
 
   void onTextChanged(String text) {
@@ -54,11 +56,54 @@ class EditCubit extends Cubit<EditState> {
     if (state.replyingTo != null) {
       final int? id = state.replyingTo?.id;
       _debouncer.run(() {
-        _cacheService.cacheDraft(
+        _draftCache.cacheDraft(
           text: text,
           replyingTo: id!,
         );
       });
     }
   }
+
+  void deleteDraft() => clear();
+
+  @override
+  EditState? fromJson(Map<String, dynamic> json) {
+    final String text = json['text'] as String? ?? '';
+    final Map<String, dynamic>? itemJson =
+        json['item'] as Map<String, dynamic>?;
+    final Item? replyingTo = itemJson == null ? null : Item.fromJson(itemJson);
+
+    if (replyingTo != null && text.isNotEmpty) {
+      _draftCache.cacheDraft(text: text, replyingTo: replyingTo.id);
+
+      final EditState state = EditState(
+        text: text,
+        replyingTo: replyingTo,
+      );
+
+      cachedState = state;
+
+      return state;
+    }
+
+    return state;
+  }
+
+  @override
+  Map<String, dynamic>? toJson(EditState state) {
+    EditState selected = state;
+
+    if (state.replyingTo == null ||
+        (state.replyingTo?.id != cachedState.replyingTo?.id &&
+            state.text.isNullOrEmpty)) {
+      selected = cachedState;
+    }
+
+    return <String, dynamic>{
+      'text': selected.text,
+      'item': selected.replyingTo?.toJson(),
+    };
+  }
+
+  static EditState cachedState = const EditState.init();
 }

lib/cubits/notification/notification_cubit.dart

@@ -33,7 +33,8 @@ class NotificationCubit extends Cubit<NotificationState> {
         _preferenceRepository.shouldShowNotification
             .then((bool showNotification) {
           if (showNotification) {
-            init();
+            // Delaying the initialization to prevent janks in home screen.
+            Future<void>.delayed(const Duration(seconds: 2), init);
           }
         });
 

lib/cubits/preference/preference_cubit.dart

@@ -1,6 +1,8 @@
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
+import 'package:flutter/services.dart';
 import 'package:hacki/config/locator.dart';
+import 'package:hacki/cubits/comments/comments_cubit.dart';
 import 'package:hacki/repositories/repositories.dart';
 
 part 'preference_state.dart';
@@ -33,6 +35,10 @@ class PreferenceCubit extends Cubit<PreferenceState> {
         .then((bool value) => emit(state.copyWith(markReadStories: value)));
     _preferenceRepository.shouldShowMetadata
         .then((bool value) => emit(state.copyWith(showMetadata: value)));
+    _preferenceRepository.fetchMode
+        .then((FetchMode value) => emit(state.copyWith(fetchMode: value)));
+    _preferenceRepository.commentsOrder
+        .then((CommentsOrder value) => emit(state.copyWith(order: value)));
   }
 
   void toggleNotificationMode() {
@@ -74,4 +80,18 @@ class PreferenceCubit extends Cubit<PreferenceState> {
     emit(state.copyWith(showMetadata: !state.showMetadata));
     _preferenceRepository.toggleMetadataMode();
   }
+
+  void selectFetchMode(FetchMode? fetchMode) {
+    if (fetchMode == null || state.fetchMode == fetchMode) return;
+    HapticFeedback.lightImpact();
+    emit(state.copyWith(fetchMode: fetchMode));
+    _preferenceRepository.selectFetchMode(fetchMode);
+  }
+
+  void selectCommentsOrder(CommentsOrder? order) {
+    if (order == null || state.order == order) return;
+    HapticFeedback.lightImpact();
+    emit(state.copyWith(order: order));
+    _preferenceRepository.selectCommentsOrder(order);
+  }
 }

lib/cubits/preference/preference_state.dart

@@ -10,6 +10,8 @@ class PreferenceState extends Equatable {
     required this.useReader,
     required this.markReadStories,
     required this.showMetadata,
+    required this.fetchMode,
+    required this.order,
   });
 
   const PreferenceState.init()
@@ -20,7 +22,9 @@ class PreferenceState extends Equatable {
         useTrueDark = false,
         useReader = false,
         markReadStories = false,
-        showMetadata = false;
+        showMetadata = false,
+        fetchMode = FetchMode.eager,
+        order = CommentsOrder.natural;
 
   final bool showNotification;
   final bool showComplexStoryTile;
@@ -30,6 +34,8 @@ class PreferenceState extends Equatable {
   final bool useReader;
   final bool markReadStories;
   final bool showMetadata;
+  final FetchMode fetchMode;
+  final CommentsOrder order;
 
   PreferenceState copyWith({
     bool? showNotification,
@@ -40,6 +46,8 @@ class PreferenceState extends Equatable {
     bool? useReader,
     bool? markReadStories,
     bool? showMetadata,
+    FetchMode? fetchMode,
+    CommentsOrder? order,
   }) {
     return PreferenceState(
       showNotification: showNotification ?? this.showNotification,
@@ -50,6 +58,8 @@ class PreferenceState extends Equatable {
       useReader: useReader ?? this.useReader,
       markReadStories: markReadStories ?? this.markReadStories,
       showMetadata: showMetadata ?? this.showMetadata,
+      fetchMode: fetchMode ?? this.fetchMode,
+      order: order ?? this.order,
     );
   }
 
@@ -63,5 +73,7 @@ class PreferenceState extends Equatable {
         useReader,
         markReadStories,
         showMetadata,
+        fetchMode,
+        order,
       ];
 }

lib/cubits/split_view/split_view_cubit.dart

@@ -3,18 +3,24 @@ import 'package:equatable/equatable.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/services/services.dart';
+import 'package:logger/logger.dart';
 
 part 'split_view_state.dart';
 
 class SplitViewCubit extends Cubit<SplitViewState> {
-  SplitViewCubit({CacheService? cacheService})
-      : _cacheService = cacheService ?? locator.get<CacheService>(),
+  SplitViewCubit({
+    CommentCache? commentCache,
+    Logger? logger,
+  })  : _commentCache = commentCache ?? locator.get<CommentCache>(),
+        _logger = logger ?? locator.get<Logger>(),
         super(const SplitViewState.init());
 
-  final CacheService _cacheService;
+  final Logger _logger;
+  final CommentCache _commentCache;
 
   void updateItemScreenArgs(ItemScreenArgs args) {
-    _cacheService.resetCollapsedComments();
+    _logger.i('resetting comments in CommentCache');
+    _commentCache.resetComments();
     emit(state.copyWith(itemScreenArgs: args));
   }
 

lib/cubits/time_machine/time_machine_cubit.dart

@@ -3,34 +3,34 @@ import 'package:equatable/equatable.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/models/models.dart' show Comment;
 import 'package:hacki/repositories/repositories.dart';
-import 'package:hacki/services/cache_service.dart';
+import 'package:hacki/services/services.dart';
 
 part 'time_machine_state.dart';
 
 class TimeMachineCubit extends Cubit<TimeMachineState> {
   TimeMachineCubit({
     SembastRepository? sembastRepository,
-    CacheService? cacheService,
+    CommentCache? commentCache,
   })  : _sembastRepository =
             sembastRepository ?? locator.get<SembastRepository>(),
-        _cacheService = cacheService ?? locator.get<CacheService>(),
+        _commentCache = commentCache ?? locator.get<CommentCache>(),
         super(TimeMachineState.init());
 
   final SembastRepository _sembastRepository;
-  final CacheService _cacheService;
+  final CommentCache _commentCache;
 
   Future<void> activateTimeMachine(Comment comment) async {
     emit(state.copyWith(parents: <Comment>[]));
 
     final List<Comment> parents = <Comment>[];
-    Comment? parent = _cacheService.getComment(comment.parent);
+    Comment? parent = _commentCache.getComment(comment.parent);
     parent ??= await _sembastRepository.getCachedComment(id: comment.parent);
 
     while (parent != null) {
       parents.insert(0, parent);
 
       final int parentId = parent.parent;
-      parent = _cacheService.getComment(parentId);
+      parent = _commentCache.getComment(parentId);
       parent ??= await _sembastRepository.getCachedComment(id: parentId);
     }
 

lib/extensions/context_extension.dart

@@ -0,0 +1,58 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+extension ContextExtension on BuildContext {
+  T? tryRead<T>() {
+    try {
+      return read<T>();
+    } catch (_) {
+      return null;
+    }
+  }
+
+  Rect? get rect {
+    final RenderBox? box = findRenderObject() as RenderBox?;
+    final Rect? rect =
+        box == null ? null : box.localToGlobal(Offset.zero) & box.size;
+    return rect;
+  }
+
+  static double _screenWidth = 0;
+  static double _storyTileHeight = 0;
+  static int _storyTileMaxLines = 4;
+  static const double _screenWidthLowerBound = 428,
+      _screenWidthUpperBound = 850,
+      _picHeightLowerBound = 110,
+      _picHeightUpperBound = 128,
+      _smallPicHeight = 100,
+      _picHeightFactor = 0.3;
+
+  double get storyTileHeight {
+    final double screenWidth =
+        min(MediaQuery.of(this).size.height, MediaQuery.of(this).size.width);
+
+    if (screenWidth == _screenWidth) {
+      return _storyTileHeight;
+    } else {
+      _screenWidth = screenWidth;
+    }
+
+    final bool showSmallerPreviewPic = screenWidth > _screenWidthLowerBound &&
+        screenWidth < _screenWidthUpperBound;
+    final double height = showSmallerPreviewPic
+        ? _smallPicHeight
+        : (screenWidth * _picHeightFactor)
+            .clamp(_picHeightLowerBound, _picHeightUpperBound);
+    final int maxLines = height == _smallPicHeight ? 3 : 4;
+    _storyTileMaxLines = maxLines;
+
+    _storyTileHeight = height;
+    return height;
+  }
+
+  int get storyTileMaxLines {
+    return _storyTileMaxLines;
+  }
+}

lib/extensions/date_time_extension.dart

@@ -7,10 +7,8 @@ extension DateTimeExtension on DateTime {
       return '$gap year${gap == 1 ? '' : 's'} ago';
     } else if (diff.inDays > 30) {
       int gap = now.month - month;
-      if (gap == 0) {
-        gap = 1;
-      } else if (gap < 0) {
-        gap = now.month + (12 - month);
+      if (gap <= 0) {
+        gap = now.month + 12 - month;
       }
       return '$gap month${gap == 1 ? '' : 's'} ago';
     } else if (diff.inDays >= 1) {

lib/extensions/extensions.dart

@@ -1,3 +1,4 @@
+export 'context_extension.dart';
 export 'date_time_extension.dart';
 export 'int_extension.dart';
 export 'list_extension.dart';

lib/extensions/string_extension.dart

@@ -13,3 +13,12 @@ extension StringExtension on String {
     return replaceAllMapped(regex, (_) => '');
   }
 }
+
+extension OptionalStringExtension on String? {
+  bool get isNullOrEmpty {
+    if (this == null) return true;
+    return this!.trim().isEmpty;
+  }
+
+  bool get isNotNullOrEmpty => !isNullOrEmpty;
+}

lib/extensions/widget_extension.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 
 extension WidgetModifier on Widget {
-  Widget padding([EdgeInsetsGeometry value = const EdgeInsets.all(12)]) {
+  Widget padded([EdgeInsetsGeometry value = const EdgeInsets.all(12)]) {
     return Padding(
       padding: value,
       child: this,

lib/main.dart

@@ -3,6 +3,7 @@ import 'dart:io';
 
 import 'package:adaptive_theme/adaptive_theme.dart';
 import 'package:feature_discovery/feature_discovery.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
@@ -14,9 +15,11 @@ import 'package:hacki/config/locator.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/repositories/repositories.dart' show PreferenceRepository;
 import 'package:hacki/screens/screens.dart';
+import 'package:hacki/services/custom_bloc_observer.dart';
 import 'package:hacki/services/fetcher.dart';
 import 'package:hacki/styles/styles.dart';
 import 'package:hive/hive.dart';
+import 'package:hydrated_bloc/hydrated_bloc.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:rxdart/rxdart.dart' show BehaviorSubject;
 import 'package:shared_preferences/shared_preferences.dart';
@@ -30,9 +33,19 @@ final BehaviorSubject<String?> selectNotificationSubject =
 final BehaviorSubject<String?> siriSuggestionSubject =
     BehaviorSubject<String?>();
 
-Future<void> main() async {
+late final bool isTesting;
+
+Future<void> main({bool testing = false}) async {
   WidgetsFlutterBinding.ensureInitialized();
 
+  isTesting = testing;
+
+  final HydratedStorage storage = await HydratedStorage.build(
+    storageDirectory: kIsWeb
+        ? HydratedStorage.webStorageDirectory
+        : await getTemporaryDirectory(),
+  );
+
   if (Platform.isIOS) {
     unawaited(
       Workmanager().initialize(
@@ -86,25 +99,32 @@ Future<void> main() async {
   final bool trueDarkMode =
       prefs.getBool(PreferenceRepository.trueDarkModeKey) ?? false;
 
-  // Uncomment code below for running with logging.
-  // BlocOverrides.runZoned(
-  //   () {
-  //     runApp(
-  //       HackiApp(
-  //         savedThemeMode: savedThemeMode,
-  //         trueDarkMode: trueDarkMode,
-  //       ),
-  //     );
-  //   },
-  //   blocObserver: CustomBlocObserver(),
-  // );
-
-  runApp(
-    HackiApp(
-      savedThemeMode: savedThemeMode,
-      trueDarkMode: trueDarkMode,
-    ),
-  );
+  if (kReleaseMode) {
+    HydratedBlocOverrides.runZoned(
+      () => runApp(
+        HackiApp(
+          savedThemeMode: savedThemeMode,
+          trueDarkMode: trueDarkMode,
+        ),
+      ),
+      storage: storage,
+    );
+  } else {
+    BlocOverrides.runZoned(
+      () {
+        HydratedBlocOverrides.runZoned(
+          () => runApp(
+            HackiApp(
+              savedThemeMode: savedThemeMode,
+              trueDarkMode: trueDarkMode,
+            ),
+          ),
+          storage: storage,
+        );
+      },
+      blocObserver: CustomBlocObserver(),
+    );
+  }
 }
 
 class HackiApp extends StatelessWidget {
@@ -180,6 +200,10 @@ class HackiApp extends StatelessWidget {
           lazy: false,
           create: (BuildContext context) => PostCubit(),
         ),
+        BlocProvider<EditCubit>(
+          lazy: false,
+          create: (BuildContext context) => EditCubit(),
+        ),
       ],
       child: AdaptiveTheme(
         light: ThemeData(

lib/models/comment.dart

@@ -59,6 +59,7 @@ class Comment extends Item {
     );
   }
 
+  @override
   Map<String, dynamic> toJson() => <String, dynamic>{
         'id': id,
         'time': time,

lib/models/item.dart

@@ -1,7 +1,7 @@
 import 'package:equatable/equatable.dart';
 import 'package:hacki/extensions/date_time_extension.dart';
 
-abstract class Item extends Equatable {
+class Item extends Equatable {
   const Item({
     required this.id,
     required this.deleted,
@@ -35,6 +35,22 @@ abstract class Item extends Equatable {
         text = '',
         type = '';
 
+  Item.fromJson(Map<String, dynamic> json)
+      : id = json['id'] as int? ?? 0,
+        score = json['score'] as int? ?? 0,
+        descendants = json['descendants'] as int? ?? 0,
+        time = json['time'] as int? ?? 0,
+        by = json['by'] as String? ?? '',
+        title = json['title'] as String? ?? '',
+        text = json['text'] as String? ?? '',
+        url = json['url'] as String? ?? '',
+        kids = <int>[],
+        dead = json['dead'] as bool? ?? false,
+        deleted = json['deleted'] as bool? ?? false,
+        parent = json['parent'] as int? ?? 0,
+        parts = <int>[],
+        type = json['type'] as String? ?? '';
+
   final int id;
   final int time;
   final int score;
@@ -65,4 +81,40 @@ abstract class Item extends Equatable {
   bool get isJob => type == 'job';
 
   bool get isComment => type == 'comment';
+
+  Map<String, dynamic> toJson() {
+    return <String, dynamic>{
+      'descendants': descendants,
+      'id': id,
+      'score': score,
+      'time': time,
+      'by': by,
+      'title': title,
+      'url': url,
+      'kids': kids,
+      'text': text,
+      'dead': dead,
+      'deleted': deleted,
+      'type': type,
+      'parts': parts,
+    };
+  }
+
+  @override
+  List<Object?> get props => <Object?>[
+        id,
+        deleted,
+        by,
+        time,
+        text,
+        dead,
+        parent,
+        kids,
+        url,
+        score,
+        title,
+        type,
+        parts,
+        descendants,
+      ];
 }

lib/models/poll_option.dart

@@ -79,6 +79,7 @@ class PollOption extends Item {
     );
   }
 
+  @override
   Map<String, dynamic> toJson() {
     return <String, dynamic>{
       'descendants': descendants,

lib/models/story.dart

@@ -1,5 +1,3 @@
-import 'dart:convert';
-
 import 'package:hacki/models/item.dart';
 
 enum StoryType {
@@ -93,6 +91,7 @@ class Story extends Item {
   String get simpleMetadata =>
       '''$score point${score > 1 ? 's' : ''} $descendants comment${descendants > 1 ? 's' : ''} $postedDate''';
 
+  @override
   Map<String, dynamic> toJson() {
     return <String, dynamic>{
       'descendants': descendants,
@@ -113,9 +112,10 @@ class Story extends Item {
 
   @override
   String toString() {
-    final String prettyString =
-        const JsonEncoder.withIndent('  ').convert(this);
-    return 'Story $prettyString';
+    // final String prettyString =
+    //     const JsonEncoder.withIndent('  ').convert(this);
+    // return 'Story $prettyString';
+    return 'Story $id';
   }
 
   @override

lib/models/user.dart

@@ -1,5 +1,3 @@
-import 'dart:convert';
-
 import 'package:intl/intl.dart';
 
 class User {
@@ -39,8 +37,6 @@ class User {
 
   @override
   String toString() {
-    final String prettyString =
-        const JsonEncoder.withIndent('  ').convert(this);
-    return 'User $prettyString';
+    return 'User $about, $created, $delay, $id, $karma';
   }
 }

lib/repositories/auth_repository.dart

@@ -5,16 +5,20 @@ import 'package:hacki/config/locator.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/postable_repository.dart';
 import 'package:hacki/repositories/repositories.dart';
+import 'package:logger/logger.dart';
 
 class AuthRepository extends PostableRepository {
   AuthRepository({
     Dio? dio,
     PreferenceRepository? preferenceRepository,
+    Logger? logger,
   })  : _preferenceRepository =
             preferenceRepository ?? locator.get<PreferenceRepository>(),
+        _logger = logger ?? locator.get<Logger>(),
         super(dio: dio);
 
   final PreferenceRepository _preferenceRepository;
+  final Logger _logger;
 
   static const String _authority = 'news.ycombinator.com';
 
@@ -38,10 +42,15 @@ class AuthRepository extends PostableRepository {
     final bool success = await performDefaultPost(uri, data);
 
     if (success) {
-      await _preferenceRepository.setAuth(
-        username: username,
-        password: password,
-      );
+      try {
+        await _preferenceRepository.setAuth(
+          username: username,
+          password: password,
+        );
+      } catch (_) {
+        _logger.e(_);
+        return false;
+      }
     }
 
     return success;

lib/repositories/cache_repository.dart

@@ -1,167 +0,0 @@
-import 'package:flutter/foundation.dart';
-import 'package:hacki/models/models.dart';
-import 'package:hive/hive.dart';
-import 'package:http/http.dart';
-
-/// [CacheRepository] is for storing stories and comments for offline reading.
-/// It's using [Hive] as its database which is being stored in temp directory.
-class CacheRepository {
-  CacheRepository({
-    Future<Box<List<int>>>? storyIdBox,
-    Future<Box<Map<dynamic, dynamic>>>? storyBox,
-    Future<Box<String>>? webPageBox,
-    Future<LazyBox<Map<dynamic, dynamic>>>? commentBox,
-  })  : _storyIdBox = storyIdBox ?? Hive.openBox<List<int>>(_storyIdBoxName),
-        _storyBox =
-            storyBox ?? Hive.openBox<Map<dynamic, dynamic>>(_storyBoxName),
-        _webPageBox = webPageBox ?? Hive.openBox<String>(_webPageBoxName),
-        _commentBox = commentBox ??
-            Hive.openLazyBox<Map<dynamic, dynamic>>(_commentBoxName);
-
-  static const String _storyIdBoxName = 'storyIdBox';
-  static const String _storyBoxName = 'storyBox';
-  static const String _commentBoxName = 'commentBox';
-  static const String _webPageBoxName = 'webPageBox';
-  final Future<Box<List<int>>> _storyIdBox;
-  final Future<Box<Map<dynamic, dynamic>>> _storyBox;
-  final Future<LazyBox<Map<dynamic, dynamic>>> _commentBox;
-  final Future<Box<String>> _webPageBox;
-
-  Future<bool> get hasCachedStories =>
-      _storyBox.then((Box<Map<dynamic, dynamic>> box) => box.isNotEmpty);
-
-  Future<void> cacheStoryIds({
-    required StoryType of,
-    required List<int> ids,
-  }) async {
-    final Box<List<int>> box = await _storyIdBox;
-    return box.put(of.name, ids);
-  }
-
-  Future<void> cacheStory({required Story story}) async {
-    final Box<Map<dynamic, dynamic>> box = await _storyBox;
-    return box.put(story.id.toString(), story.toJson());
-  }
-
-  Future<void> cacheUrl({required String url}) async {
-    final Box<String> box = await _webPageBox;
-    final String html = await compute(downloadWebPage, url);
-    return box.put(url, html);
-  }
-
-  Future<String?> getHtml({required String url}) async {
-    final Box<String> box = await _webPageBox;
-    return box.get(url);
-  }
-
-  Future<bool> hasCachedWebPage({required String url}) async {
-    final Box<String> box = await _webPageBox;
-    return box.containsKey(url);
-  }
-
-  Future<List<int>> getCachedStoryIds({required StoryType of}) async {
-    final Box<List<int>> box = await _storyIdBox;
-    final List<int>? ids = box.get(of.name);
-    return ids ?? <int>[];
-  }
-
-  Stream<Story> getCachedStoriesStream({required List<int> ids}) async* {
-    final Box<Map<dynamic, dynamic>> box = await _storyBox;
-
-    for (final int id in ids) {
-      final Map<dynamic, dynamic>? json = box.get(id.toString());
-
-      if (json == null) {
-        continue;
-      }
-
-      final Story story = Story.fromJson(json.cast<String, dynamic>());
-      yield story;
-    }
-
-    return;
-  }
-
-  Future<Story?> getCachedStory({required int id}) async {
-    final Box<Map<dynamic, dynamic>> box = await _storyBox;
-    final Map<dynamic, dynamic>? json = box.get(id.toString());
-    if (json == null) {
-      return null;
-    }
-    final Story story = Story.fromJson(json.cast<String, dynamic>());
-    return story;
-  }
-
-  Future<void> cacheComment({required Comment comment}) async {
-    final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
-    return box.put(comment.id.toString(), comment.toJson());
-  }
-
-  Future<Comment?> getCachedComment({required int id}) async {
-    final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
-    final Map<dynamic, dynamic>? json = await box.get(id.toString());
-    if (json == null) {
-      return null;
-    }
-    final Comment comment = Comment.fromJson(json.cast<String, dynamic>());
-    return comment;
-  }
-
-  Stream<Comment> getCachedCommentsStream({
-    required List<int> ids,
-    int level = 0,
-  }) async* {
-    final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
-
-    for (final int id in ids) {
-      final Map<dynamic, dynamic>? json = await box.get(id.toString());
-
-      if (json != null) {
-        final Comment comment =
-            Comment.fromJson(json.cast<String, dynamic>(), level: level);
-
-        yield comment;
-        yield* getCachedCommentsStream(ids: comment.kids, level: level + 1);
-      }
-    }
-  }
-
-  Future<int> deleteAllStoryIds() async {
-    final Box<List<int>> box = await _storyIdBox;
-    return box.clear();
-  }
-
-  Future<int> deleteAllStories() async {
-    final Box<Map<dynamic, dynamic>> box = await _storyBox;
-    return box.clear();
-  }
-
-  Future<int> deleteAllComments() async {
-    final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
-    return box.clear();
-  }
-
-  Future<int> deleteAllWebPages() async {
-    final Box<String> box = await _webPageBox;
-    return box.clear();
-  }
-
-  Future<int> deleteAll() async {
-    return deleteAllStoryIds()
-        .whenComplete(deleteAllStories)
-        .whenComplete(deleteAllComments)
-        .whenComplete(deleteAllWebPages);
-  }
-
-  static Future<String> downloadWebPage(String link) async {
-    try {
-      final Client client = Client();
-      final Uri url = Uri.parse(link);
-      final Response response = await client.get(url);
-      final String body = response.body;
-      return body;
-    } catch (_) {
-      return '''Web page not available.''';
-    }
-  }
-}

lib/repositories/offline_repository.dart

@@ -0,0 +1,274 @@
+import 'package:flutter/foundation.dart';
+import 'package:hacki/config/locator.dart';
+import 'package:hacki/models/models.dart';
+import 'package:hive/hive.dart';
+import 'package:http/http.dart';
+import 'package:logger/logger.dart';
+
+/// [OfflineRepository] is for storing stories and comments for offline reading.
+/// It's using [Hive] as its database which is being stored in temp directory.
+class OfflineRepository {
+  OfflineRepository({
+    Future<Box<List<int>>>? storyIdBox,
+    Future<Box<Map<dynamic, dynamic>>>? storyBox,
+    Future<LazyBox<String>>? webPageBox,
+    Future<LazyBox<Map<dynamic, dynamic>>>? commentBox,
+    Logger? logger,
+  })  : _storyIdBox = storyIdBox ?? Hive.openBox<List<int>>(_storyIdBoxName),
+        _storyBox =
+            storyBox ?? Hive.openBox<Map<dynamic, dynamic>>(_storyBoxName),
+        _webPageBox = webPageBox ?? Hive.openLazyBox<String>(_webPageBoxName),
+        _commentBox = commentBox ??
+            Hive.openLazyBox<Map<dynamic, dynamic>>(_commentBoxName),
+        _logger = logger ?? locator.get<Logger>();
+
+  static const String _storyIdBoxName = 'storyIdBox';
+  static const String _storyBoxName = 'storyBox';
+  static const String _commentBoxName = 'commentBox';
+  static const String _webPageBoxName = 'webPageBox';
+  final Future<Box<List<int>>> _storyIdBox;
+  final Future<Box<Map<dynamic, dynamic>>> _storyBox;
+  final Future<LazyBox<Map<dynamic, dynamic>>> _commentBox;
+  final Future<LazyBox<String>> _webPageBox;
+  final Logger _logger;
+
+  Future<bool> get hasCachedStories =>
+      _storyBox.then((Box<Map<dynamic, dynamic>> box) => box.isNotEmpty);
+
+  Future<void> cacheStoryIds({
+    required StoryType of,
+    required List<int> ids,
+  }) async {
+    late final Box<List<int>> box;
+
+    try {
+      box = await _storyIdBox;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyIdBoxName);
+      box = await _storyIdBox;
+    }
+
+    return box.put(of.name, ids);
+  }
+
+  Future<void> cacheStory({required Story story}) async {
+    late final Box<Map<dynamic, dynamic>> box;
+
+    try {
+      box = await _storyBox;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyBoxName);
+      box = await _storyBox;
+    }
+
+    return box.put(story.id.toString(), story.toJson());
+  }
+
+  Future<void> cacheUrl({required String url}) async {
+    late final LazyBox<String> box;
+
+    try {
+      box = await _webPageBox;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_webPageBoxName);
+      box = await _webPageBox;
+    }
+
+    final String html = await compute(_downloadWebPage, url);
+    return box.put(url, html);
+  }
+
+  Future<String?> getHtml({required String url}) async {
+    try {
+      final LazyBox<String> box = await _webPageBox;
+      return box.get(url);
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_webPageBoxName);
+      return null;
+    }
+  }
+
+  Future<bool> hasCachedWebPage({required String url}) async {
+    try {
+      final LazyBox<String> box = await _webPageBox;
+      return box.containsKey(url);
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_webPageBoxName);
+      return false;
+    }
+  }
+
+  Future<List<int>> getCachedStoryIds({required StoryType of}) async {
+    try {
+      final Box<List<int>> box = await _storyIdBox;
+      final List<int>? ids = box.get(of.name);
+      return ids ?? <int>[];
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyIdBoxName);
+      return <int>[];
+    }
+  }
+
+  Stream<Story> getCachedStoriesStream({required List<int> ids}) async* {
+    late final Box<Map<dynamic, dynamic>> box;
+
+    try {
+      box = await _storyBox;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyBoxName);
+      return;
+    }
+
+    for (final int id in ids) {
+      final Map<dynamic, dynamic>? json = box.get(id.toString());
+
+      if (json == null) {
+        continue;
+      }
+
+      final Story story = Story.fromJson(json.cast<String, dynamic>());
+      yield story;
+    }
+
+    return;
+  }
+
+  Future<Story?> getCachedStory({required int id}) async {
+    late final Box<Map<dynamic, dynamic>> box;
+
+    try {
+      box = await _storyBox;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyBoxName);
+      return null;
+    }
+
+    final Map<dynamic, dynamic>? json = box.get(id.toString());
+    if (json == null) {
+      return null;
+    }
+    final Story story = Story.fromJson(json.cast<String, dynamic>());
+    return story;
+  }
+
+  Future<void> cacheComment({required Comment comment}) async {
+    late final LazyBox<Map<dynamic, dynamic>> box;
+
+    try {
+      box = await _commentBox;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_commentBoxName);
+      box = await _commentBox;
+    }
+
+    return box.put(comment.id.toString(), comment.toJson());
+  }
+
+  Future<Comment?> getCachedComment({required int id}) async {
+    try {
+      final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
+      final Map<dynamic, dynamic>? json = await box.get(id.toString());
+      if (json == null) {
+        return null;
+      }
+      final Comment comment = Comment.fromJson(json.cast<String, dynamic>());
+      return comment;
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_commentBoxName);
+      return null;
+    }
+  }
+
+  Stream<Comment> getCachedCommentsStream({
+    required List<int> ids,
+    int level = 0,
+  }) async* {
+    final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
+
+    for (final int id in ids) {
+      final Map<dynamic, dynamic>? json = await box.get(id.toString());
+
+      if (json != null) {
+        final Comment comment =
+            Comment.fromJson(json.cast<String, dynamic>(), level: level);
+
+        yield comment;
+        yield* getCachedCommentsStream(ids: comment.kids, level: level + 1);
+      }
+    }
+  }
+
+  Future<int> deleteAllStoryIds() async {
+    try {
+      final Box<List<int>> box = await _storyIdBox;
+      return box.clear();
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyIdBoxName);
+      return 0;
+    }
+  }
+
+  Future<int> deleteAllStories() async {
+    try {
+      final Box<Map<dynamic, dynamic>> box = await _storyBox;
+      return box.clear();
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_storyBoxName);
+      return 0;
+    }
+  }
+
+  Future<int> deleteAllComments() async {
+    try {
+      final LazyBox<Map<dynamic, dynamic>> box = await _commentBox;
+      return box.clear();
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_commentBoxName);
+      return 0;
+    }
+  }
+
+  Future<int> deleteAllWebPages() async {
+    try {
+      final LazyBox<String> box = await _webPageBox;
+      return box.clear();
+    } catch (_) {
+      _logger.e(_);
+      await Hive.deleteBoxFromDisk(_webPageBoxName);
+      return 0;
+    }
+  }
+
+  Future<int> deleteAll() async {
+    return deleteAllStoryIds()
+        .whenComplete(deleteAllStories)
+        .whenComplete(deleteAllComments)
+        .whenComplete(deleteAllWebPages);
+  }
+
+  static Future<String> _downloadWebPage(String link) async {
+    try {
+      final Client client = Client();
+      final Uri url = Uri.parse(link);
+      final Response response = await client.get(url);
+      final String body = response.body;
+      client.close();
+      return body;
+    } catch (_) {
+      return '''Web page not available.''';
+    }
+  }
+}

lib/repositories/preference_repository.dart

@@ -2,6 +2,9 @@ import 'dart:async';
 import 'dart:io';
 
 import 'package:flutter_secure_storage/flutter_secure_storage.dart';
+import 'package:hacki/config/locator.dart';
+import 'package:hacki/cubits/comments/comments_cubit.dart';
+import 'package:logger/logger.dart';
 import 'package:shared_preferences/shared_preferences.dart';
 import 'package:synced_shared_preferences/synced_shared_preferences.dart';
 
@@ -10,9 +13,11 @@ class PreferenceRepository {
     SyncedSharedPreferences? syncedPrefs,
     Future<SharedPreferences>? prefs,
     FlutterSecureStorage? secureStorage,
+    Logger? logger,
   })  : _syncedPrefs = syncedPrefs ?? SyncedSharedPreferences.instance,
         _prefs = prefs ?? SharedPreferences.getInstance(),
-        _secureStorage = secureStorage ?? const FlutterSecureStorage();
+        _secureStorage = secureStorage ?? const FlutterSecureStorage(),
+        _logger = logger ?? locator.get<Logger>();
 
   static const String _usernameKey = 'username';
   static const String _passwordKey = 'password';
@@ -38,20 +43,26 @@ class PreferenceRepository {
   static const String _navigationModeKey = 'navigationMode';
   static const String _eyeCandyModeKey = 'eyeCandyMode';
   static const String _markReadStoriesModeKey = 'markReadStoriesMode';
+  static const String _fetchModeKey = 'fetchMode';
+  static const String _commentsOrderKey = 'commentsOrder';
 
   static const bool _notificationModeDefaultValue = true;
   static const bool _displayModeDefaultValue = true;
-  static const bool _navigationModeDefaultValue = true;
+  static const bool _navigationModeDefaultValueIOS = true;
+  static const bool _navigationModeDefaultValueAndroid = false;
   static const bool _eyeCandyModeDefaultValue = false;
   static const bool _trueDarkModeDefaultValue = false;
   static const bool _readerModeDefaultValue = true;
   static const bool _markReadStoriesModeDefaultValue = true;
   static const bool _isFirstLaunchKeyDefaultValue = true;
   static const bool _metadataModeDefaultValue = true;
+  static final int _fetchModeDefaultValue = FetchMode.eager.index;
+  static final int _commentsOrderDefaultValue = CommentsOrder.natural.index;
 
   final SyncedSharedPreferences _syncedPrefs;
   final Future<SharedPreferences> _prefs;
   final FlutterSecureStorage _secureStorage;
+  final Logger _logger;
 
   Future<bool> get loggedIn async => await username != null;
 
@@ -82,7 +93,10 @@ class PreferenceRepository {
 
   Future<bool> get shouldShowWebFirst async => _prefs.then(
         (SharedPreferences prefs) =>
-            prefs.getBool(_navigationModeKey) ?? _navigationModeDefaultValue,
+            prefs.getBool(_navigationModeKey) ??
+            (Platform.isAndroid
+                ? _navigationModeDefaultValueAndroid
+                : _navigationModeDefaultValueIOS),
       );
 
   Future<bool> get shouldShowEyeCandy async => _prefs.then(
@@ -111,6 +125,17 @@ class PreferenceRepository {
             _markReadStoriesModeDefaultValue,
       );
 
+  Future<FetchMode> get fetchMode async => _prefs.then(
+        (SharedPreferences prefs) => FetchMode.values
+            .elementAt(prefs.getInt(_fetchModeKey) ?? _fetchModeDefaultValue),
+      );
+
+  Future<CommentsOrder> get commentsOrder async => _prefs.then(
+        (SharedPreferences prefs) => CommentsOrder.values.elementAt(
+          prefs.getInt(_commentsOrderKey) ?? _commentsOrderDefaultValue,
+        ),
+      );
+
   Future<bool> hasPushed(int commentId) async =>
       _prefs.then((SharedPreferences prefs) {
         final bool? val = prefs.getBool(_getPushNotificationKey(commentId));
@@ -140,8 +165,29 @@ class PreferenceRepository {
     required String username,
     required String password,
   }) async {
-    await _secureStorage.write(key: _usernameKey, value: username);
-    await _secureStorage.write(key: _passwordKey, value: password);
+    const AndroidOptions androidOptions = AndroidOptions(resetOnError: true);
+    try {
+      await _secureStorage.write(
+        key: _usernameKey,
+        value: username,
+        aOptions: androidOptions,
+      );
+      await _secureStorage.write(
+        key: _passwordKey,
+        value: password,
+        aOptions: androidOptions,
+      );
+    } catch (_) {
+      try {
+        await _secureStorage.deleteAll(
+          aOptions: androidOptions,
+        );
+      } catch (_) {
+        _logger.e(_);
+      }
+
+      rethrow;
+    }
   }
 
   Future<void> removeAuth() async {
@@ -165,8 +211,10 @@ class PreferenceRepository {
 
   Future<void> toggleNavigationMode() async {
     final SharedPreferences prefs = await _prefs;
-    final bool currentMode =
-        prefs.getBool(_navigationModeKey) ?? _navigationModeDefaultValue;
+    final bool currentMode = prefs.getBool(_navigationModeKey) ??
+        (Platform.isAndroid
+            ? _navigationModeDefaultValueAndroid
+            : _navigationModeDefaultValueIOS);
     await prefs.setBool(_navigationModeKey, !currentMode);
   }
 
@@ -205,6 +253,18 @@ class PreferenceRepository {
     await prefs.setBool(_metadataModeKey, !currentMode);
   }
 
+  Future<void> selectFetchMode(FetchMode fetchMode) async {
+    final SharedPreferences prefs = await _prefs;
+    final int index = fetchMode.index;
+    await prefs.setInt(_fetchModeKey, index);
+  }
+
+  Future<void> selectCommentsOrder(CommentsOrder order) async {
+    final SharedPreferences prefs = await _prefs;
+    final int index = order.index;
+    await prefs.setInt(_commentsOrderKey, index);
+  }
+
   //#region fav
 
   Future<List<int>> favList({required String of}) async {

lib/repositories/repositories.dart

@@ -1,5 +1,5 @@
 export 'auth_repository.dart';
-export 'cache_repository.dart';
+export 'offline_repository.dart';
 export 'post_repository.dart';
 export 'preference_repository.dart';
 export 'search_repository.dart';

lib/repositories/stories_repository.dart

@@ -51,9 +51,37 @@ class StoriesRepository {
   Stream<Comment> fetchCommentsStream({
     required List<int> ids,
     int level = 0,
+    Comment? Function(int)? getFromCache,
   }) async* {
     for (final int id in ids) {
-      final Comment? comment = await _firebaseClient
+      Comment? comment = getFromCache?.call(id)?.copyWith(level: level);
+
+      comment ??= await _firebaseClient
+          .get('${_baseUrl}item/$id.json')
+          .then((dynamic json) => _parseJson(json as Map<String, dynamic>?))
+          .then((Map<String, dynamic>? json) async {
+        if (json == null) return null;
+
+        final Comment comment = Comment.fromJson(json, level: level);
+        return comment;
+      });
+
+      if (comment != null) {
+        yield comment;
+      }
+    }
+    return;
+  }
+
+  Stream<Comment> fetchAllCommentsRecursivelyStream({
+    required List<int> ids,
+    int level = 0,
+    Comment? Function(int)? getFromCache,
+  }) async* {
+    for (final int id in ids) {
+      Comment? comment = getFromCache?.call(id)?.copyWith(level: level);
+
+      comment ??= await _firebaseClient
           .get('${_baseUrl}item/$id.json')
           .then((dynamic json) => _parseJson(json as Map<String, dynamic>?))
           .then((Map<String, dynamic>? json) async {
@@ -66,9 +94,10 @@ class StoriesRepository {
       if (comment != null) {
         yield comment;
 
-        yield* fetchCommentsStream(
+        yield* fetchAllCommentsRecursivelyStream(
           ids: comment.kids,
           level: level + 1,
+          getFromCache: getFromCache,
         );
       }
     }

lib/screens/home_screen.dart

@@ -26,6 +26,7 @@ import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/services/services.dart';
 import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
+import 'package:logger/logger.dart';
 import 'package:receive_sharing_intent/receive_sharing_intent.dart';
 import 'package:responsive_builder/responsive_builder.dart';
 
@@ -47,7 +48,6 @@ class HomeScreen extends StatefulWidget {
 
 class _HomeScreenState extends State<HomeScreen>
     with SingleTickerProviderStateMixin, RouteAware {
-  final CacheService cacheService = locator.get<CacheService>();
   final Throttle featureDiscoveryDismissThrottle = Throttle(
     delay: _throttleDelay,
   );
@@ -66,9 +66,10 @@ class _HomeScreenState extends State<HomeScreen>
     super.didPopNext();
     if (context.read<StoriesBloc>().deviceScreenType ==
         DeviceScreenType.mobile) {
+      locator.get<Logger>().i('resetting comments in CommentCache');
       Future<void>.delayed(
         const Duration(milliseconds: 500),
-        cacheService.resetCollapsedComments,
+        locator.get<CommentCache>().resetComments,
       );
     }
   }
@@ -102,12 +103,14 @@ class _HomeScreenState extends State<HomeScreen>
 
     SchedulerBinding.instance
       ..addPostFrameCallback((_) {
-        FeatureDiscovery.discoverFeatures(
-          context,
-          const <String>{
-            Constants.featureLogIn,
-          },
-        );
+        if (!isTesting) {
+          FeatureDiscovery.discoverFeatures(
+            context,
+            const <String>{
+              Constants.featureLogIn,
+            },
+          );
+        }
       })
       ..addPostFrameCallback((_) {
         final ModalRoute<dynamic>? route = ModalRoute.of(context);
@@ -449,7 +452,10 @@ class _HomeScreenState extends State<HomeScreen>
       locator.get<StoriesRepository>().fetchItemBy(id: id).then((Item? item) {
         if (mounted) {
           if (item != null) {
-            goToItemScreen(args: ItemScreenArgs(item: item));
+            goToItemScreen(
+              args: ItemScreenArgs(item: item),
+              forceNewScreen: true,
+            );
           }
         }
       });

lib/screens/item/item_screen.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: comment_references
+
 import 'package:equatable/equatable.dart';
 import 'package:feature_discovery/feature_discovery.dart';
 import 'package:flutter/material.dart';
@@ -38,6 +40,7 @@ class ItemScreenArgs extends Equatable {
   const ItemScreenArgs({
     required this.item,
     this.onlyShowTargetComment = false,
+    this.useCommentCache = false,
     this.targetComments,
   });
 
@@ -45,11 +48,17 @@ class ItemScreenArgs extends Equatable {
   final bool onlyShowTargetComment;
   final List<Comment>? targetComments;
 
+  /// when a user is trying to view a sub-thread from a main thread, we don't
+  /// need to fetch comments from [StoryRepository] since we have some, if not
+  /// all, comments cached in [CommentCache].
+  final bool useCommentCache;
+
   @override
   List<Object?> get props => <Object?>[
         item,
         onlyShowTargetComment,
         targetComments,
+        useCommentCache,
       ];
 }
 
@@ -66,25 +75,32 @@ class ItemScreen extends StatefulWidget {
   static Route<dynamic> route(ItemScreenArgs args) {
     return MaterialPageRoute<ItemScreen>(
       settings: const RouteSettings(name: routeName),
-      builder: (BuildContext context) => MultiBlocProvider(
-        providers: <BlocProvider<dynamic>>[
-          BlocProvider<CommentsCubit>(
-            create: (_) => CommentsCubit(
-              offlineReading: context.read<StoriesBloc>().state.offlineReading,
-              item: args.item,
-            )..init(
-                onlyShowTargetComment: args.onlyShowTargetComment,
-                targetParents: args.targetComments,
-              ),
+      builder: (BuildContext context) => RepositoryProvider<CollapseCache>(
+        create: (BuildContext context) => CollapseCache(),
+        lazy: false,
+        child: MultiBlocProvider(
+          providers: <BlocProvider<dynamic>>[
+            BlocProvider<CommentsCubit>(
+              create: (BuildContext context) => CommentsCubit(
+                offlineReading:
+                    context.read<StoriesBloc>().state.offlineReading,
+                item: args.item,
+                collapseCache: context.read<CollapseCache>(),
+                defaultFetchMode:
+                    context.read<PreferenceCubit>().state.fetchMode,
+                defaultCommentsOrder:
+                    context.read<PreferenceCubit>().state.order,
+              )..init(
+                  onlyShowTargetComment: args.onlyShowTargetComment,
+                  targetParents: args.targetComments,
+                  useCommentCache: args.useCommentCache,
+                ),
+            ),
+          ],
+          child: ItemScreen(
+            item: args.item,
+            parentComments: args.targetComments ?? <Comment>[],
           ),
-          BlocProvider<EditCubit>(
-            lazy: false,
-            create: (BuildContext context) => EditCubit(),
-          ),
-        ],
-        child: ItemScreen(
-          item: args.item,
-          parentComments: args.targetComments ?? <Comment>[],
         ),
       ),
     );
@@ -100,27 +116,33 @@ class ItemScreen extends StatefulWidget {
           return true;
         }
       },
-      child: MultiBlocProvider(
-        key: ValueKey<ItemScreenArgs>(args),
-        providers: <BlocProvider<dynamic>>[
-          BlocProvider<CommentsCubit>(
-            create: (BuildContext context) => CommentsCubit(
-              offlineReading: context.read<StoriesBloc>().state.offlineReading,
-              item: args.item,
-            )..init(
-                onlyShowTargetComment: args.onlyShowTargetComment,
-                targetParents: args.targetComments,
-              ),
+      child: RepositoryProvider<CollapseCache>(
+        create: (BuildContext context) => CollapseCache(),
+        lazy: false,
+        child: MultiBlocProvider(
+          key: ValueKey<ItemScreenArgs>(args),
+          providers: <BlocProvider<dynamic>>[
+            BlocProvider<CommentsCubit>(
+              create: (BuildContext context) => CommentsCubit(
+                offlineReading:
+                    context.read<StoriesBloc>().state.offlineReading,
+                item: args.item,
+                collapseCache: context.read<CollapseCache>(),
+                defaultFetchMode:
+                    context.read<PreferenceCubit>().state.fetchMode,
+                defaultCommentsOrder:
+                    context.read<PreferenceCubit>().state.order,
+              )..init(
+                  onlyShowTargetComment: args.onlyShowTargetComment,
+                  targetParents: args.targetComments,
+                ),
+            ),
+          ],
+          child: ItemScreen(
+            item: args.item,
+            parentComments: args.targetComments ?? <Comment>[],
+            splitViewEnabled: true,
           ),
-          BlocProvider<EditCubit>(
-            lazy: false,
-            create: (BuildContext context) => EditCubit(),
-          ),
-        ],
-        child: ItemScreen(
-          item: args.item,
-          parentComments: args.targetComments ?? <Comment>[],
-          splitViewEnabled: true,
         ),
       ),
     );
@@ -134,7 +156,7 @@ class ItemScreen extends StatefulWidget {
   _ItemScreenState createState() => _ItemScreenState();
 }
 
-class _ItemScreenState extends State<ItemScreen> {
+class _ItemScreenState extends State<ItemScreen> with RouteAware {
   final TextEditingController commentEditingController =
       TextEditingController();
   final ScrollController scrollController = ScrollController();
@@ -155,20 +177,40 @@ class _ItemScreenState extends State<ItemScreen> {
   static const Duration _featureDiscoveryDismissThrottleDelay =
       Duration(seconds: 1);
 
+  @override
+  void didPop() {
+    super.didPop();
+    if (context.read<EditCubit>().state.text.isNullOrEmpty) {
+      context.read<EditCubit>().onReplyBoxClosed();
+    }
+  }
+
   @override
   void initState() {
     super.initState();
 
-    SchedulerBinding.instance.addPostFrameCallback((_) {
-      FeatureDiscovery.discoverFeatures(
-        context,
-        const <String>{
-          Constants.featurePinToTop,
-          Constants.featureAddStoryToFavList,
-          Constants.featureOpenStoryInWebView,
-        },
-      );
-    });
+    SchedulerBinding.instance
+      ..addPostFrameCallback((_) {
+        if (!isTesting) {
+          FeatureDiscovery.discoverFeatures(
+            context,
+            const <String>{
+              Constants.featurePinToTop,
+              Constants.featureAddStoryToFavList,
+              Constants.featureOpenStoryInWebView,
+            },
+          );
+        }
+      })
+      ..addPostFrameCallback((_) {
+        final ModalRoute<dynamic>? route = ModalRoute.of(context);
+
+        if (route == null) return;
+
+        locator
+            .get<RouteObserver<ModalRoute<dynamic>>>()
+            .subscribe(this, route);
+      });
 
     scrollController.addListener(() {
       FocusScope.of(context).requestFocus(FocusNode());
@@ -176,11 +218,12 @@ class _ItemScreenState extends State<ItemScreen> {
         context.read<EditCubit>().onScrolled();
       }
     });
+
+    commentEditingController.text = context.read<EditCubit>().state.text ?? '';
   }
 
   @override
   void dispose() {
-    locator.get<CacheService>().resetComments();
     refreshController.dispose();
     commentEditingController.dispose();
     scrollController.dispose();
@@ -284,316 +327,378 @@ class _ItemScreenState extends State<ItemScreen> {
                     }
                   }
                 },
-                onLoading: context.read<CommentsCubit>().loadMore,
-                child: ListView(
+                onLoading: () {
+                  if (state.fetchMode == FetchMode.eager) {
+                    context.read<CommentsCubit>().loadMore();
+                  } else {
+                    refreshController.loadComplete();
+                  }
+                },
+                child: ListView.builder(
                   primary: false,
-                  children: <Widget>[
-                    SizedBox(
-                      height: topPadding,
-                    ),
-                    if (!widget.splitViewEnabled)
-                      const Padding(
-                        padding: EdgeInsets.only(bottom: Dimens.pt6),
-                        child: OfflineBanner(),
-                      ),
-                    Slidable(
-                      startActionPane: ActionPane(
-                        motion: const BehindMotion(),
+                  itemCount: state.comments.length + 2,
+                  itemBuilder: (BuildContext context, int index) {
+                    if (index == 0) {
+                      return Column(
                         children: <Widget>[
-                          SlidableAction(
-                            onPressed: (_) {
-                              HapticFeedback.lightImpact();
-
-                              if (state.item.id !=
-                                  context
-                                      .read<EditCubit>()
-                                      .state
-                                      .replyingTo
-                                      ?.id) {
-                                commentEditingController.clear();
-                              }
-                              context
-                                  .read<EditCubit>()
-                                  .onReplyTapped(state.item);
-                              focusNode.requestFocus();
-                            },
-                            backgroundColor: Palette.orange,
-                            foregroundColor: Palette.white,
-                            icon: Icons.message,
+                          SizedBox(
+                            height: topPadding,
                           ),
-                          SlidableAction(
-                            onPressed: (_) => onMoreTapped(state.item),
-                            backgroundColor: Palette.orange,
-                            foregroundColor: Palette.white,
-                            icon: Icons.more_horiz,
-                          ),
-                        ],
-                      ),
-                      child: Column(
-                        children: <Widget>[
-                          Padding(
-                            padding: const EdgeInsets.only(
-                              left: Dimens.pt6,
-                              right: Dimens.pt6,
+                          if (!widget.splitViewEnabled)
+                            const Padding(
+                              padding: EdgeInsets.only(bottom: Dimens.pt6),
+                              child: OfflineBanner(),
                             ),
-                            child: Row(
+                          Slidable(
+                            startActionPane: ActionPane(
+                              motion: const BehindMotion(),
                               children: <Widget>[
-                                Text(
-                                  state.item.by,
-                                  style: const TextStyle(
-                                    color: Palette.orange,
-                                  ),
+                                SlidableAction(
+                                  onPressed: (_) {
+                                    HapticFeedback.lightImpact();
+
+                                    if (state.item.id !=
+                                        context
+                                            .read<EditCubit>()
+                                            .state
+                                            .replyingTo
+                                            ?.id) {
+                                      commentEditingController.clear();
+                                    }
+                                    context
+                                        .read<EditCubit>()
+                                        .onReplyTapped(state.item);
+                                    focusNode.requestFocus();
+                                  },
+                                  backgroundColor: Palette.orange,
+                                  foregroundColor: Palette.white,
+                                  icon: Icons.message,
                                 ),
-                                const Spacer(),
-                                Text(
-                                  state.item.postedDate,
-                                  style: const TextStyle(
-                                    color: Palette.grey,
-                                  ),
+                                SlidableAction(
+                                  onPressed: (BuildContext context) =>
+                                      onMoreTapped(state.item, context.rect),
+                                  backgroundColor: Palette.orange,
+                                  foregroundColor: Palette.white,
+                                  icon: Icons.more_horiz,
                                 ),
                               ],
                             ),
-                          ),
-                          if (state.item is Story)
-                            InkWell(
-                              onTap: () => LinkUtil.launch(
-                                state.item.url,
-                                useReader: context
-                                    .read<PreferenceCubit>()
-                                    .state
-                                    .useReader,
-                                offlineReading: context
-                                    .read<StoriesBloc>()
-                                    .state
-                                    .offlineReading,
-                              ),
-                              child: Padding(
-                                padding: const EdgeInsets.only(
-                                  left: Dimens.pt6,
-                                  right: Dimens.pt6,
-                                  bottom: Dimens.pt12,
-                                  top: Dimens.pt12,
-                                ),
-                                child: Text(
-                                  state.item.title,
-                                  textAlign: TextAlign.center,
-                                  style: TextStyle(
-                                    fontWeight: FontWeight.bold,
-                                    color: state.item.url.isNotEmpty
-                                        ? Palette.orange
-                                        : null,
+                            child: Column(
+                              children: <Widget>[
+                                Padding(
+                                  padding: const EdgeInsets.only(
+                                    left: Dimens.pt6,
+                                    right: Dimens.pt6,
+                                  ),
+                                  child: Row(
+                                    children: <Widget>[
+                                      Text(
+                                        state.item.by,
+                                        style: const TextStyle(
+                                          color: Palette.orange,
+                                        ),
+                                      ),
+                                      const Spacer(),
+                                      Text(
+                                        state.item.postedDate,
+                                        style: const TextStyle(
+                                          color: Palette.grey,
+                                        ),
+                                      ),
+                                    ],
                                   ),
                                 ),
-                              ),
-                            )
-                          else
-                            const SizedBox(
-                              height: Dimens.pt6,
+                                if (state.item is Story)
+                                  InkWell(
+                                    onTap: () => LinkUtil.launch(
+                                      state.item.url,
+                                      useReader: context
+                                          .read<PreferenceCubit>()
+                                          .state
+                                          .useReader,
+                                      offlineReading: context
+                                          .read<StoriesBloc>()
+                                          .state
+                                          .offlineReading,
+                                    ),
+                                    child: Padding(
+                                      padding: const EdgeInsets.only(
+                                        left: Dimens.pt6,
+                                        right: Dimens.pt6,
+                                        bottom: Dimens.pt12,
+                                        top: Dimens.pt12,
+                                      ),
+                                      child: Text(
+                                        state.item.title,
+                                        textAlign: TextAlign.center,
+                                        style: TextStyle(
+                                          fontWeight: FontWeight.bold,
+                                          color: state.item.url.isNotEmpty
+                                              ? Palette.orange
+                                              : null,
+                                        ),
+                                      ),
+                                    ),
+                                  )
+                                else
+                                  const SizedBox(
+                                    height: Dimens.pt6,
+                                  ),
+                                if (state.item.text.isNotEmpty)
+                                  Padding(
+                                    padding: const EdgeInsets.symmetric(
+                                      horizontal: Dimens.pt10,
+                                    ),
+                                    child: SelectableLinkify(
+                                      text: state.item.text,
+                                      style: TextStyle(
+                                        fontSize: MediaQuery.of(context)
+                                                .textScaleFactor *
+                                            TextDimens.pt15,
+                                      ),
+                                      linkStyle: TextStyle(
+                                        fontSize: MediaQuery.of(context)
+                                                .textScaleFactor *
+                                            TextDimens.pt15,
+                                        color: Palette.orange,
+                                      ),
+                                      onOpen: (LinkableElement link) {
+                                        if (link.url.contains(
+                                          'news.ycombinator.com/item',
+                                        )) {
+                                          onStoryLinkTapped(link.url);
+                                        } else {
+                                          LinkUtil.launch(link.url);
+                                        }
+                                      },
+                                    ),
+                                  ),
+                                if (state.item.isPoll)
+                                  BlocProvider<PollCubit>(
+                                    create: (BuildContext context) =>
+                                        PollCubit(story: state.item as Story)
+                                          ..init(),
+                                    child: PollView(
+                                      onLoginTapped: onLoginTapped,
+                                    ),
+                                  ),
+                              ],
                             ),
+                          ),
                           if (state.item.text.isNotEmpty)
-                            Padding(
-                              padding: const EdgeInsets.symmetric(
-                                horizontal: Dimens.pt10,
-                              ),
-                              child: SelectableLinkify(
-                                text: state.item.text,
-                                style: TextStyle(
-                                  fontSize:
-                                      MediaQuery.of(context).textScaleFactor *
-                                          TextDimens.pt15,
-                                ),
-                                linkStyle: TextStyle(
-                                  fontSize:
-                                      MediaQuery.of(context).textScaleFactor *
-                                          TextDimens.pt15,
-                                  color: Palette.orange,
-                                ),
-                                onOpen: (LinkableElement link) {
-                                  if (link.url.contains(
-                                    'news.ycombinator.com/item',
-                                  )) {
-                                    onStoryLinkTapped(link.url);
-                                  } else {
-                                    LinkUtil.launch(link.url);
-                                  }
-                                },
-                              ),
-                            ),
-                          if (state.item.isPoll)
-                            BlocProvider<PollCubit>(
-                              create: (BuildContext context) =>
-                                  PollCubit(story: state.item as Story)..init(),
-                              child: PollView(
-                                onLoginTapped: onLoginTapped,
-                              ),
-                            ),
-                        ],
-                      ),
-                    ),
-                    if (state.item.text.isNotEmpty)
-                      const SizedBox(
-                        height: Dimens.pt8,
-                      ),
-                    const Divider(
-                      height: Dimens.zero,
-                    ),
-                    if (state.onlyShowTargetComment) ...<Widget>[
-                      Center(
-                        child: TextButton(
-                          onPressed: () => context
-                              .read<CommentsCubit>()
-                              .loadAll(state.item as Story),
-                          child: const Text('View all comments'),
-                        ),
-                      ),
-                      const Divider(
-                        height: Dimens.zero,
-                      ),
-                    ] else ...<Widget>[
-                      Row(
-                        children: <Widget>[
-                          if (state.item is Story) ...<Widget>[
                             const SizedBox(
-                              width: Dimens.pt12,
+                              height: Dimens.pt8,
                             ),
-                            Text(
-                              '''${state.item.score} karma, ${state.item.descendants} comment${state.item.descendants > 1 ? 's' : ''}''',
+                          const Divider(
+                            height: Dimens.zero,
+                          ),
+                          if (state.onlyShowTargetComment) ...<Widget>[
+                            Center(
+                              child: TextButton(
+                                onPressed: () => context
+                                    .read<CommentsCubit>()
+                                    .loadAll(state.item as Story),
+                                child: const Text('View all comments'),
+                              ),
+                            ),
+                            const Divider(
+                              height: Dimens.zero,
                             ),
                           ] else ...<Widget>[
-                            const SizedBox(
-                              width: Dimens.pt4,
-                            ),
-                            TextButton(
-                              onPressed: context
-                                  .read<CommentsCubit>()
-                                  .loadParentThread,
-                              child: state.fetchParentStatus ==
-                                      CommentsStatus.loading
-                                  ? const SizedBox(
-                                      height: Dimens.pt12,
-                                      width: Dimens.pt12,
-                                      child: CustomCircularProgressIndicator(
-                                        strokeWidth: Dimens.pt2,
+                            Row(
+                              children: <Widget>[
+                                if (state.item is Story) ...<Widget>[
+                                  const SizedBox(
+                                    width: Dimens.pt12,
+                                  ),
+                                  Text(
+                                    '''${state.item.score} karma, ${state.item.descendants} comment${state.item.descendants > 1 ? 's' : ''}''',
+                                    style: const TextStyle(
+                                      fontSize: TextDimens.pt13,
+                                    ),
+                                  ),
+                                ] else ...<Widget>[
+                                  const SizedBox(
+                                    width: Dimens.pt4,
+                                  ),
+                                  TextButton(
+                                    onPressed: context
+                                        .read<CommentsCubit>()
+                                        .loadParentThread,
+                                    child: state.fetchParentStatus ==
+                                            CommentsStatus.loading
+                                        ? const SizedBox(
+                                            height: Dimens.pt12,
+                                            width: Dimens.pt12,
+                                            child:
+                                                CustomCircularProgressIndicator(
+                                              strokeWidth: Dimens.pt2,
+                                            ),
+                                          )
+                                        : const Text(
+                                            'View parent thread',
+                                            style: TextStyle(
+                                              fontSize: TextDimens.pt13,
+                                            ),
+                                          ),
+                                  ),
+                                ],
+                                const Spacer(),
+                                if (!state.offlineReading)
+                                  DropdownButton<FetchMode>(
+                                    value: state.fetchMode,
+                                    underline: const SizedBox.shrink(),
+                                    items: const <DropdownMenuItem<FetchMode>>[
+                                      DropdownMenuItem<FetchMode>(
+                                        value: FetchMode.lazy,
+                                        child: Text(
+                                          'Lazy',
+                                          style: TextStyle(
+                                            fontSize: TextDimens.pt13,
+                                          ),
+                                        ),
                                       ),
-                                    )
-                                  : const Text('View parent thread'),
+                                      DropdownMenuItem<FetchMode>(
+                                        value: FetchMode.eager,
+                                        child: Text(
+                                          'Eager',
+                                          style: TextStyle(
+                                            fontSize: TextDimens.pt13,
+                                          ),
+                                        ),
+                                      ),
+                                    ],
+                                    onChanged: context
+                                        .read<CommentsCubit>()
+                                        .onFetchModeChanged,
+                                  ),
+                                const SizedBox(
+                                  width: Dimens.pt6,
+                                ),
+                                DropdownButton<CommentsOrder>(
+                                  value: state.order,
+                                  underline: const SizedBox.shrink(),
+                                  items: const <
+                                      DropdownMenuItem<CommentsOrder>>[
+                                    DropdownMenuItem<CommentsOrder>(
+                                      value: CommentsOrder.natural,
+                                      child: Text(
+                                        'Natural',
+                                        style: TextStyle(
+                                          fontSize: TextDimens.pt13,
+                                        ),
+                                      ),
+                                    ),
+                                    DropdownMenuItem<CommentsOrder>(
+                                      value: CommentsOrder.newestFirst,
+                                      child: Text(
+                                        'Newest first',
+                                        style: TextStyle(
+                                          fontSize: TextDimens.pt13,
+                                        ),
+                                      ),
+                                    ),
+                                    DropdownMenuItem<CommentsOrder>(
+                                      value: CommentsOrder.oldestFirst,
+                                      child: Text(
+                                        'Oldest first',
+                                        style: TextStyle(
+                                          fontSize: TextDimens.pt13,
+                                        ),
+                                      ),
+                                    ),
+                                  ],
+                                  onChanged: context
+                                      .read<CommentsCubit>()
+                                      .onOrderChanged,
+                                ),
+                                const SizedBox(
+                                  width: Dimens.pt4,
+                                ),
+                              ],
+                            ),
+                            const Divider(
+                              height: Dimens.zero,
                             ),
                           ],
-                          const Spacer(),
-                          DropdownButton<CommentsOrder>(
-                            value: state.order,
-                            underline: const SizedBox.shrink(),
-                            items: const <DropdownMenuItem<CommentsOrder>>[
-                              DropdownMenuItem<CommentsOrder>(
-                                value: CommentsOrder.natural,
-                                child: Text(
-                                  'Natural',
-                                  style: TextStyle(
-                                    fontSize: TextDimens.pt14,
-                                  ),
-                                ),
+                          if (state.comments.isEmpty &&
+                              state.status ==
+                                  CommentsStatus.allLoaded) ...<Widget>[
+                            const SizedBox(
+                              height: 240,
+                            ),
+                            const Center(
+                              child: Text(
+                                'Nothing yet',
+                                style: TextStyle(color: Palette.grey),
                               ),
-                              DropdownMenuItem<CommentsOrder>(
-                                value: CommentsOrder.newestFirst,
-                                child: Text(
-                                  'Newest first',
-                                  style: TextStyle(
-                                    fontSize: TextDimens.pt14,
-                                  ),
-                                ),
-                              ),
-                              DropdownMenuItem<CommentsOrder>(
-                                value: CommentsOrder.oldestFirst,
-                                child: Text(
-                                  'Oldest first',
-                                  style: TextStyle(
-                                    fontSize: TextDimens.pt14,
-                                  ),
-                                ),
-                              ),
-                            ],
-                            onChanged:
-                                context.read<CommentsCubit>().onOrderChanged,
-                          ),
-                          const SizedBox(
-                            width: Dimens.pt4,
-                          ),
+                            ),
+                          ],
                         ],
-                      ),
-                      const Divider(
-                        height: Dimens.zero,
-                      ),
-                    ],
-                    if (state.comments.isEmpty &&
-                        state.status == CommentsStatus.allLoaded) ...<Widget>[
-                      const SizedBox(
-                        height: 240,
-                      ),
-                      const Center(
-                        child: Text(
-                          'Nothing yet',
-                          style: TextStyle(color: Palette.grey),
-                        ),
-                      ),
-                    ],
-                    for (final Comment comment in state.comments)
-                      FadeIn(
-                        key: ValueKey<String>('${comment.id}-FadeIn'),
-                        child: CommentTile(
-                          comment: comment,
-                          level: comment.level,
-                          myUsername:
-                              authState.isLoggedIn ? authState.username : null,
-                          opUsername: state.item.by,
-                          onReplyTapped: (Comment cmt) {
-                            HapticFeedback.lightImpact();
-                            if (cmt.deleted || cmt.dead) {
-                              return;
-                            }
+                      );
+                    } else if (index == state.comments.length + 1) {
+                      if ((state.status == CommentsStatus.allLoaded &&
+                              state.comments.isNotEmpty) ||
+                          state.onlyShowTargetComment) {
+                        return SizedBox(
+                          height: 240,
+                          child: Center(
+                            child: Text(happyFace),
+                          ),
+                        );
+                      } else {
+                        return const SizedBox.shrink();
+                      }
+                    }
 
-                            if (cmt.id !=
-                                context
-                                    .read<EditCubit>()
-                                    .state
-                                    .replyingTo
-                                    ?.id) {
-                              commentEditingController.clear();
-                            }
+                    index = index - 1;
+                    final Comment comment = state.comments.elementAt(index);
+                    return FadeIn(
+                      key: ValueKey<String>('${comment.id}-FadeIn'),
+                      child: CommentTile(
+                        comment: comment,
+                        level: comment.level,
+                        myUsername:
+                            authState.isLoggedIn ? authState.username : null,
+                        opUsername: state.item.by,
+                        fetchMode: state.fetchMode,
+                        onReplyTapped: (Comment cmt) {
+                          HapticFeedback.lightImpact();
+                          if (cmt.deleted || cmt.dead) {
+                            return;
+                          }
 
-                            context.read<EditCubit>().onReplyTapped(cmt);
-                            focusNode.requestFocus();
-                          },
-                          onEditTapped: (Comment cmt) {
-                            HapticFeedback.lightImpact();
-                            if (cmt.deleted || cmt.dead) {
-                              return;
-                            }
+                          if (cmt.id !=
+                              context.read<EditCubit>().state.replyingTo?.id) {
                             commentEditingController.clear();
-                            context.read<EditCubit>().onEditTapped(cmt);
-                            focusNode.requestFocus();
-                          },
-                          onMoreTapped: onMoreTapped,
-                          onStoryLinkTapped: onStoryLinkTapped,
-                          onRightMoreTapped: onRightMoreTapped,
-                        ),
+                          }
+
+                          context.read<EditCubit>().onReplyTapped(cmt);
+                          focusNode.requestFocus();
+                        },
+                        onEditTapped: (Comment cmt) {
+                          HapticFeedback.lightImpact();
+                          if (cmt.deleted || cmt.dead) {
+                            return;
+                          }
+                          commentEditingController.clear();
+                          context.read<EditCubit>().onEditTapped(cmt);
+                          focusNode.requestFocus();
+                        },
+                        onMoreTapped: onMoreTapped,
+                        onStoryLinkTapped: onStoryLinkTapped,
+                        onRightMoreTapped: onRightMoreTapped,
                       ),
-                    if ((state.status == CommentsStatus.allLoaded &&
-                            state.comments.isNotEmpty) ||
-                        state.onlyShowTargetComment)
-                      SizedBox(
-                        height: 240,
-                        child: Center(
-                          child: Text(happyFace),
-                        ),
-                      )
-                  ],
+                    );
+                  },
                 ),
               );
 
               return BlocListener<EditCubit, EditState>(
                 listenWhen: (EditState previous, EditState current) {
                   return previous.replyingTo != current.replyingTo ||
-                      previous.itemBeingEdited != current.itemBeingEdited;
+                      previous.itemBeingEdited != current.itemBeingEdited ||
+                      commentEditingController.text != current.text;
                 },
                 listener: (BuildContext context, EditState editState) {
                   if (editState.replyingTo != null ||
@@ -742,7 +847,10 @@ class _ItemScreenState extends State<ItemScreen> {
                   onTap: () {
                     Navigator.pop(context);
                     goToItemScreen(
-                      args: ItemScreenArgs(item: comment),
+                      args: ItemScreenArgs(
+                        item: comment,
+                        useCommentCache: true,
+                      ),
                       forceNewScreen: true,
                     );
                   },
@@ -814,6 +922,7 @@ class _ItemScreenState extends State<ItemScreen> {
                                         context.read<AuthBloc>().state.username,
                                     onStoryLinkTapped: onStoryLinkTapped,
                                     actionable: false,
+                                    fetchMode: FetchMode.eager,
                                   ),
                                   const Divider(
                                     height: Dimens.zero,
@@ -855,7 +964,7 @@ class _ItemScreenState extends State<ItemScreen> {
     }
   }
 
-  void onMoreTapped(Item item) {
+  void onMoreTapped(Item item, Rect? rect) {
     HapticFeedback.lightImpact();
 
     if (item.dead || item.deleted) {
@@ -1064,7 +1173,7 @@ class _ItemScreenState extends State<ItemScreen> {
           case _MenuAction.downvote:
             break;
           case _MenuAction.share:
-            onShareTapped(item);
+            onShareTapped(item, rect);
             break;
           case _MenuAction.flag:
             onFlagTapped(item);
@@ -1079,8 +1188,12 @@ class _ItemScreenState extends State<ItemScreen> {
     });
   }
 
-  void onShareTapped(Item item) =>
-      Share.share('https://news.ycombinator.com/item?id=${item.id}');
+  void onShareTapped(Item item, Rect? rect) {
+    Share.share(
+      'https://news.ycombinator.com/item?id=${item.id}',
+      sharePositionOrigin: rect,
+    );
+  }
 
   void onFlagTapped(Item item) {
     showDialog<bool>(

lib/screens/item/widgets/reply_box.dart

@@ -5,7 +5,9 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_feather_icons/flutter_feather_icons.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
+import 'package:hacki/screens/screens.dart';
 import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/link_util.dart';
 
@@ -145,6 +147,39 @@ class _ReplyBoxState extends State<ReplyBox> {
                                   color: Palette.orange,
                                 ),
                                 onPressed: () {
+                                  final EditState state =
+                                      context.read<EditCubit>().state;
+                                  if (state.replyingTo != null &&
+                                      state.text.isNotNullOrEmpty) {
+                                    showDialog<void>(
+                                      context: context,
+                                      builder: (BuildContext context) =>
+                                          AlertDialog(
+                                        title: const Text('Save draft?'),
+                                        actions: <Widget>[
+                                          TextButton(
+                                            onPressed: () {
+                                              context
+                                                  .read<EditCubit>()
+                                                  .deleteDraft();
+                                              Navigator.pop(context);
+                                            },
+                                            child: const Text(
+                                              'No',
+                                              style: TextStyle(
+                                                color: Palette.red,
+                                              ),
+                                            ),
+                                          ),
+                                          TextButton(
+                                            onPressed: () =>
+                                                Navigator.pop(context),
+                                            child: const Text('Yes'),
+                                          ),
+                                        ],
+                                      ),
+                                    );
+                                  }
                                   widget.onCloseTapped();
                                   expanded = false;
                                 },
@@ -249,8 +284,31 @@ class _ReplyBoxState extends State<ReplyBox> {
                         style: const TextStyle(color: Palette.grey),
                       ),
                       const Spacer(),
+                      if (replyingTo != null)
+                        TextButton(
+                          child: const Text('View thread'),
+                          onPressed: () {
+                            HapticFeedback.lightImpact();
+                            setState(() {
+                              expanded = false;
+                            });
+                            Navigator.popUntil(
+                              context,
+                              (Route<dynamic> route) =>
+                                  route.settings.name == ItemScreen.routeName ||
+                                  route.isFirst,
+                            );
+                            goToItemScreen(
+                              args: ItemScreenArgs(
+                                item: replyingTo,
+                                useCommentCache: true,
+                              ),
+                              forceNewScreen: true,
+                            );
+                          },
+                        ),
                       TextButton(
-                        child: const Text('Copy All'),
+                        child: const Text('Copy all'),
                         onPressed: () => FlutterClipboard.copy(
                           replyingTo?.text ?? '',
                         ).then((_) => HapticFeedback.selectionClick()),

lib/screens/item/widgets/scroll_up_icon_button.dart

@@ -20,7 +20,7 @@ class _ScrollUpIconButtonState extends State<ScrollUpIconButton> {
     super.initState();
 
     widget.scrollController.addListener(() {
-      if (widget.scrollController.offset <= 1000) {
+      if (widget.scrollController.offset <= 1000 && mounted) {
         setState(() {});
       }
     });

lib/screens/profile/profile_screen.dart

@@ -283,6 +283,122 @@ class _ProfileScreenState extends State<ProfileScreen>
                                 },
                                 activeColor: Palette.orange,
                               ),
+                              const SizedBox(
+                                height: Dimens.pt8,
+                              ),
+                              Flex(
+                                direction: Axis.horizontal,
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: <Widget>[
+                                  Flexible(
+                                    child: Row(
+                                      children: const <Widget>[
+                                        SizedBox(
+                                          width: Dimens.pt16,
+                                        ),
+                                        Text('Default fetch mode'),
+                                        Spacer(),
+                                      ],
+                                    ),
+                                  ),
+                                  Flexible(
+                                    child: Row(
+                                      children: const <Widget>[
+                                        Text('Default comments order'),
+                                        Spacer(),
+                                      ],
+                                    ),
+                                  ),
+                                ],
+                              ),
+                              Flex(
+                                direction: Axis.horizontal,
+                                mainAxisAlignment: MainAxisAlignment.center,
+                                children: <Widget>[
+                                  Flexible(
+                                    child: Row(
+                                      children: <Widget>[
+                                        const SizedBox(
+                                          width: Dimens.pt16,
+                                        ),
+                                        DropdownButton<FetchMode>(
+                                          value: preferenceState.fetchMode,
+                                          underline: const SizedBox.shrink(),
+                                          items: const <
+                                              DropdownMenuItem<FetchMode>>[
+                                            DropdownMenuItem<FetchMode>(
+                                              value: FetchMode.lazy,
+                                              child: Text(
+                                                'Lazy',
+                                                style: TextStyle(
+                                                  fontSize: TextDimens.pt16,
+                                                ),
+                                              ),
+                                            ),
+                                            DropdownMenuItem<FetchMode>(
+                                              value: FetchMode.eager,
+                                              child: Text(
+                                                'Eager',
+                                                style: TextStyle(
+                                                  fontSize: TextDimens.pt16,
+                                                ),
+                                              ),
+                                            ),
+                                          ],
+                                          onChanged: context
+                                              .read<PreferenceCubit>()
+                                              .selectFetchMode,
+                                        ),
+                                        const Spacer(),
+                                      ],
+                                    ),
+                                  ),
+                                  Flexible(
+                                    child: Row(
+                                      children: <Widget>[
+                                        DropdownButton<CommentsOrder>(
+                                          value: preferenceState.order,
+                                          underline: const SizedBox.shrink(),
+                                          items: const <
+                                              DropdownMenuItem<CommentsOrder>>[
+                                            DropdownMenuItem<CommentsOrder>(
+                                              value: CommentsOrder.natural,
+                                              child: Text(
+                                                'Natural',
+                                                style: TextStyle(
+                                                  fontSize: TextDimens.pt16,
+                                                ),
+                                              ),
+                                            ),
+                                            DropdownMenuItem<CommentsOrder>(
+                                              value: CommentsOrder.newestFirst,
+                                              child: Text(
+                                                'Newest first',
+                                                style: TextStyle(
+                                                  fontSize: TextDimens.pt16,
+                                                ),
+                                              ),
+                                            ),
+                                            DropdownMenuItem<CommentsOrder>(
+                                              value: CommentsOrder.oldestFirst,
+                                              child: Text(
+                                                'Oldest first',
+                                                style: TextStyle(
+                                                  fontSize: TextDimens.pt16,
+                                                ),
+                                              ),
+                                            ),
+                                          ],
+                                          onChanged: context
+                                              .read<PreferenceCubit>()
+                                              .selectCommentsOrder,
+                                        ),
+                                        const Spacer(),
+                                      ],
+                                    ),
+                                  ),
+                                ],
+                              ),
                               SwitchListTile(
                                 title: const Text('Complex Story Tile'),
                                 subtitle: const Text(
@@ -410,7 +526,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   showAboutDialog(
                                     context: context,
                                     applicationName: 'Hacki',
-                                    applicationVersion: 'v0.2.22',
+                                    applicationVersion: 'v0.2.30',
                                     applicationIcon: ClipRRect(
                                       borderRadius: const BorderRadius.all(
                                         Radius.circular(
@@ -680,7 +796,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                     .get<SembastRepository>()
                     .deleteAllCachedComments()
                     .whenComplete(
-                      locator.get<CacheRepository>().deleteAll,
+                      locator.get<OfflineRepository>().deleteAll,
                     )
                     .whenComplete(
                       locator.get<PreferenceRepository>().clearAllReadStories,

lib/screens/web_view/web_view_screen.dart

@@ -34,7 +34,7 @@ class _WebViewScreenState extends State<WebViewScreen> {
       ),
       body: WebView(
         onWebViewCreated: (WebViewController controller) async {
-          final String? html = await locator.get<CacheRepository>().getHtml(
+          final String? html = await locator.get<OfflineRepository>().getHtml(
                 url: widget.url,
               );
 

lib/screens/widgets/comment_tile.dart

@@ -7,6 +7,7 @@ import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/models.dart';
+import 'package:hacki/services/services.dart';
 import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
 
@@ -16,6 +17,7 @@ class CommentTile extends StatelessWidget {
     required this.myUsername,
     required this.comment,
     required this.onStoryLinkTapped,
+    required this.fetchMode,
     this.onReplyTapped,
     this.onMoreTapped,
     this.onEditTapped,
@@ -31,10 +33,11 @@ class CommentTile extends StatelessWidget {
   final int level;
   final bool actionable;
   final Function(Comment)? onReplyTapped;
-  final Function(Comment)? onMoreTapped;
+  final Function(Comment, Rect?)? onMoreTapped;
   final Function(Comment)? onEditTapped;
   final Function(Comment)? onRightMoreTapped;
   final Function(String) onStoryLinkTapped;
+  final FetchMode fetchMode;
 
   @override
   Widget build(BuildContext context) {
@@ -43,6 +46,7 @@ class CommentTile extends StatelessWidget {
       lazy: false,
       create: (_) => CollapseCubit(
         commentId: comment.id,
+        collapseCache: context.tryRead<CollapseCache>() ?? CollapseCache(),
       )..init(),
       child: BlocBuilder<CollapseCubit, CollapseState>(
         builder: (BuildContext context, CollapseState state) {
@@ -86,8 +90,11 @@ class CommentTile extends StatelessWidget {
                                         icon: Icons.edit,
                                       ),
                                     SlidableAction(
-                                      onPressed: (_) =>
-                                          onMoreTapped?.call(comment),
+                                      onPressed: (BuildContext context) =>
+                                          onMoreTapped?.call(
+                                        comment,
+                                        context.rect,
+                                      ),
                                       backgroundColor: Palette.orange,
                                       foregroundColor: Palette.white,
                                       icon: Icons.more_horiz,
@@ -275,6 +282,47 @@ class CommentTile extends StatelessWidget {
                                             },
                                           ),
                                   ),
+                                if (!state.collapsed &&
+                                    fetchMode == FetchMode.lazy &&
+                                    comment.kids.isNotEmpty &&
+                                    !context
+                                        .read<CommentsCubit>()
+                                        .state
+                                        .commentIds
+                                        .contains(comment.kids.first) &&
+                                    !context
+                                        .read<CommentsCubit>()
+                                        .state
+                                        .onlyShowTargetComment)
+                                  Center(
+                                    child: Padding(
+                                      padding: const EdgeInsets.symmetric(
+                                        horizontal: Dimens.pt12,
+                                      ),
+                                      child: Row(
+                                        mainAxisAlignment:
+                                            MainAxisAlignment.center,
+                                        children: <Widget>[
+                                          Expanded(
+                                            child: TextButton(
+                                              onPressed: () {
+                                                HapticFeedback.selectionClick();
+                                                context
+                                                    .read<CommentsCubit>()
+                                                    .loadMore(comment: comment);
+                                              },
+                                              child: Text(
+                                                '''Load ${comment.kids.length} ${comment.kids.length > 1 ? 'replies' : 'reply'}''',
+                                                style: const TextStyle(
+                                                  fontSize: TextDimens.pt12,
+                                                ),
+                                              ),
+                                            ),
+                                          ),
+                                        ],
+                                      ),
+                                    ),
+                                  ),
                                 const Divider(
                                   height: Dimens.zero,
                                 ),
@@ -296,7 +344,7 @@ class CommentTile extends StatelessWidget {
                       : Palette.transparent;
                   final bool isMyComment = myUsername == comment.by;
 
-                  Widget? wrapper = child;
+                  Widget wrapper = child;
 
                   if (isMyComment && level == 0) {
                     return Container(
@@ -328,7 +376,7 @@ class CommentTile extends StatelessWidget {
                     );
                   }
 
-                  return wrapper!;
+                  return wrapper;
                 },
               );
             },
@@ -338,7 +386,12 @@ class CommentTile extends StatelessWidget {
     );
   }
 
+  static final Map<int, Color> _colors = <int, Color>{};
+
   Color _getColor(int level) {
+    final int initialLevel = level;
+    if (_colors[initialLevel] != null) return _colors[initialLevel]!;
+
     while (level >= 10) {
       level = level - 10;
     }
@@ -359,6 +412,7 @@ class CommentTile extends StatelessWidget {
       1,
     );
 
+    _colors[initialLevel] = color;
     return color;
   }
 }

lib/screens/widgets/countdown_reminder.dart

@@ -33,7 +33,7 @@ class _CountDownReminderState extends State<CountdownReminder>
   bool isVisible = false;
 
   static const Duration countdownDuration = Duration(seconds: 8);
-  static const Duration visibilityCountdownDuration = Duration(seconds: 3);
+  static const Duration visibilityCountdownDuration = Duration.zero;
 
   @override
   void initState() {

lib/screens/widgets/link_preview/link_preview.dart

@@ -2,6 +2,7 @@ import 'dart:async';
 
 import 'package:flutter/material.dart';
 import 'package:hacki/config/constants.dart';
+import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/screens/widgets/link_preview/link_view.dart';
 import 'package:hacki/screens/widgets/link_preview/web_analyzer.dart';
@@ -199,23 +200,9 @@ class _LinkPreviewState extends State<LinkPreview> {
 
   @override
   Widget build(BuildContext context) {
-    const double screenWidthLowerBound = 428,
-        screenWidthUpperBound = 850,
-        picHeightLowerBound = 118,
-        picHeightUpperBound = 140,
-        smallPicHeight = 100,
-        picHeightFactor = 0.14;
-    final double screenWidth = MediaQuery.of(context).size.width;
-    final bool showSmallerPreviewPic = screenWidth > screenWidthLowerBound &&
-        screenWidth < screenWidthUpperBound;
-    final double height = showSmallerPreviewPic
-        ? smallPicHeight
-        : (MediaQuery.of(context).size.height * picHeightFactor)
-            .clamp(picHeightLowerBound, picHeightUpperBound);
-
     final Widget loadingWidget = widget.placeholderWidget ??
         Container(
-          height: height,
+          height: context.storyTileHeight,
           width: MediaQuery.of(context).size.width,
           decoration: BoxDecoration(
             borderRadius: BorderRadius.circular(
@@ -232,13 +219,13 @@ class _LinkPreviewState extends State<LinkPreview> {
     final WebInfo? info = _info as WebInfo?;
     loadedWidget = _info == null
         ? _buildLinkContainer(
-            height,
+            context.storyTileHeight,
             title: _errorTitle,
             desc: _errorBody,
             imageUri: null,
           )
         : _buildLinkContainer(
-            height,
+            context.storyTileHeight,
             title: _errorTitle,
             desc: WebAnalyzer.isNotEmpty(info!.description)
                 ? info.description

lib/screens/widgets/link_preview/link_view.dart

@@ -147,7 +147,7 @@ class LinkView extends StatelessWidget {
 
   Widget _buildTitleContainer(TextStyle _titleTS, int _maxLines) {
     return Padding(
-      padding: const EdgeInsets.fromLTRB(4, 2, 3, 1),
+      padding: const EdgeInsets.fromLTRB(4, 2, 3, 0),
       child: Column(
         children: <Widget>[
           Container(
@@ -168,7 +168,7 @@ class LinkView extends StatelessWidget {
     return Expanded(
       flex: 2,
       child: Padding(
-        padding: const EdgeInsets.fromLTRB(5, 3, 5, 0),
+        padding: const EdgeInsets.fromLTRB(5, 2, 5, 0),
         child: Column(
           children: <Widget>[
             if (showMetadata)

lib/screens/widgets/link_preview/web_analyzer.dart

@@ -140,7 +140,7 @@ class WebAnalyzer {
 
       while (comment == null && index < story.kids.length) {
         comment = await locator
-            .get<CacheRepository>()
+            .get<OfflineRepository>()
             .getCachedComment(id: story.kids.elementAt(index));
         index++;
       }

lib/screens/widgets/story_tile.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/constants.dart';
+import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
 import 'package:hacki/styles/styles.dart';
@@ -29,20 +30,7 @@ class StoryTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (showWebPreview) {
-      const double screenWidthLowerBound = 428,
-          screenWidthUpperBound = 850,
-          picHeightLowerBound = 118,
-          picHeightUpperBound = 140,
-          smallPicHeight = 100,
-          picHeightFactor = 0.14;
-      final double screenWidth = MediaQuery.of(context).size.width;
-      final bool showSmallerPreviewPic = screenWidth > screenWidthLowerBound &&
-          screenWidth < screenWidthUpperBound;
-      final double height = showSmallerPreviewPic
-          ? smallPicHeight
-          : (MediaQuery.of(context).size.height * picHeightFactor)
-              .clamp(picHeightLowerBound, picHeightUpperBound);
-
+      final double height = context.storyTileHeight;
       return TapDownWrapper(
         onTap: onTap,
         child: Padding(
@@ -143,7 +131,7 @@ class StoryTile extends StatelessWidget {
               backgroundColor: Palette.transparent,
               borderRadius: Dimens.zero,
               removeElevation: true,
-              bodyMaxLines: height == smallPicHeight ? 3 : 4,
+              bodyMaxLines: context.storyTileMaxLines,
               errorTitle: story.title,
               titleStyle: TextStyle(
                 color: hasRead

lib/services/caches/caches.dart

@@ -0,0 +1,3 @@
+export 'collapse_cache.dart';
+export 'comment_cache.dart';
+export 'draft_cache.dart';

lib/services/caches/collapse_cache.dart

@@ -1,12 +1,9 @@
-import 'package:hacki/models/models.dart' show Comment;
 import 'package:rxdart/rxdart.dart';
 
-class CacheService {
-  static final Map<int, Comment> _comments = <int, Comment>{};
-  static final Map<int, String> _drafts = <int, String>{};
-  static final Map<int, Set<int>> _kids = <int, Set<int>>{};
-  static final Set<int> _collapsed = <int>{};
-  static final Map<int, Set<int>> _hidden = <int, Set<int>>{};
+class CollapseCache {
+  final Map<int, Set<int>> _kids = <int, Set<int>>{};
+  final Set<int> _collapsed = <int>{};
+  final Map<int, Set<int>> _hidden = <int, Set<int>>{};
   final PublishSubject<Map<int, Set<int>>> _hiddenCommentsSubject =
       PublishSubject<Map<int, Set<int>>>();
 
@@ -76,19 +73,4 @@ class CacheService {
   bool isCollapsed(int commentId) => _collapsed.contains(commentId);
 
   int totalHidden(int commentId) => _hidden[commentId]?.length ?? 0;
-
-  void cacheComment(Comment comment) => _comments[comment.id] = comment;
-
-  Comment? getComment(int id) => _comments[id];
-
-  void resetComments() {
-    _comments.clear();
-  }
-
-  void removeDraft({required int replyingTo}) => _drafts.remove(replyingTo);
-
-  void cacheDraft({required String text, required int replyingTo}) =>
-      _drafts[replyingTo] = text;
-
-  String? getDraft({required int replyingTo}) => _drafts[replyingTo];
 }

lib/services/caches/comment_cache.dart

@@ -0,0 +1,13 @@
+import 'package:hacki/models/models.dart' show Comment;
+
+class CommentCache {
+  static final Map<int, Comment> _comments = <int, Comment>{};
+
+  void cacheComment(Comment comment) => _comments[comment.id] = comment;
+
+  Comment? getComment(int id) => _comments[id];
+
+  void resetComments() {
+    _comments.clear();
+  }
+}

lib/services/caches/draft_cache.dart

@@ -0,0 +1,10 @@
+class DraftCache {
+  static final Map<int, String> _drafts = <int, String>{};
+
+  void removeDraft({required int replyingTo}) => _drafts.remove(replyingTo);
+
+  void cacheDraft({required String text, required int replyingTo}) =>
+      _drafts[replyingTo] = text;
+
+  String? getDraft({required int replyingTo}) => _drafts[replyingTo];
+}

lib/services/custom_bloc_observer.dart

@@ -3,15 +3,30 @@ import 'package:hacki/config/locator.dart';
 import 'package:logger/logger.dart';
 
 class CustomBlocObserver extends BlocObserver {
+  @override
+  void onCreate(BlocBase<dynamic> bloc) {
+    locator.get<Logger>().v('$bloc created');
+    super.onCreate(bloc);
+  }
+
   @override
   void onEvent(
     Bloc<dynamic, dynamic> bloc,
     Object? event,
   ) {
-    locator.get<Logger>().d(event);
+    locator.get<Logger>().v(event);
     super.onEvent(bloc, event);
   }
 
+  @override
+  void onTransition(
+    Bloc<dynamic, dynamic> bloc,
+    Transition<dynamic, dynamic> transition,
+  ) {
+    locator.get<Logger>().v(transition);
+    super.onTransition(bloc, transition);
+  }
+
   @override
   void onError(
     BlocBase<dynamic> bloc,

lib/services/services.dart

@@ -1,4 +1,4 @@
-export 'cache_service.dart';
+export 'caches/caches.dart';
 export 'custom_bloc_observer.dart';
 export 'fetcher.dart';
 export 'firebase_client.dart';

lib/styles/dimens.dart

@@ -27,6 +27,7 @@ abstract class TextDimens {
   static const double pt8 = 8;
   static const double pt10 = 10;
   static const double pt12 = 12;
+  static const double pt13 = 13;
   static const double pt14 = 14;
   static const double pt15 = 15;
   static const double pt16 = 16;