'use client'; import { useState, useEffect, useRef } from 'react'; import { X } from 'lucide-react'; interface AurFloatingCardProps { show: boolean; aurAppNames: string[]; hasYayInstalled: boolean; setHasYayInstalled: (value: boolean) => void; selectedHelper: 'yay' | 'paru'; setSelectedHelper: (helper: 'yay' | 'paru') => void; } // Floating cards that ask Arch users about their AUR helper (yay vs paru drama) export function AurFloatingCard({ show, aurAppNames, hasYayInstalled, setHasYayInstalled, selectedHelper, setSelectedHelper, }: AurFloatingCardProps) { const [dismissed, setDismissed] = useState(false); const [isExiting, setIsExiting] = useState(false); const [showConfirmation, setShowConfirmation] = useState(false); // Track if user has answered the first question const [hasAnswered, setHasAnswered] = useState(null); // Track if user has selected a helper (completed flow) const [helperChosen, setHelperChosen] = useState(false); // Track if user has interacted (dismissed or selected) to prevent nagging - use ref to persist const userInteractedRef = useRef(false); // Reset when new AUR packages appear, BUT ONLY if user hasn't interacted yet useEffect(() => { if (show && aurAppNames.length > 0 && !userInteractedRef.current) { setDismissed(false); setIsExiting(false); setShowConfirmation(false); setHelperChosen(false); setHasAnswered(null); } }, [aurAppNames.length, show]); if (!show || dismissed) return null; const handleFirstAnswer = (hasHelper: boolean) => { setHasYayInstalled(hasHelper); setHasAnswered(hasHelper); }; const handleHelperSelect = (helper: 'yay' | 'paru') => { setSelectedHelper(helper); setHelperChosen(true); userInteractedRef.current = true; // Don't ask again // Start exit animation after a brief moment setTimeout(() => { setIsExiting(true); setTimeout(() => { setShowConfirmation(true); }, 250); }, 400); }; const handleDismiss = () => { userInteractedRef.current = true; // Don't ask again setIsExiting(true); setTimeout(() => { setDismissed(true); setIsExiting(false); }, 200); }; const handleConfirmationDismiss = () => { setDismissed(true); }; // Show confirmation message after selecting helper, auto-dismiss after 3s if (showConfirmation) { // Auto dismiss after 3 seconds setTimeout(() => { setDismissed(true); }, 3000); return (

You can change this later in preview tab

); } // Hide cards while exiting if (isExiting && helperChosen) { return (
{hasAnswered !== null && (
)}
); } return (
{/* Card 1: Do you have an AUR helper? */}
{/* Header */}

{aurAppNames.length} AUR package{aurAppNames.length !== 1 ? 's' : ''}

Do you have an AUR helper?

{/* Buttons */}
{/* Hint */}

Change anytime in preview window

{/* Card 2: Which helper? (appears after first answer) */} {hasAnswered !== null && (
{/* Header */}

{hasAnswered ? 'Which one do you have?' : 'Which one to install?' }

{/* Helper selection */}
)}
); }