From fad6414e1da671c700d9dff7af5bf45d8774c2d3 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Fri, 19 Dec 2025 23:29:52 +0200
Subject: [PATCH] feat(right_pane_widget): handle zero highlights

---
 .../src/translations/en/translation.json      |  3 +-
 .../src/widgets/sidebar/HighlightsList.tsx    | 33 +++++++++++--------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 903cdc8b6..fc3bd5879 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -1724,7 +1724,8 @@
   "highlights_list_2": {
     "title": "Highlights List",
     "options": "Options",
-    "modal_title": "Configure Highlights List"
+    "modal_title": "Configure Highlights List",
+    "no_highlights": "No highlights found."
   },
   "quick-search": {
     "placeholder": "Quick search",
diff --git a/apps/client/src/widgets/sidebar/HighlightsList.tsx b/apps/client/src/widgets/sidebar/HighlightsList.tsx
index ed00d47dd..7c3605361 100644
--- a/apps/client/src/widgets/sidebar/HighlightsList.tsx
+++ b/apps/client/src/widgets/sidebar/HighlightsList.tsx
@@ -71,22 +71,22 @@ function AbstractHighlightsList<T extends RawHighlight>({ highlights, scrollToHi
 }) {
     const [ highlightsList ] = useTriliumOptionJson<["bold" | "italic" | "underline" | "color" | "bgColor"]>("highlightsList");
     const highlightsListSet = new Set(highlightsList || []);
+    const filteredHighlights = highlights.filter(highlight => {
+        const { attrs } = highlight;
+        return (
+            (highlightsListSet.has("bold") && attrs.bold) ||
+            (highlightsListSet.has("italic") && attrs.italic) ||
+            (highlightsListSet.has("underline") && attrs.underline) ||
+            (highlightsListSet.has("color") && !!attrs.color) ||
+            (highlightsListSet.has("bgColor") && !!attrs.background)
+        );
+    });
 
     return (
         <span className="highlights-list">
-            <ol>
-                {highlights
-                    .filter(highlight => {
-                        const { attrs } = highlight;
-                        return (
-                            (highlightsListSet.has("bold") && attrs.bold) ||
-                            (highlightsListSet.has("italic") && attrs.italic) ||
-                            (highlightsListSet.has("underline") && attrs.underline) ||
-                            (highlightsListSet.has("color") && !!attrs.color) ||
-                            (highlightsListSet.has("bgColor") && !!attrs.background)
-                        );
-                    })
-                    .map(highlight => (
+            {filteredHighlights.length > 0 ? (
+                <ol>
+                    {filteredHighlights.map(highlight => (
                         <li
                             key={highlight.id}
                             onClick={() => scrollToHighlight(highlight)}
@@ -102,7 +102,12 @@ function AbstractHighlightsList<T extends RawHighlight>({ highlights, scrollToHi
                             >{highlight.text}</span>
                         </li>
                     ))}
-            </ol>
+                </ol>
+            ) : (
+                <div className="no-highlights">
+                    {t("highlights_list_2.no_highlights")}
+                </div>
+            )}
         </span>
     );
 }