Improve chapters display

assets/translation.json

@@ -331,7 +331,8 @@
     "Create a folder": "新建收藏夹",
     "Created successfully": "创建成功",
     "name": "名称",
-    "Reverse tap to turn Pages": "反转点击翻页"
+    "Reverse tap to turn Pages": "反转点击翻页",
+    "Show all": "显示全部"
   },
   "zh_TW": {
     "Home": "首頁",
@@ -665,6 +666,7 @@
     "Create a folder": "新建收藏夾",
     "Created successfully": "創建成功",
     "name": "名稱",
-    "Reverse tap to turn Pages": "反轉點擊翻頁"
+    "Reverse tap to turn Pages": "反轉點擊翻頁",
+    "Show all": "顯示全部"
   }
 }

lib/pages/comic_page.dart

@@ -1106,10 +1106,20 @@ class _ComicChaptersState extends State<_ComicChapters> {
   Widget build(BuildContext context) {
     final eps = state.comic.chapters!;
 
+    return SliverLayoutBuilder(
+      builder: (context, constrains) {
         int length = eps.length;
-
+        bool canShowAll = showAll;
         if (!showAll) {
-      length = math.min(length, 20);
+          var width = constrains.crossAxisExtent;
+          var crossItems = width ~/ 200;
+          if (width % 200 != 0) {
+            crossItems += 1;
+          }
+          length = math.min(length, crossItems * 8);
+          if (length == eps.length) {
+            canShowAll = true;
+          }
         }
 
         return SliverMainAxisGroup(
@@ -1133,8 +1143,9 @@ class _ComicChaptersState extends State<_ComicChapters> {
               ),
             ),
             SliverGrid(
-          delegate:
+              delegate: SliverChildBuilderDelegate(
-              SliverChildBuilderDelegate(childCount: length, (context, i) {
+                childCount: length,
+                (context, i) {
                   if (reverse) {
                     i = eps.length - i - 1;
                   }
@@ -1143,16 +1154,15 @@ class _ComicChaptersState extends State<_ComicChapters> {
                   bool visited =
                       (state.history?.readEpisode ?? const {}).contains(i + 1);
                   return Padding(
-              padding: const EdgeInsets.fromLTRB(8, 4, 8, 4),
+                    padding: const EdgeInsets.fromLTRB(6, 4, 6, 4),
                     child: Material(
                       color: context.colorScheme.surfaceContainer,
-                borderRadius: const BorderRadius.all(Radius.circular(12)),
+                      borderRadius: BorderRadius.circular(16),
                       child: InkWell(
                         onTap: () => state.read(i + 1),
-                  borderRadius: const BorderRadius.all(Radius.circular(12)),
+                        borderRadius: BorderRadius.circular(16),
                         child: Padding(
-                    padding:
+                          padding: const EdgeInsets.symmetric(horizontal: 4),
-                        const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
                           child: Center(
                             child: Text(
                               value,
@@ -1160,7 +1170,9 @@ class _ComicChaptersState extends State<_ComicChapters> {
                               textAlign: TextAlign.center,
                               overflow: TextOverflow.ellipsis,
                               style: TextStyle(
-                          color: visited ? context.colorScheme.outline : null,
+                                color: visited
+                                    ? context.colorScheme.outline
+                                    : null,
                               ),
                             ),
                           ),
@@ -1168,25 +1180,25 @@ class _ComicChaptersState extends State<_ComicChapters> {
                       ),
                     ),
                   );
-          }),
+                },
+              ),
               gridDelegate: const SliverGridDelegateWithFixedHeight(
-              maxCrossAxisExtent: 200, itemHeight: 48),
+                maxCrossAxisExtent: 200,
+                itemHeight: 48,
+              ),
             ).sliverPadding(const EdgeInsets.symmetric(horizontal: 8)),
-        if (eps.length > 20 && !showAll)
+            if (eps.length > 20 && !canShowAll)
               SliverToBoxAdapter(
                 child: Align(
                   alignment: Alignment.center,
-              child: FilledButton.tonal(
+                  child: TextButton.icon(
-                style: ButtonStyle(
+                    icon: const Icon(Icons.arrow_drop_down),
-                  shape: WidgetStateProperty.all(const RoundedRectangleBorder(
-                      borderRadius: BorderRadius.all(Radius.circular(8)))),
-                ),
                     onPressed: () {
                       setState(() {
                         showAll = true;
                       });
                     },
-                child: Text("${"Show all".tl} (${eps.length})"),
+                    label: Text("${"Show all".tl} (${eps.length})"),
                   ).paddingTop(12),
                 ),
               ),
@@ -1195,6 +1207,8 @@ class _ComicChaptersState extends State<_ComicChapters> {
             ),
           ],
         );
+      },
+    );
   }
 }