UI: replace text star button with icon next to title (NK-ymf1jb)

3 files changed, 36 insertions, 8 deletions

diff --git a/frontend/src/components/FeedItem.css b/frontend/src/components/FeedItem.css
index fef1f93..1e7b9bd 100644
--- a/frontend/src/components/FeedItem.css
+++ b/frontend/src/components/FeedItem.css
@@ -44,6 +44,30 @@
 }
 
 /* Legacy controls were simple text/links, but buttons are fine if minimal */
+.star-btn {
+    background: none;
+    border: none;
+    cursor: pointer;
+    font-size: 1.2rem;
+    padding: 0 0.5rem 0 0;
+    vertical-align: middle;
+    transition: color 0.2s;
+    line-height: 1;
+}
+
+.star-btn.is-starred {
+    color: #ffd700;
+    /* Gold */
+}
+
+.star-btn.is-unstarred {
+    color: #ccc;
+}
+
+.star-btn:hover {
+    color: #ffeb3b;
+}
+
 .action-btn {
     background: whitesmoke;
     border: none;
diff --git a/frontend/src/components/FeedItem.test.tsx b/frontend/src/components/FeedItem.test.tsx
index 5e7522f..913e6ff 100644
--- a/frontend/src/components/FeedItem.test.tsx
+++ b/frontend/src/components/FeedItem.test.tsx
@@ -36,10 +36,11 @@ describe('FeedItem Component', () => {
         render(<FeedItem item={mockItem} />);
 
         const starBtn = screen.getByTitle('Star');
+        expect(starBtn).toHaveTextContent('☆');
         fireEvent.click(starBtn);
 
         // Optimistic update
-        expect(await screen.findByTitle('Unstar')).toBeInTheDocument();
+        expect(await screen.findByTitle('Unstar')).toHaveTextContent('★');
 
         expect(global.fetch).toHaveBeenCalledWith('/api/item/1', expect.objectContaining({
             method: 'PUT',
diff --git a/frontend/src/components/FeedItem.tsx b/frontend/src/components/FeedItem.tsx
index 03910e4..23f2bae 100644
--- a/frontend/src/components/FeedItem.tsx
+++ b/frontend/src/components/FeedItem.tsx
@@ -54,6 +54,16 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) {
     return (
         <li className={`feed-item ${item.read ? 'read' : 'unread'} ${loading ? 'loading' : ''}`}>
             <div className="item-header">
+                <button
+                    onClick={(e) => {
+                        e.stopPropagation();
+                        toggleStar();
+                    }}
+                    className={`star-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
+                    title={item.starred ? "Unstar" : "Star"}
+                >
+                    {item.starred ? '★' : '☆'}
+                </button>
                 <a href={item.url} target="_blank" rel="noopener noreferrer" className="item-title">
                     {item.title || '(No Title)'}
                 </a>
@@ -64,13 +74,6 @@ export default function FeedItem({ item: initialItem }: FeedItemProps) {
                     {item.feed_title && ` - ${item.feed_title}`}
                 </a>
                 <div className="item-actions" style={{ display: 'inline-block', float: 'right' }}>
-                    <button
-                        onClick={toggleStar}
-                        className={`action-btn ${item.starred ? 'is-starred' : 'is-unstarred'}`}
-                        title={item.starred ? "Unstar" : "Star"}
-                    >
-                        {item.starred ? 'unstar' : 'star'}
-                    </button>
                 </div>
             </div>
             {item.description && (