1487 changed files with 114040 additions and 70451 deletions
--- a/.aidigestignore
+++ b/.aidigestignore
@ -1,5 +0,0 @@
-public/images
-public/labels
-public/profiles
-tsconfig.tsbuildinfo
-*.log
--- a/.env.local
+++ b/.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
--- a/.env.sample
+++ b/.env.sample
@ -1,12 +0,0 @@
-# Enable relative paths for imports.
-NODE_PATH='src/'
-
-# App URLs
-# Don't add a trailing slash to these URLs.
-REACT_APP_SIERO_API_URL=''
-REACT_APP_SIERO_OAUTH_URL=''
-REACT_APP_SIERO_IMG_URL=''
-
-# You will have to use a Google account to acquire a Youtube API key
-# or embeds will not work!
-NEXT_PUBLIC_YOUTUBE_API_KEY=''
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -1,6 +0,0 @@
-{
-  "extends": "next/core-web-vitals",
-  "rules": {
-    "@next/next/no-img-element": "off"
-  }
-}
--- a/.gitignore
+++ b/.gitignore
@ -1,94 +1,39 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
+node_modules

-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
+# Output
+.output
+.vercel
+.netlify
+.wrangler
+/.svelte-kit
+/.next
+/build

-# Next
-.next
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Cache directory
-.cache/
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Distribution directories
-dist/
-
-# Source images
-# Instructions will be provided to download these from the game
-public/images/weapon*
-public/images/summon*
-public/images/character*
-public/images/job*
-public/images/awakening*
-public/images/ax*
-public/images/accessory*
-public/images/mastery*
-public/images/updates*
-public/images/guidebooks*
-public/images/raids*
-public/images/gacha*
-public/images/previews*
-public/image/profiles*
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-.env.development
-.env.production
-
-# DS_Store
+# OS
 .DS_Store
-*.tsbuildinfo
-codebase.md
+Thumbs.db

-# PRDs
-prd/
+# Env
+.env
+.env.*
+!.env.example
+!.env.test
+
+# Vite
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+
+# Paraglide
+src/lib/paraglide
+
+*storybook.log
+storybook-static
+
+# Assets
+static/
+
+# Inlang cache
+project.inlang/cache/
+
+# Documentation
+docs/
--- a/.mcp.json
+++ b/.mcp.json
@ -0,0 +1,8 @@
+{
+  "mcpServers": {
+    "svelte-llm": {
+      "type": "http",
+      "url": "https://svelte-llm.stanislav.garden/mcp/mcp"
+    }
+  }
+}
--- a/.mise.toml
+++ b/.mise.toml
@ -1,2 +0,0 @@
-[tools]
-node = "20.12.0"
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+engine-strict=true
--- a/.nvmrc
+++ b/.nvmrc
@ -1 +0,0 @@
-20
--- a/.prettierignore
+++ b/.prettierignore
@ -1 +1,9 @@
-utils/api.tsx
+# Package Managers
+package-lock.json
+pnpm-lock.yaml
+yarn.lock
+bun.lock
+bun.lockb
+
+# Miscellaneous
+/static/
--- a/.prettierrc
+++ b/.prettierrc
@ -1,5 +1,18 @@
 {
+    "useTabs": true,
+    "singleQuote": true,
    "semi": false,
-  "tabWidth": 2,
-  "singleQuote": true
+    "trailingComma": "none",
+    "printWidth": 100,
+    "plugins": [
+        "prettier-plugin-svelte"
+    ],
+	"overrides": [
+		{
+			"files": "*.svelte",
+			"options": {
+				"parser": "svelte"
+			}
+		}
+	]
 }
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@ -1,43 +1,29 @@
-import type { StorybookConfig } from '@storybook/nextjs'
-const path = require('path')
+import type { StorybookConfig } from '@storybook/sveltekit';
+import remarkGfm from 'remark-gfm';

 const config: StorybookConfig = {
-  stories: [
-    '../components/**/*.mdx',
-    '../components/**/*.stories.@(js|jsx|ts|tsx)',
-  ],
+	stories: ['../src/stories/**/*.mdx', '../src/stories/**/*.stories.@(js|ts|svelte)'],
 	addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-interactions',
+		'@storybook/addon-svelte-csf',
+		'@chromatic-com/storybook',
 		{
-      name: '@storybook/addon-styling',
+			name: '@storybook/addon-docs',
 			options: {
-        sass: {
-          // Require your Sass preprocessor here
-          implementation: require('sass'),
-          additionalData: `
-              @import "./styles/variables.scss";
-            `,
-        },
-      },
+				mdxPluginOptions: {
+					mdxCompileOptions: {
+						remarkPlugins: [remarkGfm]
+					}
+				}
+			}
 		},
+		'@storybook/addon-a11y',
+		'@storybook/addon-vitest'
 	],
-  staticDirs: ['../public'],
 	framework: {
-    name: '@storybook/nextjs',
-    options: {},
+		name: '@storybook/sveltekit',
+		options: {}
 	},
-  docs: {
-    autodocs: 'tag',
-  },
-  webpackFinal: async (config: any, { configType }) => {
-    config.resolve.roots = [
-      path.resolve(__dirname, '../public'),
-      'node_modules',
-    ]
-    config.resolve.fallback.fs = false
-    return config
-  },
-}
-export default config
+	staticDirs: ['../static']
+};
+
+export default config;
--- a/.storybook/preview-head.html
+++ b/.storybook/preview-head.html
@ -0,0 +1,60 @@
+<link rel="preload" href="https://siero-img.s3-us-west-2.amazonaws.com/fonts/437fb160c86d1771.woff2" as="font" type="font/woff2" crossorigin />
+<link rel="preload" href="https://siero-img.s3-us-west-2.amazonaws.com/fonts/a9a1343791e012e7.woff2" as="font" type="font/woff2" crossorigin />
+<style>
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/437fb160c86d1771.woff2') format('woff2');
+    font-weight: 400;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/90e2044c61d1d575.woff2') format('woff2');
+    font-weight: 400;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/db6054d73906f6d1.woff2') format('woff2');
+    font-weight: 500;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/54cf3d47648cbde4.woff2') format('woff2');
+    font-weight: 500;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/a9a1343791e012e7.woff2') format('woff2');
+    font-weight: 700;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/0137ea08b8d14fae.woff2') format('woff2');
+    font-weight: 700;
+    font-style: italic;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/83b98eb4efef82d6.woff2') format('woff2');
+    font-weight: 900;
+    font-style: normal;
+    font-display: swap;
+  }
+  @font-face {
+    font-family: 'AGrot';
+    src: url('https://siero-img.s3-us-west-2.amazonaws.com/fonts/8fd873f2349d20e6.woff2') format('woff2');
+    font-weight: 900;
+    font-style: italic;
+    font-display: swap;
+  }
+</style>
--- a/.storybook/preview.ts
+++ b/.storybook/preview.ts
@ -1,17 +1,54 @@
-import type { Preview } from '@storybook/react'
-
-import '../styles/globals.scss'
+import type { Preview } from '@storybook/sveltekit';
+import '$src/app.scss';
+import './storybook-overrides.css';

 const preview: Preview = {
    parameters: {
-    actions: { argTypesRegex: '^on[A-Z].*' },
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,
-        date: /Date$/,
+				date: /Date$/i
+			}
 		},
+		viewport: {
+			options: {
+				phone: { name: 'Phone', styles: { width: '375px', height: '667px' } },
+				tablet: { name: 'Tablet', styles: { width: '768px', height: '1024px' } },
+				laptop: { name: 'Laptop', styles: { width: '1280px', height: '800px' } },
+				desktop: { name: 'Desktop', styles: { width: '1920px', height: '1080px' } }
+			}
 		},
+		backgrounds: {
+            options: {
+                light: { name: 'light', value: '#f5f5f5' },
+                dark: { name: 'dark', value: '#191919' },
+                "card-light": { name: 'card-light', value: '#ffffff' },
+                "card-dark": { name: 'card-dark', value: '#212121' }
+            }
+        },
+		docs: {
+			toc: true
+		}
 	},
-}

-export default preview
+    globalTypes: {
+		theme: {
+			name: 'Theme',
+			description: 'Global theme for components',
+			defaultValue: 'light',
+			toolbar: {
+				icon: 'circlehollow',
+				items: ['light', 'dark'],
+				showName: true
+			}
+		}
+	},
+
+    initialGlobals: {
+        backgrounds: {
+            value: 'light'
+        }
+    }
+};
+
+export default preview;
--- a/.storybook/storybook-overrides.css
+++ b/.storybook/storybook-overrides.css
@ -0,0 +1,16 @@
+/* Storybook-specific overrides */
+
+/* Allow scrolling in Storybook (app.scss sets overflow: hidden for custom layout scrolling) */
+body {
+  overflow: auto !important;
+  height: auto !important;
+}
+
+html {
+  height: auto !important;
+}
+
+/* Ensure docs pages can scroll */
+.sbdocs-wrapper {
+  overflow: auto !important;
+}
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,5 +0,0 @@
-{
-  "git.ignoreLimitWarning": true,
-  "i18n-ally.localesPaths": ["public/locales"],
-  "i18n-ally.keystyle": "nested"
-}
--- a/CLAUDE.md
+++ b/CLAUDE.md
@ -2,27 +2,276 @@

 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
+## Repository Context

-## 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
+This is the NEW frontend application for the Hensei system - a Granblue Fantasy team/party management platform. It is a SvelteKit rewrite of the existing Next.js application.

-## 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
+### System Components:
+- **hensei-svelte** (this repository): New SvelteKit frontend (actively being developed)
+- **hensei-web** (../hensei-web): Current Next.js frontend (being migrated from)
+- **hensei-api** (../hensei-api): Rails API backend that provides all data and authentication
+- **siero-bot**: Discord bot (separate repository)
+
+## Development Commands
+
+### Frontend (hensei-svelte)
+```bash
+# Install dependencies (using pnpm)
+pnpm install
+
+# Development server (Vite + SvelteKit)
+pnpm dev              # Start dev server on default port
+
+# Build & Production
+pnpm build            # Build for production
+pnpm preview          # Preview production build
+
+# Code Quality
+pnpm check            # Type-check with svelte-check
+pnpm check:watch      # Type-check in watch mode
+pnpm lint             # Run Prettier and ESLint
+pnpm format           # Format code with Prettier
+
+# Testing
+pnpm test             # Run all tests once
+pnpm test:unit        # Run tests with Vitest (watch mode)
+
+# Storybook
+pnpm storybook        # Start Storybook on port 6006
+pnpm build-storybook  # Build Storybook for production
+```
+
+### Backend API (hensei-api)
+```bash
+cd ../hensei-api
+
+# Install dependencies
+bundle install
+
+# Database
+rails db:create       # Create database
+rails db:migrate      # Run migrations
+rails db:seed         # Seed database
+
+# Development
+rails server          # Start API server (port 3000)
+rails console         # Rails console
+
+# Testing
+bundle exec rspec     # Run test suite
+
+# Code Quality
+bundle exec rubocop   # Ruby linter
+
+# Background Jobs
+bundle exec sidekiq   # Start background job processor
+```
+
+## Migration Status
+
+### Overview
+This SvelteKit application (hensei-svelte) is a complete rewrite of the existing Next.js application (hensei-web). The migration is currently in progress.
+
+### Migrated Features ✅
+- **Routes**:
+  - `/about` - About page
+  - `/auth` - Authentication flow
+  - `/teams` - Team listing and management
+  - `/party` - Party-related pages
+  - `/collection` - Collection management
+  - `/login` - Login page
+  - `/me` - User profile
+  - `/[username]` - User profiles
+
+- **Components**:
+  - Character, Weapon, Summon units (basic versions)
+  - Grid components (GridRep)
+  - Party components
+  - Navigation component
+  - Button and Icon components
+
+### Not Yet Migrated ❌
+- **Routes** (from hensei-web):
+  - `/new` - New party creation workflow
+  - `/p` - Party permalink/sharing
+  - `/saved` - Saved parties
+  - `/roadmap` - Roadmap page
+  - `/updates` - Updates/changelog page
+  - Error pages (server-error, unauthorized)
+
+- **Components** (from hensei-web):
+  - Full modal systems (CharacterModal, WeaponModal, SummonModal)
+  - Conflict resolution modals
+  - Hovercards (CharacterHovercard, WeaponHovercard, SummonHovercard)
+  - Search and filter bars
+  - Job system components
+  - Mastery components
+  - Raid selection components
+  - Rich text editor (TipTap integration)
+  - Various dialogs and common components
+
+### Key Differences in Implementation
+- **State Management**: Migrating from Valtio (Next.js) to TanStack Query (SvelteKit)
+- **Styling**: Both use SCSS modules, but component structure differs
+- **i18n**: Migrating from next-i18next to Paraglide.js
+- **Routing**: From Next.js App Router to SvelteKit file-based routing
+- **Components**: From React to Svelte 5 with runes
+
+## Architecture Overview
+
+### System Architecture
+
+The Hensei system consists of multiple components:
+
+1. **hensei-svelte** (this repository): New SvelteKit frontend (in development)
+2. **hensei-web** (../hensei-web): Current Next.js 14 frontend (being replaced)
+   - React 18 with TypeScript
+   - Radix UI components
+   - Valtio for state management
+   - TipTap for rich text editing
+   - SCSS modules for styling
+3. **hensei-api** (../hensei-api): Rails API backend
+   - Ruby 3.3.7 + Rails 8.0.1
+   - PostgreSQL with full-text search
+   - OAuth2 authentication (Doorkeeper)
+   - AWS S3 for image storage
+   - Sidekiq for background jobs
+   - Blueprinter for JSON serialization
+
+### Frontend Tech Stack
+- **Framework**: SvelteKit with Svelte 5
+- **Build Tool**: Vite 7
+- **Language**: TypeScript with strict mode enabled
+- **Package Manager**: pnpm (10.15.1)
+- **Styling**: SCSS with CSS Modules pattern
+- **Testing**: Vitest with browser testing (Playwright)
+- **Internationalization**: Paraglide.js with English and Japanese support
+- **UI Components**: Bits UI library
+- **Data Fetching**: TanStack Query for Svelte
+- **Deployment**: Node adapter for server deployment
+
+### Project Structure
+
+```
+src/
+├── routes/              # SvelteKit file-based routing
+│   ├── [username]/      # Dynamic user profile routes
+│   ├── auth/            # Authentication flows
+│   ├── teams/           # Team management pages
+│   ├── party/           # Party-related pages
+│   └── collection/      # Collection management
+├── lib/
+│   ├── api/             # API client layer
+│   │   ├── core.ts      # API client core functionality
+│   │   ├── resources/   # Resource-specific API calls (parties, users, etc.)
+│   │   └── schemas/     # Zod schemas for API responses
+│   ├── components/      # Reusable Svelte components
+│   │   ├── units/       # Unit components (Character, Weapon, Summon)
+│   │   ├── reps/        # Representation components
+│   │   ├── grids/       # Grid layout components
+│   │   ├── party/       # Party-specific components
+│   │   └── panels/      # Panel components
+│   ├── auth/            # Authentication utilities
+│   ├── services/        # Business logic services
+│   ├── types/           # TypeScript type definitions
+│   ├── validation/      # Input validation schemas
+│   └── paraglide/       # Generated i18n files
+├── themes/              # SCSS theme files
+└── assets/              # Static assets
+```
+
+### Key Architectural Patterns
+
+1. **Component Organization**: Components are organized by domain (units, reps, grids, etc.) with each having its own module structure.
+
+2. **API Layer**: Centralized API client in `lib/api/` with resource-specific modules and Zod schema validation.
+
+3. **Type Safety**: Strict TypeScript configuration with additional safety flags enabled (`noUncheckedIndexedAccess`, `exactOptionalPropertyTypes`).
+
+4. **Internationalization**: Uses Paraglide.js with message files in `messages/` directory, supporting English and Japanese locales.
+
+5. **Testing Strategy**: Dual testing approach with browser tests for Svelte components and Node tests for server-side code.
+
+6. **Path Aliases**:
+   - `$lib/*` → `src/lib/*` (SvelteKit default)
+   - `$types` → `src/lib/types` (custom alias)
+   - `$src` → `src/` (Vite alias)
+
+7. **Import Patterns**:
+   - **Prefer direct imports over re-exports** for better clarity and tree-shaking
+   - Import types directly from their source files (e.g., `import type { Party } from '$lib/types/api/party'`)
+   - Avoid creating barrel files (index.ts) that re-export from other modules
+   - Exception: Generated code (like Paraglide messages) may use re-exports
+   - This pattern improves TypeScript performance and makes dependencies explicit
+
+   **Correct Import Examples**:
+   ```typescript
+   // ✅ Good - Direct imports
+   import { partyAdapter } from '$lib/api/adapters/party.adapter'
+   import { userAdapter } from '$lib/api/adapters/user.adapter'
+   import { createSearchResource } from '$lib/api/adapters/resources/search.resource.svelte'
+   import type { Party } from '$lib/types/api/party'
+   import type { AdapterOptions } from '$lib/api/adapters/types'
+   import { ApiError } from '$lib/api/adapters/errors'
+
+   // ❌ Bad - Barrel file imports
+   import { partyAdapter, userAdapter } from '$lib/api/adapters'
+   import type { Party } from '$lib/api/adapters'
+   ```
+
+### Component Patterns
+
+Components follow a consistent structure:
+- `.svelte` file for component logic
+- `.module.scss` for scoped styles (when needed)
+- TypeScript for type safety
+- Props validation with Zod schemas where applicable
+
+### API Integration
+
+The frontend communicates with hensei-api (Rails backend) for:
+- **Authentication**: OAuth2 via Doorkeeper (`/oauth/token`)
+- **Party Management**: CRUD operations on party configurations
+- **Grid Management**: Managing characters, weapons, and summons in parties
+- **User Management**: Profile updates, username/email availability checks
+- **Favorites**: Managing favorite parties
+- **Jobs**: Job selection and skill management
+- **Search**: Full-text search across game data
+- **Raids & Guidebooks**: Game content categorization
+
+Key API patterns:
+- All endpoints require Bearer token authentication
+- Responses use Blueprinter serialization
+- Base path: `/api/v1/`
+- Image assets served from AWS S3
+
+**📖 For detailed networking architecture, see [TanStack Query Architecture](./docs/TANSTACK_QUERY_ARCHITECTURE.md)**
+
+This document covers:
+- TanStack Query v6 integration patterns
+- Query and mutation hooks
+- Cache management strategies
+- SSR hydration with `withInitialData()`
+- Best practices and common patterns
+- Migration from Valtio to TanStack Query
+
+### Domain Models (from hensei-api)
+
+Key models that the frontend interacts with:
+- **Party**: Team configurations with characters, weapons, summons, job, and skills
+- **Character/Weapon/Summon**: Game items with various attributes and enhancements
+- **GridCharacter/GridWeapon/GridSummon**: Junction tables for party composition
+- **User**: Authentication and party ownership
+- **Job/JobSkill/JobAccessory**: Player job system
+- **Raid/RaidGroup**: Content categorization
+- **Awakening/WeaponKey**: Item enhancement systems
+- **Favorite**: User's bookmarked parties
+- **Guidebook**: Game strategy guides
+
+### Testing Configuration
+
+Vitest is configured with two test projects:
+- **Client tests**: Browser-based tests for Svelte components using Playwright
+- **Server tests**: Node-based tests for server-side logic
+
+Tests should follow the pattern `*.{test,spec}.{js,ts}` for server tests and `*.svelte.{test,spec}.{js,ts}` for component tests.
--- a/NEXT_SESSION_PROMPT.md
+++ b/NEXT_SESSION_PROMPT.md
@ -0,0 +1,116 @@
+# Prompt for Next Devin Session
+
+## Task
+Continue cleaning up type errors in the `svelte-main` branch of `jedmund/hensei-web`. The goal is to get the build green by fixing all remaining type errors.
+
+## Context
+This is a Svelte 5 rewrite of a Granblue Fantasy team composition app. The previous sessions reduced type errors from ~412 to ~161. A detailed plan of completed and remaining work is in `CLEANUP_PLAN.md`.
+
+## Starting Point
+1. Checkout the `svelte-main` branch in `/home/ubuntu/repos/hensei-web`
+2. Run `pnpm check 2>&1 | grep -c "Error:"` to see current error count (~161)
+3. Review this file for detailed context on what's been fixed and what remains
+
+## Completed Fixes (This Session - 219 -> 161 errors)
+- Fixed teams/new/+page.svelte position type assertions (non-null assertions for array access after length check)
+- Fixed Party.svelte editKey type (string | null -> string | undefined)
+- Fixed sidebar.svelte.ts Component type to accept any props (Component<any, any, any>)
+- Fixed database/characters/[id]/+page.svelte UncapData type (provide default values for flb/ulb)
+- Fixed DetailScaffold.svelte optional props (use nullish coalescing for optional callbacks)
+- Fixed SearchSidebar.svelte params construction (conditionally add properties instead of passing undefined)
+- Fixed SearchSidebar.svelte granblue_id -> granblueId property name
+- Fixed Party.svelte mainWeapon derived state (removed arrow function wrapper)
+
+## Remaining Type Errors to Fix (~161 errors)
+
+### Files with Most Errors
+1. Party.svelte - 22 errors
+2. database/characters/[id]/+page.svelte - 19 errors
+3. Checkbox.svelte - 19 errors
+4. SearchSidebar.svelte - 12 errors
+5. teams/new/+page.svelte - 10 errors
+6. test/images/+page.svelte - 9 errors
+7. Switch.svelte - 9 errors
+8. StatsSection.svelte - 9 errors
+9. Button.svelte - 8 errors
+10. WeaponUnit.svelte - 7 errors
+
+### High Priority Error Patterns
+
+1. **SearchResult type mismatch** (5 errors)
+   - Issue: `(items: SearchResult<any>[]) => Promise<void>` not assignable to `(items: SearchResult[]) => void`
+   - Files: Party.svelte, teams/new/+page.svelte, SearchSidebar.svelte
+   - Fix: Update function signatures or SearchResult type definition
+
+2. **Object is possibly 'undefined'** (5 errors)
+   - Various files need null guards or optional chaining
+
+3. **number | null vs number | undefined** (4 errors)
+   - File: ItemHeader.svelte
+   - Fix: Normalize null/undefined handling (use ?? operator)
+
+4. **Expected 1 arguments, but got 2** (4 errors)
+   - Function call signature mismatches
+
+5. **Conversion of number to "0" | "1" | "2" | "3"** (3 errors)
+   - File: Party.svelte (job skill slot handling)
+   - Fix: Use `as unknown as "0" | "1" | "2" | "3"` or update type definitions
+
+### Medium Priority Error Patterns
+
+6. **exactOptionalPropertyTypes violations** (multiple errors)
+   - Issue: Passing `undefined` explicitly to optional props
+   - Fix: Use nullish coalescing or omit the property entirely
+
+7. **Select.Item disabled prop** (2 errors)
+   - bits-ui type compatibility issue
+
+8. **RadioGroup.Item type mismatch** (2 errors)
+   - bits-ui type compatibility issue
+
+9. **Property 'normalizer' does not exist on DatabaseProvider** (2 errors)
+
+10. **Module has no exported member 'PartyView'** (2 errors)
+    - File: party schema
+    - Fix: Add or update the export
+
+### Lower Priority
+
+11. **Argument of type '"01"' not assignable to ImageVariant** (2 errors)
+12. **'uncapLevel' is possibly 'null'** (2 errors)
+13. **'to' is possibly 'null'** (2 errors)
+14. **Expression produces union type too complex** (3 errors)
+15. **Parameter implicitly has 'any' type** (6 errors)
+
+## Commands Reference
+```bash
+# Check error count
+pnpm check 2>&1 | grep -c "Error:"
+
+# Analyze error patterns
+pnpm check 2>&1 | grep "Error:" | sort | uniq -c | sort -rn | head -20
+
+# Find specific errors
+pnpm check 2>&1 | grep -B2 "specific error text"
+
+# Run lint
+pnpm lint
+
+# Run build
+pnpm build
+
+# Regenerate Paraglide translations
+pnpm paraglide-js compile --project ./project.inlang
+```
+
+## Important Notes
+- This project uses `exactOptionalPropertyTypes: true` in tsconfig, which is stricter than normal TypeScript
+- The codebase uses Svelte 5 runes (`$state`, `$derived`, `$effect`)
+- bits-ui v2.9.6 is used for UI components - check their docs for correct API
+- Focus on errors only, not warnings (per user instruction)
+- The branch `devin/1764361948-fix-type-errors` contains the latest fixes - merge into svelte-main or continue from there
+
+## Success Criteria
+- `pnpm check` returns 0 errors
+- `pnpm lint` passes
+- `pnpm build` succeeds
--- a/README.md
+++ b/README.md
@ -1,77 +1,38 @@
-![Header image for hensei-web](README.png)
+# sv

-# hensei-web
+Everything you need to build a Svelte project, powered by [`sv`](https://github.com/sveltejs/cli).

-**hensei-web** is the frontend for [granblue.team](https://app.granblue.team/), an app for saving and sharing teams for [Granblue Fantasy](https://game.granbluefantasy.jp).
+## Creating a project

-## Getting Started
+If you're seeing this, you've probably already done this step. Congrats!

-First, you have to set up your environment file. You should start with [.env.sample](https://github.com/jedmund/hensei-web/blob/staging/.env.sample), but here are some gotchas:
+```sh
+# create a new project in the current directory
+npx sv create

-#### App URLs
-
-Don't add a trailing slash to these URLs!
-The API will run on port 3000 by default, but make sure to change these to match your instance of the API.
-
-```
-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'
+# create a new project in my-app
+npx sv create my-app
 ```

-#### Asset URLs
+## Developing

-Next.js serves all assets out of the /public directory. In development we utilize this for all assets, but in production, you will want to host these images on a cloud storage provider like Amazon S3. Once you have that set up and you're running in a production environment, change this to the full bucket URL.
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

-```
-NEXT_PUBLIC_SIERO_IMG_URL='/images'
-```
-
-#### Dependencies
-
-Once your `.env` is all set up, install all dependencies:
-
-```bash
-npm install
-# or
-yarn install
-```
-
-Then, run the development server with:
-
-```bash
+```sh
 npm run dev
-# or
-yarn dev
+
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```

-## Assets
+## Building

-The [hensei-api](https://github.com/jedmund/hensei-api) repository has tasks that will help you get assets, although some were crafted or renamed by hand. The front-end expects this folder structure inside of the `images` folder:
+To create a production version of your app:

+```sh
+npm run build
 ```
-root
-├─ accessory-grid/
-├─ accessory-square/
-├─ awakening/
-├─ ax/
-├─ character-main/
-├─ character-grid/
-├─ character-square/
-├─ guidebooks/
-├─ jobs/
-├─ job-icons/
-├─ job-portraits/
-├─ job-skills/
-├─ labels/
-├─ mastery/
-├─ placeholders/
-├─ raids/
-├─ summon-main/
-├─ summon-grid/
-├─ summon-square/
-├─ updates/
-├─ weapon-main/
-├─ weapon-grid/
-├─ weapon-keys/
-├─ weapon-square/
-```
+
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://svelte.dev/docs/kit/adapters) for your target environment.
--- a/README.png
+++ b/README.png
--- a/TANSTACK_QUERY_MIGRATION_CONTINUATION.md
+++ b/TANSTACK_QUERY_MIGRATION_CONTINUATION.md
@ -0,0 +1,217 @@
+# TanStack Query Migration - Continuation Guide
+
+This document provides context for continuing the TanStack Query v6 migration in hensei-web.
+
+## Migration Status
+
+### Completed (PR #441 - merged)
+- Query options factories: `party.queries.ts`, `job.queries.ts`, `user.queries.ts`, `search.queries.ts`
+- Mutation configurations: `party.mutations.ts`, `grid.mutations.ts`, `job.mutations.ts`
+- SSR utilities: `withInitialData`, `prefetchQuery`, `prefetchInfiniteQuery`
+- Example components: `JobSelectionSidebar.svelte`, `teams/[id]/+page.svelte`
+
+### Completed (PR #442 - pending merge)
+- `JobSkillSelectionSidebar.svelte` - Job skill search with infinite scroll
+- `SearchContent.svelte` - Search modal for weapons/characters/summons
+- `[username]/+page.svelte` - User profile page with teams/favorites tabs
+- `teams/explore/+page.svelte` - Public teams listing
+
+### Remaining Work
+
+#### Follow-Up Prompt 5: Party Component Mutations
+**Priority: High**
+**Complexity: Large**
+
+The `Party.svelte` component (1535 lines) needs to be migrated to use TanStack Query mutations instead of direct service calls.
+
+**Files to modify:**
+- `src/lib/components/party/Party.svelte`
+
+**Current state:** Uses `PartyService`, `GridService`, `ConflictService`, and direct `partyAdapter` calls.
+
+**Target state:** Use mutation hooks from:
+- `src/lib/api/mutations/party.mutations.ts` - `useUpdateParty`, `useDeleteParty`, `useRemixParty`, `useFavoriteParty`, `useUnfavoriteParty`, `useRegeneratePreview`
+- `src/lib/api/mutations/grid.mutations.ts` - `useCreateGridWeapon`, `useUpdateGridWeapon`, `useDeleteGridWeapon`, etc.
+- `src/lib/api/mutations/job.mutations.ts` - `useUpdatePartyJob`, `useUpdatePartyJobSkills`, `useRemovePartyJobSkill`, `useUpdatePartyAccessory`
+
+**Recommended sub-tasks:**
+1. **5a: Party metadata mutations** - name, description, visibility using `useUpdateParty`
+2. **5b: Grid weapon mutations** - add/update/delete weapons using grid mutations
+3. **5c: Grid character mutations** - add/update/delete characters using grid mutations
+4. **5d: Grid summon mutations** - add/update/delete summons using grid mutations
+5. **5e: Job and skill mutations** - job selection, skill management using job mutations
+
+**Key functions to migrate in Party.svelte:**
+- `updatePartyDetails()` - replace `partyService.update()` with `useUpdateParty().mutate()`
+- `toggleFavorite()` - replace `partyService.favorite()/unfavorite()` with `useFavoriteParty()/useUnfavoriteParty()`
+- `remixParty()` - replace `partyService.remix()` with `useRemixParty()`
+- `deleteParty()` - replace `partyService.delete()` with `useDeleteParty()`
+- `handleSelectJob()` - replace `partyAdapter.updateJob()` with `useUpdatePartyJob()`
+- `handleSelectJobSkill()` - replace `partyAdapter.updateJobSkills()` with `useUpdatePartyJobSkills()`
+- Drag-drop operations - replace `gridService.moveWeapon/Character/Summon()` with appropriate mutations
+
+#### Follow-Up Prompt 6: Remove Deprecated Resource Classes
+**Priority: Low**
+**Complexity: Small**
+**Prerequisite:** All components migrated away from resource classes
+
+**Files to delete:**
+- `src/lib/api/adapters/resources/search.resource.svelte.ts`
+- `src/lib/api/adapters/resources/party.resource.svelte.ts`
+- `src/lib/api/adapters/resources/job.resource.svelte.ts`
+- `src/lib/api/adapters/resources/infiniteScroll.resource.svelte.ts`
+
+**Steps:**
+1. Search for any remaining imports: `grep -r "from.*resources/" src/`
+2. Migrate any remaining usages
+3. Delete the resource files
+4. Update any barrel exports (index.ts files)
+5. Run build to verify no import errors
+
+**Current blockers:** `InfiniteScroll.svelte` still imports `InfiniteScrollResource` type
+
+## Patterns and Best Practices
+
+### Infinite Query Pattern
+```typescript
+import { createInfiniteQuery } from '@tanstack/svelte-query'
+import { IsInViewport } from 'runed'
+
+// Create the query with thunk for reactivity
+const query = createInfiniteQuery(() => ({
+  ...queryOptions.list(filters),
+  initialData: serverData ? {
+    pages: [{ results: serverData.items, page: 1, totalPages: serverData.totalPages }],
+    pageParams: [1]
+  } : undefined,
+  initialDataUpdatedAt: 0
+}))
+
+// Flatten and deduplicate results
+const rawResults = $derived(query.data?.pages.flatMap((page) => page.results) ?? [])
+const items = $derived(Array.from(new Map(rawResults.map((item) => [item.id, item])).values()))
+
+// Infinite scroll with IsInViewport
+let sentinelEl = $state<HTMLElement>()
+const inViewport = new IsInViewport(() => sentinelEl, { rootMargin: '200px' })
+
+$effect(() => {
+  if (inViewport.current && query.hasNextPage && !query.isFetchingNextPage && !query.isLoading) {
+    query.fetchNextPage()
+  }
+})
+```
+
+### Debounced Search Pattern
+```typescript
+let searchQuery = $state('')
+let debouncedSearchQuery = $state('')
+let debounceTimer: ReturnType<typeof setTimeout> | undefined
+
+$effect(() => {
+  const query = searchQuery
+  if (debounceTimer) clearTimeout(debounceTimer)
+  debounceTimer = setTimeout(() => {
+    debouncedSearchQuery = query
+  }, 300)
+  return () => { if (debounceTimer) clearTimeout(debounceTimer) }
+})
+
+// Use debouncedSearchQuery in the query, not searchQuery
+const query = createInfiniteQuery(() => queryOptions.search(debouncedSearchQuery))
+```
+
+### Type Assertions for Conditional Queries
+When a query can return different types based on conditions, use type assertions:
+```typescript
+const query = createInfiniteQuery(() => {
+  if (condition) {
+    return queryOptionsA()
+  }
+  return queryOptionsB() as unknown as ReturnType<typeof queryOptionsA>
+})
+```
+
+### Mutation Pattern
+```typescript
+import { useUpdateParty } from '$lib/api/mutations/party.mutations'
+
+const updatePartyMutation = useUpdateParty()
+
+function handleSave() {
+  updatePartyMutation.mutate(
+    { partyId, updates },
+    {
+      onSuccess: () => { /* handle success */ },
+      onError: (error) => { /* handle error */ }
+    }
+  )
+}
+
+// Use mutation state for UI
+{#if updatePartyMutation.isPending}
+  <span>Saving...</span>
+{/if}
+```
+
+## Known Issues
+
+### Pre-existing Build Errors
+The build has pre-existing errors unrelated to TanStack Query migration:
+- `Cannot find module '$lib/paraglide/server'` in `hooks.server.ts`
+- `Cannot find module '$lib/paraglide/runtime'` in `hooks.ts`
+- `Cannot find module '$lib/paraglide/messages'` in various components
+
+These are paraglide i18n setup issues and should be ignored when checking for migration-related errors.
+
+### Duplicate Key Error Fix
+When using infinite queries, the API may return duplicate items across pages. Always deduplicate:
+```typescript
+const rawResults = $derived(query.data?.pages.flatMap((page) => page.results) ?? [])
+const items = $derived(Array.from(new Map(rawResults.map((item) => [item.id, item])).values()))
+```
+
+## File Locations
+
+### Query Options Factories
+- `src/lib/api/queries/party.queries.ts`
+- `src/lib/api/queries/job.queries.ts`
+- `src/lib/api/queries/user.queries.ts`
+- `src/lib/api/queries/search.queries.ts`
+
+### Mutation Hooks
+- `src/lib/api/mutations/party.mutations.ts`
+- `src/lib/api/mutations/grid.mutations.ts`
+- `src/lib/api/mutations/job.mutations.ts`
+
+### SSR Utilities
+- `src/lib/query/ssr.ts`
+
+### Reference Implementations
+- `src/lib/components/sidebar/JobSelectionSidebar.svelte` - Simple infinite query
+- `src/lib/components/sidebar/JobSkillSelectionSidebar.svelte` - Infinite query with search
+- `src/lib/components/sidebar/SearchContent.svelte` - Infinite query with filters and deduplication
+- `src/routes/teams/[id]/+page.svelte` - SSR with initialData
+- `src/routes/[username]/+page.svelte` - Conditional queries (teams vs favorites)
+- `src/routes/teams/explore/+page.svelte` - Simple infinite scroll page
+
+## Commands
+
+```bash
+# Run TypeScript check
+pnpm run check
+
+# Run development server
+pnpm run dev
+
+# Check for resource class imports
+grep -r "from.*resources/" src/
+
+# Check for createInfiniteScrollResource usage
+grep -r "createInfiniteScrollResource" src/
+```
+
+## Branch Information
+
+- Base branch: `svelte-main`
+- PR #442 branch: `devin/1764405731-tanstack-query-migration-phase2`
--- a/TYPESCRIPT_IMPROVEMENTS.md
+++ b/TYPESCRIPT_IMPROVEMENTS.md
@ -0,0 +1,341 @@
+# TypeScript Quality Improvement Plan
+
+**Status:** 0 TypeScript errors achieved (151 → 0)
+**Next Phase:** Code quality and maintainability improvements
+
+## Overview
+
+While we've eliminated all TypeScript errors, several opportunities exist to improve type safety, reduce workarounds, and enhance maintainability.
+
+---
+
+## Phase 1: Critical Type Safety (High Priority)
+
+### 1.1 Remove Type Assertions in Component Props
+
+**Problem:** Using `as any` to spread props loses type safety
+
+**Files:**
+- `src/lib/components/uncap/UncapIndicator.svelte` (lines 167, 169)
+- `src/lib/components/ui/segmented-control/SegmentedControl.svelte` (line 88)
+
+**Tasks:**
+- [ ] Create proper union type for StarRender props
+- [ ] Define TranscendenceStarProps and UncapStarProps interfaces
+- [ ] Replace `{...(star.props as any)}` with properly typed spread
+- [ ] Create typed wrapper for RadioGroupPrimitive or fix optionalProps spreading
+
+**Acceptance Criteria:**
+- No `as any` casts in component prop spreading
+- Full IntelliSense support for star component props
+- Type errors caught at compile time
+
+**Effort:** Medium (4-6 hours)
+
+### 1.2 Unify Visibility Types
+
+**Problem:** Number/string mismatch between frontend and API requiring runtime conversion
+
+**Files:**
+- `src/lib/types/api/party.ts` (visibility: number)
+- `src/lib/api/adapters/party.adapter.ts` (visibility: string literal)
+- `src/lib/services/party.service.ts` (runtime mapping)
+
+**Tasks:**
+- [ ] Create PartyVisibility enum/const
+- [ ] Update Party type to use string literals
+- [ ] Remove number-to-string mapping in party.service.ts
+- [ ] Update all visibility references across codebase
+- [ ] Update API serialization if needed
+
+**Acceptance Criteria:**
+- Single source of truth for visibility values
+- No runtime type conversion needed
+- Type safety when setting visibility
+
+**Effort:** Medium (3-4 hours)
+
+**Impact:** Prevents invalid visibility values at compile time
+
+---
+
+## Phase 2: Third-Party Library Improvements (Medium Priority)
+
+### 2.1 Create bits-ui Wrapper Components
+
+**Problem:** Using `optionalProps()` workaround for type incompatibilities
+
+**Files:**
+- `src/lib/components/ui/Select.svelte`
+- `src/lib/components/ui/segmented-control/SegmentedControl.svelte`
+- `src/lib/components/ui/RadioGroup.svelte` (if exists)
+
+**Tasks:**
+- [ ] Create `src/lib/components/ui/bits-ui-wrappers/` directory
+- [ ] Create SelectRoot wrapper with explicit prop typing
+- [ ] Create RadioGroupRoot wrapper with explicit prop typing
+- [ ] Update consuming components to use wrappers
+- [ ] Document why wrappers exist (bits-ui type issues)
+
+**Acceptance Criteria:**
+- No `optionalProps()` calls for bits-ui components
+- Clear prop types for each wrapper
+- Wrappers forward only supported props
+
+**Effort:** Medium (4-5 hours)
+
+### 2.2 Add wx-svelte-grid Type Definitions
+
+**Problem:** Missing Cell export causing workaround with loose types
+
+**Files:**
+- `src/lib/components/database/cells/LastUpdatedCell.svelte`
+- Other cell components using wx-svelte-grid
+
+**Tasks:**
+- [ ] Create `src/lib/types/wx-svelte-grid.d.ts`
+- [ ] Define Cell, Grid, and other used types
+- [ ] Replace `[key: string]: any` with proper Cell interface
+- [ ] Update all cell components to use typed Cell props
+
+**Acceptance Criteria:**
+- Proper Cell type available for import
+- No `[key: string]: any` in cell components
+- IntelliSense support for grid props
+
+**Effort:** Small (2-3 hours)
+
+---
+
+## Phase 3: Type Consolidation (Medium Priority)
+
+### 3.1 Consolidate Awakening Types
+
+**Problem:** Two different Awakening interfaces exist
+
+**Files:**
+- `src/lib/types/Awakening.d.ts`
+- `src/lib/types/api/entities.ts`
+
+**Tasks:**
+- [ ] Compare both definitions and identify differences
+- [ ] Choose canonical location (prefer entities.ts)
+- [ ] Remove duplicate definition
+- [ ] Update all imports to use single source
+- [ ] Ensure LocalizedName is properly defined
+
+**Acceptance Criteria:**
+- Single Awakening type definition
+- All imports use same source
+- No breaking changes to existing code
+
+**Effort:** Small (1-2 hours)
+
+### 3.2 Type the `any` Usages
+
+**Problem:** Loose typing in services and adapters
+
+**Files to audit:**
+```bash
+grep -r ": any" src/lib --include="*.ts" --include="*.svelte"
+```
+
+**Common patterns to fix:**
+- `row: any` → `row: DatabaseRow` (or specific entity type)
+- `item: any` → `item: GridItem`
+- `mapped: any` → `mapped: CreatePartyParams`
+- `result: any` → proper return type
+- Context types using `any`
+
+**Tasks:**
+- [ ] Audit all `any` usages and categorize
+- [ ] Create proper types for common patterns (DatabaseRow, GridItem, etc.)
+- [ ] Replace `any` with specific types
+- [ ] Add generics where appropriate
+
+**Acceptance Criteria:**
+- Minimal `any` usage (only where truly necessary)
+- Clear justification comment for remaining `any` usages
+- Improved IntelliSense throughout codebase
+
+**Effort:** Large (6-8 hours)
+
+---
+
+## Phase 4: Test Infrastructure (Low Priority)
+
+### 4.1 Create Test Mock Factories
+
+**Problem:** Test mocks are brittle and require manual updates when types change
+
+**Files:**
+- `src/lib/api/adapters/__tests__/entity.adapter.test.ts`
+- `src/lib/api/adapters/__tests__/grid.adapter.test.ts`
+- Other test files
+
+**Tasks:**
+- [ ] Create `src/lib/testing/factories.ts`
+- [ ] Implement `createMockWeapon(overrides?)`
+- [ ] Implement `createMockCharacter(overrides?)`
+- [ ] Implement `createMockSummon(overrides?)`
+- [ ] Implement `createMockParty(overrides?)`
+- [ ] Update all tests to use factories
+- [ ] Add JSDoc examples for each factory
+
+**Acceptance Criteria:**
+- All test mocks use factory functions
+- Overrides supported for customization
+- Type-safe mock creation
+- Tests resilient to type changes
+
+**Effort:** Medium (4-5 hours)
+
+### 4.2 Improve Test Coverage for Type Transformations
+
+**Focus areas:**
+- Visibility mapping (number → string)
+- Awakening type handling
+- Party payload transformations
+- Grid item CRUD operations
+
+**Tasks:**
+- [ ] Add tests for mapToApiPayload visibility conversion
+- [ ] Add tests for awakening null/undefined handling
+- [ ] Test edge cases in type transformations
+- [ ] Document expected type contracts in tests
+
+**Effort:** Medium (3-4 hours)
+
+---
+
+## Phase 5: Code Quality (Low Priority)
+
+### 5.1 Address TypeScript Warnings
+
+**Current status:** 190 warnings
+
+**Categories to review:**
+- Unused CSS selectors
+- Non-reactive updates
+- Accessibility warnings
+- Import warnings
+
+**Tasks:**
+- [ ] Run `pnpm check 2>&1 | grep "Warn:" | sort | uniq -c`
+- [ ] Categorize warnings by type and severity
+- [ ] Fix or suppress unused CSS warnings
+- [ ] Review non-reactive update warnings (may indicate bugs)
+- [ ] Address accessibility issues
+
+**Acceptance Criteria:**
+- Warnings reduced by 50% or more
+- All critical warnings addressed
+- Suppressions documented with reason
+
+**Effort:** Medium (4-6 hours)
+
+### 5.2 Add JSDoc Documentation
+
+**Problem:** Complex type transformations lack explanation
+
+**Target areas:**
+- `mapToApiPayload()` in party.service.ts
+- Visibility mapping logic
+- Type assertion workarounds
+- Third-party wrapper purposes
+
+**Tasks:**
+- [ ] Document visibility mapping with TODO for unification
+- [ ] Explain why type assertions are needed
+- [ ] Add examples to complex type transformations
+- [ ] Document third-party library workarounds
+
+**Acceptance Criteria:**
+- All workarounds have explanation comments
+- Complex transformations documented
+- TODOs added for future improvements
+
+**Effort:** Small (2-3 hours)
+
+### 5.3 Strict Null Checks Review
+
+**Problem:** Some null handling is implicit or unclear
+
+**Tasks:**
+- [ ] Review null coalescing operators (`??`)
+- [ ] Document what empty string defaults mean
+- [ ] Consider making related properties required together (e.g., avatar.picture + avatar.element)
+- [ ] Add validation for undefined vs null semantics
+
+**Effort:** Small (2-3 hours)
+
+---
+
+## Implementation Strategy
+
+### Recommended Order:
+
+**Week 1: Critical Type Safety**
+1. Remove type assertions in UncapIndicator (1.1)
+2. Unify visibility types (1.2)
+
+**Week 2: Third-Party Libraries**
+3. Create bits-ui wrappers (2.1)
+4. Add wx-svelte-grid types (2.2)
+
+**Week 3: Type Consolidation**
+5. Consolidate Awakening types (3.1)
+6. Type the `any` usages (3.2) - ongoing
+
+**Week 4: Polish**
+7. Create test factories (4.1)
+8. Address warnings (5.1)
+9. Add JSDoc (5.2)
+
+### Success Metrics:
+
+- **Type Safety:** 0 `as any` casts (except documented cases)
+- **Consistency:** Single source of truth for shared types
+- **Maintainability:** Test factories, JSDoc, reduced warnings
+- **Developer Experience:** Better IntelliSense, clearer errors
+
+### Non-Goals:
+
+- Perfect type coverage (pragmatic > perfect)
+- Rewriting working code just for types
+- Over-engineering simple components
+
+---
+
+## Notes
+
+### Philosophy:
+- Incremental improvement over big rewrites
+- Document "why" for workarounds
+- Type safety where it adds value
+- Pragmatic trade-offs are okay
+
+### When to Use `any`:
+- Truly dynamic data (rare)
+- Third-party library gaps (with comment)
+- Overly complex generic inference
+- Always add `// eslint-disable-next-line @typescript-eslint/no-explicit-any` and justification
+
+### When to Create Wrappers:
+- Type incompatibilities we can't fix upstream
+- Need to restrict API surface
+- Want better defaults
+- Shared configuration across usages
+
+---
+
+## Progress Tracking
+
+- [ ] Phase 1: Critical Type Safety (0/2)
+- [ ] Phase 2: Third-Party Libraries (0/2)
+- [ ] Phase 3: Type Consolidation (0/2)
+- [ ] Phase 4: Test Infrastructure (0/2)
+- [ ] Phase 5: Code Quality (0/3)
+
+**Last Updated:** 2025-11-28
+**Current Status:** Planning phase
--- a/app/[locale]/[username]/ProfilePageClient.tsx
+++ b/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
--- a/app/[locale]/[username]/page.tsx
+++ b/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()
-  }
-}
--- a/app/[locale]/about/AboutPageClient.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/about/page.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/error.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/global-error.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/layout.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/new/NewPartyClient.tsx
+++ b/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
--- a/app/[locale]/new/PartyWrapper.tsx
+++ b/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>
-    )
-  }
-}
--- a/app/[locale]/new/page.tsx
+++ b/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>
-    )
-  }
-}
--- a/app/[locale]/not-found.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/p/[party]/PartyPageClient.tsx
+++ b/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
--- a/app/[locale]/p/[party]/page.tsx
+++ b/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()
-  }
-}
--- a/app/[locale]/page.tsx
+++ b/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')
-}
--- a/app/[locale]/roadmap/RoadmapPageClient.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/roadmap/page.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/saved/SavedPageClient.tsx
+++ b/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
--- a/app/[locale]/saved/page.tsx
+++ b/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>
-    )
-  }
-}
--- a/app/[locale]/server-error/page.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/teams/TeamsPageClient.tsx
+++ b/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
--- a/app/[locale]/teams/page.tsx
+++ b/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>
-    );
-  }
-}
--- a/app/[locale]/unauthorized/page.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/updates/UpdatesPageClient.tsx
+++ b/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>
-  )
-}
--- a/app/[locale]/updates/page.tsx
+++ b/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>
-  )
-}
--- a/app/api/auth/login/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/auth/logout/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/auth/signup/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/characters/[id]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/favorites/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/jobs/[id]/accessories/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/jobs/[id]/skills/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/jobs/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/jobs/skills/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/parties/[shortcode]/remix/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/parties/[shortcode]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/parties/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/raids/[id]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/raids/groups/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/search/[object]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/search/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/summons/[id]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/users/info/[username]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/users/settings/route.ts
+++ b/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 }
-    )
-  }
-}
--- a/app/api/version/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/api/weapons/[id]/route.ts
+++ b/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 }
-    );
-  }
-}
--- a/app/components/Header.tsx
+++ b/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
--- a/app/components/Providers.tsx
+++ b/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>
-  )
-}
--- a/app/components/UpdateToastClient.tsx
+++ b/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
-}
--- a/app/components/VersionHydrator.tsx
+++ b/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
-}
--- a/app/layout.tsx
+++ b/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
-}
--- a/app/lib/api-utils.ts
+++ b/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),
-});
--- a/app/lib/data.ts
+++ b/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;
-  }
-}
--- a/app/not-found.tsx
+++ b/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>
-  )
-}
--- a/app/styles/error.scss
+++ b/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);
-      }
-    }
-  }
-}
--- a/components/AccountStateInitializer/index.tsx
+++ b/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
-}
--- a/components/ElementToggle/index.module.scss
+++ b/components/ElementToggle/index.module.scss
@ -1,79 +0,0 @@
-.group {
-  $height: 36px;
-
-  background-color: var(--toggle-bg);
-  border: 1px solid var(--toggle-stroke);
-  border-radius: $height;
-  display: flex;
-  height: $height;
-  gap: calc($unit / 4);
-  padding: calc($unit / 2);
-  flex-wrap: wrap;
-
-  @include breakpoint(phone) {
-    border-radius: $unit-2x;
-    height: auto;
-  }
-
-  .item {
-    background: var(--toggle-bg);
-    border: none;
-    border-radius: 18px;
-    color: var(--input-secondary);
-    flex-grow: 1;
-    font-size: $font-regular;
-    padding-top: $unit;
-    padding-bottom: $unit;
-
-    @include breakpoint(phone) {
-      border-radius: $card-corner;
-      padding-left: $unit-2x;
-      padding-right: $unit-2x;
-    }
-
-    &.ja {
-      padding-top: 6px;
-      padding-bottom: 10px;
-    }
-
-    &:hover {
-      cursor: pointer;
-    }
-
-    &:hover,
-    &[data-state='on'] {
-      background: $grey-80;
-      color: $grey-15;
-
-      &.fire {
-        background: var(--fire-bg);
-        color: var(--fire-text-bg);
-      }
-
-      &.water {
-        background: var(--water-bg);
-        color: var(--water-text-bg);
-      }
-
-      &.earth {
-        background: var(--earth-bg);
-        color: var(--earth-text-bg);
-      }
-
-      &.wind {
-        background: var(--wind-bg);
-        color: var(--wind-text-bg);
-      }
-
-      &.dark {
-        background: var(--dark-bg);
-        color: var(--dark-text-bg);
-      }
-
-      &.light {
-        background: var(--light-bg);
-        color: var(--light-text-bg);
-      }
-    }
-  }
-}
--- a/components/ElementToggle/index.tsx
+++ b/components/ElementToggle/index.tsx
@ -1,120 +0,0 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import { getCookie } from 'cookies-next'
-import { useTranslations } from 'next-intl'
-import classNames from 'classnames'
-
-import * as ToggleGroup from '@radix-ui/react-toggle-group'
-import styles from './index.module.scss'
-
-interface Props {
-  currentElement: number
-  sendValue: (value: number) => void
-}
-
-const ElementToggle = ({ currentElement, sendValue, ...props }: Props) => {
-  // Localization
-  const locale = (getCookie('NEXT_LOCALE') as string) || '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}
-      type="single"
-      value={`${element}`}
-      aria-label="Element"
-      onValueChange={handleElementChange}
-    >
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="0"
-        aria-label="null"
-      >
-        {t('elements.null')}
-      </ToggleGroup.Item>
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles.wind]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="1"
-        aria-label="wind"
-      >
-        {t('elements.wind')}
-      </ToggleGroup.Item>
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles.fire]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="2"
-        aria-label="fire"
-      >
-        {t('elements.fire')}
-      </ToggleGroup.Item>
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles.water]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="3"
-        aria-label="water"
-      >
-        {t('elements.water')}
-      </ToggleGroup.Item>
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles.earth]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="4"
-        aria-label="earth"
-      >
-        {t('elements.earth')}
-      </ToggleGroup.Item>
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles.dark]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="5"
-        aria-label="dark"
-      >
-        {t('elements.dark')}
-      </ToggleGroup.Item>
-      <ToggleGroup.Item
-        className={classNames({
-          [styles.item]: true,
-          [styles.light]: true,
-          [styles[`${locale}`]]: true,
-        })}
-        value="6"
-        aria-label="light"
-      >
-        {t('elements.light')}
-      </ToggleGroup.Item>
-    </ToggleGroup.Root>
-  )
-}
-
-export default ElementToggle
--- a/components/ErrorSection/index.module.scss
+++ b/components/ErrorSection/index.module.scss
@ -1,21 +0,0 @@
-.error {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: $unit;
-  margin: 0 auto;
-  max-width: 30vw;
-  justify-content: center;
-  height: 60vh;
-  text-align: center;
-
-  .code {
-    color: var(--text-secondary);
-    font-size: $font-tiny;
-    font-weight: $bold;
-  }
-
-  p {
-    margin-bottom: $unit-4x;
-  }
-}
--- a/components/ErrorSection/index.tsx
+++ b/components/ErrorSection/index.tsx
@ -1,48 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Link from 'next/link'
-import { useTranslations } from 'next-intl'
-
-import Button from '~components/common/Button'
-import { ResponseStatus } from '~types'
-
-import styles from './index.module.scss'
-
-interface Props {
-  status: ResponseStatus
-}
-
-const ErrorSection = ({ status }: Props) => {
-  // Import translations
-  const t = useTranslations('common')
-
-  const [statusText, setStatusText] = useState('')
-
-  useEffect(() => {
-    setStatusText(status.text.replaceAll(' ', '_').toLowerCase())
-  }, [status.text])
-
-  const errorBody = () => {
-    return (
-      <>
-        <div className={styles.code}>{status.code}</div>
-        <h1>{t(`errors.${statusText}.title`)}</h1>
-        <p>{t(`errors.${statusText}.description`)}</p>
-      </>
-    )
-  }
-
-  return (
-    <section className={styles.error}>
-      {errorBody()}
-      {[401, 404].includes(status.code) ? (
-        <Link href="/new">
-          <Button text={t('errors.not_found.button')} />
-        </Link>
-      ) : (
-        ''
-      )}
-    </section>
-  )
-}
-
-export default ErrorSection
--- a/components/Header/index.module.scss
+++ b/components/Header/index.module.scss
@ -1,75 +0,0 @@
-.bahamut {
-  $negative-margin: $unit * -2;
-
-  align-items: center;
-  background: #2b4683;
-  box-sizing: border-box;
-  display: flex;
-  gap: $unit;
-  justify-content: center;
-  text-align: center;
-  font-weight: $bold;
-  padding: $unit-2x;
-  margin-top: $negative-margin;
-  margin-left: $negative-margin;
-  margin-right: $negative-margin;
-  margin-bottom: $unit-2x;
-  width: 100vw;
-
-  p {
-    color: white;
-  }
-
-  svg {
-    width: 1.2em;
-    fill: white;
-  }
-}
-
-.header {
-  display: flex;
-  flex-direction: row;
-  margin-bottom: $unit;
-  justify-content: space-between;
-  width: 100%;
-
-  section {
-    display: flex;
-    gap: $unit;
-  }
-
-  img,
-  .placeholder {
-    $diameter: 32px;
-    border-radius: calc($diameter / 2);
-    height: $diameter;
-    width: $diameter;
-  }
-
-  .placeholder {
-    background: var(--placeholder-bg);
-  }
-
-  .dropdownWrapper {
-    display: inline-block;
-    padding-bottom: $unit;
-
-    &:hover .Menu,
-    .Menu.open {
-      display: block;
-    }
-
-    &:hover {
-      .Button {
-        background: var(--button-bg-hover);
-        color: var(--button-text-hover);
-      }
-    }
-  }
-
-  @include breakpoint(phone) {
-    .Button .Text {
-      display: none;
-    }
-  }
-}
--- a/components/Header/index.tsx
+++ b/components/Header/index.tsx
@ -1,406 +0,0 @@
-'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 classNames from 'classnames'
-import clonedeep from 'lodash.clonedeep'
-import Link from 'next/link'
-
-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 './index.module.scss'
-
-const Header = () => {
-  // Localization
-  const t = useTranslations('common')
-  const router = useRouter()
-
-  // Locale
-  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
-
-  // Subscribe to account state changes
-  const accountSnap = useSnapshot(accountState)
-
-  // State management
-  const [alertOpen, setAlertOpen] = useState(false)
-  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 root URL
-    router.push('/new')
-  }
-
-  // Methods: Rendering
-  const profileImage = () => {
-    const user = accountSnap.account.user
-    if (accountSnap.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('header.anonymous')}
-          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 = (
-    <>
-      {accountSnap.account.user && (
-        <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
-          }
-          onOpenChange={setSettingsModalOpen}
-        />
-      )}
-    </>
-  )
-
-  const loginModal = (
-    <LoginModal open={loginModalOpen} onOpenChange={setLoginModalOpen} />
-  )
-
-  const signupModal = (
-    <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}
-
-      <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 = (
-    <>
-      {accountSnap.account.user && (
-        <>
-          <DropdownMenuGroup>
-            <DropdownMenuLabel>
-              {`@${accountSnap.account.user.username}`}
-            </DropdownMenuLabel>
-            <DropdownMenuItem onClick={closeRightMenu}>
-              <Link
-                href={`/${accountSnap.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 = (
-    <>
-      {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 (
-    <>
-      {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>
-    </>
-  )
-}
-
-export default Header
--- a/components/HovercardHeader/index.module.scss
+++ b/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;
-      }
-    }
-  }
-}
--- a/components/HovercardHeader/index.tsx
+++ b/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
--- a/components/LanguageSwitch/index.module.scss
+++ b/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;
-  }
-}
--- a/components/LanguageSwitch/index.tsx
+++ b/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
--- a/components/Layout/index.tsx
+++ b/components/Layout/index.tsx
@ -1,85 +0,0 @@
-'use client'
-import { PropsWithChildren, useEffect, useState } from 'react'
-import { usePathname } from 'next/navigation'
-import { add, format } from 'date-fns'
-import { getCookie } from 'cookies-next'
-
-import { appState } from '~utils/appState'
-
-import TopHeader from '~components/Header'
-import UpdateToast from '~components/toasts/UpdateToast'
-
-interface Props {}
-
-const Layout = ({ children }: PropsWithChildren<Props>) => {
-  const pathname = usePathname()
-  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 })
-
-      if (now < validUntil && !cookie.seen) setUpdateToastOpen(true)
-    }
-  }, [])
-
-  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 updateToast = () => {
-    const path = pathname?.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 (
-    <>
-      {appState.version ? ServerAvailable() : ''}
-      <main>{children}</main>
-    </>
-  )
-}
-
-export default Layout
--- a/components/MentionList/index.module.scss
+++ b/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);
-}
--- a/components/MentionList/index.tsx
+++ b/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'
--- a/components/about/AboutHead/index.tsx
+++ b/components/about/AboutHead/index.tsx
@ -1,53 +0,0 @@
-import React, { useEffect, useState } from 'react'
-import Head from 'next/head'
-import { useTranslations } from 'next-intl'
-
-interface Props {
-  page: string
-}
-
-const AboutHead = ({ page }: Props) => {
-  // Import translations
-  const t = useTranslations('common')
-
-  // State
-  const [currentPage, setCurrentPage] = useState('about')
-
-  // Hooks
-  useEffect(() => {
-    setCurrentPage(page)
-  }, [page])
-
-  return (
-    <Head>
-      {/* HTML */}
-      <title>{t(`page.titles.${currentPage}`)}</title>
-      <meta
-        name="description"
-        content={t(`page.descriptions.${currentPage}`)}
-      />
-
-      <link rel="icon" type="image/x-icon" href="/images/favicon.png" />
-
-      {/* OpenGraph */}
-      <meta property="og:title" content={t(`page.titles.${currentPage}`)} />
-      <meta property="og:description" content={t('page.descriptions.about')} />
-      <meta
-        property="og:url"
-        content={`https://app.granblue.team/${currentPage}`}
-      />
-      <meta property="og:type" content="website" />
-
-      {/* Twitter */}
-      <meta name="twitter:card" content="summary_large_image" />
-      <meta property="twitter:domain" content="app.granblue.team" />
-      <meta name="twitter:title" content={t(`page.titles.${currentPage}`)} />
-      <meta
-        name="twitter:description"
-        content={t(`page.descriptions.${currentPage}`)}
-      />
-    </Head>
-  )
-}
-
-export default AboutHead
--- a/components/about/AboutPage/index.module.scss
+++ b/components/about/AboutPage/index.module.scss
@ -1,64 +0,0 @@
-.about {
-  $width: 520px;
-  padding-bottom: $unit-12x;
-
-  section {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    gap: $unit-2x;
-    z-index: 5;
-
-    .hero {
-      position: absolute;
-      width: 40vw;
-      height: 80vh;
-      right: -18vw;
-      top: $unit-4x * -1;
-      z-index: 1;
-      background-image: var(--hero-gradient), url('/images/about-hero.jpg');
-
-      @include breakpoint(tablet) {
-        right: -14vw;
-        width: 60vw;
-      }
-
-      @include breakpoint(phone) {
-        right: $unit-2x * -1;
-        width: 80vw;
-
-        &::before {
-          content: ' ';
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          background: var(--hero-gradient-overlay);
-          z-index: 3;
-        }
-      }
-    }
-
-    p {
-      font-size: $font-medium;
-      max-width: $width;
-      line-height: 1.35;
-      z-index: 2;
-    }
-
-    h2 {
-      font-weight: $bold;
-      font-size: $font-medium;
-      margin: 0;
-      max-width: $width;
-      z-index: 2;
-    }
-  }
-
-  .links {
-    display: grid;
-    gap: $unit;
-    margin: $unit-2x 0;
-  }
-}
--- a/components/about/AboutPage/index.tsx
+++ b/components/about/AboutPage/index.tsx
@ -1,150 +0,0 @@
-import React from 'react'
-import { useTranslations } from 'next-intl'
-import classNames from 'classnames'
-
-import LinkItem from '../LinkItem'
-
-import DiscordIcon from '~public/icons/discord.svg'
-import GithubIcon from '~public/icons/github.svg'
-
-import styles from './index.module.scss'
-
-interface Props {}
-
-const AboutPage: React.FC<Props> = (props: Props) => {
-  const common = useTranslations('common')
-  const about = useTranslations('about')
-
-  const classes = classNames(styles.about, 'PageContent')
-
-  return (
-    <div className={classes}>
-      <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>
-            )
-          })}
-        </h2>
-        <p>{about('about.explanation.0')}</p>
-        <p>{about('about.explanation.1')}</p>
-        <div className={styles.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 />}
-        />
-      </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>
-            )
-          })}
-        </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>
-            )
-          })}
-        </p>
-        <p>
-          {about.rich('about.credits.support', {
-            link: (chunks) => (
-              <a
-                href="https://game.granbluefantasy.jp/#guild/detail/1190185"
-                target="_blank"
-                rel="noreferrer"
-              >
-                {chunks}
-              </a>
-            )
-          })}
-        </p>
-      </section>
-
-      <section>
-        <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>
-      </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>
-            )
-          })}
-        </p>
-        <p>{about('about.license.explanation')}</p>
-      </section>
-      <section>
-        <h2>{about('about.copyright.title')}</h2>
-        <p>{about('about.copyright.explanation')}</p>
-      </section>
-    </div>
-  )
-}
-
-export default AboutPage
--- a/components/about/ChangelogUnit/index.module.scss
+++ b/components/about/ChangelogUnit/index.module.scss
@ -1,17 +0,0 @@
-.unit {
-  display: flex;
-  flex-direction: column;
-  gap: $unit;
-
-  img {
-    border-radius: $input-corner;
-    width: 100%;
-  }
-
-  h4 {
-    font-size: $font-small;
-    font-weight: $medium;
-    text-align: center;
-    line-height: 1.4;
-  }
-}
--- a/components/about/ChangelogUnit/index.tsx
+++ b/components/about/ChangelogUnit/index.tsx
@ -1,103 +0,0 @@
-'use client'
-import React, { useEffect, useState } from 'react'
-import { getCookie } from 'cookies-next'
-
-import styles from './index.module.scss'
-
-interface Props {
-  id: string
-  type: 'character' | 'summon' | 'weapon' | 'raid' | 'job'
-  image?: '01' | '02' | '03' | '04'
-}
-
-const defaultProps = {
-  active: false,
-  blended: false,
-  contained: false,
-  buttonSize: 'medium' as const,
-  image: '01',
-}
-
-const ChangelogUnit = ({ id, type, image }: Props) => {
-  // Locale
-  const locale = (getCookie('NEXT_LOCALE') as string) || 'en'
-
-  // State
-  const [item, setItem] = useState<Character | Weapon | Summon>()
-
-  // Hooks
-  useEffect(() => {
-    fetchItem()
-  }, [id, type])
-
-  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)
-    }
-  }
-
-  const imageUrl = () => {
-    let src = ''
-
-    switch (type) {
-      case 'character':
-        src = `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/character-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`
-        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`
-        break
-    }
-
-    return src
-  }
-
-  return (
-    <div className={styles.unit} key={id}>
-      <img alt={item ? item.name[locale] : ''} src={imageUrl()} />
-      <h4>{item ? item.name[locale] : ''}</h4>
-    </div>
-  )
-}
-
-ChangelogUnit.defaultProps = defaultProps
-
-export default ChangelogUnit
--- a/components/about/ContentUpdate/index.module.scss
+++ b/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;
-      }
-    }
-  }
-}
--- a/components/about/ContentUpdate/index.tsx
+++ b/components/about/ContentUpdate/index.tsx
@ -1,249 +0,0 @@
-import React from 'react'
-import { useTranslations } from 'next-intl'
-import classNames from 'classnames'
-
-import ChangelogUnit from '~components/about/ChangelogUnit'
-import styles from './index.module.scss'
-
-interface UpdateObject {
-  character?: string[]
-  summon?: string[]
-  weapon?: string[]
-}
-
-interface Props {
-  version: string
-  dateString: string
-  event: string
-  newItems?: UpdateObject
-  uncappedItems?: UpdateObject
-  transcendedItems?: UpdateObject
-  awakenedItems?: string[]
-  raidItems?: string[]
-  numNotes: number
-}
-const ContentUpdate = ({
-  version,
-  dateString,
-  event,
-  newItems,
-  uncappedItems,
-  transcendedItems,
-  awakenedItems,
-  raidItems,
-  numNotes,
-}: Props) => {
-  const updates = useTranslations('updates')
-
-  const date = new Date(dateString)
-
-  function newItemElements(key: 'character' | 'weapon' | 'summon') {
-    let elements: React.ReactNode[] = []
-    if (newItems && newItems[key]) {
-      const items = newItems[key]
-      elements = items
-        ? items.map((id, i) => {
-            return <ChangelogUnit id={id} type={key} key={`${key}-${i}`} />
-          })
-        : []
-    }
-
-    return elements
-  }
-
-  function newItemSection(key: 'character' | 'weapon' | 'summon') {
-    let section: React.ReactNode = ''
-
-    if (newItems && newItems[key]) {
-      const items = newItems[key]
-      section =
-        items && items.length > 0 ? (
-          <section className={styles[`${key}s`]}>
-            <h4>{updates(`labels.${key}s`)}</h4>
-            <div className={styles.items}>{newItemElements(key)}</div>
-          </section>
-        ) : (
-          ''
-        )
-    }
-
-    return section
-  }
-
-  function uncapItemElements(key: 'character' | 'weapon' | 'summon') {
-    let elements: React.ReactNode[] = []
-    if (uncappedItems && uncappedItems[key]) {
-      const items = uncappedItems[key]
-      elements = items
-        ? items.map((id) => {
-            return key === 'character' ? (
-              <ChangelogUnit id={id} type={key} key={id} image="03" />
-            ) : (
-              <ChangelogUnit id={id} type={key} key={id} />
-            )
-          })
-        : []
-    }
-    return elements
-  }
-
-  function uncapItemSection(key: 'character' | 'weapon' | 'summon') {
-    let section: React.ReactNode = ''
-
-    if (uncappedItems && uncappedItems[key]) {
-      const items = uncappedItems[key]
-      section =
-        items && items.length > 0 ? (
-          <section className={styles[`${key}s`]}>
-            <h4>{updates(`labels.uncaps.${key}s`)}</h4>
-            <div className={styles.items}>{uncapItemElements(key)}</div>
-          </section>
-        ) : (
-          ''
-        )
-    }
-
-    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}>
-        <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}>
-        {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}>
-          <section>
-            <h4>{updates('labels.updates')}</h4>
-            <ul className={styles.list}>
-              {[...Array(numNotes)].map((e, i) => (
-                <li key={`${version}-${i}`}>
-                  {updates(`versions.${version}.features.${i}`)}
-                </li>
-              ))}
-            </ul>
-          </section>
-        </div>
-      ) : (
-        ''
-      )}
-    </section>
-  )
-}
-
-ContentUpdate.defaultProps = {
-  numNotes: 0,
-}
-
-export default ContentUpdate
--- a/components/about/LinkItem/index.module.scss
+++ b/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;
-  }
-}
--- a/components/about/LinkItem/index.tsx
+++ b/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
--- a/components/about/RoadmapPage/index.module.scss
+++ b/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;
-      }
-    }
-  }
-}
--- a/Show more
+++ b/Show more