Update RSS Reader extension - remember story last read + filter by read status (close issue) (re-open PR) (#16655)

* [RSS Reader] remember story last read

* [RSS Reader] ye olde lint

* [RSS Reader] fix: item was always marked as read

* [RSS Reader] ye olde lint

* Update CHANGELOG.md and optimise images

---------

Co-authored-by: raycastbot <[email protected]>

Author: xmok

extensions/rss-reader/CHANGELOG.md

@@ -1,5 +1,11 @@
 # RSS Reader Changelog
 
+## [Stories Remember 'Last Read'] - 2025-02-10
+
+- Filter Stories by their read status (read or unread) (ref: [Issue #16546](https://github.com/raycast/extensions/issues/16546))
+- Stories show an `Icon` to represent their read status
+- Add README.md
+
 ## [Rename Subscriptions] - 2025-01-12
 
 - Rename Feeds (you can restore the Original Title using the same `Form`) [ref: [#16290](https://github.com/raycast/extensions/issues/16290)]

extensions/rss-reader/README.md

@@ -0,0 +1,14 @@
+<p align="center">
+    <img src="./assets/command-icon.png" width="150" height="150" />
+</p>
+
+# RSS Reader
+
+Conveniently read articles without leaving Raycast.
+
+## ✨ Features
+
+- Add Feeds
+- Rename Feeds
+- Read Stories
+- Open Stories

extensions/rss-reader/src/stories.tsx

@@ -21,8 +21,12 @@ interface Story {
   isNew: boolean;
   date: number;
   fromFeed: string;
+  lastRead?: number;
 }
 
+type StoryLastRead = {
+  [key: string]: number;
+};
 type FeedLastViewed = {
   [key: string]: number;
 };
@@ -49,6 +53,9 @@ function StoryListItem(props: { item: Story; refresh: () => void }) {
         </ActionPanel>
       }
       accessories={[
+        props.item.lastRead
+          ? { icon: Icon.Eye, tooltip: `Last Read: ${new Date(props.item.lastRead).toDateString()}` }
+          : { icon: Icon.EyeDisabled, tooltip: "Last Read: never" },
         {
           text: timeAgo.format(props.item.date) as string,
           icon: props.item.isNew ? { source: Icon.Dot, tintColor: Color.Green } : undefined,
@@ -58,14 +65,27 @@ function StoryListItem(props: { item: Story; refresh: () => void }) {
   );
 }
 
+async function updateLastRead(props: { item: Story }) {
+  const lastRead = new Date().valueOf();
+  const storyLastViewedString = await LocalStorage.getItem<string>("storyLastRead");
+  const storyLastRead: StoryLastRead = await JSON.parse(storyLastViewedString ?? "{}");
+  storyLastRead[props.item.guid] = lastRead;
+  await LocalStorage.setItem("storyLastRead", JSON.stringify(storyLastRead));
+}
+
 function ReadStory(props: { item: Story }) {
   return props.item.content ? (
-    <Action.Push icon={Icon.Book} title="Read Story" target={<StoryDetail item={props.item} />} />
+    <Action.Push
+      icon={Icon.Book}
+      title="Read Story"
+      target={<StoryDetail item={props.item} />}
+      onPush={() => updateLastRead(props)}
+    />
   ) : null;
 }
 
 function OpenStory(props: { item: Story }) {
-  return props.item.link ? <Action.OpenInBrowser url={props.item.link} /> : null;
+  return props.item.link ? <Action.OpenInBrowser url={props.item.link} onOpen={() => updateLastRead(props)} /> : null;
 }
 
 function CopyStory(props: { item: Story }) {
@@ -90,20 +110,22 @@ function ItemToStory(item: Parser.Item, feed: Feed, lastViewed: number) {
 }
 
 async function getStories(feeds: Feed[]) {
-  const feedLastViewedString = (await LocalStorage.getItem("feedLastViewed")) as string;
-  const feedLastViewed = feedLastViewedString
-    ? (JSON.parse(feedLastViewedString) as FeedLastViewed)
-    : ({} as FeedLastViewed);
+  const feedLastViewedString = await LocalStorage.getItem<string>("feedLastViewed");
+  const feedLastViewed: FeedLastViewed = JSON.parse(feedLastViewedString ?? "{}");
 
   const storyItems: Story[] = [];
+  const storyLastViewedString = await LocalStorage.getItem<string>("storyLastRead");
+  const storyLastRead: StoryLastRead = JSON.parse(storyLastViewedString ?? "{}");
 
   for (const feedItem of feeds) {
     const lastViewed = feedLastViewed[feedItem.url] || 0;
     try {
       const feed = await parser.parseURL(feedItem.url);
       const stories: Story[] = [];
       feed.items.forEach((item) => {
-        stories.push(ItemToStory(item, feedItem, lastViewed));
+        const story = ItemToStory(item, feedItem, lastViewed);
+        const lastRead = storyLastRead[story.guid] || 0;
+        stories.push({ ...story, lastRead });
       });
       feedLastViewed[feedItem.url] = stories.at(0)?.date || lastViewed;
       storyItems.push(...stories);
@@ -135,18 +157,22 @@ export function StoriesList(props: { feeds?: Feed[] }) {
     <List
       isLoading={isLoading}
       searchBarAccessory={
-        data?.feeds.length && data.feeds.length > 1 ? (
-          <List.Dropdown onChange={setFilter} tooltip="Subscription">
-            <List.Dropdown.Section>
-              <List.Dropdown.Item icon={Icon.Globe} title="All Subscriptions" value="all" />
-            </List.Dropdown.Section>
+        <List.Dropdown onChange={setFilter} tooltip="Subscription">
+          <List.Dropdown.Section>
+            <List.Dropdown.Item icon={Icon.Globe} title="All Subscriptions" value="all" />
+          </List.Dropdown.Section>
+          {data?.feeds && data.feeds.length > 1 && (
             <List.Dropdown.Section>
-              {data?.feeds.map((feed) => (
+              {data.feeds.map((feed) => (
                 <List.Dropdown.Item key={feed.url} icon={feed.icon} title={feed.title} value={feed.url} />
               ))}
             </List.Dropdown.Section>
-          </List.Dropdown>
-        ) : null
+          )}
+          <List.Dropdown.Section>
+            <List.Dropdown.Item icon={Icon.Eye} title="Read" value="read" />
+            <List.Dropdown.Item icon={Icon.EyeDisabled} title="Unread" value="unread" />
+          </List.Dropdown.Section>
+        </List.Dropdown>
       }
       actions={
         !props?.feeds && (
@@ -162,7 +188,11 @@ export function StoriesList(props: { feeds?: Feed[] }) {
       }
     >
       {data?.stories
-        .filter((story) => filter === "all" || story.fromFeed === filter)
+        .filter((story) => {
+          if (filter === "read") return story.lastRead;
+          if (filter === "unread") return !story.lastRead;
+          return filter === "all" || story.fromFeed === filter;
+        })
         .map((story) => <StoryListItem key={story.guid} item={story} refresh={revalidate} />)}
     </List>
   );