Browse hearings page

components/Footer/Footer.tsx

@@ -12,6 +12,7 @@ import CustomDropdown, {
 } from "components/Footer/CustomFooterDropdown"
 import { FooterContainer } from "./FooterContainer"
 import { NEWSLETTER_SIGNUP_URL } from "components/common"
+import { flags } from "../featureFlags"
 
 export type PageFooterProps = {
   children?: any
@@ -217,6 +218,11 @@ const BrowseList = () => {
       <BrowseHeader href="/testimony">
         {t("navigation.browseTestimony")}
       </BrowseHeader>
+      {flags().hearingsAndTranscriptions ? (
+        <BrowseHeader href="/hearings">
+          {t("navigation.browseHearings")}
+        </BrowseHeader>
+      ) : null}
       <BrowseHeader href="/bills">{t("navigation.browseBills")}</BrowseHeader>
     </>
   )

components/Navbar.tsx

@@ -5,11 +5,13 @@ import styled from "styled-components"
 import { useMediaQuery } from "usehooks-ts"
 import { SignInWithButton, signOutAndRedirectToHome, useAuth } from "./auth"
 import { Col, Container, Dropdown, Nav, Navbar, NavDropdown } from "./bootstrap"
+import { flags } from "./featureFlags"
 
 import {
   Avatar,
   NavbarLinkAI,
   NavbarLinkBills,
+  NavbarLinkHearings,
   NavbarLinkEditProfile,
   NavbarLinkEffective,
   NavbarLinkFAQ,
@@ -79,6 +81,9 @@ const MobileNav: React.FC<React.PropsWithChildren<unknown>> = () => {
     return (
       <Nav className="my-4">
         <NavbarLinkBills handleClick={closeNav} />
+        {flags().hearingsAndTranscriptions ? (
+          <NavbarLinkHearings handleClick={closeNav} />
+        ) : null}
         <NavbarLinkTestimony handleClick={closeNav} />
         {authenticated ? <NavbarLinkNewsfeed handleClick={closeNav} /> : <></>}
         <NavDropdown className={"navLink-primary"} title={t("about")}>
@@ -192,6 +197,7 @@ const DesktopNav: React.FC<React.PropsWithChildren<unknown>> = () => {
       <div className={`align-self-center ms-3`}>
         <Nav>
           <NavbarLinkBills />
+          {flags().hearingsAndTranscriptions ? <NavbarLinkHearings /> : null}
         </Nav>
       </div>
 

components/NavbarComponents.tsx

@@ -74,6 +74,27 @@ export const NavbarLinkBills: React.FC<
   )
 }
 
+export const NavbarLinkHearings: React.FC<
+  React.PropsWithChildren<{
+    handleClick?: any
+    other?: any
+  }>
+> = ({ handleClick, other }) => {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+  const { t } = useTranslation(["common", "auth"])
+  return (
+    <Nav.Item onClick={handleClick}>
+      <NavLink
+        className={isMobile ? "navLink-primary" : "text-white-50"}
+        href="/hearings"
+        {...other}
+      >
+        {t("navigation.browseHearings")}
+      </NavLink>
+    </Nav.Item>
+  )
+}
+
 export const NavbarLinkEditProfile: React.FC<
   React.PropsWithChildren<{
     handleClick?: any

components/bootstrap.ts

@@ -1,6 +1,7 @@
 // re-exports of all the bootstrap components we use. This ensures we only pull
 // in the components we use and makes it easy to reuse across the app.
 export { default as Alert } from "react-bootstrap/Alert"
+export { default as Badge } from "react-bootstrap/Badge"
 export { default as Button } from "react-bootstrap/Button"
 export { default as Card } from "react-bootstrap/Card"
 export { default as Col } from "react-bootstrap/Col"

components/db/events.ts

@@ -42,7 +42,11 @@ type SpecialEvent = BaseEvent & {
 }
 type SpecialEventContent = BaseContent
 
-type Hearing = BaseEvent & { type: "hearing"; content: HearingContent }
+type Hearing = BaseEvent & {
+  type: "hearing"
+  content: HearingContent
+  committeeChairs: string[]
+}
 type HearingContent = BaseContent & {
   Description: string
   Name: string

components/search/courtSessions.ts

@@ -0,0 +1,87 @@
+export type CourtSession = {
+  number: number
+  firstYear: number
+  secondYear: number
+  label: string
+  isCurrent?: boolean
+}
+
+const rawSessions: CourtSession[] = [
+  {
+    number: 194,
+    firstYear: 2025,
+    secondYear: 2026,
+    label: "194th (Current)",
+    isCurrent: true
+  },
+  {
+    number: 193,
+    firstYear: 2023,
+    secondYear: 2024,
+    label: "193rd (2023 - 2024)"
+  },
+  {
+    number: 192,
+    firstYear: 2021,
+    secondYear: 2022,
+    label: "192nd (2021 - 2022)"
+  }
+]
+
+export const COURT_SESSIONS: CourtSession[] = rawSessions.sort(
+  (a, b) => b.number - a.number
+)
+
+export const COURT_BY_NUMBER: Record<number, CourtSession | undefined> =
+  COURT_SESSIONS.reduce<Record<number, CourtSession | undefined>>(
+    (acc, session) => {
+      acc[session.number] = session
+      return acc
+    },
+    {}
+  )
+
+export const CURRENT_COURT_NUMBER =
+  COURT_SESSIONS.find(session => session.isCurrent)?.number ??
+  COURT_SESSIONS[0]?.number ??
+  0
+
+const ordinalSuffix = (value: number) => {
+  const mod100 = value % 100
+  if (mod100 >= 11 && mod100 <= 13) return `${value}th`
+  switch (value % 10) {
+    case 1:
+      return `${value}st`
+    case 2:
+      return `${value}nd`
+    case 3:
+      return `${value}rd`
+    default:
+      return `${value}th`
+  }
+}
+
+export const formatCourtFilterLabel = (number: number) => {
+  const session = COURT_BY_NUMBER[number]
+  if (!session) return String(number)
+  if (session.label) return session.label
+  if (session.isCurrent)
+    return `${ordinalSuffix(number)} (Current ${session.firstYear} - ${
+      session.secondYear
+    })`
+  return `${ordinalSuffix(number)} (${session.firstYear} - ${
+    session.secondYear
+  })`
+}
+
+export const formatCourtSubtitle = (number: number) => {
+  const session = COURT_BY_NUMBER[number]
+  if (!session) return `${ordinalSuffix(number)} Session`
+  const range = `${session.firstYear} - ${session.secondYear}`
+  if (session.isCurrent) {
+    return `Current Session: ${range}`
+  }
+  return `${ordinalSuffix(number)} Session: ${range}`
+}
+
+export const getCourtSession = (number: number) => COURT_BY_NUMBER[number]

components/search/hearings/HearingHit.tsx

@@ -0,0 +1,209 @@
+import Link from "next/link"
+import { useRouter } from "next/router"
+import { useTranslation } from "next-i18next"
+import styled from "styled-components"
+import { Card, Badge } from "../../bootstrap"
+import { Highlight } from "react-instantsearch"
+import { HearingHitData } from "./HearingSearch"
+import {
+  useState,
+  useMemo,
+  KeyboardEvent,
+  MouseEvent,
+  useCallback
+} from "react"
+
+const StyledCard = styled(Card)`
+  border: none;
+  border-radius: 4px;
+  margin-bottom: 0.75rem;
+  overflow: hidden;
+  cursor: pointer;
+  outline-color: var(--bs-blue);
+  outline-style: solid;
+  outline-width: 0;
+  transition: outline-width 0.1s;
+
+  font-size: 0.85rem;
+
+  &:hover {
+    outline-width: 2px;
+  }
+
+  &:active {
+    outline-width: 4px;
+  }
+
+  .card-body {
+    padding: 0.85rem 1rem;
+  }
+`
+
+const SectionLabel = styled.span`
+  color: var(--bs-blue);
+  font-weight: 600;
+  margin-right: 0.5rem;
+`
+
+export const HearingHit = ({ hit }: { hit: HearingHitData }) => {
+  const { t } = useTranslation(["search", "hearing"])
+  const router = useRouter()
+  const startsAt = new Date(hit.startsAt)
+  const scheduleDate = t("schedule_date", { ns: "hearing", date: startsAt })
+  const scheduleTime = t("schedule_time", { ns: "hearing", date: startsAt })
+  const chairNames = hit.chairNames ?? []
+  const topics = hit.agendaTopics ?? []
+  const bills = useMemo(() => {
+    const numbers = hit.billNumbers ?? []
+    const slugs = hit.billSlugs ?? []
+    return numbers.map((number, index) => ({
+      number,
+      slug: slugs[index]!
+    }))
+  }, [hit.billNumbers, hit.billSlugs])
+
+  const navigateToHearing = useCallback(() => {
+    void router.push(`/hearing/${hit.eventId}`)
+  }, [hit.eventId, router])
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault()
+      navigateToHearing()
+    }
+  }
+
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+    event.preventDefault()
+    navigateToHearing()
+  }
+
+  return (
+    <StyledCard
+      role="link"
+      tabIndex={0}
+      className="w-100"
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      aria-label={hit.title}
+    >
+      <Card.Body className="bg-white">
+        <div className="d-flex flex-column gap-2">
+          <div className="d-flex flex-wrap gap-2 align-items-center justify-content-between">
+            <div className="d-flex flex-column">
+              <span className="text-uppercase fw-semibold text-secondary">
+                {scheduleDate}
+              </span>
+              <span className="text-secondary">{scheduleTime}</span>
+            </div>
+            {hit.hasVideo ? (
+              <Badge bg="success" pill>
+                {t("video_available", { ns: "search" })}
+              </Badge>
+            ) : null}
+          </div>
+
+          <div>
+            <Card.Title as="h6" className="mb-1">
+              <Highlight attribute="title" hit={hit} />
+            </Card.Title>
+            {hit.description ? (
+              <p className="mb-0 text-muted">
+                <Highlight attribute="description" hit={hit} />
+              </p>
+            ) : null}
+          </div>
+
+          {hit.locationName || hit.locationCity ? (
+            <div>
+              <SectionLabel>
+                {t("location_label", { ns: "search" })}
+              </SectionLabel>
+              <span>
+                {hit.locationName ?? hit.locationCity}
+                {hit.locationName && hit.locationCity
+                  ? ` · ${hit.locationCity}`
+                  : ""}
+              </span>
+            </div>
+          ) : null}
+
+          {chairNames.length ? (
+            <div className="d-flex align-items-center gap-2">
+              <SectionLabel>{t("chairs", { ns: "hearing" })}</SectionLabel>
+              {<span>{chairNames.join(", ")}</span>}
+            </div>
+          ) : null}
+
+          {topics.length ? (
+            <div>
+              <SectionLabel>{t("agenda_label", { ns: "search" })}</SectionLabel>
+              <span>{topics.join(", ")}</span>
+            </div>
+          ) : null}
+
+          <BillsSection bills={bills} />
+        </div>
+      </Card.Body>
+    </StyledCard>
+  )
+}
+
+const BillsSection = ({
+  bills
+}: {
+  bills: { number: string; slug: string }[]
+}) => {
+  const { t } = useTranslation("search")
+  const [showAllBills, setShowAllBills] = useState(false)
+
+  if (!bills.length) return null
+
+  const visibleCount = showAllBills ? bills.length : Math.min(7, bills.length)
+  const visibleBills = bills.slice(0, visibleCount)
+  const remaining = bills.length - visibleCount
+
+  return (
+    <div>
+      <SectionLabel>{t("bills_label")}</SectionLabel>
+      <span>
+        {visibleBills.map((bill, index) => {
+          const isLastVisible = index === visibleBills.length - 1
+          const shouldShowComma =
+            !isLastVisible || (!showAllBills && remaining > 0)
+
+          return (
+            <span key={`${bill.slug}-${bill.number}-${index}`}>
+              <Link href={`/bills/${bill.slug}`} legacyBehavior>
+                <a
+                  className="text-decoration-none"
+                  onClick={event => event.stopPropagation()}
+                  onKeyDown={event => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.stopPropagation()
+                    }
+                  }}
+                >
+                  {bill.number}
+                </a>
+              </Link>
+              {shouldShowComma ? ", " : ""}
+            </span>
+          )
+        })}
+        {!showAllBills && remaining > 0 ? (
+          <button
+            type="button"
+            className="btn btn-link p-0 align-baseline"
+            onClick={event => {
+              event.stopPropagation()
+              setShowAllBills(true)
+            }}
+          >
+            {t("more_bills", { count: remaining })}
+          </button>
+        ) : null}
+      </span>
+    </div>
+  )
+}