feat(reels): created a separate page to watch reels

Added localization support for `rich text`.

Did some minor tweaks, improvements and fixes.

.gitignore

@@ -13,6 +13,9 @@
 .svn/
 migrate_working_dir/
 
+# Generated files
+*.g.dart
+
 # IntelliJ related
 *.iml
 *.ipr

build.yaml

@@ -16,4 +16,15 @@ targets:
           checked: true
           explicit_to_json: true
           field_rename: snake
-          include_if_null: false
+          include_if_null: false
+      slang_build_runner:
+        options:
+          base_locale: en
+          fallback_strategy: base_locale
+          input_directory: lib/l10n/slang
+          input_file_pattern: .arb
+          output_directory: lib/l10n/slang
+          output_file_name: translations.g.dart
+          output_format: single_file
+          locale_handling: true
+          flutter_integration: true

lib/app/routes/routes.dart

@@ -374,7 +374,7 @@ GoRouter router(AppBloc appBloc) => GoRouter(
                   path: '/reels',
                   pageBuilder: (context, state) {
                     return CustomTransitionPage(
-                      child: const ReelsView(),
+                      child: const ReelsPage(),
                       transitionsBuilder:
                           (context, animation, secondaryAnimation, child) {
                         return FadeTransition(

lib/app/view/app_view.dart

@@ -13,20 +13,7 @@ class AppView extends StatelessWidget {
     return MaterialApp.router(
       debugShowCheckedModeBanner: false,
       title: 'Instagram Clone',
-      // home: const ChatPage(
-      //   chatId: '6db9b9ca-d1ad-47d3-961f-7b3f5357edd8',
-      //   chat: ChatInbox(
-      //     id: '6db9b9ca-d1ad-47d3-961f-7b3f5357edd8',
-      //     participant: User(
-      //       id: 'f918043c-30e0-4f86-9894-34e6844d4e8f',
-      //       username: 'emo.official',
-      //       avatarUrl:
-      //           'https://wefeasvyrksvvywqgchk.supabase.co/storage/v1/object/sign/avatars/2023-12-06T00:50:45.298421.jpg?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1cmwiOiJhdmF0YXJzLzIwMjMtMTItMDZUMDA6NTA6NDUuMjk4NDIxLmpwZyIsImlhdCI6MTcwMTgwMjI0NywiZXhwIjoyMDE3MTYyMjQ3fQ.-Jt3JWJV1lWU4dli0zy0uNEapCTzmnq6Sb9wtdCgN9M',
-      //     ),
-      //   ),
-      // ),
       routerConfig: router(context.read<AppBloc>()),
-      // home: const TestPageInViewNotifier(),
       builder: (context, child) {
         return Stack(
           children: [
@@ -48,7 +35,7 @@ class AppView extends StatelessWidget {
         useMaterial3ErrorColors: true,
         appBarStyle: FlexAppBarStyle.scaffoldBackground,
       ).copyWith(
-        // textTheme: const AppTheme().textTheme,
+        textTheme: const AppTheme().textTheme,
         iconTheme: const IconThemeData(color: Colors.black),
         bottomNavigationBarTheme: const BottomNavigationBarThemeData(
           type: BottomNavigationBarType.fixed,

lib/bootstrap.dart

@@ -7,6 +7,7 @@ import 'package:firebase_messaging/firebase_messaging.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_instagram_offline_first_clone/firebase_options_prod.dart';
+import 'package:flutter_instagram_offline_first_clone/l10n/slang/translations.g.dart';
 import 'package:hydrated_bloc/hydrated_bloc.dart';
 import 'package:path_provider/path_provider.dart';
 import 'package:persistent_storage/persistent_storage.dart';
@@ -25,8 +26,8 @@ class AppBlocObserver extends BlocObserver {
 
   @override
   void onError(BlocBase<dynamic> bloc, Object error, StackTrace stackTrace) {
-    super.onError(bloc, error, stackTrace);
     log('onError ${bloc.runtimeType}', error: error, stackTrace: stackTrace);
+    super.onError(bloc, error, stackTrace);
   }
 }
 
@@ -51,6 +52,9 @@ Future<void> bootstrap(
     () async {
       WidgetsFlutterBinding.ensureInitialized();
 
+      LocaleSettings.useDeviceLocale();
+      LocaleSettings.setLocale(AppLocale.en);
+
       await Firebase.initializeApp(
         options: DefaultFirebaseOptions.currentPlatform,
       );
@@ -80,11 +84,13 @@ Future<void> bootstrap(
       await remoteConfig.init();
 
       runApp(
-        await builder(
-          powerSyncRepository,
-          firebaseMessaging,
-          sharedPreferences,
-          remoteConfig,
+        TranslationProvider(
+          child: await builder(
+            powerSyncRepository,
+            firebaseMessaging,
+            sharedPreferences,
+            remoteConfig,
+          ),
         ),
       );
     },

lib/chats/chat/view/chat_page.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: deprecated_member_use
+
 import 'dart:ui' as ui;
 
 import 'package:app_ui/app_ui.dart';
@@ -40,9 +42,17 @@ class ChatView extends StatefulWidget {
 }
 
 class _ChatViewState extends State<ChatView> {
-  late final _messageInputController = MessageInputController();
-  final _scrollController = ScrollController();
-  final _focusNode = FocusNode();
+  late MessageInputController _messageInputController;
+  late ScrollController _scrollController;
+  late FocusNode _focusNode;
+
+  @override
+  void initState() {
+    super.initState();
+    _messageInputController = MessageInputController();
+    _scrollController = ScrollController();
+    _focusNode = FocusNode();
+  }
 
   Future<MessageAction?> onMessageTap(
     TapUpDetails details,
@@ -80,12 +90,16 @@ class _ChatViewState extends State<ChatView> {
                 title: Text('Edit'),
               ),
             ),
-          const PopupMenuItem(
+          PopupMenuItem(
             value: MessageAction.delete,
             child: ListTile(
               contentPadding: EdgeInsets.zero,
-              leading: Icon(Icons.delete_outlined),
-              title: Text('Delete'),
+              leading: Assets.icons.trash.svg(
+                color: context.adaptiveColor,
+                height: AppSize.iconSizeMedium,
+                width: AppSize.iconSizeMedium,
+              ),
+              title: const Text('Delete'),
             ),
           ),
         ],
@@ -113,9 +127,9 @@ class _ChatViewState extends State<ChatView> {
 
   @override
   void dispose() {
-    _scrollController.dispose();
-    _focusNode.dispose();
     _messageInputController.dispose();
+    _focusNode.dispose();
+    _scrollController.dispose();
     super.dispose();
   }
 
@@ -560,7 +574,7 @@ class ChatAppBar extends StatelessWidget implements PreferredSizeWidget {
         leading: UserStoriesAvatar(
           author: participant,
           enableUnactiveBorder: false,
-          radius: 19,
+          withAdaptiveBorder: false,
         ),
       ),
       bottom: const PreferredSize(

lib/chats/chat/widgets/message_bubble.dart

@@ -1,4 +1,4 @@
-// ignore_for_file: deprecated_member_use_from_same_package
+// ignore_for_file: deprecated_member_use
 // ignore_for_file: avoid_positional_boolean_parameters
 
 import 'dart:math' as math;
@@ -258,7 +258,7 @@ class MessageBubbleContent extends StatelessWidget {
                                     if (sharedPost.media.length > 1) {
                                       return const Icon(
                                         Icons.layers,
-                                        size: 36,
+                                        size: AppSize.iconSizeBig,
                                         shadows: [
                                           Shadow(
                                             blurRadius: 2,
@@ -401,7 +401,7 @@ class MessageBubbleContent extends StatelessWidget {
                                         if (sharedPost.media.length > 1) {
                                           return const Icon(
                                             Icons.layers,
-                                            size: 36,
+                                            size: AppSize.iconSizeBig,
                                             shadows: [
                                               Shadow(
                                                 blurRadius: 2,
@@ -558,13 +558,13 @@ class MessageStatuses extends StatelessWidget {
           if (message.isRead)
             Assets.icons.check.svg(
               color: Colors.white,
-              height: 20,
-              width: 20,
+              height: AppSize.iconSizeSmall,
+              width: AppSize.iconSizeSmall,
             )
           else
             const Icon(
               Icons.check,
-              size: 20,
+              size: AppSize.iconSizeSmall,
               color: Colors.white,
             ),
         ],

lib/chats/view/chats_page.dart

@@ -1,3 +1,5 @@
+// ignore_for_file: deprecated_member_use
+
 import 'package:app_ui/app_ui.dart';
 import 'package:chats_repository/chats_repository.dart';
 import 'package:flutter/material.dart';
@@ -68,7 +70,7 @@ class ChatsAppBar extends StatelessWidget {
                   ),
             );
           },
-          child: const Icon(Icons.add),
+          child: const Icon(Icons.add,size: AppSize.iconSize),
         ),
       ],
     );
@@ -107,10 +109,8 @@ class ChatsEmpty extends StatelessWidget {
             children: [
               Transform.flip(
                 flipX: true,
-                child: const Icon(
-                  Icons.message_outlined,
-                  size: 86,
-                ),
+                child: Assets.icons.chatCircle
+                    .svg(color: context.adaptiveColor, height: 86, width: 86),
               ),
               const SizedBox(height: AppSpacing.md),
               Text(

lib/chats/widgets/chat_inbox_tile.dart

@@ -36,6 +36,7 @@ class ChatInboxTile extends StatelessWidget {
       leading: UserStoriesAvatar(
         author: participant,
         enableUnactiveBorder: false,
+        withAdaptiveBorder: false,
       ),
       title: Text(participant.fullName ?? participant.username ?? ''),
       subtitle: Text(chat.lastMessage ?? 'No last messages'),

lib/chats/widgets/search_users.dart

@@ -60,7 +60,8 @@ class _SearchUsersState extends State<SearchUsers> {
             contentPadding: EdgeInsets.zero,
             onTap: () =>
                 context.pop(widget.returnUser ? user.toJson() : user.id),
-            leading: UserStoriesAvatar(author: user),
+            leading:
+                UserStoriesAvatar(author: user, enableUnactiveBorder: false),
             title: Text(user.fullName!),
           );
         },

lib/comments/view/comments_page.dart

@@ -4,7 +4,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_instagram_offline_first_clone/app/app.dart';
 import 'package:flutter_instagram_offline_first_clone/comments/bloc/comments_bloc.dart';
 import 'package:flutter_instagram_offline_first_clone/comments/controller/comments_controller.dart';
-import 'package:flutter_instagram_offline_first_clone/feed/feed.dart';
 import 'package:flutter_instagram_offline_first_clone/l10n/l10n.dart';
 import 'package:flutter_instagram_offline_first_clone/stories/stories.dart';
 import 'package:go_router/go_router.dart';
@@ -14,14 +13,12 @@ import 'package:shared/shared.dart';
 
 class CommentsPage extends StatelessWidget {
   const CommentsPage({
-    required this.bloc,
     required this.post,
     required this.scrollController,
     required this.scrollableSheetController,
     super.key,
   });
 
-  final FeedBloc bloc;
   final PostBlock post;
   final ScrollController scrollController;
   final DraggableScrollableController scrollableSheetController;
@@ -34,7 +31,6 @@ class CommentsPage extends StatelessWidget {
       child: RepositoryProvider.value(
         value: CommentsController(),
         child: CommentsView(
-          bloc: bloc,
           post: post,
           scrollController: scrollController,
           scrollableSheetController: scrollableSheetController,
@@ -46,14 +42,12 @@ class CommentsPage extends StatelessWidget {
 
 class CommentsView extends StatelessWidget {
   const CommentsView({
-    required this.bloc,
     required this.post,
     required this.scrollController,
     required this.scrollableSheetController,
     super.key,
   });
 
-  final FeedBloc bloc;
   final PostBlock post;
   final ScrollController scrollController;
   final DraggableScrollableController scrollableSheetController;
@@ -68,7 +62,6 @@ class CommentsView extends StatelessWidget {
         controller: scrollableSheetController,
       ),
       body: CommentsListView(
-        bloc: bloc,
         post: post,
         scrollController: scrollController,
       ),
@@ -114,13 +107,11 @@ class TextEmoji extends StatelessWidget {
 
 class CommentsListView extends StatelessWidget {
   const CommentsListView({
-    required this.bloc,
     required this.post,
     required this.scrollController,
     super.key,
   });
 
-  final FeedBloc bloc;
   final PostBlock post;
   final ScrollController scrollController;
 
@@ -186,6 +177,7 @@ class CommentsListView extends StatelessWidget {
                         onAvatarTap: onAvatarTap,
                         radius: radius,
                         enableUnactiveBorder: false,
+                        withAdaptiveBorder: false,
                       ),
                       onReplyButtonTap: (username) =>
                           context.read<CommentsController>().setReplyingTo(
@@ -299,7 +291,6 @@ class _CommentTextFieldState extends State<CommentTextField> {
                     animationEffect: TappableAnimationEffect.none,
                     child: Icon(
                       Icons.cancel,
-                      size: 24,
                       color: Colors.grey.shade500,
                     ),
                   ),
@@ -465,6 +456,7 @@ class RepliedComments extends StatelessWidget {
                     radius: radius,
                     onAvatarTap: onAvatarTap,
                     enableUnactiveBorder: false,
+                    withAdaptiveBorder: false,
                   ),
                 ),
               )