search suggestions

lib/components/appbar.dart

@@ -548,6 +548,10 @@ class SearchBarController {
 
   String get text => _state?.getText() ?? '';
 
+  set text(String text) {
+    setText(text);
+  }
+
   SearchBarController({this.onSearch, this.initialText = ''});
 }
 
@@ -558,10 +562,12 @@ abstract mixin class _SearchBarMixin {
 }
 
 class SliverSearchBar extends StatefulWidget {
-  const SliverSearchBar({super.key, required this.controller});
+  const SliverSearchBar({super.key, required this.controller, this.onChanged});
 
   final SearchBarController controller;
 
+  final void Function(String)? onChanged;
+
   @override
   State<SliverSearchBar> createState() => _SliverSearchBarState();
 }
@@ -593,10 +599,12 @@ class _SliverSearchBarState extends State<SliverSearchBar>
   @override
   Widget build(BuildContext context) {
     return SliverPersistentHeader(
+      pinned: true,
       delegate: _SliverSearchBarDelegate(
         editingController: _editingController,
         controller: _controller,
         topPadding: MediaQuery.of(context).padding.top,
+        onChanged: widget.onChanged,
       ),
     );
   }
@@ -609,10 +617,13 @@ class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
 
   final double topPadding;
 
+  final void Function(String)? onChanged;
+
   const _SliverSearchBarDelegate({
     required this.editingController,
     required this.controller,
     required this.topPadding,
+    this.onChanged,
   });
 
   static const _kAppBarHeight = 52.0;
@@ -625,6 +636,7 @@ class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
       width: double.infinity,
       padding: EdgeInsets.only(top: topPadding),
       decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
         border: Border(
           bottom: BorderSide(
             color: Theme.of(context).colorScheme.outlineVariant,
@@ -647,6 +659,7 @@ class _SliverSearchBarDelegate extends SliverPersistentHeaderDelegate {
                 onSubmitted: (text) {
                   controller.onSearch?.call(text);
                 },
+                onChanged: onChanged,
               ),
             ),
           ),

lib/components/flyout.dart

@@ -50,10 +50,10 @@ class Flyout extends StatefulWidget {
   final FlyoutController? controller;
 
   @override
-  State<Flyout> createState() => _FlyoutState();
+  State<Flyout> createState() => FlyoutState();
 }
 
-class _FlyoutState extends State<Flyout> {
+class FlyoutState extends State<Flyout> {
   @override
   void initState() {
     if (widget.controller != null) {

lib/foundation/comic_source/comic_source.dart

@@ -377,13 +377,10 @@ class SearchPageData {
 
   final bool enableLanguageFilter;
 
-  final bool enableTagsSuggestions;
-
   const SearchPageData(this.searchOptions, this.loadPage)
       : enableLanguageFilter = false,
         customOptionsBuilder = null,
-        overrideSearchResultBuilder = null,
+        overrideSearchResultBuilder = null;
-        enableTagsSuggestions = false;
 }
 
 class SearchOptions {

lib/pages/categories_page.dart

@@ -5,6 +5,7 @@ import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
 import 'package:venera/foundation/state_controller.dart';
 import 'package:venera/pages/ranking_page.dart';
+import 'package:venera/pages/search_result_page.dart';
 import 'package:venera/utils/translations.dart';
 
 import 'category_comics_page.dart';
@@ -88,29 +89,24 @@ class _CategoryPage extends StatelessWidget {
     String categoryKey,
   ) {
     if (type == 'search') {
-      // TODO: Implement search
-      /*
       App.mainNavigatorKey?.currentContext?.to(
-            () => SearchResultPage(
+        () => SearchResultPage(
-          keyword: tag,
+          text: tag,
           options: const [],
           sourceKey: findComicSourceKey(),
         ),
       );
-       */
     } else if (type == "search_with_namespace") {
-      /*
       if (tag.contains(" ")) {
         tag = '"$tag"';
       }
       App.mainNavigatorKey?.currentContext?.to(
-            () => SearchResultPage(
+        () => SearchResultPage(
-          keyword: "$namespace:$tag",
+          text: "$namespace:$tag",
           options: const [],
           sourceKey: findComicSourceKey(),
         ),
       );
-       */
     } else if (type == "category") {
       App.mainNavigatorKey!.currentContext!.to(
         () => CategoryComicsPage(

lib/pages/comic_page.dart

@@ -306,7 +306,7 @@ class _ComicPageState extends LoadingState<ComicPage, ComicDetails>
         ];
         color = context.useBackgroundColor(colors[(i++) % (colors.length)]);
       } else {
-        color = context.colorScheme.surfaceContainer;
+        color = context.colorScheme.surfaceContainerLow;
       }
 
       final borderRadius = BorderRadius.circular(12);

lib/pages/search_page.dart

@@ -3,9 +3,15 @@ import 'package:venera/components/components.dart';
 import 'package:venera/foundation/app.dart';
 import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
+import 'package:venera/foundation/state_controller.dart';
 import 'package:venera/pages/search_result_page.dart';
+import 'package:venera/utils/app_links.dart';
+import 'package:venera/utils/ext.dart';
+import 'package:venera/utils/tags_translation.dart';
 import 'package:venera/utils/translations.dart';
 
+import 'comic_page.dart';
+
 class SearchPage extends StatefulWidget {
   const SearchPage({super.key});
 
@@ -25,13 +31,95 @@ class _SearchPageState extends State<SearchPage> {
   }
 
   void search([String? text]) {
-    context.to(
+    context
-      () => SearchResultPage(
+        .to(
-        text: text ?? controller.text,
+          () => SearchResultPage(
-        sourceKey: searchTarget,
+            text: text ?? controller.text,
-        options: options,
+            sourceKey: searchTarget,
-      ),
+            options: options,
-    );
+          ),
+        )
+        .then((_) => update());
+  }
+
+  var suggestions = <Pair<String, TranslationType>>[];
+
+  bool canHandleUrl(String text) {
+    if (!text.isURL) return false;
+    for (var source in ComicSource.all()) {
+      if (source.linkHandler != null) {
+        var uri = Uri.parse(text);
+        if (source.linkHandler!.domains.contains(uri.host)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  void findSuggestions() {
+    var text = controller.text.split(" ").last;
+    var suggestions = this.suggestions;
+
+    suggestions.clear();
+
+    if (canHandleUrl(controller.text)) {
+      suggestions.add(Pair("**URL**", TranslationType.other));
+    } else {
+      var text = controller.text;
+
+      for (var comicSource in ComicSource.all()) {
+        if (comicSource.idMatcher?.hasMatch(text) ?? false) {
+          suggestions.add(Pair(
+            "**${comicSource.key}**",
+            TranslationType.other,
+          ));
+        }
+      }
+    }
+
+    if (!ComicSource.find(searchTarget)!.enableTagsSuggestions) {
+      update();
+      return;
+    }
+
+    bool check(String text, String key, String value) {
+      if (text.removeAllBlank == "") {
+        return false;
+      }
+      if (key.length >= text.length && key.substring(0, text.length) == text ||
+          (key.contains(" ") &&
+              key.split(" ").last.length >= text.length &&
+              key.split(" ").last.substring(0, text.length) == text)) {
+        return true;
+      } else if (value.length >= text.length && value.contains(text)) {
+        return true;
+      }
+      return false;
+    }
+
+    void find(Map<String, String> map, TranslationType type) {
+      for (var element in map.entries) {
+        if (suggestions.length > 100) {
+          break;
+        }
+        if (check(text, element.key, element.value)) {
+          suggestions.add(Pair(element.key, type));
+        }
+      }
+    }
+
+    find(TagsTranslation.femaleTags, TranslationType.female);
+    find(TagsTranslation.maleTags, TranslationType.male);
+    find(TagsTranslation.parodyTags, TranslationType.parody);
+    find(TagsTranslation.characterTranslations, TranslationType.character);
+    find(TagsTranslation.otherTags, TranslationType.other);
+    find(TagsTranslation.mixedTags, TranslationType.mixed);
+    find(TagsTranslation.languageTranslations, TranslationType.language);
+    find(TagsTranslation.artistTags, TranslationType.artist);
+    find(TagsTranslation.groupTags, TranslationType.group);
+    find(TagsTranslation.cosplayerTags, TranslationType.cosplayer);
+    update();
   }
 
   @override
@@ -53,15 +141,27 @@ class _SearchPageState extends State<SearchPage> {
   Widget build(BuildContext context) {
     return Scaffold(
       body: SmoothCustomScrollView(
-        slivers: [
+        slivers: buildSlivers().toList(),
-          SliverSearchBar(controller: controller),
-          buildSearchTarget(),
-          buildSearchOptions(),
-        ],
       ),
     );
   }
 
+  Iterable<Widget> buildSlivers() sync* {
+    yield SliverSearchBar(
+      controller: controller,
+      onChanged: (s) {
+        findSuggestions();
+      },
+    );
+    if (suggestions.isNotEmpty) {
+      yield buildSuggestions(context);
+    } else {
+      yield buildSearchTarget();
+      yield buildSearchOptions();
+      yield buildSearchHistory();
+    }
+  }
+
   Widget buildSearchTarget() {
     var sources =
         ComicSource.all().where((e) => e.searchPageData != null).toList();
@@ -148,21 +248,199 @@ class _SearchPageState extends State<SearchPage> {
       delegate: SliverChildBuilderDelegate(
         (context, index) {
           if (index == 0) {
+            return const Divider(
+              thickness: 0.6,
+            ).paddingTop(16);
+          }
+          if (index == 1) {
             return ListTile(
+              leading: const Icon(Icons.history),
               contentPadding: EdgeInsets.zero,
               title: Text("Search History".tl),
+              trailing: Flyout(
+                flyoutBuilder: (context) {
+                  return FlyoutContent(
+                    title: "Clear Search History".tl,
+                    actions: [
+                      FilledButton(
+                        child: Text("Clear".tl),
+                        onPressed: () {
+                          appdata.clearSearchHistory();
+                          context.pop();
+                          update();
+                        },
+                      )
+                    ],
+                  );
+                },
+                child: Builder(
+                  builder: (context) {
+                    return Tooltip(
+                      message: "Clear".tl,
+                      child: IconButton(
+                        icon: const Icon(Icons.clear_all),
+                        onPressed: () {
+                          context
+                              .findAncestorStateOfType<FlyoutState>()!
+                              .show();
+                        },
+                      ),
+                    );
+                  },
+                ),
+              ),
             );
           }
           return ListTile(
-            contentPadding: EdgeInsets.zero,
+            contentPadding: const EdgeInsets.symmetric(horizontal: 12),
-            title: Text(appdata.searchHistory[index - 1]),
+            title: Text(appdata.searchHistory[index - 2]),
             onTap: () {
-              search(appdata.searchHistory[index - 1]);
+              search(appdata.searchHistory[index - 2]);
             },
           );
         },
-        childCount: 1 + appdata.searchHistory.length,
+        childCount: 2 + appdata.searchHistory.length,
       ),
     ).sliverPaddingHorizontal(16);
   }
+
+  Widget buildSuggestions(BuildContext context) {
+    bool check(String text, String key, String value) {
+      if (text.removeAllBlank == "") {
+        return false;
+      }
+      if (key.length >= text.length && key.substring(0, text.length) == text ||
+          (key.contains(" ") &&
+              key.split(" ").last.length >= text.length &&
+              key.split(" ").last.substring(0, text.length) == text)) {
+        return true;
+      } else if (value.length >= text.length && value.contains(text)) {
+        return true;
+      }
+      return false;
+    }
+
+    void onSelected(String text, TranslationType? type) {
+      var words = controller.text.split(" ");
+      if (words.length >= 2 &&
+          check("${words[words.length - 2]} ${words[words.length - 1]}", text,
+              text.translateTagsToCN)) {
+        controller.text = controller.text.replaceLast(
+            "${words[words.length - 2]} ${words[words.length - 1]}", "");
+      } else {
+        controller.text =
+            controller.text.replaceLast(words[words.length - 1], "");
+      }
+      if (type != null) {
+        controller.text += "${type.name}:$text ";
+      } else {
+        controller.text += "$text ";
+      }
+      update();
+    }
+
+    bool showMethod = MediaQuery.of(context).size.width < 600;
+    bool showTranslation = App.locale.languageCode == "zh";
+    Widget buildItem(Pair<String, TranslationType> value) {
+      if (value.left == "**URL**") {
+        return ListTile(
+          leading: const Icon(Icons.link),
+          title: Text("Open link".tl),
+          subtitle: Text(
+            controller.text,
+            maxLines: 1,
+            overflow: TextOverflow.fade,
+          ),
+          trailing: const Icon(Icons.arrow_right),
+          onTap: () {
+            handleAppLink(Uri.parse(controller.text));
+          },
+        );
+      }
+
+      if (RegExp(r"^\*\*.*\*\*$").hasMatch(value.left)) {
+        var key = value.left.substring(2, value.left.length - 2);
+        var comicSource = ComicSource.find(key);
+        if (comicSource == null) {
+          return const SizedBox();
+        }
+        return ListTile(
+          leading: const Icon(Icons.link),
+          title: Text("${"Open comic".tl}: ${comicSource.name}"),
+          subtitle: Text(
+            controller.text,
+            maxLines: 1,
+            overflow: TextOverflow.fade,
+          ),
+          trailing: const Icon(Icons.arrow_right),
+          onTap: () {
+            context.to(
+              () => ComicPage(
+                sourceKey: key,
+                id: controller.text,
+              ),
+            );
+          },
+        );
+      }
+
+      var subTitle = TagsTranslation.translationTagWithNamespace(
+          value.left, value.right.name);
+      return ListTile(
+        title: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: Text(value.left),
+            ),
+            if (!showMethod)
+              const SizedBox(
+                width: 12,
+              ),
+            if (!showMethod && showTranslation)
+              Text(
+                subTitle,
+                style: TextStyle(
+                    fontSize: 14, color: Theme.of(context).colorScheme.outline),
+              )
+          ],
+        ),
+        subtitle: (showMethod && showTranslation) ? Text(subTitle) : null,
+        trailing: Text(
+          value.right.name,
+          style: const TextStyle(fontSize: 13),
+        ),
+        onTap: () => onSelected(value.left, value.right),
+      );
+    }
+
+    return SliverMainAxisGroup(
+      slivers: [
+        SliverToBoxAdapter(
+          child: ListTile(
+            leading: const Icon(Icons.hub_outlined),
+            title: Text("Suggestions".tl),
+            trailing: Tooltip(
+              message: "Clear".tl,
+              child: IconButton(
+                icon: const Icon(Icons.clear_all),
+                onPressed: () {
+                  suggestions.clear();
+                  update();
+                },
+              ),
+            ),
+          ),
+        ),
+        SliverList(
+          delegate: SliverChildBuilderDelegate(
+            (context, index) {
+              return buildItem(suggestions[index]);
+            },
+            childCount: suggestions.length,
+          ),
+        ),
+      ],
+    );
+  }
 }

lib/pages/search_result_page.dart

@@ -1,6 +1,12 @@
 import 'package:flutter/material.dart';
 import 'package:venera/components/components.dart';
+import 'package:venera/foundation/app.dart';
+import 'package:venera/foundation/appdata.dart';
 import 'package:venera/foundation/comic_source/comic_source.dart';
+import 'package:venera/foundation/state_controller.dart';
+import 'package:venera/utils/ext.dart';
+import 'package:venera/utils/tags_translation.dart';
+import 'package:venera/utils/translations.dart';
 
 class SearchResultPage extends StatefulWidget {
   const SearchResultPage({
@@ -29,11 +35,47 @@ class _SearchResultPageState extends State<SearchResultPage> {
 
   late String text;
 
+  OverlayEntry? get suggestionOverlay => suggestionsController.entry;
+
+  late _SuggestionsController suggestionsController;
+
   void search([String? text]) {
     if (text != null) {
       setState(() {
         this.text = text;
       });
+      appdata.addSearchHistory(text);
+    }
+  }
+
+  void onChanged(String s) {
+    if(!ComicSource.find(sourceKey)!.enableTagsSuggestions){
+      return;
+    }
+    suggestionsController.findSuggestions();
+    if (suggestionOverlay != null) {
+      if (suggestionsController.suggestions.isEmpty) {
+        suggestionsController.remove();
+      } else {
+        suggestionsController.updateWidget();
+      }
+    } else if (suggestionsController.suggestions.isNotEmpty) {
+      suggestionsController.entry = OverlayEntry(
+        builder: (context) {
+          return Positioned(
+            top: context.padding.top + 56,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            child: Material(
+              child: _Suggestions(
+                controller: suggestionsController,
+              ),
+            ),
+          );
+        },
+      );
+      Overlay.of(context).insert(suggestionOverlay!);
     }
   }
 
@@ -46,6 +88,8 @@ class _SearchResultPageState extends State<SearchResultPage> {
     sourceKey = widget.sourceKey;
     options = widget.options;
     text = widget.text;
+    appdata.addSearchHistory(text);
+    suggestionsController = _SuggestionsController(controller);
     super.initState();
   }
 
@@ -58,6 +102,7 @@ class _SearchResultPageState extends State<SearchResultPage> {
       ),
       leadingSliver: SliverSearchBar(
         controller: controller,
+        onChanged: onChanged,
       ),
       loadPage: (i) {
         var source = ComicSource.find(sourceKey);
@@ -70,3 +115,208 @@ class _SearchResultPageState extends State<SearchResultPage> {
     );
   }
 }
+
+class _SuggestionsController {
+  _SuggestionsState? _state;
+
+  final SearchBarController controller;
+
+  OverlayEntry? entry;
+
+  void updateWidget() {
+    _state?.update();
+  }
+
+  void remove() {
+    entry?.remove();
+    entry = null;
+  }
+
+  var suggestions = <Pair<String, TranslationType>>[];
+
+  void findSuggestions() {
+    var text = controller.text.split(" ").last;
+    var suggestions = this.suggestions;
+
+    suggestions.clear();
+
+    bool check(String text, String key, String value) {
+      if (text.removeAllBlank == "") {
+        return false;
+      }
+      if (key.length >= text.length && key.substring(0, text.length) == text ||
+          (key.contains(" ") &&
+              key.split(" ").last.length >= text.length &&
+              key.split(" ").last.substring(0, text.length) == text)) {
+        return true;
+      } else if (value.length >= text.length && value.contains(text)) {
+        return true;
+      }
+      return false;
+    }
+
+    void find(Map<String, String> map, TranslationType type) {
+      for (var element in map.entries) {
+        if (suggestions.length > 200) {
+          break;
+        }
+        if (check(text, element.key, element.value)) {
+          suggestions.add(Pair(element.key, type));
+        }
+      }
+    }
+
+    find(TagsTranslation.femaleTags, TranslationType.female);
+    find(TagsTranslation.maleTags, TranslationType.male);
+    find(TagsTranslation.parodyTags, TranslationType.parody);
+    find(TagsTranslation.characterTranslations, TranslationType.character);
+    find(TagsTranslation.otherTags, TranslationType.other);
+    find(TagsTranslation.mixedTags, TranslationType.mixed);
+    find(TagsTranslation.languageTranslations, TranslationType.language);
+    find(TagsTranslation.artistTags, TranslationType.artist);
+    find(TagsTranslation.groupTags, TranslationType.group);
+    find(TagsTranslation.cosplayerTags, TranslationType.cosplayer);
+  }
+
+  _SuggestionsController(this.controller);
+}
+
+class _Suggestions extends StatefulWidget {
+  const _Suggestions({required this.controller});
+
+  final _SuggestionsController controller;
+
+  @override
+  State<_Suggestions> createState() => _SuggestionsState();
+}
+
+class _SuggestionsState extends State<_Suggestions> {
+  void update() {
+    setState(() {});
+  }
+
+  @override
+  void initState() {
+    widget.controller._state = this;
+    super.initState();
+  }
+
+  @override
+  void didUpdateWidget(covariant _Suggestions oldWidget) {
+    if (oldWidget.controller != widget.controller) {
+      oldWidget.controller._state = null;
+      widget.controller._state = this;
+    }
+    super.didUpdateWidget(oldWidget);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return buildSuggestions(context);
+  }
+
+  Widget buildSuggestions(BuildContext context) {
+    bool showMethod = MediaQuery.of(context).size.width < 600;
+    bool showTranslation = App.locale.languageCode == "zh";
+
+    Widget buildItem(Pair<String, TranslationType> value) {
+      var subTitle = TagsTranslation.translationTagWithNamespace(
+          value.left, value.right.name);
+      return ListTile(
+        title: Row(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Expanded(
+              child: Text(
+                value.left,
+                maxLines: 2,
+              ),
+            ),
+            if (!showMethod)
+              const SizedBox(
+                width: 12,
+              ),
+            if (!showMethod && showTranslation)
+              Text(
+                subTitle,
+                style: TextStyle(
+                    fontSize: 14, color: Theme.of(context).colorScheme.outline),
+              )
+          ],
+        ),
+        subtitle: (showMethod && showTranslation) ? Text(subTitle) : null,
+        trailing: Text(
+          value.right.name,
+          style: const TextStyle(fontSize: 13),
+        ),
+        onTap: () => onSelected(value.left, value.right),
+      );
+    }
+
+    return Column(
+      children: [
+        ListTile(
+          leading: const Icon(Icons.hub_outlined),
+          title: Text("Suggestions".tl),
+          trailing: Tooltip(
+            message: "Clear".tl,
+            child: IconButton(
+              icon: const Icon(Icons.clear_all),
+              onPressed: () {
+                widget.controller.suggestions.clear();
+                widget.controller.remove();
+              },
+            ),
+          ),
+        ),
+        Expanded(
+          child: ListView.builder(
+            padding: const EdgeInsets.symmetric(horizontal: 16),
+            itemCount: widget.controller.suggestions.length,
+            itemBuilder: (context, index) =>
+                buildItem(widget.controller.suggestions[index]),
+          ),
+        )
+      ],
+    );
+  }
+
+  bool check(String text, String key, String value) {
+    if (text.removeAllBlank == "") {
+      return false;
+    }
+    if (key.length >= text.length && key.substring(0, text.length) == text ||
+        (key.contains(" ") &&
+            key.split(" ").last.length >= text.length &&
+            key.split(" ").last.substring(0, text.length) == text)) {
+      return true;
+    } else if (value.length >= text.length && value.contains(text)) {
+      return true;
+    }
+    return false;
+  }
+
+  void onSelected(String text, TranslationType? type) {
+    var controller = widget.controller.controller;
+    var words = controller.text.split(" ");
+    if (words.length >= 2 &&
+        check("${words[words.length - 2]} ${words[words.length - 1]}", text,
+            text.translateTagsToCN)) {
+      controller.text = controller.text.replaceLast(
+          "${words[words.length - 2]} ${words[words.length - 1]}", "");
+    } else {
+      controller.text =
+          controller.text.replaceLast(words[words.length - 1], "");
+    }
+    if(text.contains(' ')) {
+      text = "'$text'";
+    }
+    if (type != null) {
+      controller.text += "${type.name}:$text ";
+    } else {
+      controller.text += "$text ";
+    }
+    widget.controller.suggestions.clear();
+    widget.controller.remove();
+  }
+}