@screenbook/ui 0.0.1

package/src/pages/coverage.astro

@@ -0,0 +1,399 @@
+---
+import Layout from "@/layouts/Layout.astro"
+import { loadCoverage } from "@/utils/loadCoverage"
+import { loadScreens } from "@/utils/loadScreens"
+
+const coverage = loadCoverage()
+const screens = loadScreens()
+
+// Calculate color based on percentage
+function getPercentageColor(percentage: number): string {
+	if (percentage >= 80) return "text-green-400"
+	if (percentage >= 50) return "text-yellow-400"
+	return "text-red-400"
+}
+
+function getPercentageBg(percentage: number): string {
+	if (percentage >= 80) return "bg-green-500/20 border-green-500/30"
+	if (percentage >= 50) return "bg-yellow-500/20 border-yellow-500/30"
+	return "bg-red-500/20 border-red-500/30"
+}
+---
+
+<Layout title="Coverage" currentPage="coverage">
+	<div class="container">
+		<div class="page-header">
+			<h1 class="page-title">Coverage Dashboard</h1>
+			<p class="page-description">
+				Track documentation coverage across your screens.
+			</p>
+		</div>
+
+		{!coverage ? (
+			<div class="empty-state">
+				<svg class="empty-state-icon" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5">
+					<path stroke-linecap="round" stroke-linejoin="round" d="M3 13.125C3 12.504 3.504 12 4.125 12h2.25c.621 0 1.125.504 1.125 1.125v6.75C7.5 20.496 6.996 21 6.375 21h-2.25A1.125 1.125 0 013 19.875v-6.75zM9.75 8.625c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125v11.25c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V8.625zM16.5 4.125c0-.621.504-1.125 1.125-1.125h2.25C20.496 3 21 3.504 21 4.125v15.75c0 .621-.504 1.125-1.125 1.125h-2.25a1.125 1.125 0 01-1.125-1.125V4.125z" />
+				</svg>
+				<h2 class="empty-state-title">No coverage data</h2>
+				<p class="empty-state-description">
+					Run the build command to generate coverage data.
+				</p>
+				<code class="empty-state-code">
+					<span class="prompt">$</span> screenbook build
+				</code>
+			</div>
+		) : (
+			<>
+				{/* Main Stats */}
+				<div class="coverage-hero">
+					<div class={`coverage-percentage ${getPercentageBg(coverage.percentage)}`}>
+						<span class={`percentage-value ${getPercentageColor(coverage.percentage)}`}>
+							{coverage.percentage}%
+						</span>
+						<span class="percentage-label">Coverage</span>
+					</div>
+					<div class="coverage-stats">
+						<div class="stat-card">
+							<div class="stat-value">{coverage.covered}</div>
+							<div class="stat-label">Documented</div>
+						</div>
+						<div class="stat-card">
+							<div class="stat-value">{coverage.total}</div>
+							<div class="stat-label">Total Routes</div>
+						</div>
+						<div class="stat-card">
+							<div class="stat-value">{coverage.missing.length}</div>
+							<div class="stat-label">Missing</div>
+						</div>
+					</div>
+				</div>
+
+				<div class="coverage-grid">
+					{/* By Owner */}
+					<div class="coverage-section">
+						<h2 class="section-title">
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M15 19.128a9.38 9.38 0 002.625.372 9.337 9.337 0 004.121-.952 4.125 4.125 0 00-7.533-2.493M15 19.128v-.003c0-1.113-.285-2.16-.786-3.07M15 19.128v.106A12.318 12.318 0 018.624 21c-2.331 0-4.512-.645-6.374-1.766l-.001-.109a6.375 6.375 0 0111.964-3.07M12 6.375a3.375 3.375 0 11-6.75 0 3.375 3.375 0 016.75 0zm8.25 2.25a2.625 2.625 0 11-5.25 0 2.625 2.625 0 015.25 0z" />
+							</svg>
+							By Owner
+						</h2>
+						<div class="owner-list">
+							{Object.entries(coverage.byOwner).map(([owner, data]) => (
+								<div class="owner-item">
+									<div class="owner-info">
+										<span class="owner-name">{owner}</span>
+										<span class="owner-count">{data.count} screen{data.count > 1 ? "s" : ""}</span>
+									</div>
+									<div class="owner-bar">
+										<div
+											class="owner-bar-fill"
+											style={`width: ${Math.round((data.count / coverage.covered) * 100)}%`}
+										></div>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+
+					{/* By Tag */}
+					<div class="coverage-section">
+						<h2 class="section-title">
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M9.568 3H5.25A2.25 2.25 0 003 5.25v4.318c0 .597.237 1.17.659 1.591l9.581 9.581c.699.699 1.78.872 2.607.33a18.095 18.095 0 005.223-5.223c.542-.827.369-1.908-.33-2.607L11.16 3.66A2.25 2.25 0 009.568 3z" />
+								<path stroke-linecap="round" stroke-linejoin="round" d="M6 6h.008v.008H6V6z" />
+							</svg>
+							By Tag
+						</h2>
+						<div class="tags-grid">
+							{Object.entries(coverage.byTag)
+								.sort(([, a], [, b]) => b - a)
+								.map(([tag, count]) => (
+									<a href={`/?tag=${encodeURIComponent(tag)}`} class="tag-card">
+										<span class="tag-name">{tag}</span>
+										<span class="tag-count">{count}</span>
+									</a>
+								))}
+						</div>
+					</div>
+				</div>
+
+				{/* Missing Routes */}
+				{coverage.missing.length > 0 && (
+					<div class="coverage-section missing-section">
+						<h2 class="section-title">
+							<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+								<path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z" />
+							</svg>
+							Missing Documentation ({coverage.missing.length})
+						</h2>
+						<p class="section-description">
+							These routes don't have a <code>screen.meta.ts</code> file yet.
+						</p>
+						<div class="missing-list">
+							{coverage.missing.map((item) => (
+								<div class="missing-item">
+									<div class="missing-route">
+										<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
+											<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 00-3.375-3.375h-1.5A1.125 1.125 0 0113.5 7.125v-1.5a3.375 3.375 0 00-3.375-3.375H8.25m2.25 0H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 00-9-9z" />
+										</svg>
+										<span>{item.route}</span>
+									</div>
+									<div class="missing-action">
+										<code class="suggested-path">{item.suggestedPath}</code>
+									</div>
+								</div>
+							))}
+						</div>
+					</div>
+				)}
+
+				<div class="coverage-footer">
+					<p class="timestamp">
+						Last updated: {new Date(coverage.timestamp).toLocaleString()}
+					</p>
+				</div>
+			</>
+		)}
+	</div>
+</Layout>
+
+<style>
+	.coverage-hero {
+		display: flex;
+		gap: 32px;
+		align-items: center;
+		margin-bottom: 48px;
+	}
+
+	.coverage-percentage {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 180px;
+		height: 180px;
+		border-radius: 50%;
+		border: 3px solid;
+		flex-shrink: 0;
+	}
+
+	.percentage-value {
+		font-size: 3.5rem;
+		font-weight: 700;
+		line-height: 1;
+	}
+
+	.percentage-label {
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		margin-top: 4px;
+	}
+
+	.coverage-stats {
+		display: flex;
+		gap: 24px;
+		flex-wrap: wrap;
+	}
+
+	.stat-card {
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		padding: 24px 32px;
+		text-align: center;
+		min-width: 120px;
+	}
+
+	.stat-value {
+		font-size: var(--text-3xl);
+		font-weight: 700;
+		color: var(--color-text);
+	}
+
+	.stat-label {
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		margin-top: 4px;
+	}
+
+	.coverage-grid {
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+		gap: 32px;
+		margin-bottom: 48px;
+	}
+
+	.coverage-section {
+		background: var(--color-surface);
+		border: 1px solid var(--color-border);
+		border-radius: var(--radius-lg);
+		padding: 24px;
+	}
+
+	.section-title {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		font-size: var(--text-lg);
+		font-weight: 600;
+		margin-bottom: 20px;
+		color: var(--color-text);
+	}
+
+	.section-title svg {
+		width: 20px;
+		height: 20px;
+		color: var(--color-accent);
+	}
+
+	.section-description {
+		font-size: var(--text-sm);
+		color: var(--color-text-muted);
+		margin-bottom: 16px;
+	}
+
+	.owner-list {
+		display: flex;
+		flex-direction: column;
+		gap: 16px;
+	}
+
+	.owner-item {
+		display: flex;
+		flex-direction: column;
+		gap: 8px;
+	}
+
+	.owner-info {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.owner-name {
+		font-size: var(--text-sm);
+		font-weight: 500;
+		color: var(--color-text);
+	}
+
+	.owner-count {
+		font-size: var(--text-xs);
+		color: var(--color-text-muted);
+	}
+
+	.owner-bar {
+		height: 8px;
+		background: var(--color-bg-muted);
+		border-radius: 4px;
+		overflow: hidden;
+	}
+
+	.owner-bar-fill {
+		height: 100%;
+		background: var(--color-accent);
+		border-radius: 4px;
+		transition: width 0.3s ease;
+	}
+
+	.tags-grid {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 8px;
+	}
+
+	.tag-card {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		padding: 8px 12px;
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-md);
+		text-decoration: none;
+		transition: background 0.15s ease;
+	}
+
+	.tag-card:hover {
+		background: var(--color-surface-hover);
+	}
+
+	.tag-name {
+		font-size: var(--text-sm);
+		color: var(--color-text);
+	}
+
+	.tag-count {
+		font-size: var(--text-xs);
+		color: var(--color-accent);
+		font-weight: 600;
+		background: var(--color-accent-bg);
+		padding: 2px 6px;
+		border-radius: 4px;
+	}
+
+	.missing-section {
+		grid-column: 1 / -1;
+	}
+
+	.missing-list {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+
+	.missing-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 12px 16px;
+		background: var(--color-bg-muted);
+		border-radius: var(--radius-md);
+		border-left: 3px solid var(--color-warning);
+	}
+
+	.missing-route {
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		font-size: var(--text-sm);
+		color: var(--color-text);
+	}
+
+	.missing-route svg {
+		width: 16px;
+		height: 16px;
+		color: var(--color-text-muted);
+	}
+
+	.suggested-path {
+		font-size: var(--text-xs);
+		color: var(--color-text-muted);
+	}
+
+	.coverage-footer {
+		text-align: center;
+		padding-top: 24px;
+		border-top: 1px solid var(--color-border);
+	}
+
+	.timestamp {
+		font-size: var(--text-xs);
+		color: var(--color-text-muted);
+	}
+
+	@media (max-width: 768px) {
+		.coverage-hero {
+			flex-direction: column;
+			text-align: center;
+		}
+
+		.coverage-stats {
+			justify-content: center;
+		}
+
+		.missing-item {
+			flex-direction: column;
+			align-items: flex-start;
+			gap: 8px;
+		}
+	}
+</style>