Add DynamicCalendarIcon

app/editor/components/MentionMenu.tsx

@@ -2,7 +2,6 @@ import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
 import { v4 as uuidv4 } from "uuid";
 import {
-  CalendarIcon,
   DocumentIcon,
   PlusIcon,
   NewDocumentIcon,
@@ -18,12 +17,14 @@ import { MentionType } from "@shared/types";
 import {
   dateToReadable,
   dateToRelativeReadable,
+  parseISODate,
   toISODate,
 } from "@shared/utils/date";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { parseNaturalLanguageDate } from "@shared/utils/parseNaturalLanguageDate";
 import { Avatar, AvatarSize, GroupAvatar } from "~/components/Avatar";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
+import { DynamicCalendarIcon } from "@shared/components/DynamicCalendarIcon";
 import Flex from "~/components/Flex";
 import {
   DateSection,
@@ -93,7 +94,11 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       ? [
           {
             name: "mention",
-            icon: <CalendarIcon />,
+            icon: (
+              <DynamicCalendarIcon
+                day={parseISODate(parsedISODate).getDate()}
+              />
+            ),
             title: dateToRelativeReadable(parsedISODate, t, userLocale),
             subtitle: dateToReadable(parsedISODate, userLocale),
             section: DateSection,

shared/components/DynamicCalendarIcon.tsx

@@ -0,0 +1,36 @@
+import { useTheme } from "styled-components";
+
+type Props = { day: number; className?: string };
+
+export function DynamicCalendarIcon({ day, className }: Props) {
+  const theme = useTheme();
+
+  return (
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M10 5.01953C10.3319 5.00624 10.6846 5 11.0596 5H12.9404C13.3154 5 13.6681 5.00624 14 5.01953V4H16V5.24609C18.3996 5.78241 19 7.32118 19 11.0596V12.9404C19 17.9302 17.9302 19 12.9404 19H11.0596C6.06982 19 5 17.9302 5 12.9404V11.0596C5 7.32118 5.60035 5.78241 8 5.24609V4H10V5.01953Z"
+        fill="currentColor"
+      />
+      <text
+        fill="white"
+        fontFamily={theme.fontFamily}
+        fontSize="8"
+        fontWeight="600"
+        textAnchor="middle"
+        dominantBaseline="middle"
+        letterSpacing="0em"
+      >
+        <tspan x="12" y="14">
+          {day}
+        </tspan>
+      </text>
+    </svg>
+  );
+}

shared/editor/components/Mentions.tsx

@@ -1,7 +1,6 @@
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { observer } from "mobx-react";
 import {
-  CalendarIcon,
   DocumentIcon,
   EmailIcon,
   CollectionIcon,
@@ -569,7 +568,6 @@ export const MentionDate = observer(function MentionDate_(props: DateProps) {
       })}
       $editable={isEditable}
     >
-      <CalendarIcon size={18} />
       {display}
     </DateMention>
   );

shared/i18n/locales/en_US/translation.json

@@ -188,6 +188,7 @@
   "Collection": "Collection",
   "Collections": "Collections",
   "Debug": "Debug",
+  "Date": "Date",
   "Document": "Document",
   "Search results": "Search results",
   "Documents": "Documents",
@@ -1781,5 +1782,6 @@
   "Hide completed": "Hide completed",
   "Write a caption": "Write a caption",
   "Add title": "Add title",
-  "Add content": "Add content"
+  "Add content": "Add content",
+  "Tomorrow": "Tomorrow"
 }