feat: add project rename/delete and section selector in task detail

src/components/TaskDetail.tsx

@@ -1,9 +1,9 @@
 import { useState, useEffect, useRef } from 'react';
 import { 
   X, Check, Trash2, Calendar, Flag, User, FolderOpen, 
-  Tag, MessageSquare, ChevronRight, AlertCircle
+  Tag, MessageSquare, ChevronRight, AlertCircle, Layers
 } from 'lucide-react';
-import type { Task, Priority, Comment } from '@/types';
+import type { Task, Priority, Comment, Section } from '@/types';
 import { cn, formatDate, getPriorityColor, getPriorityLabel } from '@/lib/utils';
 import { useTasksStore } from '@/stores/tasks';
 import { api } from '@/lib/api';
@@ -21,6 +21,8 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
   const [priority, setPriority] = useState<Priority>(task.priority);
   const [assigneeId, setAssigneeId] = useState(task.assigneeId || '');
   const [projectId, setProjectId] = useState(task.projectId || '');
+  const [sectionId, setSectionId] = useState(task.sectionId || '');
+  const [availableSections, setAvailableSections] = useState<Section[]>([]);
   const [comments, setComments] = useState<Comment[]>([]);
   const [isDeleting, setIsDeleting] = useState(false);
   const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -34,6 +36,7 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
     setPriority(task.priority);
     setAssigneeId(task.assigneeId || '');
     setProjectId(task.projectId || '');
+    setSectionId(task.sectionId || '');
   }, [task]);
 
   useEffect(() => {
@@ -42,6 +45,22 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
     }
   }, []);
 
+  // Load sections for the current project
+  useEffect(() => {
+    if (projectId) {
+      const proj = projects.find(p => p.id === projectId);
+      if (proj?.sections) {
+        setAvailableSections(proj.sections);
+      } else {
+        api.getProject(projectId).then((p) => {
+          setAvailableSections(p.sections || []);
+        }).catch(() => setAvailableSections([]));
+      }
+    } else {
+      setAvailableSections([]);
+    }
+  }, [projectId, projects]);
+
   useEffect(() => {
     api.getComments(task.id).then(setComments).catch(() => setComments([]));
   }, [task.id]);
@@ -76,7 +95,13 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
 
   const handleProjectChange = (value: string) => {
     setProjectId(value);
-    updateTask(task.id, { projectId: value || undefined });
+    setSectionId('');
+    updateTask(task.id, { projectId: value || undefined, sectionId: undefined });
+  };
+
+  const handleSectionChange = (value: string) => {
+    setSectionId(value);
+    updateTask(task.id, { sectionId: value || undefined });
   };
 
   const handleDelete = async () => {
@@ -210,6 +235,29 @@ export function TaskDetail({ task, onClose }: TaskDetailProps) {
                 </div>
               </div>
 
+              {/* Section */}
+              {projectId && availableSections.length > 0 && (
+                <div className="flex items-center gap-3">
+                  <Layers className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                  <span className="text-sm text-gray-500 w-20">Section</span>
+                  <select
+                    value={sectionId}
+                    onChange={(e) => handleSectionChange(e.target.value)}
+                    className={cn(
+                      'text-sm border border-gray-200 rounded px-2 py-1 outline-none focus:border-blue-400 bg-white cursor-pointer',
+                      sectionId ? 'text-gray-900' : 'text-gray-400'
+                    )}
+                  >
+                    <option value="">No section</option>
+                    {availableSections.map((s) => (
+                      <option key={s.id} value={s.id}>
+                        {s.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              )}
+
               {/* Due Date */}
               <div className="flex items-center gap-3">
                 <Calendar className="w-4 h-4 text-gray-400 flex-shrink-0" />

src/pages/Project.tsx

@@ -104,7 +104,68 @@ export function ProjectPage() {
             className="w-4 h-4 rounded"
             style={{ backgroundColor: project.color }}
           />
-          <h1 className="text-2xl font-bold text-gray-900">{project.name}</h1>
+          {isEditing ? (
+            <input
+              ref={nameInputRef}
+              type="text"
+              value={editName}
+              onChange={(e) => setEditName(e.target.value)}
+              onBlur={handleSaveRename}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') handleSaveRename();
+                if (e.key === 'Escape') setIsEditing(false);
+              }}
+              className="text-2xl font-bold text-gray-900 border-b-2 border-blue-400 outline-none bg-transparent"
+            />
+          ) : (
+            <h1
+              className="text-2xl font-bold text-gray-900 cursor-pointer hover:text-gray-700"
+              onClick={handleStartRename}
+              title="Click to rename"
+            >
+              {project.name}
+            </h1>
+          )}
+          {!isEditing && !project.isInbox && (
+            <div className="flex items-center gap-1">
+              <button
+                onClick={handleStartRename}
+                className="p-1 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition-colors"
+                title="Rename project"
+              >
+                <Pencil className="w-4 h-4" />
+              </button>
+              {showDeleteConfirm ? (
+                <div className="flex items-center gap-1 ml-2">
+                  <span className="text-xs text-red-600 flex items-center gap-1">
+                    <AlertCircle className="w-3 h-3" />
+                    Delete?
+                  </span>
+                  <button
+                    onClick={() => setShowDeleteConfirm(false)}
+                    className="px-2 py-1 text-xs text-gray-600 hover:bg-gray-100 rounded"
+                  >
+                    Cancel
+                  </button>
+                  <button
+                    onClick={handleDeleteProject}
+                    disabled={isDeleting}
+                    className="px-2 py-1 text-xs font-medium text-white bg-red-600 hover:bg-red-700 rounded disabled:opacity-50"
+                  >
+                    {isDeleting ? 'Deleting...' : 'Delete'}
+                  </button>
+                </div>
+              ) : (
+                <button
+                  onClick={() => setShowDeleteConfirm(true)}
+                  className="p-1 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded transition-colors"
+                  title="Delete project"
+                >
+                  <Trash2 className="w-4 h-4" />
+                </button>
+              )}
+            </div>
+          )}
         </div>
         <div className="flex items-center gap-1 bg-gray-100 rounded-lg p-0.5">
           <button