Clicking on title marks as read

static/css/style.css

@@ -520,14 +520,13 @@ button:disabled {
 .feed-entry-title {
     display: flex;
     align-items: center;
-    gap: 1rem;
+    gap: 0.5rem;
     margin-bottom: 0.5rem;
 }
 
 .feed-entry-title a {
     color: var(--text-color);
     text-decoration: none;
-    flex-grow: 1;
 }
 
 .feed-entry-meta {
@@ -646,10 +645,11 @@ button:disabled {
     border: none;
     color: var(--text-color);
     cursor: pointer;
-    padding: 0.5rem;
+    padding: 0.25rem;
     opacity: 0.7;
     transition: opacity 0.2s;
     font-size: 1.2rem;
+    margin-left: -0.25rem;
 }
 
 .read-toggle:hover {

static/js/app.js

@@ -46,18 +46,12 @@ function renderFeedEntries(entries) {
         const title = document.createElement('h2');
         title.className = 'feed-entry-title';
 
-        const titleLink = document.createElement('a');
-        titleLink.href = entry.link || '#';
-        titleLink.target = '_blank';
-        titleLink.textContent = entry.title;
-        title.appendChild(titleLink);
-
         const readToggle = document.createElement('button');
         readToggle.className = 'read-toggle';
         readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read';
         readToggle.innerHTML = entry.marked_read 
-            ? '<i class="fa-solid fa-circle-check"></i>'
-            : '<i class="fa-regular fa-circle"></i>';
+            ? '<i class="fa-solid fa-square-check"></i>'
+            : '<i class="fa-regular fa-square"></i>';
         readToggle.onclick = async () => {
             try {
                 const response = await fetch(`/entries/${entry.id}/state`, {
@@ -74,8 +68,8 @@ function renderFeedEntries(entries) {
                     entry.marked_read = !entry.marked_read;
                     readToggle.title = entry.marked_read ? 'Mark as unread' : 'Mark as read';
                     readToggle.innerHTML = entry.marked_read 
-                        ? '<i class="fa-solid fa-circle-check"></i>'
-                        : '<i class="fa-regular fa-circle"></i>';
+                        ? '<i class="fa-solid fa-square-check"></i>'
+                        : '<i class="fa-regular fa-square"></i>';
                 } else {
                     console.error('Failed to update read state:', response.status);
                 }
@@ -85,6 +79,37 @@ function renderFeedEntries(entries) {
         };
         title.appendChild(readToggle);
 
+        const titleLink = document.createElement('a');
+        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');
         meta.className = 'feed-entry-meta';
         if (entry.published) {