feat: implement local caching and offline access for saved articles

[santoshsingampalli11-hub]

Description

This PR implements local article caching and offline access for saved/bookmarked articles, resolving the empty state placeholder promise of "offline reading coming soon!".

Users can now access and read their bookmarked health articles even when they lose network connectivity.

Key Changes

1. Article Cache Service:
   • Created ArticleCacheService.ts utilizing react-native-mmkv to handle all local cache operations (retrieve, store, delete, sync, check offline status).
2. Article Card updates (ArticleCard.tsx):
   • Toggling bookmarks online automatically caches the full article details and fetches/saves the HTML content.
   • When offline, allows navigation to the article details if it is cached locally, otherwise displays a network warning alert.
3. Article Screen updates (ArticleScreen.tsx):
   • Modified details and content hooks to fall back to cached metadata and HTML content when offline.
   • Guarded online-only bookmarking actions offline and updated the local cache status accordingly.
4. Home Screen updates (HomeScreen.tsx):
   • Modified offline view: if offline and cached articles exist, the home feed renders the list of cached articles instead of the empty screen.
   • Added an amber warnings banner (offlineBanner) indicating offline mode.
   • Hid category tag chips and the floating "Write Article" button when offline.
   • Synchronized the local MMKV cache with the backend list of saved articles on online startup or profile refresh.
5. Empty States updates (EmptyStates.tsx):
   • Updated OfflineArticleState to accept a callback to browse podcasts offline, displaying the action button when no cached articles exist.

Verification Plan

• Verified TypeScript builds successfully.

Manual Verification Steps:

1. Save an article when online.
2. Turn off connection (simulate offline).
3. Open the app: Verify HomeScreen shows the saved article and the amber banner.
4. Open the article details: Verify the article content displays offline.
5. Tap an unsaved article offline: Verify a descriptive alert displays.
6. Clear all bookmarks and go offline: Verify the offline screen displays with a "Browse Podcasts Offline" button that navigates to the offline podcasts screen.

Closes #1826

[github-actions]

Thank you @, for creating the PR and contributing to our UltimateHealth project 💗.
Our team will review the PR and will reach out to you soon! 😇
Make sure that you have marked all the tasks that you are done with ✅.
Thank you for your patience! 😀

[github-actions]

Automated Review Feedback

Provide actionable comments grouped by severity:

Important

• Missing Automated Tests: This PR introduces significant new functionality related to offline data management and caching. There are no automated unit or integration tests for ArticleCacheService.ts or the updated component logic (e.g., ArticleCard.tsx, ArticleScreen.tsx, HomeScreen.tsx) that handles online/offline states and cache interactions. This increases the risk of bugs, regressions, and makes future refactoring more challenging. Please add comprehensive tests to cover the core caching logic, offline article retrieval, and UI behavior in various network conditions.

Suggestions

• Cache Size Management: Currently, there's no explicit limit on the number of articles or total storage size for the react-native-mmkv cache. While mmkv is efficient, storing a very large number of articles with extensive HTML content could consume significant device storage. Consider implementing a cache eviction policy (e.g., LRU, or a maximum number of articles/total size) as a future enhancement to manage storage proactively.
• User Feedback for Content Fetching Errors: In ArticleCard.tsx and ArticleScreen.tsx, if getArticleContent fails when saving an article for offline access, the article metadata is still cached, but the htmlContent is saved as an empty string. While this ensures the article appears in the offline list, the user might not realize the content is missing until they try to read it offline. Consider adding a more explicit user notification (e.g., a Snackbar message) if the content fetching for offline caching fails, informing them that the full content might not be available offline.
• Cross-Device Offline Sync Clarification: The syncCachedArticles function correctly removes locally cached articles that are no longer saved on the backend. However, if a user saves an article on a different device, that article's content won't be automatically cached on the current device until the user explicitly bookmarks it on this device while online. This is an acceptable design choice for an initial implementation, but it might be worth clarifying this behavior in user-facing documentation or a tooltip if this scenario is common.

Maintainer Note:

Once the initial automated feedback has been addressed, maintainer @SB2318 will review the pull request for final evaluation.

[SB2318]

@santoshsingampalli11-hub please fix the bot points.