[PR #7950] [MERGED] fix: desktop Search UI improvement #8228

New issue

Closed

opened 2026-03-23 23:23:12 +00:00 by mirror · 0 comments

mirror commented

2026-03-23 23:23:12 +00:00

Owner

📋 Pull Request Information

Original PR: https://github.com/AppFlowy-IO/AppFlowy/pull/7950
Author: @asjqkkkk
Created: 5/19/2025
Status: ✅ Merged
Merged: 5/21/2025
Merged by: @LucasXu0

Base: main ← Head: feat/desktop/search

📝 Commits (4)

94c48e9 fix: improve search recent list UI
c7dae6b fix: complete desktop search preview UI improvement
3a7111e fix: hide search preview when the window is narrow
dcb9924 fix: optimize some code

📊 Changes

15 files changed (+638 additions, -412 deletions)

View changed files

📝 frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart (+2 -1)
📝 frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart (+27 -0)
📝 frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover_bloc.dart (+1 -0)
📝 frontend/appflowy_flutter/lib/workspace/application/command_palette/search_result_ext.dart (+8 -4)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart (+32 -28)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart (+150 -33)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart (+132 -129)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart (+36 -27)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart (+62 -65)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_recent_view_cell.dart (+13 -15)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_result_cell.dart (+41 -42)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart (+71 -64)
➕ frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_special_styles.dart (+56 -0)
📝 frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_summary_cell.dart (+4 -4)
➕ frontend/resources/flowy_icons/20x/search_open_tab.svg (+3 -0)

📄 Description

Feature Preview

PR Checklist

My code adheres to AppFlowy's Conventions
I've listed at least one issue that this PR fixes in the description above.
I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes.
All existing tests are passing.

Summary by Sourcery

Improve the desktop command palette search UI by refactoring its layout, styling, and responsiveness across recent views, search results, field, and preview components.

Bug Fixes:

Add a safety check in DocumentImmersiveCoverBloc to avoid emitting updates after the bloc is closed.

Enhancements:

Make the command palette responsive by hiding the preview panel on narrow screens (<884px) using LayoutBuilder and adaptive Flex layouts.
Extract and apply unified text styles via a new search_special_styles extension to standardize typography across search components.
Revamp RecentViewsList and SearchResultList with adjusted paddings, icon sizes, scrollbars, and divider behavior for clearer presentation.
Redesign PagePreview to display cover images (custom, built-in, gradient, color, local), overlay the icon, and wrap content in a styled container.
Restyle SearchField with a slimmer height, updated border radius, content padding, and prefix/suffix icon constraints.
Refactor SearchResultCell and SearchRecentViewCell to use consistent spacing, one-line path rendering, summary truncation, and new highlight styles.
Refine AI widgets (SearchAskAiEntrance, AISearching, AIOverview) with improved spacing, button styling, and typography.

Chores:

Add a new ‘search_open_tab’ SVG icon asset.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/AppFlowy-IO/AppFlowy/pull/7950 **Author:** [@asjqkkkk](https://github.com/asjqkkkk) **Created:** 5/19/2025 **Status:** ✅ Merged **Merged:** 5/21/2025 **Merged by:** [@LucasXu0](https://github.com/LucasXu0) **Base:** `main` ← **Head:** `feat/desktop/search` --- ### 📝 Commits (4) - [`94c48e9`](https://github.com/AppFlowy-IO/AppFlowy/commit/94c48e9eb387bddaeb5b328a97a2a4bc17e6c013) fix: improve search recent list UI - [`c7dae6b`](https://github.com/AppFlowy-IO/AppFlowy/commit/c7dae6ba75708cf43900682a35306dcae87810fb) fix: complete desktop search preview UI improvement - [`3a7111e`](https://github.com/AppFlowy-IO/AppFlowy/commit/3a7111e79f6b9270f5994d1c955d61879270b600) fix: hide search preview when the window is narrow - [`dcb9924`](https://github.com/AppFlowy-IO/AppFlowy/commit/dcb992466e04f85b1855b66f03ef40e548811eb2) fix: optimize some code ### 📊 Changes **15 files changed** (+638 additions, -412 deletions) <details> <summary>View changed files</summary> 📝 `frontend/appflowy_flutter/integration_test/desktop/document/document_toolbar_test.dart` (+2 -1) 📝 `frontend/appflowy_flutter/lib/mobile/presentation/search/mobile_view_ancestors.dart` (+27 -0) 📝 `frontend/appflowy_flutter/lib/plugins/document/presentation/editor_plugins/cover/document_immersive_cover_bloc.dart` (+1 -0) 📝 `frontend/appflowy_flutter/lib/workspace/application/command_palette/search_result_ext.dart` (+8 -4) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/command_palette.dart` (+32 -28) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/page_preview.dart` (+150 -33) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/recent_views_list.dart` (+132 -129) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_ask_ai_entrance.dart` (+36 -27) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_field.dart` (+62 -65) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_recent_view_cell.dart` (+13 -15) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_result_cell.dart` (+41 -42) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_results_list.dart` (+71 -64) ➕ `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_special_styles.dart` (+56 -0) 📝 `frontend/appflowy_flutter/lib/workspace/presentation/command_palette/widgets/search_summary_cell.dart` (+4 -4) ➕ `frontend/resources/flowy_icons/20x/search_open_tab.svg` (+3 -0) </details> ### 📄 Description   ### Feature Preview  ---  #### PR Checklist - [x] My code adheres to [AppFlowy's Conventions](https://docs.appflowy.io/docs/documentation/software-contributions/conventions) - [x] I've listed at least one issue that this PR fixes in the description above. - [x] I've added a test(s) to validate changes in this PR, or this PR only contains semantic changes. - [ ] All existing tests are passing. ## Summary by Sourcery Improve the desktop command palette search UI by refactoring its layout, styling, and responsiveness across recent views, search results, field, and preview components. Bug Fixes: - Add a safety check in DocumentImmersiveCoverBloc to avoid emitting updates after the bloc is closed. Enhancements: - Make the command palette responsive by hiding the preview panel on narrow screens (<884px) using LayoutBuilder and adaptive Flex layouts. - Extract and apply unified text styles via a new search_special_styles extension to standardize typography across search components. - Revamp RecentViewsList and SearchResultList with adjusted paddings, icon sizes, scrollbars, and divider behavior for clearer presentation. - Redesign PagePreview to display cover images (custom, built-in, gradient, color, local), overlay the icon, and wrap content in a styled container. - Restyle SearchField with a slimmer height, updated border radius, content padding, and prefix/suffix icon constraints. - Refactor SearchResultCell and SearchRecentViewCell to use consistent spacing, one-line path rendering, summary truncation, and new highlight styles. - Refine AI widgets (SearchAskAiEntrance, AISearching, AIOverview) with improved spacing, button styling, and typography. Chores: - Add a new ‘search_open_tab’ SVG icon asset. --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>