Dashboard: shared DataList patterns, anomalies page redesign

- Add DataList + list-query-outcome helpers for list/query UI states
- Redesign anomalies with WebsitePageHeader, DataList rows, anomaly-item
- Align goals, funnels, flags, monitors with list patterns; RPC anomaly tweaks
- Update design-system note and codebase-map skill reference

Author: izadoesdev

.agents/skills/databuddy/references/codebase-map.md

@@ -15,6 +15,7 @@ Use this file when the task spans multiple packages or when the right edit locat
   - client hooks
   - auth-aware frontend flows
   - query and mutation consumers
+- **DataList** (`components/data-list.tsx`): compound component for all list views. See `design-system.mdc` for patterns.
 - Agent chat: [`contexts/chat-context.tsx`](/Users/iza/Dev/Databuddy/apps/dashboard/contexts/chat-context.tsx) — `useChat` must start with `messages: []` on server **and** first client paint; restore `getMessagesFromLocal` in `useLayoutEffect` and gate `saveMessagesToLocal` until `hasRestoredFromLocal`, or SSR/hydration will disagree (empty vs persisted thread). UI: [`agent-messages.tsx`](/Users/iza/Dev/Databuddy/apps/dashboard/app/(main)/websites/[id]/agent/_components/agent-messages.tsx) merges consecutive identical tool labels (`formatToolLabel`) when the same tool+input repeats (`· 2×`); bottom `StreamingIndicator` only when no assistant text **and** no active tool label (`displayMessage`), so the in-message `ToolStep` is not duplicated by the shimmer.
 - Analytics agent web search: [`web-search.ts`](/Users/iza/Dev/Databuddy/apps/api/src/ai/tools/web-search.ts) (Perplexity). Tool labels in dashboard [`tool-display.tsx`](/Users/iza/Dev/Databuddy/apps/dashboard/lib/tool-display.tsx).
 

.cursor/rules/design-system.mdc

@@ -24,12 +24,17 @@ This file is **intentionally small**. It grows as we lock patterns. **Interactio
 - Use `flex-wrap` with `gap-x-5 gap-y-1` so the bar wraps cleanly on mobile without breaking the 10px grid.
 - Canonical reference: `apps/dashboard/app/(main)/monitors/[id]/page.tsx` → `StatusIndicator` + stats bar.
 
-## Row items (list pages)
+## DataList — list pages
 
-- Row wrapper: single `<Link>` as root, `group flex w-full items-center gap-3 border-b px-3 py-3 transition-colors hover:bg-accent/50 sm:gap-4 sm:px-4`.
-- Leading icon: `size-9` container with `rounded border bg-card`, `FaviconImage` at `size={18}` with a Phosphor fallback.
-- Actions: `size-7` ghost button, `opacity-0 group-hover:opacity-100 data-[state=open]:opacity-100`, wrapped in a stop-propagation `div`.
-- Canonical reference: `components/monitors/monitor-row.tsx`, `apps/dashboard/app/(main)/links/_components/link-item.tsx`.
+All list views use the `DataList` compound component (`components/data-list.tsx`). Wrap in `<DataList className="rounded bg-card">` — no border on root.
+
+- **Row defaults:** `align="start"` for wrapping text, `align="center"` for single-line rows (e.g. flags). `w-full` is built-in — don't repeat it.
+- **Cell defaults:** `shrink-0` and `min-w-0` are built-in — don't repeat them. `text-start` is the browser default — don't add it.
+- **Inactive/paused state:** `opacity-50` on the Row, not a badge.
+- **`pt-0.5`** on non-text cells (icons, stats, actions) to align with text baseline in `items-start` rows. Omit in `items-center` rows.
+- **Icon containers:** `size-8 rounded` with semantic `bg-{color}-500/10 text-{color}-600 dark:text-{color}-400`. Use a `TYPE_CONFIG` const map when multiple types exist.
+- **Skeletons:** plain `div`s, not `DataList.Row`. Merge name + secondary into one `flex-1` block.
+- Canonical refs: `monitor-row.tsx`, `funnel-item.tsx`, `goal-item.tsx`, `flags-list.tsx`.
 
 ## Component reuse principle
 

apps/dashboard/app/(main)/monitors/_components/monitors-list.tsx

@@ -9,38 +9,38 @@ import {
 import { useQuery } from "@tanstack/react-query";
 import { Suspense, useState } from "react";
 import { PageHeader } from "@/app/(main)/websites/_components/page-header";
-import { EmptyState } from "@/components/empty-state";
+import { DataList } from "@/components/data-list";
 import { ErrorBoundary } from "@/components/error-boundary";
 import { FeatureAccessGate } from "@/components/feature-access-gate";
+import { MonitorRow } from "@/components/monitors/monitor-row";
 import { MonitorSheet } from "@/components/monitors/monitor-sheet";
 import { FeatureInviteDialog } from "@/components/organizations/feature-invite-dialog";
 import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
 import { useFeatureAccess } from "@/hooks/use-feature-access";
+import type { ListQuerySlice } from "@/lib/list-query-outcome";
 import { orpc } from "@/lib/orpc";
 import { cn } from "@/lib/utils";
-import { type Monitor, MonitorsList } from "./_components/monitors-list";
 
-const MonitorsListSkeleton = () => (
-	<div className="w-full overflow-x-auto">
-		{Array.from({ length: 5 }).map((_, i) => (
-			<div
-				className="flex h-15 items-center gap-4 border-b px-4"
-				key={`skeleton-${i + 1}`}
-			>
-				<Skeleton className="size-8 shrink-0 rounded" />
-				<Skeleton className="h-4 w-40 shrink-0 lg:w-52" />
-				<Skeleton className="h-3 min-w-0 flex-1" />
-				<Skeleton className="hidden h-3 w-14 shrink-0 md:block" />
-				<Skeleton className="hidden h-5 w-16 shrink-0 md:block" />
-				<Skeleton className="hidden h-5 w-32 shrink-0 lg:block lg:w-44" />
-				<Skeleton className="hidden h-4 w-14 shrink-0 lg:block" />
-				<Skeleton className="h-5 w-16 shrink-0" />
-				<Skeleton className="size-8 shrink-0 rounded" />
-			</div>
-		))}
-	</div>
-);
+export interface Monitor {
+	id: string;
+	websiteId: string | null;
+	url: string | null;
+	name: string | null;
+	granularity: string;
+	cron: string;
+	isPaused: boolean;
+	isPublic: boolean;
+	createdAt: Date | string;
+	updatedAt: Date | string;
+	website: {
+		id: string;
+		name: string | null;
+		domain: string;
+	} | null;
+	jsonParsingConfig?: {
+		enabled: boolean;
+	} | null;
+}
 
 export default function MonitorsPage() {
 	const { hasAccess, isLoading: isAccessLoading } =
@@ -58,13 +58,7 @@ export default function MonitorsPage() {
 		} | null;
 	} | null>(null);
 
-	const {
-		data: schedules,
-		isLoading,
-		refetch,
-		isFetching,
-		isError,
-	} = useQuery({
+	const schedulesQuery = useQuery({
 		...orpc.uptime.listSchedules.queryOptions({ input: {} }),
 		enabled: hasAccess,
 	});
@@ -87,7 +81,7 @@ export default function MonitorsPage() {
 	};
 
 	const handleDelete = () => {
-		refetch();
+		schedulesQuery.refetch();
 	};
 
 	const handleSheetClose = () => {
@@ -99,7 +93,7 @@ export default function MonitorsPage() {
 		<ErrorBoundary>
 			<div className="h-full overflow-y-auto">
 				<PageHeader
-					count={hasAccess ? schedules?.length : undefined}
+					count={hasAccess ? schedulesQuery.data?.length : undefined}
 					description="View and manage all your uptime monitors"
 					icon={<HeartbeatIcon />}
 					right={
@@ -114,13 +108,18 @@ export default function MonitorsPage() {
 								</Button>
 								<Button
 									aria-label="Refresh monitors"
-									disabled={isLoading || isFetching}
-									onClick={() => refetch()}
+									disabled={
+										schedulesQuery.isLoading || schedulesQuery.isFetching
+									}
+									onClick={() => schedulesQuery.refetch()}
 									size="icon"
 									variant="outline"
 								>
 									<ArrowClockwiseIcon
-										className={cn((isLoading || isFetching) && "animate-spin")}
+										className={cn(
+											(schedulesQuery.isLoading || schedulesQuery.isFetching) &&
+												"animate-spin"
+										)}
 									/>
 								</Button>
 								<Button onClick={handleCreate}>
@@ -135,35 +134,52 @@ export default function MonitorsPage() {
 
 				<FeatureAccessGate
 					flagKey="monitors"
-					loadingFallback={<MonitorsListSkeleton />}
+					loadingFallback={<DataList.DefaultLoading />}
 				>
-					{isError ? (
-						<div className="flex h-full items-center justify-center py-16">
-							<EmptyState
-								action={{ label: "Retry", onClick: () => refetch() }}
-								description="Something went wrong while fetching monitors."
-								icon={<HeartbeatIcon />}
-								title="Failed to load monitors"
-								variant="minimal"
-							/>
-						</div>
-					) : (
-						<MonitorsList
-							isLoading={isAccessLoading || isLoading}
-							monitors={(schedules as unknown as Monitor[]) || []}
-							onCreateMonitorAction={handleCreate}
-							onDeleteMonitorAction={handleDelete}
-							onEditMonitorAction={handleEdit}
-							onRefetchAction={refetch}
-						/>
-					)}
+					<DataList.Content<Monitor>
+						emptyProps={{
+							action: {
+								label: "Create Your First Monitor",
+								onClick: handleCreate,
+							},
+							description:
+								"Create your first uptime monitor to start tracking availability and receive alerts when services go down.",
+							icon: <HeartbeatIcon weight="duotone" />,
+							title: "No monitors yet",
+						}}
+						errorProps={{
+							action: {
+								label: "Retry",
+								onClick: () => schedulesQuery.refetch(),
+							},
+							description: "Something went wrong while fetching monitors.",
+							icon: <HeartbeatIcon />,
+							title: "Failed to load monitors",
+						}}
+						gatePending={isAccessLoading}
+						query={schedulesQuery as ListQuerySlice<Monitor>}
+					>
+						{(items) => (
+							<DataList className="rounded bg-card">
+								{items.map((monitor) => (
+									<MonitorRow
+										key={monitor.id}
+										onDeleteAction={handleDelete}
+										onEditAction={() => handleEdit(monitor)}
+										onRefetchAction={schedulesQuery.refetch}
+										schedule={monitor}
+									/>
+								))}
+							</DataList>
+						)}
+					</DataList.Content>
 				</FeatureAccessGate>
 
 				{isSheetOpen && (
 					<Suspense fallback={null}>
 						<MonitorSheet
 							onCloseAction={handleSheetClose}
-							onSaveAction={refetch}
+							onSaveAction={schedulesQuery.refetch}
 							open={isSheetOpen}
 							schedule={editingSchedule}
 						/>