chore(options/text_notes): adapt to new layout sidebar

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

@@ -1,24 +1,28 @@
-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, useTriliumOptionJson } from "../../react/hooks";
-import OptionsSection from "./components/OptionsSection";
-import { formatDateTime, toggleBodyClass } from "../../../services/utils";
-import FormGroup from "../../react/FormGroup";
-import Column from "../../react/Column";
-import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect";
-import { Themes } from "@triliumnext/highlightjs";
-import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight";
 import { normalizeMimeTypeForCKEditor, type OptionNames } from "@triliumnext/commons";
-import { getHtml } from "../../react/RawHtml";
+import { Themes } from "@triliumnext/highlightjs";
 import type { CSSProperties } from "preact/compat";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import { Trans } from "react-i18next";
+
+import { isExperimentalFeatureEnabled } from "../../../services/experimental_features";
+import { t } from "../../../services/i18n";
+import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight";
+import { formatDateTime, toggleBodyClass } from "../../../services/utils";
+import Column from "../../react/Column";
+import FormCheckbox from "../../react/FormCheckbox";
+import FormGroup from "../../react/FormGroup";
+import FormRadioGroup from "../../react/FormRadioGroup";
+import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect";
 import FormText from "../../react/FormText";
 import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
-import CheckboxList from "./components/CheckboxList";
+import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
 import KeyboardShortcut from "../../react/KeyboardShortcut";
-import { Trans } from "react-i18next";
+import { getHtml } from "../../react/RawHtml";
 import AutoReadOnlySize from "./components/AutoReadOnlySize";
+import CheckboxList from "./components/CheckboxList";
+import OptionsSection from "./components/OptionsSection";
+
+const isNewLayout = isExperimentalFeatureEnabled("new-layout");
 
 export default function TextNoteSettings() {
     return (
@@ -32,7 +36,7 @@ export default function TextNoteSettings() {
             <AutoReadOnlySize option="autoReadonlySizeText" label={t("text_auto_read_only_size.label")} />
             <DateTimeFormatOptions />
         </>
-    )
+    );
 }
 
 function FormattingToolbar() {
@@ -65,7 +69,7 @@ function FormattingToolbar() {
                 containerStyle={{ marginInlineStart: "1em" }}
             />
         </OptionsSection>
-    )
+    );
 }
 
 function EditorFeatures() {
@@ -119,7 +123,7 @@ function CodeBlockStyle() {
 
         for (const [ id, theme ] of Object.entries(Themes)) {
             const data: ThemeData = {
-                val: "default:" + id,
+                val: `default:${  id}`,
                 title: theme.name
             };
 
@@ -177,7 +181,7 @@ function CodeBlockStyle() {
 
             <CodeBlockPreview theme={codeBlockTheme} wordWrap={codeBlockWordWrap} />
         </OptionsSection>
-    )
+    );
 }
 
 const SAMPLE_LANGUAGE = normalizeMimeTypeForCKEditor("application/javascript;env=frontend");
@@ -219,9 +223,9 @@ function CodeBlockPreview({ theme, wordWrap }: { theme: string, wordWrap: boolea
     const codeStyle = useMemo<CSSProperties>(() => {
         if (wordWrap) {
             return { whiteSpace: "pre-wrap" };
-        } else {
-            return { whiteSpace: "pre"};
         }
+        return { whiteSpace: "pre"};
+
     }, [ wordWrap ]);
 
     return (
@@ -230,7 +234,7 @@ function CodeBlockPreview({ theme, wordWrap }: { theme: string, wordWrap: boolea
                 <code className="code-sample" style={codeStyle} dangerouslySetInnerHTML={getHtml(code)} />
             </pre>
         </div>
-    )
+    );
 }
 
 interface ThemeData {
@@ -241,7 +245,7 @@ interface ThemeData {
 function TableOfContent() {
     const [ minTocHeadings, setMinTocHeadings ] = useTriliumOption("minTocHeadings");
 
-    return (
+    return (!isNewLayout &&
         <OptionsSection title={t("table_of_contents.title")}>
             <FormText>{t("table_of_contents.description")}</FormText>
 
@@ -257,7 +261,7 @@ function TableOfContent() {
             <FormText>{t("table_of_contents.disable_info")}</FormText>
             <FormText>{t("table_of_contents.shortcut_info")}</FormText>
         </OptionsSection>
-    )
+    );
 }
 
 function HighlightsList() {
@@ -277,13 +281,17 @@ function HighlightsList() {
                 keyProperty="val" titleProperty="title"
                 currentValue={highlightsList} onChange={setHighlightsList}
             />
-            <hr />
 
-            <h5>{t("highlights_list.visibility_title")}</h5>
+            {!isNewLayout && (
-            <FormText>{t("highlights_list.visibility_description")}</FormText>
+                <>
-            <FormText>{t("highlights_list.shortcut_info")}</FormText>
+                    <hr />
+                    <h5>{t("highlights_list.visibility_title")}</h5>
+                    <FormText>{t("highlights_list.visibility_description")}</FormText>
+                    <FormText>{t("highlights_list.shortcut_info")}</FormText>
+                </>
+            )}
         </OptionsSection>
-    )
+    );
 }
 
 function DateTimeFormatOptions() {
@@ -302,19 +310,19 @@ function DateTimeFormatOptions() {
             </FormText>
 
             <div className="row align-items-center">
-              <FormGroup name="custom-date-time-format" className="col-md-6" label={t("custom_date_time_format.format_string")}>
+                <FormGroup name="custom-date-time-format" className="col-md-6" label={t("custom_date_time_format.format_string")}>
-                  <FormTextBox
+                    <FormTextBox
                         placeholder="YYYY-MM-DD HH:mm"
                         currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat}
-                  />
+                    />
-              </FormGroup>
+                </FormGroup>
 
-              <FormGroup name="formatted-date" className="col-md-6" label={t("custom_date_time_format.formatted_time")}>
+                <FormGroup name="formatted-date" className="col-md-6" label={t("custom_date_time_format.formatted_time")}>
-                <div>
+                    <div>
-                    {formatDateTime(new Date(), customDateTimeFormat)}
+                        {formatDateTime(new Date(), customDateTimeFormat)}
-                </div>
+                    </div>
-              </FormGroup>
+                </FormGroup>
             </div>
         </OptionsSection>
-    )
+    );
 }