-
由 Mohamed Aziz Mejri 提交于
## Summary This PR adds visual highlighting of search query matches in the VersionPane component, making it easier for users to identify which versions match their search criteria. ## Key Changes - **New `HighlightMatch` component**: Created a reusable component that highlights matching text segments with a yellow background (with dark mode support). The matching is case-insensitive. - **Version number highlighting**: Applied highlighting to version numbers in the version list header - **Version hash highlighting**: Applied highlighting to the short commit hash (OID) displayed next to version numbers - **Message highlighting**: Applied highlighting to version messages, including those with reverted version information ## Implementation Details - The `HighlightMatch` component performs case-insensitive substring matching and wraps matched text in a `<mark>` element with Tailwind classes (`bg-yellow-200 dark:bg-yellow-800 rounded-sm`) - Search query is trimmed before being passed to the highlighting function to avoid unnecessary whitespace - The highlighting is applied consistently across all searchable text fields in the version pane (version numbers, hashes, and messages) - The implementation preserves existing message transformation logic for "Reverted" messages while adding highlighting on top <!-- devin-review-badge-begin --> --- <a href="https://app.devin.ai/review/dyad-sh/dyad/pull/3117" target="_blank"> <picture> <source media="(prefers-color-scheme: dark)" srcset="https://static.devin.ai/assets/gh-open-in-devin-review-dark.svg?v=1"> <img src="https://static.devin.ai/assets/gh-open-in-devin-review-light.svg?v=1" alt="Open with Devin"> </picture> </a> <!-- devin-review-badge-end -->