[Feature] Mark as read for articles

[imhariprakash]

Description

• Introduces a Mark as read action for posts.
• The read state is stored per source in localStorage, and posts marked as read are automatically hidden from the feed.
• Each source maintains up to 1000 read post IDs (oldest entries are removed when the limit is reached).

Changes

• Store (src/stores/readPosts.ts):
  • Zustand store with readPosts (per-source arrays of read post IDs) and markAsRead(source, postId).
  • Persisted to localStorage. Cap 1000 IDs per source (circular, drop oldest).
• List (src/components/List/ListComponent.tsx):
  • Filters out posts whose ID is in readPosts[source].
  • Shows "You're all caught up!" when all posts for that source are read.
• Card item (src/components/Elements/CardWithActions/CardItemWithActions.tsx):
  • "Mark as read" button (check-circle icon) with hover tooltip.
  • Click calls store to mark post as read (row then disappears from list).
• Cards:
  • Pass source={meta.value} into the list (read posts per source).
• Styles (src/assets/App.css):
  • Tooltip and "all caught up" message styling.

Behaviour

• Click the mark as read (✓) icon on a post → post is marked as read for that source and is removed from the list.
• Read IDs are saved in localStorage and retained after refresh/close.
• When every post in a source is read, the card shows: "You're all caught up! Check back later for fresh content."

[medyo]

Well done @imhariprakash 👌

I have two suggestions:

First, the current implementation relies on the source to track read posts, which means you need to modify each source card. Ideally, we should store read posts by their unique ID and simply check if the ID exists. This avoids depending on the source and allows us to have a consistent limit across all sources.

Another small improvement: some users like to see which posts they already read. It would be nice to add a setting where users can choose how read posts appear.

For example:

• Dim read posts (default)
• Hide read posts
• Show normally

[imhariprakash]

[imhariprakash]

@medyo

Change 1:

• Instead of storing IDs source-wise, they are now maintained in a common list.

Change 2:

• Added a preference: Display Read Posts
  • Default: false
  • When Display Read Posts = false, read posts will not be shown.
  • When true, read posts will be displayed with a ✅ icon at the end of the article title.
• Design considerations:
  • I considered adding a dim effect for read posts, but it didn’t look good in either dark mode or light mode.
  • I also considered adding a tag/label, but it wasn’t visually appealing.
  • The current approach with the ✅ indicator felt clearer and more user-friendly.

Kindly review the changes.

[medyo]

@imhariprakash I did a few optimizations and improved the UI, please give it a try and let me know what you think

[imhariprakash]

Hi, @medyo
I’ve tried the changes, they look great. I’m excited to use them in the live version. You can go ahead and proceed. 👍