Migrate character components to App Router navigation

- Add 'use client' directives to all character components
- Update imports from next/router to next/navigation
- Replace router.locale with getCookie('NEXT_LOCALE')
- Maintain type safety with proper type casting

Components migrated:
- CharacterUnit, CharacterModal, CharacterHovercard
- CharacterConflictModal, CharacterResult

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

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

components/character/CharacterConflictModal/index.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 import { Trans, useTranslation } from 'next-i18next'
 
 import { Dialog } from '~components/common/Dialog'
@@ -24,9 +27,12 @@ interface Props {
 const CharacterConflictModal = (props: Props) => {
   // Localization
   const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
   const { t } = useTranslation('common')
+  const routerLocale = getCookie('NEXT_LOCALE')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
 
   // States
   const [open, setOpen] = useState(false)

components/character/CharacterHovercard/index.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
 
 import {
@@ -29,9 +32,12 @@ interface Props {
 
 const CharacterHovercard = (props: Props) => {
   const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
   const { t } = useTranslation('common')
+  const routerLocale = getCookie('NEXT_LOCALE')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
 
   const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
   const tintElement = Element[props.gridCharacter.object.element]

components/character/CharacterModal/index.tsx

@@ -1,6 +1,9 @@
+'use client'
+
 // Core dependencies
 import React, { PropsWithChildren, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 import { Trans, useTranslation } from 'next-i18next'
 import isEqual from 'lodash/isEqual'
 
@@ -60,8 +63,11 @@ const CharacterModal = ({
 }: PropsWithChildren<Props>) => {
   // Router and localization
   const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const routerLocale = getCookie('NEXT_LOCALE')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
   const { t } = useTranslation('common')
 
   // State: Component

components/character/CharacterResult/index.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
@@ -15,8 +18,11 @@ const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
 
 const CharacterResult = (props: Props) => {
   const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const routerLocale = getCookie('NEXT_LOCALE')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
 
   const character = props.data
 

components/character/CharacterUnit/index.tsx

@@ -1,5 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
 import { Trans, useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
@@ -57,8 +60,11 @@ const CharacterUnit = ({
   // Translations and locale
   const { t } = useTranslation('common')
   const router = useRouter()
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const routerLocale = getCookie('NEXT_LOCALE')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
 
   // State snapshot
   const { party, grid } = useSnapshot(appState)