💄 Optimize waterfall file list design

lib/widgets/file_list_view.dart

@@ -11,6 +11,7 @@ import 'package:island/models/file.dart';
 import 'package:island/pods/file_list.dart';
 import 'package:island/pods/network.dart';
 import 'package:island/services/file_uploader.dart';
+import 'package:island/services/responsive.dart';
 import 'package:island/utils/file_icon_utils.dart';
 import 'package:island/utils/format.dart';
 import 'package:island/widgets/alert.dart';
@@ -218,15 +219,14 @@ class FileListView extends HookConsumerWidget {
             const Gap(8),
             _buildPathNavigation(ref, currentPath),
             const Gap(8),
+            if (mode.value == FileListMode.normal && currentPath.value == '/')
+              _buildUnindexedFilesEntry(ref).padding(bottom: 12),
             Expanded(
               child: CustomScrollView(
-                slivers: [
+                slivers: [bodyWidget, const SliverGap(12)],
-                  bodyWidget,
+              ).padding(
-                  const SliverGap(12),
+                horizontal:
-                  if (mode.value == FileListMode.normal &&
+                    viewMode.value == FileListViewMode.waterfall ? 12 : null,
-                      currentPath.value == '/')
-                    SliverToBoxAdapter(child: _buildUnindexedFilesEntry(ref)),
-                ],
               ),
             ),
           ],
@@ -244,18 +244,34 @@ class FileListView extends HookConsumerWidget {
     ValueNotifier<String> currentPath,
     ValueNotifier<FileListViewMode> currentViewMode,
   ) {
-    return switch (currentViewMode.value) {
+    // Check if all files are images
+    final fileItems = items.whereType<FileItem>();
+    final allFilesAreImages =
+        fileItems.isNotEmpty &&
+        fileItems.every(
+          (fileItem) =>
+              fileItem.fileIndex.file.mimeType?.startsWith('image/') == true,
+        );
+
+    return switch (allFilesAreImages
+        ? FileListViewMode.waterfall
+        : currentViewMode.value) {
+      // Waterfall mode
       FileListViewMode.waterfall => SliverMasonryGrid(
-        gridDelegate: const SliverSimpleGridDelegateWithFixedCrossAxisCount(
+        gridDelegate: SliverSimpleGridDelegateWithMaxCrossAxisExtent(
-          crossAxisCount: 3,
+          maxCrossAxisExtent: isWideScreen(context) ? 340 : 240,
         ),
-        mainAxisSpacing: 8,
         crossAxisSpacing: 8,
+        mainAxisSpacing: 8,
         delegate: SliverChildBuilderDelegate((context, index) {
           if (index == widgetCount - 1) {
             return endItemView;
           }
 
+          if (index >= items.length) {
+            return const SizedBox.shrink();
+          }
+
           final item = items[index];
           return item.map(
             file: (fileItem) => _buildWaterfallFileTile(fileItem, ref, context),
@@ -267,8 +283,9 @@ class FileListView extends HookConsumerWidget {
               return const SizedBox.shrink();
             },
           );
-        }),
+        }, childCount: widgetCount),
       ),
+      // ListView mode
       _ => SliverList.builder(
         itemCount: widgetCount,
         itemBuilder: (context, index) {
@@ -721,6 +738,7 @@ class FileListView extends HookConsumerWidget {
     BuildContext context,
   ) {
     return InkWell(
+      borderRadius: BorderRadius.circular(8),
       onTap: () {
         final newPath =
             currentPath.value == '/'
@@ -731,32 +749,35 @@ class FileListView extends HookConsumerWidget {
       child: Container(
         padding: const EdgeInsets.all(16),
         decoration: BoxDecoration(
-          color: Theme.of(context).colorScheme.surface,
           borderRadius: BorderRadius.circular(8),
           border: Border.all(
             color: Theme.of(context).colorScheme.outline.withOpacity(0.3),
           ),
         ),
-        child: Column(
+        child: AspectRatio(
-          mainAxisSize: MainAxisSize.min,
+          aspectRatio: 1,
-          children: [
+          child: Column(
-            Icon(
+            mainAxisSize: MainAxisSize.min,
-              Symbols.folder,
+            mainAxisAlignment: MainAxisAlignment.center,
-              fill: 1,
+            children: [
-              size: 48,
+              Icon(
-              color: Theme.of(context).colorScheme.primary,
+                Symbols.folder,
-            ),
+                fill: 1,
-            const Gap(8),
+                size: 48,
-            Text(
+                color: Theme.of(context).colorScheme.primary,
-              folderItem.folderName,
+              ),
-              maxLines: 2,
+              const Gap(8),
-              overflow: TextOverflow.ellipsis,
+              Text(
-              textAlign: TextAlign.center,
+                folderItem.folderName,
-              style: Theme.of(
+                maxLines: 2,
-                context,
+                overflow: TextOverflow.ellipsis,
-              ).textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+                textAlign: TextAlign.center,
-            ),
+                style: Theme.of(
-          ],
+                  context,
+                ).textTheme.bodySmall?.copyWith(fontWeight: FontWeight.w500),
+              ),
+            ],
+          ),
         ),
       ),
     );