Make EventModal usable standalone without routing

- EventModal now accepts optional isOpen/onClose/defaultTabloId/defaultDate props; when provided it works as a controlled dialog without needing to navigate to /planning/create
- When used as a route child (existing behavior), falls back to URL params and navigate(-1) as before
- Events view "Créer un événement" button opens EventModal inline instead of navigating, passing the current tablo and date as defaults

Co-Authored-By: Claude Sonnet 4.6 (1M context) <noreply@anthropic.com>

apps/main/src/components/EventModal.tsx

@@ -29,7 +29,19 @@ import { useCreateEvents, useEvent, useUpdateEvent } from "../hooks/events";
 import { useTablosList } from "../hooks/tablos";
 import { useIsReadOnlyUser, useUser } from "../providers/UserStoreProvider";
 
-export const EventModal = ({ mode }: { mode: "create" | "edit" }) => {
+export const EventModal = ({
+  mode,
+  isOpen,
+  onClose: onCloseProp,
+  defaultTabloId,
+  defaultDate,
+}: {
+  mode: "create" | "edit";
+  isOpen?: boolean;
+  onClose?: () => void;
+  defaultTabloId?: string;
+  defaultDate?: Date;
+}) => {
   const { t, i18n } = useTranslation("components");
   const { event_id } = useParams();
   const { data: event } = useEvent(event_id as string);
@@ -37,17 +49,24 @@ export const EventModal = ({ mode }: { mode: "create" | "edit" }) => {
   const user = useUser();
   const isReadOnly = useIsReadOnlyUser();
   const [searchParams] = useSearchParams();
-  const tablo_id = searchParams.get("tablo_id");
-  const dateFromParams = searchParams.get("date");
-  const date = dateFromParams ? new Date(dateFromParams) : new Date();
+  const navigate = useNavigate();
+
+  // When used standalone (isOpen prop provided), ignore URL params and use props instead
+  const isStandalone = isOpen !== undefined;
+  const tablo_id = isStandalone ? (defaultTabloId ?? "") : (searchParams.get("tablo_id") ?? "");
+  const dateFromParams = isStandalone ? null : searchParams.get("date");
+  const date = defaultDate ?? (dateFromParams ? new Date(dateFromParams) : new Date());
 
   const { data: tablos, isLoading: tablosLoading } = useTablosList();
   const createEvents = useCreateEvents();
   const updateEvent = useUpdateEvent();
-  const navigate = useNavigate();
 
   const onClose = () => {
-    navigate(-1);
+    if (onCloseProp) {
+      onCloseProp();
+    } else {
+      navigate(-1);
+    }
   };
 
   // Get the local date string without timezone conversion
@@ -93,7 +112,7 @@ export const EventModal = ({ mode }: { mode: "create" | "edit" }) => {
   }, [mode, event]);
 
   return (
-    <Dialog open={true} onOpenChange={onClose}>
+    <Dialog open={isStandalone ? isOpen : true} onOpenChange={onClose}>
       <DialogContent className="max-w-2xl">
         <DialogHeader>
           <DialogTitle>

apps/main/src/pages/planning.tsx

@@ -18,6 +18,7 @@ import { Outlet, useNavigate, useParams, useSearchParams } from "react-router-do
 import { useDeleteEvent, useEventsByTablo } from "../hooks/events";
 import { useGetAllTabloAccess, useTablosList } from "../hooks/tablos";
 import { useIsReadOnlyUser } from "../providers/UserStoreProvider";
+import { EventModal } from "../components/EventModal";
 
 type ViewType = "month" | "week" | "day";
 
@@ -41,6 +42,7 @@ export const PlanningPage = () => {
   const isReadOnly = useIsReadOnlyUser();
   const currentTab = searchParams.get("tab") ?? "calendar";
   const [eventsSearchQuery, setEventsSearchQuery] = useState("");
+  const [isCreateEventOpen, setIsCreateEventOpen] = useState(false);
 
   // Fetch tablos
   const { data: tablos, isLoading: tablosLoading } = useTablosList();
@@ -815,10 +817,7 @@ export const PlanningPage = () => {
           </h1>
           <button
             type="button"
-            onClick={() => {
-              if (isReadOnly) return;
-              navigate(`/planning/create?date=${currentDate.toISOString()}${selectedTabloId !== "all" ? `&tablo_id=${selectedTabloId}` : ""}`);
-            }}
+            onClick={() => { if (!isReadOnly) setIsCreateEventOpen(true); }}
             disabled={isReadOnly}
             className="flex items-center gap-2 px-5 py-3 bg-[#804EEC] hover:bg-[#6f3fd4] text-white rounded-xl transition-colors font-medium shadow-sm disabled:opacity-50"
           >
@@ -944,6 +943,13 @@ export const PlanningPage = () => {
     return (
       <div className="min-h-screen bg-background px-4">
         {renderEventsView()}
+        <EventModal
+          mode="create"
+          isOpen={isCreateEventOpen}
+          onClose={() => setIsCreateEventOpen(false)}
+          defaultTabloId={selectedTabloId !== "all" ? selectedTabloId : undefined}
+          defaultDate={currentDate}
+        />
         <Outlet />
       </div>
     );