From 4ef6169041b1e934a17493aa399de60aaad8ae32 Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Mon, 18 Aug 2025 12:11:29 +0300
Subject: [PATCH] feat(react/settings): port highlight list settings

---
 .../options/components/CheckboxList.tsx       |  2 -
 .../type_widgets/options/text_notes.tsx       | 30 +++++++++-
 .../options/text_notes/highlights_list.ts     | 56 -------------------
 3 files changed, 29 insertions(+), 59 deletions(-)
 delete mode 100644 apps/client/src/widgets/type_widgets/options/text_notes/highlights_list.ts

diff --git a/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx b/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
index fedfe1d86..66b17dd48 100644
--- a/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
+++ b/apps/client/src/widgets/type_widgets/options/components/CheckboxList.tsx
@@ -1,5 +1,3 @@
-import { useEffect, useState } from "preact/hooks";
-
 interface CheckboxListProps<T> {
     values: T[];
     keyProperty: keyof T;
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes.tsx b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
index 49f39e6de..9f63315b8 100644
--- a/apps/client/src/widgets/type_widgets/options/text_notes.tsx
+++ b/apps/client/src/widgets/type_widgets/options/text_notes.tsx
@@ -2,7 +2,7 @@ import { useEffect, useMemo, useState } from "preact/hooks";
 import { t } from "../../../services/i18n";
 import FormCheckbox from "../../react/FormCheckbox";
 import FormRadioGroup from "../../react/FormRadioGroup";
-import { useTriliumOption, useTriliumOptionBool } from "../../react/hooks";
+import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
 import { toggleBodyClass } from "../../../services/utils";
 import FormGroup from "../../react/FormGroup";
@@ -15,6 +15,7 @@ import { getHtml } from "../../react/RawHtml";
 import { CSSProperties } from "preact/compat";
 import FormText from "../../react/FormText";
 import { FormTextBoxWithUnit } from "../../react/FormTextBox";
+import CheckboxList from "./components/CheckboxList";
 
 export default function TextNoteSettings() {
     return (
@@ -24,6 +25,7 @@ export default function TextNoteSettings() {
             <HeadingStyle />
             <CodeBlockStyle />
             <TableOfContent />
+            <HighlightsList />
         </>
     )
 }
@@ -251,4 +253,30 @@ function TableOfContent() {
             <FormText>{t("table_of_contents.shortcut_info")}</FormText>
         </OptionsSection>
     )
+}
+
+function HighlightsList() {
+    const [ highlightsList, setHighlightsList ] = useTriliumOptionJson<string[]>("highlightsList");
+
+    return (
+        <OptionsSection title={t("highlights_list.title")}>
+            <FormText>{t("highlights_list.description")}</FormText>
+            <CheckboxList
+                values={[
+                    { val: "bold", title: t("highlights_list.bold") },
+                    { val: "italic", title: t("highlights_list.italic") },
+                    { val: "underline", title: t("highlights_list.underline") },
+                    { val: "color", title: t("highlights_list.color") },
+                    { val: "bgColor", title: t("highlights_list.bg_color") }
+                ]}
+                keyProperty="val" titleProperty="title"
+                currentValue={highlightsList} onChange={setHighlightsList}
+            />
+            <hr />
+
+            <h5>{t("highlights_list.visibility_title")}</h5>
+            <FormText>{t("highlights_list.visibility_description")}</FormText>
+            <FormText>{t("highlights_list.shortcut_info")}</FormText>
+        </OptionsSection>
+    )
 }
\ No newline at end of file
diff --git a/apps/client/src/widgets/type_widgets/options/text_notes/highlights_list.ts b/apps/client/src/widgets/type_widgets/options/text_notes/highlights_list.ts
deleted file mode 100644
index b54bd635a..000000000
--- a/apps/client/src/widgets/type_widgets/options/text_notes/highlights_list.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import OptionsWidget from "../options_widget.js";
-import { t } from "../../../../services/i18n.js";
-import type { OptionMap } from "@triliumnext/commons";
-
-const TPL = /*html*/`
-<div class="options-section">
-    <h4>${t("highlights_list.title")}</h4>
-
-    <p>${t("highlights_list.description")}</p>
-
-    <div>
-        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bold"> ${t("highlights_list.bold")}</label>
-        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="italic"> ${t("highlights_list.italic")}</label>
-        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="underline"> ${t("highlights_list.underline")}</label>
-        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="color"> ${t("highlights_list.color")}</label>
-        <label class="tn-checkbox"><input type="checkbox" class="highlights-list-check form-check-input" value="bgColor"> ${t("highlights_list.bg_color")}</label>
-    </div>
-
-    <hr />
-
-    <h5>${t("highlights_list.visibility_title")}</h5>
-
-    <p class="form-text">${t("highlights_list.visibility_description")}</p>
-
-    <p class="form-text">${t("highlights_list.shortcut_info")}</p>
-</div>`;
-
-export default class HighlightsListOptions extends OptionsWidget {
-
-    private $hlt!: JQuery<HTMLInputElement>;
-
-    doRender() {
-        this.$widget = $(TPL);
-        this.$hlt = this.$widget.find("input.highlights-list-check");
-        this.$hlt.on("change", () => {
-            const hltVals = this.$widget
-                .find('input.highlights-list-check[type="checkbox"]:checked')
-                .map(function () {
-                    return (this as HTMLInputElement).value;
-                })
-                .get();
-            this.updateOption("highlightsList", JSON.stringify(hltVals));
-        });
-    }
-
-    async optionsLoaded(options: OptionMap) {
-        const hltVals = JSON.parse(options.highlightsList);
-        this.$widget.find('input.highlights-list-check[type="checkbox"]').each(function () {
-            if ($.inArray($(this).val(), hltVals) !== -1) {
-                $(this).prop("checked", true);
-            } else {
-                $(this).prop("checked", false);
-            }
-        });
-    }
-}