From 9b21e042ec762b510594476c00fa99ec9e8554f0 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Thu, 18 Dec 2025 16:58:15 +0200
Subject: [PATCH] feat(floating_buttons): handle case when empty

---
 .../src/translations/en/translation.json      |  4 ++
 .../src/widgets/sidebar/HighlightsList.tsx    |  5 +--
 .../widgets/sidebar/RightPanelContainer.css   | 17 +++++++
 .../widgets/sidebar/RightPanelContainer.tsx   | 44 ++++++++++++++-----
 .../src/widgets/sidebar/TableOfContents.tsx   |  2 +-
 5 files changed, 58 insertions(+), 14 deletions(-)

diff --git a/apps/client/src/translations/en/translation.json b/apps/client/src/translations/en/translation.json
index 0f1e12781..c7aeaf50c 100644
--- a/apps/client/src/translations/en/translation.json
+++ b/apps/client/src/translations/en/translation.json
@@ -2196,5 +2196,9 @@
     "note_paths_other": "{{count}} paths",
     "note_paths_title": "Note paths",
     "code_note_switcher": "Change language mode"
+  },
+  "right_pane": {
+    "empty_message": "Nothing to show for this note",
+    "empty_button": "Hide the panel"
   }
 }
diff --git a/apps/client/src/widgets/sidebar/HighlightsList.tsx b/apps/client/src/widgets/sidebar/HighlightsList.tsx
index ed73bac60..fa9919a32 100644
--- a/apps/client/src/widgets/sidebar/HighlightsList.tsx
+++ b/apps/client/src/widgets/sidebar/HighlightsList.tsx
@@ -1,4 +1,3 @@
-import { headingIsHorizontal } from "@excalidraw/excalidraw/element/heading";
 import { CKTextEditor, ModelText } from "@triliumnext/ckeditor5";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
@@ -23,9 +22,9 @@ export default function HighlightsList() {
     const noteType = useNoteProperty(note, "type");
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
 
-    return (
+    return (noteType === "text") && (
         <RightPanelWidget id="highlights" title={t("highlights_list_2.title")}>
-            {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextHighlightsList />}
+            {noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
             {noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
         </RightPanelWidget>
     );
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.css b/apps/client/src/widgets/sidebar/RightPanelContainer.css
index 4153db7c1..443fc35b8 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.css
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.css
@@ -33,4 +33,21 @@ body.experimental-feature-new-layout #right-pane {
     .gutter-vertical + .card .card-header {
         padding-top: 0;
     }
+
+    .no-items {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-grow: 1;
+        flex-direction: column;
+        color: var(--muted-text-color);
+
+        .bx {
+            font-size: 3em;
+        }
+
+        button {
+            margin-top: 1em;
+        }
+    }
 }
diff --git a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
index a12bb447c..83a8d957f 100644
--- a/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
+++ b/apps/client/src/widgets/sidebar/RightPanelContainer.tsx
@@ -2,18 +2,49 @@
 import "./RightPanelContainer.css";
 
 import Split from "@triliumnext/split.js";
-import { createContext } from "preact";
-import { useEffect, useRef } from "preact/hooks";
+import { useEffect } from "preact/hooks";
 
+import { t } from "../../services/i18n";
 import options from "../../services/options";
 import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
-import { clamp } from "../../services/utils";
+import Button from "../react/Button";
+import { useActiveNoteContext, useNoteProperty, useTriliumOptionBool } from "../react/hooks";
+import Icon from "../react/Icon";
 import HighlightsList from "./HighlightsList";
 import TableOfContents from "./TableOfContents";
 
 const MIN_WIDTH_PERCENT = 5;
 
 export default function RightPanelContainer() {
+    useSplit();
+
+    const [ rightPaneVisible, setRightPaneVisible ] = useTriliumOptionBool("rightPaneVisible");
+    const { note } = useActiveNoteContext();
+    const noteType = useNoteProperty(note, "type");
+    const items = [
+        noteType === "text" || noteType === "doc" && <TableOfContents />,
+        noteType === "text" && <HighlightsList />
+    ].filter(Boolean);
+
+    return (
+        <div id="right-pane">
+            {items.length > 0 ? (
+                items
+            ) : (
+                <div className="no-items">
+                    <Icon icon="bx bx-sidebar" />
+                    {t("right_pane.empty_message")}
+                    <Button
+                        text={t("right_pane.empty_button")}
+                        onClick={() => setRightPaneVisible(!rightPaneVisible)}
+                    />
+                </div>
+            )}
+        </div>
+    );
+}
+
+function useSplit() {
     // Split between right pane and the content pane.
     useEffect(() => {
         // We are intentionally omitting useTriliumOption to avoid re-render due to size change.
@@ -27,11 +58,4 @@ export default function RightPanelContainer() {
         });
         return () => splitInstance.destroy();
     }, []);
-
-    return (
-        <div id="right-pane">
-            <TableOfContents />
-            <HighlightsList />
-        </div>
-    );
 }
diff --git a/apps/client/src/widgets/sidebar/TableOfContents.tsx b/apps/client/src/widgets/sidebar/TableOfContents.tsx
index 48c5217e9..bbdde25f8 100644
--- a/apps/client/src/widgets/sidebar/TableOfContents.tsx
+++ b/apps/client/src/widgets/sidebar/TableOfContents.tsx
@@ -25,7 +25,7 @@ export default function TableOfContents() {
     const noteType = useNoteProperty(note, "type");
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
 
-    return (
+    return (noteType === "text" || noteType === "doc") && (
         <RightPanelWidget id="toc" title={t("toc.table_of_contents")}>
             {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextTableOfContents />}
             {noteType === "text" && !isReadOnly && <EditableTextTableOfContents />}