From e43909be7e8f8b2b5d7b002448912e23e40ad4e9 Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Fri, 13 Feb 2026 19:28:00 -0800
Subject: fix(ui): sync FeedItem state with props to update read status styling
 (NK-fpzx66)

---
 frontend/src/components/FeedItem.test.tsx | 17 +++++++++++++++++
 frontend/src/components/FeedItem.tsx      |  6 +++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx
index 5ca5582..f0497c6 100644
--- a/frontend/src/components/FeedItem.test.tsx
+++ b/frontend/src/components/FeedItem.test.tsx
@@ -51,4 +51,21 @@ describe('FeedItem Component', () => {
             })
         }));
     });
+
+    it('updates styling when read state changes', () => {
+        const { rerender } = render(<FeedItem item={{ ...mockItem, read: false }} />);
+        const link = screen.getByText('Test Item');
+        // Initial state: unread (bold)
+        // Note: checking computed style might be flaky in jsdom, but we can check the class on the parent
+        const listItem = link.closest('li');
+        expect(listItem).toHaveClass('unread');
+        expect(listItem).not.toHaveClass('read');
+
+        // Update prop to read
+        rerender(<FeedItem item={{ ...mockItem, read: true }} />);
+
+        // Should now be read
+        expect(listItem).toHaveClass('read');
+        expect(listItem).not.toHaveClass('unread');
+    });
 });
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
index 2dcbcb9..b86e60c 100644
--- a/frontend/src/components/FeedItem.tsx
+++ b/frontend/src/components/FeedItem.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import type { Item } from '../types';
 import './FeedItem.css';
 
@@ -10,6 +10,10 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) {
     const [item, setItem] = useState(initialItem);
     const [loading, setLoading] = useState(false);
 
+    useEffect(() => {
+        setItem(initialItem);
+    }, [initialItem]);
+
 
     const toggleStar = () => {
         updateItem({ ...item, starred: !item.starred });
-- 
cgit v1.2.3