chore(highlights_list): start from scratch

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

@@ -0,0 +1,28 @@
+import { t } from "../../services/i18n";
+import { useActiveNoteContext, useIsNoteReadOnly, useNoteProperty } from "../react/hooks";
+import RightPanelWidget from "./RightPanelWidget";
+
+export default function HighlightsList() {
+    const { note, noteContext } = useActiveNoteContext();
+    const noteType = useNoteProperty(note, "type");
+    const { isReadOnly } = useIsNoteReadOnly(note, noteContext);
+
+    return (
+        <RightPanelWidget title={t("highlights_list_2.title")}>
+            {((noteType === "text" && isReadOnly) || (noteType === "doc")) && <ReadOnlyTextHighlightsList />}
+            {noteType === "text" && !isReadOnly && <EditableTextHighlightsList />}
+        </RightPanelWidget>
+    );
+}
+
+//#region Editable text (CKEditor)
+function EditableTextHighlightsList() {
+    return "Editable";
+}
+//#endregion
+
+//#region Read-only text
+function ReadOnlyTextHighlightsList() {
+    return "Read-only";
+}
+//#endregion

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

@@ -7,6 +7,7 @@ import { useEffect } from "preact/hooks";
 import options from "../../services/options";
 import { DEFAULT_GUTTER_SIZE } from "../../services/resizer";
 import { useActiveNoteContext } from "../react/hooks";
+import HighlightsList from "./HighlightsList";
 import TableOfContents from "./TableOfContents";
 
 const MIN_WIDTH_PERCENT = 5;
@@ -29,7 +30,8 @@ export default function RightPanelContainer() {
     return (
         <div id="right-pane">
             {note && <>
-                <TableOfContents note={note} />
+                <TableOfContents />
+                <HighlightsList />
             </>}
         </div>
     );