Give every empty list one empty state and one add action

EmptyState now has a single action shape: centred at its own width on
the 44 px tap floor, never stretched edge to edge on some pages and
compact on others; the per-call-site size switch is gone, and the
dashed card takes the card radius. While a list is empty its empty
state carries the add action, so the header drops its own add button
there (measurements, mood, medications, labs, vaccinations, documents,
illness, check-ups, visits, procedures). The dashboard medication tile
of an account without medications offers 'Add a medication' instead of
'no data in the chosen range'.

src/components/labs/lab-list.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useRecordCapabilities } from "@/hooks/use-record-capabilities";
-import { useMemo } from "react";
+import { useMemo, useEffect } from "react";
 import Link from "next/link";
 import { useQuery } from "@tanstack/react-query";
 import { ChevronRight, FlaskConical } from "lucide-react";
@@ -136,7 +136,14 @@ const MOBILE_CELL = {
   notLinked: "max-lg:col-span-full max-lg:row-start-3",
 } as const;
 
-export function LabList({ onAddFirst }: { onAddFirst?: () => void } = {}) {
+export function LabList({
+  onAddFirst,
+  onEmptyChange,
+}: {
+  onAddFirst?: () => void;
+  /** Told whether the list is empty, so the page can drop its header add. */
+  onEmptyChange?: (empty: boolean) => void;
+} = {}) {
   const { t } = useTranslations();
   const labNumber = useLabNumber();
   const labDate = useLabDate();
@@ -196,6 +203,11 @@ export function LabList({ onAddFirst }: { onAddFirst?: () => void } = {}) {
   const shown = data?.results?.length ?? 0;
   const truncated = total > shown;
 
+  const listEmpty = !isLoading && !isError && groups.length === 0;
+  useEffect(() => {
+    onEmptyChange?.(listEmpty);
+  }, [listEmpty, onEmptyChange]);
+
   if (isLoading) {
     return (
       <div className="space-y-3" data-slot="lab-list-loading">