feat: F010 unified result feed

Replace monolithic Results.tsx with decomposed component architecture:
- 8 new components in src/components/results/ (ResultTypeBadge, ResultConfidenceSummary, FeedEmptyState, FeedSkeleton, ResultFeedHeader, ResultFilterBar, UnifiedResultCard, UnifiedResultFeed)
- Reuses existing useUnifiedResults hook and compareStore
- FUTURE_AVAILABILITY cards always display non-dismissable disclaimer
- Filter by result type + sort by score/area/rent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/pages/demand/Results.tsx

@@ -1,331 +1,72 @@
 import { useState } from 'react'
-import {
-  Box,
-  Button,
-  Card,
-  Chip,
-  Typography,
-  LinearProgress,
-  Stack,
-  Alert,
-  CircularProgress,
-  Divider,
-} from '@mui/material'
-import {
-  MapPin,
-  Maximize2,
-  Banknote,
-  Calendar,
-  Bookmark,
-  Columns2,
-} from 'lucide-react'
-import { useQuery } from '@tanstack/react-query'
+import { Box, Button, Card, Stack, Typography } from '@mui/material'
 import { useNavigate } from 'react-router'
-import { propertyService } from '../../services/propertyService'
-import { matchService } from '../../services/matchService'
-import { needService } from '../../services/needService'
-import { ResultType, MatchStrength, RiskLevel } from '../../domain/enums'
-import type { Property } from '../../domain/property'
-import type { Match } from '../../domain/match'
+import { useQuery } from '@tanstack/react-query'
+import { useUnifiedResults } from '../../hooks/useUnifiedResults'
 import { useCompareStore } from '../../stores/compareStore'
-import { EmptyState } from '../../components/ui'
+import { needService } from '../../services/needService'
+import {
+  FeedEmptyState,
+  FeedSkeleton,
+  ResultFeedHeader,
+  ResultFilterBar,
+  UnifiedResultFeed,
+} from '../../components/results'
+import type { ResultType } from '../../domain/enums'
+import type { UnifiedMatchResult } from '../../domain/unifiedResult'
 
 type FilterSource = ResultType | 'ALL'
 type SortBy = 'score' | 'rent' | 'area'
 
-function getResultTypeLabel(type: ResultType): string {
-  switch (type) {
-    case ResultType.VERIFIED_PORTFOLIO: return 'Verified Portfolio'
-    case ResultType.EXTERNAL_MARKET: return 'Marktinserat'
-    case ResultType.FUTURE_AVAILABILITY: return 'Zukunftssignal'
-  }
-}
-
-function getResultTypeColor(type: ResultType): string {
-  switch (type) {
-    case ResultType.VERIFIED_PORTFOLIO: return '#1e3a5f'
-    case ResultType.EXTERNAL_MARKET: return '#d97706'
-    case ResultType.FUTURE_AVAILABILITY: return '#7c3aed'
-  }
-}
-
-function getMatchStrengthColor(strength: MatchStrength): string {
-  switch (strength) {
-    case MatchStrength.STRONG: return '#1a7a4a'
-    case MatchStrength.MODERATE: return '#d97706'
-    case MatchStrength.WEAK: return '#c0392b'
-  }
-}
-
-function getRiskChipColor(risk: RiskLevel): 'success' | 'warning' | 'error' {
-  if (risk === RiskLevel.LOW) return 'success'
-  if (risk === RiskLevel.MEDIUM) return 'warning'
-  return 'error'
-}
-
-function getRiskLabel(risk: RiskLevel): string {
-  switch (risk) {
-    case RiskLevel.LOW: return 'Niedriges Risiko'
-    case RiskLevel.MEDIUM: return 'Mittleres Risiko'
-    case RiskLevel.HIGH: return 'Hohes Risiko'
-    case RiskLevel.CRITICAL: return 'Kritisches Risiko'
-  }
-}
-
-interface ResultCardProps {
-  property: Property
-  match: Match
-  onCompare: (id: string) => void
-  isInCompare: boolean
-}
-
-function ResultCard({ property, match, onCompare, isInCompare }: ResultCardProps) {
-  const scoreColor = getMatchStrengthColor(match.matchStrength)
-
-  return (
-    <Card sx={{ p: 2.5, mb: 1.5 }}>
-      {/* Future signal warning */}
-      {property.resultType === ResultType.FUTURE_AVAILABILITY && (
-        <Alert severity="warning" sx={{ mb: 1.5, py: 0.5 }}>
-          Probabilistisches Signal – kein bestätigtes Objekt
-        </Alert>
-      )}
-
-      {/* Header row */}
-      <Box sx={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', mb: 1.5 }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-          <Chip
-            label={getResultTypeLabel(property.resultType)}
-            size="small"
-            sx={{
-              bgcolor: getResultTypeColor(property.resultType),
-              color: 'white',
-              fontWeight: 600,
-              fontSize: 11,
-            }}
-          />
-          <Typography variant="h6" sx={{ fontWeight: 600 }}>
-            {property.title}
-          </Typography>
-        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'baseline', gap: 0.5 }}>
-          <Typography variant="h4" sx={{ fontWeight: 800, color: scoreColor }}>
-            {match.matchScore}
-          </Typography>
-          <Typography variant="body2" color="text.secondary">/100</Typography>
-        </Box>
-      </Box>
-
-      {/* Property details row */}
-      <Stack direction="row" spacing={2.5} sx={{ mb: 1.5, flexWrap: 'wrap' }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <MapPin size={14} color="#64748b" />
-          <Typography variant="body2" color="text.secondary">
-            {property.location.city}
-            {property.location.district ? `, ${property.location.district}` : ''}
-          </Typography>
-        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <Maximize2 size={14} color="#64748b" />
-          <Typography variant="body2" color="text.secondary">
-            {property.areaSqm} m²
-          </Typography>
-        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <Banknote size={14} color="#64748b" />
-          <Typography variant="body2" color="text.secondary">
-            CHF {property.rentPricePerSqm}/m²
-          </Typography>
-        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
-          <Calendar size={14} color="#64748b" />
-          <Typography variant="body2" color="text.secondary">
-            {property.availabilityDate}
-          </Typography>
-        </Box>
-      </Stack>
-
-      {/* Match factors section */}
-      <Divider sx={{ mb: 1.5 }} />
-
-      {match.positiveFactors.length > 0 && (
-        <Box sx={{ mb: 1 }}>
-          <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }} color="text.secondary">
-            Positive Faktoren
-          </Typography>
-          <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
-            {match.positiveFactors.slice(0, 3).map((f, i) => (
-              <Chip
-                key={i}
-                label={f.criterion}
-                size="small"
-                sx={{ bgcolor: '#f0fdf4', color: '#1a7a4a', border: '1px solid #bbf7d0', fontSize: 11 }}
-              />
-            ))}
-          </Stack>
-        </Box>
-      )}
-
-      {match.tradeoffs.length > 0 && (
-        <Alert severity="warning" sx={{ py: 0.5, px: 1.5, mb: 1, '& .MuiAlert-message': { fontSize: 12 } }}>
-          <Typography variant="caption" sx={{ fontWeight: 600, display: 'block', mb: 0.5 }}>Abwägungen</Typography>
-          {match.tradeoffs.slice(0, 2).map((t, i) => (
-            <Typography key={i} variant="caption" sx={{ display: 'block' }}>
-              {t.criterion}: {t.concern}
-            </Typography>
-          ))}
-        </Alert>
-      )}
-
-      {/* Confidence + Quality row */}
-      <Stack direction="row" spacing={2.5} sx={{ alignItems: 'center', mb: 1.5, flexWrap: 'wrap' }}>
-        <Typography variant="caption">
-          <span style={{ color: '#64748b' }}>Konfidenz </span>
-          <strong style={{ color: match.confidenceLevel >= 0.8 ? '#1a7a4a' : match.confidenceLevel >= 0.6 ? '#d97706' : '#c0392b' }}>
-            {Math.round(match.confidenceLevel * 100)}%
-          </strong>
-        </Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          <Typography variant="caption" color="text.secondary">Datenqualität</Typography>
-          <Box sx={{ width: 80 }}>
-            <LinearProgress
-              variant="determinate"
-              value={property.dataQuality.score * 100}
-              sx={{ height: 6, borderRadius: 3, color: 
-                property.dataQuality.score >= 0.8 ? 'success' :
-                property.dataQuality.score >= 0.6 ? 'warning' : 'error' }}
-            />
-          </Box>
-          <Typography variant="caption" color="text.secondary">
-            {Math.round(property.dataQuality.score * 100)}%
-          </Typography>
-        </Box>
-        {property.riskLevel && (
-          <Chip label={getRiskLabel(property.riskLevel)}
-            size="small"
-            color={getRiskChipColor(property.riskLevel)}
-            variant="outlined"
-          />
-        )}
-      </Stack>
-
-      {/* Actions row */}
-      <Box sx={{ display: 'flex', justifyContent: 'flex-end', gap: 1 }}>
-        <Button
-          variant="outlined"
-          size="small"
-          startIcon={<Bookmark size={14} />}
-          disabled
-        >
-          Shortlist
-        </Button>
-        <Button
-          variant={isInCompare ? 'contained' : 'outlined'}
-          size="small"
-          startIcon={<Columns2 size={14} />}
-          onClick={() => onCompare(property.id)}
-          sx={isInCompare ? { bgcolor: '#1e3a5f' } : {}}
-        >
-          Vergleichen
-        </Button>
-        <Button
-          variant="contained"
-          size="small"
-          disabled
-          sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' } }}
-        >
-          Details
-        </Button>
-      </Box>
-    </Card>
-  )
+function sortResults(results: UnifiedMatchResult[], sortBy: SortBy): UnifiedMatchResult[] {
+  return [...results].sort((a, b) => {
+    if (sortBy === 'score') return b.matchScore - a.matchScore
+    const propA = a.resultType !== 'FUTURE_AVAILABILITY' ? (a as { property: { rentPricePerSqm: number; areaSqm: number } }).property : null
+    const propB = b.resultType !== 'FUTURE_AVAILABILITY' ? (b as { property: { rentPricePerSqm: number; areaSqm: number } }).property : null
+    if (sortBy === 'rent') return (propA?.rentPricePerSqm ?? 0) - (propB?.rentPricePerSqm ?? 0)
+    if (sortBy === 'area') return (propB?.areaSqm ?? 0) - (propA?.areaSqm ?? 0)
+    return 0
+  })
 }
 
 export default function Results() {
   const navigate = useNavigate()
-
   const [filterSource, setFilterSource] = useState<FilterSource>('ALL')
   const [sortBy, setSortBy] = useState<SortBy>('score')
 
-  const { data: propResp, isLoading: propLoading } = useQuery({
-    queryKey: ['properties'],
-    queryFn: () => propertyService.getAll(),
-  })
-  const { data: matchResp, isLoading: matchLoading } = useQuery({
-    queryKey: ['matches'],
-    queryFn: () => matchService.getAll(),
-  })
-  const { data: needResp, isLoading: needLoading } = useQuery({
+  const { data: results = [], isLoading } = useUnifiedResults()
+  const { data: needResp } = useQuery({
     queryKey: ['needs'],
     queryFn: () => needService.getAll(),
   })
-
   const { addToCompare, removeFromCompare, clearCompare, isInCompare, compareTray } = useCompareStore()
 
-  const properties = propResp?.data ?? []
-  const matches = matchResp?.data ?? []
-  const needs = needResp?.data ?? []
-  const activeNeed = needs[0]
+  const activeNeed = needResp?.data?.[0]
 
-  const isLoading = propLoading || matchLoading || needLoading
+  const filtered =
+    filterSource === 'ALL' ? results : results.filter(r => r.resultType === filterSource)
 
-  // Join matches with properties
-  const resultItems = matches
-    .map(match => {
-      const property = properties.find(p => p.id === match.propertyId)
-      return property ? { match, property } : null
-    })
-    .filter((item): item is { match: Match; property: Property } => item !== null)
+  const sorted = sortResults(filtered, sortBy)
 
-  // Filter by source
-  const filtered = filterSource === 'ALL'
-    ? resultItems
-    : resultItems.filter(item => item.property.resultType === filterSource)
+  const verifiedCount = results.filter(r => r.resultType === 'VERIFIED_PORTFOLIO').length
+  const externalCount = results.filter(r => r.resultType === 'EXTERNAL_MARKET').length
+  const futureCount   = results.filter(r => r.resultType === 'FUTURE_AVAILABILITY').length
 
-  // Sort
-  const sorted = [...filtered].sort((a, b) => {
-    if (sortBy === 'score') return b.match.matchScore - a.match.matchScore
-    if (sortBy === 'rent') return a.property.rentPricePerSqm - b.property.rentPricePerSqm
-    if (sortBy === 'area') return b.property.areaSqm - a.property.areaSqm
-    return 0
-  })
-
-  const verifiedCount = resultItems.filter(i => i.property.resultType === ResultType.VERIFIED_PORTFOLIO).length
-  const externalCount = resultItems.filter(i => i.property.resultType === ResultType.EXTERNAL_MARKET).length
-  const futureCount = resultItems.filter(i => i.property.resultType === ResultType.FUTURE_AVAILABILITY).length
-
-  const handleToggleCompare = (id: string) => {
-    if (isInCompare(id)) {
-      removeFromCompare(id)
-    } else {
-      addToCompare(id)
-    }
-  }
-
-  if (isLoading) {
-    return (
-      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', py: 12 }}>
-        <CircularProgress />
-      </Box>
-    )
+  const handleCompare = (propertyId: string) => {
+    if (isInCompare(propertyId)) removeFromCompare(propertyId)
+    else addToCompare(propertyId)
   }
 
   return (
     <Box>
-      {/* Page Header */}
-      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0', px: 3, py: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-        <Box>
-          <Typography variant="h5" sx={{ fontWeight: 700 }} color="text.primary">
-            {sorted.length} Treffer gefunden
-          </Typography>
-          <Typography variant="body2" color="text.secondary">
-            {verifiedCount} Verified · {externalCount} Extern · {futureCount} Signale
-          </Typography>
-        </Box>
-      </Box>
+      <ResultFeedHeader
+        total={sorted.length}
+        verifiedCount={verifiedCount}
+        externalCount={externalCount}
+        futureCount={futureCount}
+      />
 
       <Box sx={{ px: 3, py: 3 }}>
-        {/* Active Need Banner */}
         {activeNeed && (
           <Card sx={{ bgcolor: '#eff6ff', p: 2, mb: 2, border: '1px solid #bfdbfe' }}>
             <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
@@ -350,81 +91,22 @@ export default function Results() {
           </Card>
         )}
 
-        {/* Filter/Sort bar */}
-        <Card sx={{ p: 1.5, mb: 2 }}>
-          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 1 }}>
-            <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', gap: 0.5 }}>
-              {(['ALL', ResultType.VERIFIED_PORTFOLIO, ResultType.EXTERNAL_MARKET, ResultType.FUTURE_AVAILABILITY] as FilterSource[]).map(source => {
-                const labels: Record<FilterSource, string> = {
-                  ALL: 'Alle',
-                  [ResultType.VERIFIED_PORTFOLIO]: 'Verified Portfolio',
-                  [ResultType.EXTERNAL_MARKET]: 'Marktinserate',
-                  [ResultType.FUTURE_AVAILABILITY]: 'Zukunftssignale',
-                }
-                const colors: Partial<Record<FilterSource, string>> = {
-                  [ResultType.VERIFIED_PORTFOLIO]: '#1e3a5f',
-                  [ResultType.EXTERNAL_MARKET]: '#d97706',
-                  [ResultType.FUTURE_AVAILABILITY]: '#7c3aed',
-                }
-                const isActive = filterSource === source
-                return (
-                  <Chip
-                    key={source}
-                    label={labels[source]}
-                    size="small"
-                    clickable
-                    onClick={() => setFilterSource(source)}
-                    sx={{
-                      bgcolor: isActive ? (colors[source] ?? '#1e3a5f') : 'transparent',
-                      color: isActive ? 'white' : 'text.secondary',
-                      border: `1px solid ${isActive ? (colors[source] ?? '#1e3a5f') : '#e2e8f0'}`,
-                      fontWeight: isActive ? 600 : 400,
-                    }}
-                  />
-                )
-              })}
-            </Stack>
+        <ResultFilterBar
+          filterSource={filterSource}
+          onFilterChange={setFilterSource}
+          sortBy={sortBy}
+          onSortChange={setSortBy}
+        />
 
-            <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
-              <Typography variant="caption" color="text.secondary">Sortierung:</Typography>
-              {([['score', 'Relevanz'], ['area', 'Fläche'], ['rent', 'Mietpreis']] as [SortBy, string][]).map(([val, label]) => (
-                <Chip
-                  key={val}
-                  label={label}
-                  size="small"
-                  clickable
-                  onClick={() => setSortBy(val)}
-                  sx={{
-                    bgcolor: sortBy === val ? '#1e3a5f' : 'transparent',
-                    color: sortBy === val ? 'white' : 'text.secondary',
-                    border: `1px solid ${sortBy === val ? '#1e3a5f' : '#e2e8f0'}`,
-                  }}
-                />
-              ))}
-            </Stack>
-          </Box>
-        </Card>
-
-        {/* Results */}
-        {sorted.length === 0 ? (
-          <EmptyState
-            title="Keine Treffer gefunden"
-            description="Passen Sie die Suchkriterien an oder wechseln Sie den Filter."
-          />
+        {isLoading ? (
+          <FeedSkeleton />
+        ) : sorted.length === 0 ? (
+          <FeedEmptyState filtered={filterSource !== 'ALL'} />
         ) : (
-          sorted.map(({ match, property }) => (
-            <ResultCard
-              key={match.id}
-              property={property}
-              match={match}
-              onCompare={handleToggleCompare}
-              isInCompare={isInCompare(property.id)}
-            />
-          ))
+          <UnifiedResultFeed results={sorted} isInCompare={isInCompare} onCompare={handleCompare} />
         )}
       </Box>
 
-      {/* Compare Tray */}
       {compareTray.length > 0 && (
         <Box
           sx={{