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

@@ -49,7 +49,7 @@ dist/
 # Instructions will be provided to download these from the game
 public/images/weapon*
 public/images/summon*
-public/images/chara*
+public/images/character*
 public/images/job*
 public/images/awakening*
 public/images/ax*
@@ -57,6 +57,10 @@ public/images/accessory*
 public/images/mastery*
 public/images/updates*
 public/images/guidebooks*
+public/images/raids*
+public/images/gacha*
+public/images/previews*
+public/image/profiles*
 
 # Typescript v1 declaration files
 typings/
@@ -84,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

.vscode/settings.json

@@ -1,3 +1,5 @@
 {
-    "git.ignoreLimitWarning": true
+  "git.ignoreLimitWarning": true,
-}
+  "i18n-ally.localesPaths": ["public/locales"],
+  "i18n-ally.keystyle": "nested"
+}

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

README.md

@@ -54,18 +54,24 @@ root
 ├─ accessory-square/
 ├─ awakening/
 ├─ ax/
-├─ chara-main/
+├─ character-main/
-├─ chara-grid/
+├─ character-grid/
-├─ chara-square/
+├─ character-square/
+├─ guidebooks/
 ├─ jobs/
 ├─ job-icons/
+├─ job-portraits/
 ├─ job-skills/
+├─ labels/
 ├─ mastery/
+├─ placeholders/
+├─ raids/
 ├─ summon-main/
 ├─ summon-grid/
 ├─ summon-square/
 ├─ updates/
 ├─ weapon-main/
 ├─ weapon-grid/
+├─ weapon-keys/
 ├─ weapon-square/
 ```

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.module.scss

@@ -1,4 +1,4 @@
-.ToggleGroup {
+.group {
   $height: 36px;
 
   background-color: var(--toggle-bg);
@@ -15,7 +15,7 @@
     height: auto;
   }
 
-  .ToggleItem {
+  .item {
     background: var(--toggle-bg);
     border: none;
     border-radius: 18px;
@@ -47,32 +47,32 @@
 
       &.fire {
         background: var(--fire-bg);
-        color: var(--fire-text);
+        color: var(--fire-text-bg);
       }
 
       &.water {
         background: var(--water-bg);
-        color: var(--water-text);
+        color: var(--water-text-bg);
       }
 
       &.earth {
         background: var(--earth-bg);
-        color: var(--earth-text);
+        color: var(--earth-text-bg);
       }
 
       &.wind {
         background: var(--wind-bg);
-        color: var(--wind-text);
+        color: var(--wind-text-bg);
       }
 
       &.dark {
         background: var(--dark-bg);
-        color: var(--dark-text);
+        color: var(--dark-text-bg);
       }
 
       &.light {
         background: var(--light-bg);
-        color: var(--light-text);
+        color: var(--light-text-bg);
       }
     }
   }

components/ElementToggle/index.tsx

@@ -1,74 +1,113 @@
-import React from 'react'
+'use client'
-import { useRouter } from 'next/router'
+import React, { useEffect, useState } from 'react'
-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'
-
+import styles from './index.module.scss'
-import './index.scss'
 
 interface Props {
   currentElement: number
-  sendValue: (value: string) => void
+  sendValue: (value: number) => void
 }
 
-const ElementToggle = (props: Props) => {
+const ElementToggle = ({ currentElement, sendValue, ...props }: Props) => {
-  const router = useRouter()
+  // Localization
-  const { t } = useTranslation('common')
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
+  const t = useTranslations('common')
+
+  // State: Component
+  const [element, setElement] = useState(currentElement)
+
+  // Methods: Handlers
+  const handleElementChange = (value: string) => {
+    const newElement = parseInt(value)
+    setElement(newElement)
+    sendValue(newElement)
+  }
+
+  // Methods: Rendering
   return (
     <ToggleGroup.Root
-      className="ToggleGroup"
+      className={styles.group}
       type="single"
-      defaultValue={`${props.currentElement}`}
+      value={`${element}`}
       aria-label="Element"
-      onValueChange={props.sendValue}
+      onValueChange={handleElementChange}
     >
       <ToggleGroup.Item
-        className={`ToggleItem ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="0"
         aria-label="null"
       >
         {t('elements.null')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem wind ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.wind]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="1"
         aria-label="wind"
       >
         {t('elements.wind')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem fire ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.fire]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="2"
         aria-label="fire"
       >
         {t('elements.fire')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem water ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.water]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="3"
         aria-label="water"
       >
         {t('elements.water')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem earth ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.earth]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="4"
         aria-label="earth"
       >
         {t('elements.earth')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem dark ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.dark]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="5"
         aria-label="dark"
       >
         {t('elements.dark')}
       </ToggleGroup.Item>
       <ToggleGroup.Item
-        className={`ToggleItem light ${locale}`}
+        className={classNames({
+          [styles.item]: true,
+          [styles.light]: true,
+          [styles[`${locale}`]]: true,
+        })}
         value="6"
         aria-label="light"
       >

components/ErrorSection/index.module.scss

@@ -1,4 +1,4 @@
-section.Error {
+.error {
   align-items: center;
   display: flex;
   flex-direction: column;
@@ -9,14 +9,13 @@ section.Error {
   height: 60vh;
   text-align: center;
 
-  .Code {
+  .code {
     color: var(--text-secondary);
     font-size: $font-tiny;
     font-weight: $bold;
   }
 
-  .Button {
+  p {
-    margin-top: $unit-2x;
+    margin-bottom: $unit-4x;
-    width: fit-content;
   }
 }

components/ErrorSection/index.tsx

@@ -1,11 +1,11 @@
 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'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   status: ResponseStatus
@@ -13,7 +13,7 @@ interface Props {
 
 const ErrorSection = ({ status }: Props) => {
   // Import translations
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
 
   const [statusText, setStatusText] = useState('')
 
@@ -24,7 +24,7 @@ const ErrorSection = ({ status }: Props) => {
   const errorBody = () => {
     return (
       <>
-        <div className="Code">{status.code}</div>
+        <div className={styles.code}>{status.code}</div>
         <h1>{t(`errors.${statusText}.title`)}</h1>
         <p>{t(`errors.${statusText}.description`)}</p>
       </>
@@ -32,7 +32,7 @@ const ErrorSection = ({ status }: Props) => {
   }
 
   return (
-    <section className="Error">
+    <section className={styles.error}>
       {errorBody()}
       {[401, 404].includes(status.code) ? (
         <Link href="/new">

components/FilterBar/index.scss

@@ -1,127 +0,0 @@
-.FilterBar {
-  align-items: center;
-  background: var(--bar-bg);
-  border-radius: $card-corner;
-  box-sizing: border-box;
-  display: flex;
-  flex-direction: row;
-  gap: $unit-2x;
-  margin: 0 auto;
-  margin-top: 7px; // Line up with HeaderMenu
-  padding: $unit * 2;
-  position: sticky;
-  transition: box-shadow 0.24s ease-in-out;
-  top: $unit * 4;
-  width: 100%;
-  max-width: 996px;
-  min-height: 80px;
-
-  @include breakpoint(tablet) {
-    position: static;
-    flex-direction: column;
-    width: 100%;
-  }
-
-  @include breakpoint(phone) {
-    min-height: auto;
-  }
-
-  .Filters {
-    display: flex;
-    box-sizing: border-box;
-    flex-direction: row;
-    flex-grow: 1;
-    gap: $unit;
-    width: auto;
-
-    @include breakpoint(tablet) {
-      flex-direction: column;
-      width: 100%;
-    }
-
-    .Button.Filter.Blended {
-      &.FiltersActive .Accessory svg {
-        fill: var(--accent-blue);
-        stroke: none;
-      }
-
-      &:hover {
-        background: var(--button-bg);
-      }
-
-      .Accessory svg {
-        fill: none;
-        stroke: var(--button-text);
-        width: 18px;
-        height: 18px;
-      }
-    }
-  }
-
-  &.shadow {
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.14);
-  }
-
-  h1 {
-    color: var(--text-primary);
-    font-size: $font-regular;
-    font-weight: $normal;
-    flex-grow: 1;
-    text-align: left;
-  }
-
-  select,
-  .SelectTrigger {
-    // background: url("/icons/Arrow.svg"), $grey-90;
-    // background-repeat: no-repeat;
-    // background-position-y: center;
-    // background-position-x: 95%;
-    // background-size: $unit * 1.5;
-    background-color: var(--select-contained-bg);
-    color: $grey-55;
-    font-size: $font-small;
-    margin: 0;
-    max-width: 200px;
-
-    &:hover {
-      background-color: var(--select-contained-bg-hover);
-    }
-
-    @include breakpoint(tablet) {
-      width: 100%;
-      max-width: inherit;
-      text-align: center;
-    }
-  }
-
-  .SelectTrigger {
-    width: 100%;
-
-    span {
-      font-size: $font-small;
-    }
-  }
-
-  .UserInfo {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    gap: $unit * 1.5;
-
-    img {
-      $diameter: $unit * 6;
-      border-radius: calc($diameter / 2);
-      height: $diameter;
-      width: $diameter;
-
-      &.gran {
-        background-color: #cee7fe;
-      }
-
-      &.djeeta {
-        background-color: #ffe1fe;
-      }
-    }
-  }
-}

components/FilterModal/index.scss

@@ -1,15 +0,0 @@
-.Dialog {
-  .Filter.DialogContent {
-    overflow: hidden;
-
-    .TableField .Right .SelectTrigger.Table {
-      width: $unit-20x;
-      min-width: auto;
-    }
-  }
-
-  .DialogFooter .Buttons .Button.Blended {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}

components/GridRep/index.scss

@@ -1,199 +0,0 @@
-.GridRep {
-  aspect-ratio: 3/2;
-  border-radius: $card-corner;
-  box-sizing: border-box;
-  display: grid;
-  grid-template-rows: 1fr 1fr;
-  gap: $unit;
-  padding: $unit-2x;
-  min-width: 320px;
-  width: 100%;
-
-  &:hover {
-    background: var(--grid-rep-hover);
-
-    a {
-      text-decoration: none;
-    }
-
-    h2,
-    .Grid {
-      cursor: pointer;
-    }
-
-    .Grid .Weapon {
-      box-shadow: inset 0 0 0 1px var(--grid-border-color);
-    }
-
-    @include breakpoint(phone) {
-      background: inherit;
-
-      .Grid .Weapon {
-        box-shadow: none;
-      }
-    }
-  }
-
-  & > .Grid {
-    aspect-ratio: 2/0.95;
-    display: grid;
-    grid-template-columns: 1fr 3.36fr; /* left column takes up 1 fraction, right column takes up 3 fractions */
-    grid-gap: $unit; /* add a gap of 8px between grid items */
-
-    .Weapon {
-      background: var(--card-bg);
-      border-radius: 4px;
-    }
-
-    .Mainhand.Weapon {
-      aspect-ratio: 73/153;
-      display: grid;
-      grid-column: 1 / 2; /* spans one column */
-      max-height: 140px;
-    }
-
-    .GridWeapons {
-      display: grid; /* make the right-images container a grid */
-      grid-template-columns: repeat(
-        3,
-        1fr
-      ); /* create 3 columns, each taking up 1 fraction */
-      grid-template-rows: repeat(
-        3,
-        1fr
-      ); /* create 3 rows, each taking up 1 fraction */
-      gap: $unit;
-      // column-gap: $unit;
-      // row-gap: $unit-2x;
-    }
-
-    .Grid.Weapon {
-      aspect-ratio: 280 / 160;
-      display: grid;
-    }
-
-    .Mainhand.Weapon img[src*='jpg'],
-    .Grid.Weapon img[src*='jpg'] {
-      border-radius: 4px;
-      width: 100%;
-    }
-  }
-
-  .Details {
-    display: flex;
-    flex-direction: column;
-    gap: calc($unit / 2);
-
-    h2 {
-      color: var(--text-primary);
-      font-size: $font-regular;
-      overflow: hidden;
-      padding-bottom: 1px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      max-width: 258px; // Can we not do this?
-
-      &.empty {
-        color: var(--text-tertiary);
-      }
-    }
-
-    .top {
-      display: flex;
-      flex-direction: row;
-      gap: calc($unit / 2);
-      align-items: center;
-
-      .info {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        gap: calc($unit / 2);
-      }
-
-      button svg {
-        width: 14px;
-        height: 14px;
-      }
-    }
-
-    .bottom {
-      display: flex;
-      flex-direction: row;
-
-      a.user:hover {
-        color: var(--link-text-hover);
-      }
-    }
-
-    .Properties,
-    .user {
-      flex-grow: 1;
-    }
-
-    .user,
-    .raid,
-    time {
-      color: $grey-55;
-      font-size: $font-small;
-    }
-
-    .Properties {
-      .auto {
-        display: inline-flex;
-        gap: $unit-half;
-        flex-direction: row;
-        margin-left: $unit-half;
-      }
-
-      .full_auto {
-        color: var(--full-auto-label-text);
-      }
-
-      .auto_guard {
-        width: 12px;
-        height: 12px;
-
-        svg {
-          fill: var(--full-auto-label-text);
-        }
-      }
-    }
-
-    .raid {
-      color: var(--text-primary);
-      margin-bottom: calc($unit / 2);
-
-      &.empty {
-        color: var(--text-tertiary);
-      }
-    }
-
-    .user {
-      display: flex;
-      gap: calc($unit / 2);
-      align-items: center;
-
-      img,
-      .no-user {
-        $diameter: 18px;
-
-        border-radius: calc($diameter / 2);
-        height: $diameter;
-        width: $diameter;
-      }
-
-      img.gran {
-        background-color: #cee7fe;
-      }
-
-      img.djeeta {
-        background-color: #ffe1fe;
-      }
-
-      .no-user {
-        background: $grey-80;
-      }
-    }
-  }
-}

components/GridRep/index.tsx

@@ -1,281 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { useRouter } from 'next/router'
-import { useSnapshot } from 'valtio'
-import { useTranslation } from 'next-i18next'
-import classNames from 'classnames'
-import 'fix-date'
-
-import { accountState } from '~utils/accountState'
-import { formatTimeAgo } from '~utils/timeAgo'
-
-import Button from '~components/common/Button'
-
-import SaveIcon from '~public/icons/Save.svg'
-import ShieldIcon from '~public/icons/Shield.svg'
-import './index.scss'
-
-interface Props {
-  shortcode: string
-  id: string
-  name: string
-  raid: Raid
-  grid: GridWeapon[]
-  user?: User
-  fullAuto: boolean
-  autoGuard: boolean
-  favorited: boolean
-  createdAt: Date
-  displayUser?: boolean | false
-  onClick: (shortcode: string) => void
-  onSave?: (partyId: string, favorited: boolean) => void
-}
-
-const GridRep = (props: Props) => {
-  const numWeapons: number = 9
-
-  const { account } = useSnapshot(accountState)
-
-  const router = useRouter()
-  const { t } = useTranslation('common')
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
-
-  const [mainhand, setMainhand] = useState<Weapon>()
-  const [weapons, setWeapons] = useState<GridArray<Weapon>>({})
-  const [grid, setGrid] = useState<GridArray<GridWeapon>>({})
-
-  const titleClass = classNames({
-    empty: !props.name,
-  })
-
-  const raidClass = classNames({
-    raid: true,
-    empty: !props.raid,
-  })
-
-  const userClass = classNames({
-    user: true,
-    empty: !props.user,
-  })
-
-  useEffect(() => {
-    const newWeapons = Array(numWeapons)
-    const gridWeapons = Array(numWeapons)
-
-    let foundMainhand = false
-    for (const [key, value] of Object.entries(props.grid)) {
-      if (value.position == -1) {
-        setMainhand(value.object)
-        foundMainhand = true
-      } else if (!value.mainhand && value.position != null) {
-        newWeapons[value.position] = value.object
-        gridWeapons[value.position] = value
-      }
-    }
-
-    if (!foundMainhand) {
-      setMainhand(undefined)
-    }
-
-    setWeapons(newWeapons)
-    setGrid(gridWeapons)
-  }, [props.grid])
-
-  function navigate() {
-    props.onClick(props.shortcode)
-  }
-
-  function generateMainhandImage() {
-    let url = ''
-
-    if (mainhand) {
-      const weapon = Object.values(props.grid).find(
-        (w) => w && w.object.id === mainhand.id
-      )
-
-      if (mainhand.element == 0 && weapon && weapon.element) {
-        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}_${weapon.element}.jpg`
-      } else {
-        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-main/${mainhand.granblue_id}.jpg`
-      }
-    }
-
-    return mainhand && props.grid[0] ? (
-      <img alt={mainhand.name[locale]} src={url} />
-    ) : (
-      ''
-    )
-  }
-
-  function generateGridImage(position: number) {
-    let url = ''
-
-    const weapon = weapons[position]
-    const gridWeapon = grid[position]
-
-    if (weapon && gridWeapon) {
-      if (weapon.element == 0 && gridWeapon.element) {
-        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${gridWeapon.element}.jpg`
-      } else {
-        url = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
-      }
-    }
-
-    return weapons[position] ? (
-      <img alt={weapons[position]?.name[locale]} src={url} />
-    ) : (
-      ''
-    )
-  }
-
-  function sendSaveData() {
-    if (props.onSave) props.onSave(props.id, props.favorited)
-  }
-
-  const userImage = () => {
-    if (props.user && props.user.avatar) {
-      return (
-        <img
-          alt={props.user.avatar.picture}
-          className={`profile ${props.user.avatar.element}`}
-          srcSet={`/profile/${props.user.avatar.picture}.png,
-                              /profile/${props.user.avatar.picture}@2x.png 2x`}
-          src={`/profile/${props.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`}
-        />
-      )
-  }
-
-  const linkedAttribution = () => (
-    <Link href={`/${props.user ? props.user.username : '#'}`}>
-      <span className={userClass}>
-        {userImage()}
-        {props.user ? props.user.username : t('no_user')}
-      </span>
-    </Link>
-  )
-
-  const unlinkedAttribution = () => (
-    <div className={userClass}>
-      {userImage()}
-      {props.user ? props.user.username : t('no_user')}
-    </div>
-  )
-
-  function fullAutoString() {
-    const fullAutoElement = (
-      <span className="full_auto">
-        {` · ${t('party.details.labels.full_auto')}`}
-      </span>
-    )
-
-    const autoGuardElement = (
-      <span className="auto_guard">
-        <ShieldIcon />
-      </span>
-    )
-
-    return (
-      <div className="auto">
-        {fullAutoElement}
-        {props.autoGuard ? autoGuardElement : ''}
-      </div>
-    )
-  }
-  const details = (
-    <div className="Details">
-      <h2 className={titleClass}>{props.name ? props.name : t('no_title')}</h2>
-      <div className="bottom">
-        <div className="Properties">
-          <span className={raidClass}>
-            {props.raid ? props.raid.name[locale] : t('no_raid')}
-          </span>
-          {props.fullAuto ? fullAutoString() : ''}
-        </div>
-        <time className="last-updated" dateTime={props.createdAt.toISOString()}>
-          {formatTimeAgo(props.createdAt, locale)}
-        </time>
-      </div>
-    </div>
-  )
-
-  const detailsWithUsername = (
-    <div className="Details">
-      <div className="top">
-        <div className="info">
-          <h2 className={titleClass}>
-            {props.name ? props.name : t('no_title')}
-          </h2>
-          <div className="Properties">
-            <span className={raidClass}>
-              {props.raid ? props.raid.name[locale] : t('no_raid')}
-            </span>
-            {props.fullAuto ? (
-              <span className="full_auto">
-                {` · ${t('party.details.labels.full_auto')}`}
-              </span>
-            ) : (
-              ''
-            )}
-          </div>
-        </div>
-        {account.authorized &&
-        ((props.user && account.user && account.user.id !== props.user.id) ||
-          !props.user) ? (
-          <Link href="#">
-            <Button
-              className="Save"
-              leftAccessoryIcon={<SaveIcon className="stroke" />}
-              active={props.favorited}
-              contained={true}
-              buttonSize="small"
-              onClick={sendSaveData}
-            />
-          </Link>
-        ) : (
-          ''
-        )}
-      </div>
-      <div className="bottom">
-        {props.user ? linkedAttribution() : unlinkedAttribution()}
-
-        <time className="last-updated" dateTime={props.createdAt.toISOString()}>
-          {formatTimeAgo(props.createdAt, locale)}
-        </time>
-      </div>
-    </div>
-  )
-
-  return (
-    <Link href={`/p/${props.shortcode}`}>
-      <a className="GridRep">
-        {props.displayUser ? detailsWithUsername : details}
-        <div className="Grid">
-          <div className="Mainhand Weapon">{generateMainhandImage()}</div>
-
-          <ul className="GridWeapons">
-            {Array.from(Array(numWeapons)).map((x, i) => {
-              return (
-                <li key={`${props.shortcode}-${i}`} className="Grid Weapon">
-                  {generateGridImage(i)}
-                </li>
-              )
-            })}
-          </ul>
-        </div>
-      </a>
-    </Link>
-  )
-}
-
-export default GridRep

components/GridRepCollection/index.tsx

@@ -1,18 +0,0 @@
-import classNames from 'classnames'
-import React from 'react'
-
-import './index.scss'
-
-interface Props {
-  children: React.ReactNode
-}
-
-const GridRepCollection = (props: Props) => {
-  const classes = classNames({
-    GridRepCollection: true,
-  })
-
-  return <div className={classes}>{props.children}</div>
-}
-
-export default GridRepCollection

components/Header/index.module.scss

@@ -1,4 +1,32 @@
-#Header {
+.bahamut {
+  $negative-margin: $unit * -2;
+
+  align-items: center;
+  background: #2b4683;
+  box-sizing: border-box;
+  display: flex;
+  gap: $unit;
+  justify-content: center;
+  text-align: center;
+  font-weight: $bold;
+  padding: $unit-2x;
+  margin-top: $negative-margin;
+  margin-left: $negative-margin;
+  margin-right: $negative-margin;
+  margin-bottom: $unit-2x;
+  width: 100vw;
+
+  p {
+    color: white;
+  }
+
+  svg {
+    width: 1.2em;
+    fill: white;
+  }
+}
+
+.header {
   display: flex;
   flex-direction: row;
   margin-bottom: $unit;
@@ -22,7 +50,7 @@
     background: var(--placeholder-bg);
   }
 
-  #DropdownWrapper {
+  .dropdownWrapper {
     display: inline-block;
     padding-bottom: $unit;
 
@@ -32,8 +60,6 @@
     }
 
     &:hover {
-      // padding-right: $unit-4x;
-
       .Button {
         background: var(--button-bg-hover);
         color: var(--button-text-hover);

components/Header/index.tsx

@@ -1,86 +1,58 @@
-import React, { useEffect, useState } from 'react'
+'use client'
-import { subscribe, useSnapshot } from 'valtio'
+import React, { useState } from 'react'
-import { setCookie, deleteCookie } from 'cookies-next'
+import { deleteCookie, getCookie } from 'cookies-next'
-import { useRouter } from 'next/router'
+import { useTranslations } from 'next-intl'
-import { Trans, useTranslation } from 'next-i18next'
+import { useRouter } from '~/i18n/navigation'
+import { useSnapshot } from 'valtio'
 import classNames from 'classnames'
 import clonedeep from 'lodash.clonedeep'
 import Link from 'next/link'
 
-import api from '~utils/api'
 import { accountState, initialAccountState } from '~utils/accountState'
 import { appState, initialAppState } from '~utils/appState'
-import { getLocalId } from '~utils/localId'
-import { retrieveLocaleCookies } from '~utils/retrieveCookies'
-import { setEditKey, storeEditKey } from '~utils/userToken'
 
+import Alert from '~components/common/Alert'
 import {
   DropdownMenu,
   DropdownMenuTrigger,
   DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
   DropdownMenuSeparator,
-  DropdownMenuLabel,
 } 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 Toast from '~components/common/Toast'
 import Button from '~components/common/Button'
 import Tooltip from '~components/common/Tooltip'
-import * as Switch from '@radix-ui/react-switch'
 
-import ArrowIcon from '~public/icons/Arrow.svg'
+import BahamutIcon from '~public/icons/Bahamut.svg'
-import LinkIcon from '~public/icons/Link.svg'
+import ChevronIcon from '~public/icons/Chevron.svg'
 import MenuIcon from '~public/icons/Menu.svg'
-import RemixIcon from '~public/icons/Remix.svg'
 import PlusIcon from '~public/icons/Add.svg'
-import SaveIcon from '~public/icons/Save.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const Header = () => {
   // Localization
-  const { t } = useTranslation('common')
+  const t = useTranslations('common')
-
-  // Router
   const router = useRouter()
-  const locale =
+
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  // Locale
-  const localeData = retrieveLocaleCookies()
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
+
+  // Subscribe to account state changes
+  const accountSnap = useSnapshot(accountState)
 
   // State management
-  const [copyToastOpen, setCopyToastOpen] = useState(false)
+  const [alertOpen, setAlertOpen] = useState(false)
-  const [remixToastOpen, setRemixToastOpen] = 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)
-  const [languageChecked, setLanguageChecked] = useState(false)
-
-  const [name, setName] = useState('')
-  const [originalName, setOriginalName] = useState('')
-
-  // Snapshots
-  const { account } = useSnapshot(accountState)
-  const { party: partySnapshot } = useSnapshot(appState)
-
-  // Subscribe to app state to listen for party name and
-  // unsubscribe when component is unmounted
-  const unsubscribe = subscribe(appState, () => {
-    const newName =
-      appState.party && appState.party.name ? appState.party.name : ''
-    setName(newName)
-  })
-
-  useEffect(() => () => unsubscribe(), [])
-
-  // Hooks
-  useEffect(() => {
-    setLanguageChecked(localeData === 'ja' ? true : false)
-  }, [localeData])
 
   // Methods: Event handlers (Buttons)
   function handleLeftMenuButtonClicked() {
@@ -108,24 +80,6 @@ const Header = () => {
     setRightMenuOpen(false)
   }
 
-  // Methods: Event handlers (Copy toast)
-  function handleCopyToastOpenChanged(open: boolean) {
-    setCopyToastOpen(open)
-  }
-
-  function handleCopyToastCloseClicked() {
-    setCopyToastOpen(false)
-  }
-
-  // Methods: Event handlers (Remix toasts)
-  function handleRemixToastOpenChanged(open: boolean) {
-    setRemixToastOpen(open)
-  }
-
-  function handleRemixToastCloseClicked() {
-    setRemixToastOpen(false)
-  }
-
   // Methods: Actions
   function handleNewTeam(event: React.MouseEvent) {
     event.preventDefault()
@@ -133,32 +87,6 @@ const Header = () => {
     closeRightMenu()
   }
 
-  function changeLanguage(value: boolean) {
-    const language = value ? 'ja' : 'en'
-    const expiresAt = new Date()
-    expiresAt.setDate(expiresAt.getDate() + 120)
-
-    setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
-    router.push(router.asPath, undefined, { locale: language })
-  }
-
-  function copyToClipboard() {
-    const path = router.asPath.split('/')[1]
-
-    if (path === 'p') {
-      const el = document.createElement('input')
-      el.value = window.location.href
-      el.id = 'url-input'
-      document.body.appendChild(el)
-
-      el.select()
-      document.execCommand('copy')
-      el.remove()
-
-      setCopyToastOpen(true)
-    }
-  }
-
   function logout() {
     // Close menu
     closeRightMenu()
@@ -173,7 +101,7 @@ const Header = () => {
       if (key !== 'language') accountState[key] = resetState[key]
     })
 
-    router.reload()
+    router.refresh()
     return false
   }
 
@@ -188,90 +116,11 @@ const Header = () => {
     router.push('/new')
   }
 
-  function remixTeam() {
+  // Methods: Rendering
-    setOriginalName(partySnapshot.name ? partySnapshot.name : t('no_title'))
-
-    if (partySnapshot.shortcode) {
-      const body = getLocalId()
-      api
-        .remix({ shortcode: partySnapshot.shortcode, body: body })
-        .then((response) => {
-          const remix = response.data.party
-
-          // Store the edit key in local storage
-          if (remix.edit_key) {
-            storeEditKey(remix.id, remix.edit_key)
-            setEditKey(remix.id, remix.user)
-          }
-
-          router.push(`/p/${remix.shortcode}`)
-          setRemixToastOpen(true)
-        })
-    }
-  }
-
-  function toggleFavorite() {
-    if (partySnapshot.favorited) unsaveFavorite()
-    else saveFavorite()
-  }
-
-  function saveFavorite() {
-    if (partySnapshot.id)
-      api.saveTeam({ id: partySnapshot.id }).then((response) => {
-        if (response.status == 201) appState.party.favorited = true
-      })
-    else console.error('Failed to save team: No party ID')
-  }
-
-  function unsaveFavorite() {
-    if (partySnapshot.id)
-      api.unsaveTeam({ id: partySnapshot.id }).then((response) => {
-        if (response.status == 200) appState.party.favorited = false
-      })
-    else console.error('Failed to unsave team: No party ID')
-  }
-
-  // Rendering: Elements
-  const pageTitle = () => {
-    let title = ''
-    let hasAccessory = false
-
-    const path = router.asPath.split('/')[1]
-    if (path === 'p') {
-      hasAccessory = true
-      if (appState.party && appState.party.name) {
-        title = appState.party.name
-      } else {
-        title = t('no_title')
-      }
-    } else {
-      title = ''
-    }
-
-    return title !== '' ? (
-      <Tooltip content={t('tooltips.copy_url')}>
-        <Button
-          blended={true}
-          rightAccessoryIcon={
-            path === 'p' && hasAccessory ? (
-              <LinkIcon className="stroke" />
-            ) : undefined
-          }
-          text={title}
-          onClick={copyToClipboard}
-        />
-      </Tooltip>
-    ) : (
-      ''
-    )
-  }
-
   const profileImage = () => {
-    let image
+    const user = accountSnap.account.user
-
+    if (accountSnap.account.authorized && user) {
-    const user = accountState.account.user
+      return (
-    if (accountState.account.authorized && user) {
-      image = (
         <img
           alt={user.username}
           className={`profile ${user.avatar.element}`}
@@ -281,9 +130,9 @@ const Header = () => {
         />
       )
     } else {
-      image = (
+      return (
         <img
-          alt={t('no_user')}
+          alt={t('header.anonymous')}
           className={`profile anonymous`}
           srcSet={`/profile/npc.png, 
                       /profile/npc@2x.png 2x`}
@@ -291,327 +140,266 @@ const Header = () => {
         />
       )
     }
-
-    return image
   }
 
   // Rendering: Buttons
-  const saveButton = () => {
+  const newButton = (
-    return (
+    <Tooltip content={t('tooltips.new')}>
-      <Tooltip content={t('tooltips.save')}>
+      <Button
-        <Button
+        leftAccessoryIcon={<PlusIcon />}
-          leftAccessoryIcon={<SaveIcon />}
+        className="New"
-          className={classNames({
+        blended={true}
-            Save: true,
+        text={t('buttons.new')}
-            Saved: partySnapshot.favorited,
+        onClick={newTeam}
-          })}
-          blended={true}
-          text={
-            partySnapshot.favorited ? t('buttons.saved') : t('buttons.save')
-          }
-          onClick={toggleFavorite}
-        />
-      </Tooltip>
-    )
-  }
-
-  const newButton = () => {
-    return (
-      <Tooltip content={t('tooltips.new')}>
-        <Button
-          leftAccessoryIcon={<PlusIcon />}
-          className="New"
-          blended={true}
-          text={t('buttons.new')}
-          onClick={newTeam}
-        />
-      </Tooltip>
-    )
-  }
-
-  const remixButton = () => {
-    return (
-      <Tooltip content={t('tooltips.remix')}>
-        <Button
-          leftAccessoryIcon={<RemixIcon />}
-          className="Remix"
-          blended={true}
-          text={t('buttons.remix')}
-          onClick={remixTeam}
-        />
-      </Tooltip>
-    )
-  }
-
-  // Rendering: Toasts
-  const urlCopyToast = () => {
-    return (
-      <Toast
-        altText={t('toasts.copied')}
-        open={copyToastOpen}
-        duration={2400}
-        type="foreground"
-        content={t('toasts.copied')}
-        onOpenChange={handleCopyToastOpenChanged}
-        onCloseClick={handleCopyToastCloseClicked}
       />
-    )
+    </Tooltip>
-  }
+  )
-
-  const remixToast = () => {
-    return (
-      <Toast
-        altText={t('toasts.remixed', { title: originalName })}
-        open={remixToastOpen}
-        duration={2400}
-        type="foreground"
-        content={
-          <Trans i18nKey="toasts.remixed">
-            You remixed <strong>{{ title: originalName }}</strong>
-          </Trans>
-        }
-        onOpenChange={handleRemixToastOpenChanged}
-        onCloseClick={handleRemixToastCloseClicked}
-      />
-    )
-  }
 
   // Rendering: Modals
-  const settingsModal = () => {
+  const logoutConfirmationAlert = (
-    const user = accountState.account.user
+    <Alert
+      message={t('alert.confirm_logout')}
+      open={alertOpen}
+      primaryActionText="Log out"
+      primaryAction={logout}
+      cancelActionText="Nevermind"
+      cancelAction={() => setAlertOpen(false)}
+    />
+  )
 
-    if (user) {
+  const settingsModal = (
-      return (
+    <>
+      {accountSnap.account.user && (
         <AccountModal
           open={settingsModalOpen}
-          username={user.username}
+          username={accountSnap.account.user.username}
-          picture={user.avatar.picture}
+          picture={accountSnap.account.user.avatar.picture}
-          gender={user.gender}
+          gender={accountSnap.account.user.gender}
-          language={user.language}
+          language={accountSnap.account.user.language}
-          theme={user.theme}
+          theme={accountSnap.account.user.theme}
+          role={accountSnap.account.user.role}
+          bahamutMode={
+            accountSnap.account.user.role === 9
+              ? accountSnap.account.user.bahamut
+              : false
+          }
           onOpenChange={setSettingsModalOpen}
         />
-      )
+      )}
-    }
+    </>
-  }
+  )
 
-  const loginModal = () => {
+  const loginModal = (
-    return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+    <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
-  }
+  )
 
-  const signupModal = () => {
+  const signupModal = (
-    return (
+    <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
-      <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
+  )
-    )
-  }
 
   // Rendering: Compositing
-  const left = () => {
+  const authorizedLeftItems = (
-    return (
+    <>
-      <section>
+      {accountSnap.account.user && (
-        <div id="DropdownWrapper">
+        <>
-          <DropdownMenu
+          <DropdownMenuGroup>
-            open={leftMenuOpen}
+            <DropdownMenuItem onClick={closeLeftMenu}>
-            onOpenChange={handleLeftMenuOpenChange}
+              <Link
-          >
+                href={`/${accountSnap.account.user.username}` || ''}
-            <DropdownMenuTrigger asChild>
+              >
-              <Button
+                <span>{t('menu.profile')}</span>
-                leftAccessoryIcon={<MenuIcon />}
+              </Link>
-                className={classNames({ Active: leftMenuOpen })}
+            </DropdownMenuItem>
-                blended={true}
+            <DropdownMenuItem onClick={closeLeftMenu}>
-                onClick={handleLeftMenuButtonClicked}
+              <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
-              />
+            </DropdownMenuItem>
-            </DropdownMenuTrigger>
+          </DropdownMenuGroup>
-            <DropdownMenuContent className="Left">
+        </>
-              {leftMenuItems()}
+      )}
-            </DropdownMenuContent>
+    </>
-          </DropdownMenu>
+  )
-        </div>
+  const leftMenuItems = (
-        {!appState.errorCode ? pageTitle() : ''}
+    <>
-      </section>
+      {accountSnap.account.authorized &&
-    )
+        accountSnap.account.user &&
-  }
+        authorizedLeftItems}
 
-  const right = () => {
+      <DropdownMenuGroup>
-    return (
+        <DropdownMenuItem onClick={closeLeftMenu}>
-      <section>
+          <Link href="/teams">{t('menu.teams')}</Link>
-        {router.route === '/p/[party]' &&
+        </DropdownMenuItem>
-        account.user &&
+        <DropdownMenuItem>
-        (!partySnapshot.user || partySnapshot.user.id !== account.user.id) &&
+          <div>
-        !appState.errorCode
+            <span>{t('menu.guides')}</span>
-          ? saveButton()
+            <i className="tag">{t('coming_soon')}</i>
-          : ''}
+          </div>
-        {router.route === '/p/[party]' && !appState.errorCode
+        </DropdownMenuItem>
-          ? remixButton()
+      </DropdownMenuGroup>
-          : ''}
+      <DropdownMenuGroup>
-        {newButton()}
+        <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={rightMenuOpen}
+          open={leftMenuOpen}
-          onOpenChange={handleRightMenuOpenChange}
+          onOpenChange={handleLeftMenuOpenChange}
         >
           <DropdownMenuTrigger asChild>
             <Button
-              className={classNames({ Active: rightMenuOpen })}
+              active={leftMenuOpen}
-              leftAccessoryIcon={profileImage()}
-              rightAccessoryIcon={<ArrowIcon />}
-              rightAccessoryClassName="Arrow"
-              onClick={handleRightMenuButtonClicked}
               blended={true}
+              leftAccessoryIcon={<MenuIcon />}
+              onClick={handleLeftMenuButtonClicked}
             />
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="Right">
+          <DropdownMenuContent className="Left">
-            {rightMenuItems()}
+            {leftMenuItems}
           </DropdownMenuContent>
         </DropdownMenu>
-      </section>
+      </div>
-    )
+    </section>
-  }
+  )
 
-  const leftMenuItems = () => {
+  const authorizedRightItems = (
-    return (
+    <>
-      <>
+      {accountSnap.account.user && (
-        {accountState.account.authorized && accountState.account.user ? (
-          <>
-            <DropdownMenuGroup className="MenuGroup">
-              <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
-                <Link
-                  href={`/${accountState.account.user.username}` || ''}
-                  passHref
-                >
-                  <span>{t('menu.profile')}</span>
-                </Link>
-              </DropdownMenuItem>
-              <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
-                <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
-          </>
-        ) : (
-          ''
-        )}
-        <DropdownMenuGroup className="MenuGroup">
-          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
-            <Link href="/teams">{t('menu.teams')}</Link>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="MenuItem">
-            <div>
-              <span>{t('menu.guides')}</span>
-              <i className="tag">{t('coming_soon')}</i>
-            </div>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuGroup className="MenuGroup">
-          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
-            <a
-              href={locale == 'ja' ? '/ja/about' : '/about'}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t('about.segmented_control.about')}
-            </a>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
-            <a
-              href={locale == 'ja' ? '/ja/updates' : '/updates'}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t('about.segmented_control.updates')}
-            </a>
-          </DropdownMenuItem>
-          <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
-            <a
-              href={locale == 'ja' ? '/ja/roadmap' : '/roadmap'}
-              target="_blank"
-              rel="noreferrer"
-            >
-              {t('about.segmented_control.roadmap')}
-            </a>
-          </DropdownMenuItem>
-        </DropdownMenuGroup>
-      </>
-    )
-  }
-
-  const rightMenuItems = () => {
-    let items
-
-    const account = accountState.account
-    if (account.authorized && account.user) {
-      items = (
         <>
-          <DropdownMenuGroup className="MenuGroup">
+          <DropdownMenuGroup>
-            <DropdownMenuLabel className="MenuLabel">
+            <DropdownMenuLabel>
-              {account.user ? `@${account.user.username}` : t('no_user')}
+              {`@${accountSnap.account.user.username}`}
             </DropdownMenuLabel>
-            <DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
+            <DropdownMenuItem onClick={closeRightMenu}>
-              <Link href={`/${account.user.username}` || ''} passHref>
+              <Link
+                href={`/${accountSnap.account.user.username}` || ''}
+              >
                 <span>{t('menu.profile')}</span>
               </Link>
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuGroup className="MenuGroup">
+          <DropdownMenuGroup>
             <DropdownMenuItem
               className="MenuItem"
               onClick={() => setSettingsModalOpen(true)}
             >
               <span>{t('menu.settings')}</span>
             </DropdownMenuItem>
-            <DropdownMenuItem className="MenuItem" onClick={logout}>
+            <DropdownMenuItem
+              onClick={() => setAlertOpen(true)}
+              destructive={true}
+            >
               <span>{t('menu.logout')}</span>
             </DropdownMenuItem>
           </DropdownMenuGroup>
         </>
-      )
+      )}
-    } else {
+    </>
-      items = (
+  )
-        <>
-          <DropdownMenuGroup className="MenuGroup">
-            <DropdownMenuItem className="MenuItem language">
-              <span>{t('menu.language')}</span>
-              <Switch.Root
-                className="Switch"
-                onCheckedChange={changeLanguage}
-                checked={languageChecked}
-              >
-                <Switch.Thumb className="Thumb" />
-                <span className="left">JP</span>
-                <span className="right">EN</span>
-              </Switch.Root>
-            </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>
-        </>
-      )
-    }
 
-    return items
+  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 = (
+    <>
+      {accountSnap.account.authorized && accountSnap.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 (
-    <nav id="Header">
+    <>
-      {left()}
+      {accountSnap.account.user?.bahamut && (
-      {right()}
+        <div className={styles.bahamut}>
-      {urlCopyToast()}
+          <BahamutIcon />
-      {remixToast()}
+          <p>Bahamut Mode is active</p>
-      {settingsModal()}
+        </div>
-      {loginModal()}
+      )}
-      {signupModal()}
+      <nav className={styles.header}>
-    </nav>
+        {left}
+        {right}
+        {logoutConfirmationAlert}
+        {settingsModal}
+        {loginModal}
+        {signupModal}
+      </nav>
+    </>
   )
 }
 

components/HovercardHeader/index.module.scss

@@ -0,0 +1,59 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  gap: calc($unit / 2);
+
+  .title {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    gap: $unit * 2;
+
+    h4 {
+      flex-grow: 1;
+      font-size: $font-medium;
+      line-height: 1.2;
+      min-width: 140px;
+    }
+
+    img {
+      height: auto;
+      width: 100px;
+    }
+
+    .image {
+      position: relative;
+
+      .perpetuity {
+        position: absolute;
+        background-image: url('/icons/perpetuity/filled.svg');
+        background-size: $unit-3x $unit-3x;
+        z-index: 20;
+        top: $unit-half * -1;
+        right: $unit-3x;
+        width: $unit-3x;
+        height: $unit-3x;
+      }
+    }
+  }
+
+  .subInfo {
+    align-items: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    gap: $unit-2x;
+
+    .icons {
+      display: flex;
+      flex-direction: row;
+      flex-grow: 0;
+      gap: $unit-half;
+
+      .proficiencies {
+        display: flex;
+        gap: $unit;
+      }
+    }
+  }
+}

components/HovercardHeader/index.tsx

@@ -0,0 +1,193 @@
+'use client'
+import { getCookie } from 'cookies-next'
+
+import UncapIndicator from '~components/uncap/UncapIndicator'
+import WeaponLabelIcon from '~components/weapon/WeaponLabelIcon'
+
+import styles from './index.module.scss'
+import classNames from 'classnames'
+
+interface Props {
+  gridObject: GridCharacter | GridSummon | GridWeapon
+  object: Character | Summon | Weapon
+  type: 'character' | 'summon' | 'weapon'
+}
+
+const Element = ['null', 'wind', 'fire', 'water', 'earth', 'dark', 'light']
+const Proficiency = [
+  'none',
+  'sword',
+  'dagger',
+  'axe',
+  'spear',
+  'bow',
+  'staff',
+  'fist',
+  'harp',
+  'gun',
+  'katana',
+]
+
+const HovercardHeader = ({ gridObject, object, type, ...props }: Props) => {
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
+
+  const overlay = () => {
+    if (type === 'character') {
+      const gridCharacter = gridObject as GridCharacter
+      if (gridCharacter.perpetuity) return <i className={styles.perpetuity} />
+    } else if (type === 'summon') {
+      const gridSummon = gridObject as GridSummon
+      if (gridSummon.quick_summon) return <i className={styles.quickSummon} />
+    }
+  }
+
+  const characterImage = () => {
+    const gridCharacter = gridObject as GridCharacter
+    const character = object as Character
+
+    // Change the image based on the uncap level
+    let suffix = '01'
+    if (gridCharacter.uncap_level == 6) suffix = '04'
+    else if (gridCharacter.uncap_level == 5) suffix = '03'
+    else if (gridCharacter.uncap_level > 2) suffix = '02'
+
+    return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-grid/${character.granblue_id}_${suffix}.jpg`
+  }
+
+  const summonImage = () => {
+    const summon = object as Summon
+    const gridSummon = gridObject as GridSummon
+
+    const upgradedSummons = [
+      '2040094000',
+      '2040100000',
+      '2040080000',
+      '2040098000',
+      '2040090000',
+      '2040084000',
+      '2040003000',
+      '2040056000',
+    ]
+
+    let suffix = ''
+    if (
+      upgradedSummons.indexOf(summon.granblue_id.toString()) != -1 &&
+      gridSummon.uncap_level == 5
+    ) {
+      suffix = '_02'
+    } else if (
+      gridSummon.object.uncap.transcendence &&
+      gridSummon.transcendence_step > 0
+    ) {
+      suffix = '_03'
+    }
+
+    // Generate the correct source for the summon
+    return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${summon.granblue_id}${suffix}.jpg`
+  }
+
+  const weaponImage = () => {
+    const gridWeapon = gridObject as GridWeapon
+    const weapon = object as Weapon
+
+    if (gridWeapon.object.element == 0 && gridWeapon.element)
+      return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}_${gridWeapon.element}.jpg`
+    else
+      return `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${weapon.granblue_id}.jpg`
+  }
+
+  const image = () => {
+    switch (type) {
+      case 'character':
+        return characterImage()
+      case 'summon':
+        return summonImage()
+      case 'weapon':
+        return weaponImage()
+    }
+  }
+
+  const summonProficiency = (
+    <div className={styles.icons}>
+      <WeaponLabelIcon labelType={Element[object.element]} size="small" />
+    </div>
+  )
+
+  const weaponProficiency = (
+    <div className={styles.icons}>
+      <WeaponLabelIcon labelType={Element[object.element]} size="small" />
+      {'proficiency' in object && !Array.isArray(object.proficiency) && (
+        <WeaponLabelIcon
+          labelType={Proficiency[object.proficiency]}
+          size="small"
+        />
+      )}
+    </div>
+  )
+
+  const characterProficiency = (
+    <div
+      className={classNames({
+        [styles.icons]: true,
+      })}
+    >
+      <WeaponLabelIcon labelType={Element[object.element]} size="small" />
+
+      {'proficiency' in object && Array.isArray(object.proficiency) && (
+        <WeaponLabelIcon
+          labelType={Proficiency[object.proficiency[0]]}
+          size="small"
+        />
+      )}
+
+      {'proficiency' in object &&
+        Array.isArray(object.proficiency) &&
+        object.proficiency.length > 1 && (
+          <WeaponLabelIcon
+            labelType={Proficiency[object.proficiency[1]]}
+            size="small"
+          />
+        )}
+    </div>
+  )
+
+  function proficiency() {
+    switch (type) {
+      case 'character':
+        return characterProficiency
+      case 'summon':
+        return summonProficiency
+      case 'weapon':
+        return weaponProficiency
+    }
+  }
+
+  return (
+    <header className={styles.root}>
+      <div className={styles.title}>
+        <h4>{object.name[locale]}</h4>
+        <div className={styles.image}>
+          {overlay()}
+          <img alt={object.name[locale]} src={image()} />
+        </div>
+      </div>
+      <div className={styles.subInfo}>
+        {proficiency()}
+        <UncapIndicator
+          className="hovercard"
+          type={type}
+          ulb={object.uncap.ulb || false}
+          flb={object.uncap.flb || false}
+          transcendenceStage={
+            'transcendence_step' in gridObject
+              ? gridObject.transcendence_step
+              : 0
+          }
+          special={'special' in object ? object.special : false}
+        />
+      </div>
+    </header>
+  )
+}
+
+export default HovercardHeader

components/LanguageSwitch/index.module.scss

@@ -0,0 +1,56 @@
+.languageSwitch {
+  $height: 24px;
+
+  background: $grey-60;
+  border-radius: calc($height / 2);
+  border: none;
+  position: relative;
+  width: 44px;
+  height: $height;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .thumb {
+    $diameter: 18px;
+
+    background: $grey-100;
+    border-radius: calc($diameter / 2);
+    display: block;
+    height: $diameter;
+    width: $diameter;
+    position: absolute;
+    top: 3px;
+    left: 3px;
+    z-index: 3;
+
+    &:hover {
+      cursor: pointer;
+    }
+
+    &[data-state='checked'] {
+      background: $grey-100;
+      left: 23px;
+    }
+  }
+
+  .left,
+  .right {
+    color: $grey-100;
+    font-size: 10px;
+    font-weight: $bold;
+    position: absolute;
+    z-index: 2;
+  }
+
+  .left {
+    top: 6px;
+    left: 6px;
+  }
+
+  .right {
+    top: 6px;
+    right: 5px;
+  }
+}

components/LanguageSwitch/index.tsx

@@ -0,0 +1,54 @@
+'use client'
+import React, { PropsWithChildren, useEffect, useState } from 'react'
+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'
+import styles from './index.module.scss'
+
+interface Props extends SwitchPrimitive.SwitchProps {}
+
+export const LanguageSwitch = React.forwardRef<HTMLButtonElement, Props>(
+  function LanguageSwitch(
+    { children }: PropsWithChildren<Props>,
+    forwardedRef
+  ) {
+    // Router and locale data
+    const router = useRouter()
+    const pathname = usePathname()
+    const localeData = retrieveLocaleCookies()
+
+    // State
+    const [languageChecked, setLanguageChecked] = useState(false)
+
+    // Hooks
+    useEffect(() => {
+      setLanguageChecked(localeData === 'ja' ? true : false)
+    }, [localeData])
+
+    function changeLanguage(value: boolean) {
+      const language = value ? 'ja' : 'en'
+      const expiresAt = new Date()
+      expiresAt.setDate(expiresAt.getDate() + 120)
+
+      setCookie('NEXT_LOCALE', language, { path: '/', expires: expiresAt })
+      router.refresh()
+    }
+
+    return (
+      <SwitchPrimitive.Root
+        className={styles.languageSwitch}
+        onCheckedChange={changeLanguage}
+        checked={languageChecked}
+        ref={forwardedRef}
+      >
+        <SwitchPrimitive.Thumb className={styles.thumb} />
+        <span className={styles.left}>JP</span>
+        <span className={styles.right}>EN</span>
+      </SwitchPrimitive.Root>
+    )
+  }
+)
+
+export default LanguageSwitch

components/Layout/index.scss

@@ -1,15 +0,0 @@
-.ToastViewport {
-  position: fixed;
-  bottom: 0px;
-  right: 0px;
-  display: flex;
-  flex-direction: column;
-  width: 340px;
-  max-width: 100vw;
-  z-index: 2147483647;
-  padding: 25px;
-  gap: 10px;
-  margin: 0px;
-  list-style: none;
-  outline: none;
-}

components/Layout/index.tsx

@@ -1,32 +1,33 @@
+'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'
 
 import { appState } from '~utils/appState'
 
 import TopHeader from '~components/Header'
-import UpdateToast from '~components/about/UpdateToast'
+import UpdateToast from '~components/toasts/UpdateToast'
-
-import './index.scss'
 
 interface Props {}
 
 const Layout = ({ children }: PropsWithChildren<Props>) => {
-  const router = useRouter()
+  const pathname = usePathname()
   const [updateToastOpen, setUpdateToastOpen] = useState(false)
 
   useEffect(() => {
-    const cookie = getToastCookie()
+    if (appState.version) {
-    const now = new Date()
+      const cookie = getToastCookie()
-    const updatedAt = new Date(appState.version.updated_at)
+      const now = new Date()
-    const validUntil = add(updatedAt, { days: 7 })
+      const updatedAt = new Date(appState.version.updated_at)
+      const validUntil = add(updatedAt, { days: 7 })
 
-    if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
+      if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
+    }
   }, [])
 
   function getToastCookie() {
-    if (appState.version.updated_at !== '') {
+    if (appState.version && appState.version.updated_at !== '') {
       const updatedAt = new Date(appState.version.updated_at)
       const cookieValues = getCookie(
         `update-${format(updatedAt, 'yyyy-MM-dd')}`
@@ -48,25 +49,34 @@ const Layout = ({ children }: PropsWithChildren<Props>) => {
   }
 
   const updateToast = () => {
-    const path = router.asPath.replaceAll('/', '')
+    const path = pathname?.replaceAll('/', '') || ''
 
-    return !['about', 'updates', 'roadmap'].includes(path) ? (
+    return (
-      <UpdateToast
+      !['about', 'updates', 'roadmap'].includes(path) &&
-        open={updateToastOpen}
+      appState.version && (
-        updateType={appState.version.update_type}
+        <UpdateToast
-        onActionClicked={handleToastActionClicked}
+          open={updateToastOpen}
-        onCloseClicked={handleToastClosed}
+          updateType={appState.version.update_type}
-        lastUpdated={appState.version.updated_at}
+          onActionClicked={handleToastActionClicked}
-      />
+          onCloseClicked={handleToastClosed}
-    ) : (
+          lastUpdated={appState.version.updated_at}
-      ''
+        />
+      )
+    )
+  }
+
+  const ServerAvailable = () => {
+    return (
+      <>
+        <TopHeader />
+        {updateToast()}
+      </>
     )
   }
 
   return (
     <>
-      <TopHeader />
+      {appState.version ? ServerAvailable() : ''}
-      {updateToast()}
       <main>{children}</main>
     </>
   )

components/MentionList/index.module.scss

@@ -0,0 +1,56 @@
+.items {
+  background: #fff;
+  border-radius: $item-corner;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0px 10px 20px rgba(0, 0, 0, 0.1);
+  color: rgba(0, 0, 0, 0.8);
+  overflow: hidden;
+  padding: $unit-half;
+  pointer-events: all;
+  position: relative;
+}
+
+.item {
+  align-items: center;
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: $item-corner-small;
+  color: var(--text-tertiary);
+  font-size: $font-small;
+  font-weight: $medium;
+  display: flex;
+  gap: $unit;
+  margin: 0;
+  padding: $unit-half $unit;
+  text-align: left;
+  width: 100%;
+
+  &:hover,
+  &.selected {
+    background: var(--menu-bg-item-hover);
+    color: var(--text-primary);
+  }
+
+  .job {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: $unit-4x;
+    height: $unit-4x;
+
+    img {
+      width: $unit-3x;
+      height: auto;
+    }
+  }
+
+  img {
+    border-radius: $item-corner-small;
+    width: $unit-4x;
+    height: $unit-4x;
+  }
+}
+
+.noResult {
+  padding: $unit;
+  color: var(--text-tertiary);
+}

components/MentionList/index.tsx

@@ -0,0 +1,126 @@
+'use client'
+import React, {
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+  useState,
+} from 'react'
+import { useTranslations } from 'next-intl'
+import { getCookie } from 'cookies-next'
+import { SuggestionProps } from '@tiptap/suggestion'
+import classNames from 'classnames'
+
+import styles from './index.module.scss'
+
+type Props = Pick<SuggestionProps, 'items' | 'command' | 'query'>
+
+export type MentionRef = {
+  onKeyDown: (props: { event: KeyboardEvent }) => boolean
+}
+
+export type MentionSuggestion = {
+  granblue_id: string
+  name: {
+    [key: string]: string
+    en: string
+    ja: string
+  }
+  type: string
+  element: number
+}
+
+interface MentionProps extends SuggestionProps {
+  items: MentionSuggestion[]
+}
+
+export const MentionList = forwardRef<MentionRef, Props>(
+  ({ items, ...props }: Props, forwardedRef) => {
+    const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
+
+    const t = useTranslations('common')
+
+    const [selectedIndex, setSelectedIndex] = useState(0)
+
+    const selectItem = (index: number) => {
+      const item = items[index]
+
+      if (item) {
+        props.command({ id: item })
+      }
+    }
+
+    const upHandler = () => {
+      setSelectedIndex((selectedIndex + items.length - 1) % items.length)
+    }
+
+    const downHandler = () => {
+      setSelectedIndex((selectedIndex + 1) % items.length)
+    }
+
+    const enterHandler = () => {
+      selectItem(selectedIndex)
+    }
+
+    useEffect(() => setSelectedIndex(0), [items])
+
+    useImperativeHandle(forwardedRef, () => ({
+      onKeyDown: ({ event }) => {
+        if (event.key === 'ArrowUp') {
+          upHandler()
+          return true
+        }
+
+        if (event.key === 'ArrowDown') {
+          downHandler()
+          return true
+        }
+
+        if (event.key === 'Enter') {
+          enterHandler()
+          return true
+        }
+
+        return false
+      },
+    }))
+
+    return (
+      <div className={styles.items}>
+        {items.length ? (
+          items.map((item, index) => (
+            <button
+              className={classNames({
+                [styles.item]: true,
+                [styles.selected]: index === selectedIndex,
+              })}
+              key={index}
+              onClick={() => selectItem(index)}
+            >
+              <div className={styles[item.type]}>
+                <img
+                  alt={item.name[locale]}
+                  src={
+                    item.type === 'character'
+                      ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}_01.jpg`
+                      : item.type === 'job'
+                      ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/job-icons/${item.granblue_id}.png`
+                      : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/${item.type}-square/${item.granblue_id}.jpg`
+                  }
+                />
+              </div>
+              <span>{item.name[locale]}</span>
+            </button>
+          ))
+        ) : (
+          <div className={styles.noResult}>
+            {props.query.length < 3
+              ? t('search.errors.type')
+              : t('search.errors.no_results_generic')}
+          </div>
+        )}
+      </div>
+    )
+  }
+)
+
+MentionList.displayName = 'MentionList'

components/RaidDropdown/index.tsx

@@ -1,144 +0,0 @@
-import React, { useCallback, useEffect, useState } from 'react'
-import { useRouter } from 'next/router'
-
-import Select from '~components/common/Select'
-import SelectItem from '~components/common/SelectItem'
-import SelectGroup from '~components/common/SelectGroup'
-
-import api from '~utils/api'
-import organizeRaids from '~utils/organizeRaids'
-import { appState } from '~utils/appState'
-import { raidGroups } from '~data/raidGroups'
-
-import './index.scss'
-
-// Props
-interface Props {
-  showAllRaidsOption: boolean
-  currentRaid?: string
-  defaultRaid?: string
-  onChange?: (slug?: string) => void
-  onBlur?: (event: React.ChangeEvent<HTMLSelectElement>) => void
-}
-
-// Set up empty raid for "All raids"
-const allRaidsOption = {
-  id: '0',
-  name: {
-    en: 'All raids',
-    ja: '全て',
-  },
-  slug: 'all',
-  level: 0,
-  group: 0,
-  element: 0,
-}
-
-const RaidDropdown = React.forwardRef<HTMLSelectElement, Props>(
-  function useFieldSet(props, ref) {
-    // Set up router for locale
-    const router = useRouter()
-    const locale = router.locale || 'en'
-
-    // Set up local states for storing raids
-    const [open, setOpen] = useState(false)
-    const [currentRaid, setCurrentRaid] = useState<Raid | undefined>(undefined)
-    const [raids, setRaids] = useState<Raid[]>()
-    const [sortedRaids, setSortedRaids] = useState<Raid[][]>()
-
-    function openRaidSelect() {
-      setOpen(!open)
-    }
-
-    // Organize raids into groups on mount
-    const organizeAllRaids = useCallback(
-      (raids: Raid[]) => {
-        let { sortedRaids } = organizeRaids(raids)
-
-        if (props.showAllRaidsOption) {
-          raids.unshift(allRaidsOption)
-          sortedRaids[0].unshift(allRaidsOption)
-        }
-
-        setRaids(raids)
-        setSortedRaids(sortedRaids)
-        appState.raids = raids
-      },
-      [props.showAllRaidsOption]
-    )
-
-    // Fetch all raids on mount
-    useEffect(() => {
-      api.endpoints.raids
-        .getAll()
-        .then((response) => organizeAllRaids(response.data))
-    }, [organizeRaids])
-
-    // Set current raid on mount
-    useEffect(() => {
-      if (raids && props.currentRaid) {
-        const raid = raids.find((raid) => raid.slug === props.currentRaid)
-        if (raid) setCurrentRaid(raid)
-      }
-    }, [raids, props.currentRaid])
-
-    // Enable changing select value
-    function handleChange(value: string) {
-      if (props.onChange) props.onChange(value)
-
-      if (raids) {
-        const raid = raids.find((raid) => raid.slug === value)
-        setCurrentRaid(raid)
-      }
-    }
-
-    // Render JSX for each raid option, sorted into optgroups
-    function renderRaidGroup(index: number) {
-      const options =
-        sortedRaids &&
-        sortedRaids.length > 0 &&
-        sortedRaids[index].length > 0 &&
-        sortedRaids[index]
-          .sort((a, b) => {
-            if (a.element > 0 && b.element > 0) return a.element - b.element
-            else if (a.name.en.includes('NM') && b.name.en.includes('NM'))
-              return a.level < b.level ? -1 : 1
-            else return a.name.en < b.name.en ? -1 : 1
-          })
-          .map((item, i) => (
-            <SelectItem key={i} value={item.slug}>
-              {item.name[locale]}
-            </SelectItem>
-          ))
-
-      return (
-        <SelectGroup
-          key={index}
-          label={raidGroups[index].name[locale]}
-          separator={false}
-        >
-          {options}
-        </SelectGroup>
-      )
-    }
-
-    return (
-      <React.Fragment>
-        <Select
-          value={props.currentRaid}
-          placeholder={'Select a raid...'}
-          open={open}
-          onOpenChange={() => setOpen(!open)}
-          onClick={openRaidSelect}
-          onValueChange={handleChange}
-        >
-          {Array.from(Array(sortedRaids?.length)).map((x, i) =>
-            renderRaidGroup(i)
-          )}
-        </Select>
-      </React.Fragment>
-    )
-  }
-)
-
-export default RaidDropdown

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')
@@ -26,7 +26,7 @@ const AboutHead = ({ page }: Props) => {
         name="description"
         content={t(`page.descriptions.${currentPage}`)}
       />
-      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
       <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
 
       {/* OpenGraph */}

components/about/AboutPage/index.module.scss

@@ -1,4 +1,4 @@
-.About.PageContent {
+.about {
   $width: 520px;
   padding-bottom: $unit-12x;
 
@@ -9,7 +9,7 @@
     gap: $unit-2x;
     z-index: 5;
 
-    .Hero {
+    .hero {
       position: absolute;
       width: 40vw;
       height: 80vh;
@@ -55,22 +55,10 @@
       z-index: 2;
     }
   }
-  .Links {
+
+  .links {
     display: grid;
     gap: $unit;
     margin: $unit-2x 0;
   }
-
-  div.LinkItem {
-    margin-top: $unit-2x;
-  }
-
-  .LinkItem {
-    max-width: calc($width / 3 * 2);
-
-    @include breakpoint(phone) {
-      max-width: inherit;
-      width: 100%;
-    }
-  }
 }

components/about/AboutPage/index.tsx

@@ -1,112 +1,105 @@
 import React from 'react'
-import Link from 'next/link'
+import { useTranslations } from 'next-intl'
-import { Trans, useTranslation } from 'next-i18next'
+import classNames from 'classnames'
+
+import LinkItem from '../LinkItem'
 
-import ShareIcon from '~public/icons/Share.svg'
 import DiscordIcon from '~public/icons/discord.svg'
 import GithubIcon from '~public/icons/github.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {}
 
 const AboutPage: React.FC<Props> = (props: Props) => {
-  const { t: common } = useTranslation('common')
+  const common = useTranslations('common')
-  const { t: about } = useTranslation('about')
+  const about = useTranslations('about')
+
+  const classes = classNames(styles.about, 'PageContent')
 
   return (
-    <div className="About PageContent">
+    <div className={classes}>
       <h1>{common('about.segmented_control.about')}</h1>
       <section>
         <h2>
-          <Trans i18nKey="about:about.subtitle">
+          {about.rich('about.subtitle', {
-            Granblue.team is a tool to save and share team compositions for{' '}
+            gameLink: (chunks) => (
-            <a
+              <a
-              href="https://game.granbluefantasy.jp"
+                href="https://game.granbluefantasy.jp"
-              target="_blank"
+                target="_blank"
-              rel="noreferrer"
+                rel="noreferrer"
-            >
+              >
-              Granblue Fantasy
+                {chunks}
-            </a>
+              </a>
-            , a social RPG from Cygames.
+            )
-          </Trans>
+          })}
         </h2>
         <p>{about('about.explanation.0')}</p>
         <p>{about('about.explanation.1')}</p>
-        <div className="Hero" />
+        <div className={styles.hero} />
       </section>
 
       <section>
         <h2>{about('about.feedback.title')}</h2>
         <p>{about('about.feedback.explanation')}</p>
         <p>{about('about.feedback.solicit')}</p>
-        <div className="Discord LinkItem">
+        <LinkItem
-          <Link href="https://discord.gg/qyZ5hGdPC8">
+          className="discord constrained"
-            <a
+          title="granblue-tools"
-              href="https://discord.gg/qyZ5hGdPC8"
+          link="https://discord.gg/qyZ5hGdPC8"
-              target="_blank"
+          icon={<DiscordIcon />}
-              rel="noreferrer"
+        />
-            >
-              <div className="Left">
-                <DiscordIcon />
-                <h3>granblue-tools</h3>
-              </div>
-              <ShareIcon className="ShareIcon" />
-            </a>
-          </Link>
-        </div>
       </section>
 
       <section>
         <h2>{about('about.credits.title')}</h2>
         <p>
-          <Trans i18nKey="about:about.credits.maintainer">
+          {about.rich('about.credits.maintainer', {
-            Granblue.team was built and is maintained by{' '}
+            link: (chunks) => (
-            <a
+              <a
-              href="https://twitter.com/jedmund"
+                href="https://twitter.com/jedmund"
-              target="_blank"
+                target="_blank"
-              rel="noreferrer"
+                rel="noreferrer"
-            >
+              >
-              @jedmund
+                {chunks}
-            </a>
+              </a>
-            .
+            )
-          </Trans>
+          })}
         </p>
         <p>
-          <Trans i18nKey="about:about.credits.assistance">
+          {about.rich('about.credits.assistance', {
-            Many thanks to{' '}
+            link1: (chunks) => (
-            <a
+              <a
-              href="https://twitter.com/lalalalinna"
+                href="https://twitter.com/lalalalinna"
-              target="_blank"
+                target="_blank"
-              rel="noreferrer"
+                rel="noreferrer"
-            >
+              >
-              @lalalalinna
+                {chunks}
-            </a>{' '}
+              </a>
-            and{' '}
+            ),
-            <a
+            link2: (chunks) => (
-              href="https://twitter.com/tarngerine"
+              <a
-              target="_blank"
+                href="https://twitter.com/tarngerine"
-              rel="noreferrer"
+                target="_blank"
-            >
+                rel="noreferrer"
-              @tarngerine
+              >
-            </a>
+                {chunks}
-            , who both provided a lot of help and advice as I was ramping up.
+              </a>
-          </Trans>
+            )
+          })}
         </p>
         <p>
-          <Trans i18nKey="about:about.credits.support">
+          {about.rich('about.credits.support', {
-            Many thanks also go to everyone in{' '}
+            link: (chunks) => (
-            <a
+              <a
-              href="https://game.granbluefantasy.jp/#guild/detail/1190185"
+                href="https://game.granbluefantasy.jp/#guild/detail/1190185"
-              target="_blank"
+                target="_blank"
-              rel="noreferrer"
+                rel="noreferrer"
-            >
+              >
-              Fireplace
+                {chunks}
-            </a>{' '}
+              </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>
         </p>
       </section>
 
@@ -114,53 +107,35 @@ const AboutPage: React.FC<Props> = (props: Props) => {
         <h2>{about('about.contributing.title')}</h2>
 
         <p>{about('about.contributing.explanation')}</p>
-        <ul className="Links">
+        <div className={styles.links}>
-          <li className="Github LinkItem">
+          <LinkItem
-            <Link href="https://github.com/jedmund/hensei-api">
+            className="github constrained"
-              <a
+            title="jedmund/hensei-api"
-                href="https://github.com/jedmund/hensei-api"
+            link="https://github.com/jedmund/hensei-api"
-                target="_blank"
+            icon={<GithubIcon />}
-                rel="noreferrer"
+          />
-              >
+          <LinkItem
-                <div className="Left">
+            className="github constrained"
-                  <GithubIcon />
+            title="jedmund/hensei-web"
-                  <h3>jedmund/hensei-api</h3>
+            link="https://github.com/jedmund/hensei-web"
-                </div>
+            icon={<GithubIcon />}
-                <ShareIcon className="ShareIcon" />
+          />
-              </a>
+        </div>
-            </Link>
-          </li>
-          <li className="Github LinkItem">
-            <Link href="https://github.com/jedmund/hensei-web">
-              <a
-                href="https://github.com/jedmund/hensei-web"
-                target="_blank"
-                rel="noreferrer"
-              >
-                <div className="Left">
-                  <GithubIcon />
-                  <h3>jedmund/hensei-web</h3>
-                </div>
-                <ShareIcon className="ShareIcon" />
-              </a>
-            </Link>
-          </li>
-        </ul>
       </section>
       <section>
         <h2>{about('about.license.title')}</h2>
         <p>
-          <Trans i18nKey="about:about.license.license">
+          {about.rich('about.license.license', {
-            This app is licensed under{' '}
+            link: (chunks) => (
-            <a
+              <a
-              href="https://choosealicense.com/licenses/agpl-3.0/"
+                href="https://choosealicense.com/licenses/agpl-3.0/"
-              target="_blank"
+                target="_blank"
-              rel="noreferrer"
+                rel="noreferrer"
-            >
+              >
-              GNU AGPLv3
+                {chunks}
-            </a>
+              </a>
-            .
+            )
-          </Trans>
+          })}
         </p>
         <p>{about('about.license.explanation')}</p>
       </section>

components/about/ChangelogUnit/index.module.scss

@@ -1,4 +1,4 @@
-.ChangelogUnit {
+.unit {
   display: flex;
   flex-direction: column;
   gap: $unit;

components/about/ChangelogUnit/index.tsx

@@ -1,12 +1,12 @@
-import { useRouter } from 'next/router'
+'use client'
 import React, { useEffect, useState } from 'react'
-import api from '~utils/api'
+import { getCookie } from 'cookies-next'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 interface Props {
   id: string
-  type: 'character' | 'summon' | 'weapon'
+  type: 'character' | 'summon' | 'weapon' | 'raid' | 'job'
   image?: '01' | '02' | '03' | '04'
 }
 
@@ -19,62 +19,71 @@ const defaultProps = {
 }
 
 const ChangelogUnit = ({ id, type, image }: Props) => {
-  // Router
+  // Locale
-  const router = useRouter()
+  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
-  const locale =
-    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
 
   // State
   const [item, setItem] = useState<Character | Weapon | Summon>()
 
   // Hooks
   useEffect(() => {
-    fetch()
+    fetchItem()
-  }, [])
+  }, [id, type])
 
-  async function fetch() {
+  async function fetchItem() {
-    switch (type) {
+    try {
-      case 'character':
+      let endpoint = ''
-        const character = await fetchCharacter()
+      
-        setItem(character.data)
+      switch (type) {
-        break
+        case 'character':
-
+          endpoint = `/api/characters/${id}`
-      case 'weapon':
+          break
-        const weapon = await fetchWeapon()
+        case 'weapon':
-        setItem(weapon.data)
+          endpoint = `/api/weapons/${id}`
-        break
+          break
-
+        case 'summon':
-      case 'summon':
+          endpoint = `/api/summons/${id}`
-        const summon = await fetchSummon()
+          break
-        setItem(summon.data)
+        case 'raid':
-        break
+          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 })
-  }
-
   const imageUrl = () => {
     let src = ''
 
     switch (type) {
       case 'character':
-        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/chara-grid/${id}_${image}.jpg`
+        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-grid/${id}_${image}.jpg`
         break
       case 'weapon':
-        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
+        src =
+          image === '03'
+            ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}_${image}.jpg`
+            : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/weapon-grid/${id}.jpg`
         break
       case 'summon':
-        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
+        src =
+          image === '04'
+            ? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}_${image}.jpg`
+            : `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/summon-grid/${id}.jpg`
+        break
+
+      case 'raid':
+        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/raids/${id}.png`
         break
     }
 
@@ -82,7 +91,7 @@ const ChangelogUnit = ({ id, type, image }: Props) => {
   }
 
   return (
-    <div className="ChangelogUnit" key={id}>
+    <div className={styles.unit} key={id}>
       <img alt={item ? item.name[locale] : ''} src={imageUrl()} />
       <h4>{item ? item.name[locale] : ''}</h4>
     </div>

components/about/ContentUpdate/index.module.scss

@@ -0,0 +1,72 @@
+.content.version {
+  display: flex;
+  flex-direction: column;
+  gap: $unit-2x;
+
+  .header {
+    align-items: baseline;
+    display: flex;
+    gap: $unit-half;
+    margin-bottom: $unit-2x;
+
+    h3 {
+      color: var(--accent-yellow);
+      font-weight: $medium;
+      font-size: $font-large;
+    }
+
+    time {
+      color: var(--text-secondary);
+      font-size: $font-small;
+      font-weight: $medium;
+    }
+  }
+
+  .contents {
+    margin-bottom: $unit-3x;
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: $unit-4x;
+
+    .characters,
+    .weapons,
+    .summons,
+    .raids {
+      display: grid;
+      grid-template-rows: auto 1fr;
+      gap: $unit;
+
+      & > h4 {
+        font-weight: $medium;
+        font-size: $font-regular;
+      }
+
+      .items {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+        gap: $unit-4x;
+      }
+    }
+  }
+
+  .notes {
+    h4 {
+      font-weight: $medium;
+      font-size: $font-regular;
+      margin-bottom: $unit-2x;
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      color: var(--text-primary);
+      list-style-type: disc;
+      list-style-position: inside;
+      gap: $unit-half;
+
+      li {
+        font-size: 14px;
+      }
+    }
+  }
+}

components/about/ContentUpdate/index.scss

@@ -1,11 +0,0 @@
-.Content.Version {
-  .Contents {
-    margin-bottom: $unit-3x;
-  }
-
-  .Notes h4 {
-    font-weight: $medium;
-    font-size: $font-regular;
-    margin-bottom: $unit-2x;
-  }
-}

components/about/ContentUpdate/index.tsx

@@ -1,8 +1,9 @@
 import React from 'react'
-import { useTranslation } from 'next-i18next'
+import { useTranslations } from 'next-intl'
-import ChangelogUnit from '~components/about/ChangelogUnit'
+import classNames from 'classnames'
 
-import './index.scss'
+import ChangelogUnit from '~components/about/ChangelogUnit'
+import styles from './index.module.scss'
 
 interface UpdateObject {
   character?: string[]
@@ -16,6 +17,9 @@ interface Props {
   event: string
   newItems?: UpdateObject
   uncappedItems?: UpdateObject
+  transcendedItems?: UpdateObject
+  awakenedItems?: string[]
+  raidItems?: string[]
   numNotes: number
 }
 const ContentUpdate = ({
@@ -24,9 +28,12 @@ const ContentUpdate = ({
   event,
   newItems,
   uncappedItems,
+  transcendedItems,
+  awakenedItems,
+  raidItems,
   numNotes,
 }: Props) => {
-  const { t: updates } = useTranslation('updates')
+  const updates = useTranslations('updates')
 
   const date = new Date(dateString)
 
@@ -51,9 +58,9 @@ const ContentUpdate = ({
       const items = newItems[key]
       section =
         items && items.length > 0 ? (
-          <section className={`${key}s`}>
+          <section className={styles[`${key}s`]}>
             <h4>{updates(`labels.${key}s`)}</h4>
-            <div className="items">{newItemElements(key)}</div>
+            <div className={styles.items}>{newItemElements(key)}</div>
           </section>
         ) : (
           ''
@@ -70,9 +77,9 @@ const ContentUpdate = ({
       elements = items
         ? items.map((id) => {
             return key === 'character' ? (
-              <ChangelogUnit id={id} type={key} image="03" />
+              <ChangelogUnit id={id} type={key} key={id} image="03" />
             ) : (
-              <ChangelogUnit id={id} type={key} />
+              <ChangelogUnit id={id} type={key} key={id} />
             )
           })
         : []
@@ -87,9 +94,9 @@ const ContentUpdate = ({
       const items = uncappedItems[key]
       section =
         items && items.length > 0 ? (
-          <section className={`${key}s`}>
+          <section className={styles[`${key}s`]}>
             <h4>{updates(`labels.uncaps.${key}s`)}</h4>
-            <div className="items">{uncapItemElements(key)}</div>
+            <div className={styles.items}>{uncapItemElements(key)}</div>
           </section>
         ) : (
           ''
@@ -99,28 +106,127 @@ const ContentUpdate = ({
     return section
   }
 
+  function transcendItemElements(key: 'character' | 'weapon' | 'summon') {
+    let elements: React.ReactNode[] = []
+    if (transcendedItems && transcendedItems[key]) {
+      const items = transcendedItems[key]
+      elements = items
+        ? items.map((id) => {
+            return key === 'character' || key === 'summon' ? (
+              <ChangelogUnit id={id} type={key} key={id} image="04" />
+            ) : (
+              <ChangelogUnit id={id} type={key} key={id} image="03" />
+            )
+          })
+        : []
+    }
+    return elements
+  }
+
+  function transcendItemSection(key: 'character' | 'weapon' | 'summon') {
+    let section: React.ReactNode = ''
+
+    if (transcendedItems && transcendedItems[key]) {
+      const items = transcendedItems[key]
+      section =
+        items && items.length > 0 ? (
+          <section className={styles[`${key}s`]}>
+            <h4>{updates(`labels.transcends.${key}s`)}</h4>
+            <div className={styles.items}>{transcendItemElements(key)}</div>
+          </section>
+        ) : (
+          ''
+        )
+    }
+
+    return section
+  }
+
+  function newRaidSection() {
+    let section: React.ReactNode = ''
+
+    if (raidItems) {
+      section = raidItems && raidItems.length > 0 && (
+        <section className={styles['raids']}>
+          <h4>{updates(`labels.raids`)}</h4>
+          <div className={styles.items}>{raidItemElements()}</div>
+        </section>
+      )
+    }
+
+    return section
+  }
+
+  function awakenedItemElements() {
+    let elements: React.ReactNode[] = []
+    if (awakenedItems) {
+      elements = awakenedItems.map((id) => {
+        return <ChangelogUnit id={id} type="weapon" key={id} />
+      })
+    }
+    return elements
+  }
+
+  function awakenedItemSection() {
+    let section: React.ReactNode = ''
+
+    if (awakenedItems && awakenedItems.length > 0) {
+      section = (
+        <section className={styles['weapons']}>
+          <h4>{updates(`labels.awakened.weapons`)}</h4>
+          <div className={styles.items}>{awakenedItemElements()}</div>
+        </section>
+      )
+    }
+
+    return section
+  }
+
+  function raidItemElements() {
+    let elements: React.ReactNode[] = []
+
+    if (raidItems) {
+      elements = raidItems.map((id) => {
+        return <ChangelogUnit id={id} type="raid" key={id} />
+      })
+    }
+
+    return elements
+  }
+
   return (
-    <section className="Content Version" data-version={version}>
+    <section
-      <div className="Header">
+      className={classNames({
+        [styles.content]: true,
+        [styles.version]: true,
+      })}
+      data-version={version}
+    >
+      <div className={styles.header}>
         <h3>{`${updates('events.date', {
           year: date.getFullYear(),
           month: `${date.getMonth() + 1}`.padStart(2, '0'),
         })}  ${updates(event)}`}</h3>
         <time>{dateString}</time>
       </div>
-      <div className="Contents">
+      <div className={styles.contents}>
         {newItemSection('character')}
         {uncapItemSection('character')}
+        {transcendItemSection('character')}
         {newItemSection('weapon')}
         {uncapItemSection('weapon')}
+        {transcendItemSection('weapon')}
         {newItemSection('summon')}
         {uncapItemSection('summon')}
+        {transcendItemSection('summon')}
+        {awakenedItemSection()}
+        {newRaidSection()}
       </div>
       {numNotes > 0 ? (
-        <div className="Notes">
+        <div className={styles.notes}>
           <section>
             <h4>{updates('labels.updates')}</h4>
-            <ul className="Bare Contents">
+            <ul className={styles.list}>
               {[...Array(numNotes)].map((e, i) => (
                 <li key={`${version}-${i}`}>
                   {updates(`versions.${version}.features.${i}`)}

components/about/LinkItem/index.module.scss

@@ -0,0 +1,81 @@
+.item {
+  $diameter: $unit-6x;
+  align-items: center;
+  background: var(--dialog-bg);
+  border: 1px solid var(--link-item-bg);
+  border-radius: $card-corner;
+  display: flex;
+  min-height: 82px;
+  transition: background $duration-zoom ease-in,
+    transform $duration-zoom ease-in;
+
+  &:hover {
+    background: var(--link-item-bg);
+    color: var(--text-primary);
+
+    .shareIcon {
+      fill: var(--text-primary);
+      transform: translate($unit-half, calc(($unit * -1) / 2));
+    }
+  }
+
+  &.constrained {
+    max-width: 520px;
+
+    @include breakpoint(phone) {
+      max-width: inherit;
+      width: 100%;
+    }
+  }
+
+  &.constrained.update {
+    max-width: 360px;
+  }
+
+  &.github:hover .left .icon svg {
+    fill: var(--text-primary);
+  }
+
+  &.discord:hover .left .icon svg {
+    fill: #5865f2;
+  }
+
+  a {
+    display: flex;
+    justify-content: space-between;
+    padding: $unit-2x;
+    width: 100%;
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    .left {
+      align-items: center;
+      display: flex;
+      gap: $unit-2x;
+      flex-grow: 1;
+
+      h3 {
+        font-weight: 600;
+        max-width: 70%;
+        line-height: 1.3;
+      }
+    }
+
+    svg {
+      fill: var(--link-item-image-color);
+      width: $diameter;
+      height: auto;
+      transition: fill $duration-zoom ease-in;
+
+      &.shareIcon {
+        width: $unit-4x;
+      }
+    }
+  }
+
+  h3 {
+    font-weight: $bold;
+  }
+}

components/about/LinkItem/index.tsx

@@ -0,0 +1,34 @@
+import { ComponentProps } from 'react'
+import classNames from 'classnames'
+
+import ShareIcon from '~public/icons/Share.svg'
+import styles from './index.module.scss'
+
+interface Props extends ComponentProps<'div'> {
+  title: string
+  link: string
+  icon: React.ReactNode
+}
+
+const LinkItem = ({ icon, title, link, className, ...props }: Props) => {
+  const classes = classNames(
+    {
+      [styles.item]: true,
+    },
+    className?.split(' ').map((c) => styles[c])
+  )
+
+  return (
+    <div className={classes}>
+      <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>
+  )
+}
+
+export default LinkItem

components/about/RoadmapPage/index.module.scss

@@ -0,0 +1,61 @@
+.roadmap {
+  padding-bottom: $unit-12x;
+
+  h3.priority {
+    font-weight: $medium;
+    font-size: $font-large;
+    margin-bottom: $unit-4x;
+
+    &.in_progress {
+      color: $yellow;
+    }
+
+    &.high {
+      color: $red;
+    }
+
+    &.mid {
+      color: $orange-10;
+    }
+
+    &.low {
+      color: $blue;
+    }
+  }
+
+  .notes {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+    margin-bottom: $unit-2x;
+
+    p {
+      margin-bottom: $unit;
+      font-size: $font-medium;
+    }
+  }
+
+  ul {
+    color: var(--text-primary);
+    list-style-type: none;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: $unit-3x;
+
+    li {
+      display: flex;
+      flex-direction: column;
+      gap: $unit;
+      margin-bottom: $unit-2x;
+
+      h4 {
+        font-size: $font-medium;
+        font-weight: $bold;
+      }
+
+      p {
+        font-size: $font-regular;
+      }
+    }
+  }
+}

components/about/RoadmapPage/index.scss

@@ -1,107 +0,0 @@
-.Roadmap.PageContent {
-  padding-bottom: $unit-12x;
-  h3.priority {
-    font-weight: $medium;
-    font-size: $font-large;
-    margin-bottom: $unit-4x;
-
-    &.in_progress {
-      color: $yellow;
-    }
-
-    &.high {
-      color: $red;
-    }
-
-    &.mid {
-      color: $orange-10;
-    }
-
-    &.low {
-      color: $blue;
-    }
-  }
-
-  .notes {
-    display: flex;
-    flex-direction: column;
-    gap: $unit;
-    margin-bottom: $unit-2x;
-
-    p {
-      margin-bottom: $unit;
-      font-size: $font-medium;
-    }
-
-    .LinkItem {
-      $diameter: $unit-6x;
-      background: var(--dialog-bg);
-      border: 1px solid var(--link-item-bg);
-      border-radius: $card-corner;
-
-      &:hover {
-        background-color: var(--link-item-bg);
-
-        svg {
-          fill: var(--link-item-image-color-hover);
-        }
-      }
-
-      a {
-        display: flex;
-        padding: $unit-2x;
-
-        &:hover {
-          text-decoration: none;
-        }
-
-        .Left {
-          align-items: center;
-          display: flex;
-          gap: $unit-2x;
-          flex-grow: 1;
-        }
-
-        svg {
-          fill: var(--link-item-image-color);
-          width: $diameter;
-          height: auto;
-
-          &.ShareIcon {
-            width: $unit-4x;
-          }
-        }
-      }
-
-      h3 {
-        font-weight: $bold;
-        max-width: 70%;
-        line-height: 1.3;
-      }
-    }
-  }
-
-  ul {
-    color: var(--text-primary);
-    list-style-type: none;
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: $unit-3x;
-
-    li {
-      display: flex;
-      flex-direction: column;
-      gap: $unit;
-      margin-bottom: $unit-2x;
-
-      h4 {
-        font-size: $font-medium;
-        font-weight: $bold;
-      }
-
-      p {
-        font-size: $font-regular;
-      }
-    }
-  }
-}

components/about/RoadmapPage/index.tsx

@@ -1,45 +1,46 @@
+'use client'
+
 import React from 'react'
-import Link from 'next/link'
 
-import { useRouter } from 'next/router'
+import { useTranslations } from 'next-intl'
-import { useTranslation } from 'next-i18next'
+import classNames from 'classnames'
 
-import ShareIcon from '~public/icons/Share.svg'
+import LinkItem from '~components/about/LinkItem'
 import GithubIcon from '~public/icons/github.svg'
 
-import './index.scss'
+import styles from './index.module.scss'
 
 const ROADMAP_ITEMS = 6
 
 const RoadmapPage = () => {
-  const { t: common } = useTranslation('common')
+  const common = useTranslations('common')
-  const { t: about } = useTranslation('about')
+  const about = useTranslations('about')
+
+  const classes = classNames(styles.roadmap, 'PageContent')
 
   return (
-    <div className="Roadmap PageContent">
+    <div className={classes}>
       <h1>{common('about.segmented_control.roadmap')}</h1>
-      <section className="notes">
+      <section className={styles.notes}>
         <p>{about('roadmap.blurb')}</p>
         <p>{about('roadmap.link.intro')}</p>
-        <div className="Github LinkItem">
+        <LinkItem
-          <Link href="https://github.com/users/jedmund/projects/1/views/3">
+          className="github"
-            <a
+          title={about('roadmap.link.title')}
-              href="https://github.com/users/jedmund/projects/1/views/3"
+          link="https://github.com/users/jedmund/projects/1/views/3"
-              target="_blank"
+          icon={<GithubIcon />}
-              rel="noreferrer"
+        />
-            >
-              <div className="Left">
-                <GithubIcon />
-                <h3>{about('roadmap.link.title')}</h3>
-              </div>
-              <ShareIcon className="ShareIcon" />
-            </a>
-          </Link>
-        </div>
       </section>
 
-      <section className="features">
+      <section className={styles.features}>
-        <h3 className="priority in_progress">{about('roadmap.subtitle')}</h3>
+        <h3
+          className={classNames({
+            [styles.priority]: true,
+            [styles.in_progress]: true,
+          })}
+        >
+          {about('roadmap.subtitle')}
+        </h3>
         <ul>
           {[...Array(ROADMAP_ITEMS)].map((e, i) => (
             <li key={`roadmap-${i}`}>

components/about/UpdatesPage/index.module.scss

@@ -0,0 +1,31 @@
+.updates {
+  .top {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+  }
+
+  .yearSelector {
+    display: flex;
+    flex-direction: row;
+    gap: $unit-2x;
+
+    .yearButton {
+      background: none;
+      border: none;
+      font-size: $font-medium;
+      font-weight: $bold;
+      font-variant-numeric: oldstyle-nums;
+      padding: 0;
+
+      &.active {
+        color: var(--accent-blue);
+      }
+
+      &:hover {
+        color: var(--accent-blue);
+        cursor: pointer;
+      }
+    }
+  }
+}

components/about/UpdatesPage/index.tsx

@@ -1,455 +1,67 @@
-import React from 'react'
+import React, { useState } from 'react'
+import { useTranslations } from 'next-intl'
+import classNames from 'classnames'
 
-import { useTranslation } from 'next-i18next'
+import ContentUpdate2022 from '../updates/ContentUpdate2022'
+import ContentUpdate2023 from '../updates/ContentUpdate2023'
+import ContentUpdate2024 from '../updates/ContentUpdate2024'
 
-import ContentUpdate from '~components/about/ContentUpdate'
+import styles from './index.module.scss'
-import ChangelogUnit from '~components/about/ChangelogUnit'
-
-import './index.scss'
 
 const UpdatesPage = () => {
-  const { t: common } = useTranslation('common')
+  const common = useTranslations('common')
-  const { t: updates } = useTranslation('updates')
+  const updates = useTranslations('updates')
 
-  const versionUpdates = {
+  const classes = classNames(styles.updates, 'PageContent')
-    '1.0.0': 5,
-    '1.0.1': 4,
-    '1.1.0': {
-      updates: 10,
-      bugs: 4,
-      images: [
-        'remix',
-        'unauth',
-        'transcendence',
-        'accessories',
-        'mastery',
-        'mechanics',
-        'rare',
-        'urls',
-        'nav',
-        'toasts',
-      ],
-    },
-    '202302U2': {
-      updates: 1,
-    },
-  }
 
-  function image(
+  // Default to most recent year with content (2024)
-    alt: string,
+  const [activeYear, setActiveYear] = useState(2024)
-    url: string,
+  const getYearButtonClass = (year: number) =>
-    filename: string,
+    classNames({
-    extension: string
+      [styles.yearButton]: true,
-  ) {
+      [styles.active]: activeYear === year,
-    const fallback = `${url}/${filename}.${extension}`
+    })
 
-    let set = []
+  // Render the component based on the active year
-    for (let i = 1; i < 3; i++) {
+  const renderContentUpdate = () => {
-      if (i === 1) set.push(fallback)
+    switch (activeYear) {
-      else set.push(`${url}/${filename}@${i}x.${extension} ${i}x`)
+      case 2022:
+        return <ContentUpdate2022 />
+      case 2023:
+        return <ContentUpdate2023 />
+      case 2024:
+        return <ContentUpdate2024 />
+      default:
+        return <div>{updates('noUpdates')}</div>
     }
-    const sizes = set.join(', ')
-
-    return <img alt={alt} src={fallback} srcSet={sizes} />
   }
 
   return (
-    <div className="Updates PageContent">
+    <div className={classes}>
-      <h1>{common('about.segmented_control.updates')}</h1>
+      <div className={styles.top}>
-      <ContentUpdate
+        <h1>{common('about.segmented_control.updates')}</h1>
-        version="2023-06U1"
+        <div className={styles.yearSelector}>
-        dateString="2023/06/07"
+          <button
-        event="events.uncap"
+            className={getYearButtonClass(2024)}
-        uncappedItems={{
+            onClick={() => setActiveYear(2024)}
-          character: ['3040169000', '3040163000'],
+          >
-        }}
+            2024
-      />
+          </button>
-      <ContentUpdate
+          <button
-        version="2023-05L"
+            className={getYearButtonClass(2023)}
-        dateString="2023/05/31"
+            onClick={() => setActiveYear(2023)}
-        event="events.legfest"
+          >
-        newItems={{
+            2023
-          character: ['3040464000', '3040465000'],
+          </button>
-          weapon: ['1040116900', '1040218400', '1040712500', '1030804400'],
+          <button
-        }}
+            className={getYearButtonClass(2022)}
-        numNotes={1}
+            onClick={() => setActiveYear(2022)}
-      />
+          >
-      <ContentUpdate
+            2022
-        version="2023-05F"
+          </button>
-        dateString="2023/05/20"
-        event="events.flash"
-        newItems={{
-          character: ['3040463000', '3040462000'],
-          weapon: ['1040421800', '1040024600'],
-        }}
-        numNotes={0}
-      />
-      <ContentUpdate
-        version="2023-05U"
-        dateString="2023/05/18"
-        event="events.content"
-        newItems={{
-          weapon: ['1040712400'],
-        }}
-        uncappedItems={{
-          character: ['3040073000'],
-        }}
-        numNotes={1}
-      />
-      <ContentUpdate
-        version="2023-04L"
-        dateString="2023/04/30"
-        event="events.legfest"
-        newItems={{
-          character: ['3040460000', '3040461000'],
-          weapon: ['1040815500', '1040815600', '1040421700', '1030208100'],
-        }}
-        numNotes={0}
-      />
-      <ContentUpdate
-        version="2023-04U"
-        dateString="2023/04/01"
-        event="events.content"
-        newItems={{
-          character: ['3040457000'],
-          summon: ['2040419000'],
-        }}
-        numNotes={0}
-      />
-      <ContentUpdate
-        version="2023-03L"
-        dateString="2023/03/31"
-        event="events.legfest"
-        newItems={{
-          character: ['3040456000', '3040455000'],
-          weapon: ['1040316100', '1040617500'],
-        }}
-        numNotes={0}
-      />
-      <ContentUpdate
-        version="2023-03U2"
-        dateString="2023/03/30"
-        event="events.content"
-        uncappedItems={{
-          character: ['3040164000', '3040160000'],
-        }}
-        newItems={{
-          weapon: [
-            '1040815100',
-            '1040815200',
-            '1040815300',
-            '1040815400',
-            '1040815000',
-            '1040024400',
-            '1030609400',
-          ],
-        }}
-        numNotes={1}
-      />
-      <ContentUpdate
-        version="2023-03U"
-        dateString="2023/03/22"
-        event="events.content"
-        newItems={{
-          weapon: ['1040024300'],
-        }}
-        uncappedItems={{
-          weapon: [
-            '1040217600',
-            '1040312800',
-            '1040023200',
-            '1040217800',
-            '1040420800',
-            '1040213900',
-            '1040116200',
-            '1040216500',
-            '1040616700',
-            '1040420700',
-            '1040913000',
-            '1040419000',
-          ],
-          summon: [
-            '2040398000',
-            '2040413000',
-            '2040401000',
-            '2040406000',
-            '2040418000',
-            '2040409000',
-            '2040056000',
-          ],
-        }}
-        numNotes={2}
-      />
-      <ContentUpdate
-        version="2023-03F"
-        dateString="2023/03/16"
-        event="events.flash"
-        newItems={{
-          character: ['3040451000', '3040452000', '3040453000', '3040454000'],
-          weapon: ['1040914600', '1040116800', '1040515900', '1040712300'],
-        }}
-        numNotes={7}
-      />
-      <ContentUpdate
-        version="2023-02L"
-        dateString="2023/02/27"
-        event="events.legfest"
-        newItems={{
-          character: ['3040450000', '3040449000'],
-          weapon: ['1040421600', '1040617300', '1040712200'],
-          summon: ['2040418000'],
-        }}
-      />
-      <ContentUpdate
-        version="2023-02F"
-        dateString="2023/02/14"
-        event="events.flash"
-        newItems={{
-          character: ['3040447000', '3040448000'],
-          weapon: ['1040617200', '1040421500'],
-        }}
-      />
-      <ContentUpdate
-        version="2023-02-U3"
-        dateString="2023/02/12"
-        event="events.uncap"
-        uncappedItems={{
-          character: ['3040173000'],
-          weapon: ['1040606800', '1040606900', '1040607000', '1040509500'],
-          summon: ['2040288000'],
-        }}
-      />
-      <ContentUpdate
-        version="2023-02-U2"
-        dateString="2023/02/06"
-        event="events.uncap"
-        newItems={{
-          weapon: ['1040016100'],
-        }}
-        numNotes={versionUpdates['202302U2'].updates}
-        uncappedItems={{
-          character: ['3040252000'],
-          weapon: ['1040617100', '1040016100'],
-        }}
-      />
-      <section className="Version" data-version="1.1">
-        <div className="Header">
-          <h3>1.1.0</h3>
-          <time>2023/02/06</time>
         </div>
-        <div className="Contents">
+      </div>
-          <section>
+      {renderContentUpdate()}
-            <h2>{updates('labels.features')}</h2>
-            <ul className="Notes">
-              {[...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`),
-                    `${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>
-                </li>
-              ))}
-            </ul>
-          </section>
-          <section>
-            <h2>Bug fixes</h2>
-            <ul className="Bugs">
-              {[...Array(versionUpdates['1.1.0'].bugs)].map((e, i) => (
-                <li key={`1.1.0-bugfix-${i}`}>
-                  {updates(`versions.1.1.0.bugs.${i}`)}
-                </li>
-              ))}
-            </ul>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2023-02U">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 2,
-          })}  ${updates('events.uncap')}`}</h3>
-          <time>2023/02/01</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.uncaps.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040136000" type="character" />
-              <ChangelogUnit id="3040219000" type="character" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.uncaps.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040511300" type="weapon" />
-              <ChangelogUnit id="1040412800" type="weapon" />
-            </div>
-          </section>
-          <section className="summons">
-            <h4>{updates('labels.uncaps.summons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="2040234000" type="summon" />
-              <ChangelogUnit id="2040331000" type="summon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2023-01F">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 1,
-          })}  ${updates('events.legfest')}`}</h3>
-          <time>2023/01/31</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040445000" type="character" />
-              <ChangelogUnit id="3040446000" type="character" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040116700" type="weapon" />
-              <ChangelogUnit id="1040421400" type="weapon" />
-              <ChangelogUnit id="1040316000" type="weapon" />
-              <ChangelogUnit id="1030208000" type="weapon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2023-01F">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 1,
-          })}  ${updates('events.flash')}`}</h3>
-          <time>2023/01/19</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040444000" type="character" />
-              <ChangelogUnit id="3040443000" type="character" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040218300" type="weapon" />
-              <ChangelogUnit id="1040116600" type="weapon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2023-01U">
-        <div className="Header">
-          <h3>{`${updates('events.date', {
-            year: 2023,
-            month: 1,
-          })}  ${updates('events.uncap')}`}</h3>
-          <time>2023/01/06</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.uncaps.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040196000" type="character" image="03" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Version" data-version="1.0">
-        <div className="Header">
-          <h3>1.0.1</h3>
-          <time>2023/01/08</time>
-        </div>
-        <ul className="Bare Contents">
-          {[...Array(versionUpdates['1.0.1'])].map((e, i) => (
-            <li key={`1.0.1-update-${i}`}>
-              {updates(`versions.1.0.1.features.${i}`)}
-            </li>
-          ))}
-        </ul>
-      </section>
-      <section className="Content Version" data-version="2022-12L">
-        <div className="Header">
-          <h3>{`${updates('events.date', { year: 2022, month: 12 })} ${updates(
-            'events.legfest'
-          )}`}</h3>
-          <time>2022/12/26</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040440000" type="character" />
-              <ChangelogUnit id="3040441000" type="character" />
-              <ChangelogUnit id="3040442000" type="character" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040315900" type="weapon" />
-              <ChangelogUnit id="1040914500" type="weapon" />
-              <ChangelogUnit id="1040218200" type="weapon" />
-            </div>
-          </section>
-          <section className="summons">
-            <h4>{updates('labels.summons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="2040417000" type="summon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Content Version" data-version="2022-12F2">
-        <div className="Header">
-          <h3>{`${updates('events.date', { year: 2022, month: 12 })} ${updates(
-            'events.flash'
-          )}`}</h3>
-          <time>2022/12/26</time>
-        </div>
-        <div className="Contents">
-          <section className="characters">
-            <h4>{updates('labels.characters')}</h4>
-            <div className="items">
-              <ChangelogUnit id="3040438000" type="character" />
-              <ChangelogUnit id="3040439000" type="character" />
-            </div>
-          </section>
-          <section className="weapons">
-            <h4>{updates('labels.weapons')}</h4>
-            <div className="items">
-              <ChangelogUnit id="1040024200" type="weapon" />
-              <ChangelogUnit id="1040116500" type="weapon" />
-            </div>
-          </section>
-        </div>
-      </section>
-      <section className="Version" data-version="1.0">
-        <div className="Header">
-          <h3>1.0.0</h3>
-          <time>2022/12/26</time>
-        </div>
-        <ul className="Bare Contents">
-          {[...Array(versionUpdates['1.0.0'])].map((e, i) => (
-            <li key={`1.0.0-update-${i}`}>
-              {updates(`versions.1.0.0.features.${i}`)}
-            </li>
-          ))}
-        </ul>
-      </section>
     </div>
   )
 }

components/about/updates/ContentUpdate2022/index.module.scss

@@ -1,95 +1,40 @@
-.Updates.PageContent {
+.updates {
   padding-bottom: $unit-12x;
 
-  .Version {
+  .version {
     display: flex;
     flex-direction: column;
-    gap: $unit-2x;
 
-    h3,
+    &.content {
-    li,
+      .header h3 {
-    p {
-    }
-
-    &.Content {
-      .Header h3 {
         color: var(--accent-yellow);
       }
-
-      .Contents {
-        display: grid;
-        grid-template-columns: 1fr;
-        gap: $unit-4x;
-
-        .characters,
-        .weapons,
-        .summons {
-          display: grid;
-          grid-template-rows: auto 1fr;
-          gap: $unit;
-
-          & > h4 {
-            font-weight: $medium;
-            font-size: $font-regular;
-          }
-
-          .items {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
-            gap: $unit-4x;
-          }
-        }
-      }
     }
 
-    .Header {
+    .bugs {
-      align-items: baseline;
       display: flex;
+      flex-direction: column;
+      list-style-type: disc;
       gap: $unit-half;
-      margin-bottom: $unit-2x;
+      padding-left: $unit-2x;
-
-      h3 {
-        color: var(--accent-blue);
-        font-weight: $medium;
-        font-size: $font-large;
-      }
-
-      time {
-        color: var(--text-secondary);
-        font-size: $font-small;
-        font-weight: $medium;
-      }
     }
 
-    .Contents {
+    .contents {
       display: flex;
       flex-direction: column;
       gap: $unit-4x;
 
-      &.Bare {
+      .foreword {
-        display: flex;
+        margin-top: $unit-4x;
-        flex-direction: column;
-        color: var(--text-primary);
-        list-style-type: disc;
-        list-style-position: inside;
-        gap: $unit-half;
 
-        li {
+        p {
-          font-size: 14px;
+          font-size: $font-regular;
+          line-height: 1.32;
+          margin-bottom: $unit-2x;
         }
       }
 
-      section {
+      .features {
-        display: flex;
-        flex-direction: column;
-        gap: $unit-2x;
-
-        h2 {
-          margin: 0;
-        }
-      }
-
-      .Notes {
         display: grid;
         grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
         gap: $unit-2x;
@@ -122,13 +67,66 @@
           }
         }
       }
+    }
 
-      .Bugs {
+    .header {
+      align-items: baseline;
+      display: flex;
+      gap: $unit-half;
+      margin-bottom: $unit-2x;
+
+      h3 {
+        color: var(--accent-blue);
+        font-weight: $medium;
+        font-size: $font-large;
+      }
+
+      time {
+        color: var(--text-secondary);
+        font-size: $font-small;
+        font-weight: $medium;
+      }
+    }
+
+    .list {
+      display: flex;
+      flex-direction: column;
+      color: var(--text-primary);
+      list-style-type: disc;
+      list-style-position: inside;
+      gap: $unit-half;
+
+      li {
+        font-size: 14px;
+      }
+    }
+
+    .Contents {
+      display: flex;
+      flex-direction: column;
+      gap: $unit-4x;
+
+      &.Bare {
         display: flex;
         flex-direction: column;
+        color: var(--text-primary);
         list-style-type: disc;
+        list-style-position: inside;
         gap: $unit-half;
-        padding-left: $unit-2x;
+
+        li {
+          font-size: 14px;
+        }
+      }
+
+      section {
+        display: flex;
+        flex-direction: column;
+        gap: $unit-2x;
+
+        h2 {
+          margin: 0;
+        }
       }
     }
   }

components/about/updates/ContentUpdate2022/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react'
+import { useTranslations } from 'next-intl'
+import ContentUpdate from '~components/about/ContentUpdate'
+
+import styles from './index.module.scss'
+
+const ContentUpdate2022 = () => {
+  const updates = useTranslations('updates')
+
+  const versionUpdates = {
+    '1.0.0': 5,
+  }
+
+  return (
+    <>
+      <ContentUpdate
+        version="2022-12L"
+        dateString="2022/12/26"
+        event="events.legfest"
+        newItems={{
+          character: ['3040440000', '3040441000', '3040442000'],
+          weapon: ['1040315900', '1040914500', '1040218200'],
+          summon: ['2040417000'],
+        }}
+        numNotes={0}
+      />
+      <ContentUpdate
+        version="2022-12F2"
+        dateString="2022/12/26"
+        event="events.flash"
+        newItems={{
+          character: ['3040438000', '3040439000'],
+          weapon: ['1040024200', '1040116500'],
+        }}
+        numNotes={0}
+      />
+      <section className={styles.version} data-version="1.0">
+        <div className={styles.header}>
+          <h3>1.0.0</h3>
+          <time>2022/12/26</time>
+        </div>
+        <ul className={styles.list}>
+          {[...Array(versionUpdates['1.0.0'])].map((e, i) => (
+            <li key={`1.0.0-update-${i}`}>
+              {updates(`versions.v1_0_0.features.${i}`)}
+            </li>
+          ))}
+        </ul>
+      </section>
+    </>
+  )
+}
+
+export default ContentUpdate2022