diff --git a/src/components/BackupReminder.tsx b/src/components/BackupReminder.tsx index 62c112f..08c30d9 100644 --- a/src/components/BackupReminder.tsx +++ b/src/components/BackupReminder.tsx @@ -1,10 +1,11 @@ import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; -import { AlertTriangle, X, Download, CheckCircle } from 'lucide-react'; +import { AlertTriangle, Download, CheckCircle } from 'lucide-react'; import { Button } from '@/components/ui/button'; import { useCurrentUser } from '@/hooks/useCurrentUser'; import { useLocalStorage } from '@/hooks/useLocalStorage'; import { backupConfirmedKey } from '@/lib/backup'; +import { isSignupOpen } from '@/lib/uiFlags'; import { useTranslation } from '@/contexts/language'; import { Sheet, @@ -42,18 +43,25 @@ export function BackupReminder() { return; } - // Show reminder if: - // 1. User is logged in - // 2. Not snoozed for THIS session (resets when they come back) - // 3. Not confirmed they backed up (the only permanent stop) - // Add a small delay so it doesn't immediately pop up on login. - const timer = setTimeout(() => { + // Wait out the signup dialog (the key is minted mid-flow), then show unless + // snoozed for this session or already confirmed. + let cancelled = false; + let timer: ReturnType; + const attempt = () => { + if (cancelled) return; + if (isSignupOpen()) { + timer = setTimeout(attempt, 2000); + return; + } const snoozed = sessionStorage.getItem(BACKUP_SNOOZE_KEY) === 'true'; - const shouldShow = !snoozed && !confirmed; - setShowReminder(shouldShow); - }, 2000); + setShowReminder(!snoozed && !confirmed); + }; + timer = setTimeout(attempt, 2000); - return () => clearTimeout(timer); + return () => { + cancelled = true; + clearTimeout(timer); + }; }, [user, confirmed]); const handleDismiss = () => { @@ -84,7 +92,7 @@ export function BackupReminder() { if (!showReminder) return null; return ( - + { if (!open) handleDismiss(); }}> - diff --git a/src/components/auth/SignupDialog.tsx b/src/components/auth/SignupDialog.tsx index 861c89c..3945b3a 100644 --- a/src/components/auth/SignupDialog.tsx +++ b/src/components/auth/SignupDialog.tsx @@ -15,6 +15,7 @@ import { useLoginActions } from '@/hooks/useLoginActions'; import { useNostrPublish } from '@/hooks/useNostrPublish'; import { useUploadFile } from '@/hooks/useUploadFile'; import { useLocalStorage } from '@/hooks/useLocalStorage'; +import { setSignupOpen } from '@/lib/uiFlags'; import { useCurrentUser } from '@/hooks/useCurrentUser'; import { backupConfirmedKey } from '@/lib/backup'; import { generateSecretKey, nip19 } from 'nostr-tools'; @@ -346,6 +347,13 @@ const SignupDialog: React.FC = ({ isOpen, onClose, onComplete } }, [isOpen]); + // Tell the global backup reminder to wait while signup is open — the key is + // minted mid-flow, and the reminder belongs *after* the skater finishes. + useEffect(() => { + setSignupOpen(isOpen); + return () => setSignupOpen(false); + }, [isOpen]); + // Offer a handle derived from the display name until the skater edits it // themselves (or has already claimed one). useEffect(() => { diff --git a/src/lib/uiFlags.ts b/src/lib/uiFlags.ts new file mode 100644 index 0000000..c52e0a1 --- /dev/null +++ b/src/lib/uiFlags.ts @@ -0,0 +1,16 @@ +/** + * Tiny cross-component UI flags (module-level, non-reactive). + * + * Used so the global backup reminder can tell that the signup dialog is open and + * wait — the key is minted mid-flow, and the reminder belongs *after* the skater + * finishes, not while they're still choosing a name. + */ +let signupOpen = false; + +export function setSignupOpen(value: boolean): void { + signupOpen = value; +} + +export function isSignupOpen(): boolean { + return signupOpen; +} diff --git a/src/pages/CreateEventPage.tsx b/src/pages/CreateEventPage.tsx index a55c072..36dc0bb 100644 --- a/src/pages/CreateEventPage.tsx +++ b/src/pages/CreateEventPage.tsx @@ -648,10 +648,10 @@ export default function CreateEventPage() { {/* Link to Spot from Map */}
-
-
- -
+
+
+ +

{selectedSpot ? t('placesUi.createEvent.selectedSpot', { name: selectedSpot.title }) : t('placesUi.createEvent.selectSpotHint')} @@ -664,7 +664,7 @@ export default function CreateEventPage() { size="sm" onClick={() => setShowSpotSelector(!showSpotSelector)} className={cn( - 'border-[#ff0040]/50', + 'shrink-0 border-[#ff0040]/50', selectedSpot ? 'bg-[#ff0040] text-white hover:bg-[#ff0040]/90' : 'text-[#ff0040] hover:bg-[#ff0040]/10'