mokhtar
85b8be50a0
Gates / frontend (push) Successful in 1m57s
Gates / test (push) Successful in 2m34s
Gates / test-aarch64 (push) Successful in 8m9s
Gates / package (push) Successful in 7m14s
Gates / container (push) Successful in 17s
CI / gates (push) Successful in 18m17s
Release / guard (push) Successful in 33s
Gates / test-aarch64 (push) Successful in 7m22s
Gates / container (push) Successful in 11s
Release / gates (push) Successful in 10m35s
Gates / frontend (push) Successful in 2m8s
Gates / test (push) Successful in 2m16s
Gates / package (push) Successful in 44s
Release / publish (push) Successful in 10m4s
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 centred beside the point, a stacked client chart in eight distinct hues plus one Other band that is always a series, and a card row with the cache hit rate, the query types as a single-hue ramp ring, and the upstream breakdown. The count axis grows its margin with the widest grouped tick and draws whole-number ticks only. 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. The route reduces a pasted IPv6 scope to the RFC 5952 spelling the logger stores, mapped addresses included, and drops anything that is not an address. A failed device list says so under the selector with a retry. All measured quantities go through admin/src/lib/format.ts: grouped counts, two-decimal percentages, one-decimal rates, durations as the two largest nonzero units. Identifiers, configured values and preset labels render as written; the module header states that scope. 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 a one-line description on every panel, the settings form sections on the same card with a floated legend, the sidebar grouped into Monitoring and System with a status block (protection, queries per minute on Overview, uptime), keyboard-focusable table scroll wrappers, 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 reviewed sessions B to D over five rounds (thirty-three findings fixed, thirteen rejected as non-quantities); the owner skipped a sixth round. Claude-Session: https://claude.ai/code/session_01VTgx3a1zz1R78o4K55kkwR
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>
|
|
);
|
|
}
|