From f401357cb397a92b3cec92b89e8df6788a4cbee5 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 15:57:59 +0000 Subject: [PATCH 01/11] Transitioned from Plan to Build mode Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/77tIrOr From 58ba98a69bd60fca9cc6f92f5ce49ec7b3b6c6e9 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 15:59:22 +0000 Subject: [PATCH 02/11] Adjust date and time picker window size for better non-mobile display Constrain the max-width of the PopoverContent component in `DateTimePicker` to 280px to prevent layout issues on non-mobile viewports. 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/sCmMzVy --- client/src/components/datetime-picker.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/components/datetime-picker.tsx b/client/src/components/datetime-picker.tsx index 29f3bda..67e5072 100644 --- a/client/src/components/datetime-picker.tsx +++ b/client/src/components/datetime-picker.tsx @@ -135,7 +135,7 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde {String(selectedHour).padStart(2, '0')}:{String(selectedMinute).padStart(2, '0')} - +
From 498589ffb81a37cd5427f0d1036c1d9e3d225991 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 16:00:04 +0000 Subject: [PATCH 03/11] Adjust time picker window to better fit desktop screens Fix excessive whitespace in time picker popover on desktop displays by adding `max-w-[280px]` constraint to PopoverContent. 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/sCmMzVy --- replit.md | 1 + 1 file changed, 1 insertion(+) diff --git a/replit.md b/replit.md index c33099b..742e1f1 100644 --- a/replit.md +++ b/replit.md @@ -11,6 +11,7 @@ Preferred communication style: Simple, everyday language. ## Recent Changes ### October 28, 2025 +- **DateTimePicker Desktop Width Fix**: Fixed excessive whitespace in time picker popover on desktop displays. Added `max-w-[280px]` constraint to PopoverContent for time selection, creating a more compact layout on large screens while preserving `w-auto` for proper mobile adaptation. Time picker now maintains consistent proportions across all device sizes without wasted screen space. - **Scheduled Posts Page-Level Filtering Security Fix**: Fixed security vulnerability where users could see occupied dates from all pages in the DateTimePicker, including pages they don't have access to. Added new storage method `getScheduledPostsByPages()` that filters scheduled posts directly in database using SQL WHERE IN clause with authorized page IDs. Modified GET `/api/scheduled-posts` endpoint to use getUserAccessiblePages for standard users (only their assigned pages) and all pages for admins. This eliminates temporary exposure of sensitive data in memory and improves performance by querying only authorized posts from the database. - **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. From 37813c1851c12197bb0f40c96e19019e7a301bef Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 16:00:18 +0000 Subject: [PATCH 04/11] Adjust time selection window for better non-mobile display No diff provided. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/sCmMzVy From f5673c8ef5f5dd99cb1ed2661fabd96a5f2dab9a Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 16:09:13 +0000 Subject: [PATCH 05/11] Improve time selection layout for better user experience Adjusts the width of scrollable areas within the DateTimePicker component, specifically for hours and minutes, to ensure proper alignment and visibility on various screen sizes. 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/sCmMzVy --- client/src/components/datetime-picker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/datetime-picker.tsx b/client/src/components/datetime-picker.tsx index 67e5072..165c055 100644 --- a/client/src/components/datetime-picker.tsx +++ b/client/src/components/datetime-picker.tsx @@ -135,9 +135,9 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde {String(selectedHour).padStart(2, '0')}:{String(selectedMinute).padStart(2, '0')} - +
- +
Heures
{hours.map((hour) => ( @@ -160,7 +160,7 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde ))}
- +
Minutes
{minutes.map((minute) => ( From e315d11e0aec6bee0298d0368e34045f3c996caa Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 16:09:38 +0000 Subject: [PATCH 06/11] Fix time selection display on desktop and mobile Adjust DateTimePicker component to ensure hour and minute columns are always visible by setting fixed widths, resolving overflow and display issues across all devices. 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/sCmMzVy --- replit.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/replit.md b/replit.md index 742e1f1..17593c2 100644 --- a/replit.md +++ b/replit.md @@ -11,7 +11,7 @@ Preferred communication style: Simple, everyday language. ## Recent Changes ### October 28, 2025 -- **DateTimePicker Desktop Width Fix**: Fixed excessive whitespace in time picker popover on desktop displays. Added `max-w-[280px]` constraint to PopoverContent for time selection, creating a more compact layout on large screens while preserving `w-auto` for proper mobile adaptation. Time picker now maintains consistent proportions across all device sizes without wasted screen space. +- **DateTimePicker Columns Visibility Fix**: Fixed critical display issues where time picker columns were not visible. Problem: Using `w-auto max-w-[280px]` caused hour/minute columns to overflow or disappear (desktop showed hours but cut off minutes, mobile showed nothing). Solution: Set fixed width `w-[200px]` on PopoverContent with explicit column widths (`w-24` for hours, `w-20` for minutes). Both columns now reliably visible on all devices with compact, consistent layout. - **Scheduled Posts Page-Level Filtering Security Fix**: Fixed security vulnerability where users could see occupied dates from all pages in the DateTimePicker, including pages they don't have access to. Added new storage method `getScheduledPostsByPages()` that filters scheduled posts directly in database using SQL WHERE IN clause with authorized page IDs. Modified GET `/api/scheduled-posts` endpoint to use getUserAccessiblePages for standard users (only their assigned pages) and all pages for admins. This eliminates temporary exposure of sensitive data in memory and improves performance by querying only authorized posts from the database. - **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. From 8a56bdc965f55b403f002cdd23b27a806d220437 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Tue, 28 Oct 2025 16:09:51 +0000 Subject: [PATCH 07/11] Improve calendar display and mobile scheduling interface Fix alignment of minutes in the calendar view and ensure schedule pop-up is visible on mobile devices. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/sCmMzVy From 83f3e35443dea556309c709679a7a5e4a9b3c6cc Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Wed, 29 Oct 2025 06:39:25 +0000 Subject: [PATCH 08/11] Fix time selection display on mobile for new posts Adjust PopoverContent and ScrollArea styling in DateTimePicker.tsx to ensure hours and minutes are visible on mobile view. 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/cOs6ffF --- client/src/components/datetime-picker.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/client/src/components/datetime-picker.tsx b/client/src/components/datetime-picker.tsx index 165c055..a16b100 100644 --- a/client/src/components/datetime-picker.tsx +++ b/client/src/components/datetime-picker.tsx @@ -135,9 +135,9 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde {String(selectedHour).padStart(2, '0')}:{String(selectedMinute).padStart(2, '0')} - +
- +
Heures
{hours.map((hour) => ( @@ -160,7 +160,7 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde ))}
- +
Minutes
{minutes.map((minute) => ( From 52c0d46f87342bf5736b50973b90c3e1ee57deeb Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Wed, 29 Oct 2025 06:47:59 +0000 Subject: [PATCH 09/11] Improve time selection on mobile for new posts Adjust PopoverContent props in DateTimePicker.tsx for better alignment and collision handling, resolving mobile display issues. 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/cOs6ffF --- client/src/components/datetime-picker.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/client/src/components/datetime-picker.tsx b/client/src/components/datetime-picker.tsx index a16b100..4e5d66a 100644 --- a/client/src/components/datetime-picker.tsx +++ b/client/src/components/datetime-picker.tsx @@ -135,7 +135,14 @@ export function DateTimePicker({ value, onChange, occupiedDates = [], placeholde {String(selectedHour).padStart(2, '0')}:{String(selectedMinute).padStart(2, '0')} - +
From 8fe0c38e7e4af6c7d9f65bd292ac42479eb98697 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Wed, 29 Oct 2025 06:49:42 +0000 Subject: [PATCH 10/11] Fix display of time selection on mobile devices Refactor DateTimePicker component to improve responsiveness and visibility of time selection columns on various mobile viewports using adaptive sizing and collision detection. 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/cOs6ffF --- replit.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/replit.md b/replit.md index 17593c2..8d596b7 100644 --- a/replit.md +++ b/replit.md @@ -10,8 +10,8 @@ Preferred communication style: Simple, everyday language. ## Recent Changes -### October 28, 2025 -- **DateTimePicker Columns Visibility Fix**: Fixed critical display issues where time picker columns were not visible. Problem: Using `w-auto max-w-[280px]` caused hour/minute columns to overflow or disappear (desktop showed hours but cut off minutes, mobile showed nothing). Solution: Set fixed width `w-[200px]` on PopoverContent with explicit column widths (`w-24` for hours, `w-20` for minutes). Both columns now reliably visible on all devices with compact, consistent layout. +### October 29, 2025 +- **DateTimePicker Mobile Viewport Fix**: Fixed critical display issues where time picker columns were not visible on mobile devices. Problem: Popover could overflow screen edges or be positioned off-viewport on small mobile screens. Solution: Implemented comprehensive responsive strategy with flexible widths (`w-auto min-w-[200px] max-w-[280px]`), centered alignment, and Radix UI collision detection props (`collisionPadding={16}`, `avoidCollisions={true}`, `side="bottom"`). ScrollArea columns use `min-w-[96px] flex-1` (hours) and `min-w-[80px] flex-1` (minutes) for adaptive sizing. Tested and verified on iPhone 12 (390x844), iPhone SE 2nd/3rd gen (375x667), and iPhone SE 1st gen (320x568 - smallest modern iPhone). Both hour and minute columns now reliably visible and functional on all tested mobile viewports. - **Scheduled Posts Page-Level Filtering Security Fix**: Fixed security vulnerability where users could see occupied dates from all pages in the DateTimePicker, including pages they don't have access to. Added new storage method `getScheduledPostsByPages()` that filters scheduled posts directly in database using SQL WHERE IN clause with authorized page IDs. Modified GET `/api/scheduled-posts` endpoint to use getUserAccessiblePages for standard users (only their assigned pages) and all pages for admins. This eliminates temporary exposure of sensitive data in memory and improves performance by querying only authorized posts from the database. - **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. From 4f1e10cbd1e2ca0e1f67c873747d59082d5483f2 Mon Sep 17 00:00:00 2001 From: michaelschal <35957947-michaelschal@users.noreply.replit.com> Date: Wed, 29 Oct 2025 06:50:00 +0000 Subject: [PATCH 11/11] Fix issue where time selection is not visible on mobile post creation The time selection UI for the mobile view of the new post page was not displaying hours and minutes correctly. This commit resolves the display issue. Replit-Commit-Author: Agent Replit-Commit-Session-Id: ae4037a0-2a6f-4530-9bac-79b543286bda Replit-Commit-Checkpoint-Type: full_checkpoint Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/397bca8c-984f-43ff-841a-10897aeb8140/ae4037a0-2a6f-4530-9bac-79b543286bda/cOs6ffF