Changed search screen with modal

lib/router/routes.dart

@@ -48,10 +48,6 @@ final List<RouteBase> appRoutes = [
       ),
     ],
   ),
-  GoRoute(
-    path: RoutesPaths.bookmarksSearch,
-    builder: (context, state) => const SearchBookmarksScreen(),
-  ),
   GoRoute(
     path: RoutesPaths.tagBookmarks,
     name: RoutesNames.tagBookmarks,

lib/screens/bookmarks/ui/bookmarks.dart

@@ -9,6 +9,7 @@ import 'package:linkdy/screens/bookmarks/provider/bookmarks.provider.dart';
 import 'package:linkdy/screens/bookmarks/ui/bookmark_item.dart';
 import 'package:linkdy/screens/bookmarks/ui/add_bookmark_modal.dart';
 import 'package:linkdy/screens/bookmarks/ui/delete_bookmark_modal.dart';
+import 'package:linkdy/screens/bookmarks/ui/search_bookmarks.dart';
 import 'package:linkdy/widgets/error_screen.dart';
 import 'package:linkdy/widgets/no_data_screen.dart';
 import 'package:linkdy/widgets/snackbar_fab.dart';
@@ -18,7 +19,7 @@ import 'package:linkdy/providers/router.provider.dart';
 import 'package:linkdy/router/paths.dart';
 
 class BookmarksScreen extends ConsumerWidget {
-  const BookmarksScreen({Key? key}) : super(key: key);
+  const BookmarksScreen({super.key});
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -42,6 +43,22 @@ class BookmarksScreen extends ConsumerWidget {
       );
     }
 
+    void openSearchModal() {
+      showGeneralDialog(
+        context: context,
+        barrierColor: !(width > 700 || !(Platform.isAndroid || Platform.isIOS)) ? Colors.transparent : Colors.black54,
+        transitionBuilder: (context, anim1, anim2, child) {
+          return SlideTransition(
+            position: Tween(begin: const Offset(0, 1), end: const Offset(0, 0)).animate(
+              CurvedAnimation(parent: anim1, curve: Curves.easeInOutCubicEmphasized),
+            ),
+            child: child,
+          );
+        },
+        pageBuilder: (context, animation, secondaryAnimation) => SearchBookmarksModal(fullscreen: width <= 700),
+      );
+    }
+
     bool scrollListener(ScrollUpdateNotification scrollNotification) {
       if (scrollNotification.metrics.extentAfter < 100 &&
           bookmarks.loadingMore == false &&
@@ -67,7 +84,7 @@ class BookmarksScreen extends ConsumerWidget {
                   title: Text(t.bookmarks.bookmarks),
                   actions: [
                     IconButton(
-                      onPressed: () => ref.watch(routerProvider).push(RoutesPaths.bookmarksSearch),
+                      onPressed: openSearchModal,
                       icon: const Icon(Icons.search_rounded),
                       tooltip: t.bookmarks.search.searchBookmarks,
                     ),

lib/screens/bookmarks/ui/search_bookmarks.dart

@@ -14,8 +14,13 @@ import 'package:linkdy/providers/router.provider.dart';
 import 'package:linkdy/i18n/strings.g.dart';
 import 'package:linkdy/widgets/no_data_screen.dart';
 
-class SearchBookmarksScreen extends ConsumerWidget {
+class SearchBookmarksModal extends ConsumerWidget {
-  const SearchBookmarksScreen({Key? key}) : super(key: key);
+  final bool fullscreen;
+
+  const SearchBookmarksModal({
+    super.key,
+    required this.fullscreen,
+  });
 
   @override
   Widget build(BuildContext context, WidgetRef ref) {
@@ -31,106 +36,108 @@ class SearchBookmarksScreen extends ConsumerWidget {
       return false;
     }
 
-    return Scaffold(
+    return Dialog.fullscreen(
-      appBar: AppBar(
+      child: Scaffold(
-        toolbarHeight: 68,
+        appBar: AppBar(
-        leading: Padding(
+          toolbarHeight: 68,
-          padding: const EdgeInsets.only(bottom: 8),
+          leading: Padding(
-          child: BackButton(
+            padding: const EdgeInsets.only(bottom: 8),
-            onPressed: () => ref.watch(routerProvider).pop(),
+            child: BackButton(
-          ),
+              onPressed: () => ref.watch(routerProvider).pop(),
-        ),
-        titleSpacing: 0,
-        title: Padding(
-          padding: const EdgeInsets.only(bottom: 8, right: 16),
-          child: ClipRRect(
-            borderRadius: BorderRadius.circular(50),
-            child: TextFormField(
-              controller: ref.watch(searchBookmarksProvider).searchController,
-              onChanged: (_) => ref.read(searchBookmarksProvider.notifier).notifyListeners(),
-              onEditingComplete: () {
-                ref.read(searchBookmarksProvider.notifier).setSearchTerm();
-                ref.read(searchBookmarksProvider.notifier).setInitialLoadStatus(LoadStatus.loading);
-                ref.read(fetchSearchBookmarksProvider(provider.limit));
-              },
-              autofocus: true,
-              decoration: InputDecoration(
-                hintText: t.bookmarks.search.searchBookmarks,
-                prefixIcon: const Icon(Icons.search_rounded),
-                border: InputBorder.none,
-                filled: true,
-                fillColor: Colors.grey.withOpacity(0.2),
-                suffixIcon: ref.watch(searchBookmarksProvider).searchController.text != ""
-                    ? IconButton(
-                        onPressed: ref.read(searchBookmarksProvider.notifier).clearSearch,
-                        icon: const Icon(
-                          Icons.close_rounded,
-                          size: 20,
-                        ),
-                        tooltip: t.bookmarks.search.clearSearch,
-                      )
-                    : null,
-              ),
-              textInputAction: TextInputAction.search,
             ),
           ),
-        ),
+          titleSpacing: 0,
-      ),
+          title: Padding(
-      body: Builder(
+            padding: const EdgeInsets.only(bottom: 8, right: 16),
-        builder: (context) {
+            child: ClipRRect(
-          if (provider.searchTerm == "") {
+              borderRadius: BorderRadius.circular(50),
-            return EnterSearchTermScreen(message: t.bookmarks.search.inputSearchTerm);
+              child: TextFormField(
-          }
+                controller: ref.watch(searchBookmarksProvider).searchController,
-
+                onChanged: (_) => ref.read(searchBookmarksProvider.notifier).notifyListeners(),
-          if (provider.inialLoadStatus == LoadStatus.loading) {
+                onEditingComplete: () {
-            return const Center(
+                  ref.read(searchBookmarksProvider.notifier).setSearchTerm();
-              child: CircularProgressIndicator(),
+                  ref.read(searchBookmarksProvider.notifier).setInitialLoadStatus(LoadStatus.loading);
-            );
+                  ref.read(fetchSearchBookmarksProvider(provider.limit));
-          }
-
-          if (provider.inialLoadStatus == LoadStatus.error) {
-            return ErrorScreen(
-              error: t.bookmarks.search.cannotSearchError,
-            );
-          }
-
-          if (provider.bookmarks.isEmpty) {
-            return NoDataScreen(
-              message: t.bookmarks.search.inputtedSearchTermNoResults,
-            );
-          }
-
-          return NotificationListener(
-            onNotification: scrollListener,
-            child: SlidableAutoCloseBehavior(
-              child: ListView.builder(
-                itemCount: provider.loadingMore ? provider.bookmarks.length + 1 : provider.bookmarks.length,
-                itemBuilder: (context, index) {
-                  if (provider.loadingMore == true && index == provider.bookmarks.length) {
-                    return const Padding(
-                      padding: EdgeInsets.all(16),
-                      child: Center(
-                        child: CircularProgressIndicator(),
-                      ),
-                    );
-                  }
-                  return BookmarkItem(
-                    bookmark: provider.bookmarks[index],
-                    onReadUnread: ref.read(searchBookmarksProvider.notifier).markAsReadUnread,
-                    onDelete: (bookmark) => showDialog(
-                      context: context,
-                      builder: (context) => DeleteBookmarkModal(
-                        bookmark: bookmark,
-                        onDelete: ref.read(searchBookmarksProvider.notifier).deleteBookmark,
-                      ),
-                    ),
-                    onArchiveUnarchive: ref.read(searchBookmarksProvider.notifier).archiveUnarchive,
-                  );
                 },
+                autofocus: true,
+                decoration: InputDecoration(
+                  hintText: t.bookmarks.search.searchBookmarks,
+                  prefixIcon: const Icon(Icons.search_rounded),
+                  border: InputBorder.none,
+                  filled: true,
+                  fillColor: Colors.grey.withOpacity(0.2),
+                  suffixIcon: ref.watch(searchBookmarksProvider).searchController.text != ""
+                      ? IconButton(
+                          onPressed: ref.read(searchBookmarksProvider.notifier).clearSearch,
+                          icon: const Icon(
+                            Icons.close_rounded,
+                            size: 20,
+                          ),
+                          tooltip: t.bookmarks.search.clearSearch,
+                        )
+                      : null,
+                ),
+                textInputAction: TextInputAction.search,
               ),
             ),
-          );
+          ),
-        },
+        ),
+        body: Builder(
+          builder: (context) {
+            if (provider.searchTerm == "") {
+              return EnterSearchTermScreen(message: t.bookmarks.search.inputSearchTerm);
+            }
+
+            if (provider.inialLoadStatus == LoadStatus.loading) {
+              return const Center(
+                child: CircularProgressIndicator(),
+              );
+            }
+
+            if (provider.inialLoadStatus == LoadStatus.error) {
+              return ErrorScreen(
+                error: t.bookmarks.search.cannotSearchError,
+              );
+            }
+
+            if (provider.bookmarks.isEmpty) {
+              return NoDataScreen(
+                message: t.bookmarks.search.inputtedSearchTermNoResults,
+              );
+            }
+
+            return NotificationListener(
+              onNotification: scrollListener,
+              child: SlidableAutoCloseBehavior(
+                child: ListView.builder(
+                  itemCount: provider.loadingMore ? provider.bookmarks.length + 1 : provider.bookmarks.length,
+                  itemBuilder: (context, index) {
+                    if (provider.loadingMore == true && index == provider.bookmarks.length) {
+                      return const Padding(
+                        padding: EdgeInsets.all(16),
+                        child: Center(
+                          child: CircularProgressIndicator(),
+                        ),
+                      );
+                    }
+                    return BookmarkItem(
+                      bookmark: provider.bookmarks[index],
+                      onReadUnread: ref.read(searchBookmarksProvider.notifier).markAsReadUnread,
+                      onDelete: (bookmark) => showDialog(
+                        context: context,
+                        builder: (context) => DeleteBookmarkModal(
+                          bookmark: bookmark,
+                          onDelete: ref.read(searchBookmarksProvider.notifier).deleteBookmark,
+                        ),
+                      ),
+                      onArchiveUnarchive: ref.read(searchBookmarksProvider.notifier).archiveUnarchive,
+                    );
+                  },
+                ),
+              ),
+            );
+          },
+        ),
       ),
     );
   }