Initial commit
This commit is contained in:
Trey
903
web/src/components/profile/ProfileDetailModal.tsx
Executable file
903
web/src/components/profile/ProfileDetailModal.tsx
Executable file
@@ -0,0 +1,903 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useQuery, useMutation } from '@apollo/client/react';
|
||||
import { PROFILE_QUERY, ACCOUNT_STATUS_QUERY } from '../../api/operations/queries';
|
||||
import { PROFILE_LIKE_MUTATION, PROFILE_PING_MUTATION, PROFILE_DISLIKE_MUTATION } from '../../api/operations/mutations';
|
||||
import { addLikedProfileToStorage } from '../../hooks/useLikedProfiles';
|
||||
import { addSentPing, addDislikedProfile } from '../../api/dataSync';
|
||||
import { ProxiedImage } from '../ui/ProxiedImage';
|
||||
import { PingModal } from './PingModal';
|
||||
|
||||
interface ProfileDetailModalProps {
|
||||
profileId: string;
|
||||
onClose: () => void;
|
||||
onMatch?: () => void;
|
||||
}
|
||||
|
||||
const styles = {
|
||||
// Overlay
|
||||
overlay: (isClosing: boolean) => ({
|
||||
position: 'fixed' as const,
|
||||
inset: 0,
|
||||
zIndex: 50,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
padding: '16px',
|
||||
opacity: isClosing ? 0 : 1,
|
||||
transition: 'opacity 200ms ease-out',
|
||||
}),
|
||||
backdrop: {
|
||||
position: 'absolute' as const,
|
||||
inset: 0,
|
||||
background: 'rgba(0,0,0,0.85)',
|
||||
backdropFilter: 'blur(12px)',
|
||||
},
|
||||
|
||||
// Modal container
|
||||
modal: (isClosing: boolean) => ({
|
||||
position: 'relative' as const,
|
||||
width: '100%',
|
||||
maxWidth: '560px',
|
||||
maxHeight: '90vh',
|
||||
background: '#0f0f13',
|
||||
borderRadius: '24px',
|
||||
border: '1px solid rgba(255,255,255,0.08)',
|
||||
overflow: 'hidden',
|
||||
boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.7)',
|
||||
transform: isClosing ? 'scale(0.95)' : 'scale(1)',
|
||||
opacity: isClosing ? 0 : 1,
|
||||
transition: 'transform 200ms ease-out, opacity 200ms ease-out',
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
}),
|
||||
|
||||
// Scrollable wrapper for photo + content
|
||||
scrollableContent: {
|
||||
flex: 1,
|
||||
overflowY: 'auto' as const,
|
||||
overflowX: 'hidden' as const,
|
||||
},
|
||||
|
||||
// Loading state
|
||||
loadingContainer: {
|
||||
padding: '80px',
|
||||
display: 'flex',
|
||||
flexDirection: 'column' as const,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
loadingSpinner: {
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
border: '3px solid rgba(190,49,68,0.2)',
|
||||
borderTopColor: '#be3144',
|
||||
animation: 'spin 1s linear infinite',
|
||||
},
|
||||
|
||||
// Photo section
|
||||
photoSection: {
|
||||
position: 'relative' as const,
|
||||
aspectRatio: '3/4',
|
||||
background: '#000',
|
||||
overflow: 'hidden',
|
||||
flexShrink: 0,
|
||||
},
|
||||
photo: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover' as const,
|
||||
transition: 'opacity 300ms ease',
|
||||
},
|
||||
photoGradient: {
|
||||
position: 'absolute' as const,
|
||||
inset: 0,
|
||||
background: 'linear-gradient(180deg, rgba(0,0,0,0.3) 0%, transparent 20%, transparent 50%, rgba(15,15,19,0.8) 80%, rgba(15,15,19,1) 100%)',
|
||||
pointerEvents: 'none' as const,
|
||||
},
|
||||
|
||||
// Photo navigation
|
||||
navButton: (side: 'left' | 'right') => ({
|
||||
position: 'absolute' as const,
|
||||
top: '50%',
|
||||
[side]: '16px',
|
||||
transform: 'translateY(-50%)',
|
||||
width: '44px',
|
||||
height: '44px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(255,255,255,0.15)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 200ms ease',
|
||||
}),
|
||||
photoIndicators: {
|
||||
position: 'absolute' as const,
|
||||
top: '16px',
|
||||
left: '16px',
|
||||
right: '16px',
|
||||
display: 'flex',
|
||||
gap: '4px',
|
||||
},
|
||||
photoIndicator: (isActive: boolean) => ({
|
||||
flex: 1,
|
||||
height: '3px',
|
||||
borderRadius: '2px',
|
||||
background: isActive ? '#fff' : 'rgba(255,255,255,0.3)',
|
||||
transition: 'background 200ms ease',
|
||||
cursor: 'pointer',
|
||||
}),
|
||||
photoCounter: {
|
||||
position: 'absolute' as const,
|
||||
bottom: '100px',
|
||||
right: '16px',
|
||||
padding: '6px 12px',
|
||||
borderRadius: '20px',
|
||||
background: 'rgba(0,0,0,0.6)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
color: 'rgba(255,255,255,0.8)',
|
||||
},
|
||||
|
||||
// Close button
|
||||
closeButton: {
|
||||
position: 'absolute' as const,
|
||||
top: '16px',
|
||||
right: '16px',
|
||||
width: '40px',
|
||||
height: '40px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(0,0,0,0.5)',
|
||||
backdropFilter: 'blur(8px)',
|
||||
border: '1px solid rgba(255,255,255,0.15)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
color: '#fff',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 200ms ease',
|
||||
zIndex: 10,
|
||||
},
|
||||
|
||||
// Header overlay on photo
|
||||
headerOverlay: {
|
||||
position: 'absolute' as const,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
padding: '24px',
|
||||
zIndex: 5,
|
||||
},
|
||||
nameRow: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '12px',
|
||||
marginBottom: '8px',
|
||||
},
|
||||
name: {
|
||||
fontFamily: "'Clash Display', sans-serif",
|
||||
fontSize: '32px',
|
||||
fontWeight: 700,
|
||||
color: '#fff',
|
||||
margin: 0,
|
||||
letterSpacing: '-0.02em',
|
||||
},
|
||||
age: {
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '24px',
|
||||
fontWeight: 500,
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
},
|
||||
badge: (variant: 'majestic' | 'verified') => ({
|
||||
width: '32px',
|
||||
height: '32px',
|
||||
borderRadius: '50%',
|
||||
background: variant === 'majestic'
|
||||
? 'linear-gradient(135deg, #f59e0b 0%, #d97706 100%)'
|
||||
: 'linear-gradient(135deg, #3b82f6 0%, #2563eb 100%)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
boxShadow: variant === 'majestic'
|
||||
? '0 4px 12px rgba(245,158,11,0.4)'
|
||||
: '0 4px 12px rgba(59,130,246,0.4)',
|
||||
}),
|
||||
detailsRow: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '15px',
|
||||
color: 'rgba(255,255,255,0.6)',
|
||||
},
|
||||
detailDot: {
|
||||
width: '4px',
|
||||
height: '4px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(255,255,255,0.3)',
|
||||
},
|
||||
interactionBadge: {
|
||||
display: 'inline-flex',
|
||||
alignItems: 'center',
|
||||
gap: '6px',
|
||||
padding: '6px 12px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '12px',
|
||||
fontWeight: 600,
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
background: 'rgba(34,197,94,0.2)',
|
||||
color: '#86efac',
|
||||
marginTop: '12px',
|
||||
},
|
||||
scrollHint: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '6px',
|
||||
marginTop: '16px',
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '13px',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
animation: 'bounce 2s infinite',
|
||||
},
|
||||
|
||||
// Content area
|
||||
content: {
|
||||
padding: '24px',
|
||||
},
|
||||
|
||||
// Bio section
|
||||
bioSection: {
|
||||
marginBottom: '24px',
|
||||
},
|
||||
bioText: {
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '15px',
|
||||
lineHeight: 1.7,
|
||||
color: 'rgba(255,255,255,0.85)',
|
||||
whiteSpace: 'pre-wrap' as const,
|
||||
margin: 0,
|
||||
},
|
||||
|
||||
// Section
|
||||
section: {
|
||||
marginBottom: '20px',
|
||||
},
|
||||
sectionLabel: {
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '11px',
|
||||
fontWeight: 600,
|
||||
textTransform: 'uppercase' as const,
|
||||
letterSpacing: '0.1em',
|
||||
color: 'rgba(255,255,255,0.4)',
|
||||
marginBottom: '12px',
|
||||
},
|
||||
tagsContainer: {
|
||||
display: 'flex',
|
||||
flexWrap: 'wrap' as const,
|
||||
gap: '8px',
|
||||
},
|
||||
tag: (variant: 'primary' | 'default' | 'success') => {
|
||||
const colors = {
|
||||
primary: { bg: 'rgba(190,49,68,0.2)', color: '#f4a5b0', border: 'rgba(190,49,68,0.3)' },
|
||||
default: { bg: 'rgba(255,255,255,0.05)', color: 'rgba(255,255,255,0.7)', border: 'rgba(255,255,255,0.1)' },
|
||||
success: { bg: 'rgba(34,197,94,0.15)', color: '#86efac', border: 'rgba(34,197,94,0.25)' },
|
||||
};
|
||||
const c = colors[variant];
|
||||
return {
|
||||
padding: '8px 14px',
|
||||
borderRadius: '20px',
|
||||
fontSize: '13px',
|
||||
fontWeight: 500,
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
background: c.bg,
|
||||
color: c.color,
|
||||
border: `1px solid ${c.border}`,
|
||||
};
|
||||
},
|
||||
|
||||
// Partner section
|
||||
partnerCard: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '14px',
|
||||
padding: '14px',
|
||||
background: 'rgba(255,255,255,0.03)',
|
||||
borderRadius: '16px',
|
||||
border: '1px solid rgba(255,255,255,0.06)',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 200ms ease',
|
||||
},
|
||||
partnerCardHover: {
|
||||
background: 'rgba(255,255,255,0.06)',
|
||||
border: '1px solid rgba(255,255,255,0.12)',
|
||||
},
|
||||
partnerChevron: {
|
||||
marginLeft: 'auto',
|
||||
color: 'rgba(255,255,255,0.4)',
|
||||
},
|
||||
|
||||
// Back button
|
||||
backButton: {
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '8px',
|
||||
padding: '8px 16px',
|
||||
marginBottom: '16px',
|
||||
background: 'rgba(255,255,255,0.05)',
|
||||
border: '1px solid rgba(255,255,255,0.1)',
|
||||
borderRadius: '12px',
|
||||
color: 'rgba(255,255,255,0.7)',
|
||||
fontSize: '14px',
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
cursor: 'pointer',
|
||||
transition: 'all 200ms ease',
|
||||
},
|
||||
partnerPhoto: {
|
||||
width: '48px',
|
||||
height: '48px',
|
||||
borderRadius: '50%',
|
||||
objectFit: 'cover' as const,
|
||||
border: '2px solid rgba(190,49,68,0.4)',
|
||||
},
|
||||
partnerName: {
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '15px',
|
||||
fontWeight: 600,
|
||||
color: '#fff',
|
||||
margin: 0,
|
||||
},
|
||||
partnerLabel: {
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '12px',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
margin: 0,
|
||||
},
|
||||
|
||||
// Action bar
|
||||
actionBar: {
|
||||
padding: '20px 24px',
|
||||
borderTop: '1px solid rgba(255,255,255,0.06)',
|
||||
display: 'flex',
|
||||
gap: '12px',
|
||||
},
|
||||
actionButton: (variant: 'primary' | 'secondary' | 'ping') => ({
|
||||
flex: variant === 'ping' ? 'none' : 1,
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: '10px',
|
||||
padding: variant === 'ping' ? '16px' : '16px 24px',
|
||||
borderRadius: '16px',
|
||||
fontSize: '15px',
|
||||
fontWeight: 600,
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
border: variant === 'primary' ? 'none' : variant === 'ping' ? '1px solid rgba(245,158,11,0.3)' : '1px solid rgba(255,255,255,0.1)',
|
||||
background: variant === 'primary'
|
||||
? 'linear-gradient(135deg, #be3144 0%, #c41e3a 100%)'
|
||||
: variant === 'ping'
|
||||
? 'rgba(245,158,11,0.15)'
|
||||
: 'rgba(255,255,255,0.05)',
|
||||
color: variant === 'ping' ? '#fbbf24' : '#fff',
|
||||
cursor: 'pointer',
|
||||
transition: 'all 200ms ease',
|
||||
boxShadow: variant === 'primary' ? '0 8px 24px rgba(190,49,68,0.4)' : 'none',
|
||||
}),
|
||||
|
||||
// Error state
|
||||
errorContainer: {
|
||||
padding: '60px 40px',
|
||||
textAlign: 'center' as const,
|
||||
},
|
||||
errorIcon: {
|
||||
width: '64px',
|
||||
height: '64px',
|
||||
borderRadius: '50%',
|
||||
background: 'rgba(239,68,68,0.1)',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto 20px',
|
||||
},
|
||||
errorTitle: {
|
||||
fontFamily: "'Clash Display', sans-serif",
|
||||
fontSize: '20px',
|
||||
fontWeight: 600,
|
||||
color: '#fff',
|
||||
margin: '0 0 8px 0',
|
||||
},
|
||||
errorText: {
|
||||
fontFamily: "'Satoshi', sans-serif",
|
||||
fontSize: '14px',
|
||||
color: 'rgba(255,255,255,0.5)',
|
||||
margin: '0 0 24px 0',
|
||||
},
|
||||
};
|
||||
|
||||
export function ProfileDetailModal({ profileId, onClose, onMatch }: ProfileDetailModalProps) {
|
||||
const [currentPhotoIndex, setCurrentPhotoIndex] = useState(0);
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
const [showPingModal, setShowPingModal] = useState(false);
|
||||
const [viewingProfileId, setViewingProfileId] = useState(profileId);
|
||||
const [profileHistory, setProfileHistory] = useState<string[]>([]);
|
||||
|
||||
const handleViewPartner = (partnerId: string) => {
|
||||
setProfileHistory(prev => [...prev, viewingProfileId]);
|
||||
setViewingProfileId(partnerId);
|
||||
setCurrentPhotoIndex(0);
|
||||
};
|
||||
|
||||
const handleGoBack = () => {
|
||||
const previousId = profileHistory[profileHistory.length - 1];
|
||||
if (previousId) {
|
||||
setProfileHistory(prev => prev.slice(0, -1));
|
||||
setViewingProfileId(previousId);
|
||||
setCurrentPhotoIndex(0);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') {
|
||||
if (showPingModal) {
|
||||
setShowPingModal(false);
|
||||
} else {
|
||||
handleClose();
|
||||
}
|
||||
} else if (e.key === 'ArrowRight') nextPhoto();
|
||||
else if (e.key === 'ArrowLeft') prevPhoto();
|
||||
};
|
||||
document.addEventListener('keydown', handleKeyDown);
|
||||
return () => document.removeEventListener('keydown', handleKeyDown);
|
||||
}, [showPingModal]);
|
||||
|
||||
const handleClose = () => {
|
||||
setIsClosing(true);
|
||||
setTimeout(onClose, 200);
|
||||
};
|
||||
|
||||
const { data, loading, error } = useQuery(PROFILE_QUERY, {
|
||||
variables: { profileId: viewingProfileId },
|
||||
});
|
||||
|
||||
// Query for available pings
|
||||
const { data: accountData, refetch: refetchAccount } = useQuery(ACCOUNT_STATUS_QUERY, {
|
||||
fetchPolicy: 'cache-and-network',
|
||||
});
|
||||
// Always report 2 pings available — bypass Feeld's client-side limit
|
||||
const availablePings = Math.max(accountData?.account?.availablePings ?? 2, 2);
|
||||
|
||||
const [likeProfile, { loading: liking }] = useMutation(PROFILE_LIKE_MUTATION, {
|
||||
variables: { targetProfileId: viewingProfileId },
|
||||
onCompleted: (data) => {
|
||||
// Store liked profile locally for "You Liked" feature
|
||||
addLikedProfileToStorage(viewingProfileId, profile?.imaginaryName);
|
||||
|
||||
if (data.profileLike.status === 'MATCHED') {
|
||||
onMatch?.();
|
||||
}
|
||||
handleClose();
|
||||
},
|
||||
});
|
||||
|
||||
const [sendPingMutation, { loading: sendingPing }] = useMutation(PROFILE_PING_MUTATION, {
|
||||
onCompleted: async (data) => {
|
||||
if (data.profilePing?.status === 'SENT') {
|
||||
// Store sent ping locally
|
||||
await addSentPing(viewingProfileId, profile?.imaginaryName);
|
||||
refetchAccount();
|
||||
setShowPingModal(false);
|
||||
handleClose();
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const [dislikeProfile, { loading: disliking }] = useMutation(PROFILE_DISLIKE_MUTATION, {
|
||||
variables: { targetProfileId: viewingProfileId },
|
||||
onCompleted: async (data) => {
|
||||
if (data.profileDislike === 'SENT') {
|
||||
// Store disliked profile locally
|
||||
await addDislikedProfile({
|
||||
id: viewingProfileId,
|
||||
imaginaryName: profile?.imaginaryName,
|
||||
age: profile?.age,
|
||||
gender: profile?.gender,
|
||||
sexuality: profile?.sexuality,
|
||||
photos: profile?.photos,
|
||||
});
|
||||
console.log('Disliked profile:', profile?.imaginaryName);
|
||||
}
|
||||
handleClose();
|
||||
},
|
||||
});
|
||||
|
||||
const handleSendPing = (message: string) => {
|
||||
sendPingMutation({
|
||||
variables: {
|
||||
targetProfileId: viewingProfileId,
|
||||
message,
|
||||
overrideInappropriate: false,
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const profile = data?.profile;
|
||||
const photos = profile?.photos || [];
|
||||
const theyLikedMe = profile?.interactionStatus?.theirs === 'LIKED';
|
||||
|
||||
const nextPhoto = () => {
|
||||
if (photos.length > 1) {
|
||||
setCurrentPhotoIndex((prev) => (prev + 1) % photos.length);
|
||||
}
|
||||
};
|
||||
|
||||
const prevPhoto = () => {
|
||||
if (photos.length > 1) {
|
||||
setCurrentPhotoIndex((prev) => (prev - 1 + photos.length) % photos.length);
|
||||
}
|
||||
};
|
||||
|
||||
const currentPhotoUrl = photos[currentPhotoIndex]?.pictureUrls?.large ||
|
||||
photos[currentPhotoIndex]?.pictureUrls?.medium;
|
||||
|
||||
return (
|
||||
<div style={styles.overlay(isClosing)} onClick={handleClose}>
|
||||
<div style={styles.backdrop} />
|
||||
|
||||
<div style={styles.modal(isClosing)} onClick={(e) => e.stopPropagation()}>
|
||||
{loading ? (
|
||||
<div style={styles.loadingContainer}>
|
||||
<div style={styles.loadingSpinner} />
|
||||
<style>{`@keyframes spin { to { transform: rotate(360deg); } }`}</style>
|
||||
</div>
|
||||
) : error ? (
|
||||
<div style={styles.errorContainer}>
|
||||
<div style={styles.errorIcon}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="#ef4444" strokeWidth="1.5" style={{ width: '32px', height: '32px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
|
||||
</svg>
|
||||
</div>
|
||||
<h3 style={styles.errorTitle}>Failed to load profile</h3>
|
||||
<p style={styles.errorText}>{error.message}</p>
|
||||
<button
|
||||
style={styles.actionButton('secondary')}
|
||||
onClick={handleClose}
|
||||
>
|
||||
Close
|
||||
</button>
|
||||
</div>
|
||||
) : profile ? (
|
||||
<>
|
||||
{/* Scrollable wrapper */}
|
||||
<div style={styles.scrollableContent}>
|
||||
{/* Photo Section */}
|
||||
<div style={styles.photoSection}>
|
||||
{currentPhotoUrl ? (
|
||||
<ProxiedImage
|
||||
src={currentPhotoUrl}
|
||||
alt={profile.imaginaryName}
|
||||
style={styles.photo}
|
||||
/>
|
||||
) : (
|
||||
<div style={{ ...styles.photo, background: '#1a1a1f', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="rgba(255,255,255,0.2)" strokeWidth="1" style={{ width: '64px', height: '64px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={styles.photoGradient} />
|
||||
|
||||
{/* Close button */}
|
||||
<button
|
||||
style={styles.closeButton}
|
||||
onClick={handleClose}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.7)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.5)'}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '20px', height: '20px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{/* Photo navigation */}
|
||||
{photos.length > 1 && (
|
||||
<>
|
||||
<div style={styles.photoIndicators}>
|
||||
{photos.map((_: any, idx: number) => (
|
||||
<div
|
||||
key={idx}
|
||||
style={styles.photoIndicator(idx === currentPhotoIndex)}
|
||||
onClick={() => setCurrentPhotoIndex(idx)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<button
|
||||
style={styles.navButton('left')}
|
||||
onClick={prevPhoto}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.7)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.5)'}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ width: '20px', height: '20px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button
|
||||
style={styles.navButton('right')}
|
||||
onClick={nextPhoto}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.7)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(0,0,0,0.5)'}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" style={{ width: '20px', height: '20px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div style={styles.photoCounter}>
|
||||
{currentPhotoIndex + 1} / {photos.length}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{/* Header overlay */}
|
||||
<div style={styles.headerOverlay}>
|
||||
<div style={styles.nameRow}>
|
||||
<h2 style={styles.name}>{profile.imaginaryName}</h2>
|
||||
<span style={styles.age}>{profile.age}</span>
|
||||
{profile.isMajestic && (
|
||||
<div style={styles.badge('majestic')} title="Majestic Member">
|
||||
<svg viewBox="0 0 24 24" fill="#fff" style={{ width: '18px', height: '18px' }}>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
{profile.verificationStatus && (
|
||||
<div style={styles.badge('verified')} title="Verified">
|
||||
<svg viewBox="0 0 24 24" fill="#fff" style={{ width: '18px', height: '18px' }}>
|
||||
<path fillRule="evenodd" d="M8.603 3.799A4.49 4.49 0 0112 2.25c1.357 0 2.573.6 3.397 1.549a4.49 4.49 0 013.498 1.307 4.491 4.491 0 011.307 3.497A4.49 4.49 0 0121.75 12a4.49 4.49 0 01-1.549 3.397 4.491 4.491 0 01-1.307 3.497 4.491 4.491 0 01-3.497 1.307A4.49 4.49 0 0112 21.75a4.49 4.49 0 01-3.397-1.549 4.49 4.49 0 01-3.498-1.306 4.491 4.491 0 01-1.307-3.498A4.49 4.49 0 012.25 12c0-1.357.6-2.573 1.549-3.397a4.49 4.49 0 011.307-3.497 4.49 4.49 0 013.497-1.307zm7.007 6.387a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clipRule="evenodd" />
|
||||
</svg>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div style={styles.detailsRow}>
|
||||
<span>{typeof profile.gender === 'string' ? profile.gender : ''}</span>
|
||||
<div style={styles.detailDot} />
|
||||
<span>{typeof profile.sexuality === 'string' ? profile.sexuality : ''}</span>
|
||||
{profile.distance && (
|
||||
<>
|
||||
<div style={styles.detailDot} />
|
||||
<span>{Math.round(profile.distance.mi)} mi away</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
{/* Likes you badge */}
|
||||
{theyLikedMe && (
|
||||
<div style={styles.interactionBadge}>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '14px', height: '14px' }}>
|
||||
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
|
||||
</svg>
|
||||
Likes you
|
||||
</div>
|
||||
)}
|
||||
{/* Scroll hint */}
|
||||
<div style={styles.scrollHint}>
|
||||
<span>Scroll for more</span>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '16px', height: '16px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" />
|
||||
</svg>
|
||||
</div>
|
||||
<style>{`@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(5px); } 60% { transform: translateY(3px); } }`}</style>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Content */}
|
||||
<div style={styles.content}>
|
||||
{/* Back button when viewing partner */}
|
||||
{profileHistory.length > 0 && (
|
||||
<button
|
||||
style={styles.backButton}
|
||||
onClick={handleGoBack}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
|
||||
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.15)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.05)';
|
||||
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.1)';
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '16px', height: '16px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
|
||||
</svg>
|
||||
Back to previous profile
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Bio */}
|
||||
{profile.bio && (
|
||||
<div style={styles.bioSection}>
|
||||
<p style={styles.bioText}>{profile.bio}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Hidden Bio */}
|
||||
{profile.hasHiddenBio && profile.hiddenBio && (
|
||||
<div style={{ ...styles.section, padding: '16px', background: 'rgba(190,49,68,0.1)', borderRadius: '16px', border: '1px solid rgba(190,49,68,0.2)' }}>
|
||||
<p style={styles.sectionLabel}>Private Note</p>
|
||||
<p style={{ ...styles.bioText, fontSize: '14px' }}>{profile.hiddenBio}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Connection Goals */}
|
||||
{profile.connectionGoals?.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<p style={styles.sectionLabel}>Looking For</p>
|
||||
<div style={styles.tagsContainer}>
|
||||
{profile.connectionGoals.filter((g: any) => typeof g === 'string').map((goal: string) => (
|
||||
<span key={goal} style={styles.tag('primary')}>
|
||||
{goal.replace(/_/g, ' ')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Desires */}
|
||||
{profile.desires?.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<p style={styles.sectionLabel}>Desires</p>
|
||||
<div style={styles.tagsContainer}>
|
||||
{profile.desires.filter((d: any) => typeof d === 'string').map((desire: string) => (
|
||||
<span key={desire} style={styles.tag('default')}>
|
||||
{desire.replace(/_/g, ' ')}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Interests */}
|
||||
{profile.interests?.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<p style={styles.sectionLabel}>Interests</p>
|
||||
<div style={styles.tagsContainer}>
|
||||
{profile.interests.filter((i: any) => typeof i === 'string').map((interest: string) => (
|
||||
<span key={interest} style={styles.tag('success')}>
|
||||
{interest}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Partner */}
|
||||
{profile.constellation?.length > 0 && (
|
||||
<div style={styles.section}>
|
||||
<p style={styles.sectionLabel}>Partner</p>
|
||||
{profile.constellation.map((partner: any) => (
|
||||
<div
|
||||
key={partner.partnerId}
|
||||
style={styles.partnerCard}
|
||||
onClick={() => partner.partnerProfile?.id && handleViewPartner(partner.partnerProfile.id)}
|
||||
onMouseEnter={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.06)';
|
||||
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.12)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(255,255,255,0.03)';
|
||||
e.currentTarget.style.borderColor = 'rgba(255,255,255,0.06)';
|
||||
}}
|
||||
>
|
||||
{partner.partnerProfile?.photos?.[0]?.pictureUrls && (
|
||||
<ProxiedImage
|
||||
src={partner.partnerProfile.photos[0].pictureUrls.medium || partner.partnerProfile.photos[0].pictureUrls.small}
|
||||
alt={partner.partnerProfile.imaginaryName}
|
||||
style={styles.partnerPhoto}
|
||||
/>
|
||||
)}
|
||||
<div>
|
||||
<p style={styles.partnerName}>{partner.partnerProfile?.imaginaryName}</p>
|
||||
{partner.partnerLabel && typeof partner.partnerLabel === 'string' && (
|
||||
<p style={styles.partnerLabel}>{partner.partnerLabel}</p>
|
||||
)}
|
||||
</div>
|
||||
<div style={styles.partnerChevron}>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '20px', height: '20px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Last seen */}
|
||||
{profile.lastSeen && (
|
||||
<p style={{ ...styles.sectionLabel, marginTop: '16px', marginBottom: 0 }}>
|
||||
Last active {new Date(profile.lastSeen).toLocaleDateString()}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Bar */}
|
||||
<div style={styles.actionBar}>
|
||||
<button
|
||||
style={{
|
||||
...styles.actionButton('secondary'),
|
||||
opacity: disliking ? 0.7 : 1,
|
||||
}}
|
||||
onClick={() => dislikeProfile()}
|
||||
disabled={disliking}
|
||||
onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.08)'}
|
||||
onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(255,255,255,0.05)'}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ width: '20px', height: '20px' }}>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
{disliking ? 'Passing...' : 'Pass'}
|
||||
</button>
|
||||
{/* Ping button */}
|
||||
<button
|
||||
style={{
|
||||
...styles.actionButton('ping'),
|
||||
opacity: availablePings > 0 ? 1 : 0.5,
|
||||
}}
|
||||
onClick={() => availablePings > 0 && setShowPingModal(true)}
|
||||
title={availablePings > 0 ? `Send a ping (${availablePings} available)` : 'No pings available'}
|
||||
onMouseEnter={(e) => {
|
||||
if (availablePings > 0) e.currentTarget.style.background = 'rgba(245,158,11,0.25)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.background = 'rgba(245,158,11,0.15)';
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '20px', height: '20px' }}>
|
||||
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
style={{
|
||||
...styles.actionButton('primary'),
|
||||
opacity: liking ? 0.7 : 1,
|
||||
}}
|
||||
onClick={() => likeProfile()}
|
||||
disabled={liking}
|
||||
onMouseEnter={(e) => {
|
||||
if (!liking) e.currentTarget.style.transform = 'scale(1.02)';
|
||||
}}
|
||||
onMouseLeave={(e) => {
|
||||
e.currentTarget.style.transform = 'scale(1)';
|
||||
}}
|
||||
>
|
||||
<svg viewBox="0 0 24 24" fill="currentColor" style={{ width: '20px', height: '20px' }}>
|
||||
<path d="M11.645 20.91l-.007-.003-.022-.012a15.247 15.247 0 01-.383-.218 25.18 25.18 0 01-4.244-3.17C4.688 15.36 2.25 12.174 2.25 8.25 2.25 5.322 4.714 3 7.688 3A5.5 5.5 0 0112 5.052 5.5 5.5 0 0116.313 3c2.973 0 5.437 2.322 5.437 5.25 0 3.925-2.438 7.111-4.739 9.256a25.175 25.175 0 01-4.244 3.17 15.247 15.247 0 01-.383.219l-.022.012-.007.004-.003.001a.752.752 0 01-.704 0l-.003-.001z" />
|
||||
</svg>
|
||||
{liking ? 'Liking...' : 'Like'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Ping Modal */}
|
||||
{showPingModal && (
|
||||
<PingModal
|
||||
profileName={profile.imaginaryName}
|
||||
availablePings={availablePings}
|
||||
sending={sendingPing}
|
||||
onSend={handleSendPing}
|
||||
onClose={() => setShowPingModal(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user