Now I have the context I need. The Post type needs to be extended to include a status field for the mobile component. Let me create the CalendarMobile component:
Now let me create a demo page for the mobile calendar:
I've created the CalendarMobile component with an iOS Calendar-inspired layout. The top section features a compact monthly grid with single-letter day headers, date cells showing colored platform dots (max 3 with a "+" indicator for more), a filled accent circle for selected dates, and a subtle ring for today. The bottom section displays the selected date as a heading with a scrollable post list featuring platform-colored left borders, titles, platform names, and status badges (Draft/Scheduled/Published). An empty state shows "No posts — Tap + to add one", and a floating accent-colored "+" button triggers onDateClick for the selected date. A demo page at /mobile showcases the component.
Update the PostChip component inside calendo-calendar.tsx.
The chip needs visual distinction based on post status:
Draft → dashed border (2px dashed) in the platform color, slightly transparent background (opacity 0.7)
Scheduled → solid chip, full opacity (current default look)
Published → solid chip with a small checkmark icon on the left, reduced opacity (0.6)
The Post interface needs a status field added:
status: "draft" | "scheduled" | "published"
Everything else stays the same — platform colors, truncated title, click handler.
Now let me update the sample posts in the demo page to include status values:
I've updated the PostChip component to display visual distinction based on post status. Draft posts now show a dashed 2px border in the platform color with a slightly transparent background (70% opacity). Scheduled posts remain solid with full opacity (the default look). Published posts display a small checkmark icon on the left and have reduced opacity (0.6). I also added the PostStatus type export and made the status field optional on the Post interface (defaulting to "scheduled"), then updated the sample posts to showcase all three statuses.
Update the CalendoNavbar component to add a Today button.
Changes needed:
Add a "Today" button between the app name and the month display
Button is small, outline style, subtle — similar to the Logout button
On click calls onTodayClick()
On hover shows accent color #E1306C
Add onTodayClick to props
Everything else stays the same — app name left, month center, email + logout right.