feat(citizen-portal-web): services catalog + shared gold-divider page headers (#34)

* feat(citizen-portal-web): remove application-status pill from catalog cards

The "All services" cards on /services are purely navigational links to a
service's detail page. They rendered a status pill for services the signed-in
citizen already had an application for, conflating browse with application
tracking (which lives in the "Your applications" band). Drop the pill and its
now-dead byService/application plumbing; the applications query still feeds
"Your applications".

* feat(citizen-portal-web): shared clickable service card; drop /services applications band

Extract a shared ServiceCard (components/services/service-card.tsx) used by both
the home "Available services" panel and the /services "All services" grid. The
whole card is now a click/tap target to the service detail via a stretched-link
overlay (after:absolute inset-0), yet only the title is the accessible link text
and only the title underlines on hover -- the description is a plain sibling and
is never underlined.

Also remove the "Your applications" band from /services (and its auth/
applications-query plumbing); application tracking stays on the home page. The
catalog page is now purely browse-and-navigate.

* feat(citizen-portal-web): /services heading + search above a full-width gold divider

Restructure the catalog page to the citizen Account-pages pattern: a full-width
header region carrying a bcgov-gold bottom divider (border-b-2 border-bcgov-gold)
holds the page heading and the search box, with its content constrained to the
standard max-w-280 column; the "All services" grid renders below the divider.
SettingsPageHeader is not reused -- it has no slot for a search box -- only the
divider layout is shared. Layout-only; search and catalog behaviour unchanged.

* feat(citizen-portal-web): service detail header adopts the full-width gold divider

Apply the /services (feature 143) / Account-pages header pattern to the service
detail page: the breadcrumb, title/description, and "Start an application" button
now sit in a full-width bcgov-gold-divided header region (border-b-2
border-bcgov-gold, content constrained to max-w-280), with the overview sections
below in the standard column. Replaces the old thin per-column border-b. Layout
only; service data, forms/apply flow, and version routing unchanged. The historical
version page keeps its old header (out of scope).

* refactor(citizen-portal-web): extract reusable PageHeaderBanner with breadcrumb slot

Consolidate the full-width bcgov-gold divider header, previously hand-rolled in
three places, into one PageHeaderBanner primitive: full-width gold rule +
constrained max-w-280 column + an optional breadcrumb slot; content-agnostic
children. SettingsPageHeader now composes it (account/notifications/agreements
markup unchanged); /services and the service detail page render through it, the
latter passing its breadcrumb via the new breadcrumb prop. Layout refactor only,
no visual change.

* feat(citizen-portal-web): title Your activity cards by application name

Add a titleBy variant to ApplicationRow (default 'service', unchanged home
behaviour). On the service detail "Your activity" section -- where every row is
already this service -- pass titleBy='application' so the card leads with the
application (form) name and the meta line is just "Ref #<reference> • <date>",
dropping the now-redundant service/form-name prefix. Home "Track your
applications" keeps the service name as the title.

* feat(citizen-portal-web): add breadcrumb to the notification settings page

Pass a breadcrumb to the notification settings SettingsPageHeader:
Account settings -> Notification settings (current). Mirrors the Service
Agreements detail page; the header already exposes a breadcrumb slot via
PageHeaderBanner.

* fix(citizen-portal-web): consent gate presents only agreements needing a decision

The pre-application consent gate opened whenever any agreement was unsatisfied
(consentPending over the full list) but then rendered EVERY agreement -- so a
single new/changed one re-presented all the previously-approved (unchanged) ones,
risking re-recording them into the append-only /account/service-agreements
history. Filter the gate to pending = agreements where !satisfied(a, a.decision)
(new/changed on the current version) for display, gating, and recording; already-
satisfied agreements are hidden and never re-recorded. consentPending (whether the
gate opens) and the server submit gate are unchanged -- the server stays
authoritative; this is a client display/UX fix.

Author: sidmclaughlin

apps/citizen-portal-web/src/components/application/consent-gate.tsx

@@ -33,18 +33,26 @@ interface ConsentGateProps {
 
 /**
  * The consent gate (feature 90): shown before the application form when a service's agreements
- * haven't all been decided. Renders each agreement read-only + an approve/reject radio (authored
- * labels, canonical values), gathers the decisions LOCALLY, and gates Continue until every required
- * agreement is approved. Decisions are recorded (POSTed) only when the citizen presses Continue —
- * not on each radio change. The server (feature 89) re-validates on submit — this is UX only.
+ * haven't all been decided. Presents ONLY the agreements still needing a decision on their current
+ * version — new/changed ones (feature 148); already-satisfied agreements are hidden so the gate
+ * never re-presents or re-records an unchanged approval. Renders each pending agreement read-only +
+ * an approve/reject radio (authored labels, canonical values), gathers the decisions LOCALLY, and
+ * gates Continue until every required agreement is approved. Decisions are recorded (POSTed) only
+ * when the citizen presses Continue — not on each radio change. The server (feature 89) re-validates
+ * on submit — this is UX only.
  */
 export function ConsentGate({ agreements, serviceId, onContinue }: ConsentGateProps) {
   const queryClient = useQueryClient();
+  // Present ONLY agreements still needing a decision on their current version — i.e. new or changed
+  // ones (consent is keyed to the published version, so a bumped version has no consent → unsatisfied).
+  // Agreements the citizen already satisfied (approved-required / decided-optional) on the current
+  // version are hidden, so the gate never re-presents — or re-records — an unchanged approval.
+  const pending = agreements.filter((a) => !satisfied(a, a.decision));
   // Local decisions seeded from the server's current decisions (a rejected required agreement
   // arrives with decision='reject' and still blocks until re-decided to approve).
   const [decisions, setDecisions] = useState<Record<string, ConsentDecision>>(() =>
     Object.fromEntries(
-      agreements.filter((a) => a.decision !== null).map((a) => [a.agreementVersionId, a.decision!]),
+      pending.filter((a) => a.decision !== null).map((a) => [a.agreementVersionId, a.decision!]),
     ),
   );
   const [failed, setFailed] = useState(false);
@@ -53,7 +61,7 @@ export function ConsentGate({ agreements, serviceId, onContinue }: ConsentGatePr
   const submit = useMutation({
     mutationFn: async () => {
       // Record only decisions that differ from what the server already has (append-only, latest-wins).
-      const changed = agreements
+      const changed = pending
         .map((a) => ({
           versionId: a.agreementVersionId,
           decision: decisions[a.agreementVersionId],
@@ -83,9 +91,7 @@ export function ConsentGate({ agreements, serviceId, onContinue }: ConsentGatePr
     setFailed(false);
   };
 
-  const allSatisfied = agreements.every((a) =>
-    satisfied(a, decisions[a.agreementVersionId] ?? null),
-  );
+  const allSatisfied = pending.every((a) => satisfied(a, decisions[a.agreementVersionId] ?? null));
   const canContinue = allSatisfied && !submit.isPending;
 
   return (
@@ -94,15 +100,15 @@ export function ConsentGate({ agreements, serviceId, onContinue }: ConsentGatePr
         <h1 className="font-heading text-2xl font-semibold text-foreground">Before you apply</h1>
         <p className="mt-1 text-sm text-muted-foreground">
           Please review and respond to the following{' '}
-          {agreements.length === 1 ? 'agreement' : 'agreements'} to continue your application.
+          {pending.length === 1 ? 'agreement' : 'agreements'} to continue your application.
         </p>
       </div>
 
       <AccordionGroup
-        values={agreements.map((a) => a.agreementVersionId)}
-        defaultValue={agreements.map((a) => a.agreementVersionId)}
+        values={pending.map((a) => a.agreementVersionId)}
+        defaultValue={pending.map((a) => a.agreementVersionId)}
       >
-        {agreements.map((a) => {
+        {pending.map((a) => {
           const title = str(a.data.title, 'Service agreement');
           const description = str(a.data.description, '');
           const content = a.data.content as ComponentProps<typeof RichTextView>['value'];

apps/citizen-portal-web/src/components/landing/available-services.tsx

@@ -1,9 +1,9 @@
-import { Card, CardHeader, CardDescription, CardTitle } from '@repo/ui/card';
 import { mdiChevronRight } from '@mdi/js';
 import { Icon } from '@mdi/react';
 import { Skeleton } from '@repo/ui/skeleton';
 import { Link } from '@tanstack/react-router';
 import { SectionHeading } from '@/components/landing/section-heading';
+import { ServiceCard } from '@/components/services/service-card';
 import type { CatalogService } from '@/lib/catalog';
 
 interface AvailableServicesProps {
@@ -12,18 +12,6 @@ interface AvailableServicesProps {
   loading?: boolean;
 }
 
-/** The disclosure chevron shown at the top-right of a card, signalling "there's more here". */
-function DisclosureChevron() {
-  return (
-    <Icon
-      path={mdiChevronRight}
-      size="20px"
-      className="mt-0.5 shrink-0 text-link"
-      aria-hidden={true}
-    />
-  );
-}
-
 /**
  * The blue "Available services" panel with service cards. Shared by both landing pages and identical
  * whether or not the citizen is signed in — every card simply links to its service detail (a citizen's
@@ -48,23 +36,7 @@ export function AvailableServices({ services, loading = false }: AvailableServic
                 <Skeleton className="mt-3 h-3 w-full" />
               </div>
             ))
-          : services.map((service) => (
-              <Card key={service.id}>
-                <CardHeader>
-                  <CardTitle className="text-base font-semibold">
-                    <Link
-                      to="/services/$serviceId"
-                      params={{ serviceId: service.id }}
-                      className="flex items-start justify-between gap-2 no-underline hover:underline"
-                    >
-                      <span>{service.title}</span>
-                      <DisclosureChevron />
-                    </Link>
-                  </CardTitle>
-                  <CardDescription className="line-clamp-2">{service.description}</CardDescription>
-                </CardHeader>
-              </Card>
-            ))}
+          : services.map((service) => <ServiceCard key={service.id} service={service} />)}
       </div>
       {showBrowseAll ? (
         <div className="mt-6 text-right">

apps/citizen-portal-web/src/components/layout/page-header-banner.tsx

@@ -0,0 +1,28 @@
+import type { ReactNode } from 'react';
+
+/**
+ * The shared citizen page-header banner: a **full-width `bcgov-gold` bottom divider** whose content
+ * is constrained to the standard `max-w-280` column with standard page padding. Render it as a
+ * full-width sibling above the constrained page body so the rule spans the whole main area.
+ *
+ * It owns only the divider, the constrained width, and an optional breadcrumb slot — each caller
+ * supplies its own header body as `children`. Used directly by `/services` and the service detail
+ * page, and composed by {@link SettingsPageHeader} for the Account settings surfaces.
+ */
+export function PageHeaderBanner({
+  breadcrumb,
+  children,
+}: {
+  /** Optional breadcrumb, rendered above the header content. Omitted → nothing renders above. */
+  breadcrumb?: ReactNode;
+  children: ReactNode;
+}) {
+  return (
+    <div className="border-b-2 border-bcgov-gold">
+      <div className="mx-auto flex w-full max-w-280 flex-col gap-3 px-4 py-6 md:px-8">
+        {breadcrumb}
+        {children}
+      </div>
+    </div>
+  );
+}

apps/citizen-portal-web/src/components/layout/settings-page-header.tsx

@@ -1,11 +1,12 @@
 import type { ReactNode } from 'react';
 import { Icon } from '@mdi/react';
+import { PageHeaderBanner } from '@/components/layout/page-header-banner';
 
 /**
  * Shared page header for the citizen settings pages (account, notifications, service agreements):
  * a full-width `bcgov-gold` divider with a light-blue icon badge to the left of the title/subtitle,
- * and an optional breadcrumb rendered above the title. Render it as a full-width sibling above the
- * constrained page body so the divider spans the page.
+ * and an optional breadcrumb rendered above the title. Composes {@link PageHeaderBanner} (the shared
+ * divider + constrained-width layout) with the settings-specific icon-badge title row.
  */
 export function SettingsPageHeader({
   icon,
@@ -24,20 +25,17 @@ export function SettingsPageHeader({
   breadcrumb?: ReactNode;
 }) {
   return (
-    <div className="border-b-2 border-bcgov-gold">
-      <div className="mx-auto flex w-full max-w-280 flex-col gap-3 px-4 py-6 md:px-8">
-        {breadcrumb}
-        <div className="flex items-center gap-4">
-          <div className="flex items-center justify-center bg-blue-10 p-2">
-            <Icon path={icon} size="32px" className="text-blue-80" aria-hidden={true} />
-          </div>
-          <div className="flex flex-col gap-1">
-            <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
-            {subtitle ? <p className="text-sm text-muted-foreground">{subtitle}</p> : null}
-            {meta}
-          </div>
+    <PageHeaderBanner breadcrumb={breadcrumb}>
+      <div className="flex items-center gap-4">
+        <div className="flex items-center justify-center bg-blue-10 p-2">
+          <Icon path={icon} size="32px" className="text-blue-80" aria-hidden={true} />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h1 className="font-heading text-2xl font-semibold text-foreground">{title}</h1>
+          {subtitle ? <p className="text-sm text-muted-foreground">{subtitle}</p> : null}
+          {meta}
         </div>
       </div>
-    </div>
+    </PageHeaderBanner>
   );
 }

apps/citizen-portal-web/src/components/notification-preferences-page.tsx

@@ -9,6 +9,7 @@ import { useBlocker } from '@tanstack/react-router';
 import { Icon } from '@mdi/react';
 import { mdiBellOutline, mdiLogin } from '@mdi/js';
 
+import { Breadcrumb } from '@/components/breadcrumb';
 import { CitizenShell } from '@/components/layout/citizen-shell';
 import { SettingsPageHeader } from '@/components/layout/settings-page-header';
 import { useAuth, useLoginUrl } from '@/lib/auth';
@@ -216,6 +217,14 @@ export function NotificationPreferencesPage() {
           icon={mdiBellOutline}
           title="Notification settings"
           subtitle="Choose how you hear about updates to your applications."
+          breadcrumb={
+            <Breadcrumb
+              trail={[
+                { label: 'Account settings', href: '/account' },
+                { label: 'Notification settings' },
+              ]}
+            />
+          }
         />
         <div className="mx-auto my-6 flex w-full max-w-280 flex-col gap-9 px-4 md:px-8">
           {prefs.isSuccess ? (

apps/citizen-portal-web/src/components/service-detail-page.tsx

@@ -3,6 +3,7 @@ import { Skeleton } from '@repo/ui/skeleton';
 import { useQuery } from '@tanstack/react-query';
 import { Link, useParams } from '@tanstack/react-router';
 import { CitizenShell } from '@/components/layout/citizen-shell';
+import { PageHeaderBanner } from '@/components/layout/page-header-banner';
 import { ServiceSections } from '@/components/services/detail-sections';
 import { Breadcrumb } from '@/components/services/service-content';
 import { serviceQueryOptions } from '@/lib/catalog';
@@ -48,32 +49,42 @@ export function ServiceDetailPage() {
 
   return (
     <CitizenShell activeNav="services">
-      <div className="mx-auto px-4 md:px-8 my-6 w-full max-w-280 flex flex-col gap-9">
-        <Breadcrumb
-          trail={[
-            { label: 'Home', href: '/' },
-            { label: 'Services', href: '/services' },
-            { label: service.title },
-          ]}
-        />
+      <div className="flex flex-col">
+        {/* Header region — breadcrumb + title/description + action above the shared full-width
+            bcgov-gold divider. */}
+        <PageHeaderBanner
+          breadcrumb={
+            <Breadcrumb
+              trail={[
+                { label: 'Home', href: '/' },
+                { label: 'Services', href: '/services' },
+                { label: service.title },
+              ]}
+            />
+          }
+        >
+          <header className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+            <div className="flex flex-col gap-1">
+              <h1 className="font-heading text-2xl font-semibold text-foreground">
+                {service.title}
+              </h1>
+              {service.description ? (
+                <p className="max-w-2xl text-sm text-muted-foreground">{service.description}</p>
+              ) : null}
+            </div>
+            <Button className="shrink-0">Start an application</Button>
+          </header>
+        </PageHeaderBanner>
 
-        <header className="flex flex-col gap-3 border-b pb-6 sm:flex-row sm:items-start sm:justify-between">
-          <div className="flex flex-col gap-1">
-            <h1 className="font-heading text-2xl font-semibold text-foreground">{service.title}</h1>
-            {service.description ? (
-              <p className="max-w-2xl text-sm text-muted-foreground">{service.description}</p>
-            ) : null}
-          </div>
-          <Button className="shrink-0">Start an application</Button>
-        </header>
-
-        <ServiceSections
-          serviceId={service.id}
-          schema={service.schema}
-          uischema={service.uischema}
-          data={service.data}
-          applications={service.applications}
-        />
+        <div className="mx-auto my-6 flex w-full max-w-280 flex-col gap-9 px-4 md:px-8">
+          <ServiceSections
+            serviceId={service.id}
+            schema={service.schema}
+            uischema={service.uischema}
+            data={service.data}
+            applications={service.applications}
+          />
+        </div>
       </div>
     </CitizenShell>
   );