Clicking on title marks as read

static/css/style.css

@@ -527,7 +527,6 @@ button:disabled {
 .feed-entry-title a {
     color: var(--text-color);
     text-decoration: none;
-    flex-grow: 1;
 }
 
 .feed-entry-meta {

static/js/app.js

@@ -83,6 +83,31 @@ function renderFeedEntries(entries) {
         titleLink.href = entry.link || '#';
         titleLink.target = '_blank';
         titleLink.textContent = entry.title;
+        titleLink.onclick = () => {
+            if (!entry.marked_read) {
+                // Mark as read in the background, don't wait for it
+                fetch(`/entries/${entry.id}/state`, {
+                    method: 'PATCH',
+                    headers: {
+                        'Content-Type': 'application/json',
+                    },
+                    body: JSON.stringify({
+                        read: true
+                    })
+                }).then(response => {
+                    if (response.ok) {
+                        entry.marked_read = true;
+                        readToggle.title = 'Mark as unread';
+                        readToggle.innerHTML = '<i class="fa-solid fa-square-check"></i>';
+                    } else {
+                        console.error('Failed to update read state:', response.status);
+                    }
+                }).catch(error => {
+                    console.error('Failed to update read state:', error);
+                });
+            }
+            // Let the default link behavior happen immediately
+        };
         title.appendChild(titleLink);
 
         const meta = document.createElement('div');