New Case Contacts Table: expandable case contact rows

[cliftonmcintosh]

What github issue is this PR for, if any?

Resolves #6498

What changed, and why?

Implements expand/collapse functionality for rows in the new case contacts table.

app/datatables/case_contact_datatable.rb

• Added contact_topic_answers and notes to the JSON response so the browser has the data it needs to render expanded content
• Added contact_topic_answers: :contact_topic to the includes in raw_records to avoid N+1 queries

app/javascript/src/dashboard.js

• Updated the chevron column render to add the expand-toggle CSS class and a pointer cursor
• Captured the DataTable instance in a variable so the click handler can reference it
• Added a delegated click handler using the DataTables Child Rows API (row.child()) to show/hide expanded content on chevron click
• Added buildExpandedContent() to build the expanded row HTML from the row's JSON data, matching the structure of the Figma design (topic heading followed by answer paragraph)

app/assets/stylesheets/pages/case_contacts.scss

• Added expand-toggle styles with a 0.3s CSS rotation animation for the chevron (matching the existing sidebar pattern)
• Added expanded-content and expanded-topic styles to match the Figma layout

The DataTables Child Rows API is used rather than Bootstrap collapse or manual DOM insertion because DataTables replaces the entire <tbody> via AJAX on initialization. When this happens, any server-rendered or manually inserted rows are destroyed. row.child() inserts rows that DataTables manages itself, so they persist correctly.

Topics column pill styling. While working on this issue I noticed the Topics column was rendering as a raw pipe-delimited string. I did not see an issue that covers the Topics column, so I updated the render for each topic to be a badge-pill chip (matching the existing Draft badge style) with a +N More overflow indicator when there are more than two topics. I am happy to pull this into a separate issue and PR if that is preferred.

How is this tested?

Request specs — added to spec/requests/case_contacts/case_contacts_new_design_spec.rb:

• contact_topic_answers is present and is an array in the datatable JSON response
• Topic question is included in each answer
• notes is included in the response
• Blank answer values are omitted
• Notes is blank when the field is empty
• contact_topics is returned as an array of strings (not a pipe-delimited string)
• The topic question is included in the array

System specs — added spec/system/case_contacts/case_contacts_new_design_spec.rb:

• Clicking the chevron shows contact topic answer content in the expanded row
• Clicking the chevron shows notes in the expanded row
• Clicking the chevron a second time hides the expanded content

Jest — updated app/javascript/__tests__/dashboard.test.js:

• Updated chevron render expectation to reflect the expand-toggle class
• Topics column: each topic renders as a badge-pill chip
• Topics column: renders empty string when there are no topics
• Topics column: shows only the first two topics when there are more than two
• Topics column: shows a +N More badge for overflow topics
• Topics column: no overflow badge when there are two or fewer topics

Screenshots

Screen recording of collapsible sections

new.contact.tables.expandable.rows.mov

AI Disclosure

This PR was implemented with the assistance of Claude Code (Anthropic, claude-sonnet-4-6). The AI was used to:

• Analyze the codebase and Figma designs to inform the implementation approach
• Draft and iterate on code changes across the datatable, JavaScript, and stylesheet files
• Write and run RSpec request specs, system specs, and Jest tests
• Investigate the DataTables Child Rows API as the correct architectural approach for this use case

All generated code was reviewed and committed by the author.