Upload 6 files

index.html

@@ -60,7 +60,8 @@
             </nav>
             <div class="header-actions">
                 <button class="btn-icon" id="btn-theme" title="Toggle theme">🌙</button>
-                <button class="btn-icon" id="btn-refresh" title="Refresh feeds">🔄</button>
+                <button class="btn-icon" id="btn-refresh"
+                    title="Refresh feeds (Shift+Click = force refresh)">🔄</button>
                 <button class="btn-icon" id="btn-settings" title="Settings">⚙️</button>
                 <button class="btn-icon" id="btn-about" title="About">💚</button>
             </div>
@@ -106,7 +107,7 @@
             <!-- Bookmarks -->
             <section class="sidebar-section">
                 <h3 class="sidebar-title collapsible" data-target="bookmarks-content">
-                    📌 Bookmarks
+                    📌 Bookmarks <span class="bookmark-count" id="bookmark-count"></span>
                     <span class="section-toggle">▼</span>
                 </h3>
                 <div class="section-content" id="bookmarks-content">
@@ -161,6 +162,9 @@
     <!-- Sidebar Toggle (Mobile) -->
     <button class="sidebar-toggle" id="sidebar-toggle" title="Toggle Sidebar">📋</button>
 
+    <!-- Back to Top Button -->
+    <button class="back-to-top" id="back-to-top" title="Back to top" aria-label="Scroll back to top">↑</button>
+
     <!-- Footer -->
     <footer class="footer">
         <p>
@@ -182,6 +186,8 @@
         <kbd>S</kbd> Sidebar
         <span class="divider">•</span>
         <kbd>T</kbd> Theme
+        <span class="divider">•</span>
+        <kbd>↑</kbd> Top
     </div>
 
     <!-- About Modal -->
@@ -287,10 +293,10 @@
                     <input type="checkbox" id="opt-show-descriptions" checked />
                     Show article descriptions
                 </label>
-                <label class="checkbox-label">
+                <div class="number-input-row">
+                    <label for="opt-max-items">Max items per source</label>
                     <input type="number" id="opt-max-items" value="10" min="5" max="100" />
-                    Max items per source
-                </label>
+                </div>
             </section>
         </div>
     </div>

scripts/app.js

@@ -269,10 +269,12 @@ class RSSHubApp {
                 return;
             }
 
-            // Escape to close modals
+            // Escape to close modals and sidebar
             if (e.key === "Escape") {
                 this.elements.modalAbout.classList.remove("active");
                 this.elements.modalSettings.classList.remove("active");
+                // Also close mobile sidebar
+                this.elements.sidebar?.classList.remove("open");
             }
 
             // R to refresh (Shift+R for force refresh)
@@ -311,8 +313,17 @@ class RSSHubApp {
             if (e.key === "t" && !e.ctrlKey && !e.metaKey) {
                 this.toggleTheme();
             }
+
+            // Home or ArrowUp (when not in input) to scroll to top
+            if (e.key === "Home" || (e.key === "ArrowUp" && e.ctrlKey)) {
+                e.preventDefault();
+                this.scrollToTop();
+            }
         });
 
+        // Back to top button
+        this.setupBackToTop();
+
         // Category navigation
         this.elements.navButtons.forEach(btn => {
             btn.addEventListener("click", () => {
@@ -416,6 +427,51 @@ class RSSHubApp {
         );
     }
 
+    /**
+     * Setup Back to Top button behavior
+     */
+    setupBackToTop() {
+        const backToTopBtn = document.getElementById("back-to-top");
+        if (!backToTopBtn) return;
+
+        // Show/hide button based on scroll position
+        let ticking = false;
+        window.addEventListener(
+            "scroll",
+            () => {
+                if (!ticking) {
+                    requestAnimationFrame(() => {
+                        const scrollY = window.scrollY || document.documentElement.scrollTop;
+                        // Show button after scrolling 400px
+                        if (scrollY > 400) {
+                            backToTopBtn.classList.add("visible");
+                        } else {
+                            backToTopBtn.classList.remove("visible");
+                        }
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+            },
+            { passive: true }
+        );
+
+        // Click handler
+        backToTopBtn.addEventListener("click", () => {
+            this.scrollToTop();
+        });
+    }
+
+    /**
+     * Smooth scroll to top of page
+     */
+    scrollToTop() {
+        window.scrollTo({
+            top: 0,
+            behavior: "smooth"
+        });
+    }
+
     /**
      * Set active language filter
      */
@@ -898,30 +954,53 @@ class RSSHubApp {
     }
 
     /**
-     * Add custom feed
+     * Add custom feed with validation
      */
-    addCustomFeed() {
+    async addCustomFeed() {
         const nameInput = document.getElementById("custom-feed-name");
         const urlInput = document.getElementById("custom-feed-url");
         const categorySelect = document.getElementById("custom-feed-category");
+        const addBtn = document.getElementById("btn-add-feed");
 
         const name = nameInput.value.trim();
         const url = urlInput.value.trim();
         const category = categorySelect.value;
 
         if (!name || !url) {
-            alert("Please enter both a name and URL for the feed.");
+            this.showToast("Please enter both name and URL", "error");
             return;
         }
 
-        // Validate URL
+        // Validate URL format
         try {
             new URL(url);
         } catch {
-            alert("Please enter a valid URL.");
+            this.showToast("Please enter a valid URL", "error");
             return;
         }
 
+        // Show loading state
+        const originalText = addBtn.textContent;
+        addBtn.textContent = "Testing...";
+        addBtn.disabled = true;
+
+        // Test if the URL is actually a valid RSS feed
+        try {
+            const result = await this.parser.fetchFeed({ url, name, id: "test" });
+            if (result.status !== "success") {
+                throw new Error(result.error || "Invalid RSS feed");
+            }
+        } catch (e) {
+            addBtn.textContent = originalText;
+            addBtn.disabled = false;
+            this.showToast(`Invalid feed: ${e.message}`, "error");
+            return;
+        }
+
+        // Restore button
+        addBtn.textContent = originalText;
+        addBtn.disabled = false;
+
         // Generate unique ID
         const id = "custom_" + Date.now();
 
@@ -1088,4 +1167,3 @@ document.addEventListener("DOMContentLoaded", () => {
     app = new RSSHubApp();
     window.app = app; // Expose for event handlers
 });
-

scripts/sidebar.js

@@ -86,12 +86,26 @@ class SidebarManager {
             this.handleSearch("");
         });
 
-        // Clear bookmarks
-        this.elements.btnClearBookmarks?.addEventListener("click", () => {
-            if (confirm("Clear all bookmarks?")) {
+        // Clear bookmarks with double-click protection
+        this.elements.btnClearBookmarks?.addEventListener("click", e => {
+            // Use data attribute for confirmation state
+            if (e.target.dataset.confirmClear === "true") {
                 this.bookmarks = [];
                 this.saveBookmarks();
                 this.renderBookmarks();
+                e.target.textContent = "Clear All";
+                e.target.dataset.confirmClear = "false";
+                // Refresh main feed to update bookmark icons
+                if (this.app) this.app.renderFeeds();
+                this.app?.showToast("All bookmarks cleared", "info");
+            } else {
+                e.target.textContent = "Click again to confirm";
+                e.target.dataset.confirmClear = "true";
+                // Reset after 3 seconds
+                setTimeout(() => {
+                    e.target.textContent = "Clear All";
+                    e.target.dataset.confirmClear = "false";
+                }, 3000);
             }
         });
     }
@@ -146,7 +160,8 @@ class SidebarManager {
         }
 
         // Show loading indicator immediately for better UX
-        this.elements.searchResults.innerHTML = '<span class="search-hint">🔍 Searching...</span>';
+        this.elements.searchResults.innerHTML =
+            '<span class="search-hint"><span class="search-spinner"></span> Searching...</span>';
 
         const queryLower = query.toLowerCase();
         const results = this.allArticles
@@ -179,7 +194,8 @@ class SidebarManager {
 
     highlightMatch(text, query) {
         const escaped = this.escapeHtml(text);
-        const regex = new RegExp(`(${this.escapeRegex(query)})`, "gi");
+        const escapedQuery = this.escapeHtml(query);
+        const regex = new RegExp(`(${this.escapeRegex(escapedQuery)})`, "gi");
         return escaped.replace(regex, "<mark>$1</mark>");
     }
 
@@ -237,6 +253,12 @@ class SidebarManager {
     }
 
     renderBookmarks() {
+        // Update bookmark count badge
+        const countBadge = document.getElementById("bookmark-count");
+        if (countBadge) {
+            countBadge.textContent = this.bookmarks.length > 0 ? `(${this.bookmarks.length})` : "";
+        }
+
         if (this.bookmarks.length === 0) {
             this.elements.bookmarksList.innerHTML =
                 '<span class="empty-hint">No bookmarks yet. Click ⭐ on articles to save them.</span>';
@@ -443,9 +465,10 @@ class SidebarManager {
                 const isHot = count >= maxCount * 0.7;
                 return `
                 <button class="trending-tag ${isHot ? "hot" : ""}"
-                        onclick="sidebar.filterByTag('${this.escapeHtml(word)}')">
+                        onclick="sidebar.filterByTag('${this.escapeHtml(word)}')"
+                        aria-label="Filter by ${this.escapeHtml(word)}, ${count} articles">
                     ${word}
-                    <span class="tag-count">${count}</span>
+                    <span class="tag-count" aria-hidden="true">${count}</span>
                 </button>
             `;
             })

styles/main.css

@@ -79,6 +79,9 @@
     --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
     --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
 
+    /* Zebra striping for light theme */
+    --zebra-odd: rgba(0, 0, 0, 0.02);
+
     /* Theme indicator */
     --theme-icon: "☀️";
 }
@@ -103,6 +106,9 @@
         --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
         --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
 
+        /* Zebra striping for light theme */
+        --zebra-odd: rgba(0, 0, 0, 0.02);
+
         --theme-icon: "☀️";
     }
 }
@@ -435,7 +441,7 @@ a:hover {
 
 /* Subtle zebra striping for better visual distinction */
 .article-item-wrapper:nth-child(odd) {
-    background: rgba(255, 255, 255, 0.015);
+    background: var(--zebra-odd, rgba(255, 255, 255, 0.015));
 }
 
 .article-item-wrapper:nth-child(even) {
@@ -814,6 +820,35 @@ a:hover {
     margin-right: 8px;
 }
 
+/* Number input row (for max items) */
+.number-input-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    padding: 8px 0;
+    color: var(--text-secondary);
+}
+
+.number-input-row label {
+    flex: 1;
+}
+
+.number-input-row input[type="number"] {
+    width: 70px;
+    padding: 6px 10px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-sm);
+    color: var(--text-primary);
+    text-align: center;
+}
+
+.number-input-row input[type="number"]:focus {
+    outline: none;
+    border-color: var(--ivy-green);
+}
+
 .hint {
     font-size: 0.8rem;
     color: var(--text-muted);
@@ -896,9 +931,17 @@ a:hover {
 
     .status-bar {
         flex-direction: column;
-        gap: 4px;
+        gap: 8px;
         text-align: center;
     }
+
+    .status-bar .lang-filter {
+        order: -1;
+    }
+
+    .status-bar .status-text {
+        font-size: 0.8rem;
+    }
 }
 
 /* ============================================
@@ -954,6 +997,14 @@ a:hover {
     transition: transform var(--transition-fast);
 }
 
+/* Bookmark count badge */
+.bookmark-count {
+    font-size: 0.75rem;
+    color: var(--ivy-green);
+    font-weight: 600;
+    margin-left: 4px;
+}
+
 .sidebar-title.collapsed .section-toggle {
     transform: rotate(-90deg);
 }
@@ -1069,6 +1120,19 @@ a:hover {
     margin-top: 2px;
 }
 
+/* Search spinner */
+.search-spinner {
+    display: inline-block;
+    width: 12px;
+    height: 12px;
+    border: 2px solid var(--border-color);
+    border-top-color: var(--ivy-green);
+    border-radius: 50%;
+    animation: spin 0.8s linear infinite;
+    margin-right: 6px;
+    vertical-align: middle;
+}
+
 /* === Bookmarks === */
 .bookmarks-list {
     display: flex;
@@ -1379,6 +1443,64 @@ a:hover {
     transform: scale(1.1);
 }
 
+/* === Back to Top Button === */
+.back-to-top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    width: 44px;
+    height: 44px;
+    background: var(--bg-tertiary);
+    border: 1px solid var(--border-color);
+    border-radius: 50%;
+    font-size: 1.2rem;
+    color: var(--text-secondary);
+    cursor: pointer;
+    box-shadow: var(--shadow-md);
+    z-index: 200;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(20px);
+    transition: all var(--transition-normal);
+}
+
+.back-to-top.visible {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.back-to-top:hover {
+    background: var(--ivy-green);
+    border-color: var(--ivy-green);
+    color: #fff;
+    transform: scale(1.1);
+}
+
+.back-to-top:focus {
+    outline: 2px solid var(--ivy-green);
+    outline-offset: 2px;
+}
+
+.back-to-top:focus:not(:focus-visible) {
+    outline: none;
+}
+
+/* Position adjustment when keyboard hint is visible */
+@media (min-width: 901px) {
+    .back-to-top {
+        bottom: 60px; /* Above keyboard hint */
+    }
+}
+
+/* Mobile/Tablet: position to not overlap sidebar toggle */
+@media (max-width: 1100px) {
+    .back-to-top {
+        right: 80px; /* Left of sidebar toggle */
+        bottom: 20px;
+    }
+}
+
 /* === Article Bookmark Button === */
 .article-bookmark {
     width: 32px;