Michael/Socialflow
1
0 Fork 0
mirror of https://github.com/R0m1k3/Socialflow.git synced 2026-10-13 10:17:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

Improve date and time selection interface for better user experience

Browse Source 
Adjusted DateTimePicker component by reducing scroll area height, button size, and padding for a more compact and touch-friendly interface, optimizing space usage.

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/aGnsIb5
This commit is contained in:
michaelschal committed 2025-10-28 13:18:59 +00:00
1 parent fc9d0e594a
commit 9e58d3be47
2 files changed
+13 -16
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/components/datetime-picker.tsx
+12 -15
View File
@@ -137,15 +137,15 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<div className="flex">
<ScrollArea className="h-60">
<div className="p-2">
<div className="text-xs font-semibold mb-2 px-2 text-muted-foreground">Heures</div>
<ScrollArea className="h-48">
<div className="p-1.5">
<div className="text-[10px] font-semibold mb-1.5 px-1.5 text-muted-foreground">Heures</div>
{hours.map((hour) => (
<Button
key={hour}
variant="ghost"
className={cn(
"w-full justify-center mb-1",
"w-full justify-center mb-0.5 h-9 text-xs",
selectedHour === hour && "bg-primary text-primary-foreground",
isOptimalHour(hour) && selectedHour !== hour && "bg-green-500/20 text-green-700 dark:text-green-300 font-semibold hover:bg-green-500/30"
)}
@@ -160,15 +160,15 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
))}
</div>
</ScrollArea>
<ScrollArea className="h-60 border-l">
<div className="p-2">
<div className="text-xs font-semibold mb-2 px-2 text-muted-foreground">Minutes</div>
<ScrollArea className="h-48 border-l">
<div className="p-1.5">
<div className="text-[10px] font-semibold mb-1.5 px-1.5 text-muted-foreground">Minutes</div>
{minutes.map((minute) => (
<Button
key={minute}
variant="ghost"
className={cn(
"w-full justify-center mb-1",
"w-full justify-center mb-0.5 h-9 text-xs",
selectedMinute === minute && "bg-primary text-primary-foreground"
)}
onClick={() => handleTimeChange(selectedHour, minute)}
@@ -180,16 +180,13 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde
</div>
</ScrollArea>
</div>
<div className="p-3 border-t bg-muted/50">
<div className="flex items-center gap-2 mb-1">
<div className="w-2 h-2 rounded-full bg-green-500"></div>
<span className="text-[10px] font-semibold text-green-600 dark:text-green-400">
<div className="p-2 border-t bg-muted/50">
<div className="flex items-center gap-1.5">
<div className="w-1.5 h-1.5 rounded-full bg-green-500"></div>
<span className="text-[9px] font-semibold text-green-600 dark:text-green-400">
Heures optimales (8h, 12h-13h, 18h-20h)
</span>
</div>
<p className="text-[9px] text-muted-foreground">
Ces créneaux maximisent l'engagement
</p>
</div>
</PopoverContent>
</Popover>
replit.md
+1 -1
View File
@@ -11,7 +11,7 @@ Preferred communication style: Simple, everyday language.
## Recent Changes
### October 28, 2025
- **Interactive Calendar with Visual Indicators**: Replaced native datetime-local input with custom DateTimePicker component featuring visual planning aids. Calendar displays occupied dates with red background (bg-red-500/20) to prevent scheduling conflicts. Time selector highlights optimal posting hours (8h, 12h-13h, 18h-20h) with green background (bg-green-500/20) and sparkle emoji to maximize audience engagement. Component includes clear button (X icon) to quickly return to immediate publishing, useEffect synchronization for external state updates, and French locale support via date-fns. Mobile calendar list still displays today's date first for quick access.
- **Interactive Calendar with Visual Indicators**: Replaced native datetime-local input with custom DateTimePicker component featuring visual planning aids. Calendar displays occupied dates with red background (bg-red-500/20) to prevent scheduling conflicts. Time selector highlights optimal posting hours (8h, 12h-13h, 18h-20h) with green background (bg-green-500/20) and sparkle emoji to maximize audience engagement. Component includes clear button (X icon) to quickly return to immediate publishing, useEffect synchronization for external state updates, and French locale support via date-fns. Time selector optimized for compactness: ScrollArea height reduced from 240px to 192px (20% smaller), button height set to 36px for touch accessibility, tighter padding and margins throughout. Mobile calendar list still displays today's date first for quick access.
- **Facebook Video Story Publishing Fix**: Fixed critical bug preventing video story publication. Facebook Graph API requires a 3-phase upload process for video stories: (1) START phase - initialize upload session and get `video_id` + `upload_url`, (2) UPLOAD phase - POST video to rupload.facebook.com endpoint with `file_url` header and OAuth authorization, (3) FINISH phase - finalize and publish story with `video_id`. Previous implementation incorrectly attempted direct upload to `/video_stories` endpoint with `file_url` parameter, causing "#100 The parameter upload_phase is required" error. Fixed by implementing proper 3-phase workflow using remote URL upload method (file_url header), avoiding need for binary chunked uploads.
### October 17, 2025