Paul Bailey
a037117b15
- Add touch-optimized tap targets (44x44px minimum for iOS) - Enhance mobile responsiveness across all components - Improve button sizing and spacing for touch interactions - Add responsive text sizing and layout adjustments - Implement mobile-first modal behavior (bottom sheet on mobile) - Enhance form controls with better touch targets - Add active states for better touch feedback - Improve grid layouts for various screen sizes - Add smooth scrolling and better focus states - Optimize FilterPanel for mobile with grid layouts - Enhance all interactive elements with tap-target classes Requirements: 7.1, 7.2
92 lines
2.9 KiB
TypeScript
92 lines
2.9 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { useRouter } from 'next/navigation'
|
|
import { createItem } from '@/lib/actions'
|
|
import { Plus } from 'lucide-react'
|
|
|
|
interface InlineItemCreateProps {
|
|
listId: string
|
|
}
|
|
|
|
export default function InlineItemCreate({ listId }: InlineItemCreateProps) {
|
|
const router = useRouter()
|
|
const [isCreating, setIsCreating] = useState(false)
|
|
const [title, setTitle] = useState('')
|
|
const [isSubmitting, setIsSubmitting] = useState(false)
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
|
|
if (!title.trim() || isSubmitting) {
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
|
|
try {
|
|
await createItem(listId, title.trim())
|
|
setTitle('')
|
|
setIsCreating(false)
|
|
router.refresh()
|
|
} catch (error) {
|
|
console.error('Error creating item:', error)
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
const handleCancel = () => {
|
|
setTitle('')
|
|
setIsCreating(false)
|
|
}
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
handleCancel()
|
|
}
|
|
}
|
|
|
|
if (!isCreating) {
|
|
return (
|
|
<button
|
|
onClick={() => setIsCreating(true)}
|
|
className="w-full flex items-center gap-2 sm:gap-3 px-4 sm:px-5 py-3 sm:py-4 bg-white border-2 border-dashed border-gray-300 rounded-lg text-gray-600 hover:border-blue-400 hover:text-blue-600 active:border-blue-500 active:text-blue-700 transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
<Plus size={20} className="flex-shrink-0" />
|
|
<span>Add a task</span>
|
|
</button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={handleSubmit} className="bg-white border-2 border-blue-400 rounded-lg p-4 sm:p-5 shadow-sm">
|
|
<input
|
|
type="text"
|
|
value={title}
|
|
onChange={(e) => setTitle(e.target.value)}
|
|
onKeyDown={handleKeyDown}
|
|
placeholder="Enter task title..."
|
|
autoFocus
|
|
className="w-full px-3 sm:px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 mb-3 sm:mb-4 text-sm sm:text-base"
|
|
/>
|
|
<div className="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleCancel}
|
|
className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-gray-200 hover:bg-gray-300 active:bg-gray-400 text-gray-700 rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={!title.trim() || isSubmitting}
|
|
className="w-full sm:w-auto px-4 sm:px-5 py-2.5 sm:py-3 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 disabled:bg-blue-300 text-white rounded-lg transition-colors tap-target text-sm sm:text-base font-medium"
|
|
>
|
|
{isSubmitting ? 'Adding...' : 'Add Task'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|