💄 Lift file list search to appbar

lib/screens/files/file_list.dart

@@ -1,5 +1,4 @@
 import 'package:cross_file/cross_file.dart';
-import 'package:easy_localization/easy_localization.dart';
 import 'package:file_picker/file_picker.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
@@ -33,21 +32,33 @@ class FileListScreen extends HookConsumerWidget {
     final viewMode = useState(FileListViewMode.list);
     final isSelectionMode = useState<bool>(false);
     final recycled = useState<bool>(false);
+    final query = useState<String?>(null);
 
     final unindexedNotifier = ref.read(unindexedFileListProvider.notifier);
 
     return AppScaffold(
       isNoBackground: false,
       appBar: AppBar(
-        title: Text('files').tr(),
+        title: SearchBar(
+          constraints: const BoxConstraints(maxWidth: 400, minHeight: 32),
+          hintText: 'Search files...',
+          hintStyle: WidgetStatePropertyAll(TextStyle(fontSize: 14)),
+          onChanged: (value) {
+            // Update the query state that will be passed to FileListView
+            query.value = value.isEmpty ? null : value;
+          },
+          leading: Icon(
+            Symbols.search,
+            size: 20,
+            color: Theme.of(context).colorScheme.onSurface,
+          ),
+        ),
         leading: const PageBackButton(backTo: '/account'),
         actions: [
           // Selection mode toggle
           IconButton(
             icon: Icon(
-              isSelectionMode.value
+              isSelectionMode.value ? Symbols.close : Symbols.select_check_box,
-                  ? Symbols.close
-                  : Symbols.select_check_box,
             ),
             onPressed: () => isSelectionMode.value = !isSelectionMode.value,
             tooltip: isSelectionMode.value
@@ -82,9 +93,14 @@ class FileListScreen extends HookConsumerWidget {
       ),
       floatingActionButton: mode.value == FileListMode.normal
           ? FloatingActionButton(
-              onPressed: () => _showActionBottomSheet(context, ref, currentPath, selectedPool),
+              onPressed: () => _showActionBottomSheet(
-              child: const Icon(Symbols.add),
+                context,
+                ref,
+                currentPath,
+                selectedPool,
+              ),
               tooltip: 'Add files or create directory',
+              child: const Icon(Symbols.add),
             )
           : null,
       body: usageAsync.when(
@@ -242,11 +258,11 @@ class FileListScreen extends HookConsumerWidget {
       context: context,
       isScrollControlled: true,
       builder: (context) => SheetScaffold(
-        titleText: 'Usage Overview',
         child: UsageOverviewWidget(
           usage: usage,
           quota: quota,
         ).padding(horizontal: 8, vertical: 16),
+        titleText: 'Usage Overview',
       ),
     );
   }

lib/widgets/file_list_view.dart

@@ -1347,33 +1347,7 @@ class FileListView extends HookConsumerWidget {
     ValueNotifier<bool> orderDesc,
     ObjectRef<Timer?> queryDebounceTimer,
   ) {
-    return Column(
+    return SingleChildScrollView(
-      crossAxisAlignment: CrossAxisAlignment.start,
-      children: [
-        // Search bar below chips
-        Padding(
-          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 4),
-          child: SearchBar(
-            constraints: const BoxConstraints(minHeight: 48),
-            elevation: WidgetStatePropertyAll(2),
-            hintText: 'Search files...',
-            onChanged: (value) {
-              queryDebounceTimer.value?.cancel();
-              queryDebounceTimer.value = Timer(
-                const Duration(milliseconds: 300),
-                () {
-                  query.value = value.isEmpty ? null : value;
-                },
-              );
-            },
-            leading: const Icon(Symbols.search).padding(horizontal: 24),
-          ),
-        ),
-
-        const Gap(12),
-
-        // Chips row
-        SingleChildScrollView(
       padding: const EdgeInsets.symmetric(horizontal: 16),
       scrollDirection: Axis.horizontal,
       child: Row(
@@ -1384,9 +1358,7 @@ class FileListView extends HookConsumerWidget {
             padding: const EdgeInsets.symmetric(horizontal: 8),
             decoration: BoxDecoration(
               border: Border.all(
-                    color: Theme.of(
+                color: Theme.of(ref.context).colorScheme.outline.withOpacity(0.5),
-                      ref.context,
-                    ).colorScheme.outline.withOpacity(0.5),
               ),
               borderRadius: BorderRadius.circular(8),
             ),
@@ -1449,9 +1421,7 @@ class FileListView extends HookConsumerWidget {
             padding: const EdgeInsets.symmetric(horizontal: 8),
             decoration: BoxDecoration(
               border: Border.all(
-                    color: Theme.of(
+                color: Theme.of(ref.context).colorScheme.outline.withOpacity(0.5),
-                      ref.context,
-                    ).colorScheme.outline.withOpacity(0.5),
               ),
               borderRadius: BorderRadius.circular(8),
             ),
@@ -1469,9 +1439,7 @@ class FileListView extends HookConsumerWidget {
                         Text('Date', style: const TextStyle(fontSize: 12)),
                         if (order.value == 'date')
                           Icon(
-                                orderDesc.value
+                            orderDesc.value ? Symbols.arrow_downward : Symbols.arrow_upward,
-                                    ? Symbols.arrow_downward
-                                    : Symbols.arrow_upward,
                             size: 14,
                           ),
                       ],
@@ -1490,9 +1458,7 @@ class FileListView extends HookConsumerWidget {
                         ),
                         if (order.value == 'size')
                           Icon(
-                                orderDesc.value
+                            orderDesc.value ? Symbols.arrow_downward : Symbols.arrow_upward,
-                                    ? Symbols.arrow_downward
-                                    : Symbols.arrow_upward,
                             size: 16,
                           ),
                       ],
@@ -1511,9 +1477,7 @@ class FileListView extends HookConsumerWidget {
                         ),
                         if (order.value == 'name')
                           Icon(
-                                orderDesc.value
+                            orderDesc.value ? Symbols.arrow_downward : Symbols.arrow_upward,
-                                    ? Symbols.arrow_downward
-                                    : Symbols.arrow_upward,
                             size: 16,
                           ),
                       ],
@@ -1571,8 +1535,6 @@ class FileListView extends HookConsumerWidget {
           ),
         ],
       ),
-        ),
-      ],
     );
   }
 }