From f0967f90ebde6764de8bcb53cb777f0510da63f0 Mon Sep 17 00:00:00 2001
From: Luis Felipe Marzagao <lfbm.andamentos@gmail.com>
Date: Wed, 29 Apr 2026 00:47:22 +0000
Subject: [PATCH] fix: implement useTranslations for start date on event modal

---
 components/calendar/event-modal.tsx | 221 +++++++++++++++-------------
 locales/en/common.json              |  16 +-
 locales/fr/common.json              |  16 +-
 locales/pt/common.json              |  14 ++
 4 files changed, 159 insertions(+), 108 deletions(-)

diff --git a/components/calendar/event-modal.tsx b/components/calendar/event-modal.tsx
index 346338a3..e5e31a36 100644
--- a/components/calendar/event-modal.tsx
+++ b/components/calendar/event-modal.tsx
@@ -130,6 +130,15 @@ export function EventModal({
   const timeFormat = useSettingsStore((s) => s.timeFormat);
   const timeDisplayFmt = timeFormat === "12h" ? "h:mm a" : "HH:mm";
   const isEdit = !!event;
+
+  const formatEventDate = useCallback((startD: Date): string => {
+    const dayOfWeek = format(startD, "EEE").toLowerCase();
+    const month = format(startD, "MMM").toLowerCase();
+    const day = format(startD, "d");
+    const year = format(startD, "yyyy");
+    return `${t(`days.${dayOfWeek}`)}, ${t(`months.${month}`)} ${day}, ${year}`;
+  }, [t]);
+
   const [mode, setMode] = useState<"view" | "edit">(isEdit ? "view" : "edit");
 
   const userIsOrganizer = useMemo(() => {
@@ -495,14 +504,14 @@ export function EventModal({
 
     return (
       <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={event.title || t("events.no_title")} className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
-          <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
-            <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
-            <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
-              <X className="w-5 h-5" />
-            </button>
-          </div>
+        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+          <h2 className="text-lg font-semibold truncate">{event.title || t("events.no_title")}</h2>
+          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+            <X className="w-5 h-5" />
+          </button>
+        </div>
 
-          <div className="flex-1 overflow-y-auto">
+        <div className="flex-1 overflow-y-auto">
           <div className="px-6 py-4 space-y-3">
             <div className="flex items-start gap-3 rounded-lg border border-blue-200 dark:border-blue-800 bg-blue-50 dark:bg-blue-950/50 px-4 py-3">
               <CalendarDays className="w-5 h-5 text-blue-600 dark:text-blue-400 mt-0.5 flex-shrink-0" />
@@ -517,7 +526,7 @@ export function EventModal({
             </div>
 
             <div className="text-sm">
-              <span className="font-medium">{format(startD, "EEE, MMM d, yyyy")}</span>
+              <span className="font-medium">{formatEventDate(startD)}</span>
               {!event.showWithoutTime && (
                 <span className="text-muted-foreground ml-2">
                   {format(startD, timeDisplayFmt)} – {format(endD, timeDisplayFmt)}
@@ -550,48 +559,48 @@ export function EventModal({
               </div>
             )}
           </div>
-          </div>
+        </div>
 
-          <div className="px-6 py-4 border-t border-border flex-shrink-0">
-            <div className="flex items-center justify-between">
-              <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
-              <div className="flex gap-2">
-                <Button
-                  size="sm"
-                  variant={userCurrentStatus === "accepted" ? "default" : "outline"}
-                  onClick={() => handleRsvp("accepted")}
-                  className={userCurrentStatus === "accepted"
-                    ? "bg-success hover:bg-success/80 text-success-foreground"
-                    : "text-success border-success/30 hover:bg-success/10"}
-                >
-                  {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.accepted")}
-                </Button>
-                <Button
-                  size="sm"
-                  variant={userCurrentStatus === "tentative" ? "default" : "outline"}
-                  onClick={() => handleRsvp("tentative")}
-                  className={userCurrentStatus === "tentative"
-                    ? "bg-warning hover:bg-warning/80 text-warning-foreground"
-                    : "border border-warning/30 text-warning hover:bg-warning/10"}
-                >
-                  {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.tentative")}
-                </Button>
-                <Button
-                  size="sm"
-                  variant={userCurrentStatus === "declined" ? "default" : "ghost"}
-                  onClick={() => handleRsvp("declined")}
-                  className={userCurrentStatus === "declined"
-                    ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
-                    : "text-destructive hover:bg-destructive/10"}
-                >
-                  {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
-                  {t("participants.declined")}
-                </Button>
-              </div>
+        <div className="px-6 py-4 border-t border-border flex-shrink-0">
+          <div className="flex items-center justify-between">
+            <span className="text-sm font-medium">{t("participants.rsvp_label")}</span>
+            <div className="flex gap-2">
+              <Button
+                size="sm"
+                variant={userCurrentStatus === "accepted" ? "default" : "outline"}
+                onClick={() => handleRsvp("accepted")}
+                className={userCurrentStatus === "accepted"
+                  ? "bg-success hover:bg-success/80 text-success-foreground"
+                  : "text-success border-success/30 hover:bg-success/10"}
+              >
+                {userCurrentStatus === "accepted" && <Check className="w-4 h-4 mr-1" />}
+                {t("participants.accepted")}
+              </Button>
+              <Button
+                size="sm"
+                variant={userCurrentStatus === "tentative" ? "default" : "outline"}
+                onClick={() => handleRsvp("tentative")}
+                className={userCurrentStatus === "tentative"
+                  ? "bg-warning hover:bg-warning/80 text-warning-foreground"
+                  : "border border-warning/30 text-warning hover:bg-warning/10"}
+              >
+                {userCurrentStatus === "tentative" && <Check className="w-4 h-4 mr-1" />}
+                {t("participants.tentative")}
+              </Button>
+              <Button
+                size="sm"
+                variant={userCurrentStatus === "declined" ? "default" : "ghost"}
+                onClick={() => handleRsvp("declined")}
+                className={userCurrentStatus === "declined"
+                  ? "bg-destructive hover:bg-destructive/80 text-destructive-foreground"
+                  : "text-destructive hover:bg-destructive/10"}
+              >
+                {userCurrentStatus === "declined" && <Check className="w-4 h-4 mr-1" />}
+                {t("participants.declined")}
+              </Button>
             </div>
           </div>
+        </div>
       </div>
     );
   }
@@ -638,7 +647,7 @@ export function EventModal({
               <Clock className="w-4 h-4 text-muted-foreground mt-0.5 flex-shrink-0" />
               <div className="text-sm">
                 <span className="font-medium text-foreground">
-                  {format(startD, "EEE, MMM d, yyyy")}
+                  {formatEventDate(startD)}
                 </span>
                 {event.showWithoutTime ? (
                   <span className="text-muted-foreground ml-1.5">{t("events.all_day")}</span>
@@ -767,16 +776,16 @@ export function EventModal({
 
   return (
     <div ref={modalRef} role="dialog" aria-modal={isMobile || undefined} aria-label={isEdit ? t("events.edit") : t("events.create")} data-tour="event-modal" className={isMobile ? "fixed inset-0 z-50 flex flex-col bg-background" : "flex flex-col h-full bg-background"}>
-        <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
-          <h2 className="text-lg font-semibold">
-            {isEdit ? t("events.edit") : t("events.create")}
-          </h2>
-          <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
-            <X className="w-5 h-5" />
-          </button>
-        </div>
+      <div className="flex items-center justify-between px-6 py-4 border-b border-border flex-shrink-0">
+        <h2 className="text-lg font-semibold">
+          {isEdit ? t("events.edit") : t("events.create")}
+        </h2>
+        <button onClick={onClose} className="p-1.5 rounded-md hover:bg-muted transition-colors duration-150 text-muted-foreground hover:text-foreground" aria-label={t("form.cancel")}>
+          <X className="w-5 h-5" />
+        </button>
+      </div>
 
-        <div className="flex-1 overflow-y-auto">
+      <div className="flex-1 overflow-y-auto">
         <div className="px-6 py-4 space-y-4">
           <div>
             <label className="text-sm font-medium mb-1 block">{t("form.title")}</label>
@@ -986,69 +995,69 @@ export function EventModal({
             </div>
           )}
         </div>
-        </div>
+      </div>
 
-        <div className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
-          <div className="flex items-center gap-1">
-            {isEdit && onDelete && (
-              showDeleteConfirm ? (
-                <div className="flex items-center gap-2">
-                  <div>
-                    <span className="text-sm text-red-600 dark:text-red-400">
-                      {t("form.delete_confirm")}
-                    </span>
-                    {hasParticipants && (
-                      <p className="text-xs text-muted-foreground mt-0.5">
-                        {t("participants.cancel_notification")}
-                      </p>
-                    )}
-                  </div>
-                  <Button
-                    variant="outline"
-                    size="sm"
-                    onClick={() => { onDelete(event!.id, hasParticipants || undefined); onClose(); }}
-                    className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700"
-                  >
-                    {t("events.delete")}
-                  </Button>
-                  <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
-                    {t("form.cancel")}
-                  </Button>
+      <div className="flex items-center justify-between px-6 py-4 border-t border-border flex-shrink-0">
+        <div className="flex items-center gap-1">
+          {isEdit && onDelete && (
+            showDeleteConfirm ? (
+              <div className="flex items-center gap-2">
+                <div>
+                  <span className="text-sm text-red-600 dark:text-red-400">
+                    {t("form.delete_confirm")}
+                  </span>
+                  {hasParticipants && (
+                    <p className="text-xs text-muted-foreground mt-0.5">
+                      {t("participants.cancel_notification")}
+                    </p>
+                  )}
                 </div>
-              ) : (
                 <Button
-                  variant="ghost"
+                  variant="outline"
                   size="sm"
-                  onClick={() => setShowDeleteConfirm(true)}
-                  className="text-red-600 dark:text-red-400"
+                  onClick={() => { onDelete(event!.id, hasParticipants || undefined); onClose(); }}
+                  className="text-red-600 dark:text-red-400 border-red-300 dark:border-red-700"
                 >
-                  <Trash2 className="w-4 h-4 mr-1" />
                   {t("events.delete")}
                 </Button>
-              )
-            )}
-            {isEdit && onDuplicate && !showDeleteConfirm && (
+                <Button variant="ghost" size="sm" onClick={() => setShowDeleteConfirm(false)}>
+                  {t("form.cancel")}
+                </Button>
+              </div>
+            ) : (
               <Button
                 variant="ghost"
                 size="sm"
-                onClick={handleDuplicate}
-                aria-label={t("events.duplicate")}
+                onClick={() => setShowDeleteConfirm(true)}
+                className="text-red-600 dark:text-red-400"
               >
-                <Copy className="w-4 h-4 mr-1" />
-                {t("events.duplicate")}
+                <Trash2 className="w-4 h-4 mr-1" />
+                {t("events.delete")}
               </Button>
-            )}
-          </div>
-
-          <div className="flex gap-2">
-            <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
-              {t("form.cancel")}
+            )
+          )}
+          {isEdit && onDuplicate && !showDeleteConfirm && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleDuplicate}
+              aria-label={t("events.duplicate")}
+            >
+              <Copy className="w-4 h-4 mr-1" />
+              {t("events.duplicate")}
             </Button>
-            <Button onClick={handleSave} disabled={!title.trim() || isSaving}>
-              {t("form.save")}
-            </Button>
-          </div>
+          )}
         </div>
+
+        <div className="flex gap-2">
+          <Button variant="outline" onClick={isEdit ? () => setMode("view") : onClose}>
+            {t("form.cancel")}
+          </Button>
+          <Button onClick={handleSave} disabled={!title.trim() || isSaving}>
+            {t("form.save")}
+          </Button>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/locales/en/common.json b/locales/en/common.json
index a884fe2e..d1dc60eb 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -2272,6 +2272,20 @@
       "sat": "Sat",
       "sun": "Sun"
     },
+    "months": {
+      "jan": "Jan",
+      "feb": "Feb",
+      "mar": "Mar",
+      "apr": "Apr",
+      "may": "May",
+      "jun": "Jun",
+      "jul": "Jul",
+      "aug": "Aug",
+      "sep": "Sep",
+      "oct": "Oct",
+      "nov": "Nov",
+      "dec": "Dez"
+    },
     "notifications": {
       "event_created": "Event created",
       "event_updated": "Event updated",
@@ -2749,4 +2763,4 @@
   "unified_mailbox": {
     "search_unavailable": "Search is not available in the unified view"
   }
-}
+}
\ No newline at end of file
diff --git a/locales/fr/common.json b/locales/fr/common.json
index b37618cd..289aed51 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -2261,6 +2261,20 @@
       "sat": "Sam",
       "sun": "Dim"
     },
+    "months": {
+      "jan": "Jan",
+      "feb": "Fév",
+      "mar": "Mar",
+      "apr": "Avr",
+      "may": "Mai",
+      "jun": "Juin",
+      "jul": "Juil",
+      "aug": "Aoû",
+      "sep": "Sep",
+      "oct": "Oct",
+      "nov": "Nov",
+      "dec": "Déc"
+    },
     "notifications": {
       "event_created": "Événement créé",
       "event_updated": "Événement mis à jour",
@@ -2738,4 +2752,4 @@
       "custom": "Personnalisé"
     }
   }
-}
+}
\ No newline at end of file
diff --git a/locales/pt/common.json b/locales/pt/common.json
index 8ee68311..e75aae52 100644
--- a/locales/pt/common.json
+++ b/locales/pt/common.json
@@ -2261,6 +2261,20 @@
       "sat": "Sáb",
       "sun": "Dom"
     },
+    "months": {
+      "jan": "Jan",
+      "feb": "Fev",
+      "mar": "Mar",
+      "apr": "Abr",
+      "may": "Mai",
+      "jun": "Jun",
+      "jul": "Jul",
+      "aug": "Ago",
+      "sep": "Set",
+      "oct": "Out",
+      "nov": "Nov",
+      "dec": "Dez"
+    },
     "notifications": {
       "event_created": "Evento criado",
       "event_updated": "Evento atualizado",