feat: Add date/time template options to template titles

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`