From abb720d797b4a63d237667f4695dfcc2cd1ad672 Mon Sep 17 00:00:00 2001
From: michaelschal <35957947-michaelschal@users.noreply.replit.com>
Date: Thu, 4 Sep 2025 14:03:51 +0000
Subject: [PATCH] Adjust calendar display to position quick create button next
 to advertisements

Refactor CalendarGrid component to conditionally render and position the quick create button alongside advertisements within the calendar view, improving UI layout based on user feedback.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: fba33a9c-2c78-4001-992e-48eb46f716ef
Replit-Commit-Checkpoint-Type: full_checkpoint
---
 .replit                                |  1 -
 client/src/components/CalendarGrid.tsx | 67 ++++++++++++++------------
 2 files changed, 35 insertions(+), 33 deletions(-)

diff --git a/.replit b/.replit
index 853b5d3..ef2efe1 100644
--- a/.replit
+++ b/.replit
@@ -37,4 +37,3 @@ args = "npm run dev"
 waitForPort = 5000
 
 [agent]
-integrations = ["javascript_database==1.0.0", "javascript_object_storage==1.0.0", "javascript_log_in_with_replit==1.0.0"]
diff --git a/client/src/components/CalendarGrid.tsx b/client/src/components/CalendarGrid.tsx
index 918c248..4627670 100644
--- a/client/src/components/CalendarGrid.tsx
+++ b/client/src/components/CalendarGrid.tsx
@@ -536,39 +536,42 @@ export default function CalendarGrid({
                 </div>
               </div>
               
-              {/* Publicities avec design épuré */}
-              {dayPublicities.length > 0 && (
-                <div className="absolute top-2 right-2 flex flex-col items-end gap-1">
-                  {dayPublicities.slice(0, 2).map((pub, idx) => (
-                    <div
-                      key={`${pub.id}-${idx}`}
-                      className="bg-purple-300 text-purple-800 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-400"
-                      title={`Pub ${pub.pubNumber}: ${pub.designation}${pub.participations ? ` - Magasins: ${pub.participations.map((pg: any) => pg.group?.name).join(', ')}` : ''}`}
-                    >
-                      {pub.pubNumber}
-                    </div>
-                  ))}
-                  {dayPublicities.length > 2 && (
-                    <div className="bg-purple-400 text-purple-900 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-500">
-                      +{dayPublicities.length - 2}
-                    </div>
-                  )}
-                </div>
-              )}
-
-              {/* Quick Create Button épuré */}
+              {/* Publicities et Quick Create Button ensemble */}
               {isCurrentMonth && (
-                <div className={`absolute ${dayPublicities.length === 0 ? 'top-2 right-2' : 'bottom-2 right-2'} opacity-0 group-hover:opacity-100 transition-all duration-200`}>
-                  <Button
-                    size="sm"
-                    className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      onDateClick(date);
-                    }}
-                  >
-                    <Plus className="w-3 h-3" />
-                  </Button>
+                <div className="absolute top-2 right-2 flex flex-col items-end gap-1">
+                  {/* Publicities avec design épuré */}
+                  {dayPublicities.length > 0 && (
+                    <>
+                      {dayPublicities.slice(0, 2).map((pub, idx) => (
+                        <div
+                          key={`${pub.id}-${idx}`}
+                          className="bg-purple-300 text-purple-800 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-400"
+                          title={`Pub ${pub.pubNumber}: ${pub.designation}${pub.participations ? ` - Magasins: ${pub.participations.map((pg: any) => pg.group?.name).join(', ')}` : ''}`}
+                        >
+                          {pub.pubNumber}
+                        </div>
+                      ))}
+                      {dayPublicities.length > 2 && (
+                        <div className="bg-purple-400 text-purple-900 text-xs px-2 py-1 font-bold shadow-md cursor-help transform hover:scale-105 transition-transform duration-150 border border-purple-500">
+                          +{dayPublicities.length - 2}
+                        </div>
+                      )}
+                    </>
+                  )}
+                  
+                  {/* Quick Create Button à côté des publicités */}
+                  <div className="opacity-0 group-hover:opacity-100 transition-all duration-200">
+                    <Button
+                      size="sm"
+                      className="w-6 h-6 bg-orange-300 text-orange-800 p-0 hover:bg-orange-400 shadow-md transform hover:scale-110 transition-all duration-150 border border-orange-500"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDateClick(date);
+                      }}
+                    >
+                      <Plus className="w-3 h-3" />
+                    </Button>
+                  </div>
                 </div>
               )}
             </div>