Profile screens

analysis_options.yaml

@@ -24,5 +24,7 @@ linter:
     # avoid_print: false  # Uncomment to disable the `avoid_print` rule
     # prefer_single_quotes: true  # Uncomment to enable the `prefer_single_quotes` rule
 
+formatter:
+  trailing_commas: preserve
 # Additional information about this file can be found at
 # https://dart.dev/guides/language/analysis-options

lib/routing/router_provider.dart

@@ -10,8 +10,14 @@ import 'package:whitenoise/ui/auth_flow/logged_screen.dart';
 import 'package:whitenoise/ui/auth_flow/login_screen.dart';
 import 'package:whitenoise/ui/auth_flow/welcome_screen.dart';
 import 'package:whitenoise/ui/chat/chat_screen.dart';
+import 'package:whitenoise/ui/settings/general_settings_screen.dart';
+import 'package:whitenoise/ui/settings/profile/edit_profile_screen.dart';
+import 'package:whitenoise/ui/settings/network/network_screen.dart';
+import 'package:whitenoise/ui/settings/nostr_keys/nostr_keys_screen.dart';
+import 'package:whitenoise/ui/settings/wallet/wallet_screen.dart';
 
 import '../domain/dummy_data/dummy_messages.dart';
+import '../domain/dummy_data/dummy_contacts.dart';
 import 'package:whitenoise/ui/contact_list/chat_list_screen.dart';
 
 final routerProvider = Provider<GoRouter>((ref) {
@@ -82,7 +88,29 @@ final routerProvider = Provider<GoRouter>((ref) {
           ),
         ],
       ),
-      // TODO: Add settings and other routes as needed
+      // Settings
+      GoRoute(
+        path: Routes.settings,
+        builder: (context, state) => const GeneralSettingsScreen(),
+        routes: [
+          GoRoute(
+            path: 'profile',
+            builder: (context, state) => EditProfileScreen(profile: dummyContacts.first),
+          ),
+          GoRoute(
+            path: 'network',
+            builder: (context, state) => const NetworkScreen(),
+          ),
+          GoRoute(
+            path: 'keys',
+            builder: (context, state) => const NostrKeysScreen(),
+          ),
+          GoRoute(
+            path: 'wallet',
+            builder: (context, state) => const WalletScreen(),
+          ),
+        ],
+      ),
     ],
   );
 });

lib/shared/custom_icon_button.dart

@@ -0,0 +1,23 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:whitenoise/ui/core/themes/colors.dart';
+
+class CustomIconButton extends StatelessWidget {
+  final void Function()? onTap;
+  final String iconPath;
+
+  const CustomIconButton({required this.onTap, required this.iconPath, super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: onTap,
+      child: Container(
+        height: 40.h,
+        decoration: BoxDecoration(border: Border.all(color: AppColors.glitch200)),
+        child: Padding(padding: EdgeInsets.all(12.w), child: SvgPicture.asset(iconPath, width: 16.w, height: 16.w)),
+      ),
+    );
+  }
+}

lib/shared/info_box.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_screenutil/flutter_screenutil.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:gap/gap.dart';
+import 'package:whitenoise/ui/core/themes/assets.dart';
+
+class InfoBox extends StatelessWidget {
+  const InfoBox({super.key, required this.colorTheme, required this.title, required this.description});
+
+  final Color colorTheme;
+  final String title;
+  final String description;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(16.w),
+      decoration: BoxDecoration(color: colorTheme.withValues(alpha: 0.1)),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: EdgeInsets.only(top: 4.w),
+            child: SvgPicture.asset(
+              AssetsPaths.icWarning,
+              width: 16.w,
+              height: 16.w,
+              colorFilter: ColorFilter.mode(colorTheme, BlendMode.srcIn),
+            ),
+          ),
+          Gap(12.w),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.start,
+              children: [
+                Text(title, style: TextStyle(fontSize: 14.sp, fontWeight: FontWeight.w600, color: colorTheme)),
+                Gap(8.h),
+                Text(description, style: TextStyle(fontSize: 14.sp, color: colorTheme)),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/ui/contact_list/widgets/chat_list_appbar.dart

@@ -3,6 +3,8 @@ import 'package:flutter/services.dart';
 import 'package:flutter_screenutil/flutter_screenutil.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:gap/gap.dart';
+import 'package:go_router/go_router.dart';
+import 'package:whitenoise/routing/routes.dart';
 import 'package:whitenoise/ui/core/themes/assets.dart';
 import 'package:whitenoise/ui/core/themes/colors.dart';
 import 'package:whitenoise/ui/contact_list/new_chat_bottom_sheet.dart';
@@ -27,7 +29,14 @@ class ChatListAppBar extends StatelessWidget implements PreferredSizeWidget {
         child: SafeArea(
           child: Row(
             children: [
-              Image.asset(AssetsPaths.icImage, width: 32.w, height: 32.w),
+              GestureDetector(
+                onTap: () => GoRouter.of(context).go(Routes.settings),
+                child: Image.asset(
+                  AssetsPaths.icImage,
+                  width: 32.w,
+                  height: 32.w,
+                ),
+              ),
               const Spacer(),
               GestureDetector(
                 onTap: () => SearchChatBottomSheet.show(context),
@@ -36,7 +45,10 @@ class ChatListAppBar extends StatelessWidget implements PreferredSizeWidget {
               Gap(24.w),
               GestureDetector(
                 onTap: () => NewChatBottomSheet.show(context),
-                child: SvgPicture.asset(AssetsPaths.icAdd),
+                child: SvgPicture.asset(
+                  AssetsPaths.icAdd,
+                  colorFilter: ColorFilter.mode(AppColors.glitch50, BlendMode.srcIn),
+                ),
               ),
             ],
           ),