Add quick summon to SummonUnit

* Quick summon icon is displayed on hover
* Updates the server when clicked

.aidigestignore

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

.env.local

@@ -1,5 +0,0 @@
-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/character*
+public/images/chara*
 public/images/job*
 public/images/awakening*
 public/images/ax*
@@ -58,9 +58,6 @@ 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/
@@ -88,7 +85,3 @@ typings/
 # DS_Store
 .DS_Store
 *.tsbuildinfo
-codebase.md
-
-# PRDs
-prd/

.mise.toml

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

.nvmrc

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

.vscode/settings.json

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

CLAUDE.md

@@ -1,28 +0,0 @@
-# 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,24 +54,18 @@ root
 ├─ accessory-square/
 ├─ awakening/
 ├─ ax/
-├─ character-main/
-├─ character-grid/
-├─ character-square/
-├─ guidebooks/
+├─ chara-main/
+├─ chara-grid/
+├─ chara-square/
 ├─ 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

@@ -1,225 +0,0 @@
-'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

@@ -1,86 +0,0 @@
-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

@@ -1,99 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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

@@ -1,37 +0,0 @@
-'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

@@ -1,47 +0,0 @@
-'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

@@ -1,105 +0,0 @@
-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

@@ -1,79 +0,0 @@
-'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

@@ -1,48 +0,0 @@
-'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

@@ -1,39 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,92 +0,0 @@
-'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

@@ -1,82 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,66 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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

@@ -1,199 +0,0 @@
-'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

@@ -1,96 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,241 +0,0 @@
-'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

@@ -1,68 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,66 +0,0 @@
-'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

@@ -1,31 +0,0 @@
-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

@@ -1,103 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,73 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,92 +0,0 @@
-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

@@ -1,83 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,50 +0,0 @@
-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

@@ -1,39 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -1,21 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,404 +0,0 @@
-'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

@@ -1,16 +0,0 @@
-'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

@@ -1,73 +0,0 @@
-'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

@@ -1,18 +0,0 @@
-'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

@@ -1,8 +0,0 @@
-// 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

@@ -1,173 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,77 +0,0 @@
-// 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

@@ -1,106 +0,0 @@
-'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.scss

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

components/ElementToggle/index.tsx

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

components/ErrorSection/index.scss

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

components/ErrorSection/index.tsx

@@ -1,11 +1,11 @@
 import React, { useEffect, useState } from 'react'
 import Link from 'next/link'
-import { useTranslations } from 'next-intl'
+import { useTranslation } from 'next-i18next'
 
 import Button from '~components/common/Button'
 import { ResponseStatus } from '~types'
 
-import styles from './index.module.scss'
+import './index.scss'
 
 interface Props {
   status: ResponseStatus
@@ -13,7 +13,7 @@ interface Props {
 
 const ErrorSection = ({ status }: Props) => {
   // Import translations
-  const t = useTranslations('common')
+  const { t } = useTranslation('common')
 
   const [statusText, setStatusText] = useState('')
 
@@ -24,7 +24,7 @@ const ErrorSection = ({ status }: Props) => {
   const errorBody = () => {
     return (
       <>
-        <div className={styles.code}>{status.code}</div>
+        <div className="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={styles.error}>
+    <section className="Error">
       {errorBody()}
       {[401, 404].includes(status.code) ? (
         <Link href="/new">

components/FilterBar/index.scss

@@ -0,0 +1,127 @@
+.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/Chevron.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/FilterBar/index.tsx

@@ -1,37 +1,34 @@
 import React, { useEffect, useState } from 'react'
-import { useTranslations } from 'next-intl'
-import { getCookie } from 'cookies-next'
+import { useTranslation } from 'next-i18next'
 import classNames from 'classnames'
 import equals from 'fast-deep-equal'
 
-import FilterModal from '~components/filters/FilterModal'
-import RaidCombobox from '~components/raids/RaidCombobox'
+import FilterModal from '~components/FilterModal'
 import Select from '~components/common/Select'
 import SelectItem from '~components/common/SelectItem'
 import Button from '~components/common/Button'
 
-import { appState } from '~utils/appState'
+import { defaultFilterset } from '~utils/defaultFilters'
 
 import FilterIcon from '~public/icons/Filter.svg'
-import styles from './index.module.scss'
+
+import './index.scss'
+import { getCookie } from 'cookies-next'
+import RaidCombobox from '~components/raids/RaidCombobox'
+import { appState } from '~utils/appState'
 
 interface Props {
-  defaultFilterset: FilterSet
-  persistFilters?: boolean
   children: React.ReactNode
+  scrolled: boolean
   element?: number
-  raid?: string
-  raidGroups: RaidGroup[]
+  raidSlug?: string
   recency?: number
   onFilter: (filters: FilterSet) => void
-  onAdvancedFilter: (filters: FilterSet) => void
 }
 
 const FilterBar = (props: Props) => {
   // Set up translation
-  const t = useTranslations('common')
-
-  const [scrolled, setScrolled] = useState(false)
+  const { t } = useTranslation('common')
 
   const [currentRaid, setCurrentRaid] = useState<Raid>()
 
@@ -44,47 +41,35 @@ const FilterBar = (props: Props) => {
   const [matchesDefaultFilters, setMatchesDefaultFilters] = useState(false)
   // Set up classes object for showing shadow on scroll
   const classes = classNames({
-    [styles.filterBar]: true,
-    [styles.shadow]: scrolled,
+    FilterBar: true,
+    shadow: props.scrolled,
   })
 
   const filterButtonClasses = classNames({
-    filter: true,
-    filtersActive: !matchesDefaultFilters,
+    Filter: true,
+    FiltersActive: !matchesDefaultFilters,
   })
 
-  // Add scroll event listener for shadow on FilterBar on mount
-  useEffect(() => {
-    window.addEventListener('scroll', handleScroll)
-    return () => window.removeEventListener('scroll', handleScroll)
-  }, [])
-
-  function handleScroll() {
-    if (window.scrollY > 90) setScrolled(true)
-    else setScrolled(false)
-  }
-
   // Convert raid slug to Raid object on mount
   useEffect(() => {
     const raid = appState.raidGroups
       .filter((group) => group.section > 0)
       .flatMap((group) => group.raids)
-      .find((raid) => raid.id === props.raid)
+      .find((raid) => raid.slug === props.raidSlug)
 
     setCurrentRaid(raid)
-  }, [props.raid])
+  }, [props.raidSlug])
 
   useEffect(() => {
     // Fetch user's advanced filters
     const filtersCookie = getCookie('filters')
-    if (filtersCookie && props.persistFilters) {
-      setAdvancedFilters(JSON.parse(filtersCookie as string))
-    } else setAdvancedFilters(props.defaultFilterset)
+    if (filtersCookie) setAdvancedFilters(JSON.parse(filtersCookie as string))
+    else setAdvancedFilters(defaultFilterset)
   }, [])
 
   useEffect(() => {
-    setMatchesDefaultFilters(equals(advancedFilters, props.defaultFilterset))
-  }, [advancedFilters, props.defaultFilterset])
+    setMatchesDefaultFilters(equals(advancedFilters, defaultFilterset))
+  }, [advancedFilters, defaultFilterset])
 
   function openElementSelect() {
     setElementOpen(!elementOpen)
@@ -105,12 +90,12 @@ const FilterBar = (props: Props) => {
   }
 
   function raidSelectChanged(raid?: Raid) {
-    props.onFilter({ raid: raid?.slug, ...advancedFilters })
+    props.onFilter({ raidSlug: raid?.slug, ...advancedFilters })
   }
 
   function handleAdvancedFiltersChanged(filters: FilterSet) {
     setAdvancedFilters(filters)
-    props.onAdvancedFilter(filters)
+    props.onFilter(filters)
   }
 
   function onSelectChange(name: 'element' | 'recency') {
@@ -141,13 +126,9 @@ const FilterBar = (props: Props) => {
     <>
       <div className={classes}>
         {props.children}
-        <div className={styles.filters}>
+        <div className="Filters">
           <Select
             value={`${props.element}`}
-            trigger={{
-              bound: true,
-              size: 'small',
-            }}
             overlayVisible={false}
             open={elementOpen}
             onOpenChange={() => onSelectChange('element')}
@@ -160,18 +141,13 @@ const FilterBar = (props: Props) => {
           <RaidCombobox
             currentRaid={currentRaid}
             showAllRaidsOption={true}
-            raidGroups={props.raidGroups}
             minimal={true}
-            size="small"
             onChange={raidSelectChanged}
           />
 
           <Select
             value={`${props.recency}`}
-            trigger={{
-              bound: true,
-              size: 'small',
-            }}
+            trigger={'All time'}
             overlayVisible={false}
             open={recencyOpen}
             onOpenChange={() => onSelectChange('recency')}
@@ -205,17 +181,13 @@ const FilterBar = (props: Props) => {
             className={filterButtonClasses}
             blended={true}
             leftAccessoryIcon={<FilterIcon />}
-            text={t('filters.name')}
-            size="small"
             onClick={() => setFilterModalOpen(true)}
           />
         </div>
       </div>
-
       <FilterModal
-        defaultFilterSet={props.defaultFilterset}
+        defaultFilterSet={defaultFilterset}
         filterSet={advancedFilters}
-        persistFilters={props.persistFilters}
         open={filterModalOpen}
         onOpenChange={setFilterModalOpen}
         sendAdvancedFilters={handleAdvancedFiltersChanged}
@@ -224,8 +196,4 @@ const FilterBar = (props: Props) => {
   )
 }
 
-FilterBar.defaultProps = {
-  persistFilters: true,
-}
-
 export default FilterBar

components/FilterModal/index.scss

@@ -0,0 +1,15 @@
+.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/FilterModal/index.tsx

@@ -1,30 +1,31 @@
-'use client'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import { getCookie, setCookie } from 'cookies-next'
-import { useTranslations } from 'next-intl'
+import { useRouter } from 'next/router'
+import { useTranslation } from 'react-i18next'
 
-import { Dialog, DialogTrigger } from '~components/common/Dialog'
-import DialogHeader from '~components/common/DialogHeader'
-import DialogFooter from '~components/common/DialogFooter'
+import {
+  Dialog,
+  DialogTrigger,
+  DialogClose,
+  DialogTitle,
+} from '~components/common/Dialog'
 import DialogContent from '~components/common/DialogContent'
 
 import Button from '~components/common/Button'
 import InputTableField from '~components/common/InputTableField'
-import MentionTableField from '~components/common/MentionTableField'
 import SelectTableField from '~components/common/SelectTableField'
 import SliderTableField from '~components/common/SliderTableField'
 import SwitchTableField from '~components/common/SwitchTableField'
 import SelectItem from '~components/common/SelectItem'
 
 import type { DialogProps } from '@radix-ui/react-dialog'
-import Typeahead from 'react-bootstrap-typeahead/types/core/Typeahead'
 
-import styles from './index.module.scss'
+import CrossIcon from '~public/icons/Cross.svg'
+import './index.scss'
 
 interface Props extends DialogProps {
   defaultFilterSet: FilterSet
   filterSet: FilterSet
-  persistFilters?: boolean
   sendAdvancedFilters: (filters: FilterSet) => void
 }
 
@@ -33,25 +34,22 @@ const MAX_WEAPONS = 13
 const MAX_SUMMONS = 8
 
 const FilterModal = (props: Props) => {
-  // Set up locale
-  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
+  // Set up router
+  const router = useRouter()
+  const locale = router.locale
 
   // Set up translation
-  const t = useTranslations('common')
+  const { t } = useTranslation('common')
 
   // Refs
   const headerRef = React.createRef<HTMLDivElement>()
   const footerRef = React.createRef<HTMLDivElement>()
-  const inclusionRef = useRef<Typeahead>(null)
-  const exclusionRef = useRef<Typeahead>(null)
 
   // States
   const [open, setOpen] = useState(false)
   const [chargeAttackOpen, setChargeAttackOpen] = useState(false)
   const [fullAutoOpen, setFullAutoOpen] = useState(false)
   const [autoGuardOpen, setAutoGuardOpen] = useState(false)
-  const [inclusions, setInclusions] = useState<MentionItem[]>([])
-  const [exclusions, setExclusions] = useState<MentionItem[]>([])
   const [filterSet, setFilterSet] = useState<FilterSet>({})
 
   // Filter states
@@ -87,16 +85,11 @@ const FilterModal = (props: Props) => {
 
   // Hooks
   useEffect(() => {
-    if (props.open !== undefined) {
-      setOpen(props.open)
-      // When should we reset the filter state?
-    }
+    if (props.open !== undefined) setOpen(props.open)
   })
 
   useEffect(() => {
     setFilterSet(props.filterSet)
-    setInclusions(props.filterSet.includes || [])
-    setExclusions(props.filterSet.excludes || [])
   }, [props.filterSet])
 
   useEffect(() => {
@@ -137,13 +130,7 @@ const FilterModal = (props: Props) => {
     if (maxButtonsCount) filters.button_count = maxButtonsCount
     if (maxTurnsCount) filters.turn_count = maxTurnsCount
 
-    if (inclusions.length > 0) filters.includes = inclusions
-    if (exclusions.length > 0) filters.excludes = exclusions
-
-    if (props.persistFilters) {
-      setCookie('filters', filters, { path: '/' })
-    }
-
+    setCookie('filters', filters, { path: '/' })
     props.sendAdvancedFilters(filters)
     openChange()
   }
@@ -160,12 +147,6 @@ const FilterModal = (props: Props) => {
     setUserQuality(props.defaultFilterSet.user_quality)
     setNameQuality(props.defaultFilterSet.name_quality)
     setOriginalOnly(props.defaultFilterSet.original)
-
-    setInclusions([])
-    inclusionRef.current?.clear()
-
-    setExclusions([])
-    exclusionRef.current?.clear()
   }
 
   function openChange() {
@@ -218,18 +199,14 @@ const FilterModal = (props: Props) => {
     setMinWeaponCount(value)
   }
 
-  function handleMaxButtonsCountValueChange(
-    value?: string | number | readonly string[]
-  ) {
+  function handleMaxButtonsCountValueChange(value?: string) {
     if (!value) return
-    setMaxButtonsCount(value as number)
+    setMaxButtonsCount(parseInt(value))
   }
 
-  function handleMaxTurnsCountValueChange(
-    value?: string | number | readonly string[]
-  ) {
+  function handleMaxTurnsCountValueChange(value?: string) {
     if (!value) return
-    setMaxTurnsCount(value as number)
+    setMaxTurnsCount(parseInt(value))
   }
 
   function handleNameQualityValueChange(value?: boolean) {
@@ -338,7 +315,6 @@ const FilterModal = (props: Props) => {
       onOpenChange={() => openSelect('charge_attack')}
       onClose={() => setChargeAttackOpen(false)}
       onChange={handleChargeAttackValueChange}
-      autoFocus={true}
     >
       <SelectItem key="on-off" value="-1">
         {t('modals.filters.options.on_and_off')}
@@ -403,119 +379,60 @@ const FilterModal = (props: Props) => {
     />
   )
 
-  // Inclusions and exclusions
-  function storeInclusions(value: MentionItem[]) {
-    setInclusions(value)
-  }
-
-  function storeExclusions(value: MentionItem[]) {
-    setExclusions(value)
-  }
-
-  const inclusionField = (
-    <MentionTableField
-      name="inclusion"
-      inclusions={inclusions}
-      exclusions={exclusions}
-      placeholder={t('modals.filters.placeholders.inclusion')}
-      label={t('modals.filters.labels.inclusion')}
-      typeaheadRef={inclusionRef}
-      onUpdate={storeInclusions}
-    />
-  )
-
-  const exclusionField = (
-    <MentionTableField
-      name="exclusion"
-      inclusions={exclusions}
-      exclusions={inclusions}
-      placeholder={t('modals.filters.placeholders.exclusion')}
-      label={t('modals.filters.labels.exclusion')}
-      typeaheadRef={exclusionRef}
-      onUpdate={storeExclusions}
-    />
-  )
-
-  const filterNotice = () => {
-    if (props.persistFilters) return null
-    return (
-      <div className={styles.notice}>
-        <p>
-          {/* TODO: Refactor to t.rich() */}
-          {/* <Trans i18nKey="modals.filters.notice">
-            Filters set on <strong>user profiles</strong> and in{' '}
-            <strong>Your saved teams</strong> will not be saved
-          </Trans> */}
-          {t('modals.filters.notice')}
-        </p>
-      </div>
-    )
-  }
-
   return (
     <Dialog open={open} onOpenChange={openChange}>
       <DialogTrigger asChild>{props.children}</DialogTrigger>
       <DialogContent
-        className="filter"
-        wrapperClassName="filter"
-        headerRef={headerRef}
-        footerRef={footerRef}
+        className="Filter"
+        headerref={headerRef}
+        footerref={footerRef}
         onEscapeKeyDown={onEscapeKeyDown}
         onOpenAutoFocus={onOpenAutoFocus}
       >
-        <DialogHeader title={t('modals.filters.title')} />
-        <div className={styles.fields}>
-          {filterNotice()}
-          <section>
-            <div className={styles.header}>
-              <h3>{t('modals.filters.headers.items.name')}</h3>
-              <p>{t('modals.filters.headers.items.description')}</p>
-            </div>
-            {inclusionField}
-            {exclusionField}
-          </section>
-          <section>
-            <div className={styles.header}>
-              <h3>{t('modals.filters.headers.details.name')}</h3>
-              <p>{t('modals.filters.headers.details.description')}</p>
-            </div>
-            {chargeAttackField()}
-            {fullAutoField()}
-            {autoGuardField()}
-            {/* {maxButtonsField()} */}
-            {/* {maxTurnsField()} */}
-            {minCharactersField()}
-            {minSummonsField()}
-            {minWeaponsField()}
-            {nameQualityField()}
-            {userQualityField()}
-            {originalOnlyField()}
-          </section>
+        <div className="DialogHeader" ref={headerRef}>
+          <div className="DialogTop">
+            <DialogTitle className="DialogTitle">
+              {t('modals.filters.title')}
+            </DialogTitle>
+          </div>
+          <DialogClose className="DialogClose" asChild>
+            <span>
+              <CrossIcon />
+            </span>
+          </DialogClose>
         </div>
-        <DialogFooter
-          ref={footerRef}
-          rightElements={[
+
+        <div className="Fields">
+          {chargeAttackField()}
+          {fullAutoField()}
+          {autoGuardField()}
+          {/* {maxButtonsField()} */}
+          {/* {maxTurnsField()} */}
+          {minCharactersField()}
+          {minSummonsField()}
+          {minWeaponsField()}
+          {nameQualityField()}
+          {userQualityField()}
+          {originalOnlyField()}
+        </div>
+        <div className="DialogFooter" ref={footerRef}>
+          <div className="Left"></div>
+          <div className="Right Buttons Spaced">
             <Button
               blended={true}
-              key="clear"
               text={t('modals.filters.buttons.clear')}
               onClick={resetFilters}
-            />,
+            />
             <Button
-              bound={true}
-              key="confirm"
+              contained={true}
               text={t('modals.filters.buttons.confirm')}
               onClick={saveFilters}
-            />,
-          ]}
-        />
+            />
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   )
 }
 
-FilterModal.defaultProps = {
-  persistFilters: true,
-}
-
 export default FilterModal

components/GridRep/index.scss

@@ -0,0 +1,199 @@
+.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

@@ -0,0 +1,281 @@
+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.scss

@@ -1,9 +1,8 @@
-.collection {
+.GridRepCollection {
   box-sizing: border-box;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
   margin: 0 auto;
-  margin-top: $unit-2x;
   padding: 0;
   padding-top: $unit-fourth;
   transition: opacity 0.14s ease-in-out;

components/GridRepCollection/index.tsx

@@ -0,0 +1,18 @@
+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.scss

@@ -1,32 +1,4 @@
-.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 {
+#Header {
   display: flex;
   flex-direction: row;
   margin-bottom: $unit;
@@ -50,7 +22,7 @@
     background: var(--placeholder-bg);
   }
 
-  .dropdownWrapper {
+  #DropdownWrapper {
     display: inline-block;
     padding-bottom: $unit;
 
@@ -60,6 +32,8 @@
     }
 
     &:hover {
+      // padding-right: $unit-4x;
+
       .Button {
         background: var(--button-bg-hover);
         color: var(--button-text-hover);

components/Header/index.tsx

@@ -1,58 +1,86 @@
-'use client'
-import React, { useState } from 'react'
-import { deleteCookie, getCookie } from 'cookies-next'
-import { useTranslations } from 'next-intl'
-import { useRouter } from '~/i18n/navigation'
-import { useSnapshot } from 'valtio'
+import React, { useEffect, useState } from 'react'
+import { subscribe, useSnapshot } from 'valtio'
+import { setCookie, deleteCookie } from 'cookies-next'
+import { useRouter } from 'next/router'
+import { Trans, useTranslation } from 'next-i18next'
 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 BahamutIcon from '~public/icons/Bahamut.svg'
 import ChevronIcon from '~public/icons/Chevron.svg'
+import LinkIcon from '~public/icons/Link.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 styles from './index.module.scss'
+import './index.scss'
 
 const Header = () => {
   // Localization
-  const t = useTranslations('common')
+  const { t } = useTranslation('common')
+
+  // Router
   const router = useRouter()
-
-  // Locale
-  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
-
-  // Subscribe to account state changes
-  const accountSnap = useSnapshot(accountState)
+  const locale =
+    router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
+  const localeData = retrieveLocaleCookies()
 
   // State management
-  const [alertOpen, setAlertOpen] = useState(false)
+  const [copyToastOpen, setCopyToastOpen] = 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() {
@@ -80,6 +108,24 @@ 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()
@@ -87,6 +133,32 @@ 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()
@@ -101,7 +173,7 @@ const Header = () => {
       if (key !== 'language') accountState[key] = resetState[key]
     })
 
-    router.refresh()
+    router.reload()
     return false
   }
 
@@ -116,11 +188,90 @@ const Header = () => {
     router.push('/new')
   }
 
-  // Methods: Rendering
+  function remixTeam() {
+    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 = () => {
-    const user = accountSnap.account.user
-    if (accountSnap.account.authorized && user) {
-      return (
+    let image
+
+    const user = accountState.account.user
+    if (accountState.account.authorized && user) {
+      image = (
         <img
           alt={user.username}
           className={`profile ${user.avatar.element}`}
@@ -130,9 +281,9 @@ const Header = () => {
         />
       )
     } else {
-      return (
+      image = (
         <img
-          alt={t('header.anonymous')}
+          alt={t('no_user')}
           className={`profile anonymous`}
           srcSet={`/profile/npc.png, 
                       /profile/npc@2x.png 2x`}
@@ -140,266 +291,285 @@ const Header = () => {
         />
       )
     }
+
+    return image
   }
 
   // Rendering: Buttons
-  const newButton = (
-    <Tooltip content={t('tooltips.new')}>
-      <Button
-        leftAccessoryIcon={<PlusIcon />}
-        className="New"
-        blended={true}
-        text={t('buttons.new')}
-        onClick={newTeam}
+  const newButton = () => {
+    return (
+      <Tooltip content={t('tooltips.new')}>
+        <Button
+          leftAccessoryIcon={<PlusIcon />}
+          className="New"
+          blended={true}
+          text={t('buttons.new')}
+          onClick={newTeam}
+        />
+      </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 logoutConfirmationAlert = (
-    <Alert
-      message={t('alert.confirm_logout')}
-      open={alertOpen}
-      primaryActionText="Log out"
-      primaryAction={logout}
-      cancelActionText="Nevermind"
-      cancelAction={() => setAlertOpen(false)}
-    />
-  )
+  const settingsModal = () => {
+    const user = accountState.account.user
 
-  const settingsModal = (
-    <>
-      {accountSnap.account.user && (
+    if (user) {
+      return (
         <AccountModal
           open={settingsModalOpen}
-          username={accountSnap.account.user.username}
-          picture={accountSnap.account.user.avatar.picture}
-          gender={accountSnap.account.user.gender}
-          language={accountSnap.account.user.language}
-          theme={accountSnap.account.user.theme}
-          role={accountSnap.account.user.role}
-          bahamutMode={
-            accountSnap.account.user.role === 9
-              ? accountSnap.account.user.bahamut
-              : false
-          }
+          username={user.username}
+          picture={user.avatar.picture}
+          gender={user.gender}
+          language={user.language}
+          theme={user.theme}
           onOpenChange={setSettingsModalOpen}
         />
-      )}
-    </>
-  )
+      )
+    }
+  }
 
-  const loginModal = (
-    <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
-  )
+  const loginModal = () => {
+    return <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
+  }
 
-  const signupModal = (
-    <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
-  )
+  const signupModal = () => {
+    return (
+      <SignupModal open={signupModalOpen} onOpenChange={setSignupModalOpen} />
+    )
+  }
 
   // Rendering: Compositing
-  const authorizedLeftItems = (
-    <>
-      {accountSnap.account.user && (
-        <>
-          <DropdownMenuGroup>
-            <DropdownMenuItem onClick={closeLeftMenu}>
-              <Link
-                href={`/${accountSnap.account.user.username}` || ''}
-              >
-                <span>{t('menu.profile')}</span>
-              </Link>
-            </DropdownMenuItem>
-            <DropdownMenuItem onClick={closeLeftMenu}>
-              <Link href={`/saved` || ''}>{t('menu.saved')}</Link>
-            </DropdownMenuItem>
-          </DropdownMenuGroup>
-        </>
-      )}
-    </>
-  )
-  const leftMenuItems = (
-    <>
-      {accountSnap.account.authorized &&
-        accountSnap.account.user &&
-        authorizedLeftItems}
+  const left = () => {
+    return (
+      <section>
+        <div id="DropdownWrapper">
+          <DropdownMenu
+            open={leftMenuOpen}
+            onOpenChange={handleLeftMenuOpenChange}
+          >
+            <DropdownMenuTrigger asChild>
+              <Button
+                leftAccessoryIcon={<MenuIcon />}
+                className={classNames({ Active: leftMenuOpen })}
+                blended={true}
+                onClick={handleLeftMenuButtonClicked}
+              />
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="Left">
+              {leftMenuItems()}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+        {!appState.errorCode ? pageTitle() : ''}
+      </section>
+    )
+  }
 
-      <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}>
+  const right = () => {
+    return (
+      <section>
+        {newButton()}
         <DropdownMenu
-          open={leftMenuOpen}
-          onOpenChange={handleLeftMenuOpenChange}
+          open={rightMenuOpen}
+          onOpenChange={handleRightMenuOpenChange}
         >
           <DropdownMenuTrigger asChild>
             <Button
-              active={leftMenuOpen}
+              className={classNames({ Active: rightMenuOpen })}
+              leftAccessoryIcon={profileImage()}
+              rightAccessoryIcon={<ChevronIcon />}
+              rightAccessoryClassName="Arrow"
+              onClick={handleRightMenuButtonClicked}
               blended={true}
-              leftAccessoryIcon={<MenuIcon />}
-              onClick={handleLeftMenuButtonClicked}
             />
           </DropdownMenuTrigger>
-          <DropdownMenuContent className="Left">
-            {leftMenuItems}
+          <DropdownMenuContent className="Right">
+            {rightMenuItems()}
           </DropdownMenuContent>
         </DropdownMenu>
-      </div>
-    </section>
-  )
+      </section>
+    )
+  }
 
-  const authorizedRightItems = (
-    <>
-      {accountSnap.account.user && (
+  const leftMenuItems = () => {
+    return (
+      <>
+        {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>
-            <DropdownMenuLabel>
-              {`@${accountSnap.account.user.username}`}
+          <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuLabel className="MenuLabel">
+              {account.user ? `@${account.user.username}` : t('no_user')}
             </DropdownMenuLabel>
-            <DropdownMenuItem onClick={closeRightMenu}>
-              <Link
-                href={`/${accountSnap.account.user.username}` || ''}
-              >
+            <DropdownMenuItem className="MenuItem" onClick={closeRightMenu}>
+              <Link href={`/${account.user.username}` || ''} passHref>
                 <span>{t('menu.profile')}</span>
               </Link>
             </DropdownMenuItem>
           </DropdownMenuGroup>
           <DropdownMenuSeparator />
-          <DropdownMenuGroup>
+          <DropdownMenuGroup className="MenuGroup">
             <DropdownMenuItem
               className="MenuItem"
               onClick={() => setSettingsModalOpen(true)}
             >
               <span>{t('menu.settings')}</span>
             </DropdownMenuItem>
-            <DropdownMenuItem
-              onClick={() => setAlertOpen(true)}
-              destructive={true}
-            >
+            <DropdownMenuItem className="MenuItem" onClick={logout}>
               <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>
+        </>
+      )
+    }
 
-  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 items
+  }
 
   return (
-    <>
-      {accountSnap.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>
-    </>
+    <nav id="Header">
+      {left()}
+      {right()}
+      {urlCopyToast()}
+      {remixToast()}
+      {settingsModal()}
+      {loginModal()}
+      {signupModal()}
+    </nav>
   )
 }
 

components/HovercardHeader/index.module.scss

@@ -1,59 +0,0 @@
-.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

@@ -1,193 +0,0 @@
-'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

@@ -1,56 +0,0 @@
-.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

@@ -1,54 +0,0 @@
-'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

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

components/MentionList/index.module.scss

@@ -1,56 +0,0 @@
-.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

@@ -1,126 +0,0 @@
-'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/RaidSelect/index.scss

@@ -0,0 +1,22 @@
+.Raid.Select {
+  min-width: 420px;
+
+  .Top {
+    display: flex;
+    flex-direction: column;
+    gap: $unit;
+    padding: $unit 0;
+
+    .SegmentedControl {
+      width: 100%;
+    }
+
+    .Input.Bound {
+      background-color: var(--select-contained-bg);
+
+      &:hover {
+        background-color: var(--select-contained-bg-hover);
+      }
+    }
+  }
+}

components/RaidSelect/index.tsx

@@ -0,0 +1,170 @@
+import React, { useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import * as RadixSelect from '@radix-ui/react-select'
+import classNames from 'classnames'
+
+import Overlay from '~components/common/Overlay'
+
+import ChevronIcon from '~public/icons/Chevron.svg'
+
+import './index.scss'
+import SegmentedControl from '~components/common/SegmentedControl'
+import Segment from '~components/common/Segment'
+import Input from '~components/common/Input'
+
+// Props
+interface Props
+  extends React.DetailedHTMLProps<
+    React.SelectHTMLAttributes<HTMLSelectElement>,
+    HTMLSelectElement
+  > {
+  altText?: string
+  currentSegment: number
+  iconSrc?: string
+  open: boolean
+  trigger?: React.ReactNode
+  children?: React.ReactNode
+  onOpenChange?: () => void
+  onValueChange?: (value: string) => void
+  onSegmentClick: (segment: number) => void
+  onClose?: () => void
+  triggerClass?: string
+  overlayVisible?: boolean
+}
+
+const RaidSelect = React.forwardRef<HTMLButtonElement, Props>(function Select(
+  props: Props,
+  forwardedRef
+) {
+  // Import translations
+  const { t } = useTranslation('common')
+
+  const searchInput = React.createRef<HTMLInputElement>()
+
+  const [open, setOpen] = useState(false)
+  const [value, setValue] = useState('')
+  const [query, setQuery] = useState('')
+
+  const triggerClasses = classNames(
+    {
+      SelectTrigger: true,
+      Disabled: props.disabled,
+    },
+    props.triggerClass
+  )
+
+  useEffect(() => {
+    setOpen(props.open)
+  }, [props.open])
+
+  useEffect(() => {
+    if (props.value && props.value !== '') setValue(`${props.value}`)
+    else setValue('')
+  }, [props.value])
+
+  function onValueChange(newValue: string) {
+    setValue(`${newValue}`)
+    if (props.onValueChange) props.onValueChange(newValue)
+  }
+
+  function onCloseAutoFocus() {
+    setOpen(false)
+    if (props.onClose) props.onClose()
+  }
+
+  function onEscapeKeyDown() {
+    setOpen(false)
+    if (props.onClose) props.onClose()
+  }
+
+  function onPointerDownOutside() {
+    setOpen(false)
+    if (props.onClose) props.onClose()
+  }
+
+  return (
+    <RadixSelect.Root
+      open={open}
+      value={value !== '' ? value : undefined}
+      onValueChange={onValueChange}
+      onOpenChange={props.onOpenChange}
+    >
+      <RadixSelect.Trigger
+        className={triggerClasses}
+        placeholder={props.placeholder}
+        ref={forwardedRef}
+      >
+        {props.iconSrc ? <img alt={props.altText} src={props.iconSrc} /> : ''}
+        <RadixSelect.Value placeholder={props.placeholder} />
+        {!props.disabled ? (
+          <RadixSelect.Icon className="SelectIcon">
+            <ChevronIcon />
+          </RadixSelect.Icon>
+        ) : (
+          ''
+        )}
+      </RadixSelect.Trigger>
+
+      <RadixSelect.Portal className="Select">
+        <>
+          <Overlay
+            open={open}
+            visible={props.overlayVisible != null ? props.overlayVisible : true}
+          />
+
+          <RadixSelect.Content
+            className="Raid Select"
+            onCloseAutoFocus={onCloseAutoFocus}
+            onEscapeKeyDown={onEscapeKeyDown}
+            onPointerDownOutside={onPointerDownOutside}
+          >
+            <div className="Top">
+              <Input
+                autoComplete="off"
+                className="Search Bound"
+                name="query"
+                placeholder={t('search.placeholders.raid')}
+                ref={searchInput}
+                value={query}
+                onChange={() => {}}
+              />
+              <SegmentedControl blended={true}>
+                <Segment
+                  groupName="raid_section"
+                  name="events"
+                  selected={props.currentSegment === 1}
+                  onClick={() => props.onSegmentClick(1)}
+                >
+                  {t('raids.sections.events')}
+                </Segment>
+                <Segment
+                  groupName="raid_section"
+                  name="raids"
+                  selected={props.currentSegment === 0}
+                  onClick={() => props.onSegmentClick(0)}
+                >
+                  {t('raids.sections.raids')}
+                </Segment>
+                <Segment
+                  groupName="raid_section"
+                  name="solo"
+                  selected={props.currentSegment === 2}
+                  onClick={() => props.onSegmentClick(2)}
+                >
+                  {t('raids.sections.solo')}
+                </Segment>
+              </SegmentedControl>
+            </div>
+            <RadixSelect.Viewport>{props.children}</RadixSelect.Viewport>
+          </RadixSelect.Content>
+        </>
+      </RadixSelect.Portal>
+    </RadixSelect.Root>
+  )
+})
+
+RaidSelect.defaultProps = {
+  overlayVisible: true,
+}
+
+export default RaidSelect

components/about/AboutHead/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import Head from 'next/head'
-import { useTranslations } from 'next-intl'
+import { useTranslation } from 'next-i18next'
 
 interface Props {
   page: string
@@ -8,7 +8,7 @@ interface Props {
 
 const AboutHead = ({ page }: Props) => {
   // Import translations
-  const t = useTranslations('common')
+  const { t } = useTranslation('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.scss

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

components/about/ChangelogUnit/index.scss

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

components/about/ChangelogUnit/index.tsx

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

components/about/ContentUpdate/index.module.scss

@@ -1,72 +0,0 @@
-.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

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

components/about/LinkItem/index.module.scss

@@ -1,81 +0,0 @@
-.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

@@ -1,34 +0,0 @@
-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

@@ -1,61 +0,0 @@
-.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

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