Migrate auth components to App Router navigation

- Update LoginModal, SignupModal, and AccountModal to use next/navigation
- Add 'use client' directives to auth components
- Replace router.locale with getCookie('NEXT_LOCALE')
- Update changeLanguage utility to work with App Router
- Replace router.reload() with router.refresh()

All auth flows now use App Router navigation patterns.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

components/auth/AccountModal/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { getCookie, setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import { useTheme } from 'next-themes'
 
@@ -38,10 +40,9 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
     // Localization
     const { t } = useTranslation('common')
     const router = useRouter()
-    const locale =
+    // In App Router, locale is handled via cookies
-      router.locale && ['en', 'ja'].includes(router.locale)
+    const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'
-        ? router.locale
+    const locale = ['en', 'ja'].includes(currentLocale) ? currentLocale : 'en'
-        : 'en'
 
     // useEffect only runs on the client, so now we can safely show the UI
     const [mounted, setMounted] = useState(false)
@@ -164,7 +165,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             setOpen(false)
             if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
-            if (props.bahamutMode != bahamutMode) router.reload()
+            if (props.bahamutMode != bahamutMode) router.refresh()
           })
       }
     }

components/auth/LoginModal/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'react-i18next'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 

components/auth/SignupModal/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { setCookie } from 'cookies-next'
+import { setCookie, getCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 
@@ -70,13 +72,16 @@ const SignupModal = (props: Props) => {
   function register(event: React.FormEvent) {
     event.preventDefault()
 
+    // In App Router, locale is typically handled via cookies or headers
+    const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'
+
     const body = {
       user: {
         username: usernameInput.current?.value,
         email: emailInput.current?.value,
         password: passwordInput.current?.value,
         password_confirmation: passwordConfirmationInput.current?.value,
-        language: router.locale,
+        language: currentLocale,
       },
     }
 

utils/changeLanguage.tsx

@@ -1,15 +1,20 @@
+'use client'
+
 import { setCookie } from 'cookies-next'
-import { NextRouter } from 'next/router'
+import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context.shared-runtime'
 
 export default function changeLanguage(
-  router: NextRouter,
+  router: AppRouterInstance,
   newLanguage: string
 ) {
-  if (newLanguage !== router.locale) {
+  // In App Router, locale handling is different
+  // We set the cookie and refresh the page to apply the new locale
   const expiresAt = new Date()
   expiresAt.setDate(expiresAt.getDate() + 60)
 
   setCookie('NEXT_LOCALE', newLanguage, { path: '/', expires: expiresAt })
-    router.push(router.asPath, undefined, { locale: newLanguage })
+  
-  }
+  // App Router doesn't have router.locale or locale option in push
+  // The locale is handled via the cookie and middleware
+  router.refresh()
 }