feat: conditionally render OnboardingModal based on onboarding completion status

Author: medyo

src/App.tsx

@@ -24,8 +24,15 @@ const intersectionCallback = (entries: IntersectionObserverEntry[]) => {
 }
 
 export const App = () => {
-  const { maxVisibleCards, setAdvStatus, isDNDModeActive, layout, DNDDuration, setDNDDuration } =
-    useUserPreferences()
+  const {
+    maxVisibleCards,
+    onboardingCompleted,
+    setAdvStatus,
+    isDNDModeActive,
+    layout,
+    DNDDuration,
+    setDNDDuration,
+  } = useUserPreferences()
 
   useLayoutEffect(() => {
     document.documentElement.style.setProperty('--max-visible-cards', maxVisibleCards.toString())
@@ -69,7 +76,7 @@ export const App = () => {
 
   return (
     <>
-      <OnboardingModal />
+      {!onboardingCompleted && <OnboardingModal />}
       <div
         className={clsx(
           'layoutLayers hideScrollBar',

src/features/onboarding/components/OnboardingModal.tsx

@@ -1,19 +1,17 @@
 import { useEffect } from 'react'
 import ReactModal from 'react-modal'
 import { trackOnboardingStart } from 'src/lib/analytics'
-import { useUserPreferences } from 'src/stores/preferences'
 import { HelloTab } from './steps/HelloTab'
 import './steps/tabs.css'
 
 export const OnboardingModal = () => {
-  const { onboardingCompleted } = useUserPreferences()
-
   useEffect(() => {
     trackOnboardingStart()
   }, [])
+
   return (
     <ReactModal
-      isOpen={!onboardingCompleted}
+      isOpen={true}
       ariaHideApp={false}
       shouldCloseOnEsc={false}
       shouldCloseOnOverlayClick={false}