From b9c7497fc25d23492fe013a3541b8d4d66c6970c Mon Sep 17 00:00:00 2001
From: Adam Mathes <adam@adammathes.com>
Date: Fri, 13 Feb 2026 12:27:31 -0800
Subject: UI: replace text star button with icon next to title (NK-ymf1jb)

---
 frontend/src/components/FeedItem.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

(limited to 'frontend/src/components/FeedItem.tsx')

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 && (
-- 
cgit v1.2.3