feat(right_pane_widget): options modal for highlight list

apps/client/src/translations/en/translation.json

@@ -1723,7 +1723,8 @@
   },
   "highlights_list_2": {
     "title": "Highlights List",
-    "options": "Options"
+    "options": "Options",
+    "modal_title": "Configure Highlights List"
   },
   "quick-search": {
     "placeholder": "Quick search",

apps/client/src/widgets/sidebar/HighlightsList.tsx

@@ -1,8 +1,12 @@
 import { CKTextEditor, ModelText } from "@triliumnext/ckeditor5";
+import { createPortal } from "preact/compat";
 import { useCallback, useEffect, useState } from "preact/hooks";
 
 import { t } from "../../services/i18n";
+import ActionButton from "../react/ActionButton";
 import { useActiveNoteContext, useContentElement, useIsNoteReadOnly, useNoteProperty, useTextEditor } from "../react/hooks";
+import Modal from "../react/Modal";
+import { HighlightsListOptions } from "../type_widgets/options/text_notes";
 import RightPanelWidget from "./RightPanelWidget";
 
 interface RawHighlight {
@@ -21,12 +25,43 @@ export default function HighlightsList() {
     const { note, noteContext } = useActiveNoteContext();
     const noteType = useNoteProperty(note, "type");
     const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
+    const [ shown, setShown ] = useState(false);
 
     return (
-        <RightPanelWidget id="highlights" title={t("highlights_list_2.title")}>
-            {noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
-            {noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
-        </RightPanelWidget>
+        <>
+            <RightPanelWidget
+                id="highlights"
+                title={t("highlights_list_2.title")}
+                buttons={(
+                    <ActionButton
+                        icon="bx bx-cog"
+                        text={t("highlights_list_2.options")}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            setShown(true);
+                        }}
+                    />
+                )}
+            >
+                {noteType === "text" && isReadOnly && <ReadOnlyTextHighlightsList />}
+                {noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
+            </RightPanelWidget>
+            {createPortal(<HighlightListOptionsModal shown={shown} setShown={setShown} />, document.body)}
+        </>
+    );
+}
+
+function HighlightListOptionsModal({ shown, setShown }: { shown: boolean, setShown(value: boolean): void }) {
+    return (
+        <Modal
+            className="highlights-list-options-modal"
+            size="md"
+            title={t("highlights_list_2.modal_title")}
+            show={shown}
+            onHidden={() => setShown(false)}
+        >
+            <HighlightsListOptions />
+        </Modal>
     );
 }
 

apps/client/src/widgets/sidebar/RightPanelContainer.css

@@ -14,6 +14,7 @@ body.experimental-feature-new-layout #right-pane {
 
             .card-header-title {
                 padding-inline: 0.5em;
+                flex-grow: 1;
             }
         }
 

apps/client/src/widgets/type_widgets/options/text_notes.tsx

@@ -265,10 +265,27 @@ function TableOfContent() {
 }
 
 function HighlightsList() {
+    return (
+        <OptionsSection title={t("highlights_list.title")}>
+            <HighlightsListOptions />
+
+            {!isNewLayout && (
+                <>
+                    <hr />
+                    <h5>{t("highlights_list.visibility_title")}</h5>
+                    <FormText>{t("highlights_list.visibility_description")}</FormText>
+                    <FormText>{t("highlights_list.shortcut_info")}</FormText>
+                </>
+            )}
+        </OptionsSection>
+    );
+}
+
+export function HighlightsListOptions() {
     const [ highlightsList, setHighlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
 
     return (
-        <OptionsSection title={t("highlights_list.title")}>
+        <>
             <FormText>{t("highlights_list.description")}</FormText>
             <CheckboxList
                 values={[
@@ -281,16 +298,7 @@ function HighlightsList() {
                 keyProperty="val" titleProperty="title"
                 currentValue={highlightsList} onChange={setHighlightsList}
             />
-
-            {!isNewLayout && (
-                <>
-                    <hr />
-                    <h5>{t("highlights_list.visibility_title")}</h5>
-                    <FormText>{t("highlights_list.visibility_description")}</FormText>
-                    <FormText>{t("highlights_list.shortcut_info")}</FormText>
-                </>
-            )}
-        </OptionsSection>
+        </>
     );
 }