Modernize Link components to Next.js 13+ patterns (#431)

## Summary
- Removed legacy behavior from Link components
- Fixed onClick warnings with next-intl Link wrapper
- Fixed tab switching on party page
- Fixed JobSkillItem router undefined error

## Changes
- Removed `legacyBehavior` prop and nested `<a>` tags from all Link
components
- Updated GridTabsCompact to use next-intl's Link wrapper correctly
- Fixed PartyPageClient tab switching by mapping string values to
GridType enum
- Removed broken locale assignment code in JobSkillItem

## Test plan
- [x] No more console warnings about onClick and legacyBehavior
- [x] Tab switching works correctly on party page
- [x] No router undefined errors in JobSkillItem
- [x] All navigation links work as expected

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

---------

Co-authored-by: Claude <noreply@anthropic.com>

app/[locale]/p/[party]/PartyPageClient.tsx

@@ -34,7 +34,19 @@ const PartyPageClient: React.FC<Props> = ({ party, raidGroups }) => {
   
   // Handle tab change
   const handleTabChanged = (value: string) => {
-    const tabType = parseInt(value) as GridType
+    let tabType: GridType
+    switch (value) {
+      case 'characters':
+        tabType = GridType.Character
+        break
+      case 'summons':
+        tabType = GridType.Summon
+        break
+      case 'weapons':
+      default:
+        tabType = GridType.Weapon
+        break
+    }
     setSelectedTab(tabType)
   }
   

app/components/Header.tsx

@@ -204,7 +204,6 @@ const Header = () => {
             <DropdownMenuItem onClick={closeLeftMenu}>
               <Link
                 href={`/${accountState.account.user.username}` || ''}
-                passHref
               >
                 <span>{t('menu.profile')}</span>
               </Link>
@@ -300,7 +299,6 @@ const Header = () => {
             <DropdownMenuItem onClick={closeRightMenu}>
               <Link
                 href={`/${accountState.account.user.username}` || ''}
-                passHref
               >
                 <span>{t('menu.profile')}</span>
               </Link>

components/Header/index.tsx

@@ -200,7 +200,6 @@ const Header = () => {
             <DropdownMenuItem onClick={closeLeftMenu}>
               <Link
                 href={`/${accountState.account.user.username}` || ''}
-                passHref
               >
                 <span>{t('menu.profile')}</span>
               </Link>
@@ -296,7 +295,6 @@ const Header = () => {
             <DropdownMenuItem onClick={closeRightMenu}>
               <Link
                 href={`/${accountState.account.user.username}` || ''}
-                passHref
               >
                 <span>{t('menu.profile')}</span>
               </Link>

components/about/LinkItem/index.tsx

@@ -1,5 +1,4 @@
 import { ComponentProps } from 'react'
-import Link from 'next/link'
 import classNames from 'classnames'
 
 import ShareIcon from '~public/icons/Share.svg'
@@ -21,7 +20,6 @@ const LinkItem = ({ icon, title, link, className, ...props }: Props) => {
 
   return (
     <div className={classes}>
-      <Link legacyBehavior href={link}>
       <a href={link} target="_blank" rel="noreferrer">
         <div className={styles.left}>
           <i className={styles.icon}>{icon}</i>
@@ -29,7 +27,6 @@ const LinkItem = ({ icon, title, link, className, ...props }: Props) => {
         </div>
         <ShareIcon className={styles.shareIcon} />
       </a>
-      </Link>
     </div>
   )
 }

components/job/JobSkillItem/index.tsx

@@ -47,8 +47,6 @@ const JobSkillItem = React.forwardRef<HTMLDivElement, Props>(
     // Set up translation
     const t = useTranslations('common')
     const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
-        ? router.locale
-        : 'en'
 
     // States: Component
     const [alertOpen, setAlertOpen] = useState(false)

components/party/PartyHeader/index.tsx

@@ -221,8 +221,8 @@ const PartyHeader = (props: Props) => {
   ) => {
     return (
       <div>
-        <Link legacyBehavior href={`/${username}`} passHref>
-          <a className={linkClass}>{userBlock(username, picture, element)}</a>
+        <Link href={`/${username}`} className={linkClass}>
+          {userBlock(username, picture, element)}
         </Link>
       </div>
     )
@@ -231,8 +231,8 @@ const PartyHeader = (props: Props) => {
   const linkedRaidBlock = (raid: Raid) => {
     return (
       <div>
-        <Link legacyBehavior href={`/teams?raid=${raid.slug}`} passHref>
-          <a className={`Raid ${linkClass}`}>{raid.name[locale]}</a>
+        <Link href={`/teams?raid=${raid.slug}`} className={`Raid ${linkClass}`}>
+          {raid.name[locale]}
         </Link>
       </div>
     )

pages/_app.tsx

@@ -1,6 +1,5 @@
 import { appWithTranslation } from 'next-i18next'
 import Head from 'next/head'
-import Link from 'next/link'
 import localFont from 'next/font/local'
 import { useIsomorphicLayoutEffect } from 'react-use'
 import { useTranslation } from 'next-i18next'
@@ -125,7 +124,6 @@ function MyApp({ Component, pageProps }: AppProps) {
           <div className="Connect">
             <p>{t('errors.server_unavailable.discord')}</p>
             <div className="Discord LinkItem">
-              <Link legacyBehavior href="https://discord.gg/qyZ5hGdPC8">
               <a
                 href="https://discord.gg/qyZ5hGdPC8"
                 target="_blank"
@@ -137,7 +135,6 @@ function MyApp({ Component, pageProps }: AppProps) {
                 </div>
                 <ShareIcon className="ShareIcon" />
               </a>
-              </Link>
             </div>
           </div>
         </div>