feat: enhance list management UI with create, edit, and delete functionality

- Add ListForm component for creating and editing lists with color picker
- Add Modal component for reusable dialog functionality
- Add DeleteListButton with confirmation dialog
- Add NewListButton for creating new lists
- Update ListCard to show edit/delete buttons on hover
- Update home page to use new list creation flow
- All components include proper error handling and loading states

Requirements: 2.1, 2.2, 2.4, 2.5

components/ListCard.tsx

@@ -1,5 +1,11 @@
+'use client'
+
 import Link from 'next/link'
-import { CheckCircle2, Circle } from 'lucide-react'
+import { useState } from 'react'
+import { Edit2 } from 'lucide-react'
+import Modal from './Modal'
+import ListForm from './ListForm'
+import DeleteListButton from './DeleteListButton'
 
 interface List {
   id: string
@@ -12,38 +18,80 @@ interface List {
 }
 
 export default function ListCard({ list }: { list: List }) {
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false)
   const completedCount = list.items.filter(item => item.completed).length
   const totalCount = list.items.length
   const progress = totalCount > 0 ? (completedCount / totalCount) * 100 : 0
 
+  const handleEditClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    setIsEditModalOpen(true)
+  }
+
+  const handleDeleteClick = (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+  }
+
   return (
-    <Link href={`/list/${list.id}`}>
-      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer">
-        <div className="flex items-center gap-3 mb-4">
-          <div 
-            className="w-4 h-4 rounded-full" 
-            style={{ backgroundColor: list.color }}
-          />
-          <h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
-        </div>
-        
-        <div className="space-y-3">
-          <div className="flex items-center justify-between text-sm text-gray-600">
-            <span>{completedCount} of {totalCount} completed</span>
-            <span>{Math.round(progress)}%</span>
+    <>
+      <Link href={`/list/${list.id}`}>
+        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow cursor-pointer group">
+          <div className="flex items-center justify-between mb-4">
+            <div className="flex items-center gap-3 flex-1 min-w-0">
+              <div 
+                className="w-4 h-4 rounded-full flex-shrink-0" 
+                style={{ backgroundColor: list.color }}
+              />
+              <h3 className="font-semibold text-gray-900 truncate">{list.title}</h3>
+            </div>
+            <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity" onClick={handleDeleteClick}>
+              <button
+                onClick={handleEditClick}
+                className="text-gray-600 hover:text-gray-900 transition-colors p-2 hover:bg-gray-100 rounded-lg"
+                aria-label="Edit list"
+              >
+                <Edit2 size={18} />
+              </button>
+              <DeleteListButton 
+                listId={list.id} 
+                listTitle={list.title}
+                itemCount={totalCount}
+              />
+            </div>
           </div>
           
-          <div className="w-full bg-gray-200 rounded-full h-2">
-            <div 
-              className="h-2 rounded-full transition-all duration-300"
-              style={{ 
-                width: `${progress}%`,
-                backgroundColor: list.color 
-              }}
-            />
+          <div className="space-y-3">
+            <div className="flex items-center justify-between text-sm text-gray-600">
+              <span>{completedCount} of {totalCount} completed</span>
+              <span>{Math.round(progress)}%</span>
+            </div>
+            
+            <div className="w-full bg-gray-200 rounded-full h-2">
+              <div 
+                className="h-2 rounded-full transition-all duration-300"
+                style={{ 
+                  width: `${progress}%`,
+                  backgroundColor: list.color 
+                }}
+              />
+            </div>
           </div>
         </div>
-      </div>
-    </Link>
+      </Link>
+
+      <Modal
+        isOpen={isEditModalOpen}
+        onClose={() => setIsEditModalOpen(false)}
+        title="Edit List"
+      >
+        <ListForm
+          list={list}
+          onCancel={() => setIsEditModalOpen(false)}
+          onSuccess={() => setIsEditModalOpen(false)}
+        />
+      </Modal>
+    </>
   )
 }