feat: message history page

[kevinrutledge]

What needs to be built?

Replace the messages placeholder page with a message history page showing all sent messages in a table. The page has a search bar, a channel filter dropdown, a sort option, and a "+ New Message" button that navigates to the compose page. Clicking "View" on a table row opens the view message modal.

Design reference

Figma link: https://www.figma.com/design/O8reTcdtMARvnTzCtlsvmp/Paso-Food-Co-Op?node-id=407-4433&p=f&t=wZjCheHOOyiYBbH4-0

Documentation

Existing patterns:

• src/app/(protected)/messages/page.tsx - current placeholder page
• src/actions/contact-group.ts - fetchMessageHistory() returns MessageHistoryItem[]
• src/actions/contact-group.ts - fetchMessageDetail() returns message + recipients for the modal

Component dependencies (must be merged first):

• src/components/messages/message-history-table.tsx - table component
• src/components/messages/view-message-modal.tsx - view message modal

Official docs:

• shadcn Select
• Next.js Link

Technical notes

Replace src/app/(protected)/messages/page.tsx and create src/app/(protected)/messages/messages-content.tsx.

Server component (page.tsx):

• Fetch message history using fetchMessageHistory()
• Pass data to MessagesContent

Client component (messages-content.tsx):

• "Message History" heading in Angkor font
• Search bar filters the table by message content using useFuzzySearch
• "Message Type" dropdown: Email, SMS, All (filters by channel)
• "Date" dropdown: Recent, Oldest (sorts by delivery date)
• "+ New Message" red button (PRFC red) navigates to /messages/compose
• Renders MessageHistoryTable with filtered/sorted data
• Manages view message modal state
• When "View" is clicked, fetches message detail and recipients via fetchMessageDetail(), opens ViewMessageModal

Acceptance criteria

• Placeholder page replaced with message history layout
• "Message History" heading in Angkor font
• Search bar filters table rows
• "Message Type" dropdown with Email, SMS, All options
• "Date" dropdown with Recent and Oldest options
• "+ New Message" red button (PRFC red) navigates to /messages/compose
• MessageHistoryTable renders with filtered/sorted data
• "View" link opens ViewMessageModal with message detail and recipients
• Responsive layout
• npm run build passes
• npm run lint passes