feat: Add date/time template options to template titles

app/components/PaginatedList.tsx

@@ -11,7 +11,7 @@ import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DelayedMount from "~/components/DelayedMount";
 import PlaceholderList from "~/components/List/Placeholder";
 import withStores from "~/components/withStores";
-import { dateToHeading } from "~/utils/dates";
+import { dateToHeading } from "~/utils/date";
 
 export interface PaginatedItem {
   id: string;

app/menus/TemplatesMenu.tsx

@@ -9,7 +9,9 @@ import Button from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Separator from "~/components/ContextMenu/Separator";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
+import { replaceTitleVariables } from "~/utils/date";
 
 type Props = {
   document: Document;
@@ -20,6 +22,7 @@ function TemplatesMenu({ onSelectTemplate, document }: Props) {
   const menu = useMenuState({
     modal: true,
   });
+  const user = useCurrentUser();
   const { documents } = useStores();
   const { t } = useTranslation();
   const templates = documents.templates;
@@ -43,7 +46,9 @@ function TemplatesMenu({ onSelectTemplate, document }: Props) {
       {...menu}
     >
       <TemplateItem>
-        <strong>{template.titleWithDefault}</strong>
+        <strong>
+          {replaceTitleVariables(template.titleWithDefault, user)}
+        </strong>
         <br />
         <Author>
           {t("By {{ author }}", {
@@ -76,6 +81,9 @@ function TemplatesMenu({ onSelectTemplate, document }: Props) {
 
 const TemplateItem = styled.div`
   text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;
 
 const Author = styled.div`

app/models/Document.ts

@@ -23,10 +23,6 @@ export default class Document extends ParanoidModel {
   constructor(fields: Record<string, any>, store: DocumentsStore) {
     super(fields, store);
 
-    if (this.isPersistedOnce && this.isFromTemplate) {
-      this.title = "";
-    }
-
     this.embedsDisabled = Storage.get(`embedsDisabled-${this.id}`) ?? false;
 
     autorun(() => {

app/scenes/Document/components/Document.tsx

@@ -34,6 +34,7 @@ import withStores from "~/components/withStores";
 import type { Editor as TEditor } from "~/editor";
 import { NavigationNode } from "~/types";
 import { client } from "~/utils/ApiClient";
+import { replaceTitleVariables } from "~/utils/date";
 import { emojiToUrl } from "~/utils/emoji";
 import { isModKey } from "~/utils/keyboard";
 import {
@@ -186,8 +187,12 @@ class DocumentScene extends React.Component<Props> {
     }
 
     if (!this.title) {
-      this.title = template.title;
-      this.props.document.title = template.title;
+      const title = replaceTitleVariables(
+        template.title,
+        this.props.auth.user || undefined
+      );
+      this.title = title;
+      this.props.document.title = title;
     }
 
     this.props.document.text = template.text;

app/utils/date.ts

@@ -6,7 +6,15 @@ import {
   differenceInCalendarYears,
   format as formatDate,
 } from "date-fns";
+import { startCase } from "lodash";
 import { TFunction } from "react-i18next";
+import {
+  getCurrentDateAsString,
+  getCurrentDateTimeAsString,
+  getCurrentTimeAsString,
+  unicodeCLDRtoBCP47,
+} from "@shared/utils/date";
+import User from "~/models/User";
 import { dateLocale } from "~/utils/i18n";
 
 export function dateToHeading(
@@ -62,3 +70,21 @@ export function dateToHeading(
     locale,
   });
 }
+
+/**
+ * Replaces template variables in the given text with the current date and time.
+ *
+ * @param text The text to replace the variables in
+ * @param user The user to get the language/locale from
+ * @returns The text with the variables replaced
+ */
+export function replaceTitleVariables(text: string, user?: User) {
+  const locales = user?.language
+    ? unicodeCLDRtoBCP47(user.language)
+    : undefined;
+
+  return text
+    .replace("{date}", startCase(getCurrentDateAsString(locales)))
+    .replace("{time}", startCase(getCurrentTimeAsString(locales)))
+    .replace("{datetime}", startCase(getCurrentDateTimeAsString(locales)));
+}

app/utils/language.ts

@@ -1,4 +1,5 @@
 import { i18n } from "i18next";
+import { unicodeCLDRtoBCP47 } from "@shared/utils/date";
 import Desktop from "./Desktop";
 
 export function detectLanguage() {
@@ -14,7 +15,7 @@ export function changeLanguage(
   if (toLanguageString && i18n.language !== toLanguageString) {
     // Languages are stored in en_US format in the database, however the
     // frontend translation framework (i18next) expects en-US
-    const locale = toLanguageString.replace("_", "-");
+    const locale = unicodeCLDRtoBCP47(toLanguageString);
     i18n.changeLanguage(locale);
 
     Desktop.bridge?.setSpellCheckerLanguages(["en-US", locale]);