diff --git a/static/css/style.css b/static/css/style.css
index 76089de..d9e674e 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -515,6 +515,20 @@ button:disabled {
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1rem;
+ transition: opacity 0.2s ease, background-color 0.2s ease;
+}
+
+.feed-entry.read {
+ background-color: var(--dark-bg);
+ opacity: 0.8;
+}
+
+.feed-entry.read .feed-entry-title a {
+ color: var(--text-muted);
+}
+
+.feed-entry.read .feed-entry-summary {
+ color: var(--text-muted);
}
.feed-entry-title {
diff --git a/static/js/app.js b/static/js/app.js
index 33143cc..96e89b6 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -40,8 +40,11 @@ function renderFeedEntries(entries) {
mainContent.innerHTML = '';
entries.forEach(entry => {
- const entryDiv = document.createElement('div');
+ const entryDiv = document.createElement('article');
entryDiv.className = 'feed-entry';
+ if (entry.marked_read) {
+ entryDiv.classList.add('read');
+ }
const title = document.createElement('h2');
title.className = 'feed-entry-title';
@@ -70,6 +73,7 @@ function renderFeedEntries(entries) {
readToggle.innerHTML = entry.marked_read
? ''
: '';
+ entryDiv.classList.toggle('read', entry.marked_read);
} else {
console.error('Failed to update read state:', response.status);
}
@@ -99,6 +103,7 @@ function renderFeedEntries(entries) {
entry.marked_read = true;
readToggle.title = 'Mark as unread';
readToggle.innerHTML = '';
+ entryDiv.classList.add('read');
} else {
console.error('Failed to update read state:', response.status);
}