From 12710820f9be58b3d92aa8efbe45142f724f0d56 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Fri, 6 Mar 2026 19:41:32 +0100
Subject: [PATCH] fix: audit /news/ page for design system compliance

- Add font-mono text-sm to all <time> elements (4 dates across 3 views)
- Add font-mono to stat numbers (feeds count, items count, pagination)
- Add shadow-sm to list view and expanded view article cards
- Add border + shadow-sm to stats bar (card depth pattern)
- Add focus:outline-none focus:ring-2 focus:ring-accent-500 to all buttons
  (view mode toggles, pagination prev/next, refresh)
- Fix card view hover to use domain color (accent-400) instead of surface-400
- Fix pagination bug: loadPage() now passes feedId when filter is active,
  preventing feed filter from resetting on page change

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 news.njk | 40 +++++++++++++++++++++-------------------
 1 file changed, 21 insertions(+), 19 deletions(-)

diff --git a/news.njk b/news.njk
index f2a8fcd..5507886 100644
--- a/news.njk
+++ b/news.njk
@@ -11,8 +11,8 @@ withSidebar: true
       Aggregated content from my favorite feeds
     </p>
     <p class="text-xs text-surface-500 mt-2" x-show="lastUpdated">
-      Last updated: <span x-text="formatDate(lastUpdated, 'full')"></span>
-      <button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400" :disabled="loading">
+      Last updated: <span class="font-mono" x-text="formatDate(lastUpdated, 'full')"></span>
+      <button @click="refresh()" class="ml-2 text-accent-600 hover:text-accent-700 dark:text-accent-400 focus:outline-none focus:ring-2 focus:ring-accent-500 rounded" :disabled="loading">
         <svg class="w-3 h-3 inline" :class="{ 'animate-spin': loading }" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
         </svg>
@@ -45,7 +45,7 @@ withSidebar: true
           <button
             @click="viewMode = 'list'"
             :class="viewMode === 'list' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
-            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-accent-500"
             title="List view"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -56,7 +56,7 @@ withSidebar: true
           <button
             @click="viewMode = 'card'"
             :class="viewMode === 'card' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
-            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-accent-500"
             title="Card view"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -67,7 +67,7 @@ withSidebar: true
           <button
             @click="viewMode = 'full'"
             :class="viewMode === 'full' ? 'bg-accent-600 text-white' : 'bg-surface-100 dark:bg-surface-800 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-700'"
-            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2"
+            class="px-3 py-2 rounded-lg text-sm font-medium transition-colors flex items-center gap-2 focus:outline-none focus:ring-2 focus:ring-accent-500"
             title="Expanded view"
           >
             <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -81,7 +81,7 @@ withSidebar: true
         <div class="relative" x-show="feeds.length > 1">
           <select
             x-model="filterFeed"
-            class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500"
+            class="appearance-none bg-surface-100 dark:bg-surface-800 border border-surface-300 dark:border-surface-600 rounded-lg px-4 py-2 pr-8 text-sm text-surface-700 dark:text-surface-300 focus:outline-none focus:ring-2 focus:ring-accent-500 transition-colors"
           >
             <option value="all">All Sources (<span x-text="feeds.length"></span>)</option>
             <template x-for="feed in feeds" :key="feed.id">
@@ -95,14 +95,14 @@ withSidebar: true
       </div>
 
       {# Stats Bar #}
-      <div class="flex flex-wrap gap-4 mb-6 p-4 bg-surface-50 dark:bg-surface-800/50 rounded-lg text-sm">
+      <div class="flex flex-wrap gap-4 mb-6 p-4 bg-surface-50 dark:bg-surface-800/50 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm text-sm">
         <div class="flex items-center gap-2">
           <span class="text-surface-500">Feeds:</span>
-          <span class="font-medium text-surface-900 dark:text-surface-100" x-text="status?.stats?.feedsCount || feeds.length"></span>
+          <span class="font-medium font-mono text-surface-900 dark:text-surface-100" x-text="status?.stats?.feedsCount || feeds.length"></span>
         </div>
         <div class="flex items-center gap-2">
           <span class="text-surface-500">Items:</span>
-          <span class="font-medium text-surface-900 dark:text-surface-100" x-text="status?.stats?.itemsCount || items.length"></span>
+          <span class="font-medium font-mono text-surface-900 dark:text-surface-100" x-text="status?.stats?.itemsCount || items.length"></span>
         </div>
         <div x-show="status?.status === 'syncing'" class="flex items-center gap-2 text-orange-600 dark:text-orange-400">
           <svg class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
@@ -125,7 +125,7 @@ withSidebar: true
         {# List View #}
         <div x-show="viewMode === 'list'" class="space-y-3">
           <template x-for="item in filteredItems" :key="item.id">
-            <article class="flex items-start gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
+            <article class="flex items-start gap-4 p-4 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
               <img
                 x-show="item.imageUrl"
                 :src="item.imageUrl"
@@ -154,7 +154,7 @@ withSidebar: true
                     x-text="truncate(item.sourceTitle || item.feedTitle, 25)"
                   ></a>
                   <span x-show="item.author" x-text="'by ' + item.author"></span>
-                  <time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
+                  <time class="font-mono text-sm" :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
                   <span class="hidden sm:inline" x-show="item.categories?.length">
                     <template x-for="cat in item.categories.slice(0, 3)" :key="cat">
                       <span class="text-accent-600 dark:text-accent-400" x-text="'#' + cat"></span>
@@ -190,7 +190,7 @@ withSidebar: true
         {# Card View #}
         <div x-show="viewMode === 'card'" class="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
           <template x-for="item in filteredItems" :key="item.id">
-            <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden hover:border-surface-400 dark:hover:border-surface-500 transition-colors">
+            <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden hover:border-accent-400 dark:hover:border-accent-600 transition-colors">
               <div x-show="item.imageUrl" class="aspect-video bg-surface-100 dark:bg-surface-700">
                 <img
                   :src="item.imageUrl"
@@ -212,7 +212,7 @@ withSidebar: true
                 <p x-show="item.description" class="text-sm text-surface-600 dark:text-surface-400 line-clamp-3 mb-3" x-text="item.description"></p>
                 <div class="flex items-center justify-between text-xs text-surface-500">
                   <span class="truncate max-w-[60%]" x-text="truncate(item.sourceTitle || item.feedTitle, 20)"></span>
-                  <time :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
+                  <time class="font-mono text-sm" :datetime="item.pubDate" x-text="formatDate(item.pubDate)"></time>
                 </div>
                 <button
                   class="share-post-btn mt-2"
@@ -243,7 +243,7 @@ withSidebar: true
         {# Full/Expanded View #}
         <div x-show="viewMode === 'full'" class="space-y-6">
           <template x-for="item in filteredItems" :key="item.id">
-            <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 overflow-hidden">
+            <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm overflow-hidden">
               <div x-show="item.imageUrl" class="aspect-[3/1] bg-surface-100 dark:bg-surface-700">
                 <img
                   :src="item.imageUrl"
@@ -264,7 +264,7 @@ withSidebar: true
                     <span class="font-medium text-surface-700 dark:text-surface-300" x-text="item.sourceTitle || item.feedTitle"></span>
                   </a>
                   <span x-show="item.author" class="text-surface-600 dark:text-surface-400" x-text="'by ' + item.author"></span>
-                  <time :datetime="item.pubDate" class="text-surface-500" x-text="formatDate(item.pubDate, 'long')"></time>
+                  <time :datetime="item.pubDate" class="font-mono text-sm text-surface-500" x-text="formatDate(item.pubDate, 'long')"></time>
                 </div>
 
                 <h2 class="text-xl sm:text-2xl font-bold text-surface-900 dark:text-surface-100 mb-4">
@@ -329,17 +329,17 @@ withSidebar: true
         <button
           @click="loadPage(pagination.page - 1)"
           :disabled="!pagination.hasPrev || loading"
-          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"
+          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 focus:outline-none focus:ring-2 focus:ring-accent-500"
         >
           Previous
         </button>
         <span class="px-4 py-2 text-sm text-surface-600 dark:text-surface-400">
-          Page <span x-text="pagination.page"></span> of <span x-text="pagination.totalPages"></span>
+          Page <span class="font-mono" x-text="pagination.page"></span> of <span class="font-mono" x-text="pagination.totalPages"></span>
         </span>
         <button
           @click="loadPage(pagination.page + 1)"
           :disabled="!pagination.hasNext || loading"
-          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"
+          class="px-4 py-2 rounded-lg text-sm font-medium transition-colors disabled:opacity-50 disabled:cursor-not-allowed bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700 focus:outline-none focus:ring-2 focus:ring-accent-500"
         >
           Next
         </button>
@@ -406,7 +406,9 @@ function newsApp() {
       this.loading = true;
 
       try {
-        const res = await fetch(`/rssapi/api/items?limit=50&page=${page}`).then(r => r.json());
+        let url = `/rssapi/api/items?limit=50&page=${page}`;
+        if (this.filterFeed !== 'all') url += `&feedId=${this.filterFeed}`;
+        const res = await fetch(url).then(r => r.json());
         this.items = res.items || [];
         this.pagination = res.pagination || null;
         window.scrollTo({ top: 0, behavior: 'smooth' });