✨ Card shuffle

lib/widgets/post/post_shuffle.dart

@@ -1,17 +1,108 @@
 import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter_card_swiper/flutter_card_swiper.dart';
+import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:island/widgets/app_scaffold.dart';
+import 'package:island/widgets/post/post_item.dart';
 import 'package:island/widgets/post/post_list.dart';
+import 'package:material_symbols_icons/symbols.dart';
+import 'package:styled_widget/styled_widget.dart';
 
 class PostShuffleScreen extends HookConsumerWidget {
   const PostShuffleScreen({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
+    final postListState = ref.watch(postListNotifierProvider(shuffle: true));
+    final postListNotifier = ref.watch(
+      postListNotifierProvider(shuffle: true).notifier,
+    );
+
+    final cardSwiperController = useMemoized(() => CardSwiperController(), []);
+
+    useEffect(() {
+      return cardSwiperController.dispose;
+    }, []);
+
+    const kBottomControlHeight = 96.0;
+
     return AppScaffold(
       appBar: AppBar(title: const Text('postShuffle').tr()),
-      body: CustomScrollView(slivers: [SliverPostList(shuffle: true)]),
+      body: Stack(
+        children: [
+          Padding(
+            padding: EdgeInsets.only(
+              bottom:
+                  kBottomControlHeight + MediaQuery.of(context).padding.bottom,
+            ),
+            child:
+                (postListState.value?.items.length ?? 0) > 0
+                    ? CardSwiper(
+                      controller: cardSwiperController,
+                      cardsCount: postListState.value!.items.length,
+                      cardBuilder: (
+                        context,
+                        index,
+                        horizontalOffsetPercentage,
+                        verticalOffsetPercentage,
+                      ) {
+                        return Center(
+                          child: Card(
+                            margin: EdgeInsets.zero,
+                            child: ClipRRect(
+                              borderRadius: const BorderRadius.all(
+                                Radius.circular(8),
+                              ),
+                              child: PostActionableItem(
+                                item: postListState.value!.items[index],
+                              ),
+                            ),
+                          ),
+                        );
+                      },
+                      onEnd: () {
+                        if (postListState.value?.hasMore ?? true) {
+                          postListNotifier.fetch(
+                            cursor: postListState.value?.nextCursor,
+                          );
+                        }
+                      },
+                    )
+                    : Center(child: CircularProgressIndicator()),
+          ),
+          Positioned(
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: Container(
+              color: Theme.of(context).colorScheme.surfaceContainer,
+              padding: EdgeInsets.only(
+                bottom: MediaQuery.of(context).padding.bottom,
+              ),
+              height: kBottomControlHeight,
+              child:
+                  Row(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    children: [
+                      IconButton(
+                        onPressed: () {
+                          cardSwiperController.undo();
+                        },
+                        icon: const Icon(Symbols.arrow_left_alt),
+                      ),
+                      IconButton(
+                        onPressed: () {
+                          cardSwiperController.swipe(CardSwiperDirection.right);
+                        },
+                        icon: const Icon(Symbols.arrow_right_alt),
+                      ),
+                    ],
+                  ).padding(all: 8).center(),
+            ),
+          ),
+        ],
+      ),
     );
   }
 }