Set localstorage variable when splash dialog is first shown

app/components/editor/splash-dialog.tsx

@@ -1,4 +1,4 @@
-import { FormEvent, ReactNode, useContext } from 'react'
+import { FormEvent, ReactNode, useContext, useEffect } from 'react'
 
 import { Form, Link } from '@remix-run/react'
 
@@ -100,6 +100,10 @@ const SplashDialog = ({
 		})
 	}
 
+	useEffect(() => {
+		localStorage.setItem('aurelius:splash_shown', 'true')
+	}, [])
+
 	// TODO: synced devices is not picking up the correct value initially. it changes after a bit but it should be instant? investigate why.
 
 	return (

app/lib/providers/aurelius.tsx

@@ -110,7 +110,11 @@ const AureliusProvider = ({ children }: AureliusProviderProps) => {
 	const [latestPosts, setLatestPosts] = useState<ReadonlyArray<PostRow>>([])
 	const [mainMenuOpen, setMainMenuOpen] = useState(false)
 	const [preferencesOpen, setPreferencesOpen] = useState(false)
-	const [splashOpen, setSplashOpen] = useState(!!settings?.showSplashDialog)
+	const [splashOpen, setSplashOpen] = useState(
+		!(localStorage.getItem('aurelius:splash_shown') !== 'true')
+			? localStorage.getItem('aurelius:splash_shown') !== 'true'
+			: !!settings?.showSplashDialog
+	)
 	const [writingSessionOpen, setWritingSessionOpen] = useState(false)
 	const [writingSessionSettings, setWritingSessionSettings] =
 		useState<WritingSessionSettings>({

app/root.tsx

@@ -38,6 +38,7 @@ const App = ({ children }: { children: ReactNode }) => {
 
 		return () => {
 			document.head.removeChild(script)
+			localStorage.removeItem('aurelius:splash_shown')
 		}
 	}, [])