diff --git a/src/components/AuthModal.tsx b/src/components/AuthModal.tsx index 82d2d0f..fd115ba 100644 --- a/src/components/AuthModal.tsx +++ b/src/components/AuthModal.tsx @@ -15,6 +15,7 @@ import { getSocialLinks } from '@/lib/social-urls'; import { supabase } from '@/lib/supabase'; import { useProfile } from '@/hooks/useProfile'; +import { useXVerification } from '@/hooks/useXVerification'; import { useFriends } from '@/hooks/useFriends'; import { useFriendRequests } from '@/hooks/useFriendRequests'; import type { ETHDenverEvent, NativeAd, UserSearchResult, FriendRequest } from '@/lib/types'; @@ -378,6 +379,7 @@ export function UserMenu({ events, itinerary, onOpenFriends, pendingIncomingCoun const { friendCount, refreshFriends: localRefreshFriends } = useFriends(); const { config } = useAdminConfig(); const { theme, setTheme } = useTheme(); + const { isXVerified, linkX, unlinkX } = useXVerification(); const refreshFriends = useCallback(async () => { await localRefreshFriends(); @@ -763,18 +765,32 @@ export function UserMenu({ events, itinerary, onOpenFriends, pendingIncomingCoun -
-
- {'\u{1D54F}'} - setXHandle(e.target.value.replace(/^@/, ''))} - placeholder="X handle" - className="flex-1 bg-transparent text-[var(--theme-text-primary)] text-sm px-2 py-2 focus:outline-none placeholder:text-[var(--theme-text-muted)]" - /> + {/* X Account */} + {profile?.x_verified ? ( +
+ + @{profile.x_handle} + +
-
+ ) : ( + + )}
diff --git a/src/components/CommentSection.tsx b/src/components/CommentSection.tsx index 12f31b3..dd46096 100644 --- a/src/components/CommentSection.tsx +++ b/src/components/CommentSection.tsx @@ -6,11 +6,13 @@ import { createPortal } from 'react-dom'; import { Send, Trash2, MessageCircle, X } from 'lucide-react'; import { useAuth } from '@/contexts/AuthContext'; import { useEventComments } from '@/hooks/useEventComments'; +import { supabase } from '@/lib/supabase'; import { timeAgo } from '@/lib/time-parse'; import { getDisplayName } from '@/lib/user-display'; import UserAvatar from './UserAvatar'; import ProfileCardModal from './ProfileCardModal'; import { trackCommentExpand, trackCommentAdd, trackCommentDelete, trackCommentVisibilityToggle } from '@/lib/analytics'; +import { useXVerification } from '@/hooks/useXVerification'; interface CommentSectionProps { eventId: string; @@ -20,6 +22,7 @@ interface CommentSectionProps { export function CommentSection({ eventId, commentCount = 0, eventName }: CommentSectionProps) { const { user } = useAuth(); + const { isXVerified, linkX } = useXVerification(); const [expanded, setExpanded] = useState(false); const isMobile = useMediaQuery('(max-width: 639px)'); const { comments, loading, addComment, deleteComment } = useEventComments( @@ -27,6 +30,10 @@ export function CommentSection({ eventId, commentCount = 0, eventName }: Comment ); const [text, setText] = useState(''); const [visibility, setVisibility] = useState<'public' | 'friends'>('public'); + const [showEmailPrompt, setShowEmailPrompt] = useState(false); + const [email, setEmail] = useState(''); + const [emailLoading, setEmailLoading] = useState(false); + const [emailError, setEmailError] = useState(null); const [selectedProfile, setSelectedProfile] = useState<{ userId: string; displayName?: string | null; @@ -155,8 +162,37 @@ export function CommentSection({ eventId, commentCount = 0, eventName }: Comment ); + // Handle email sign-up then X OAuth link + const handleEmailThenLinkX = async () => { + if (!email.trim()) return; + setEmailLoading(true); + setEmailError(null); + + // Sign up with a random password — auto-confirms since enable_confirmations = false + // Next login they'll use OTP + const { error } = await supabase.auth.signUp({ + email: email.trim(), + password: crypto.randomUUID(), + }); + + if (error) { + // If account exists, they need to sign in properly + if (error.message?.includes('already registered') || error.status === 422) { + setEmailError('Account exists — sign in from the menu first'); + } else { + setEmailError(error.message); + } + setEmailLoading(false); + return; + } + + // Account created + session active, now start X OAuth + setEmailLoading(false); + linkX(); + }; + // Shared input content - const inputContent = user && ( + const inputContent = user && isXVerified ? (
+ ) : user && !isXVerified ? ( + // Logged in but X not verified — go straight to X OAuth + + ) : showEmailPrompt ? ( + // Not logged in — email prompt before X OAuth +
+
+ setEmail(e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') { + e.preventDefault(); + handleEmailThenLinkX(); + } + }} + placeholder="Enter your email..." + className="flex-1 bg-[var(--theme-bg-tertiary)]/50 border border-[var(--theme-border-primary)] rounded-lg px-3 py-2 text-sm text-[var(--theme-text-primary)] placeholder-slate-500 outline-none min-w-0" + autoFocus + /> + +
+ {emailError && ( +

{emailError}

+ )} +
+ ) : ( + // Not logged in — show connect CTA + ); // Mobile: render bottom-sheet modal via portal @@ -249,11 +343,9 @@ export function CommentSection({ eventId, commentCount = 0, eventName }: Comment
{/* Sticky input at bottom */} - {user && ( -
- {inputContent} -
- )} +
+ {inputContent} +
, document.body diff --git a/src/components/EventCard.tsx b/src/components/EventCard.tsx index 8f23880..10dbb14 100644 --- a/src/components/EventCard.tsx +++ b/src/components/EventCard.tsx @@ -18,6 +18,7 @@ import { EmojiReactions } from './EmojiReactions'; import UserAvatar from './UserAvatar'; import { FriendAvatarStack } from './FriendAvatarStack'; import { RsvpButton } from './RsvpButton'; +import { CommentSection } from './CommentSection'; interface EventCardProps { event: ETHDenverEvent; @@ -131,6 +132,7 @@ export const EventCard = memo(function EventCard({ checkInCount, reactions, onToggleReaction, + commentCount, conference, onCheckIn, checkInLoading, @@ -400,8 +402,7 @@ export const EventCard = memo(function EventCard({ compact={compact} /> )} - {/* Comments disabled until social verification is in place */} - {/* */} + {checkedInFriends && checkedInFriends.length > 0 && (