@flamingo-stack/openframe-frontend-core 0.0.218 → 0.0.219

package/src/components/shared/product-release/product-releases-view.tsx

@@ -0,0 +1,260 @@
+'use client'
+
+/**
+ * `<ProductReleasesView />` — the shared, SELF-CONTAINED releases LIST surface.
+ *
+ * The host configures only two things: the **api route** (`endpoint`, default
+ * `/api/releases`) and the **internal page route** for a release's detail page
+ * (via `runtime.composeContentUrl` / `basePath`). Everything else — reading the
+ * search / status / page URL params the section chrome writes, fetching the
+ * page, pagination, empty / error / loading states, card composition + nav —
+ * happens INSIDE the lib. Mirrors the `DeliveryLists` internal-fetch pattern
+ * (plain `fetch` + `useEffect`/`useState`, no react-query dependency).
+ *
+ * SSR: pass `initialData` to hydrate the first page without a client round-trip
+ * (the hub can server-fetch); embedders omit it and the view fetches on mount.
+ *
+ * Card props: `buildCardProps` defaults to the lib's RICH `buildProductReleaseCardProps`
+ * (full lg metadata — Type / Status / author / changelog counts); pass your own to customize.
+ */
+
+import * as React from 'react'
+
+import { useRouter, useSearchParams, usePathname } from '../../../embed-shims'
+import { useSelfFetch } from '../../../hooks/use-self-fetch'
+import { useChatRuntime } from '../../../contexts/chat-runtime-context'
+import type { ProductRelease, ProductReleaseListResponse } from '../../../types/product-release'
+import { cn } from '../../../utils/cn'
+import { resolveContentHref } from '../../../utils/content-href'
+import { isModifierClick } from '../../chat/utils/chat-nav-resolution'
+import { executeNavigationImperative } from '../../chat/utils/execute-navigation'
+import { useEntityCardLink } from '../../chat/entity-cards/use-entity-card-link'
+import { buildProductReleaseCardProps } from '../../chat/entity-cards/product-release-card-defaults'
+import { EmptyState } from '../../empty-state'
+import { LoadError } from '../../ui/error-state'
+import { PersistentPaginationWrapper } from '../../persistent-pagination'
+import { ProductReleaseCard, type ProductReleaseCardProps } from './product-release-card'
+import { ProductReleaseCardSkeleton } from './product-release-card-skeleton'
+import { DEV_SECTION_PARAM_KEYS } from '../../../utils/dev-sections/dev-section-param-keys'
+
+const DEFAULT_ENDPOINT = '/api/releases'
+// Param keys sourced from the shared registry (see RoadmapView) — single source for the
+// chrome's written `?key=` and this view's read.
+const DEFAULT_SEARCH_PARAM_KEY = DEV_SECTION_PARAM_KEYS.search
+const DEFAULT_STATUS_PARAM_KEY = DEV_SECTION_PARAM_KEYS.releaseStatus
+const DEFAULT_PAGE_PARAM_KEY = 'page'
+
+/** The `<ProductReleaseCard>` props the caller derives per release — the card's
+ *  own data fields minus the ones this view supplies (title/summary/version/
+ *  size/nav). `formattedDate` stays required so the spread satisfies the card. */
+export type ProductReleaseCardExtras = Omit<
+  ProductReleaseCardProps,
+  'title' | 'summary' | 'version' | 'size' | 'anchorProps' | 'onClick' | 'className'
+>
+
+export interface ProductReleasesViewProps {
+  /** GET endpoint for the releases list (the api route). The view appends
+   *  `?limit&offset&<search>&<release_status>`. Default `/api/releases`. */
+  endpoint?: string
+  /** Optional SSR hydrate for the first page — skips the initial client fetch. */
+  initialData?: ProductReleaseListResponse
+  /** Page size → fixed slot count + offset math. Default 5. */
+  itemsPerPage?: number
+  /** Fallback detail-href prefix when `runtime.composeContentUrl` is not wired
+   *  (single-platform embedders). Default `/releases`. */
+  basePath?: string
+  /** Derive the per-card prop bundle. Defaults to the lib's RICH lg builder
+   *  (`buildProductReleaseCardProps` — full Type/Status/author/changelog metadata)
+   *  so embedders get the complete card with zero config; pass your own to customize. */
+  buildCardProps?: (release: ProductRelease) => ProductReleaseCardExtras
+  /** URL param key for the search input. MUST match the chrome that writes it.
+   *  Default `'search'` (also the outbound query-param name). */
+  searchParamKey?: string
+  /** URL param key for the status filter. Default `'release_status'`. */
+  statusParamKey?: string
+  /** URL param key for the page number. Default `'page'`. */
+  pageParamKey?: string
+  className?: string
+}
+
+/**
+ * Per-row child — owns the per-release hooks (`useChatRuntime` +
+ * `useEntityCardLink` + `useRouter`) so they run at a component top level, NOT
+ * inside the parent `.map()` (Rules-of-Hooks).
+ */
+function ReleaseRow({
+  release,
+  basePath,
+  buildCardProps,
+}: {
+  release: ProductRelease
+  basePath: string
+  buildCardProps: (release: ProductRelease) => ProductReleaseCardExtras
+}) {
+  const runtime = useChatRuntime()
+  const router = useRouter()
+  // Pass the HYDRATED junction (`product_release_platforms` — the release DAL
+  // flattens each platform's `name` onto it), like the blog / case-study /
+  // interview grids. The composer reads `name` → resolves to the CURRENT
+  // platform when the release belongs to it → relative same-tab href.
+  const cta = resolveContentHref(runtime?.composeContentUrl, {
+    type: 'product_release',
+    slug: release.slug,
+    basePath,
+    platforms: release.product_release_platforms,
+  })
+  const { target, rel } = useEntityCardLink({ href: cta.href, targetPlatform: cta.targetPlatform })
+
+  const onClick = (e: React.MouseEvent<HTMLAnchorElement>) => {
+    // Let the browser handle modifier / middle / new-tab clicks (shared
+    // `isModifierClick` rule). Otherwise soft same-origin nav: the host's
+    // `navigate` (hub docNav) if wired, else the registered embed-shims router.
+    if (e.defaultPrevented || isModifierClick(e) || target === '_blank') return
+    e.preventDefault()
+    executeNavigationImperative({
+      runtime,
+      href: cta.href,
+      targetPlatform: cta.targetPlatform,
+      fallbackNavigate: router.push,
+    })
+  }
+
+  return (
+    <ProductReleaseCard
+      size="lg"
+      title={release.title}
+      summary={release.summary}
+      version={release.version}
+      {...buildCardProps(release)}
+      anchorProps={{ href: cta.href, target, rel, onClick }}
+    />
+  )
+}
+
+export function ProductReleasesView({
+  endpoint = DEFAULT_ENDPOINT,
+  initialData,
+  itemsPerPage = 5,
+  basePath = '/releases',
+  buildCardProps = buildProductReleaseCardProps,
+  searchParamKey = DEFAULT_SEARCH_PARAM_KEY,
+  statusParamKey = DEFAULT_STATUS_PARAM_KEY,
+  pageParamKey = DEFAULT_PAGE_PARAM_KEY,
+  className,
+}: ProductReleasesViewProps = {}) {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const pathname = usePathname()
+
+  // Filter / page state from the URL (written by the section chrome above).
+  const search = searchParams.get(searchParamKey) || ''
+  const status = searchParams.get(statusParamKey) || 'all'
+  const currentPage = Math.max(1, parseInt(searchParams.get(pageParamKey) || '1', 10) || 1)
+  const offset = (currentPage - 1) * itemsPerPage
+
+  // Fold every query param into the url so it IS the fetch key.
+  const listParams = new URLSearchParams({ limit: String(itemsPerPage), offset: String(offset) })
+  if (search) listParams.set(searchParamKey, search)
+  if (status && status !== 'all') listParams.set(statusParamKey, status)
+  const { data, isLoading, error, reload } = useSelfFetch<ProductReleaseListResponse>(
+    `${endpoint}?${listParams.toString()}`,
+    { initialData },
+  )
+
+  const releases = data?.data ?? []
+  const totalCount = data?.count ?? 0
+  const totalPages = Math.ceil(totalCount / itemsPerPage)
+  const hasActiveFilters = search !== '' || status !== 'all'
+  const showEmpty = !isLoading && !error && releases.length === 0
+
+  const goToPage = (page: number) => {
+    const params = new URLSearchParams(searchParams.toString())
+    params.set(pageParamKey, String(page))
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
+  }
+  const resetFilters = () => {
+    const params = new URLSearchParams(searchParams.toString())
+    params.delete(searchParamKey)
+    params.delete(statusParamKey)
+    params.delete(pageParamKey)
+    router.replace(`${pathname}?${params.toString()}`, { scroll: false })
+  }
+
+  if (error) {
+    return (
+      <div className={cn('w-full', className)}>
+        <LoadError message="Failed to load releases." onRetry={reload} />
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn('w-full flex flex-col gap-[40px]', className)}>
+      <div className="min-h-[600px]">
+        {showEmpty ? (
+          <div className="h-[600px] flex items-center justify-center">
+            {hasActiveFilters ? (
+              <EmptyState
+                type="search"
+                title="No releases found"
+                description="No releases match your current filters. Try adjusting your search or status filter."
+                showCTA
+                ctaText="Reset Filters"
+                onCtaClick={resetFilters}
+              />
+            ) : (
+              <EmptyState
+                type="generic"
+                title="No releases available"
+                description="Check back soon for product updates!"
+                showCTA={false}
+              />
+            )}
+          </div>
+        ) : (
+          <>
+            {/* ALWAYS render `itemsPerPage` slots — visibility toggles so the
+                list height is stable across loading ↔ loaded. */}
+            <div className="flex flex-col gap-6">
+              {Array.from({ length: itemsPerPage }).map((_, i) => {
+                const release = releases[i]
+                const hasData = !!release
+                return (
+                  <div
+                    key={release?.id ?? `slot-${i}`}
+                    style={{ visibility: isLoading || hasData ? 'visible' : 'hidden' }}
+                  >
+                    {isLoading ? (
+                      <ProductReleaseCardSkeleton size="lg" />
+                    ) : release ? (
+                      <ReleaseRow release={release} basePath={basePath} buildCardProps={buildCardProps} />
+                    ) : (
+                      <ProductReleaseCardSkeleton size="lg" />
+                    )}
+                  </div>
+                )
+              })}
+            </div>
+
+            {/* Pagination — always present at the bottom for consistent spacing. */}
+            <div className="mt-6 md:mt-8 flex justify-center">
+              {isLoading ? (
+                <div className="h-12 m-3 w-64" />
+              ) : releases.length > 0 && totalPages > 1 ? (
+                <PersistentPaginationWrapper
+                  isLoading={false}
+                  currentPage={currentPage}
+                  totalPages={totalPages}
+                  onPageChange={goToPage}
+                  variant="blog"
+                />
+              ) : (
+                <div className="h-12 m-3 w-64" style={{ visibility: 'hidden' }} />
+              )}
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/shared/roadmap/index.ts

@@ -21,3 +21,5 @@ export { RoadmapGridSkeleton, type RoadmapGridSkeletonProps } from './roadmap-gr
 // `components/index.ts` barrel. Consumers can import the canonical
 // `VoteType` from `@flamingo-stack/openframe-frontend-core/components/chat`.
 export { useRoadmapVoting, type VoteState, type UseRoadmapVotingOptions } from './use-roadmap-voting';
+// Self-fetching list surface (host configures the api routes only).
+export { RoadmapView, type RoadmapViewProps } from './roadmap-view';

package/src/components/shared/roadmap/roadmap-grid.tsx

@@ -1,45 +1,148 @@
 'use client';
 
 /**
- * RoadmapGrid — full-page roadmap surface.
+ * RoadmapGrid — the shared roadmap LIST surface.
  *
- * Renders a responsive 2-col grid of `<RoadmapCard>`s (lib's chat-entity
- * card, default density), threads voting state through `useRoadmapVoting`,
- * and follows up a successful vote with a single-task refresh fetch so
- * the displayed counts stay live.
+ * Two modes (one component, one voting state):
+ *   - `groupByQuarter` (DEFAULT): buckets items by `item.quarter`, sorts the
+ *     quarters chronologically, and renders each in a collapsible `<Accordion>`
+ *     — the same quarter grouping the hub's roadmap page has, now shared so
+ *     every embedder gets it for free. Quarters at/after the current quarter
+ *     (and within `quartersToKeepClosed` of it) open by default; older ones
+ *     collapse. When `hasActiveFilters`, all quarters expand.
+ *   - `groupByQuarter={false}`: a flat 2-col grid (related-content rails that
+ *     pass a small pre-filtered `items` slice).
  *
- * Endpoint configuration — `buildRefreshUrl`:
- *   The single-task refresh hits a PATH-based endpoint
- *   (`/api/roadmap/<taskId>` by default). A string-concat `refreshEndpoint`
- *   would silently break embedders whose by-id route is shaped
- *   differently (e.g. `/api/roadmap?id=…`), so this prop is a function
- *   builder. The default matches the hub's pre-migration shape.
+ * Voting state (`useRoadmapVoting` + the in-flight set) lives ONCE at this
+ * level and is shared across every quarter's grid, so a vote in Q3 and a vote
+ * in Q4 can't race separate states. A successful vote triggers a single-task
+ * refresh (`buildRefreshUrl`) and patches the parent list via `onItemUpdate`.
  *
- * Empty state — uses lib's `<EmptyState>` directly (identical API to
- * hub's, lives in `src/components/empty-state.tsx`).
+ * Hydration: `expandedQuarters` starts `[]` and is populated in a client-only
+ * effect (mirrors the hub) so SSR markup matches first client paint.
  */
 
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { RoadmapCard } from '../../chat/entity-cards/roadmap-card';
 import { useRoadmapVoting, type UseRoadmapVotingOptions } from './use-roadmap-voting';
 import { EmptyState } from '../../empty-state';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionTrigger,
+  AccordionContent,
+} from '../../ui';
+import { cn } from '../../../utils/cn';
 import type { RoadmapItem } from '../../chat/types/entities/roadmap-item';
 
 const DEFAULT_BUILD_REFRESH_URL = (taskId: string) => `/api/roadmap/${taskId}`;
+const BACKLOG = 'Backlog';
+
+// ── Quarter helpers (pure; lifted from the hub roadmap section) ──────────────
+
+/** Status → sort priority (Complete → Working → Review → To-Do → other). */
+function getStatusPriority(status: string): number {
+  const s = (status || '').toLowerCase();
+  if (s.includes('complete') || s.includes('done')) return 1;
+  if (s.includes('working') || s.includes('progress')) return 2;
+  if (s.includes('review')) return 3;
+  if (s.includes('to do') || s.includes('plan')) return 4;
+  return 5;
+}
+
+/** Parse a `"Q<n> <year>"` label → {quarter, year}; `null` when unparseable. */
+function parseQuarterString(q: string): { quarter: number; year: number } | null {
+  const match = q.match(/Q(\d+)\s+(\d+)/);
+  if (!match) return null;
+  return { quarter: parseInt(match[1], 10), year: parseInt(match[2], 10) };
+}
+
+function compareQuarters(
+  a: { quarter: number; year: number },
+  b: { quarter: number; year: number },
+): number {
+  if (a.year !== b.year) return a.year - b.year;
+  return a.quarter - b.quarter;
+}
+
+/** Today's quarter — client-only (called from an effect, never during SSR). */
+function getCurrentQuarter(): { quarter: number; year: number } {
+  const now = new Date();
+  return { quarter: Math.floor(now.getMonth() / 3) + 1, year: now.getFullYear() };
+}
+
+/** Quarters open by default: current + future, plus the recent past within
+ *  `quartersToKeepClosed` of the current quarter; Backlog always open. */
+function computeDefaultExpandedQuarters(quarters: string[], quartersToKeepClosed: number): string[] {
+  const currentQ = getCurrentQuarter();
+  const out: string[] = [];
+  for (const q of quarters) {
+    if (q === BACKLOG) continue;
+    const parsed = parseQuarterString(q);
+    if (!parsed) continue;
+    const diff = compareQuarters(parsed, currentQ);
+    if (diff >= 0) {
+      out.push(q);
+    } else {
+      const quartersAgo = currentQ.year * 4 + currentQ.quarter - (parsed.year * 4 + parsed.quarter);
+      if (quartersAgo < quartersToKeepClosed) out.push(q);
+    }
+  }
+  if (quarters.includes(BACKLOG)) out.push(BACKLOG);
+  return out;
+}
 
 export interface RoadmapGridProps {
   items: RoadmapItem[];
   onItemUpdate?: (updatedItem: RoadmapItem) => void;
-  /** Show the desktop left margin (~120px) that aligns the grid with
-   *  the page hero. Default `true`. Related-content rails pass `false`. */
+  /** Show the desktop left margin (~120px) that aligns the grid with the page
+   *  hero. Default `true`. Related-content rails pass `false`. */
   showLeftMargin?: boolean;
-  /** URL builder for the per-task refresh call after a successful vote.
-   *  Function shape because the taskId sits in the URL path, not a
-   *  query param. Default `(t) => \`/api/roadmap/${t}\``. */
+  /** URL builder for the per-task refresh call after a successful vote. */
   buildRefreshUrl?: (taskId: string) => string;
-  /** Voting hook options (vote endpoint + storage key) — see
-   *  `useRoadmapVoting`. */
+  /** Voting hook options (vote endpoint + storage key). */
   votingOptions?: UseRoadmapVotingOptions;
+  /** Group items into collapsible per-quarter accordions. Default `false`
+   *  (flat grid) so EXISTING callers — the hub's per-quarter RoadmapGrid calls
+   *  and related-content rails — stay unchanged. `RoadmapView` / full-page
+   *  callers pass `true` to get the shared quarter grouping. */
+  groupByQuarter?: boolean;
+  /** When true (search/filter active), every quarter expands so results aren't
+   *  hidden in collapsed sections. Threaded from `RoadmapView`. */
+  hasActiveFilters?: boolean;
+  /** Past quarters within this window of the current quarter stay open by
+   *  default; older ones collapse. Default `2`. */
+  quartersToKeepClosed?: number;
+}
+
+/** Internal flat 2-col grid for ONE set of items. Voting comes from the parent
+ *  so the state is shared across quarters. */
+function RoadmapGridSingle({
+  items,
+  showLeftMargin,
+  getVote,
+  onVote,
+  votingTasks,
+}: {
+  items: RoadmapItem[];
+  showLeftMargin: boolean;
+  getVote: (taskId: string) => 'up' | 'down' | null;
+  onVote: (taskId: string, voteType: 'up' | 'down') => void;
+  votingTasks: Set<string>;
+}) {
+  return (
+    <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 ${showLeftMargin ? 'md:ml-[120px]' : ''}`}>
+      {items.map((item) => (
+        <RoadmapCard
+          key={item.id}
+          item={item}
+          userVote={getVote(item.id)}
+          onVote={(voteType) => onVote(item.id, voteType)}
+          isVoting={votingTasks.has(item.id)}
+        />
+      ))}
+    </div>
+  );
 }
 
 export function RoadmapGrid({
@@ -48,31 +151,28 @@ export function RoadmapGrid({
   showLeftMargin = true,
   buildRefreshUrl = DEFAULT_BUILD_REFRESH_URL,
   votingOptions,
+  groupByQuarter = false,
+  hasActiveFilters = false,
+  quartersToKeepClosed = 2,
 }: RoadmapGridProps) {
+  // ── Voting (shared across all quarters) ──
   const { getVote, toggleVote } = useRoadmapVoting(votingOptions);
   const [votingTasks, setVotingTasks] = useState<Set<string>>(new Set());
 
   const handleVote = async (taskId: string, voteType: 'up' | 'down') => {
-    // Prevent double-clicking
     if (votingTasks.has(taskId)) return;
-
-    setVotingTasks(prev => new Set(prev).add(taskId));
-
+    setVotingTasks((prev) => new Set(prev).add(taskId));
     try {
       const result = await toggleVote(taskId, voteType);
-
       if (result.success) {
-        // Refresh the specific task from server
         const response = await fetch(buildRefreshUrl(taskId));
         if (response.ok) {
           const data = await response.json();
-          if (data.item && onItemUpdate) {
-            onItemUpdate(data.item);
-          }
+          if (data.item && onItemUpdate) onItemUpdate(data.item);
         }
       }
     } finally {
-      setVotingTasks(prev => {
+      setVotingTasks((prev) => {
         const next = new Set(prev);
         next.delete(taskId);
         return next;
@@ -80,6 +180,57 @@ export function RoadmapGrid({
     }
   };
 
+  // ── Quarter bucketing + chronological sort (recomputed each render; cheap) ──
+  const itemsByQuarter = items.reduce<Record<string, RoadmapItem[]>>((acc, item) => {
+    const q = item.quarter || BACKLOG;
+    (acc[q] ||= []).push(item);
+    return acc;
+  }, {});
+  for (const q of Object.keys(itemsByQuarter)) {
+    itemsByQuarter[q].sort((a, b) => getStatusPriority(a.status) - getStatusPriority(b.status));
+  }
+  const sortedQuarters = Object.keys(itemsByQuarter).sort((a, b) => {
+    if (a === BACKLOG) return 1;
+    if (b === BACKLOG) return -1;
+    const aD = parseQuarterString(a) ?? { quarter: 0, year: 0 };
+    const bD = parseQuarterString(b) ?? { quarter: 0, year: 0 };
+    return compareQuarters(aD, bD);
+  });
+  const sortedQuartersKey = sortedQuarters.join(',');
+
+  // ── Accordion expand state (hydration-safe: start [], populate in effects) ──
+  const [expandedQuarters, setExpandedQuarters] = useState<string[]>([]);
+  const [isInitialized, setIsInitialized] = useState(false);
+  const hasSetInitialState = useRef(false);
+  const prevItemsLength = useRef(0);
+
+  // Initial expand state once data loads (runs once, or when data first arrives).
+  useEffect(() => {
+    const itemsJustLoaded = prevItemsLength.current === 0 && items.length > 0;
+    prevItemsLength.current = items.length;
+    if (sortedQuarters.length > 0 && (!hasSetInitialState.current || itemsJustLoaded)) {
+      hasSetInitialState.current = true;
+      setExpandedQuarters(
+        hasActiveFilters
+          ? [...sortedQuarters]
+          : computeDefaultExpandedQuarters(sortedQuarters, quartersToKeepClosed),
+      );
+      setIsInitialized(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [sortedQuarters.length, items.length]);
+
+  // React to filter toggles AFTER init: filters on → expand all; off → defaults.
+  useEffect(() => {
+    if (!isInitialized || sortedQuarters.length === 0) return;
+    setExpandedQuarters(
+      hasActiveFilters
+        ? [...sortedQuarters]
+        : computeDefaultExpandedQuarters(sortedQuarters, quartersToKeepClosed),
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hasActiveFilters, sortedQuartersKey, isInitialized, quartersToKeepClosed]);
+
   if (items.length === 0) {
     return (
       <EmptyState
@@ -90,17 +241,70 @@ export function RoadmapGrid({
     );
   }
 
+  // Flat mode (related-content rails) — no accordion.
+  if (!groupByQuarter) {
+    return (
+      <RoadmapGridSingle
+        items={items}
+        showLeftMargin={showLeftMargin}
+        getVote={getVote}
+        onVote={handleVote}
+        votingTasks={votingTasks}
+      />
+    );
+  }
+
   return (
-    <div className={`grid grid-cols-1 md:grid-cols-2 gap-6 ${showLeftMargin ? 'md:ml-[120px]' : ''}`}>
-      {items.map((item) => (
-        <RoadmapCard
-          key={item.id}
-          item={item}
-          userVote={getVote(item.id)}
-          onVote={(voteType) => handleVote(item.id, voteType)}
-          isVoting={votingTasks.has(item.id)}
-        />
-      ))}
-    </div>
+    <Accordion
+      type="multiple"
+      value={expandedQuarters}
+      onValueChange={setExpandedQuarters}
+      className="flex flex-col gap-10"
+    >
+      {sortedQuarters.map((quarter) => {
+        const itemCount = itemsByQuarter[quarter]?.length || 0;
+        const isExpanded = expandedQuarters.includes(quarter);
+        return (
+          <AccordionItem
+            key={quarter}
+            value={quarter}
+            id={`quarter-${quarter.replace(/\s+/g, '-').toLowerCase()}`}
+            className="border-0"
+          >
+            <AccordionTrigger className="w-full p-0 hover:no-underline [&>svg]:h-5 [&>svg]:w-5 [&>svg]:text-ods-text-secondary [&>svg]:ml-auto [&>svg]:shrink-0">
+              <div className="flex items-center gap-3">
+                <h3
+                  className={cn(
+                    "font-['Azeret_Mono'] font-semibold text-[24px] md:text-[28px] lg:text-[32px] leading-[32px] md:leading-[36px] lg:leading-[40px] text-ods-text-primary tracking-[-0.48px] md:tracking-[-0.56px] lg:tracking-[-0.64px] transition-opacity",
+                    isExpanded ? 'opacity-100' : 'opacity-60',
+                  )}
+                >
+                  {quarter}
+                  <span className="text-ods-accent">:</span>
+                </h3>
+                <span
+                  className={cn(
+                    'text-sm font-medium transition-opacity',
+                    isExpanded ? 'text-ods-text-secondary opacity-100' : 'text-ods-text-tertiary opacity-60',
+                  )}
+                >
+                  {itemCount} {itemCount === 1 ? 'item' : 'items'}
+                  {isInitialized && !isExpanded && <span className="ml-2 text-ods-accent">Click to expand</span>}
+                </span>
+              </div>
+            </AccordionTrigger>
+            <AccordionContent className="pt-4 pb-0 overflow-hidden data-[state=closed]:animate-none data-[state=open]:animate-none">
+              <RoadmapGridSingle
+                items={itemsByQuarter[quarter]}
+                showLeftMargin={showLeftMargin}
+                getVote={getVote}
+                onVote={handleVote}
+                votingTasks={votingTasks}
+              />
+            </AccordionContent>
+          </AccordionItem>
+        );
+      })}
+    </Accordion>
   );
 }