{uploading ? ( ⏳ ) : !value ? (

📷 Add

) : null} {value && !uploading && (

Change

)}

{label}

{/* Hidden File Input - Critical for Single Player Mode */}

); }; // ⭐ COMPONENT: RATING const StarRating = ({ rating, setRating, readonly = false }) => (

{[1, 2, 3, 4, 5].map(star => ( !readonly && setRating(star)} style={{ fontSize: 24, cursor: readonly ? 'default' : 'pointer', opacity: star <= rating ? 1 : 0.3, filter: star <= rating ? 'none' : 'grayscale(100%)', transition: 'transform 0.1s' }} > {star <= rating ? '⭐' : '⚪'} ))}

); // 📚 VIEW: LIBRARY const LibraryView = () => { const filteredLibrary = (HAIR_LIBRARY || []).filter(style => style.name.toLowerCase().includes(searchTerm.toLowerCase()) || style.description.toLowerCase().includes(searchTerm.toLowerCase()) ); return (

Style Library

Professional definitions for your next look

🔍 setSearchTerm(e.target.value)} placeholder="Search styles..." style={{ border: 'none', flex: 1, fontSize: 16, outline: 'none', background: 'transparent' }} />

{(filteredLibrary || []).map((style, i) => (

{style.name}

{style.description}

))}

); }; // 📱 VIEW: MAIN CONTAINER if (view === 'list' || view === 'library') { return (

{/* Main Content Area */}

{view === 'list' ? ( <>

✂️📓

Cottage Cuts

Your personal style journal

{(entries || []).length === 0 ? (

🍃

No cuts recorded yet.
Time for a fresh look?

) : (

{(entries || []).map(entry => (

{ setActiveEntryId(entry.id); setView('detail'); }} style={{ background: THEME.colors.card, borderRadius: 20, overflow: 'hidden', boxShadow: THEME.shadows.soft, border: `1px solid ${THEME.colors.border}`, transition: 'transform 0.2s', cursor: 'pointer' }} >

{!entry.photos.front && 📷}

{new Date(entry.date).toLocaleDateString(undefined, { month: 'short', year: 'numeric' })}

{entry.title || 'Untitled Cut'}

{'⭐'.repeat(entry.rating)}

📍 {entry.location || 'Unknown location'}

{(entry.tags || []).map(tag => ( #{tag} ))}

))}

)} ) : ( )}

{/* Floating Add Button - Only on List View */} {view === 'list' && ( )} {/* Bottom Navigation Bar */}

); } // 📱 VIEW: DETAIL if (view === 'detail' && activeEntry) { return (

{/* Navigation Bar */}

{/* DELETE BUTTON DIRECTLY IN DETAIL VIEW */}

{/* Hero Image Swiper */}

{[activeEntry.photos.front, activeEntry.photos.side, activeEntry.photos.back].filter(Boolean).map((_, i) => (

))}

{activeEntry.title}

✂️ {activeEntry.stylist || 'Unknown Stylist'} 📍 {activeEntry.location || 'Unknown Place'}

NOTES

{activeEntry.notes || 'No notes added for this cut.'}

Angles

{[ { label: 'Front', src: activeEntry.photos.front }, { label: 'Side', src: activeEntry.photos.side }, { label: 'Back', src: activeEntry.photos.back } ].map((photo, i) => photo.src && (

{photo.label}

))}

{/* Stylist Card */}

💈

Book Again?

Find {activeEntry.location} nearby

{/* Delete Confirmation Sheet */} {showDeleteConfirm && (

setShowDeleteConfirm(false)}>

e.stopPropagation()}>

Delete this cut?

This cannot be undone.

)}

); } // 📱 VIEW: EDIT / CREATE if (view === 'edit' && editingEntry) { return (

{activeEntryId ? 'Edit Cut' : 'New Cut'}

NAME YOUR LOOK setEditingEntry({...editingEntry, title: e.target.value})} placeholder="e.g. Fresh Fade or Summer Bob" style={{ width: '100%', padding: 16, borderRadius: 16, border: 'none', background: 'white', fontSize: 18, fontFamily: THEME.fonts.serif, marginBottom: 24, boxShadow: 'inset 0 2px 4px rgba(0,0,0,0.02)' }} /> PHOTOS

setEditingEntry({...editingEntry, photos: {...editingEntry.photos, front: val}})} /> setEditingEntry({...editingEntry, photos: {...editingEntry.photos, side: val}})} /> setEditingEntry({...editingEntry, photos: {...editingEntry.photos, back: val}})} />

RATING

setEditingEntry({...editingEntry, rating: r})} />

STYLIST setEditingEntry({...editingEntry, stylist: e.target.value})} placeholder="Who cut it?" style={{ width: '100%', padding: 12, borderRadius: 8, border: `1px solid ${THEME.colors.border}`, marginBottom: 12, fontSize: 16 }} /> LOCATION setEditingEntry({...editingEntry, location: e.target.value})} placeholder="Where at?" style={{ width: '100%', padding: 12, borderRadius: 8, border: `1px solid ${THEME.colors.border}`, marginBottom: 12, fontSize: 16 }} />

NOTES

setEditingEntry({...editingEntry, notes: e.target.value})}
            placeholder="What did you like? What should change next time?"
            style={{ 
              width: '100%', height: 120, padding: 16, borderRadius: 16, border: 'none', 
              background: 'white', fontSize: 16, fontFamily: 'inherit', resize: 'none',
              marginBottom: 24
            }}
          />

{activeEntryId && (
            <button 
              onClick={() => setShowDeleteConfirm(true)}
              style={{ 
                width: '100%', padding: 16, borderRadius: 12, 
                background: '#FFEAEA', color: '#D32F2F', 
                border: 'none', fontWeight: 600
              }}
            >
              Delete Entry
            </button>
          )}
        </div>

{/* Reuse delete confirmation for edit view if triggered here */}
        {showDeleteConfirm && (
          <div style={{
            position: 'fixed', top: 0, left: 0, right: 0, bottom: 0,
            background: 'rgba(0,0,0,0.5)', zIndex: 100,
            display: 'flex', alignItems: 'flex-end'
          }} onClick={() => setShowDeleteConfirm(false)}>
            <div style={{
              width: '100%', background: 'white', borderTopLeftRadius: 24, borderTopRightRadius: 24,
              padding: '24px 24px 40px', boxSizing: 'border-box',
              animation: 'slideUp 0.3s ease-out'
            }} onClick={e => e.stopPropagation()}>
              <h3 style={{ margin: '0 0 16px', fontSize: 20, textAlign: 'center' }}>Delete this cut?</h3>
              <p style={{ margin: '0 0 24px', textAlign: 'center', color: '#666' }}>This cannot be undone.</p>
              <div style={{ display: 'flex', gap: 12 }}>
                <button 
                  onClick={() => setShowDeleteConfirm(false)}
                  style={{ flex: 1, padding: 16, borderRadius: 12, border: '1px solid #ddd', background: 'white', fontSize: 16, fontWeight: 600 }}
                >
                  Cancel
                </button>
                <button 
                  onClick={() => handleDeleteEntry(editingEntry.id)}
                  style={{ flex: 1, padding: 16, borderRadius: 12, border: 'none', background: THEME.colors.danger, color: 'white', fontSize: 16, fontWeight: 600 }}
                >
                  Delete
                </button>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }

return null;
}</article></body></html>