Refactor: reorder imports and clean up whitespace in PageTransition component

src/components/animations/PageTransition.jsx

@@ -1,6 +1,6 @@
-import React, { useEffect, useRef } from 'react'
-import { CSSTransition, TransitionGroup } from 'react-transition-group'
+import { useEffect, useRef } from 'react'
 import { useLocation } from 'react-router-dom'
+import { CSSTransition, TransitionGroup } from 'react-transition-group'
 import './PageTransition.css'
 
 // Route hierarchy for determining navigation direction
@@ -32,7 +32,11 @@ const getRouteLevel = pathname => {
   if (pathname.includes('/chores/') && pathname.includes('/history')) {
     return 3
   }
-  if (pathname.includes('/chores/') && !pathname.includes('/edit') && !pathname.includes('/history')) {
+  if (
+    pathname.includes('/chores/') &&
+    !pathname.includes('/edit') &&
+    !pathname.includes('/history')
+  ) {
     return 2
   }
   if (pathname.includes('/things/')) {
@@ -54,12 +58,17 @@ const PageTransition = ({ children }) => {
 
     // Determine if we're navigating back (to a higher level in hierarchy)
     isNavigatingBack.current = currentLevel < previousLevel
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' })
 
     prevLocation.current = location
   }, [location])
 
   const getTransitionClasses = () => {
-    if (location.pathname.includes('/login') || location.pathname.includes('/signup') || location.pathname.includes('/landing')) {
+    if (
+      location.pathname.includes('/login') ||
+      location.pathname.includes('/signup') ||
+      location.pathname.includes('/landing')
+    ) {
       return 'fade' // Use fade for auth pages
     }
 
@@ -77,9 +86,7 @@ const PageTransition = ({ children }) => {
         }}
         unmountOnExit
       >
-        <div className="page-wrapper">
-          {children}
-        </div>
+        <div className='page-wrapper'>{children}</div>
       </CSSTransition>
     </TransitionGroup>
   )