Improve calendar view by adding a responsive list layout

Introduce a new component for a responsive calendar list view and update the existing calendar view to conditionally render based on screen size.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/ER8Naji

client/src/components/calendar-view.tsx

@@ -7,12 +7,15 @@ import { apiRequest, queryClient } from "@/lib/queryClient";
 import type { ScheduledPost } from "@shared/schema";
 import { SiFacebook, SiInstagram } from "react-icons/si";
 import EditScheduledPostDialog from "./edit-scheduled-post-dialog";
+import CalendarListView from "./calendar-list-view";
+import { useMediaQuery } from "@/hooks/use-media-query";
 
 export default function CalendarView() {
   const [currentDate, setCurrentDate] = useState(new Date());
   const [editDialogOpen, setEditDialogOpen] = useState(false);
   const [selectedPost, setSelectedPost] = useState<any>(null);
   const { toast } = useToast();
+  const isDesktop = useMediaQuery("(min-width: 768px)");
 
   const { data: scheduledPosts = [] } = useQuery<ScheduledPost[]>({
     queryKey: ["/api/scheduled-posts"],
@@ -37,15 +40,15 @@ export default function CalendarView() {
     },
   });
 
-  const handleDeletePost = (postId: string, e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleDeletePost = (postId: string, e?: React.MouseEvent) => {
+    if (e) e.stopPropagation();
     if (confirm("Êtes-vous sûr de vouloir supprimer cette publication programmée ?")) {
       deletePostMutation.mutate(postId);
     }
   };
 
-  const handleEditPost = (post: any, e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleEditPost = (post: any, e?: React.MouseEvent) => {
+    if (e) e.stopPropagation();
     setSelectedPost(post);
     setEditDialogOpen(true);
   };
@@ -147,16 +150,17 @@ export default function CalendarView() {
         </div>
       </div>
 
-      <div className="p-8">
-        <div className="grid grid-cols-7 gap-2 mb-2">
-          {daysOfWeek.map((day) => (
-            <div key={day} className="bg-muted/30 py-3 rounded-lg text-center">
-              <span className="text-sm font-semibold text-muted-foreground">{day}</span>
-            </div>
-          ))}
-        </div>
+      {isDesktop ? (
+        <div className="p-8">
+          <div className="grid grid-cols-7 gap-2 mb-2">
+            {daysOfWeek.map((day) => (
+              <div key={day} className="bg-muted/30 py-3 rounded-lg text-center">
+                <span className="text-sm font-semibold text-muted-foreground">{day}</span>
+              </div>
+            ))}
+          </div>
 
-        <div className="grid grid-cols-7 gap-2">
+          <div className="grid grid-cols-7 gap-2">
           {days.map((day, index) => (
             <div
               key={index}
@@ -253,25 +257,30 @@ export default function CalendarView() {
           ))}
         </div>
 
-        <div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
-          <div className="flex items-center gap-3">
-            <div className="w-4 h-4 rounded-md bg-blue-500/20 border-2 border-blue-500"></div>
-            <span className="text-sm text-muted-foreground font-medium">Programmé</span>
-          </div>
-          <div className="flex items-center gap-3">
-            <div className="w-4 h-4 rounded-md bg-green-500/20 border-2 border-green-500"></div>
-            <span className="text-sm text-muted-foreground font-medium">Publié</span>
+          <div className="mt-8 flex items-center justify-center gap-8 flex-wrap">
+            <div className="flex items-center gap-3">
+              <div className="w-4 h-4 rounded-md bg-blue-500/20 border-2 border-blue-500"></div>
+              <span className="text-sm text-muted-foreground font-medium">Programmé</span>
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="w-4 h-4 rounded-md bg-green-500/20 border-2 border-green-500"></div>
+              <span className="text-sm text-muted-foreground font-medium">Publié</span>
+            </div>
           </div>
         </div>
-      </div>
-
-      {selectedPost && (
-        <EditScheduledPostDialog
-          open={editDialogOpen}
-          onOpenChange={setEditDialogOpen}
-          scheduledPost={selectedPost}
+      ) : (
+        <CalendarListView
+          scheduledPosts={scheduledPosts}
+          onEditPost={handleEditPost}
+          onDeletePost={handleDeletePost}
         />
       )}
+
+      <EditScheduledPostDialog
+        open={editDialogOpen}
+        onOpenChange={setEditDialogOpen}
+        scheduledPost={selectedPost || {}}
+      />
     </div>
   );
 }