Migrate party components to App Router navigation

- Add 'use client' directives to all party components
- Update imports from next/router to next/navigation
- Replace router.locale with getCookie('NEXT_LOCALE')
- Replace router.asPath with usePathname()
- Maintain all existing functionality

Components migrated:
- Party, PartyDropdown, PartyFooter, PartyHead, PartyHeader

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

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

components/party/Party/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { getCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { subscribe, useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import clonedeep from 'lodash.clonedeep'

components/party/PartyDropdown/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 // Libraries
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname } from 'next/navigation'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 
@@ -47,6 +49,7 @@ const PartyDropdown = ({
 
   // Router
   const router = useRouter()
+  const pathname = usePathname()
 
   const [open, setOpen] = useState(false)
 
@@ -75,7 +78,7 @@ const PartyDropdown = ({
 
   // Method: Actions
   function copyToClipboard() {
-    if (router.asPath.split('/')[1] === 'p') {
+    if (pathname.split('/')[1] === 'p') {
       navigator.clipboard.writeText(window.location.href)
       setCopyToastOpen(true)
     }

components/party/PartyFooter/index.tsx

@@ -1,5 +1,7 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import clonedeep from 'lodash.clonedeep'

components/party/PartyHead/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import React from 'react'
 import Head from 'next/head'
-import { useRouter } from 'next/router'
+import { getCookie } from 'cookies-next'
 import { useTranslation } from 'next-i18next'
 import api from '~utils/api'
 
@@ -15,10 +17,10 @@ const PartyHead = ({ party, meta }: Props) => {
   // Import translations
   const { t } = useTranslation('common')
 
-  // Set up router
+  // Get locale from cookie
-  const router = useRouter()
+  const cookieLocale = getCookie('NEXT_LOCALE') as string
   const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+    cookieLocale && ['en', 'ja'].includes(cookieLocale) ? cookieLocale : 'en'
   const previewUrl = `${
     process.env.NEXT_PUBLIC_SITE_URL || 'https://granblue.team'
   }/p/${party.shortcode}/preview`

components/party/PartyHeader/index.tsx

@@ -1,6 +1,9 @@
+'use client'
+
 import React, { useState } from 'react'
 import Link from 'next/link'
-import { useRouter } from 'next/router'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
 import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
@@ -48,7 +51,8 @@ const PartyHeader = (props: Props) => {
 
   const { t } = useTranslation('common')
   const router = useRouter()
-  const locale = router.locale || 'en'
+  const pathname = usePathname()
+  const locale = getCookie('NEXT_LOCALE') || 'en'
 
   const { party: partySnapshot } = useSnapshot(appState)
 
@@ -145,7 +149,7 @@ const PartyHeader = (props: Props) => {
 
   // Actions: Copy URL
   function copyToClipboard() {
-    if (router.asPath.split('/')[1] === 'p') {
+    if (pathname.split('/')[1] === 'p') {
       navigator.clipboard.writeText(window.location.href)
       setCopyToastOpen(true)
     }