Add skip button to onboarding modal with persistence

Add skip functionality to the Welcome to Core onboarding modal that
prevents it from showing again after the user clicks skip.

Changes:
- Add skip button in modal header with ghost styling
- Persist onboarding completion state to localStorage
- Check localStorage before showing modal on future visits
- Apply persistence to both skip and complete flows

The modal will no longer appear after being skipped or completed,
improving user experience for returning users.
This commit is contained in:
Elias Stepanik 2025-10-30 12:01:17 +02:00
parent f038ad5c61
commit da30ec8a6b
2 changed files with 33 additions and 2 deletions

View File

@ -6,6 +6,7 @@ import { IngestionStep } from "./ingestion-step";
import { VerificationStep } from "./verification-step";
import { PROVIDER_CONFIGS } from "./provider-config";
import { Progress } from "../ui/progress";
import { Button } from "../ui/button";
interface OnboardingModalProps {
isOpen: boolean;
@ -108,11 +109,24 @@ export function OnboardingModal({
};
const handleComplete = () => {
// Mark onboarding as completed in localStorage
if (typeof window !== "undefined") {
localStorage.setItem("onboarding_completed", "true");
}
setCurrentStep(OnboardingStep.COMPLETE);
onComplete();
onClose();
};
const handleSkip = () => {
// Mark onboarding as completed in localStorage
if (typeof window !== "undefined") {
localStorage.setItem("onboarding_completed", "true");
}
onComplete();
onClose();
};
// Poll for recall logs to detect verification
const pollRecallLogs = async () => {
setIsCheckingRecall(true);
@ -179,7 +193,17 @@ export function OnboardingModal({
<DialogContent className="max-h-[90vh] max-w-3xl overflow-y-auto p-4">
<DialogHeader>
<div className="space-y-3">
<DialogTitle className="text-2xl">Welcome to Core</DialogTitle>
<div className="flex items-center justify-between">
<DialogTitle className="text-2xl">Welcome to Core</DialogTitle>
<Button
variant="ghost"
size="sm"
onClick={handleSkip}
className="text-muted-foreground hover:text-foreground"
>
Skip
</Button>
</div>
<div className="space-y-2">
<div className="flex items-center justify-between">
<p className="text-muted-foreground text-sm">

View File

@ -38,7 +38,14 @@ export default function LogsAll() {
useEffect(() => {
if (!isLoading && logs && logs.length === 1) {
setOnboarding(true);
// Check if onboarding has been completed before
const hasCompletedOnboarding =
typeof window !== "undefined" &&
localStorage.getItem("onboarding_completed") === "true";
if (!hasCompletedOnboarding) {
setOnboarding(true);
}
}
}, [logs.length, isLoading]);