johannes.gasser/property-match
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: F014 compare view — side-by-side decision table with AI summary

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Benjamin Sutter
2026-05-16 14:28:06 +02:00
parent 2cb29a1920
commit 2753d1717c
14 changed files with 884 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/layout/CompareTray.tsx
+47 -16
View File
@@ -1,17 +1,31 @@
import { useEffect } from 'react'
import { useNavigate } from 'react-router'
import { Box, Button, Chip, Typography } from '@mui/material'
import { Box, Button, IconButton, Typography } from '@mui/material'
import { X } from 'lucide-react'
import { useCompareStore } from '../../stores/compareStore'
import { useLayoutStore } from '../../stores/layoutStore'
const TYPE_DOT: Record<string, string> = {
VERIFIED_PORTFOLIO: '#1e3a5f',
EXTERNAL_MARKET: '#d97706',
FUTURE_AVAILABILITY: '#7c3aed',
}
export function CompareTray() {
const { compareTray, removeFromCompare, clearCompare } = useCompareStore()
const { compareItems, removeFromCompare, clearCompare } = useCompareStore()
const { setCompareTrayVisible } = useLayoutStore()
const navigate = useNavigate()
useEffect(() => {
setCompareTrayVisible(compareTray.length > 0)
}, [compareTray.length, setCompareTrayVisible])
setCompareTrayVisible(compareItems.length > 0)
}, [compareItems.length, setCompareTrayVisible])
const getTitle = (item: (typeof compareItems)[number]) => {
if (item.resultType === 'FUTURE_AVAILABILITY') {
return (item as any).signal?.companyName ?? (item as any).signal?.locationHint ?? 'Signal'
}
return (item as any).property?.title ?? `Score ${item.matchScore}`
}
return (
<Box
@@ -27,27 +41,44 @@ export function CompareTray() {
alignItems: 'center',
px: 3,
gap: 2,
transform: compareTray.length > 0 ? 'translateY(0)' : 'translateY(100%)',
transform: compareItems.length > 0 ? 'translateY(0)' : 'translateY(100%)',
transition: 'transform 0.25s ease',
}}
>
<Typography variant="caption" sx={{ color: '#fff', flexShrink: 0 }}>
Vergleich ({compareTray.length}/3)
Vergleich ({compareItems.length}/4)
</Typography>
<Box sx={{ flex: 1, display: 'flex', gap: 1, overflow: 'hidden' }}>
{compareTray.map((id, i) => (
<Chip
key={id}
label={`Objekt ${i + 1}`}
size="small"
onDelete={() => removeFromCompare(id)}
{compareItems.map((item) => (
<Box
key={item.matchId}
sx={{
bgcolor: 'rgba(255,255,255,0.15)',
color: '#fff',
'& .MuiChip-deleteIcon': { color: 'rgba(255,255,255,0.6)' },
display: 'flex',
alignItems: 'center',
gap: 0.75,
bgcolor: 'rgba(255,255,255,0.1)',
borderRadius: 1,
px: 1,
py: 0.25,
flexShrink: 0,
}}
/>
>
<Box sx={{ width: 6, height: 6, borderRadius: '50%', bgcolor: TYPE_DOT[item.resultType] ?? '#64748b', flexShrink: 0 }} />
<Typography variant="caption" sx={{ color: '#fff', maxWidth: 110, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
{getTitle(item)}
</Typography>
<Typography variant="caption" sx={{ color: 'rgba(255,255,255,0.5)', flexShrink: 0 }}>
{item.matchScore}
</Typography>
<IconButton
size="small"
onClick={() => removeFromCompare(item.matchId)}
sx={{ p: 0.25, color: 'rgba(255,255,255,0.5)', '&:hover': { color: '#fff' } }}
>
<X size={12} />
</IconButton>
</Box>
))}
</Box>