♻️ Convert the activity calandar screen to sheet

lib/widgets/account/event_calendar_content.dart

@@ -0,0 +1,150 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
+import 'package:gap/gap.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:island/pods/event_calendar.dart';
+import 'package:island/screens/account/profile.dart';
+import 'package:island/widgets/account/account_nameplate.dart';
+import 'package:island/widgets/account/event_calendar.dart';
+import 'package:island/widgets/account/fortune_graph.dart';
+import 'package:styled_widget/styled_widget.dart';
+
+/// A reusable content widget for event calendar that can be used in screens or sheets
+/// This widget manages the calendar state and displays the calendar and fortune graph
+class EventCalendarContent extends HookConsumerWidget {
+  /// Username to fetch calendar for, null means current user ('me')
+  final String name;
+
+  /// Whether this is being displayed in a sheet (affects layout)
+  final bool isSheet;
+
+  const EventCalendarContent({
+    super.key,
+    required this.name,
+    this.isSheet = false,
+  });
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    // Get the current date
+    final now = DateTime.now();
+
+    // Create the query for the current month
+    final query = useState(
+      EventCalendarQuery(uname: name, year: now.year, month: now.month),
+    );
+
+    // Watch the event calendar data
+    final events = ref.watch(eventCalendarProvider(query.value));
+    final user = ref.watch(accountProvider(name));
+
+    // Track the selected day for synchronizing between widgets
+    final selectedDay = useState(now);
+
+    void onMonthChanged(int year, int month) {
+      query.value = EventCalendarQuery(
+        uname: query.value.uname,
+        year: year,
+        month: month,
+      );
+    }
+
+    // Function to handle day selection for synchronizing between widgets
+    void onDaySelected(DateTime day) {
+      selectedDay.value = day;
+    }
+
+    if (isSheet) {
+      // Sheet layout - simplified, no app bar, scrollable content
+      return SingleChildScrollView(
+        child: Column(
+          children: [
+            // Use the reusable EventCalendarWidget
+            EventCalendarWidget(
+              events: events,
+              initialDate: now,
+              showEventDetails: true,
+              onMonthChanged: onMonthChanged,
+              onDaySelected: onDaySelected,
+            ),
+
+            // Add the fortune graph widget
+            const Divider(height: 1),
+            FortuneGraphWidget(
+              events: events,
+              onPointSelected: onDaySelected,
+            ).padding(horizontal: 8, vertical: 4),
+
+            // Show user profile if viewing someone else's calendar
+            if (name != 'me' && user.value != null)
+              AccountNameplate(name: name),
+            Gap(MediaQuery.of(context).padding.bottom + 16),
+          ],
+        ),
+      );
+    } else {
+      // Screen layout - with responsive design
+      return SingleChildScrollView(
+        child:
+            MediaQuery.of(context).size.width > 480
+                ? ConstrainedBox(
+                  constraints: BoxConstraints(maxWidth: 480),
+                  child: Column(
+                    children: [
+                      Card(
+                        margin: EdgeInsets.only(left: 16, right: 16, top: 16),
+                        child: Column(
+                          children: [
+                            // Use the reusable EventCalendarWidget
+                            EventCalendarWidget(
+                              events: events,
+                              initialDate: now,
+                              showEventDetails: true,
+                              onMonthChanged: onMonthChanged,
+                              onDaySelected: onDaySelected,
+                            ),
+                          ],
+                        ),
+                      ),
+
+                      // Add the fortune graph widget
+                      FortuneGraphWidget(
+                        events: events,
+                        constrainWidth: true,
+                        onPointSelected: onDaySelected,
+                      ),
+
+                      // Show user profile if viewing someone else's calendar
+                      if (name != 'me' && user.value != null)
+                        AccountNameplate(name: name),
+                    ],
+                  ),
+                ).center()
+                : Column(
+                  children: [
+                    // Use the reusable EventCalendarWidget
+                    EventCalendarWidget(
+                      events: events,
+                      initialDate: now,
+                      showEventDetails: true,
+                      onMonthChanged: onMonthChanged,
+                      onDaySelected: onDaySelected,
+                    ),
+
+                    // Add the fortune graph widget
+                    const Divider(height: 1),
+                    FortuneGraphWidget(
+                      events: events,
+                      onPointSelected: onDaySelected,
+                    ).padding(horizontal: 8, vertical: 4),
+
+                    // Show user profile if viewing someone else's calendar
+                    if (name != 'me' && user.value != null)
+                      AccountNameplate(name: name),
+                    Gap(MediaQuery.of(context).padding.bottom + 16),
+                  ],
+                ),
+      );
+    }
+  }
+}

lib/widgets/account/event_details_widget.dart

@@ -76,10 +76,17 @@ class EventDetailsWidget extends StatelessWidget {
                       child: Column(
                         crossAxisAlignment: CrossAxisAlignment.start,
                         children: [
-                          if ((getActivityTitle(status.label, status.meta) ?? status.label).isNotEmpty)
-                            Text(getActivityTitle(status.label, status.meta) ?? status.label),
+                          if ((getActivityTitle(status.label, status.meta) ??
+                                  status.label)
+                              .isNotEmpty)
+                            Text(
+                              getActivityTitle(status.label, status.meta) ??
+                                  status.label,
+                            ),
                           if (getActivitySubtitle(status.meta) != null)
-                            Text(getActivitySubtitle(status.meta)!).fontSize(11).opacity(0.8),
+                            Text(
+                              getActivitySubtitle(status.meta)!,
+                            ).fontSize(11).opacity(0.8),
                           Text(
                             '${status.createdAt.formatSystem()} - ${status.clearedAt?.formatSystem() ?? 'present'.tr()}',
                           ).fontSize(11).opacity(0.8),
@@ -92,7 +99,7 @@ class EventDetailsWidget extends StatelessWidget {
             ],
           ),
         if (event?.checkInResult == null && (event?.statuses.isEmpty ?? true))
-          Text('eventCalanderEmpty').tr(),
+          Text('eventCalandarEmpty').tr(),
       ],
     ).padding(vertical: 24, horizontal: 24);
   }

lib/widgets/account/fortune_graph.dart

@@ -1,9 +1,10 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
-import 'package:go_router/go_router.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/models/activity.dart';
+import 'package:island/widgets/account/event_calendar_content.dart';
+import 'package:island/widgets/content/sheet.dart';
 import 'package:styled_widget/styled_widget.dart';
 
 /// A widget that displays a graph of fortune levels over time
@@ -24,7 +25,7 @@ class FortuneGraphWidget extends HookConsumerWidget {
   /// Callback when a point is selected
   final void Function(DateTime)? onPointSelected;
 
-  final String? eventCalanderUser;
+  final String? eventCalandarUser;
 
   final EdgeInsets? margin;
 
@@ -35,7 +36,7 @@ class FortuneGraphWidget extends HookConsumerWidget {
     this.maxWidth = double.infinity,
     this.height = 180,
     this.onPointSelected,
-    this.eventCalanderUser,
+    this.eventCalandarUser,
     this.margin,
   });
 
@@ -59,7 +60,7 @@ class FortuneGraphWidget extends HookConsumerWidget {
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
             Text('fortuneGraph').tr().fontSize(18).bold(),
-            if (eventCalanderUser != null)
+            if (eventCalandarUser != null)
               IconButton(
                 icon: const Icon(Icons.calendar_month, size: 20),
                 visualDensity: const VisualDensity(
@@ -69,9 +70,17 @@ class FortuneGraphWidget extends HookConsumerWidget {
                 padding: EdgeInsets.zero,
                 constraints: const BoxConstraints(),
                 onPressed: () {
-                  context.pushNamed(
-                    'accountCalendar',
-                    pathParameters: {'name': eventCalanderUser!},
+                  showModalBottomSheet(
+                    context: context,
+                    isScrollControlled: true,
+                    builder:
+                        (context) => SheetScaffold(
+                          titleText: 'eventCalendar'.tr(),
+                          child: EventCalendarContent(
+                            name: eventCalandarUser!,
+                            isSheet: true,
+                          ),
+                        ),
                   );
                 },
               ),