From c1bae8a9f7b0e9d5be666a10f4cb44a96380aca7 Mon Sep 17 00:00:00 2001
From: Manus AI <manus@queuelab.dev>
Date: Wed, 5 Nov 2025 00:05:46 -0500
Subject: [PATCH] feat: improve calendar UI and widen desktop layout for
 collaborative workflows

- Widen desktop chat/calendar area from 50% to 60% width
- Reduce desktop map area from 50% to 40% width
- Remove max-width constraint from calendar notepad (now uses full width)
- Add visual feedback to calendar icon when active (desktop and mobile)

These changes improve the user experience for collaborative geospatial workflows
by providing more horizontal space for:
- Survey requirements and detailed planning
- Multiple collaborator tags and mentions
- Location context and future event planning
- Better information density and readability

The calendar icon now highlights with an accent background when the calendar
is open, providing clear visual feedback to users about the current state.

All existing functionality is preserved, including:
- 7-day sliding date window navigation
- Location tagging with MapPin button
- Map integration (flyTo functionality)
- Chat context integration
- Mobile responsive layout (unchanged)

Files modified:
- components/chat.tsx: Desktop layout width adjustments (60/40 split)
- components/calendar-notepad.tsx: Full width usage
- components/header.tsx: Calendar icon active state (desktop)
- components/mobile-icons-bar.tsx: Calendar icon active state (mobile)
---
 components/calendar-notepad.tsx | 2 +-
 components/chat.tsx             | 4 ++--
 components/header.tsx           | 4 ++--
 components/mobile-icons-bar.tsx | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/calendar-notepad.tsx b/components/calendar-notepad.tsx
index 0c439613..8cc9d44d 100644
--- a/components/calendar-notepad.tsx
+++ b/components/calendar-notepad.tsx
@@ -91,7 +91,7 @@ export function CalendarNotepad({ chatId }: CalendarNotepadProps) {
   };
 
   return (
-    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 max-w-2xl mx-auto my-4 border">
+    <div data-testid="calendar-notepad" className="bg-card text-card-foreground shadow-lg rounded-lg p-4 w-full my-4 border">
       <div className="flex items-center justify-between mb-4">
         <button
           onClick={() => setDateOffset(dateOffset - 7)}
diff --git a/components/chat.tsx b/components/chat.tsx
index 2a775600..630a0faf 100644
--- a/components/chat.tsx
+++ b/components/chat.tsx
@@ -120,7 +120,7 @@ export function Chat({ id }: ChatProps) {
       <HeaderSearchButton />
       <div className="flex justify-start items-start">
         {/* This is the new div for scrolling */}
-      <div className="w-1/2 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
+      <div className="w-3/5 flex flex-col space-y-3 md:space-y-4 px-8 sm:px-12 pt-12 md:pt-14 pb-4 h-[calc(100vh-0.5in)] overflow-y-auto">
         {isCalendarOpen ? (
           <CalendarNotepad chatId={id} />
         ) : (
@@ -139,7 +139,7 @@ export function Chat({ id }: ChatProps) {
         )}
       </div>
         <div
-          className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
+          className="w-2/5 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }} // Added z-index
         >
           {activeView ? <SettingsView /> : <Mapbox />}
diff --git a/components/header.tsx b/components/header.tsx
index 5b5c564a..7e1574d0 100644
--- a/components/header.tsx
+++ b/components/header.tsx
@@ -17,7 +17,7 @@ import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
 
 export const Header = () => {
-  const { toggleCalendar } = useCalendarToggle()
+  const { toggleCalendar, isCalendarOpen } = useCalendarToggle()
   return (
     <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-10 backdrop-blur md:backdrop-blur-none bg-background/80 md:bg-transparent">
       <div>
@@ -38,7 +38,7 @@ export const Header = () => {
         
         <MapToggle />
         
-        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar">
+        <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" className={cn(isCalendarOpen && "bg-accent")}>
           <CalendarDays className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         
diff --git a/components/mobile-icons-bar.tsx b/components/mobile-icons-bar.tsx
index d1cd17da..1e04be66 100644
--- a/components/mobile-icons-bar.tsx
+++ b/components/mobile-icons-bar.tsx
@@ -26,7 +26,7 @@ interface MobileIconsBarProps {
 export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClick }) => {
   const [, setMessages] = useUIState<typeof AI>()
   const { clearChat } = useActions()
-  const { toggleCalendar } = useCalendarToggle()
+  const { toggleCalendar, isCalendarOpen } = useCalendarToggle()
 
   const handleNewChat = async () => {
     setMessages([])
@@ -42,7 +42,7 @@ export const MobileIconsBar: React.FC<MobileIconsBarProps> = ({ onAttachmentClic
         <CircleUserRound className="h-[1.2rem] w-[1.2rem]" />
       </Button>
       <MapToggle />
-      <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar">
+      <Button variant="ghost" size="icon" onClick={toggleCalendar} title="Open Calendar" className={isCalendarOpen ? "bg-accent" : ""}>
         <CalendarDays className="h-[1.2rem] w-[1.2rem] transition-all rotate-0 scale-100" />
       </Button>
       <Button variant="ghost" size="icon">