feat(floating_buttons): handle case when empty

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"
   }
 }

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>
     );

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;
+        }
+    }
 }

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 } from "preact/hooks";
-import { useEffect, useRef } 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>
-    );
 }

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 />}