v0.2.23 (#60)

* fixed #58

* bumped version.

.github/FUNDING.yml

@@ -0,0 +1,13 @@
+# These are supported funding model platforms
+
+github: livinglist
+patreon: # Replace with a single Patreon username
+open_collective: # Replace with a single Open Collective username
+ko_fi: # Replace with a single Ko-fi username
+tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel
+community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry
+liberapay: jfeng_for_open_source
+issuehunt: # Replace with a single IssueHunt username
+otechie: # Replace with a single Otechie username
+lfx_crowdfunding: # Replace with a single LFX Crowdfunding project-name e.g., cloud-foundry
+custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2']

README.md

@@ -4,13 +4,12 @@
 A simple noiseless [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)
-[![Play Store](https://img.shields.io/badge/Play%20Store--yellow)](https://play.google.com/store/apps/details?id=com.jiaqifeng.hacki&hl=en_US&gl=US)
+[![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)
 
-<noscript><a href="https://liberapay.com/jfeng_for_open_source/donate"><img alt="Donate using Liberapay" src="https://liberapay.com/assets/widgets/donate.svg"></a></noscript>
-
 [<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/)
 
 
@@ -34,25 +33,24 @@ Features:
 - Launch from system share sheet.
 - And more...
 
+
 <p align="center">
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/171450528-02c561ed-0ebb-4c1b-9ee0-a935211db0f2.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/171450536-ea61c176-37d7-4744-8674-4668e0e7e774.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/171450541-a9af3417-526f-4dbd-96d7-781c95c886d3.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/171450543-fb631b02-5f46-4455-b8ff-9ef119a486f1.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/171450548-38e98b02-6201-48c9-9674-87bdfc61f456.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798179-72edbe49-7444-4e54-a07c-fc1244447a74.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798182-28397805-a7cc-4124-b65b-c02c80afbbec.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798183-c2984270-ee99-4419-841e-65e98890464f.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798184-2fce5d97-710e-44a7-b99a-3296ebcf273b.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798185-d7c81348-956e-483c-a1bc-5cd872bdad62.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/159798186-1457ae21-f1aa-40a4-9206-0f3a1e24653e.png"> 
-   <img width="200" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/171450557-ab038e72-78c4-4daf-9b77-3873be1700db.png"> 
+   <img width="200" alt="01" src="assets/screenshots/01.png"> 
+   <img width="200" alt="02" src="assets/screenshots/02.png"> 
+   <img width="200" alt="03" src="assets/screenshots/03.png"> 
+   <img width="200" alt="04" src="assets/screenshots/04.png"> 
+   <img width="200" alt="05" src="assets/screenshots/05.png"> 
+   <img width="200" alt="06" src="assets/screenshots/06.png"> 
+   <img width="200" alt="07" src="assets/screenshots/07.png"> 
+   <img width="200" alt="08" src="assets/screenshots/08.png"> 
+   <img width="200" alt="09" src="assets/screenshots/09.png"> 
+   <img width="200" alt="10" src="assets/screenshots/10.png"> 
+   <img width="200" alt="11" src="assets/screenshots/11.png"> 
+   <img width="200" alt="12" src="assets/screenshots/12.png"> 
    
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162711-a9146326-9645-4db6-a04e-1f82e6133e40.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162726-ef1d3f2a-5179-417c-8a5f-0cddb52249da.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162733-906c4afd-39a8-48ae-946a-8019b327eaa0.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160162735-f2b25119-4702-4308-b2f5-281a2a2c5901.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160163024-6dcd65b6-bada-4c1c-95af-387fd4f42fb2.png"> 
-   <img width="400" alt="Screen Shot 2020-03-03 at 1 22 57 PM" src="https://user-images.githubusercontent.com/7277662/160163033-7bcf7038-b9aa-4ce4-8b58-64578eae8531.png"> 
+   <img width="400" alt="ipad-01" src="assets/screenshots/ipad-01.png"> 
+   <img width="400" alt="ipad-02" src="assets/screenshots/ipad-02.png"> 
+   <img width="400" alt="ipad-03" src="assets/screenshots/ipad-03.png"> 
+   <img width="400" alt="ipad-04" src="assets/screenshots/ipad-04.png"> 
 </p>
 

analysis_options.yaml

@@ -5,4 +5,5 @@ linter:
     public_member_api_docs: false
     library_private_types_in_public_api: false
     omit_local_variable_types: false
+    one_member_abstracts: false
     always_specify_types: true

android/app/build.gradle

@@ -33,7 +33,7 @@ if (keystorePropertiesFile.exists()) {
 
 
 android {
-    compileSdkVersion 31
+    compileSdkVersion 32
 
     compileOptions {
         sourceCompatibility JavaVersion.VERSION_1_8
@@ -49,10 +49,9 @@ android {
     }
 
     defaultConfig {
-        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.jiaqifeng.hacki"
         minSdkVersion 26
-        targetSdkVersion 30
+        targetSdkVersion 32
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName
     }
@@ -78,5 +77,5 @@ flutter {
 }
 
 dependencies {
-    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
+    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk8:$kotlin_version"
 }

android/app/src/main/AndroidManifest.xml

@@ -16,14 +16,18 @@
     </queries>
 
    <application
-        android:label="hacki"
-        android:icon="@mipmap/ic_launcher">
+        android:label="Hacki"
+        android:icon="@mipmap/ic_launcher"
+        android:allowBackup="true"
+        android:fullBackupContent="@xml/backup_rules"
+        android:usesCleartextTraffic="true">
         <activity
             android:name=".MainActivity"
             android:launchMode="singleTop"
             android:theme="@style/LaunchTheme"
             android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
             android:hardwareAccelerated="true"
+            android:exported="true"
             android:windowSoftInputMode="adjustResize">
             <!-- Specifies an Android theme to apply to this Activity as soon as
                  the Android process has started. This theme is visible to the user
@@ -52,6 +56,21 @@
                 <category android:name="android.intent.category.DEFAULT" />
                 <data android:mimeType="*/*" />
             </intent-filter>
+
+            <intent-filter android:autoVerify="true">
+                <action android:name="android.intent.action.VIEW" />
+                <category android:name="android.intent.category.DEFAULT" />
+                <category android:name="android.intent.category.BROWSABLE" />
+
+                <data
+                    android:scheme="http"
+                    android:host="news.ycombinator.com"
+                    android:pathPrefix="/item" />
+                <data
+                    android:scheme="https"
+                    android:host="news.ycombinator.com"
+                    android:pathPrefix="/item" />
+            </intent-filter>
         </activity>
         <!-- Don't delete the meta-data below.
              This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->

android/app/src/main/res/xml/backup_rules.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?>
+<full-backup-content>
+    <exclude domain="sharedpref" path="FlutterSecureStorage"/>
+</full-backup-content>

android/build.gradle

@@ -1,12 +1,12 @@
 buildscript {
-    ext.kotlin_version = '1.6.10'
+    ext.kotlin_version = '1.7.0'
     repositories {
         google()
         mavenCentral()
     }
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:7.1.1'
+        classpath 'com.android.tools.build:gradle:7.1.3'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
     }
 }

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

@@ -0,0 +1,6 @@
+- 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

@@ -0,0 +1,6 @@
+- 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

@@ -0,0 +1,6 @@
+- 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

@@ -0,0 +1,6 @@
+- 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

@@ -0,0 +1,7 @@
+- 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/58.txt

@@ -0,0 +1 @@
+- Offline mode now includes web pages.

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

@@ -0,0 +1 @@
+- Offline mode now includes web pages.

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

@@ -0,0 +1 @@
+- Offline mode now includes web pages.

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

@@ -0,0 +1 @@
+- Offline mode now includes web pages.

fastlane/metadata/android/en-US/changelogs/62.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/63.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/64.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/65.txt

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

ios/Podfile.lock

@@ -14,6 +14,8 @@ PODS:
     - Flutter
   - flutter_secure_storage (3.3.1):
     - Flutter
+  - flutter_siri_suggestions (0.0.1):
+    - Flutter
   - FMDB (2.7.5):
     - FMDB/standard (= 2.7.5)
   - FMDB/standard (2.7.5)
@@ -23,6 +25,8 @@ PODS:
   - ReachabilitySwift (5.0.0)
   - receive_sharing_intent (0.0.1):
     - Flutter
+  - share_plus (0.0.1):
+    - Flutter
   - shared_preferences_ios (0.0.1):
     - Flutter
   - sqflite (0.0.2):
@@ -32,8 +36,6 @@ PODS:
     - Flutter
   - url_launcher_ios (0.0.1):
     - Flutter
-  - video_player_avfoundation (0.0.1):
-    - Flutter
   - wakelock (0.0.1):
     - Flutter
   - webview_flutter_wkwebview (0.0.1):
@@ -47,13 +49,14 @@ DEPENDENCIES:
   - flutter_inappwebview (from `.symlinks/plugins/flutter_inappwebview/ios`)
   - 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`)
   - 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`)
   - shared_preferences_ios (from `.symlinks/plugins/shared_preferences_ios/ios`)
   - sqflite (from `.symlinks/plugins/sqflite/ios`)
   - synced_shared_preferences (from `.symlinks/plugins/synced_shared_preferences/ios`)
   - url_launcher_ios (from `.symlinks/plugins/url_launcher_ios/ios`)
-  - video_player_avfoundation (from `.symlinks/plugins/video_player_avfoundation/ios`)
   - wakelock (from `.symlinks/plugins/wakelock/ios`)
   - webview_flutter_wkwebview (from `.symlinks/plugins/webview_flutter_wkwebview/ios`)
   - workmanager (from `.symlinks/plugins/workmanager/ios`)
@@ -75,10 +78,14 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/flutter_local_notifications/ios"
   flutter_secure_storage:
     :path: ".symlinks/plugins/flutter_secure_storage/ios"
+  flutter_siri_suggestions:
+    :path: ".symlinks/plugins/flutter_siri_suggestions/ios"
   path_provider_ios:
     :path: ".symlinks/plugins/path_provider_ios/ios"
   receive_sharing_intent:
     :path: ".symlinks/plugins/receive_sharing_intent/ios"
+  share_plus:
+    :path: ".symlinks/plugins/share_plus/ios"
   shared_preferences_ios:
     :path: ".symlinks/plugins/shared_preferences_ios/ios"
   sqflite:
@@ -87,8 +94,6 @@ EXTERNAL SOURCES:
     :path: ".symlinks/plugins/synced_shared_preferences/ios"
   url_launcher_ios:
     :path: ".symlinks/plugins/url_launcher_ios/ios"
-  video_player_avfoundation:
-    :path: ".symlinks/plugins/video_player_avfoundation/ios"
   wakelock:
     :path: ".symlinks/plugins/wakelock/ios"
   webview_flutter_wkwebview:
@@ -102,16 +107,17 @@ SPEC CHECKSUMS:
   flutter_inappwebview: bfd58618f49dc62f2676de690fc6dcda1d6c3721
   flutter_local_notifications: 0c0b1ae97e741e1521e4c1629a459d04b9aec743
   flutter_secure_storage: 7953c38a04c3fdbb00571bcd87d8e3b5ceb9daec
+  flutter_siri_suggestions: 226fb7ef33d25d3fe0d4aa2a8bcf4b72730c466f
   FMDB: 2ce00b547f966261cd18927a3ddb07cb6f3db82a
   OrderedSet: aaeb196f7fef5a9edf55d89760da9176ad40b93c
   path_provider_ios: 14f3d2fd28c4fdb42f44e0f751d12861c43cee02
   ReachabilitySwift: 985039c6f7b23a1da463388634119492ff86c825
   receive_sharing_intent: c0d87310754e74c0f9542947e7cbdf3a0335a3b1
+  share_plus: 056a1e8ac890df3e33cb503afffaf1e9b4fbae68
   shared_preferences_ios: 548a61f8053b9b8a49ac19c1ffbc8b92c50d68ad
   sqflite: 6d358c025f5b867b29ed92fc697fd34924e11904
   synced_shared_preferences: f722742b06d65c7315b8e9f56b794c9fbd5597f7
   url_launcher_ios: 839c58cdb4279282219f5e248c3321761ff3c4de
-  video_player_avfoundation: e489aac24ef5cf7af82702979ed16f2a5ef84cff
   wakelock: d0fc7c864128eac40eba1617cb5264d9c940b46f
   webview_flutter_wkwebview: b7e70ef1ddded7e69c796c7390ee74180182971f
   workmanager: 0afdcf5628bbde6924c21af7836fed07b42e30e6

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 = 3;
+				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -577,7 +577,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.2.13;
+				MARKETING_VERSION = 0.2.23;
 				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 = 3;
+				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -714,7 +714,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.2.13;
+				MARKETING_VERSION = 0.2.23;
 				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 = 3;
+				CURRENT_PROJECT_VERSION = 1;
 				DEVELOPMENT_TEAM = QMWX3X2NF7;
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
@@ -745,7 +745,7 @@
 					"$(inherited)",
 					"@executable_path/Frameworks",
 				);
-				MARKETING_VERSION = 0.2.13;
+				MARKETING_VERSION = 0.2.23;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

lib/blocs/stories/stories_bloc.dart

@@ -32,6 +32,7 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     on<StoryRead>(onStoryRead);
     on<StoriesLoaded>(onStoriesLoaded);
     on<StoriesDownload>(onDownload);
+    on<StoryDownloaded>(onStoryDownloaded);
     on<StoriesExitOffline>(onExitOffline);
     on<StoriesPageSizeChanged>(onPageSizeChanged);
     on<ClearAllReadStories>(onClearAllReadStories);
@@ -48,6 +49,15 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
   static const int _tabletSmallPageSize = 15;
   static const int _tabletLargePageSize = 25;
 
+  /// Types of story to be shown in the tab bar.
+  static const Set<StoryType> types = <StoryType>{
+    StoryType.top,
+    StoryType.best,
+    StoryType.latest,
+    StoryType.ask,
+    StoryType.show,
+  };
+
   Future<void> onInitialize(
     StoriesInitialize event,
     Emitter<StoriesState> emit,
@@ -70,11 +80,9 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
         currentPageSize: pageSize,
       ),
     );
-    await loadStories(of: StoryType.top, emit: emit);
-    await loadStories(of: StoryType.latest, emit: emit);
-    await loadStories(of: StoryType.ask, emit: emit);
-    await loadStories(of: StoryType.show, emit: emit);
-    await loadStories(of: StoryType.jobs, emit: emit);
+    for (final StoryType type in types) {
+      await loadStories(of: type, emit: emit);
+    }
   }
 
   Future<void> loadStories({
@@ -237,52 +245,48 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     await _cacheRepository.deleteAllStories();
     await _cacheRepository.deleteAllComments();
 
-    final List<int> topIds =
-        await _storiesRepository.fetchStoryIds(of: StoryType.top);
-    final List<int> newIds =
-        await _storiesRepository.fetchStoryIds(of: StoryType.latest);
-    final List<int> askIds =
-        await _storiesRepository.fetchStoryIds(of: StoryType.ask);
-    final List<int> showIds =
-        await _storiesRepository.fetchStoryIds(of: StoryType.show);
-    final List<int> jobIds =
-        await _storiesRepository.fetchStoryIds(of: StoryType.jobs);
+    final Set<int> prioritizedIds = <int>{};
+    final List<StoryType> prioritizedTypes = <StoryType>[...types]
+      ..remove(StoryType.latest);
 
-    await _cacheRepository.cacheStoryIds(of: StoryType.top, ids: topIds);
-    await _cacheRepository.cacheStoryIds(of: StoryType.latest, ids: newIds);
-    await _cacheRepository.cacheStoryIds(of: StoryType.ask, ids: askIds);
-    await _cacheRepository.cacheStoryIds(of: StoryType.show, ids: showIds);
-    await _cacheRepository.cacheStoryIds(of: StoryType.jobs, ids: jobIds);
+    for (final StoryType type in prioritizedTypes) {
+      final List<int> ids = await _storiesRepository.fetchStoryIds(of: type);
+      await _cacheRepository.cacheStoryIds(of: type, ids: ids);
+      prioritizedIds.addAll(ids);
+    }
 
-    final List<int> allIds = <int>[
-      ...topIds,
-      ...newIds,
-      ...askIds,
-      ...showIds,
-      ...jobIds
-    ];
+    emit(
+      state.copyWith(
+        storiesDownloaded: 0,
+        storiesToBeDownloaded: prioritizedIds.length,
+      ),
+    );
 
     try {
-      _storiesRepository
-          .fetchStoriesStream(ids: allIds)
-          .listen((Story story) async {
-        if (story.kids.isNotEmpty) {
-          await _cacheRepository.cacheStory(story: story);
-          _storiesRepository
-              .fetchAllChildrenComments(ids: story.kids)
-              .listen((Comment? comment) async {
-            if (comment != null) {
-              await _cacheRepository.cacheComment(comment: comment);
-            }
-          });
-        }
-      }).onDone(() {
-        emit(
-          state.copyWith(
-            downloadStatus: StoriesDownloadStatus.finished,
-          ),
-        );
-      });
+      await fetchAndCacheStories(
+        prioritizedIds,
+        includingWebPage: event.includingWebPage,
+        isPrioritized: true,
+      );
+
+      final Set<int> latestIds = <int>{};
+      final List<int> ids = await _storiesRepository.fetchStoryIds(
+        of: StoryType.latest,
+      );
+      await _cacheRepository.cacheStoryIds(of: StoryType.latest, ids: ids);
+      latestIds.addAll(ids);
+
+      await fetchAndCacheStories(
+        latestIds,
+        includingWebPage: event.includingWebPage,
+        isPrioritized: false,
+      );
+
+      emit(
+        state.copyWith(
+          downloadStatus: StoriesDownloadStatus.finished,
+        ),
+      );
     } catch (_) {
       emit(
         state.copyWith(
@@ -292,6 +296,71 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     }
   }
 
+  Future<void> fetchAndCacheStories(
+    Iterable<int> ids, {
+    required bool includingWebPage,
+    required bool isPrioritized,
+  }) async {
+    for (final int id in ids) {
+      final Story? story = await _storiesRepository.fetchStoryBy(id);
+
+      if (story == null) {
+        if (isPrioritized) {
+          add(StoryDownloaded(skipped: true));
+        }
+        continue;
+      }
+
+      if (story.kids.isEmpty) {
+        if (isPrioritized) {
+          add(StoryDownloaded(skipped: true));
+        }
+        continue;
+      }
+
+      await _cacheRepository.cacheStory(story: story);
+
+      if (story.url.isNotEmpty && includingWebPage) {
+        await _cacheRepository.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;
+    }
+  }
+
+  void onStoryDownloaded(StoryDownloaded event, Emitter<StoriesState> emit) {
+    if (event.skipped) {
+      emit(
+        state.copyWith(
+          storiesToBeDownloaded: state.storiesToBeDownloaded - 1,
+        ),
+      );
+    } else {
+      final int updatedStoriesDownloaded = state.storiesDownloaded + 1;
+      emit(
+        state.copyWith(
+          storiesDownloaded: updatedStoriesDownloaded,
+          storiesToBeDownloaded:
+              updatedStoriesDownloaded > state.storiesToBeDownloaded
+                  ? state.storiesToBeDownloaded + 1
+                  : state.storiesToBeDownloaded,
+        ),
+      );
+    }
+  }
+
   Future<void> onPageSizeChanged(
     StoriesPageSizeChanged event,
     Emitter<StoriesState> emit,
@@ -307,6 +376,7 @@ class StoriesBloc extends Bloc<StoriesEvent, StoriesState> {
     await _cacheRepository.deleteAllStoryIds();
     await _cacheRepository.deleteAllStories();
     await _cacheRepository.deleteAllComments();
+    await _cacheRepository.deleteAllWebPages();
     emit(state.copyWith(offlineReading: false));
     add(StoriesInitialize());
   }

lib/blocs/stories/stories_event.dart

@@ -38,8 +38,21 @@ class StoriesLoadMore extends StoriesEvent {
 }
 
 class StoriesDownload extends StoriesEvent {
+  StoriesDownload({required this.includingWebPage});
+
+  final bool includingWebPage;
+
   @override
-  List<Object?> get props => <Object?>[];
+  List<Object?> get props => <Object?>[includingWebPage];
+}
+
+class StoryDownloaded extends StoriesEvent {
+  StoryDownloaded({required this.skipped});
+
+  final bool skipped;
+
+  @override
+  List<Object?> get props => <Object?>[skipped];
 }
 
 class StoriesExitOffline extends StoriesEvent {

lib/blocs/stories/stories_state.dart

@@ -23,11 +23,14 @@ class StoriesState extends Equatable {
     required this.offlineReading,
     required this.downloadStatus,
     required this.currentPageSize,
+    required this.storiesDownloaded,
+    required this.storiesToBeDownloaded,
   });
 
   const StoriesState.init({
     this.storiesByType = const <StoryType, List<Story>>{
       StoryType.top: <Story>[],
+      StoryType.best: <Story>[],
       StoryType.latest: <Story>[],
       StoryType.ask: <Story>[],
       StoryType.show: <Story>[],
@@ -35,6 +38,7 @@ class StoriesState extends Equatable {
     },
     this.storyIdsByType = const <StoryType, List<int>>{
       StoryType.top: <int>[],
+      StoryType.best: <int>[],
       StoryType.latest: <int>[],
       StoryType.ask: <int>[],
       StoryType.show: <int>[],
@@ -42,6 +46,7 @@ class StoriesState extends Equatable {
     },
     this.statusByType = const <StoryType, StoriesStatus>{
       StoryType.top: StoriesStatus.initial,
+      StoryType.best: StoriesStatus.initial,
       StoryType.latest: StoriesStatus.initial,
       StoryType.ask: StoriesStatus.initial,
       StoryType.show: StoriesStatus.initial,
@@ -49,6 +54,7 @@ class StoriesState extends Equatable {
     },
     this.currentPageByType = const <StoryType, int>{
       StoryType.top: 0,
+      StoryType.best: 0,
       StoryType.latest: 0,
       StoryType.ask: 0,
       StoryType.show: 0,
@@ -57,7 +63,9 @@ class StoriesState extends Equatable {
   })  : offlineReading = false,
         downloadStatus = StoriesDownloadStatus.initial,
         currentPageSize = 0,
-        readStoriesIds = const <int>{};
+        readStoriesIds = const <int>{},
+        storiesDownloaded = 0,
+        storiesToBeDownloaded = 0;
 
   final Map<StoryType, List<Story>> storiesByType;
   final Map<StoryType, List<int>> storyIdsByType;
@@ -67,6 +75,8 @@ class StoriesState extends Equatable {
   final StoriesDownloadStatus downloadStatus;
   final bool offlineReading;
   final int currentPageSize;
+  final int storiesDownloaded;
+  final int storiesToBeDownloaded;
 
   StoriesState copyWith({
     Map<StoryType, List<Story>>? storiesByType,
@@ -77,6 +87,8 @@ class StoriesState extends Equatable {
     StoriesDownloadStatus? downloadStatus,
     bool? offlineReading,
     int? currentPageSize,
+    int? storiesDownloaded,
+    int? storiesToBeDownloaded,
   }) {
     return StoriesState(
       storiesByType: storiesByType ?? this.storiesByType,
@@ -87,6 +99,9 @@ class StoriesState extends Equatable {
       offlineReading: offlineReading ?? this.offlineReading,
       downloadStatus: downloadStatus ?? this.downloadStatus,
       currentPageSize: currentPageSize ?? this.currentPageSize,
+      storiesDownloaded: storiesDownloaded ?? this.storiesDownloaded,
+      storiesToBeDownloaded:
+          storiesToBeDownloaded ?? this.storiesToBeDownloaded,
     );
   }
 
@@ -98,18 +113,12 @@ class StoriesState extends Equatable {
     final Map<StoryType, List<Story>> newMap =
         Map<StoryType, List<Story>>.from(storiesByType);
     newMap[of] = List<Story>.from(newMap[of]!)..add(story);
-    return StoriesState(
+    return copyWith(
       storiesByType: newMap,
-      storyIdsByType: storyIdsByType,
-      statusByType: statusByType,
-      currentPageByType: currentPageByType,
       readStoriesIds: <int>{
         ...readStoriesIds,
         if (hasRead) story.id,
       },
-      offlineReading: offlineReading,
-      downloadStatus: downloadStatus,
-      currentPageSize: currentPageSize,
     );
   }
 
@@ -120,15 +129,8 @@ class StoriesState extends Equatable {
     final Map<StoryType, List<int>> newMap =
         Map<StoryType, List<int>>.from(storyIdsByType);
     newMap[of] = to;
-    return StoriesState(
-      storiesByType: storiesByType,
+    return copyWith(
       storyIdsByType: newMap,
-      statusByType: statusByType,
-      currentPageByType: currentPageByType,
-      readStoriesIds: readStoriesIds,
-      offlineReading: offlineReading,
-      downloadStatus: downloadStatus,
-      currentPageSize: currentPageSize,
     );
   }
 
@@ -139,15 +141,8 @@ class StoriesState extends Equatable {
     final Map<StoryType, StoriesStatus> newMap =
         Map<StoryType, StoriesStatus>.from(statusByType);
     newMap[of] = to;
-    return StoriesState(
-      storiesByType: storiesByType,
-      storyIdsByType: storyIdsByType,
+    return copyWith(
       statusByType: newMap,
-      currentPageByType: currentPageByType,
-      readStoriesIds: readStoriesIds,
-      offlineReading: offlineReading,
-      downloadStatus: downloadStatus,
-      currentPageSize: currentPageSize,
     );
   }
 
@@ -158,15 +153,8 @@ class StoriesState extends Equatable {
     final Map<StoryType, int> newMap =
         Map<StoryType, int>.from(currentPageByType);
     newMap[of] = to;
-    return StoriesState(
-      storiesByType: storiesByType,
-      storyIdsByType: storyIdsByType,
-      statusByType: statusByType,
+    return copyWith(
       currentPageByType: newMap,
-      readStoriesIds: readStoriesIds,
-      offlineReading: offlineReading,
-      downloadStatus: downloadStatus,
-      currentPageSize: currentPageSize,
     );
   }
 
@@ -183,15 +171,11 @@ class StoriesState extends Equatable {
     final Map<StoryType, int> newCurrentPageMap =
         Map<StoryType, int>.from(currentPageByType);
     newCurrentPageMap[of] = 0;
-    return StoriesState(
+    return copyWith(
       storiesByType: newStoriesMap,
       storyIdsByType: newStoryIdsMap,
       statusByType: newStatusMap,
       currentPageByType: newCurrentPageMap,
-      readStoriesIds: readStoriesIds,
-      offlineReading: offlineReading,
-      downloadStatus: downloadStatus,
-      currentPageSize: currentPageSize,
     );
   }
 
@@ -205,5 +189,7 @@ class StoriesState extends Equatable {
         offlineReading,
         downloadStatus,
         currentPageSize,
+        storiesDownloaded,
+        storiesToBeDownloaded,
       ];
 }

lib/config/constants.dart

@@ -9,6 +9,7 @@ abstract class Constants {
       'https://apps.apple.com/us/app/hacki/id1602043763?action=write-review';
   static const String googlePlayLink =
       'https://play.google.com/store/apps/details?id=com.jiaqifeng.hacki&hl=en_US&gl=US';
+  static const String sponsorLink = 'https://github.com/sponsors/Livinglist';
 
   static const String _imagePath = 'assets/images';
   static const String hackerNewsLogoPath = '$_imagePath/hacker_news_logo.png';

lib/config/custom_router.dart

@@ -10,8 +10,8 @@ class CustomRouter {
     switch (settings.name) {
       case HomeScreen.routeName:
         return HomeScreen.route();
-      case StoryScreen.routeName:
-        return StoryScreen.route(settings.arguments! as StoryScreenArgs);
+      case ItemScreen.routeName:
+        return ItemScreen.route(settings.arguments! as ItemScreenArgs);
       case SubmitScreen.routeName:
         return SubmitScreen.route();
       default:
@@ -22,8 +22,8 @@ class CustomRouter {
   /// Nested routing for bottom navigation bar.
   static Route<dynamic> onGenerateNestedRoute(RouteSettings settings) {
     switch (settings.name) {
-      case StoryScreen.routeName:
-        return StoryScreen.route(settings.arguments! as StoryScreenArgs);
+      case ItemScreen.routeName:
+        return ItemScreen.route(settings.arguments! as ItemScreenArgs);
       case SubmitScreen.routeName:
         return SubmitScreen.route();
       default:

lib/cubits/comments/comments_cubit.dart

@@ -1,10 +1,15 @@
 import 'dart:async';
 
 import 'package:bloc/bloc.dart';
+import 'package:collection/collection.dart';
 import 'package:equatable/equatable.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:hacki/config/locator.dart';
+import 'package:hacki/main.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/repositories.dart';
+import 'package:hacki/screens/screens.dart';
 import 'package:hacki/services/services.dart';
 
 part 'comments_state.dart';
@@ -16,14 +21,14 @@ class CommentsCubit extends Cubit<CommentsState> {
     StoriesRepository? storiesRepository,
     SembastRepository? sembastRepository,
     required bool offlineReading,
-    required Story story,
+    required Item item,
   })  : _cacheService = cacheService ?? locator.get<CacheService>(),
         _cacheRepository = cacheRepository ?? locator.get<CacheRepository>(),
         _storiesRepository =
             storiesRepository ?? locator.get<StoriesRepository>(),
         _sembastRepository =
             sembastRepository ?? locator.get<SembastRepository>(),
-        super(CommentsState.init(offlineReading: offlineReading, story: story));
+        super(CommentsState.init(offlineReading: offlineReading, item: item));
 
   final CacheService _cacheService;
   final CacheRepository _cacheRepository;
@@ -66,32 +71,29 @@ class CommentsCubit extends Cubit<CommentsState> {
 
     emit(state.copyWith(status: CommentsStatus.loading));
 
-    final Story story = state.story;
-    final Story updatedStory = state.offlineReading
-        ? story
-        : await _storiesRepository.fetchStoryBy(story.id) ?? story;
+    final Item item = state.item;
+    final Item updatedItem = state.offlineReading
+        ? item
+        : await _storiesRepository.fetchItemBy(id: item.id) ?? item;
+    final List<int> kids = sortKids(updatedItem.kids);
 
-    emit(state.copyWith(story: updatedStory));
+    emit(state.copyWith(item: updatedItem));
 
     if (state.offlineReading) {
       _streamSubscription = _cacheRepository
-          .getCachedCommentsStream(ids: updatedStory.kids)
+          .getCachedCommentsStream(ids: kids)
           .listen(_onCommentFetched)
         ..onDone(_onDone);
     } else {
       _streamSubscription = _storiesRepository
-          .fetchCommentsStream(ids: updatedStory.kids)
+          .fetchCommentsStream(ids: kids)
           .listen(_onCommentFetched)
         ..onDone(_onDone);
     }
   }
 
   Future<void> refresh() async {
-    final bool offlineReading = await _cacheRepository.hasCachedStories;
-
-    _cacheService.resetCollapsedComments();
-
-    if (offlineReading) {
+    if (state.offlineReading) {
       emit(
         state.copyWith(
           status: CommentsStatus.loaded,
@@ -100,6 +102,10 @@ class CommentsCubit extends Cubit<CommentsState> {
       return;
     }
 
+    _cacheService
+      ..resetComments()
+      ..resetCollapsedComments();
+
     emit(
       state.copyWith(
         status: CommentsStatus.loading,
@@ -109,28 +115,31 @@ class CommentsCubit extends Cubit<CommentsState> {
 
     await _streamSubscription?.cancel();
 
-    final Story story = state.story;
-    final Story updatedStory =
-        await _storiesRepository.fetchStoryBy(story.id) ?? story;
+    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: updatedStory.kids)
+        .fetchCommentsStream(ids: kids)
         .listen(_onCommentFetched)
       ..onDone(_onDone);
 
     emit(
       state.copyWith(
-        story: updatedStory,
+        item: updatedItem,
         status: CommentsStatus.loaded,
       ),
     );
   }
 
   void loadAll(Story story) {
+    HapticFeedback.lightImpact();
     emit(
       state.copyWith(
         onlyShowTargetComment: false,
         comments: <Comment>[],
-        story: story,
+        item: story,
       ),
     );
     init();
@@ -143,6 +152,47 @@ class CommentsCubit extends Cubit<CommentsState> {
     }
   }
 
+  Future<void> loadParentThread() async {
+    unawaited(HapticFeedback.lightImpact());
+    emit(state.copyWith(fetchParentStatus: CommentsStatus.loading));
+    final Story? parent =
+        await _storiesRepository.fetchParentStory(id: state.item.id);
+
+    if (parent == null) {
+      return;
+    } else {
+      await HackiApp.navigatorKey.currentState?.pushNamed(
+        ItemScreen.routeName,
+        arguments: ItemScreenArgs(item: parent),
+      );
+
+      emit(
+        state.copyWith(
+          fetchParentStatus: CommentsStatus.loaded,
+        ),
+      );
+    }
+  }
+
+  void onOrderChanged(CommentsOrder? order) {
+    HapticFeedback.selectionClick();
+    if (order == null) return;
+    _streamSubscription?.cancel();
+    emit(state.copyWith(order: order, comments: <Comment>[]));
+    init();
+  }
+
+  List<int> sortKids(List<int> kids) {
+    switch (state.order) {
+      case CommentsOrder.natural:
+        return kids;
+      case CommentsOrder.newestFirst:
+        return kids.sorted((int a, int b) => b.compareTo(a));
+      case CommentsOrder.oldestFirst:
+        return kids.sorted((int a, int b) => a.compareTo(b));
+    }
+  }
+
   void _onDone() {
     _streamSubscription?.cancel();
     _streamSubscription = null;
@@ -159,16 +209,29 @@ class CommentsCubit extends Cubit<CommentsState> {
         ..addKid(comment.id, to: comment.parent)
         ..cacheComment(comment);
       _sembastRepository.cacheComment(comment);
+
+      final List<LinkifyElement> elements = _linkify(
+        comment.text,
+      );
+
+      final BuildableComment buildableComment =
+          BuildableComment.fromComment(comment, elements: elements);
+
       final List<Comment> updatedComments = <Comment>[
         ...state.comments,
-        comment
+        buildableComment
       ];
+
       emit(state.copyWith(comments: updatedComments));
 
       if (updatedComments.length >= _pageSize + _pageSize * state.currentPage &&
           updatedComments.length <=
               _pageSize * 2 + _pageSize * state.currentPage) {
-        _streamSubscription?.pause();
+        final bool isHidden = _cacheService.isHidden(comment.id);
+
+        if (!isHidden) {
+          _streamSubscription?.pause();
+        }
 
         emit(
           state.copyWith(
@@ -180,6 +243,31 @@ class CommentsCubit extends Cubit<CommentsState> {
     }
   }
 
+  static List<LinkifyElement> _linkify(
+    String text, {
+    LinkifyOptions options = const LinkifyOptions(),
+    List<Linkifier> linkifiers = const <Linkifier>[
+      UrlLinkifier(),
+      EmailLinkifier(),
+    ],
+  }) {
+    List<LinkifyElement> list = <LinkifyElement>[TextElement(text)];
+
+    if (text.isEmpty) {
+      return <LinkifyElement>[];
+    }
+
+    if (linkifiers.isEmpty) {
+      return list;
+    }
+
+    for (final Linkifier linkifier in linkifiers) {
+      list = linkifier.parse(list, options);
+    }
+
+    return list;
+  }
+
   @override
   Future<void> close() async {
     await _streamSubscription?.cancel();

lib/cubits/comments/comments_state.dart

@@ -8,12 +8,19 @@ enum CommentsStatus {
   failure,
 }
 
+enum CommentsOrder {
+  natural,
+  newestFirst,
+  oldestFirst,
+}
+
 class CommentsState extends Equatable {
   const CommentsState({
-    required this.story,
+    required this.item,
     required this.comments,
     required this.status,
-    required this.collapsed,
+    required this.fetchParentStatus,
+    required this.order,
     required this.onlyShowTargetComment,
     required this.offlineReading,
     required this.currentPage,
@@ -21,35 +28,39 @@ class CommentsState extends Equatable {
 
   CommentsState.init({
     required this.offlineReading,
-    required this.story,
+    required this.item,
   })  : comments = <Comment>[],
         status = CommentsStatus.init,
-        collapsed = false,
+        fetchParentStatus = CommentsStatus.init,
+        order = CommentsOrder.natural,
         onlyShowTargetComment = false,
         currentPage = 0;
 
-  final Story story;
+  final Item item;
   final List<Comment> comments;
   final CommentsStatus status;
-  final bool collapsed;
+  final CommentsStatus fetchParentStatus;
+  final CommentsOrder order;
   final bool onlyShowTargetComment;
   final bool offlineReading;
   final int currentPage;
 
   CommentsState copyWith({
-    Story? story,
+    Item? item,
     List<Comment>? comments,
     CommentsStatus? status,
-    bool? collapsed,
+    CommentsStatus? fetchParentStatus,
+    CommentsOrder? order,
     bool? onlyShowTargetComment,
     bool? offlineReading,
     int? currentPage,
   }) {
     return CommentsState(
-      story: story ?? this.story,
+      item: item ?? this.item,
       comments: comments ?? this.comments,
+      fetchParentStatus: fetchParentStatus ?? this.fetchParentStatus,
       status: status ?? this.status,
-      collapsed: collapsed ?? this.collapsed,
+      order: order ?? this.order,
       onlyShowTargetComment:
           onlyShowTargetComment ?? this.onlyShowTargetComment,
       offlineReading: offlineReading ?? this.offlineReading,
@@ -59,10 +70,11 @@ class CommentsState extends Equatable {
 
   @override
   List<Object?> get props => <Object?>[
-        story,
+        item,
         comments,
         status,
-        collapsed,
+        fetchParentStatus,
+        order,
         onlyShowTargetComment,
         offlineReading,
         currentPage,

lib/cubits/cubits.dart

@@ -14,4 +14,5 @@ export 'search/search_cubit.dart';
 export 'split_view/split_view_cubit.dart';
 export 'submit/submit_cubit.dart';
 export 'time_machine/time_machine_cubit.dart';
+export 'user/user_cubit.dart';
 export 'vote/vote_cubit.dart';

lib/cubits/fav/fav_cubit.dart

@@ -39,15 +39,15 @@ class FavCubit extends Cubit<FavState> {
           emit(
             state.copyWith(
               favIds: favIds,
-              favStories: <Story>[],
+              favItems: <Item>[],
               currentPage: 0,
             ),
           );
           _storiesRepository
-              .fetchStoriesStream(
+              .fetchItemsStream(
                 ids: favIds.sublist(0, _pageSize.clamp(0, favIds.length)),
               )
-              .listen(_onStoryLoaded)
+              .listen(_onItemLoaded)
               .onDone(() {
             emit(
               state.copyWith(
@@ -73,13 +73,13 @@ class FavCubit extends Cubit<FavState> {
       ),
     );
 
-    final Story? story = await _storiesRepository.fetchStoryBy(id);
+    final Item? item = await _storiesRepository.fetchItemBy(id: id);
 
-    if (story == null) return;
+    if (item == null) return;
 
     emit(
       state.copyWith(
-        favStories: List<Story>.from(state.favStories)..insert(0, story),
+        favItems: List<Item>.from(state.favItems)..insert(0, item),
       ),
     );
 
@@ -96,8 +96,8 @@ class FavCubit extends Cubit<FavState> {
     emit(
       state.copyWith(
         favIds: List<int>.from(state.favIds)..remove(id),
-        favStories: List<Story>.from(state.favStories)
-          ..removeWhere((Story e) => e.id == id),
+        favItems: List<Item>.from(state.favItems)
+          ..removeWhere((Item e) => e.id == id),
       ),
     );
 
@@ -120,13 +120,13 @@ class FavCubit extends Cubit<FavState> {
       }
 
       _storiesRepository
-          .fetchStoriesStream(
+          .fetchItemsStream(
             ids: state.favIds.sublist(
               lower,
               upper,
             ),
           )
-          .listen(_onStoryLoaded)
+          .listen(_onItemLoaded)
           .onDone(() {
         emit(state.copyWith(status: FavStatus.loaded));
       });
@@ -142,7 +142,7 @@ class FavCubit extends Cubit<FavState> {
       state.copyWith(
         status: FavStatus.loading,
         currentPage: 0,
-        favStories: <Story>[],
+        favItems: <Item>[],
         favIds: <int>[],
       ),
     );
@@ -150,20 +150,20 @@ class FavCubit extends Cubit<FavState> {
     _preferenceRepository.favList(of: username).then((List<int> favIds) {
       emit(state.copyWith(favIds: favIds));
       _storiesRepository
-          .fetchStoriesStream(
+          .fetchItemsStream(
             ids: favIds.sublist(0, _pageSize.clamp(0, favIds.length)),
           )
-          .listen(_onStoryLoaded)
+          .listen(_onItemLoaded)
           .onDone(() {
         emit(state.copyWith(status: FavStatus.loaded));
       });
     });
   }
 
-  void _onStoryLoaded(Story story) {
+  void _onItemLoaded(Item item) {
     emit(
       state.copyWith(
-        favStories: List<Story>.from(state.favStories)..add(story),
+        favItems: List<Item>.from(state.favItems)..add(item),
       ),
     );
   }

lib/cubits/fav/fav_state.dart

@@ -10,31 +10,31 @@ enum FavStatus {
 class FavState extends Equatable {
   const FavState({
     required this.favIds,
-    required this.favStories,
+    required this.favItems,
     required this.status,
     required this.currentPage,
   });
 
   FavState.init()
       : favIds = <int>[],
-        favStories = <Story>[],
+        favItems = <Item>[],
         status = FavStatus.init,
         currentPage = 0;
 
   final List<int> favIds;
-  final List<Story> favStories;
+  final List<Item> favItems;
   final FavStatus status;
   final int currentPage;
 
   FavState copyWith({
     List<int>? favIds,
-    List<Story>? favStories,
+    List<Item>? favItems,
     FavStatus? status,
     int? currentPage,
   }) {
     return FavState(
       favIds: favIds ?? this.favIds,
-      favStories: favStories ?? this.favStories,
+      favItems: favItems ?? this.favItems,
       status: status ?? this.status,
       currentPage: currentPage ?? this.currentPage,
     );
@@ -43,7 +43,7 @@ class FavState extends Equatable {
   @override
   List<Object?> get props => <Object?>[
         favIds,
-        favStories,
+        favItems,
         status,
         currentPage,
       ];

lib/cubits/search/search_cubit.dart

@@ -1,3 +1,5 @@
+import 'dart:async';
+
 import 'package:bloc/bloc.dart';
 import 'package:equatable/equatable.dart';
 import 'package:hacki/config/locator.dart';
@@ -13,42 +15,94 @@ class SearchCubit extends Cubit<SearchState> {
 
   final SearchRepository _searchRepository;
 
+  StreamSubscription<Story>? streamSubscription;
+
   void search(String query) {
+    streamSubscription?.cancel();
     emit(
       state.copyWith(
         results: <Story>[],
-        currentPage: 0,
         status: SearchStatus.loading,
-        query: query,
+        searchFilters: state.searchFilters.copyWith(query: query, page: 0),
       ),
     );
-    _searchRepository.search(query).listen(_onStoryFetched).onDone(() {
-      emit(state.copyWith(status: SearchStatus.loaded));
-    });
+    streamSubscription = _searchRepository
+        .search(filters: state.searchFilters)
+        .listen(_onStoryFetched)
+      ..onDone(() {
+        emit(state.copyWith(status: SearchStatus.loaded));
+      });
   }
 
   void loadMore() {
-    final int updatedPage = state.currentPage + 1;
+    if (state.status != SearchStatus.loading) {
+      final int updatedPage = state.searchFilters.page + 1;
+      emit(
+        state.copyWith(
+          status: SearchStatus.loadingMore,
+          searchFilters: state.searchFilters.copyWith(page: updatedPage),
+        ),
+      );
+      streamSubscription = _searchRepository
+          .search(filters: state.searchFilters)
+          .listen(_onStoryFetched)
+        ..onDone(() {
+          emit(state.copyWith(status: SearchStatus.loaded));
+        });
+    }
+  }
+
+  void addFilter<T extends SearchFilter>(T filter) {
+    if (state.searchFilters.contains<T>()) {
+      emit(
+        state.copyWith(
+          searchFilters: state.searchFilters.copyWithFilterRemoved<T>(),
+        ),
+      );
+    }
+
     emit(
       state.copyWith(
-        status: SearchStatus.loadingMore,
-        currentPage: updatedPage,
+        searchFilters: state.searchFilters.copyWithFilterAdded(filter),
       ),
     );
-    _searchRepository
-        .search(state.query, page: updatedPage)
-        .listen(_onStoryFetched)
-        .onDone(() {
-      emit(state.copyWith(status: SearchStatus.loaded));
-    });
+
+    search(state.searchFilters.query);
+  }
+
+  void removeFilter<T extends SearchFilter>() {
+    emit(
+      state.copyWith(
+        searchFilters: state.searchFilters.copyWithFilterRemoved<T>(),
+      ),
+    );
+
+    search(state.searchFilters.query);
+  }
+
+  void onSortToggled() {
+    emit(
+      state.copyWith(
+        searchFilters: state.searchFilters.copyWith(
+          sorted: !state.searchFilters.sorted,
+        ),
+      ),
+    );
+
+    search(state.searchFilters.query);
   }
 
   void _onStoryFetched(Story story) {
     emit(
       state.copyWith(
         results: List<Story>.from(state.results)..add(story),
-        status: SearchStatus.loaded,
       ),
     );
   }
+
+  @override
+  Future<void> close() async {
+    await streamSubscription?.cancel();
+    await super.close();
+  }
 }

lib/cubits/search/search_state.dart

@@ -9,42 +9,36 @@ enum SearchStatus {
 
 class SearchState extends Equatable {
   const SearchState({
-    required this.query,
     required this.status,
     required this.results,
-    required this.currentPage,
+    required this.searchFilters,
   });
 
   SearchState.init()
-      : query = '',
-        status = SearchStatus.initial,
+      : status = SearchStatus.initial,
         results = <Story>[],
-        currentPage = 0;
+        searchFilters = SearchFilters.init();
 
-  final String query;
   final List<Story> results;
   final SearchStatus status;
-  final int currentPage;
+  final SearchFilters searchFilters;
 
   SearchState copyWith({
-    String? query,
     List<Story>? results,
     SearchStatus? status,
-    int? currentPage,
+    SearchFilters? searchFilters,
   }) {
     return SearchState(
-      query: query ?? this.query,
       results: results ?? this.results,
       status: status ?? this.status,
-      currentPage: currentPage ?? this.currentPage,
+      searchFilters: searchFilters ?? this.searchFilters,
     );
   }
 
   @override
   List<Object?> get props => <Object?>[
-        query,
         status,
         results,
-        currentPage,
+        searchFilters,
       ];
 }

lib/cubits/split_view/split_view_cubit.dart

@@ -13,12 +13,14 @@ class SplitViewCubit extends Cubit<SplitViewState> {
 
   final CacheService _cacheService;
 
-  void updateStoryScreenArgs(StoryScreenArgs args) {
+  void updateItemScreenArgs(ItemScreenArgs args) {
     _cacheService.resetCollapsedComments();
-    emit(state.copyWith(storyScreenArgs: args));
+    emit(state.copyWith(itemScreenArgs: args));
   }
 
   void enableSplitView() => emit(state.copyWith(enabled: true));
 
   void disableSplitView() => emit(state.copyWith(enabled: false));
+
+  void zoom() => emit(state.copyWith(expanded: !state.expanded));
 }

lib/cubits/split_view/split_view_state.dart

@@ -2,27 +2,36 @@ part of 'split_view_cubit.dart';
 
 class SplitViewState extends Equatable {
   const SplitViewState({
-    required this.storyScreenArgs,
+    required this.itemScreenArgs,
+    required this.expanded,
     required this.enabled,
   });
 
   const SplitViewState.init()
       : enabled = false,
-        storyScreenArgs = null;
+        expanded = false,
+        itemScreenArgs = null;
 
   final bool enabled;
-  final StoryScreenArgs? storyScreenArgs;
+  final bool expanded;
+  final ItemScreenArgs? itemScreenArgs;
 
-  SplitViewState copyWith({bool? enabled, StoryScreenArgs? storyScreenArgs}) {
+  SplitViewState copyWith({
+    bool? enabled,
+    bool? expanded,
+    ItemScreenArgs? itemScreenArgs,
+  }) {
     return SplitViewState(
       enabled: enabled ?? this.enabled,
-      storyScreenArgs: storyScreenArgs ?? this.storyScreenArgs,
+      expanded: expanded ?? this.expanded,
+      itemScreenArgs: itemScreenArgs ?? this.itemScreenArgs,
     );
   }
 
   @override
   List<Object?> get props => <Object?>[
         enabled,
-        storyScreenArgs,
+        expanded,
+        itemScreenArgs,
       ];
 }

lib/cubits/user/user_cubit.dart

@@ -0,0 +1,26 @@
+import 'package:equatable/equatable.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:hacki/config/locator.dart';
+import 'package:hacki/models/models.dart';
+import 'package:hacki/repositories/repositories.dart';
+
+part 'user_state.dart';
+
+class UserCubit extends Cubit<UserState> {
+  UserCubit({StoriesRepository? storiesRepository})
+      : _storiesRepository =
+            storiesRepository ?? locator.get<StoriesRepository>(),
+        super(UserState.init());
+
+  final StoriesRepository _storiesRepository;
+
+  void init({required String userId}) {
+    emit(state.copyWith(status: UserStatus.loading));
+    _storiesRepository.fetchUserBy(userId: userId).then((User user) {
+      emit(state.copyWith(user: user, status: UserStatus.loaded));
+    }).onError((_, __) {
+      emit(state.copyWith(status: UserStatus.failure));
+      return;
+    });
+  }
+}

lib/cubits/user/user_state.dart

@@ -0,0 +1,38 @@
+part of 'user_cubit.dart';
+
+enum UserStatus {
+  initial,
+  loading,
+  loaded,
+  failure,
+}
+
+class UserState extends Equatable {
+  const UserState({
+    required this.user,
+    required this.status,
+  });
+
+  UserState.init()
+      : user = User.empty(),
+        status = UserStatus.initial;
+
+  final User user;
+  final UserStatus status;
+
+  UserState copyWith({
+    User? user,
+    UserStatus? status,
+  }) {
+    return UserState(
+      user: user ?? this.user,
+      status: status ?? this.status,
+    );
+  }
+
+  @override
+  List<Object?> get props => <Object?>[
+        user,
+        status,
+      ];
+}

lib/extensions/state_extension.dart

@@ -2,7 +2,8 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/main.dart';
-import 'package:hacki/screens/screens.dart' show StoryScreen, StoryScreenArgs;
+import 'package:hacki/screens/screens.dart' show ItemScreen, ItemScreenArgs;
+import 'package:hacki/styles/styles.dart';
 
 extension StateExtension on State {
   void showSnackBar({
@@ -12,7 +13,7 @@ extension StateExtension on State {
   }) {
     ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(
-        backgroundColor: Colors.deepOrange,
+        backgroundColor: Palette.deepOrange,
         content: Text(content),
         action: action != null && label != null
             ? SnackBarAction(
@@ -26,14 +27,17 @@ extension StateExtension on State {
     );
   }
 
-  Future<void>? goToStoryScreen({required StoryScreenArgs args}) {
+  Future<void>? goToItemScreen({
+    required ItemScreenArgs args,
+    bool forceNewScreen = false,
+  }) {
     final bool splitViewEnabled = context.read<SplitViewCubit>().state.enabled;
 
-    if (splitViewEnabled) {
-      context.read<SplitViewCubit>().updateStoryScreenArgs(args);
+    if (splitViewEnabled && !forceNewScreen) {
+      context.read<SplitViewCubit>().updateItemScreenArgs(args);
     } else {
       return HackiApp.navigatorKey.currentState?.pushNamed(
-        StoryScreen.routeName,
+        ItemScreen.routeName,
         arguments: args,
       );
     }

lib/extensions/string_extension.dart

@@ -1,7 +1,8 @@
 extension StringExtension on String {
   int? getItemId() {
     final RegExp regex = RegExp(r'\d+$');
-    final String match = regex.stringMatch(this) ?? '';
+    final RegExp exception = RegExp(r'\)|].*$');
+    final String match = regex.stringMatch(replaceAll(exception, '')) ?? '';
     return int.tryParse(match);
   }
 

lib/main.dart

@@ -7,6 +7,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/scheduler.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';
+import 'package:flutter_siri_suggestions/flutter_siri_suggestions.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/custom_router.dart';
 import 'package:hacki/config/locator.dart';
@@ -14,6 +15,7 @@ import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/repositories/repositories.dart' show PreferenceRepository;
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/services/fetcher.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hive/hive.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:rxdart/rxdart.dart' show BehaviorSubject;
@@ -24,6 +26,10 @@ import 'package:workmanager/workmanager.dart';
 final BehaviorSubject<String?> selectNotificationSubject =
     BehaviorSubject<String?>();
 
+// For receiving payload event from siri suggestions.
+final BehaviorSubject<String?> siriSuggestionSubject =
+    BehaviorSubject<String?>();
+
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
 
@@ -57,6 +63,16 @@ Future<void> main() async {
           badge: true,
           sound: true,
         );
+
+    FlutterSiriSuggestions.instance.configure(
+      onLaunch: (Map<String, dynamic> message) async {
+        final String? storyId = message['key'] as String?;
+
+        if (storyId == null) return;
+
+        siriSuggestionSubject.add(storyId);
+      },
+    );
   }
 
   final Directory tempDir = await getTemporaryDirectory();
@@ -164,26 +180,22 @@ class HackiApp extends StatelessWidget {
           lazy: false,
           create: (BuildContext context) => PostCubit(),
         ),
-        BlocProvider<EditCubit>(
-          lazy: false,
-          create: (BuildContext context) => EditCubit(),
-        ),
       ],
       child: AdaptiveTheme(
         light: ThemeData(
-          primarySwatch: Colors.orange,
+          primarySwatch: Palette.orange,
         ),
         dark: ThemeData(
           brightness: Brightness.dark,
-          primarySwatch: Colors.orange,
-          canvasColor: trueDarkMode ? Colors.black : null,
+          primarySwatch: Palette.orange,
+          canvasColor: trueDarkMode ? Palette.black : null,
         ),
         initial: savedThemeMode ?? AdaptiveThemeMode.system,
         builder: (ThemeData theme, ThemeData darkTheme) {
           final ThemeData trueDarkTheme = ThemeData(
             brightness: Brightness.dark,
-            primarySwatch: Colors.orange,
-            canvasColor: Colors.black,
+            primarySwatch: Palette.orange,
+            canvasColor: Palette.black,
           );
           return FutureBuilder<AdaptiveThemeMode?>(
             future: AdaptiveTheme.getThemeMode(),

lib/models/buildable_comment.dart

@@ -0,0 +1,35 @@
+import 'package:flutter_linkify/flutter_linkify.dart';
+import 'package:hacki/models/comment.dart';
+import 'package:hacki/models/models.dart';
+
+class BuildableComment extends Comment {
+  BuildableComment({
+    required super.id,
+    required super.time,
+    required super.parent,
+    required super.score,
+    required super.by,
+    required super.text,
+    required super.kids,
+    required super.dead,
+    required super.deleted,
+    required super.level,
+    required this.elements,
+  });
+
+  BuildableComment.fromComment(Comment comment, {required this.elements})
+      : super(
+          id: comment.id,
+          time: comment.time,
+          parent: comment.parent,
+          score: comment.score,
+          by: comment.by,
+          text: comment.text,
+          kids: comment.kids,
+          dead: comment.dead,
+          deleted: comment.deleted,
+          level: comment.level,
+        );
+
+  final List<LinkifyElement> elements;
+}

lib/models/comment.dart

@@ -1,6 +1,5 @@
 import 'dart:convert';
 
-import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
 
 class Comment extends Item {
@@ -12,11 +11,11 @@ class Comment extends Item {
     required super.by,
     required super.text,
     required super.kids,
+    required super.dead,
     required super.deleted,
     required this.level,
   }) : super(
           descendants: 0,
-          dead: false,
           parts: <int>[],
           title: '',
           url: '',
@@ -43,8 +42,7 @@ class Comment extends Item {
 
   final int level;
 
-  String get postedDate =>
-      DateTime.fromMillisecondsSinceEpoch(time * 1000).toReadableString();
+  String get metadata => '''by $by $postedDate''';
 
   Comment copyWith({int? level}) {
     return Comment(
@@ -55,6 +53,7 @@ class Comment extends Item {
       by: by,
       text: text,
       kids: kids,
+      dead: dead,
       deleted: deleted,
       level: level ?? this.level,
     );

lib/models/item.dart

@@ -1,4 +1,5 @@
 import 'package:equatable/equatable.dart';
+import 'package:hacki/extensions/date_time_extension.dart';
 
 abstract class Item extends Equatable {
   const Item({
@@ -54,6 +55,9 @@ abstract class Item extends Equatable {
   final List<int> kids;
   final List<int> parts;
 
+  String get postedDate =>
+      DateTime.fromMillisecondsSinceEpoch(time * 1000).toReadableString();
+
   bool get isPoll => type == 'poll';
 
   bool get isStory => type == 'story';

lib/models/models.dart

@@ -1,6 +1,8 @@
+export 'buildable_comment.dart';
 export 'comment.dart';
 export 'item.dart';
 export 'poll_option.dart';
 export 'post_data.dart';
+export 'search_filters.dart';
 export 'story.dart';
 export 'user.dart';

lib/models/poll_option.dart

@@ -1,6 +1,5 @@
 import 'dart:convert';
 
-import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
 
 class PollOption extends Item {
@@ -63,9 +62,6 @@ class PollOption extends Item {
 
   final double ratio;
 
-  String get postedDate =>
-      DateTime.fromMillisecondsSinceEpoch(time * 1000).toReadableString();
-
   PollOption copyWith({double? ratio}) {
     return PollOption(
       id: id,

lib/models/search_filter.dart

@@ -0,0 +1,104 @@
+part of 'search_filters.dart';
+
+abstract class SearchFilter {
+  String get query;
+}
+
+abstract class NumericFilter extends SearchFilter {}
+
+abstract class TagFilter extends SearchFilter {}
+
+class DateTimeRangeFilter implements NumericFilter {
+  DateTimeRangeFilter({
+    this.startTime,
+    this.endTime,
+  });
+
+  final DateTime? startTime;
+  final DateTime? endTime;
+
+  @override
+  String get query {
+    final int? startTimestamp = startTime == null
+        ? null
+        : startTime!.toUtc().millisecondsSinceEpoch ~/ 1000;
+    final int? endTimestamp = endTime == null
+        ? null
+        : endTime!.toUtc().millisecondsSinceEpoch ~/ 1000;
+    final String query =
+        '''${startTimestamp == null ? '' : 'created_at_i>$startTimestamp'},${endTimestamp == null ? '' : 'created_at_i<$endTimestamp'}''';
+
+    if (query.endsWith(',')) {
+      return query.replaceFirst(',', '');
+    }
+
+    return query;
+  }
+}
+
+class PostedByFilter implements TagFilter {
+  PostedByFilter({required this.author});
+
+  final String author;
+
+  @override
+  String get query {
+    return 'author_$author';
+  }
+}
+
+class FrontPageFilter implements TagFilter {
+  FrontPageFilter();
+
+  @override
+  String get query {
+    return 'front_page';
+  }
+}
+
+class ShowHnFilter implements TagFilter {
+  ShowHnFilter();
+
+  @override
+  String get query {
+    return 'show_hn';
+  }
+}
+
+class AskHnFilter implements TagFilter {
+  AskHnFilter();
+
+  @override
+  String get query {
+    return 'ask_hn';
+  }
+}
+
+class PollFilter implements TagFilter {
+  PollFilter();
+
+  @override
+  String get query {
+    return 'poll';
+  }
+}
+
+class StoryFilter implements TagFilter {
+  StoryFilter();
+
+  @override
+  String get query {
+    return 'story';
+  }
+}
+
+class CombinedFilter implements TagFilter {
+  CombinedFilter({required this.filters});
+
+  final List<TagFilter> filters;
+
+  @override
+  String get query {
+    return '''(${filters.map((TagFilter e) => e.query).reduce((String value, String element) => '$value, $element')})''';
+  }
+}

lib/models/search_filters.dart

@@ -0,0 +1,116 @@
+import 'package:collection/collection.dart';
+import 'package:equatable/equatable.dart';
+
+part 'search_filter.dart';
+
+class SearchFilters extends Equatable {
+  const SearchFilters({
+    required this.filters,
+    required this.query,
+    required this.page,
+    this.sorted = false,
+  });
+
+  SearchFilters.init()
+      : filters = <SearchFilter>{},
+        query = '',
+        page = 0,
+        sorted = false;
+
+  final Set<SearchFilter> filters;
+  final String query;
+  final int page;
+  final bool sorted;
+
+  SearchFilters copyWith({
+    Set<SearchFilter>? filters,
+    String? query,
+    int? page,
+    bool? sorted,
+  }) {
+    return SearchFilters(
+      filters: filters ?? this.filters,
+      query: query ?? this.query,
+      page: page ?? this.page,
+      sorted: sorted ?? this.sorted,
+    );
+  }
+
+  SearchFilters copyWithFilterRemoved<T extends SearchFilter>() {
+    return SearchFilters(
+      filters: <SearchFilter>{...filters}
+        ..removeWhere((SearchFilter e) => e is T),
+      query: query,
+      page: page,
+      sorted: sorted,
+    );
+  }
+
+  SearchFilters copyWithFilterAdded(
+    SearchFilter filter,
+  ) {
+    return SearchFilters(
+      filters: <SearchFilter>{...filters, filter},
+      query: query,
+      page: page,
+      sorted: sorted,
+    );
+  }
+
+  String get filteredQuery {
+    final StringBuffer buffer = StringBuffer();
+
+    if (sorted) {
+      buffer.write('search_by_date?query=${Uri.encodeComponent(query)}');
+    } else {
+      buffer.write('search?query=${Uri.encodeComponent(query)}');
+    }
+
+    final Iterable<NumericFilter> numericFilters =
+        filters.whereType<NumericFilter>();
+    final List<TagFilter> tagFilters = <TagFilter>[
+      ...filters.whereType<TagFilter>(),
+      CombinedFilter(filters: <TagFilter>[StoryFilter(), PollFilter()]),
+    ];
+
+    if (numericFilters.isNotEmpty) {
+      buffer
+        ..write('&numericFilters=')
+        ..writeAll(
+          numericFilters.map<String>((NumericFilter e) => e.query),
+          ',',
+        );
+    }
+
+    if (tagFilters.isNotEmpty) {
+      buffer
+        ..write('&tags=')
+        ..writeAll(
+          tagFilters.map<String>((TagFilter e) => e.query),
+          ',',
+        );
+    }
+
+    buffer.write('&page=$page');
+
+    return buffer.toString();
+  }
+
+  bool contains<T extends SearchFilter>() {
+    return filters.whereType<T>().isNotEmpty;
+  }
+
+  T? get<T extends SearchFilter>() {
+    return filters.singleWhereOrNull(
+      (SearchFilter e) => e is T,
+    ) as T?;
+  }
+
+  @override
+  List<Object?> get props => <Object?>[
+        filters,
+        query,
+        page,
+        sorted,
+      ];
+}

lib/models/story.dart

@@ -1,10 +1,10 @@
 import 'dart:convert';
 
-import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
 
 enum StoryType {
   top('topstories'),
+  best('beststories'),
   latest('newstories'),
   ask('askstories'),
   show('showstories'),
@@ -13,6 +13,23 @@ enum StoryType {
   const StoryType(this.path);
 
   final String path;
+
+  String get label {
+    switch (this) {
+      case StoryType.top:
+        return 'TOP';
+      case StoryType.best:
+        return 'BEST';
+      case StoryType.latest:
+        return 'NEW';
+      case StoryType.ask:
+        return 'ASK';
+      case StoryType.show:
+        return 'SHOW';
+      case StoryType.jobs:
+        return 'JOBS';
+    }
+  }
 }
 
 class Story extends Item {
@@ -76,9 +93,6 @@ class Story extends Item {
   String get simpleMetadata =>
       '''$score point${score > 1 ? 's' : ''} $descendants comment${descendants > 1 ? 's' : ''} $postedDate''';
 
-  String get postedDate =>
-      DateTime.fromMillisecondsSinceEpoch(time * 1000).toReadableString();
-
   Map<String, dynamic> toJson() {
     return <String, dynamic>{
       'descendants': descendants,

lib/models/user.dart

@@ -1,5 +1,7 @@
 import 'dart:convert';
 
+import 'package:intl/intl.dart';
+
 class User {
   User({
     required this.about,
@@ -29,6 +31,12 @@ class User {
   final String id;
   final int karma;
 
+  static final DateFormat _dateTimeFormatter = DateFormat.yMMMd();
+
+  String get description {
+    return '''$karma karma, created on ${_dateTimeFormatter.format(DateTime.fromMillisecondsSinceEpoch(created * 1000))}''';
+  }
+
   @override
   String toString() {
     final String prettyString =

lib/repositories/auth_repository.dart

@@ -38,10 +38,14 @@ 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 (_) {
+        return false;
+      }
     }
 
     return success;

lib/repositories/cache_repository.dart

@@ -1,5 +1,7 @@
+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.
@@ -7,19 +9,23 @@ 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);
@@ -37,6 +43,22 @@ class CacheRepository {
     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);
@@ -119,9 +141,27 @@ class CacheRepository {
     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(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/preference_repository.dart

@@ -140,8 +140,25 @@ 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 (_) {
+      await _secureStorage.deleteAll(
+        aOptions: androidOptions,
+      );
+
+      rethrow;
+    }
   }
 
   Future<void> removeAuth() async {

lib/repositories/search_repository.dart

@@ -6,12 +6,14 @@ import 'package:hacki/utils/utils.dart';
 class SearchRepository {
   SearchRepository({Dio? dio}) : _dio = dio ?? Dio();
 
-  static const String _baseUrl = 'http://hn.algolia.com/api/v1/search?query=';
+  static const String _baseUrl = 'http://hn.algolia.com/api/v1/';
 
   final Dio _dio;
 
-  Stream<Story> search(String query, {int page = 0}) async* {
-    final String url = '$_baseUrl${Uri.encodeComponent(query)}&page=$page';
+  Stream<Story> search({
+    required SearchFilters filters,
+  }) async* {
+    final String url = '$_baseUrl${filters.filteredQuery}';
     final Response<Map<String, dynamic>> response =
         await _dio.get<Map<String, dynamic>>(url);
     final Map<String, dynamic>? data = response.data;

lib/repositories/stories_repository.dart

@@ -170,7 +170,7 @@ class StoriesRepository {
       if (json == null) return null;
 
       final String type = json['type'] as String;
-      if (type == 'story' || type == 'job') {
+      if (type == 'story' || type == 'job' || type == 'poll') {
         final Story story = Story.fromJson(json);
         return story;
       } else if (json['type'] == 'comment') {
@@ -192,7 +192,7 @@ class StoriesRepository {
       final Map<String, dynamic> json = val as Map<String, dynamic>;
 
       final String type = json['type'] as String;
-      if (type == 'story' || type == 'job') {
+      if (type == 'story' || type == 'job' || type == 'poll') {
         final Story story = Story.fromJson(json);
         return story;
       } else if (json['type'] == 'comment') {

lib/screens/home_screen.dart

@@ -2,6 +2,7 @@
 
 import 'dart:async';
 import 'dart:convert';
+import 'dart:io';
 
 import 'package:badges/badges.dart';
 import 'package:feature_discovery/feature_discovery.dart';
@@ -10,6 +11,7 @@ import 'package:flutter/scheduler.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
+import 'package:flutter_siri_suggestions/flutter_siri_suggestions.dart';
 import 'package:flutter_slidable/flutter_slidable.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/constants.dart';
@@ -22,6 +24,7 @@ import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/screens/screens.dart';
 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:receive_sharing_intent/receive_sharing_intent.dart';
 import 'package:responsive_builder/responsive_builder.dart';
@@ -52,6 +55,7 @@ class _HomeScreenState extends State<HomeScreen>
   late final TabController tabController;
   late final StreamSubscription<String> intentDataStreamSubscription;
   late final StreamSubscription<String?> notificationStreamSubscription;
+  late final StreamSubscription<String?> siriSuggestionStreamSubscription;
 
   int currentIndex = 0;
 
@@ -59,11 +63,14 @@ class _HomeScreenState extends State<HomeScreen>
 
   @override
   void didPopNext() {
+    super.didPopNext();
     if (context.read<StoriesBloc>().deviceScreenType ==
         DeviceScreenType.mobile) {
-      cacheService.resetCollapsedComments();
+      Future<void>.delayed(
+        const Duration(milliseconds: 500),
+        cacheService.resetCollapsedComments,
+      );
     }
-    super.didPopNext();
   }
 
   @override
@@ -88,6 +95,11 @@ class _HomeScreenState extends State<HomeScreen>
           selectNotificationSubject.stream.listen(onNotificationTapped);
     }
 
+    if (!siriSuggestionSubject.hasListener) {
+      siriSuggestionStreamSubscription =
+          siriSuggestionSubject.stream.listen(onSiriSuggestionTapped);
+    }
+
     SchedulerBinding.instance
       ..addPostFrameCallback((_) {
         FeatureDiscovery.discoverFeatures(
@@ -132,6 +144,7 @@ class _HomeScreenState extends State<HomeScreen>
     tabController.dispose();
     intentDataStreamSubscription.cancel();
     notificationStreamSubscription.cancel();
+    siriSuggestionStreamSubscription.cancel();
     super.dispose();
   }
 
@@ -159,8 +172,8 @@ class _HomeScreenState extends State<HomeScreen>
                               HapticFeedback.lightImpact();
                               context.read<PinCubit>().unpinStory(story);
                             },
-                            backgroundColor: Colors.red,
-                            foregroundColor: Colors.white,
+                            backgroundColor: Palette.red,
+                            foregroundColor: Palette.white,
                             icon: preferenceState.showComplexStoryTile
                                 ? Icons.close
                                 : null,
@@ -169,9 +182,9 @@ class _HomeScreenState extends State<HomeScreen>
                         ],
                       ),
                       child: Container(
-                        color: Colors.orangeAccent.withOpacity(0.2),
+                        color: Palette.orangeAccent.withOpacity(0.2),
                         child: StoryTile(
-                          key: ObjectKey(story),
+                          key: ValueKey<String>('${story.id}-PinnedStoryTile'),
                           story: story,
                           onTap: () => onStoryTapped(story, isPin: true),
                           showWebPreview: preferenceState.showComplexStoryTile,
@@ -182,9 +195,9 @@ class _HomeScreenState extends State<HomeScreen>
                   ),
                 if (state.pinnedStories.isNotEmpty)
                   const Padding(
-                    padding: EdgeInsets.symmetric(horizontal: 12),
+                    padding: EdgeInsets.symmetric(horizontal: Dimens.pt12),
                     child: Divider(
-                      color: Colors.orangeAccent,
+                      color: Palette.orangeAccent,
                     ),
                   ),
               ],
@@ -197,86 +210,53 @@ class _HomeScreenState extends State<HomeScreen>
           child: Scaffold(
             resizeToAvoidBottomInset: false,
             appBar: PreferredSize(
-              preferredSize: const Size(0, 40),
+              preferredSize: const Size(
+                Dimens.zero,
+                Dimens.pt40,
+              ),
               child: Column(
                 children: <Widget>[
                   SizedBox(
-                    height: MediaQuery.of(context).padding.top - 8,
+                    height: MediaQuery.of(context).padding.top - Dimens.pt8,
                   ),
                   Theme(
                     data: ThemeData(
-                      highlightColor: Colors.transparent,
-                      splashColor: Colors.transparent,
+                      highlightColor: Palette.transparent,
+                      splashColor: Palette.transparent,
                       primaryColor: Theme.of(context).primaryColor,
                     ),
                     child: TabBar(
                       isScrollable: true,
                       controller: tabController,
-                      indicatorColor: Colors.orange,
+                      indicatorColor: Palette.orange,
                       indicator: CircleTabIndicator(
-                        color: Colors.orange,
-                        radius: 2,
+                        color: Palette.orange,
+                        radius: Dimens.pt2,
+                      ),
+                      indicatorPadding: const EdgeInsets.only(
+                        bottom: Dimens.pt8,
                       ),
-                      indicatorPadding: const EdgeInsets.only(bottom: 8),
                       onTap: (_) {
                         HapticFeedback.selectionClick();
                       },
                       tabs: <Widget>[
-                        Tab(
-                          child: Text(
-                            'TOP',
-                            style: TextStyle(
-                              fontSize: currentIndex == 0 ? 14 : 10,
-                              color: currentIndex == 0
-                                  ? Colors.orange
-                                  : Colors.grey,
+                        for (int i = 0; i < StoriesBloc.types.length; i++)
+                          Tab(
+                            key: ValueKey<StoryType>(
+                              StoriesBloc.types.elementAt(i),
+                            ),
+                            child: Text(
+                              StoriesBloc.types.elementAt(i).label,
+                              style: TextStyle(
+                                fontSize: currentIndex == i
+                                    ? TextDimens.pt14
+                                    : TextDimens.pt10,
+                                color: currentIndex == i
+                                    ? Palette.orange
+                                    : Palette.grey,
+                              ),
                             ),
                           ),
-                        ),
-                        Tab(
-                          child: Text(
-                            'NEW',
-                            style: TextStyle(
-                              fontSize: currentIndex == 1 ? 14 : 10,
-                              color: currentIndex == 1
-                                  ? Colors.orange
-                                  : Colors.grey,
-                            ),
-                          ),
-                        ),
-                        Tab(
-                          child: Text(
-                            'ASK',
-                            style: TextStyle(
-                              fontSize: currentIndex == 2 ? 14 : 10,
-                              color: currentIndex == 2
-                                  ? Colors.orange
-                                  : Colors.grey,
-                            ),
-                          ),
-                        ),
-                        Tab(
-                          child: Text(
-                            'SHOW',
-                            style: TextStyle(
-                              fontSize: currentIndex == 3 ? 14 : 10,
-                              color: currentIndex == 3
-                                  ? Colors.orange
-                                  : Colors.grey,
-                            ),
-                          ),
-                        ),
-                        Tab(
-                          child: Text(
-                            'JOBS',
-                            style: TextStyle(
-                              fontSize: currentIndex == 4 ? 14 : 10,
-                              color: currentIndex == 4
-                                  ? Colors.orange
-                                  : Colors.grey,
-                            ),
-                          ),
-                        ),
                         Tab(
                           child: DescribedFeatureOverlay(
                             onBackgroundTap: onFeatureDiscoveryDismissed,
@@ -291,8 +271,8 @@ class _HomeScreenState extends State<HomeScreen>
                             targetColor: Theme.of(context).primaryColor,
                             tapTarget: const Icon(
                               Icons.person,
-                              size: 16,
-                              color: Colors.white,
+                              size: TextDimens.pt16,
+                              color: Palette.white,
                             ),
                             featureId: Constants.featureLogIn,
                             title: const Text('Log in for more'),
@@ -302,7 +282,7 @@ class _HomeScreenState extends State<HomeScreen>
                               'posted in the past, and get in-app '
                               'notification when there is new reply to '
                               'your comments or stories.',
-                              style: TextStyle(fontSize: 16),
+                              style: TextStyle(fontSize: TextDimens.pt16),
                             ),
                             child: BlocBuilder<NotificationCubit,
                                 NotificationState>(
@@ -320,19 +300,21 @@ class _HomeScreenState extends State<HomeScreen>
                                   showBadge: state.unreadCommentsIds.isNotEmpty,
                                   borderRadius: BorderRadius.circular(100),
                                   badgeContent: Container(
-                                    height: 3,
-                                    width: 3,
+                                    height: Dimens.pt3,
+                                    width: Dimens.pt3,
                                     decoration: const BoxDecoration(
                                       shape: BoxShape.circle,
-                                      color: Colors.white,
+                                      color: Palette.white,
                                     ),
                                   ),
                                   child: Icon(
                                     Icons.person,
-                                    size: currentIndex == 5 ? 16 : 12,
+                                    size: currentIndex == 5
+                                        ? TextDimens.pt16
+                                        : TextDimens.pt12,
                                     color: currentIndex == 5
-                                        ? Colors.orange
-                                        : Colors.grey,
+                                        ? Palette.orange
+                                        : Palette.grey,
                                   ),
                                 );
                               },
@@ -349,36 +331,13 @@ class _HomeScreenState extends State<HomeScreen>
               physics: const NeverScrollableScrollPhysics(),
               controller: tabController,
               children: <Widget>[
-                StoriesListView(
-                  key: const ValueKey<StoryType>(StoryType.top),
-                  storyType: StoryType.top,
-                  header: pinnedStories,
-                  onStoryTapped: onStoryTapped,
-                ),
-                StoriesListView(
-                  key: const ValueKey<StoryType>(StoryType.latest),
-                  storyType: StoryType.latest,
-                  header: pinnedStories,
-                  onStoryTapped: onStoryTapped,
-                ),
-                StoriesListView(
-                  key: const ValueKey<StoryType>(StoryType.ask),
-                  storyType: StoryType.ask,
-                  header: pinnedStories,
-                  onStoryTapped: onStoryTapped,
-                ),
-                StoriesListView(
-                  key: const ValueKey<StoryType>(StoryType.show),
-                  storyType: StoryType.show,
-                  header: pinnedStories,
-                  onStoryTapped: onStoryTapped,
-                ),
-                StoriesListView(
-                  key: const ValueKey<StoryType>(StoryType.jobs),
-                  storyType: StoryType.jobs,
-                  header: pinnedStories,
-                  onStoryTapped: onStoryTapped,
-                ),
+                for (final StoryType type in StoriesBloc.types)
+                  StoriesListView(
+                    key: ValueKey<StoryType>(type),
+                    storyType: type,
+                    header: pinnedStories,
+                    onStoryTapped: onStoryTapped,
+                  ),
                 const ProfileScreen(),
               ],
             ),
@@ -390,11 +349,11 @@ class _HomeScreenState extends State<HomeScreen>
     return ScreenTypeLayout.builder(
       mobile: (BuildContext context) {
         context.read<SplitViewCubit>().disableSplitView();
-        return _MobileHomeScreenBuilder(
+        return _MobileHomeScreen(
           homeScreen: homeScreen,
         );
       },
-      tablet: (BuildContext context) => _TabletHomeScreenBuilder(
+      tablet: (BuildContext context) => _TabletHomeScreen(
         homeScreen: homeScreen,
       ),
     );
@@ -426,16 +385,16 @@ class _HomeScreenState extends State<HomeScreen>
     if (isJobWithLink) {
       context.read<ReminderCubit>().removeLastReadStoryId();
     } else {
-      final StoryScreenArgs args = StoryScreenArgs(story: story);
+      final ItemScreenArgs args = ItemScreenArgs(item: story);
 
       context.read<ReminderCubit>().updateLastReadStoryId(story.id);
 
       if (splitViewEnabled) {
-        context.read<SplitViewCubit>().updateStoryScreenArgs(args);
+        context.read<SplitViewCubit>().updateItemScreenArgs(args);
       } else {
         HackiApp.navigatorKey.currentState
             ?.pushNamed(
-          StoryScreen.routeName,
+          ItemScreen.routeName,
           arguments: args,
         )
             .whenComplete(() {
@@ -444,8 +403,12 @@ class _HomeScreenState extends State<HomeScreen>
       }
     }
 
-    if (!offlineReading && (isJobWithLink || (showWebFirst && !hasRead))) {
-      LinkUtil.launch(story.url, useReader: useReader);
+    if (story.url.isNotEmpty && (isJobWithLink || (showWebFirst && !hasRead))) {
+      LinkUtil.launch(
+        story.url,
+        useReader: useReader,
+        offlineReading: offlineReading,
+      );
     }
 
     context.read<StoriesBloc>().add(
@@ -453,6 +416,18 @@ class _HomeScreenState extends State<HomeScreen>
             story: story,
           ),
         );
+
+    if (Platform.isIOS) {
+      FlutterSiriSuggestions.instance.registerActivity(
+        FlutterSiriActivity(
+          story.title,
+          story.id.toString(),
+          suggestedInvocationPhrase: '',
+          contentDescription: story.text,
+          persistentIdentifier: story.id.toString(),
+        ),
+      );
+    }
   }
 
   void showOnboarding() {
@@ -471,19 +446,34 @@ class _HomeScreenState extends State<HomeScreen>
     final int? id = event.getItemId();
 
     if (id != null) {
-      locator
-          .get<StoriesRepository>()
-          .fetchParentStory(id: id)
-          .then((Story? story) {
+      locator.get<StoriesRepository>().fetchItemBy(id: id).then((Item? item) {
         if (mounted) {
-          if (story != null) {
-            goToStoryScreen(args: StoryScreenArgs(story: story));
+          if (item != null) {
+            goToItemScreen(args: ItemScreenArgs(item: item));
           }
         }
       });
     }
   }
 
+  Future<void> onSiriSuggestionTapped(String? id) async {
+    if (id == null) return;
+    final int? storyId = int.tryParse(id);
+    if (storyId == null) return;
+
+    await locator
+        .get<StoriesRepository>()
+        .fetchStoryBy(storyId)
+        .then((Story? story) {
+      if (story == null) {
+        showSnackBar(content: 'Something went wrong...');
+        return;
+      }
+      final ItemScreenArgs args = ItemScreenArgs(item: story);
+      goToItemScreen(args: args);
+    });
+  }
+
   Future<void> onNotificationTapped(String? payload) async {
     if (payload == null) return;
 
@@ -504,15 +494,15 @@ class _HomeScreenState extends State<HomeScreen>
           showSnackBar(content: 'Something went wrong...');
           return;
         }
-        final StoryScreenArgs args = StoryScreenArgs(story: story);
-        goToStoryScreen(args: args);
+        final ItemScreenArgs args = ItemScreenArgs(item: story);
+        goToItemScreen(args: args);
       });
     }
   }
 }
 
-class _MobileHomeScreenBuilder extends StatelessWidget {
-  const _MobileHomeScreenBuilder({
+class _MobileHomeScreen extends StatelessWidget {
+  const _MobileHomeScreen({
     Key? key,
     required this.homeScreen,
   }) : super(key: key);
@@ -526,10 +516,10 @@ class _MobileHomeScreenBuilder extends StatelessWidget {
         Positioned.fill(child: homeScreen),
         if (!context.read<ReminderCubit>().state.hasShown)
           const Positioned(
-            left: 24,
-            right: 24,
-            bottom: 36,
-            height: 40,
+            left: Dimens.pt24,
+            right: Dimens.pt24,
+            bottom: Dimens.pt36,
+            height: Dimens.pt40,
             child: CountdownReminder(),
           ),
       ],
@@ -537,8 +527,8 @@ class _MobileHomeScreenBuilder extends StatelessWidget {
   }
 }
 
-class _TabletHomeScreenBuilder extends StatelessWidget {
-  const _TabletHomeScreenBuilder({
+class _TabletHomeScreen extends StatelessWidget {
+  const _TabletHomeScreen({
     Key? key,
     required this.homeScreen,
   }) : super(key: key);
@@ -553,33 +543,43 @@ class _TabletHomeScreenBuilder extends StatelessWidget {
         double homeScreenWidth = 428;
 
         if (sizeInfo.screenSize.width < homeScreenWidth * 2) {
-          homeScreenWidth = 345.0;
+          homeScreenWidth = 345;
         }
 
-        return Stack(
-          children: <Widget>[
-            Positioned(
-              left: 0,
-              top: 0,
-              bottom: 0,
-              width: homeScreenWidth,
-              child: homeScreen,
-            ),
-            Positioned(
-              left: 24,
-              bottom: 36,
-              height: 40,
-              width: homeScreenWidth - 24,
-              child: const CountdownReminder(),
-            ),
-            Positioned(
-              right: 0,
-              top: 0,
-              bottom: 0,
-              left: homeScreenWidth,
-              child: const _TabletStoryView(),
-            ),
-          ],
+        return BlocBuilder<SplitViewCubit, SplitViewState>(
+          buildWhen: (SplitViewState previous, SplitViewState current) =>
+              previous.expanded != current.expanded,
+          builder: (BuildContext context, SplitViewState state) {
+            return Stack(
+              children: <Widget>[
+                AnimatedPositioned(
+                  left: Dimens.zero,
+                  top: Dimens.zero,
+                  bottom: Dimens.zero,
+                  width: state.expanded ? Dimens.zero : homeScreenWidth,
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.elasticOut,
+                  child: homeScreen,
+                ),
+                Positioned(
+                  left: Dimens.pt24,
+                  bottom: Dimens.pt36,
+                  height: Dimens.pt40,
+                  width: homeScreenWidth - Dimens.pt24,
+                  child: const CountdownReminder(),
+                ),
+                AnimatedPositioned(
+                  right: Dimens.zero,
+                  top: Dimens.zero,
+                  bottom: Dimens.zero,
+                  left: state.expanded ? Dimens.zero : homeScreenWidth,
+                  duration: const Duration(milliseconds: 300),
+                  curve: Curves.elasticOut,
+                  child: const _TabletStoryView(),
+                ),
+              ],
+            );
+          },
         );
       },
     );
@@ -593,10 +593,10 @@ class _TabletStoryView extends StatelessWidget {
   Widget build(BuildContext context) {
     return BlocBuilder<SplitViewCubit, SplitViewState>(
       buildWhen: (SplitViewState previous, SplitViewState current) =>
-          previous.storyScreenArgs != current.storyScreenArgs,
+          previous.itemScreenArgs != current.itemScreenArgs,
       builder: (BuildContext context, SplitViewState state) {
-        if (state.storyScreenArgs != null) {
-          return StoryScreen.build(state.storyScreenArgs!);
+        if (state.itemScreenArgs != null) {
+          return ItemScreen.build(context, state.itemScreenArgs!);
         }
 
         return Material(

lib/screens/item/widgets/custom_app_bar.dart

@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_feather_icons/flutter_feather_icons.dart';
+import 'package:hacki/models/models.dart';
+import 'package:hacki/screens/item/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
+
+class CustomAppBar extends AppBar {
+  CustomAppBar({
+    Key? key,
+    required ScrollController scrollController,
+    required Item item,
+    required Color backgroundColor,
+    required Future<bool> Function() onBackgroundTap,
+    required Future<bool> Function() onDismiss,
+    bool splitViewEnabled = false,
+    VoidCallback? onZoomTap,
+    bool? expanded,
+  }) : super(
+          key: key,
+          backgroundColor: backgroundColor,
+          elevation: Dimens.zero,
+          actions: <Widget>[
+            if (splitViewEnabled) ...<Widget>[
+              IconButton(
+                icon: Icon(
+                  expanded ?? false
+                      ? FeatherIcons.minimize2
+                      : FeatherIcons.maximize2,
+                  size: TextDimens.pt20,
+                ),
+                onPressed: () {
+                  HapticFeedback.lightImpact();
+                  onZoomTap?.call();
+                },
+              ),
+              const Spacer(),
+            ],
+            ScrollUpIconButton(
+              scrollController: scrollController,
+            ),
+            if (item is Story)
+              PinIconButton(
+                story: item,
+                onBackgroundTap: onBackgroundTap,
+                onDismiss: onDismiss,
+              ),
+            FavIconButton(
+              storyId: item.id,
+              onBackgroundTap: onBackgroundTap,
+              onDismiss: onDismiss,
+            ),
+            LinkIconButton(
+              storyId: item.id,
+              onBackgroundTap: onBackgroundTap,
+              onDismiss: onDismiss,
+            ),
+          ],
+        );
+}

lib/screens/item/widgets/fav_icon_button.dart

@@ -6,6 +6,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hacki/config/constants.dart';
 import 'package:hacki/cubits/cubits.dart';
+import 'package:hacki/styles/styles.dart';
 
 class FavIconButton extends StatelessWidget {
   const FavIconButton({
@@ -25,6 +26,7 @@ class FavIconButton extends StatelessWidget {
       builder: (BuildContext context, FavState favState) {
         final bool isFav = favState.favIds.contains(storyId);
         return IconButton(
+          tooltip: 'Add to favorites',
           icon: DescribedFeatureOverlay(
             onBackgroundTap: onBackgroundTap,
             onDismiss: onDismiss,
@@ -36,17 +38,17 @@ class FavIconButton extends StatelessWidget {
             targetColor: Theme.of(context).primaryColor,
             tapTarget: Icon(
               isFav ? Icons.favorite : Icons.favorite_border,
-              color: Colors.white,
+              color: Palette.white,
             ),
             featureId: Constants.featureAddStoryToFavList,
             title: const Text('Fav a Story'),
             description: const Text(
               'Add it to your favorites.',
-              style: TextStyle(fontSize: 16),
+              style: TextStyle(fontSize: TextDimens.pt16),
             ),
             child: Icon(
               isFav ? Icons.favorite : Icons.favorite_border,
-              color: isFav ? Colors.orange : Theme.of(context).iconTheme.color,
+              color: isFav ? Palette.orange : Theme.of(context).iconTheme.color,
             ),
           ),
           onPressed: () {

lib/screens/item/widgets/link_icon_button.dart

@@ -4,6 +4,7 @@ import 'package:feature_discovery/feature_discovery.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hacki/config/constants.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
 
 class LinkIconButton extends StatelessWidget {
@@ -21,6 +22,7 @@ class LinkIconButton extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return IconButton(
+      tooltip: 'Open this story in browser',
       icon: DescribedFeatureOverlay(
         onBackgroundTap: onBackgroundTap,
         onDismiss: onDismiss,
@@ -32,7 +34,7 @@ class LinkIconButton extends StatelessWidget {
         targetColor: Theme.of(context).primaryColor,
         tapTarget: const Icon(
           Icons.stream,
-          color: Colors.white,
+          color: Palette.white,
         ),
         featureId: Constants.featureOpenStoryInWebView,
         title: const Text('Open in Browser'),
@@ -40,7 +42,7 @@ class LinkIconButton extends StatelessWidget {
           'Want more than just reading and replying? '
           'You can tap here to open this story in a '
           'browser.',
-          style: TextStyle(fontSize: 16),
+          style: TextStyle(fontSize: TextDimens.pt16),
         ),
         child: const Icon(
           Icons.stream,

lib/screens/item/widgets/pin_icon_button.dart

@@ -8,6 +8,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hacki/config/constants.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/models/models.dart';
+import 'package:hacki/styles/styles.dart';
 
 class PinIconButton extends StatelessWidget {
   const PinIconButton({
@@ -31,6 +32,7 @@ class PinIconButton extends StatelessWidget {
           child: Transform.translate(
             offset: const Offset(2, 0),
             child: IconButton(
+              tooltip: 'Pin to home screen',
               icon: DescribedFeatureOverlay(
                 onBackgroundTap: onBackgroundTap,
                 onDismiss: onDismiss,
@@ -42,7 +44,7 @@ class PinIconButton extends StatelessWidget {
                 targetColor: Theme.of(context).primaryColor,
                 tapTarget: Icon(
                   pinned ? Icons.push_pin : Icons.push_pin_outlined,
-                  color: Colors.white,
+                  color: Palette.white,
                 ),
                 featureId: Constants.featurePinToTop,
                 title: const Text('Pin a Story'),
@@ -50,12 +52,12 @@ class PinIconButton extends StatelessWidget {
                   'Pin this story to the top of your '
                   'home screen so that you can come'
                   ' back later.',
-                  style: TextStyle(fontSize: 16),
+                  style: TextStyle(fontSize: TextDimens.pt16),
                 ),
                 child: Icon(
                   pinned ? Icons.push_pin : Icons.push_pin_outlined,
                   color: pinned
-                      ? Colors.orange
+                      ? Palette.orange
                       : Theme.of(context).iconTheme.color,
                 ),
               ),

lib/screens/item/widgets/poll_view.dart

@@ -5,6 +5,7 @@ import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:hacki/blocs/auth/auth_bloc.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/models/models.dart';
+import 'package:hacki/styles/styles.dart';
 
 class PollView extends StatelessWidget {
   const PollView({
@@ -21,29 +22,29 @@ class PollView extends StatelessWidget {
         return Column(
           children: <Widget>[
             const SizedBox(
-              height: 24,
+              height: Dimens.pt24,
             ),
             if (state.status == PollStatus.loading) ...<Widget>[
               const LinearProgressIndicator(),
               const SizedBox(
-                height: 24,
+                height: Dimens.pt24,
               ),
             ] else ...<Widget>[
               Row(
                 children: <Widget>[
                   const SizedBox(
-                    width: 24,
+                    width: Dimens.pt24,
                   ),
                   Text(
                     'Total votes: ${state.totalVotes}',
                     style: const TextStyle(
-                      fontSize: 14,
+                      fontSize: TextDimens.pt14,
                     ),
                   ),
                 ],
               ),
               const SizedBox(
-                height: 12,
+                height: Dimens.pt12,
               ),
             ],
             for (final PollOption option in state.pollOptions)
@@ -97,9 +98,9 @@ class PollView extends StatelessWidget {
                     builder: (BuildContext context, VoteState voteState) {
                       return Padding(
                         padding: const EdgeInsets.only(
-                          left: 12,
-                          right: 24,
-                          bottom: 4,
+                          left: Dimens.pt12,
+                          right: Dimens.pt24,
+                          bottom: Dimens.pt4,
                         ),
                         child: Row(
                           children: <Widget>[
@@ -111,9 +112,9 @@ class PollView extends StatelessWidget {
                               icon: Icon(
                                 Icons.arrow_drop_up,
                                 color: voteState.vote == Vote.up
-                                    ? Colors.orange
-                                    : Colors.grey,
-                                size: 36,
+                                    ? Palette.orange
+                                    : Palette.grey,
+                                size: TextDimens.pt36,
                               ),
                             ),
                             Expanded(
@@ -126,16 +127,16 @@ class PollView extends StatelessWidget {
                                   Text(
                                     '''${option.score} vote${option.score > 1 ? 's' : ''}''',
                                     style: const TextStyle(
-                                      color: Colors.grey,
-                                      fontSize: 12,
+                                      color: Palette.grey,
+                                      fontSize: TextDimens.pt12,
                                     ),
                                   ),
                                   const SizedBox(
-                                    height: 4,
+                                    height: Dimens.pt4,
                                   ),
                                   LinearProgressIndicator(
                                     value: option.ratio,
-                                    color: Colors.deepOrange,
+                                    color: Palette.deepOrange,
                                   ),
                                 ],
                               ),
@@ -161,7 +162,7 @@ class PollView extends StatelessWidget {
   }) {
     ScaffoldMessenger.of(context).showSnackBar(
       SnackBar(
-        backgroundColor: Colors.deepOrange,
+        backgroundColor: Palette.deepOrange,
         content: Text(content),
         action: action != null && label != null
             ? SnackBarAction(

lib/screens/item/widgets/reply_box.dart

@@ -6,6 +6,7 @@ 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/models/item.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/link_util.dart';
 
 class ReplyBox extends StatefulWidget {
@@ -34,6 +35,8 @@ class _ReplyBoxState extends State<ReplyBox> {
   bool expanded = false;
   double? expandedHeight;
 
+  static const double _collapsedHeight = 100;
+
   @override
   Widget build(BuildContext context) {
     expandedHeight ??= MediaQuery.of(context).size.height;
@@ -53,20 +56,21 @@ class _ReplyBoxState extends State<ReplyBox> {
               return Padding(
                 padding: EdgeInsets.only(
                   bottom: expanded
-                      ? 0
+                      ? Dimens.zero
                       : widget.splitViewEnabled
                           ? MediaQuery.of(context).viewInsets.bottom
-                          : 0,
+                          : Dimens.zero,
                 ),
                 child: AnimatedContainer(
-                  height: expanded ? expandedHeight : 100,
+                  height: expanded ? expandedHeight : _collapsedHeight,
                   duration: const Duration(milliseconds: 200),
                   decoration: BoxDecoration(
                     boxShadow: <BoxShadow>[
                       if (!context.read<SplitViewCubit>().state.enabled)
                         BoxShadow(
-                          color: expanded ? Colors.transparent : Colors.black26,
-                          blurRadius: 40,
+                          color:
+                              expanded ? Palette.transparent : Palette.black26,
+                          blurRadius: Dimens.pt40,
                         ),
                     ],
                   ),
@@ -75,28 +79,32 @@ class _ReplyBoxState extends State<ReplyBox> {
                       children: <Widget>[
                         if (context.read<SplitViewCubit>().state.enabled)
                           const Divider(
-                            height: 0,
+                            height: Dimens.zero,
                           ),
                         AnimatedContainer(
-                          height: expanded ? 36 : 0,
+                          height: expanded ? Dimens.pt36 : Dimens.zero,
                           duration: const Duration(milliseconds: 200),
                         ),
                         Row(
                           children: <Widget>[
-                            Padding(
-                              padding: const EdgeInsets.symmetric(
-                                horizontal: 12,
-                                vertical: 8,
-                              ),
-                              child: Text(
-                                replyingTo == null
-                                    ? 'Editing'
-                                    : 'Replying '
-                                        '${replyingTo.by}',
-                                style: const TextStyle(color: Colors.grey),
+                            Expanded(
+                              child: Padding(
+                                padding: const EdgeInsets.only(
+                                  left: Dimens.pt12,
+                                  top: Dimens.pt8,
+                                  bottom: Dimens.pt8,
+                                ),
+                                child: Text(
+                                  replyingTo == null
+                                      ? 'Editing'
+                                      : 'Replying '
+                                          '${replyingTo.by}',
+                                  style: const TextStyle(color: Palette.grey),
+                                  maxLines: 1,
+                                  overflow: TextOverflow.ellipsis,
+                                ),
                               ),
                             ),
-                            const Spacer(),
                             if (!isLoading) ...<Widget>[
                               ...<Widget>[
                                 if (replyingTo != null)
@@ -107,8 +115,8 @@ class _ReplyBoxState extends State<ReplyBox> {
                                       key: const Key('quote'),
                                       icon: const Icon(
                                         FeatherIcons.code,
-                                        color: Colors.orange,
-                                        size: 18,
+                                        color: Palette.orange,
+                                        size: TextDimens.pt18,
                                       ),
                                       onPressed:
                                           expanded ? showTextPopup : null,
@@ -120,8 +128,8 @@ class _ReplyBoxState extends State<ReplyBox> {
                                     expanded
                                         ? FeatherIcons.minimize2
                                         : FeatherIcons.maximize2,
-                                    color: Colors.orange,
-                                    size: 18,
+                                    color: Palette.orange,
+                                    size: TextDimens.pt18,
                                   ),
                                   onPressed: () {
                                     setState(() {
@@ -134,7 +142,7 @@ class _ReplyBoxState extends State<ReplyBox> {
                                 key: const Key('close'),
                                 icon: const Icon(
                                   Icons.close,
-                                  color: Colors.orange,
+                                  color: Palette.orange,
                                 ),
                                 onPressed: () {
                                   widget.onCloseTapped();
@@ -145,15 +153,15 @@ class _ReplyBoxState extends State<ReplyBox> {
                             if (isLoading)
                               const Padding(
                                 padding: EdgeInsets.symmetric(
-                                  vertical: 12,
-                                  horizontal: 16,
+                                  vertical: Dimens.pt12,
+                                  horizontal: Dimens.pt16,
                                 ),
                                 child: SizedBox(
-                                  height: 24,
-                                  width: 24,
+                                  height: Dimens.pt24,
+                                  width: Dimens.pt24,
                                   child: CircularProgressIndicator(
-                                    color: Colors.orange,
-                                    strokeWidth: 2,
+                                    color: Palette.orange,
+                                    strokeWidth: Dimens.pt2,
                                   ),
                                 ),
                               )
@@ -162,7 +170,7 @@ class _ReplyBoxState extends State<ReplyBox> {
                                 key: const Key('send'),
                                 icon: const Icon(
                                   Icons.send,
-                                  color: Colors.orange,
+                                  color: Palette.orange,
                                 ),
                                 onPressed: () {
                                   widget.onSendTapped();
@@ -173,7 +181,9 @@ class _ReplyBoxState extends State<ReplyBox> {
                         ),
                         Expanded(
                           child: Padding(
-                            padding: const EdgeInsets.symmetric(horizontal: 16),
+                            padding: const EdgeInsets.symmetric(
+                              horizontal: Dimens.pt16,
+                            ),
                             child: TextField(
                               focusNode: widget.focusNode,
                               controller: widget.textEditingController,
@@ -183,12 +193,13 @@ class _ReplyBoxState extends State<ReplyBox> {
                                 contentPadding: EdgeInsets.zero,
                                 hintText: '...',
                                 hintStyle: TextStyle(
-                                  color: Colors.grey,
+                                  color: Palette.grey,
                                 ),
                                 focusedBorder: InputBorder.none,
                                 border: InputBorder.none,
                               ),
                               keyboardType: TextInputType.multiline,
+                              textCapitalization: TextCapitalization.sentences,
                               textInputAction: TextInputAction.newline,
                               onChanged: widget.onChanged,
                             ),
@@ -215,8 +226,8 @@ class _ReplyBoxState extends State<ReplyBox> {
       builder: (_) {
         return AlertDialog(
           insetPadding: const EdgeInsets.symmetric(
-            horizontal: 12,
-            vertical: 24,
+            horizontal: Dimens.pt12,
+            vertical: Dimens.pt24,
           ),
           contentPadding: EdgeInsets.zero,
           content: ConstrainedBox(
@@ -228,14 +239,14 @@ class _ReplyBoxState extends State<ReplyBox> {
               children: <Widget>[
                 Padding(
                   padding: const EdgeInsets.only(
-                    left: 12,
-                    top: 6,
+                    left: Dimens.pt12,
+                    top: Dimens.pt6,
                   ),
                   child: Row(
                     children: <Widget>[
                       Text(
                         replyingTo?.by ?? '',
-                        style: const TextStyle(color: Colors.grey),
+                        style: const TextStyle(color: Palette.grey),
                       ),
                       const Spacer(),
                       TextButton(
@@ -247,8 +258,8 @@ class _ReplyBoxState extends State<ReplyBox> {
                       IconButton(
                         icon: const Icon(
                           Icons.close,
-                          color: Colors.orange,
-                          size: 18,
+                          color: Palette.orange,
+                          size: TextDimens.pt18,
                         ),
                         onPressed: () => Navigator.pop(context),
                       ),
@@ -260,17 +271,17 @@ class _ReplyBoxState extends State<ReplyBox> {
                     thumbVisibility: true,
                     child: Padding(
                       padding: const EdgeInsets.only(
-                        left: 12,
-                        right: 6,
-                        top: 6,
+                        left: Dimens.pt12,
+                        right: Dimens.pt6,
+                        top: Dimens.pt6,
                       ),
                       child: SingleChildScrollView(
                         child: SelectableLinkify(
                           scrollPhysics: const NeverScrollableScrollPhysics(),
                           linkStyle: TextStyle(
-                            fontSize:
-                                MediaQuery.of(context).textScaleFactor * 15,
-                            color: Colors.orange,
+                            fontSize: MediaQuery.of(context).textScaleFactor *
+                                TextDimens.pt15,
+                            color: Palette.orange,
                           ),
                           onOpen: (LinkableElement link) =>
                               LinkUtil.launch(link.url),

lib/screens/item/widgets/scroll_up_icon_button.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_feather_icons/flutter_feather_icons.dart';
+import 'package:hacki/styles/styles.dart';
 
 class ScrollUpIconButton extends StatefulWidget {
   const ScrollUpIconButton({
@@ -35,8 +36,8 @@ class _ScrollUpIconButtonState extends State<ScrollUpIconButton> {
         child: IconButton(
           icon: const Icon(
             FeatherIcons.chevronsUp,
-            color: Colors.orange,
-            size: 26,
+            color: Palette.orange,
+            size: TextDimens.pt26,
           ),
           onPressed: () {
             final double curPos = widget.scrollController.offset;

lib/screens/profile/profile_screen.dart

@@ -5,6 +5,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_cache_manager/flutter_cache_manager.dart';
+import 'package:flutter_feather_icons/flutter_feather_icons.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/constants.dart';
@@ -17,6 +18,7 @@ import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/screens/profile/widgets/widgets.dart';
 import 'package:hacki/screens/screens.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 import 'package:tuple/tuple.dart';
@@ -90,7 +92,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                 return Stack(
                   children: <Widget>[
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.history,
                         child: BlocConsumer<HistoryCubit, HistoryState>(
@@ -134,8 +136,8 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                               onTap: (Item item) {
                                 if (item is Story) {
-                                  goToStoryScreen(
-                                    args: StoryScreenArgs(story: item),
+                                  goToItemScreen(
+                                    args: ItemScreenArgs(item: item),
                                   );
                                 } else if (item is Comment) {
                                   onCommentTapped(item);
@@ -147,7 +149,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                       ),
                     ),
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.fav,
                         child: BlocConsumer<FavCubit, FavState>(
@@ -159,7 +161,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                             }
                           },
                           builder: (BuildContext context, FavState favState) {
-                            if (favState.favStories.isEmpty &&
+                            if (favState.favItems.isEmpty &&
                                 favState.status != FavStatus.loading) {
                               return const CenteredMessageView(
                                 content:
@@ -168,12 +170,13 @@ class _ProfileScreenState extends State<ProfileScreen>
                                     'News account if you are logged in.',
                               );
                             }
-                            return ItemsListView<Story>(
+                            return ItemsListView<Item>(
                               showWebPreview:
                                   preferenceState.showComplexStoryTile,
                               showMetadata: preferenceState.showMetadata,
+                              useCommentTile: true,
                               refreshController: refreshControllerFav,
-                              items: favState.favStories,
+                              items: favState.favItems,
                               onRefresh: () {
                                 HapticFeedback.lightImpact();
                                 context.read<FavCubit>().refresh();
@@ -181,8 +184,8 @@ class _ProfileScreenState extends State<ProfileScreen>
                               onLoadMore: () {
                                 context.read<FavCubit>().loadMore();
                               },
-                              onTap: (Story story) => goToStoryScreen(
-                                args: StoryScreenArgs(story: story),
+                              onTap: (Item item) => goToItemScreen(
+                                args: ItemScreenArgs(item: item),
                               ),
                             );
                           },
@@ -190,7 +193,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                       ),
                     ),
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.search,
                         maintainState: true,
@@ -198,7 +201,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                       ),
                     ),
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.notification,
                         child: notificationState.comments.isEmpty
@@ -239,7 +242,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                       ),
                     ),
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.settings,
                         child: SingleChildScrollView(
@@ -278,7 +281,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleNotificationMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Complex Story Tile'),
@@ -292,7 +295,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleDisplayMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Show Metadata'),
@@ -307,7 +310,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleMetadataMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Show Web Page First'),
@@ -322,7 +325,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleNavigationMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               if (Platform.isIOS)
                                 SwitchListTile(
@@ -338,7 +341,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                         .read<PreferenceCubit>()
                                         .toggleReaderMode();
                                   },
-                                  activeColor: Colors.orange,
+                                  activeColor: Palette.orange,
                                 ),
                               SwitchListTile(
                                 title: const Text('Mark Read Stories'),
@@ -359,7 +362,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleMarkReadStoriesMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Eye Candy'),
@@ -371,7 +374,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleEyeCandyMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('True Dark Mode'),
@@ -385,7 +388,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleTrueDarkMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               ListTile(
                                 title: const Text(
@@ -407,15 +410,17 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   showAboutDialog(
                                     context: context,
                                     applicationName: 'Hacki',
-                                    applicationVersion: 'v0.2.13',
+                                    applicationVersion: 'v0.2.23',
                                     applicationIcon: ClipRRect(
                                       borderRadius: const BorderRadius.all(
-                                        Radius.circular(12),
+                                        Radius.circular(
+                                          Dimens.pt12,
+                                        ),
                                       ),
                                       child: Image.asset(
                                         Constants.hackiIconPath,
-                                        height: 50,
-                                        width: 50,
+                                        height: Dimens.pt50,
+                                        width: Dimens.pt50,
                                       ),
                                     ),
                                     children: <Widget>[
@@ -429,7 +434,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               FontAwesomeIcons.addressCard,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
                                             Text('Developer'),
                                           ],
@@ -445,9 +450,9 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               FontAwesomeIcons.github,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
-                                            Text('Source Code'),
+                                            Text('Source code'),
                                           ],
                                         ),
                                       ),
@@ -463,9 +468,25 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               Icons.thumb_up,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
-                                            Text('Like the App?'),
+                                            Text('Like the app?'),
+                                          ],
+                                        ),
+                                      ),
+                                      ElevatedButton(
+                                        onPressed: () => LinkUtil.launch(
+                                          Constants.sponsorLink,
+                                        ),
+                                        child: Row(
+                                          children: const <Widget>[
+                                            Icon(
+                                              FeatherIcons.coffee,
+                                            ),
+                                            SizedBox(
+                                              width: Dimens.pt12,
+                                            ),
+                                            Text('Buy me a coffee'),
                                           ],
                                         ),
                                       ),
@@ -474,7 +495,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                 },
                               ),
                               const SizedBox(
-                                height: 48,
+                                height: Dimens.pt48,
                               ),
                             ],
                           ),
@@ -489,7 +510,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                         child: Row(
                           children: <Widget>[
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Submit',
@@ -508,7 +529,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Inbox : '
@@ -524,7 +545,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Favorite',
@@ -538,7 +559,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Submitted',
@@ -552,7 +573,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Search',
@@ -566,7 +587,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Settings',
@@ -580,7 +601,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                           ],
                         ),
@@ -648,18 +669,18 @@ class _ProfileScreenState extends State<ProfileScreen>
               child: const Text(
                 'Cancel',
                 style: TextStyle(
-                  color: Colors.red,
+                  color: Palette.orange,
                 ),
               ),
             ),
-            ElevatedButton(
+            TextButton(
               onPressed: () {
                 Navigator.pop(context);
                 locator
                     .get<SembastRepository>()
                     .deleteAllCachedComments()
                     .whenComplete(
-                      locator.get<SembastRepository>().deleteAllCachedComments,
+                      locator.get<CacheRepository>().deleteAll,
                     )
                     .whenComplete(
                       locator.get<PreferenceRepository>().clearAllReadStories,
@@ -671,15 +692,8 @@ class _ProfileScreenState extends State<ProfileScreen>
                   showSnackBar(content: 'Data cleared!');
                 });
               },
-              style: ButtonStyle(
-                backgroundColor: MaterialStateProperty.all(Colors.deepOrange),
-              ),
               child: const Text(
                 'Yes',
-                style: TextStyle(
-                  fontWeight: FontWeight.bold,
-                  color: Colors.white,
-                ),
               ),
             ),
           ],
@@ -695,9 +709,9 @@ class _ProfileScreenState extends State<ProfileScreen>
           .fetchParentStoryWithComments(id: comment.parent)
           .then((Tuple2<Story, List<Comment>>? tuple) {
         if (tuple != null && mounted) {
-          goToStoryScreen(
-            args: StoryScreenArgs(
-              story: tuple.item1,
+          goToItemScreen(
+            args: ItemScreenArgs(
+              item: tuple.item1,
               targetComments: tuple.item2.isEmpty
                   ? <Comment>[comment]
                   : <Comment>[
@@ -732,64 +746,64 @@ class _ProfileScreenState extends State<ProfileScreen>
               children: <Widget>[
                 if (state.status == AuthStatus.loading)
                   const SizedBox(
-                    height: 36,
-                    width: 36,
+                    height: Dimens.pt36,
+                    width: Dimens.pt36,
                     child: Center(
                       child: CircularProgressIndicator(
-                        color: Colors.orange,
+                        color: Palette.orange,
                       ),
                     ),
                   )
                 else if (!state.isLoggedIn) ...<Widget>[
                   Padding(
                     padding: const EdgeInsets.symmetric(
-                      horizontal: 18,
+                      horizontal: Dimens.pt18,
                     ),
                     child: TextField(
                       controller: usernameController,
-                      cursorColor: Colors.orange,
+                      cursorColor: Palette.orange,
                       autocorrect: false,
                       decoration: const InputDecoration(
                         hintText: 'Username',
                         focusedBorder: UnderlineInputBorder(
-                          borderSide: BorderSide(color: Colors.orange),
+                          borderSide: BorderSide(color: Palette.orange),
                         ),
                       ),
                     ),
                   ),
                   const SizedBox(
-                    height: 16,
+                    height: Dimens.pt16,
                   ),
                   Padding(
                     padding: const EdgeInsets.symmetric(
-                      horizontal: 18,
+                      horizontal: Dimens.pt18,
                     ),
                     child: TextField(
                       controller: passwordController,
-                      cursorColor: Colors.orange,
+                      cursorColor: Palette.orange,
                       obscureText: true,
                       autocorrect: false,
                       decoration: const InputDecoration(
                         hintText: 'Password',
                         focusedBorder: UnderlineInputBorder(
-                          borderSide: BorderSide(color: Colors.orange),
+                          borderSide: BorderSide(color: Palette.orange),
                         ),
                       ),
                     ),
                   ),
                   const SizedBox(
-                    height: 16,
+                    height: Dimens.pt16,
                   ),
                   if (state.status == AuthStatus.failure)
                     const Padding(
                       padding: EdgeInsets.only(
-                        left: 18,
+                        left: Dimens.pt18,
                       ),
                       child: Text(
                         'Something went wrong...',
                         style: TextStyle(
-                          color: Colors.grey,
-                          fontSize: 12,
+                          color: Palette.grey,
+                          fontSize: TextDimens.pt12,
                         ),
                       ),
                     ),
@@ -803,8 +817,8 @@ class _ProfileScreenState extends State<ProfileScreen>
                               ? Icons.check_box
                               : Icons.check_box_outline_blank,
                           color: state.agreedToEULA
-                              ? Colors.deepOrange
-                              : Colors.grey,
+                              ? Palette.deepOrange
+                              : Palette.grey,
                         ),
                         onPressed: () => context
                             .read<AuthBloc>()
@@ -829,7 +843,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   child: const Text(
                                     'End User Agreement',
                                     style: TextStyle(
-                                      color: Colors.deepOrange,
+                                      color: Palette.deepOrange,
                                       decoration: TextDecoration.underline,
                                       fontWeight: FontWeight.w600,
                                     ),
@@ -844,7 +858,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                   ),
                   Padding(
                     padding: const EdgeInsets.only(
-                      right: 12,
+                      right: Dimens.pt12,
                     ),
                     child: ButtonBar(
                       children: <Widget>[
@@ -855,9 +869,6 @@ class _ProfileScreenState extends State<ProfileScreen>
                           },
                           child: const Text(
                             'Cancel',
-                            style: TextStyle(
-                              color: Colors.red,
-                            ),
                           ),
                         ),
                         ElevatedButton(
@@ -878,15 +889,15 @@ class _ProfileScreenState extends State<ProfileScreen>
                           style: ButtonStyle(
                             backgroundColor: MaterialStateProperty.all(
                               state.agreedToEULA
-                                  ? Colors.deepOrange
-                                  : Colors.grey,
+                                  ? Palette.deepOrange
+                                  : Palette.grey,
                             ),
                           ),
                           child: const Text(
                             'Log in',
                             style: TextStyle(
                               fontWeight: FontWeight.bold,
-                              color: Colors.white,
+                              color: Palette.white,
                             ),
                           ),
                         ),
@@ -909,63 +920,30 @@ class _ProfileScreenState extends State<ProfileScreen>
       context: context,
       barrierDismissible: false,
       builder: (BuildContext context) {
-        return SimpleDialog(
-          children: <Widget>[
-            ...<Widget>[
-              const SizedBox(
-                height: 16,
+        return AlertDialog(
+          content: Text(
+            'Log out as ${authBloc.state.username}?',
+            style: const TextStyle(
+              fontSize: TextDimens.pt16,
+            ),
+          ),
+          actions: <Widget>[
+            TextButton(
+              onPressed: () => Navigator.pop(context),
+              child: const Text(
+                'Cancel',
               ),
-              Padding(
-                padding: const EdgeInsets.symmetric(
-                  horizontal: 18,
-                ),
-                child: Text(
-                  'Log out as ${authBloc.state.username}?',
-                  style: const TextStyle(
-                    fontSize: 16,
-                  ),
-                ),
+            ),
+            TextButton(
+              onPressed: () {
+                Navigator.pop(context);
+                context.read<AuthBloc>().add(AuthLogout());
+                context.read<HistoryCubit>().reset();
+              },
+              child: const Text(
+                'Log out',
               ),
-              const SizedBox(
-                height: 16,
-              ),
-              Padding(
-                padding: const EdgeInsets.only(
-                  right: 12,
-                ),
-                child: ButtonBar(
-                  children: <Widget>[
-                    TextButton(
-                      onPressed: () => Navigator.pop(context),
-                      child: const Text(
-                        'Cancel',
-                        style: TextStyle(
-                          color: Colors.red,
-                        ),
-                      ),
-                    ),
-                    ElevatedButton(
-                      onPressed: () {
-                        Navigator.pop(context);
-                        context.read<AuthBloc>().add(AuthLogout());
-                        context.read<HistoryCubit>().reset();
-                      },
-                      style: ButtonStyle(
-                        backgroundColor:
-                            MaterialStateProperty.all(Colors.deepOrange),
-                      ),
-                      child: const Text(
-                        'Log out',
-                        style: TextStyle(
-                          fontWeight: FontWeight.bold,
-                          color: Colors.white,
-                        ),
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-            ],
+            ),
           ],
         );
       },

lib/screens/profile/widgets/centered_message_view.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:hacki/styles/styles.dart';
 
 class CenteredMessageView extends StatelessWidget {
   const CenteredMessageView({
@@ -12,14 +13,14 @@ class CenteredMessageView extends StatelessWidget {
   Widget build(BuildContext context) {
     return Padding(
       padding: const EdgeInsets.only(
-        top: 120,
-        left: 40,
-        right: 40,
+        top: Dimens.pt120,
+        left: Dimens.pt40,
+        right: Dimens.pt40,
       ),
       child: Text(
         content,
         textAlign: TextAlign.center,
-        style: const TextStyle(color: Colors.grey),
+        style: const TextStyle(color: Palette.grey),
       ),
     );
   }

lib/screens/profile/widgets/inbox_view.dart

@@ -3,6 +3,7 @@ import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:flutter_linkify/flutter_linkify.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/link_util.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 
@@ -29,8 +30,8 @@ class InboxView extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     final Color textColor = Theme.of(context).brightness == Brightness.dark
-        ? Colors.white
-        : Colors.black;
+        ? Palette.white
+        : Palette.black;
     return Column(
       children: <Widget>[
         if (unreadCommentsIds.isNotEmpty)
@@ -42,12 +43,14 @@ class InboxView extends StatelessWidget {
           child: SmartRefresher(
             enablePullUp: true,
             header: const WaterDropMaterialHeader(
-              backgroundColor: Colors.orange,
+              backgroundColor: Palette.orange,
             ),
             footer: CustomFooter(
               loadStyle: LoadStyle.ShowWhenLoading,
               builder: (BuildContext context, LoadStatus? mode) {
-                Widget body;
+                const double height = 55;
+                late final Widget body;
+
                 if (mode == LoadStatus.loading) {
                   body = const CustomCircularProgressIndicator();
                 } else if (mode == LoadStatus.failed) {
@@ -58,7 +61,7 @@ class InboxView extends StatelessWidget {
                   body = const SizedBox.shrink();
                 }
                 return SizedBox(
-                  height: 55,
+                  height: height,
                   child: Center(child: body),
                 );
               },
@@ -72,7 +75,9 @@ class InboxView extends StatelessWidget {
                   return <Widget>[
                     FadeIn(
                       child: Padding(
-                        padding: const EdgeInsets.only(left: 6),
+                        padding: const EdgeInsets.only(
+                          left: Dimens.pt6,
+                        ),
                         child: InkWell(
                           onTap: () => onCommentTapped(e),
                           child: Padding(
@@ -87,8 +92,8 @@ class InboxView extends StatelessWidget {
                                     Expanded(
                                       child: Padding(
                                         padding: const EdgeInsets.symmetric(
-                                          vertical: 8,
-                                          horizontal: 6,
+                                          vertical: Dimens.pt8,
+                                          horizontal: Dimens.pt6,
                                         ),
                                         child: Linkify(
                                           text: '${e.by} : ${e.text}',
@@ -96,13 +101,13 @@ class InboxView extends StatelessWidget {
                                             color:
                                                 unreadCommentsIds.contains(e.id)
                                                     ? textColor
-                                                    : Colors.grey,
+                                                    : Palette.grey,
                                           ),
                                           linkStyle: TextStyle(
                                             color:
                                                 unreadCommentsIds.contains(e.id)
-                                                    ? Colors.orange
-                                                    : Colors.orange
+                                                    ? Palette.orange
+                                                    : Palette.orange
                                                         .withOpacity(0.6),
                                           ),
                                           maxLines: 4,
@@ -116,18 +121,18 @@ class InboxView extends StatelessWidget {
                                         Text(
                                           e.postedDate,
                                           style: const TextStyle(
-                                            color: Colors.grey,
+                                            color: Palette.grey,
                                           ),
                                         ),
                                         const SizedBox(
-                                          width: 12,
+                                          width: Dimens.pt12,
                                         ),
                                       ],
                                     ),
                                   ],
                                 ),
                                 const Divider(
-                                  height: 0,
+                                  height: Dimens.zero,
                                 ),
                               ],
                             ),
@@ -136,12 +141,12 @@ class InboxView extends StatelessWidget {
                       ),
                     ),
                     const Divider(
-                      height: 0,
+                      height: Dimens.zero,
                     ),
                   ];
                 }).expand((List<Widget> element) => element),
                 const SizedBox(
-                  height: 40,
+                  height: Dimens.pt40,
                 ),
               ],
             ),

lib/screens/profile/widgets/offline_list_tile.dart

@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:wakelock/wakelock.dart';
 
 class OfflineListTile extends StatelessWidget {
@@ -14,12 +15,15 @@ class OfflineListTile extends StatelessWidget {
       listenWhen: (StoriesState previous, StoriesState current) =>
           previous.downloadStatus != current.downloadStatus,
       listener: (BuildContext context, StoriesState state) {
-        if (state.downloadStatus == StoriesDownloadStatus.failure) {
+        if (state.downloadStatus == StoriesDownloadStatus.failure ||
+            state.downloadStatus == StoriesDownloadStatus.finished) {
           Wakelock.disable();
         }
       },
       buildWhen: (StoriesState previous, StoriesState current) =>
-          previous.downloadStatus != current.downloadStatus,
+          previous.downloadStatus != current.downloadStatus ||
+          previous.storiesDownloaded != current.storiesDownloaded ||
+          previous.storiesToBeDownloaded != current.storiesToBeDownloaded,
       builder: (BuildContext context, StoriesState state) {
         final bool downloading =
             state.downloadStatus == StoriesDownloadStatus.downloading;
@@ -29,8 +33,8 @@ class OfflineListTile extends StatelessWidget {
         final Widget trailingWidget = () {
           if (downloading) {
             return const SizedBox(
-              height: 24,
-              width: 24,
+              height: Dimens.pt24,
+              width: Dimens.pt24,
               child: CustomCircularProgressIndicator(),
             );
           } else if (downloaded) {
@@ -41,19 +45,53 @@ class OfflineListTile extends StatelessWidget {
 
         return ListTile(
           title: Text(
-            downloading ? 'Downloading All Stories...' : 'Download All Stories',
+            downloading
+                ? '''Downloading All Stories (${state.storiesDownloaded}/${state.storiesToBeDownloaded})'''
+                : 'Download All Stories',
           ),
           subtitle: const Text(
             'download all latest stories that have at least one comment '
-            "for offline reading. (web page won't be downloaded)",
+            'for offline reading. (Please keep Hacki in foreground while '
+            'downloading.)',
           ),
           trailing: trailingWidget,
           isThreeLine: true,
           onTap: () {
+            if (state.downloadStatus == StoriesDownloadStatus.downloading) {
+              return;
+            }
             Connectivity().checkConnectivity().then((ConnectivityResult res) {
               if (res != ConnectivityResult.none) {
-                Wakelock.enable();
-                context.read<StoriesBloc>().add(StoriesDownload());
+                showDialog<bool>(
+                  context: context,
+                  builder: (BuildContext context) => AlertDialog(
+                    title: const Text('Download web pages as well?'),
+                    content: const Text('It will take longer time.'),
+                    actions: <Widget>[
+                      TextButton(
+                        onPressed: () => Navigator.pop(context),
+                        child: const Text('Cancel'),
+                      ),
+                      TextButton(
+                        onPressed: () => Navigator.pop(context, false),
+                        child: const Text('No'),
+                      ),
+                      TextButton(
+                        onPressed: () => Navigator.pop(context, true),
+                        child: const Text('Yes'),
+                      ),
+                    ],
+                  ),
+                ).then((bool? includeWebPage) {
+                  if (includeWebPage != null) {
+                    Wakelock.enable();
+                    context.read<StoriesBloc>().add(
+                          StoriesDownload(
+                            includingWebPage: includeWebPage,
+                          ),
+                        );
+                  }
+                });
               }
             });
           },

lib/screens/profile/widgets/widgets.dart

@@ -1,4 +1,3 @@
 export 'centered_message_view.dart';
-export 'custom_chip.dart';
 export 'inbox_view.dart';
 export 'offline_list_tile.dart';

lib/screens/screens.dart

@@ -1,5 +1,6 @@
 export 'home_screen.dart';
+export 'item/item_screen.dart';
 export 'profile/profile_screen.dart';
 export 'search/search_screen.dart';
-export 'story/story_screen.dart';
 export 'submit/submit_screen.dart';
+export 'web_view/web_view_screen.dart';

lib/screens/search/search_screen.dart

@@ -3,9 +3,11 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_fadein/flutter_fadein.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/extensions/extensions.dart';
-import 'package:hacki/models/story.dart';
+import 'package:hacki/models/models.dart';
 import 'package:hacki/screens/screens.dart';
+import 'package:hacki/screens/search/widgets/widgets.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
 import 'package:pull_to_refresh/pull_to_refresh.dart';
 
@@ -37,14 +39,16 @@ class _SearchScreenState extends State<SearchScreen> {
                 mainAxisSize: MainAxisSize.min,
                 children: <Widget>[
                   Padding(
-                    padding: const EdgeInsets.symmetric(horizontal: 12),
+                    padding: const EdgeInsets.symmetric(
+                      horizontal: Dimens.pt12,
+                    ),
                     child: TextField(
-                      cursorColor: Colors.orange,
+                      cursorColor: Palette.orange,
                       autocorrect: false,
                       decoration: const InputDecoration(
                         hintText: 'Search Hacker News',
                         focusedBorder: UnderlineInputBorder(
-                          borderSide: BorderSide(color: Colors.orange),
+                          borderSide: BorderSide(color: Palette.orange),
                         ),
                       ),
                       onChanged: (String val) {
@@ -56,9 +60,66 @@ class _SearchScreenState extends State<SearchScreen> {
                       },
                     ),
                   ),
-                  if (state.status == SearchStatus.loading) ...<Widget>[
+                  const SizedBox(
+                    height: Dimens.pt6,
+                  ),
+                  SingleChildScrollView(
+                    scrollDirection: Axis.horizontal,
+                    child: Row(
+                      children: <Widget>[
+                        const SizedBox(
+                          width: 8,
+                        ),
+                        DateTimeRangeFilterChip(
+                          filter:
+                              state.searchFilters.get<DateTimeRangeFilter>(),
+                          onDateTimeRangeUpdated:
+                              (DateTime start, DateTime end) =>
+                                  context.read<SearchCubit>().addFilter(
+                                        DateTimeRangeFilter(
+                                          startTime: start,
+                                          endTime: end,
+                                        ),
+                                      ),
+                          onDateTimeRangeRemoved: context
+                              .read<SearchCubit>()
+                              .removeFilter<DateTimeRangeFilter>,
+                        ),
+                        const SizedBox(
+                          width: Dimens.pt8,
+                        ),
+                        CustomChip(
+                          onSelected: (_) =>
+                              context.read<SearchCubit>().onSortToggled(),
+                          selected: state.searchFilters.sorted,
+                          label: '''newest first''',
+                        ),
+                        const SizedBox(
+                          width: Dimens.pt8,
+                        ),
+                        for (final CustomDateTimeRange range
+                            in CustomDateTimeRange.values) ...<Widget>[
+                          CustomRangeFilterChip(
+                            range: range,
+                            onTap: (DateTime start, DateTime end) =>
+                                context.read<SearchCubit>().addFilter(
+                                      DateTimeRangeFilter(
+                                        startTime: start,
+                                        endTime: end,
+                                      ),
+                                    ),
+                          ),
+                          const SizedBox(
+                            width: Dimens.pt8,
+                          ),
+                        ],
+                      ],
+                    ),
+                  ),
+                  if (state.status == SearchStatus.loading &&
+                      state.results.isEmpty) ...<Widget>[
                     const SizedBox(
-                      height: 100,
+                      height: Dimens.pt100,
                     ),
                     const CustomCircularProgressIndicator(),
                   ],
@@ -67,12 +128,14 @@ class _SearchScreenState extends State<SearchScreen> {
                       enablePullDown: false,
                       enablePullUp: true,
                       header: const WaterDropMaterialHeader(
-                        backgroundColor: Colors.orange,
+                        backgroundColor: Palette.orange,
                       ),
                       footer: CustomFooter(
                         loadStyle: LoadStyle.ShowWhenLoading,
                         builder: (BuildContext context, LoadStatus? mode) {
-                          Widget body;
+                          const double height = 55;
+                          late final Widget body;
+
                           if (mode == LoadStatus.loading) {
                             body = const CustomCircularProgressIndicator();
                           } else if (mode == LoadStatus.failed) {
@@ -82,8 +145,9 @@ class _SearchScreenState extends State<SearchScreen> {
                           } else {
                             body = const SizedBox.shrink();
                           }
+
                           return SizedBox(
-                            height: 55,
+                            height: height,
                             child: Center(child: body),
                           );
                         },
@@ -104,21 +168,21 @@ class _SearchScreenState extends State<SearchScreen> {
                                           prefState.showComplexStoryTile,
                                       showMetadata: prefState.showMetadata,
                                       story: e,
-                                      onTap: () => goToStoryScreen(
-                                        args: StoryScreenArgs(story: e),
+                                      onTap: () => goToItemScreen(
+                                        args: ItemScreenArgs(item: e),
                                       ),
                                     ),
                                   ),
                                   if (!prefState.showComplexStoryTile)
                                     const Divider(
-                                      height: 0,
+                                      height: Dimens.zero,
                                     ),
                                 ],
                               )
                               .expand((List<Widget> e) => e)
                               .toList(),
                           const SizedBox(
-                            height: 40,
+                            height: Dimens.pt40,
                           ),
                         ],
                       ),