feat(react/settings): port date time format

apps/client/src/widgets/react/KeyboardShortcut.tsx

@@ -0,0 +1,33 @@
+import { ActionKeyboardShortcut, KeyboardActionNames } from "@triliumnext/commons";
+import { useEffect, useState } from "preact/hooks";
+import keyboard_actions from "../../services/keyboard_actions";
+
+interface KeyboardShortcutProps {
+    actionName: KeyboardActionNames;
+}
+
+export default function KeyboardShortcut({ actionName }: KeyboardShortcutProps) {
+
+    const [ action, setAction ] = useState<ActionKeyboardShortcut>();
+    useEffect(() => {
+        keyboard_actions.getAction(actionName).then(setAction);
+    }, []);
+
+    if (!action) {
+        return <></>;
+    }
+
+    return (
+        <>
+            {action.effectiveShortcuts?.map((shortcut, i) => {
+                const keys = shortcut.split("+");
+                return keys
+                    .map((key, i) => (
+                        <>
+                            <kbd>{key}</kbd> {i + 1 < keys.length && "+ "}
+                        </>
+                    ))
+            }).reduce<any>((acc, item) => (acc.length ? [...acc, ", ", item] : [item]), [])}
+        </>
+    );
+}

apps/client/src/widgets/react/ReactBasicWidget.tsx

@@ -29,4 +29,4 @@ export function renderReactWidget(parentComponent: Component, el: JSX.Element) {
         </ParentComponent.Provider>
     ), renderContainer);
     return $(renderContainer.children) as JQuery<HTMLElement>;
-}
+}

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

@@ -4,18 +4,20 @@ import FormCheckbox from "../../react/FormCheckbox";
 import FormRadioGroup from "../../react/FormRadioGroup";
 import { useTriliumOption, useTriliumOptionBool, useTriliumOptionJson } from "../../react/hooks";
 import OptionsSection from "./components/OptionsSection";
-import { toggleBodyClass } from "../../../services/utils";
+import { formatDateTime, toggleBodyClass } from "../../../services/utils";
 import FormGroup from "../../react/FormGroup";
 import Column from "../../react/Column";
 import { FormSelectGroup, FormSelectWithGroups } from "../../react/FormSelect";
-import { Themes, type Theme } from "@triliumnext/highlightjs";
+import { Themes } from "@triliumnext/highlightjs";
 import { ensureMimeTypesForHighlighting, loadHighlightingTheme } from "../../../services/syntax_highlight";
 import { normalizeMimeTypeForCKEditor } from "@triliumnext/commons";
 import { getHtml } from "../../react/RawHtml";
 import { CSSProperties } from "preact/compat";
 import FormText from "../../react/FormText";
-import { FormTextBoxWithUnit } from "../../react/FormTextBox";
+import FormTextBox, { FormTextBoxWithUnit } from "../../react/FormTextBox";
 import CheckboxList from "./components/CheckboxList";
+import KeyboardShortcut from "../../react/KeyboardShortcut";
+import { Trans } from "react-i18next";
 
 export default function TextNoteSettings() {
     return (
@@ -27,6 +29,7 @@ export default function TextNoteSettings() {
             <TableOfContent />
             <HighlightsList />
             <AutoReadOnlySize />
+            <DateTimeFormatOptions />
         </>
     )
 }
@@ -299,4 +302,40 @@ function AutoReadOnlySize() {
             </FormGroup>
         </OptionsSection>
     )
+}
+
+function DateTimeFormatOptions() {
+    const [ customDateTimeFormat, setCustomDateTimeFormat ] = useTriliumOption("customDateTimeFormat");
+
+    return (
+        <OptionsSection title={t("custom_date_time_format.title")}>
+            <FormText>
+                <Trans
+                    i18nKey="custom_date_time_format.description"
+                    components={{
+                        shortcut: <KeyboardShortcut actionName="insertDateTimeToText" />,
+                        doc: <a href="https://day.js.org/docs/en/display/format" target="_blank" rel="noopener noreferrer" />
+                    }}
+                />
+            </FormText>
+            
+            <FormGroup className="row align-items-center">
+              <Column>
+                  <label>{t("custom_date_time_format.format_string")}</label>
+                  <FormTextBox
+                        name="custom-date-time-format"
+                        placeholder="YYYY-MM-DD HH:mm"
+                        currentValue={customDateTimeFormat || "YYYY-MM-DD HH:mm"} onChange={setCustomDateTimeFormat}
+                  />
+              </Column>
+
+              <Column>
+                <label>{t("custom_date_time_format.formatted_time")}</label>
+                <div className="formatted-date">
+                    {formatDateTime(new Date(), customDateTimeFormat)}
+                </div>
+              </Column>
+            </FormGroup>
+        </OptionsSection>
+    )
 }

apps/client/src/widgets/type_widgets/options/text_notes/date_time_format.ts

@@ -7,10 +7,7 @@ import linkService from "../../../.././services/link.js";
 
 const TPL = /*html*/`
 <div class="options-section">
-    <h4>${t("custom_date_time_format.title")}</h4>
-
     <p class="description use-tn-links">
-        ${t("custom_date_time_format.description")}
     </p>
 
     <div class="form-group row align-items-center">
@@ -52,7 +49,7 @@ export default class DateTimeFormatOptions extends OptionsWidget {
     }
 
     async optionsLoaded(options: OptionMap) {
-        const action = await keyboardActionsService.getAction("insertDateTimeToText");
+        const action = await keyboardActionsService.getAction("");
         const shortcutKey = (action.effectiveShortcuts ?? []).join(", ");
         const $link = await linkService.createLink("_hidden/_options/_optionsShortcuts", {
             "title": shortcutKey,