v0.2.23 (#60)

* fixed #58

* bumped version.

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,8 +16,10 @@
     </queries>
 
    <application
-        android:label="hacki"
+        android:label="Hacki"
         android:icon="@mipmap/ic_launcher"
+        android:allowBackup="true"
+        android:fullBackupContent="@xml/backup_rules"
         android:usesCleartextTraffic="true">
         <activity
             android:name=".MainActivity"
@@ -25,6 +27,7 @@
             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

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/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/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.20;
+				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.20;
+				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.20;
+				MARKETING_VERSION = 0.2.23;
 				PRODUCT_BUNDLE_IDENTIFIER = com.jiaqi.hacki;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				PROVISIONING_PROFILE_SPECIFIER = "";

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

@@ -3,10 +3,13 @@ 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';
@@ -18,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;
@@ -68,22 +71,13 @@ 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 List<int> kids = () {
-      switch (state.order) {
-        case CommentsOrder.natural:
-          return updatedStory.kids;
-        case CommentsOrder.newestFirst:
-          return updatedStory.kids.sorted((int a, int b) => b.compareTo(a));
-        case CommentsOrder.oldestFirst:
-          return updatedStory.kids.sorted((int a, int b) => a.compareTo(b));
-      }
-    }();
+    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
@@ -121,19 +115,10 @@ class CommentsCubit extends Cubit<CommentsState> {
 
     await _streamSubscription?.cancel();
 
-    final Story story = state.story;
-    final Story updatedStory =
-        await _storiesRepository.fetchStoryBy(story.id) ?? story;
-    final List<int> kids = () {
-      switch (state.order) {
-        case CommentsOrder.natural:
-          return updatedStory.kids;
-        case CommentsOrder.newestFirst:
-          return updatedStory.kids.sorted((int a, int b) => b.compareTo(a));
-        case CommentsOrder.oldestFirst:
-          return updatedStory.kids.sorted((int a, int b) => a.compareTo(b));
-      }
-    }();
+    final Item item = state.item;
+    final Item updatedItem =
+        await _storiesRepository.fetchItemBy(id: item.id) ?? item;
+    final List<int> kids = sortKids(updatedItem.kids);
 
     _streamSubscription = _storiesRepository
         .fetchCommentsStream(ids: kids)
@@ -142,18 +127,19 @@ class CommentsCubit extends Cubit<CommentsState> {
 
     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();
@@ -166,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;
@@ -216,13 +243,6 @@ class CommentsCubit extends Cubit<CommentsState> {
     }
   }
 
-  void onOrderChanged(CommentsOrder? order) {
-    if (order == null) return;
-    _streamSubscription?.cancel();
-    emit(state.copyWith(order: order, comments: <Comment>[]));
-    init();
-  }
-
   static List<LinkifyElement> _linkify(
     String text, {
     LinkifyOptions options = const LinkifyOptions(),

lib/cubits/comments/comments_state.dart

@@ -16,9 +16,10 @@ enum CommentsOrder {
 
 class CommentsState extends Equatable {
   const CommentsState({
-    required this.story,
+    required this.item,
     required this.comments,
     required this.status,
+    required this.fetchParentStatus,
     required this.order,
     required this.onlyShowTargetComment,
     required this.offlineReading,
@@ -27,33 +28,37 @@ class CommentsState extends Equatable {
 
   CommentsState.init({
     required this.offlineReading,
-    required this.story,
+    required this.item,
   })  : comments = <Comment>[],
         status = CommentsStatus.init,
+        fetchParentStatus = CommentsStatus.init,
         order = CommentsOrder.natural,
         onlyShowTargetComment = false,
         currentPage = 0;
 
-  final Story story;
+  final Item item;
   final List<Comment> comments;
   final CommentsStatus status;
+  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,
+    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,
       order: order ?? this.order,
       onlyShowTargetComment:
@@ -65,9 +70,10 @@ class CommentsState extends Equatable {
 
   @override
   List<Object?> get props => <Object?>[
-        story,
+        item,
         comments,
         status,
+        fetchParentStatus,
         order,
         onlyShowTargetComment,
         offlineReading,

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/split_view/split_view_cubit.dart

@@ -13,9 +13,9 @@ 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));

lib/cubits/split_view/split_view_state.dart

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

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

@@ -15,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;
@@ -182,19 +183,19 @@ class HackiApp extends StatelessWidget {
       ],
       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/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 {
@@ -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(

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/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/story.dart

@@ -1,6 +1,5 @@
 import 'dart:convert';
 
-import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/item.dart';
 
 enum StoryType {
@@ -94,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/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/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/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

@@ -24,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';
@@ -171,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,
@@ -181,7 +182,7 @@ class _HomeScreenState extends State<HomeScreen>
                         ],
                       ),
                       child: Container(
-                        color: Colors.orangeAccent.withOpacity(0.2),
+                        color: Palette.orangeAccent.withOpacity(0.2),
                         child: StoryTile(
                           key: ValueKey<String>('${story.id}-PinnedStoryTile'),
                           story: story,
@@ -194,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,
                     ),
                   ),
               ],
@@ -209,27 +210,32 @@ 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();
                       },
@@ -242,10 +248,12 @@ class _HomeScreenState extends State<HomeScreen>
                             child: Text(
                               StoriesBloc.types.elementAt(i).label,
                               style: TextStyle(
-                                fontSize: currentIndex == i ? 14 : 10,
+                                fontSize: currentIndex == i
+                                    ? TextDimens.pt14
+                                    : TextDimens.pt10,
                                 color: currentIndex == i
-                                    ? Colors.orange
-                                    : Colors.grey,
+                                    ? Palette.orange
+                                    : Palette.grey,
                               ),
                             ),
                           ),
@@ -263,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'),
@@ -274,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>(
@@ -292,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,
                                   ),
                                 );
                               },
@@ -375,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(() {
@@ -436,13 +446,10 @@ 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));
           }
         }
       });
@@ -462,8 +469,8 @@ 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);
     });
   }
 
@@ -487,8 +494,8 @@ 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);
       });
     }
   }
@@ -509,10 +516,10 @@ class _MobileHomeScreen 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(),
           ),
       ],
@@ -536,7 +543,7 @@ class _TabletHomeScreen extends StatelessWidget {
         double homeScreenWidth = 428;
 
         if (sizeInfo.screenSize.width < homeScreenWidth * 2) {
-          homeScreenWidth = 345.0;
+          homeScreenWidth = 345;
         }
 
         return BlocBuilder<SplitViewCubit, SplitViewState>(
@@ -546,26 +553,26 @@ class _TabletHomeScreen extends StatelessWidget {
             return Stack(
               children: <Widget>[
                 AnimatedPositioned(
-                  left: 0,
-                  top: 0,
-                  bottom: 0,
-                  width: state.expanded ? 0 : homeScreenWidth,
+                  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: 24,
-                  bottom: 36,
-                  height: 40,
-                  width: homeScreenWidth - 24,
+                  left: Dimens.pt24,
+                  bottom: Dimens.pt36,
+                  height: Dimens.pt40,
+                  width: homeScreenWidth - Dimens.pt24,
                   child: const CountdownReminder(),
                 ),
                 AnimatedPositioned(
-                  right: 0,
-                  top: 0,
-                  bottom: 0,
-                  left: state.expanded ? 0 : homeScreenWidth,
+                  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(),
@@ -586,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(context, state.storyScreenArgs!);
+        if (state.itemScreenArgs != null) {
+          return ItemScreen.build(context, state.itemScreenArgs!);
         }
 
         return Material(

lib/screens/item/item_screen.dart

@@ -16,9 +16,10 @@ import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/main.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/repositories/repositories.dart';
-import 'package:hacki/screens/story/widgets/widgets.dart';
+import 'package:hacki/screens/item/widgets/widgets.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:pull_to_refresh/pull_to_refresh.dart';
 import 'package:responsive_builder/responsive_builder.dart';
@@ -33,44 +34,44 @@ enum _MenuAction {
   cancel,
 }
 
-class StoryScreenArgs extends Equatable {
-  const StoryScreenArgs({
-    required this.story,
+class ItemScreenArgs extends Equatable {
+  const ItemScreenArgs({
+    required this.item,
     this.onlyShowTargetComment = false,
     this.targetComments,
   });
 
-  final Story story;
+  final Item item;
   final bool onlyShowTargetComment;
   final List<Comment>? targetComments;
 
   @override
   List<Object?> get props => <Object?>[
-        story,
+        item,
         onlyShowTargetComment,
         targetComments,
       ];
 }
 
-class StoryScreen extends StatefulWidget {
-  const StoryScreen({
+class ItemScreen extends StatefulWidget {
+  const ItemScreen({
     super.key,
     this.splitViewEnabled = false,
-    required this.story,
+    required this.item,
     required this.parentComments,
   });
 
-  static const String routeName = '/story';
+  static const String routeName = '/item';
 
-  static Route<dynamic> route(StoryScreenArgs args) {
-    return MaterialPageRoute<StoryScreen>(
+  static Route<dynamic> route(ItemScreenArgs args) {
+    return MaterialPageRoute<ItemScreen>(
       settings: const RouteSettings(name: routeName),
       builder: (BuildContext context) => MultiBlocProvider(
         providers: <BlocProvider<dynamic>>[
           BlocProvider<CommentsCubit>(
             create: (_) => CommentsCubit(
               offlineReading: context.read<StoriesBloc>().state.offlineReading,
-              story: args.story,
+              item: args.item,
             )..init(
                 onlyShowTargetComment: args.onlyShowTargetComment,
                 targetParents: args.targetComments,
@@ -80,21 +81,16 @@ class StoryScreen extends StatefulWidget {
             lazy: false,
             create: (BuildContext context) => EditCubit(),
           ),
-          if (args.story.isPoll)
-            BlocProvider<PollCubit>(
-              create: (BuildContext context) =>
-                  PollCubit(story: args.story)..init(),
-            ),
         ],
-        child: StoryScreen(
-          story: args.story,
+        child: ItemScreen(
+          item: args.item,
           parentComments: args.targetComments ?? <Comment>[],
         ),
       ),
     );
   }
 
-  static Widget build(BuildContext context, StoryScreenArgs args) {
+  static Widget build(BuildContext context, ItemScreenArgs args) {
     return WillPopScope(
       onWillPop: () async {
         if (context.read<SplitViewCubit>().state.expanded) {
@@ -105,12 +101,12 @@ class StoryScreen extends StatefulWidget {
         }
       },
       child: MultiBlocProvider(
-        key: ValueKey<StoryScreenArgs>(args),
+        key: ValueKey<ItemScreenArgs>(args),
         providers: <BlocProvider<dynamic>>[
           BlocProvider<CommentsCubit>(
             create: (BuildContext context) => CommentsCubit(
               offlineReading: context.read<StoriesBloc>().state.offlineReading,
-              story: args.story,
+              item: args.item,
             )..init(
                 onlyShowTargetComment: args.onlyShowTargetComment,
                 targetParents: args.targetComments,
@@ -120,14 +116,9 @@ class StoryScreen extends StatefulWidget {
             lazy: false,
             create: (BuildContext context) => EditCubit(),
           ),
-          if (args.story.isPoll)
-            BlocProvider<PollCubit>(
-              create: (BuildContext context) =>
-                  PollCubit(story: args.story)..init(),
-            ),
         ],
-        child: StoryScreen(
-          story: args.story,
+        child: ItemScreen(
+          item: args.item,
           parentComments: args.targetComments ?? <Comment>[],
           splitViewEnabled: true,
         ),
@@ -136,14 +127,14 @@ class StoryScreen extends StatefulWidget {
   }
 
   final bool splitViewEnabled;
-  final Story story;
+  final Item item;
   final List<Comment> parentComments;
 
   @override
-  _StoryScreenState createState() => _StoryScreenState();
+  _ItemScreenState createState() => _ItemScreenState();
 }
 
-class _StoryScreenState extends State<StoryScreen> {
+class _ItemScreenState extends State<ItemScreen> {
   final TextEditingController commentEditingController =
       TextEditingController();
   final ScrollController scrollController = ScrollController();
@@ -249,13 +240,15 @@ class _StoryScreenState extends State<StoryScreen> {
                 enablePullUp: !state.onlyShowTargetComment,
                 enablePullDown: !state.onlyShowTargetComment,
                 header: WaterDropMaterialHeader(
-                  backgroundColor: Colors.orange,
+                  backgroundColor: Palette.orange,
                   offset: topPadding,
                 ),
                 footer: CustomFooter(
                   loadStyle: LoadStyle.ShowWhenLoading,
                   builder: (BuildContext context, LoadStatus? mode) {
-                    Widget body;
+                    const double height = 55;
+                    late final Widget body;
+
                     if (mode == LoadStatus.idle) {
                       body = const Text('');
                     } else if (mode == LoadStatus.loading) {
@@ -272,7 +265,7 @@ class _StoryScreenState extends State<StoryScreen> {
                       body = const Text('');
                     }
                     return SizedBox(
-                      height: 55,
+                      height: height,
                       child: Center(child: body),
                     );
                   },
@@ -286,7 +279,7 @@ class _StoryScreenState extends State<StoryScreen> {
                   } else {
                     context.read<CommentsCubit>().refresh();
 
-                    if (widget.story.isPoll) {
+                    if (state.item.isPoll) {
                       context.read<PollCubit>().refresh();
                     }
                   }
@@ -300,7 +293,7 @@ class _StoryScreenState extends State<StoryScreen> {
                     ),
                     if (!widget.splitViewEnabled)
                       const Padding(
-                        padding: EdgeInsets.only(bottom: 6),
+                        padding: EdgeInsets.only(bottom: Dimens.pt6),
                         child: OfflineBanner(),
                       ),
                     Slidable(
@@ -311,23 +304,27 @@ class _StoryScreenState extends State<StoryScreen> {
                             onPressed: (_) {
                               HapticFeedback.lightImpact();
 
-                              if (widget.story !=
-                                  context.read<EditCubit>().state.replyingTo) {
+                              if (state.item.id !=
+                                  context
+                                      .read<EditCubit>()
+                                      .state
+                                      .replyingTo
+                                      ?.id) {
                                 commentEditingController.clear();
                               }
                               context
                                   .read<EditCubit>()
-                                  .onReplyTapped(widget.story);
+                                  .onReplyTapped(state.item);
                               focusNode.requestFocus();
                             },
-                            backgroundColor: Colors.orange,
-                            foregroundColor: Colors.white,
+                            backgroundColor: Palette.orange,
+                            foregroundColor: Palette.white,
                             icon: Icons.message,
                           ),
                           SlidableAction(
-                            onPressed: (_) => onMorePressed(widget.story),
-                            backgroundColor: Colors.orange,
-                            foregroundColor: Colors.white,
+                            onPressed: (_) => onMoreTapped(state.item),
+                            backgroundColor: Palette.orange,
+                            foregroundColor: Palette.white,
                             icon: Icons.more_horiz,
                           ),
                         ],
@@ -336,75 +333,80 @@ class _StoryScreenState extends State<StoryScreen> {
                         children: <Widget>[
                           Padding(
                             padding: const EdgeInsets.only(
-                              left: 6,
-                              right: 6,
+                              left: Dimens.pt6,
+                              right: Dimens.pt6,
                             ),
                             child: Row(
                               children: <Widget>[
                                 Text(
-                                  widget.story.by,
+                                  state.item.by,
                                   style: const TextStyle(
-                                    color: Colors.orange,
+                                    color: Palette.orange,
                                   ),
                                 ),
                                 const Spacer(),
                                 Text(
-                                  widget.story.postedDate,
+                                  state.item.postedDate,
                                   style: const TextStyle(
-                                    color: Colors.grey,
+                                    color: Palette.grey,
                                   ),
                                 ),
                               ],
                             ),
                           ),
-                          InkWell(
-                            onTap: () => LinkUtil.launch(
-                              widget.story.url,
-                              useReader: context
-                                  .read<PreferenceCubit>()
-                                  .state
-                                  .useReader,
-                              offlineReading: context
-                                  .read<StoriesBloc>()
-                                  .state
-                                  .offlineReading,
-                            ),
-                            child: Padding(
-                              padding: const EdgeInsets.only(
-                                left: 6,
-                                right: 6,
-                                bottom: 12,
-                                top: 12,
+                          if (state.item is Story)
+                            InkWell(
+                              onTap: () => LinkUtil.launch(
+                                state.item.url,
+                                useReader: context
+                                    .read<PreferenceCubit>()
+                                    .state
+                                    .useReader,
+                                offlineReading: context
+                                    .read<StoriesBloc>()
+                                    .state
+                                    .offlineReading,
                               ),
-                              child: Text(
-                                widget.story.title,
-                                textAlign: TextAlign.center,
-                                style: TextStyle(
-                                  fontWeight: FontWeight.bold,
-                                  color: widget.story.url.isNotEmpty
-                                      ? Colors.orange
-                                      : null,
+                              child: Padding(
+                                padding: const EdgeInsets.only(
+                                  left: Dimens.pt6,
+                                  right: Dimens.pt6,
+                                  bottom: Dimens.pt12,
+                                  top: Dimens.pt12,
+                                ),
+                                child: Text(
+                                  state.item.title,
+                                  textAlign: TextAlign.center,
+                                  style: TextStyle(
+                                    fontWeight: FontWeight.bold,
+                                    color: state.item.url.isNotEmpty
+                                        ? Palette.orange
+                                        : null,
+                                  ),
                                 ),
                               ),
+                            )
+                          else
+                            const SizedBox(
+                              height: Dimens.pt6,
                             ),
-                          ),
-                          if (widget.story.text.isNotEmpty)
+                          if (state.item.text.isNotEmpty)
                             Padding(
                               padding: const EdgeInsets.symmetric(
-                                horizontal: 10,
+                                horizontal: Dimens.pt10,
                               ),
                               child: SelectableLinkify(
-                                text: widget.story.text,
+                                text: state.item.text,
                                 style: TextStyle(
                                   fontSize:
                                       MediaQuery.of(context).textScaleFactor *
-                                          15,
+                                          TextDimens.pt15,
                                 ),
                                 linkStyle: TextStyle(
                                   fontSize:
                                       MediaQuery.of(context).textScaleFactor *
-                                          15,
-                                  color: Colors.orange,
+                                          TextDimens.pt15,
+                                  color: Palette.orange,
                                 ),
                                 onOpen: (LinkableElement link) {
                                   if (link.url.contains(
@@ -417,41 +419,66 @@ class _StoryScreenState extends State<StoryScreen> {
                                 },
                               ),
                             ),
-                          if (widget.story.isPoll)
-                            PollView(
-                              onLoginTapped: onLoginTapped,
+                          if (state.item.isPoll)
+                            BlocProvider<PollCubit>(
+                              create: (BuildContext context) =>
+                                  PollCubit(story: state.item as Story)..init(),
+                              child: PollView(
+                                onLoginTapped: onLoginTapped,
+                              ),
                             ),
                         ],
                       ),
                     ),
-                    if (widget.story.text.isNotEmpty)
+                    if (state.item.text.isNotEmpty)
                       const SizedBox(
-                        height: 8,
+                        height: Dimens.pt8,
                       ),
                     const Divider(
-                      height: 0,
+                      height: Dimens.zero,
                     ),
                     if (state.onlyShowTargetComment) ...<Widget>[
                       Center(
                         child: TextButton(
                           onPressed: () => context
                               .read<CommentsCubit>()
-                              .loadAll(widget.story),
+                              .loadAll(state.item as Story),
                           child: const Text('View all comments'),
                         ),
                       ),
                       const Divider(
-                        height: 0,
+                        height: Dimens.zero,
                       ),
                     ] else ...<Widget>[
                       Row(
                         children: <Widget>[
-                          const SizedBox(
-                            width: 12,
-                          ),
-                          Text(
-                            '''${state.story.score} karma, ${state.story.descendants} comment${state.story.descendants > 1 ? 's' : ''}''',
-                          ),
+                          if (state.item is Story) ...<Widget>[
+                            const SizedBox(
+                              width: Dimens.pt12,
+                            ),
+                            Text(
+                              '''${state.item.score} karma, ${state.item.descendants} comment${state.item.descendants > 1 ? 's' : ''}''',
+                            ),
+                          ] else ...<Widget>[
+                            const SizedBox(
+                              width: Dimens.pt4,
+                            ),
+                            TextButton(
+                              onPressed: context
+                                  .read<CommentsCubit>()
+                                  .loadParentThread,
+                              child: state.fetchParentStatus ==
+                                      CommentsStatus.loading
+                                  ? const SizedBox(
+                                      height: Dimens.pt12,
+                                      width: Dimens.pt12,
+                                      child: CustomCircularProgressIndicator(
+                                        strokeWidth: Dimens.pt2,
+                                      ),
+                                    )
+                                  : const Text('View parent thread'),
+                            ),
+                          ],
                           const Spacer(),
                           DropdownButton<CommentsOrder>(
                             value: state.order,
@@ -462,7 +489,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                 child: Text(
                                   'Natural',
                                   style: TextStyle(
-                                    fontSize: 14,
+                                    fontSize: TextDimens.pt14,
                                   ),
                                 ),
                               ),
@@ -471,7 +498,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                 child: Text(
                                   'Newest first',
                                   style: TextStyle(
-                                    fontSize: 14,
+                                    fontSize: TextDimens.pt14,
                                   ),
                                 ),
                               ),
@@ -480,7 +507,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                 child: Text(
                                   'Oldest first',
                                   style: TextStyle(
-                                    fontSize: 14,
+                                    fontSize: TextDimens.pt14,
                                   ),
                                 ),
                               ),
@@ -489,12 +516,12 @@ class _StoryScreenState extends State<StoryScreen> {
                                 context.read<CommentsCubit>().onOrderChanged,
                           ),
                           const SizedBox(
-                            width: 4,
+                            width: Dimens.pt4,
                           ),
                         ],
                       ),
                       const Divider(
-                        height: 0,
+                        height: Dimens.zero,
                       ),
                     ],
                     if (state.comments.isEmpty &&
@@ -505,7 +532,7 @@ class _StoryScreenState extends State<StoryScreen> {
                       const Center(
                         child: Text(
                           'Nothing yet',
-                          style: TextStyle(color: Colors.grey),
+                          style: TextStyle(color: Palette.grey),
                         ),
                       ),
                     ],
@@ -517,15 +544,19 @@ class _StoryScreenState extends State<StoryScreen> {
                           level: comment.level,
                           myUsername:
                               authState.isLoggedIn ? authState.username : null,
-                          opUsername: widget.story.by,
+                          opUsername: state.item.by,
                           onReplyTapped: (Comment cmt) {
                             HapticFeedback.lightImpact();
                             if (cmt.deleted || cmt.dead) {
                               return;
                             }
 
-                            if (cmt !=
-                                context.read<EditCubit>().state.replyingTo) {
+                            if (cmt.id !=
+                                context
+                                    .read<EditCubit>()
+                                    .state
+                                    .replyingTo
+                                    ?.id) {
                               commentEditingController.clear();
                             }
 
@@ -541,9 +572,9 @@ class _StoryScreenState extends State<StoryScreen> {
                             context.read<EditCubit>().onEditTapped(cmt);
                             focusNode.requestFocus();
                           },
-                          onMoreTapped: onMorePressed,
+                          onMoreTapped: onMoreTapped,
                           onStoryLinkTapped: onStoryLinkTapped,
-                          onTimeMachineActivated: onTimeMachineActivated,
+                          onRightMoreTapped: onRightMoreTapped,
                         ),
                       ),
                     if ((state.status == CommentsStatus.allLoaded &&
@@ -599,14 +630,14 @@ class _StoryScreenState extends State<StoryScreen> {
                                 SplitViewState state,
                               ) {
                                 return Positioned(
-                                  top: 0,
-                                  left: 0,
-                                  right: 0,
+                                  top: Dimens.zero,
+                                  left: Dimens.zero,
+                                  right: Dimens.zero,
                                   child: CustomAppBar(
                                     backgroundColor: Theme.of(context)
                                         .canvasColor
                                         .withOpacity(0.6),
-                                    story: widget.story,
+                                    item: widget.item,
                                     scrollController: scrollController,
                                     onBackgroundTap:
                                         onFeatureDiscoveryDismissed,
@@ -620,9 +651,9 @@ class _StoryScreenState extends State<StoryScreen> {
                               },
                             ),
                             Positioned(
-                              bottom: 0,
-                              left: 0,
-                              right: 0,
+                              bottom: Dimens.zero,
+                              left: Dimens.zero,
+                              right: Dimens.zero,
                               child: ReplyBox(
                                 splitViewEnabled: true,
                                 focusNode: focusNode,
@@ -646,7 +677,7 @@ class _StoryScreenState extends State<StoryScreen> {
                         appBar: CustomAppBar(
                           backgroundColor:
                               Theme.of(context).canvasColor.withOpacity(0.6),
-                          story: widget.story,
+                          item: widget.item,
                           scrollController: scrollController,
                           onBackgroundTap: onFeatureDiscoveryDismissed,
                           onDismiss: onFeatureDiscoveryDismissed,
@@ -681,12 +712,55 @@ class _StoryScreenState extends State<StoryScreen> {
     return Future<bool>.value(false);
   }
 
+  void onRightMoreTapped(Comment comment) {
+    const double bottomSheetHeight = 140;
+
+    HapticFeedback.lightImpact();
+    showModalBottomSheet<void>(
+      context: context,
+      builder: (BuildContext context) {
+        return Container(
+          height: bottomSheetHeight,
+          color: Theme.of(context).canvasColor,
+          child: Material(
+            color: Palette.transparent,
+            child: Column(
+              children: <Widget>[
+                ListTile(
+                  leading: const Icon(Icons.av_timer),
+                  title: const Text('View parents'),
+                  onTap: () {
+                    Navigator.pop(context);
+                    onTimeMachineActivated(comment);
+                  },
+                  enabled:
+                      comment.level > 0 && !(comment.dead || comment.deleted),
+                ),
+                ListTile(
+                  leading: const Icon(Icons.list),
+                  title: const Text('View in separate thread'),
+                  onTap: () {
+                    Navigator.pop(context);
+                    goToItemScreen(
+                      args: ItemScreenArgs(item: comment),
+                      forceNewScreen: true,
+                    );
+                  },
+                  enabled: !(comment.dead || comment.deleted),
+                ),
+              ],
+            ),
+          ),
+        );
+      },
+    );
+  }
+
   void onTimeMachineActivated(Comment comment) {
     final Size size = MediaQuery.of(context).size;
     final DeviceScreenType deviceType = getDeviceType(size);
     final double widthFactor =
         deviceType != DeviceScreenType.mobile ? 0.6 : 0.9;
-    HapticFeedback.lightImpact();
     showDialog<void>(
       context: context,
       builder: (BuildContext context) {
@@ -697,28 +771,32 @@ class _StoryScreenState extends State<StoryScreen> {
               return Center(
                 child: Material(
                   color: Theme.of(context).canvasColor,
-                  borderRadius: const BorderRadius.all(Radius.circular(4)),
+                  borderRadius: const BorderRadius.all(
+                    Radius.circular(
+                      Dimens.pt4,
+                    ),
+                  ),
                   child: SizedBox(
                     height: size.height * 0.8,
                     width: size.width * widthFactor,
                     child: Padding(
                       padding: const EdgeInsets.symmetric(
-                        horizontal: 8,
-                        vertical: 12,
+                        horizontal: Dimens.pt8,
+                        vertical: Dimens.pt12,
                       ),
                       child: Column(
                         children: <Widget>[
                           Row(
                             children: <Widget>[
                               const SizedBox(
-                                width: 8,
+                                width: Dimens.pt8,
                               ),
                               const Text('Parents:'),
                               const Spacer(),
                               IconButton(
                                 icon: const Icon(
                                   Icons.close,
-                                  size: 16,
+                                  size: Dimens.pt16,
                                 ),
                                 onPressed: () => Navigator.pop(context),
                                 padding: EdgeInsets.zero,
@@ -738,7 +816,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                     actionable: false,
                                   ),
                                   const Divider(
-                                    height: 0,
+                                    height: Dimens.zero,
                                   ),
                                 ],
                               ],
@@ -761,15 +839,12 @@ class _StoryScreenState extends State<StoryScreen> {
     final int? id = link.getItemId();
     if (id != null) {
       storyLinkTapThrottle.run(() {
-        locator
-            .get<StoriesRepository>()
-            .fetchParentStory(id: id)
-            .then((Story? story) {
+        locator.get<StoriesRepository>().fetchItemBy(id: id).then((Item? item) {
           if (mounted) {
-            if (story != null) {
+            if (item != null) {
               HackiApp.navigatorKey.currentState!.pushNamed(
-                StoryScreen.routeName,
-                arguments: StoryScreenArgs(story: story),
+                ItemScreen.routeName,
+                arguments: ItemScreenArgs(item: item),
               );
             }
           }
@@ -780,7 +855,7 @@ class _StoryScreenState extends State<StoryScreen> {
     }
   }
 
-  void onMorePressed(Item item) {
+  void onMoreTapped(Item item) {
     HapticFeedback.lightImpact();
 
     if (item.dead || item.deleted) {
@@ -835,7 +910,7 @@ class _StoryScreenState extends State<StoryScreen> {
                 height: item is Comment ? 430 : 450,
                 color: Theme.of(context).canvasColor,
                 child: Material(
-                  color: Colors.transparent,
+                  color: Palette.transparent,
                   child: Column(
                     children: <Widget>[
                       BlocProvider<UserCubit>(
@@ -865,7 +940,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                               Text(
                                                 'empty',
                                                 style: TextStyle(
-                                                  color: Colors.grey,
+                                                  color: Palette.grey,
                                                 ),
                                               ),
                                             ],
@@ -875,7 +950,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                               state.user.about,
                                             ),
                                             linkStyle: const TextStyle(
-                                              color: Colors.orange,
+                                              color: Palette.orange,
                                             ),
                                             onOpen: (LinkableElement link) {
                                               if (link.url.contains(
@@ -906,12 +981,12 @@ class _StoryScreenState extends State<StoryScreen> {
                       ListTile(
                         leading: Icon(
                           FeatherIcons.chevronUp,
-                          color: upvoted ? Colors.orange : null,
+                          color: upvoted ? Palette.orange : null,
                         ),
                         title: Text(
                           upvoted ? 'Upvoted' : 'Upvote',
                           style: upvoted
-                              ? const TextStyle(color: Colors.orange)
+                              ? const TextStyle(color: Palette.orange)
                               : null,
                         ),
                         subtitle:
@@ -921,12 +996,12 @@ class _StoryScreenState extends State<StoryScreen> {
                       ListTile(
                         leading: Icon(
                           FeatherIcons.chevronDown,
-                          color: downvoted ? Colors.orange : null,
+                          color: downvoted ? Palette.orange : null,
                         ),
                         title: Text(
                           downvoted ? 'Downvoted' : 'Downvote',
                           style: downvoted
-                              ? const TextStyle(color: Colors.orange)
+                              ? const TextStyle(color: Palette.orange)
                               : null,
                         ),
                         onTap: context.read<VoteCubit>().downvote,
@@ -1016,7 +1091,7 @@ class _StoryScreenState extends State<StoryScreen> {
           content: Text(
             'Flag this comment posted by ${item.by}?',
             style: const TextStyle(
-              color: Colors.grey,
+              color: Palette.grey,
             ),
           ),
           actions: <Widget>[
@@ -1054,7 +1129,7 @@ class _StoryScreenState extends State<StoryScreen> {
             ' and ${isBlocked ? 'display' : 'hide'} '
             'comments posted by this user?',
             style: const TextStyle(
-              color: Colors.grey,
+              color: Palette.grey,
             ),
           ),
           actions: <Widget>[
@@ -1129,64 +1204,64 @@ class _StoryScreenState extends State<StoryScreen> {
               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)
                     Padding(
                       padding: const EdgeInsets.only(
-                        left: 18,
+                        left: Dimens.pt18,
                       ),
                       child: Text(
                         'Something went wrong... $sadFace',
                         style: const TextStyle(
-                          color: Colors.grey,
-                          fontSize: 12,
+                          color: Palette.grey,
+                          fontSize: TextDimens.pt12,
                         ),
                       ),
                     ),
@@ -1200,8 +1275,8 @@ class _StoryScreenState extends State<StoryScreen> {
                               ? Icons.check_box
                               : Icons.check_box_outline_blank,
                           color: state.agreedToEULA
-                              ? Colors.deepOrange
-                              : Colors.grey,
+                              ? Palette.deepOrange
+                              : Palette.grey,
                         ),
                         onPressed: () => context
                             .read<AuthBloc>()
@@ -1226,7 +1301,7 @@ class _StoryScreenState extends State<StoryScreen> {
                                   child: const Text(
                                     'End User Agreement',
                                     style: TextStyle(
-                                      color: Colors.deepOrange,
+                                      color: Palette.deepOrange,
                                       decoration: TextDecoration.underline,
                                       fontWeight: FontWeight.w600,
                                     ),
@@ -1241,7 +1316,7 @@ class _StoryScreenState extends State<StoryScreen> {
                   ),
                   Padding(
                     padding: const EdgeInsets.only(
-                      right: 12,
+                      right: Dimens.pt12,
                     ),
                     child: ButtonBar(
                       children: <Widget>[
@@ -1272,15 +1347,15 @@ class _StoryScreenState extends State<StoryScreen> {
                           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,
                             ),
                           ),
                         ),

lib/screens/item/widgets/custom_app_bar.dart

@@ -2,16 +2,14 @@ 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/story/widgets/fav_icon_button.dart';
-import 'package:hacki/screens/story/widgets/link_icon_button.dart';
-import 'package:hacki/screens/story/widgets/pin_icon_button.dart';
-import 'package:hacki/screens/story/widgets/scroll_up_icon_button.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 Story story,
+    required Item item,
     required Color backgroundColor,
     required Future<bool> Function() onBackgroundTap,
     required Future<bool> Function() onDismiss,
@@ -21,7 +19,7 @@ class CustomAppBar extends AppBar {
   }) : super(
           key: key,
           backgroundColor: backgroundColor,
-          elevation: 0,
+          elevation: Dimens.zero,
           actions: <Widget>[
             if (splitViewEnabled) ...<Widget>[
               IconButton(
@@ -29,7 +27,7 @@ class CustomAppBar extends AppBar {
                   expanded ?? false
                       ? FeatherIcons.minimize2
                       : FeatherIcons.maximize2,
-                  size: 20,
+                  size: TextDimens.pt20,
                 ),
                 onPressed: () {
                   HapticFeedback.lightImpact();
@@ -41,18 +39,19 @@ class CustomAppBar extends AppBar {
             ScrollUpIconButton(
               scrollController: scrollController,
             ),
-            PinIconButton(
-              story: story,
-              onBackgroundTap: onBackgroundTap,
-              onDismiss: onDismiss,
-            ),
+            if (item is Story)
+              PinIconButton(
+                story: item,
+                onBackgroundTap: onBackgroundTap,
+                onDismiss: onDismiss,
+              ),
             FavIconButton(
-              storyId: story.id,
+              storyId: item.id,
               onBackgroundTap: onBackgroundTap,
               onDismiss: onDismiss,
             ),
             LinkIconButton(
-              storyId: story.id,
+              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({
@@ -37,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 {
@@ -33,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'),
@@ -41,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({
@@ -43,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'),
@@ -51,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,7 +193,7 @@ class _ReplyBoxState extends State<ReplyBox> {
                                 contentPadding: EdgeInsets.zero,
                                 hintText: '...',
                                 hintStyle: TextStyle(
-                                  color: Colors.grey,
+                                  color: Palette.grey,
                                 ),
                                 focusedBorder: InputBorder.none,
                                 border: InputBorder.none,
@@ -216,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(
@@ -229,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(
@@ -248,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),
                       ),
@@ -261,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

@@ -18,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';
@@ -91,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>(
@@ -135,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);
@@ -148,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>(
@@ -160,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:
@@ -169,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();
@@ -182,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),
                               ),
                             );
                           },
@@ -191,7 +193,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                       ),
                     ),
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.search,
                         maintainState: true,
@@ -199,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
@@ -240,7 +242,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                       ),
                     ),
                     Positioned.fill(
-                      top: 50,
+                      top: Dimens.pt50,
                       child: Visibility(
                         visible: pageType == _PageType.settings,
                         child: SingleChildScrollView(
@@ -279,7 +281,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleNotificationMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Complex Story Tile'),
@@ -293,7 +295,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleDisplayMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Show Metadata'),
@@ -308,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'),
@@ -323,7 +325,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleNavigationMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               if (Platform.isIOS)
                                 SwitchListTile(
@@ -339,7 +341,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                         .read<PreferenceCubit>()
                                         .toggleReaderMode();
                                   },
-                                  activeColor: Colors.orange,
+                                  activeColor: Palette.orange,
                                 ),
                               SwitchListTile(
                                 title: const Text('Mark Read Stories'),
@@ -360,7 +362,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleMarkReadStoriesMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('Eye Candy'),
@@ -372,7 +374,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleEyeCandyMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               SwitchListTile(
                                 title: const Text('True Dark Mode'),
@@ -386,7 +388,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                       .read<PreferenceCubit>()
                                       .toggleTrueDarkMode();
                                 },
-                                activeColor: Colors.orange,
+                                activeColor: Palette.orange,
                               ),
                               ListTile(
                                 title: const Text(
@@ -408,15 +410,17 @@ class _ProfileScreenState extends State<ProfileScreen>
                                   showAboutDialog(
                                     context: context,
                                     applicationName: 'Hacki',
-                                    applicationVersion: 'v0.2.20',
+                                    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>[
@@ -430,7 +434,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               FontAwesomeIcons.addressCard,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
                                             Text('Developer'),
                                           ],
@@ -446,7 +450,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               FontAwesomeIcons.github,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
                                             Text('Source code'),
                                           ],
@@ -464,7 +468,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               Icons.thumb_up,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
                                             Text('Like the app?'),
                                           ],
@@ -480,7 +484,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                               FeatherIcons.coffee,
                                             ),
                                             SizedBox(
-                                              width: 12,
+                                              width: Dimens.pt12,
                                             ),
                                             Text('Buy me a coffee'),
                                           ],
@@ -491,7 +495,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                                 },
                               ),
                               const SizedBox(
-                                height: 48,
+                                height: Dimens.pt48,
                               ),
                             ],
                           ),
@@ -506,7 +510,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                         child: Row(
                           children: <Widget>[
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Submit',
@@ -525,7 +529,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Inbox : '
@@ -541,7 +545,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Favorite',
@@ -555,7 +559,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Submitted',
@@ -569,7 +573,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Search',
@@ -583,7 +587,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                             CustomChip(
                               label: 'Settings',
@@ -597,7 +601,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                               },
                             ),
                             const SizedBox(
-                              width: 12,
+                              width: Dimens.pt12,
                             ),
                           ],
                         ),
@@ -665,7 +669,7 @@ class _ProfileScreenState extends State<ProfileScreen>
               child: const Text(
                 'Cancel',
                 style: TextStyle(
-                  color: Colors.orange,
+                  color: Palette.orange,
                 ),
               ),
             ),
@@ -705,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>[
@@ -742,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,
                         ),
                       ),
                     ),
@@ -813,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>()
@@ -839,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,
                                     ),
@@ -854,7 +858,7 @@ class _ProfileScreenState extends State<ProfileScreen>
                   ),
                   Padding(
                     padding: const EdgeInsets.only(
-                      right: 12,
+                      right: Dimens.pt12,
                     ),
                     child: ButtonBar(
                       children: <Widget>[
@@ -885,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,
                             ),
                           ),
                         ),
@@ -920,7 +924,7 @@ class _ProfileScreenState extends State<ProfileScreen>
           content: Text(
             'Log out as ${authBloc.state.username}?',
             style: const TextStyle(
-              fontSize: 16,
+              fontSize: TextDimens.pt16,
             ),
           ),
           actions: <Widget>[

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 {
@@ -32,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) {

lib/screens/screens.dart

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

@@ -7,6 +7,7 @@ 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';
 
@@ -38,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) {
@@ -58,7 +61,7 @@ class _SearchScreenState extends State<SearchScreen> {
                     ),
                   ),
                   const SizedBox(
-                    height: 6,
+                    height: Dimens.pt6,
                   ),
                   SingleChildScrollView(
                     scrollDirection: Axis.horizontal,
@@ -83,7 +86,7 @@ class _SearchScreenState extends State<SearchScreen> {
                               .removeFilter<DateTimeRangeFilter>,
                         ),
                         const SizedBox(
-                          width: 8,
+                          width: Dimens.pt8,
                         ),
                         CustomChip(
                           onSelected: (_) =>
@@ -92,7 +95,7 @@ class _SearchScreenState extends State<SearchScreen> {
                           label: '''newest first''',
                         ),
                         const SizedBox(
-                          width: 8,
+                          width: Dimens.pt8,
                         ),
                         for (final CustomDateTimeRange range
                             in CustomDateTimeRange.values) ...<Widget>[
@@ -107,7 +110,7 @@ class _SearchScreenState extends State<SearchScreen> {
                                     ),
                           ),
                           const SizedBox(
-                            width: 8,
+                            width: Dimens.pt8,
                           ),
                         ],
                       ],
@@ -116,7 +119,7 @@ class _SearchScreenState extends State<SearchScreen> {
                   if (state.status == SearchStatus.loading &&
                       state.results.isEmpty) ...<Widget>[
                     const SizedBox(
-                      height: 100,
+                      height: Dimens.pt100,
                     ),
                     const CustomCircularProgressIndicator(),
                   ],
@@ -125,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) {
@@ -140,8 +145,9 @@ class _SearchScreenState extends State<SearchScreen> {
                           } else {
                             body = const SizedBox.shrink();
                           }
+
                           return SizedBox(
-                            height: 55,
+                            height: height,
                             child: Center(child: body),
                           );
                         },
@@ -162,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,
                           ),
                         ],
                       ),

lib/screens/submit/submit_screen.dart

@@ -3,6 +3,7 @@ import 'package:flutter/services.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/extensions/extensions.dart';
+import 'package:hacki/styles/styles.dart';
 
 class SubmitScreen extends StatefulWidget {
   const SubmitScreen({super.key});
@@ -58,7 +59,7 @@ class _SubmitScreenState extends State<SubmitScreen> {
         return Scaffold(
           appBar: AppBar(
             backgroundColor: Theme.of(context).canvasColor,
-            elevation: 0,
+            elevation: Dimens.zero,
             leading: IconButton(
               icon: const Icon(Icons.close),
               onPressed: () {
@@ -78,7 +79,7 @@ class _SubmitScreenState extends State<SubmitScreen> {
                           child: const Text(
                             'Yes',
                             style: TextStyle(
-                              color: Colors.red,
+                              color: Palette.red,
                             ),
                           ),
                         ),
@@ -99,14 +100,14 @@ class _SubmitScreenState extends State<SubmitScreen> {
               if (state.status == SubmitStatus.submitting)
                 const Padding(
                   padding: EdgeInsets.symmetric(
-                    vertical: 18,
-                    horizontal: 16,
+                    vertical: Dimens.pt18,
+                    horizontal: Dimens.pt16,
                   ),
                   child: SizedBox(
-                    height: 20,
-                    width: 20,
+                    height: Dimens.pt20,
+                    width: Dimens.pt20,
                     child: CircularProgressIndicator(
-                      color: Colors.orange,
+                      color: Palette.orange,
                       strokeWidth: 2,
                     ),
                   ),
@@ -115,7 +116,7 @@ class _SubmitScreenState extends State<SubmitScreen> {
                 IconButton(
                   icon: const Icon(
                     Icons.send,
-                    color: Colors.orange,
+                    color: Palette.orange,
                   ),
                   onPressed: context.read<SubmitCubit>().onSubmitTapped,
                 )
@@ -123,7 +124,7 @@ class _SubmitScreenState extends State<SubmitScreen> {
                 IconButton(
                   icon: const Icon(
                     Icons.send,
-                    color: Colors.grey,
+                    color: Palette.grey,
                   ),
                   onPressed: () {},
                 ),
@@ -132,50 +133,58 @@ class _SubmitScreenState extends State<SubmitScreen> {
           body: Column(
             children: <Widget>[
               Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 12),
+                padding: const EdgeInsets.symmetric(
+                  horizontal: Dimens.pt12,
+                ),
                 child: TextField(
                   controller: titleEditingController,
-                  cursorColor: Colors.orange,
+                  cursorColor: Palette.orange,
                   autocorrect: false,
                   maxLength: 80,
                   decoration: const InputDecoration(
                     hintText: 'Title',
                     focusedBorder: UnderlineInputBorder(
-                      borderSide: BorderSide(color: Colors.orange),
+                      borderSide: BorderSide(color: Palette.orange),
                     ),
                   ),
                   onChanged: context.read<SubmitCubit>().onTitleChanged,
                 ),
               ),
               Padding(
-                padding: const EdgeInsets.symmetric(horizontal: 12),
+                padding: const EdgeInsets.symmetric(
+                  horizontal: Dimens.pt12,
+                ),
                 child: TextField(
                   enabled: textEditingController.text.isEmpty,
                   controller: urlEditingController,
-                  cursorColor: Colors.orange,
+                  cursorColor: Palette.orange,
                   autocorrect: false,
                   decoration: const InputDecoration(
                     hintText: 'Url',
                     focusedBorder: UnderlineInputBorder(
-                      borderSide: BorderSide(color: Colors.orange),
+                      borderSide: BorderSide(color: Palette.orange),
                     ),
                   ),
                   onChanged: context.read<SubmitCubit>().onUrlChanged,
                 ),
               ),
               const Padding(
-                padding: EdgeInsets.symmetric(vertical: 12),
+                padding: EdgeInsets.symmetric(
+                  vertical: Dimens.pt12,
+                ),
                 child: Center(
                   child: Text('or'),
                 ),
               ),
               Expanded(
                 child: Padding(
-                  padding: const EdgeInsets.symmetric(horizontal: 12),
+                  padding: const EdgeInsets.symmetric(
+                    horizontal: Dimens.pt12,
+                  ),
                   child: TextField(
                     enabled: urlEditingController.text.isEmpty,
                     controller: textEditingController,
-                    cursorColor: Colors.orange,
+                    cursorColor: Palette.orange,
                     maxLines: 200,
                     decoration: const InputDecoration(
                       hintText: 'Text',

lib/screens/web_view/web_view_screen.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:hacki/config/locator.dart';
 import 'package:hacki/repositories/repositories.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:webview_flutter/webview_flutter.dart';
 
 class WebViewScreen extends StatefulWidget {
@@ -24,7 +25,7 @@ class _WebViewScreenState extends State<WebViewScreen> {
         title: Text(
           humanize(widget.url),
           style: const TextStyle(
-            fontSize: 12,
+            fontSize: TextDimens.pt12,
           ),
           overflow: TextOverflow.ellipsis,
           textAlign: TextAlign.center,

lib/screens/widgets/comment_tile.dart

@@ -7,6 +7,7 @@ import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/models.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
 
 class CommentTile extends StatelessWidget {
@@ -18,7 +19,7 @@ class CommentTile extends StatelessWidget {
     this.onReplyTapped,
     this.onMoreTapped,
     this.onEditTapped,
-    this.onTimeMachineActivated,
+    this.onRightMoreTapped,
     this.opUsername,
     this.actionable = true,
     this.level = 0,
@@ -32,7 +33,7 @@ class CommentTile extends StatelessWidget {
   final Function(Comment)? onReplyTapped;
   final Function(Comment)? onMoreTapped;
   final Function(Comment)? onEditTapped;
-  final Function(Comment)? onTimeMachineActivated;
+  final Function(Comment)? onRightMoreTapped;
   final Function(String) onStoryLinkTapped;
 
   @override
@@ -67,8 +68,8 @@ class CommentTile extends StatelessWidget {
                                     SlidableAction(
                                       onPressed: (_) =>
                                           onReplyTapped?.call(comment),
-                                      backgroundColor: Colors.orange,
-                                      foregroundColor: Colors.white,
+                                      backgroundColor: Palette.orange,
+                                      foregroundColor: Palette.white,
                                       icon: Icons.message,
                                     ),
                                     if (context
@@ -80,29 +81,29 @@ class CommentTile extends StatelessWidget {
                                       SlidableAction(
                                         onPressed: (_) =>
                                             onEditTapped?.call(comment),
-                                        backgroundColor: Colors.orange,
-                                        foregroundColor: Colors.white,
+                                        backgroundColor: Palette.orange,
+                                        foregroundColor: Palette.white,
                                         icon: Icons.edit,
                                       ),
                                     SlidableAction(
                                       onPressed: (_) =>
                                           onMoreTapped?.call(comment),
-                                      backgroundColor: Colors.orange,
-                                      foregroundColor: Colors.white,
+                                      backgroundColor: Palette.orange,
+                                      foregroundColor: Palette.white,
                                       icon: Icons.more_horiz,
                                     ),
                                   ],
                                 )
                               : null,
-                          endActionPane: actionable && level != 0
+                          endActionPane: actionable
                               ? ActionPane(
                                   motion: const StretchMotion(),
                                   children: <Widget>[
                                     SlidableAction(
                                       onPressed: (_) =>
-                                          onTimeMachineActivated?.call(comment),
-                                      backgroundColor: Colors.orange,
-                                      foregroundColor: Colors.white,
+                                          onRightMoreTapped?.call(comment),
+                                      backgroundColor: Palette.orange,
+                                      foregroundColor: Palette.white,
                                       icon: Icons.av_timer,
                                     ),
                                   ],
@@ -111,7 +112,7 @@ class CommentTile extends StatelessWidget {
                           child: InkWell(
                             onTap: () {
                               if (actionable) {
-                                HapticFeedback.lightImpact();
+                                HapticFeedback.selectionClick();
                                 context.read<CollapseCubit>().collapse();
                               }
                             },
@@ -120,9 +121,9 @@ class CommentTile extends StatelessWidget {
                               children: <Widget>[
                                 Padding(
                                   padding: const EdgeInsets.only(
-                                    left: 6,
-                                    right: 6,
-                                    top: 6,
+                                    left: Dimens.pt6,
+                                    right: Dimens.pt6,
+                                    top: Dimens.pt6,
                                   ),
                                   child: Row(
                                     children: <Widget>[
@@ -145,7 +146,7 @@ class CommentTile extends StatelessWidget {
                                       Text(
                                         comment.postedDate,
                                         style: const TextStyle(
-                                          color: Colors.grey,
+                                          color: Palette.grey,
                                         ),
                                       ),
                                     ],
@@ -154,13 +155,14 @@ class CommentTile extends StatelessWidget {
                                 if (actionable && state.collapsed)
                                   Center(
                                     child: Padding(
-                                      padding:
-                                          const EdgeInsets.only(bottom: 12),
+                                      padding: const EdgeInsets.only(
+                                        bottom: Dimens.pt12,
+                                      ),
                                       child: Text(
                                         'collapsed '
                                         '(${state.collapsedCount + 1})',
                                         style: const TextStyle(
-                                          color: Colors.orangeAccent,
+                                          color: Palette.orangeAccent,
                                         ),
                                       ),
                                     ),
@@ -168,11 +170,13 @@ class CommentTile extends StatelessWidget {
                                 else if (comment.deleted)
                                   const Center(
                                     child: Padding(
-                                      padding: EdgeInsets.only(bottom: 12),
+                                      padding: EdgeInsets.only(
+                                        bottom: Dimens.pt12,
+                                      ),
                                       child: Text(
                                         'deleted',
                                         style: TextStyle(
-                                          color: Colors.grey,
+                                          color: Palette.grey,
                                         ),
                                       ),
                                     ),
@@ -180,11 +184,13 @@ class CommentTile extends StatelessWidget {
                                 else if (comment.dead)
                                   const Center(
                                     child: Padding(
-                                      padding: EdgeInsets.only(bottom: 12),
+                                      padding: EdgeInsets.only(
+                                        bottom: Dimens.pt12,
+                                      ),
                                       child: Text(
                                         'dead',
                                         style: TextStyle(
-                                          color: Colors.grey,
+                                          color: Palette.grey,
                                         ),
                                       ),
                                     ),
@@ -193,11 +199,13 @@ class CommentTile extends StatelessWidget {
                                     .contains(comment.by))
                                   const Center(
                                     child: Padding(
-                                      padding: EdgeInsets.only(bottom: 12),
+                                      padding: EdgeInsets.only(
+                                        bottom: Dimens.pt12,
+                                      ),
                                       child: Text(
                                         'blocked',
                                         style: TextStyle(
-                                          color: Colors.grey,
+                                          color: Palette.grey,
                                         ),
                                       ),
                                     ),
@@ -205,10 +213,10 @@ class CommentTile extends StatelessWidget {
                                 else
                                   Padding(
                                     padding: const EdgeInsets.only(
-                                      left: 8,
-                                      right: 8,
-                                      top: 6,
-                                      bottom: 12,
+                                      left: Dimens.pt8,
+                                      right: Dimens.pt8,
+                                      top: Dimens.pt6,
+                                      bottom: Dimens.pt12,
                                     ),
                                     child: comment is BuildableComment
                                         ? SelectableText.rich(
@@ -219,15 +227,15 @@ class CommentTile extends StatelessWidget {
                                               style: TextStyle(
                                                 fontSize: MediaQuery.of(context)
                                                         .textScaleFactor *
-                                                    15,
+                                                    TextDimens.pt15,
                                               ),
                                               linkStyle: TextStyle(
                                                 fontSize: MediaQuery.of(context)
                                                         .textScaleFactor *
-                                                    15,
+                                                    TextDimens.pt15,
                                                 decoration:
                                                     TextDecoration.underline,
-                                                color: Colors.orange,
+                                                color: Palette.orange,
                                               ),
                                               onOpen: (LinkableElement link) {
                                                 if (link.url.contains(
@@ -247,13 +255,13 @@ class CommentTile extends StatelessWidget {
                                             style: TextStyle(
                                               fontSize: MediaQuery.of(context)
                                                       .textScaleFactor *
-                                                  15,
+                                                  TextDimens.pt15,
                                             ),
                                             linkStyle: TextStyle(
                                               fontSize: MediaQuery.of(context)
                                                       .textScaleFactor *
-                                                  15,
-                                              color: Colors.orange,
+                                                  TextDimens.pt15,
+                                              color: Palette.orange,
                                             ),
                                             onOpen: (LinkableElement link) {
                                               if (link.url.contains(
@@ -268,7 +276,7 @@ class CommentTile extends StatelessWidget {
                                           ),
                                   ),
                                 const Divider(
-                                  height: 0,
+                                  height: Dimens.zero,
                                 ),
                               ],
                             ),
@@ -285,14 +293,14 @@ class CommentTile extends StatelessWidget {
 
                   final Color commentColor = prefState.showEyeCandy
                       ? color.withOpacity(commentBackgroundColorOpacity)
-                      : Colors.transparent;
+                      : Palette.transparent;
                   final bool isMyComment = myUsername == comment.by;
 
                   Widget? wrapper = child;
 
                   if (isMyComment && level == 0) {
                     return Container(
-                      color: Colors.orange.withOpacity(0.2),
+                      color: Palette.orange.withOpacity(0.2),
                       child: wrapper,
                     );
                   }
@@ -301,7 +309,9 @@ class CommentTile extends StatelessWidget {
                     final Color wrapperBorderColor = _getColor(i);
                     final bool shouldHighlight = isMyComment && i == level;
                     wrapper = Container(
-                      margin: const EdgeInsets.only(left: 12),
+                      margin: const EdgeInsets.only(
+                        left: Dimens.pt12,
+                      ),
                       decoration: BoxDecoration(
                         border: i != 0
                             ? Border(
@@ -311,7 +321,7 @@ class CommentTile extends StatelessWidget {
                               )
                             : null,
                         color: shouldHighlight
-                            ? Colors.orange.withOpacity(0.2)
+                            ? Palette.orange.withOpacity(0.2)
                             : commentColor,
                       ),
                       child: wrapper,

lib/screens/widgets/countdown_reminder.dart

@@ -7,6 +7,7 @@ import 'package:hacki/extensions/extensions.dart';
 import 'package:hacki/models/story.dart';
 import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/screens/screens.dart';
+import 'package:hacki/styles/styles.dart';
 
 class CountdownReminder extends StatefulWidget {
   const CountdownReminder({super.key});
@@ -95,9 +96,13 @@ class _CountDownReminderState extends State<CountdownReminder>
             animation: animationController,
             child: FadeIn(
               child: Material(
-                color: Colors.deepOrange,
+                color: Palette.deepOrange,
                 clipBehavior: Clip.hardEdge,
-                borderRadius: const BorderRadius.all(Radius.circular(4)),
+                borderRadius: const BorderRadius.all(
+                  Radius.circular(
+                    Dimens.pt4,
+                  ),
+                ),
                 child: InkWell(
                   onTap: () {
                     if (state.storyId != null) {
@@ -109,9 +114,8 @@ class _CountDownReminderState extends State<CountdownReminder>
                           showSnackBar(content: 'Something went wrong...');
                           return;
                         }
-                        final StoryScreenArgs args =
-                            StoryScreenArgs(story: story);
-                        goToStoryScreen(args: args);
+                        final ItemScreenArgs args = ItemScreenArgs(item: story);
+                        goToItemScreen(args: args);
 
                         context.read<ReminderCubit>().removeLastReadStoryId();
                       });
@@ -123,24 +127,24 @@ class _CountDownReminderState extends State<CountdownReminder>
                     children: <Widget>[
                       Padding(
                         padding: const EdgeInsets.only(
-                          left: 12,
-                          top: 10,
-                          right: 10,
+                          left: Dimens.pt12,
+                          top: Dimens.pt10,
+                          right: Dimens.pt10,
                         ),
                         child: Row(
                           children: const <Widget>[
                             Text(
                               'Pick up where you left off',
                               style: TextStyle(
-                                color: Colors.white,
-                                fontSize: 12,
+                                color: Palette.white,
+                                fontSize: TextDimens.pt12,
                               ),
                             ),
                             Spacer(),
                             Icon(
                               Icons.arrow_forward_ios,
-                              size: 12,
-                              color: Colors.white,
+                              size: TextDimens.pt12,
+                              color: Palette.white,
                             ),
                           ],
                         ),

lib/screens/widgets/custom_chip.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:hacki/styles/styles.dart';
 
 class CustomChip extends StatelessWidget {
   CustomChip({
@@ -15,16 +16,16 @@ class CustomChip extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return FilterChip(
-      shadowColor: Colors.transparent,
-      selectedShadowColor: Colors.transparent,
-      backgroundColor: Colors.transparent,
+      shadowColor: Palette.transparent,
+      selectedShadowColor: Palette.transparent,
+      backgroundColor: Palette.transparent,
       shape: const StadiumBorder(
-        side: BorderSide(color: Colors.orange),
+        side: BorderSide(color: Palette.orange),
       ),
       label: Text(label),
       selected: selected,
       onSelected: onSelected,
-      selectedColor: Colors.orange,
+      selectedColor: Palette.orange,
     );
   }
 }

lib/screens/widgets/custom_circular_progress_indicator.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:hacki/styles/styles.dart';
 
 /// Circular progress indicator with color.
 /// Changing `colorScheme`'s `primary` color doesn't work because it changes
@@ -17,7 +18,7 @@ class CustomCircularProgressIndicator extends StatelessWidget {
   Widget build(BuildContext context) {
     return CircularProgressIndicator(
       strokeWidth: strokeWidth,
-      valueColor: const AlwaysStoppedAnimation<Color>(Colors.orange),
+      valueColor: const AlwaysStoppedAnimation<Color>(Palette.orange),
     );
   }
 }

lib/screens/widgets/items_list_view.dart

@@ -7,6 +7,7 @@ import 'package:flutter_slidable/flutter_slidable.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/models/models.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';
 
@@ -18,6 +19,8 @@ class ItemsListView<T extends Item> extends StatelessWidget {
     required this.items,
     required this.onTap,
     required this.refreshController,
+    this.useCommentTile = false,
+    this.showCommentBy = false,
     this.enablePullDown = true,
     this.pinnable = false,
     this.markReadStories = false,
@@ -32,6 +35,8 @@ class ItemsListView<T extends Item> extends StatelessWidget {
           'onPinned cannot be null when pinnable is true',
         );
 
+  final bool useCommentTile;
+  final bool showCommentBy;
   final bool showWebPreview;
   final bool showMetadata;
   final bool enablePullDown;
@@ -76,8 +81,8 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                                 HapticFeedback.lightImpact();
                                 onPinned?.call(e);
                               },
-                              backgroundColor: Colors.orange,
-                              foregroundColor: Colors.white,
+                              backgroundColor: Palette.orange,
+                              foregroundColor: Palette.white,
                               icon: showWebPreview
                                   ? Icons.push_pin_outlined
                                   : null,
@@ -93,20 +98,38 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                     showWebPreview: showWebPreview,
                     showMetadata: showMetadata,
                     hasRead: markReadStories && hasRead,
-                    simpleTileFontSize: useConsistentFontSize ? 14 : 16,
+                    simpleTileFontSize: useConsistentFontSize
+                        ? TextDimens.pt14
+                        : TextDimens.pt16,
                   ),
                 ),
               ),
               if (!showWebPreview)
                 const Divider(
-                  height: 0,
+                  height: Dimens.zero,
                 ),
             ];
           } else if (e is Comment) {
+            if (useCommentTile) {
+              return <Widget>[
+                if (showWebPreview)
+                  const Divider(
+                    height: Dimens.zero,
+                  ),
+                _CommentTile(
+                  comment: e,
+                  onTap: () => onTap(e),
+                  fontSize: showWebPreview ? TextDimens.pt14 : TextDimens.pt16,
+                ),
+                const Divider(
+                  height: Dimens.zero,
+                ),
+              ];
+            }
             return <Widget>[
               FadeIn(
                 child: Padding(
-                  padding: const EdgeInsets.only(left: 6),
+                  padding: const EdgeInsets.only(left: Dimens.pt6),
                   child: InkWell(
                     onTap: () => onTap(e),
                     child: Padding(
@@ -117,10 +140,12 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                           if (e.deleted)
                             const Center(
                               child: Padding(
-                                padding: EdgeInsets.only(top: 6),
+                                padding: EdgeInsets.only(
+                                  top: Dimens.pt6,
+                                ),
                                 child: Text(
                                   'deleted',
-                                  style: TextStyle(color: Colors.grey),
+                                  style: TextStyle(color: Palette.grey),
                                 ),
                               ),
                             ),
@@ -131,14 +156,15 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                               Expanded(
                                 child: Padding(
                                   padding: const EdgeInsets.symmetric(
-                                    vertical: 8,
-                                    horizontal: 6,
+                                    vertical: Dimens.pt8,
+                                    horizontal: Dimens.pt6,
                                   ),
                                   child: Linkify(
-                                    text: e.text,
+                                    text:
+                                        '''${showCommentBy ? '${e.by}: ' : ''}${e.text}''',
                                     maxLines: 4,
                                     linkStyle: const TextStyle(
-                                      color: Colors.orange,
+                                      color: Palette.orange,
                                     ),
                                     onOpen: (LinkableElement link) =>
                                         LinkUtil.launch(link.url),
@@ -150,18 +176,18 @@ class ItemsListView<T extends Item> 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,
                           ),
                         ],
                       ),
@@ -170,7 +196,7 @@ class ItemsListView<T extends Item> extends StatelessWidget {
                 ),
               ),
               const Divider(
-                height: 0,
+                height: Dimens.zero,
               ),
             ];
           }
@@ -178,7 +204,7 @@ class ItemsListView<T extends Item> extends StatelessWidget {
           return <Widget>[Container()];
         }).expand((List<Widget> element) => element),
         const SizedBox(
-          height: 40,
+          height: Dimens.pt40,
         ),
       ],
     );
@@ -187,12 +213,14 @@ class ItemsListView<T extends Item> extends StatelessWidget {
       enablePullUp: true,
       enablePullDown: enablePullDown,
       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) {
@@ -203,7 +231,7 @@ class ItemsListView<T extends Item> extends StatelessWidget {
             body = const SizedBox.shrink();
           }
           return SizedBox(
-            height: 55,
+            height: height,
             child: Center(child: body),
           );
         },
@@ -215,3 +243,67 @@ class ItemsListView<T extends Item> extends StatelessWidget {
     );
   }
 }
+
+class _CommentTile extends StatelessWidget {
+  const _CommentTile({
+    Key? key,
+    required this.comment,
+    required this.onTap,
+    this.fontSize = 16,
+  }) : super(key: key);
+
+  final Comment comment;
+  final VoidCallback onTap;
+  final double fontSize;
+
+  @override
+  Widget build(BuildContext context) {
+    return InkWell(
+      onTap: onTap,
+      child: Padding(
+        padding: const EdgeInsets.only(
+          left: Dimens.pt12,
+        ),
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: <Widget>[
+            const SizedBox(
+              height: Dimens.pt8,
+            ),
+            Row(
+              children: <Widget>[
+                Expanded(
+                  child: Text(
+                    comment.text,
+                    style: TextStyle(
+                      fontSize: fontSize,
+                    ),
+                    overflow: TextOverflow.ellipsis,
+                    maxLines: 2,
+                  ),
+                ),
+              ],
+            ),
+            Row(
+              children: <Widget>[
+                Expanded(
+                  child: Text(
+                    comment.metadata,
+                    style: TextStyle(
+                      color: Palette.grey,
+                      fontSize: fontSize - 2,
+                    ),
+                    maxLines: 1,
+                  ),
+                ),
+              ],
+            ),
+            const SizedBox(
+              height: Dimens.pt8,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/screens/widgets/link_preview/link_preview.dart

@@ -5,6 +5,7 @@ import 'package:hacki/config/constants.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/screens/widgets/link_preview/link_view.dart';
 import 'package:hacki/screens/widgets/link_preview/web_analyzer.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 class LinkPreview extends StatefulWidget {
@@ -97,7 +98,7 @@ class LinkPreview extends StatefulWidget {
   final bool removeElevation;
 
   /// Box shadow for the card. Defaults to
-  /// `[BoxShadow(blurRadius: 3, color: Colors.grey)]`
+  /// `[BoxShadow(blurRadius: 3, color: Palette.grey)]`
   final List<BoxShadow>? boxShadow;
 
   final bool showMetadata;
@@ -163,11 +164,15 @@ class _LinkPreviewState extends State<LinkPreview> {
     return Container(
       decoration: BoxDecoration(
         color: widget.backgroundColor,
-        borderRadius: BorderRadius.circular(widget.borderRadius ?? 12),
+        borderRadius: BorderRadius.circular(
+          widget.borderRadius ?? Dimens.pt12,
+        ),
         boxShadow: widget.removeElevation
             ? <BoxShadow>[]
             : widget.boxShadow ??
-                <BoxShadow>[const BoxShadow(blurRadius: 3, color: Colors.grey)],
+                <BoxShadow>[
+                  const BoxShadow(blurRadius: 3, color: Palette.grey),
+                ],
       ),
       height: _height,
       child: LinkView(
@@ -194,19 +199,29 @@ class _LinkPreviewState extends State<LinkPreview> {
 
   @override
   Widget build(BuildContext context) {
+    const double screenWidthLowerBound = 428,
+        screenWidthUpperBound = 850,
+        picHeightLowerBound = 118,
+        picHeightUpperBound = 140,
+        smallPicHeight = 100,
+        picHeightFactor = 0.14;
     final double screenWidth = MediaQuery.of(context).size.width;
-    final bool showSmallerPreviewPic = screenWidth > 428.0 && screenWidth < 850;
-    final double _height = showSmallerPreviewPic
-        ? 100.0
-        : (MediaQuery.of(context).size.height * 0.14).clamp(118.0, 140.0);
+    final bool showSmallerPreviewPic = screenWidth > screenWidthLowerBound &&
+        screenWidth < screenWidthUpperBound;
+    final double height = showSmallerPreviewPic
+        ? smallPicHeight
+        : (MediaQuery.of(context).size.height * picHeightFactor)
+            .clamp(picHeightLowerBound, picHeightUpperBound);
 
     final Widget loadingWidget = widget.placeholderWidget ??
         Container(
-          height: _height,
+          height: height,
           width: MediaQuery.of(context).size.width,
           decoration: BoxDecoration(
-            borderRadius: BorderRadius.circular(widget.borderRadius ?? 12),
-            color: Colors.grey[200],
+            borderRadius: BorderRadius.circular(
+              widget.borderRadius ?? Dimens.pt12,
+            ),
+            color: Palette.grey[200],
           ),
           alignment: Alignment.center,
           child: const Text('Fetching data...'),
@@ -217,13 +232,13 @@ class _LinkPreviewState extends State<LinkPreview> {
     final WebInfo? info = _info as WebInfo?;
     loadedWidget = _info == null
         ? _buildLinkContainer(
-            _height,
+            height,
             title: _errorTitle,
             desc: _errorBody,
             imageUri: null,
           )
         : _buildLinkContainer(
-            _height,
+            height,
             title: _errorTitle,
             desc: WebAnalyzer.isNotEmpty(info!.description)
                 ? info.description

lib/screens/widgets/link_preview/link_view.dart

@@ -1,6 +1,7 @@
 import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:hacki/config/constants.dart';
+import 'package:hacki/styles/styles.dart';
 
 class LinkView extends StatelessWidget {
   const LinkView({
@@ -74,13 +75,13 @@ class LinkView extends StatelessWidget {
         final TextStyle _titleFontSize = titleTextStyle ??
             TextStyle(
               fontSize: computeTitleFontSize(layoutWidth),
-              color: Colors.black,
+              color: Palette.black,
               fontWeight: FontWeight.bold,
             );
         final TextStyle _bodyFontSize = bodyTextStyle ??
             TextStyle(
               fontSize: computeTitleFontSize(layoutWidth) - 1,
-              color: Colors.grey,
+              color: Palette.grey,
               fontWeight: FontWeight.w400,
             );
 

lib/screens/widgets/offline_banner.dart

@@ -3,6 +3,7 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/cubits/cubits.dart';
 import 'package:hacki/screens/widgets/link_preview/web_analyzer.dart';
+import 'package:hacki/styles/styles.dart';
 
 class OfflineBanner extends StatelessWidget {
   const OfflineBanner({
@@ -25,7 +26,7 @@ class OfflineBanner extends StatelessWidget {
               '${showExitButton ? 'Exit to fetch latest stories.' : ''}',
               textAlign: showExitButton ? TextAlign.left : TextAlign.center,
             ),
-            backgroundColor: Colors.orangeAccent.withOpacity(0.3),
+            backgroundColor: Palette.orangeAccent.withOpacity(0.3),
             actions: <Widget>[
               if (showExitButton)
                 TextButton(
@@ -46,7 +47,7 @@ class OfflineBanner extends StatelessWidget {
                               child: const Text(
                                 'Yes',
                                 style: TextStyle(
-                                  color: Colors.red,
+                                  color: Palette.red,
                                 ),
                               ),
                             ),

lib/screens/widgets/onboarding_view.dart

@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
 import 'package:hacki/config/constants.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:hacki/utils/utils.dart';
 
 class OnboardingView extends StatefulWidget {
@@ -16,34 +17,35 @@ class _OnboardingViewState extends State<OnboardingView> {
   final Throttle throttle = Throttle(delay: _throttleDelay);
 
   static const Duration _throttleDelay = Duration(milliseconds: 100);
+  static const double _screenshotHeight = 550;
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         backgroundColor: Theme.of(context).brightness == Brightness.light
-            ? Colors.orange
+            ? Palette.orange
             : Theme.of(context).canvasColor,
-        elevation: 0,
+        elevation: Dimens.zero,
         leading: IconButton(
           icon: const Icon(
             Icons.close,
-            color: Colors.white,
+            color: Palette.white,
           ),
           onPressed: () => Navigator.pop(context),
         ),
       ),
       backgroundColor: Theme.of(context).brightness == Brightness.light
-          ? Colors.orange
+          ? Palette.orange
           : null,
       body: Stack(
         children: <Widget>[
           Positioned(
-            top: 40,
-            left: 0,
-            right: 0,
+            top: Dimens.pt40,
+            left: Dimens.zero,
+            right: Dimens.zero,
             child: SizedBox(
-              height: 550,
+              height: _screenshotHeight,
               child: PageView(
                 controller: pageController,
                 scrollDirection: Axis.vertical,
@@ -65,9 +67,9 @@ class _OnboardingViewState extends State<OnboardingView> {
             ),
           ),
           Positioned(
-            bottom: 40,
-            left: 0,
-            right: 0,
+            bottom: Dimens.pt40,
+            left: Dimens.zero,
+            right: Dimens.zero,
             child: ElevatedButton(
               onPressed: () {
                 HapticFeedback.lightImpact();
@@ -84,13 +86,15 @@ class _OnboardingViewState extends State<OnboardingView> {
               },
               style: ElevatedButton.styleFrom(
                 shape: const CircleBorder(),
-                primary: Colors.orange,
-                padding: const EdgeInsets.all(18),
+                primary: Palette.orange,
+                padding: const EdgeInsets.all(
+                  Dimens.pt18,
+                ),
               ),
               child: const Icon(
                 Icons.arrow_drop_down_circle_outlined,
-                size: 24,
-                color: Colors.white,
+                size: TextDimens.pt24,
+                color: Palette.white,
               ),
             ),
           ),
@@ -110,25 +114,27 @@ class _PageViewChild extends StatelessWidget {
   final String path;
   final String description;
 
+  static const double _height = 400;
+
   @override
   Widget build(BuildContext context) {
     return Column(
       children: <Widget>[
         SizedBox(
-          height: 400,
+          height: _height,
           child: Image.asset(path),
         ),
         Padding(
           padding: const EdgeInsets.symmetric(
-            horizontal: 24,
-            vertical: 24,
+            horizontal: Dimens.pt24,
+            vertical: Dimens.pt24,
           ),
           child: Text(
             description,
             textAlign: TextAlign.center,
             style: const TextStyle(
-              fontSize: 16,
-              color: Colors.white,
+              fontSize: TextDimens.pt16,
+              color: Palette.white,
             ),
           ),
         ),

lib/screens/widgets/story_tile.dart

@@ -5,6 +5,7 @@ import 'package:hacki/blocs/blocs.dart';
 import 'package:hacki/config/constants.dart';
 import 'package:hacki/models/models.dart';
 import 'package:hacki/screens/widgets/widgets.dart';
+import 'package:hacki/styles/styles.dart';
 import 'package:shimmer/shimmer.dart';
 
 class StoryTile extends StatelessWidget {
@@ -28,18 +29,25 @@ class StoryTile extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     if (showWebPreview) {
+      const double screenWidthLowerBound = 428,
+          screenWidthUpperBound = 850,
+          picHeightLowerBound = 118,
+          picHeightUpperBound = 140,
+          smallPicHeight = 100,
+          picHeightFactor = 0.14;
       final double screenWidth = MediaQuery.of(context).size.width;
-      final bool showSmallerPreviewPic =
-          screenWidth > 428.0 && screenWidth < 850;
+      final bool showSmallerPreviewPic = screenWidth > screenWidthLowerBound &&
+          screenWidth < screenWidthUpperBound;
       final double height = showSmallerPreviewPic
-          ? 100.0
-          : (MediaQuery.of(context).size.height * 0.14).clamp(118.0, 140.0);
+          ? smallPicHeight
+          : (MediaQuery.of(context).size.height * picHeightFactor)
+              .clamp(picHeightLowerBound, picHeightUpperBound);
 
       return TapDownWrapper(
         onTap: onTap,
         child: Padding(
           padding: const EdgeInsets.symmetric(
-            horizontal: 12,
+            horizontal: Dimens.pt12,
           ),
           child: AbsorbPointer(
             child: LinkPreview(
@@ -50,66 +58,77 @@ class StoryTile extends StatelessWidget {
                 child: SizedBox(
                   height: height,
                   child: Shimmer.fromColors(
-                    baseColor: Colors.orange,
-                    highlightColor: Colors.orangeAccent,
+                    baseColor: Palette.orange,
+                    highlightColor: Palette.orangeAccent,
                     child: Row(
                       crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
                         Padding(
                           padding: const EdgeInsets.only(
-                            right: 5,
-                            bottom: 5,
-                            top: 5,
+                            right: Dimens.pt5,
+                            bottom: Dimens.pt5,
+                            top: Dimens.pt5,
                           ),
                           child: Container(
                             height: height,
                             width: height,
-                            color: Colors.white,
+                            color: Palette.white,
                           ),
                         ),
                         Expanded(
                           flex: 4,
                           child: Padding(
-                            padding: const EdgeInsets.only(left: 4, top: 6),
+                            padding: const EdgeInsets.only(
+                              left: Dimens.pt4,
+                              top: Dimens.pt6,
+                            ),
                             child: Column(
                               crossAxisAlignment: CrossAxisAlignment.start,
                               children: <Widget>[
                                 Container(
                                   width: double.infinity,
-                                  height: 14,
-                                  color: Colors.white,
+                                  height: Dimens.pt14,
+                                  color: Palette.white,
                                 ),
                                 const Padding(
-                                  padding: EdgeInsets.symmetric(vertical: 4),
+                                  padding: EdgeInsets.symmetric(
+                                    vertical: Dimens.pt4,
+                                  ),
                                 ),
                                 Container(
                                   width: double.infinity,
-                                  height: 10,
-                                  color: Colors.white,
+                                  height: Dimens.pt10,
+                                  color: Palette.white,
                                 ),
                                 const Padding(
-                                  padding: EdgeInsets.symmetric(vertical: 3),
+                                  padding: EdgeInsets.symmetric(
+                                    vertical: Dimens.pt3,
+                                  ),
                                 ),
                                 Container(
                                   width: double.infinity,
-                                  height: 10,
-                                  color: Colors.white,
+                                  height: Dimens.pt10,
+                                  color: Palette.white,
                                 ),
                                 const Padding(
-                                  padding: EdgeInsets.symmetric(vertical: 3),
+                                  padding: EdgeInsets.symmetric(
+                                    vertical: Dimens.pt3,
+                                  ),
                                 ),
                                 Container(
                                   width: double.infinity,
-                                  height: 10,
-                                  color: Colors.white,
+                                  height: Dimens.pt10,
+                                  color: Palette.white,
                                 ),
                                 const Padding(
-                                  padding: EdgeInsets.symmetric(vertical: 3),
+                                  padding: EdgeInsets.symmetric(
+                                    vertical: Dimens.pt3,
+                                  ),
                                 ),
                                 Container(
-                                  width: 40,
-                                  height: 10,
-                                  color: Colors.white,
+                                  width: Dimens.pt40,
+                                  height: Dimens.pt10,
+                                  color: Palette.white,
                                 ),
                               ],
                             ),
@@ -121,14 +140,14 @@ class StoryTile extends StatelessWidget {
                 ),
               ),
               errorImage: Constants.hackerNewsLogoLink,
-              backgroundColor: Colors.transparent,
-              borderRadius: 0,
+              backgroundColor: Palette.transparent,
+              borderRadius: Dimens.zero,
               removeElevation: true,
-              bodyMaxLines: height == 100 ? 3 : 4,
+              bodyMaxLines: height == smallPicHeight ? 3 : 4,
               errorTitle: story.title,
               titleStyle: TextStyle(
                 color: hasRead
-                    ? Colors.grey[500]
+                    ? Palette.grey[500]
                     : Theme.of(context).textTheme.subtitle1!.color,
                 fontWeight: FontWeight.bold,
               ),
@@ -141,12 +160,12 @@ class StoryTile extends StatelessWidget {
       return InkWell(
         onTap: onTap,
         child: Padding(
-          padding: const EdgeInsets.only(left: 12),
+          padding: const EdgeInsets.only(left: Dimens.pt12),
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
               const SizedBox(
-                height: 8,
+                height: Dimens.pt8,
               ),
               Row(
                 children: <Widget>[
@@ -154,7 +173,7 @@ class StoryTile extends StatelessWidget {
                     child: Text(
                       story.title,
                       style: TextStyle(
-                        color: hasRead ? Colors.grey[500] : null,
+                        color: hasRead ? Palette.grey[500] : null,
                         fontSize: simpleTileFontSize,
                       ),
                     ),
@@ -168,7 +187,7 @@ class StoryTile extends StatelessWidget {
                       child: Text(
                         story.metadata,
                         style: TextStyle(
-                          color: Colors.grey,
+                          color: Palette.grey,
                           fontSize: simpleTileFontSize - 2,
                         ),
                         maxLines: 1,
@@ -177,7 +196,7 @@ class StoryTile extends StatelessWidget {
                   ],
                 ),
               const SizedBox(
-                height: 8,
+                height: Dimens.pt8,
               ),
             ],
           ),

lib/screens/widgets/tap_down_wrapper.dart

@@ -18,7 +18,6 @@ class _TapDownWrapperState extends State<TapDownWrapper>
     with SingleTickerProviderStateMixin {
   late AnimationController controller;
   Tween<double> tween = Tween<double>(begin: 1, end: 0.95);
-  double scale = 1;
 
   @override
   void initState() {

lib/styles/dimens.dart

@@ -0,0 +1,38 @@
+abstract class Dimens {
+  static const double zero = 0;
+  static const double pt2 = 2;
+  static const double pt3 = 3;
+  static const double pt4 = 4;
+  static const double pt5 = 5;
+  static const double pt6 = 6;
+  static const double pt8 = 8;
+  static const double pt10 = 10;
+  static const double pt12 = 12;
+  static const double pt14 = 14;
+  static const double pt16 = 16;
+  static const double pt18 = 18;
+  static const double pt20 = 20;
+  static const double pt24 = 24;
+  static const double pt36 = 36;
+  static const double pt40 = 40;
+  static const double pt48 = 48;
+  static const double pt50 = 50;
+  static const double pt64 = 64;
+  static const double pt100 = 100;
+  static const double pt120 = 120;
+}
+
+abstract class TextDimens {
+  static const double pt6 = 6;
+  static const double pt8 = 8;
+  static const double pt10 = 10;
+  static const double pt12 = 12;
+  static const double pt14 = 14;
+  static const double pt15 = 15;
+  static const double pt16 = 16;
+  static const double pt18 = 18;
+  static const double pt20 = 20;
+  static const double pt24 = 24;
+  static const double pt26 = 26;
+  static const double pt36 = 36;
+}

lib/styles/palette.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+
+abstract class Palette {
+  static const Color black = Colors.black;
+
+  static const Color black26 = Colors.black26;
+
+  static const Color white = Colors.white;
+
+  static const MaterialColor grey = Colors.grey;
+
+  static const MaterialColor orange = Colors.orange;
+
+  static const Color orangeAccent = Colors.orangeAccent;
+
+  static const MaterialColor deepOrange = Colors.deepOrange;
+
+  static const MaterialColor red = Colors.red;
+
+  static const Color transparent = Colors.transparent;
+}

lib/styles/styles.dart

@@ -0,0 +1,2 @@
+export 'dimens.dart';
+export 'palette.dart';

lib/utils/link_util.dart

@@ -6,6 +6,7 @@ import 'package:hacki/config/locator.dart';
 import 'package:hacki/main.dart';
 import 'package:hacki/repositories/repositories.dart';
 import 'package:hacki/screens/screens.dart' show WebViewScreen;
+import 'package:hacki/styles/styles.dart';
 import 'package:url_launcher/url_launcher.dart';
 
 abstract class LinkUtil {
@@ -56,7 +57,7 @@ abstract class LinkUtil {
                   options: ChromeSafariBrowserClassOptions(
                     ios: IOSSafariOptions(
                       entersReaderIfAvailable: useReader,
-                      preferredControlTintColor: Colors.orange,
+                      preferredControlTintColor: Palette.orange,
                     ),
                   ),
                 )

pubspec.lock

@@ -7,7 +7,7 @@ packages:
       name: _fe_analyzer_shared
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "39.0.0"
+    version: "40.0.0"
   adaptive_theme:
     dependency: "direct main"
     description:
@@ -21,14 +21,14 @@ packages:
       name: analyzer
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.0.0"
+    version: "4.1.0"
   args:
     dependency: transitive
     description:
       name: args
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.3.0"
+    version: "2.3.1"
   async:
     dependency: transitive
     description:
@@ -42,7 +42,7 @@ packages:
       name: badges
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.0.3"
   bloc:
     dependency: "direct main"
     description:
@@ -126,56 +126,56 @@ packages:
       name: connectivity_plus
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.3.0"
+    version: "2.3.5"
   connectivity_plus_linux:
     dependency: transitive
     description:
       name: connectivity_plus_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   connectivity_plus_macos:
     dependency: transitive
     description:
       name: connectivity_plus_macos
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.2"
+    version: "1.2.4"
   connectivity_plus_platform_interface:
     dependency: transitive
     description:
       name: connectivity_plus_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.1"
   connectivity_plus_web:
     dependency: transitive
     description:
       name: connectivity_plus_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.2"
   connectivity_plus_windows:
     dependency: transitive
     description:
       name: connectivity_plus_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.2.2"
   convert:
     dependency: transitive
     description:
       name: convert
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.1"
+    version: "3.0.2"
   coverage:
     dependency: transitive
     description:
       name: coverage
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.0"
+    version: "1.3.2"
   crypto:
     dependency: transitive
     description:
@@ -189,14 +189,14 @@ packages:
       name: csslib
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.17.1"
+    version: "0.17.2"
   dbus:
     dependency: transitive
     description:
       name: dbus
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.7.3"
+    version: "0.7.5"
   diff_match_patch:
     dependency: transitive
     description:
@@ -247,7 +247,7 @@ packages:
       name: ffi
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.2"
+    version: "2.0.1"
   file:
     dependency: transitive
     description:
@@ -273,7 +273,7 @@ packages:
       name: flutter_blurhash
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.6.8"
+    version: "0.7.0"
   flutter_cache_manager:
     dependency: "direct main"
     description:
@@ -315,14 +315,14 @@ packages:
       name: flutter_local_notifications
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "9.5.2"
+    version: "9.6.1"
   flutter_local_notifications_linux:
     dependency: transitive
     description:
       name: flutter_local_notifications_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.4.2"
+    version: "0.5.0+1"
   flutter_local_notifications_platform_interface:
     dependency: transitive
     description:
@@ -385,7 +385,7 @@ packages:
       name: flutter_slidable
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.2.1"
+    version: "1.3.0"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -409,7 +409,7 @@ packages:
       name: frontend_server_client
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.2"
+    version: "2.1.3"
   gbk_codec:
     dependency: "direct main"
     description:
@@ -430,14 +430,14 @@ packages:
       name: glob
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.1.0"
   hive:
     dependency: "direct main"
     description:
       name: hive
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.0"
+    version: "2.2.2"
   html:
     dependency: "direct main"
     description:
@@ -465,14 +465,14 @@ packages:
       name: http_multi_server
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.2.0"
+    version: "3.2.1"
   http_parser:
     dependency: transitive
     description:
       name: http_parser
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.0.0"
+    version: "4.0.1"
   intl:
     dependency: "direct main"
     description:
@@ -577,14 +577,14 @@ packages:
       name: octo_image
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.1"
+    version: "1.0.2"
   package_config:
     dependency: transitive
     description:
       name: package_config
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.2"
+    version: "2.1.0"
   path:
     dependency: "direct main"
     description:
@@ -598,28 +598,28 @@ packages:
       name: path_provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.10"
+    version: "2.0.11"
   path_provider_android:
     dependency: "direct main"
     description:
       name: path_provider_android
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.14"
+    version: "2.0.15"
   path_provider_ios:
     dependency: "direct main"
     description:
       name: path_provider_ios
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.9"
+    version: "2.0.10"
   path_provider_linux:
     dependency: transitive
     description:
       name: path_provider_linux
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.1.6"
+    version: "2.1.7"
   path_provider_macos:
     dependency: transitive
     description:
@@ -640,7 +640,7 @@ packages:
       name: path_provider_windows
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.6"
+    version: "2.1.0"
   pedantic:
     dependency: transitive
     description:
@@ -675,7 +675,7 @@ packages:
       name: pool
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.5.0"
+    version: "1.5.1"
   process:
     dependency: transitive
     description:
@@ -689,7 +689,7 @@ packages:
       name: provider
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.2"
+    version: "6.0.3"
   pub_semver:
     dependency: transitive
     description:
@@ -733,21 +733,21 @@ packages:
       name: rxdart
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "0.27.3"
+    version: "0.27.4"
   sembast:
     dependency: "direct main"
     description:
       name: sembast
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.2.0"
+    version: "3.2.0+1"
   share_plus:
     dependency: "direct main"
     description:
       name: share_plus
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "4.0.8"
+    version: "4.0.9"
   share_plus_linux:
     dependency: transitive
     description:
@@ -845,28 +845,28 @@ packages:
       name: shelf
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   shelf_packages_handler:
     dependency: transitive
     description:
       name: shelf_packages_handler
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.0.0"
+    version: "3.0.1"
   shelf_static:
     dependency: transitive
     description:
       name: shelf_static
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.1.0"
+    version: "1.1.1"
   shelf_web_socket:
     dependency: transitive
     description:
       name: shelf_web_socket
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.1"
+    version: "1.0.2"
   shimmer:
     dependency: "direct main"
     description:
@@ -997,7 +997,7 @@ packages:
       name: typed_data
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.3.0"
+    version: "1.3.1"
   universal_platform:
     dependency: "direct main"
     description:
@@ -1011,7 +1011,7 @@ packages:
       name: url_launcher
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.1.3"
+    version: "6.1.4"
   url_launcher_android:
     dependency: transitive
     description:
@@ -1025,7 +1025,7 @@ packages:
       name: url_launcher_ios
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "6.0.16"
+    version: "6.0.17"
   url_launcher_linux:
     dependency: transitive
     description:
@@ -1046,14 +1046,14 @@ packages:
       name: url_launcher_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.5"
+    version: "2.1.0"
   url_launcher_web:
     dependency: transitive
     description:
       name: url_launcher_web
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.0.11"
+    version: "2.0.12"
   url_launcher_windows:
     dependency: transitive
     description:
@@ -1144,7 +1144,7 @@ packages:
       name: webkit_inspection_protocol
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.0.1"
+    version: "1.1.0"
   webview_flutter:
     dependency: "direct main"
     description:
@@ -1158,28 +1158,28 @@ packages:
       name: webview_flutter_android
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.8.8"
+    version: "2.8.14"
   webview_flutter_platform_interface:
     dependency: transitive
     description:
       name: webview_flutter_platform_interface
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "1.8.1"
+    version: "1.9.1"
   webview_flutter_wkwebview:
     dependency: transitive
     description:
       name: webview_flutter_wkwebview
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.7.5"
+    version: "2.8.1"
   win32:
     dependency: transitive
     description:
       name: win32
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "2.5.2"
+    version: "2.7.0"
   workmanager:
     dependency: "direct main"
     description:
@@ -1200,14 +1200,14 @@ packages:
       name: xml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "5.4.1"
+    version: "6.1.0"
   yaml:
     dependency: transitive
     description:
       name: yaml
       url: "https://pub.dartlang.org"
     source: hosted
-    version: "3.1.0"
+    version: "3.1.1"
 sdks:
   dart: ">=2.17.0 <3.0.0"
   flutter: ">=3.0.0"

pubspec.yaml

@@ -1,6 +1,6 @@
 name: hacki
 description: A Hacker News reader.
-version: 0.2.20+62
+version: 0.2.23+65
 publish_to: none
 
 environment: