bug fixes (#2250)

* util

* fix page position collation

* support fixed toolbar in templates editor

* date localization

* fix clipped emoji in templates editor

* fix page updated time object

* fix flickers

* fix: remove redundant breadcrumb from destination modal

apps/client/public/locales/en-US/translation.json

@@ -424,6 +424,7 @@
   "Names do not match": "Names do not match",
   "Today, {{time}}": "Today, {{time}}",
   "Yesterday, {{time}}": "Yesterday, {{time}}",
+  "now": "now",
   "Space created successfully": "Space created successfully",
   "Space updated successfully": "Space updated successfully",
   "Space deleted successfully": "Space deleted successfully",

apps/client/src/components/ui/destination-picker/destination-picker-modal.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from "react";
-import { Modal, Button, Group } from "@mantine/core";
+import { Modal, Button, Group, Divider } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { DestinationPicker } from "./destination-picker";
 import {
@@ -52,7 +52,9 @@ export function DestinationPickerModal({
             searchSpacesOnly={searchSpacesOnly}
           />
 
-          <Group justify="flex-end" mt="md">
+          <Divider my="md" />
+
+          <Group justify="flex-end">
             <Button variant="default" onClick={onClose}>
               {t("Close")}
             </Button>

apps/client/src/components/ui/destination-picker/destination-picker.module.css

@@ -89,14 +89,6 @@
     }
 }
 
-.selectedIndicator {
-    padding: 8px 12px;
-    font-size: var(--mantine-font-size-sm);
-    color: light-dark(var(--mantine-color-gray-6), var(--mantine-color-dark-2));
-    border-top: 1px solid light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-4));
-    margin-top: var(--mantine-spacing-xs);
-}
-
 .emptyState {
     padding: 12px;
     text-align: center;

apps/client/src/components/ui/destination-picker/destination-picker.tsx

@@ -221,14 +221,6 @@ export function DestinationPicker({
           ))
         )}
       </ScrollArea>
-
-      {selection && (
-        <div className={classes.selectedIndicator}>
-          {selection.type === "space"
-            ? selection.space.name
-            : `${selection.space.name} / ${selection.page.title || t("Untitled")}`}
-        </div>
-      )}
     </>
   );
 }

apps/client/src/ee/api-key/components/api-key-table.tsx

@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
 import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
-import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { IApiKey } from "@/ee/api-key";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import NoTableResults from "@/components/common/no-table-results";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 interface ApiKeyTableProps {
   apiKeys: IApiKey[];
@@ -23,10 +23,11 @@ export function ApiKeyTable({
   onRevoke,
 }: ApiKeyTableProps) {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
 
   const formatDate = (date: Date | string | null) => {
     if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
+    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
   };
 
   const isExpired = (expiresAt: string | null) => {

apps/client/src/ee/api-key/components/create-api-key-modal.tsx

@@ -31,7 +31,7 @@ export function CreateApiKeyModal({
   onClose,
   onSuccess,
 }: CreateApiKeyModalProps) {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
   const [expirationOption, setExpirationOption] = useState<string>("30");
   const createApiKeyMutation = useCreateApiKeyMutation();
 
@@ -59,7 +59,7 @@ export function CreateApiKeyModal({
   const getExpirationLabel = (days: number) => {
     const date = new Date();
     date.setDate(date.getDate() + days);
-    const formatted = date.toLocaleDateString("en-US", {
+    const formatted = date.toLocaleDateString(i18n.language, {
       month: "short",
       day: "2-digit",
       year: "numeric",

apps/client/src/ee/billing/components/billing-details.tsx

@@ -4,12 +4,13 @@ import {
 } from "@/ee/billing/queries/billing-query.ts";
 import { Group, Text, SimpleGrid, Paper } from "@mantine/core";
 import classes from "./billing.module.css";
-import { format } from "date-fns";
 import { formatInterval } from "@/ee/billing/utils.ts";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 export default function BillingDetails() {
   const { data: billing } = useBillingQuery();
   const { data: plans } = useBillingPlans();
+  const locale = useDateFnsLocale();
 
   if (!billing || !plans) {
     return null;
@@ -75,7 +76,12 @@ export default function BillingDetails() {
                   : "Renewal date"}
               </Text>
               <Text fw={700} fz="lg">
-                {format(billing.periodEndAt, "dd MMM, yyyy")}
+                {formatLocalized(
+                  billing.periodEndAt,
+                  "dd MMM, yyyy",
+                  "PP",
+                  locale,
+                )}
               </Text>
             </div>
           </Group>

apps/client/src/ee/licence/components/license-details.tsx

@@ -1,13 +1,14 @@
 import { Badge, Table } from "@mantine/core";
-import { format } from "date-fns";
 import { useLicenseInfo } from "@/ee/licence/queries/license-query.ts";
 import { isLicenseExpired } from "@/ee/licence/license.utils.ts";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 export default function LicenseDetails() {
   const { data: license, isError } = useLicenseInfo();
   const [workspace] = useAtom(workspaceAtom);
+  const locale = useDateFnsLocale();
 
   if (!license) {
     return null;
@@ -50,12 +51,16 @@ export default function LicenseDetails() {
 
           <Table.Tr>
             <Table.Th>Issued at</Table.Th>
-            <Table.Td>{format(license.issuedAt, "dd MMMM, yyyy")}</Table.Td>
+            <Table.Td>
+              {formatLocalized(license.issuedAt, "dd MMMM, yyyy", "PPP", locale)}
+            </Table.Td>
           </Table.Tr>
 
           <Table.Tr>
             <Table.Th>Expires at</Table.Th>
-            <Table.Td>{format(license.expiresAt, "dd MMMM, yyyy")}</Table.Td>
+            <Table.Td>
+              {formatLocalized(license.expiresAt, "dd MMMM, yyyy", "PPP", locale)}
+            </Table.Td>
           </Table.Tr>
           <Table.Tr>
             <Table.Th>License ID</Table.Th>

apps/client/src/ee/page-verification/components/expiration-fields.tsx

@@ -1,6 +1,7 @@
 import { Group, NumberInput, Select, Text } from "@mantine/core";
 import { DateInput } from "@mantine/dates";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
 import {
   ExpirationMode,
   PeriodUnit,
@@ -30,7 +31,7 @@ export function addDays(days: number, from?: Date): Date {
 
 function formatShortDate(date: Date): string {
   const crossesYear = date.getFullYear() !== new Date().getFullYear();
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(i18n.language, {
     month: "short",
     day: "numeric",
     ...(crossesYear && { year: "numeric" }),
@@ -38,7 +39,7 @@ function formatShortDate(date: Date): string {
 }
 
 function formatLongDate(date: Date): string {
-  return date.toLocaleDateString(undefined, {
+  return date.toLocaleDateString(i18n.language, {
     month: "long",
     day: "numeric",
     year: "numeric",

apps/client/src/ee/page-verification/components/manage-verification-form.tsx

@@ -12,6 +12,7 @@ import {
 } from "@mantine/core";
 import { modals } from "@mantine/modals";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
 import {
   useMarkObsoleteMutation,
   usePageVerificationInfoQuery,
@@ -197,11 +198,14 @@ function ExpiringManageContent({ pageId, info, onClose }: ManageContentProps) {
             {info.expiresAt && (
               <Text size="xs" c="dimmed">
                 {t(status === "expired" ? "Expired {{date}}" : "Expires {{date}}", {
-                  date: new Date(info.expiresAt).toLocaleDateString(undefined, {
+                  date: new Date(info.expiresAt).toLocaleDateString(
-                    month: "long",
+                    i18n.language,
-                    day: "numeric",
+                    {
-                    year: "numeric",
+                      month: "long",
-                  }),
+                      day: "numeric",
+                      year: "numeric",
+                    },
+                  ),
                 })}
               </Text>
             )}

apps/client/src/ee/page-verification/components/page-verification-modal.tsx

@@ -13,6 +13,7 @@ import {
   IconShieldCheck,
 } from "@tabler/icons-react";
 import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
 import { useParams } from "react-router-dom";
 import { extractPageSlugId } from "@/lib";
 import { usePageQuery } from "@/features/page/queries/page-query";
@@ -127,7 +128,7 @@ export function PageVerificationBadge({
     status === "verified" && verificationInfo?.expiresAt
       ? t("Verified until {{date}}", {
           date: new Date(verificationInfo.expiresAt).toLocaleDateString(
-            undefined,
+            i18n.language,
             { month: "long", day: "numeric", year: "numeric" },
           ),
         })

apps/client/src/ee/page-verification/components/verification-list-table.tsx

@@ -16,9 +16,10 @@ import {
 } from "@/ee/page-verification/types/page-verification.types";
 import { CustomAvatar } from "@/components/ui/custom-avatar";
 import { buildPageUrl } from "@/features/page/page.utils";
-import { format } from "date-fns";
 import NoTableResults from "@/components/common/no-table-results";
 import rowClasses from "@/components/ui/clickable-table-row.module.css";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
+import type { Locale } from "date-fns";
 
 const MAX_VISIBLE_VERIFIERS = 5;
 
@@ -48,7 +49,11 @@ function statusBadge(status: VerificationStatus | null, t: (s: string) => string
   }
 }
 
-function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string): string {
+function verifiedUntilText(
+  item: IVerificationListItem,
+  t: (s: string) => string,
+  locale: Locale,
+): string {
   if (item.type === "qms") {
     if (item.status === "approved") return t("Indefinitely");
     return "—";
@@ -60,7 +65,7 @@ function verifiedUntilText(item: IVerificationListItem, t: (s: string) => string
   const now = new Date();
 
   if (expires <= now) return t("Expired");
-  return format(expires, "MMM d, yyyy");
+  return formatLocalized(expires, "MMM d, yyyy", "PP", locale);
 }
 
 function TableSkeleton() {
@@ -98,6 +103,7 @@ export default function VerificationListTable({
   isLoading,
 }: VerificationListTableProps) {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
 
   return (
     <Table.ScrollContainer minWidth={600}>
@@ -200,7 +206,7 @@ export default function VerificationListTable({
 
                   <Table.Td>
                     <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                      {verifiedUntilText(item, t)}
+                      {verifiedUntilText(item, t, locale)}
                     </Text>
                   </Table.Td>
 

apps/client/src/ee/scim/components/scim-token-table.tsx

@@ -1,11 +1,11 @@
 import { ActionIcon, Group, Menu, Table, Text } from "@mantine/core";
 import { IconDots, IconEdit, IconTrash } from "@tabler/icons-react";
-import { format } from "date-fns";
 import { useTranslation } from "react-i18next";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import React from "react";
 import NoTableResults from "@/components/common/no-table-results";
 import { IScimToken } from "@/ee/scim/types/scim-token.types";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 
 interface ScimTokenTableProps {
   tokens: IScimToken[];
@@ -21,10 +21,11 @@ export function ScimTokenTable({
   onRevoke,
 }: ScimTokenTableProps) {
   const { t } = useTranslation();
+  const locale = useDateFnsLocale();
 
   const formatDate = (date: Date | string | null) => {
     if (!date) return t("Never");
-    return format(new Date(date), "MMM dd, yyyy");
+    return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
   };
 
   return (

apps/client/src/ee/template/pages/template-editor.module.css

@@ -32,6 +32,12 @@
     margin-bottom: 0.25em;
 }
 
+/* The emoji glyph renders larger than its font-size box; let the transparent
+   ActionIcon overflow so it isn't clipped on the edges. */
+.emojiButton button {
+    overflow: visible;
+}
+
 .titleInput {
     font-size: 2.5rem;
     font-weight: 700;

apps/client/src/ee/template/pages/template-editor.tsx

@@ -32,6 +32,12 @@ import {
 } from "../queries/template-query";
 import { useGetSpacesQuery } from "@/features/space/queries/space-query";
 import useUserRole from "@/hooks/use-user-role";
+import { useAtomValue } from "jotai";
+import { userAtom } from "@/features/user/atoms/current-user-atom";
+import { FixedToolbar } from "@/features/editor/components/fixed-toolbar/fixed-toolbar";
+import { EditorLinkMenu } from "@/features/editor/components/link/link-menu";
+import { EditorBubbleMenu } from "@/features/editor/components/bubble-menu/bubble-menu";
+import { EditorAiMenu } from "@/ee/ai/components/editor/ai-menu/ai-menu";
 
 import classes from "./template-editor.module.css";
 
@@ -39,6 +45,9 @@ export default function TemplateEditor() {
   const { t } = useTranslation();
   const { templateId } = useParams<{ templateId: string }>();
   const { isAdmin: isWorkspaceAdmin } = useUserRole();
+  const user = useAtomValue(userAtom);
+  const editorToolbarEnabled =
+    user?.settings?.preferences?.editorToolbar ?? false;
 
   const { data: existingTemplate } = useGetTemplateByIdQuery(templateId || "");
   const { data: spaces } = useGetSpacesQuery({ limit: 100 });
@@ -238,6 +247,10 @@ export default function TemplateEditor() {
         </title>
       </Helmet>
 
+      {editorToolbarEnabled && editor && (
+        <FixedToolbar editor={editor} templateMode />
+      )}
+
       <div className={classes.header}>
         <Container size={900} h="100%" px={0}>
         <Group justify="space-between" h="100%" wrap="nowrap">
@@ -379,6 +392,13 @@ export default function TemplateEditor() {
           )}
         </div>
         <EditorContent editor={editor} />
+        {editor && (
+          <>
+            <EditorAiMenu editor={editor} />
+            <EditorBubbleMenu editor={editor} templateMode />
+            <EditorLinkMenu editor={editor} />
+          </>
+        )}
         <div style={{ paddingBottom: "20vh" }} />
       </Container>
     </>

apps/client/src/ee/template/queries/template-query.ts

@@ -5,6 +5,7 @@ import {
   useQueryClient,
   UseQueryResult,
   InfiniteData,
+  keepPreviousData,
 } from "@tanstack/react-query";
 import { useAtom, useStore } from "jotai";
 import {
@@ -35,6 +36,7 @@ export function useGetTemplatesQuery(params?: { spaceId?: string }) {
     initialPageParam: undefined as string | undefined,
     getNextPageParam: (lastPage) =>
       lastPage.meta.hasNextPage ? lastPage.meta.nextCursor : undefined,
+    placeholderData: keepPreviousData,
   });
 }
 

apps/client/src/features/editor/components/bubble-menu/bubble-menu.tsx

@@ -38,9 +38,11 @@ export interface BubbleMenuItem {
 
 type EditorBubbleMenuProps = Omit<BubbleMenuProps, "children" | "editor"> & {
   editor: Editor | null;
+  templateMode?: boolean;
 };
 
 export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
+  const { templateMode = false } = props;
   const { t } = useTranslation();
   const [showAiMenu, setShowAiMenu] = useAtom(showAiMenuAtom);
   const [showCommentPopup, setShowCommentPopup] = useAtom(showCommentPopupAtom);
@@ -232,8 +234,6 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
               ))}
             </ActionIcon.Group>
 
-            <LinkSelector />
-
             <ColorSelector
               editor={props.editor}
               isOpen={isColorSelectorOpen}
@@ -246,18 +246,22 @@ export const EditorBubbleMenu: FC<EditorBubbleMenuProps> = (props) => {
           </>
         )}
 
-        <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
+        <LinkSelector />
-          <ActionIcon
+
-            variant="default"
+        {!templateMode && (
-            size="lg"
+          <Tooltip label={t(commentItem.name)} withArrow withinPortal={false}>
-            radius="6px"
+            <ActionIcon
-            aria-label={t(commentItem.name)}
+              variant="default"
-            style={{ border: "none" }}
+              size="lg"
-            onClick={commentItem.command}
+              radius="6px"
-          >
+              aria-label={t(commentItem.name)}
-            <IconMessage size={16} stroke={2} />
+              style={{ border: "none" }}
-          </ActionIcon>
+              onClick={commentItem.command}
-        </Tooltip>
+            >
+              <IconMessage size={16} stroke={2} />
+            </ActionIcon>
+          </Tooltip>
+        )}
       </div>
     </BubbleMenu>
   );

apps/client/src/features/editor/components/fixed-toolbar/fixed-toolbar.tsx

@@ -1,12 +1,12 @@
 import { FC } from "react";
 import { useAtomValue } from "jotai";
+import type { Editor } from "@tiptap/react";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms";
 import { useToolbarState } from "./use-toolbar-state";
 import { BlockTypeGroup } from "./groups/block-type-group";
 import { InlineMarksGroup } from "./groups/inline-marks-group";
 import { ColorGroup } from "./groups/color-group";
 import { ListsGroup } from "./groups/lists-group";
-import { LinkGroup } from "./groups/link-group";
 import { AlignmentGroup } from "./groups/alignment-group";
 import { MediaGroup } from "./groups/media-group";
 import { QuickInsertsGroup } from "./groups/quick-inserts-group";
@@ -16,8 +16,17 @@ import { AskAiGroup } from "./groups/ask-ai-group";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom";
 import classes from "./fixed-toolbar.module.css";
 
-export const FixedToolbar: FC = () => {
+type FixedToolbarProps = {
-  const editor = useAtomValue(pageEditorAtom);
+  editor?: Editor | null;
+  templateMode?: boolean;
+};
+
+export const FixedToolbar: FC<FixedToolbarProps> = ({
+  editor: editorProp,
+  templateMode = false,
+}) => {
+  const editorFromAtom = useAtomValue(pageEditorAtom);
+  const editor = editorProp ?? editorFromAtom;
   const state = useToolbarState(editor);
   const workspace = useAtomValue(workspaceAtom);
   const isGenerativeAiEnabled = workspace?.settings?.ai?.generative === true;
@@ -48,14 +57,12 @@ export const FixedToolbar: FC = () => {
           <div className={classes.divider} />
           <ListsGroup editor={editor} state={state} />
           <div className={classes.divider} />
-          <LinkGroup />
-          <div className={classes.divider} />
           <AlignmentGroup editor={editor} />
           <div className={classes.divider} />
-          <MediaGroup editor={editor} />
+          <MediaGroup editor={editor} templateMode={templateMode} />
           <div className={classes.divider} />
           <QuickInsertsGroup editor={editor} />
-          <MoreInsertsGroup editor={editor} />
+          <MoreInsertsGroup editor={editor} templateMode={templateMode} />
           <div className={classes.divider} />
           <HistoryGroup editor={editor} state={state} />
         </div>

apps/client/src/features/editor/components/fixed-toolbar/groups/link-group.tsx

@@ -1,6 +0,0 @@
-import { FC } from "react";
-import { LinkSelector } from "@/features/editor/components/bubble-menu/link-selector";
-
-export const LinkGroup: FC = () => {
-  return <LinkSelector />;
-};

apps/client/src/features/editor/components/fixed-toolbar/groups/media-group.tsx

@@ -17,6 +17,7 @@ import { uploadPdfAction } from "@/features/editor/components/pdf/upload-pdf-act
 
 interface Props {
   editor: Editor;
+  templateMode?: boolean;
 }
 
 type UploadFn = (
@@ -60,7 +61,7 @@ function pickFile(
   input.click();
 }
 
-export const MediaGroup: FC<Props> = ({ editor }) => {
+export const MediaGroup: FC<Props> = ({ editor, templateMode }) => {
   const { t } = useTranslation();
 
   return (
@@ -78,24 +79,30 @@ export const MediaGroup: FC<Props> = ({ editor }) => {
         </Tooltip>
       </Menu.Target>
       <Menu.Dropdown>
-        <Menu.Item
+        {!templateMode && (
-          leftSection={<IconPhoto size={16} />}
+          <Menu.Item
-          onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
+            leftSection={<IconPhoto size={16} />}
-        >
+            onClick={() => pickFile(editor, "image/*", true, uploadImageAction)}
-          {t("Image")}
+          >
-        </Menu.Item>
+            {t("Image")}
-        <Menu.Item
+          </Menu.Item>
-          leftSection={<IconMovie size={16} />}
+        )}
-          onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
+        {!templateMode && (
-        >
+          <Menu.Item
-          {t("Video")}
+            leftSection={<IconMovie size={16} />}
-        </Menu.Item>
+            onClick={() => pickFile(editor, "video/*", true, uploadVideoAction)}
-        <Menu.Item
+          >
-          leftSection={<IconMusic size={16} />}
+            {t("Video")}
-          onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
+          </Menu.Item>
-        >
+        )}
-          {t("Audio")}
+        {!templateMode && (
-        </Menu.Item>
+          <Menu.Item
+            leftSection={<IconMusic size={16} />}
+            onClick={() => pickFile(editor, "audio/*", true, uploadAudioAction)}
+          >
+            {t("Audio")}
+          </Menu.Item>
+        )}
         <Menu.Item
           leftSection={<IconFileTypePdf size={16} />}
           onClick={() =>
@@ -104,14 +111,16 @@ export const MediaGroup: FC<Props> = ({ editor }) => {
         >
           PDF
         </Menu.Item>
-        <Menu.Item
+        {!templateMode && (
-          leftSection={<IconPaperclip size={16} />}
+          <Menu.Item
-          onClick={() =>
+            leftSection={<IconPaperclip size={16} />}
-            pickFile(editor, "", true, uploadAttachmentAction, true)
+            onClick={() =>
-          }
+              pickFile(editor, "", true, uploadAttachmentAction, true)
-        >
+            }
-          {t("File attachment")}
+          >
-        </Menu.Item>
+            {t("File attachment")}
+          </Menu.Item>
+        )}
       </Menu.Dropdown>
     </Menu>
   );

apps/client/src/features/editor/components/fixed-toolbar/groups/more-inserts-group.tsx

@@ -32,16 +32,17 @@ import { useTranslation } from "react-i18next";
 
 interface Props {
   editor: Editor;
+  templateMode?: boolean;
 }
 
-export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
+export const MoreInsertsGroup: FC<Props> = ({ editor, templateMode }) => {
-  const { t } = useTranslation();
+  const { t, i18n } = useTranslation();
 
   const setEmbed = (provider: string) =>
     editor.chain().focus().setEmbed({ provider }).run();
 
   const insertDate = () => {
-    const currentDate = new Date().toLocaleDateString("en-US", {
+    const currentDate = new Date().toLocaleDateString(i18n.language, {
       year: "numeric",
       month: "long",
       day: "numeric",
@@ -91,14 +92,16 @@ export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
         >
           {t("Subpages")}
         </Menu.Item>
-        <Menu.Item
+        {!templateMode && (
-          leftSection={<IconRotate2 size={16} />}
+          <Menu.Item
-          onClick={() =>
+            leftSection={<IconRotate2 size={16} />}
-            editor.chain().focus().insertTransclusionSource().run()
+            onClick={() =>
-          }
+              editor.chain().focus().insertTransclusionSource().run()
-        >
+            }
-          {t("Synced block")}
+          >
-        </Menu.Item>
+            {t("Synced block")}
+          </Menu.Item>
+        )}
 
         <Menu.Divider />
         <Menu.Label>{t("Diagrams")}</Menu.Label>
@@ -115,18 +118,22 @@ export const MoreInsertsGroup: FC<Props> = ({ editor }) => {
         >
           {t("Mermaid diagram")}
         </Menu.Item>
-        <Menu.Item
+        {!templateMode && (
-          leftSection={<IconDrawio size={16} />}
+          <Menu.Item
-          onClick={() => editor.chain().focus().setDrawio().run()}
+            leftSection={<IconDrawio size={16} />}
-        >
+            onClick={() => editor.chain().focus().setDrawio().run()}
-          Draw.io
+          >
-        </Menu.Item>
+            Draw.io
-        <Menu.Item
+          </Menu.Item>
-          leftSection={<IconExcalidraw size={16} />}
+        )}
-          onClick={() => editor.chain().focus().setExcalidraw().run()}
+        {!templateMode && (
-        >
+          <Menu.Item
-          Excalidraw
+            leftSection={<IconExcalidraw size={16} />}
-        </Menu.Item>
+            onClick={() => editor.chain().focus().setExcalidraw().run()}
+          >
+            Excalidraw
+          </Menu.Item>
+        )}
 
         <Menu.Divider />
         <Menu.Label>{t("Embeds")}</Menu.Label>

apps/client/src/features/editor/components/slash-menu/menu-items.ts

@@ -43,6 +43,7 @@ import IconMermaid from "@/components/icons/icon-mermaid";
 import IconDrawio from "@/components/icons/icon-drawio";
 import { IconColumns4 } from "@/components/icons/icon-columns-4";
 import { IconColumns5 } from "@/components/icons/icon-columns-5";
+import i18n from "@/i18n.ts";
 import {
   AirtableIcon,
   FigmaIcon,
@@ -459,7 +460,7 @@ const CommandGroups: SlashMenuGroupedItemsType = {
       searchTerms: ["date", "today"],
       icon: IconCalendar,
       command: ({ editor, range }: CommandProps) => {
-        const currentDate = new Date().toLocaleDateString("en-US", {
+        const currentDate = new Date().toLocaleDateString(i18n.language, {
           year: "numeric",
           month: "long",
           day: "numeric",

apps/client/src/features/editor/extensions/extensions.ts

@@ -3,7 +3,7 @@ import { StarterKit } from "@tiptap/starter-kit";
 import { Code } from "@tiptap/extension-code";
 import { TextAlign } from "@tiptap/extension-text-align";
 import { TaskList, TaskItem } from "@tiptap/extension-list";
-import { Placeholder, CharacterCount } from "@tiptap/extensions";
+import { Placeholder, CharacterCount, UndoRedo } from "@tiptap/extensions";
 import { Superscript } from "@tiptap/extension-superscript";
 import SubScript from "@tiptap/extension-subscript";
 import { Typography } from "@tiptap/extension-typography";
@@ -437,6 +437,7 @@ const TemplateSlashCommand = Command.configure({
 export const templateExtensions = [
   ...mainExtensions.filter((ext: any) => ext !== SlashCommand),
   TemplateSlashCommand,
+  UndoRedo,
 ] as any;
 
 export const collabExtensions: CollabExtensions = (provider, user) => [

apps/client/src/features/editor/page-editor.tsx

@@ -14,6 +14,7 @@ import {
   WebSocketStatus,
   HocuspocusProviderWebsocket,
   onSyncedParameters,
+  onStatelessParameters,
 } from "@hocuspocus/provider";
 import {
   Editor,
@@ -145,6 +146,24 @@ export default function PageEditor({
       const onSyncedHandler = (event: onSyncedParameters) => {
         setIsRemoteSynced(event.state);
       };
+      const onStatelessHandler = ({ payload }: onStatelessParameters) => {
+        try {
+          const message = JSON.parse(payload);
+          if (message?.type !== "page.updated" || !message.updatedAt) return;
+          const pageData = queryClient.getQueryData<IPage>(["pages", slugId]);
+          if (pageData) {
+            queryClient.setQueryData(["pages", slugId], {
+              ...pageData,
+              updatedAt: message.updatedAt,
+              ...(message.lastUpdatedBy && {
+                lastUpdatedBy: message.lastUpdatedBy,
+              }),
+            });
+          }
+        } catch {
+          // ignore unrelated stateless messages
+        }
+      };
       const onAuthenticationFailedHandler = () => {
         const payload = jwtDecode(collabQuery?.token);
         const now = Date.now().valueOf() / 1000;
@@ -169,6 +188,7 @@ export default function PageEditor({
         onAuthenticationFailed: onAuthenticationFailedHandler,
         onStatus: onStatusHandler,
         onSynced: onSyncedHandler,
+        onStateless: onStatelessHandler,
       });
 
       local.on("synced", onLocalSyncedHandler);
@@ -318,7 +338,6 @@ export default function PageEditor({
       queryClient.setQueryData(["pages", slugId], {
         ...pageData,
         content: newContent,
-        updatedAt: new Date(),
       });
     }
   }, 3000);

apps/client/src/features/label/utils/format-label-date.ts

@@ -1,15 +1,27 @@
-import { format, isThisYear, isToday, isYesterday } from "date-fns";
+import { isThisYear, isToday, isYesterday } from "date-fns";
 import i18n from "@/i18n.ts";
+import { formatLocalized, getDateFnsLocale } from "@/lib/date-locale.ts";
 
 export function formatLabelListDate(date: Date): string {
+  const locale = getDateFnsLocale();
   if (isToday(date)) {
-    return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Today, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
   }
   if (isYesterday(date)) {
-    return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Yesterday, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
   }
   if (isThisYear(date)) {
-    return format(date, "MMM dd");
+    if (locale.code?.startsWith("en")) {
+      return formatLocalized(date, "MMM dd", "MMM dd", locale);
+    }
+    return new Intl.DateTimeFormat(i18n.language, {
+      month: "short",
+      day: "numeric",
+    }).format(date);
   }
-  return format(date, "MMM dd, yyyy");
+  return formatLocalized(date, "MMM dd, yyyy", "PP", locale);
 }

apps/client/src/features/notification/notification.utils.ts

@@ -1,3 +1,4 @@
+import i18n from "@/i18n.ts";
 import { INotification } from "./types/notification.types";
 
 export function formatRelativeTime(dateStr: string): string {
@@ -8,15 +9,15 @@ export function formatRelativeTime(dateStr: string): string {
   const diffHours = Math.floor(diffMs / 3_600_000);
   const diffDays = Math.floor(diffMs / 86_400_000);
 
-  if (diffMin < 1) return "now";
+  if (diffMin < 1) return i18n.t("now");
   if (diffMin < 60) return `${diffMin}m`;
   if (diffHours < 24) return `${diffHours}h`;
   if (diffDays < 7) return `${diffDays}d`;
 
-  return date.toLocaleDateString(undefined, {
+  return new Intl.DateTimeFormat(i18n.language, {
     month: "short",
     day: "numeric",
-  });
+  }).format(date);
 }
 
 type TimeGroup = "today" | "yesterday" | "this_week" | "older";

apps/client/src/features/page-details/components/page-details-aside.tsx

@@ -16,7 +16,8 @@ import { usePageQuery } from "@/features/page/queries/page-query.ts";
 import { pageEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
 import { useBacklinksCountQuery } from "@/features/page-details/queries/backlinks-query.ts";
 import { BacklinksModal } from "./backlinks-modal";
-import { formattedDate, timeAgo } from "@/lib/time.ts";
+import { formattedDate } from "@/lib/time.ts";
+import { useTimeAgo } from "@/hooks/use-time-ago.tsx";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
 import { LabelsSection } from "@/features/label/components/labels-section.tsx";
 
@@ -139,6 +140,7 @@ function StatsSection({
   updatedAt: Date | string;
 }) {
   const { t } = useTranslation();
+  const lastUpdated = useTimeAgo(updatedAt);
   return (
     <Stack gap="xs">
       <Text size="xs" fw={500} c="dimmed">
@@ -150,10 +152,7 @@ function StatsSection({
         label={t("Created")}
         value={formattedDate(new Date(createdAt))}
       />
-      <StatRow
+      <StatRow label={t("Last updated")} value={lastUpdated} />
-        label={t("Last updated")}
-        value={timeAgo(new Date(updatedAt))}
-      />
     </Stack>
   );
 }

apps/client/src/features/share/components/share-list.tsx

@@ -7,8 +7,8 @@ import Paginate from "@/components/common/paginate.tsx";
 import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
 import { useGetSharesQuery } from "@/features/share/queries/share-query.ts";
 import { ISharedItem } from "@/features/share/types/share.types.ts";
-import { format } from "date-fns";
 import ShareActionMenu from "@/features/share/components/share-action-menu.tsx";
+import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
 import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
 import { getPageIcon } from "@/lib";
 import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
@@ -20,6 +20,7 @@ export default function ShareList() {
   const { t } = useTranslation();
   const { cursor, goNext, goPrev } = useCursorPaginate();
   const { data, isLoading } = useGetSharesQuery({ cursor });
+  const locale = useDateFnsLocale();
 
   if (!isLoading && data?.items.length === 0) {
     return <EmptyState icon={IconWorld} title={t("No shared pages")} />;
@@ -81,7 +82,12 @@ export default function ShareList() {
                 </Table.Td>
                 <Table.Td>
                   <Text fz="sm" style={{ whiteSpace: "nowrap" }}>
-                    {format(new Date(share.createdAt), "MMM dd, yyyy")}
+                    {formatLocalized(
+                      share.createdAt,
+                      "MMM dd, yyyy",
+                      "PP",
+                      locale,
+                    )}
                   </Text>
                 </Table.Td>
                 <Table.Td>

apps/client/src/lib/date-locale.ts

@@ -0,0 +1,62 @@
+import { format as dateFnsFormat, type Locale } from "date-fns";
+import {
+  de,
+  enUS,
+  es,
+  fr,
+  it,
+  ja,
+  ko,
+  nl,
+  ptBR,
+  ru,
+  uk,
+  zhCN,
+} from "date-fns/locale";
+import { useTranslation } from "react-i18next";
+import i18n from "@/i18n.ts";
+
+const LOCALE_MAP: Record<string, Locale> = {
+  "de-DE": de,
+  "en-US": enUS,
+  "es-ES": es,
+  "fr-FR": fr,
+  "it-IT": it,
+  "ja-JP": ja,
+  "ko-KR": ko,
+  "nl-NL": nl,
+  "pt-BR": ptBR,
+  "ru-RU": ru,
+  "uk-UA": uk,
+  "zh-CN": zhCN,
+};
+
+export function getDateFnsLocale(language?: string): Locale {
+  const lang = language ?? i18n.language ?? "en-US";
+  return LOCALE_MAP[lang] ?? LOCALE_MAP[lang.split("-")[0]] ?? enUS;
+}
+
+export function useDateFnsLocale(): Locale {
+  const { i18n: instance } = useTranslation();
+  return getDateFnsLocale(instance.language);
+}
+
+function isEnglishLocale(locale: Locale): boolean {
+  return locale.code === "en-US" || locale.code?.startsWith("en") === true;
+}
+
+/**
+ * Picks `enUSPattern` for the English locale and `localizedPattern` for every
+ * other locale. Keeps existing en-US output byte-identical while letting other
+ * languages use date-fns localized format tokens (P, PP, p, PPp, …).
+ */
+export function formatLocalized(
+  date: Date | number | string,
+  enUSPattern: string,
+  localizedPattern: string,
+  locale?: Locale,
+): string {
+  const effective = locale ?? getDateFnsLocale();
+  const pattern = isEnglishLocale(effective) ? enUSPattern : localizedPattern;
+  return dateFnsFormat(new Date(date), pattern, { locale: effective });
+}

apps/client/src/lib/time.ts

@@ -1,17 +1,25 @@
-import { formatDistanceStrict } from "date-fns";
+import { formatDistanceStrict, isToday, isYesterday } from "date-fns";
-import { format, isToday, isYesterday } from "date-fns";
 import i18n from "@/i18n.ts";
+import { formatLocalized, getDateFnsLocale } from "@/lib/date-locale.ts";
 
 export function timeAgo(date: Date) {
-  return formatDistanceStrict(new Date(date), new Date(), { addSuffix: true });
+  return formatDistanceStrict(new Date(date), new Date(), {
+    addSuffix: true,
+    locale: getDateFnsLocale(),
+  });
 }
 
 export function formattedDate(date: Date) {
+  const locale = getDateFnsLocale();
   if (isToday(date)) {
-    return i18n.t("Today, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Today, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
   } else if (isYesterday(date)) {
-    return i18n.t("Yesterday, {{time}}", { time: format(date, "h:mma") });
+    return i18n.t("Yesterday, {{time}}", {
+      time: formatLocalized(date, "h:mma", "p", locale),
+    });
   } else {
-    return format(date, "MMM dd, yyyy, h:mma");
+    return formatLocalized(date, "MMM dd, yyyy, h:mma", "PPp", locale);
   }
 }

apps/server/src/collaboration/extensions/persistence.extension.ts

@@ -165,6 +165,21 @@ export class PersistenceExtension implements Extension {
     }
 
     if (page) {
+      document.broadcastStateless(
+        JSON.stringify({
+          type: 'page.updated',
+          updatedAt: new Date().toISOString(),
+          lastUpdatedById: context?.user?.id,
+          lastUpdatedBy: context?.user
+            ? {
+                id: context.user?.id,
+                name: context.user?.name,
+                avatarUrl: context.user?.avatarUrl,
+              }
+            : undefined,
+        }),
+      );
+
       await this.syncTransclusion(pageId, page.workspaceId, tiptapJson);
     }
 

apps/server/src/common/helpers/types/permission.ts

@@ -4,6 +4,11 @@ export enum UserRole {
   MEMBER = 'member',
 }
 
+export enum InviteUserRole {
+  ADMIN = 'admin', // can have owner permissions but cannot delete workspace
+  MEMBER = 'member',
+}
+
 export enum SpaceRole {
   ADMIN = 'admin', // can manage space settings, members, and delete space
   WRITER = 'writer', // can read and write pages in space

apps/server/src/core/page/services/page.service.ts

@@ -310,6 +310,7 @@ export class PageService {
           expression: 'position',
           direction: 'asc',
           orderModifier: (ob) => ob.collate('C').asc(),
+          cursorExpression: sql`position collate "C"`,
         },
         { expression: 'id', direction: 'asc' },
       ],

apps/server/src/core/workspace/dto/invitation.dto.ts

@@ -11,7 +11,7 @@ import {
   MaxLength,
   MinLength,
 } from 'class-validator';
-import { UserRole } from '../../../common/helpers/types/permission';
+import { InviteUserRole } from '../../../common/helpers/types/permission';
 import { NoUrls } from '../../../common/validators/no-urls.validator';
 
 export class InviteUserDto {
@@ -32,7 +32,7 @@ export class InviteUserDto {
   @IsUUID('all', { each: true })
   groupIds: string[];
 
-  @IsEnum(UserRole)
+  @IsEnum(InviteUserRole)
   role: string;
 }
 

apps/server/src/core/workspace/services/workspace-invitation.service.ts

@@ -1,5 +1,6 @@
 import {
   BadRequestException,
+  ForbiddenException,
   Inject,
   Injectable,
   Logger,
@@ -40,6 +41,7 @@ import {
   AUDIT_SERVICE,
   IAuditService,
 } from '../../../integrations/audit/audit.service';
+import { isAdminActingOnOwner } from '../workspace.util';
 
 @Injectable()
 export class WorkspaceInvitationService {
@@ -119,6 +121,10 @@ export class WorkspaceInvitationService {
   ): Promise<void> {
     const { emails, role, groupIds } = inviteUserDto;
 
+    if (isAdminActingOnOwner(authUser.role, role)) {
+      throw new ForbiddenException();
+    }
+
     let invites: WorkspaceInvitation[] = [];
 
     try {

apps/server/src/core/workspace/services/workspace.service.ts

@@ -30,6 +30,7 @@ import { DomainService } from '../../../integrations/environment/domain.service'
 import { jsonArrayFrom } from 'kysely/helpers/postgres';
 import { addDays } from 'date-fns';
 import { DISALLOWED_HOSTNAMES, WorkspaceStatus } from '../workspace.constants';
+import { isAdminActingOnOwner } from '../workspace.util';
 import { v4 } from 'uuid';
 import { InjectQueue } from '@nestjs/bullmq';
 import { QueueJob, QueueName } from '../../../integrations/queue/constants';
@@ -590,8 +591,8 @@ export class WorkspaceService {
 
     // prevent ADMIN from managing OWNER role
     if (
-      (authUser.role === UserRole.ADMIN && newRole === UserRole.OWNER) ||
+      isAdminActingOnOwner(authUser.role, newRole) ||
-      (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER)
+      isAdminActingOnOwner(authUser.role, user.role)
     ) {
       throw new ForbiddenException();
     }
@@ -695,7 +696,7 @@ export class WorkspaceService {
       throw new BadRequestException('You cannot deactivate yourself');
     }
 
-    if (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER) {
+    if (isAdminActingOnOwner(authUser.role, user.role)) {
       throw new BadRequestException(
         'You cannot deactivate a user with owner role',
       );
@@ -753,7 +754,7 @@ export class WorkspaceService {
       throw new BadRequestException('User is not deactivated');
     }
 
-    if (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER) {
+    if (isAdminActingOnOwner(authUser.role, user.role)) {
       throw new BadRequestException(
         'You cannot activate a user with owner role',
       );
@@ -805,7 +806,7 @@ export class WorkspaceService {
       throw new BadRequestException('You cannot delete yourself');
     }
 
-    if (authUser.role === UserRole.ADMIN && user.role === UserRole.OWNER) {
+    if (isAdminActingOnOwner(authUser.role, user.role)) {
       throw new BadRequestException('You cannot delete a user with owner role');
     }
 

apps/server/src/core/workspace/workspace.util.ts

@@ -0,0 +1,8 @@
+import { UserRole } from '../../common/helpers/types/permission';
+
+export function isAdminActingOnOwner(
+  authUserRole: string,
+  targetRole: string,
+): boolean {
+  return authUserRole === UserRole.ADMIN && targetRole === UserRole.OWNER;
+}

apps/server/src/database/pagination/cursor-pagination.ts

@@ -14,12 +14,14 @@ type SortField<DB, TB extends keyof DB, O> =
         | (StringReference<DB, TB> & `${string}.${keyof O & string}`);
       direction: OrderByDirection;
       orderModifier?: OrderByModifiers;
+      cursorExpression?: ReferenceExpression<DB, TB>;
       key?: keyof O & string;
     }
   | {
       expression: ReferenceExpression<DB, TB>;
       direction: OrderByDirection;
       orderModifier?: OrderByModifiers;
+      cursorExpression?: ReferenceExpression<DB, TB>;
       key: keyof O & string;
     };
 
@@ -202,11 +204,12 @@ export async function executeWithCursorPagination<
 
         const comparison = field.direction === defaultDirection ? '>' : '<';
         const value = cursor[field.key as keyof typeof cursor];
+        const compareExpr = field.cursorExpression ?? field.expression;
 
-        const conditions = [eb(field.expression, comparison, value)];
+        const conditions = [eb(compareExpr, comparison, value)];
 
         if (expression) {
-          conditions.push(and([eb(field.expression, '=', value), expression]));
+          conditions.push(and([eb(compareExpr, '=', value), expression]));
         }
 
         expression = or(conditions);