From 2077b8d8667f7e76fe1d10950e6f1dc1f9ba9b31 Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Fri, 6 Mar 2026 19:53:12 +0100
Subject: [PATCH] fix: audit /podroll/ page for design system compliance

- Replace broken SVG icon (mixed checkmark + radio paths) with proper
  microphone icon matching the empty state icon
- Add font-mono to date elements: last synced span, episode <time>
- Add font-mono to stat numbers: podcast count (header + sidebar)
- Add shadow-sm to episode article cards (card depth pattern)
- Add focus:ring-2 to all buttons: refresh, try again, load more
- Focus rings use domain color (orange-500) consistently

Confab-Link: http://localhost:8080/sessions/0ec83454-d346-4329-8aaf-6b12139bf596
---
 podroll.njk | 23 ++++++++++-------------
 1 file changed, 10 insertions(+), 13 deletions(-)

diff --git a/podroll.njk b/podroll.njk
index d1e8f54..2da6ae3 100644
--- a/podroll.njk
+++ b/podroll.njk
@@ -6,20 +6,17 @@ permalink: /podroll/
 <div class="podroll-page" x-data="podrollApp()" x-init="init()">
   <header class="mb-6 sm:mb-8">
     <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">
-      <svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="currentColor" viewBox="0 0 24 24">
-        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
-        <circle cx="12" cy="12" r="3"/>
-        <path d="M12 6a6 6 0 0 0-6 6h2a4 4 0 0 1 4-4V6z"/>
-        <path d="M12 2v2a8 8 0 0 1 8 8h2c0-5.52-4.48-10-10-10z"/>
+      <svg class="w-8 h-8 inline-block mr-2 text-orange-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"/>
       </svg>
       Podroll
     </h1>
     <p class="text-surface-600 dark:text-surface-400">
-      My podcast subscriptions - recent episodes from <span x-text="sources.length" class="font-medium"></span> podcasts
+      My podcast subscriptions - recent episodes from <span x-text="sources.length" class="font-medium font-mono"></span> podcasts
     </p>
     <p class="text-xs text-surface-500 mt-2" x-show="status?.episodes?.lastSync">
-      Last synced: <span x-text="formatDate(status?.episodes?.lastSync, 'full')"></span>
-      <button @click="refresh()" class="ml-2 text-orange-600 hover:text-orange-700 dark:text-orange-400" :disabled="loading">
+      Last synced: <span class="font-mono" x-text="formatDate(status?.episodes?.lastSync, 'full')"></span>
+      <button @click="refresh()" class="ml-2 text-orange-600 hover:text-orange-700 dark:text-orange-400 focus:outline-none focus:ring-2 focus:ring-orange-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>
@@ -42,7 +39,7 @@ permalink: /podroll/
       {# Error State #}
       <div x-show="error" class="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
         <p class="text-red-700 dark:text-red-400" x-text="error"></p>
-        <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline">Try again</button>
+        <button @click="refresh()" class="mt-2 text-sm text-red-600 hover:text-red-700 underline focus:outline-none focus:ring-2 focus:ring-red-500 rounded">Try again</button>
       </div>
 
       {# Filter by Podcast #}
@@ -66,7 +63,7 @@ permalink: /podroll/
       {# Episodes List #}
       <div x-show="episodes.length > 0" class="space-y-4">
         <template x-for="episode in filteredEpisodes" :key="episode.id">
-          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
+          <article class="bg-surface-50 dark:bg-surface-800 rounded-xl border border-surface-200 dark:border-surface-700 shadow-sm p-4 sm:p-6 hover:border-orange-400 dark:hover:border-orange-600 transition-colors">
             {# Episode Header #}
             <div class="flex items-start gap-4 mb-4">
               <div class="flex-1 min-w-0">
@@ -87,7 +84,7 @@ permalink: /podroll/
                     </svg>
                     <span x-text="episode.podcast?.title || 'Unknown'"></span>
                   </a>
-                  <time :datetime="episode.published" x-text="formatDate(episode.published)"></time>
+                  <time class="font-mono text-sm" :datetime="episode.published" x-text="formatDate(episode.published)"></time>
                   <span x-show="episode.enclosure" class="text-surface-400">
                     <svg class="w-3 h-3 inline" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15.536a5 5 0 001.414 1.414m2.828-9.9a9 9 0 012.828-2.828"/>
@@ -175,7 +172,7 @@ permalink: /podroll/
         <button
           @click="loadMore()"
           :disabled="loadingMore"
-          class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50"
+          class="px-6 py-3 bg-orange-600 hover:bg-orange-700 text-white rounded-lg text-sm font-medium transition-colors disabled:opacity-50 focus:outline-none focus:ring-2 focus:ring-orange-500"
         >
           <span x-show="!loadingMore">Load More Episodes</span>
           <span x-show="loadingMore" class="flex items-center gap-2">
@@ -207,7 +204,7 @@ permalink: /podroll/
             <path d="M4 4.44v2.83c7.03 0 12.73 5.7 12.73 12.73h2.83c0-8.59-6.97-15.56-15.56-15.56zm0 5.66v2.83c3.9 0 7.07 3.17 7.07 7.07h2.83c0-5.47-4.43-9.9-9.9-9.9z"/>
           </svg>
           Subscriptions
-          <span class="text-sm font-normal text-surface-500" x-text="'(' + sources.length + ')'"></span>
+          <span class="text-sm font-normal font-mono text-surface-500" x-text="'(' + sources.length + ')'"></span>
         </h3>
 
         <div x-show="sources.length === 0 && !loading" class="text-sm text-surface-500 text-center py-4">