@rmdes/indiekit-endpoint-rss 1.0.4 → 1.0.7

package/index.js

@@ -19,6 +19,7 @@ const defaults = {
   maxItemsPerFeed: 50,
   fetchTimeout: 10_000,
   maxConcurrentFetches: 3,
+  retentionDays: 30,
 };
 
 export default class RssEndpoint {

package/lib/controllers/dashboard.js

@@ -12,16 +12,16 @@ export const dashboardController = {
 
       if (!rssConfig) {
         return response.status(500).render("rss", {
-          title: response.locals.__("rss.title"),
-          error: { message: response.locals.__("rss.error.noConfig") },
+          title: response.__("rss.title"),
+          configError: response.__("rss.error.noConfig"),
         });
       }
 
       const db = request.app.locals.application.getRssDb?.();
       if (!db) {
         return response.render("rss", {
-          title: response.locals.__("rss.title"),
-          error: { message: response.locals.__("rss.error.noDatabase") },
+          title: response.__("rss.title"),
+          configError: response.__("rss.error.noDatabase"),
         });
       }
 
@@ -42,7 +42,7 @@ export const dashboardController = {
       const syncState = getSyncState();
 
       response.render("rss", {
-        title: response.locals.__("rss.title"),
+        title: response.__("rss.title"),
         feeds: feeds.map(formatFeed),
         recentItems: recentItems.map((item) => formatItem(item)),
         totalFeeds: feeds.length,
@@ -52,7 +52,14 @@ export const dashboardController = {
           lastSync: syncState.lastSync?.toISOString(),
           lastError: syncState.lastError,
         },
+        mountPath: request.baseUrl,
         publicUrl: rssEndpoint,
+        synced: request.query.synced,
+        syncedFeeds: request.query.feeds,
+        syncedItems: request.query.items,
+        syncedPruned: request.query.pruned,
+        syncInProgress: request.query.syncing,
+        queryError: request.query.error,
       });
     } catch (error) {
       next(error);
@@ -121,45 +128,45 @@ export const dashboardController = {
       const { rssConfig, getRssDb } = request.app.locals.application;
 
       if (!rssConfig) {
-        return response.status(500).json({
-          error: response.locals.__("rss.error.noConfig"),
-        });
+        return response.redirect(
+          request.baseUrl + "?error=" + encodeURIComponent("Not configured"),
+        );
       }
 
       const db = getRssDb?.();
       if (!db) {
-        return response.status(500).json({
-          error: response.locals.__("rss.error.noDatabase"),
-        });
+        return response.redirect(
+          request.baseUrl +
+            "?error=" +
+            encodeURIComponent("Database not available"),
+        );
       }
 
       const syncState = getSyncState();
       if (syncState.syncing) {
-        return response.status(409).json({
-          error: "Sync already in progress",
-          syncing: true,
-        });
+        return response.redirect(request.baseUrl + "?syncing=true");
       }
 
-      // Start sync and wait for result - pass db directly
       const result = await runSync(db, rssConfig);
 
       if (result.error) {
-        return response.status(500).json({
-          success: false,
-          error: result.error,
-        });
+        return response.redirect(
+          request.baseUrl + "?error=" + encodeURIComponent(result.error),
+        );
       }
 
-      response.json({
-        success: true,
-        message: response.locals.__("rss.success.syncComplete"),
-        feedsProcessed: result.feedsProcessed,
-        itemsAdded: result.itemsAdded,
+      const params = new URLSearchParams({
+        synced: "true",
+        feeds: result.feedsProcessed || 0,
+        items: result.itemsAdded || 0,
+        pruned: result.itemsPruned || 0,
       });
+      response.redirect(request.baseUrl + "?" + params.toString());
     } catch (error) {
       console.error("[RSS] Sync error:", error.message);
-      response.status(500).json({ error: error.message });
+      response.redirect(
+        request.baseUrl + "?error=" + encodeURIComponent(error.message),
+      );
     }
   },
 };

package/lib/rss-client.js

@@ -326,14 +326,23 @@ export class RssClient {
    * @returns {string|null}
    */
   extractFeedImage(parsed) {
+    // Helper to get first string from value (handles arrays)
+    const getString = (val) => {
+      if (!val) return null;
+      if (Array.isArray(val)) return val[0] || null;
+      if (typeof val === "object" && val.url) return val.url;
+      return typeof val === "string" ? val : null;
+    };
+
     // RSS 2.0 image
-    if (parsed.image?.url) return parsed.image.url;
+    if (parsed.image?.url) return getString(parsed.image.url);
+    if (parsed.image) return getString(parsed.image);
     // Atom icon
-    if (parsed.icon) return parsed.icon;
+    if (parsed.icon) return getString(parsed.icon);
     // Atom logo
-    if (parsed.logo) return parsed.logo;
+    if (parsed.logo) return getString(parsed.logo);
     // itunes:image
-    if (parsed.itunes?.image) return parsed.itunes.image;
+    if (parsed.itunes?.image) return getString(parsed.itunes.image);
     return null;
   }
 

package/lib/sync.js

@@ -116,16 +116,25 @@ export async function runSync(dbOrIndiekit, options) {
       syncState.feedsProcessed++;
     }
 
+    // Prune old items
+    const retentionDays = options.retentionDays || 30;
+    const itemsPruned = await pruneOldItems(
+      itemsCollection,
+      feedsCollection,
+      retentionDays,
+    );
+
     syncState.lastSync = new Date();
     syncState.syncing = false;
 
     console.log(
-      `[RSS] Sync complete: ${syncState.feedsProcessed} feeds, ${syncState.itemsAdded} new items`
+      `[RSS] Sync complete: ${syncState.feedsProcessed} feeds, ${syncState.itemsAdded} new items, ${itemsPruned} pruned`
     );
 
     return {
       feedsProcessed: syncState.feedsProcessed,
       itemsAdded: syncState.itemsAdded,
+      itemsPruned,
     };
   } catch (error) {
     syncState.lastError = error.message;
@@ -248,6 +257,47 @@ async function createIndexes(feedsCollection, itemsCollection) {
   await itemsCollection.createIndex({ fetchedAt: -1 });
 }
 
+/**
+ * Prune items older than retention period and update feed item counts
+ * @param {Collection} itemsCollection - Items collection
+ * @param {Collection} feedsCollection - Feeds collection
+ * @param {number} retentionDays - Days to keep items
+ * @returns {Promise<number>} Number of items pruned
+ */
+async function pruneOldItems(itemsCollection, feedsCollection, retentionDays) {
+  const cutoff = new Date();
+  cutoff.setDate(cutoff.getDate() - retentionDays);
+
+  try {
+    const result = await itemsCollection.deleteMany({
+      pubDate: { $lt: cutoff },
+    });
+
+    if (result.deletedCount > 0) {
+      console.log(
+        `[RSS] Pruned ${result.deletedCount} items older than ${retentionDays} days`,
+      );
+
+      // Update item counts for all feeds
+      const feeds = await feedsCollection.find({}).toArray();
+      for (const feed of feeds) {
+        const count = await itemsCollection.countDocuments({
+          feedId: feed._id,
+        });
+        await feedsCollection.updateOne(
+          { _id: feed._id },
+          { $set: { itemCount: count } },
+        );
+      }
+    }
+
+    return result.deletedCount;
+  } catch (err) {
+    console.error("[RSS] Prune error:", err.message);
+    return 0;
+  }
+}
+
 /**
  * Process feeds with concurrency limit
  * @param {Array} feeds - Array of feeds

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rmdes/indiekit-endpoint-rss",
-  "version": "1.0.4",
+  "version": "1.0.7",
   "description": "RSS feed reader endpoint for Indiekit. Aggregates multiple feeds, caches in MongoDB, displays on frontend.",
   "keywords": [
     "indiekit",

package/views/rss.njk

@@ -1,309 +1,383 @@
 {% extends "document.njk" %}
 
 {% block content %}
-  <style>
-    .rss-section { margin-bottom: 2rem; }
-    .rss-section h2 { margin-bottom: 1rem; }
-
-    /* Stats grid */
-    .rss-stats-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: 1rem;
-      margin-bottom: 1.5rem;
-    }
-    .rss-stat {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding: 1rem;
-      background: var(--color-offset, #f5f5f5);
-      border-radius: 0.5rem;
-      text-align: center;
-    }
-    .rss-stat-value {
-      font-size: 1.5rem;
-      font-weight: 700;
-      color: var(--color-accent, #ff6600);
-    }
-    .rss-stat-label {
-      font-size: 0.75rem;
-      color: var(--color-text-secondary, #666);
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-    }
+<style>
+  .rss-dashboard {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-xl, 2rem);
+  }
 
-    /* Sync status */
-    .rss-sync-status {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 1rem;
-      background: var(--color-offset, #f5f5f5);
-      border-radius: 0.5rem;
-      margin-bottom: 1.5rem;
-    }
-    .rss-sync-info {
-      display: flex;
-      flex-direction: column;
-      gap: 0.25rem;
-    }
-    .rss-sync-label {
-      font-size: 0.75rem;
-      color: var(--color-text-secondary, #666);
-      text-transform: uppercase;
-    }
-    .rss-sync-time {
-      font-weight: 500;
-    }
-    .rss-syncing {
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      color: var(--color-accent, #ff6600);
-    }
-    .rss-spinner {
-      width: 16px;
-      height: 16px;
-      border: 2px solid currentColor;
-      border-top-color: transparent;
-      border-radius: 50%;
-      animation: rss-spin 0.8s linear infinite;
-    }
-    @keyframes rss-spin {
-      to { transform: rotate(360deg); }
-    }
+  .rss-section {
+    background: var(--color-offset, #f5f5f5);
+    border-radius: var(--border-radius-small, 0.5rem);
+    padding: var(--space-m, 1.5rem);
+  }
 
-    /* Add feed form */
-    .rss-add-form {
-      display: flex;
-      gap: 0.5rem;
-      margin-bottom: 1.5rem;
-    }
-    .rss-add-form input {
-      flex: 1;
-      padding: 0.5rem 0.75rem;
-      border: 1px solid var(--color-border, #ddd);
-      border-radius: 0.25rem;
-      font-size: 0.875rem;
-    }
-    .rss-add-form input:focus {
-      outline: none;
-      border-color: var(--color-accent, #ff6600);
-    }
+  .rss-section h2 {
+    font: var(--font-heading, bold 1.25rem/1.4 sans-serif);
+    margin-block-end: var(--space-s, 0.75rem);
+    padding-block-end: var(--space-xs, 0.5rem);
+    border-block-end: 1px solid var(--color-outline-variant, #ddd);
+  }
 
-    /* Feed list */
-    .rss-feed-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-    .rss-feed-item {
-      display: flex;
-      align-items: center;
-      gap: 0.75rem;
-      padding: 0.75rem 0;
-      border-bottom: 1px solid var(--color-border, #eee);
-    }
-    .rss-feed-item:last-child { border-bottom: none; }
-    .rss-feed-icon {
-      width: 32px;
-      height: 32px;
-      object-fit: cover;
-      border-radius: 0.25rem;
-      flex-shrink: 0;
-    }
-    .rss-feed-icon-placeholder {
-      width: 32px;
-      height: 32px;
-      background: var(--color-border, #ddd);
-      border-radius: 0.25rem;
-      flex-shrink: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-text-secondary, #666);
-      font-size: 1rem;
-    }
-    .rss-feed-info {
-      flex: 1;
-      min-width: 0;
-    }
-    .rss-feed-title {
-      font-weight: 500;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .rss-feed-meta {
-      display: flex;
-      gap: 0.5rem;
-      font-size: 0.75rem;
-      color: var(--color-text-secondary, #666);
-    }
-    .rss-feed-actions {
-      display: flex;
-      gap: 0.5rem;
-      align-items: center;
-    }
-    .rss-feed-error {
-      color: #d32f2f;
-      font-size: 0.75rem;
-    }
+  /* Notifications */
+  .rss-notification {
+    border-radius: var(--border-radius-small, 0.25rem);
+    padding: var(--space-s, 0.75rem) var(--space-m, 1rem);
+    margin-block-end: var(--space-s, 0.75rem);
+  }
+  .rss-notification--success {
+    background: var(--color-success, #d4edda);
+    color: var(--color-on-success, #155724);
+  }
+  .rss-notification--warning {
+    background: #fff3cd;
+    color: #856404;
+  }
+  .rss-notification--error {
+    background: var(--color-error, #f8d7da);
+    color: var(--color-on-error, #721c24);
+  }
 
-    /* Item list */
-    .rss-item-list {
-      list-style: none;
-      padding: 0;
-      margin: 0;
-    }
-    .rss-item {
-      display: flex;
-      gap: 0.75rem;
-      padding: 0.75rem 0;
-      border-bottom: 1px solid var(--color-border, #eee);
-    }
-    .rss-item:last-child { border-bottom: none; }
-    .rss-item-image {
-      width: 60px;
-      height: 60px;
-      object-fit: cover;
-      border-radius: 0.25rem;
-      flex-shrink: 0;
-    }
-    .rss-item-placeholder {
-      width: 60px;
-      height: 60px;
-      background: var(--color-border, #ddd);
-      border-radius: 0.25rem;
-      flex-shrink: 0;
-    }
-    .rss-item-info {
-      flex: 1;
-      min-width: 0;
-    }
-    .rss-item-title {
-      font-weight: 500;
-      text-decoration: none;
-      color: inherit;
-      display: block;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-    .rss-item-title:hover { text-decoration: underline; }
-    .rss-item-description {
-      font-size: 0.875rem;
-      color: var(--color-text-secondary, #666);
-      margin: 0.25rem 0;
-      display: -webkit-box;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-    }
-    .rss-item-meta {
-      font-size: 0.75rem;
-      color: var(--color-text-secondary, #666);
-    }
+  /* Stats grid */
+  .rss-stats-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+    gap: var(--space-s, 0.75rem);
+  }
+  .rss-stat {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: var(--space-s, 0.75rem);
+    background: var(--color-background, #fff);
+    border-radius: var(--border-radius-small, 0.5rem);
+    text-align: center;
+  }
+  .rss-stat-value {
+    font-size: 1.5rem;
+    font-weight: 700;
+    color: var(--color-accent, #ff6600);
+  }
+  .rss-stat-label {
+    font-size: 0.75rem;
+    color: var(--color-on-offset, #666);
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
 
-    /* Toggle switch */
-    .rss-toggle {
-      position: relative;
-      width: 40px;
-      height: 22px;
-      cursor: pointer;
-    }
-    .rss-toggle input {
-      opacity: 0;
-      width: 0;
-      height: 0;
-    }
-    .rss-toggle-slider {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: #ccc;
-      border-radius: 22px;
-      transition: 0.3s;
-    }
-    .rss-toggle-slider:before {
-      position: absolute;
-      content: "";
-      height: 16px;
-      width: 16px;
-      left: 3px;
-      bottom: 3px;
-      background-color: white;
-      border-radius: 50%;
-      transition: 0.3s;
-    }
-    .rss-toggle input:checked + .rss-toggle-slider {
-      background-color: var(--color-accent, #ff6600);
-    }
-    .rss-toggle input:checked + .rss-toggle-slider:before {
-      transform: translateX(18px);
-    }
+  /* Sync status */
+  .rss-sync-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-m, 1rem);
+    flex-wrap: wrap;
+  }
+  .rss-sync-info {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .rss-sync-label {
+    font-size: 0.75rem;
+    color: var(--color-on-offset, #666);
+    text-transform: uppercase;
+  }
+  .rss-sync-time {
+    font-weight: 500;
+  }
+  .rss-syncing {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--color-accent, #ff6600);
+  }
+  .rss-spinner {
+    width: 16px;
+    height: 16px;
+    border: 2px solid currentColor;
+    border-top-color: transparent;
+    border-radius: 50%;
+    animation: rss-spin 0.8s linear infinite;
+  }
+  @keyframes rss-spin {
+    to { transform: rotate(360deg); }
+  }
 
-    /* Delete button */
-    .rss-delete-btn {
-      background: none;
-      border: none;
-      color: #d32f2f;
-      cursor: pointer;
-      padding: 0.25rem;
-      font-size: 1rem;
-      opacity: 0.6;
-    }
-    .rss-delete-btn:hover {
-      opacity: 1;
-    }
-  </style>
+  /* Add feed form */
+  .rss-add-form {
+    display: flex;
+    gap: 0.5rem;
+  }
+  .rss-add-form input {
+    flex: 1;
+    appearance: none;
+    background-color: var(--color-background, #fff);
+    border: 1px solid var(--color-outline-variant, #ccc);
+    border-radius: var(--border-radius-small, 0.25rem);
+    font: var(--font-body, 0.875rem/1.4 sans-serif);
+    padding: calc(var(--space-s, 0.75rem) / 2) var(--space-s, 0.75rem);
+  }
+  .rss-add-form input:focus {
+    border-color: var(--color-primary, #0066cc);
+    outline: 2px solid var(--color-primary, #0066cc);
+    outline-offset: 1px;
+  }
+
+  /* Feed list */
+  .rss-feed-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .rss-feed-item {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--color-outline-variant, #eee);
+  }
+  .rss-feed-item:last-child { border-bottom: none; }
+  .rss-feed-icon {
+    width: 32px;
+    height: 32px;
+    object-fit: cover;
+    border-radius: 0.25rem;
+    flex-shrink: 0;
+  }
+  .rss-feed-icon-placeholder {
+    width: 32px;
+    height: 32px;
+    background: var(--color-outline-variant, #ddd);
+    border-radius: 0.25rem;
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-on-offset, #666);
+    font-size: 1rem;
+  }
+  .rss-feed-info {
+    flex: 1;
+    min-width: 0;
+  }
+  .rss-feed-title {
+    font-weight: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .rss-feed-meta {
+    display: flex;
+    gap: 0.5rem;
+    font-size: 0.75rem;
+    color: var(--color-on-offset, #666);
+  }
+  .rss-feed-actions {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+  .rss-feed-error {
+    color: #d32f2f;
+    font-size: 0.75rem;
+  }
+
+  /* Item list */
+  .rss-item-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  .rss-item {
+    display: flex;
+    gap: 0.75rem;
+    padding: 0.75rem 0;
+    border-bottom: 1px solid var(--color-outline-variant, #eee);
+  }
+  .rss-item:last-child { border-bottom: none; }
+  .rss-item-image {
+    width: 60px;
+    height: 60px;
+    object-fit: cover;
+    border-radius: 0.25rem;
+    flex-shrink: 0;
+  }
+  .rss-item-placeholder {
+    width: 60px;
+    height: 60px;
+    background: var(--color-outline-variant, #ddd);
+    border-radius: 0.25rem;
+    flex-shrink: 0;
+  }
+  .rss-item-info {
+    flex: 1;
+    min-width: 0;
+  }
+  .rss-item-title {
+    font-weight: 500;
+    text-decoration: none;
+    color: inherit;
+    display: block;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .rss-item-title:hover { text-decoration: underline; }
+  .rss-item-description {
+    font-size: 0.875rem;
+    color: var(--color-on-offset, #666);
+    margin: 0.25rem 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  .rss-item-meta {
+    font-size: 0.75rem;
+    color: var(--color-on-offset, #666);
+  }
+
+  /* Toggle switch */
+  .rss-toggle {
+    position: relative;
+    width: 40px;
+    height: 22px;
+    cursor: pointer;
+  }
+  .rss-toggle input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  .rss-toggle-slider {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    background-color: #ccc;
+    border-radius: 22px;
+    transition: 0.3s;
+  }
+  .rss-toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    border-radius: 50%;
+    transition: 0.3s;
+  }
+  .rss-toggle input:checked + .rss-toggle-slider {
+    background-color: var(--color-accent, #ff6600);
+  }
+  .rss-toggle input:checked + .rss-toggle-slider:before {
+    transform: translateX(18px);
+  }
 
-  {% if error %}
-    {{ prose({ text: error.message }) }}
+  /* Delete button */
+  .rss-delete-btn {
+    background: none;
+    border: none;
+    color: #d32f2f;
+    cursor: pointer;
+    padding: 0.25rem;
+    font-size: 1rem;
+    opacity: 0.6;
+  }
+  .rss-delete-btn:hover { opacity: 1; }
+
+  /* Public link */
+  .rss-public-link {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-m, 1rem);
+    flex-wrap: wrap;
+  }
+  .rss-public-link p {
+    margin: 0;
+    color: var(--color-on-offset, #666);
+    font: var(--font-caption, 0.875rem/1.4 sans-serif);
+  }
+</style>
+
+{# Notifications #}
+{% if synced %}
+<div class="rss-notification rss-notification--success">
+  {% if syncedItems and syncedItems != "0" %}
+    Synced {{ syncedItems }} new items from {{ syncedFeeds }} feeds
   {% else %}
-    {# Sync Status #}
-    <div class="rss-sync-status">
-      <div class="rss-sync-info">
-        <span class="rss-sync-label">{{ __("rss.lastSynced") }}</span>
-        <span class="rss-sync-time">
-          {% if syncState.syncing %}
-            <span class="rss-syncing">
-              <span class="rss-spinner"></span>
-              {{ __("rss.syncing") }}
-            </span>
-          {% elif syncState.lastSync %}
-            {{ syncState.lastSync | date("PPpp") }}
-          {% else %}
-            {{ __("rss.never") }}
+    Feeds are up to date, nothing new to sync
+  {% endif %}
+  {% if syncedPruned and syncedPruned != "0" %}
+    ({{ syncedPruned }} old items pruned)
+  {% endif %}
+</div>
+{% endif %}
+
+{% if syncInProgress %}
+<div class="rss-notification rss-notification--warning">
+  A sync is already in progress, please wait
+</div>
+{% endif %}
+
+{% if queryError %}
+<div class="rss-notification rss-notification--error">
+  {{ queryError }}
+</div>
+{% endif %}
+
+{% if configError %}
+<div class="rss-notification rss-notification--error">
+  {{ configError }}
+</div>
+{% endif %}
+
+<div class="rss-dashboard">
+  {% if not configError %}
+    {# Sync Status & Actions #}
+    <section class="rss-section">
+      <h2>{{ __("rss.syncStatus") }}</h2>
+      <div class="rss-sync-bar">
+        <div class="rss-sync-info">
+          <span class="rss-sync-label">{{ __("rss.lastSynced") }}</span>
+          <span class="rss-sync-time">
+            {% if syncState.syncing %}
+              <span class="rss-syncing">
+                <span class="rss-spinner"></span>
+                {{ __("rss.syncing") }}
+              </span>
+            {% elif syncState.lastSync %}
+              {{ syncState.lastSync | date("PPpp") }}
+            {% else %}
+              {{ __("rss.never") }}
+            {% endif %}
+          </span>
+          {% if syncState.lastError %}
+          <span class="rss-feed-error">{{ syncState.lastError }}</span>
           {% endif %}
-        </span>
-        {% if syncState.lastError %}
-        <span class="rss-feed-error">{{ syncState.lastError }}</span>
-        {% endif %}
-      </div>
-      <div style="display: flex; gap: 0.5rem;">
-        <form action="{{ publicUrl }}/sync" method="post" style="margin: 0;">
-          {{ button({
-            type: "submit",
-            text: __("rss.syncNow"),
-            disabled: syncState.syncing
-          }) }}
-        </form>
-        <form action="{{ publicUrl }}/clear-resync" method="post" style="margin: 0;" id="clear-resync-form">
-          {{ button({
-            type: "submit",
-            text: __("rss.clearResync"),
-            disabled: syncState.syncing
-          }) }}
-        </form>
+        </div>
+        <div class="button-group" style="display: flex; gap: 0.5rem;">
+          <form action="{{ mountPath }}/sync" method="post" style="display: inline;">
+            <button type="submit" class="button button--primary" {% if syncState.syncing %}disabled{% endif %}>
+              {{ __("rss.syncNow") }}
+            </button>
+          </form>
+          <form action="{{ mountPath }}/clear-resync" method="post" style="display: inline;" id="clear-resync-form">
+            <button type="submit" class="button" {% if syncState.syncing %}disabled{% endif %}>
+              {{ __("rss.clearResync") }}
+            </button>
+          </form>
+        </div>
       </div>
-    </div>
+    </section>
 
     {# Stats #}
     <section class="rss-section">
+      <h2>{{ __("rss.status") }}</h2>
       <div class="rss-stats-grid">
         <div class="rss-stat">
           <span class="rss-stat-value">{{ totalFeeds }}</span>
@@ -323,24 +397,23 @@
     {# Add Feed Form #}
     <section class="rss-section">
       <h2>{{ __("rss.addFeed") }}</h2>
-      <form class="rss-add-form" action="{{ publicUrl }}/api/feeds" method="post" id="add-feed-form">
+      <form class="rss-add-form" action="{{ mountPath }}/api/feeds" method="post" id="add-feed-form">
         <input
           type="url"
           name="url"
           placeholder="{{ __("rss.feedUrlPlaceholder") }}"
           required
         >
-        {{ button({
-          type: "submit",
-          text: __("rss.addFeed")
-        }) }}
+        <button type="submit" class="button button--primary">
+          {{ __("rss.addFeed") }}
+        </button>
       </form>
     </section>
 
     {# Feeds List #}
+    {% if feeds and feeds.length > 0 %}
     <section class="rss-section">
       <h2>{{ __("rss.feeds") }}</h2>
-      {% if feeds and feeds.length > 0 %}
       <ul class="rss-feed-list">
         {% for feed in feeds %}
         <li class="rss-feed-item" data-feed-id="{{ feed.id }}">
@@ -380,15 +453,13 @@
         </li>
         {% endfor %}
       </ul>
-      {% else %}
-      {{ prose({ text: __("rss.noFeeds") }) }}
-      {% endif %}
     </section>
+    {% endif %}
 
     {# Recent Items #}
+    {% if recentItems and recentItems.length > 0 %}
     <section class="rss-section">
       <h2>{{ __("rss.recentItems") }}</h2>
-      {% if recentItems and recentItems.length > 0 %}
       <ul class="rss-item-list">
         {% for item in recentItems %}
         <li class="rss-item">
@@ -414,133 +485,132 @@
         </li>
         {% endfor %}
       </ul>
-      {% else %}
-      {{ prose({ text: __("rss.noItems") }) }}
-      {% endif %}
     </section>
+    {% endif %}
 
-    {# Link to public page #}
-    <div class="rss-sync-status">
-      <p>{{ __("rss.widget.description") }}</p>
-      {{ button({
-        href: "/news/",
-        text: __("rss.widget.view"),
-        target: "_blank"
-      }) }}
-    </div>
+    {# Public Page Link #}
+    <section class="rss-section">
+      <div class="rss-public-link">
+        <p>{{ __("rss.widget.description") }}</p>
+        <a href="/news/" class="button button--secondary" target="_blank">
+          {{ __("rss.widget.view") }}
+        </a>
+      </div>
+    </section>
   {% endif %}
+</div>
+
+<script>
+  // Handle add feed form
+  document.getElementById('add-feed-form')?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    const form = e.target;
+    const url = form.url.value;
+
+    try {
+      const response = await fetch(form.action, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ url })
+      });
 
-  <script>
-    // Handle add feed form
-    document.getElementById('add-feed-form')?.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const form = e.target;
-      const url = form.url.value;
+      const data = await response.json();
+      if (response.ok) {
+        location.reload();
+      } else {
+        alert(data.error || 'Failed to add feed');
+      }
+    } catch (err) {
+      alert('Failed to add feed: ' + err.message);
+    }
+  });
+
+  // Handle toggle feed
+  document.querySelectorAll('[data-toggle-feed]').forEach(input => {
+    input.addEventListener('change', async (e) => {
+      const feedId = e.target.dataset.toggleFeed;
+      const enabled = e.target.checked;
 
       try {
-        const response = await fetch(form.action, {
-          method: 'POST',
+        const response = await fetch(`{{ mountPath }}/api/feeds/${feedId}`, {
+          method: 'PATCH',
           headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ url })
+          body: JSON.stringify({ enabled })
         });
 
-        const data = await response.json();
-        if (response.ok) {
-          location.reload();
-        } else {
-          alert(data.error || 'Failed to add feed');
+        if (!response.ok) {
+          e.target.checked = !enabled;
+          const data = await response.json();
+          alert(data.error || 'Failed to update feed');
         }
       } catch (err) {
-        alert('Failed to add feed: ' + err.message);
+        e.target.checked = !enabled;
+        alert('Failed to update feed: ' + err.message);
       }
     });
+  });
 
-    // Handle toggle feed
-    document.querySelectorAll('[data-toggle-feed]').forEach(input => {
-      input.addEventListener('change', async (e) => {
-        const feedId = e.target.dataset.toggleFeed;
-        const enabled = e.target.checked;
-
-        try {
-          const response = await fetch(`{{ publicUrl }}/api/feeds/${feedId}`, {
-            method: 'PATCH',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ enabled })
-          });
-
-          if (!response.ok) {
-            e.target.checked = !enabled;
-            const data = await response.json();
-            alert(data.error || 'Failed to update feed');
-          }
-        } catch (err) {
-          e.target.checked = !enabled;
-          alert('Failed to update feed: ' + err.message);
-        }
-      });
-    });
+  // Handle clear & re-sync
+  document.getElementById('clear-resync-form')?.addEventListener('submit', async (e) => {
+    e.preventDefault();
+    if (!confirm('This will delete all cached items and re-fetch them from feeds. Continue?')) return;
+
+    const form = e.target;
+    const submitBtn = form.querySelector('button[type="submit"]');
+    const originalText = submitBtn?.textContent;
+    if (submitBtn) {
+      submitBtn.disabled = true;
+      submitBtn.textContent = 'Clearing...';
+    }
 
-    // Handle clear & re-sync
-    document.getElementById('clear-resync-form')?.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      if (!confirm('This will delete all cached items and re-fetch them from feeds. Continue?')) return;
+    try {
+      const response = await fetch(form.action, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' }
+      });
 
-      const form = e.target;
-      const submitBtn = form.querySelector('button[type="submit"]');
-      const originalText = submitBtn?.textContent;
+      const data = await response.json();
+      if (response.ok) {
+        alert(`Cleared ${data.itemsCleared} items, re-fetched ${data.itemsAdded} items from ${data.feedsProcessed} feeds.`);
+        location.reload();
+      } else {
+        alert(data.error || 'Failed to clear & re-sync');
+        if (submitBtn) {
+          submitBtn.disabled = false;
+          submitBtn.textContent = originalText;
+        }
+      }
+    } catch (err) {
+      alert('Failed to clear & re-sync: ' + err.message);
       if (submitBtn) {
-        submitBtn.disabled = true;
-        submitBtn.textContent = 'Clearing...';
+        submitBtn.disabled = false;
+        submitBtn.textContent = originalText;
       }
+    }
+  });
+
+  // Handle delete feed
+  document.querySelectorAll('[data-delete-feed]').forEach(btn => {
+    btn.addEventListener('click', async (e) => {
+      const feedId = e.target.dataset.deleteFeed;
+
+      if (!confirm('Are you sure you want to remove this feed?')) return;
 
       try {
-        const response = await fetch(form.action, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' }
+        const response = await fetch(`{{ mountPath }}/api/feeds/${feedId}`, {
+          method: 'DELETE'
         });
 
-        const data = await response.json();
         if (response.ok) {
-          alert(`Cleared ${data.itemsCleared} items, re-fetched ${data.itemsAdded} items from ${data.feedsProcessed} feeds.`);
           location.reload();
         } else {
-          alert(data.error || 'Failed to clear & re-sync');
-          if (submitBtn) {
-            submitBtn.disabled = false;
-            submitBtn.textContent = originalText;
-          }
+          const data = await response.json();
+          alert(data.error || 'Failed to remove feed');
         }
       } catch (err) {
-        alert('Failed to clear & re-sync: ' + err.message);
-        if (submitBtn) {
-          submitBtn.disabled = false;
-          submitBtn.textContent = originalText;
-        }
+        alert('Failed to remove feed: ' + err.message);
       }
     });
-
-    // Handle delete feed
-    document.querySelectorAll('[data-delete-feed]').forEach(btn => {
-      btn.addEventListener('click', async (e) => {
-        const feedId = e.target.dataset.deleteFeed;
-
-        if (!confirm('Are you sure you want to remove this feed?')) return;
-
-        try {
-          const response = await fetch(`{{ publicUrl }}/api/feeds/${feedId}`, {
-            method: 'DELETE'
-          });
-
-          if (response.ok) {
-            location.reload();
-          } else {
-            const data = await response.json();
-            alert(data.error || 'Failed to remove feed');
-          }
-        } catch (err) {
-          alert('Failed to remove feed: ' + err.message);
-        }
-      });
-    });
-  </script>
+  });
+</script>
 {% endblock %}