@@ -1191,7 +1338,7 @@ export function LikesPage() {
You Liked
- {youLikedTotal}
+ {pastLikesTotal || pastLikesProfiles.length}
@@ -1204,7 +1351,7 @@ export function LikesPage() {
Passed
- {dislikedProfiles.length}
+ {pastDislikesTotal || pastDislikesProfiles.length}
@@ -1316,14 +1463,65 @@ export function LikesPage() {
)}
{/* Loading state for You Liked */}
- {activeTab === 'youLiked' && youLikedLoading && (
+ {activeTab === 'youLiked' && pastLikesLoading && pastLikes.length === 0 && (
{activeTab === 'likes' ? (
@@ -1353,34 +1551,222 @@ export function LikesPage() {
: activeTab === 'pings'
? 'Pings from interested members will show up here'
: activeTab === 'disliked'
- ? "Profiles you've passed on will be saved here"
- : "Profiles you've liked will be saved here"
+ ? "Profiles you've passed on will appear here"
+ : "Profiles you've liked will appear here"
}
- ) : !(activeTab === 'youLiked' && youLikedLoading) && (
- /* Profiles Grid */
-
- {currentProfiles.map((profile: any, index: number) => {
- // Only show dislike for profiles that have been matched with real scanner data
- // The _matched flag is set by enrichLikesWithRealData when we have real profile info
- const canDislike = activeTab === 'likes' && profile._matched && !isDisliked(profile.id);
+ ) : !(activeTab === 'youLiked' && pastLikesLoading && pastLikes.length === 0) && !(activeTab === 'disliked' && pastDislikesLoading && pastDislikes.length === 0) && (
+ <>
+ {/* Profiles Grid */}
+
+ {currentProfiles.map((profile: any, index: number) => {
+ // Only show dislike for profiles that have been matched with real scanner data
+ const canDislike = activeTab === 'likes' && profile._matched && !isDisliked(profile.id);
- return (
-
setSelectedProfileId(profile.id)}
- index={index}
- onRefresh={(id) => refreshProfile(id, profile.imaginaryName)}
- isRefreshing={refreshingProfiles.has(profile.id)}
- onDislike={canDislike ? handleDislikeFromLikes : undefined}
- isDisliking={dislikingProfiles.has(profile.id)}
- showDislike={canDislike}
- />
- );
- })}
-
+ return (
+
+ {/* Ping badge for You Liked tab */}
+ {activeTab === 'youLiked' && profile._isPing && (
+
+ )}
+
+ {/* Timestamp badge for You Liked and Passed tabs */}
+ {(activeTab === 'youLiked' || activeTab === 'disliked') && profile._interactionSentAt && (
+
+ {new Date(profile._interactionSentAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })}
+
+ )}
+
+ {/* Matched indicator for accepted pings */}
+ {activeTab === 'pings' && pingMatched.has(profile.id) && (
+
+ Matched!
+
+ )}
+
+
setSelectedProfileId(profile.id)}
+ index={index}
+ onRefresh={activeTab === 'likes' ? (id) => refreshProfile(id, profile.imaginaryName) : undefined}
+ isRefreshing={refreshingProfiles.has(profile.id)}
+ onDislike={canDislike ? handleDislikeFromLikes : undefined}
+ isDisliking={dislikingProfiles.has(profile.id)}
+ showDislike={canDislike}
+ />
+
+ {/* Accept/Reject buttons for Pings tab */}
+ {activeTab === 'pings' && !pingMatched.has(profile.id) && (
+
+
+
+
+ );
+ })}
+
+
+ {/* Load More button for You Liked tab */}
+ {activeTab === 'youLiked' && pastLikesHasMore && (
+
+
+
+ )}
+
+ {/* Load More button for Passed tab */}
+ {activeTab === 'disliked' && pastDislikesHasMore && (
+
+
+
+ )}
+
)}
{/* Profile Detail Modal */}
diff --git a/web/src/pages/Matches.tsx b/web/src/pages/Matches.tsx
new file mode 100644
index 0000000..1929370
--- /dev/null
+++ b/web/src/pages/Matches.tsx
@@ -0,0 +1,950 @@
+import { useState, useCallback, useEffect, useRef, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useQuery } from '@apollo/client/react';
+import { ProfileCard } from '../components/profile/ProfileCard';
+import { ProfileDetailModal } from '../components/profile/ProfileDetailModal';
+import { useMatches } from '../hooks/useMatches';
+import type { MatchFilters, MatchWeights } from '../hooks/useMatches';
+import { apolloClient } from '../api/client';
+import { PROFILE_QUERY, PROFILE_MATCHES_QUERY, GET_PROFILE_CONNECTIONS_QUERY } from '../api/operations/queries';
+import { authManager } from '../api/auth';
+
+const safeText = (v: any): string => {
+ if (v == null) return '';
+ if (typeof v === 'string') return v;
+ if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+ return '';
+};
+
+const styles = {
+ container: {
+ paddingBottom: '48px',
+ },
+ header: {
+ marginBottom: '24px',
+ },
+ title: {
+ fontFamily: "'Clash Display', sans-serif",
+ fontSize: '36px',
+ fontWeight: 700,
+ color: '#ffffff',
+ margin: 0,
+ marginBottom: '8px',
+ letterSpacing: '-0.02em',
+ },
+ subtitle: {
+ fontFamily: "'Satoshi', sans-serif",
+ fontSize: '15px',
+ color: 'rgba(255,255,255,0.5)',
+ margin: 0,
+ },
+ headerActions: {
+ display: 'flex',
+ gap: '8px',
+ marginTop: '12px',
+ },
+ iconBtn: {
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ width: '40px',
+ height: '40px',
+ borderRadius: '10px',
+ border: '1px solid rgba(255,255,255,0.1)',
+ background: 'rgba(255,255,255,0.03)',
+ color: 'rgba(255,255,255,0.7)',
+ cursor: 'pointer',
+ fontSize: '18px',
+ transition: 'all 0.2s',
+ },
+
+ // Filter bar
+ filterBar: {
+ display: 'flex',
+ flexWrap: 'wrap' as const,
+ gap: '10px',
+ marginBottom: '20px',
+ alignItems: 'center',
+ },
+ searchInput: {
+ flex: '1 1 200px',
+ minWidth: '200px',
+ padding: '10px 14px',
+ borderRadius: '10px',
+ border: '1px solid rgba(255,255,255,0.1)',
+ background: 'rgba(255,255,255,0.03)',
+ color: '#ffffff',
+ fontSize: '14px',
+ fontFamily: "'Satoshi', sans-serif",
+ outline: 'none',
+ },
+ numberInput: {
+ width: '70px',
+ padding: '10px 8px',
+ borderRadius: '10px',
+ border: '1px solid rgba(255,255,255,0.1)',
+ background: 'rgba(255,255,255,0.03)',
+ color: '#ffffff',
+ fontSize: '14px',
+ fontFamily: "'Satoshi', sans-serif",
+ outline: 'none',
+ textAlign: 'center' as const,
+ },
+ select: {
+ padding: '10px 14px',
+ borderRadius: '10px',
+ border: '1px solid rgba(255,255,255,0.1)',
+ background: 'rgba(255,255,255,0.05)',
+ color: '#ffffff',
+ fontSize: '14px',
+ fontFamily: "'Satoshi', sans-serif",
+ outline: 'none',
+ cursor: 'pointer',
+ },
+ toggleBtn: (active: boolean) => ({
+ padding: '10px 16px',
+ borderRadius: '10px',
+ border: active ? '1px solid rgba(168,85,247,0.4)' : '1px solid rgba(255,255,255,0.1)',
+ background: active ? 'rgba(168,85,247,0.15)' : 'rgba(255,255,255,0.03)',
+ color: active ? '#c084fc' : 'rgba(255,255,255,0.6)',
+ fontSize: '13px',
+ fontWeight: 600,
+ fontFamily: "'Satoshi', sans-serif",
+ cursor: 'pointer',
+ transition: 'all 0.2s',
+ whiteSpace: 'nowrap' as const,
+ }),
+ clearBtn: {
+ padding: '10px 14px',
+ borderRadius: '10px',
+ border: '1px solid rgba(239,68,68,0.2)',
+ background: 'rgba(239,68,68,0.08)',
+ color: '#f87171',
+ fontSize: '13px',
+ fontWeight: 600,
+ fontFamily: "'Satoshi', sans-serif",
+ cursor: 'pointer',
+ whiteSpace: 'nowrap' as const,
+ },
+ filterLabel: {
+ fontSize: '12px',
+ color: 'rgba(255,255,255,0.4)',
+ fontFamily: "'Satoshi', sans-serif",
+ whiteSpace: 'nowrap' as const,
+ },
+
+ // Sort bar
+ sortBar: {
+ display: 'flex',
+ gap: '8px',
+ marginBottom: '20px',
+ alignItems: 'center',
+ },
+ sortLabel: {
+ fontSize: '13px',
+ color: 'rgba(255,255,255,0.4)',
+ fontFamily: "'Satoshi', sans-serif",
+ marginRight: '4px',
+ },
+ sortBtn: (active: boolean) => ({
+ padding: '6px 14px',
+ borderRadius: '8px',
+ border: 'none',
+ background: active ? 'rgba(255,255,255,0.1)' : 'transparent',
+ color: active ? '#ffffff' : 'rgba(255,255,255,0.5)',
+ fontSize: '13px',
+ fontWeight: active ? 600 : 400,
+ fontFamily: "'Satoshi', sans-serif",
+ cursor: 'pointer',
+ transition: 'all 0.2s',
+ }),
+
+ // Grid
+ profileGrid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
+ gap: '16px',
+ },
+ cardWrapper: {
+ position: 'relative' as const,
+ },
+ scoreBadge: {
+ position: 'absolute' as const,
+ bottom: '-8px',
+ left: '50%',
+ transform: 'translateX(-50%)',
+ padding: '4px 14px',
+ borderRadius: '12px',
+ background: 'linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%)',
+ color: '#ffffff',
+ fontSize: '13px',
+ fontWeight: 700,
+ fontFamily: "'Satoshi', sans-serif",
+ boxShadow: '0 2px 8px rgba(124,58,237,0.4)',
+ zIndex: 10,
+ cursor: 'default',
+ whiteSpace: 'nowrap' as const,
+ },
+ scoreTooltip: {
+ position: 'absolute' as const,
+ bottom: '32px',
+ left: '50%',
+ transform: 'translateX(-50%)',
+ padding: '10px 14px',
+ borderRadius: '10px',
+ background: 'rgba(15,15,20,0.95)',
+ border: '1px solid rgba(255,255,255,0.1)',
+ color: '#ffffff',
+ fontSize: '12px',
+ fontFamily: "'Satoshi', sans-serif",
+ zIndex: 20,
+ whiteSpace: 'nowrap' as const,
+ boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
+ },
+ tooltipRow: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ gap: '16px',
+ padding: '2px 0',
+ },
+ tooltipLabel: {
+ color: 'rgba(255,255,255,0.6)',
+ },
+ tooltipValue: {
+ color: '#a78bfa',
+ fontWeight: 600,
+ },
+
+ // Load more
+ loadMoreBtn: {
+ display: 'block',
+ margin: '32px auto 0',
+ padding: '14px 32px',
+ borderRadius: '14px',
+ border: '1px solid rgba(255,255,255,0.1)',
+ background: 'rgba(255,255,255,0.03)',
+ color: '#ffffff',
+ fontSize: '15px',
+ fontWeight: 600,
+ fontFamily: "'Satoshi', sans-serif",
+ cursor: 'pointer',
+ transition: 'all 0.2s',
+ },
+
+ // Empty state
+ emptyState: {
+ display: 'flex',
+ flexDirection: 'column' as const,
+ alignItems: 'center',
+ justifyContent: 'center',
+ padding: '80px 20px',
+ },
+ emptyIcon: {
+ width: '80px',
+ height: '80px',
+ borderRadius: '50%',
+ background: 'linear-gradient(135deg, rgba(168,85,247,0.15) 0%, rgba(168,85,247,0.05) 100%)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ marginBottom: '24px',
+ fontSize: '32px',
+ },
+ emptyTitle: {
+ fontFamily: "'Clash Display', sans-serif",
+ fontSize: '22px',
+ fontWeight: 600,
+ color: '#ffffff',
+ marginBottom: '8px',
+ textAlign: 'center' as const,
+ },
+ emptyText: {
+ fontFamily: "'Satoshi', sans-serif",
+ fontSize: '15px',
+ color: 'rgba(255,255,255,0.5)',
+ textAlign: 'center' as const,
+ maxWidth: '320px',
+ },
+
+ // Settings panel
+ settingsPanel: {
+ marginBottom: '24px',
+ padding: '20px',
+ borderRadius: '14px',
+ background: 'rgba(255,255,255,0.02)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ },
+ settingsHeader: {
+ display: 'flex',
+ justifyContent: 'space-between',
+ alignItems: 'center',
+ marginBottom: '16px',
+ },
+ settingsTitle: {
+ fontFamily: "'Clash Display', sans-serif",
+ fontSize: '18px',
+ fontWeight: 600,
+ color: '#ffffff',
+ },
+ weightRow: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+ marginBottom: '8px',
+ },
+ weightLabel: {
+ flex: '0 0 160px',
+ fontSize: '13px',
+ color: 'rgba(255,255,255,0.6)',
+ fontFamily: "'Satoshi', sans-serif",
+ },
+ weightSlider: {
+ flex: 1,
+ accentColor: '#7c3aed',
+ },
+ weightValue: {
+ flex: '0 0 36px',
+ fontSize: '13px',
+ color: '#a78bfa',
+ fontWeight: 600,
+ fontFamily: "'Satoshi', sans-serif",
+ textAlign: 'right' as const,
+ },
+
+ // Loading
+ loadingContainer: {
+ display: 'flex',
+ justifyContent: 'center',
+ padding: '60px 20px',
+ color: 'rgba(255,255,255,0.5)',
+ fontFamily: "'Satoshi', sans-serif",
+ fontSize: '15px',
+ },
+
+ // Gender pills
+ genderPills: {
+ display: 'flex',
+ gap: '6px',
+ },
+
+ // Mode toggle
+ modeToggleBar: {
+ display: 'flex',
+ gap: '4px',
+ marginBottom: '20px',
+ padding: '4px',
+ borderRadius: '12px',
+ background: 'rgba(255,255,255,0.03)',
+ border: '1px solid rgba(255,255,255,0.06)',
+ width: 'fit-content',
+ },
+ modeBtn: (active: boolean) => ({
+ padding: '8px 20px',
+ borderRadius: '10px',
+ border: 'none',
+ background: active ? 'rgba(124,58,237,0.2)' : 'transparent',
+ color: active ? '#c084fc' : 'rgba(255,255,255,0.5)',
+ fontSize: '14px',
+ fontWeight: active ? 600 : 400,
+ fontFamily: "'Satoshi', sans-serif",
+ cursor: 'pointer',
+ transition: 'all 0.2s',
+ }),
+
+ // API Matches section
+ sectionTitle: {
+ fontFamily: "'Clash Display', sans-serif",
+ fontSize: '20px',
+ fontWeight: 600,
+ color: '#ffffff',
+ margin: '0 0 16px 0',
+ },
+ sectionSubtitle: {
+ fontFamily: "'Satoshi', sans-serif",
+ fontSize: '13px',
+ color: 'rgba(255,255,255,0.4)',
+ margin: '-12px 0 16px 0',
+ },
+ sectionDivider: {
+ margin: '32px 0',
+ border: 'none',
+ borderTop: '1px solid rgba(255,255,255,0.06)',
+ },
+ messageBtn: {
+ display: 'inline-flex',
+ alignItems: 'center',
+ gap: '6px',
+ marginTop: '8px',
+ padding: '6px 14px',
+ borderRadius: '8px',
+ border: '1px solid rgba(168,85,247,0.3)',
+ background: 'rgba(168,85,247,0.1)',
+ color: '#c084fc',
+ fontSize: '12px',
+ fontWeight: 600,
+ fontFamily: "'Satoshi', sans-serif",
+ cursor: 'pointer',
+ transition: 'all 0.2s',
+ },
+ matchCardWrapper: {
+ position: 'relative' as const,
+ },
+ chatStatusBadge: {
+ position: 'absolute' as const,
+ bottom: '-8px',
+ left: '50%',
+ transform: 'translateX(-50%)',
+ padding: '4px 14px',
+ borderRadius: '12px',
+ background: 'linear-gradient(135deg, #059669 0%, #047857 100%)',
+ color: '#ffffff',
+ fontSize: '12px',
+ fontWeight: 600,
+ fontFamily: "'Satoshi', sans-serif",
+ boxShadow: '0 2px 8px rgba(5,150,105,0.4)',
+ zIndex: 10,
+ whiteSpace: 'nowrap' as const,
+ },
+};
+
+const GENDER_OPTIONS = ['WOMAN', 'MAN', 'NON_BINARY'];
+const DISTANCE_OPTIONS = [
+ { label: '15mi', value: 15 },
+ { label: '30mi', value: 30 },
+ { label: '50mi', value: 50 },
+ { label: '100mi', value: 100 },
+ { label: 'Any', value: 0 },
+];
+
+const WEIGHT_LABELS: Record
= {
+ verification: 'Verified profile',
+ photoBase: 'Per photo (max 6)',
+ photoVerified: 'Per verified photo',
+ bioLong: 'Bio > 200 chars',
+ bioMedium: 'Bio > 100 chars',
+ bioShort: 'Bio > 30 chars',
+ desiresMany: 'Desires >= 5',
+ desiresSome: 'Desires >= 3',
+ connectionGoals: 'Has goals',
+ distanceClose: 'Within 15mi',
+ distanceMedium: 'Within 30mi',
+ distanceFar: 'Within 50mi',
+ ageSweetSpot: 'Age 24-40',
+ ageOk: 'Age 21-45',
+ ageOutOfRange: 'Age out of range',
+ theyLikedYou: 'They liked you',
+ connectionDesires: 'Connection desires',
+};
+
+const BREAKDOWN_LABELS: Record = {
+ verification: 'Verified',
+ photos: 'Photos',
+ verifiedPhotos: 'Verified photos',
+ bio: 'Bio quality',
+ desires: 'Desires',
+ connectionGoals: 'Goals',
+ distance: 'Distance',
+ age: 'Age',
+ theyLikedYou: 'They liked you',
+ connectionDesires: 'Connection',
+};
+
+export function MatchesPage() {
+ const {
+ matches, total, loading, filters, setFilters,
+ fetchMatches, loadMore, removeMatch, hasMore,
+ weights, updateWeights,
+ } = useMatches();
+
+ const navigate = useNavigate();
+ const [matchMode, setMatchMode] = useState<'smart' | 'api'>('smart');
+
+ // API Matches queries (only run when in 'api' mode)
+ const { data: matchesData, loading: matchesLoading, refetch: refetchMatches } = useQuery(PROFILE_MATCHES_QUERY, {
+ variables: { profileId: authManager.getProfileId(), limit: 25 },
+ skip: matchMode !== 'api',
+ fetchPolicy: 'cache-and-network',
+ });
+
+ const { data: connectionsData, loading: connectionsLoading, refetch: refetchConnections } = useQuery(GET_PROFILE_CONNECTIONS_QUERY, {
+ variables: { limit: 25 },
+ skip: matchMode !== 'api',
+ fetchPolicy: 'cache-and-network',
+ });
+
+ const apiMatches = matchesData?.profile?.matches?.nodes || [];
+ const apiMatchesPageInfo = matchesData?.profile?.matches?.pageInfo;
+ const apiConnections = connectionsData?.connections?.nodes || [];
+ const apiConnectionsPageInfo = connectionsData?.connections?.pageInfo;
+
+ const [selectedProfileId, setSelectedProfileId] = useState(null);
+ const [hoveredScore, setHoveredScore] = useState(null);
+ const [showSettings, setShowSettings] = useState(false);
+ const [localWeights, setLocalWeights] = useState(null);
+ const [refreshedPhotos, setRefreshedPhotos] = useState>({});
+ const refreshedIdsRef = useRef>(new Set());
+ const refreshQueueRef = useRef>(new Set());
+ const isProcessingRef = useRef(false);
+
+ // Process the refresh queue one at a time
+ const processRefreshQueue = useCallback(async () => {
+ if (isProcessingRef.current) return;
+ isProcessingRef.current = true;
+
+ while (refreshQueueRef.current.size > 0) {
+ const profileId = refreshQueueRef.current.values().next().value!;
+ refreshQueueRef.current.delete(profileId);
+
+ try {
+ const result = await apolloClient.query({
+ query: PROFILE_QUERY,
+ variables: { profileId },
+ fetchPolicy: 'network-only',
+ });
+ const fresh = result.data?.profile;
+ if (fresh?.photos?.length) {
+ setRefreshedPhotos(prev => ({ ...prev, [profileId]: fresh.photos }));
+ fetch('/api/discovered-profiles/update-photos', {
+ method: 'PUT',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ profileId, photos: fresh.photos }),
+ }).catch(() => {});
+ }
+ } catch (e) {
+ // silently skip failed refreshes
+ }
+ await new Promise(r => setTimeout(r, 150));
+ }
+
+ isProcessingRef.current = false;
+ }, []);
+
+ // Queue a profile for photo refresh when it enters the viewport
+ const queueRefresh = useCallback((profileId: string) => {
+ if (refreshedIdsRef.current.has(profileId)) return;
+ refreshedIdsRef.current.add(profileId);
+ refreshQueueRef.current.add(profileId);
+ processRefreshQueue();
+ }, [processRefreshQueue]);
+
+ // IntersectionObserver to detect cards entering viewport
+ const observerRef = useRef(null);
+ useEffect(() => {
+ observerRef.current = new IntersectionObserver(
+ (entries) => {
+ for (const entry of entries) {
+ if (entry.isIntersecting) {
+ const profileId = (entry.target as HTMLElement).dataset.profileId;
+ if (profileId) queueRefresh(profileId);
+ }
+ }
+ },
+ { rootMargin: '200px' }
+ );
+ return () => observerRef.current?.disconnect();
+ }, [queueRefresh]);
+
+ // Ref callback for each card to observe/unobserve
+ const cardRefs = useRef>(new Map());
+ const setCardRef = useCallback((profileId: string, el: HTMLDivElement | null) => {
+ const prev = cardRefs.current.get(profileId);
+ if (prev && observerRef.current) observerRef.current.unobserve(prev);
+ if (el) {
+ cardRefs.current.set(profileId, el);
+ if (observerRef.current) observerRef.current.observe(el);
+ } else {
+ cardRefs.current.delete(profileId);
+ }
+ }, []);
+
+ // Merge refreshed photos into match profiles
+ const displayMatches = useMemo(() => matches.map(m => {
+ const freshPhotos = refreshedPhotos[m.id];
+ return freshPhotos ? { ...m, photos: freshPhotos } : m;
+ }), [matches, refreshedPhotos]);
+
+ const activeFiltersCount = [
+ filters.search, filters.minAge, filters.maxAge,
+ filters.maxDistance, filters.gender,
+ filters.verifiedOnly, filters.theyLikedOnly,
+ ].filter(Boolean).length;
+
+ const handleFilterChange = useCallback((key: keyof MatchFilters, value: any) => {
+ setFilters((prev: MatchFilters) => ({ ...prev, [key]: value || undefined }));
+ }, [setFilters]);
+
+ const clearFilters = useCallback(() => {
+ setFilters({});
+ }, [setFilters]);
+
+ const handleWeightChange = useCallback((key: string, value: number) => {
+ setLocalWeights(prev => ({ ...(prev || weights || {}), [key]: value }));
+ }, [weights]);
+
+ const saveWeights = useCallback(() => {
+ if (localWeights) {
+ updateWeights(localWeights);
+ }
+ }, [localWeights, updateWeights]);
+
+ const resetWeights = useCallback(() => {
+ setLocalWeights(null);
+ updateWeights({});
+ }, [updateWeights]);
+
+ const displayWeights = localWeights || weights || {};
+
+ return (
+
+ {/* Header */}
+
+
{matchMode === 'smart' ? 'Smart Matches' : 'API Matches'}
+
+ {matchMode === 'smart'
+ ? `${total} ranked profiles from your discovery cache`
+ : `${apiMatchesPageInfo?.total ?? apiMatches.length} matches, ${apiConnectionsPageInfo?.total ?? apiConnections.length} connections from Feeld API`}
+
+
+
+ {matchMode === 'smart' && (
+
+ )}
+
+
+
+ {/* Mode Toggle */}
+
+
+
+
+
+ {/* ===== SMART MATCHES MODE ===== */}
+ {matchMode === 'smart' && <>
+
+ {/* Scoring Settings */}
+ {showSettings && (
+
+
+
Scoring Weights
+
+
+
+
+
+ {Object.entries(WEIGHT_LABELS).map(([key, label]) => (
+
+ {label}
+ handleWeightChange(key, parseInt(e.target.value))}
+ style={styles.weightSlider}
+ />
+ {displayWeights[key] ?? 0}
+
+ ))}
+
+ )}
+
+ {/* Filter Bar */}
+
+
handleFilterChange('search', e.target.value)}
+ style={styles.searchInput}
+ />
+
Age
+
handleFilterChange('minAge', e.target.value ? parseInt(e.target.value) : undefined)}
+ style={styles.numberInput}
+ />
+
-
+
handleFilterChange('maxAge', e.target.value ? parseInt(e.target.value) : undefined)}
+ style={styles.numberInput}
+ />
+
+
+ {GENDER_OPTIONS.map(g => {
+ const selected = filters.gender?.split(',').includes(g);
+ return (
+
+ );
+ })}
+
+
+
+ {activeFiltersCount > 0 && (
+
+ )}
+
+
+ {/* Sort Bar */}
+
+ Sort:
+ {(['score', 'distance', 'recent'] as const).map(s => (
+
+ ))}
+
+
+ {/* Loading */}
+ {loading && matches.length === 0 && (
+
Loading matches...
+ )}
+
+ {/* Empty State */}
+ {!loading && matches.length === 0 && (
+
+
+
No matches found
+
+ {activeFiltersCount > 0
+ ? 'Try adjusting your filters to see more profiles.'
+ : 'Scan profiles on the Discover page to build your match pool.'}
+
+
+ )}
+
+ {/* Profile Grid */}
+ {displayMatches.length > 0 && (
+
+ {displayMatches.map((profile, index) => (
+
setCardRef(profile.id, el)}
+ >
+
setSelectedProfileId(profile.id)}
+ index={index}
+ />
+ {/* Score badge */}
+ setHoveredScore(profile.id)}
+ onMouseLeave={() => setHoveredScore(null)}
+ >
+ {profile._score} pts
+ {profile.interactionStatus?.theirs === 'LIKED' && ' \u2764'}
+
+ {/* Score tooltip */}
+ {hoveredScore === profile.id && profile._scoreBreakdown && (
+
+ {Object.entries(profile._scoreBreakdown).map(([key, val]) => (
+
+ {BREAKDOWN_LABELS[key] || key}
+ +{val}
+
+ ))}
+ {Object.keys(profile._scoreBreakdown).length === 0 && (
+
No scoring factors
+ )}
+
+ ))}
+
+ )}
+
+ {/* Load More */}
+ {hasMore && !loading && (
+
+ )}
+ {loading && matches.length > 0 && (
+
Loading more...
+ )}
+
+ }
+
+ {/* ===== API MATCHES MODE ===== */}
+ {matchMode === 'api' && (
+ <>
+ {/* Loading */}
+ {(matchesLoading || connectionsLoading) && apiMatches.length === 0 && apiConnections.length === 0 && (
+
Loading API matches...
+ )}
+
+ {/* Matches Section */}
+ {apiMatches.length > 0 && (
+ <>
+
+ Matches {apiMatchesPageInfo?.total != null && `(${apiMatchesPageInfo.total})`}
+
+
+ {apiMatches.map((node: any, index: number) => (
+
+
node.profile?.id && setSelectedProfileId(node.profile.id)}
+ index={index}
+ />
+ {node.chat?.streamChatId && (
+
+ {safeText(node.chat.status) || 'Matched'}
+
+ )}
+ {node.chat?.streamChatId && (
+
+
+
+ )}
+
+ ))}
+
+
+ )}
+
+ {/* Divider between sections */}
+ {apiMatches.length > 0 && apiConnections.length > 0 && (
+
+ )}
+
+ {/* Connections Section */}
+ {apiConnections.length > 0 && (
+ <>
+
+ Connections {apiConnectionsPageInfo?.total != null && `(${apiConnectionsPageInfo.total})`}
+
+
+ {apiConnections.map((profile: any, index: number) => (
+
+
profile.id && setSelectedProfileId(profile.id)}
+ index={index}
+ />
+
+ ))}
+
+
+ )}
+
+ {/* Empty State */}
+ {!matchesLoading && !connectionsLoading && apiMatches.length === 0 && apiConnections.length === 0 && (
+
+
+
No API matches found
+
+ No matches or connections returned from the Feeld API.
+
+
+ )}
+
+ )}
+
+ {/* Profile Detail Modal */}
+ {selectedProfileId && (
+
setSelectedProfileId(null)}
+ onMatch={() => {
+ removeMatch(selectedProfileId);
+ setSelectedProfileId(null);
+ }}
+ />
+ )}
+
{/* Header */}
-
-
- Messages
-
-
- {chats.length} {chats.length === 1 ? 'conversation' : 'conversations'}
-
+
+
+
+ Messages
+
+
+ {chats.length} {chats.length === 1 ? 'conversation' : 'conversations'}
+
+
+
{/* Chat List */}
@@ -95,7 +158,7 @@ export function MessagesPage() {
style={{ animationDelay: `${(index + 1) * 30}ms` }}
>
{
const params = new URLSearchParams();
if (chat.name) params.set('name', chat.name);
diff --git a/web/src/pages/OkCupid.tsx b/web/src/pages/OkCupid.tsx
new file mode 100644
index 0000000..7495ed5
--- /dev/null
+++ b/web/src/pages/OkCupid.tsx
@@ -0,0 +1,1376 @@
+import { useState, useEffect, useCallback } from 'react';
+import {
+ getOkcToken, setOkcToken,
+ getMainSession, getStacks, getStack, getStackMatches,
+ getLikesIncoming, getRealLikesCount, getNotifications, getLikesCapInfo,
+ getMessages, getConversation, sendMessage,
+ vote, getProfile,
+} from '../api/okcupid';
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const safeText = (v: any): string => {
+ if (v == null) return '';
+ if (typeof v === 'string') return v;
+ if (typeof v === 'number' || typeof v === 'boolean') return String(v);
+ return '';
+};
+
+function timeAgo(ms: number): string {
+ if (!ms) return '';
+ const diff = Date.now() - ms;
+ const mins = Math.floor(diff / 60000);
+ if (mins < 1) return 'just now';
+ if (mins < 60) return `${mins}m ago`;
+ const hrs = Math.floor(mins / 60);
+ if (hrs < 24) return `${hrs}h ago`;
+ const days = Math.floor(hrs / 24);
+ return `${days}d ago`;
+}
+
+// ─── OKC Detail Enums ────────────────────────────────────────────────────────
+
+const BODY_TYPES: Record = { 1: 'Thin', 2: 'Overweight', 3: 'Skinny', 4: 'Average', 5: 'Fit', 6: 'Athletic', 7: 'Jacked', 8: 'A little extra', 9: 'Curvy', 10: 'Full-figured', 11: 'Rather not say', 20: 'Used up' };
+const REL_STATUS: Record = { 1: 'Single', 2: 'Seeing Someone', 3: 'Married', 4: "It's Complicated" };
+const REL_TYPE: Record = { 1: 'Monogamous', 2: 'Non-monogamous', 3: 'Open to either' };
+const DRINKING: Record = { 1: 'Very often', 2: 'Often', 3: 'Sometimes', 4: 'Rarely', 5: 'Never', 6: 'Desperately' };
+const SMOKING: Record = { 1: 'Yes', 2: 'Sometimes', 3: 'When drinking', 4: 'Trying to quit', 5: 'No' };
+const CHILDREN: Record = { 1: "Doesn't have kids", 2: 'Has kid(s)', 3: "Doesn't have kids, wants them", 4: "Has kid(s), wants more", 5: "Doesn't have kids, doesn't want", 6: "Has kid(s), doesn't want more", 7: "Doesn't have kids, might want", 8: "Has kid(s), might want more" };
+const POLITICS: Record = { 1: 'Liberal', 2: 'Moderate', 3: 'Conservative', 4: 'Other', 5: 'Apolitical' };
+const RELIGION_VAL: Record = { 1: 'Agnosticism', 2: 'Atheism', 3: 'Christianity', 4: 'Judaism', 5: 'Catholicism', 6: 'Islam', 7: 'Hinduism', 8: 'Buddhism', 9: 'Sikh', 10: 'Other' };
+const WEED: Record = { 14: 'Yes', 15: 'Sometimes', 16: 'Never' };
+const GENDERS: Record = { 0: 'Woman', 1: 'Man', 2: 'Agender', 3: 'Androgynous', 4: 'Bigender', 5: 'Cis Man', 6: 'Cis Woman', 7: 'Genderfluid', 8: 'Genderqueer', 9: 'Gender Nonconforming', 10: 'Hijra', 11: 'Intersex', 12: 'Non-binary', 13: 'Other', 14: 'Pangender', 15: 'Transfeminine', 16: 'Transgender', 17: 'Transmasculine', 18: 'Transsexual', 19: 'Trans Man', 20: 'Trans Woman', 21: 'Two Spirit' };
+const ORIENTATIONS: Record = { 1: 'Straight', 2: 'Bisexual', 3: 'Gay', 4: 'Lesbian', 5: 'Pansexual', 6: 'Queer', 7: 'Questioning', 8: 'Asexual', 9: 'Demisexual', 10: 'Heteroflexible', 11: 'Homoflexible', 12: 'Sapiosexual' };
+
+// ─── Profile Detail Modal ────────────────────────────────────────────────────
+
+function OkcProfileModal({ userId, stream, onClose, onVote }: { userId: string; stream?: string; onClose: () => void; onVote?: (id: string, type: string) => void }) {
+ const [profile, setProfile] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+ const [photoIdx, setPhotoIdx] = useState(0);
+ const [voting, setVoting] = useState(false);
+
+ useEffect(() => {
+ setLoading(true);
+ setError('');
+ setPhotoIdx(0);
+ getProfile(userId).then(data => {
+ setProfile(data);
+ }).catch(e => setError(e.message)).finally(() => setLoading(false));
+ }, [userId]);
+
+ const match = profile?.me?.match;
+ const user = match?.user;
+ const photos = user?.photos || [];
+ const essays = user?.essaysWithUniqueIds?.filter((e: any) => e.rawContent) || [];
+ const thread = profile?.me?.conversationThread;
+
+ const handleVote = async (type: string) => {
+ if (voting) return;
+ setVoting(true);
+ try {
+ if (onVote) onVote(userId, type);
+ await vote(userId, type, stream);
+ onClose();
+ } catch (e: any) {
+ setError(e.message);
+ } finally {
+ setVoting(false);
+ }
+ };
+
+ const detailItems: Array<{ label: string; value: string }> = [];
+ if (user) {
+ if (user.genders?.length) detailItems.push({ label: 'Gender', value: user.genders.map((g: number) => GENDERS[g] || g).join(', ') });
+ if (user.orientations?.length) detailItems.push({ label: 'Orientation', value: user.orientations.map((o: number) => ORIENTATIONS[o] || o).join(', ') });
+ if (user.pronounCategory) detailItems.push({ label: 'Pronouns', value: safeText(user.pronounCategory) });
+ if (user.height) detailItems.push({ label: 'Height', value: `${Math.floor(user.height / 2.54 / 12)}'${Math.round(user.height / 2.54 % 12)}"` });
+ if (user.bodyType) detailItems.push({ label: 'Body', value: BODY_TYPES[user.bodyType] || String(user.bodyType) });
+ if (user.relationshipStatus) detailItems.push({ label: 'Status', value: REL_STATUS[user.relationshipStatus] || String(user.relationshipStatus) });
+ if (user.relationshipType) detailItems.push({ label: 'Relationship', value: REL_TYPE[user.relationshipType] || String(user.relationshipType) });
+ if (user.children) detailItems.push({ label: 'Children', value: CHILDREN[user.children] || String(user.children) });
+ if (user.drinking) detailItems.push({ label: 'Drinking', value: DRINKING[user.drinking] || String(user.drinking) });
+ if (user.smoking) detailItems.push({ label: 'Smoking', value: SMOKING[user.smoking] || String(user.smoking) });
+ if (user.weed) detailItems.push({ label: 'Weed', value: WEED[user.weed] || String(user.weed) });
+ if (user.politics) detailItems.push({ label: 'Politics', value: POLITICS[user.politics] || String(user.politics) });
+ if (user.religion?.value) detailItems.push({ label: 'Religion', value: RELIGION_VAL[user.religion.value] || String(user.religion.value) });
+ if (user.diet) detailItems.push({ label: 'Diet', value: safeText(user.diet) });
+ if (user.pets?.length) detailItems.push({ label: 'Pets', value: user.pets.map(safeText).join(', ') });
+ if (user.knownLanguages?.length) detailItems.push({ label: 'Languages', value: user.knownLanguages.map(safeText).join(', ') });
+ if (user.education?.level || user.education?.school?.name) detailItems.push({ label: 'Education', value: [user.education.school?.name, user.education.level].filter(Boolean).map(safeText).join(' — ') });
+ if (user.occupation?.title || user.occupation?.employer) detailItems.push({ label: 'Work', value: [user.occupation.title, user.occupation.employer].filter(Boolean).map(safeText).join(' at ') });
+ if (user.badges?.length) detailItems.push({ label: 'Badges', value: user.badges.map((b: any) => safeText(b.name)).join(', ') });
+ }
+
+ return (
+
+
e.stopPropagation()} style={{
+ width: '100%', maxWidth: '480px', maxHeight: '92dvh',
+ background: 'var(--color-deep, #1a1a1e)',
+ borderRadius: '20px 20px 0 0',
+ overflow: 'hidden',
+ display: 'flex', flexDirection: 'column',
+ }}>
+ {/* Drag handle */}
+
+
+ {loading ? (
+
Loading profile...
+ ) : error ? (
+
{error}
+ ) : !user ? (
+
Profile not found
+ ) : (
+ <>
+ {/* Scrollable content */}
+
+ {/* Photo carousel */}
+ {photos.length > 0 && (
+
+
+ {/* Photo dots */}
+ {photos.length > 1 && (
+
+ {photos.map((_: any, idx: number) => (
+
+ )}
+ {/* Prev/Next tap zones */}
+ {photos.length > 1 && (
+ <>
+
setPhotoIdx(i => Math.max(0, i - 1))} style={{ position: 'absolute', inset: '0 50% 0 0', cursor: 'pointer' }} />
+
setPhotoIdx(i => Math.min(photos.length - 1, i + 1))} style={{ position: 'absolute', inset: '0 0 0 50%', cursor: 'pointer' }} />
+
+ )}
+ {/* Photo counter */}
+
+ {photoIdx + 1}/{photos.length}
+
+ {/* Match badge */}
+ {match?.matchPercent && (
+
+ {match.matchPercent}% Match
+
+ )}
+
+ )}
+
+ {/* Name, age, location */}
+
+
+
{safeText(user.displayname)}
+
{safeText(user.age)}
+ {user.isOnline &&
}
+ {user.selfieVerifiedStatus === 'VERIFIED' && (
+
+ )}
+
+ {user.userLocation?.publicName && (
+
+
+ {Array.isArray(user.userLocation.publicName) ? user.userLocation.publicName.join(', ') : safeText(user.userLocation.publicName)}
+
+ )}
+
+
+ {/* Match info bar */}
+ {match && (
+
+ {match.targetLikes && (
+ Likes You
+ )}
+ {match.targetLikeViaSpotlight && (
+ Via Spotlight
+ )}
+ {match.targetLikeViaSuperBoost && (
+ Via SuperBoost
+ )}
+ {match.senderVote === 'LIKE' && (
+ You Liked
+ )}
+
+ )}
+
+ {/* Details grid */}
+ {detailItems.length > 0 && (
+
+
+ {detailItems.map(d => (
+
+
{d.label}
+
{d.value}
+
+ ))}
+
+
+ )}
+
+ {/* Essays / Prompts */}
+ {essays.length > 0 && (
+
+ {essays.map((e: any) => (
+
+
{safeText(e.title || e.groupTitle)}
+
{safeText(e.rawContent || e.processedContent)}
+
+ ))}
+
+ )}
+
+ {/* Existing messages */}
+ {thread?.messages?.length > 0 && (
+
+
Messages
+ {thread.messages.map((m: any) => (
+
+ {safeText(m.text)}
+
+ ))}
+
+ )}
+
+ {/* Bottom padding for actions */}
+
+
+
+ {/* Fixed bottom actions */}
+
+
+
+
+
+
+ )}
+
+
+ );
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const S = {
+ page: {
+ minHeight: '100vh',
+ background: 'var(--color-void, #0f0f14)',
+ color: '#fff',
+ fontFamily: 'var(--font-body, system-ui)',
+ } as React.CSSProperties,
+ header: {
+ padding: '20px 24px 0',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '12px',
+ } as React.CSSProperties,
+ logo: {
+ width: '36px',
+ height: '36px',
+ borderRadius: '10px',
+ background: 'linear-gradient(135deg, #e64980, #d946ef)',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ fontWeight: 800,
+ fontSize: '14px',
+ color: '#fff',
+ fontFamily: 'var(--font-display, system-ui)',
+ flexShrink: 0,
+ } as React.CSSProperties,
+ title: {
+ fontFamily: 'var(--font-display, system-ui)',
+ fontSize: '22px',
+ fontWeight: 700,
+ color: '#fff',
+ } as React.CSSProperties,
+ tabs: {
+ display: 'flex',
+ gap: '2px',
+ padding: '16px 24px 0',
+ borderBottom: '1px solid rgba(255,255,255,0.06)',
+ } as React.CSSProperties,
+ tab: (active: boolean) => ({
+ padding: '10px 18px',
+ fontSize: '14px',
+ fontWeight: active ? 600 : 500,
+ color: active ? '#e64980' : 'rgba(255,255,255,0.5)',
+ background: active ? 'rgba(230,73,128,0.1)' : 'transparent',
+ border: 'none',
+ borderBottom: active ? '2px solid #e64980' : '2px solid transparent',
+ borderRadius: '8px 8px 0 0',
+ cursor: 'pointer',
+ transition: 'all 200ms',
+ fontFamily: 'var(--font-body, system-ui)',
+ }) as React.CSSProperties,
+ content: {
+ padding: '20px 24px',
+ paddingBottom: '100px',
+ } as React.CSSProperties,
+ card: {
+ position: 'relative' as const,
+ borderRadius: '16px',
+ overflow: 'hidden',
+ cursor: 'pointer',
+ background: 'var(--color-surface, #1E1E22)',
+ border: '1px solid rgba(255,255,255,0.04)',
+ } as React.CSSProperties,
+ cardPhoto: {
+ width: '100%',
+ aspectRatio: '3/4',
+ objectFit: 'cover' as const,
+ display: 'block',
+ background: 'rgba(255,255,255,0.04)',
+ } as React.CSSProperties,
+ cardGradient: {
+ position: 'absolute' as const,
+ inset: 0,
+ background: 'linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,0.6) 75%, rgba(0,0,0,0.92) 100%)',
+ pointerEvents: 'none' as const,
+ } as React.CSSProperties,
+ cardInfo: {
+ position: 'absolute' as const,
+ bottom: 0,
+ left: 0,
+ right: 0,
+ padding: '16px',
+ } as React.CSSProperties,
+ cardRow: {
+ display: 'flex',
+ gap: '14px',
+ alignItems: 'center',
+ } as React.CSSProperties,
+ avatar: {
+ width: '56px',
+ height: '56px',
+ borderRadius: '14px',
+ objectFit: 'cover' as const,
+ background: 'rgba(255,255,255,0.06)',
+ flexShrink: 0,
+ } as React.CSSProperties,
+ avatarLg: {
+ width: '100%',
+ maxWidth: '360px',
+ aspectRatio: '1',
+ borderRadius: '16px',
+ objectFit: 'cover' as const,
+ background: 'rgba(255,255,255,0.06)',
+ } as React.CSSProperties,
+ name: {
+ fontWeight: 600,
+ fontSize: '18px',
+ fontFamily: 'var(--font-display, system-ui)',
+ color: '#fff',
+ letterSpacing: '-0.01em',
+ } as React.CSSProperties,
+ sub: {
+ fontSize: '12px',
+ color: 'rgba(255,255,255,0.6)',
+ marginTop: '2px',
+ } as React.CSSProperties,
+ badge: {
+ display: 'inline-block',
+ padding: '3px 10px',
+ borderRadius: '20px',
+ fontSize: '11px',
+ fontWeight: 600,
+ background: 'rgba(230,73,128,0.25)',
+ color: '#f4a5b0',
+ marginLeft: '8px',
+ } as React.CSSProperties,
+ cardActions: {
+ position: 'absolute' as const,
+ bottom: '12px',
+ right: '12px',
+ display: 'flex',
+ gap: '8px',
+ zIndex: 10,
+ } as React.CSSProperties,
+ cardActionBtn: (variant: 'like' | 'pass') => ({
+ width: '44px',
+ height: '44px',
+ borderRadius: '50%',
+ border: 'none',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'center',
+ cursor: 'pointer',
+ backdropFilter: 'blur(8px)',
+ transition: 'all 200ms',
+ background: variant === 'like' ? 'rgba(34,197,94,0.8)' : 'rgba(100,116,139,0.7)',
+ color: '#fff',
+ boxShadow: '0 2px 8px rgba(0,0,0,0.3)',
+ }) as React.CSSProperties,
+ matchBadge: {
+ position: 'absolute' as const,
+ top: '10px',
+ left: '10px',
+ zIndex: 10,
+ padding: '4px 10px',
+ borderRadius: '20px',
+ fontSize: '11px',
+ fontWeight: 600,
+ background: 'rgba(230,73,128,0.85)',
+ color: '#fff',
+ backdropFilter: 'blur(8px)',
+ } as React.CSSProperties,
+ likesBadge: {
+ position: 'absolute' as const,
+ top: '10px',
+ left: '10px',
+ zIndex: 10,
+ padding: '4px 10px',
+ borderRadius: '20px',
+ fontSize: '11px',
+ fontWeight: 600,
+ background: 'rgba(34,197,94,0.85)',
+ color: '#fff',
+ backdropFilter: 'blur(8px)',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '4px',
+ } as React.CSSProperties,
+ btn: (variant: 'primary' | 'secondary' | 'danger') => ({
+ padding: '10px 20px',
+ borderRadius: '12px',
+ border: 'none',
+ fontWeight: 600,
+ fontSize: '14px',
+ cursor: 'pointer',
+ transition: 'all 200ms',
+ fontFamily: 'var(--font-body, system-ui)',
+ ...(variant === 'primary' ? {
+ background: 'linear-gradient(135deg, #e64980, #d946ef)',
+ color: '#fff',
+ } : variant === 'danger' ? {
+ background: 'rgba(239,68,68,0.15)',
+ color: '#ef4444',
+ } : {
+ background: 'rgba(255,255,255,0.08)',
+ color: 'rgba(255,255,255,0.7)',
+ }),
+ }) as React.CSSProperties,
+ empty: {
+ textAlign: 'center' as const,
+ padding: '40px 20px',
+ color: 'rgba(255,255,255,0.3)',
+ fontSize: '15px',
+ } as React.CSSProperties,
+ error: {
+ padding: '16px',
+ borderRadius: '12px',
+ background: 'rgba(239,68,68,0.1)',
+ border: '1px solid rgba(239,68,68,0.2)',
+ color: '#ef4444',
+ fontSize: '14px',
+ marginBottom: '16px',
+ } as React.CSSProperties,
+ loading: {
+ textAlign: 'center' as const,
+ padding: '40px',
+ color: 'rgba(255,255,255,0.4)',
+ fontSize: '14px',
+ } as React.CSSProperties,
+ grid: {
+ display: 'grid',
+ gridTemplateColumns: 'repeat(auto-fill, minmax(160px, 1fr))',
+ gap: '12px',
+ } as React.CSSProperties,
+ input: {
+ width: '100%',
+ padding: '12px 16px',
+ borderRadius: '12px',
+ border: '1px solid rgba(255,255,255,0.1)',
+ background: 'rgba(255,255,255,0.04)',
+ color: '#fff',
+ fontSize: '14px',
+ fontFamily: 'var(--font-body, system-ui)',
+ outline: 'none',
+ boxSizing: 'border-box' as const,
+ } as React.CSSProperties,
+ msgBubble: (isMine: boolean) => ({
+ maxWidth: '75%',
+ padding: '10px 14px',
+ borderRadius: '14px',
+ fontSize: '14px',
+ lineHeight: '1.45',
+ marginBottom: '6px',
+ alignSelf: isMine ? 'flex-end' : 'flex-start',
+ background: isMine ? 'linear-gradient(135deg, #e64980, #d946ef)' : 'rgba(255,255,255,0.08)',
+ color: '#fff',
+ }) as React.CSSProperties,
+ stackChip: (active: boolean) => ({
+ padding: '8px 16px',
+ borderRadius: '20px',
+ fontSize: '13px',
+ fontWeight: 600,
+ cursor: 'pointer',
+ border: active ? '1px solid #e64980' : '1px solid rgba(255,255,255,0.1)',
+ background: active ? 'rgba(230,73,128,0.15)' : 'rgba(255,255,255,0.04)',
+ color: active ? '#e64980' : 'rgba(255,255,255,0.6)',
+ whiteSpace: 'nowrap' as const,
+ transition: 'all 200ms',
+ }) as React.CSSProperties,
+ section: {
+ marginBottom: '24px',
+ } as React.CSSProperties,
+ sectionTitle: {
+ fontSize: '13px',
+ fontWeight: 600,
+ color: 'rgba(255,255,255,0.4)',
+ textTransform: 'uppercase' as const,
+ letterSpacing: '0.06em',
+ marginBottom: '12px',
+ } as React.CSSProperties,
+ profileActions: {
+ display: 'flex',
+ gap: '10px',
+ marginTop: '12px',
+ } as React.CSSProperties,
+};
+
+// ─── Discover Tab ────────────────────────────────────────────────────────────
+
+function DiscoverTab() {
+ const [stacks, setStacks] = useState
([]);
+ const [selectedStack, setSelectedStack] = useState('');
+ const [profiles, setProfiles] = useState([]);
+ const [excludedIds, setExcludedIds] = useState([]);
+ const [likesInfo, setLikesInfo] = useState(null);
+ const [loading, setLoading] = useState(true);
+ const [error, setError] = useState('');
+ const [votingId, setVotingId] = useState(null);
+ const [expandedId, setExpandedId] = useState(null);
+ const [selectedProfileId, setSelectedProfileId] = useState(null);
+ const [expandedProfile, setExpandedProfile] = useState(null);
+
+ const loadStacks = useCallback(async () => {
+ try {
+ setLoading(true);
+ setError('');
+ const [stacksData, capData] = await Promise.all([getStacks(), getLikesCapInfo()]);
+ const s = stacksData?.me?.stacks || [];
+ setStacks(s);
+ if (s.length > 0 && !selectedStack) {
+ setSelectedStack(s[0].id);
+ }
+ setLikesInfo(capData?.me?.likesCap);
+ } catch (e: any) {
+ setError(e.message);
+ } finally {
+ setLoading(false);
+ }
+ }, [selectedStack]);
+
+ const [loadingMore, setLoadingMore] = useState(false);
+
+ const loadStack = useCallback(async (stackId: string, append = false) => {
+ if (!stackId) return;
+ try {
+ if (append) setLoadingMore(true); else setLoading(true);
+ setError('');
+ const currentIds = append ? [...excludedIds, ...profiles.map(m => m?.user?.id).filter(Boolean)] : excludedIds;
+ const data = await getStack(stackId, currentIds);
+ const stackData = data?.me?.stack?.data || [];
+ const matches = stackData
+ .filter((d: any) => d.__typename === 'StackMatch' && d.match?.user?.id)
+ .map((d: any) => ({ ...d.match, _stream: d.stream }));
+ if (append) {
+ setProfiles(prev => [...prev, ...matches]);
+ setExcludedIds(currentIds);
+ } else {
+ setProfiles(matches);
+ }
+ } catch (e: any) {
+ setError(e.message);
+ } finally {
+ setLoading(false);
+ setLoadingMore(false);
+ }
+ }, [excludedIds, profiles]);
+
+ useEffect(() => { loadStacks(); }, []);
+ useEffect(() => { if (selectedStack) loadStack(selectedStack); }, [selectedStack]);
+
+ const handleVote = async (targetId: string, type: 'LIKE' | 'PASS') => {
+ try {
+ setVotingId(targetId);
+ const profile = profiles.find(p => p?.user?.id === targetId);
+ const stream = profile?._stream;
+ const result = await vote(targetId, type, stream);
+ setExcludedIds(prev => [...prev, targetId]);
+ setProfiles(prev => prev.filter(p => p?.user?.id !== targetId));
+ if (result?.userVote?.likesRemaining != null) {
+ setLikesInfo((prev: any) => prev ? { ...prev, likesRemaining: result.userVote.likesRemaining } : prev);
+ }
+ } catch (e: any) {
+ setError(e.message);
+ } finally {
+ setVotingId(null);
+ }
+ };
+
+ const handleExpand = async (userId: string) => {
+ if (expandedId === userId) {
+ setExpandedId(null);
+ setExpandedProfile(null);
+ return;
+ }
+ setExpandedId(userId);
+ try {
+ const data = await getProfile(userId);
+ setExpandedProfile(data?.me?.match);
+ } catch {
+ setExpandedProfile(null);
+ }
+ };
+
+ return (
+
+ {error &&
{error}
}
+
+ {likesInfo && (
+
+ Likes remaining
+
+ {safeText(likesInfo.likesRemaining)} / {safeText(likesInfo.likesCapTotal)}
+
+
+ )}
+
+ {stacks.length > 0 && (
+
+ {stacks.map((s: any) => (
+
+ ))}
+
+
+ )}
+
+ {loading ? (
+
Loading profiles...
+ ) : profiles.length === 0 ? (
+
No profiles in this stack. Try another or refresh.
+ ) : (
+
+ {profiles.map((match: any) => {
+ const user = match?.user;
+ if (!user) return null;
+ const photoUrl = user.primaryImage?.square800;
+ return (
+
setSelectedProfileId(user.id)}>
+ {photoUrl ? (
+
+ ) : (
+
+ )}
+
+
+ {match.matchPercent && (
+
{safeText(match.matchPercent)}%
+ )}
+
+ {match.targetLikes && (
+
+ )}
+
+
+
+ {safeText(user.displayname)}
+ {safeText(user.age)}
+
+
{safeText(user.userLocation?.publicName)}
+
+
+
+
+
+
+
+ );
+ })}
+
+ )}
+
+ {profiles.length > 0 && !loading && (
+
+
+
+ )}
+
+ {selectedProfileId && (
+
p?.user?.id === selectedProfileId)?._stream}
+ onClose={() => setSelectedProfileId(null)}
+ onVote={(id, type) => {
+ setProfiles(prev => prev.filter(m => m?.user?.id !== id));
+ setExcludedIds(prev => [...prev, id]);
+ }}
+ />
+ )}
+
+ {error &&
{error}
}
+
+ {notifications && (
+
+
+
{realLikeCount}
+
Real likes
+
+
+
{safeText(notifications.likesIncoming)}
+
Views
+
+
+
{safeText(notifications.likesMutual)}
+
Mutual matches
+
+
+
{safeText(notifications.messages)}
+
Messages
+
+
+ )}
+
+ {loading && likes.length === 0 ? (
+
Loading likes...
+ ) : likes.length === 0 ? (
+
No incoming likes yet.
+ ) : (
+ <>
+
+ {likes.map((item: any, i: number) => {
+ const user = item?.user;
+ const preview = item;
+ const img = user?.primaryImage?.square800 || preview?.primaryImage?.square800 || preview?.primaryImageBlurred?.square800;
+ const highlights = item?.matchHighlights || preview?.matchHighlights;
+ const matchPct = item?.matchPercent || highlights?.matchScore;
+ const location = highlights?.dynamicHighlight?.summary || user?.userLocation?.publicName;
+ const isOnline = user?.isOnline || highlights?.isOnline;
+ const isVerified = highlights?.isVerified;
+ const isSuperlike = item?.targetSuperlikes || preview?.targetSuperlikes;
+ const hasIntro = item?.hasFirstMessage || preview?.hasFirstMessage || highlights?.hasIntroMessage;
+ const viewedMe = item?.targetViewedMe || preview?.targetViewedMe;
+ const age = user?.age || highlights?.age;
+ const displayName = user?.displayname;
+
+ // OKC puts real likes first, views after
+ const isRealLike = i < realLikeCount;
+ const isJustViewed = !isRealLike;
+
+ return (
+
user?.id && setSelectedProfileId(user.id)}>
+ {img ? (
+
+ ) : (
+
+ )}
+
+
+ {/* Top-left badges */}
+
+ {isRealLike && (
+
+ )}
+ {isJustViewed && (
+
+ Viewed
+
+ )}
+ {matchPct &&
{safeText(matchPct)}% Match
}
+ {isSuperlike && (
+
+ ★SuperLike
+
+ )}
+
+
+ {/* Top-right badges */}
+
+ {isVerified && (
+
+ )}
+ {isOnline && (
+
+ )}
+
+
+ {/* Bottom info */}
+
+
+ {displayName ? safeText(displayName) : 'Hidden'}
+ {age && {safeText(age)}}
+
+
+ {location && (
+
+
+ {safeText(location)}
+
+ )}
+
+ {/* Status tags */}
+
+ {hasIntro && (
+
+ Intro
+
+ )}
+ {viewedMe && (
+
+ Viewed
+
+ )}
+
+
+ {item?.firstMessage && (
+
+ "{safeText(item.firstMessage.text)}"
+
+ )}
+
+
+ );
+ })}
+
+ {pageInfo?.hasMore && (
+
+
+
+ )}
+
+ )}
+
+ {selectedProfileId && (
+
setSelectedProfileId(null)}
+ />
+ )}
+
+
+
+ {corrUser?.primaryImage?.square225 && (
+
+ )}
+
{safeText(corrUser?.displayname)}
+
+
+ {error &&
{error}
}
+
+ {convoLoading ? (
+
Loading messages...
+ ) : (
+
+ {messages.map((msg: any) => {
+ const isMine = msg.senderId === myId;
+ return (
+
+
{safeText(msg.text)}
+
+ {timeAgo(msg.time)}
+
+
+ );
+ })}
+
+ )}
+
+
+ setMsgText(e.target.value)}
+ onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); handleSend(); } }}
+ />
+
+
+
+ {error &&
{error}
}
+
+ {loading ? (
+
Loading conversations...
+ ) : conversations.length === 0 ? (
+
No conversations yet.
+ ) : (
+ conversations.map((item: any, i: number) => {
+ const isConvo = item.__typename === 'Conversation';
+ const isMutual = item.__typename === 'MutualMatch';
+ const correspondent = isConvo ? item.correspondent : isMutual ? item.match : null;
+ const user = correspondent?.user;
+ if (!user) return null;
+ return (
+
openConvo(user.id, correspondent)}
+ >
+
+ {user.primaryImage?.square225 && (
+
+ )}
+
+
+
+ {safeText(user.displayname)}
+ {user.isOnline && Online}
+
+ {isConvo && item.time && (
+
{timeAgo(item.time)}
+ )}
+
+ {isConvo && item.snippet?.text && (
+
+ {item.isUnread && *}
+ {safeText(item.snippet.text).slice(0, 80)}{item.snippet.text?.length > 80 ? '...' : ''}
+
+ )}
+ {isMutual && (
+
New match!
+ )}
+
+
+
+ );
+ })
+ )}
+
Loading profile...
;
+
+ const me = session?.me;
+ const xFields = me?.xMatchFields;
+
+ return (
+
+ {error &&
{error}
}
+
+
+
Token Management
+
+
+ Paste a new JWT token from Proxyman. Current token: {getOkcToken().slice(0, 20)}...
+
+
+ setTokenInput(e.target.value)}
+ />
+
+
+ {tokenSaved &&
Token saved!
}
+
+
+
+ {me && (
+
+
Your Profile
+
+
+ {me.primaryImage?.square800 && (
+
+ )}
+
+
{safeText(me.displayname)}, {safeText(me.age)}
+
{safeText(me.userLocation?.publicName)}
+
{safeText(me.emailAddress)}
+
+
+
+
+ {me.orientations?.length > 0 && (
+
Orientations: {me.orientations.map(safeText).join(', ')}
+ )}
+ {me.relationshipType &&
Relationship: {safeText(me.relationshipType)}
}
+ {me.joinDate &&
Joined: {new Date(me.joinDate).toLocaleDateString()}
}
+
+
+
+ )}
+
+ {xFields && (
+
+
Cross-Sell Profile Data
+
+
+ {xFields.firstName &&
Name: {safeText(xFields.firstName)}
}
+ {xFields.bio &&
Bio: {safeText(xFields.bio)}
}
+ {xFields.genderPresentation &&
Gender: {safeText(xFields.genderPresentation)}
}
+ {xFields.bodyType &&
Body: {safeText(xFields.bodyType)}
}
+ {xFields.heightInCm &&
Height: {safeText(xFields.heightInCm)}cm
}
+ {xFields.relationshipStatus &&
Status: {safeText(xFields.relationshipStatus)}
}
+ {xFields.relationshipIntent &&
Intent: {safeText(xFields.relationshipIntent)}
}
+ {xFields.lookingFor?.length > 0 &&
Looking for: {xFields.lookingFor.map(safeText).join(', ')}
}
+ {xFields.drinking &&
Drinking: {safeText(xFields.drinking)}
}
+ {xFields.smoking &&
Smoking: {safeText(xFields.smoking)}
}
+ {xFields.marijuana &&
Marijuana: {safeText(xFields.marijuana)}
}
+ {xFields.pets?.length > 0 &&
Pets: {xFields.pets.map(safeText).join(', ')}
}
+ {xFields.education &&
Education: {safeText(xFields.education)}
}
+ {xFields.jobTitle &&
Job: {safeText(xFields.jobTitle)}{xFields.jobCompany ? ` at ${safeText(xFields.jobCompany)}` : ''}
}
+
+
+
+ )}
+
+ {likesInfo && (
+
+
Likes Cap
+
+
+
+
{safeText(likesInfo.likesRemaining)}
+
Remaining
+
+
+
{safeText(likesInfo.likesCapTotal)}
+
Total
+
+
+
{safeText(likesInfo.viewCount)}
+
Views
+
+ {likesInfo.resetTime && (
+
+
{new Date(likesInfo.resetTime).toLocaleString()}
+
Resets
+
+ )}
+
+
+
+ )}
+
+ {me?.photos?.length > 0 && (
+
+
Your Photos
+
+ {me.photos.map((p: any) => (
+
+ ))}
+
+
+ )}
+
+
+
Subscription Status
+
+
+ {[
+ ['Basic', me?.ALIST_BASIC],
+ ['Premium', me?.ALIST_PREMIUM],
+ ['Premium+', me?.ALIST_PREMIUM_PLUS],
+ ['Incognito', me?.INCOGNITO],
+ ].map(([label, val]) => (
+
+ {label as string}:
+ {val ? 'Active' : 'No'}
+
+ ))}
+
+
+
+
+
+
+
+ {tabs.map((t) => (
+
+ ))}
+
+
+
+ {tab === 'discover' &&
}
+ {tab === 'likes' &&
}
+ {tab === 'messages' &&
}
+ {tab === 'profile' &&
}
+
+
)}
+
+ {/* Location status toast */}
+ {locationStatus && (
+
+ {locationStatus.text}
+
+ )}
@@ -1263,6 +1413,422 @@ export function SettingsPage() {
+ {/* Teleport */}
+