Implemented Phase 4

package.json

@@ -7,7 +7,9 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:run": "vitest run"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.7.7",
@@ -21,6 +23,8 @@
     "zustand": "^5.0.9"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.1",
     "@types/react": "^18.2.43",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
@@ -29,7 +33,9 @@
     "eslint": "^8.55.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^27.4.0",
     "typescript": "^5.2.2",
-    "vite": "^5.0.8"
+    "vite": "^5.0.8",
+    "vitest": "^4.0.16"
   }
 }

src/components/EndZoneDropTarget.tsx

@@ -0,0 +1,97 @@
+import { Box, Typography } from '@mui/material'
+import { useEffect, useRef, useState } from 'react'
+import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+
+interface EndZoneDropTargetProps {
+  onDrop: (draggedTaskId: string) => void
+  hasLockedTaskAtEnd: boolean
+}
+
+/**
+ * EndZoneDropTarget - a drop zone at the bottom of the task list
+ * Allows users to move tasks to the end, even past locked tasks
+ */
+export const EndZoneDropTarget = ({
+  onDrop,
+  hasLockedTaskAtEnd,
+}: EndZoneDropTargetProps) => {
+  const dropRef = useRef<HTMLDivElement>(null)
+  const [isDropTarget, setIsDropTarget] = useState(false)
+  const [isDragging, setIsDragging] = useState(false)
+
+  useEffect(() => {
+    const element = dropRef.current
+    if (!element) return
+
+    const cleanup = dropTargetForElements({
+      element,
+      getData: () => ({ type: 'end-zone' }),
+      onDragEnter: () => {
+        setIsDropTarget(true)
+        setIsDragging(true)
+      },
+      onDragLeave: () => {
+        setIsDropTarget(false)
+      },
+      onDrop: ({ source }) => {
+        setIsDropTarget(false)
+        setIsDragging(false)
+        const draggedTaskId = source.data.taskId as string
+        if (draggedTaskId) {
+          onDrop(draggedTaskId)
+        }
+      },
+    })
+
+    // Listen for global drag events to show the zone
+    const handleDragStart = () => setIsDragging(true)
+    const handleDragEnd = () => {
+      setIsDragging(false)
+      setIsDropTarget(false)
+    }
+
+    document.addEventListener('dragstart', handleDragStart)
+    document.addEventListener('dragend', handleDragEnd)
+
+    return () => {
+      cleanup()
+      document.removeEventListener('dragstart', handleDragStart)
+      document.removeEventListener('dragend', handleDragEnd)
+    }
+  }, [onDrop])
+
+  // Only show when there's a locked task at the end and we're dragging
+  if (!hasLockedTaskAtEnd && !isDragging) return null
+
+  return (
+    <Box
+      ref={dropRef}
+      sx={{
+        minHeight: isDragging ? '80px' : '40px',
+        marginTop: '8px',
+        marginLeft: '114px', // Align with task blocks (90px time label + 24px gap)
+        width: '400px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderRadius: '8px',
+        border: isDropTarget ? '2px solid #000000' : '2px dashed #BDBDBD',
+        backgroundColor: isDropTarget ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+        opacity: isDragging ? 1 : 0.5,
+        transition: 'all 200ms ease',
+      }}
+    >
+      <Typography
+        variant="body2"
+        sx={{
+          color: isDropTarget ? '#000000' : '#9E9E9E',
+          fontSize: '13px',
+          fontWeight: isDropTarget ? 500 : 400,
+        }}
+      >
+        {isDropTarget ? 'Drop here to move to end' : 'Drop zone'}
+      </Typography>
+    </Box>
+  )
+}
+

src/components/InlineTaskForm.tsx

@@ -1,5 +1,6 @@
-import { Box, TextField, Button } from '@mui/material'
+import { Box, TextField, Button, Typography } from '@mui/material'
 import { useState, useEffect, useRef } from 'react'
+import { roundDurationUp, formatDuration } from '../utils/timeCalculations'
 
 interface InlineTaskFormProps {
   onSubmit: (title: string, durationMinutes: number) => void
@@ -13,6 +14,8 @@ interface InlineTaskFormProps {
  * - Autofocus on title input
  * - Enter to submit, Escape to cancel
  * - Default duration: 30 minutes
+ * - Duration is rounded up to nearest 15 minutes (shown dynamically)
+ * - Accepts any duration value, shows conversion before submission
  */
 export const InlineTaskForm = ({
   onSubmit,
@@ -22,6 +25,10 @@ export const InlineTaskForm = ({
   const [duration, setDuration] = useState(30)
   const titleInputRef = useRef<HTMLInputElement>(null)
 
+  // Calculate rounded duration for display
+  const roundedDuration = roundDurationUp(duration)
+  const willBeRounded = duration > 0 && duration !== roundedDuration
+
   // Autofocus on mount
   useEffect(() => {
     titleInputRef.current?.focus()
@@ -38,7 +45,9 @@ export const InlineTaskForm = ({
       return // Minimum 1 minute
     }
 
-    onSubmit(title.trim(), duration)
+    // Round up duration to nearest 15 minutes before submitting
+    const finalDuration = roundDurationUp(duration)
+    onSubmit(title.trim(), finalDuration)
     setTitle('')
     setDuration(30)
   }
@@ -73,19 +82,54 @@ export const InlineTaskForm = ({
         sx={{ mb: 1.5 }}
       />
 
-      <TextField
-        fullWidth
-        size="small"
-        type="number"
-        label="Duration (minutes)"
-        value={duration}
-        onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
-        inputProps={{
-          min: 1,
-          step: 1,
+      <Box sx={{ mb: 1.5 }}>
+        <TextField
+          fullWidth
+          size="small"
+          type="number"
+          label="Duration (minutes)"
+          value={duration}
+          onChange={(e) => setDuration(parseInt(e.target.value) || 0)}
+          inputProps={{
+            min: 1,
+            // No step restriction - allow any value
+          }}
+        />
+      </Box>
+
+      {/* Dynamic rounded duration indicator */}
+      <Box
+        sx={{
+          mb: 1.5,
+          p: 1,
+          backgroundColor: willBeRounded ? '#E3F2FD' : '#E8F5E9',
+          borderRadius: '6px',
+          border: willBeRounded ? '1px solid #90CAF9' : '1px solid #A5D6A7',
+          transition: 'all 200ms ease',
         }}
-        sx={{ mb: 1.5 }}
-      />
+      >
+        <Typography
+          variant="body2"
+          sx={{
+            fontSize: '12px',
+            color: willBeRounded ? '#1565C0' : '#2E7D32',
+            fontWeight: 500,
+            textAlign: 'center',
+          }}
+        >
+          {duration < 1 ? (
+            'Enter a duration (minimum 1 minute)'
+          ) : willBeRounded ? (
+            <>
+              {duration} min → <strong>{formatDuration(roundedDuration)}</strong> (rounded to 15-min interval)
+            </>
+          ) : (
+            <>
+              Duration: <strong>{formatDuration(roundedDuration)}</strong> ✓
+            </>
+          )}
+        </Typography>
+      </Box>
 
       <Box sx={{ display: 'flex', gap: 1 }}>
         <Button

src/components/InsertionPoint.tsx

@@ -21,44 +21,74 @@ export const InsertionPoint = ({
     <Box
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
+      onClick={onClick}
       sx={{
-        height: '0px',
+        height: '24px', // Larger hit area
+        margin: '-12px 0', // Negative margin to center in gap without adding layout height
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        opacity: isHovered || isActive ? 1 : 0,
-        transition: 'opacity 150ms ease',
         cursor: 'pointer',
         position: 'relative',
         zIndex: 10,
       }}
     >
-      <IconButton
-        onClick={onClick}
+      {/* Visual Container - only visible on hover */}
+      <Box
         sx={{
-          width: '24px',
-          height: '24px',
-          backgroundColor: '#FFFFFF',
-          border: '1.5px solid #000000',
-          transition: 'all 200ms ease',
-          padding: 0,
-          minWidth: 'unset',
-          '&:hover': {
-            backgroundColor: '#000000',
-            '& .MuiSvgIcon-root': {
-              color: '#FFFFFF',
-            },
-          },
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          width: '100%',
+          opacity: isHovered || isActive ? 1 : 0,
+          transition: 'opacity 200ms ease',
+          position: 'relative',
         }}
       >
-        <AddIcon
+        {/* Horizontal Line - gives visual cue of insertion placement */}
+        <Box
           sx={{
-            fontSize: '16px',
-            color: '#000000',
-            transition: 'color 200ms ease',
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            height: '1px',
+            backgroundColor: '#000000',
+            opacity: 0.1, // Very subtle
           }}
         />
-      </IconButton>
+
+        {/* Minimalistic Button */}
+        <IconButton
+          disableRipple
+          sx={{
+            width: '20px',
+            height: '20px',
+            backgroundColor: '#FFFFFF',
+            border: '1px solid #E0E0E0', // Subtle border initially
+            boxShadow: '0 2px 4px rgba(0,0,0,0.05)',
+            padding: 0,
+            zIndex: 1,
+            minWidth: 'unset',
+            transition: 'all 200ms ease',
+            '&:hover': {
+              backgroundColor: '#000000',
+              borderColor: '#000000',
+              transform: 'scale(1.1)',
+              '& .MuiSvgIcon-root': {
+                color: '#FFFFFF',
+              },
+            },
+          }}
+        >
+          <AddIcon
+            sx={{
+              fontSize: '14px',
+              color: '#666666', // Subtle icon color
+              transition: 'color 200ms ease',
+            }}
+          />
+        </IconButton>
+      </Box>
     </Box>
   )
 }