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,106 @@
+import { Alert, Box, Card, Divider, Typography } from '@mui/material'
+import { MapPin } from 'lucide-react'
+import { MatchCardHeader } from './MatchCardHeader'
+import { MatchReasonList } from './MatchReasonList'
+import { TradeoffList } from './TradeoffList'
+import { MatchDataQualitySummary } from './MatchDataQualitySummary'
+import { MatchActionToolbar } from './MatchActionToolbar'
+import { MatchCardRestrictedState } from './MatchCardRestrictedState'
+import type { MatchCardViewModel } from './MatchCardViewModel'
+
+interface Props {
+  vm: MatchCardViewModel
+}
+
+export function MatchCardCompact({ vm }: Props) {
+  if (vm.isRestricted) return <MatchCardRestrictedState />
+
+  const borderColor = vm.isCompareSelected
+    ? '#7c3aed'
+    : vm.isSelected
+    ? '#1e3a5f'
+    : 'transparent'
+
+  return (
+    <Card
+      sx={{
+        p: 2.5,
+        mb: 1.5,
+        border: `2px solid ${borderColor}`,
+        opacity: vm.isStaleData ? 0.75 : 1,
+        transition: 'border-color 0.15s',
+      }}
+    >
+      {/* FUTURE_AVAILABILITY disclaimer — mandatory, non-dismissable */}
+      {vm.disclaimer && (
+        <Alert severity="warning" sx={{ mb: 1.5, py: 0.5 }}>
+          {vm.disclaimer}
+        </Alert>
+      )}
+
+      {vm.isReviewRequired && (
+        <Alert severity="info" sx={{ mb: 1.5, py: 0.5 }}>
+          Manuelle Überprüfung erforderlich
+        </Alert>
+      )}
+
+      {/* Header: score → type → confidence → availability → risk */}
+      <MatchCardHeader vm={vm} compact />
+
+      {/* Title + location (max 2 lines) */}
+      <Box sx={{ mt: 1.25, mb: 1.25 }}>
+        <Typography variant="subtitle1" sx={{ fontWeight: 600 }} noWrap>
+          {vm.title}
+        </Typography>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, mt: 0.25 }}>
+          <MapPin size={13} color="#64748b" />
+          <Typography variant="body2" color="text.secondary">
+            {vm.locationLabel}
+          </Typography>
+        </Box>
+        {vm.explainabilitySummary && (
+          <Typography
+            variant="body2"
+            color="text.secondary"
+            sx={{
+              mt: 0.5,
+              overflow: 'hidden',
+              display: '-webkit-box',
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: 'vertical',
+            }}
+          >
+            {vm.explainabilitySummary}
+          </Typography>
+        )}
+      </Box>
+
+      <Divider sx={{ mb: 1.25 }} />
+
+      {/* Top reason only */}
+      {vm.reasons.length > 0 && (
+        <Box sx={{ mb: 1 }}>
+          <MatchReasonList reasons={vm.reasons.slice(0, 1)} />
+        </Box>
+      )}
+
+      {/* Top tradeoff only (compact) */}
+      {vm.tradeoffs.length > 0 && (
+        <Box sx={{ mb: 1 }}>
+          <TradeoffList tradeoffs={vm.tradeoffs.slice(0, 1)} compact />
+        </Box>
+      )}
+
+      {/* Data quality — only critical warning in compact mode */}
+      <MatchDataQualitySummary
+        dataQualityScore={vm.dataQualityScore}
+        missingData={vm.missingData}
+        compact
+      />
+
+      <Box sx={{ mt: 1.25 }}>
+        <MatchActionToolbar actions={vm.actions} compact />
+      </Box>
+    </Card>
+  )
+}