mokhtar
209c1c77a9
The Overview page takes the decided visual language (specs/ui-visual-redesign.md): four centred totals with their Activity links, a smoothed area chart of total and blocked queries with point hover and a tooltip beside the point, a stacked client chart in eight distinct hues plus one Other band, and a card row with the cache hit rate, the query types as a single-hue ramp ring, and the upstream breakdown. GET /api/overview takes a client parameter; the scoped read uses idx_query_log_ts and the cache keeps scoped slots. The device selector beside the period selector is URL state, so a scoped view is a link, and the tile links carry the scope into Activity. All numbers go through admin/src/lib/format.ts: grouped counts, two-decimal percentages, one-decimal rates, durations as the two largest nonzero units. A sweep test refuses toFixed, toLocaleString, Intl.NumberFormat and padStart anywhere else. Chrome: one 4px radius from the metrics constants, shared Card with a prominent title and description, the sidebar grouped into Monitoring and System with a status block (protection, queries per minute on Overview, uptime), and the accent darkened to 5.43:1 on its wash. Not built: the spec's ranked-list primitive, which has no consumer and no API rows. Codex could not review sessions B to D, its endpoint returned 404 for every call on 2026-09-03; the owner accepted the smoke-server screenshots.
80 lines
2.1 KiB
TypeScript
80 lines
2.1 KiB
TypeScript
/**
|
|
* The one panel chrome (milestone 39): a white hairline-bordered card with a
|
|
* prominent title and a one-line description under it. Every panel on every
|
|
* page is one of these, so the pages agree by construction rather than by
|
|
* copying a `panel` style object around.
|
|
*
|
|
* The title is an `h2` because a card is a section of the page's outline; a
|
|
* page that needs a different level passes `as`.
|
|
*/
|
|
|
|
import { useId } from "react";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { colors, metrics } from "./tokens.stylex";
|
|
|
|
export const cardStyles = stylex.create({
|
|
card: {
|
|
minWidth: 0,
|
|
borderRadius: metrics.radius,
|
|
borderWidth: 1,
|
|
borderStyle: "solid",
|
|
borderColor: colors.border,
|
|
backgroundColor: colors.surfaceRaised,
|
|
padding: metrics.cardPadding,
|
|
},
|
|
head: {
|
|
marginBottom: "1.25rem",
|
|
},
|
|
/**
|
|
* The card's title is the loudest text on the page after the stat numerals:
|
|
* the references (Pi-hole, NextDNS) both lead each panel with a heading the
|
|
* eye lands on first. Kept in one place so no heading reset outranks it.
|
|
*/
|
|
title: {
|
|
margin: 0,
|
|
fontSize: "1.4rem",
|
|
lineHeight: 1.2,
|
|
fontWeight: 650,
|
|
letterSpacing: "-0.015em",
|
|
color: colors.text,
|
|
textWrap: "balance",
|
|
},
|
|
description: {
|
|
margin: 0,
|
|
marginTop: "0.25rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
color: colors.textMuted,
|
|
textWrap: "pretty",
|
|
},
|
|
});
|
|
|
|
export default function Card({
|
|
title,
|
|
description,
|
|
as: Heading = "h2",
|
|
style,
|
|
children,
|
|
}: {
|
|
title: string;
|
|
/** One sentence saying what the panel shows; every card carries one (the decision record's card head). */
|
|
description: string;
|
|
as?: "h2" | "h3";
|
|
/** Extra styles for the card box itself: a grid placement, a clipped list variant. */
|
|
style?: stylex.StyleXStyles;
|
|
children: React.ReactNode;
|
|
}) {
|
|
const titleId = useId();
|
|
return (
|
|
<section aria-labelledby={titleId} {...stylex.props(cardStyles.card, style)}>
|
|
<div {...stylex.props(cardStyles.head)}>
|
|
<Heading id={titleId} {...stylex.props(cardStyles.title)}>
|
|
{title}
|
|
</Heading>
|
|
<p {...stylex.props(cardStyles.description)}>{description}</p>
|
|
</div>
|
|
{children}
|
|
</section>
|
|
);
|
|
}
|