refactor: split PropertyDetailView (998→192 lines) and MatchDetail (464→236 lines)

PropertyDetailView.tsx extracted into 5 focused components: - PropertyDetailHelpers: Field, FieldGrid, SectionTitle, floorLabel - UnitStructurePanel: floor structure with unit matching - PreMarketPanel: schattenmarkt release controls - PropertyDetailOverview: overview tab content - MatchabilityTabPanel: need matches tab MatchDetail.tsx extracted into 2 focused components: - MatchDetailHero: image/map, header, key facts strip - MatchDetailPropertySections: Preis/Hauptangaben/Eigenschaften/etc. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-24 00:48:13 +02:00
parent 6515acb7f0
commit 4d4ea6d2ff
9 changed files with 1130 additions and 1058 deletions
@@ -0,0 +1,128 @@
+import { Box, Button, Chip, Divider, Typography } from '@mui/material'
+import { Bookmark, Columns2 } from 'lucide-react'
+import { PropertyMap } from '../shared'
+import { MatchScoreDisplay } from '../match-card/MatchScoreDisplay'
+import { useMatchDetail } from '../../hooks/useMatches'
+import type { Property } from '../../domain/property'
+import type { FutureSignal } from '../../domain/futureSignal'
+
+type Match = NonNullable<ReturnType<typeof useMatchDetail>['data']>
+
+interface MatchDetailHeroProps {
+  match: Match
+  property: Property | undefined
+  signal: FutureSignal | null
+  isFuture: boolean
+  title: string
+  location: string
+  rt: { label: string; color: string }
+  keyFacts: Array<{ label: string; value: string }>
+  onCompare: () => void
+  onShortlist: () => void
+}
+
+export function MatchDetailHero({
+  match,
+  property,
+  signal: _signal,
+  isFuture,
+  title,
+  location,
+  rt,
+  keyFacts,
+  onCompare,
+  onShortlist,
+}: MatchDetailHeroProps) {
+  return (
+    <>
+      {/* Hero: image first, map fallback */}
+      {!isFuture && (
+        property?.images?.[0] ? (
+          <Box sx={{ width: '100%', height: 400, overflow: 'hidden', bgcolor: '#e2e8f0', flexShrink: 0 }}>
+            <img
+              src={property.images[0]}
+              alt={property.title}
+              style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+            />
+          </Box>
+        ) : property?.location?.coordinates ? (
+          <PropertyMap
+            lat={property.location.coordinates.lat}
+            lng={property.location.coordinates.lng}
+            label={property.title}
+            height={340}
+          />
+        ) : null
+      )}
+
+      {/* Property header — white section below hero */}
+      <Box sx={{ bgcolor: 'white', borderBottom: '1px solid #e2e8f0' }}>
+        <Box sx={{ px: { xs: 2, sm: 3 }, pt: 2.5, pb: 2 }}>
+          <Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, alignItems: { xs: 'flex-start', sm: 'flex-start' }, justifyContent: 'space-between', gap: 2 }}>
+            {/* Left: title + address + chips */}
+            <Box sx={{ flex: 1, minWidth: 0 }}>
+              <Typography variant="h5" sx={{ fontWeight: 700, mb: 0.25, lineHeight: 1.3 }}>
+                {title}
+              </Typography>
+              <Typography variant="body2" color="text.secondary" sx={{ mb: 1.25 }}>
+                {location}
+              </Typography>
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 0.75, alignItems: 'center' }}>
+                <Chip label={rt.label} size="small" sx={{ bgcolor: rt.color, color: 'white', fontWeight: 600, fontSize: '0.72rem' }} />
+                {property?.assetType && (
+                  <Chip label={property.assetType} size="small" variant="outlined" sx={{ fontSize: '0.72rem' }} />
+                )}
+              </Box>
+            </Box>
+
+            {/* Right: score + actions */}
+            <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 1.5, flexShrink: 0 }}>
+              <MatchScoreDisplay score={match.matchScore} size="lg" />
+              <Box sx={{ display: 'flex', gap: 1 }}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  startIcon={<Bookmark size={14} />}
+                  onClick={onShortlist}
+                  sx={{ textTransform: 'none' }}
+                >
+                  Shortlist
+                </Button>
+                <Button
+                  variant="contained"
+                  size="small"
+                  startIcon={<Columns2 size={14} />}
+                  onClick={onCompare}
+                  sx={{ bgcolor: '#1e3a5f', '&:hover': { bgcolor: '#162d4a' }, textTransform: 'none' }}
+                >
+                  Vergleichen
+                </Button>
+              </Box>
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Key facts strip */}
+        <Divider />
+        <Box sx={{ display: 'flex', flexWrap: 'wrap', px: { xs: 2, sm: 3 }, py: 1.5, gap: 0 }}>
+          {keyFacts.map((fact, i) => (
+            <Box key={fact.label} sx={{
+              flex: '1 1 120px',
+              pl: i === 0 ? 0 : { xs: 1.5, sm: 2 },
+              pr: { xs: 1.5, sm: 2 },
+              py: { xs: 0.5, sm: 0 },
+              borderLeft: i === 0 ? 'none' : '1px solid #e2e8f0',
+            }}>
+              <Typography variant="caption" color="text.secondary" sx={{ display: 'block', lineHeight: 1.2 }}>
+                {fact.label}
+              </Typography>
+              <Typography variant="body1" sx={{ fontWeight: 700, mt: 0.25 }}>
+                {fact.value}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      </Box>
+    </>
+  )
+}