Add project selector in task detail, archive completed tasks

2026-01-28 18:41:11 +00:00
parent b87cb69ae0
commit 4b753cb57a
9 changed files with 177 additions and 21 deletions
--- a/src/components/CompletedSection.tsx
+++ b/src/components/CompletedSection.tsx
@@ -0,0 +1,66 @@
+import { useState } from 'react';
+import { ChevronRight, ChevronDown, Check } from 'lucide-react';
+import type { Task } from '@/types';
+import { cn } from '@/lib/utils';
+import { useTasksStore } from '@/stores/tasks';
+
+interface CompletedSectionProps {
+  tasks: Task[];
+}
+
+export function CompletedSection({ tasks }: CompletedSectionProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const { toggleComplete, setSelectedTask } = useTasksStore();
+
+  if (tasks.length === 0) return null;
+
+  return (
+    <div className="mt-6 border-t border-gray-100 pt-4">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center gap-2 text-sm font-medium text-gray-500 hover:text-gray-700 transition-colors"
+      >
+        {isOpen ? (
+          <ChevronDown className="w-4 h-4" />
+        ) : (
+          <ChevronRight className="w-4 h-4" />
+        )}
+        Completed ({tasks.length})
+      </button>
+
+      {isOpen && (
+        <div className="mt-2 space-y-1">
+          {tasks.map((task) => (
+            <div
+              key={task.id}
+              className="flex items-center gap-3 px-3 py-2 rounded-lg hover:bg-gray-50 cursor-pointer group opacity-60"
+              onClick={() => setSelectedTask(task)}
+            >
+              <button
+                onClick={(e) => {
+                  e.stopPropagation();
+                  toggleComplete(task.id);
+                }}
+                className="flex-shrink-0 w-5 h-5 rounded-full bg-gray-400 border-2 border-gray-400 flex items-center justify-center"
+              >
+                <Check className="w-3 h-3 text-white" />
+              </button>
+              <span className="text-sm text-gray-500 line-through">
+                {task.title}
+              </span>
+              {task.project && (
+                <span className="ml-auto flex items-center gap-1.5 text-xs text-gray-400">
+                  <span
+                    className="w-2 h-2 rounded"
+                    style={{ backgroundColor: task.project.color }}
+                  />
+                  {task.project.name}
+                </span>
+              )}
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}