feat(web): project list and mission dashboard views (#87)

Co-authored-by: Jason Woltje <jason@diversecanvas.com>
Co-committed-by: Jason Woltje <jason@diversecanvas.com>

apps/web/src/components/projects/project-card.tsx

@@ -0,0 +1,44 @@
+'use client';
+
+import { cn } from '@/lib/cn';
+import type { Project } from '@/lib/types';
+
+interface ProjectCardProps {
+  project: Project;
+  onClick: (project: Project) => void;
+}
+
+const statusColors: Record<string, string> = {
+  active: 'bg-success/20 text-success',
+  paused: 'bg-warning/20 text-warning',
+  completed: 'bg-blue-600/20 text-blue-400',
+  archived: 'bg-gray-600/20 text-gray-400',
+};
+
+export function ProjectCard({ project, onClick }: ProjectCardProps): React.ReactElement {
+  return (
+    <button
+      type="button"
+      onClick={() => onClick(project)}
+      className="w-full rounded-lg border border-surface-border bg-surface-card p-4 text-left transition-colors hover:border-gray-500"
+    >
+      <div className="flex items-start justify-between">
+        <h3 className="text-sm font-medium text-text-primary">{project.name}</h3>
+        <span
+          className={cn(
+            'rounded-full px-2 py-0.5 text-xs',
+            statusColors[project.status] ?? 'bg-gray-600/20 text-gray-400',
+          )}
+        >
+          {project.status}
+        </span>
+      </div>
+      {project.description && (
+        <p className="mt-2 line-clamp-2 text-xs text-text-muted">{project.description}</p>
+      )}
+      <p className="mt-3 text-xs text-text-muted">
+        Created {new Date(project.createdAt).toLocaleDateString()}
+      </p>
+    </button>
+  );
+}