Implement Search in Article feature with menu restructure#42
Merged
Conversation
This commit implements the complete "Search in Article" feature as specified in FEATURE_SPEC_Search_in_Article.md, including: Part 1: Overflow Menu Restructure - Reordered menu items (text size, view original, search, is read, open in browser, share, delete) - Changed "View Original" icon from external link to globe (Language icon) - Added "Open in Browser" menu item that launches default browser via ACTION_VIEW - Changed "Mark Read" to "Is Read" for clarity - Added "Search in Article" menu item (hidden for photos/videos, disabled in Original mode) Part 2: List View Card Icon Changes - Replaced single external link icon with two icons on all card layouts: - Globe icon (Language) for viewing original content in-app - External link icon (OpenInNew) for opening in default browser - Updated BookmarkMosaicCard, BookmarkGridCard, and BookmarkCompactCard Part 3: Search in Article Implementation - Created ArticleSearchBar composable with search field, match counter, and navigation arrows - Created WebViewSearchBridge for JavaScript-based text search and highlighting - Added ArticleSearchState to BookmarkDetailViewModel with query, match tracking, and navigation - Updated HTML templates (light/dark/sepia) with CSS for search highlighting (yellow for all matches, orange for current match) - Enabled JavaScript for article WebViews (required for search functionality) - Integrated search toolbar that replaces TopAppBar when search is active - Implemented real-time search with debouncing (300ms) - Added match navigation with wrap-around (up/down arrows) - Clear highlights when search is deactivated or query is empty - Re-apply search when content reloads (theme change, etc.) String Resources - Added English strings to values/strings.xml - Added English placeholder strings to all language files (de, es, fr, gl, pl, pt, ru, uk, zh) Technical Details - WebViewSearchBridge uses JavaScript injection for search and highlighting - Search operates on text nodes within article content container - Highlights use CSS classes: mydeck-search-match (yellow) and mydeck-search-current (orange) - Match counter shows "n/m" format (1-based indexing for UI) - Navigation arrows disabled when no matches found https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT
Fixed Kotlin string interpolation issue where dollar signs in the JavaScript regex pattern were not properly escaped. https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT
- Add missing kotlinx.coroutines.delay import - Move onClickOpenInBrowser definition after context declaration https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT
- Change menu option to 'Find in Article' (from Search in Article) - Update menu to title-case: Increase/Decrease Text Size, Open in Browser, Share Link - Reorder menu: text size, find, view original, open in browser, share link, is read, delete - Change Find in Article menu icon to FindInPage (magnifying glass on page) - Update placeholder text to 'Find' (from 'Search in article...') - Remove magnifying glass icons from inside both search boxes (article find and list search) - Normalize font sizes: use bodyMedium for article find box, bodyLarge for list search - Ensure placeholder and typed text have consistent font sizes in both boxes https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT
…ment Add comprehensive documentation to the feature spec covering: - Implementation changes from original spec (terminology, menu structure, UI refinements) - Appendix A with detailed complexity assessment for search→find internal renaming - Rationale for keeping internal code as "search" while user-facing is "Find" https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT
- Change article find bar font size to bodyLarge to match list search - Update FindInPage icon to outlined version for better visual consistency - Change placeholder text from "Find" to "Find in article" (with room to display) - Update all 10 language files with new placeholder text https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This PR implements the "Find in Article" feature that allows users to search for text within saved articles using a JavaScript-based search with visual highlighting.
Summary
Adds an in-article text search feature to the bookmark detail view, including:
Implementation Changes from Original Spec
During implementation and user testing, several refinements were made to improve the user experience:
Terminology
Menu Structure
Icons.Filled.SearchtoIcons.Outlined.FindInPagefor better visual consistencyUI Refinements
textStyle = MaterialTheme.typography.bodyLargeto ensure placeholder and typed text use the same size (matching list search)Technical Implementation
Key Components
New Files
WebViewSearchBridge.kt: JavaScript bridge for WebView search operationsArticleSearchBar.kt: Search toolbar composable that replaces TopAppBar when activeModified Files
BookmarkDetailViewModel.kt: AddedArticleSearchStateand search-related functionsBookmarkDetailScreen.kt: Integrated search toolbar and menu itemBookmarkCard.kt: Added dual-icon functionality (globe for in-app, external link for browser)BookmarkListViewModel.kt: AddedonClickOpenInBrowser()functionBookmarkListScreen.kt: Wired up browser callback and removed list search icon.mydeck-search-matchand.mydeck-search-currentTechnical Details
Search Highlighting
<span>elements.mydeck-search-match(yellow) for all matches,.mydeck-search-current(orange) for current${'$'}for JavaScript variablesState Management
StateFlowfor reactive search stateDual-Icon Bookmark Cards
As a related improvement, bookmark cards now have two actions:
Icons.Filled.Language): Opens article in-appIcons.AutoMirrored.Filled.OpenInNew): Opens in external browserTesting
Tested across:
Documentation
FEATURE_SPEC_Search_in_Article.mdwith implementation changes sectionScreenshots
[Screenshots would be inserted here by the user]
Session: https://claude.ai/code/session_01R78uhZ4hjztDV6oJqEBDDT