feat: keep the last 10 notifications

backend/src/main/kotlin/com/rmcampos/twitterclient/client/XApiClient.kt

@@ -222,7 +222,7 @@ class XApiClient(
     suspend fun retweet(tweetId: String) {
         val userId = resolveUserId()
         val url = "https://api.x.com/2/users/$userId/retweets"
-        val authHeader = buildOAuth1Header("POST", url, emptyMap())
+        val authHeader = signer.buildHeader("POST", url, emptyMap())
         val body = buildJsonObject { put("tweet_id", tweetId) }
 
         val response = client.post(url) {

backend/src/main/kotlin/com/rmcampos/twitterclient/db/NotificationRepository.kt

@@ -305,6 +305,29 @@ class NotificationRepository(private val dataSource: DataSource) {
         }
     }
 
+    fun getRecentReadNotifications(limit: Int = 10): List<Notification> {
+        return dataSource.connection.use { conn ->
+            conn.prepareStatement(
+                """
+                SELECT n.id, n.type, n.subject_id, n.ref_tweet_id, n.created_at, n.read_at,
+                       u.name AS subject_name, u.username AS subject_username, u.profile_image_url AS subject_image_url
+                FROM notifications n
+                LEFT JOIN users u ON n.subject_id = u.id
+                WHERE n.read_at IS NOT NULL
+                ORDER BY n.read_at DESC
+                LIMIT ?
+                """.trimIndent()
+            ).use { stmt ->
+                stmt.setInt(1, limit)
+                stmt.executeQuery().use { rs ->
+                    val results = mutableListOf<Notification>()
+                    while (rs.next()) results.add(mapNotification(rs))
+                    results
+                }
+            }
+        }
+    }
+
     fun getUnreadNotificationCount(): Long {
         return dataSource.connection.use { conn ->
             conn.prepareStatement("SELECT COUNT(*) FROM notifications WHERE read_at IS NULL").use { stmt ->

backend/src/main/kotlin/com/rmcampos/twitterclient/routes/NotificationRoutes.kt

@@ -35,6 +35,7 @@ private data class NotificationResponse(
     val created_at: String,
     val subject: NotificationSubjectResponse,
     val ref_tweet_id: String?,
+    val read: Boolean,
 )
 
 @Serializable
@@ -57,23 +58,12 @@ fun Route.notificationRoutes(cache: CacheService, repository: NotificationReposi
             call.respondText(cachedJson, ContentType.Application.Json, HttpStatusCode.OK)
         } else {
             poller.pollAll()
-            val notifications = repository.getUnreadNotifications()
+            val unread = repository.getUnreadNotifications()
+            val read = repository.getRecentReadNotifications(10)
+            val all = unread.map { toResponse(it, read = false) } + read.map { toResponse(it, read = true) }
             val response = NotificationsEnvelope(
-                notifications = notifications.map {
-                    NotificationResponse(
-                        id = it.id,
-                        type = it.type,
-                        created_at = it.createdAt,
-                        subject = NotificationSubjectResponse(
-                            id = it.subjectId,
-                            name = it.subjectName ?: "",
-                            username = it.subjectUsername ?: "",
-                            profile_image_url = it.subjectImageUrl,
-                        ),
-                        ref_tweet_id = it.refTweetId,
-                    )
-                },
-                unread_count = notifications.size,
+                notifications = all,
+                unread_count = unread.size,
             )
             val json = Json.encodeToString(response)
             cache.set(NOTIFICATIONS_CACHE_KEY, json, NOTIFICATIONS_CACHE_TTL_SECONDS)
@@ -106,3 +96,19 @@ fun Route.notificationRoutes(cache: CacheService, repository: NotificationReposi
         }
     }
 }
+
+private fun toResponse(notification: NotificationRepository.Notification, read: Boolean): NotificationResponse {
+    return NotificationResponse(
+        id = notification.id,
+        type = notification.type,
+        created_at = notification.createdAt,
+        subject = NotificationSubjectResponse(
+            id = notification.subjectId,
+            name = notification.subjectName ?: "",
+            username = notification.subjectUsername ?: "",
+            profile_image_url = notification.subjectImageUrl,
+        ),
+        ref_tweet_id = notification.refTweetId,
+        read = read,
+    )
+}

frontend/src/components/NotificationsTab.css

@@ -66,6 +66,14 @@
     background: var(--color-hover-overlay);
 }
 
+.notification-item.read {
+    opacity: 0.6;
+}
+
+.notification-item.read .notification-text a {
+    color: var(--color-text-secondary);
+}
+
 .notification-avatar {
     width: 40px;
     height: 40px;

frontend/src/components/NotificationsTab.tsx

@@ -28,7 +28,9 @@ export function NotificationsTab() {
     const handleMarkRead = async (id: number) => {
         try {
             await markNotificationRead(id);
-            setNotifications((prev) => prev.filter((n) => n.id !== id));
+            setNotifications((prev) =>
+                prev.map((n) => (n.id === id ? { ...n, read: true } : n)),
+            );
             setUnreadCount((prev) => Math.max(0, prev - 1));
         } catch {
             setError('Could not mark notification as read');
@@ -80,7 +82,7 @@ export function NotificationsTab() {
             )}
             <ul className="notifications-list">
                 {notifications.map((n) => (
-                    <li key={n.id} className="notification-item">
+                    <li key={n.id} className={`notification-item ${n.read ? 'read' : ''}`}>
                         {renderAvatar(n)}
                         <div className="notification-body">
                             <p className="notification-text">
@@ -95,13 +97,15 @@ export function NotificationsTab() {
                             </p>
                             <span className="notification-meta">{formatTime(n.created_at)}</span>
                         </div>
-                        <button
-                            className="notification-read-btn"
-                            onClick={() => handleMarkRead(n.id)}
-                            aria-label="Mark as read"
-                        >
-                            Mark read
-                        </button>
+                        {!n.read && (
+                            <button
+                                className="notification-read-btn"
+                                onClick={() => handleMarkRead(n.id)}
+                                aria-label="Mark as read"
+                            >
+                                Mark read
+                            </button>
+                        )}
                     </li>
                 ))}
             </ul>

frontend/src/types.ts

@@ -40,4 +40,5 @@ export interface Notification {
         profile_image_url?: string;
     };
     ref_tweet_id?: string;
+    read?: boolean;
 }