@oh-my-pi/omp-stats 18.3.5 → 18.4.0

package/src/client/ui/States.tsx

@@ -0,0 +1,81 @@
+import { Inbox, RotateCw, TriangleAlert } from "lucide-react";
+import type { CSSProperties, ReactNode } from "react";
+
+export function EmptyState({ title = "Nothing here yet", hint }: { title?: ReactNode; hint?: ReactNode }) {
+	return (
+		<div className="empty">
+			<Inbox size={20} />
+			<div className="empty-title">{title}</div>
+			{hint !== undefined && <div className="empty-hint">{hint}</div>}
+		</div>
+	);
+}
+
+export function ErrorState({ error, onRetry }: { error: Error | string; onRetry?: () => void }) {
+	return (
+		<div className="error-state" role="alert">
+			<TriangleAlert size={15} />
+			<span className="error-state-message">{typeof error === "string" ? error : error.message}</span>
+			{onRetry && (
+				<button type="button" className="btn" data-size="sm" data-variant="ghost" onClick={onRetry}>
+					<RotateCw size={13} /> Retry
+				</button>
+			)}
+		</div>
+	);
+}
+
+export function Skeleton({
+	width = "100%",
+	height = 14,
+	style,
+}: {
+	width?: number | string;
+	height?: number | string;
+	style?: CSSProperties;
+}) {
+	return <div className="skeleton" style={{ width, height, ...style }} />;
+}
+
+/** Placeholder block matching a chart's footprint. */
+export function ChartSkeleton({ height = 220 }: { height?: number }) {
+	return <Skeleton height={height} style={{ borderRadius: 8 }} />;
+}
+
+/** Placeholder rows matching a table's footprint. */
+export function TableSkeleton({ rows = 6 }: { rows?: number }) {
+	return (
+		<div style={{ display: "flex", flexDirection: "column", gap: 10, padding: "8px 16px 16px" }}>
+			{Array.from({ length: rows }, (_, i) => (
+				<Skeleton key={i} height={16} width={`${92 - ((i * 13) % 30)}%`} />
+			))}
+		</div>
+	);
+}
+
+export interface QueryViewProps<T> {
+	query: { data: T | null; error: Error | null; loading: boolean; refetch: () => void };
+	/** Rendered on first load. */
+	skeleton: ReactNode;
+	/** Treat loaded data as empty (renders `empty`). */
+	isEmpty?: (data: T) => boolean;
+	empty?: ReactNode;
+	children: (data: T) => ReactNode;
+}
+
+/**
+ * Standard load/error/empty switch for one `useQuery` result. Errors with
+ * data already on screen keep the data and show the error above it.
+ */
+export function QueryView<T>({ query, skeleton, isEmpty, empty, children }: QueryViewProps<T>) {
+	if (query.data === null) {
+		if (query.error) return <ErrorState error={query.error} onRetry={query.refetch} />;
+		return <>{skeleton}</>;
+	}
+	return (
+		<>
+			{query.error && <ErrorState error={query.error} onRetry={query.refetch} />}
+			{isEmpty?.(query.data) ? (empty ?? <EmptyState />) : children(query.data)}
+		</>
+	);
+}

package/src/client/ui/Table.tsx

@@ -0,0 +1,229 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+import { Fragment, type ReactNode, useMemo, useState } from "react";
+import { EmptyState } from "./States";
+
+export interface Column<T> {
+	key: string;
+	header: ReactNode;
+	render: (row: T) => ReactNode;
+	/** Sort key; the column header becomes clickable when present. */
+	sort?: (row: T) => number | string;
+	align?: "left" | "right" | "center";
+	width?: number | string;
+	/** Allow the cell to wrap (cells are single-line by default). */
+	wrap?: boolean;
+	/** Header tooltip. */
+	title?: string;
+}
+
+export type SortDir = "asc" | "desc";
+
+export interface TableProps<T> {
+	columns: readonly Column<T>[];
+	rows: readonly T[];
+	rowKey: (row: T) => string | number;
+	onRowClick?: (row: T) => void;
+	selectedKey?: string | number | null;
+	/** Initial sort; numeric columns usually start `desc`. */
+	initialSort?: { key: string; dir: SortDir };
+	/** Show the first `limit` rows; "Show more" reveals `limit` × 4 more at a time (rendering stays cheap for huge tables). */
+	limit?: number;
+	dense?: boolean;
+	empty?: ReactNode;
+	/** Detail row rendered below a row (return `null` for collapsed rows). */
+	expanded?: (row: T) => ReactNode | null;
+}
+
+/** Sortable data table. Clicking a sorted header flips its direction. */
+export function Table<T>({
+	columns,
+	rows,
+	rowKey,
+	onRowClick,
+	selectedKey,
+	initialSort,
+	limit,
+	dense,
+	empty,
+	expanded,
+}: TableProps<T>) {
+	const [sort, setSort] = useState(initialSort ?? null);
+	const [shown, setShown] = useState(limit ?? Number.POSITIVE_INFINITY);
+
+	const sorted = useMemo(() => {
+		const column = sort ? columns.find(c => c.key === sort.key) : undefined;
+		if (!sort || !column?.sort) return rows;
+		const valueOf = column.sort;
+		const dir = sort.dir === "asc" ? 1 : -1;
+		return [...rows].sort((a, b) => {
+			const va = valueOf(a);
+			const vb = valueOf(b);
+			if (typeof va === "number" && typeof vb === "number") return (va - vb) * dir;
+			return String(va).localeCompare(String(vb)) * dir;
+		});
+	}, [rows, columns, sort]);
+
+	if (rows.length === 0) return <>{empty ?? <EmptyState />}</>;
+
+	const visible = sorted.length > shown ? sorted.slice(0, shown) : sorted;
+
+	const toggleSort = (column: Column<T>) => {
+		if (!column.sort) return;
+		setSort(prev =>
+			prev?.key === column.key
+				? { key: column.key, dir: prev.dir === "asc" ? "desc" : "asc" }
+				: { key: column.key, dir: column.align === "right" ? "desc" : "asc" },
+		);
+	};
+
+	return (
+		<>
+			<div className="table-wrap">
+				<table className="table" data-dense={dense ?? false}>
+					<thead>
+						<tr>
+							{columns.map(column => {
+								const sorted = sort?.key === column.key ? sort.dir : undefined;
+								return (
+									<th
+										key={column.key}
+										data-align={column.align ?? "left"}
+										data-sortable={column.sort !== undefined}
+										data-sorted={sorted}
+										style={column.width !== undefined ? { width: column.width } : undefined}
+										title={column.title}
+										onClick={() => toggleSort(column)}
+										aria-sort={sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : undefined}
+									>
+										{column.header}
+										{sorted && (
+											<span className="sort-arrow">
+												{sorted === "asc" ? <ArrowUp size={11} /> : <ArrowDown size={11} />}
+											</span>
+										)}
+									</th>
+								);
+							})}
+						</tr>
+					</thead>
+					<tbody>
+						{visible.map(row => {
+							const key = rowKey(row);
+							const detail = expanded?.(row) ?? null;
+							return (
+								<Fragment key={key}>
+									<tr
+										data-clickable={onRowClick !== undefined}
+										data-selected={selectedKey === key}
+										onClick={onRowClick ? () => onRowClick(row) : undefined}
+										onKeyDown={
+											onRowClick
+												? e => {
+														if (e.key === "Enter" || e.key === " ") {
+															e.preventDefault();
+															onRowClick(row);
+														}
+													}
+												: undefined
+										}
+										tabIndex={onRowClick ? 0 : undefined}
+									>
+										{columns.map(column => (
+											<td
+												key={column.key}
+												data-align={column.align ?? "left"}
+												data-wrap={column.wrap ?? false}
+											>
+												{column.render(row)}
+											</td>
+										))}
+									</tr>
+									{detail !== null && (
+										<tr>
+											<td colSpan={columns.length} data-wrap="true" style={{ padding: 0 }}>
+												{detail}
+											</td>
+										</tr>
+									)}
+								</Fragment>
+							);
+						})}
+					</tbody>
+				</table>
+			</div>
+			{limit !== undefined && sorted.length > limit && (
+				<div className="table-more">
+					<span className="micro">
+						{visible.length.toLocaleString()} of {sorted.length.toLocaleString()}
+					</span>
+					{sorted.length > shown && (
+						<button
+							type="button"
+							className="btn"
+							data-size="sm"
+							data-variant="ghost"
+							onClick={() => setShown(n => n + limit * 4)}
+						>
+							Show more
+						</button>
+					)}
+					{shown > limit && (
+						<button
+							type="button"
+							className="btn"
+							data-size="sm"
+							data-variant="ghost"
+							onClick={() => setShown(limit)}
+						>
+							Show fewer
+						</button>
+					)}
+				</div>
+			)}
+		</>
+	);
+}
+
+/** Right-aligned value with a proportional bar, for ranked numeric columns. */
+export function MeterCell({
+	value,
+	max,
+	display,
+	color,
+}: {
+	value: number;
+	max: number;
+	display: ReactNode;
+	color?: string;
+}) {
+	const pct = max > 0 ? Math.min(100, (value / max) * 100) : 0;
+	return (
+		<div className="meter-cell">
+			<span className="num">{display}</span>
+			<div className="meter">
+				<div className="meter-fill" style={{ width: `${pct}%`, background: color }} />
+			</div>
+		</div>
+	);
+}
+
+/** Two-line cell: primary label and a dim secondary line. */
+export function LabelCell({
+	primary,
+	secondary,
+	lead,
+}: {
+	primary: ReactNode;
+	secondary?: ReactNode;
+	lead?: ReactNode;
+}) {
+	return (
+		<div className="row" style={{ gap: 10 }}>
+			{lead}
+			<div className="stack" style={{ gap: 0 }}>
+				<span className="cell-primary truncate">{primary}</span>
+				{secondary !== undefined && <span className="cell-secondary truncate">{secondary}</span>}
+			</div>
+		</div>
+	);
+}

package/src/client/ui/index.ts

@@ -1,11 +1,10 @@
-export * from "./AsyncBoundary";
-export * from "./DataTable";
-export * from "./EmptyState";
-export * from "./ErrorState";
+export * from "./Badge";
+export * from "./Card";
+export * from "./Drawer";
 export * from "./JsonBlock";
-export * from "./MetricCluster";
-export * from "./Panel";
-export * from "./RequestDrawer";
-export * from "./SegmentedControl";
-export * from "./Skeleton";
-export * from "./StatusPill";
+export * from "./Modal";
+export * from "./SearchInput";
+export * from "./Segmented";
+export * from "./Stat";
+export * from "./States";
+export * from "./Table";

package/src/client/ui/modal.css

@@ -0,0 +1,54 @@
+.modal-overlay {
+	position: fixed;
+	inset: 0;
+	z-index: 80;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 16px;
+	background: rgba(0, 0, 0, 0.55);
+	animation: fade var(--dur-2) var(--ease) both;
+}
+
+.modal {
+	width: min(480px, 100%);
+	border-radius: var(--r-panel);
+	border: 1px solid var(--line-2);
+	background: var(--overlay);
+	backdrop-filter: blur(20px) saturate(170%);
+	-webkit-backdrop-filter: blur(20px) saturate(170%);
+	box-shadow: var(--shadow-3);
+	animation: rise var(--dur-3) var(--ease-out) both;
+	overflow: hidden;
+}
+
+.modal-header {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 12px;
+	padding: 14px 14px 10px 18px;
+}
+
+.modal-title {
+	font-size: 15px;
+	font-weight: 600;
+	letter-spacing: -0.01em;
+}
+
+.modal-body {
+	padding: 4px 18px 16px;
+	color: var(--ink-2);
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.modal-footer {
+	display: flex;
+	justify-content: flex-end;
+	gap: 8px;
+	padding: 12px 18px;
+	border-top: 1px solid var(--line-1);
+	background: color-mix(in srgb, var(--card) 60%, transparent);
+}

package/src/client/ui/request-drawer.css

@@ -0,0 +1,40 @@
+/* Request detail drawer. */
+.request-drawer-error {
+	--rd-tone: var(--bad);
+	--rd-tone-soft: var(--bad-soft);
+	padding: 10px 12px 12px;
+	border-radius: var(--r-control);
+	border: 1px solid color-mix(in srgb, var(--rd-tone) 35%, transparent);
+	background: var(--rd-tone-soft);
+}
+
+.request-drawer-error[data-tone="warn"] {
+	--rd-tone: var(--warn);
+	--rd-tone-soft: var(--warn-soft);
+}
+
+.request-drawer-error-label {
+	font-size: 12px;
+	font-weight: 550;
+	color: var(--rd-tone);
+	margin-bottom: 6px;
+}
+
+.request-drawer-error-text {
+	margin: 0;
+	font-family: var(--font-mono);
+	font-size: 12px;
+	line-height: 1.55;
+	color: var(--ink-1);
+	white-space: pre-wrap;
+	overflow-wrap: anywhere;
+	max-height: 240px;
+	overflow: auto;
+}
+
+.request-drawer-file {
+	display: flex;
+	flex-direction: column;
+	gap: 2px;
+	margin-top: 12px;
+}