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/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, {
-                    month: "long",
-                    day: "numeric",
-                    year: "numeric",
-                  }),
+                  date: new Date(info.expiresAt).toLocaleDateString(
+                    i18n.language,
+                    {
+                      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>