Migrate weapon and summon components to App Router navigation

- Add 'use client' directives to all weapon and summon components
- Update imports from next/router to next/navigation
- Replace router.locale with getCookie('NEXT_LOCALE')

Weapon components migrated:
- WeaponUnit, WeaponModal, WeaponKeySelect, WeaponHovercard
- WeaponConflictModal, WeaponResult, WeaponLabelIcon

Summon components migrated:
- SummonUnit, SummonHovercard, SummonResult

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

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

components/summon/SummonHovercard/index.tsx

@@ -1,6 +1,8 @@
+'use client'
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
+import { getCookie } from 'cookies-next'
 
 import {
   Hovercard,
@@ -23,7 +25,9 @@ const SummonHovercard = (props: Props) => {
   const router = useRouter()
   const { t } = useTranslation('common')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
 
   const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
 

components/summon/SummonResult/index.tsx

@@ -1,5 +1,7 @@
+'use client'
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
@@ -17,7 +19,9 @@ const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
 const SummonResult = (props: Props) => {
   const router = useRouter()
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
 
   const summon = props.data
 

components/summon/SummonUnit/index.tsx

@@ -1,8 +1,10 @@
+'use client'
 import React, { MouseEvent, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { Trans, useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 import classNames from 'classnames'
+import { getCookie } from 'cookies-next'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'
@@ -50,7 +52,9 @@ const SummonUnit = ({
   const { t } = useTranslation('common')
   const router = useRouter()
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
 
   // State: UI
   const [searchModalOpen, setSearchModalOpen] = useState(false)

components/weapon/WeaponConflictModal/index.tsx

@@ -1,6 +1,8 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { Trans, useTranslation } from 'react-i18next'
+import { getCookie } from 'cookies-next'
 
 import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
@@ -26,7 +28,9 @@ const WeaponConflictModal = (props: Props) => {
   const router = useRouter()
   const { t } = useTranslation('common')
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
 
   // States
   const [open, setOpen] = useState(false)

components/weapon/WeaponHovercard/index.tsx

@@ -1,7 +1,9 @@
+'use client'
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
+import { getCookie } from 'cookies-next'
 
 import {
   Hovercard,
@@ -32,7 +34,9 @@ interface KeyNames {
 const WeaponHovercard = (props: Props) => {
   const router = useRouter()
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
 
   const { t } = useTranslation('common')
 

components/weapon/WeaponKeySelect/index.tsx

@@ -1,7 +1,9 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
+import { getCookie } from 'cookies-next'
 
 import Select from '~components/common/Select'
 import SelectGroup from '~components/common/SelectGroup'
@@ -67,8 +69,8 @@ const WeaponKeySelect = React.forwardRef<HTMLButtonElement, Props>(
   ) {
     const router = useRouter()
     const locale =
-      router.locale && ['en', 'ja'].includes(router.locale)
-        ? router.locale
+      getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+        ? (getCookie('NEXT_LOCALE') as string) 
         : 'en'
     const { t } = useTranslation('common')
 

components/weapon/WeaponLabelIcon/index.tsx

@@ -1,6 +1,8 @@
+'use client'
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import classNames from 'classnames'
+import { getCookie } from 'cookies-next'
 
 import styles from './index.module.scss'
 
@@ -12,12 +14,13 @@ interface Props {
 const WeaponLabelIcon = (props: Props) => {
   const router = useRouter()
 
+  const locale = getCookie('NEXT_LOCALE') as string || 'en'
   const classes = classNames({
     [styles.icon]: true,
     [styles.small]: props.size === 'small',
     [styles[props.labelType]]: true,
-    [styles.en]: router.locale === 'en',
-    [styles.ja]: router.locale === 'ja',
+    [styles.en]: locale === 'en',
+    [styles.ja]: locale === 'ja',
   })
 
   return <i className={classes} />

components/weapon/WeaponModal/index.tsx

@@ -1,6 +1,7 @@
+'use client'
 import React, { PropsWithChildren, useEffect, useState } from 'react'
 import { getCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { Trans, useTranslation } from 'next-i18next'
 import { isEqual } from 'lodash'
 
@@ -36,7 +37,9 @@ const WeaponModal = ({
 }: PropsWithChildren<Props>) => {
   const router = useRouter()
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
   const { t } = useTranslation('common')
 
   // Cookies

components/weapon/WeaponResult/index.tsx

@@ -1,5 +1,7 @@
+'use client'
 import React from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
@@ -29,7 +31,9 @@ const Proficiency = [
 const WeaponResult = (props: Props) => {
   const router = useRouter()
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
   const weapon = props.data
 
   return (

components/weapon/WeaponUnit/index.tsx

@@ -1,9 +1,11 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { Trans, useTranslation } from 'next-i18next'
 import { AxiosResponse } from 'axios'
 import classNames from 'classnames'
 import clonedeep from 'lodash.clonedeep'
+import { getCookie } from 'cookies-next'
 
 import api from '~utils/api'
 import { appState } from '~utils/appState'
@@ -54,7 +56,9 @@ const WeaponUnit = ({
   const { t } = useTranslation('common')
   const router = useRouter()
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    getCookie('NEXT_LOCALE') && ['en', 'ja'].includes(getCookie('NEXT_LOCALE') as string) 
+      ? (getCookie('NEXT_LOCALE') as string) 
+      : 'en'
 
   // State: UI
   const [detailsModalOpen, setDetailsModalOpen] = useState(false)