Skip to content

Improve read time formatting across the app#39

Merged
jonocodes merged 3 commits intodevfrom
claude/reading-time-scrollable-list-BEP1d
Feb 7, 2026
Merged

Improve read time formatting across the app#39
jonocodes merged 3 commits intodevfrom
claude/reading-time-scrollable-list-BEP1d

Conversation

@jonocodes
Copy link
Owner

Summary

Standardized read time formatting throughout the application to use a more compact and consistent notation (e.g., "2h 30m" instead of "2:30").

Key Changes

  • lib/src/lib.ts: Updated generateInfoForCard() to format read times using compact notation (hours and minutes) instead of "X minute read"
  • src/components/PreferenceScreen.tsx: Refactored formatReadTime() function to use consistent compact format:
    • Under 1 hour: "22m" (was "22 min")
    • 1-24 hours: "2h 30m" (was "2:30")
    • 24+ hours: "2d 2h" (was "2 days 2:00")
  • src/components/DiagnosticsScreen.tsx: Enhanced articles table with sticky headers and max height constraint for better UX when displaying many articles

Implementation Details

  • Both read time formatting functions now use the same compact notation pattern for consistency
  • The new format is more space-efficient and easier to scan
  • Articles table in diagnostics screen now scrolls independently while keeping headers visible

https://claude.ai/code/session_01E3HMdUJ8CHnwFshCAyWvND

…ist on diagnostics

- Change reading time display in article cards from "X minute read" to compact
  format like "2h 30m", "45m", "1h"
- Update formatReadTime() summary function to match the same compact style
  (e.g., "2h 30m" instead of "2:30")
- Add max-height scroll area with sticky header to the articles table on the
  diagnostics page to handle long lists

https://claude.ai/code/session_01E3HMdUJ8CHnwFshCAyWvND
@netlify
Copy link

netlify bot commented Feb 7, 2026

Deploy Preview for savrlist ready!

Name Link
🔨 Latest commit 91bcb83
🔍 Latest deploy log https://app.netlify.com/projects/savrlist/deploys/69869156e9a3ab0007c3330a
😎 Deploy Preview https://deploy-preview-39--savrlist.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Feb 7, 2026

Deploy Preview for savrdev ready!

Name Link
🔨 Latest commit 91bcb83
🔍 Latest deploy log https://app.netlify.com/projects/savrdev/deploys/69869156c6881b0008b80e0b
😎 Deploy Preview https://deploy-preview-39--savrdev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Change the default from "Close new tab" to "Show article list" so new
users see their reading list after saving an article externally.

https://claude.ai/code/session_01E3HMdUJ8CHnwFshCAyWvND
Update test assertions to match the new compact reading time format
(e.g., "5m" instead of "5 minute read", "10m • 75%" instead of
"10 minute read • 75%").

https://claude.ai/code/session_01E3HMdUJ8CHnwFshCAyWvND
@jonocodes jonocodes merged commit a206449 into dev Feb 7, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants