Update frontend components and styles

[inderdeepsinghgill]

Summary

This PR applies BC Design System layout conventions in the upload/documents flow and standardizes action semantics/hover behavior across tables, groups, classify, and template models.

Part 1: Layout & Spacing (existing PR 206 scope)

Layout & Spacing tokens

• Replace hardcoded Mantine spacing values (gap={4}, mb={4}, mt={7}) with BCDS token equivalents (gap="xs", mb="xs", mt="xs") in DocumentUploadPanel.
• Switch UploadPage Stack gap from "lg" to var(--layout-margin-large) for token-consistent spacing.

PageHeader component

• Add bcds-page-header__title-block class to the title stack; drive gap via var(--layout-margin-xsmall).
• Set mt={0} mb={0} on Title and Text to suppress Mantine defaults and keep vertical rhythm under BCDS control.
• Add bcds-page-header__meta class to the actions Group for CSS targeting.

DocumentsPage

• Replace inline Title + Text + Group header pattern with shared PageHeader for cross-page consistency.

App-level CSS fixes

• Fix BCDS header container alignment (display: flex, align-items: center, margin-right: auto).
• Prevent header actions from wrapping (flex-wrap: nowrap).
• Add .bcds-page-header__title-block rule to zero heading/text default margins.
• Add .bcds-page-header__meta with min-height: 3rem to avoid layout shift when actions are absent.

Upload panel CSS

• Suppress BC DS Heading default bottom margin inside the intro block.

Tooling

• Add Figma MCP capture script to index.html for HTML-to-design workflow.

Part 2: Action Button Consistency

What Changed

• Added leading plus icons to create/add actions in Tables, Rows, Columns, Lookups, Groups, and Classify.
• Added save and delete icons in Table Settings actions.
• Added trash icons to destructive confirmation actions (Tables, Documents, Group Detail).
• Updated Classify "Create new model" CTA hierarchy:
  • Uses primary style when no models exist (empty-state intent).
  • Uses secondary/outline style when models already exist.

Additional UI consistency updates (latest commits)

• Template Models / Field Schema table:
  • Converted row-level Edit/Delete text buttons to compact icon actions with tooltips for dense table consistency.
• Tables / Rows tab hover behavior:
  • Aligned row hover treatment with BCDS light-blue hover background.
  • Fixed sticky first/last cells (checkbox/actions columns) so they highlight with the full row on hover/selection.
  • Fixed sticky header checkbox/actions cells to use the same BCDS header gray as the rest of the table header.
  • Strengthened selectors to enforce sticky cell hover highlighting on row hover in all cases.

Why

• Improve scanability and action recognition for common operations.
• Reduce visual inconsistency between similar actions across pages.
• Align CTA prominence and table interaction states with BCDS patterns.

Out of Scope (Intentional)

• No changes to duplicate empty-state/header CTA patterns.
• No ActionIcon abstraction migration (Mantine ActionIcon -> shared UI wrapper).

Validation

• npm -w apps/frontend run type-check
• npm -w apps/frontend run lint
  • Lint reports only pre-existing warnings outside this change set:
    • apps/frontend/src/App.css
    • apps/frontend/src/ui/bcds-upload-panel.css

QA Guide

• Tables:
  • Verify icons for Create Table, Create Row, Add Column, Add Lookup.
  • Verify Save Settings and Delete Table include icons.
  • Verify header gray background is consistent across all header cells including sticky checkbox/actions headers.
  • Verify row hover is consistent light-blue across entire row, including sticky checkbox/actions cells.
• Template Models:
  • Verify Field Schema row actions are icon-based (edit/delete) with tooltips.
• Groups:
  • Verify Create Group includes plus icon.
  • Verify Delete Group confirm action includes trash icon.
• Classify:
  • With no models, "Create new model" appears as primary.
  • With existing models, "Create new model" appears as secondary.
• Documents:
  • Verify delete confirmation action includes trash icon.

Risk

Low. Changes are UI-only and localized to styling/layout/button props/icons; no API contracts or data models changed.

Latest follow-up

• Enforced strict BCDS table interaction behavior: hover styling now applies to table body rows only (not headers).
• Removed temporary header-control hover preview approach so header rows remain static.

Post-merge update (develop sync)

• Merged latest origin/develop into this branch to clear out-of-date status.
• Installed dependencies after merge to align local environment with updated lockfile.
• Re-ran frontend validation:
  • npm -w apps/frontend run type-check passed.
  • npm -w apps/frontend run lint passed with only the same pre-existing warnings in apps/frontend/src/App.css and apps/frontend/src/ui/bcds-upload-panel.css.
• Pushed updated branch; PR now includes merged base changes and remains ready for review.

Latest update (detail-page header hierarchy)

• Applied the finalized detail-header pattern across key detail routes:
  • apps/frontend/src/features/annotation/template-models/pages/ModelDetailPage.tsx
  • apps/frontend/src/features/benchmarking/pages/DatasetDetailPage.tsx
  • apps/frontend/src/features/benchmarking/pages/ProjectDetailPage.tsx
  • apps/frontend/src/features/benchmarking/pages/RunDetailPage.tsx
• Pattern now consistent on these pages:
  • Back action on its own row.
  • Title with adjacent status/baseline badge where applicable.
  • Secondary metadata row (Model ID / Dataset ID / Project ID / Run ID).
  • Header actions aligned with shared header meta treatment.
• Updated migration tracking notes:
  • docs-md/BC_DS_SCREEN_MIGRATION_STATUS.md
• Validation re-run:
  • npm -w apps/frontend run type-check passed.
  • npm -w apps/frontend run lint passed with only the same pre-existing warnings in apps/frontend/src/App.css and apps/frontend/src/ui/bcds-upload-panel.css.

Latest update (upload CTA icon consistency)

• Added upload icon support to Upload CTAs that were still text-only in upload flows:
  • apps/frontend/src/components/upload/DocumentUploadPanel.tsx (main Upload tab disabled/enabled Upload button)
  • apps/frontend/src/features/annotation/template-models/pages/ModelDetailPage.tsx (Upload documents CTA + upload modal submit)
  • apps/frontend/src/features/benchmarking/components/FileUploadDialog.tsx (dataset upload dialog submit)
• Validation re-run:
  • npm -w apps/frontend run type-check passed.
  • npm -w apps/frontend run lint passed with only the same pre-existing warnings in apps/frontend/src/App.css and apps/frontend/src/ui/bcds-upload-panel.css.

[inderdeepsinghgill]

Ready for review.
Latest UI-only updates are pushed and reflected in the PR summary. Validation re-run completed (type-check/lint), with only the two known pre-existing lint warnings remaining.

[alex-struk]

Pushed 65808df addressing three review findings:

1. Reverted template-model upload endpoint /documents → /upload (ModelDetailPage.tsx)
The handler still builds a file-upload payload, but POST /template-models/:id/documents (addDocumentToTemplateModel) expects AddDocumentDto { labelingDocumentId } and attaches an existing labeling document — it would reject the upload payload with a 400 and returns labeling_document (snake_case) rather than the labelingDocument the handler reads, breaking document uploads on the model detail page. Restored the original /upload call (and the optional labelingDocument? response type).

2. Removed the remote Figma html-to-design capture <script> from index.html
It was shipping to all environments as uncontrolled third-party JS in the authenticated app shell (supply-chain/privacy risk, and a dev-tooling leftover).

3. Fixed sticky-cell highlight specificity (bcds-mantine-fallbacks.css)
The :nth-of-type(odd) striped rule (0,4,0) was overriding the selected-row rule (0,3,0), so selected odd rows showed gray checkbox/actions cells while the rest of the row was blue. Raised the selected selector to .rows-tab-row.rows-tab-row--selected (0,4,0) so it wins by source order — restoring full-row highlight on selection.

Validation: npm -w apps/frontend run type-check and lint pass (only the same pre-existing !important warnings in App.css / bcds-upload-panel.css).

🤖 Reviewed and fixed with Claude Code