feat: DogDetail — champion/bloodline badge in header, champion-glow border on main photo

client/src/pages/DogDetail.jsx

@@ -3,6 +3,7 @@ import { useParams, Link, useNavigate } from 'react-router-dom'
 import { Dog, GitBranch, Edit, Upload, Trash2, ArrowLeft, Calendar, Hash, Award } from 'lucide-react'
 import axios from 'axios'
 import DogForm from '../components/DogForm'
+import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'
 
 function DogDetail() {
   const { id } = useParams()
@@ -14,9 +15,7 @@ function DogDetail() {
   const [selectedPhoto, setSelectedPhoto] = useState(0)
   const fileInputRef = useRef(null)
 
-  useEffect(() => {
-    fetchDog()
-  }, [id])
+  useEffect(() => { fetchDog() }, [id])
 
   const fetchDog = async () => {
     try {
@@ -32,11 +31,9 @@ function DogDetail() {
   const handlePhotoUpload = async (e) => {
     const file = e.target.files[0]
     if (!file) return
-
     setUploading(true)
     const formData = new FormData()
     formData.append('photo', file)
-
     try {
       await axios.post(`/api/dogs/${id}/photos`, formData, {
         headers: { 'Content-Type': 'multipart/form-data' }
@@ -53,7 +50,6 @@ function DogDetail() {
 
   const handleDeletePhoto = async (photoIndex) => {
     if (!confirm('Delete this photo?')) return
-
     try {
       await axios.delete(`/api/dogs/${id}/photos/${photoIndex}`)
       fetchDog()
@@ -72,24 +68,20 @@ function DogDetail() {
     const birth = new Date(birthDate)
     let years = today.getFullYear() - birth.getFullYear()
     let months = today.getMonth() - birth.getMonth()
-    
-    if (months < 0) {
-      years--
-      months += 12
-    }
-    
+    if (months < 0) { years--; months += 12 }
     if (years === 0) return `${months} month${months !== 1 ? 's' : ''}`
     if (months === 0) return `${years} year${years !== 1 ? 's' : ''}`
     return `${years}y ${months}m`
   }
 
-  if (loading) {
-    return <div className="container loading">Loading...</div>
-  }
+  const hasChampionBlood = (d) =>
+    (d.sire && d.sire.is_champion) || (d.dam && d.dam.is_champion)
 
-  if (!dog) {
-    return <div className="container">Dog not found</div>
-  }
+  if (loading) return <div className="container loading">Loading...</div>
+  if (!dog) return <div className="container">Dog not found</div>
+
+  const isChampion = !!dog.is_champion
+  const hasBloodline = !isChampion && hasChampionBlood(dog)
 
   return (
     <div className="container" style={{ paddingTop: '2rem', paddingBottom: '3rem' }}>
@@ -99,14 +91,18 @@ function DogDetail() {
           <ArrowLeft size={20} />
         </button>
         <div style={{ flex: 1 }}>
-          <h1 style={{ marginBottom: '0.25rem' }}>{dog.name}</h1>
+          <div style={{ display: 'flex', alignItems: 'center', gap: '0.625rem', flexWrap: 'wrap', marginBottom: '0.25rem' }}>
+            <h1 style={{ margin: 0 }}>{dog.name}</h1>
+            {isChampion && <ChampionBadge size="lg" />}
+            {hasBloodline && <ChampionBloodlineBadge size="lg" />}
+          </div>
           <div style={{ display: 'flex', alignItems: 'center', gap: '1rem', color: 'var(--text-secondary)' }}>
             <span>{dog.breed}</span>
-            <span>•</span>
+            <span>·</span>
             <span>{dog.sex === 'male' ? 'Male ♂' : 'Female ♀'}</span>
             {dog.birth_date && (
               <>
-                <span>•</span>
+                <span>·</span>
                 <span>{calculateAge(dog.birth_date)}</span>
               </>
             )}
@@ -125,7 +121,7 @@ function DogDetail() {
       </div>
 
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: '1.5rem', marginBottom: '1.5rem' }}>
-        {/* Photo Section - Compact */}
+        {/* Photo Section */}
         <div className="card" style={{ padding: '1rem' }}>
           <div style={{ marginBottom: '0.75rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
             <h3 style={{ fontSize: '0.875rem', textTransform: 'uppercase', letterSpacing: '0.05em', color: 'var(--text-muted)' }}>Photos</h3>
@@ -138,46 +134,42 @@ function DogDetail() {
               <Upload size={14} />
               {uploading ? 'Uploading...' : 'Add'}
             </button>
-            <input 
-              ref={fileInputRef}
-              type="file" 
-              accept="image/*" 
-              onChange={handlePhotoUpload} 
-              style={{ display: 'none' }}
-            />
+            <input ref={fileInputRef} type="file" accept="image/*" onChange={handlePhotoUpload} style={{ display: 'none' }} />
           </div>
 
           {dog.photo_urls && dog.photo_urls.length > 0 ? (
             <>
-              {/* Main Photo */}
               <div style={{ position: 'relative', marginBottom: '0.75rem' }}>
                 <img
                   src={dog.photo_urls[selectedPhoto]}
                   alt={dog.name}
                   style={{
-                    width: '100%', 
-                    aspectRatio: '1', 
-                    objectFit: 'cover', 
+                    width: '100%', aspectRatio: '1', objectFit: 'cover',
                     borderRadius: 'var(--radius)',
-                    border: '1px solid var(--border)'
+                    border: isChampion
+                      ? '2px solid var(--champion-gold)'
+                      : hasBloodline
+                        ? '2px solid var(--bloodline-amber)'
+                        : '1px solid var(--border)',
+                    boxShadow: isChampion
+                      ? '0 0 12px var(--champion-glow)'
+                      : hasBloodline
+                        ? '0 0 10px var(--bloodline-glow)'
+                        : 'none'
                   }}
                 />
                 <button
                   className="btn-icon"
                   onClick={() => handleDeletePhoto(selectedPhoto)}
                   style={{
-                    position: 'absolute', 
-                    top: '0.5rem', 
-                    right: '0.5rem', 
-                    background: 'rgba(15, 23, 42, 0.8)',
+                    position: 'absolute', top: '0.5rem', right: '0.5rem',
+                    background: 'rgba(14, 15, 12, 0.8)',
                     backdropFilter: 'blur(8px)'
                   }}
                 >
                   <Trash2 size={16} color="var(--danger)" />
                 </button>
               </div>
-              
-              {/* Thumbnail Strip */}
               {dog.photo_urls.length > 1 && (
                 <div style={{ display: 'flex', gap: '0.5rem', overflowX: 'auto' }}>
                   {dog.photo_urls.map((url, index) => (
@@ -187,9 +179,7 @@ function DogDetail() {
                       alt={`${dog.name} ${index + 1}`}
                       onClick={() => setSelectedPhoto(index)}
                       style={{
-                        width: '60px',
-                        height: '60px',
-                        objectFit: 'cover',
+                        width: '60px', height: '60px', objectFit: 'cover',
                         borderRadius: 'var(--radius-sm)',
                         cursor: 'pointer',
                         border: selectedPhoto === index ? '2px solid var(--primary)' : '1px solid var(--border)',
@@ -213,18 +203,26 @@ function DogDetail() {
         <div>
           <div className="card" style={{ marginBottom: '1.5rem' }}>
             <h2 style={{ fontSize: '1rem', marginBottom: '1rem', color: 'var(--text-muted)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Details</h2>
-            
             <div>
               <div className="info-row">
                 <span className="info-label">Breed</span>
                 <span className="info-value">{dog.breed}</span>
               </div>
-              
               <div className="info-row">
                 <span className="info-label">Sex</span>
                 <span className="info-value">{dog.sex === 'male' ? 'Male ♂' : 'Female ♀'}</span>
               </div>
-              
+              <div className="info-row">
+                <span className="info-label">Champion</span>
+                <span className="info-value">
+                  {isChampion
+                    ? <ChampionBadge size="lg" />
+                    : hasBloodline
+                      ? <ChampionBloodlineBadge size="lg" />
+                      : <span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>—</span>
+                  }
+                </span>
+              </div>
               {dog.birth_date && (
                 <div className="info-row">
                   <span className="info-label"><Calendar size={14} style={{ display: 'inline', marginRight: '0.25rem' }} />Birth Date</span>
@@ -234,21 +232,18 @@ function DogDetail() {
                   </span>
                 </div>
               )}
-              
               {dog.color && (
                 <div className="info-row">
                   <span className="info-label">Color</span>
                   <span className="info-value">{dog.color}</span>
                 </div>
               )}
-              
               {dog.registration_number && (
                 <div className="info-row">
                   <span className="info-label"><Award size={14} style={{ display: 'inline', marginRight: '0.25rem' }} />Registration</span>
                   <span className="info-value" style={{ fontFamily: 'monospace' }}>{dog.registration_number}</span>
                 </div>
               )}
-              
               {dog.microchip && (
                 <div className="info-row">
                   <span className="info-label"><Hash size={14} style={{ display: 'inline', marginRight: '0.25rem' }} />Microchip</span>
@@ -265,9 +260,12 @@ function DogDetail() {
               <div>
                 <div style={{ fontSize: '0.8125rem', color: 'var(--text-muted)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Sire</div>
                 {dog.sire ? (
-                  <Link to={`/dogs/${dog.sire.id}`} style={{ color: 'var(--primary)', fontWeight: 500, textDecoration: 'none' }}>
-                    {dog.sire.name}
-                  </Link>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexWrap: 'wrap' }}>
+                    <Link to={`/dogs/${dog.sire.id}`} style={{ color: 'var(--primary)', fontWeight: 500, textDecoration: 'none' }}>
+                      {dog.sire.name}
+                    </Link>
+                    {dog.sire.is_champion && <ChampionBadge />}
+                  </div>
                 ) : (
                   <span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Unknown</span>
                 )}
@@ -275,9 +273,12 @@ function DogDetail() {
               <div>
                 <div style={{ fontSize: '0.8125rem', color: 'var(--text-muted)', marginBottom: '0.5rem', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Dam</div>
                 {dog.dam ? (
-                  <Link to={`/dogs/${dog.dam.id}`} style={{ color: 'var(--primary)', fontWeight: 500, textDecoration: 'none' }}>
-                    {dog.dam.name}
-                  </Link>
+                  <div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', flexWrap: 'wrap' }}>
+                    <Link to={`/dogs/${dog.dam.id}`} style={{ color: 'var(--primary)', fontWeight: 500, textDecoration: 'none' }}>
+                      {dog.dam.name}
+                    </Link>
+                    {dog.dam.is_champion && <ChampionBadge />}
+                  </div>
                 ) : (
                   <span style={{ color: 'var(--text-muted)', fontStyle: 'italic' }}>Unknown</span>
                 )}
@@ -313,7 +314,8 @@ function DogDetail() {
                   transition: 'var(--transition)',
                   display: 'flex',
                   justifyContent: 'space-between',
-                  alignItems: 'center'
+                  alignItems: 'center',
+                  gap: '0.5rem'
                 }}
                 onMouseEnter={(e) => {
                   e.currentTarget.style.borderColor = 'var(--primary)'
@@ -325,7 +327,10 @@ function DogDetail() {
                 }}
               >
                 <span style={{ color: 'var(--text-primary)', fontWeight: 500 }}>{child.name}</span>
-                <span style={{ fontSize: '1.125rem' }}>{child.sex === 'male' ? '♂' : '♀'}</span>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '0.35rem' }}>
+                  {child.is_champion && <ChampionBadge />}
+                  <span style={{ fontSize: '1.125rem' }}>{child.sex === 'male' ? '♂' : '♀'}</span>
+                </div>
               </Link>
             ))}
           </div>
@@ -336,10 +341,7 @@ function DogDetail() {
         <DogForm
           dog={dog}
           onClose={() => setShowEditModal(false)}
-          onSave={() => {
-            fetchDog()
-            setShowEditModal(false)
-          }}
+          onSave={() => { fetchDog(); setShowEditModal(false) }}
         />
       )}
     </div>