♻️ Convert the activity calandar screen to sheet

2025-10-13 00:34:16 +08:00
parent 389fa515ba
commit 7e0e7c20d7
7 changed files with 91 additions and 44 deletions
--- a/lib/widgets/account/event_calendar_content.dart
+++ b/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),
+                  ],
+                ),
+      );
+    }
+  }
+}