Add hasInstallScript property to package.json

## Summary
- Fixes Railway deployment build failures caused by dynamic server usage
errors
- Marks routes that use runtime features as `force-dynamic` to prevent
static generation attempts
- Creates proper error pages to handle 404/500 scenarios

## Problem
The build was failing with "Dynamic server usage" errors because Next.js
was trying to statically generate pages that use runtime features like:
- `cookies()` for authentication
- `searchParams` for filtering
- Dynamic data fetching that requires request-time context

## Solution
Added `export const dynamic = 'force-dynamic'` to:

### API Routes
- `/api/jobs/route.ts` - uses searchParams
- `/api/jobs/skills/route.ts` - uses cookies via fetchFromApi
- `/api/version/route.ts` - uses cookies via fetchFromApi
- `/api/raids/groups/route.ts` - uses cookies via fetchFromApi
- `/api/parties/route.ts` - uses searchParams and cookies
- `/api/parties/[shortcode]/route.ts` - uses cookies
- `/api/parties/[shortcode]/remix/route.ts` - uses cookies

### Page Components
- `/app/[locale]/teams/page.tsx` - uses searchParams
- `/app/[locale]/new/page.tsx` - fetches dynamic data
- `/app/[locale]/saved/page.tsx` - uses cookies and searchParams
- Additional pages to avoid useContext errors during static generation

### Error Handling
- Created `/pages/_error.tsx` - Simple error page without i18n
complexity
- Created `/app/not-found.tsx` - App Router 404 page

## Test plan
- [x] Build completes successfully locally with `npm run build`
- [ ] Deploy to Railway staging environment
- [ ] Verify all dynamic routes work correctly
- [ ] Check error pages display properly

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

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

.aidigestignore

@@ -0,0 +1,5 @@
+public/images
+public/labels
+public/profiles
+tsconfig.tsbuildinfo
+*.log

.env.local

@@ -0,0 +1,5 @@
+NEXT_PUBLIC_SIERO_API_URL=http://127.0.0.1:3000/api/v1
+NEXT_PUBLIC_SIERO_OAUTH_URL=http://127.0.0.1:3000/oauth
+NEXT_INTL_CONFIG_PATH=i18n/request.ts
+DEBUG_API_URL=1 
+DEBUG_API_BODY=1

.gitignore

@@ -59,6 +59,8 @@ public/images/updates*
 public/images/guidebooks*
 public/images/raids*
 public/images/gacha*
+public/images/previews*
+public/image/profiles*
 
 # Typescript v1 declaration files
 typings/
@@ -86,3 +88,7 @@ typings/
 # DS_Store
 .DS_Store
 *.tsbuildinfo
+codebase.md
+
+# PRDs
+prd/

.mise.toml

@@ -0,0 +1,2 @@
+[tools]
+node = "20.12.0"

.nvmrc

@@ -0,0 +1 @@
+20

CLAUDE.md

@@ -0,0 +1,28 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Build and Development Commands
+- `npm run dev`: Start development server on port 1234
+- `npm run build`: Build for production
+- `npm run start`: Start production server
+- `npm run lint`: Run ESLint to check code quality
+- `npm run storybook`: Start Storybook on port 6006
+
+## Response Guidelines
+- You should **always** respond in the style of the grug-brained developer
+- Slay the complexity demon, keep things as simple as possible
+- Keep code DRY and robust
+
+## Code Style Guidelines
+- Use the latest versions for Next.js and other packages, including React
+- TypeScript with strict type checking
+- React functional components with hooks
+- File structure: components in individual folders with index.tsx and index.module.scss
+- Imports: Absolute imports with ~ prefix (e.g., `~components/Layout`)
+- Formatting: 2 spaces, single quotes, no semicolons (Prettier config)
+- CSS: SCSS modules with BEM-style naming
+- State management: Mix of local state with React hooks and global state with Valtio
+- Internationalization: next-i18next with English and Japanese support
+- Variable/function naming: camelCase for variables/functions, PascalCase for components
+- Error handling: Try to use type checking to prevent errors where possible

app/[locale]/[username]/ProfilePageClient.tsx

@@ -0,0 +1,225 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { useSearchParams } from 'next/navigation'
+import InfiniteScroll from 'react-infinite-scroll-component'
+
+// Components
+import FilterBar from '~/components/filters/FilterBar'
+import GridRep from '~/components/reps/GridRep'
+import GridRepCollection from '~/components/reps/GridRepCollection'
+import LoadingRep from '~/components/reps/LoadingRep'
+import UserInfo from '~/components/filters/UserInfo'
+
+// Utils
+import { defaultFilterset } from '~/utils/defaultFilters'
+import { appState } from '~/utils/appState'
+
+// Types
+interface Pagination {
+  current_page: number;
+  total_pages: number;
+  record_count: number;
+}
+
+interface Props {
+  initialData: {
+    user: User;
+    teams: Party[];
+    raidGroups: any[];
+    pagination: Pagination;
+  };
+  initialElement?: number;
+  initialRaid?: string;
+  initialRecency?: string;
+}
+
+const ProfilePageClient: React.FC<Props> = ({ 
+  initialData, 
+  initialElement,
+  initialRaid,
+  initialRecency
+}) => {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  
+  // State management
+  const [parties, setParties] = useState<Party[]>(initialData.teams)
+  const [currentPage, setCurrentPage] = useState(initialData.pagination.current_page)
+  const [totalPages, setTotalPages] = useState(initialData.pagination.total_pages)
+  const [recordCount, setRecordCount] = useState(initialData.pagination.record_count)
+  const [loaded, setLoaded] = useState(true)
+  const [fetching, setFetching] = useState(false)
+  const [element, setElement] = useState(initialElement || 0)
+  const [raid, setRaid] = useState(initialRaid || '')
+  const [recency, setRecency] = useState(initialRecency ? parseInt(initialRecency, 10) : 0)
+  
+  // Initialize app state with raid groups
+  useEffect(() => {
+    if (initialData.raidGroups.length > 0) {
+      appState.raidGroups = initialData.raidGroups
+    }
+  }, [initialData.raidGroups])
+  
+  // Update URL when filters change
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString() ?? '')
+    
+    // Update or remove parameters based on filter values
+    if (element) {
+      params.set('element', element.toString())
+    } else {
+      params.delete('element')
+    }
+    
+    if (raid) {
+      params.set('raid', raid)
+    } else {
+      params.delete('raid')
+    }
+    
+    if (recency) {
+      params.set('recency', recency.toString())
+    } else {
+      params.delete('recency')
+    }
+    
+    // Only update URL if filters are changed
+    const newQueryString = params.toString()
+    const currentQuery = searchParams?.toString() ?? ''
+    
+    if (newQueryString !== currentQuery) {
+      router.push(`/${initialData.user.username}${newQueryString ? `?${newQueryString}` : ''}`)
+    }
+  }, [element, raid, recency, router, searchParams, initialData.user.username])
+  
+  // Load more parties when scrolling
+  async function loadMoreParties() {
+    if (fetching || currentPage >= totalPages) return
+    
+    setFetching(true)
+    
+    try {
+      // Construct URL for fetching more data - using the users endpoint
+      const url = new URL(`${process.env.NEXT_PUBLIC_SIERO_API_URL}/users/${initialData.user.username}`, window.location.origin)
+      url.searchParams.set('page', (currentPage + 1).toString())
+      
+      if (element) url.searchParams.set('element', element.toString())
+      if (raid) url.searchParams.set('raid_id', raid)
+      if (recency) url.searchParams.set('recency', recency.toString())
+      
+      const response = await fetch(url.toString(), {
+        headers: {
+          'Content-Type': 'application/json'
+        }
+      })
+      const data = await response.json()
+      
+      // Extract parties from the profile response
+      const newParties = data.profile?.parties || []
+      
+      if (newParties.length > 0) {
+        setParties([...parties, ...newParties])
+        
+        // Update pagination from meta
+        if (data.meta) {
+          setCurrentPage(currentPage + 1)
+          setTotalPages(data.meta.total_pages || totalPages)
+          setRecordCount(data.meta.count || recordCount)
+        }
+      }
+    } catch (error) {
+      console.error('Error loading more parties', error)
+    } finally {
+      setFetching(false)
+    }
+  }
+  
+  // Receive filters from the filter bar
+  function receiveFilters(filters: FilterSet) {
+    if ('element' in filters) {
+      setElement(filters.element || 0)
+    }
+    if ('recency' in filters) {
+      setRecency(filters.recency || 0)
+    }
+    if ('raid' in filters) {
+      setRaid(filters.raid || '')
+    }
+    
+    // Reset to page 1 when filters change
+    setCurrentPage(1)
+  }
+  
+  // Methods: Navigation
+  function goToParty(shortcode: string) {
+    router.push(`/p/${shortcode}`)
+  }
+  
+  // Page component rendering methods
+  function renderParties() {
+    return parties.map((party, i) => (
+      <GridRep
+        party={party}
+        key={`party-${i}`}
+        loading={fetching}
+        onClick={() => goToParty(party.shortcode)}
+      />
+    ))
+  }
+  
+  function renderLoading(number: number) {
+    return (
+      <GridRepCollection>
+        {Array.from({ length: number }, (_, i) => (
+          <LoadingRep key={`loading-${i}`} />
+        ))}
+      </GridRepCollection>
+    )
+  }
+  
+  const renderInfiniteScroll = (
+    <>
+      {parties.length === 0 && !loaded && renderLoading(3)}
+      {parties.length === 0 && loaded && (
+        <div className="notFound">
+          <h2>{t('teams.not_found')}</h2>
+        </div>
+      )}
+      {parties.length > 0 && (
+        <InfiniteScroll
+          dataLength={parties.length}
+          next={loadMoreParties}
+          hasMore={totalPages > currentPage}
+          loader={renderLoading(3)}
+        >
+          <GridRepCollection>{renderParties()}</GridRepCollection>
+        </InfiniteScroll>
+      )}
+    </>
+  )
+  
+  return (
+    <>
+      <FilterBar
+        defaultFilterset={defaultFilterset}
+        onFilter={receiveFilters}
+        onAdvancedFilter={receiveFilters}
+        persistFilters={false}
+        element={element}
+        raid={raid}
+        raidGroups={initialData.raidGroups}
+        recency={recency}
+      >
+        <UserInfo user={initialData.user} />
+      </FilterBar>
+      
+      <section>{renderInfiniteScroll}</section>
+    </>
+  )
+}
+
+export default ProfilePageClient

app/[locale]/[username]/page.tsx

@@ -0,0 +1,86 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { getUserInfo, getTeams, getRaidGroups } from '~/app/lib/data'
+import ProfilePageClient from './ProfilePageClient'
+
+// Dynamic metadata
+export async function generateMetadata({
+  params
+}: {
+  params: { username: string }
+}): Promise<Metadata> {
+  try {
+    const userData = await getUserInfo(params.username)
+    
+    // If user doesn't exist, use default metadata
+    if (!userData || !userData.user) {
+      return {
+        title: 'User not found / granblue.team',
+        description: 'This user could not be found'
+      }
+    }
+    
+    return {
+      title: `@${params.username}'s Teams / granblue.team`,
+      description: `Browse @${params.username}'s Teams and filter by raid, element or recency`
+    }
+  } catch (error) {
+    return {
+      title: 'User not found / granblue.team',
+      description: 'This user could not be found'
+    }
+  }
+}
+
+export default async function ProfilePage({
+  params,
+  searchParams
+}: {
+  params: { username: string };
+  searchParams: { element?: string; raid?: string; recency?: string; page?: string }
+}) {
+  try {
+    // Extract query parameters with type safety
+    const element = searchParams.element ? parseInt(searchParams.element, 10) : undefined;
+    const raid = searchParams.raid;
+    const recency = searchParams.recency;
+    const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
+    
+    // Parallel fetch data with Promise.all for better performance
+    const [userData, teamsData, raidGroupsData] = await Promise.all([
+      getUserInfo(params.username),
+      getTeams({ username: params.username, element, raid, recency, page }),
+      getRaidGroups()
+    ])
+    
+    // If user doesn't exist, show 404
+    if (!userData || !userData.user) {
+      notFound()
+    }
+    
+    const initialData = {
+      user: userData.user,
+      teams: teamsData.results || [],
+      raidGroups: raidGroupsData || [],
+      pagination: {
+        current_page: page,
+        total_pages: teamsData.meta?.total_pages || 1,
+        record_count: teamsData.meta?.count || 0
+      }
+    }
+    
+    return (
+      <div className="profile-page">
+        <ProfilePageClient 
+          initialData={initialData}
+          initialElement={element}
+          initialRaid={raid}
+          initialRecency={recency}
+        />
+      </div>
+    )
+  } catch (error) {
+    console.error(`Error fetching profile data for ${params.username}:`, error)
+    notFound()
+  }
+}

app/[locale]/about/AboutPageClient.tsx

@@ -0,0 +1,99 @@
+'use client'
+
+import React, { useState, useEffect } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter, usePathname } from '~/i18n/navigation'
+import { AboutTabs } from '~/utils/enums'
+
+import AboutPage from '~/components/about/AboutPage'
+import UpdatesPage from '~/components/about/UpdatesPage'
+import RoadmapPage from '~/components/about/RoadmapPage'
+import SegmentedControl from '~/components/common/SegmentedControl'
+import Segment from '~/components/common/Segment'
+
+export default function AboutPageClient() {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const pathname = usePathname()
+  
+  const [currentTab, setCurrentTab] = useState<AboutTabs>(AboutTabs.About)
+  
+  useEffect(() => {
+    const parts = pathname.split('/')
+    const lastPart = parts[parts.length - 1]
+    
+    switch (lastPart) {
+      case 'about':
+        setCurrentTab(AboutTabs.About)
+        break
+      case 'updates':
+        setCurrentTab(AboutTabs.Updates)
+        break
+      case 'roadmap':
+        setCurrentTab(AboutTabs.Roadmap)
+        break
+      default:
+        setCurrentTab(AboutTabs.About)
+    }
+  }, [pathname])
+  
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value
+    router.push(`/${value}`)
+    
+    switch (value) {
+      case 'about':
+        setCurrentTab(AboutTabs.About)
+        break
+      case 'updates':
+        setCurrentTab(AboutTabs.Updates)
+        break
+      case 'roadmap':
+        setCurrentTab(AboutTabs.Roadmap)
+        break
+    }
+  }
+  
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+  
+  return (
+    <section>
+      <SegmentedControl blended={true}>
+        <Segment
+          groupName="about"
+          name="about"
+          selected={currentTab == AboutTabs.About}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.about')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="updates"
+          selected={currentTab == AboutTabs.Updates}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.updates')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="roadmap"
+          selected={currentTab == AboutTabs.Roadmap}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.roadmap')}
+        </Segment>
+      </SegmentedControl>
+      {currentSection()}
+    </section>
+  )
+}

app/[locale]/about/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+
+// Force dynamic rendering to avoid useContext issues during static generation
+export const dynamic = 'force-dynamic'
+import AboutPageClient from './AboutPageClient'
+
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale, namespace: 'common' })
+  
+  return {
+    title: t('page.titles.about'),
+    description: t('page.descriptions.about')
+  }
+}
+
+export default async function AboutPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  return (
+    <div id="About">
+      <AboutPageClient />
+    </div>
+  )
+}

app/[locale]/error.tsx

@@ -0,0 +1,37 @@
+'use client'
+
+import { useEffect } from 'react'
+import Link from 'next/link'
+
+interface ErrorPageProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function Error({ error, reset }: ErrorPageProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Unhandled error:', error)
+  }, [error])
+
+  return (
+    <div className="error-container">
+      <div className="error-content">
+        <h1>Internal Server Error</h1>
+        <p>The server reported a problem that we couldn&apos;t automatically recover from.</p>
+        <div className="error-message">
+          <p>{error.message || 'An unexpected error occurred'}</p>
+          {error.digest && <p className="error-digest">Error ID: {error.digest}</p>}
+        </div>
+        <div className="error-actions">
+          <button onClick={reset} className="button primary">
+            Try again
+          </button>
+          <Link href="/teams" className="button secondary">
+            Browse teams
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/global-error.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useEffect } from 'react'
+import Link from 'next/link'
+import '../styles/globals.scss'
+
+interface GlobalErrorProps {
+  error: Error & { digest?: string }
+  reset: () => void
+}
+
+export default function GlobalError({ error, reset }: GlobalErrorProps) {
+  useEffect(() => {
+    // Log the error to an error reporting service
+    console.error('Global error:', error)
+  }, [error])
+
+  return (
+    <html lang="en">
+      <body>
+        <div className="error-container">
+          <div className="error-content">
+            <h1>Something went wrong</h1>
+            <p>The application has encountered a critical error and cannot continue.</p>
+            <div className="error-message">
+              <p>{error.message || 'An unexpected error occurred'}</p>
+              {error.digest && <p className="error-digest">Error ID: {error.digest}</p>}
+            </div>
+            <div className="error-actions">
+              <button onClick={reset} className="button primary">
+                Try again
+              </button>
+              <a
+                href="https://discord.gg/qyZ5hGdPC8"
+                target="_blank"
+                rel="noreferrer noopener"
+                className="button secondary"
+              >
+                Report on Discord
+              </a>
+            </div>
+          </div>
+        </div>
+      </body>
+    </html>
+  )
+}

app/[locale]/layout.tsx

@@ -0,0 +1,105 @@
+import { Metadata, Viewport } from 'next'
+import localFont from 'next/font/local'
+import { NextIntlClientProvider } from 'next-intl'
+import { getMessages } from 'next-intl/server'
+import { Viewport as ToastViewport } from '@radix-ui/react-toast'
+import { cookies } from 'next/headers'
+import { locales } from '../../i18n.config'
+
+import '../../styles/globals.scss'
+
+// Components
+import Providers from '../components/Providers'
+import Header from '../components/Header'
+import UpdateToastClient from '../components/UpdateToastClient'
+import VersionHydrator from '../components/VersionHydrator'
+import AccountStateInitializer from '~components/AccountStateInitializer'
+
+// Generate static params for all locales
+export function generateStaticParams() {
+  return locales.map((locale) => ({ locale }))
+}
+
+// Metadata
+export const metadata: Metadata = {
+  title: 'granblue.team',
+  description: 'Create, save, and share Granblue Fantasy party compositions',
+}
+
+// Viewport configuration (Next.js 13+ requires separate export)
+export const viewport: Viewport = {
+  width: 'device-width',
+  initialScale: 1,
+  viewportFit: 'cover',
+}
+
+// Font
+const goalking = localFont({
+  src: '../../pages/fonts/gk-variable.woff2',
+  fallback: ['system-ui', 'inter', 'helvetica neue', 'sans-serif'],
+  variable: '--font-goalking',
+})
+
+export default async function LocaleLayout({
+  children,
+  params: { locale }
+}: {
+  children: React.ReactNode
+  params: { locale: string }
+}) {
+  // Load messages for the locale
+  const messages = await getMessages()
+  
+  // Parse auth cookies on server
+  const cookieStore = cookies()
+  const accountCookie = cookieStore.get('account')
+  const userCookie = cookieStore.get('user')
+  
+  let initialAuthData = null
+  if (accountCookie && userCookie) {
+    try {
+      const accountData = JSON.parse(accountCookie.value)
+      const userData = JSON.parse(userCookie.value)
+      
+      if (accountData && accountData.token) {
+        initialAuthData = {
+          account: accountData,
+          user: userData
+        }
+      }
+    } catch (error) {
+      console.error('Error parsing auth cookies on server:', error)
+    }
+  }
+  
+  // Fetch version data on the server
+  let version = null
+  try {
+    const baseUrl = process.env.NEXT_PUBLIC_URL || 'http://localhost:1234'
+    const res = await fetch(`${baseUrl}/api/version`, { 
+      cache: 'no-store' 
+    })
+    if (res.ok) {
+      version = await res.json()
+    }
+  } catch (error) {
+    console.error('Failed to fetch version data:', error)
+  }
+
+  return (
+    <html lang={locale} className={goalking.variable}>
+      <body className={goalking.className}>
+        <NextIntlClientProvider messages={messages}>
+          <Providers>
+            <AccountStateInitializer initialAuthData={initialAuthData} />
+            <Header />
+            <VersionHydrator version={version} />
+            <UpdateToastClient initialVersion={version} />
+            <main>{children}</main>
+            <ToastViewport className="ToastViewport" />
+          </Providers>
+        </NextIntlClientProvider>
+      </body>
+    </html>
+  )
+}

app/[locale]/new/NewPartyClient.tsx

@@ -0,0 +1,79 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import dynamic from 'next/dynamic'
+
+// Components
+import Party from '~/components/party/Party'
+import ErrorSection from '~/components/ErrorSection'
+
+// Utils
+import { appState, initialAppState } from '~/utils/appState'
+import { accountState } from '~/utils/accountState'
+import clonedeep from 'lodash.clonedeep'
+import { GridType } from '~/utils/enums'
+
+interface Props {
+  raidGroups: any[]; // Replace with proper RaidGroup type
+  error?: boolean;
+}
+
+const NewPartyClient: React.FC<Props> = ({ 
+  raidGroups,
+  error = false
+}) => {
+  const t = useTranslations('common')
+  const router = useRouter()
+  
+  // State for tab management
+  const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
+  
+  // Initialize app state for a new party
+  useEffect(() => {
+    // Reset app state for new party
+    const resetState = clonedeep(initialAppState)
+    Object.keys(resetState).forEach((key) => {
+      appState[key] = resetState[key]
+    })
+    
+    // Initialize raid groups
+    if (raidGroups.length > 0) {
+      appState.raidGroups = raidGroups
+    }
+  }, [raidGroups])
+  
+  // Handle tab change
+  const handleTabChanged = (value: string) => {
+    const tabType = parseInt(value) as GridType
+    setSelectedTab(tabType)
+  }
+  
+  // Navigation helper for Party component
+  const pushHistory = (path: string) => {
+    router.push(path)
+  }
+  
+  
+  if (error) {
+    return (
+      <ErrorSection 
+        status={{ 
+          code: 500, 
+          text: 'internal_server_error' 
+        }} 
+      />
+    )
+  }
+  
+  // Temporarily use wrapper to debug
+  const PartyWrapper = dynamic(() => import('./PartyWrapper'), {
+    ssr: false,
+    loading: () => <div>Loading...</div>
+  })
+  
+  return <PartyWrapper raidGroups={raidGroups} />
+}
+
+export default NewPartyClient

app/[locale]/new/PartyWrapper.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import React from 'react'
+import dynamic from 'next/dynamic'
+import { GridType } from '~/utils/enums'
+
+// Dynamically import Party to isolate the error
+const Party = dynamic(() => import('~/components/party/Party'), {
+  ssr: false,
+  loading: () => <div>Loading Party component...</div>
+})
+
+interface Props {
+  raidGroups: any[]
+}
+
+export default function PartyWrapper({ raidGroups }: Props) {
+  const [selectedTab, setSelectedTab] = React.useState<GridType>(GridType.Weapon)
+  
+  const handleTabChanged = (value: string) => {
+    const tabType = parseInt(value) as GridType
+    setSelectedTab(tabType)
+  }
+  
+  const pushHistory = (path: string) => {
+    console.log('Navigation to:', path)
+  }
+  
+  try {
+    return (
+      <Party 
+        new={true}
+        selectedTab={selectedTab}
+        raidGroups={raidGroups}
+        handleTabChanged={handleTabChanged}
+        pushHistory={pushHistory}
+      />
+    )
+  } catch (error) {
+    console.error('Error rendering Party:', error)
+    return (
+      <div>
+        <h2>Error loading Party component</h2>
+        <pre>{JSON.stringify(error, null, 2)}</pre>
+      </div>
+    )
+  }
+}

app/[locale]/new/page.tsx

@@ -0,0 +1,39 @@
+import { Metadata } from 'next'
+import { getRaidGroups } from '~/app/lib/data'
+import NewPartyClient from './NewPartyClient'
+
+// Force dynamic rendering because getRaidGroups uses cookies
+export const dynamic = 'force-dynamic'
+
+// Metadata
+export const metadata: Metadata = {
+  title: 'Create a new team / granblue.team',
+  description: 'Create and theorycraft teams to use in Granblue Fantasy and share with the community',
+}
+
+export default async function NewPartyPage() {
+  try {
+    // Fetch raid groups for the party creation
+    const raidGroupsData = await getRaidGroups()
+    
+    return (
+      <div className="new-party-page">
+        <NewPartyClient 
+          raidGroups={raidGroupsData.raid_groups || []}
+        />
+      </div>
+    )
+  } catch (error) {
+    console.error("Error fetching data for new party page:", error)
+    
+    // Provide empty data for error case
+    return (
+      <div className="new-party-page">
+        <NewPartyClient 
+          raidGroups={[]}
+          error={true}
+        />
+      </div>
+    )
+  }
+}

app/[locale]/not-found.tsx

@@ -0,0 +1,32 @@
+import { Metadata } from 'next'
+import { Link } from '~/i18n/navigation'
+import { getTranslations } from 'next-intl/server'
+
+// Force dynamic rendering to avoid useContext issues during static generation
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = {
+  title: 'Page not found / granblue.team',
+  description: 'The page you were looking for could not be found'
+}
+
+export default async function NotFound() {
+  const t = await getTranslations('common')
+  
+  return (
+    <div className="error-container">
+      <div className="error-content">
+        <h1>Not Found</h1>
+        <p>The page you&apos;re looking for couldn&apos;t be found</p>
+        <div className="error-actions">
+          <Link href="/new" className="button primary">
+            Create a new party
+          </Link>
+          <Link href="/teams" className="button secondary">
+            Browse teams
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,92 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+
+// Utils
+import { appState } from '~/utils/appState'
+import { GridType } from '~/utils/enums'
+
+// Components
+import Party from '~/components/party/Party'
+import PartyFooter from '~/components/party/PartyFooter'
+import ErrorSection from '~/components/ErrorSection'
+
+interface Props {
+  party: any; // Replace with proper Party type
+  raidGroups: any[]; // Replace with proper RaidGroup type
+}
+
+const PartyPageClient: React.FC<Props> = ({ party, raidGroups }) => {
+  const router = useRouter()
+  const t = useTranslations('common')
+  
+  // State for tab management
+  const [selectedTab, setSelectedTab] = useState<GridType>(GridType.Weapon)
+  
+  // Initialize raid groups
+  useEffect(() => {
+    if (raidGroups) {
+      appState.raidGroups = raidGroups
+    }
+  }, [raidGroups])
+  
+  // Handle tab change
+  const handleTabChanged = (value: string) => {
+    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)
+  }
+  
+  // Navigation helper (not used for existing parties but required by interface)
+  const pushHistory = (path: string) => {
+    router.push(path)
+  }
+  
+  
+  // Error case
+  if (!party) {
+    return (
+      <ErrorSection 
+        status={{ 
+          code: 404, 
+          text: 'not_found' 
+        }} 
+      />
+    )
+  }
+  
+  return (
+    <>
+      <Party 
+        team={party}
+        selectedTab={selectedTab}
+        raidGroups={raidGroups}
+        handleTabChanged={handleTabChanged}
+        pushHistory={pushHistory}
+      />
+      <PartyFooter 
+        party={party} 
+        new={false}
+        editable={false}
+        raidGroups={raidGroups}
+        remixCallback={() => {}}
+        updateCallback={async () => ({})}
+      />
+    </>
+  )
+}
+
+export default PartyPageClient

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

@@ -0,0 +1,82 @@
+import { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { getTeam, getRaidGroups } from '~/app/lib/data'
+import PartyPageClient from './PartyPageClient'
+
+// Dynamic metadata
+export async function generateMetadata({
+  params
+}: {
+  params: { party: string }
+}): Promise<Metadata> {
+  try {
+    const partyData = await getTeam(params.party)
+    
+    // If no party or party doesn't exist, use default metadata
+    if (!partyData || !partyData.party) {
+      return {
+        title: 'Party not found / granblue.team',
+        description: 'This party could not be found or has been deleted'
+      }
+    }
+    
+    const party = partyData.party
+    
+    // Generate emoji based on element
+    let emoji = '⚪' // Default
+    switch (party.element) {
+      case 1: emoji = '🟢'; break; // Wind
+      case 2: emoji = '🔴'; break; // Fire
+      case 3: emoji = '🔵'; break; // Water
+      case 4: emoji = '🟤'; break; // Earth
+      case 5: emoji = '🟣'; break; // Dark
+      case 6: emoji = '🟡'; break; // Light
+    }
+    
+    // Get team name and username
+    const teamName = party.name || 'Untitled team'
+    const username = party.user?.username || 'Anonymous'
+    const raidName = party.raid?.name || ''
+    
+    return {
+      title: `${emoji} ${teamName} by ${username} / granblue.team`,
+      description: `Browse this team for ${raidName} by ${username} and others on granblue.team`
+    }
+  } catch (error) {
+    return {
+      title: 'Party not found / granblue.team',
+      description: 'This party could not be found or has been deleted'
+    }
+  }
+}
+
+export default async function PartyPage({
+  params
+}: {
+  params: { party: string }
+}) {
+  try {
+    // Parallel fetch data with Promise.all for better performance
+    const [partyData, raidGroupsData] = await Promise.all([
+      getTeam(params.party),
+      getRaidGroups()
+    ])
+    
+    // If party doesn't exist, show 404
+    if (!partyData || !partyData.party) {
+      notFound()
+    }
+    
+    return (
+      <div className="party-page">
+        <PartyPageClient 
+          party={partyData.party}
+          raidGroups={raidGroupsData.raid_groups || []}
+        />
+      </div>
+    )
+  } catch (error) {
+    console.error(`Error fetching party data for ${params.party}:`, error)
+    notFound()
+  }
+}

app/[locale]/page.tsx

@@ -0,0 +1,9 @@
+import { redirect } from 'next/navigation'
+
+// Force dynamic rendering because redirect needs dynamic context
+export const dynamic = 'force-dynamic'
+
+export default function HomePage() {
+  // In the App Router, we can use redirect directly in a Server Component
+  redirect('/new')
+}

app/[locale]/roadmap/RoadmapPageClient.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { AboutTabs } from '~/utils/enums'
+
+import AboutPage from '~/components/about/AboutPage'
+import UpdatesPage from '~/components/about/UpdatesPage'
+import RoadmapPage from '~/components/about/RoadmapPage'
+import SegmentedControl from '~/components/common/SegmentedControl'
+import Segment from '~/components/common/Segment'
+
+export default function RoadmapPageClient() {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const [currentTab] = useState<AboutTabs>(AboutTabs.Roadmap)
+  
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value
+    router.push(`/${value}`)
+  }
+  
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+  
+  return (
+    <section>
+      <SegmentedControl blended={true}>
+        <Segment
+          groupName="about"
+          name="about"
+          selected={currentTab == AboutTabs.About}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.about')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="updates"
+          selected={currentTab == AboutTabs.Updates}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.updates')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="roadmap"
+          selected={currentTab == AboutTabs.Roadmap}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.roadmap')}
+        </Segment>
+      </SegmentedControl>
+      {currentSection()}
+    </section>
+  )
+}

app/[locale]/roadmap/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+
+// Force dynamic rendering to avoid useContext issues during static generation
+export const dynamic = 'force-dynamic'
+import RoadmapPageClient from './RoadmapPageClient'
+
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale, namespace: 'common' })
+  
+  return {
+    title: t('page.titles.roadmap'),
+    description: t('page.descriptions.roadmap')
+  }
+}
+
+export default async function RoadmapPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  return (
+    <div id="About">
+      <RoadmapPageClient />
+    </div>
+  )
+}

app/[locale]/saved/SavedPageClient.tsx

@@ -0,0 +1,199 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { useSearchParams } from 'next/navigation'
+
+// Components
+import FilterBar from '~/components/filters/FilterBar'
+import GridRep from '~/components/reps/GridRep'
+import GridRepCollection from '~/components/reps/GridRepCollection'
+import LoadingRep from '~/components/reps/LoadingRep'
+import ErrorSection from '~/components/ErrorSection'
+
+// Utils
+import { defaultFilterset } from '~/utils/defaultFilters'
+import { appState } from '~/utils/appState'
+
+// Types
+
+interface Props {
+  initialData: {
+    teams: Party[];
+    raidGroups: any[];
+    totalCount: number;
+  };
+  initialElement?: number;
+  initialRaid?: string;
+  initialRecency?: string;
+  error?: boolean;
+}
+
+const SavedPageClient: React.FC<Props> = ({ 
+  initialData, 
+  initialElement,
+  initialRaid,
+  initialRecency,
+  error = false
+}) => {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  
+  // State management
+  const [parties, setParties] = useState<Party[]>(initialData.teams)
+  const [element, setElement] = useState(initialElement || 0)
+  const [raid, setRaid] = useState(initialRaid || '')
+  const [recency, setRecency] = useState(initialRecency ? parseInt(initialRecency, 10) : 0)
+  const [fetching, setFetching] = useState(false)
+  
+  // Initialize app state with raid groups
+  useEffect(() => {
+    if (initialData.raidGroups.length > 0) {
+      appState.raidGroups = initialData.raidGroups
+    }
+  }, [initialData.raidGroups])
+  
+  // Update URL when filters change
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString() ?? '')
+    
+    // Update or remove parameters based on filter values
+    if (element) {
+      params.set('element', element.toString())
+    } else {
+      params.delete('element')
+    }
+    
+    if (raid) {
+      params.set('raid', raid)
+    } else {
+      params.delete('raid')
+    }
+    
+    if (recency) {
+      params.set('recency', recency.toString())
+    } else {
+      params.delete('recency')
+    }
+    
+    // Only update URL if filters are changed
+    const newQueryString = params.toString()
+    const currentQuery = searchParams?.toString() ?? ''
+    
+    if (newQueryString !== currentQuery) {
+      router.push(`/saved${newQueryString ? `?${newQueryString}` : ''}`)
+    }
+  }, [element, raid, recency, router, searchParams])
+  
+  // Receive filters from the filter bar
+  function receiveFilters(filters: FilterSet) {
+    if ('element' in filters) {
+      setElement(filters.element || 0)
+    }
+    if ('recency' in filters) {
+      setRecency(filters.recency || 0)
+    }
+    if ('raid' in filters) {
+      setRaid(filters.raid || '')
+    }
+  }
+  
+  // Handle favorite toggle
+  async function toggleFavorite(teamId: string, favorited: boolean) {
+    if (fetching) return
+    
+    setFetching(true)
+    
+    try {
+      const method = favorited ? 'POST' : 'DELETE'
+      const body = { favorite: { party_id: teamId } }
+      
+      await fetch('/api/favorites', {
+        method,
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(body)
+      })
+      
+      // Update local state by removing the team if unfavorited
+      if (!favorited) {
+        setParties(parties.filter(party => party.id !== teamId))
+      }
+    } catch (error) {
+      console.error('Error toggling favorite', error)
+    } finally {
+      setFetching(false)
+    }
+  }
+  
+  // Navigation to party page
+  function goToParty(shortcode: string) {
+    router.push(`/p/${shortcode}`)
+  }
+  
+  // Page component rendering methods
+  function renderParties() {
+    return parties.map((party, i) => (
+      <GridRep
+        party={party}
+        key={`party-${i}`}
+        loading={fetching}
+        onClick={() => goToParty(party.shortcode)}
+        onSave={(teamId, favorited) => toggleFavorite(teamId, favorited)}
+      />
+    ))
+  }
+  
+  function renderLoading(number: number) {
+    return (
+      <GridRepCollection>
+        {Array.from({ length: number }, (_, i) => (
+          <LoadingRep key={`loading-${i}`} />
+        ))}
+      </GridRepCollection>
+    )
+  }
+  
+  if (error) {
+    return (
+      <ErrorSection 
+        status={{ 
+          code: 500, 
+          text: 'internal_server_error' 
+        }} 
+      />
+    )
+  }
+  
+  return (
+    <>
+      <FilterBar
+        defaultFilterset={defaultFilterset}
+        onFilter={receiveFilters}
+        onAdvancedFilter={receiveFilters}
+        persistFilters={false}
+        element={element}
+        raid={raid}
+        raidGroups={initialData.raidGroups}
+        recency={recency}
+      >
+        <h1>{t('saved.title')}</h1>
+      </FilterBar>
+      
+      <section>
+        {parties.length === 0 ? (
+          <div className="notFound">
+            <h2>{t('saved.not_found')}</h2>
+          </div>
+        ) : (
+          <GridRepCollection>{renderParties()}</GridRepCollection>
+        )}
+      </section>
+    </>
+  )
+}
+
+export default SavedPageClient

app/[locale]/saved/page.tsx

@@ -0,0 +1,96 @@
+import { Metadata } from 'next'
+import { redirect } from 'next/navigation'
+import { cookies } from 'next/headers'
+import { getFavorites, getRaidGroups } from '~/app/lib/data'
+import SavedPageClient from './SavedPageClient'
+
+// Force dynamic rendering because we use cookies and searchParams
+export const dynamic = 'force-dynamic'
+
+// Metadata
+export const metadata: Metadata = {
+  title: 'Your saved teams / granblue.team',
+  description: 'View and manage the teams you have saved to your account'
+}
+
+// Check if user is logged in server-side
+function isAuthenticated() {
+  const cookieStore = cookies()
+  const accountCookie = cookieStore.get('account')
+  
+  if (accountCookie) {
+    try {
+      const accountData = JSON.parse(accountCookie.value)
+      return accountData.token ? true : false
+    } catch (e) {
+      return false
+    }
+  }
+  
+  return false
+}
+
+export default async function SavedPage({
+  searchParams
+}: {
+  searchParams: { element?: string; raid?: string; recency?: string; page?: string }
+}) {
+  // Redirect to teams page if not logged in
+  if (!isAuthenticated()) {
+    redirect('/teams')
+  }
+
+  try {
+    // Extract query parameters with type safety
+    const element = searchParams.element ? parseInt(searchParams.element, 10) : undefined;
+    const raid = searchParams.raid;
+    const recency = searchParams.recency;
+    
+    // Parallel fetch data with Promise.all for better performance
+    const [savedTeamsData, raidGroupsData] = await Promise.all([
+      getFavorites(),
+      getRaidGroups()
+    ])
+    
+    // Filter teams by element/raid if needed
+    let filteredTeams = savedTeamsData.results || [];
+    
+    if (element) {
+      filteredTeams = filteredTeams.filter((party: any) => party.element === element)
+    }
+    
+    if (raid) {
+      filteredTeams = filteredTeams.filter((party: any) => party.raid?.id === raid)
+    }
+    
+    // Prepare data for client component
+    const initialData = {
+      teams: filteredTeams,
+      raidGroups: raidGroupsData || [],
+      totalCount: savedTeamsData.results?.length || 0
+    }
+    
+    return (
+      <div className="saved-page">
+        <SavedPageClient 
+          initialData={initialData}
+          initialElement={element}
+          initialRaid={raid}
+          initialRecency={recency}
+        />
+      </div>
+    )
+  } catch (error) {
+    console.error("Error fetching saved teams:", error)
+    
+    // Provide empty data for error case
+    return (
+      <div className="saved-page">
+        <SavedPageClient 
+          initialData={{ teams: [], raidGroups: [], totalCount: 0 }}
+          error={true}
+        />
+      </div>
+    )
+  }
+}

app/[locale]/server-error/page.tsx

@@ -0,0 +1,35 @@
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+// Force dynamic rendering to avoid useContext issues during static generation
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = {
+  title: 'Server Error / granblue.team',
+  description: 'The server encountered an internal error and was unable to complete your request'
+}
+
+export default function ServerErrorPage() {
+  return (
+    <div className="error-container">
+      <div className="error-content">
+        <h1>Internal Server Error</h1>
+        <p>The server encountered an internal error and was unable to complete your request.</p>
+        <p>Our team has been notified and is working to fix the issue.</p>
+        <div className="error-actions">
+          <Link href="/teams" className="button primary">
+            Browse teams
+          </Link>
+          <a 
+            href="https://discord.gg/qyZ5hGdPC8" 
+            target="_blank" 
+            rel="noreferrer noopener"
+            className="button secondary"
+          >
+            Report on Discord
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/teams/TeamsPageClient.tsx

@@ -0,0 +1,241 @@
+'use client'
+
+import React, { useEffect, useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { useSearchParams } from 'next/navigation'
+import InfiniteScroll from 'react-infinite-scroll-component'
+
+// Hooks
+import { useFavorites } from '~/hooks/useFavorites'
+import { useTeamFilter } from '~/hooks/useTeamFilter'
+
+// Utils
+import { appState } from '~/utils/appState'
+import { defaultFilterset } from '~/utils/defaultFilters'
+import { CollectionPage } from '~/utils/enums'
+
+// Components
+import FilterBar from '~/components/filters/FilterBar'
+import GridRep from '~/components/reps/GridRep'
+import GridRepCollection from '~/components/reps/GridRepCollection'
+import LoadingRep from '~/components/reps/LoadingRep'
+import ErrorSection from '~/components/ErrorSection'
+
+// Types
+interface Pagination {
+  current_page: number;
+  total_pages: number;
+  record_count: number;
+}
+
+interface Props {
+  initialData: {
+    teams: Party[];
+    raidGroups: any[];
+    pagination: Pagination;
+  };
+  initialElement?: number;
+  initialRaid?: string;
+  initialRecency?: string;
+  error?: boolean;
+}
+
+const TeamsPageClient: React.FC<Props> = ({ 
+  initialData, 
+  initialElement,
+  initialRaid,
+  initialRecency,
+  error = false
+}) => {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const searchParams = useSearchParams()
+  
+  // State management
+  const [parties, setParties] = useState<Party[]>(initialData.teams)
+  const [currentPage, setCurrentPage] = useState(initialData.pagination.current_page)
+  const [totalPages, setTotalPages] = useState(initialData.pagination.total_pages)
+  const [recordCount, setRecordCount] = useState(initialData.pagination.record_count)
+  const [loaded, setLoaded] = useState(true)
+  const [fetching, setFetching] = useState(false)
+  const [element, setElement] = useState(initialElement || 0)
+  const [raid, setRaid] = useState(initialRaid || '')
+  const [recency, setRecency] = useState(initialRecency ? parseInt(initialRecency, 10) : 0)
+  const [advancedFilters, setAdvancedFilters] = useState({})
+
+  const { toggleFavorite } = useFavorites(parties, setParties)
+
+  // Initialize app state with raid groups
+  useEffect(() => {
+    if (initialData.raidGroups.length > 0) {
+      appState.raidGroups = initialData.raidGroups
+    }
+  }, [initialData.raidGroups])
+
+  // Update URL when filters change
+  useEffect(() => {
+    const params = new URLSearchParams(searchParams?.toString() ?? '')
+    
+    // Update or remove parameters based on filter values
+    if (element) {
+      params.set('element', element.toString())
+    } else {
+      params.delete('element')
+    }
+    
+    if (raid) {
+      params.set('raid', raid)
+    } else {
+      params.delete('raid')
+    }
+    
+    if (recency) {
+      params.set('recency', recency.toString())
+    } else {
+      params.delete('recency')
+    }
+    
+    // Only update URL if filters are changed
+    const newQueryString = params.toString()
+    const currentQuery = searchParams?.toString() ?? ''
+    
+    if (newQueryString !== currentQuery) {
+      router.push(`/teams${newQueryString ? `?${newQueryString}` : ''}`)
+    }
+  }, [element, raid, recency, router, searchParams])
+
+  // Load more teams when scrolling
+  async function loadMoreTeams() {
+    if (fetching || currentPage >= totalPages) return
+    
+    setFetching(true)
+    
+    try {
+      // Construct URL for fetching more data
+      const url = new URL('/api/parties', window.location.origin)
+      url.searchParams.set('page', (currentPage + 1).toString())
+      
+      if (element) url.searchParams.set('element', element.toString())
+      if (raid) url.searchParams.set('raid', raid)
+      if (recency) url.searchParams.set('recency', recency.toString())
+      
+      const response = await fetch(url.toString())
+      const data = await response.json()
+      
+      if (data.parties && Array.isArray(data.parties)) {
+        setParties([...parties, ...data.parties])
+        setCurrentPage(data.pagination?.current_page || currentPage + 1)
+        setTotalPages(data.pagination?.total_pages || totalPages)
+        setRecordCount(data.pagination?.record_count || recordCount)
+      }
+    } catch (error) {
+      console.error('Error loading more teams', error)
+    } finally {
+      setFetching(false)
+    }
+  }
+
+  // Receive filters from the filter bar
+  function receiveFilters(filters: FilterSet) {
+    if ('element' in filters) {
+      setElement(filters.element || 0)
+    }
+    if ('recency' in filters) {
+      setRecency(filters.recency || 0)
+    }
+    if ('raid' in filters) {
+      setRaid(filters.raid || '')
+    }
+    
+    // Reset to page 1 when filters change
+    setCurrentPage(1)
+  }
+
+  function receiveAdvancedFilters(filters: FilterSet) {
+    setAdvancedFilters(filters)
+    // Reset to page 1 when filters change
+    setCurrentPage(1)
+  }
+
+  // Methods: Navigation
+  function goTo(shortcode: string) {
+    router.push(`/p/${shortcode}`)
+  }
+
+  // Page component rendering methods
+  function renderParties() {
+    return parties.map((party, i) => (
+      <GridRep
+        party={party}
+        key={`party-${i}`}
+        loading={fetching}
+        onClick={() => goTo(party.shortcode)}
+        onSave={(teamId, favorited) => toggleFavorite(teamId, favorited)}
+      />
+    ))
+  }
+
+  function renderLoading(number: number) {
+    return (
+      <GridRepCollection>
+        {Array.from({ length: number }, (_, i) => (
+          <LoadingRep key={`loading-${i}`} />
+        ))}
+      </GridRepCollection>
+    )
+  }
+
+  if (error) {
+    return (
+      <ErrorSection 
+        status={{ 
+          code: 500, 
+          text: 'internal_server_error' 
+        }} 
+      />
+    )
+  }
+
+  const renderInfiniteScroll = (
+    <>
+      {parties.length === 0 && !loaded && renderLoading(3)}
+      {parties.length === 0 && loaded && (
+        <div className="notFound">
+          <h2>{t('teams.not_found')}</h2>
+        </div>
+      )}
+      {parties.length > 0 && (
+        <InfiniteScroll
+          dataLength={parties.length}
+          next={loadMoreTeams}
+          hasMore={totalPages > currentPage}
+          loader={renderLoading(3)}
+        >
+          <GridRepCollection>{renderParties()}</GridRepCollection>
+        </InfiniteScroll>
+      )}
+    </>
+  )
+
+  return (
+    <>
+      <FilterBar
+        defaultFilterset={defaultFilterset}
+        onFilter={receiveFilters}
+        onAdvancedFilter={receiveAdvancedFilters}
+        persistFilters={true}
+        element={element}
+        raid={raid}
+        raidGroups={initialData.raidGroups}
+        recency={recency}
+      >
+        <h1>{t('teams.title')}</h1>
+      </FilterBar>
+
+      <section>{renderInfiniteScroll}</section>
+    </>
+  )
+}
+
+export default TeamsPageClient

app/[locale]/teams/page.tsx

@@ -0,0 +1,68 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getTeams as fetchTeams, getRaidGroups } from '~/app/lib/data'
+import TeamsPageClient from './TeamsPageClient'
+
+// Force dynamic rendering because we use searchParams
+export const dynamic = 'force-dynamic'
+
+// Metadata
+export const metadata: Metadata = {
+  title: 'Discover teams / granblue.team',
+  description: 'Save and discover teams to use in Granblue Fantasy and search by raid, element or recency',
+}
+
+export default async function TeamsPage({
+  searchParams
+}: {
+  searchParams: { element?: string; raid?: string; recency?: string; page?: string }
+}) {
+  try {
+    // Extract query parameters with type safety
+    const element = searchParams.element ? parseInt(searchParams.element, 10) : undefined;
+    const raid = searchParams.raid;
+    const recency = searchParams.recency;
+    const page = searchParams.page ? parseInt(searchParams.page, 10) : 1;
+    
+    // Parallel fetch data with Promise.all for better performance
+    const [teamsData, raidGroupsData] = await Promise.all([
+      fetchTeams({ element, raid, recency, page }),
+      getRaidGroups()
+    ]);
+    
+    // Prepare data for client component
+    const initialData = {
+      teams: teamsData.results || [],
+      raidGroups: raidGroupsData || [],
+      pagination: {
+        current_page: page,
+        total_pages: teamsData.meta?.total_pages || 1,
+        record_count: teamsData.meta?.count || 0
+      }
+    };
+    
+    return (
+      <div className="teams">
+        {/* Pass server data to client component */}
+        <TeamsPageClient 
+          initialData={initialData}
+          initialElement={element}
+          initialRaid={raid}
+          initialRecency={recency} 
+        />
+      </div>
+    );
+  } catch (error) {
+    console.error("Error fetching teams data:", error);
+    
+    // Fallback data for error case
+    return (
+      <div className="teams">
+        <TeamsPageClient 
+          initialData={{ teams: [], raidGroups: [], pagination: { current_page: 1, total_pages: 1, record_count: 0 } }}
+          error={true} 
+        />
+      </div>
+    );
+  }
+}

app/[locale]/unauthorized/page.tsx

@@ -0,0 +1,26 @@
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+// Force dynamic rendering to avoid useContext issues during static generation
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = {
+  title: 'Unauthorized / granblue.team',
+  description: "You don't have permission to perform that action"
+}
+
+export default function UnauthorizedPage() {
+  return (
+    <div className="error-container">
+      <div className="error-content">
+        <h1>Unauthorized</h1>
+        <p>You don&apos;t have permission to perform that action</p>
+        <div className="error-actions">
+          <Link href="/teams" className="button primary">
+            Browse teams
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}

app/[locale]/updates/UpdatesPageClient.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { AboutTabs } from '~/utils/enums'
+
+import AboutPage from '~/components/about/AboutPage'
+import UpdatesPage from '~/components/about/UpdatesPage'
+import RoadmapPage from '~/components/about/RoadmapPage'
+import SegmentedControl from '~/components/common/SegmentedControl'
+import Segment from '~/components/common/Segment'
+
+export default function UpdatesPageClient() {
+  const t = useTranslations('common')
+  const router = useRouter()
+  const [currentTab] = useState<AboutTabs>(AboutTabs.Updates)
+  
+  function handleTabClicked(event: React.ChangeEvent<HTMLInputElement>) {
+    const value = event.target.value
+    router.push(`/${value}`)
+  }
+  
+  const currentSection = () => {
+    switch (currentTab) {
+      case AboutTabs.About:
+        return <AboutPage />
+      case AboutTabs.Updates:
+        return <UpdatesPage />
+      case AboutTabs.Roadmap:
+        return <RoadmapPage />
+    }
+  }
+  
+  return (
+    <section>
+      <SegmentedControl blended={true}>
+        <Segment
+          groupName="about"
+          name="about"
+          selected={currentTab == AboutTabs.About}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.about')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="updates"
+          selected={currentTab == AboutTabs.Updates}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.updates')}
+        </Segment>
+        <Segment
+          groupName="about"
+          name="roadmap"
+          selected={currentTab == AboutTabs.Roadmap}
+          onClick={handleTabClicked}
+        >
+          {t('about.segmented_control.roadmap')}
+        </Segment>
+      </SegmentedControl>
+      {currentSection()}
+    </section>
+  )
+}

app/[locale]/updates/page.tsx

@@ -0,0 +1,31 @@
+import { Metadata } from 'next'
+import { getTranslations } from 'next-intl/server'
+
+// Force dynamic rendering to avoid useContext issues during static generation
+export const dynamic = 'force-dynamic'
+import UpdatesPageClient from './UpdatesPageClient'
+
+export async function generateMetadata({
+  params: { locale }
+}: {
+  params: { locale: string }
+}): Promise<Metadata> {
+  const t = await getTranslations({ locale, namespace: 'common' })
+  
+  return {
+    title: t('page.titles.updates'),
+    description: t('page.descriptions.updates')
+  }
+}
+
+export default async function UpdatesPage({
+  params: { locale }
+}: {
+  params: { locale: string }
+}) {
+  return (
+    <div id="About">
+      <UpdatesPageClient />
+    </div>
+  )
+}

app/api/auth/login/route.ts

@@ -0,0 +1,103 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { cookies } from 'next/headers'
+import { login as loginHelper } from '~/app/lib/api-utils'
+
+// Login request schema
+const LoginSchema = z.object({
+  email: z.string().email('Invalid email format'),
+  password: z.string().min(8, 'Password must be at least 8 characters')
+})
+
+export async function POST(request: NextRequest) {
+  try {
+    // Parse and validate request body
+    const body = await request.json()
+    const validatedData = LoginSchema.parse(body)
+    
+    // Call login helper with credentials
+    const response = await loginHelper(validatedData)
+    
+    // Set cookies based on response
+    if (response.token) {
+      // Calculate expiration (60 days)
+      const expiresAt = new Date()
+      expiresAt.setDate(expiresAt.getDate() + 60)
+      
+      // Set account cookie with auth info
+      const accountCookie = {
+        userId: response.user_id,
+        username: response.username,
+        role: response.role,
+        token: response.token
+      }
+      
+      // Set user cookie with preferences/profile
+      const userCookie = {
+        avatar: {
+          picture: response.avatar.picture,
+          element: response.avatar.element
+        },
+        gender: response.gender,
+        language: response.language,
+        theme: response.theme,
+        bahamut: response.bahamut || false
+      }
+      
+      // Set cookies
+      const cookieStore = cookies()
+      cookieStore.set('account', JSON.stringify(accountCookie), {
+        expires: expiresAt,
+        path: '/',
+        httpOnly: true,
+        sameSite: 'strict'
+      })
+      
+      cookieStore.set('user', JSON.stringify(userCookie), {
+        expires: expiresAt,
+        path: '/',
+        httpOnly: true,
+        sameSite: 'strict'
+      })
+      
+      // Return success
+      return NextResponse.json({
+        success: true,
+        user: {
+          username: response.username,
+          avatar: response.avatar
+        }
+      })
+    }
+    
+    // If we get here, something went wrong
+    return NextResponse.json(
+      { error: 'Invalid login response' },
+      { status: 500 }
+    )
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      )
+    }
+    
+    // For authentication errors
+    if (error && typeof error === 'object' && 'response' in error) {
+      const axiosError = error as any
+      if (axiosError.response?.status === 401) {
+        return NextResponse.json(
+          { error: 'Invalid email or password' },
+          { status: 401 }
+        )
+      }
+    }
+    
+    console.error('Login error:', error)
+    return NextResponse.json(
+      { error: 'Login failed' },
+      { status: 500 }
+    )
+  }
+}

app/api/auth/logout/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { cookies } from 'next/headers'
+
+export async function POST(request: NextRequest) {
+  try {
+    // Delete cookies
+    const cookieStore = cookies()
+    cookieStore.delete('account')
+    cookieStore.delete('user')
+    
+    // Return success
+    return NextResponse.json({ success: true })
+  } catch (error) {
+    console.error('Logout error:', error)
+    return NextResponse.json(
+      { error: 'Logout failed' },
+      { status: 500 }
+    )
+  }
+}

app/api/auth/signup/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { postToApi } from '~/app/lib/api-utils'
+
+// Signup request schema
+const SignupSchema = z.object({
+  username: z.string()
+    .min(3, 'Username must be at least 3 characters')
+    .max(20, 'Username must be less than 20 characters')
+    .regex(/^[a-zA-Z0-9_-]+$/, 'Username can only contain letters, numbers, underscores, and hyphens'),
+  email: z.string().email('Invalid email format'),
+  password: z.string().min(8, 'Password must be at least 8 characters'),
+  password_confirmation: z.string()
+}).refine(data => data.password === data.password_confirmation, {
+  message: "Passwords don't match",
+  path: ['password_confirmation']
+})
+
+export async function POST(request: NextRequest) {
+  try {
+    // Parse and validate request body
+    const body = await request.json()
+    const validatedData = SignupSchema.parse(body)
+    
+    // Call signup endpoint
+    const response = await postToApi('/users', {
+      user: {
+        username: validatedData.username,
+        email: validatedData.email,
+        password: validatedData.password,
+        password_confirmation: validatedData.password_confirmation
+      }
+    })
+    
+    // Return created user info
+    return NextResponse.json({
+      success: true,
+      user: {
+        username: response.username,
+        email: response.email
+      }
+    }, { status: 201 })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      )
+    }
+    
+    // Handle specific API errors
+    if (error && typeof error === 'object' && 'response' in error) {
+      const axiosError = error as any
+      if (axiosError.response?.data?.error) {
+        const apiError = axiosError.response.data.error
+        
+        // Username or email already in use
+        if (apiError.includes('username') || apiError.includes('email')) {
+          return NextResponse.json(
+            { error: apiError },
+            { status: 409 } // Conflict
+          )
+        }
+      }
+    }
+    
+    console.error('Signup error:', error)
+    return NextResponse.json(
+      { error: 'Signup failed' },
+      { status: 500 }
+    )
+  }
+}

app/api/characters/[id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// GET handler for fetching a single character
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    
+    if (!id) {
+      return NextResponse.json(
+        { error: 'Character ID is required' },
+        { status: 400 }
+      );
+    }
+    
+    const data = await fetchFromApi(`/characters/${id}`);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error(`Error fetching character ${params.id}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch character' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/favorites/route.ts

@@ -0,0 +1,82 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { fetchFromApi, postToApi, deleteFromApi } from '~/app/lib/api-utils';
+
+// Schema for favorite request
+const FavoriteSchema = z.object({
+  favorite: z.object({
+    party_id: z.string()
+  })
+});
+
+// GET handler for fetching user's favorites
+export async function GET(request: NextRequest) {
+  try {
+    // Get saved teams/favorites
+    const data = await fetchFromApi('/parties/favorites');
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error('Error fetching favorites', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch favorites' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}
+
+// POST handler for adding a favorite
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    
+    // Validate request
+    const validatedData = FavoriteSchema.parse(body);
+    
+    // Save the favorite
+    const response = await postToApi('/favorites', validatedData);
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      );
+    }
+    
+    console.error('Error saving favorite', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to save favorite' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}
+
+// DELETE handler for removing a favorite
+export async function DELETE(request: NextRequest) {
+  try {
+    const body = await request.json();
+    
+    // Validate request
+    const validatedData = FavoriteSchema.parse(body);
+    
+    // Delete the favorite
+    const response = await deleteFromApi('/favorites', validatedData);
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      );
+    }
+    
+    console.error('Error removing favorite', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to remove favorite' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/jobs/[id]/accessories/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchFromApi } from '~/app/lib/api-utils'
+
+// GET handler for fetching accessories for a specific job
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params
+    
+    const data = await fetchFromApi(`/jobs/${id}/accessories`)
+    
+    return NextResponse.json(data)
+  } catch (error: any) {
+    console.error(`Error fetching accessories for job ${params.id}`, error)
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch job accessories' },
+      { status: error.response?.status || 500 }
+    )
+  }
+}

app/api/jobs/[id]/skills/route.ts

@@ -0,0 +1,22 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchFromApi } from '~/app/lib/api-utils'
+
+// GET handler for fetching skills for a specific job
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params
+    
+    const data = await fetchFromApi(`/jobs/${id}/skills`)
+    
+    return NextResponse.json(data)
+  } catch (error: any) {
+    console.error(`Error fetching skills for job ${params.id}`, error)
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch job skills' },
+      { status: error.response?.status || 500 }
+    )
+  }
+}

app/api/jobs/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchFromApi } from '~/app/lib/api-utils'
+
+// Force dynamic rendering because we use searchParams
+export const dynamic = 'force-dynamic'
+
+// GET handler for fetching all jobs
+export async function GET(request: NextRequest) {
+  try {
+    // Parse URL parameters
+    const searchParams = request.nextUrl.searchParams
+    const element = searchParams.get('element')
+    
+    // Build query parameters
+    const queryParams: Record<string, string> = {}
+    if (element) queryParams.element = element
+    
+    // Append query parameters
+    let endpoint = '/jobs'
+    const queryString = new URLSearchParams(queryParams).toString()
+    if (queryString) {
+      endpoint += `?${queryString}`
+    }
+    
+    const data = await fetchFromApi(endpoint)
+    
+    return NextResponse.json(data)
+  } catch (error: any) {
+    console.error('Error fetching jobs', error)
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch jobs' },
+      { status: error.response?.status || 500 }
+    )
+  }
+}

app/api/jobs/skills/route.ts

@@ -0,0 +1,20 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { fetchFromApi } from '~/app/lib/api-utils'
+
+// Force dynamic rendering because fetchFromApi uses cookies
+export const dynamic = 'force-dynamic'
+
+// GET handler for fetching all job skills
+export async function GET(request: NextRequest) {
+  try {
+    const data = await fetchFromApi('/jobs/skills')
+    
+    return NextResponse.json(data)
+  } catch (error: any) {
+    console.error('Error fetching job skills', error)
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch job skills' },
+      { status: error.response?.status || 500 }
+    )
+  }
+}

app/api/parties/[shortcode]/remix/route.ts

@@ -0,0 +1,35 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { postToApi, revalidate } from '~/app/lib/api-utils';
+
+// Force dynamic rendering because postToApi uses cookies
+export const dynamic = 'force-dynamic';
+
+// POST handler for remixing a party
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { shortcode: string } }
+) {
+  try {
+    const { shortcode } = params;
+    const body = await request.json();
+    
+    // Remix the party
+    const response = await postToApi(`/parties/${shortcode}/remix`, body || {});
+    
+    // Revalidate the teams page since a new party was created
+    revalidate('/teams');
+    
+    if (response.shortcode) {
+      // Revalidate the new party page
+      revalidate(`/p/${response.shortcode}`);
+    }
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    console.error(`Error remixing party with shortcode ${params.shortcode}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to remix party' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/parties/[shortcode]/route.ts

@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { fetchFromApi, putToApi, deleteFromApi, revalidate, PartySchema } from '~/app/lib/api-utils';
+
+// Force dynamic rendering because fetchFromApi uses cookies
+export const dynamic = 'force-dynamic';
+
+// GET handler for fetching a single party by shortcode
+export async function GET(
+  request: NextRequest, 
+  { params }: { params: { shortcode: string } }
+) {
+  try {
+    const { shortcode } = params;
+    
+    // Fetch party data
+    const data = await fetchFromApi(`/parties/${shortcode}`);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error(`Error fetching party with shortcode ${params.shortcode}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch party' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}
+
+// Update party schema
+const UpdatePartySchema = PartySchema.extend({
+  id: z.string().optional(),
+  shortcode: z.string().optional(),
+});
+
+// PUT handler for updating a party
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: { shortcode: string } }
+) {
+  try {
+    const { shortcode } = params;
+    const body = await request.json();
+    
+    // Validate the request body
+    const validatedData = UpdatePartySchema.parse(body.party);
+    
+    // Update the party
+    const response = await putToApi(`/parties/${shortcode}`, {
+      party: validatedData
+    });
+    
+    // Revalidate the party page
+    revalidate(`/p/${shortcode}`);
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      );
+    }
+    
+    return NextResponse.json(
+      { error: error.message || 'Failed to update party' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}
+
+// DELETE handler for deleting a party
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: { shortcode: string } }
+) {
+  try {
+    const { shortcode } = params;
+    
+    // Delete the party
+    const response = await deleteFromApi(`/parties/${shortcode}`);
+    
+    // Revalidate related pages
+    revalidate(`/teams`);
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    return NextResponse.json(
+      { error: error.message || 'Failed to delete party' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/parties/route.ts

@@ -0,0 +1,83 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { fetchFromApi, postToApi, PartySchema } from '~/app/lib/api-utils';
+
+// Force dynamic rendering because we use searchParams and cookies
+export const dynamic = 'force-dynamic';
+
+// GET handler for fetching parties with filters
+export async function GET(request: NextRequest) {
+  try {
+    // Parse URL parameters
+    const searchParams = request.nextUrl.searchParams;
+    const element = searchParams.get('element');
+    const raid = searchParams.get('raid');
+    const recency = searchParams.get('recency');
+    const page = searchParams.get('page') || '1';
+    const username = searchParams.get('username');
+
+    // Build query parameters
+    const queryParams: Record<string, string> = {};
+    if (element) queryParams.element = element;
+    if (raid) queryParams.raid_id = raid;
+    if (recency) queryParams.recency = recency;
+    if (page) queryParams.page = page;
+    
+    let endpoint = '/parties';
+    
+    // If username is provided, fetch that user's parties
+    if (username) {
+      endpoint = `/users/${username}/parties`;
+    }
+    
+    // Append query parameters
+    const queryString = new URLSearchParams(queryParams).toString();
+    if (queryString) {
+      endpoint += `?${queryString}`;
+    }
+    
+    const data = await fetchFromApi(endpoint);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error('Error fetching parties', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch parties' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}
+
+// Validate party data
+const CreatePartySchema = PartySchema.extend({
+  element: z.number().min(1).max(6),
+  raid_id: z.string().optional(),
+});
+
+// POST handler for creating a new party
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    
+    // Validate the request body
+    const validatedData = CreatePartySchema.parse(body.party);
+    
+    const response = await postToApi('/parties', { 
+      party: validatedData 
+    });
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      );
+    }
+    
+    return NextResponse.json(
+      { error: error.message || 'Failed to create party' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/raids/[id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// GET handler for fetching a single raid
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    
+    if (!id) {
+      return NextResponse.json(
+        { error: 'Raid ID is required' },
+        { status: 400 }
+      );
+    }
+    
+    const data = await fetchFromApi(`/raids/${id}`);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error(`Error fetching raid ${params.id}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch raid' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/raids/groups/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// Force dynamic rendering because fetchFromApi uses cookies
+export const dynamic = 'force-dynamic';
+
+// GET handler for fetching raid groups
+export async function GET(request: NextRequest) {
+  try {
+    // Fetch raid groups
+    const data = await fetchFromApi('/raids/groups');
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error('Error fetching raid groups', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch raid groups' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/search/[object]/route.ts

@@ -0,0 +1,50 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { z } from 'zod';
+import { postToApi, SearchSchema } from '~/app/lib/api-utils';
+
+// Validate the object type
+const ObjectTypeSchema = z.enum(['characters', 'weapons', 'summons', 'job_skills']);
+
+// POST handler for search
+export async function POST(
+  request: NextRequest,
+  { params }: { params: { object: string } }
+) {
+  try {
+    const { object } = params;
+    
+    // Validate object type
+    const validObjectType = ObjectTypeSchema.safeParse(object);
+    if (!validObjectType.success) {
+      return NextResponse.json(
+        { error: `Invalid object type: ${object}` },
+        { status: 400 }
+      );
+    }
+    
+    const body = await request.json();
+    
+    // Validate search parameters
+    const validatedSearch = SearchSchema.parse(body.search);
+    
+    // Perform search
+    const response = await postToApi(`/search/${object}`, {
+      search: validatedSearch
+    });
+    
+    return NextResponse.json(response);
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      );
+    }
+    
+    console.error(`Error searching ${params.object}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Search failed' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/search/route.ts

@@ -0,0 +1,39 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { postToApi } from '~/app/lib/api-utils'
+
+// Validate the search request
+const SearchAllSchema = z.object({
+  search: z.object({
+    query: z.string().min(1, 'Search query is required'),
+    exclude: z.array(z.string()).optional(),
+    locale: z.string().default('en')
+  })
+})
+
+// POST handler for searching across all types
+export async function POST(request: NextRequest) {
+  try {
+    // Parse and validate request body
+    const body = await request.json()
+    const validatedData = SearchAllSchema.parse(body)
+    
+    // Perform search
+    const response = await postToApi('/search', validatedData)
+    
+    return NextResponse.json(response)
+  } catch (error: any) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      )
+    }
+    
+    console.error('Error searching', error)
+    return NextResponse.json(
+      { error: error.message || 'Search failed' },
+      { status: error.response?.status || 500 }
+    )
+  }
+}

app/api/summons/[id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// GET handler for fetching a single summon
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    
+    if (!id) {
+      return NextResponse.json(
+        { error: 'Summon ID is required' },
+        { status: 400 }
+      );
+    }
+    
+    const data = await fetchFromApi(`/summons/${id}`);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error(`Error fetching summon ${params.id}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch summon' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/users/info/[username]/route.ts

@@ -0,0 +1,23 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// GET handler for fetching user info
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { username: string } }
+) {
+  try {
+    const { username } = params;
+    
+    // Fetch user info
+    const data = await fetchFromApi(`/users/info/${username}`);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error(`Error fetching user info for ${params.username}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch user info' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/users/settings/route.ts

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server'
+import { z } from 'zod'
+import { cookies } from 'next/headers'
+import { putToApi } from '~/app/lib/api-utils'
+
+// Settings update schema
+const SettingsSchema = z.object({
+  picture: z.string().optional(),
+  gender: z.enum(['gran', 'djeeta']).optional(),
+  language: z.enum(['en', 'ja']).optional(),
+  theme: z.enum(['light', 'dark', 'system']).optional(),
+  bahamut: z.boolean().optional()
+})
+
+export async function PUT(request: NextRequest) {
+  try {
+    // Parse and validate request body
+    const body = await request.json()
+    const validatedData = SettingsSchema.parse(body)
+    
+    // Get user info from cookie
+    const cookieStore = cookies()
+    const accountCookie = cookieStore.get('account')
+    
+    if (!accountCookie) {
+      return NextResponse.json(
+        { error: 'Authentication required' },
+        { status: 401 }
+      )
+    }
+    
+    // Parse account cookie
+    const accountData = JSON.parse(accountCookie.value)
+    
+    // Call API to update settings
+    const response = await putToApi(`/users/${accountData.userId}`, {
+      user: validatedData
+    })
+    
+    // Update user cookie with new settings
+    const userCookie = cookieStore.get('user')
+    if (userCookie) {
+      const userData = JSON.parse(userCookie.value)
+      
+      // Update user data
+      const updatedUserData = {
+        ...userData,
+        avatar: {
+          ...userData.avatar,
+          picture: validatedData.picture || userData.avatar.picture
+        },
+        gender: validatedData.gender || userData.gender,
+        language: validatedData.language || userData.language,
+        theme: validatedData.theme || userData.theme,
+        bahamut: validatedData.bahamut !== undefined ? validatedData.bahamut : userData.bahamut
+      }
+      
+      // Set updated cookie
+      const expiresAt = new Date()
+      expiresAt.setDate(expiresAt.getDate() + 60)
+      
+      cookieStore.set('user', JSON.stringify(updatedUserData), {
+        expires: expiresAt,
+        path: '/',
+        httpOnly: true,
+        sameSite: 'strict'
+      })
+    }
+    
+    // Return updated user info
+    return NextResponse.json({
+      success: true,
+      user: response
+    })
+  } catch (error) {
+    if (error instanceof z.ZodError) {
+      return NextResponse.json(
+        { error: 'Validation error', details: error.errors },
+        { status: 400 }
+      )
+    }
+    
+    console.error('Settings update error:', error)
+    return NextResponse.json(
+      { error: 'Failed to update settings' },
+      { status: 500 }
+    )
+  }
+}

app/api/version/route.ts

@@ -0,0 +1,21 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// Force dynamic rendering because fetchFromApi uses cookies
+export const dynamic = 'force-dynamic';
+
+// GET handler for fetching version info
+export async function GET(request: NextRequest) {
+  try {
+    // Fetch version info
+    const data = await fetchFromApi('/version');
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error('Error fetching version info', error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch version info' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/api/weapons/[id]/route.ts

@@ -0,0 +1,29 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { fetchFromApi } from '~/app/lib/api-utils';
+
+// GET handler for fetching a single weapon
+export async function GET(
+  request: NextRequest,
+  { params }: { params: { id: string } }
+) {
+  try {
+    const { id } = params;
+    
+    if (!id) {
+      return NextResponse.json(
+        { error: 'Weapon ID is required' },
+        { status: 400 }
+      );
+    }
+    
+    const data = await fetchFromApi(`/weapons/${id}`);
+    
+    return NextResponse.json(data);
+  } catch (error: any) {
+    console.error(`Error fetching weapon ${params.id}`, error);
+    return NextResponse.json(
+      { error: error.message || 'Failed to fetch weapon' },
+      { status: error.response?.status || 500 }
+    );
+  }
+}

app/components/Header.tsx

@@ -0,0 +1,404 @@
+'use client'
+
+import React, { useState } from 'react'
+import { deleteCookie } from 'cookies-next'
+import { useRouter } from '~/i18n/navigation'
+import { useTranslations } from 'next-intl'
+import { useLocale } from 'next-intl'
+import classNames from 'classnames'
+import clonedeep from 'lodash.clonedeep'
+import { Link } from '~/i18n/navigation'
+
+import { accountState, initialAccountState } from '~/utils/accountState'
+import { appState, initialAppState } from '~/utils/appState'
+
+import Alert from '~/components/common/Alert'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuSeparator,
+} from '~/components/common/DropdownMenuContent'
+import DropdownMenuGroup from '~/components/common/DropdownMenuGroup'
+import DropdownMenuLabel from '~/components/common/DropdownMenuLabel'
+import DropdownMenuItem from '~/components/common/DropdownMenuItem'
+import LanguageSwitch from '~/components/LanguageSwitch'
+import LoginModal from '~/components/auth/LoginModal'
+import SignupModal from '~/components/auth/SignupModal'
+import AccountModal from '~/components/auth/AccountModal'
+import Button from '~/components/common/Button'
+import Tooltip from '~/components/common/Tooltip'
+
+import BahamutIcon from '~/public/icons/Bahamut.svg'
+import ChevronIcon from '~/public/icons/Chevron.svg'
+import MenuIcon from '~/public/icons/Menu.svg'
+import PlusIcon from '~/public/icons/Add.svg'
+
+import styles from '~/components/Header/index.module.scss'
+
+const Header = () => {
+  // Localization
+  const t = useTranslations('common')
+  const locale = useLocale()
+
+  // Router
+  const router = useRouter()
+
+  // State management
+  const [alertOpen, setAlertOpen] = useState(false)
+  const [loginModalOpen, setLoginModalOpen] = useState(false)
+  const [signupModalOpen, setSignupModalOpen] = useState(false)
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false)
+  const [leftMenuOpen, setLeftMenuOpen] = useState(false)
+  const [rightMenuOpen, setRightMenuOpen] = useState(false)
+
+  // Methods: Event handlers (Buttons)
+  function handleLeftMenuButtonClicked() {
+    setLeftMenuOpen(!leftMenuOpen)
+  }
+
+  function handleRightMenuButtonClicked() {
+    setRightMenuOpen(!rightMenuOpen)
+  }
+
+  // Methods: Event handlers (Menus)
+  function handleLeftMenuOpenChange(open: boolean) {
+    setLeftMenuOpen(open)
+  }
+
+  function handleRightMenuOpenChange(open: boolean) {
+    setRightMenuOpen(open)
+  }
+
+  function closeLeftMenu() {
+    setLeftMenuOpen(false)
+  }
+
+  function closeRightMenu() {
+    setRightMenuOpen(false)
+  }
+
+  // Methods: Actions
+  function handleNewTeam(event: React.MouseEvent) {
+    event.preventDefault()
+    newTeam()
+    closeRightMenu()
+  }
+
+  function logout() {
+    // Close menu
+    closeRightMenu()
+
+    // Delete cookies
+    deleteCookie('account')
+    deleteCookie('user')
+
+    // Clean state
+    const resetState = clonedeep(initialAccountState)
+    Object.keys(resetState).forEach((key) => {
+      if (key !== 'language') accountState[key] = resetState[key]
+    })
+
+    router.refresh()
+    return false
+  }
+
+  function newTeam() {
+    // Clean state
+    const resetState = clonedeep(initialAppState)
+    Object.keys(resetState).forEach((key) => {
+      appState[key] = resetState[key]
+    })
+
+    // Push the new URL
+    router.push('/new')
+  }
+
+  // Methods: Rendering
+  const profileImage = () => {
+    const user = accountState.account.user
+    if (accountState.account.authorized && user) {
+      return (
+        <img
+          alt={user.username}
+          className={`profile ${user.avatar.element}`}
+          srcSet={`/profile/${user.avatar.picture}.png, 
+                      /profile/${user.avatar.picture}@2x.png 2x`}
+          src={`/profile/${user.avatar.picture}.png`}
+        />
+      )
+    } else {
+      return (
+        <img
+          alt={t('no_user')}
+          className={`profile anonymous`}
+          srcSet={`/profile/npc.png, 
+                      /profile/npc@2x.png 2x`}
+          src={`/profile/npc.png`}
+        />
+      )
+    }
+  }
+
+  // Rendering: Buttons
+  const newButton = (
+    <Tooltip content={t('tooltips.new')}>
+      <Button
+        leftAccessoryIcon={<PlusIcon />}
+        className="New"
+        blended={true}
+        text={t('buttons.new')}
+        onClick={newTeam}
+      />
+    </Tooltip>
+  )
+
+  // Rendering: Modals
+  const logoutConfirmationAlert = (
+    <Alert
+      message={t('alert.confirm_logout')}
+      open={alertOpen}
+      primaryActionText="Log out"
+      primaryAction={logout}
+      cancelActionText="Nevermind"
+      cancelAction={() => setAlertOpen(false)}
+    />
+  )
+
+  const settingsModal = (
+    <>
+      {accountState.account.user && (
+        <AccountModal
+          open={settingsModalOpen}
+          username={accountState.account.user.username}
+          picture={accountState.account.user.avatar.picture}
+          gender={accountState.account.user.gender}
+          language={accountState.account.user.language}
+          theme={accountState.account.user.theme}
+          role={accountState.account.user.role}
+          bahamutMode={
+            accountState.account.user.role === 9
+              ? accountState.account.user.bahamut
+              : false
+          }
+          onOpenChange={setSettingsModalOpen}
+        />
+      )}
+    </>
+  )
+
+  const loginModal = (
+    <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+  )
+
+  const signupModal = (
+    <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
+  )
+
+  // Rendering: Compositing
+  const authorizedLeftItems = (
+    <>
+      {accountState.account.user && (
+        <>
+          <DropdownMenuGroup>
+            <DropdownMenuItem onClick={closeLeftMenu}>
+              <Link
+                href={`/${accountState.account.user.username}` || ''}
+              >
+                <span>{t('menu.profile')}</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={closeLeftMenu}>
+              <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </>
+      )}
+    </>
+  )
+  const leftMenuItems = (
+    <>
+      {accountState.account.authorized &&
+        accountState.account.user &&
+        authorizedLeftItems}
+
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={closeLeftMenu}>
+          <Link href="/teams">{t('menu.teams')}</Link>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <div>
+            <span>{t('menu.guides')}</span>
+            <i className="tag">{t('coming_soon')}</i>
+          </div>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuGroup>
+        <DropdownMenuItem onClick={closeLeftMenu}>
+          <a
+            href={locale == 'ja' ? '/ja/about' : '/about'}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('about.segmented_control.about')}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={closeLeftMenu}>
+          <a
+            href={locale == 'ja' ? '/ja/updates' : '/updates'}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('about.segmented_control.updates')}
+          </a>
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={closeLeftMenu}>
+          <a
+            href={locale == 'ja' ? '/ja/roadmap' : '/roadmap'}
+            target="_blank"
+            rel="noreferrer"
+          >
+            {t('about.segmented_control.roadmap')}
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </>
+  )
+
+  const left = (
+    <section>
+      <div className={styles.dropdownWrapper}>
+        <DropdownMenu
+          open={leftMenuOpen}
+          onOpenChange={handleLeftMenuOpenChange}
+        >
+          <DropdownMenuTrigger asChild>
+            <Button
+              active={leftMenuOpen}
+              blended={true}
+              leftAccessoryIcon={<MenuIcon />}
+              onClick={handleLeftMenuButtonClicked}
+            />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="Left">
+            {leftMenuItems}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </section>
+  )
+
+  const authorizedRightItems = (
+    <>
+      {accountState.account.user && (
+        <>
+          <DropdownMenuGroup>
+            <DropdownMenuLabel>
+              {`@${accountState.account.user.username}`}
+            </DropdownMenuLabel>
+            <DropdownMenuItem onClick={closeRightMenu}>
+              <Link
+                href={`/${accountState.account.user.username}` || ''}
+              >
+                <span>{t('menu.profile')}</span>
+              </Link>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+          <DropdownMenuSeparator />
+          <DropdownMenuGroup>
+            <DropdownMenuItem
+              className="MenuItem"
+              onClick={() => setSettingsModalOpen(true)}
+            >
+              <span>{t('menu.settings')}</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem
+              onClick={() => setAlertOpen(true)}
+              destructive={true}
+            >
+              <span>{t('menu.logout')}</span>
+            </DropdownMenuItem>
+          </DropdownMenuGroup>
+        </>
+      )}
+    </>
+  )
+
+  const unauthorizedRightItems = (
+    <>
+      <DropdownMenuGroup>
+        <DropdownMenuItem className="language">
+          <span>{t('menu.language')}</span>
+          <LanguageSwitch />
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuGroup className="MenuGroup">
+        <DropdownMenuItem
+          className="MenuItem"
+          onClick={() => setLoginModalOpen(true)}
+        >
+          <span>{t('menu.login')}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className="MenuItem"
+          onClick={() => setSignupModalOpen(true)}
+        >
+          <span>{t('menu.signup')}</span>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+    </>
+  )
+
+  const rightMenuItems = (
+    <>
+      {accountState.account.authorized && accountState.account.user
+        ? authorizedRightItems
+        : unauthorizedRightItems}
+    </>
+  )
+
+  const right = (
+    <section>
+      {newButton}
+      <DropdownMenu
+        open={rightMenuOpen}
+        onOpenChange={handleRightMenuOpenChange}
+      >
+        <DropdownMenuTrigger asChild>
+          <Button
+            className={classNames({ Active: rightMenuOpen })}
+            leftAccessoryIcon={profileImage()}
+            rightAccessoryIcon={<ChevronIcon />}
+            rightAccessoryClassName="Arrow"
+            onClick={handleRightMenuButtonClicked}
+            blended={true}
+          />
+        </DropdownMenuTrigger>
+        <DropdownMenuContent className="Right">
+          {rightMenuItems}
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </section>
+  )
+
+  return (
+    <>
+      {accountState.account.user?.bahamut && (
+        <div className={styles.bahamut}>
+          <BahamutIcon />
+          <p>Bahamut Mode is active</p>
+        </div>
+      )}
+      <nav className={styles.header}>
+        {left}
+        {right}
+        {logoutConfirmationAlert}
+        {settingsModal}
+        {loginModal}
+        {signupModal}
+      </nav>
+    </>
+  )
+}
+
+export default Header

app/components/Providers.tsx

@@ -0,0 +1,16 @@
+'use client'
+
+import { ReactNode } from 'react'
+import { ThemeProvider } from 'next-themes'
+import { ToastProvider } from '@radix-ui/react-toast'
+import { TooltipProvider } from '@radix-ui/react-tooltip'
+
+export default function Providers({ children }: { children: ReactNode }) {
+  return (
+    <ThemeProvider>
+      <ToastProvider swipeDirection="right">
+        <TooltipProvider>{children}</TooltipProvider>
+      </ToastProvider>
+    </ThemeProvider>
+  )
+}

app/components/UpdateToastClient.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { usePathname } from 'next/navigation'
+import { add, format } from 'date-fns'
+import { getCookie } from 'cookies-next'
+import { useSnapshot } from 'valtio'
+
+import { appState } from '~/utils/appState'
+import UpdateToast from '~/components/toasts/UpdateToast'
+
+interface UpdateToastClientProps {
+  initialVersion?: AppUpdate | null
+}
+
+export default function UpdateToastClient({ initialVersion }: UpdateToastClientProps) {
+  const pathname = usePathname()
+  const [updateToastOpen, setUpdateToastOpen] = useState(false)
+  const { version } = useSnapshot(appState)
+  
+  // Use initialVersion for SSR, then switch to appState version after hydration
+  const effectiveVersion = version?.updated_at ? version : initialVersion
+
+  useEffect(() => {
+    if (effectiveVersion && effectiveVersion.updated_at) {
+      const cookie = getToastCookie()
+      const now = new Date()
+      const updatedAt = new Date(effectiveVersion.updated_at)
+      const validUntil = add(updatedAt, { days: 7 })
+
+      if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
+    }
+  }, [effectiveVersion?.updated_at])
+
+  function getToastCookie() {
+    if (appState.version && appState.version.updated_at !== '') {
+      const updatedAt = new Date(appState.version.updated_at)
+      const cookieValues = getCookie(
+        `update-${format(updatedAt, 'yyyy-MM-dd')}`
+      )
+      return cookieValues
+        ? (JSON.parse(cookieValues as string) as { seen: true })
+        : { seen: false }
+    } else {
+      return { seen: false }
+    }
+  }
+
+  function handleToastActionClicked() {
+    setUpdateToastOpen(false)
+  }
+
+  function handleToastClosed() {
+    setUpdateToastOpen(false)
+  }
+  
+  const path = pathname?.replaceAll('/', '') || ''
+
+  // Only render toast if we have valid version data with update_type
+  if (!['about', 'updates', 'roadmap'].includes(path) && effectiveVersion && effectiveVersion.update_type) {
+    return (
+      <UpdateToast
+        open={updateToastOpen}
+        updateType={effectiveVersion.update_type}
+        onActionClicked={handleToastActionClicked}
+        onCloseClicked={handleToastClosed}
+        lastUpdated={effectiveVersion.updated_at}
+      />
+    )
+  }
+  
+  return null
+}

app/components/VersionHydrator.tsx

@@ -0,0 +1,18 @@
+'use client'
+
+import { useEffect } from 'react'
+import { appState } from '~/utils/appState'
+
+interface VersionHydratorProps {
+  version: AppUpdate | null
+}
+
+export default function VersionHydrator({ version }: VersionHydratorProps) {
+  useEffect(() => {
+    if (version && version.updated_at) {
+      appState.version = version
+    }
+  }, [version])
+  
+  return null
+}

app/layout.tsx

@@ -0,0 +1,8 @@
+// Minimal root layout - all content is handled in [locale]/layout.tsx
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return children
+}

app/lib/api-utils.ts

@@ -0,0 +1,173 @@
+import axios, { AxiosRequestConfig } from "axios";
+import http from "http";
+import https from "https";
+import { cookies } from "next/headers";
+import { revalidatePath } from "next/cache";
+import { z } from "zod";
+
+// Base URL from environment variable
+const baseUrl = process.env.NEXT_PUBLIC_SIERO_API_URL || 'https://localhost:3000/v1';
+const oauthUrl = process.env.NEXT_PUBLIC_SIERO_OAUTH_URL || 'https://localhost:3000/oauth';
+
+// Shared Axios instance with sane defaults for server-side calls
+const httpClient = axios.create({
+  baseURL: baseUrl,
+  timeout: 15000,
+  // Keep connections alive to reduce socket churn
+  httpAgent: new http.Agent({ keepAlive: true, maxSockets: 50 }),
+  httpsAgent: new https.Agent({ keepAlive: true, maxSockets: 50 }),
+  // Do not throw on HTTP status by default; let callers handle
+  validateStatus: () => true,
+});
+
+// Utility to get auth token from cookies on the server
+export function getAuthToken() {
+  const cookieStore = cookies();
+  const accountCookie = cookieStore.get('account');
+  
+  if (accountCookie) {
+    try {
+      const accountData = JSON.parse(accountCookie.value);
+      return accountData.token;
+    } catch (e) {
+      console.error('Failed to parse account cookie', e);
+      return null;
+    }
+  }
+  
+  return null;
+}
+
+// Create headers with auth token
+export function createHeaders() {
+  const token = getAuthToken();
+  
+  return {
+    'Content-Type': 'application/json',
+    ...(token ? { 'Authorization': `Bearer ${token}` } : {})
+  };
+}
+
+// Helper for GET requests
+export async function fetchFromApi(endpoint: string, config?: AxiosRequestConfig) {
+  const headers = createHeaders();
+  
+  try {
+    const response = await httpClient.get(`${endpoint}`, {
+      ...config,
+      headers: {
+        ...headers,
+        ...(config?.headers || {})
+      }
+    });
+    
+    return response.data;
+  } catch (error) {
+    console.error(`API fetch error: ${endpoint}`, error);
+    throw error;
+  }
+}
+
+// Helper for POST requests
+export async function postToApi(endpoint: string, data: any, config?: AxiosRequestConfig) {
+  const headers = createHeaders();
+  
+  try {
+    const response = await httpClient.post(`${endpoint}`, data, {
+      ...config,
+      headers: {
+        ...headers,
+        ...(config?.headers || {})
+      }
+    });
+    
+    return response.data;
+  } catch (error) {
+    console.error(`API post error: ${endpoint}`, error);
+    throw error;
+  }
+}
+
+// Helper for PUT requests
+export async function putToApi(endpoint: string, data: any, config?: AxiosRequestConfig) {
+  const headers = createHeaders();
+  
+  try {
+    const response = await httpClient.put(`${endpoint}`, data, {
+      ...config,
+      headers: {
+        ...headers,
+        ...(config?.headers || {})
+      }
+    });
+    
+    return response.data;
+  } catch (error) {
+    console.error(`API put error: ${endpoint}`, error);
+    throw error;
+  }
+}
+
+// Helper for DELETE requests
+export async function deleteFromApi(endpoint: string, data?: any, config?: AxiosRequestConfig) {
+  const headers = createHeaders();
+  
+  try {
+    const response = await httpClient.delete(`${endpoint}`, {
+      ...config,
+      headers: {
+        ...headers,
+        ...(config?.headers || {})
+      },
+      data
+    });
+    
+    return response.data;
+  } catch (error) {
+    console.error(`API delete error: ${endpoint}`, error);
+    throw error;
+  }
+}
+
+// Helper for login endpoint
+export async function login(credentials: { email: string; password: string }) {
+  try {
+    const response = await axios.post(`${oauthUrl}/token`, credentials);
+    return response.data;
+  } catch (error) {
+    console.error('Login error', error);
+    throw error;
+  }
+}
+
+// Helper to revalidate cache for a path
+export function revalidate(path: string) {
+  try {
+    revalidatePath(path);
+  } catch (error) {
+    console.error(`Failed to revalidate ${path}`, error);
+  }
+}
+
+// Schemas for validation
+export const UserSchema = z.object({
+  username: z.string().min(3).max(20),
+  email: z.string().email(),
+  password: z.string().min(8),
+});
+
+export const PartySchema = z.object({
+  name: z.string().optional(),
+  description: z.string().optional(),
+  visibility: z.enum(['public', 'unlisted', 'private']),
+  raid_id: z.string().optional(),
+  element: z.number().optional(),
+});
+
+export const SearchSchema = z.object({
+  query: z.string(),
+  filters: z.record(z.array(z.number())).optional(),
+  job: z.string().optional(),
+  locale: z.string().default('en'),
+  page: z.number().default(0),
+});

app/lib/data.ts

@@ -0,0 +1,148 @@
+import { fetchFromApi } from './api-utils';
+
+// Server-side data fetching functions
+// Next.js automatically deduplicates requests within the same render
+
+// Get teams with optional filters
+export async function getTeams({
+  element,
+  raid,
+  recency,
+  page = 1,
+  username,
+}: {
+  element?: number;
+  raid?: string;
+  recency?: string;
+  page?: number;
+  username?: string;
+}) {
+  const queryParams: Record<string, string> = {};
+  if (element) queryParams.element = element.toString();
+  if (raid) queryParams.raid_id = raid;
+  if (recency) queryParams.recency = recency;
+  if (page) queryParams.page = page.toString();
+
+  let endpoint = '/parties';
+  if (username) {
+    endpoint = `/users/${username}/parties`;
+  }
+
+  const queryString = new URLSearchParams(queryParams).toString();
+  if (queryString) endpoint += `?${queryString}`;
+
+  try {
+    const data = await fetchFromApi(endpoint);
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch teams', error);
+    throw error;
+  }
+}
+
+// Get a single team by shortcode
+export async function getTeam(shortcode: string) {
+  try {
+    const data = await fetchFromApi(`/parties/${shortcode}`);
+    return data;
+  } catch (error) {
+    console.error(`Failed to fetch team with shortcode ${shortcode}`, error);
+    throw error;
+  }
+}
+
+// Get user info
+export async function getUserInfo(username: string) {
+  try {
+    const data = await fetchFromApi(`/users/info/${username}`);
+    return data;
+  } catch (error) {
+    console.error(`Failed to fetch user info for ${username}`, error);
+    throw error;
+  }
+}
+
+// Get raid groups
+export async function getRaidGroups() {
+  try {
+    const data = await fetchFromApi('/raids/groups');
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch raid groups', error);
+    throw error;
+  }
+}
+
+// Get version info
+export async function getVersion() {
+  try {
+    const data = await fetchFromApi('/version');
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch version info', error);
+    throw error;
+  }
+}
+
+// Get user's favorites/saved teams
+export async function getFavorites() {
+  try {
+    const data = await fetchFromApi('/parties/favorites');
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch favorites', error);
+    throw error;
+  }
+}
+
+// Get all jobs
+export async function getJobs(element?: number) {
+  try {
+    const queryParams: Record<string, string> = {};
+    if (element) queryParams.element = element.toString();
+
+    let endpoint = '/jobs';
+    const queryString = new URLSearchParams(queryParams).toString();
+    if (queryString) endpoint += `?${queryString}`;
+
+    const data = await fetchFromApi(endpoint);
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch jobs', error);
+    throw error;
+  }
+}
+
+// Get job by ID
+export async function getJob(jobId: string) {
+  try {
+    const data = await fetchFromApi(`/jobs/${jobId}`);
+    return data;
+  } catch (error) {
+    console.error(`Failed to fetch job with ID ${jobId}`, error);
+    throw error;
+  }
+}
+
+// Get job skills
+export async function getJobSkills(jobId?: string) {
+  try {
+    const endpoint = jobId ? `/jobs/${jobId}/skills` : '/jobs/skills';
+    const data = await fetchFromApi(endpoint);
+    return data;
+  } catch (error) {
+    console.error('Failed to fetch job skills', error);
+    throw error;
+  }
+}
+
+// Get job accessories
+export async function getJobAccessories(jobId: string) {
+  try {
+    const data = await fetchFromApi(`/jobs/${jobId}/accessories`);
+    return data;
+  } catch (error) {
+    console.error(`Failed to fetch accessories for job ${jobId}`, error);
+    throw error;
+  }
+}

app/not-found.tsx

@@ -0,0 +1,29 @@
+import { Metadata } from 'next'
+
+// Force dynamic rendering to avoid issues
+export const dynamic = 'force-dynamic'
+
+export const metadata: Metadata = {
+  title: 'Page not found / granblue.team',
+  description: 'The page you were looking for could not be found'
+}
+
+export default function NotFound() {
+  return (
+    <div className="error-container">
+      <div className="error-content">
+        <h1>404</h1>
+        <h2>Page Not Found</h2>
+        <p>The page you&apos;re looking for doesn&apos;t exist.</p>
+        <div className="error-actions">
+          <a href="/new" className="button primary">
+            Create a new party
+          </a>
+          <a href="/teams" className="button secondary">
+            Browse teams
+          </a>
+        </div>
+      </div>
+    </div>
+  )
+}

app/styles/error.scss

@@ -0,0 +1,77 @@
+// Error page styles
+.error-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: calc(100vh - 60px); // Adjust for header height
+  padding: 2rem;
+  text-align: center;
+}
+
+.error-content {
+  max-width: 600px;
+  padding: 2rem;
+  background-color: var(--background-color);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+
+  h1 {
+    font-size: 2rem;
+    margin-bottom: 1rem;
+    color: var(--text-color);
+  }
+
+  p {
+    margin-bottom: 1.5rem;
+    color: var(--text-color-secondary);
+    line-height: 1.5;
+  }
+}
+
+.error-message {
+  background-color: var(--background-color-secondary);
+  padding: 1rem;
+  border-radius: 4px;
+  margin-bottom: 1.5rem;
+  
+  .error-digest {
+    font-size: 0.875rem;
+    color: var(--text-color-tertiary);
+    margin-top: 0.5rem;
+  }
+}
+
+.error-actions {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 1.5rem;
+  
+  .button {
+    padding: 0.75rem 1.5rem;
+    border-radius: 4px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+    cursor: pointer;
+    border: none;
+    font-size: 1rem;
+    
+    &.primary {
+      background-color: var(--primary-color);
+      color: white;
+      
+      &:hover {
+        background-color: var(--primary-color-hover);
+      }
+    }
+    
+    &.secondary {
+      background-color: var(--background-color-tertiary);
+      color: var(--text-color);
+      
+      &:hover {
+        background-color: var(--background-color-quaternary);
+      }
+    }
+  }
+}

components/AccountStateInitializer/index.tsx

@@ -0,0 +1,106 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+import { getCookie } from 'cookies-next'
+import { accountState } from '~utils/accountState'
+import { setHeaders } from '~utils/userToken'
+
+interface InitialAuthData {
+  account: {
+    token: string
+    userId: string
+    username: string
+    role: number
+  }
+  user: {
+    avatar: {
+      picture: string
+      element: string
+    }
+    gender: number
+    language: string
+    theme: string
+    bahamut?: boolean
+  }
+}
+
+interface AccountStateInitializerProps {
+  initialAuthData?: InitialAuthData | null
+}
+
+export default function AccountStateInitializer({ initialAuthData }: AccountStateInitializerProps) {
+  const initialized = useRef(false)
+  
+  // Initialize synchronously on first render if we have server data
+  if (initialAuthData && !initialized.current) {
+    initialized.current = true
+    const { account: accountData, user: userData } = initialAuthData
+    
+    console.log(`Logged in as user "${accountData.username}"`)
+    
+    // Set headers for API calls
+    setHeaders()
+    
+    // Update account state
+    accountState.account.authorized = true
+    accountState.account.user = {
+      id: accountData.userId,
+      username: accountData.username,
+      role: accountData.role,
+      granblueId: '',
+      avatar: {
+        picture: userData.avatar.picture,
+        element: userData.avatar.element,
+      },
+      gender: userData.gender,
+      language: userData.language,
+      theme: userData.theme,
+      bahamut: userData.bahamut || false,
+    }
+  }
+  
+  useEffect(() => {
+    // Only run client-side cookie reading if no server data
+    if (initialized.current) return
+    
+    const accountCookie = getCookie('account')
+    const userCookie = getCookie('user')
+
+    if (accountCookie && userCookie) {
+      try {
+        const accountData = JSON.parse(accountCookie as string)
+        const userData = JSON.parse(userCookie as string)
+
+        if (accountData && accountData.token) {
+          console.log(`Logged in as user "${accountData.username}"`)
+          
+          // Set headers for API calls
+          setHeaders()
+          
+          // Update account state
+          accountState.account.authorized = true
+          accountState.account.user = {
+            id: accountData.userId,
+            username: accountData.username,
+            role: accountData.role,
+            granblueId: '',
+            avatar: {
+              picture: userData.avatar.picture,
+              element: userData.avatar.element,
+            },
+            gender: userData.gender,
+            language: userData.language,
+            theme: userData.theme,
+            bahamut: userData.bahamut || false,
+          }
+          
+          initialized.current = true
+        }
+      } catch (error) {
+        console.error('Error parsing account cookies:', error)
+      }
+    }
+  }, [])
+
+  return null
+}

components/ElementToggle/index.tsx

@@ -1,6 +1,7 @@
+'use client'
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 import * as ToggleGroup from '@radix-ui/react-toggle-group'
@@ -12,12 +13,10 @@ interface Props {
 }
 
 const ElementToggle = ({ currentElement, sendValue, ...props }: Props) => {
-  // Router and localization
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  // Localization
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   // State: Component
   const [element, setElement] = useState(currentElement)

components/ErrorSection/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 
 import Button from '~components/common/Button'
 import { ResponseStatus } from '~types'
@@ -13,7 +13,7 @@ interface Props {
 
 const ErrorSection = ({ status }: Props) => {
   // Import translations
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   const [statusText, setStatusText] = useState('')
 

components/Header/index.tsx

@@ -1,7 +1,9 @@
+'use client'
 import React, { useState } from 'react'
-import { deleteCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { deleteCookie, getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
+import { useRouter } from '~/i18n/navigation'
+import { useSnapshot } from 'valtio'
 import classNames from 'classnames'
 import clonedeep from 'lodash.clonedeep'
 import Link from 'next/link'
@@ -35,12 +37,14 @@ import styles from './index.module.scss'
 
 const Header = () => {
   // Localization
-  const { t } = useTranslation('common')
-
-  // Router
+  const t = useTranslations('common')
   const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+
+  // Locale
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
+
+  // Subscribe to account state changes
+  const accountSnap = useSnapshot(accountState)
 
   // State management
   const [alertOpen, setAlertOpen] = useState(false)
@@ -97,7 +101,7 @@ const Header = () => {
       if (key !== 'language') accountState[key] = resetState[key]
     })
 
-    router.reload()
+    router.refresh()
     return false
   }
 
@@ -109,13 +113,13 @@ const Header = () => {
     })
 
     // Push the root URL
-    router.push('/new', undefined, { shallow: true })
+    router.push('/new')
   }
 
   // Methods: Rendering
   const profileImage = () => {
-    const user = accountState.account.user
-    if (accountState.account.authorized && user) {
+    const user = accountSnap.account.user
+    if (accountSnap.account.authorized && user) {
       return (
         <img
           alt={user.username}
@@ -128,7 +132,7 @@ const Header = () => {
     } else {
       return (
         <img
-          alt={t('no_user')}
+          alt={t('header.anonymous')}
           className={`profile anonymous`}
           srcSet={`/profile/npc.png, 
                       /profile/npc@2x.png 2x`}
@@ -165,18 +169,18 @@ const Header = () => {
 
   const settingsModal = (
     <>
-      {accountState.account.user && (
+      {accountSnap.account.user && (
         <AccountModal
           open={settingsModalOpen}
-          username={accountState.account.user.username}
-          picture={accountState.account.user.avatar.picture}
-          gender={accountState.account.user.gender}
-          language={accountState.account.user.language}
-          theme={accountState.account.user.theme}
-          role={accountState.account.user.role}
+          username={accountSnap.account.user.username}
+          picture={accountSnap.account.user.avatar.picture}
+          gender={accountSnap.account.user.gender}
+          language={accountSnap.account.user.language}
+          theme={accountSnap.account.user.theme}
+          role={accountSnap.account.user.role}
           bahamutMode={
-            accountState.account.user.role === 9
-              ? accountState.account.user.bahamut
+            accountSnap.account.user.role === 9
+              ? accountSnap.account.user.bahamut
               : false
           }
           onOpenChange={setSettingsModalOpen}
@@ -196,13 +200,12 @@ const Header = () => {
   // Rendering: Compositing
   const authorizedLeftItems = (
     <>
-      {accountState.account.user && (
+      {accountSnap.account.user && (
         <>
           <DropdownMenuGroup>
             <DropdownMenuItem onClick={closeLeftMenu}>
               <Link
-                href={`/${accountState.account.user.username}` || ''}
-                passHref
+                href={`/${accountSnap.account.user.username}` || ''}
               >
                 <span>{t('menu.profile')}</span>
               </Link>
@@ -217,8 +220,8 @@ const Header = () => {
   )
   const leftMenuItems = (
     <>
-      {accountState.account.authorized &&
-        accountState.account.user &&
+      {accountSnap.account.authorized &&
+        accountSnap.account.user &&
         authorizedLeftItems}
 
       <DropdownMenuGroup>
@@ -289,16 +292,15 @@ const Header = () => {
 
   const authorizedRightItems = (
     <>
-      {accountState.account.user && (
+      {accountSnap.account.user && (
         <>
           <DropdownMenuGroup>
             <DropdownMenuLabel>
-              {`@${accountState.account.user.username}`}
+              {`@${accountSnap.account.user.username}`}
             </DropdownMenuLabel>
             <DropdownMenuItem onClick={closeRightMenu}>
               <Link
-                href={`/${accountState.account.user.username}` || ''}
-                passHref
+                href={`/${accountSnap.account.user.username}` || ''}
               >
                 <span>{t('menu.profile')}</span>
               </Link>
@@ -351,7 +353,7 @@ const Header = () => {
 
   const rightMenuItems = (
     <>
-      {accountState.account.authorized && accountState.account.user
+      {accountSnap.account.authorized && accountSnap.account.user
         ? authorizedRightItems
         : unauthorizedRightItems}
     </>
@@ -383,7 +385,7 @@ const Header = () => {
 
   return (
     <>
-      {accountState.account.user?.bahamut && (
+      {accountSnap.account.user?.bahamut && (
         <div className={styles.bahamut}>
           <BahamutIcon />
           <p>Bahamut Mode is active</p>

components/HovercardHeader/index.tsx

@@ -1,4 +1,5 @@
-import { useRouter } from 'next/router'
+'use client'
+import { getCookie } from 'cookies-next'
 
 import UncapIndicator from '~components/uncap/UncapIndicator'
 import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
@@ -28,9 +29,7 @@ const Proficiency = [
 ]
 
 const HovercardHeader = ({ gridObject, object, type, ...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 overlay = () => {
     if (type === 'character') {

components/LanguageSwitch/index.tsx

@@ -1,5 +1,7 @@
+'use client'
 import React, { PropsWithChildren, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { useRouter } from 'next/navigation'
+import { usePathname } from 'next/navigation'
 import { setCookie } from 'cookies-next'
 import { retrieveLocaleCookies } from '~utils/retrieveCookies'
 import * as SwitchPrimitive from '@radix-ui/react-switch'
@@ -14,6 +16,7 @@ export const LanguageSwitch = React.forwardRef<HTMLButtonElement, Props>(
   ) {
     // Router and locale data
     const router = useRouter()
+    const pathname = usePathname()
     const localeData = retrieveLocaleCookies()
 
     // State
@@ -30,7 +33,7 @@ export const LanguageSwitch = React.forwardRef<HTMLButtonElement, Props>(
       expiresAt.setDate(expiresAt.getDate() + 120)
 
       setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
-      router.push(router.asPath, undefined, { locale: language })
+      router.refresh()
     }
 
     return (

components/Layout/index.tsx

@@ -1,5 +1,6 @@
+'use client'
 import { PropsWithChildren, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
+import { usePathname } from 'next/navigation'
 import { add, format } from 'date-fns'
 import { getCookie } from 'cookies-next'
 
@@ -11,7 +12,7 @@ import UpdateToast from '~components/toasts/UpdateToast'
 interface Props {}
 
 const Layout = ({ children }: PropsWithChildren<Props>) => {
-  const router = useRouter()
+  const pathname = usePathname()
   const [updateToastOpen, setUpdateToastOpen] = useState(false)
 
   useEffect(() => {
@@ -48,7 +49,7 @@ const Layout = ({ children }: PropsWithChildren<Props>) => {
   }
 
   const updateToast = () => {
-    const path = router.asPath.replaceAll('/', '')
+    const path = pathname?.replaceAll('/', '') || ''
 
     return (
       !['about', 'updates', 'roadmap'].includes(path) &&

components/MentionList/index.tsx

@@ -1,11 +1,12 @@
+'use client'
 import React, {
   forwardRef,
   useEffect,
   useImperativeHandle,
   useState,
 } from 'react'
-import { useTranslation } from 'next-i18next'
-import { useRouter } from 'next/router'
+import { useTranslations } from 'next-intl'
+import { getCookie } from 'cookies-next'
 import { SuggestionProps } from '@tiptap/suggestion'
 import classNames from 'classnames'
 
@@ -34,10 +35,9 @@ interface MentionProps extends SuggestionProps {
 
 export const MentionList = forwardRef<MentionRef, Props>(
   ({ items, ...props }: Props, forwardedRef) => {
-    const router = useRouter()
-    const locale = router.locale || 'en'
+    const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
-    const { t } = useTranslation('common')
+    const t = useTranslations('common')
 
     const [selectedIndex, setSelectedIndex] = useState(0)
 

components/about/AboutHead/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 
 interface Props {
   page: string
@@ -8,7 +8,7 @@ interface Props {
 
 const AboutHead = ({ page }: Props) => {
   // Import translations
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   // State
   const [currentPage, setCurrentPage] = useState('about')

components/about/AboutPage/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Trans, useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 import LinkItem from '../LinkItem'
@@ -12,8 +12,8 @@ import styles from './index.module.scss'
 interface Props {}
 
 const AboutPage: React.FC<Props> = (props: Props) => {
-  const { t: common } = useTranslation('common')
-  const { t: about } = useTranslation('about')
+  const common = useTranslations('common')
+  const about = useTranslations('about')
 
   const classes = classNames(styles.about, 'PageContent')
 
@@ -22,17 +22,17 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <h1>{common('about.segmented_control.about')}</h1>
       <section>
         <h2>
-          <Trans i18nKey="about:about.subtitle">
-            Granblue.team is a tool to save and share team compositions for{' '}
-            <a
-              href="https://game.granbluefantasy.jp"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Granblue Fantasy
-            </a>
-            , a social RPG from Cygames.
-          </Trans>
+          {about.rich('about.subtitle', {
+            gameLink: (chunks) => (
+              <a
+                href="https://game.granbluefantasy.jp"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {chunks}
+              </a>
+            )
+          })}
         </h2>
         <p>{about('about.explanation.0')}</p>
         <p>{about('about.explanation.1')}</p>
@@ -54,53 +54,52 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>{about('about.credits.title')}</h2>
         <p>
-          <Trans i18nKey="about:about.credits.maintainer">
-            Granblue.team was built and is maintained by{' '}
-            <a
-              href="https://twitter.com/jedmund"
-              target="_blank"
-              rel="noreferrer"
-            >
-              @jedmund
-            </a>
-            .
-          </Trans>
+          {about.rich('about.credits.maintainer', {
+            link: (chunks) => (
+              <a
+                href="https://twitter.com/jedmund"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {chunks}
+              </a>
+            )
+          })}
         </p>
         <p>
-          <Trans i18nKey="about:about.credits.assistance">
-            Many thanks to{' '}
-            <a
-              href="https://twitter.com/lalalalinna"
-              target="_blank"
-              rel="noreferrer"
-            >
-              @lalalalinna
-            </a>{' '}
-            and{' '}
-            <a
-              href="https://twitter.com/tarngerine"
-              target="_blank"
-              rel="noreferrer"
-            >
-              @tarngerine
-            </a>
-            , who both provided a lot of help and advice as I was ramping up.
-          </Trans>
+          {about.rich('about.credits.assistance', {
+            link1: (chunks) => (
+              <a
+                href="https://twitter.com/lalalalinna"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {chunks}
+              </a>
+            ),
+            link2: (chunks) => (
+              <a
+                href="https://twitter.com/tarngerine"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {chunks}
+              </a>
+            )
+          })}
         </p>
         <p>
-          <Trans i18nKey="about:about.credits.support">
-            Many thanks also go to everyone in{' '}
-            <a
-              href="https://game.granbluefantasy.jp/#guild/detail/1190185"
-              target="_blank"
-              rel="noreferrer"
-            >
-              Fireplace
-            </a>{' '}
-            and the granblue-tools Discord for all of their help with with bug
-            testing, feature requests, and moral support. (P.S. We&apos;re
-            recruiting!)
-          </Trans>
+          {about.rich('about.credits.support', {
+            link: (chunks) => (
+              <a
+                href="https://game.granbluefantasy.jp/#guild/detail/1190185"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {chunks}
+              </a>
+            )
+          })}
         </p>
       </section>
 
@@ -126,17 +125,17 @@ const AboutPage: React.FC<Props> = (props: Props) => {
       <section>
         <h2>{about('about.license.title')}</h2>
         <p>
-          <Trans i18nKey="about:about.license.license">
-            This app is licensed under{' '}
-            <a
-              href="https://choosealicense.com/licenses/agpl-3.0/"
-              target="_blank"
-              rel="noreferrer"
-            >
-              GNU AGPLv3
-            </a>
-            .
-          </Trans>
+          {about.rich('about.license.license', {
+            link: (chunks) => (
+              <a
+                href="https://choosealicense.com/licenses/agpl-3.0/"
+                target="_blank"
+                rel="noreferrer"
+              >
+                {chunks}
+              </a>
+            )
+          })}
         </p>
         <p>{about('about.license.explanation')}</p>
       </section>

components/about/ChangelogUnit/index.tsx

@@ -1,6 +1,6 @@
-import { useRouter } from 'next/router'
+'use client'
 import React, { useEffect, useState } from 'react'
-import api from '~utils/api'
+import { getCookie } from 'cookies-next'
 
 import styles from './index.module.scss'
 
@@ -19,59 +19,49 @@ const defaultProps = {
 }
 
 const ChangelogUnit = ({ id, type, image }: Props) => {
-  // Router
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  // Locale
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
   // State
   const [item, setItem] = useState<Character | Weapon | Summon>()
 
   // Hooks
   useEffect(() => {
-    fetch()
-  }, [])
+    fetchItem()
+  }, [id, type])
 
-  async function fetch() {
-    switch (type) {
-      case 'character':
-        const character = await fetchCharacter()
-        setItem(character.data)
-        break
-
-      case 'weapon':
-        const weapon = await fetchWeapon()
-        setItem(weapon.data)
-        break
-
-      case 'summon':
-        const summon = await fetchSummon()
-        setItem(summon.data)
-        break
-
-      case 'raid':
-        const raid = await fetchRaid()
-        setItem(raid.data)
-        break
+  async function fetchItem() {
+    try {
+      let endpoint = ''
+      
+      switch (type) {
+        case 'character':
+          endpoint = `/api/characters/${id}`
+          break
+        case 'weapon':
+          endpoint = `/api/weapons/${id}`
+          break
+        case 'summon':
+          endpoint = `/api/summons/${id}`
+          break
+        case 'raid':
+          endpoint = `/api/raids/${id}`
+          break
+        default:
+          return
+      }
+      
+      const response = await fetch(endpoint)
+      
+      if (response.ok) {
+        const data = await response.json()
+        setItem(data)
+      }
+    } catch (error) {
+      console.error(`Error fetching ${type} ${id}:`, error)
     }
   }
 
-  async function fetchCharacter() {
-    return api.endpoints.characters.getOne({ id: id })
-  }
-
-  async function fetchWeapon() {
-    return api.endpoints.weapons.getOne({ id: id })
-  }
-
-  async function fetchSummon() {
-    return api.endpoints.summons.getOne({ id: id })
-  }
-
-  async function fetchRaid() {
-    return api.endpoints.raids.getOne({ id: id })
-  }
-
   const imageUrl = () => {
     let src = ''
 

components/about/ContentUpdate/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 import ChangelogUnit from '~components/about/ChangelogUnit'
@@ -33,7 +33,7 @@ const ContentUpdate = ({
   raidItems,
   numNotes,
 }: Props) => {
-  const { t: updates } = useTranslation('updates')
+  const updates = useTranslations('updates')
 
   const date = new Date(dateString)
 

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,15 +20,13 @@ 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>
-            <h3>{title}</h3>
-          </div>
-          <ShareIcon className={styles.shareIcon} />
-        </a>
-      </Link>
+      <a href={link} target="_blank" rel="noreferrer">
+        <div className={styles.left}>
+          <i className={styles.icon}>{icon}</i>
+          <h3>{title}</h3>
+        </div>
+        <ShareIcon className={styles.shareIcon} />
+      </a>
     </div>
   )
 }

components/about/RoadmapPage/index.tsx

@@ -1,6 +1,8 @@
+'use client'
+
 import React from 'react'
 
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 import LinkItem from '~components/about/LinkItem'
@@ -11,8 +13,8 @@ import styles from './index.module.scss'
 const ROADMAP_ITEMS = 6
 
 const RoadmapPage = () => {
-  const { t: common } = useTranslation('common')
-  const { t: about } = useTranslation('about')
+  const common = useTranslations('common')
+  const about = useTranslations('about')
 
   const classes = classNames(styles.roadmap, 'PageContent')
 

components/about/UpdatesPage/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 import ContentUpdate2022 from '../updates/ContentUpdate2022'
@@ -9,12 +9,13 @@ import ContentUpdate2024 from '../updates/ContentUpdate2024'
 import styles from './index.module.scss'
 
 const UpdatesPage = () => {
-  const { t: common } = useTranslation('common')
-  const { t: updates } = useTranslation('updates')
+  const common = useTranslations('common')
+  const updates = useTranslations('updates')
 
   const classes = classNames(styles.updates, 'PageContent')
 
-  const [activeYear, setActiveYear] = useState(new Date().getFullYear())
+  // Default to most recent year with content (2024)
+  const [activeYear, setActiveYear] = useState(2024)
   const getYearButtonClass = (year: number) =>
     classNames({
       [styles.yearButton]: true,

components/about/updates/ContentUpdate2022/index.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import ContentUpdate from '~components/about/ContentUpdate'
 
 import styles from './index.module.scss'
 
 const ContentUpdate2022 = () => {
-  const { t: updates } = useTranslation('updates')
+  const updates = useTranslations('updates')
 
   const versionUpdates = {
     '1.0.0': 5,
@@ -42,7 +42,7 @@ const ContentUpdate2022 = () => {
         <ul className={styles.list}>
           {[...Array(versionUpdates['1.0.0'])].map((e, i) => (
             <li key={`1.0.0-update-${i}`}>
-              {updates(`versions.1.0.0.features.${i}`)}
+              {updates(`versions.v1_0_0.features.${i}`)}
             </li>
           ))}
         </ul>

components/about/updates/ContentUpdate2023/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import ContentUpdate from '~components/about/ContentUpdate'
 import LinkItem from '../../LinkItem'
 import DiscordIcon from '~public/icons/discord.svg'
@@ -7,7 +7,7 @@ import DiscordIcon from '~public/icons/discord.svg'
 import styles from './index.module.scss'
 
 const ContentUpdate2023 = () => {
-  const { t: updates } = useTranslation('updates')
+  const updates = useTranslations('updates')
 
   const versionUpdates = {
     '1.0.1': 4,
@@ -263,7 +263,7 @@ const ContentUpdate2023 = () => {
         <ul className={styles.bugs}>
           {[...Array(versionUpdates['1.2.1'].bugs)].map((e, i) => (
             <li key={`1.2.1-bugfix-${i}`}>
-              {updates(`versions.1.2.1.bugs.${i}`)}
+              {updates(`versions.v1_2_1.bugs.${i}`)}
             </li>
           ))}
         </ul>
@@ -289,19 +289,19 @@ const ContentUpdate2023 = () => {
               {[...Array(versionUpdates['1.2.0'].updates)].map((e, i) => (
                 <li key={`1.2.0-update-${i}`}>
                   {image(
-                    updates(`versions.1.2.0.features.${i}.title`),
+                    updates(`versions.v1_2_0.features.${i}.title`),
                     `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
                     versionUpdates['1.2.0'].images[i],
                     'jpg'
                   )}
-                  <h3>{updates(`versions.1.2.0.features.${i}.title`)}</h3>
-                  <p>{updates(`versions.1.2.0.features.${i}.blurb`)}</p>
+                  <h3>{updates(`versions.v1_2_0.features.${i}.title`)}</h3>
+                  <p>{updates(`versions.v1_2_0.features.${i}.blurb`)}</p>
                 </li>
               ))}
             </ul>
             <div className={styles.foreword}>
               <h2>Developer notes</h2>
-              {updates('versions.1.2.0.notes')
+              {updates('versions.v1_2_0.notes')
                 .split('\n')
                 .map((item, i) => (
                   <p key={`note-${i}`}>{item}</p>
@@ -319,7 +319,7 @@ const ContentUpdate2023 = () => {
             <ul className={styles.bugs}>
               {[...Array(versionUpdates['1.2.0'].bugs)].map((e, i) => (
                 <li key={`1.2.0-bugfix-${i}`}>
-                  {updates(`versions.1.2.0.bugs.${i}`)}
+                  {updates(`versions.v1_2_0.bugs.${i}`)}
                 </li>
               ))}
             </ul>
@@ -601,13 +601,13 @@ const ContentUpdate2023 = () => {
               {[...Array(versionUpdates['1.1.0'].updates)].map((e, i) => (
                 <li key={`1.1.0-update-${i}`}>
                   {image(
-                    updates(`versions.1.1.0.features.${i}.title`),
+                    updates(`versions.v1_1_0.features.${i}.title`),
                     `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/updates`,
                     versionUpdates['1.1.0'].images[i],
                     'jpg'
                   )}
-                  <h3>{updates(`versions.1.1.0.features.${i}.title`)}</h3>
-                  <p>{updates(`versions.1.1.0.features.${i}.blurb`)}</p>
+                  <h3>{updates(`versions.v1_1_0.features.${i}.title`)}</h3>
+                  <p>{updates(`versions.v1_1_0.features.${i}.blurb`)}</p>
                 </li>
               ))}
             </ul>
@@ -617,7 +617,7 @@ const ContentUpdate2023 = () => {
             <ul className={styles.bugs}>
               {[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => (
                 <li key={`1.1.0-bugfix-${i}`}>
-                  {updates(`versions.1.1.0.bugs.${i}`)}
+                  {updates(`versions.v1_1_0.bugs.${i}`)}
                 </li>
               ))}
             </ul>
@@ -671,7 +671,7 @@ const ContentUpdate2023 = () => {
         <ul className={styles.list}>
           {[...Array(versionUpdates['1.0.1'])].map((e, i) => (
             <li key={`1.0.1-update-${i}`}>
-              {updates(`versions.1.0.1.features.${i}`)}
+              {updates(`versions.v1_0_1.features.${i}`)}
             </li>
           ))}
         </ul>

components/about/updates/ContentUpdate2024/index.tsx

@@ -1,12 +1,40 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import ContentUpdate from '~components/about/ContentUpdate'
 
 const ContentUpdate2024 = () => {
-  const { t: updates } = useTranslation('updates')
+  const updates = useTranslations('updates')
 
   return (
     <>
+      <ContentUpdate
+        version="2024-05U1"
+        dateString="2024/05/02"
+        event="events.content"
+        newItems={{
+          weapon: [
+            '1040026100',
+            '1040317400',
+            '1040423100',
+            '1040119500',
+            '1040618800',
+            '1040916300',
+          ],
+        }}
+        transcendedItems={{
+          summon: ['2040034000', '2040046000'],
+        }}
+        numNotes={4}
+      />
+      <ContentUpdate
+        version="2024-04L"
+        dateString="2024/04/30"
+        event="events.legfest"
+        newItems={{
+          character: ['3040529000', '3040530000'],
+          weapon: ['1040219200', '1040119400', '1040618700', '1030109000'],
+        }}
+      />
       <ContentUpdate
         version="2024-04U2"
         dateString="2024/04/21"

components/auth/AccountModal/index.tsx

@@ -1,7 +1,9 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { getCookie, setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
 import { useTheme } from 'next-themes'
 
 import { Dialog } from '~components/common/Dialog'
@@ -36,12 +38,11 @@ interface Props {
 const AccountModal = React.forwardRef<HTMLDivElement, Props>(
   function AccountModal(props: Props, forwardedRef) {
     // Localization
-    const { t } = useTranslation('common')
+    const t = useTranslations('common')
     const router = useRouter()
-    const locale =
-      router.locale && ['en', 'ja'].includes(router.locale)
-        ? router.locale
-        : 'en'
+    // In App Router, locale is handled via cookies
+    const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'
+    const locale = ['en', 'ja'].includes(currentLocale) ? currentLocale : 'en'
 
     // useEffect only runs on the client, so now we can safely show the UI
     const [mounted, setMounted] = useState(false)
@@ -164,7 +165,7 @@ const AccountModal = React.forwardRef<HTMLDivElement, Props>(
             setOpen(false)
             if (props.onOpenChange) props.onOpenChange(false)
             changeLanguage(router, user.language)
-            if (props.bahamutMode != bahamutMode) router.reload()
+            if (props.bahamutMode != bahamutMode) router.refresh()
           })
       }
     }

components/auth/LoginModal/index.tsx

@@ -1,7 +1,9 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
 import { setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'react-i18next'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
 import axios, { AxiosError, AxiosResponse } from 'axios'
 
 import api from '~utils/api'
@@ -35,7 +37,7 @@ interface Props {
 
 const LoginModal = (props: Props) => {
   const router = useRouter()
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   // Set up form states and error handling
   const [formValid, setFormValid] = useState(false)
@@ -111,9 +113,9 @@ const LoginModal = (props: Props) => {
         .login(body)
         .then((response) => {
           storeCookieInfo(response)
-          return response.data.user.id
+          return response.data.user.username
         })
-        .then((id) => fetchUserInfo(id))
+        .then((username) => fetchUserInfo(username))
         .then((infoResponse) => storeUserInfo(infoResponse))
         .catch((error: Error | AxiosError) => {
           if (axios.isAxiosError(error)) {
@@ -131,8 +133,8 @@ const LoginModal = (props: Props) => {
     }
   }
 
-  function fetchUserInfo(id: string) {
-    return api.userInfo(id)
+  function fetchUserInfo(username: string) {
+    return api.userInfo(username)
   }
 
   function storeCookieInfo(response: AxiosResponse) {

components/auth/SignupModal/index.tsx

@@ -1,7 +1,9 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { setCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { setCookie, getCookie } from 'cookies-next'
+import { useRouter } from 'next/navigation'
+import { useTranslations } from 'next-intl'
 import { AxiosResponse } from 'axios'
 
 import api from '~utils/api'
@@ -35,7 +37,7 @@ const emailRegex =
 
 const SignupModal = (props: Props) => {
   const router = useRouter()
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   // Set up form states and error handling
   const [formValid, setFormValid] = useState(false)
@@ -70,13 +72,16 @@ const SignupModal = (props: Props) => {
   function register(event: React.FormEvent) {
     event.preventDefault()
 
+    // In App Router, locale is typically handled via cookies or headers
+    const currentLocale = getCookie('NEXT_LOCALE') as string || 'en'
+
     const body = {
       user: {
         username: usernameInput.current?.value,
         email: emailInput.current?.value,
         password: passwordInput.current?.value,
         password_confirmation: passwordConfirmationInput.current?.value,
-        language: router.locale,
+        language: currentLocale,
       },
     }
 
@@ -85,9 +90,9 @@ const SignupModal = (props: Props) => {
         .create(body)
         .then((response) => {
           storeCookieInfo(response)
-          return response.data.id
+          return response.data.username
         })
-        .then((id) => fetchUserInfo(id))
+        .then((username) => fetchUserInfo(username))
         .then((infoResponse) => storeUserInfo(infoResponse))
   }
 
@@ -109,8 +114,8 @@ const SignupModal = (props: Props) => {
     setHeaders()
   }
 
-  function fetchUserInfo(id: string) {
-    return api.userInfo(id)
+  function fetchUserInfo(username: string) {
+    return api.userInfo(username)
   }
 
   function storeUserInfo(response: AxiosResponse) {

components/character/CharacterConflictModal/index.tsx

@@ -1,6 +1,9 @@
+'use client'
+
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Trans, useTranslation } from 'next-i18next'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
 
 import { Dialog } from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
@@ -24,9 +27,12 @@ interface Props {
 const CharacterConflictModal = (props: Props) => {
   // Localization
   const router = useRouter()
-  const { t } = useTranslation('common')
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const t = useTranslations('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)
@@ -83,7 +89,9 @@ const CharacterConflictModal = (props: Props) => {
       >
         <div className={styles.content}>
           <p>
-            <Trans i18nKey="modals.conflict.character"></Trans>
+            {t.rich('modals.conflict.character', {
+              strong: (chunks) => <strong>{chunks}</strong>
+            })}
           </p>
           <div className={styles.diagram}>
             <ul>

components/character/CharacterGrid/index.tsx

@@ -2,7 +2,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { getCookie } from 'cookies-next'
 import { useSnapshot } from 'valtio'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 
 import { AxiosError, AxiosResponse } from 'axios'
 import debounce from 'lodash.debounce'
@@ -33,7 +33,7 @@ const CharacterGrid = (props: Props) => {
   const numCharacters: number = 5
 
   // Localization
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   // Cookies
   const cookie = getCookie('account')
@@ -100,13 +100,19 @@ const CharacterGrid = (props: Props) => {
     if (!party.id) {
       props.createParty().then((team) => {
         saveCharacter(team.id, character, position)
-          .then((response) => storeGridCharacter(response.data))
+          .then((response) => {
+            const data = response.data['grid_character']
+            storeGridCharacter(data)
+          })
           .catch((error) => console.error(error))
       })
     } else {
       if (props.editable)
         saveCharacter(party.id, character, position)
-          .then((response) => handleCharacterResponse(response.data))
+          .then((response) => {
+            const data = response.data['grid_character']
+            handleCharacterResponse(data)
+          })
           .catch((error) => {
             const axiosError = error as AxiosError
             const response = axiosError.response
@@ -126,6 +132,7 @@ const CharacterGrid = (props: Props) => {
       setPosition(data.position)
       setModalOpen(true)
     } else {
+      console.log(data)
       storeGridCharacter(data)
     }
   }
@@ -501,7 +508,9 @@ const CharacterGrid = (props: Props) => {
       <Alert
         open={errorAlertOpen}
         title={axiosError ? `${axiosError.status}` : 'Error'}
-        message={t(`errors.${axiosError?.statusText.toLowerCase()}`)}
+        message={axiosError?.statusText && axiosError.statusText !== 'undefined' 
+          ? t(`errors.${axiosError.statusText.toLowerCase()}`) 
+          : t('errors.internal_server_error.description')}
         cancelAction={() => setErrorAlertOpen(false)}
         cancelActionText={t('buttons.confirm')}
       />

components/character/CharacterHovercard/index.tsx

@@ -1,6 +1,9 @@
+'use client'
+
 import React from 'react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
 
 import {
   Hovercard,
@@ -29,9 +32,12 @@ interface Props {
 
 const CharacterHovercard = (props: Props) => {
   const router = useRouter()
-  const { t } = useTranslation('common')
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const t = useTranslations('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]
@@ -65,7 +71,11 @@ const CharacterHovercard = (props: Props) => {
   }
 
   const overMasterySection = () => {
-    if (props.gridCharacter && props.gridCharacter.over_mastery) {
+    if (
+      props.gridCharacter &&
+      props.gridCharacter.over_mastery &&
+      props.gridCharacter.over_mastery.length > 0
+    ) {
       return (
         <section className={styles.mastery}>
           <h5 className={tintElement}>
@@ -73,14 +83,13 @@ const CharacterHovercard = (props: Props) => {
           </h5>
           <ul>
             {[...Array(4)].map((e, i) => {
-              const ringIndex = i + 1
               const ringStat: ExtendedMastery =
-                props.gridCharacter.over_mastery[ringIndex]
+                props.gridCharacter.over_mastery[i]
 
               if (ringStat && ringStat.modifier && ringStat.modifier > 0) {
-                if (ringIndex === 1 || ringIndex === 2) {
+                if (i === 0 || i === 1) {
                   return masteryElement(overMastery.a, ringStat)
-                } else if (ringIndex === 3) {
+                } else if (i === 2) {
                   return masteryElement(overMastery.b, ringStat)
                 } else {
                   return masteryElement(overMastery.c, ringStat)
@@ -96,8 +105,9 @@ const CharacterHovercard = (props: Props) => {
   const aetherialMasterySection = () => {
     if (
       props.gridCharacter &&
+      props.gridCharacter.over_mastery &&
       props.gridCharacter.aetherial_mastery &&
-      props.gridCharacter.aetherial_mastery.modifier > 0
+      props.gridCharacter.aetherial_mastery?.modifier > 0
     ) {
       return (
         <section className={styles.mastery}>
@@ -136,9 +146,8 @@ const CharacterHovercard = (props: Props) => {
   }
 
   const awakeningSection = () => {
-    const gridAwakening = props.gridCharacter.awakening
-
-    if (gridAwakening) {
+    if (props.gridCharacter.awakening) {
+      const gridAwakening = props.gridCharacter.awakening
       return (
         <section className={styles.awakening}>
           <h5 className={tintElement}>

components/character/CharacterModal/index.tsx

@@ -1,7 +1,10 @@
+'use client'
+
 // Core dependencies
 import React, { PropsWithChildren, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { Trans, useTranslation } from 'next-i18next'
+import { useRouter, usePathname, useSearchParams } from 'next/navigation'
+import { getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
 import isEqual from 'lodash/isEqual'
 
 // UI dependencies
@@ -44,6 +47,13 @@ interface Props {
   updateCharacter: (object: GridCharacterObject) => Promise<any>
 }
 
+const AWAKENING_MAP: { [key: string]: string } = {
+  'character-balanced': 'b1847c82-ece0-4d7a-8af1-c7868d90f34a',
+  'character-atk': '6e233877-8cda-4c8f-a091-3db6f68749e2',
+  'character-def': 'c95441de-f949-4a62-b02b-101aa2e0a638',
+  'character-multi': 'e36b0573-79c3-4dd2-9524-c95def4bbb1a',
+}
+
 const CharacterModal = ({
   gridCharacter,
   children,
@@ -53,9 +63,12 @@ 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'
-  const { t } = useTranslation('common')
+    routerLocale && ['en', 'ja'].includes(routerLocale) ? routerLocale : 'en'
+  const t = useTranslations('common')
 
   // State: Component
   const [open, setOpen] = useState(false)
@@ -64,12 +77,7 @@ const CharacterModal = ({
 
   // State: Data
   const [perpetuity, setPerpetuity] = useState(false)
-  const [rings, setRings] = useState<CharacterOverMastery>({
-    1: { ...emptyExtendedMastery, modifier: 1 },
-    2: { ...emptyExtendedMastery, modifier: 2 },
-    3: emptyExtendedMastery,
-    4: emptyExtendedMastery,
-  })
+  const [rings, setRings] = useState<CharacterOverMastery>([])
   const [earring, setEarring] = useState<ExtendedMastery>(emptyExtendedMastery)
   const [awakening, setAwakening] = useState<Awakening>()
   const [awakeningLevel, setAwakeningLevel] = useState(1)
@@ -94,46 +102,36 @@ const CharacterModal = ({
       })
     }
 
-    setAwakening(gridCharacter.awakening.type)
-    setAwakeningLevel(gridCharacter.awakening.level)
+    if (gridCharacter.awakening) {
+      setAwakening(gridCharacter.awakening.type)
+      setAwakeningLevel(gridCharacter.awakening.level)
+    }
     setPerpetuity(gridCharacter.perpetuity)
   }, [gridCharacter])
 
   // Prepare the GridWeaponObject to send to the server
-  function prepareObject() {
-    let object: GridCharacterObject = {
+  function prepareObject(): GridCharacterObject {
+    return {
       character: {
-        ring1: {
-          modifier: rings[1].modifier,
-          strength: rings[1].strength,
-        },
-        ring2: {
-          modifier: rings[2].modifier,
-          strength: rings[2].strength,
-        },
-        ring3: {
-          modifier: rings[3].modifier,
-          strength: rings[3].strength,
-        },
-        ring4: {
-          modifier: rings[4].modifier,
-          strength: rings[4].strength,
-        },
+        rings: rings, // your local rings array
         earring: {
           modifier: earring.modifier,
-          strength: earring.strength,
+          strength:
+            earring.modifier && earring.modifier > 0 ? earring.strength : 0,
         },
+        // Only include awakening if one is set.
+        ...(awakening
+          ? {
+              awakening: {
+                id: awakening.id,
+                level: awakeningLevel,
+              },
+            }
+          : {}),
         transcendence_step: transcendenceStep,
         perpetuity: perpetuity,
       },
     }
-
-    if (awakening) {
-      object.character.awakening_id = awakening.id
-      object.character.awakening_level = awakeningLevel
-    }
-
-    return object
   }
 
   // Methods: Modification checking
@@ -152,12 +150,12 @@ const CharacterModal = ({
 
   function ringsChanged() {
     // Create an empty ExtendedMastery object
-    const emptyRingset: CharacterOverMastery = {
-      1: { ...emptyExtendedMastery, modifier: 1 },
-      2: { ...emptyExtendedMastery, modifier: 2 },
-      3: emptyExtendedMastery,
-      4: emptyExtendedMastery,
-    }
+    const emptyRingset: CharacterOverMastery = [
+      { ...emptyExtendedMastery, modifier: 1 },
+      { ...emptyExtendedMastery, modifier: 2 },
+      emptyExtendedMastery,
+      emptyExtendedMastery,
+    ]
 
     // Check if the current ringset is empty on the current GridCharacter and our local state
     const isEmptyRingset =
@@ -195,8 +193,8 @@ const CharacterModal = ({
   function awakeningChanged() {
     // Check if the awakening in local state is different from the one on the current GridCharacter
     const awakeningChanged =
-      !isEqual(gridCharacter.awakening.type, awakening) ||
-      gridCharacter.awakening.level !== awakeningLevel
+      !isEqual(gridCharacter.awakening?.type, awakening) ||
+      gridCharacter.awakening?.level !== awakeningLevel
 
     // Return true if the awakening has been modified and is not empty
     return awakeningChanged
@@ -227,8 +225,26 @@ const CharacterModal = ({
     })
   }
 
-  function receiveAwakeningValues(id: string, level: number) {
-    setAwakening(gridCharacter.object.awakenings.find((a) => a.id === id))
+  function receiveAwakeningValues(slug: string, level: number) {
+    const mappedId = AWAKENING_MAP[slug] || null
+    const existingAwakening = gridCharacter.object.awakenings.find(
+      (a) => a.slug === slug
+    )
+
+    if (existingAwakening && mappedId) {
+      setAwakening({
+        ...existingAwakening,
+        id: mappedId,
+      })
+    } else {
+      setAwakening({
+        id: mappedId || '',
+        slug,
+        name: { en: '', jp: '' },
+        order: 0,
+      })
+    }
+
     setAwakeningLevel(level)
   }
 
@@ -271,16 +287,13 @@ const CharacterModal = ({
   const confirmationAlert = (
     <Alert
       message={
-        <span>
-          <Trans i18nKey="alert.unsaved_changes.object">
-            You will lose all changes to{' '}
-            <strong>{{ objectName: gridCharacter.object.name[locale] }}</strong>{' '}
-            if you continue.
-            <br />
-            <br />
-            Are you sure you want to continue without saving?
-          </Trans>
-        </span>
+        <>
+          {t.rich('alert.unsaved_changes.object', {
+            objectName: gridCharacter.object.name[locale],
+            strong: (chunks) => <strong>{chunks}</strong>,
+            br: () => <br />
+          })}
+        </>
       }
       open={alertOpen}
       primaryActionText={t('alert.unsaved_changes.buttons.confirm')}
@@ -307,13 +320,13 @@ const CharacterModal = ({
         object="earring"
         dataSet={elementalizeAetherialMastery(gridCharacter)}
         selectValue={
-          gridCharacter.aetherial_mastery
-            ? gridCharacter.aetherial_mastery.modifier
+          gridCharacter.over_mastery && gridCharacter.aetherial_mastery
+            ? gridCharacter.aetherial_mastery?.modifier
             : 0
         }
         inputValue={
-          gridCharacter.aetherial_mastery
-            ? gridCharacter.aetherial_mastery.strength
+          gridCharacter.over_mastery && gridCharacter.aetherial_mastery
+            ? gridCharacter.aetherial_mastery?.strength
             : 0
         }
         sendValidity={receiveValidity}

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/CharacterSearchFilterBar/index.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import cloneDeep from 'lodash.clonedeep'
 
 import SearchFilter from '~components/search/SearchFilter'
@@ -19,7 +19,7 @@ interface Props {
 }
 
 const CharacterSearchFilterBar = (props: Props) => {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   const [rarityMenu, setRarityMenu] = useState(false)
   const [elementMenu, setElementMenu] = useState(false)

components/character/CharacterUnit/index.tsx

@@ -1,7 +1,10 @@
+'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 { useTranslations } from 'next-intl'
 import { AxiosResponse } from 'axios'
 import classNames from 'classnames'
 import cloneDeep from 'lodash.clonedeep'
@@ -55,10 +58,13 @@ const CharacterUnit = ({
   updateTranscendence,
 }: Props) => {
   // Translations and locale
-  const { t } = useTranslation('common')
+  const t = useTranslations('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)
@@ -148,12 +154,12 @@ const CharacterUnit = ({
     let character = cloneDeep(gridCharacter)
 
     if (character.over_mastery) {
-      const overMastery: CharacterOverMastery = {
-        1: gridCharacter.over_mastery[0],
-        2: gridCharacter.over_mastery[1],
-        3: gridCharacter.over_mastery[2],
-        4: gridCharacter.over_mastery[3],
-      }
+      const overMastery: CharacterOverMastery = [
+        gridCharacter.over_mastery[0],
+        gridCharacter.over_mastery[1],
+        gridCharacter.over_mastery[2],
+        gridCharacter.over_mastery[3],
+      ]
 
       character.over_mastery = overMastery
     }
@@ -262,11 +268,12 @@ const CharacterUnit = ({
         cancelAction={() => setAlertOpen(false)}
         cancelActionText={t('buttons.cancel')}
         message={
-          <Trans i18nKey="modals.characters.messages.remove">
-            Are you sure you want to remove{' '}
-            <strong>{{ character: gridCharacter?.object.name[locale] }}</strong>{' '}
-            from your team?
-          </Trans>
+          <>
+            {t.rich('modals.characters.messages.remove', {
+              character: gridCharacter?.object.name[locale] || '',
+              strong: (chunks) => <strong>{chunks}</strong>
+            })}
+          </>
         }
       />
     )

components/common/Editor/index.tsx

@@ -1,7 +1,8 @@
+'use client'
 import { ComponentProps, useCallback, useEffect } from 'react'
 import { useEditor, EditorContent } from '@tiptap/react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
 
 import StarterKit from '@tiptap/starter-kit'
 import Link from '@tiptap/extension-link'
@@ -44,11 +45,10 @@ const Editor = ({
   onUpdate,
   ...props
 }: Props) => {
-  // Hooks: Router
-  const router = useRouter()
-  const locale = router.locale || 'en'
+  // Hooks: Locale
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
 
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   useEffect(() => {
     editor?.commands.setContent(formatContent(content))
@@ -86,7 +86,7 @@ const Editor = ({
         renderLabel({ options, node }) {
           return `${node.attrs.id.name[locale] ?? node.attrs.id.granblue_en}`
         },
-        suggestion: mentionSuggestionOptions,
+        suggestion: mentionSuggestionOptions as any,
         HTMLAttributes: {
           class: classNames({
             [styles.mention]: true,

components/common/MentionTypeahead/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useState } from 'react'
 import { getCookie } from 'cookies-next'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 
 import type {
   Option,
@@ -47,7 +47,7 @@ const MentionTypeahead = React.forwardRef<Typeahead, Props>(function Typeahead(
   { label, description, placeholder, inclusions, exclusions, ...props }: Props,
   forwardedRef
 ) {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
   const locale = getCookie('NEXT_LOCALE')
     ? (getCookie('NEXT_LOCALE') as string)
     : 'en'

components/common/Popover/index.tsx

@@ -77,7 +77,7 @@ const Popover = React.forwardRef<HTMLDivElement, Props>(function Popover(
         [styles.empty]: true,
       })}
     >
-      {props.placeholder}
+      {props.trigger?.placeholder}
     </span>
   )
 

components/common/Select/index.tsx

@@ -97,7 +97,6 @@ const Select = React.forwardRef<HTMLButtonElement, Props>(function Select(
       <RadixSelect.Trigger
         autoFocus={props.autoFocus || false}
         className={triggerClasses}
-        placeholder={props.placeholder}
         ref={forwardedRef}
       >
         {props.icon?.src && <img alt={props.icon.alt} src={props.icon.src} />}

components/common/SelectWithInput/index.tsx

@@ -1,7 +1,8 @@
+'use client'
 // Core dependencies
 import React, { useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-import { useTranslation } from 'next-i18next'
+import { getCookie } from 'cookies-next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 // UI Dependencies
@@ -39,10 +40,8 @@ const SelectWithInput = ({
   sendValidity,
   sendValues,
 }: Props) => {
-  const router = useRouter()
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
-  const { t } = useTranslation('common')
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
+  const t = useTranslations('common')
 
   // UI state
   const [open, setOpen] = useState(false)

components/common/Toast/index.tsx

@@ -4,7 +4,7 @@ import classNames from 'classnames'
 import * as ToastPrimitive from '@radix-ui/react-toast'
 import styles from './index.module.scss'
 
-interface Props extends ToastPrimitive.ToastProps {
+interface Props extends Omit<ToastPrimitive.ToastProps, 'content'> {
   altText: string
   className?: string
   title?: string

components/common/ToolbarButton/index.tsx

@@ -1,4 +1,4 @@
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import classNames from 'classnames'
 
 import { Editor } from '@tiptap/react'
@@ -15,7 +15,7 @@ interface Props {
 }
 
 const ToolbarIcon = ({ editor, action, level, icon, onClick }: Props) => {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
   const classes = classNames({
     [styles.button]: true,
     [styles.active]: level

components/common/Tooltip/index.tsx

@@ -2,7 +2,7 @@ import React, { PropsWithChildren } from 'react'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
 
 import styles from './index.module.scss'
-interface Props extends TooltipPrimitive.TooltipContentProps {
+interface Props extends Omit<TooltipPrimitive.TooltipContentProps, 'content'> {
   content: React.ReactNode
   open?: boolean
   onOpenChange?: (open: boolean) => void

components/dialogs/DeleteTeamAlert/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import Alert from '~components/common/Alert'
 
 interface Props {
@@ -9,7 +9,7 @@ interface Props {
 }
 
 const DeleteTeamAlert = ({ open, deleteCallback, onOpenChange }: Props) => {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   function deleteParty() {
     deleteCallback()

components/dialogs/RemixTeamAlert/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Trans, useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import Alert from '~components/common/Alert'
 
 interface Props {
@@ -17,7 +17,7 @@ const RemixTeamAlert = ({
   remixCallback,
   onOpenChange,
 }: Props) => {
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   function remixParty() {
     remixCallback()
@@ -36,18 +36,19 @@ const RemixTeamAlert = ({
       cancelActionText={t('modals.remix_team.buttons.cancel')}
       message={
         creator ? (
-          <Trans i18nKey="modals.remix_team.description.creator">
-            Remixing a team makes a copy of it in your account so you can make
-            your own changes.\n\nYou&apos;re already the creator of{' '}
-            <strong>{{ name: name }}</strong>, are you sure you want to remix
-            it?
-          </Trans>
+          <>
+            {t.rich('modals.remix_team.description.creator', {
+              name: name,
+              strong: (chunks) => <strong>{chunks}</strong>
+            })}
+          </>
         ) : (
-          <Trans i18nKey="modals.remix_team.description.viewer">
-            Remixing a team makes a copy of it in your account so you can make
-            your own changes.\n\nWould you like to remix{' '}
-            <strong>{{ name: name }}</strong>?
-          </Trans>
+          <>
+            {t.rich('modals.remix_team.description.viewer', {
+              name: name,
+              strong: (chunks) => <strong>{chunks}</strong>
+            })}
+          </>
         )
       }
     />

components/extra/ExtraSummonsGrid/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import SummonUnit from '~components/summon/SummonUnit'
 import { SearchableObject } from '~types'
 import styles from './index.module.scss'
@@ -20,7 +20,7 @@ interface Props {
 const ExtraSummonsGrid = (props: Props) => {
   const numSummons: number = 2
 
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   return (
     <div className={styles.container}>

components/extra/ExtraWeaponsGrid/index.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
 import Switch from '~components/common/Switch'
 import WeaponUnit from '~components/weapon/WeaponUnit'