Refactor onboarding to use theme system and responsive layouts

lib/presentation_layer/components/edit_profile.dart

@@ -161,7 +161,7 @@ class _EditProfileState extends ConsumerState<EditProfile> {
                     height: MediaQuery.of(context).size.height / 6,
                     color: Theme.of(
                       context,
-                    ).colorScheme.surface.withValues(alpha: 0.5),
+                    ).colorScheme.surface.withValues(alpha: 0.8),
                     child: Column(
                       mainAxisAlignment: MainAxisAlignment.center,
                       children: [
@@ -183,7 +183,7 @@ class _EditProfileState extends ConsumerState<EditProfile> {
                                 context,
                               ).colorScheme.inverseSurface,
                               valueColor: AlwaysStoppedAnimation<Color>(
-                                Theme.of(context).colorScheme.onSurface,
+                                Theme.of(context).colorScheme.primary,
                               ),
                               minHeight: 6,
                             ),
@@ -228,10 +228,10 @@ class _EditProfileState extends ConsumerState<EditProfile> {
           width: 102,
           height: 102,
           decoration: BoxDecoration(
-            color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.5),
+            color: Theme.of(context).colorScheme.surface.withValues(alpha: 0.9),
             shape: BoxShape.circle,
             border: Border.all(
-              color: Theme.of(context).colorScheme.onSurface,
+              color: Theme.of(context).colorScheme.primary,
               width: 3,
             ),
           ),
@@ -241,7 +241,10 @@ class _EditProfileState extends ConsumerState<EditProfile> {
         SizedBox(
           width: 60,
           height: 60,
-          child: CircularProgressIndicator(strokeWidth: 3),
+          child: CircularProgressIndicator(
+            strokeWidth: 3,
+            color: Theme.of(context).colorScheme.primary,
+          ),
         ),
 
         // Text in the center
@@ -303,17 +306,24 @@ class _EditProfileState extends ConsumerState<EditProfile> {
         Padding(
           padding: const EdgeInsets.only(top: 16.0, bottom: 8.0, left: 8.0),
           child: Text(
-            label, // Display the label of the input field.
+            label,
             style: TextStyle(
-              color: const Color.fromARGB(213, 245, 248, 250),
-              fontSize: MediaQuery.of(context).size.width / 28,
+              color: Theme.of(context).colorScheme.onSurfaceVariant,
+              fontSize: 16,
+              fontWeight: FontWeight.w500,
             ),
           ),
         ),
         TextFormField(
-          controller: controller, // Bind the controller to the input field.
+          controller: controller,
+          style: TextStyle(color: Theme.of(context).colorScheme.onSurface),
           decoration: InputDecoration(
             hintText: "",
+            hintStyle: TextStyle(
+              color: Theme.of(
+                context,
+              ).colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
+            ),
             contentPadding: EdgeInsets.symmetric(
               vertical: 8.0,
               horizontal: 8.0,
@@ -325,7 +335,7 @@ class _EditProfileState extends ConsumerState<EditProfile> {
           maxLines: isMultiline ? null : 1,
           keyboardType: isMultiline
               ? TextInputType.multiline
-              : TextInputType.text, // Set keyboard type.
+              : TextInputType.text,
         ),
       ],
     );

lib/presentation_layer/components/responsive_center.dart

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+
+/// A widget that centers its child and constrains its maximum width based on screen size.
+/// This provides a better experience on large desktop screens while maintaining
+/// full width on mobile devices.
+class ResponsiveCenter extends StatelessWidget {
+  final Widget child;
+  final double maxWidth;
+  final EdgeInsets padding;
+
+  const ResponsiveCenter({
+    super.key,
+    required this.child,
+    this.maxWidth = 600,
+    this.padding = EdgeInsets.zero,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return LayoutBuilder(
+      builder: (context, constraints) {
+        final isWideScreen = constraints.maxWidth > maxWidth;
+
+        return Center(
+          child: Container(
+            constraints: BoxConstraints(
+              maxWidth: isWideScreen ? maxWidth : constraints.maxWidth,
+            ),
+            padding: padding,
+            child: child,
+          ),
+        );
+      },
+    );
+  }
+}

lib/presentation_layer/components/starter_packs/starter_packs_list.dart

@@ -90,6 +90,7 @@ class StarterPacksList extends ConsumerWidget {
           return Container(
             padding: EdgeInsets.fromLTRB(8, 2, 8, 2),
             child: StarterPackCard(
+              key: ValueKey('starterPackCard-${starterPacks.name}-$pubkey'),
               pack: starterPacks,
               onTab: () {
                 context.push(

lib/presentation_layer/routes/nostr/bookmarks/bookmarks_page.dart

@@ -5,11 +5,17 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:phosphor_flutter/phosphor_flutter.dart';
 import '../../../../domain_layer/entities/nostr_note.dart';
+import '../../../../domain_layer/entities/parsed_post.dart';
 import '../../../atoms/spinner_center.dart';
 import '../../../components/note_card/note_card_container.dart';
 
 import 'bookmarks_state_provider.dart';
 
+final parsedNotesProvider = FutureProvider.family
+    .autoDispose<ParsedPost, NostrNote>((ref, note) {
+      return NostrParser.parseEvent(note);
+    });
+
 class BookmarksPage extends ConsumerStatefulWidget {
   const BookmarksPage({super.key});
 
@@ -138,7 +144,7 @@ class _BookmarksPageState extends ConsumerState<BookmarksPage>
               // ),
               const Divider(height: 1),
               FutureBuilder(
-                future: NostrParser.parseEvent(note),
+                future: ref.read(parsedNotesProvider(note).future),
                 builder: (context, snapshot) {
                   if (snapshot.connectionState == ConnectionState.waiting) {
                     return const SpinnerCenter();