firka_wear: add LessonCardSmall and dynamic lesson pages

Implements the small lesson card from Figma.

firka_wear/lib/ui/components/firka_shadow.dart

@@ -0,0 +1,44 @@
+import 'package:flutter/material.dart';
+
+import 'package:firka_wear/ui/theme/style.dart';
+
+class FirkaShadow extends StatelessWidget {
+  final Widget child;
+  final bool shadow;
+  final double radius;
+
+  const FirkaShadow({
+    required this.shadow,
+    required this.child,
+    this.radius = 16.0,
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    final borderRadius = BorderRadius.circular(radius);
+
+    final shadowBox = BoxDecoration(
+      color: Colors.transparent,
+      shape: BoxShape.rectangle,
+      boxShadow: [
+        BoxShadow(
+          color: wearStyle.colors.shadowColor,
+          spreadRadius: -4,
+          blurRadius: 0,
+          offset: Offset(0, 2),
+        ),
+      ],
+      borderRadius: borderRadius,
+    );
+
+    if (!shadow) {
+      return ClipRRect(borderRadius: borderRadius, child: child);
+    }
+
+    return Container(
+      decoration: shadowBox,
+      child: ClipRRect(borderRadius: borderRadius, child: child),
+    );
+  }
+}

firka_wear/lib/ui/wear/screens/home/home_screen.dart

@@ -18,6 +18,7 @@ import 'package:firka_wear/core/extensions.dart';
 import 'package:firka_wear/l10n/app_localizations.dart';
 import 'package:firka_wear/ui/theme/style.dart';
 import 'package:firka_wear/ui/shared/class_icon.dart';
+import 'package:firka_wear/ui/wear/widgets/lesson_card_small.dart';
 import 'package:firka_wear/ui/wear/widgets/circular_progress_indicator.dart';
 
 part 'home_screen_body.dart';
@@ -48,6 +49,9 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
   late final PageController _pageController;
 
   bool disposed = false;
+  DateTime? _anchorLessonStart;
+  int _bodyPageIndex = 0;
+  int? _activeLessonNo;
 
   @override
   void didChangeDependencies() {
@@ -58,7 +62,7 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
   @override
   void initState() {
     super.initState();
-    _pageController = PageController(initialPage: 2);
+    _pageController = PageController();
     now = timeNow();
     today = data.syncStore.getLessonsForDate(now);
     init = data.syncStore.timetable.isNotEmpty;
@@ -133,7 +137,7 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
   ) {
     var body = List<Widget>.empty(growable: true);
     if (!init) {
-      return (body, 255.h, null);
+      return (body, 0.h, null);
     }
 
     if (today.isEmpty &&
@@ -148,7 +152,7 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
           textAlign: TextAlign.center,
         ),
       );
-      return (body, 255.h, null);
+      return (body, 50.h, null);
     }
     if (today.isEmpty) {
       body.add(
@@ -162,7 +166,7 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
       );
 
       platform.invokeMethod('activity_cancel');
-      return (body, 255.h, null);
+      return (body, 50.h, null);
     }
     if (now.isAfter(today.last.end)) {
       body.add(
@@ -176,7 +180,7 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
       );
 
       platform.invokeMethod('activity_cancel');
-      return (body, 300.h, null);
+      return (body, 50.h, null);
     }
     if (now.isBefore(today.first.start)) {
       var untilFirst = today.first.start.difference(now);
@@ -192,7 +196,7 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
       );
 
       platform.invokeMethod('activity_update');
-      return (body, 255.h, null);
+      return (body, 50.h, null);
     }
     currentLessonNo = null;
     if (now.isAfter(today.first.start) && now.isBefore(today.last.end)) {
@@ -418,34 +422,165 @@ class _WearHomeScreenState extends State<WearHomeScreen> {
                             });
                           }
 
+                          final hasScrollableLessons =
+                              today.isNotEmpty &&
+                              !now.isBefore(today.first.start) &&
+                              !now.isAfter(today.last.end);
+
+                          if (!hasScrollableLessons) {
+                            return SizedBox(
+                              height: viewportHeight,
+                              child: _HomeScreenBodyPage(
+                                body: body,
+                                padding: padding,
+                                viewportHeight: viewportHeight,
+                              ),
+                            );
+                          }
+
+                          final anchorLesson =
+                              today.getCurrentLesson(now) ??
+                              today.getNextLesson(now) ??
+                              (today.isNotEmpty ? today.first : null);
+                          final anchorIndex = anchorLesson == null
+                              ? 0
+                              : today.indexWhere(
+                                  (e) =>
+                                      e.start.millisecondsSinceEpoch ==
+                                      anchorLesson.start.millisecondsSinceEpoch,
+                                );
+                          final safeAnchorIndex = anchorIndex < 0
+                              ? 0
+                              : anchorIndex.clamp(0, today.length);
+
+                          final beforeLessons = today
+                              .take(safeAnchorIndex)
+                              .toList(growable: false);
+                          final afterLessons = today
+                              .skip(safeAnchorIndex + 1)
+                              .toList(growable: false);
+
+                          final pages = <Widget>[
+                            ...beforeLessons.map(
+                              (lesson) => _LessonCardPage(
+                                key: ValueKey(
+                                  'before_${lesson.start.millisecondsSinceEpoch}',
+                                ),
+                                lesson: lesson,
+                                viewportHeight: viewportHeight,
+                              ),
+                            ),
+                            _HomeScreenBodyPage(
+                              body: body,
+                              padding: padding,
+                              viewportHeight: viewportHeight,
+                            ),
+                            ...afterLessons.map(
+                              (lesson) => _LessonCardPage(
+                                key: ValueKey(
+                                  'after_${lesson.start.millisecondsSinceEpoch}',
+                                ),
+                                lesson: lesson,
+                                viewportHeight: viewportHeight,
+                              ),
+                            ),
+                          ];
+
+                          final newBodyPageIndex = beforeLessons.length;
+                          final anchorStart = anchorLesson?.start;
+                          final currentPage = _pageController.hasClients
+                              ? _pageController.page
+                              : null;
+                          final shouldRetainBody =
+                              currentPage == null ||
+                              currentPage.round() == _bodyPageIndex;
+
+                          int? pageIndexForLessonStart(DateTime start) {
+                            final beforeIndex = beforeLessons.indexWhere(
+                              (e) =>
+                                  e.start.millisecondsSinceEpoch ==
+                                  start.millisecondsSinceEpoch,
+                            );
+                            if (beforeIndex != -1) {
+                              return beforeIndex;
+                            }
+
+                            final afterIndex = afterLessons.indexWhere(
+                              (e) =>
+                                  e.start.millisecondsSinceEpoch ==
+                                  start.millisecondsSinceEpoch,
+                            );
+                            if (afterIndex != -1) {
+                              return beforeLessons.length + 1 + afterIndex;
+                            }
+
+                            return null;
+                          }
+
+                          DateTime? visibleLessonStartForPageIndex(
+                            int pageIndex,
+                          ) {
+                            if (pageIndex == newBodyPageIndex) return null;
+                            if (pageIndex < newBodyPageIndex) {
+                              final beforeIndex = pageIndex;
+                              if (beforeIndex < 0 ||
+                                  beforeIndex >= beforeLessons.length) {
+                                return null;
+                              }
+                              return beforeLessons[beforeIndex].start;
+                            }
+
+                            final afterIndex = pageIndex - newBodyPageIndex - 1;
+                            if (afterIndex < 0 ||
+                                afterIndex >= afterLessons.length) {
+                              return null;
+                            }
+                            return afterLessons[afterIndex].start;
+                          }
+
+                          final activeLessonNo = currentLessonNo;
+                          final activeLessonChanged =
+                              activeLessonNo != _activeLessonNo;
+
+                          final pageIndex = currentPage?.round();
+                          final visibleLessonStart = pageIndex == null
+                              ? null
+                              : visibleLessonStartForPageIndex(pageIndex);
+                          final targetPageIndex = shouldRetainBody
+                              ? newBodyPageIndex
+                              : (visibleLessonStart == null
+                                    ? null
+                                    : pageIndexForLessonStart(
+                                        visibleLessonStart,
+                                      ));
+
+                          if (anchorStart != _anchorLessonStart ||
+                              newBodyPageIndex != _bodyPageIndex ||
+                              activeLessonChanged) {
+                            WidgetsBinding.instance.addPostFrameCallback((_) {
+                              if (!mounted) return;
+                              if (anchorStart != _anchorLessonStart) {
+                                _anchorLessonStart = anchorStart;
+                              }
+                              if (newBodyPageIndex != _bodyPageIndex) {
+                                _bodyPageIndex = newBodyPageIndex;
+                              }
+                              if (activeLessonChanged) {
+                                _activeLessonNo = activeLessonNo;
+                              }
+                              if (_pageController.hasClients &&
+                                  targetPageIndex != null) {
+                                _pageController.jumpToPage(targetPageIndex);
+                              }
+                            });
+                          }
+
                           return SizedBox(
                             height: viewportHeight,
                             child: PageView(
                               controller: _pageController,
                               scrollDirection: Axis.vertical,
-                              children: [
+                              children: pages,
-                                _PlaceholderPage(
-                                  index: 1,
-                                  viewportHeight: viewportHeight,
-                                ),
-                                _PlaceholderPage(
-                                  index: 2,
-                                  viewportHeight: viewportHeight,
-                                ),
-                                _HomeScreenBodyPage(
-                                  body: body,
-                                  padding: padding,
-                                  viewportHeight: viewportHeight,
-                                ),
-                                _PlaceholderPage(
-                                  index: 3,
-                                  viewportHeight: viewportHeight,
-                                ),
-                                _PlaceholderPage(
-                                  index: 4,
-                                  viewportHeight: viewportHeight,
-                                ),
-                              ],
                             ),
                           );
                         },

firka_wear/lib/ui/wear/screens/home/home_screen_body.dart

@@ -26,25 +26,28 @@ class _HomeScreenBodyPage extends StatelessWidget {
   }
 }
 
-class _PlaceholderPage extends StatelessWidget {
+class _LessonCardPage extends StatelessWidget {
-  final int index;
+  final Lesson? lesson;
   final double viewportHeight;
 
-  const _PlaceholderPage({required this.index, required this.viewportHeight});
+  const _LessonCardPage({
+    required this.lesson,
+    required this.viewportHeight,
+    super.key,
+  });
 
   @override
   Widget build(BuildContext context) {
+    if (lesson == null) {
+      return SizedBox(height: viewportHeight);
+    }
+
     return SizedBox(
       height: viewportHeight,
       child: Center(
-        child: Text(
+        child: SizedBox(
-          'Placeholder $index',
+          width: 340.w,
-          style: TextStyle(
+          child: LessonCardSmall.fromLesson(lesson!),
-            color: wearStyle.colors.textPrimary,
-            fontSize: 14,
-            fontFamily: 'Montserrat',
-            fontVariations: [FontVariation('wght', 400)],
-          ),
         ),
       ),
     );

firka_wear/lib/ui/wear/widgets/lesson_card_small.dart

@@ -0,0 +1,123 @@
+import 'package:flutter/material.dart';
+import 'package:kreta_api/kreta_api.dart';
+
+import 'package:firka_wear/ui/components/firka_shadow.dart';
+import 'package:firka_wear/ui/shared/class_icon.dart';
+import 'package:firka_wear/ui/theme/style.dart';
+
+class LessonCardSmall extends StatelessWidget {
+  final String uid;
+  final String subjectName;
+  final String category;
+  final String? roomName;
+  final VoidCallback? onTap;
+  final Color? iconColor;
+  final bool shadow;
+
+  const LessonCardSmall({
+    required this.uid,
+    required this.subjectName,
+    required this.category,
+    this.roomName,
+    this.onTap,
+    this.iconColor,
+    this.shadow = true,
+    super.key,
+  });
+
+  factory LessonCardSmall.fromLesson(
+    Lesson lesson, {
+    VoidCallback? onTap,
+    Color? iconColor,
+    bool shadow = true,
+    Key? key,
+  }) {
+    return LessonCardSmall(
+      uid: lesson.uid,
+      subjectName: lesson.name,
+      category: lesson.subject?.name ?? '',
+      roomName: lesson.roomName,
+      onTap: onTap,
+      iconColor: iconColor,
+      shadow: shadow,
+      key: key,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final radius = 16.0;
+
+    final content = Padding(
+      padding: const EdgeInsets.all(8.0),
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: [
+          SizedBox(
+            width: 24,
+            height: 24,
+            child: Center(
+              child: ClassIconWidget(
+                uid: uid,
+                className: subjectName,
+                category: category,
+                color: iconColor ?? wearStyle.colors.accent,
+                size: 16,
+              ),
+            ),
+          ),
+          const SizedBox(width: 4),
+          Flexible(
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  subjectName,
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: wearStyle.fonts.H_14px
+                      .copyWith(height: 1.3)
+                      .apply(color: wearStyle.colors.textPrimary),
+                ),
+                Text(
+                  roomName ?? '',
+                  maxLines: 1,
+                  overflow: TextOverflow.ellipsis,
+                  style: wearStyle.fonts.B_12R
+                      .copyWith(height: 1.3)
+                      .apply(color: wearStyle.colors.textTertiary),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+
+    final child = onTap == null
+        ? content
+        : InkWell(
+            onTap: onTap,
+            borderRadius: BorderRadius.circular(radius),
+            child: content,
+          );
+
+    return SizedBox(
+      width: double.infinity,
+      child: FirkaShadow(
+        shadow: shadow,
+        radius: radius,
+        child: Card(
+          elevation: 0,
+          shadowColor: Colors.transparent,
+          color: wearStyle.colors.card,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(radius),
+          ),
+          child: child,
+        ),
+      ),
+    );
+  }
+}