another step

client/src/layout/PrivateLayout.tsx

@@ -1,21 +1,11 @@
-'use client';
-import { FunctionComponent, PropsWithChildren, useEffect } from 'react';
-import { COOKIE_NAMES } from '@/lib/cookies';
-import { getClientCookie } from '@/lib/cookies/client';
-import { useAppStore } from '@/store';
+import type { FunctionComponent, PropsWithChildren } from 'react';
 
-const PrivateLayout: FunctionComponent<PropsWithChildren> = ({ children }) => {
-  const [,dispatch] = useAppStore();
-
-  useEffect(() => {
-    if (getClientCookie(COOKIE_NAMES.ACCESS_TOKEN)) {
-      dispatch({ type: 'LOG_IN' });
-    }
-  }, [dispatch]);
-
-  return (
-    children
-  );
-};
+/**
+ * Authenticated layout shell. Auth state is seeded on the server by AuthProvider
+ * (see getServerAuthState) and kept current by the login/logout hooks, so this
+ * component no longer reads the cookie after mount — it is the place to build the
+ * authenticated layout chrome.
+ */
+const PrivateLayout: FunctionComponent<PropsWithChildren> = ({ children }) => <>{children}</>;
 
 export default PrivateLayout;

client/src/layout/components/SideBar.tsx

@@ -1,7 +1,8 @@
 import { FunctionComponent, useCallback, MouseEvent } from 'react';
 import { Stack, Divider, Drawer, DrawerProps } from '@mui/material';
 import { LinkToPage } from '@/utils';
-import { useEventLogout, useIsAuthenticated, useIsMobile } from '@/hooks';
+import { useIsAuthenticated, useIsMobile } from '@/hooks';
+import { useLogout } from '@/services/auth';
 import { AppIconButton, UserInfo } from '@/components';
 import { SIDE_BAR_WIDTH, TOP_BAR_DESKTOP_HEIGHT } from '../config';
 import SideBarNavList from './SideBarNavList';
@@ -18,7 +19,7 @@ export interface SideBarProps extends Pick<DrawerProps, 'anchor' | 'className' |
 const SideBar: FunctionComponent<SideBarProps> = ({ anchor, open, variant, items, onClose, ...restOfProps }) => {
   const isAuthenticated = useIsAuthenticated();
   const onMobile = useIsMobile();
-  const onLogout = useEventLogout();
+  const { mutate: logout } = useLogout();
 
   const handleAfterLinkClick = useCallback(
     (event: MouseEvent) => {
@@ -72,7 +73,7 @@ const SideBar: FunctionComponent<SideBarProps> = ({ anchor, open, variant, items
           {/* Only DarkModeFormSwitch subscribes to useColorScheme — it's the sole re-render target */}
           <DarkModeFormSwitch />
 
-          {isAuthenticated && <AppIconButton icon="logout" title="Logout Current User" onClick={onLogout} />}
+          {isAuthenticated && <AppIconButton icon="logout" title="Logout Current User" onClick={() => logout()} />}
         </Stack>
       </Stack>
     </Drawer>