From 9b31cc50834d0874173a379f3a10dca77af2a53b Mon Sep 17 00:00:00 2001
From: paul-nothaft <40865108-paul-nothaft@users.noreply.replit.com>
Date: Thu, 11 Sep 2025 10:02:12 +0000
Subject: [PATCH] Improve task calendar usability and task creation
 functionality

Add `onKeyDown` handler to the task title input in `TaskCreationModal.tsx` to allow task creation with the Enter key. Enhance `TasksWithCalendar.tsx` to include `hoveredDate` state and `handleDragEnter`/`handleDragLeave` handlers for visual feedback during drag-and-drop operations on the calendar. Adjust the calendar's positioning to be fixed at the bottom with full width and modify styling for task cards during drag operations. Fix the display of the "today" border on the calendar.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: ceced2fc-aa46-458d-ba87-ddd4b7bb1518
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/659922a9-0087-461c-90dd-6d9a58b81d4d/ceced2fc-aa46-458d-ba87-ddd4b7bb1518/sqJIbnU
---
 .replit                                     |   4 +
 client/src/components/TaskCreationModal.tsx |   8 ++
 client/src/components/TasksWithCalendar.tsx | 118 +++++++++++---------
 replit.md                                   |  87 +++++++++++++++
 4 files changed, 165 insertions(+), 52 deletions(-)
 create mode 100644 replit.md

diff --git a/.replit b/.replit
index 74ed208..930416a 100644
--- a/.replit
+++ b/.replit
@@ -14,6 +14,10 @@ run = ["npm", "run", "start"]
 localPort = 5000
 externalPort = 80
 
+[[ports]]
+localPort = 41353
+externalPort = 3000
+
 [env]
 PORT = "5000"
 
diff --git a/client/src/components/TaskCreationModal.tsx b/client/src/components/TaskCreationModal.tsx
index c45bb2a..c98005b 100644
--- a/client/src/components/TaskCreationModal.tsx
+++ b/client/src/components/TaskCreationModal.tsx
@@ -46,6 +46,13 @@ export default function TaskCreationModal({ isOpen, onClose, onSave }: TaskCreat
     onClose();
   };
 
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSave();
+    }
+  };
+
   const handleClose = () => {
     setTitle('');
     setDescription('');
@@ -70,6 +77,7 @@ export default function TaskCreationModal({ isOpen, onClose, onSave }: TaskCreat
               placeholder="What needs to be done?"
               value={title}
               onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={handleKeyDown}
               className="text-base"
               data-testid="input-task-title"
               autoFocus
diff --git a/client/src/components/TasksWithCalendar.tsx b/client/src/components/TasksWithCalendar.tsx
index 4351bec..c83677e 100644
--- a/client/src/components/TasksWithCalendar.tsx
+++ b/client/src/components/TasksWithCalendar.tsx
@@ -25,6 +25,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
   const [filterBy, setFilterBy] = useState<FilterOption>('all');
   const [calendarStartDate, setCalendarStartDate] = useState(startOfToday());
   const [draggedTask, setDraggedTask] = useState<string | null>(null);
+  const [hoveredDate, setHoveredDate] = useState<Date | null>(null);
   const [completionModal, setCompletionModal] = useState<{ isOpen: boolean; task: Task | null }>({
     isOpen: false,
     task: null
@@ -124,6 +125,16 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
     e.dataTransfer.dropEffect = 'move';
   };
 
+  const handleDragEnter = (date: Date) => {
+    if (draggedTask) {
+      setHoveredDate(date);
+    }
+  };
+
+  const handleDragLeave = () => {
+    setHoveredDate(null);
+  };
+
   const navigateCalendar = (direction: 'prev' | 'next') => {
     const newDate = addDays(calendarStartDate, direction === 'next' ? 7 : -7);
     setCalendarStartDate(newDate);
@@ -235,8 +246,8 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                 draggable
                 onDragStart={(e) => handleDragStart(task.id, e)}
                 onDragEnd={handleDragEnd}
-                className={`cursor-move transition-transform ${
-                  draggedTask === task.id ? 'opacity-50 scale-95' : 'hover:scale-[1.02]'
+                className={`cursor-move transition-transform hover-elevate ${
+                  draggedTask === task.id ? 'opacity-50 scale-95' : ''
                 }`}
               >
                 <TaskCard
@@ -269,59 +280,62 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
         )}
       </div>
 
-      {/* Calendar Section */}
-      <div className="space-y-3 border-t pt-4">
-        {/* Calendar Header */}
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2">
-            <Calendar className="w-5 h-5 text-primary" />
-            <h3 className="text-base font-semibold" data-testid="text-calendar-title">
-              Next 7 Days
-            </h3>
-          </div>
-          
-          <div className="flex items-center gap-2">
-            <Button 
-              variant="outline" 
-              size="icon"
-              onClick={() => navigateCalendar('prev')}
-              data-testid="button-prev-week"
-              className="w-8 h-8"
-            >
-              <ChevronLeft className="w-4 h-4" />
-            </Button>
+      {/* Calendar Section - Fixed at bottom with full width */}
+      <div className="fixed bottom-16 left-0 right-0 bg-background border-t shadow-lg z-10">
+        <div className="p-4 max-h-[35vh] overflow-y-auto">
+          {/* Calendar Header */}
+          <div className="flex items-center justify-between mb-3">
+            <div className="flex items-center gap-2">
+              <Calendar className="w-4 h-4 text-primary" />
+              <h3 className="text-sm font-semibold" data-testid="text-calendar-title">
+                Next 7 Days
+              </h3>
+            </div>
             
-            <Button 
-              variant="outline" 
-              size="icon"
-              onClick={() => navigateCalendar('next')}
-              data-testid="button-next-week"
-              className="w-8 h-8"
-            >
-              <ChevronRight className="w-4 h-4" />
-            </Button>
+            <div className="flex items-center gap-2">
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => navigateCalendar('prev')}
+                data-testid="button-prev-week"
+              >
+                <ChevronLeft className="w-3 h-3" />
+              </Button>
+              
+              <Button 
+                variant="outline" 
+                size="icon"
+                onClick={() => navigateCalendar('next')}
+                data-testid="button-next-week"
+              >
+                <ChevronRight className="w-3 h-3" />
+              </Button>
+            </div>
           </div>
-        </div>
 
-        {/* Horizontal Scrollable Calendar */}
-        <div className="overflow-x-auto pb-2">
-          <div className="flex gap-3 min-w-max">
+          {/* Full Width Calendar Grid - Responsive */}
+          <div className="grid grid-cols-4 sm:grid-cols-7 gap-2">
             {dates.map((date, index) => {
               const dayTasks = getTasksForDate(date);
               const isToday = isSameDay(date, new Date());
               const isWeekend = date.getDay() === 0 || date.getDay() === 6;
+              const isHovered = hoveredDate && isSameDay(date, hoveredDate);
               
               return (
                 <Card 
                   key={index}
-                  className={`flex-shrink-0 w-32 p-3 min-h-[120px] transition-all ${
-                    isToday ? 'ring-2 ring-primary' : ''
+                  className={`p-2 min-h-[100px] transition-all border-2 ${
+                    isToday ? 'border-primary ring-1 ring-primary ring-offset-1 ring-offset-background' : 'border-border'
                   } ${
                     isWeekend ? 'bg-muted/30' : ''
                   } ${
-                    draggedTask ? 'hover:ring-2 hover:ring-primary/50 hover:bg-primary/5' : 'hover-elevate'
+                    isHovered && draggedTask ? 'ring-2 ring-primary bg-primary/10 border-primary' : ''
+                  } ${
+                    draggedTask && !isHovered ? 'border-dashed border-primary/30' : ''
                   }`}
                   onDragOver={handleDragOver}
+                  onDragEnter={() => handleDragEnter(date)}
+                  onDragLeave={handleDragLeave}
                   onDrop={(e) => handleDrop(date, e)}
                   onClick={() => {
                     console.log('Date selected:', date.toLocaleDateString());
@@ -332,7 +346,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                     <div className="text-xs text-muted-foreground font-medium">
                       {format(date, 'EEE')}
                     </div>
-                    <div className={`text-sm font-semibold ${
+                    <div className={`text-xs font-semibold ${
                       isToday ? 'text-primary' : ''
                     }`}>
                       {format(date, 'MMM d')}
@@ -353,7 +367,7 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                           variant="outline" 
                           className="w-full justify-start text-xs p-1 h-auto text-left"
                         >
-                          <div className="truncate">
+                          <div className="truncate text-xs">
                             {task.title}
                           </div>
                         </Badge>
@@ -361,18 +375,20 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
                     ))}
                     
                     {dayTasks.length > 2 && (
-                      <Badge variant="secondary" className="w-full justify-center text-xs">
+                      <Badge variant="secondary" className="w-full justify-center text-xs py-0">
                         +{dayTasks.length - 2}
                       </Badge>
                     )}
                     
                     {dayTasks.length === 0 && (
-                      <div className={`text-center text-xs py-4 rounded border-2 border-dashed transition-colors ${
-                        draggedTask 
-                          ? 'border-primary/50 text-primary/70 bg-primary/5' 
-                          : 'border-muted text-muted-foreground'
+                      <div className={`text-center text-xs py-2 rounded border border-dashed transition-all ${
+                        isHovered && draggedTask
+                          ? 'border-primary text-primary bg-primary/5' 
+                          : draggedTask
+                          ? 'border-primary/50 text-primary/70' 
+                          : 'border-muted-foreground/30 text-muted-foreground'
                       }`}>
-                        {draggedTask ? 'Drop here' : 'No tasks'}
+                        {isHovered && draggedTask ? '✓ Drop here' : draggedTask ? 'Drop' : ''}
                       </div>
                     )}
                   </div>
@@ -381,13 +397,11 @@ export default function TasksWithCalendar({ tasks, onTaskUpdate, onTaskEdit }: T
             })}
           </div>
         </div>
-        
-        {/* Calendar Instructions */}
-        <div className="text-xs text-muted-foreground text-center">
-          Drag tasks from above to schedule them • Use arrow buttons to see more days
-        </div>
       </div>
 
+      {/* Add bottom padding to prevent content overlap */}
+      <div className="h-[40vh]" />
+
       {/* Time Completion Modal */}
       <TimeCompletionModal
         isOpen={completionModal.isOpen}
diff --git a/replit.md b/replit.md
new file mode 100644
index 0000000..89da918
--- /dev/null
+++ b/replit.md
@@ -0,0 +1,87 @@
+# Personal Task Management App - TaskFlow
+
+## Overview
+
+TaskFlow is a modern, mobile-first personal task management application designed to help users organize and track their tasks efficiently. The app features a clean, intuitive interface inspired by iOS Reminders, Linear, and Notion, focusing on utility and ease of use. Built with React and TypeScript, it offers multiple views for task organization including calendar scheduling, kanban boards, project templates, and time tracking capabilities.
+
+## User Preferences
+
+Preferred communication style: Simple, everyday language.
+
+## System Architecture
+
+### Frontend Architecture
+
+**React + TypeScript Foundation**: The application is built using React 18 with TypeScript for type safety and better development experience. The codebase follows a component-based architecture with clear separation of concerns.
+
+**UI Component System**: Utilizes shadcn/ui components built on top of Radix UI primitives, providing accessible and customizable components. The design system implements a consistent color palette supporting both light and dark modes, with Inter font for typography.
+
+**State Management**: Uses React's built-in state management with useState and context for local component state. TanStack Query is integrated for server state management and API data fetching with caching capabilities.
+
+**Styling Approach**: Implements Tailwind CSS for utility-first styling with custom CSS variables for theming. The design system supports automatic dark/light mode switching and maintains consistent spacing using Tailwind's spacing units.
+
+**Mobile-First Design**: The interface is optimized for mobile devices with touch-friendly interactions, bottom navigation, and responsive layouts that adapt to different screen sizes.
+
+### Backend Architecture
+
+**Express.js Server**: Simple Node.js server using Express for API routing and middleware handling. The server structure separates route definitions from business logic and includes error handling middleware.
+
+**Storage Layer Interface**: Implements an abstraction layer (IStorage interface) that currently uses in-memory storage but can be easily swapped for database implementations. This design allows for flexible data persistence strategies.
+
+**Development Setup**: Uses Vite for development server with hot module replacement and build optimization. ESBuild handles server-side TypeScript compilation for production builds.
+
+### Data Storage Solutions
+
+**Current Implementation**: Uses in-memory storage via MemStorage class for rapid prototyping and development. All data is stored in JavaScript Maps and includes basic CRUD operations for users.
+
+**Database Schema**: Configured for PostgreSQL using Drizzle ORM with type-safe schema definitions. The schema currently defines a users table with ID, username, and password fields, with room for task-related tables.
+
+**Migration Strategy**: Drizzle Kit is configured for database migrations and schema management, supporting both development and production deployments.
+
+### Authentication and Authorization
+
+**Session-Based Approach**: The application is structured to support session-based authentication using connect-pg-simple for PostgreSQL session storage, though the current implementation focuses on task management features.
+
+**User Management**: Basic user entity structure is defined with support for usernames and encrypted passwords, providing foundation for multi-user task management.
+
+### Task Management Features
+
+**Multiple View Modes**: Supports traditional task lists, calendar view for date-based organization, and kanban boards for workflow management. Each view offers drag-and-drop functionality for task manipulation.
+
+**Time Tracking**: Integrated time tracking system allows users to start/stop timers on tasks and manually log time. Includes completion modal for time entry when marking tasks as done.
+
+**Project Templates**: Reusable project templates allow users to quickly create structured task sets with predefined workflows and timelines.
+
+**Priority and Status Management**: Tasks support priority levels (low, medium, high) and status tracking (todo, in progress, done) with visual indicators.
+
+## External Dependencies
+
+### UI and Styling
+- **Radix UI**: Provides accessible, unstyled component primitives for building the user interface
+- **Tailwind CSS**: Utility-first CSS framework for responsive design and theming
+- **Lucide React**: Icon library for consistent iconography throughout the application
+- **Google Fonts (Inter)**: Typography system for clean, readable text
+
+### State Management and Data Fetching
+- **TanStack Query**: Server state management with caching, background refetching, and optimistic updates
+- **React Hook Form**: Form handling with validation support
+- **Zod**: Runtime type validation for form data and API responses
+
+### Database and ORM
+- **Drizzle ORM**: Type-safe ORM for PostgreSQL database interactions
+- **Neon Database**: PostgreSQL-compatible serverless database platform
+- **Drizzle Kit**: Database migration and schema management tools
+
+### Development and Build Tools
+- **Vite**: Fast development server and build tool with hot module replacement
+- **ESBuild**: Fast JavaScript/TypeScript bundler for production builds
+- **TSX**: TypeScript execution engine for development server
+
+### Date and Time Management
+- **date-fns**: Comprehensive date utility library for calendar functionality and date manipulation
+
+### Session Management
+- **connect-pg-simple**: PostgreSQL session store for Express.js applications
+- **Express Session**: Server-side session management middleware
+
+The application architecture prioritizes developer experience, type safety, and scalability while maintaining a clean separation between frontend components, server logic, and data persistence layers.
\ No newline at end of file