fixed first time visitor popover

Author: VolksRat71

src/lib/components/VideoControls.svelte

@@ -8,10 +8,15 @@
 		type CaptionSize,
 		type CaptionBackground
 	} from '$lib/stores/captionSettings.svelte';
+	import { userPreferences } from '$lib/stores/userPreferences.svelte';
 
 	function handleLevelChange(event: Event) {
 		const target = event.target as HTMLSelectElement;
 		comprehension.setLevel(target.value as ComprehensionLevel);
+		// Auto-dismiss hint when user changes level
+		if (showAudienceHint) {
+			dismissAudienceHint();
+		}
 	}
 
 	// Caption color options
@@ -89,31 +94,29 @@
 	let showVolumeSlider = $state(false);
 	let showSettings = $state(false);
 	let labelOffsets = $state<boolean[]>([]);
-	let showAudienceHint = $state(false);
 	let hintHiding = $state(false);
+	let hintShownThisSession = $state(false);
+	let hintDismissed = $state(false);
+
+	// Derive hint visibility: show if not visited, shown this session, and not fully dismissed
+	let showAudienceHint = $derived(!userPreferences.hasVisited && hintShownThisSession && !hintDismissed);
 
-	// Check if first-time visitor on mount
+	// Show hint after delay for first-time visitors
 	$effect(() => {
-		if (typeof window !== 'undefined') {
-			const hasVisited = localStorage.getItem('react2shell-visited');
-			if (!hasVisited) {
-				// Show hint after a short delay so it doesn't appear immediately
-				setTimeout(() => {
-					showAudienceHint = true;
-				}, 1500);
-			}
+		if (!userPreferences.hasVisited && !hintShownThisSession) {
+			setTimeout(() => {
+				hintShownThisSession = true;
+			}, 1500);
 		}
 	});
 
 	function dismissAudienceHint() {
 		hintHiding = true;
-		if (typeof window !== 'undefined') {
-			localStorage.setItem('react2shell-visited', 'true');
-		}
-		// Wait for animation to complete before hiding
+		userPreferences.markVisited();
+		// Wait for animation to complete before fully hiding
 		setTimeout(() => {
-			showAudienceHint = false;
 			hintHiding = false;
+			hintDismissed = true;
 		}, 300);
 	}
 
@@ -306,7 +309,7 @@
 					id="comprehension-select"
 					class="comprehension-select"
 					value={comprehension.level}
-					onchange={(e) => { handleLevelChange(e); dismissAudienceHint(); }}
+					onchange={handleLevelChange}
 					title="Explanation Level"
 				>
 					<option value="expert">{LEVEL_LABELS.expert}</option>
@@ -886,6 +889,8 @@
 		background: #1a1a2e;
 		transform: rotate(45deg);
 		z-index: 5;
+		border-right: 2px solid var(--accent-orange);
+		border-bottom: 2px solid var(--accent-red);
 	}
 
 	.hint-content {
@@ -895,13 +900,11 @@
 		border-radius: var(--radius-md);
 		min-width: 240px;
 		box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-		z-index: 1;
 		background: #1a1a2e;
-		border: 2px solid transparent;
-		background-clip: padding-box;
+		margin-bottom: 2px;
 	}
 
-	/* Animated gradient border using outline trick */
+	/* Animated gradient border - outer layer */
 	.hint-content::before {
 		content: '';
 		position: absolute;
@@ -913,17 +916,17 @@
 			var(--accent-orange),
 			var(--accent-red)
 		);
-		z-index: -1;
+		z-index: -2;
 		animation: gradient-rotate 3s linear infinite;
 	}
 
-	/* Inner background to cover the gradient */
+	/* Inner background to cover the gradient, leaving only border visible */
 	.hint-content::after {
 		content: '';
 		position: absolute;
 		inset: 0;
 		background: #1a1a2e;
-		border-radius: calc(var(--radius-md) - 1px);
+		border-radius: var(--radius-md);
 		z-index: -1;
 	}
 

src/lib/stores/userPreferences.svelte.ts

@@ -47,7 +47,8 @@ function loadFromStorage(): UserPreferences {
 		if (stored) {
 			const parsed = JSON.parse(stored);
 			// Merge with defaults to handle missing keys from older versions
-			return { ...DEFAULT_PREFERENCES, ...parsed, hasVisited: true };
+			// Preserve the actual hasVisited value from storage
+			return { ...DEFAULT_PREFERENCES, ...parsed };
 		}
 	} catch (e) {
 		console.warn('Failed to load preferences from localStorage:', e);

src/routes/+page.svelte

@@ -7,15 +7,6 @@
 	import FixStep from '$lib/components/steps/FixStep.svelte';
 	import LessonsStep from '$lib/components/steps/LessonsStep.svelte';
 	import { navigation } from '$lib/stores/navigation.svelte';
-	import { userPreferences } from '$lib/stores/userPreferences.svelte';
-	import { onMount } from 'svelte';
-
-	// Mark user as visited on first load
-	onMount(() => {
-		if (!userPreferences.hasVisited) {
-			userPreferences.markVisited();
-		}
-	});
 </script>
 
 <Header />