fix: search LR issues (#7984)

* fix: some search LR issues * fix: revamp search textfield hint text
2025-06-27 02:50:15 +00:00 · 2025-05-27 08:32:47 +08:00 · 2025-05-27 08:32:47 +08:00 · 54206c446f
commit 54206c446f
parent d93929a3b6
11 changed files with 129 additions and 103 deletions
--- a/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/bottom_sheet/show_mobile_bottom_sheet.dart
@ -59,6 +59,7 @@ Future<T?> showMobileBottomSheet<T>(
  double initialChildSize = 0.51,
  double bottomSheetPadding = 0,
  bool enablePadding = true,
+  WidgetBuilder? dragHandleBuilder,
 }) async {
  assert(
    showHeader ||
@ -102,7 +103,7 @@ Future<T?> showMobileBottomSheet<T>(
      // ----- header area -----
      if (showDragHandle) {
        children.add(
-          const DragHandle(),
+          dragHandleBuilder?.call(context) ?? const DragHandle(),
        );
      }

--- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_reference_bottom_sheet.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_reference_bottom_sheet.dart
@ -12,6 +12,7 @@ import 'package:appflowy/generated/locale_keys.g.dart';
 import 'package:appflowy_ui/appflowy_ui.dart';
 import 'package:easy_localization/easy_localization.dart' hide TextDirection;
 import 'package:flowy_infra_ui/flowy_infra_ui.dart';
+import 'package:universal_platform/universal_platform.dart';

 class SearchSourceReferenceBottomSheet extends StatelessWidget {
  const SearchSourceReferenceBottomSheet(this.sources, {super.key});
@ -40,6 +41,8 @@ class SearchSourceReferenceBottomSheet extends StatelessWidget {
          minChildSize: 1.0,
          initialChildSize: 1.0,
          backgroundColor: theme.surfaceColorScheme.primary,
+          dragHandleBuilder:
+              UniversalPlatform.isAndroid ? (_) => const _DragHandler() : null,
          builder: (_) => SizedBox(
            height: MediaQuery.of(context).size.height,
            child: MobileViewPage(
@ -152,3 +155,20 @@ class PageReferenceList extends StatelessWidget {
    }
  }
 }
+
+class _DragHandler extends StatelessWidget {
+  const _DragHandler();
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 4,
+      width: 40,
+      margin: const EdgeInsets.symmetric(vertical: 12),
+      decoration: BoxDecoration(
+        color: Colors.grey.shade400,
+        borderRadius: BorderRadius.circular(2),
+      ),
+    );
+  }
+}
--- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_result.dart
@ -167,30 +167,27 @@ class _NoResult extends StatelessWidget {
    final textColor = theme.textColorScheme.secondary;
    return Align(
      alignment: Alignment.topCenter,
-      child: SizedBox(
-        height: 140,
-        child: Column(
-          children: [
-            const VSpace(48),
-            FlowySvg(
-              FlowySvgs.m_home_search_icon_m,
-              color: theme.iconColorScheme.secondary,
-              size: Size.square(24),
-            ),
-            const VSpace(12),
-            Text(
-              LocaleKeys.search_noResultForSearching.tr(),
-              style: theme.textStyle.body.enhanced(color: textColor),
-              maxLines: 1,
-              overflow: TextOverflow.ellipsis,
-            ),
-            Text(
-              textAlign: TextAlign.center,
-              LocaleKeys.search_noResultForSearchingHint.tr(),
-              style: theme.textStyle.caption.standard(color: textColor),
-            ),
-          ],
-        ),
+      child: Column(
+        children: [
+          const VSpace(48),
+          FlowySvg(
+            FlowySvgs.m_home_search_icon_m,
+            color: theme.iconColorScheme.secondary,
+            size: Size.square(24),
+          ),
+          const VSpace(12),
+          Text(
+            LocaleKeys.search_noResultForSearching.tr(),
+            style: theme.textStyle.heading4.enhanced(color: textColor),
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
+          Text(
+            textAlign: TextAlign.center,
+            LocaleKeys.search_noResultForSearchingHint.tr(),
+            style: theme.textStyle.body.standard(color: textColor),
+          ),
+        ],
      ),
    );
  }
--- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_search_textfield.dart
@ -114,10 +114,7 @@ class _MobileSearchTextfieldState extends State<MobileSearchTextfield>
                  focusNode: focusNode,
                  textAlign: TextAlign.left,
                  controller: controller,
-                  style: TextStyle(
-                    fontSize: 14,
-                    height: 20 / 14,
-                    fontWeight: FontWeight.w400,
+                  style: theme.textStyle.heading4.standard(
                    color: theme.textColorScheme.primary,
                  ),
                  decoration: buildInputDecoration(context),
@ -140,10 +137,7 @@ class _MobileSearchTextfieldState extends State<MobileSearchTextfield>
    final enableBorder = border.copyWith(
      borderSide: BorderSide(color: theme.borderColorScheme.themeThick),
    );
-    final hintStyle = TextStyle(
-      fontSize: 14,
-      height: 20 / 14,
-      fontWeight: FontWeight.w400,
+    final hintStyle = theme.textStyle.heading4.standard(
      color: theme.textColorScheme.tertiary,
    );
    return InputDecoration(
--- a/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart
+++ b/frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart
@ -31,7 +31,7 @@ class ViewAncestorBloc extends Bloc<ViewAncestorEvent, ViewAncestorState> {
                }
              },
            );
-            if(ancester != null) {
+            if (ancester != null) {
              emit(state.copyWith(ancestor: ancester, isLoading: false));
            }
          },
@ -90,7 +90,7 @@ extension ViewAncestorTextExtension on ViewAncestorState {
        return Text(
          displayPath.join(' / '),
          style: textStyle,
-          maxLines: 1,
+          maxLines: 2,
          overflow: TextOverflow.ellipsis,
        );
      },
@ -114,6 +114,7 @@ extension ViewAncestorTextExtension on ViewAncestorState {
        .standard(color: theme.textColorScheme.tertiary)
        .copyWith(letterSpacing: 0.1);
    return Row(
+      mainAxisSize: MainAxisSize.min,
      children: [
        HSpace(8),
        Text(
@ -123,11 +124,13 @@ extension ViewAncestorTextExtension on ViewAncestorState {
          ),
        ),
        HSpace(8),
-        Text(
-          displayPath.join(' / '),
-          style: style,
-          maxLines: 1,
-          overflow: TextOverflow.ellipsis,
+        Flexible(
+          child: Text(
+            displayPath.join(' / '),
+            style: style,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
        ),
      ],
    );
--- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart
@ -55,7 +55,7 @@ class PagePreview extends StatelessWidget {
              borderRadius: BorderRadius.circular(12),
            ),
            margin: EdgeInsets.only(
-              top: theme.spacing.m,
+              top: theme.spacing.xs,
              bottom: theme.spacing.xl,
            ),
            child: Stack(
--- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart
@ -74,7 +74,7 @@ class RecentViewsList extends StatelessWidget {
                        if (showAskingAI) SearchAskAiEntrance(),
                        buildTitle(context),
                        buildViewList(state, context, hidePreview),
-                        VSpace(8),
+                        VSpace(16),
                      ],
                    ),
                  ),
@ -97,11 +97,11 @@ class RecentViewsList extends StatelessWidget {
      ),
      child: Text(
        LocaleKeys.sideBar_recent.tr(),
-        style: theme.textStyle.heading4
+        style: theme.textStyle.body
            .enhanced(color: theme.textColorScheme.secondary)
            .copyWith(
              letterSpacing: 0.2,
-              height: 24 / 16,
+              height: 22 / 16,
            ),
      ),
    );
--- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart
@ -36,40 +36,43 @@ class _AskAIFor extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = AppFlowyTheme.of(context);
    final spaceM = theme.spacing.m, spaceL = theme.spacing.l;
-    return AFBaseButton(
-      borderRadius: spaceM,
-      padding: EdgeInsets.all(spaceL),
-      backgroundColor: (context, isHovering, disable) {
-        if (isHovering) {
-          return theme.fillColorScheme.contentHover;
-        }
-        return Colors.transparent;
-      },
-      borderColor: (context, isHovering, disable, isFocused) =>
-          Colors.transparent,
-      builder: (ctx, isHovering, disable) {
-        return Row(
-          children: [
-            SizedBox.square(
-              dimension: 20,
-              child: Center(
-                child: FlowySvg(
-                  FlowySvgs.m_home_ai_chat_icon_m,
-                  size: Size.square(20),
-                  blendMode: null,
+    return Padding(
+      padding: EdgeInsets.symmetric(vertical: theme.spacing.xs),
+      child: AFBaseButton(
+        borderRadius: spaceM,
+        padding: EdgeInsets.all(spaceL),
+        backgroundColor: (context, isHovering, disable) {
+          if (isHovering) {
+            return theme.fillColorScheme.contentHover;
+          }
+          return Colors.transparent;
+        },
+        borderColor: (context, isHovering, disable, isFocused) =>
+            Colors.transparent,
+        builder: (ctx, isHovering, disable) {
+          return Row(
+            children: [
+              SizedBox.square(
+                dimension: 20,
+                child: Center(
+                  child: FlowySvg(
+                    FlowySvgs.m_home_ai_chat_icon_m,
+                    size: Size.square(20),
+                    blendMode: null,
+                  ),
                ),
              ),
-            ),
-            HSpace(8),
-            buildText(context),
-          ],
-        );
-      },
-      onTap: () {
-        context
-            .read<CommandPaletteBloc?>()
-            ?.add(CommandPaletteEvent.goingToAskAI());
-      },
+              HSpace(8),
+              buildText(context),
+            ],
+          );
+        },
+        onTap: () {
+          context
+              .read<CommandPaletteBloc?>()
+              ?.add(CommandPaletteEvent.goingToAskAI());
+        },
+      ),
    );
  }

@ -116,27 +119,30 @@ class _AISearching extends StatelessWidget {
  Widget build(BuildContext context) {
    final theme = AppFlowyTheme.of(context);
    return Padding(
-      padding: EdgeInsets.all(theme.spacing.l),
-      child: Row(
-        children: [
-          SizedBox.square(
-            dimension: 20,
-            child: Center(
-              child: FlowySvg(
-                FlowySvgs.m_home_ai_chat_icon_m,
-                size: Size.square(20),
-                blendMode: null,
+      padding: EdgeInsets.symmetric(vertical: theme.spacing.xs),
+      child: Padding(
+        padding: EdgeInsets.all(theme.spacing.l),
+        child: Row(
+          children: [
+            SizedBox.square(
+              dimension: 20,
+              child: Center(
+                child: FlowySvg(
+                  FlowySvgs.m_home_ai_chat_icon_m,
+                  size: Size.square(20),
+                  blendMode: null,
+                ),
              ),
            ),
-          ),
-          HSpace(8),
-          Text(
-            LocaleKeys.search_searching.tr(),
-            style: theme.textStyle.body
-                .standard(color: theme.textColorScheme.secondary)
-                .copyWith(height: 22 / 14),
-          ),
-        ],
+            HSpace(8),
+            Text(
+              LocaleKeys.search_searching.tr(),
+              style: theme.textStyle.body
+                  .standard(color: theme.textColorScheme.secondary)
+                  .copyWith(height: 22 / 14),
+            ),
+          ],
+        ),
      ),
    );
  }
@ -153,11 +159,9 @@ class _AIOverview extends StatelessWidget {
    if (summaries.isEmpty) {
      return const SizedBox.shrink();
    }
+    final xl = theme.spacing.xl, m = theme.spacing.m, l = theme.spacing.l;
    return Padding(
-      padding: EdgeInsets.symmetric(
-        vertical: theme.spacing.l,
-        horizontal: theme.spacing.m,
-      ),
+      padding: EdgeInsets.fromLTRB(m, l, m, xl),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
@ -228,7 +232,7 @@ class _AIOverview extends StatelessWidget {
        HSpace(theme.spacing.l),
        Text(
          LocaleKeys.commandPalette_aiOverview.tr(),
-          style: theme.textStyle.heading4
+          style: theme.textStyle.body
              .enhanced(color: theme.textColorScheme.secondary)
              .copyWith(height: 22 / 16, letterSpacing: 0.2),
        ),
--- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart
@ -1,3 +1,4 @@
+import 'package:appflowy/workspace/application/user/user_workspace_bloc.dart';
 import 'package:appflowy_ui/appflowy_ui.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
@ -87,6 +88,8 @@ class _SearchFieldState extends State<SearchField> {
  Widget build(BuildContext context) {
    final theme = AppFlowyTheme.of(context);
    final radius = BorderRadius.circular(theme.spacing.l);
+    final workspace =
+        context.read<UserWorkspaceBloc?>()?.state.currentWorkspace;

    return Container(
      height: 44,
@ -109,9 +112,11 @@ class _SearchFieldState extends State<SearchField> {
                borderRadius: radius,
              ),
              isDense: false,
-              hintText: LocaleKeys.search_searchOrAskAI.tr(),
+              hintText: LocaleKeys.search_searchFieldHint
+                  .tr(args: ['${workspace?.name}']),
              hintStyle: theme.textStyle.heading4
                  .standard(color: theme.textColorScheme.tertiary),
+              hintMaxLines: 1,
              counterText: "",
              focusedBorder: OutlineInputBorder(
                borderRadius: radius,
--- a/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart
+++ b/frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart
@ -91,11 +91,11 @@ class _SearchResultListState extends State<SearchResultList> {
      ),
      child: Text(
        LocaleKeys.commandPalette_bestMatches.tr(),
-        style: theme.textStyle.heading4
+        style: theme.textStyle.body
            .enhanced(color: theme.textColorScheme.secondary)
            .copyWith(
              letterSpacing: 0.2,
-              height: 24 / 16,
+              height: 22 / 16,
            ),
      ),
    );
@ -156,6 +156,7 @@ class _SearchResultListState extends State<SearchResultList> {
                            );
                          },
                        ),
+                        VSpace(16),
                      ],
                    ),
                  ],
--- a/frontend/resources/translations/en-US.json
+++ b/frontend/resources/translations/en-US.json
@ -2356,6 +2356,7 @@
    "label": "Search",
    "sidebarSearchIcon": "Search and quickly jump to a page",
    "searchOrAskAI": "Search or ask AI",
+    "searchFieldHint": "Search or ask a question in {}...",
    "askAIAnything": "Ask AI anything",
    "askAIFor": "Ask AI",
    "searching": "Searching...",