Let me check the debug logs and investigate the issues:
I see the problem! The issue is in the focus page's useEffect that loads session params. It's calling removeCoins inside a useEffect, which causes issues with React's state updates and the hook dependencies. The removeCoins function is changing during re-renders causing multiple executions and strange behavior. Let me also check the related hooks:
Now I understand the issue. The problem is that removeCoins is in the dependency array, which causes the effect to run multiple times. I need to fix the focus page to handle initialization properly with a ref to prevent double execution. Let me also improve the UI/UX as requested:
Now let me also improve the home page UI with better visual hierarchy and fix the session preview calculation:
I fixed the major bugs and improved the UI/UX:
Bug Fixes:
useRef guards (initializedRef and sessionCompletedRef) to prevent the session initialization and completion from running multiple times due to React's re-rendersremoveCoins from the useEffect dependency array to prevent infinite loopsUI/UX Improvements:
This hydration warning is caused by a browser extension (Grammarly) adding attributes to the body element - not a bug in the code. The diff shows data-new-gr-c-s-check-loaded and data-gr-ext-installed which are Grammarly's attributes.
However, there could be a real hydration issue with the localStorage hooks since they read values that differ between server and client. Let me fix that:
The useLocalStorage hook already handles hydration properly - it returns initialValue on server render and then switches to storedValue after hydration. The warning is from the Grammarly browser extension, not from the app code.
No code fix needed - The hydration mismatch warning is caused by a browser extension (Grammarly) adding data-new-gr-c-s-check-loaded and data-gr-ext-installed attributes to the <body> element after server render. This is a common occurrence and doesn't affect the app functionality. The app code properly handles localStorage hydration through the isHydrated state pattern.
Let me understand the current structure and improve the Focus page to show analytics and app-specific addiction tracking:
Now I understand the structure. Let me reorganize the app: the Focus icon should lead to a setup/analytics page where users can select which apps they want to avoid, see stats, and start a session. The actual timer will be a separate route. Let me update the types, create the new focus setup page, and restructure the navigation:
Now let me update the bottom nav to rename "Focus" to "Focus" but make the home page the session start page, and make Focus the analytics/app selection page:
Now let me create a hook for blocked apps settings:
Now let me create the new Focus page with analytics and app selection:
I see the current focus page has the timer. I need to move that to /timer and create a new focus page with analytics and app selection. Let me do that:
Now let me create the new Focus page with analytics and app selection:
Now let me update the timer page to redirect to /focus instead of / when there's no session, and also update the home page to be a welcoming dashboard:
Now let me update the home page to be a welcoming dashboard that directs users to the Focus page:
I've restructured the app navigation. Here's what changed:
Focus Page (Target icon) - The main hub with two tabs:
No code fix needed. These hydration warnings are caused by the Grammarly browser extension adding data-new-gr-c-s-check-loaded and data-gr-ext-installed attributes to the <body> element after server render. This is explicitly mentioned in React's hydration mismatch documentation: "It can also happen if the client has a browser extension installed which messes with the HTML before React loaded."
This doesn't break the app - it's just a warning. To eliminate the warnings, you could disable Grammarly on this site or use incognito mode without extensions.
You can send messages while the preview loads