feat: use TimeSelector for protected_session_timeout

to be used in the Password options

src/public/app/widgets/type_widgets/options/password/protected_session_timeout.ts

@@ -0,0 +1,30 @@
+import { t } from "../../../../services/i18n.js";
+import TimeSelector from "../time_selector.js";
+
+const TPL = `
+<div class="options-section">
+    <h4>${t("password.protected_session_timeout")}</h4>
+
+    <p>${t("password.protected_session_timeout_description")} <a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" class="external">${t("password.wiki")}</a> ${t("password.for_more_info")}</p>
+    <div id="time-selector-placeholder"></div>
+</div>`;
+
+// TriliumNextTODO: set minimum value to 60 seconds
+export default class ProtectedSessionTimeoutOption extends TimeSelector {
+    constructor() {
+        super({
+            widgetId: "protected-session-timeout",
+            widgetLabelId: "password.protected_session_timeout_label",
+            optionValueId: "protectedSessionTimeout",
+            optionTimeScaleId: "protectedSessionTimeoutTimeScale"
+        });
+        super.doRender();
+    }
+
+    doRender() {
+        const $timeSelector = this.$widget;
+        // inject TimeSelector widget template
+        this.$widget = $(TPL);
+        this.$widget.find("#time-selector-placeholder").replaceWith($timeSelector)
+    }
+}