refine(anfragencenter): clearer selection, card-style property strip, 2-item slider

- InquiryListRow: selected state now uses bright blue (4px #2563eb border, #eff6ff bg, blue tenant name) — unmistakable at a glance - RelatedPropertyCardPanel compact: left panel is a mini property card matching supply card style (border, borderRadius 2, hover shadow, 78px image); right panel shows exactly 2 match slider cards with ChevronLeft/Right nav when more than 2 exist; match cards mirror property card visual language - Strip maxHeight raised to 260px; reply composer rows 4→5 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-10 23:34:50 +02:00
parent 76e52dae1d
commit da3b5b55cc
4 changed files with 135 additions and 102 deletions
@@ -99,7 +99,7 @@ export function InquiryDetailPanel({ inquiryId }: InquiryDetailPanelProps) {
            pendingAttachment={pendingAttachment}
            onPendingAttachmentConsumed={() => setPendingAttachment(null)}
          />
-          <Box sx={{ flexShrink: 0, maxHeight: 200, overflowY: 'auto', borderTop: '1px solid #e2e8f0' }}>
+          <Box sx={{ flexShrink: 0, maxHeight: 260, borderTop: '1px solid #e2e8f0' }}>
            <RelatedPropertyCardPanel
              propertyId={inquiry.propertyId}
              inquiryId={inquiry.id}
@@ -19,9 +19,8 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
        px: 2,
        py: 1,
        borderBottom: '1px solid #e2e8f0',
-        borderLeft: '3px solid',
-        borderLeftColor: selected ? '#152642' : hasUnread ? '#2563eb' : 'transparent',
-        bgcolor: selected ? '#eef2f8' : 'white',
+        borderLeft: selected ? '4px solid #2563eb' : `3px solid ${hasUnread ? '#2563eb' : 'transparent'}`,
+        bgcolor: selected ? '#eff6ff' : 'white',
        cursor: 'pointer',
        transition: 'background-color 0.15s, border-color 0.15s',
        '&:hover': { bgcolor: selected ? '#f1f5f9' : '#f8fafc' },
@@ -30,7 +29,7 @@ export function InquiryListRow({ inquiry, selected, onClick }: InquiryListRowPro
      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 0.5 }}>
        <Typography
          variant="body2"
-          sx={{ fontWeight: hasUnread ? 700 : 600, color: '#0f172a', fontSize: '0.85rem' }}
+          sx={{ fontWeight: selected || hasUnread ? 700 : 600, color: selected ? '#1d4ed8' : '#0f172a', fontSize: '0.85rem' }}
        >
          {inquiry.tenantName}
          {inquiry.tenantCompany ? ` · ${inquiry.tenantCompany}` : ''}
@@ -109,7 +109,7 @@ export function InquiryReplyComposer({
        value={body}
        onChange={e => setBody(e.target.value)}
        multiline
-        rows={4}
+        rows={5}
        placeholder="Antwort verfassen..."
        fullWidth
      />
@@ -1,5 +1,6 @@
-import { Box, Button, CircularProgress, Divider, Typography } from '@mui/material'
-import { ArrowRight, Building2, Calendar, MapPin, Ruler } from 'lucide-react'
+import { useState } from 'react'
+import { Box, Button, CircularProgress, Divider, IconButton, Typography } from '@mui/material'
+import { ArrowRight, Building2, Calendar, ChevronLeft, ChevronRight, MapPin, Ruler } from 'lucide-react'
 import { useNavigate } from 'react-router'
 import { usePropertyById } from '../../hooks/useProperties'
 import { useAdditionalMatchesForInquiry } from '../../hooks/useMatches'
@@ -14,6 +15,7 @@ interface RelatedPropertyCardPanelProps {
 export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: RelatedPropertyCardPanelProps) {
  const { data: property, isLoading } = usePropertyById(propertyId)
  const navigate = useNavigate()
+  const [sliderIndex, setSliderIndex] = useState(0)
  const {
    data: additionalMatches = [],
    isLoading: loadingMatches,
@@ -40,18 +42,30 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
  const image = property.images?.[0]

  if (compact) {
+    const visibleMatches = additionalMatches.slice(sliderIndex, sliderIndex + 2)
+    const canGoBack = sliderIndex > 0
+    const canGoForward = sliderIndex + 2 < additionalMatches.length
+
    return (
-      <Box sx={{ display: 'flex', bgcolor: 'white', minHeight: 0 }}>
-        {/* Left: current property with thumbnail */}
-        <Box sx={{ display: 'flex', gap: 1.5, p: 1.5, alignItems: 'flex-start', flexShrink: 0, width: '42%', minWidth: 200 }}>
+      <Box sx={{ display: 'flex', bgcolor: 'white' }}>
+        {/* Left: current property card */}
+        <Box sx={{ width: '44%', flexShrink: 0, minWidth: 0, p: 1.5 }}>
          <Box
            sx={{
-              width: 72,
-              height: 80,
-              borderRadius: 1,
+              border: '1px solid #e8e7e4',
+              borderRadius: 2,
              overflow: 'hidden',
-              flexShrink: 0,
-              bgcolor: '#e8e7e4',
+              bgcolor: 'white',
+              cursor: 'pointer',
+              transition: 'border-color 0.15s, box-shadow 0.15s',
+              '&:hover': { borderColor: '#b0aead', boxShadow: '0 4px 14px rgba(0,0,0,0.09)' },
+            }}
+            onClick={() => navigate('/supply/properties')}
+          >
+            <Box
+              sx={{
+                height: 78,
+                bgcolor: '#f4f3f0',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
@@ -60,73 +74,87 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
                backgroundPosition: 'center',
              }}
            >
-            {!image && <Building2 size={20} color="#94a3b8" />}
+              {!image && <Building2 size={22} color="#94a3b8" />}
            </Box>
-          <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5, minWidth: 0, flex: 1 }}>
+            <Box sx={{ p: 1 }}>
              <Typography
-              sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.85rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.82rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', mb: 0.5 }}
              >
                {property.title}
              </Typography>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.25 }}>
                <MapPin size={11} style={{ flexShrink: 0 }} />
-              <Typography variant="caption" sx={{ fontSize: '0.72rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                <Typography variant="caption" sx={{ fontSize: '0.7rem', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                  {property.location.city}{property.location.district ? `, ${property.location.district}` : ''}
                </Typography>
              </Box>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.25 }}>
                <Ruler size={11} style={{ flexShrink: 0 }} />
-              <Typography variant="caption" sx={{ fontSize: '0.72rem' }}>
+                <Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
                  {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/J.
                </Typography>
              </Box>
-            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569' }}>
+              <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5, color: '#475569', mb: 0.75 }}>
                <Calendar size={11} style={{ flexShrink: 0 }} />
-              <Typography variant="caption" sx={{ fontSize: '0.72rem' }}>
+                <Typography variant="caption" sx={{ fontSize: '0.7rem' }}>
                  ab {new Date(property.availabilityDate).toLocaleDateString('de-CH', { month: 'short', year: 'numeric' })}
                </Typography>
              </Box>
              <Button
                size="small"
                endIcon={<ArrowRight size={11} />}
-              onClick={() => navigate('/supply/properties')}
-              sx={{ textTransform: 'none', fontSize: '0.72rem', p: 0, minWidth: 0, color: '#152642', alignSelf: 'flex-start', mt: 0.25 }}
+                onClick={e => { e.stopPropagation(); navigate('/supply/properties') }}
+                sx={{ textTransform: 'none', fontSize: '0.7rem', p: 0, minWidth: 0, color: '#152642' }}
              >
                Ansehen
              </Button>
            </Box>
          </Box>
+        </Box>

        {/* Vertical divider */}
        <Box sx={{ width: '1px', bgcolor: '#e2e8f0', my: 1.5, flexShrink: 0 }} />

-        {/* Right: horizontal scroll rail */}
-        <Box sx={{ flex: 1, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1, minWidth: 0 }}>
-          <Typography
-            variant="caption"
-            sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem', flexShrink: 0 }}
-          >
+        {/* Right: match slider showing 2 at a time */}
+        <Box sx={{ flex: 1, minWidth: 0, display: 'flex', flexDirection: 'column', p: 1.5, gap: 1 }}>
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', flexShrink: 0 }}>
+            <Typography variant="caption" sx={{ color: '#64748b', fontWeight: 600, textTransform: 'uppercase', letterSpacing: 0.5, fontSize: '0.65rem' }}>
              Weitere passende Objekte
            </Typography>
+            {additionalMatches.length > 2 && (
+              <Box sx={{ display: 'flex', gap: 0.25 }}>
+                <IconButton
+                  size="small"
+                  disabled={!canGoBack}
+                  onClick={() => setSliderIndex(i => i - 1)}
+                  sx={{ p: 0.25, color: canGoBack ? '#152642' : '#cbd5e1' }}
+                >
+                  <ChevronLeft size={14} />
+                </IconButton>
+                <IconButton
+                  size="small"
+                  disabled={!canGoForward}
+                  onClick={() => setSliderIndex(i => i + 1)}
+                  sx={{ p: 0.25, color: canGoForward ? '#152642' : '#cbd5e1' }}
+                >
+                  <ChevronRight size={14} />
+                </IconButton>
+              </Box>
+            )}
+          </Box>
+
          {loadingMatches ? (
+            <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1 }}>
              <CircularProgress size={16} />
+            </Box>
          ) : additionalMatches.length === 0 ? (
            <Typography variant="caption" sx={{ color: '#94a3b8', fontSize: '0.72rem' }}>
              Keine weiteren Matches
            </Typography>
          ) : (
-            <Box
-              sx={{
-                display: 'flex',
-                gap: 1.5,
-                overflowX: 'auto',
-                pb: 0.5,
-                '&::-webkit-scrollbar': { height: 3 },
-                '&::-webkit-scrollbar-thumb': { bgcolor: '#cbd5e1', borderRadius: 2 },
-              }}
-            >
-              {additionalMatches.map(m => (
-                <MatchRailCard key={m.propertyId} match={m} />
+            <Box sx={{ display: 'flex', gap: 1, flex: 1 }}>
+              {visibleMatches.map(m => (
+                <MatchSliderCard key={m.propertyId} match={m} />
              ))}
            </Box>
          )}
@@ -170,20 +198,20 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
      </Typography>

      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.75 }}>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569' }}>
          <MapPin size={14} />
          <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
            {property.location.city}
            {property.location.district ? `, ${property.location.district}` : ''}
          </Typography>
        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569' }}>
          <Ruler size={14} />
          <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
            {property.areaSqm.toLocaleString('de-CH')} m² · CHF {property.rentPricePerSqm}/m²/Jahr
          </Typography>
        </Box>
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569', fontSize: '0.8125rem' }}>
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, color: '#475569' }}>
          <Calendar size={14} />
          <Typography variant="body2" sx={{ fontSize: '0.8125rem' }}>
            Verfügbar ab {new Date(property.availabilityDate).toLocaleDateString('de-CH')}
@@ -229,28 +257,33 @@ export function RelatedPropertyCardPanel({ propertyId, inquiryId, compact }: Rel
  )
 }

-function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
+function MatchSliderCard({ match }: { match: AdditionalPropertyMatch }) {
  const navigate = useNavigate()
  return (
    <Box
      onClick={() => navigate('/supply/properties')}
      sx={{
-        flexShrink: 0,
-        width: 148,
+        flex: '1 1 0',
+        minWidth: 0,
+        border: '1px solid #e8e7e4',
+        borderRadius: 2,
+        overflow: 'hidden',
        cursor: 'pointer',
-        '&:hover .rail-title': { color: '#2563eb' },
+        bgcolor: 'white',
+        transition: 'border-color 0.15s, box-shadow 0.15s',
+        '&:hover': {
+          borderColor: '#b0aead',
+          boxShadow: '0 4px 14px rgba(0,0,0,0.09)',
+        },
      }}
    >
      <Box
        sx={{
-          height: 44,
-          borderRadius: 1,
-          bgcolor: '#e8e7e4',
-          overflow: 'hidden',
+          height: 52,
+          bgcolor: '#f4f3f0',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
-          mb: 0.75,
          backgroundImage: match.imageUrl ? `url(${match.imageUrl})` : 'none',
          backgroundSize: 'cover',
          backgroundPosition: 'center',
@@ -258,10 +291,10 @@ function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
      >
        {!match.imageUrl && <Building2 size={16} color="#94a3b8" />}
      </Box>
-      <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.2 }}>
+      <Box sx={{ p: 1 }}>
+        <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', mb: 0.25 }}>
          <Typography
-          className="rail-title"
-          sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5, transition: 'color 0.1s' }}
+            sx={{ fontWeight: 600, color: '#0f172a', fontSize: '0.78rem', lineHeight: 1.3, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', flex: 1, mr: 0.5 }}
          >
            {match.title}
          </Typography>
@@ -270,7 +303,7 @@ function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
          </Typography>
        </Box>
        <Typography variant="caption" sx={{ color: '#64748b', fontSize: '0.7rem', display: 'block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
-        {match.location} · {match.areaSqm.toLocaleString('de-CH')} m²
+          {match.location}
        </Typography>
        {match.reasons[0] && (
          <Typography variant="caption" sx={{ color: '#15803d', fontSize: '0.68rem', display: 'block', lineHeight: 1.4, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
@@ -278,6 +311,7 @@ function MatchRailCard({ match }: { match: AdditionalPropertyMatch }) {
          </Typography>
        )}
      </Box>
+    </Box>
  )
 }