feat: F011 match card system

- MatchCardViewModel: typed view model decoupling card from raw API data - Sub-components: MatchCardHeader, MatchScoreDisplay, MatchReasonList, TradeoffList, MatchDataQualitySummary, MatchActionToolbar, MatchCardSkeleton, MatchCardRestrictedState - 4 variants: MatchCardCompact, MatchCardExpanded, MatchCardReview, MatchCardCompareMini - MatchCard: main entry point with variant prop - matchCardAdapter: buildMatchCardViewModel() converts UnifiedMatchResult -> ViewModel - UnifiedResultCard: now thin wrapper using MatchCardCompact via adapter - FUTURE_AVAILABILITY always shows non-dismissable disclaimer Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-16 13:39:35 +02:00
parent 307b450807
commit ea221def74
17 changed files with 972 additions and 147 deletions
@@ -0,0 +1,56 @@
+import { Box, Typography } from '@mui/material'
+import { ArrowLeftRight } from 'lucide-react'
+import type { TradeOff } from '../../domain/match'
+
+function severityColor(severity: TradeOff['severity']): string {
+  if (severity === 'HIGH') return '#d97706'
+  if (severity === 'MEDIUM') return '#92400e'
+  return '#64748b'
+}
+
+interface Props {
+  tradeoffs: TradeOff[]
+  maxItems?: number
+  compact?: boolean
+}
+
+export function TradeoffList({ tradeoffs, maxItems = 3, compact }: Props) {
+  if (tradeoffs.length === 0) return null
+  const shown = tradeoffs.slice(0, maxItems)
+
+  return (
+    <Box>
+      <Typography variant="caption" sx={{ fontWeight: 600, color: '#64748b', display: 'block', mb: 0.75 }}>
+        Abwägungen
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
+        {shown.map((t, i) => (
+          <Box key={i} sx={{ display: 'flex', alignItems: 'flex-start', gap: 0.75 }}>
+            <ArrowLeftRight size={14} color="#d97706" style={{ marginTop: 2, flexShrink: 0 }} />
+            <Box>
+              {compact ? (
+                <Typography variant="caption" sx={{ color: severityColor(t.severity) }}>
+                  {t.concern}
+                </Typography>
+              ) : (
+                <>
+                  <Typography variant="caption" sx={{ fontWeight: 600, color: severityColor(t.severity) }}>
+                    {t.criterion}
+                  </Typography>
+                  <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
+                    {t.concern}
+                  </Typography>
+                  {t.mitigation && (
+                    <Typography variant="caption" color="text.secondary" sx={{ display: 'block', fontStyle: 'italic' }}>
+                      → {t.mitigation}
+                    </Typography>
+                  )}
+                </>
+              )}
+            </Box>
+          </Box>
+        ))}
+      </Box>
+    </Box>
+  )
+}