feat: quick reschedule chips + close modal on task completion

Author: nabil-boutaleb-sf

src/components/TaskDetailModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import { X, Calendar, Flag, Folder, Check } from 'lucide-react';
+import { X, Calendar, Flag, Folder, Check, Sunrise, CalendarPlus, Sofa, Briefcase, Tent, CalendarFold } from 'lucide-react';
 import { TickTickTask, TickTickProject } from '@/lib/ticktick';
 import { parseISO } from 'date-fns';
 import { TagCombobox } from './TagCombobox';
@@ -111,6 +111,68 @@ export function TaskDetailModal({ isOpen, onClose, task, onUpdate, onDelete, pro
         }
     };
 
+    // Quick reschedule helpers
+    const toDateStr = (d: Date): string => {
+        const year = d.getFullYear();
+        const month = String(d.getMonth() + 1).padStart(2, '0');
+        const day = String(d.getDate()).padStart(2, '0');
+        return `${year}-${month}-${day}T12:00:00+0000`;
+    };
+
+    const offsetDate = (days: number): string => {
+        const d = new Date();
+        d.setDate(d.getDate() + days);
+        return toDateStr(d);
+    };
+
+    const getThisSaturday = (): string => {
+        const dow = new Date().getDay(); // 0=Sun,6=Sat
+        const offset = dow === 6 ? 7 : dow === 0 ? 6 : 6 - dow;
+        return offsetDate(offset);
+    };
+
+    const getNextMonday = (): string => {
+        const dow = new Date().getDay();
+        const offset = dow === 1 ? 7 : (8 - dow) % 7;
+        return offsetDate(offset);
+    };
+
+    const getNextSaturday = (): string => {
+        const dow = new Date().getDay();
+        const offset = (dow === 6 ? 7 : dow === 0 ? 6 : 6 - dow) + 7;
+        return offsetDate(offset);
+    };
+
+    const getNextMonthFirst = (): string => {
+        const today = new Date();
+        return toDateStr(new Date(today.getFullYear(), today.getMonth() + 1, 1));
+    };
+
+    const handleQuickReschedule = (newDateStr: string) => {
+        const updates: Partial<TickTickTask> = {};
+        if (title !== task.title) updates.title = title;
+        if (content !== (task.content || '')) updates.content = content;
+        if (priority !== (task.priority || 0)) updates.priority = priority;
+        if (projectId !== task.projectId) updates.projectId = projectId;
+        const originalTags = task.tags || [];
+        if (JSON.stringify(tags) !== JSON.stringify(originalTags)) updates.tags = tags;
+        updates.startDate = newDateStr;
+        updates.dueDate = newDateStr;
+        onUpdate(task.id, updates);
+        onClose();
+    };
+
+    const RESCHEDULE_OPTIONS = [
+        { label: 'Tomorrow', icon: Sunrise, date: () => offsetDate(1) },
+        { label: 'In 3 days', icon: CalendarPlus, date: () => offsetDate(3) },
+        { label: 'This Sat', icon: Sofa, date: getThisSaturday },
+        { label: 'Next Mon', icon: Briefcase, date: getNextMonday },
+        { label: 'Next Sat', icon: Tent, date: getNextSaturday },
+        { label: 'In 15 days', icon: CalendarPlus, date: () => offsetDate(15) },
+        { label: 'Next month', icon: CalendarFold, date: getNextMonthFirst },
+        { label: 'In 30 days', icon: CalendarPlus, date: () => offsetDate(30) },
+    ];
+
     // Tag management
     const addTag = (tag: string) => {
         const trimmed = tag.trim().toLowerCase();
@@ -147,6 +209,7 @@ export function TaskDetailModal({ isOpen, onClose, task, onUpdate, onDelete, pro
                             onClick={() => {
                                 const newStatus = task.status === 2 ? 0 : 2;
                                 onUpdate(task.id, { status: newStatus });
+                                if (newStatus === 2) onClose();
                             }}
                             className={`w-5 h-5 rounded border flex items-center justify-center transition-colors ${task.status === 2
                                 ? 'bg-green-500 border-green-500 text-white'
@@ -216,6 +279,23 @@ export function TaskDetailModal({ isOpen, onClose, task, onUpdate, onDelete, pro
                         </div>
                     </div>
 
+                    {/* Quick Reschedule */}
+                    <div className="mb-4">
+                        <label className="block text-xs font-bold text-gray-400 dark:text-gray-500 uppercase tracking-widest mb-2">Reschedule</label>
+                        <div className="flex flex-wrap gap-2">
+                            {RESCHEDULE_OPTIONS.map(({ label, icon: Icon, date }) => (
+                                <button
+                                    key={label}
+                                    onClick={() => handleQuickReschedule(date())}
+                                    className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-md bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-300 hover:bg-blue-50 dark:hover:bg-blue-900/30 hover:text-blue-600 dark:hover:text-blue-400 transition-colors"
+                                >
+                                    <Icon size={12} />
+                                    {label}
+                                </button>
+                            ))}
+                        </div>
+                    </div>
+
                     {/* Tags Section */}
                     <div className="mb-6">
                         <label className="block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2">Tags</label>