Migrate job and mastery components to App Router navigation

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

Job components migrated:
- JobSkillItem, JobSection, JobDropdown, JobAccessoryPopover
- JobAccessoryItem, JobSkillResult, JobImage

Mastery components migrated:
- ExtendedMasterySelect, AxSelect, AwakeningSelectWithInput

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

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

components/job/JobAccessoryItem/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 
 import * as RadioGroup from '@radix-ui/react-radio-group'
 
@@ -12,9 +13,7 @@ interface Props {
 
 const JobAccessoryItem = ({ accessory, selected }: Props) => {
   // Localization
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
   return (
     <RadioGroup.Item

components/job/JobAccessoryPopover/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { PropsWithChildren, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
@@ -41,9 +42,7 @@ const JobAccessoryPopover = ({
   // Localization
   const { t } = useTranslation('common')
 
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
   // Component state
   const [open, setOpen] = useState(false)

components/job/JobDropdown/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 
@@ -21,9 +22,8 @@ type GroupedJob = { [key: string]: Job[] }
 
 const JobDropdown = React.forwardRef<HTMLSelectElement, Props>(
   function useFieldSet(props, ref) {
-    // Set up router for locale
-    const router = useRouter()
-    const locale = router.locale || 'en'
+    // Set up locale from cookie
+    const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
     // Set up translation
     const { t } = useTranslation('common')

components/job/JobImage/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import classNames from 'classnames'
 import Button from '~components/common/Button'
 import JobAccessoryPopover from '~components/job/JobAccessoryPopover'
@@ -27,9 +28,7 @@ const JobImage = ({
   onAccessorySelected,
 }: Props) => {
   // Localization
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
   // Component state
   const [open, setOpen] = useState(false)

components/job/JobSection/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
@@ -31,9 +32,7 @@ const JobSection = (props: Props) => {
   const { party } = useSnapshot(appState)
   const { t } = useTranslation('common')
 
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
   // Data state
   const [job, setJob] = useState<Job>()

components/job/JobSkillItem/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { Trans, useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
@@ -44,10 +45,8 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
     forwardedRef
   ) {
     // Set up translation
-    const router = useRouter()
     const { t } = useTranslation('common')
-    const locale =
-      router.locale && ['en', 'ja'].includes(router.locale)
+    const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
         ? router.locale
         : 'en'
 

components/job/JobSkillResult/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import classNames from 'classnames'
 import { SkillGroup, skillClassification } from '~data/skillGroups'
 
@@ -11,9 +12,7 @@ interface Props {
 }
 
 const JobSkillResult = (props: Props) => {
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
   const skill = props.data
 

components/mastery/AwakeningSelectWithInput/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
@@ -40,9 +41,7 @@ const AwakeningSelectWithInput = ({
   sendValues,
 }: Props) => {
   // Set up translations
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
   const { t } = useTranslation('common')
 
   // State: Component

components/mastery/AxSelect/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
 
 import Input from '~components/common/Input'
@@ -32,9 +33,7 @@ interface Props {
 }
 
 const AXSelect = (props: Props) => {
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
   const { t } = useTranslation('common')
 
   const [openAX1, setOpenAX1] = useState(false)

components/mastery/ExtendedMasterySelect/index.tsx

@@ -1,6 +1,7 @@
+'use client'
 // Core dependencies
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 
@@ -35,9 +36,7 @@ const ExtendedMasterySelect = ({
   rightSelectValue,
   sendValues,
 }: Props) => {
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
   const { t } = useTranslation('common')
 
   // UI state