2b1e342eaf
- Add Project Overview page with responsive grid and health status cards - Add Project Selector dropdown in header for quick project switching - Add Setup Wizard for registering new projects with auto-detection - Implement project drill-down: click project to view its tasks - Add global activity feed with cross-project activity log - Add project health monitoring with real-time status polling - Add deep linking support for tasks via ?task= URL parameter - Add useTasks hook with project context filtering - Add ntfy notification deep link to open tasks in dashboard - Fix terminal error message formatting for agent failures - Unify comment style across codebase (// instead of /** */) - Add comprehensive tests for multi-project components
81 lines
3.7 KiB
TypeScript
81 lines
3.7 KiB
TypeScript
import { Folder, Activity, CheckCircle, AlertCircle } from "lucide-react";
|
|
|
|
/**
|
|
* ProjectGridSkeleton - Loading skeleton for project grid
|
|
*
|
|
* Shows 6 skeleton cards in a responsive grid layout with pulse animation.
|
|
* Uses CSS variables for theming compatibility.
|
|
*/
|
|
export function ProjectGridSkeleton() {
|
|
return (
|
|
<div className="project-overview project-overview--loading">
|
|
{/* Header stats skeleton */}
|
|
<div className="project-overview__header-skeleton">
|
|
<div className="project-overview__stats-row">
|
|
<div className="project-overview__stat-skeleton">
|
|
<div className="project-skeleton project-skeleton--icon">
|
|
<Folder size={20} className="project-skeleton-icon" />
|
|
</div>
|
|
<div className="project-skeleton project-skeleton--value" />
|
|
<div className="project-skeleton project-skeleton--label" />
|
|
</div>
|
|
<div className="project-overview__stat-skeleton">
|
|
<div className="project-skeleton project-skeleton--icon">
|
|
<Activity size={20} className="project-skeleton-icon" />
|
|
</div>
|
|
<div className="project-skeleton project-skeleton--value" />
|
|
<div className="project-skeleton project-skeleton--label" />
|
|
</div>
|
|
<div className="project-overview__stat-skeleton">
|
|
<div className="project-skeleton project-skeleton--icon">
|
|
<CheckCircle size={20} className="project-skeleton-icon" />
|
|
</div>
|
|
<div className="project-skeleton project-skeleton--value" />
|
|
<div className="project-skeleton project-skeleton--label" />
|
|
</div>
|
|
<div className="project-overview__stat-skeleton">
|
|
<div className="project-skeleton project-skeleton--icon">
|
|
<AlertCircle size={20} className="project-skeleton-icon" />
|
|
</div>
|
|
<div className="project-skeleton project-skeleton--value" />
|
|
<div className="project-skeleton project-skeleton--label" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter tabs skeleton */}
|
|
<div className="project-overview__filters-skeleton">
|
|
<div className="project-skeleton project-skeleton--tab" />
|
|
<div className="project-skeleton project-skeleton--tab" />
|
|
<div className="project-skeleton project-skeleton--tab" />
|
|
<div className="project-skeleton project-skeleton--tab" />
|
|
</div>
|
|
|
|
{/* Grid skeleton - 6 cards */}
|
|
<div className="project-grid project-grid--skeleton">
|
|
{Array.from({ length: 6 }).map((_, index) => (
|
|
<div key={index} className="project-card project-card--skeleton">
|
|
<div className="project-card-skeleton__header">
|
|
<div className="project-skeleton project-skeleton--icon-circle" />
|
|
<div className="project-skeleton__text-group">
|
|
<div className="project-skeleton project-skeleton--title" />
|
|
<div className="project-skeleton project-skeleton--path" />
|
|
</div>
|
|
<div className="project-skeleton project-skeleton--badge" />
|
|
</div>
|
|
<div className="project-card-skeleton__health">
|
|
<div className="project-skeleton project-skeleton--metric" />
|
|
<div className="project-skeleton project-skeleton--metric" />
|
|
<div className="project-skeleton project-skeleton--metric" />
|
|
</div>
|
|
<div className="project-card-skeleton__footer">
|
|
<div className="project-skeleton project-skeleton--activity" />
|
|
<div className="project-skeleton project-skeleton--actions" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|