fix: keep header refresh as backend refetch

Author: phatpham9

README.md

@@ -56,6 +56,7 @@
 - **Explicit empty states** for no-result source filters and searches
 - **Connectivity indicator** that shows a no-wifi icon while offline and silently refreshes the current view when the browser reconnects
 - **Scheduled refresh** every 1 hour on wall-clock boundaries in UTC+7
+- **Manual refresh** from the header re-fetches the current feed view from backend stored items only; it does **not** re-fetch upstream sources
 - **Persisted visited-link dimming** for feed card titles across reload/reopen using local storage
 - **PWA-ready assets and offline caching** including manifest, service worker, touch icons, cached shell assets, and cached `/api/items` responses for previously visited views
 - **Reconnect list refresh** re-fetches the current view from backend stored items only; it does **not** refresh upstream sources
@@ -263,7 +264,10 @@ Behavior:
 - runs on the next **N-hour wall-clock boundary** based on `FEEDREADER_REFRESH_INTERVAL_HOURS` (default: **1 hour**)
 - does **not** perform an immediate refresh just because the container starts
 
-On-demand refresh is available through the CLI and `POST /api/refresh`.
+On-demand refresh is available through:
+
+- the header refresh button for re-fetching the current backend-stored feed view
+- the CLI and `POST /api/refresh` for triggering an immediate upstream source refresh
 
 ---
 
@@ -330,7 +334,7 @@ Presentation-layer note:
 
 ### Loading and empty states
 
-- first-load bootstrap queries, source filter changes, searches, and `View more` all show an explicit toast-based loading state
+- first-load bootstrap queries, source filter changes, searches, `View more`, and header refresh all show an explicit toast-based loading state
 - source-filter changes use the generic loading toast text `Loading feed…`
 - source-filter and search requests that return zero items replace the list with an empty-state message instead of leaving stale cards on screen
 - `View more` disables itself while an append request is in flight and hides itself when the current result set has no further page

docs/assets/feedreader-home.png

@@ -44,6 +44,7 @@
   const searchForm = document.querySelector("[data-search-form]");
   const searchInput = document.querySelector("[data-search-input]");
   const searchSourceInput = document.querySelector("[data-search-source]");
+  const refreshButton = document.querySelector("[data-refresh-button]");
   const themeToggle = document.querySelector("[data-theme-toggle]");
   const toast = document.querySelector("[data-toast]");
   const pageSize = Number(cardsGrid?.dataset.pageSize || 12);
@@ -68,6 +69,7 @@
   let searchTimer = null;
   let ignoreNextEmptySearchInput = false;
   let requestSequence = 0;
+  let refreshInFlight = false;
   let feedLoading = false;
   let feedLoadingMode = "";
   let activeToastKind = "";
@@ -378,7 +380,7 @@
     const showButton = hasNext && loadedCount > 0;
     const loadingMore = feedLoading && feedLoadingMode === "append";
     viewMoreButton.hidden = !showButton;
-    viewMoreButton.disabled = !showButton || feedLoading;
+    viewMoreButton.disabled = !showButton || refreshInFlight || feedLoading;
     viewMoreButton.textContent = loadingMore ? "Loading…" : "View more";
   };
 
@@ -533,6 +535,20 @@
     }
   };
 
+  const setRefreshButtonLoading = (active) => {
+    if (!refreshButton) return;
+    refreshButton.disabled = active;
+    refreshButton.classList.toggle("is-loading", active);
+    refreshButton.setAttribute(
+      "aria-label",
+      active ? "Refreshing feed" : "Refresh feed",
+    );
+    refreshButton.setAttribute(
+      "title",
+      active ? "Refreshing feed" : "Refresh feed",
+    );
+  };
+
   const fetchItems = async ({
     source,
     query,
@@ -704,7 +720,7 @@
 
   async function refetchCurrentViewAfterReconnect() {
     syncConnectivityState();
-    if (!browserOnline || reconnectRefetchInFlight) {
+    if (!browserOnline || refreshInFlight || reconnectRefetchInFlight) {
       return false;
     }
     reconnectRefetchInFlight = true;
@@ -718,6 +734,29 @@
     }
   }
 
+  async function refreshFeedList() {
+    syncConnectivityState();
+    if (!browserOnline || refreshInFlight) {
+      return false;
+    }
+    refreshInFlight = true;
+    cancelPendingSearch();
+    setRefreshButtonLoading(true);
+    renderFeedBody();
+    try {
+      await refetchCurrentView({ loadingMessage: "Refreshing feed…" });
+      showToast("Feed refreshed", "success");
+      return true;
+    } catch (error) {
+      showToast("Refresh failed", "error");
+      return false;
+    } finally {
+      refreshInFlight = false;
+      setRefreshButtonLoading(false);
+      renderFeedBody();
+    }
+  }
+
   function openConfigDialog() {
     syncConfigOptions();
     syncDensityOptions();
@@ -934,6 +973,12 @@
     });
   }
 
+  if (refreshButton) {
+    refreshButton.addEventListener("click", async () => {
+      await refreshFeedList();
+    });
+  }
+
   if (themeToggle) {
     themeToggle.addEventListener("click", () => {
       applyTheme(root.dataset.theme === "dark" ? "light" : "dark");
@@ -974,6 +1019,7 @@
   renderFilters();
   renderSearch();
   renderFeedBody();
+  setRefreshButtonLoading(false);
   renderConnectionIndicator();
 
   if (shouldBootstrapRefetch) {

web/static/app.js

@@ -1,9 +1,9 @@
-const SHELL_CACHE = 'reader-shell-v33';
+const SHELL_CACHE = 'reader-shell-v34';
 const ITEMS_CACHE = "reader-items-v22";
 const CORE_ASSETS = [
   "/",
   '/static/style.css?v=38',
-  "/static/app.js?v=29",
+  "/static/app.js?v=30",
   "/static/source-icons/hackernews.svg",
   "/static/source-icons/github.svg",
   "/static/source-icons/huggingface.svg",

web/static/service-worker.js

@@ -922,6 +922,10 @@ body.is-dialog-open {
   font-size: 0.9rem;
 }
 
+.refresh-button.is-loading .theme-icon {
+  animation: spin 0.8s linear infinite;
+}
+
 .view-more[hidden] {
   display: none;
 }

web/static/style.css

@@ -17,7 +17,7 @@
     <link rel="shortcut icon" href="/favicon.svg?v=8" type="image/svg+xml" />
     <link rel="apple-touch-icon" href="/apple-touch-icon.png?v=8" />
     <link rel="stylesheet" href="/static/style.css?v=38" />
-    <script src="/static/app.js?v=29" defer></script>
+    <script src="/static/app.js?v=30" defer></script>
   </head>
   <body>
     <header class="shell page-header">
@@ -34,6 +34,12 @@ <h1 class="brand"><img class="brand-mark" src="/favicon.svg?v=7" alt="" aria-hid
               <path d="M4 4l16 16" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.9"/>
             </svg>
           </span>
+          <button class="icon-button refresh-button" type="button" data-refresh-button aria-label="Refresh feed" title="Refresh feed">
+            <svg class="theme-icon" viewBox="0 0 24 24" aria-hidden="true">
+              <path d="M20 12a8 8 0 1 1-2.34-5.66" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
+              <path d="M20 4v5h-5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.8"/>
+            </svg>
+          </button>
           <button class="icon-button config-toggle" type="button" data-source-config-open aria-label="Open reader settings" title="Open reader settings">
             <svg class="theme-icon" viewBox="0 0 24 24" aria-hidden="true">
               <path d="M4 7h8" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.8"/>