fix(reader,sidebar): persist sidebar search and improve feed-description rendering for Kagi

Author: amatya-aditya

docs/releases/2.2.0-beta.3.md

@@ -20,3 +20,15 @@
 - Full SQLite sync is deferred while background import is active, then executed once at completion
 - Sidebar import-state lookup was optimized to avoid O(N²) queue scans during massive imports
 - Feed rows remain more responsive/clickable during long-running imports
+
+#### Reader Experience
+
+- Improved reader fallback: when full-page extraction is weak/empty, reader now falls back to feed-provided HTML (`content`/`description`)
+- Added Kagi-specific handling (`kite.kagi.com` / `news.kagi.com`) so embedded feed content renders directly in Reader view
+- Added a collapsible **Feed description** callout block in Reader view (expanded by default)
+- Removed the separate top cover image block so reader content starts immediately with article text
+
+#### Sidebar Search Workflow
+
+- Sidebar feed search query now persists across sidebar re-renders
+- After clicking a searched feed/folder, search results remain filtered so you can open matches one by one without retyping

main.ts

@@ -918,7 +918,7 @@ export default class RssDashboardPlugin extends Plugin {
       const iconSpan = this.importStatusBarItem.createSpan({
         cls: "import-statusbar-icon",
       });
-      setIcon(iconSpan, "wifi");
+      setIcon(iconSpan, "rss");
       this.importStatusBarItem.createSpan({
         cls: "import-statusbar-text",
       });

src/components/sidebar.ts

@@ -223,6 +223,7 @@ export class Sidebar {
   private plugin: RssDashboardPlugin;
   private cachedFolderPaths: string[] | null = null;
   private isSearchExpanded = false;
+  private searchQuery = "";
   // Legacy toggle-row state (disabled by design after header toolbar migration).
   // private isSidebarToolbarCollapsed = false;
   private isTagsExpanded = false;
@@ -389,6 +390,7 @@ export class Sidebar {
     // }
     this.renderSearchDock(controlsSurface);
     this.renderFeedFolders();
+    this.applySearchFilterFromState();
 
     requestAnimationFrame(() => {
       this.container.scrollTop = scrollPosition;
@@ -1922,6 +1924,7 @@ export class Sidebar {
         placeholder: "Search feeds...",
         autocomplete: "off",
         spellcheck: "false",
+        value: this.searchQuery,
       },
     });
     const clearButton = searchContainer.createEl("button", {
@@ -1955,9 +1958,9 @@ export class Sidebar {
 
     let searchTimeout: number;
     searchInput.addEventListener("input", (e) => {
-      const query = ((e.target as HTMLInputElement)?.value || "")
-        .toLowerCase()
-        .trim();
+      const rawQuery = (e.target as HTMLInputElement)?.value || "";
+      this.searchQuery = rawQuery;
+      const query = rawQuery.toLowerCase().trim();
       updateClearButtonVisibility();
       if (searchTimeout) {
         window.clearTimeout(searchTimeout);
@@ -1970,6 +1973,7 @@ export class Sidebar {
     clearButton.addEventListener("click", (e) => {
       e.preventDefault();
       searchInput.value = "";
+      this.searchQuery = "";
       updateClearButtonVisibility();
       if (searchTimeout) {
         window.clearTimeout(searchTimeout);
@@ -1980,6 +1984,7 @@ export class Sidebar {
 
     requestAnimationFrame(() => {
       searchInput.focus();
+      updateClearButtonVisibility();
       if (window.innerWidth <= 768) {
         window.setTimeout(() => {
           searchInput.scrollIntoView({ behavior: "smooth", block: "center" });
@@ -2659,6 +2664,13 @@ export class Sidebar {
     }
   }
 
+  private applySearchFilterFromState(): void {
+    const query = this.isSearchExpanded
+      ? this.searchQuery.toLowerCase().trim()
+      : "";
+    this.filterFeedsAndFolders(query);
+  }
+
   /**
    * Clear the search and show all feeds/folders
    */

src/styles/reader.css

@@ -118,6 +118,47 @@
   line-height: 1.6;
   color: var(--text-normal);
 }
+
+.rss-reader-description-callout {
+  margin: 0 0 16px;
+  border: 1px solid var(--background-modifier-border);
+  border-radius: 8px;
+  background: var(--background-secondary);
+  overflow: hidden;
+}
+
+.rss-reader-description-callout > summary {
+  cursor: pointer;
+  list-style: none;
+  padding: 10px 12px;
+  font-weight: 600;
+  color: var(--text-normal);
+  border-bottom: 1px solid transparent;
+}
+
+.rss-reader-description-callout > summary::-webkit-details-marker {
+  display: none;
+}
+
+.rss-reader-description-callout > summary::before {
+  content: "+";
+  display: inline-block;
+  width: 16px;
+  color: var(--text-muted);
+  font-weight: 700;
+}
+
+.rss-reader-description-callout[open] > summary::before {
+  content: "-";
+}
+
+.rss-reader-description-callout[open] > summary {
+  border-bottom-color: var(--background-modifier-border);
+}
+
+.rss-reader-description-body {
+  padding: 12px;
+}
 .rss-reader-article-content img,
 .rss-reader-description img {
   max-width: 100%;

src/views/reader-view.ts

@@ -452,7 +452,10 @@ export class ReaderView extends ItemView {
       }
       await this.displayPodcast(item);
     } else {
-      const fullContent = await this.fetchFullArticleContent(item.link);
+      const fetchedContent = await this.fetchFullArticleContent(item.link);
+      const fullContent = this.hasMeaningfulArticleContent(fetchedContent)
+        ? fetchedContent
+        : item.content || item.description || "";
       this.currentFullContent = fullContent;
       await this.displayArticle(item, fullContent);
     }
@@ -550,7 +553,12 @@ export class ReaderView extends ItemView {
       this.videoPlayer = null;
     }
 
-    if (this.webViewerIntegration) {
+    const shouldUseWebViewer =
+      Boolean(this.settings.useWebViewer) &&
+      Boolean(this.webViewerIntegration) &&
+      !this.shouldBypassWebViewerForFeedContent(item, fullContent);
+
+    if (shouldUseWebViewer && this.webViewerIntegration) {
       try {
         const success = await this.webViewerIntegration.openInWebViewer(
           item.link,
@@ -569,6 +577,27 @@ export class ReaderView extends ItemView {
     this.renderArticle(item, fullContent);
   }
 
+  private shouldBypassWebViewerForFeedContent(
+    item: FeedItem,
+    fullContent?: string,
+  ): boolean {
+    if (!item.link) {
+      return false;
+    }
+
+    const feedHtml = (fullContent || item.content || item.description || "").trim();
+    if (!feedHtml) {
+      return false;
+    }
+
+    try {
+      const host = new URL(item.link).hostname.toLowerCase();
+      return host === "kite.kagi.com" || host === "news.kagi.com";
+    } catch {
+      return false;
+    }
+  }
+
   private renderArticle(item: FeedItem, fullContent?: string): void {
     const headerContainer = this.readingContainer.createDiv({
       cls: "rss-reader-article-header",
@@ -615,42 +644,44 @@ export class ReaderView extends ItemView {
       }
     }
 
-    if (
-      this.settings.display.showCoverImage &&
-      (item.coverImage ||
-        (item.image &&
-          typeof item.image === "object" &&
-          (item.image as { url?: string }).url) ||
-        (typeof item.image === "string" ? item.image : ""))
-    ) {
-      const imageContainer = this.readingContainer.createDiv({
-        cls: "rss-reader-cover-image",
-      });
-      const coverImg = imageContainer.createEl("img", {
-        attr: {
-          src:
-            (item.coverImage ||
-              (item.image &&
-                typeof item.image === "object" &&
-                (item.image as { url?: string }).url) ||
-              (typeof item.image === "string" ? item.image : "")) ??
-            "",
-          alt: item.title,
-        },
+    const descriptionHtml = (item.description || "").trim();
+    const mainHtml = (fullContent || item.content || "").trim();
+
+    if (descriptionHtml) {
+      const descriptionCallout = this.readingContainer.createEl("details", {
+        cls: "rss-reader-description-callout",
       });
-      coverImg.addEventListener("error", function () {
-        this.remove();
+      descriptionCallout.open = true;
+      descriptionCallout.createEl("summary", { text: "Feed description" });
+      const descriptionBody = descriptionCallout.createDiv({
+        cls: "rss-reader-description rss-reader-description-body",
       });
+      this.populateArticleHtml(descriptionBody, descriptionHtml, item.link);
     }
 
-    const contentContainer = this.readingContainer.createDiv({
-      cls: "rss-reader-article-content",
-    });
+    const hasDistinctMainContent =
+      mainHtml && (!descriptionHtml || !this.isEquivalentHtml(mainHtml, descriptionHtml));
 
-    const htmlString = ensureUtf8Meta(fullContent || item.description || "");
+    if (hasDistinctMainContent || !descriptionHtml) {
+      const contentContainer = this.readingContainer.createDiv({
+        cls: "rss-reader-article-content",
+      });
+      const htmlToRender = hasDistinctMainContent
+        ? mainHtml
+        : descriptionHtml || mainHtml;
+      this.populateArticleHtml(contentContainer, htmlToRender, item.link);
+    }
+  }
+
+  private populateArticleHtml(
+    container: HTMLElement,
+    rawHtml: string,
+    baseUrl: string,
+  ): void {
+    const htmlString = ensureUtf8Meta(rawHtml || "");
     const processedHtmlString = this.convertRelativeUrlsInContent(
       htmlString,
-      item.link,
+      baseUrl,
     );
     const parser = new DOMParser();
     const doc = parser.parseFromString(processedHtmlString, "text/html");
@@ -661,7 +692,6 @@ export class ReaderView extends ItemView {
           parent.appendText(node.textContent || "");
         } else if (node.nodeType === Node.ELEMENT_NODE) {
           const element = node as HTMLElement;
-          // Skip icon elements that shouldn't be rendered
           const isIconElement =
             element.tagName === "I" && element.classList.contains("icon-class");
           if (!isIconElement) {
@@ -679,9 +709,9 @@ export class ReaderView extends ItemView {
       });
     }
 
-    appendNodes(contentContainer, doc.body.childNodes);
+    appendNodes(container, doc.body.childNodes);
 
-    contentContainer.querySelectorAll("img").forEach((img) => {
+    container.querySelectorAll("img").forEach((img) => {
       const src = img.getAttribute("src");
       if (src && src.startsWith("app://")) {
         img.setAttribute("src", src.replace("app://", "https://"));
@@ -693,7 +723,7 @@ export class ReaderView extends ItemView {
       });
     });
 
-    contentContainer.querySelectorAll("source").forEach((source) => {
+    container.querySelectorAll("source").forEach((source) => {
       const srcset = source.getAttribute("srcset");
       if (srcset) {
         const processedSrcset = srcset
@@ -721,28 +751,47 @@ export class ReaderView extends ItemView {
       }
     });
 
-    contentContainer.querySelectorAll("a").forEach((link) => {
+    container.querySelectorAll("a").forEach((link) => {
       const href = link.getAttribute("href");
       if (href && href.startsWith("app://")) {
         link.setAttribute("href", href.replace("app://", "https://"));
       }
-    });
-
-    this.app.workspace.trigger("parse-math", contentContainer);
-
-    const links = contentContainer.querySelectorAll("a");
-    links.forEach((link) => {
       link.setAttribute("target", "_blank");
       link.setAttribute("rel", "noopener noreferrer");
     });
 
-    // Apply word highlighting to content if enabled
+    this.app.workspace.trigger("parse-math", container);
+
     if (
       this.settings.highlights?.enabled &&
       this.settings.highlights.highlightInContent
     ) {
       const highlightService = new HighlightService(this.settings.highlights);
-      highlightService.highlightElement(contentContainer);
+      highlightService.highlightElement(container);
+    }
+  }
+
+  private isEquivalentHtml(first: string, second: string): boolean {
+    if (!first || !second) {
+      return false;
+    }
+
+    try {
+      const parser = new DOMParser();
+      const firstDoc = parser.parseFromString(ensureUtf8Meta(first), "text/html");
+      const secondDoc = parser.parseFromString(
+        ensureUtf8Meta(second),
+        "text/html",
+      );
+      const firstText = (firstDoc.body.textContent || "")
+        .replace(/\s+/g, " ")
+        .trim();
+      const secondText = (secondDoc.body.textContent || "")
+        .replace(/\s+/g, " ")
+        .trim();
+      return firstText.length > 0 && firstText === secondText;
+    } catch {
+      return first.trim() === second.trim();
     }
   }
 
@@ -761,6 +810,36 @@ export class ReaderView extends ItemView {
     }
   }
 
+  private hasMeaningfulArticleContent(content: string): boolean {
+    if (!content || !content.trim()) {
+      return false;
+    }
+
+    try {
+      const parser = new DOMParser();
+      const doc = parser.parseFromString(content, "text/html");
+      const body = doc.body;
+      if (!body) {
+        return false;
+      }
+
+      body.querySelectorAll("script, style, noscript").forEach((node) => {
+        node.remove();
+      });
+
+      const text = (body.textContent || "").replace(/\s+/g, " ").trim();
+      if (text.length >= 80) {
+        return true;
+      }
+
+      return Boolean(
+        body.querySelector("p, article, li, blockquote, h1, h2, h3, h4"),
+      );
+    } catch {
+      return content.trim().length >= 80;
+    }
+  }
+
   private convertHtmlToMarkdown(html: string): string {
     return this.turndownService.turndown(html);
   }