Facet updates on data-tile to make sure all the facets are listed

[miss-o-soup]

Facet updates on data-tile to make sure all the facets are listed
Frontend & UI Style Updates related

Complete Facet Listing in Tile Tables (render_result_html.ts):
Replaced single-facet rendering (facets[0]) with a full loop over all available dataset facets per statistical variable (facets.map(formatFacetBlock)).

Formatted each facet line-by-line (source, dateRange, measurementMethod, unit) separated by clean paragraph breaks inside the table cell.

NOTE: It might be that these updates requires merging first the updates to use our new MCP tools like get metadata, this is in a separate-upcoming PR

Before

After

Reorganized Card Hierarchy & Titles (sync_store.ts & render_result_html.ts):

• Card Titles: Removed • Notes suffix from card headers and updated title derivation to Relevant insights on ${topicTitle}.

• Insights Positioned First: Moved insight paragraphs to the very top of both single-place notes cards and cross-place comparison cards.

• Header & Bullet Removal: Removed sub-headers ("### Relevant insights" / "### Comparative insights") and bullet point markers (- / Title: ).
  "About this data" Positioned Below: Placed ### About this data (coverage & caveats) below the insights section.

Typography & Spacing Refinements (text.module.scss):

• Insight Typography: Styled insight paragraphs preceding with @include type-title(500); (14px mobile / 16px tablet, medium non-bold weight 500), matching the exact font size of "About this data".
• Table Top Spacing: Increased table top margin from 12px to 20px (table:not(:first-child)) for a comfortable visual gap below the lead-in text.

Improved footer with follow up questions header:

• Card Footer Component (footer.tsx & footer.module.scss): Added support for a title prop on CardFooter that renders a header (styled with @include type-title; to match "About this data").
• Card Integrations (text.tsx & chart.tsx): Updated both text/notes cards and chart cards to pass title="Suggested follow-up questions" to <Card.Footer>.

Changed header from “About this data” to simply “Notes”
Changed '### About this data\n\n' to '### Notes\n\n' for both single-place notes cards and cross-place comparison cards.

Before

After

Note the insights at the top should be improved and be presented more as a paragraph, will do so in a future PR. This one is just for the layout of the card content itself.

[gemini-code-assist]

Code Review

This pull request updates the HTML rendering logic to support displaying multiple facets per variable and restructures the layout of insights and notes, placing insights at the top of the card without headers or bullet points. The review feedback highlights two key improvements: handling cases where the earliest and latest dates are identical to avoid redundant date ranges (e.g., '2020 – 2020'), and escaping pipe characters in facet details to prevent them from breaking the markdown table structure.

[gemini-code-assist]

If earliestDate and latestDate are identical (e.g., both are '2020'), the date range will render redundantly as '2020 – 2020'. We should check if they are equal and only display a single date in that case.

  const dateRange =
    facet.earliestDate && facet.latestDate
      ? facet.earliestDate === facet.latestDate
        ? facet.earliestDate
        : facet.earliestDate + ' – ' + facet.latestDate
      : facet.earliestDate || facet.latestDate || '';

[gemini-code-assist]

Since the table is built using Markdown syntax, any pipe (|) characters present in the facet details (such as in the source name or unit) will break the markdown table structure. We should escape pipe characters to | to ensure the table renders correctly.

Suggested change

	const facetCell =
	facets.length > 0
	? facets.map(formatFacetBlock).join('<br><br>')
	: 'No data';
	const facetCell =
	facets.length > 0
	? facets.map(formatFacetBlock).join('<br><br>').replace(/\|/g, '\\|')
	: 'No data';