From 5da0053f6a47a28d13848936047f109a250cdce2 Mon Sep 17 00:00:00 2001
From: iamvann <sovannsean9@gmail.com>
Date: Fri, 16 May 2025 22:42:08 +0800
Subject: [PATCH] options (setting) feature: add UI for cutom date time format
 (Alt+t) under options/Text Notes

---
 .../widgets/type_widgets/content_widget.js    |  2 +
 .../options/text_notes/date_time_format.js    | 74 +++++++++++++++++++
 2 files changed, 76 insertions(+)
 create mode 100644 src/public/app/widgets/type_widgets/options/text_notes/date_time_format.js

diff --git a/src/public/app/widgets/type_widgets/content_widget.js b/src/public/app/widgets/type_widgets/content_widget.js
index fe7f105af..aaa33470f 100644
--- a/src/public/app/widgets/type_widgets/content_widget.js
+++ b/src/public/app/widgets/type_widgets/content_widget.js
@@ -8,6 +8,7 @@ import KeyboardShortcutsOptions from "./options/shortcuts.js";
 import HeadingStyleOptions from "./options/text_notes/heading_style.js";
 import TableOfContentsOptions from "./options/text_notes/table_of_contents.js";
 import HighlightsListOptions from "./options/text_notes/highlights_list.js";
+import DateTimeFormatOptions from "./options/text_notes/date_time_format.js";
 import TextAutoReadOnlySizeOptions from "./options/text_notes/text_auto_read_only_size.js";
 import VimKeyBindingsOptions from "./options/code_notes/vim_key_bindings.js";
 import WrapLinesOptions from "./options/code_notes/wrap_lines.js";
@@ -66,6 +67,7 @@ const CONTENT_WIDGETS = {
         HeadingStyleOptions,
         TableOfContentsOptions,
         HighlightsListOptions,
+        DateTimeFormatOptions,
         TextAutoReadOnlySizeOptions
     ],
     _optionsCodeNotes: [
diff --git a/src/public/app/widgets/type_widgets/options/text_notes/date_time_format.js b/src/public/app/widgets/type_widgets/options/text_notes/date_time_format.js
new file mode 100644
index 000000000..5bf427778
--- /dev/null
+++ b/src/public/app/widgets/type_widgets/options/text_notes/date_time_format.js
@@ -0,0 +1,74 @@
+import OptionsWidget from "../options_widget.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>Custom Date/Time Format (Alt+T)</h4>
+
+    <p>
+        Define a custom format for the date and time inserted using the Alt+T shortcut.
+        Uses <a href="https://day.js.org/docs/en/display/format" target="_blank" rel="noopener noreferrer">Day.js format tokens</a>.
+        Refer to the Day.js documentation for valid tokens.
+    </p>
+    <p>
+        <strong>Important:</strong> If you provide a string that Day.js cannot interpret as a format,
+        the literal string you typed might be inserted. If the format string is empty, or if Day.js
+        encounters an internal error with your format, a default format (e.g., YYYY-MM-DD HH:mm) will be used.
+    </p>
+
+    <div class="form-group">
+        <label for="customDateTimeFormatInput" style="margin-right: 10px;">Format String:</label>
+        <input type="text" id="customDateTimeFormatInput" class="form-control custom-datetime-format-input" placeholder="e.g., DD/MM/YYYY HH:mm:ss or dddd, MMMM D" style="width: 300px; display: inline-block;">
+    </div>
+    <p style="margin-top: 5px;">
+        <em>Examples of valid Day.js formats:</em>
+        <code>YYYY-MM-DD HH:mm</code> (Default-like),
+        <code>DD.MM.YYYY</code>,
+        <code>MMMM D, YYYY h:mm A</code>,
+        <code>[Today is] dddd</code>
+    </p>
+</div>
+`;
+
+export default class DateTimeFormatOptions extends OptionsWidget {
+    doRender() {
+        this.$widget = $(TPL);
+        this.$formatInput = this.$widget.find(
+            "input.custom-datetime-format-input"
+        );
+
+        //listen to input
+        this.$formatInput.on("input", () => {
+            const formatString = this.$formatInput.val();
+            
+            this.updateOption("customDateTimeFormatString", formatString); 
+        });
+
+        return this.$widget; //render method to return the widget
+    }
+
+    async optionsLoaded(options) {
+        //todo: update the key in updateOption
+        const currentFormat = options.customDateTimeFormatString || "";
+
+        
+        if (this.$formatInput) {
+            this.$formatInput.val(currentFormat);
+        } else {
+
+            console.warn(
+                "DateTimeFormatOptions: $formatInput not initialized when optionsLoaded was called. Attempting to find again."
+            );
+            const inputField = this.$widget.find(
+                "input.custom-datetime-format-input"
+            );
+            if (inputField.length) {
+                this.$formatInput = inputField;
+                this.$formatInput.val(currentFormat);
+            } else {
+                console.error(
+                    "DateTimeFormatOptions: Could not find format input field in optionsLoaded."
+                );
+            }
+        }
+    }
+}