chore(docker): expose postgres port to host

Map container port 5432 to host port 50001 for external database access

.dockerignore

@@ -0,0 +1,5 @@
+.git
+**/node_modules
+**/dist
+**/*.log
+**/.env

.env.example

@@ -3,8 +3,31 @@ POSTGRES_USER=pokopia
 POSTGRES_PASSWORD=pokopia
 DATABASE_URL=postgres://pokopia:pokopia@localhost:5432/pokopia
 BACKEND_PORT=3001
-FRONTEND_ORIGIN=http://localhost:3000
+TRUST_PROXY=false
-APP_ORIGIN=http://localhost:3000
+FRONTEND_ORIGIN=http://localhost:20015
-VITE_API_BASE_URL=http://localhost:3001
+APP_ORIGIN=http://localhost:20015
+BACKEND_PUBLIC_ORIGIN=http://localhost:20016
+NUXT_PUBLIC_API_BASE_URL=http://localhost:20016
+NUXT_SERVER_API_BASE_URL=http://localhost:3001
+NUXT_PUBLIC_SITE_URL=https://pokopiawiki.tootaio.com
 RESEND_API_KEY=
 EMAIL_FROM="Pokopia Wiki <onboarding@resend.dev>"
+RESEND_DAILY_QUOTA_LIMIT=100
+RESEND_MONTHLY_QUOTA_LIMIT=3000
+RESEND_QUOTA_RESERVE=5
+RESEND_QUOTA_SNAPSHOT_TTL_MINUTES=10
+AI_MODERATION_API_KEY=
+
+# Local Docker debug defaults:
+# docker compose -f docker-compose.debug.yml up --build
+# NUXT_PUBLIC_API_BASE_URL=http://localhost:20016
+# NUXT_SERVER_API_BASE_URL=http://backend:3001
+# NUXT_PUBLIC_SITE_URL=http://localhost:20015
+
+# Cloudflared tunnel deployment example:
+# FRONTEND_ORIGIN=https://pokopiawiki.tootaio.com,http://localhost:20015
+# APP_ORIGIN=https://pokopiawiki.tootaio.com
+# BACKEND_PUBLIC_ORIGIN=https://api-pokopiawiki.tootaio.com
+# NUXT_PUBLIC_API_BASE_URL=https://api-pokopiawiki.tootaio.com
+# NUXT_SERVER_API_BASE_URL=http://backend:3001
+# NUXT_PUBLIC_SITE_URL=https://pokopiawiki.tootaio.com

.gitignore

@@ -1,6 +1,8 @@
 node_modules/
 .pnpm-store/
 dist/
+.nuxt/
+.output/
 .env
 .env.*
 !.env.example
@@ -9,3 +11,4 @@ coverage/
 .DS_Store
 .agents/
 skills-lock.json
+repomix-output.xml

.repomixignore

@@ -0,0 +1 @@
+data/**/*.csv

AGENTS.md

@@ -34,8 +34,8 @@ For documentation-only tasks, still follow the planning workflow, but do not run
 * Runtime baseline: Node.js >= 22.
 * Frontend:
 
+  * Nuxt SSR enabled (`ssr: true`)
   * Vue
-  * Vite
   * Vue Router
   * Vue I18n
   * Iconify
@@ -128,6 +128,15 @@ If a task grows beyond scope, STOP and ask.
 
 ---
 
+## Git Diff Hygiene
+
+* Do not inspect, summarize, or report diffs for `data/**/*.csv` by default.
+* In WSL, CSV files under `data` may appear changed even when their content has not meaningfully changed.
+* Ignore `data/**/*.csv` entries in `git status` / `git diff` unless the task explicitly involves CSV data, import/seed data, or the user asks to check them.
+* Only mention CSV files in final change summaries if you intentionally changed them or verified they are relevant to the current task.
+
+---
+
 ## UI Safety Rules (CRITICAL)
 
 User-facing UI must NEVER contain:

backend/Dockerfile

@@ -1,8 +1,17 @@
 FROM node:22-alpine
 
 WORKDIR /app
-COPY package.json ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
-RUN corepack enable && pnpm install
+COPY backend/package.json ./backend/package.json
-COPY . .
+COPY frontend/package.json ./frontend/package.json
+RUN corepack enable && corepack prepare pnpm@10.33.2 --activate && pnpm install --frozen-lockfile --filter @pokopia/backend...
+COPY backend ./backend
+COPY data ./data
+COPY system-wordings.ts ./system-wordings.ts
+RUN mkdir -p /app/uploads && chown -R node:node /app
+
+ENV NODE_ENV=production
+WORKDIR /app/backend
+USER node
 EXPOSE 3001
 CMD ["pnpm", "run", "start"]

backend/package.json

@@ -13,14 +13,17 @@
     "test": "node --test --import tsx tests/*.test.ts"
   },
   "dependencies": {
-    "@fastify/cors": "latest",
+    "@fastify/cors": "11.2.0",
-    "fastify": "latest",
+    "@fastify/multipart": "10.0.0",
-    "pg": "latest"
+    "@fastify/rate-limit": "10.3.0",
+    "@fastify/static": "9.1.3",
+    "fastify": "5.8.5",
+    "pg": "8.20.0"
   },
   "devDependencies": {
-    "@types/node": "latest",
+    "@types/node": "25.6.0",
-    "@types/pg": "latest",
+    "@types/pg": "8.20.0",
-    "tsx": "latest",
+    "tsx": "4.21.0",
-    "typescript": "latest"
+    "typescript": "6.0.3"
   }
 }

backend/src/systemWordingQueries.ts

@@ -0,0 +1,282 @@
+import { defaultLocale, systemWordingCatalogEntries, systemWordingFallback, type SystemWordingTree } from '../../system-wordings.ts';
+import { pool, query } from './db.ts';
+
+type SystemWordingSurface = 'frontend' | 'backend' | 'email';
+type SystemWordingValueRow = {
+  key: string;
+  module: string;
+  surface: SystemWordingSurface;
+  description: string;
+  placeholders: unknown;
+  value: string;
+  defaultValue: string;
+  missing: boolean;
+  updatedAt: Date | null;
+  updatedBy: { id: number; displayName: string } | null;
+};
+type ValidationError = Error & { statusCode: number };
+
+const localePattern = /^[a-z]{2}(-[A-Z]{2})?$/;
+const wordingKeyPattern = /^[A-Za-z][A-Za-z0-9]*(\.[A-Za-z][A-Za-z0-9]*)+$/;
+const placeholderPattern = /\{([A-Za-z0-9_]+)\}/g;
+const surfaces = new Set<SystemWordingSurface>(['frontend', 'backend', 'email']);
+
+function validationError(message: string): ValidationError {
+  const error = new Error(message) as ValidationError;
+  error.statusCode = 400;
+  return error;
+}
+
+function cleanLocale(value: unknown): string {
+  const locale = typeof value === 'string' ? value.trim() : '';
+  return localePattern.test(locale) ? locale : defaultLocale;
+}
+
+function requireLocale(value: unknown): string {
+  const locale = typeof value === 'string' ? value.trim() : '';
+  if (!localePattern.test(locale)) {
+    throw validationError('server.wordings.localeRequired');
+  }
+  return locale;
+}
+
+function requireWordingKey(value: unknown): string {
+  const key = typeof value === 'string' ? value.trim() : '';
+  if (!wordingKeyPattern.test(key)) {
+    throw validationError('server.wordings.keyNotFound');
+  }
+  return key;
+}
+
+function cleanSurface(value: unknown): SystemWordingSurface | '' {
+  const surface = typeof value === 'string' ? value.trim() : '';
+  return surfaces.has(surface as SystemWordingSurface) ? (surface as SystemWordingSurface) : '';
+}
+
+function collectPlaceholders(value: string): string[] {
+  return [...new Set([...value.matchAll(placeholderPattern)].map((match) => match[1]))].sort();
+}
+
+function placeholdersMatch(first: string[], second: string[]): boolean {
+  return first.length === second.length && first.every((placeholder, index) => placeholder === second[index]);
+}
+
+function interpolate(message: string, params: Record<string, string | number>): string {
+  return Object.entries(params).reduce(
+    (nextMessage, [key, value]) => nextMessage.replaceAll(`{${key}}`, String(value)),
+    message
+  );
+}
+
+function setNestedMessage(target: SystemWordingTree, key: string, value: string): void {
+  const parts = key.split('.');
+  let node = target;
+
+  for (const part of parts.slice(0, -1)) {
+    const current = node[part];
+    if (typeof current !== 'object' || current === null) {
+      node[part] = {};
+    }
+    node = node[part] as SystemWordingTree;
+  }
+
+  node[parts[parts.length - 1]] = value;
+}
+
+function nestedMessages(rows: Array<{ key: string; value: string }>): SystemWordingTree {
+  const messages: SystemWordingTree = {};
+  for (const row of rows) {
+    setNestedMessage(messages, row.key, row.value);
+  }
+  return messages;
+}
+
+function normalizePlaceholders(value: unknown): string[] {
+  return Array.isArray(value) ? value.map((item) => String(item)).sort() : [];
+}
+
+export async function syncSystemWordingCatalog(): Promise<void> {
+  const entries = systemWordingCatalogEntries();
+  const client = await pool.connect();
+
+  try {
+    await client.query('BEGIN');
+    for (const entry of entries) {
+      await client.query(
+        `
+          INSERT INTO system_wording_keys (key, module, surface, description, placeholders)
+          VALUES ($1, $2, $3, $4, $5::jsonb)
+          ON CONFLICT (key) DO UPDATE
+          SET module = EXCLUDED.module,
+              surface = EXCLUDED.surface,
+              description = EXCLUDED.description,
+              placeholders = EXCLUDED.placeholders,
+              updated_at = now()
+        `,
+        [entry.key, entry.module, entry.surface, entry.description, JSON.stringify(entry.placeholders)]
+      );
+
+      for (const [locale, value] of Object.entries(entry.values)) {
+        await client.query(
+          `
+            INSERT INTO system_wording_values (key, locale, value)
+            VALUES ($1, $2, $3)
+            ON CONFLICT (key, locale) DO NOTHING
+          `,
+          [entry.key, locale, value]
+        );
+      }
+    }
+    await client.query('COMMIT');
+  } catch (error) {
+    await client.query('ROLLBACK');
+    throw error;
+  } finally {
+    client.release();
+  }
+}
+
+export async function systemMessage(
+  locale: string,
+  key: string,
+  params: Record<string, string | number> = {}
+): Promise<string> {
+  const requestedLocale = cleanLocale(locale);
+
+  try {
+    const result = await pool.query<{ value: string }>(
+      `
+        SELECT COALESCE(requested.value, fallback.value) AS value
+        FROM system_wording_keys k
+        LEFT JOIN system_wording_values requested
+          ON requested.key = k.key
+          AND requested.locale = $2
+        LEFT JOIN system_wording_values fallback
+          ON fallback.key = k.key
+          AND fallback.locale = $3
+        WHERE k.key = $1
+      `,
+      [key, requestedLocale, defaultLocale]
+    );
+    const message = result.rows[0]?.value ?? systemWordingFallback(key, requestedLocale) ?? key;
+    return interpolate(message, params);
+  } catch {
+    return interpolate(systemWordingFallback(key, requestedLocale) ?? key, params);
+  }
+}
+
+export async function localizedStatusMessage(locale: string, message: string): Promise<string> {
+  return message.startsWith('server.') || message.startsWith('email.') ? systemMessage(locale, message) : message;
+}
+
+export async function getSystemWordings(locale: string) {
+  const requestedLocale = cleanLocale(locale);
+  const rows = await query<{ key: string; value: string; missing: boolean }>(
+    `
+      SELECT
+        k.key,
+        COALESCE(requested.value, fallback.value, '') AS value,
+        ($1 <> $2 AND requested.value IS NULL) AS missing
+      FROM system_wording_keys k
+      LEFT JOIN system_wording_values requested
+        ON requested.key = k.key
+        AND requested.locale = $1
+      LEFT JOIN system_wording_values fallback
+        ON fallback.key = k.key
+        AND fallback.locale = $2
+      WHERE k.enabled = true
+      ORDER BY k.key
+    `,
+    [requestedLocale, defaultLocale]
+  );
+
+  return {
+    locale: requestedLocale,
+    fallbackLocale: defaultLocale,
+    messages: nestedMessages(rows),
+    missingKeys: rows.filter((row) => row.missing).map((row) => row.key)
+  };
+}
+
+export async function listSystemWordingRows(filters: Record<string, unknown>) {
+  const locale = cleanLocale(filters.locale);
+  const module = typeof filters.module === 'string' ? filters.module.trim() : '';
+  const surface = cleanSurface(filters.surface);
+  const missingOnly = filters.missing === 'true' || filters.missing === true;
+
+  return query<SystemWordingValueRow>(
+    `
+      SELECT
+        k.key,
+        k.module,
+        k.surface,
+        k.description,
+        k.placeholders,
+        COALESCE(requested.value, '') AS value,
+        COALESCE(fallback.value, '') AS "defaultValue",
+        ($1 <> $2 AND requested.value IS NULL) AS missing,
+        requested.updated_at AS "updatedAt",
+        CASE
+          WHEN updated_user.id IS NULL THEN NULL
+          ELSE json_build_object('id', updated_user.id, 'displayName', updated_user.display_name)
+        END AS "updatedBy"
+      FROM system_wording_keys k
+      LEFT JOIN system_wording_values requested
+        ON requested.key = k.key
+        AND requested.locale = $1
+      LEFT JOIN system_wording_values fallback
+        ON fallback.key = k.key
+        AND fallback.locale = $2
+      LEFT JOIN users updated_user ON updated_user.id = requested.updated_by_user_id
+      WHERE k.enabled = true
+        AND ($3 = '' OR k.module = $3)
+        AND ($4 = '' OR k.surface = $4)
+        AND ($5 = false OR ($1 <> $2 AND requested.value IS NULL))
+      ORDER BY k.module, k.key
+    `,
+    [locale, defaultLocale, module, surface, missingOnly]
+  );
+}
+
+export async function updateSystemWordingValue(keyValue: string, payload: Record<string, unknown>, userId: number) {
+  const key = requireWordingKey(keyValue);
+  const locale = requireLocale(payload.locale);
+  const value = typeof payload.value === 'string' ? payload.value.trim() : '';
+
+  const keyRow = await pool.query<{ placeholders: unknown }>('SELECT placeholders FROM system_wording_keys WHERE key = $1', [key]);
+  const placeholders = normalizePlaceholders(keyRow.rows[0]?.placeholders);
+  if (keyRow.rowCount === 0) {
+    throw validationError('server.wordings.keyNotFound');
+  }
+
+  if (locale === defaultLocale && value === '') {
+    throw validationError('server.wordings.valueRequired');
+  }
+
+  if (value !== '' && !placeholdersMatch(placeholders, collectPlaceholders(value))) {
+    throw validationError('server.wordings.placeholderMismatch');
+  }
+
+  const result = await pool.query<{ code: string }>('SELECT code FROM languages WHERE code = $1', [locale]);
+  if (result.rowCount === 0) {
+    throw validationError('server.wordings.localeRequired');
+  }
+
+  if (value === '') {
+    await pool.query('DELETE FROM system_wording_values WHERE key = $1 AND locale = $2', [key, locale]);
+  } else {
+    await pool.query(
+      `
+        INSERT INTO system_wording_values (key, locale, value, created_by_user_id, updated_by_user_id)
+        VALUES ($1, $2, $3, $4, $4)
+        ON CONFLICT (key, locale) DO UPDATE
+        SET value = EXCLUDED.value,
+            updated_by_user_id = EXCLUDED.updated_by_user_id,
+            updated_at = now()
+      `,
+      [key, locale, value, userId]
+    );
+  }
+
+  return listSystemWordingRows({ locale });
+}

backend/src/threadsRealtime.ts

@@ -0,0 +1,442 @@
+import type { FastifyBaseLogger } from 'fastify';
+import { Buffer } from 'node:buffer';
+import { createHash, randomBytes } from 'node:crypto';
+import type { Server } from 'node:http';
+import type { Duplex } from 'node:stream';
+import { pool, query, queryOne } from './db.ts';
+import type { ThreadMessage, ThreadReactionCounts, ThreadReactionType, ThreadSummary } from './queries.ts';
+
+export type ThreadWsMessage =
+  | { type: 'threads.connected'; followedUnreadCount: number }
+  | { type: 'thread.message.created'; threadId: number; message: ThreadMessage; thread: ThreadSummary }
+  | { type: 'thread.message.moderation'; threadId: number; messageId: number; message: ThreadMessage | null }
+  | {
+      type: 'thread.reactions.updated';
+      target: 'thread' | 'message';
+      threadId: number;
+      messageId: number | null;
+      reactionCounts: ThreadReactionCounts;
+      myReactions: ThreadReactionType[];
+    }
+  | { type: 'thread.read.updated'; threadId: number; unread: boolean; unreadCount: number };
+
+const websocketGuid = '258EAFA5-E914-47DA-95CA-C5AB0DC85B11';
+const websocketTicketMinutes = 2;
+const threadClients = new Map<number, Set<Duplex>>();
+const clientUsers = new WeakMap<Duplex, number>();
+
+function hashToken(token: string): string {
+  return createHash('sha256').update(token).digest('hex');
+}
+
+export async function createThreadWebSocketTicket(userId: number): Promise<{ ticket: string; expiresAt: Date }> {
+  const ticket = randomBytes(32).toString('base64url');
+  const expiresAt = new Date(Date.now() + websocketTicketMinutes * 60_000);
+  await pool.query(
+    `
+      INSERT INTO thread_ws_tickets (ticket_hash, user_id, expires_at)
+      VALUES ($1, $2, $3)
+    `,
+    [hashToken(ticket), userId, expiresAt]
+  );
+  await pool.query('DELETE FROM thread_ws_tickets WHERE expires_at < now()');
+  return { ticket, expiresAt };
+}
+
+async function consumeThreadWebSocketTicket(ticket: string): Promise<number | null> {
+  if (!ticket) {
+    return null;
+  }
+
+  const row = await queryOne<{ userId: number }>(
+    `
+      DELETE FROM thread_ws_tickets
+      WHERE ticket_hash = $1
+        AND expires_at > now()
+      RETURNING user_id AS "userId"
+    `,
+    [hashToken(ticket)]
+  );
+  return row?.userId ?? null;
+}
+
+async function followedUnreadCount(userId: number): Promise<number> {
+  const row = await queryOne<{ count: number }>(
+    `
+      SELECT COUNT(*)::integer AS count
+      FROM thread_follows tf
+      JOIN threads t ON t.id = tf.thread_id
+      LEFT JOIN thread_reads tr ON tr.thread_id = t.id AND tr.user_id = tf.user_id
+      WHERE tf.user_id = $1
+        AND t.deleted_at IS NULL
+        AND t.last_message_id IS NOT NULL
+        AND (
+          tr.last_read_message_id IS NULL
+          OR t.last_message_id > tr.last_read_message_id
+        )
+    `,
+    [userId]
+  );
+  return row?.count ?? 0;
+}
+
+function wsFrame(data: Buffer, opcode = 0x1): Buffer {
+  const length = data.byteLength;
+  if (length < 126) {
+    return Buffer.concat([Buffer.from([0x80 | opcode, length]), data]);
+  }
+
+  if (length < 65536) {
+    const header = Buffer.alloc(4);
+    header[0] = 0x80 | opcode;
+    header[1] = 126;
+    header.writeUInt16BE(length, 2);
+    return Buffer.concat([header, data]);
+  }
+
+  const header = Buffer.alloc(10);
+  header[0] = 0x80 | opcode;
+  header[1] = 127;
+  header.writeBigUInt64BE(BigInt(length), 2);
+  return Buffer.concat([header, data]);
+}
+
+function sendWsJson(socket: Duplex, message: ThreadWsMessage): void {
+  if (!socket.destroyed) {
+    socket.write(wsFrame(Buffer.from(JSON.stringify(message), 'utf8')));
+  }
+}
+
+function websocketPayload(buffer: Buffer): { opcode: number; payload: Buffer } | null {
+  if (buffer.byteLength < 2) {
+    return null;
+  }
+
+  const opcode = buffer[0] & 0x0f;
+  const masked = (buffer[1] & 0x80) !== 0;
+  let length = buffer[1] & 0x7f;
+  let offset = 2;
+
+  if (length === 126) {
+    if (buffer.byteLength < offset + 2) return null;
+    length = buffer.readUInt16BE(offset);
+    offset += 2;
+  } else if (length === 127) {
+    if (buffer.byteLength < offset + 8) return null;
+    const longLength = buffer.readBigUInt64BE(offset);
+    if (longLength > BigInt(Number.MAX_SAFE_INTEGER)) return null;
+    length = Number(longLength);
+    offset += 8;
+  }
+
+  let mask: Buffer | null = null;
+  if (masked) {
+    if (buffer.byteLength < offset + 4) return null;
+    mask = buffer.subarray(offset, offset + 4);
+    offset += 4;
+  }
+
+  if (buffer.byteLength < offset + length) {
+    return null;
+  }
+
+  const payload = Buffer.from(buffer.subarray(offset, offset + length));
+  if (mask) {
+    for (let index = 0; index < payload.byteLength; index += 1) {
+      payload[index] ^= mask[index % 4];
+    }
+  }
+
+  return { opcode, payload };
+}
+
+function closeSocket(socket: Duplex, statusCode = 1000): void {
+  if (socket.destroyed) {
+    return;
+  }
+
+  const payload = Buffer.alloc(2);
+  payload.writeUInt16BE(statusCode, 0);
+  socket.end(wsFrame(payload, 0x8));
+}
+
+function rejectUpgrade(socket: Duplex, statusCode: number, statusText: string): void {
+  socket.write(`HTTP/1.1 ${statusCode} ${statusText}\r\nConnection: close\r\n\r\n`);
+  socket.destroy();
+}
+
+function addThreadClient(userId: number, socket: Duplex): void {
+  clientUsers.set(socket, userId);
+  let clients = threadClients.get(userId);
+  if (!clients) {
+    clients = new Set();
+    threadClients.set(userId, clients);
+  }
+  clients.add(socket);
+  socket.on('close', () => {
+    clients?.delete(socket);
+    if (clients?.size === 0) {
+      threadClients.delete(userId);
+    }
+  });
+}
+
+async function recipientUserIds(threadId: number): Promise<number[]> {
+  const rows = await query<{ userId: number }>(
+    `
+      SELECT DISTINCT user_id AS "userId"
+      FROM thread_follows
+      WHERE thread_id = $1
+    `,
+    [threadId]
+  );
+  return rows.map((row) => row.userId);
+}
+
+function connectedUserIds(): number[] {
+  return [...threadClients.keys()];
+}
+
+async function publishToUsers(userIds: number[], message: ThreadWsMessage): Promise<void> {
+  for (const userId of userIds) {
+    const clients = threadClients.get(userId);
+    if (!clients) {
+      continue;
+    }
+    for (const socket of clients) {
+      sendWsJson(socket, message);
+    }
+  }
+}
+
+export async function publishThreadMessageCreated(thread: ThreadSummary, message: ThreadMessage): Promise<void> {
+  const users = [...new Set([...(await recipientUserIds(thread.id)), ...connectedUserIds()])];
+  if (message.author?.id && !users.includes(message.author.id)) {
+    users.push(message.author.id);
+  }
+  await publishToUsers(users, {
+    type: 'thread.message.created',
+    threadId: thread.id,
+    message,
+    thread
+  });
+}
+
+export async function applyApprovedThreadMessage(messageId: number): Promise<void> {
+  const row = await queryOne<{
+    threadId: number;
+    channelId: number;
+    title: string;
+    languageCode: string;
+    locked: boolean;
+    messageCount: number;
+    lastActiveAt: Date;
+    threadCreatedAt: Date;
+    threadAuthor: { id: number; displayName: string } | null;
+    messageBody: string;
+    moderationStatus: ThreadMessage['moderationStatus'];
+    moderationLanguageCode: string | null;
+    moderationReason: string | null;
+    messageCreatedAt: Date;
+    messageUpdatedAt: Date;
+    messageAuthor: { id: number; displayName: string } | null;
+  }>(
+    `
+      WITH updated_thread AS (
+        UPDATE threads t
+        SET last_message_id = tm.id,
+            message_count = (
+              SELECT COUNT(*)::integer
+              FROM thread_messages visible_message
+              WHERE visible_message.thread_id = t.id
+                AND visible_message.deleted_at IS NULL
+                AND visible_message.ai_moderation_status = 'approved'
+            ),
+            last_active_at = GREATEST(t.last_active_at, tm.created_at),
+            updated_at = now()
+        FROM thread_messages tm
+        WHERE tm.id = $1
+          AND tm.thread_id = t.id
+          AND tm.deleted_at IS NULL
+          AND tm.ai_moderation_status = 'approved'
+        RETURNING
+          t.id,
+          t.channel_id,
+          t.title,
+          t.language_code,
+          t.locked,
+          t.message_count,
+          t.last_active_at,
+          t.created_at,
+          t.created_by_user_id
+      )
+      SELECT
+        ut.id AS "threadId",
+        ut.channel_id AS "channelId",
+        ut.title,
+        ut.language_code AS "languageCode",
+        ut.locked,
+        ut.message_count AS "messageCount",
+        ut.last_active_at AS "lastActiveAt",
+        ut.created_at AS "threadCreatedAt",
+        CASE WHEN thread_user.id IS NULL THEN NULL ELSE json_build_object('id', thread_user.id, 'displayName', thread_user.display_name) END AS "threadAuthor",
+        tm.body AS "messageBody",
+        tm.ai_moderation_status AS "moderationStatus",
+        tm.ai_moderation_language_code AS "moderationLanguageCode",
+        tm.ai_moderation_reason AS "moderationReason",
+        tm.created_at AS "messageCreatedAt",
+        tm.updated_at AS "messageUpdatedAt",
+        CASE WHEN message_user.id IS NULL THEN NULL ELSE json_build_object('id', message_user.id, 'displayName', message_user.display_name) END AS "messageAuthor"
+      FROM updated_thread ut
+      JOIN thread_messages tm ON tm.id = $1
+      LEFT JOIN users thread_user ON thread_user.id = ut.created_by_user_id
+      LEFT JOIN users message_user ON message_user.id = tm.created_by_user_id
+    `,
+    [messageId]
+  );
+
+  if (!row) {
+    return;
+  }
+
+  await publishThreadMessageCreated(
+    {
+      id: row.threadId,
+      channelId: row.channelId,
+      title: row.title,
+      languageCode: row.languageCode,
+      tags: [],
+      locked: row.locked,
+      messageCount: row.messageCount,
+      lastActiveAt: row.lastActiveAt,
+      createdAt: row.threadCreatedAt,
+      author: row.threadAuthor,
+      reactionCounts: {},
+      myReactions: [],
+      followed: true,
+      unread: true
+    },
+    {
+      id: messageId,
+      threadId: row.threadId,
+      body: row.messageBody,
+      moderationStatus: row.moderationStatus,
+      moderationLanguageCode: row.moderationLanguageCode,
+      moderationReason: row.moderationReason,
+      createdAt: row.messageCreatedAt,
+      updatedAt: row.messageUpdatedAt,
+      author: row.messageAuthor,
+      reactionCounts: {},
+      myReactions: []
+    }
+  );
+}
+
+export async function publishThreadMessageModeration(
+  threadId: number,
+  messageId: number,
+  message: ThreadMessage | null
+): Promise<void> {
+  const publicUsers = new Set([...(await recipientUserIds(threadId)), ...connectedUserIds()]);
+  if (message?.author?.id) {
+    publicUsers.delete(message.author.id);
+  }
+
+  await publishToUsers([...publicUsers], {
+    type: 'thread.message.moderation',
+    threadId,
+    messageId,
+    message: null
+  });
+
+  if (!message?.author?.id) {
+    return;
+  }
+
+  await publishToUsers([message.author.id], {
+    type: 'thread.message.moderation',
+    threadId,
+    messageId,
+    message
+  });
+}
+
+export async function publishThreadReactionUpdated(
+  userId: number,
+  message: Extract<ThreadWsMessage, { type: 'thread.reactions.updated' }>
+): Promise<void> {
+  const users = await recipientUserIds(message.threadId);
+  for (const connectedUserId of connectedUserIds()) {
+    if (!users.includes(connectedUserId)) {
+      users.push(connectedUserId);
+    }
+  }
+  if (!users.includes(userId)) {
+    users.push(userId);
+  }
+  await publishToUsers(users, message);
+}
+
+export async function publishThreadReadUpdated(userId: number, threadId: number, unread: boolean, unreadCount: number): Promise<void> {
+  await publishToUsers([userId], { type: 'thread.read.updated', threadId, unread, unreadCount });
+}
+
+export function setupThreadWebSocketServer(server: Server, logger: FastifyBaseLogger): void {
+  server.on('upgrade', async (request, socket) => {
+    const url = new URL(request.url ?? '/', 'http://localhost');
+    if (url.pathname !== '/api/threads/ws') {
+      return;
+    }
+
+    const key = request.headers['sec-websocket-key'];
+    if (request.method !== 'GET' || typeof key !== 'string' || key.trim() === '') {
+      rejectUpgrade(socket, 400, 'Bad Request');
+      return;
+    }
+
+    try {
+      const ticket = url.searchParams.get('ticket') ?? '';
+      const userId = await consumeThreadWebSocketTicket(ticket);
+      if (!userId) {
+        rejectUpgrade(socket, 401, 'Unauthorized');
+        return;
+      }
+
+      const accept = createHash('sha1').update(`${key}${websocketGuid}`).digest('base64');
+      socket.write(
+        [
+          'HTTP/1.1 101 Switching Protocols',
+          'Upgrade: websocket',
+          'Connection: Upgrade',
+          `Sec-WebSocket-Accept: ${accept}`,
+          '\r\n'
+        ].join('\r\n')
+      );
+
+      addThreadClient(userId, socket);
+      sendWsJson(socket, {
+        type: 'threads.connected',
+        followedUnreadCount: await followedUnreadCount(userId)
+      });
+
+      socket.on('data', (buffer: Buffer) => {
+        const frame = websocketPayload(buffer);
+        if (!frame) {
+          return;
+        }
+
+        if (frame.opcode === 0x8) {
+          closeSocket(socket);
+        } else if (frame.opcode === 0x9) {
+          socket.write(wsFrame(frame.payload, 0x0a));
+        }
+      });
+      socket.on('error', () => {
+        socket.destroy();
+      });
+    } catch (error) {
+      logger.warn({ err: error }, 'Thread WebSocket upgrade failed');
+      rejectUpgrade(socket, 500, 'Internal Server Error');
+    }
+  });
+}

backend/src/uploads.ts

@@ -0,0 +1,265 @@
+import { mkdir, stat, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import type { MultipartFile } from '@fastify/multipart';
+import type { PoolClient } from 'pg';
+import type { AuthUser } from './auth.ts';
+import { query, queryOne } from './db.ts';
+
+export type UploadEntityType = 'pokemon' | 'items' | 'habitats' | 'ancient-artifacts';
+
+export type EntityImageUpload = {
+  id: number;
+  path: string;
+  url: string;
+  uploadedAt: Date;
+  uploadedBy: { id: number; displayName: string } | null;
+};
+
+type UploadRow = {
+  id: number;
+  path: string;
+  uploadedAt: Date;
+  uploadedBy: { id: number; displayName: string } | null;
+};
+
+type MultipartField = {
+  value?: unknown;
+};
+
+const uploadEntityTypes = new Set<UploadEntityType>(['pokemon', 'items', 'habitats', 'ancient-artifacts']);
+const imageMimeTypes = new Map([
+  ['image/png', '.png'],
+  ['image/jpeg', '.jpg'],
+  ['image/webp', '.webp'],
+  ['image/gif', '.gif']
+]);
+
+const backendPublicOrigin = process.env.BACKEND_PUBLIC_ORIGIN ?? `http://localhost:${process.env.BACKEND_PORT ?? 3001}`;
+export const imageUploadMaxBytes = 3 * 1024 * 1024;
+export const uploadRoot = path.resolve(process.env.UPLOAD_DIR ?? path.join(process.cwd(), 'uploads'));
+export const uploadPublicBaseUrl = (process.env.UPLOAD_PUBLIC_BASE_URL ?? `${backendPublicOrigin}/uploads/`).replace(/\/?$/, '/');
+
+export function isUploadEntityType(value: string): value is UploadEntityType {
+  return uploadEntityTypes.has(value as UploadEntityType);
+}
+
+export function isUploadImagePath(value: string | null | undefined): boolean {
+  const cleanPath = value?.trim() ?? '';
+  if (cleanPath === '' || cleanPath.startsWith('/') || cleanPath.includes('..')) {
+    return false;
+  }
+
+  const [entityType] = cleanPath.split('/');
+  return isUploadEntityType(entityType);
+}
+
+export function uploadImageUrl(relativePath: string): string {
+  return `${uploadPublicBaseUrl}${relativePath.split('/').map(encodeURIComponent).join('/')}`;
+}
+
+function validationError(message: string): Error & { statusCode: number } {
+  const error = new Error(message) as Error & { statusCode: number };
+  error.statusCode = 400;
+  return error;
+}
+
+function fieldValue(fields: Record<string, unknown> | undefined, fieldName: string): string {
+  const field = fields?.[fieldName];
+  if (field && typeof field === 'object' && 'value' in field) {
+    const value = (field as MultipartField).value;
+    return typeof value === 'string' ? value.trim() : '';
+  }
+  return '';
+}
+
+function optionalPositiveInteger(value: string): number | null {
+  const numberValue = Number(value);
+  return Number.isInteger(numberValue) && numberValue > 0 ? numberValue : null;
+}
+
+function safePathSegment(value: string): string {
+  const segment = value
+    .normalize('NFKC')
+    .trim()
+    .replace(/[\\/:*?"<>|#%?&\u0000-\u001F]+/g, '-')
+    .replace(/\s+/g, ' ')
+    .replace(/^\.+$/, '')
+    .slice(0, 80);
+
+  return segment || 'record';
+}
+
+function timestampForPath(date = new Date()): string {
+  const pad = (value: number) => String(value).padStart(2, '0');
+  return [
+    date.getUTCFullYear(),
+    pad(date.getUTCMonth() + 1),
+    pad(date.getUTCDate()),
+    pad(date.getUTCHours()),
+    pad(date.getUTCMinutes()),
+    pad(date.getUTCSeconds())
+  ].join('');
+}
+
+async function fileExists(filePath: string): Promise<boolean> {
+  try {
+    await stat(filePath);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+async function uniqueRelativePath(entityType: UploadEntityType, entityName: string, extension: string): Promise<string> {
+  const entitySegment = safePathSegment(entityName);
+  const dir = path.join(uploadRoot, entityType, entitySegment);
+  const timestamp = timestampForPath();
+
+  await mkdir(dir, { recursive: true });
+
+  for (let index = 1; index <= 99; index += 1) {
+    const suffix = index === 1 ? '' : `-${index}`;
+    const fileName = `${timestamp}${suffix}${extension}`;
+    const candidate = path.join(dir, fileName);
+    if (!(await fileExists(candidate))) {
+      return `${entityType}/${entitySegment}/${fileName}`;
+    }
+  }
+
+  throw validationError('server.validation.imageUploadFailed');
+}
+
+function hasValidImageSignature(mimeType: string, buffer: Buffer): boolean {
+  if (mimeType === 'image/png') {
+    return buffer.length > 8 && buffer[0] === 0x89 && buffer.subarray(1, 4).toString('ascii') === 'PNG';
+  }
+
+  if (mimeType === 'image/jpeg') {
+    return buffer.length > 3 && buffer[0] === 0xff && buffer[1] === 0xd8 && buffer[2] === 0xff;
+  }
+
+  if (mimeType === 'image/webp') {
+    return buffer.length > 12 && buffer.subarray(0, 4).toString('ascii') === 'RIFF' && buffer.subarray(8, 12).toString('ascii') === 'WEBP';
+  }
+
+  if (mimeType === 'image/gif') {
+    const signature = buffer.subarray(0, 6).toString('ascii');
+    return signature === 'GIF87a' || signature === 'GIF89a';
+  }
+
+  return false;
+}
+
+function mapUploadRow(row: UploadRow): EntityImageUpload {
+  return {
+    id: row.id,
+    path: row.path,
+    uploadedAt: row.uploadedAt,
+    uploadedBy: row.uploadedBy,
+    url: uploadImageUrl(row.path)
+  };
+}
+
+export async function saveEntityImageUpload(
+  entityType: UploadEntityType,
+  file: MultipartFile | undefined,
+  user: AuthUser
+): Promise<EntityImageUpload> {
+  if (!file) {
+    throw validationError('server.validation.imageUploadRequired');
+  }
+
+  const extension = imageMimeTypes.get(file.mimetype);
+  if (!extension) {
+    throw validationError('server.validation.imageUploadTypeInvalid');
+  }
+
+  const entityName = fieldValue(file.fields as Record<string, unknown>, 'entityName');
+  if (entityName === '') {
+    throw validationError('server.validation.imageUploadEntityNameRequired');
+  }
+
+  const buffer = await file.toBuffer();
+  if (buffer.length === 0 || buffer.length > imageUploadMaxBytes || !hasValidImageSignature(file.mimetype, buffer)) {
+    throw validationError('server.validation.imageUploadContentInvalid');
+  }
+
+  const entityId = optionalPositiveInteger(fieldValue(file.fields as Record<string, unknown>, 'entityId'));
+  const relativePath = await uniqueRelativePath(entityType, entityName, extension);
+  const absolutePath = path.join(uploadRoot, relativePath);
+  await writeFile(absolutePath, buffer, { flag: 'wx' });
+
+  const row = await queryOne<UploadRow>(
+    `
+      INSERT INTO entity_image_uploads (
+        entity_type,
+        entity_id,
+        entity_name,
+        path,
+        original_filename,
+        mime_type,
+        byte_size,
+        created_by_user_id
+      )
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
+      RETURNING
+        id,
+        path,
+        created_at AS "uploadedAt",
+        json_build_object('id', $8::integer, 'displayName', $9::text) AS "uploadedBy"
+    `,
+    [entityType, entityId, entityName.trim(), relativePath, file.filename, file.mimetype, buffer.length, user.id, user.displayName]
+  );
+
+  if (!row) {
+    throw validationError('server.validation.imageUploadFailed');
+  }
+
+  return mapUploadRow(row);
+}
+
+export async function listEntityImageUploads(entityType: UploadEntityType, entityId: number): Promise<EntityImageUpload[]> {
+  const rows = await query<UploadRow>(
+    `
+      SELECT
+        upload.id,
+        upload.path,
+        upload.created_at AS "uploadedAt",
+        CASE
+          WHEN u.id IS NULL THEN NULL
+          ELSE json_build_object('id', u.id, 'displayName', u.display_name)
+        END AS "uploadedBy"
+      FROM entity_image_uploads upload
+      LEFT JOIN users u ON u.id = upload.created_by_user_id
+      WHERE upload.entity_type = $1
+        AND upload.entity_id = $2
+      ORDER BY upload.created_at DESC, upload.id DESC
+    `,
+    [entityType, entityId]
+  );
+
+  return rows.map(mapUploadRow);
+}
+
+export async function linkEntityImageUpload(
+  client: PoolClient,
+  entityType: UploadEntityType,
+  entityId: number,
+  imagePath: string | null | undefined,
+  entityName: string
+): Promise<void> {
+  if (!isUploadImagePath(imagePath)) {
+    return;
+  }
+
+  await client.query(
+    `
+      UPDATE entity_image_uploads
+      SET entity_id = $1,
+          entity_name = $2
+      WHERE entity_type = $3
+        AND path = $4
+    `,
+    [entityId, entityName.trim(), entityType, imagePath]
+  );
+}

backend/tsconfig.json

@@ -10,5 +10,5 @@
     "forceConsistentCasingInFileNames": true,
     "types": ["node"]
   },
-  "include": ["src/**/*.ts", "tests/**/*.ts"]
+  "include": ["src/**/*.ts", "tests/**/*.ts", "../system-wordings.ts"]
 }

data/localized_type_name.csv

@@ -0,0 +1,22 @@
+"type_id","identifier","ja_hrkt","ja_roma","ko","zh_hant","fr","de","es","it","en","ja","zh_hans"
+"1","normal","ノーマル",,"노말","一般","Normal","Normal","Normal","Normale","Normal","ノーマル","一般"
+"2","fighting","かくとう",,"격투","格鬥","Combat","Kampf","Lucha","Lotta","Fighting","かくとう","格斗"
+"3","flying","ひこう",,"비행","飛行","Vol","Flug","Volador","Volante","Flying","ひこう","飞行"
+"4","poison","どく",,"독","毒","Poison","Gift","Veneno","Veleno","Poison","どく","毒"
+"5","ground","じめん",,"땅","地面","Sol","Boden","Tierra","Terra","Ground","じめん","地面"
+"6","rock","いわ",,"바위","岩石","Roche","Gestein","Roca","Roccia","Rock","いわ","岩石"
+"7","bug","むし",,"벌레","蟲","Insecte","Käfer","Bicho","Coleottero","Bug","むし","虫"
+"8","ghost","ゴースト",,"고스트","幽靈","Spectre","Geist","Fantasma","Spettro","Ghost","ゴースト","幽灵"
+"9","steel","はがね",,"강철","鋼","Acier","Stahl","Acero","Acciaio","Steel","はがね","钢"
+"10","fire","ほのお",,"불꽃","火","Feu","Feuer","Fuego","Fuoco","Fire","ほのお","火"
+"11","water","みず",,"물","水","Eau","Wasser","Agua","Acqua","Water","みず","水"
+"12","grass","くさ",,"풀","草","Plante","Pflanze","Planta","Erba","Grass","くさ","草"
+"13","electric","でんき",,"전기","電","Électrik","Elektro","Eléctrico","Elettro","Electric","でんき","电"
+"14","psychic","エスパー",,"에스퍼","超能力","Psy","Psycho","Psíquico","Psico","Psychic","エスパー","超能力"
+"15","ice","こおり",,"얼음","冰","Glace","Eis","Hielo","Ghiaccio","Ice","こおり","冰"
+"16","dragon","ドラゴン",,"드래곤","龍","Dragon","Drache","Dragón","Drago","Dragon","ドラゴン","龙"
+"17","dark","あく",,"악","惡","Ténèbres","Unlicht","Siniestro","Buio","Dark","あく","恶"
+"18","fairy","フェアリー",,"페어리","妖精","Fée","Fee","Hada","Folletto","Fairy","フェアリー","妖精"
+"19","stellar","ステラ"," Stella"," 스텔라","星晶","Stellaire","Stellar","Astral","Astrale","Stellar","ステラ","星晶"
+"10001","unknown","？？？",,"???","???","???","???","???","???","???","？？？","???"
+"10002","shadow","ダーク",,"다크","暗","Obscur","Crypto",,"Ombra","Shadow","ダーク","暗"

docker-compose.debug.yml

@@ -0,0 +1,108 @@
+services:
+  postgres:
+    image: postgres:18-alpine
+    environment:
+      POSTGRES_DB: pokopia
+      POSTGRES_USER: pokopia
+      POSTGRES_PASSWORD: pokopia
+    volumes:
+      - postgres18_data:/var/lib/postgresql
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U pokopia -d pokopia"]
+      interval: 5s
+      timeout: 3s
+      retries: 10
+
+  deps:
+    image: node:22-alpine
+    working_dir: /app
+    environment:
+      PNPM_HOME: /pnpm
+    volumes:
+      - .:/app
+      - root_node_modules:/app/node_modules
+      - backend_node_modules:/app/backend/node_modules
+      - frontend_node_modules:/app/frontend/node_modules
+      - pnpm_store:/pnpm/store
+    command: >
+      sh -lc "corepack enable &&
+      corepack prepare pnpm@10.33.2 --activate &&
+      pnpm config set store-dir /pnpm/store &&
+      pnpm install --frozen-lockfile"
+
+  backend:
+    image: node:22-alpine
+    working_dir: /app
+    environment:
+      NODE_ENV: development
+      PNPM_HOME: /pnpm
+      DATABASE_URL: postgres://pokopia:pokopia@postgres:5432/pokopia
+      BACKEND_PORT: 3001
+      TRUST_PROXY: ${TRUST_PROXY:-false}
+      FRONTEND_ORIGIN: ${FRONTEND_ORIGIN:-http://localhost:20015}
+      APP_ORIGIN: ${APP_ORIGIN:-http://localhost:20015}
+      UPLOAD_DIR: /app/uploads
+      BACKEND_PUBLIC_ORIGIN: ${BACKEND_PUBLIC_ORIGIN:-http://localhost:20016}
+      RESEND_API_KEY: ${RESEND_API_KEY:-}
+      EMAIL_FROM: "${EMAIL_FROM:-Pokopia Wiki <onboarding@resend.dev>}"
+      RESEND_DAILY_QUOTA_LIMIT: ${RESEND_DAILY_QUOTA_LIMIT:-100}
+      RESEND_MONTHLY_QUOTA_LIMIT: ${RESEND_MONTHLY_QUOTA_LIMIT:-3000}
+      RESEND_QUOTA_RESERVE: ${RESEND_QUOTA_RESERVE:-5}
+      RESEND_QUOTA_SNAPSHOT_TTL_MINUTES: ${RESEND_QUOTA_SNAPSHOT_TTL_MINUTES:-10}
+      AI_MODERATION_API_KEY: ${AI_MODERATION_API_KEY:-}
+    ports:
+      - "20016:3001"
+    volumes:
+      - .:/app
+      - root_node_modules:/app/node_modules
+      - backend_node_modules:/app/backend/node_modules
+      - frontend_node_modules:/app/frontend/node_modules
+      - pnpm_store:/pnpm/store
+      - backend_uploads:/app/uploads
+    command: >
+      sh -lc "corepack enable &&
+      corepack prepare pnpm@10.33.2 --activate &&
+      pnpm --filter @pokopia/backend dev"
+    depends_on:
+      deps:
+        condition: service_completed_successfully
+      postgres:
+        condition: service_healthy
+
+  frontend:
+    image: node:22-alpine
+    working_dir: /app
+    environment:
+      NODE_ENV: development
+      PNPM_HOME: /pnpm
+      HOST: 0.0.0.0
+      PORT: 20015
+      CHOKIDAR_USEPOLLING: "true"
+      NUXT_PUBLIC_API_BASE_URL: ${NUXT_PUBLIC_API_BASE_URL:-http://localhost:20016}
+      NUXT_SERVER_API_BASE_URL: ${NUXT_SERVER_API_BASE_URL:-http://backend:3001}
+      NUXT_PUBLIC_SITE_URL: ${NUXT_PUBLIC_SITE_URL:-http://localhost:20015}
+    ports:
+      - "20015:20015"
+    volumes:
+      - .:/app
+      - root_node_modules:/app/node_modules
+      - backend_node_modules:/app/backend/node_modules
+      - frontend_node_modules:/app/frontend/node_modules
+      - pnpm_store:/pnpm/store
+    command: >
+      sh -lc "corepack enable &&
+      corepack prepare pnpm@10.33.2 --activate &&
+      pnpm --filter @pokopia/frontend dev"
+    depends_on:
+      deps:
+        condition: service_completed_successfully
+      backend:
+        condition: service_started
+
+volumes:
+  postgres18_data:
+  backend_uploads:
+  root_node_modules:
+  backend_node_modules:
+  frontend_node_modules:
+  pnpm_store:

docker-compose.yml

@@ -5,10 +5,10 @@ services:
       POSTGRES_DB: pokopia
       POSTGRES_USER: pokopia
       POSTGRES_PASSWORD: pokopia
-    ports:
-      - "5432:5432"
     volumes:
       - postgres18_data:/var/lib/postgresql
+    ports:
+      - "50001:5432"          # 添加这一行：宿主机 50001 → 容器 5432
     healthcheck:
       test: ["CMD-SHELL", "pg_isready -U pokopia -d pokopia"]
       interval: 5s
@@ -17,29 +17,54 @@ services:
 
   backend:
     build:
-      context: ./backend
+      context: .
+      dockerfile: backend/Dockerfile
     environment:
       DATABASE_URL: postgres://pokopia:pokopia@postgres:5432/pokopia
       BACKEND_PORT: 3001
-      FRONTEND_ORIGIN: http://localhost:3000
+      TRUST_PROXY: ${TRUST_PROXY:-false}
-      APP_ORIGIN: http://localhost:3000
+      FRONTEND_ORIGIN: ${FRONTEND_ORIGIN:-http://localhost:20015}
+      APP_ORIGIN: ${APP_ORIGIN:-http://localhost:20015}
+      UPLOAD_DIR: /app/uploads
+      BACKEND_PUBLIC_ORIGIN: ${BACKEND_PUBLIC_ORIGIN:-http://localhost:20016}
       RESEND_API_KEY: ${RESEND_API_KEY:-}
       EMAIL_FROM: "${EMAIL_FROM:-Pokopia Wiki <onboarding@resend.dev>}"
     ports:
-      - "3001:3001"
+      - "20016:3001"
+    volumes:
+      - backend_uploads:/app/uploads
     depends_on:
       postgres:
         condition: service_healthy
 
   frontend:
     build:
-      context: ./frontend
+      context: .
+      dockerfile: frontend/Dockerfile
+      args:
+        NUXT_PUBLIC_API_BASE_URL: ${NUXT_PUBLIC_API_BASE_URL:-http://localhost:20016}
+        NUXT_SERVER_API_BASE_URL: ${NUXT_SERVER_API_BASE_URL:-http://backend:3001}
+        NUXT_PUBLIC_SITE_URL: ${NUXT_PUBLIC_SITE_URL:-https://pokopiawiki.tootaio.com}
     environment:
-      VITE_API_BASE_URL: http://localhost:3001
+      PORT: 20015
-    ports:
+      NUXT_PUBLIC_API_BASE_URL: ${NUXT_PUBLIC_API_BASE_URL:-http://localhost:20016}
-      - "3000:3000"
+      NUXT_SERVER_API_BASE_URL: ${NUXT_SERVER_API_BASE_URL:-http://backend:3001}
+      NUXT_PUBLIC_SITE_URL: ${NUXT_PUBLIC_SITE_URL:-https://pokopiawiki.tootaio.com}
+    expose:
+      - "20015"
     depends_on:
       - backend
 
+  frontend_gateway:
+    image: nginx:1.29-alpine
+    ports:
+      - "20015:20015"
+    volumes:
+      - ./frontend/gateway/nginx.conf:/etc/nginx/conf.d/default.conf:ro
+      - ./frontend/gateway/maintenance.html:/usr/share/nginx/html/maintenance.html:ro
+    depends_on:
+      - frontend
+
 volumes:
   postgres18_data:
+  backend_uploads:

frontend/Dockerfile

@@ -1,8 +1,30 @@
-FROM node:22-alpine
+FROM node:22-alpine AS build
 
 WORKDIR /app
-COPY package.json ./
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
-RUN corepack enable && pnpm install
+COPY backend/package.json ./backend/package.json
-COPY . .
+COPY frontend/package.json ./frontend/package.json
-EXPOSE 3000
+RUN corepack enable && corepack prepare pnpm@10.33.2 --activate && pnpm install --frozen-lockfile --filter @pokopia/frontend...
-CMD ["pnpm", "run", "dev"]
+COPY frontend ./frontend
+COPY system-wordings.ts ./system-wordings.ts
+
+ARG NUXT_PUBLIC_API_BASE_URL=http://localhost:3001
+ARG NUXT_SERVER_API_BASE_URL=http://localhost:3001
+ARG NUXT_PUBLIC_SITE_URL=https://pokopiawiki.tootaio.com
+ENV NUXT_PUBLIC_API_BASE_URL=$NUXT_PUBLIC_API_BASE_URL
+ENV NUXT_SERVER_API_BASE_URL=$NUXT_SERVER_API_BASE_URL
+ENV NUXT_PUBLIC_SITE_URL=$NUXT_PUBLIC_SITE_URL
+RUN pnpm --filter @pokopia/frontend build
+
+FROM node:22-alpine
+
+ENV NODE_ENV=production
+ENV HOST=0.0.0.0
+ENV PORT=20015
+
+WORKDIR /app
+COPY --from=build /app/frontend/.output ./.output
+
+USER node
+EXPOSE 20015
+CMD ["node", ".output/server/index.mjs"]

frontend/app.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import AppShell from './src/components/AppShell.vue';
+import {
+  iconAction,
+  iconAdmin,
+  iconArtifact,
+  iconAutomation,
+  iconChecklist,
+  iconClothes,
+  iconDish,
+  iconDreamIsland,
+  iconEvent,
+  iconHabitat,
+  iconHome,
+  iconItem,
+  iconLife,
+  iconPokemon,
+  iconRecipe,
+  iconThreads,
+  type AppIcon
+} from './src/icons';
+import { getCurrentLocale, loadSystemWordings, onLocaleChange, setCurrentLocale } from './src/i18n';
+import { api, notifyAuthChange, onAuthChange, type AuthUser, type Language } from './src/services/api';
+
+const { t, locale } = useI18n();
+const router = useRouter();
+const currentUser = ref<AuthUser | null>(null);
+const viewAsBusy = ref(false);
+const languages = ref<Language[]>([
+  { code: 'en', name: 'English', enabled: true, isDefault: true, sortOrder: 10 },
+  { code: 'zh-CN', name: '简体中文', enabled: true, isDefault: false, sortOrder: 20 }
+]);
+let removeAuthListener: (() => void) | null = null;
+let removeLocaleListener: (() => void) | null = null;
+
+type NavBadge = {
+  label: string;
+  tone?: 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+};
+
+type NavLinkItem = {
+  label: string;
+  to: string;
+  icon?: AppIcon;
+  badge?: NavBadge;
+};
+
+type NavGroupItem = {
+  key: string;
+  label: string;
+  icon?: AppIcon;
+  children: NavLinkItem[];
+};
+
+type NavItem = NavLinkItem | NavGroupItem;
+
+function inDevBadge(): NavBadge {
+  return { label: t('common.inDev'), tone: 'info' };
+}
+
+function can(permissionKey: string) {
+  return currentUser.value?.permissions.includes(permissionKey) === true;
+}
+
+const navItems = computed<NavItem[]>(() => {
+  const items: NavItem[] = [
+    { label: t('nav.home'), to: '/', icon: iconHome },
+    {
+      key: 'pokedex',
+      label: t('nav.pokedex'),
+      icon: iconPokemon,
+      children: [
+        { label: t('nav.mainGame'), to: '/pokemon', icon: iconPokemon },
+        { label: t('nav.event'), to: '/event-pokemon', icon: iconEvent }
+      ]
+    },
+    {
+      key: 'habitat-dex',
+      label: t('nav.habitatDex'),
+      icon: iconHabitat,
+      children: [
+        { label: t('nav.mainGame'), to: '/habitats', icon: iconHabitat },
+        { label: t('nav.event'), to: '/event-habitats', icon: iconEvent }
+      ]
+    },
+    {
+      key: 'collections',
+      label: t('nav.collections'),
+      icon: iconItem,
+      children: [
+        { label: t('nav.mainGame'), to: '/items', icon: iconItem },
+        { label: t('nav.event'), to: '/event-items', icon: iconEvent },
+        { label: t('nav.ancientArtifacts'), to: '/ancient-artifacts', icon: iconArtifact }
+      ]
+    },
+    { label: t('nav.recipes'), to: '/recipes', icon: iconRecipe },
+    { label: t('nav.automation'), to: '/automation', icon: iconAutomation, badge: inDevBadge() },
+    { label: t('nav.dish'), to: '/dish', icon: iconDish },
+    { label: t('nav.events'), to: '/events', icon: iconEvent, badge: inDevBadge() },
+    { label: t('nav.actions'), to: '/actions', icon: iconAction, badge: inDevBadge() },
+    { label: t('nav.dreamIsland'), to: '/dream-island', icon: iconDreamIsland, badge: inDevBadge() },
+    { label: t('nav.clothes'), to: '/clothes', icon: iconClothes, badge: inDevBadge() },
+    { label: t('nav.checklist'), to: '/checklist', icon: iconChecklist },
+    { label: t('nav.life'), to: '/life', icon: iconLife },
+    { label: t('nav.threads'), to: '/threads', icon: iconThreads }
+  ];
+
+  if (can('admin.access')) {
+    items.push({ label: t('nav.admin'), to: '/admin', icon: iconAdmin });
+  }
+
+  return items;
+});
+
+async function loadCurrentUser() {
+  try {
+    const response = await api.me();
+    currentUser.value = response.user;
+  } catch {
+    currentUser.value = null;
+  }
+}
+
+async function logout() {
+  try {
+    await api.logout();
+  } catch {
+    // The local session is cleared even when the server session is already gone.
+  }
+
+  currentUser.value = null;
+  notifyAuthChange();
+  await router.push('/');
+}
+
+async function stopViewAs() {
+  if (viewAsBusy.value) {
+    return;
+  }
+
+  viewAsBusy.value = true;
+  try {
+    const response = await api.stopViewAs();
+    currentUser.value = response.user;
+    notifyAuthChange();
+  } finally {
+    viewAsBusy.value = false;
+  }
+}
+
+async function loadLanguages() {
+  try {
+    const loadedLanguages = await api.languages();
+    if (loadedLanguages.length) {
+      languages.value = loadedLanguages;
+    }
+
+    if (!languages.value.some((language) => language.code === getCurrentLocale() && language.enabled)) {
+      setCurrentLocale('en');
+    }
+
+    await loadSystemWordings(getCurrentLocale());
+  } catch {
+    // Keep the built-in language list when the API is not ready yet.
+  }
+}
+
+async function updateLocale(value: string) {
+  await loadSystemWordings(value);
+  setCurrentLocale(value);
+}
+
+onMounted(() => {
+  void loadLanguages();
+  void loadCurrentUser();
+  removeAuthListener = onAuthChange(() => {
+    void loadCurrentUser();
+  });
+  removeLocaleListener = onLocaleChange(() => {
+    void loadLanguages();
+  });
+});
+
+onUnmounted(() => {
+  removeAuthListener?.();
+  removeLocaleListener?.();
+});
+</script>
+
+<template>
+  <AppShell
+    :current-user="currentUser"
+    :languages="languages"
+    :locale="locale"
+    :nav-items="navItems"
+    :view-as-busy="viewAsBusy"
+    @logout="logout"
+    @stop-view-as="stopViewAs"
+    @update:locale="updateLocale"
+  >
+    <NuxtPage :key="locale" />
+  </AppShell>
+</template>

frontend/app/router.options.ts

@@ -0,0 +1,9 @@
+import type { RouterConfig } from '@nuxt/schema';
+
+export default <RouterConfig>{
+  scrollBehavior(to, from, savedPosition) {
+    if (savedPosition) return savedPosition;
+    if (to.meta.editorModal === true || from.meta.editorModal === true) return false;
+    return { top: 0 };
+  }
+};

frontend/gateway/maintenance.html

@@ -0,0 +1,224 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <meta name="robots" content="noindex, nofollow" />
+  <meta http-equiv="refresh" content="30" />
+  <title>Pokopia Wiki is upgrading</title>
+  <style>
+    :root {
+      color-scheme: light;
+      --pokemon-yellow: #ffcb05;
+      --pokemon-yellow-soft: #ffe46b;
+      --pokemon-blue: #2a75bb;
+      --pokemon-blue-deep: #003a70;
+      --pokemon-red: #ee1515;
+      --pokemon-red-deep: #cc0000;
+      --bg: #f2f5fa;
+      --bg-alt: #eaf1fb;
+      --surface: #ffffff;
+      --surface-soft: #f8fafd;
+      --ink: #151923;
+      --ink-soft: #354052;
+      --muted: #687487;
+      --line: #d8deea;
+      --line-strong: #1f2a3b;
+      --shadow-raised: 0 14px 32px rgba(23, 35, 54, .13);
+      --font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      --font-display: "Arial Rounded MT Bold", "Nunito", "Avenir Next Rounded", var(--font-sans);
+    }
+
+    * {
+      box-sizing: border-box;
+    }
+
+    html {
+      min-width: 320px;
+      min-height: 100%;
+    }
+
+    body {
+      min-height: 100vh;
+      margin: 0;
+      color: var(--ink);
+      font-family: var(--font-sans);
+      background:
+        linear-gradient(90deg, rgba(42, 117, 187, .08) 1px, transparent 1px) 0 0 / 32px 32px,
+        linear-gradient(rgba(42, 117, 187, .08) 1px, transparent 1px) 0 0 / 32px 32px,
+        linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
+    }
+
+    main {
+      min-height: 100vh;
+      display: grid;
+      place-items: center;
+      padding: 32px 20px;
+    }
+
+    .maintenance-card {
+      width: min(100%, 560px);
+      overflow: hidden;
+      border: 1px solid rgba(31, 42, 59, .14);
+      border-radius: 8px;
+      background: var(--surface);
+      box-shadow: var(--shadow-raised);
+    }
+
+    .status-ribbon {
+      height: 12px;
+      background:
+        linear-gradient(90deg, var(--pokemon-red) 0 28%, var(--line-strong) 28% 34%, var(--surface) 34% 66%, var(--line-strong) 66% 72%, var(--pokemon-blue) 72% 100%);
+    }
+
+    .content {
+      padding: clamp(28px, 6vw, 48px);
+    }
+
+    .brand {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      margin-bottom: 28px;
+    }
+
+    .mark {
+      position: relative;
+      width: 48px;
+      height: 48px;
+      flex: 0 0 auto;
+      overflow: hidden;
+      border: 4px solid var(--line-strong);
+      border-radius: 50%;
+      background:
+        linear-gradient(180deg, var(--pokemon-red) 0 45%, var(--line-strong) 45% 55%, var(--surface) 55% 100%);
+      box-shadow: 0 4px 0 rgba(31, 42, 59, .2);
+    }
+
+    .mark::after {
+      content: "";
+      position: absolute;
+      inset: 13px;
+      border: 4px solid var(--line-strong);
+      border-radius: 50%;
+      background: var(--surface);
+    }
+
+    .brand-name {
+      display: block;
+      color: var(--pokemon-yellow);
+      font-family: var(--font-display);
+      font-size: 2rem;
+      font-weight: 900;
+      line-height: .95;
+      -webkit-text-stroke: 2px var(--pokemon-blue-deep);
+      text-shadow: 2px 3px 0 var(--pokemon-blue);
+    }
+
+    .brand-subtitle {
+      display: block;
+      margin-top: 4px;
+      color: var(--muted);
+      font-size: .78rem;
+      font-weight: 800;
+      letter-spacing: 0;
+      text-transform: uppercase;
+    }
+
+    .status {
+      display: inline-flex;
+      align-items: center;
+      min-height: 34px;
+      padding: 7px 10px;
+      border: 1px solid color-mix(in srgb, var(--pokemon-blue) 28%, var(--line));
+      border-radius: 8px;
+      background: color-mix(in srgb, var(--pokemon-blue) 10%, var(--surface));
+      color: var(--pokemon-blue-deep);
+      font-size: .82rem;
+      font-weight: 800;
+      line-height: 1.2;
+      text-transform: uppercase;
+    }
+
+    h1 {
+      margin: 20px 0 10px;
+      color: var(--ink);
+      font-size: 3rem;
+      font-weight: 900;
+      letter-spacing: 0;
+      line-height: 1.04;
+    }
+
+    p {
+      max-width: 38rem;
+      margin: 0;
+      color: var(--ink-soft);
+      font-size: 1.12rem;
+      line-height: 1.65;
+    }
+
+    .meter {
+      height: 12px;
+      margin-top: 30px;
+      overflow: hidden;
+      border: 1px solid var(--line-strong);
+      border-radius: 999px;
+      background: var(--surface-soft);
+    }
+
+    .meter span {
+      display: block;
+      width: 70%;
+      height: 100%;
+      border-right: 1px solid rgba(31, 42, 59, .28);
+      background: linear-gradient(90deg, var(--pokemon-yellow) 0%, var(--pokemon-yellow-soft) 46%, var(--pokemon-blue) 100%);
+    }
+
+    @media (max-width: 520px) {
+      main {
+        align-items: stretch;
+      }
+
+      .maintenance-card {
+        align-self: center;
+      }
+
+      .brand {
+        align-items: flex-start;
+      }
+
+      .brand-name {
+        font-size: 1.65rem;
+      }
+
+      h1 {
+        font-size: 2rem;
+      }
+
+      p {
+        font-size: 1rem;
+      }
+    }
+  </style>
+</head>
+<body>
+  <main aria-labelledby="maintenance-title">
+    <section class="maintenance-card" aria-live="polite">
+      <div class="status-ribbon" aria-hidden="true"></div>
+      <div class="content">
+        <div class="brand">
+          <span class="mark" aria-hidden="true"></span>
+          <div>
+            <span class="brand-name">Pokopia</span>
+            <span class="brand-subtitle">Wiki</span>
+          </div>
+        </div>
+        <span class="status">Upgrading</span>
+        <h1 id="maintenance-title">Pokopia Wiki is upgrading</h1>
+        <p>We'll be online within 5 minutes.</p>
+        <div class="meter" aria-hidden="true"><span></span></div>
+      </div>
+    </section>
+  </main>
+</body>
+</html>

frontend/gateway/nginx.conf

@@ -0,0 +1,45 @@
+server {
+  listen 20015;
+  server_name _;
+
+  resolver 127.0.0.11 valid=5s ipv6=off;
+
+  location / {
+    auth_request /backend-health;
+    error_page 500 502 503 504 =503 /maintenance.html;
+
+    set $frontend_upstream http://frontend:20015;
+
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto $scheme;
+
+    proxy_connect_timeout 1s;
+    proxy_send_timeout 30s;
+    proxy_read_timeout 30s;
+    proxy_intercept_errors on;
+
+    proxy_pass $frontend_upstream;
+  }
+
+  location = /backend-health {
+    internal;
+    set $backend_upstream http://backend:3001/health;
+
+    proxy_pass_request_body off;
+    proxy_set_header Content-Length "";
+    proxy_connect_timeout 1s;
+    proxy_read_timeout 1s;
+
+    proxy_pass $backend_upstream;
+  }
+
+  location = /maintenance.html {
+    internal;
+    root /usr/share/nginx/html;
+    add_header Cache-Control "no-store" always;
+    add_header Retry-After "300" always;
+  }
+}

frontend/index.html

@@ -1,12 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Pokopia Wiki</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

frontend/middleware/auth.global.ts

@@ -0,0 +1,35 @@
+import { api } from '../src/services/api';
+
+export default defineNuxtRouteMiddleware(async (to) => {
+  const requiredPermissions = to.matched
+    .map((record) => record.meta.requiredPermission)
+    .filter((permission): permission is string => typeof permission === 'string');
+  const requiredAnyPermissions = to.matched.flatMap((record) =>
+    Array.isArray(record.meta.requiredAnyPermission)
+      ? record.meta.requiredAnyPermission.filter((permission): permission is string => typeof permission === 'string')
+      : []
+  );
+  const requiresVerified = to.matched.some((record) => record.meta.requiresVerified === true) || requiredPermissions.length > 0 || requiredAnyPermissions.length > 0;
+  const requiresAuth = requiresVerified || to.matched.some((record) => record.meta.requiresAuth === true);
+
+  if (!requiresAuth) {
+    return;
+  }
+
+  try {
+    const response = await api.me(import.meta.server ? { headers: useRequestHeaders(['cookie']) } : undefined);
+    if (requiresVerified && !response.user.emailVerified) {
+      return navigateTo({ path: '/login', query: { redirect: to.fullPath } });
+    }
+
+    const permissionSet = new Set(response.user.permissions);
+    if (requiredPermissions.some((permission) => !permissionSet.has(permission))) {
+      return navigateTo('/pokemon');
+    }
+    if (requiredAnyPermissions.length && !requiredAnyPermissions.some((permission) => permissionSet.has(permission))) {
+      return navigateTo('/pokemon');
+    }
+  } catch {
+    return navigateTo({ path: '/login', query: { redirect: to.fullPath } });
+  }
+});

frontend/nuxt.config.ts

@@ -0,0 +1,50 @@
+const fallbackSiteUrl = 'https://pokopiawiki.tootaio.com';
+
+function normalizeSiteUrl(value: string | undefined): string {
+  return (value?.trim() || fallbackSiteUrl).replace(/\/+$/, '');
+}
+
+export default defineNuxtConfig({
+  ssr: true,
+  devtools: { enabled: false },
+  css: ['~/src/styles/main.css'],
+  compatibilityDate: '2026-05-06',
+  runtimeConfig: {
+    serverApiBaseUrl:
+      process.env.NUXT_SERVER_API_BASE_URL ??
+      process.env.NUXT_PUBLIC_API_BASE_URL ??
+      'http://localhost:3001',
+    public: {
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL ?? 'http://localhost:3001',
+      siteUrl: normalizeSiteUrl(process.env.NUXT_PUBLIC_SITE_URL)
+    }
+  },
+  app: {
+    head: {
+      htmlAttrs: {
+        lang: 'en'
+      },
+      title: 'Pokopia Wiki - Pokemon Pokopia Guide',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1.0' },
+        { name: 'theme-color', content: '#6ccf32' }
+      ],
+      link: [
+        { rel: 'icon', href: '/favicon.ico', sizes: '32x32' }
+      ],
+      script: [
+        {
+          async: true,
+          src: 'https://umami.tootaio.com/script.js',
+          'data-website-id': '6c00a2e5-dc72-41f3-9d5d-aac93aaaf1cb'
+        }
+      ]
+    }
+  },
+  nitro: {
+    prerender: {
+      routes: ['/robots.txt', '/sitemap.xml']
+    }
+  }
+});

frontend/package.json

@@ -5,25 +5,25 @@
   "packageManager": "pnpm@10.33.2",
   "type": "module",
   "scripts": {
-    "dev": "vite --host 0.0.0.0 --port 3000",
+    "dev": "nuxt dev --host 0.0.0.0 --port 20015",
-    "build": "vue-tsc --noEmit && vite build",
+    "build": "nuxt build",
-    "lint": "vue-tsc --noEmit",
+    "lint": "nuxt typecheck",
-    "typecheck": "vue-tsc --noEmit",
+    "typecheck": "nuxt typecheck",
     "test": "vitest run"
   },
   "dependencies": {
-    "@iconify/vue": "^5.0.0",
+    "@iconify/vue": "5.0.0",
-    "@vitejs/plugin-vue": "latest",
+    "nuxt": "4.4.4",
-    "vite": "latest",
+    "vue": "3.5.33",
-    "vue": "latest",
+    "vue-i18n": "11.4.0",
-    "vue-i18n": "^11.4.0",
+    "vue-router": "5.0.6"
-    "vue-router": "latest"
   },
   "devDependencies": {
-    "@types/node": "latest",
+    "@types/node": "25.6.0",
-    "@vue/tsconfig": "latest",
+    "@vue/tsconfig": "0.9.1",
-    "typescript": "latest",
+    "postcss": "8.5.13",
-    "vitest": "latest",
+    "typescript": "6.0.3",
-    "vue-tsc": "latest"
+    "vitest": "4.1.5",
+    "vue-tsc": "3.2.7"
   }
 }

frontend/pages/actions.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ComingSoonView from '../src/views/ComingSoonView.vue';
+
+definePageMeta({
+  name: 'actions',
+  seo: { titleKey: 'pages.comingSoon.sections.actions.title', descriptionKey: 'pages.comingSoon.sections.actions.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ComingSoonView page="actions" />
+</template>

frontend/pages/admin.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import AdminView from '../src/views/AdminView.vue';
+
+definePageMeta({
+  name: 'admin',
+  requiredPermission: 'admin.access',
+  seo: { titleKey: 'pages.admin.title', descriptionKey: 'pages.admin.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <AdminView />
+</template>

frontend/pages/ancient-artifacts/[id]/edit.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import ItemDetail from '../../../src/views/ItemDetail.vue';
+
+definePageMeta({
+  name: 'ancient-artifact-edit',
+  requiredPermission: 'items.update',
+  editorModal: true,
+  seo: {
+    titleKey: 'pages.ancientArtifacts.editKicker',
+    descriptionKey: 'pages.ancientArtifacts.editSubtitle',
+    canonicalPath: (route: RouteLocationNormalizedLoaded) => `/ancient-artifacts/${String(route.params.id)}`,
+    noindex: true
+  }
+});
+</script>
+
+<template>
+  <ItemDetail />
+</template>

frontend/pages/ancient-artifacts/[id]/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ItemDetail from '../../../src/views/ItemDetail.vue';
+
+definePageMeta({
+  name: 'ancient-artifact-detail',
+  seo: { titleKey: 'pages.ancientArtifacts.detailKicker', descriptionKey: 'pages.ancientArtifacts.subtitle' }
+});
+</script>
+
+<template>
+  <ItemDetail />
+</template>

frontend/pages/ancient-artifacts/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import AncientArtifactList from '../../src/views/AncientArtifactList.vue';
+
+definePageMeta({
+  name: 'ancient-artifact-list',
+  seo: { titleKey: 'pages.ancientArtifacts.title', descriptionKey: 'pages.ancientArtifacts.subtitle' }
+});
+</script>
+
+<template>
+  <AncientArtifactList />
+</template>

frontend/pages/ancient-artifacts/new.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import AncientArtifactList from '../../src/views/AncientArtifactList.vue';
+
+definePageMeta({
+  name: 'ancient-artifact-new',
+  requiredPermission: 'items.create',
+  editorModal: true,
+  seo: {
+    titleKey: 'pages.ancientArtifacts.newTitle',
+    descriptionKey: 'pages.ancientArtifacts.editSubtitle',
+    canonicalPath: '/ancient-artifacts',
+    noindex: true
+  }
+});
+</script>
+
+<template>
+  <AncientArtifactList />
+</template>

frontend/pages/automation.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ComingSoonView from '../src/views/ComingSoonView.vue';
+
+definePageMeta({
+  name: 'automation',
+  seo: { titleKey: 'pages.comingSoon.sections.automation.title', descriptionKey: 'pages.comingSoon.sections.automation.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ComingSoonView page="automation" />
+</template>

frontend/pages/checklist.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import DailyChecklistView from '../src/views/DailyChecklistView.vue';
+
+definePageMeta({
+  name: 'checklist',
+  seo: { titleKey: 'pages.checklist.title', descriptionKey: 'pages.checklist.subtitle' }
+});
+</script>
+
+<template>
+  <DailyChecklistView />
+</template>

frontend/pages/clothes.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ComingSoonView from '../src/views/ComingSoonView.vue';
+
+definePageMeta({
+  name: 'clothes',
+  seo: { titleKey: 'pages.comingSoon.sections.clothes.title', descriptionKey: 'pages.comingSoon.sections.clothes.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ComingSoonView page="clothes" />
+</template>

frontend/pages/disclaimers.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LegalView from '../src/views/LegalView.vue';
+
+definePageMeta({
+  name: 'disclaimers',
+  seo: { titleKey: 'pages.legal.disclaimers.title', descriptionKey: 'pages.legal.disclaimers.subtitle', canonicalPath: '/disclaimers' }
+});
+</script>
+
+<template>
+  <LegalView page="disclaimers" />
+</template>

frontend/pages/dish.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import DishView from '../src/views/DishView.vue';
+
+definePageMeta({
+  name: 'dish',
+  seo: { titleKey: 'pages.dish.title', descriptionKey: 'pages.dish.subtitle' }
+});
+</script>
+
+<template>
+  <DishView />
+</template>

frontend/pages/dream-island.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ComingSoonView from '../src/views/ComingSoonView.vue';
+
+definePageMeta({
+  name: 'dream-island',
+  seo: { titleKey: 'pages.comingSoon.sections.dreamIsland.title', descriptionKey: 'pages.comingSoon.sections.dreamIsland.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ComingSoonView page="dreamIsland" />
+</template>

frontend/pages/event-habitats/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import HabitatList from '../../src/views/HabitatList.vue';
+
+definePageMeta({
+  name: 'event-habitat-list',
+  seo: { titleKey: 'pages.eventHabitats.title', descriptionKey: 'pages.eventHabitats.subtitle', canonicalPath: '/event-habitats' }
+});
+</script>
+
+<template>
+  <HabitatList :event-only="true" />
+</template>

frontend/pages/event-habitats/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import HabitatList from '../../src/views/HabitatList.vue';
+
+definePageMeta({
+  name: 'event-habitat-new',
+  requiredPermission: 'habitats.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.eventHabitats.newTitle', descriptionKey: 'pages.eventHabitats.editSubtitle', canonicalPath: '/event-habitats', noindex: true }
+});
+</script>
+
+<template>
+  <HabitatList :event-only="true" />
+</template>

frontend/pages/event-items/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ItemsList from '../../src/views/ItemsList.vue';
+
+definePageMeta({
+  name: 'event-item-list',
+  seo: { titleKey: 'pages.eventItems.title', descriptionKey: 'pages.eventItems.subtitle', canonicalPath: '/event-items' }
+});
+</script>
+
+<template>
+  <ItemsList :event-only="true" />
+</template>

frontend/pages/event-items/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import ItemsList from '../../src/views/ItemsList.vue';
+
+definePageMeta({
+  name: 'event-item-new',
+  requiredPermission: 'items.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.eventItems.newTitle', descriptionKey: 'pages.eventItems.editSubtitle', canonicalPath: '/event-items', noindex: true }
+});
+</script>
+
+<template>
+  <ItemsList :event-only="true" />
+</template>

frontend/pages/event-pokemon/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import PokemonList from '../../src/views/PokemonList.vue';
+
+definePageMeta({
+  name: 'event-pokemon-list',
+  seo: { titleKey: 'pages.eventPokemon.title', descriptionKey: 'pages.eventPokemon.subtitle', canonicalPath: '/event-pokemon' }
+});
+</script>
+
+<template>
+  <PokemonList :event-only="true" />
+</template>

frontend/pages/event-pokemon/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import PokemonList from '../../src/views/PokemonList.vue';
+
+definePageMeta({
+  name: 'event-pokemon-new',
+  requiredPermission: 'pokemon.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.eventPokemon.newTitle', descriptionKey: 'pages.eventPokemon.editSubtitle', canonicalPath: '/event-pokemon', noindex: true }
+});
+</script>
+
+<template>
+  <PokemonList :event-only="true" />
+</template>

frontend/pages/events.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ComingSoonView from '../src/views/ComingSoonView.vue';
+
+definePageMeta({
+  name: 'events',
+  seo: { titleKey: 'pages.comingSoon.sections.events.title', descriptionKey: 'pages.comingSoon.sections.events.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ComingSoonView page="events" />
+</template>

frontend/pages/forgot-password.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ForgotPasswordView from '../src/views/ForgotPasswordView.vue';
+
+definePageMeta({
+  name: 'forgot-password',
+  seo: { titleKey: 'auth.requestResetTitle', descriptionKey: 'auth.requestResetSubtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ForgotPasswordView />
+</template>

frontend/pages/habitats/[id]/edit.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import HabitatDetail from '../../../src/views/HabitatDetail.vue';
+
+definePageMeta({
+  name: 'habitat-edit',
+  requiredPermission: 'habitats.update',
+  editorModal: true,
+  seo: {
+    titleKey: 'pages.habitats.detailKicker',
+    descriptionKey: 'pages.habitats.editSubtitle',
+    canonicalPath: (route: RouteLocationNormalizedLoaded) => `/habitats/${String(route.params.id)}`,
+    noindex: true
+  }
+});
+</script>
+
+<template>
+  <HabitatDetail />
+</template>

frontend/pages/habitats/[id]/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import HabitatDetail from '../../../src/views/HabitatDetail.vue';
+
+definePageMeta({
+  name: 'habitat-detail',
+  seo: { titleKey: 'pages.habitats.detailKicker', descriptionKey: 'pages.habitats.subtitle' }
+});
+</script>
+
+<template>
+  <HabitatDetail />
+</template>

frontend/pages/habitats/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import HabitatList from '../../src/views/HabitatList.vue';
+
+definePageMeta({
+  name: 'habitat-list',
+  seo: { titleKey: 'pages.habitats.title', descriptionKey: 'pages.habitats.subtitle' }
+});
+</script>
+
+<template>
+  <HabitatList :event-only="false" />
+</template>

frontend/pages/habitats/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import HabitatList from '../../src/views/HabitatList.vue';
+
+definePageMeta({
+  name: 'habitat-new',
+  requiredPermission: 'habitats.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.habitats.newTitle', descriptionKey: 'pages.habitats.editSubtitle', canonicalPath: '/habitats', noindex: true }
+});
+</script>
+
+<template>
+  <HabitatList :event-only="false" />
+</template>

frontend/pages/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import HomeView from '../src/views/HomeView.vue';
+
+definePageMeta({
+  name: 'home',
+  seo: { titleKey: 'pages.home.title', descriptionKey: 'pages.home.subtitle', canonicalPath: '/' }
+});
+</script>
+
+<template>
+  <HomeView />
+</template>

frontend/pages/items/[id]/edit.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import ItemDetail from '../../../src/views/ItemDetail.vue';
+
+definePageMeta({
+  name: 'item-edit',
+  requiredPermission: 'items.update',
+  editorModal: true,
+  seo: {
+    titleKey: 'pages.items.editKicker',
+    descriptionKey: 'pages.items.editSubtitle',
+    canonicalPath: (route: RouteLocationNormalizedLoaded) => `/items/${String(route.params.id)}`,
+    noindex: true
+  }
+});
+</script>
+
+<template>
+  <ItemDetail />
+</template>

frontend/pages/items/[id]/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ItemDetail from '../../../src/views/ItemDetail.vue';
+
+definePageMeta({
+  name: 'item-detail',
+  seo: { titleKey: 'pages.items.detailKicker', descriptionKey: 'pages.items.subtitle' }
+});
+</script>
+
+<template>
+  <ItemDetail />
+</template>

frontend/pages/items/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ItemsList from '../../src/views/ItemsList.vue';
+
+definePageMeta({
+  name: 'item-list',
+  seo: { titleKey: 'pages.items.title', descriptionKey: 'pages.items.subtitle' }
+});
+</script>
+
+<template>
+  <ItemsList :event-only="false" />
+</template>

frontend/pages/items/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import ItemsList from '../../src/views/ItemsList.vue';
+
+definePageMeta({
+  name: 'item-new',
+  requiredPermission: 'items.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.items.newTitle', descriptionKey: 'pages.items.editSubtitle', canonicalPath: '/items', noindex: true }
+});
+</script>
+
+<template>
+  <ItemsList :event-only="false" />
+</template>

frontend/pages/life/[id].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LifePostDetail from '../../src/views/LifePostDetail.vue';
+
+definePageMeta({
+  name: 'life-id',
+  seo: { titleKey: 'pages.life.detailTitle', descriptionKey: 'pages.life.detailSubtitle' }
+});
+</script>
+
+<template>
+  <LifePostDetail />
+</template>

frontend/pages/life/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LifeView from '../../src/views/LifeView.vue';
+
+definePageMeta({
+  name: 'life',
+  seo: { titleKey: 'pages.life.title', descriptionKey: 'pages.life.subtitle' }
+});
+</script>
+
+<template>
+  <LifeView />
+</template>

frontend/pages/login.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LoginView from '../src/views/LoginView.vue';
+
+definePageMeta({
+  name: 'login',
+  seo: { titleKey: 'auth.loginTitle', descriptionKey: 'auth.loginSubtitle', noindex: true }
+});
+</script>
+
+<template>
+  <LoginView />
+</template>

frontend/pages/pokemon/[id]/edit.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import PokemonDetail from '../../../src/views/PokemonDetail.vue';
+
+definePageMeta({
+  name: 'pokemon-edit',
+  requiredPermission: 'pokemon.update',
+  editorModal: true,
+  seo: {
+    titleKey: 'pages.pokemon.editKicker',
+    descriptionKey: 'pages.pokemon.editSubtitle',
+    canonicalPath: (route: RouteLocationNormalizedLoaded) => `/pokemon/${String(route.params.id)}`,
+    noindex: true
+  }
+});
+</script>
+
+<template>
+  <PokemonDetail />
+</template>

frontend/pages/pokemon/[id]/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import PokemonDetail from '../../../src/views/PokemonDetail.vue';
+
+definePageMeta({
+  name: 'pokemon-detail',
+  seo: { titleKey: 'pages.pokemon.detailKicker', descriptionKey: 'pages.pokemon.subtitle' }
+});
+</script>
+
+<template>
+  <PokemonDetail />
+</template>

frontend/pages/pokemon/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import PokemonList from '../../src/views/PokemonList.vue';
+
+definePageMeta({
+  name: 'pokemon-list',
+  seo: { titleKey: 'pages.pokemon.title', descriptionKey: 'pages.pokemon.subtitle' }
+});
+</script>
+
+<template>
+  <PokemonList :event-only="false" />
+</template>

frontend/pages/pokemon/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import PokemonList from '../../src/views/PokemonList.vue';
+
+definePageMeta({
+  name: 'pokemon-new',
+  requiredPermission: 'pokemon.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.pokemon.newTitle', descriptionKey: 'pages.pokemon.editSubtitle', canonicalPath: '/pokemon', noindex: true }
+});
+</script>
+
+<template>
+  <PokemonList :event-only="false" />
+</template>

frontend/pages/privacy-policy.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LegalView from '../src/views/LegalView.vue';
+
+definePageMeta({
+  name: 'privacy-policy',
+  seo: { titleKey: 'pages.legal.privacy.title', descriptionKey: 'pages.legal.privacy.subtitle', canonicalPath: '/privacy-policy' }
+});
+</script>
+
+<template>
+  <LegalView page="privacy" />
+</template>

frontend/pages/profile/[id].vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import UserProfileView from '../../src/views/UserProfileView.vue';
+
+definePageMeta({
+  name: 'profile-id',
+  seo: { titleKey: 'pages.profile.title', descriptionKey: 'pages.profile.publicSubtitle' }
+});
+</script>
+
+<template>
+  <UserProfileView />
+</template>

frontend/pages/profile/index.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import UserProfileView from '../../src/views/UserProfileView.vue';
+
+definePageMeta({
+  name: 'profile',
+  requiresAuth: true,
+  seo: { titleKey: 'pages.profile.title', descriptionKey: 'pages.profile.subtitle', noindex: true }
+});
+</script>
+
+<template>
+  <UserProfileView />
+</template>

frontend/pages/project-updates.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import ProjectUpdatesView from '../src/views/ProjectUpdatesView.vue';
+
+definePageMeta({
+  name: 'project-updates',
+  seo: {
+    titleKey: 'pages.projectUpdates.title',
+    descriptionKey: 'pages.projectUpdates.subtitle',
+    canonicalPath: '/project-updates'
+  }
+});
+</script>
+
+<template>
+  <ProjectUpdatesView />
+</template>

frontend/pages/recipes/[id]/edit.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import RecipeDetail from '../../../src/views/RecipeDetail.vue';
+
+definePageMeta({
+  name: 'recipe-edit',
+  requiredPermission: 'recipes.update',
+  editorModal: true,
+  seo: {
+    titleKey: 'pages.recipes.editKicker',
+    descriptionKey: 'pages.recipes.editSubtitle',
+    canonicalPath: (route: RouteLocationNormalizedLoaded) => `/recipes/${String(route.params.id)}`,
+    noindex: true
+  }
+});
+</script>
+
+<template>
+  <RecipeDetail />
+</template>

frontend/pages/recipes/[id]/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import RecipeDetail from '../../../src/views/RecipeDetail.vue';
+
+definePageMeta({
+  name: 'recipe-detail',
+  seo: { titleKey: 'pages.recipes.detailKicker', descriptionKey: 'pages.recipes.subtitle' }
+});
+</script>
+
+<template>
+  <RecipeDetail />
+</template>

frontend/pages/recipes/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import RecipeList from '../../src/views/RecipeList.vue';
+
+definePageMeta({
+  name: 'recipe-list',
+  seo: { titleKey: 'pages.recipes.title', descriptionKey: 'pages.recipes.subtitle' }
+});
+</script>
+
+<template>
+  <RecipeList />
+</template>

frontend/pages/recipes/new.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import RecipeList from '../../src/views/RecipeList.vue';
+
+definePageMeta({
+  name: 'recipe-new',
+  requiredPermission: 'recipes.create',
+  editorModal: true,
+  seo: { titleKey: 'pages.recipes.newTitle', descriptionKey: 'pages.recipes.editSubtitle', canonicalPath: '/recipes', noindex: true }
+});
+</script>
+
+<template>
+  <RecipeList />
+</template>

frontend/pages/register.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import RegisterView from '../src/views/RegisterView.vue';
+
+definePageMeta({
+  name: 'register',
+  seo: { titleKey: 'auth.registerTitle', descriptionKey: 'auth.registerSubtitle', noindex: true }
+});
+</script>
+
+<template>
+  <RegisterView />
+</template>

frontend/pages/reset-password.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ResetPasswordView from '../src/views/ResetPasswordView.vue';
+
+definePageMeta({
+  name: 'reset-password',
+  seo: { titleKey: 'auth.resetTitle', descriptionKey: 'auth.resetSubtitle', noindex: true }
+});
+</script>
+
+<template>
+  <ResetPasswordView />
+</template>

frontend/pages/terms-of-service.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import LegalView from '../src/views/LegalView.vue';
+
+definePageMeta({
+  name: 'terms-of-service',
+  seo: { titleKey: 'pages.legal.terms.title', descriptionKey: 'pages.legal.terms.subtitle', canonicalPath: '/terms-of-service' }
+});
+</script>
+
+<template>
+  <LegalView page="terms" />
+</template>

frontend/pages/threads/[id].vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { RouteLocationNormalizedLoaded } from 'vue-router';
+import ThreadsView from '../../src/views/ThreadsView.vue';
+
+definePageMeta({
+  name: 'thread-detail',
+  seo: {
+    titleKey: 'pages.threads.title',
+    descriptionKey: 'seo.threadsDescription',
+    canonicalPath: (route: RouteLocationNormalizedLoaded) => `/threads/${String(route.params.id)}`
+  }
+});
+</script>
+
+<template>
+  <ThreadsView />
+</template>

frontend/pages/threads/index.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import ThreadsView from '../../src/views/ThreadsView.vue';
+
+definePageMeta({
+  name: 'threads',
+  seo: { titleKey: 'pages.threads.title', descriptionKey: 'seo.threadsDescription', canonicalPath: '/threads' }
+});
+</script>
+
+<template>
+  <ThreadsView />
+</template>

frontend/pages/verify-email.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import VerifyEmailView from '../src/views/VerifyEmailView.vue';
+
+definePageMeta({
+  name: 'verify-email',
+  seo: { titleKey: 'auth.verifyTitle', descriptionKey: 'auth.verifySubtitle', noindex: true }
+});
+</script>
+
+<template>
+  <VerifyEmailView />
+</template>

frontend/plugins/00-runtime-config.ts

@@ -0,0 +1,15 @@
+import { setSystemWordingsApiBaseUrls } from '../src/i18n';
+import { setConfiguredSiteUrl } from '../src/seo';
+import { setApiBaseUrls } from '../src/services/api';
+
+export default defineNuxtPlugin(() => {
+  const config = useRuntimeConfig();
+  const apiBaseUrls = {
+    browser: config.public.apiBaseUrl,
+    server: config.serverApiBaseUrl
+  };
+
+  setApiBaseUrls(apiBaseUrls);
+  setSystemWordingsApiBaseUrls(apiBaseUrls);
+  setConfiguredSiteUrl(config.public.siteUrl);
+});

frontend/plugins/01-i18n.ts

@@ -0,0 +1,15 @@
+import { createPokopiaI18n, setActiveI18n } from '../src/i18n';
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const i18n = createPokopiaI18n();
+  if (import.meta.client) {
+    setActiveI18n(i18n);
+  }
+
+  nuxtApp.vueApp.use(i18n);
+  return {
+    provide: {
+      pokopiaI18n: i18n
+    }
+  };
+});

frontend/plugins/02-seo.ts

@@ -0,0 +1,32 @@
+import { computed, ref } from 'vue';
+import { onLocaleChange } from '../src/i18n';
+import { applyRouteSeo, onSeoChange, resolvedSeoHead, resolveRouteSeo, setSeoTranslator, type ResolvedSeoConfig } from '../src/seo';
+
+export default defineNuxtPlugin(() => {
+  const router = useRouter();
+  const nuxtApp = useNuxtApp();
+  const t = (nuxtApp.$pokopiaI18n as { global: { t: (key: string, values?: Record<string, string | number>) => string } }).global.t;
+  const dynamicSeo = ref<ResolvedSeoConfig | null>(null);
+  const activeSeo = computed(() => dynamicSeo.value ?? resolveRouteSeo(router.currentRoute.value, t));
+  useHead(() => resolvedSeoHead(activeSeo.value));
+
+  if (import.meta.server) {
+    return;
+  }
+
+  setSeoTranslator(t);
+  onSeoChange((seo) => {
+    dynamicSeo.value = seo;
+  });
+  onLocaleChange(() => {
+    dynamicSeo.value = null;
+    applyRouteSeo(router.currentRoute.value);
+  });
+
+  router.afterEach((to) => {
+    dynamicSeo.value = null;
+    applyRouteSeo(to);
+  });
+
+  applyRouteSeo(router.currentRoute.value);
+});

frontend/plugins/03-detail-seo.server.ts

@@ -0,0 +1,81 @@
+import { resolvedSeoHead, resolveSeo, threadSeoConfig, type SeoConfig } from '../src/seo';
+import { api } from '../src/services/api';
+
+export default defineNuxtPlugin(async () => {
+  const route = useRoute();
+  const routeId = typeof route.params.id === 'string' && route.params.id.trim() !== '' ? route.params.id : null;
+  if (!routeId || typeof route.name !== 'string') {
+    return;
+  }
+
+  const nuxtApp = useNuxtApp();
+  const t = (nuxtApp.$pokopiaI18n as { global: { t: (key: string, values?: Record<string, string | number>) => string } }).global.t;
+  const seo = await detailSeo(String(route.name), routeId, t);
+  if (seo) {
+    useHead(resolvedSeoHead(resolveSeo(seo)));
+  }
+});
+
+async function detailSeo(
+  routeName: string,
+  routeId: string,
+  t: (key: string, values?: Record<string, string | number>) => string
+): Promise<SeoConfig | null> {
+  try {
+    if (routeName === 'pokemon-detail') {
+      const pokemon = await api.pokemonDetail(routeId);
+      return {
+        title: `${pokemon.name} - ${t(pokemon.isEventItem ? 'pages.eventPokemon.title' : 'pages.pokemon.title')}`,
+        description: t('seo.pokemonDetailDescription', { name: pokemon.name }),
+        canonicalPath: `/pokemon/${pokemon.id}`,
+        image: pokemon.image?.url
+      };
+    }
+
+    if (routeName === 'habitat-detail') {
+      const habitat = await api.habitatDetail(routeId);
+      return {
+        title: `${habitat.name} - ${t(habitat.isEventItem ? 'pages.eventHabitats.title' : 'pages.habitats.title')}`,
+        description: t('seo.habitatDetailDescription', { name: habitat.name }),
+        canonicalPath: `/habitats/${habitat.id}`,
+        image: habitat.image?.url
+      };
+    }
+
+    if (routeName === 'item-detail' || routeName === 'ancient-artifact-detail') {
+      const item = await api.itemDetail(routeId);
+      const ancientArtifactRoute = routeName === 'ancient-artifact-detail';
+      if (ancientArtifactRoute && !item.ancientArtifactCategory) {
+        return null;
+      }
+
+      const titleKey = ancientArtifactRoute ? 'pages.ancientArtifacts.title' : item.isEventItem ? 'pages.eventItems.title' : 'pages.items.title';
+      const descriptionKey = ancientArtifactRoute ? 'seo.ancientArtifactDetailDescription' : 'seo.itemDetailDescription';
+      return {
+        title: `${item.name} - ${t(titleKey)}`,
+        description: t(descriptionKey, { name: item.name }),
+        canonicalPath: ancientArtifactRoute ? `/ancient-artifacts/${item.id}` : `/items/${item.id}`,
+        image: item.image?.url
+      };
+    }
+
+    if (routeName === 'recipe-detail') {
+      const recipe = await api.recipeDetail(routeId);
+      return {
+        title: `${recipe.name} - ${t('pages.recipes.title')}`,
+        description: t('seo.recipeDetailDescription', { name: recipe.name }),
+        canonicalPath: `/recipes/${recipe.id}`,
+        image: recipe.item.image?.url
+      };
+    }
+
+    if (routeName === 'thread-detail') {
+      const thread = await api.thread(routeId);
+      return threadSeoConfig(thread, t);
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+}

frontend/server/routes/robots.txt.ts

@@ -0,0 +1,7 @@
+import { normalizeSiteUrl, robotsTxt } from '../utils/seo-files';
+
+export default defineEventHandler((event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'text/plain; charset=utf-8');
+  return robotsTxt(normalizeSiteUrl(config.public.siteUrl));
+});

frontend/server/routes/sitemap-collections.xml.ts

@@ -0,0 +1,7 @@
+import { collectionsSitemapXml, normalizeApiBaseUrl, normalizeSiteUrl } from '../utils/seo-files';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return collectionsSitemapXml(normalizeSiteUrl(config.public.siteUrl), normalizeApiBaseUrl(config.serverApiBaseUrl));
+});

frontend/server/routes/sitemap-habitats.xml.ts

@@ -0,0 +1,7 @@
+import { habitatsSitemapXml, normalizeApiBaseUrl, normalizeSiteUrl } from '../utils/seo-files';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return habitatsSitemapXml(normalizeSiteUrl(config.public.siteUrl), normalizeApiBaseUrl(config.serverApiBaseUrl));
+});

frontend/server/routes/sitemap-life.xml.ts

@@ -0,0 +1,7 @@
+import { lifeSitemapXml, normalizeApiBaseUrl, normalizeSiteUrl } from '../utils/seo-files';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return lifeSitemapXml(normalizeSiteUrl(config.public.siteUrl), normalizeApiBaseUrl(config.serverApiBaseUrl));
+});

frontend/server/routes/sitemap-pokedex.xml.ts

@@ -0,0 +1,7 @@
+import { normalizeApiBaseUrl, normalizeSiteUrl, pokedexSitemapXml } from '../utils/seo-files';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return pokedexSitemapXml(normalizeSiteUrl(config.public.siteUrl), normalizeApiBaseUrl(config.serverApiBaseUrl));
+});

frontend/server/routes/sitemap-static.xml.ts

@@ -0,0 +1,7 @@
+import { normalizeSiteUrl, staticSitemapXml } from '../utils/seo-files';
+
+export default defineEventHandler((event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return staticSitemapXml(normalizeSiteUrl(config.public.siteUrl));
+});

frontend/server/routes/sitemap-threads.xml.ts

@@ -0,0 +1,7 @@
+import { normalizeApiBaseUrl, normalizeSiteUrl, threadsSitemapXml } from '../utils/seo-files';
+
+export default defineEventHandler(async (event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return threadsSitemapXml(normalizeSiteUrl(config.public.siteUrl), normalizeApiBaseUrl(config.serverApiBaseUrl));
+});

frontend/server/routes/sitemap.xml.ts

@@ -0,0 +1,7 @@
+import { normalizeSiteUrl, sitemapIndexXml } from '../utils/seo-files';
+
+export default defineEventHandler((event) => {
+  const config = useRuntimeConfig(event);
+  setHeader(event, 'Content-Type', 'application/xml; charset=utf-8');
+  return sitemapIndexXml(normalizeSiteUrl(config.public.siteUrl));
+});

frontend/server/utils/seo-files.ts

@@ -0,0 +1,273 @@
+const fallbackSiteUrl = 'https://pokopiawiki.tootaio.com';
+const fallbackApiBaseUrl = 'http://localhost:3001';
+const staticLastmod = new Date().toISOString();
+const sitemapPageSize = 72;
+
+type ChangeFrequency = 'always' | 'hourly' | 'daily' | 'weekly' | 'monthly' | 'yearly' | 'never';
+
+export type SitemapUrl = {
+  path: string;
+  lastmod?: string | null;
+  changefreq?: ChangeFrequency;
+  priority?: number;
+};
+
+type SitemapEntity = {
+  id: number;
+  createdAt?: string | null;
+  updatedAt?: string | null;
+  lastActiveAt?: string | null;
+  ancientArtifactCategory?: unknown;
+};
+
+type ListPage<T> = {
+  items: T[];
+  nextCursor: string | null;
+  hasMore: boolean;
+};
+
+const sitemapFiles = [
+  '/sitemap-static.xml',
+  '/sitemap-pokedex.xml',
+  '/sitemap-habitats.xml',
+  '/sitemap-collections.xml',
+  '/sitemap-life.xml',
+  '/sitemap-threads.xml'
+];
+
+const staticSitemapUrls: SitemapUrl[] = [
+  { path: '/', changefreq: 'weekly', priority: 1 },
+  { path: '/pokemon', changefreq: 'weekly', priority: 0.95 },
+  { path: '/event-pokemon', changefreq: 'weekly', priority: 0.85 },
+  { path: '/habitats', changefreq: 'weekly', priority: 0.9 },
+  { path: '/event-habitats', changefreq: 'weekly', priority: 0.8 },
+  { path: '/items', changefreq: 'weekly', priority: 0.9 },
+  { path: '/event-items', changefreq: 'weekly', priority: 0.8 },
+  { path: '/ancient-artifacts', changefreq: 'weekly', priority: 0.85 },
+  { path: '/recipes', changefreq: 'weekly', priority: 0.85 },
+  { path: '/dish', changefreq: 'weekly', priority: 0.8 },
+  { path: '/checklist', changefreq: 'weekly', priority: 0.8 },
+  { path: '/life', changefreq: 'daily', priority: 0.75 },
+  { path: '/threads', changefreq: 'daily', priority: 0.75 },
+  { path: '/project-updates', changefreq: 'weekly', priority: 0.6 },
+  { path: '/privacy-policy', changefreq: 'yearly', priority: 0.3 },
+  { path: '/terms-of-service', changefreq: 'yearly', priority: 0.3 },
+  { path: '/disclaimers', changefreq: 'yearly', priority: 0.3 }
+];
+
+const robotsDisallowPaths = [
+  '/admin',
+  '/login',
+  '/register',
+  '/forgot-password',
+  '/reset-password',
+  '/verify-email',
+  '/pokemon/new',
+  '/event-pokemon/new',
+  '/pokemon/*/edit',
+  '/habitats/new',
+  '/event-habitats/new',
+  '/habitats/*/edit',
+  '/items/new',
+  '/event-items/new',
+  '/items/*/edit',
+  '/ancient-artifacts/new',
+  '/ancient-artifacts/*/edit',
+  '/recipes/new',
+  '/recipes/*/edit',
+  '/automation',
+  '/events',
+  '/actions',
+  '/dream-island',
+  '/clothes'
+];
+
+export function normalizeSiteUrl(value: unknown): string {
+  return (typeof value === 'string' && value.trim() ? value.trim() : fallbackSiteUrl).replace(/\/+$/, '');
+}
+
+export function normalizeApiBaseUrl(value: unknown): string {
+  return (typeof value === 'string' && value.trim() ? value.trim() : fallbackApiBaseUrl).replace(/\/+$/, '');
+}
+
+export function robotsTxt(siteUrl: string): string {
+  const disallowLines = robotsDisallowPaths.map((path) => `Disallow: ${path}`).join('\n');
+  return `User-agent: *\nAllow: /\n${disallowLines}\nSitemap: ${siteUrl}/sitemap.xml\n`;
+}
+
+export function sitemapIndexXml(siteUrl: string): string {
+  const sitemaps = sitemapFiles
+    .map(
+      (path) => `  <sitemap>
+    <loc>${xmlEscape(siteUrl + path)}</loc>
+    <lastmod>${formatLastmod(staticLastmod)}</lastmod>
+  </sitemap>`
+    )
+    .join('\n');
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${sitemaps}
+</sitemapindex>
+`;
+}
+
+export function staticSitemapXml(siteUrl: string): string {
+  return sitemapXml(
+    siteUrl,
+    staticSitemapUrls.map((url) => ({ ...url, lastmod: staticLastmod }))
+  );
+}
+
+export async function pokedexSitemapXml(siteUrl: string, apiBaseUrl: string): Promise<string> {
+  const pokemon = await fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/pokemon');
+  return sitemapXml(
+    siteUrl,
+    pokemon.map((item) => ({
+      path: `/pokemon/${item.id}`,
+      lastmod: entityLastmod(item),
+      changefreq: 'weekly',
+      priority: 0.8
+    }))
+  );
+}
+
+export async function habitatsSitemapXml(siteUrl: string, apiBaseUrl: string): Promise<string> {
+  const habitats = await fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/habitats');
+  return sitemapXml(
+    siteUrl,
+    habitats.map((item) => ({
+      path: `/habitats/${item.id}`,
+      lastmod: entityLastmod(item),
+      changefreq: 'weekly',
+      priority: 0.75
+    }))
+  );
+}
+
+export async function collectionsSitemapXml(siteUrl: string, apiBaseUrl: string): Promise<string> {
+  const [items, artifacts, recipes] = await Promise.all([
+    fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/items'),
+    fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/ancient-artifacts'),
+    fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/recipes')
+  ]);
+  return sitemapXml(siteUrl, [
+    ...items
+      .filter((item) => !item.ancientArtifactCategory)
+      .map((item) => ({
+        path: `/items/${item.id}`,
+        lastmod: entityLastmod(item),
+        changefreq: 'weekly' as const,
+        priority: 0.75
+      })),
+    ...artifacts.map((item) => ({
+      path: `/ancient-artifacts/${item.id}`,
+      lastmod: entityLastmod(item),
+      changefreq: 'weekly' as const,
+      priority: 0.75
+    })),
+    ...recipes.map((item) => ({
+      path: `/recipes/${item.id}`,
+      lastmod: entityLastmod(item),
+      changefreq: 'weekly' as const,
+      priority: 0.7
+    }))
+  ]);
+}
+
+export async function lifeSitemapXml(siteUrl: string, apiBaseUrl: string): Promise<string> {
+  const posts = await fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/life-posts');
+  return sitemapXml(
+    siteUrl,
+    posts.map((item) => ({
+      path: `/life/${item.id}`,
+      lastmod: entityLastmod(item),
+      changefreq: 'daily',
+      priority: 0.65
+    }))
+  );
+}
+
+export async function threadsSitemapXml(siteUrl: string, apiBaseUrl: string): Promise<string> {
+  const threads = await fetchAllPages<SitemapEntity>(apiBaseUrl, '/api/threads');
+  return sitemapXml(
+    siteUrl,
+    threads.map((item) => ({
+      path: `/threads/${item.id}`,
+      lastmod: entityLastmod(item),
+      changefreq: 'daily',
+      priority: 0.65
+    }))
+  );
+}
+
+function sitemapXml(siteUrl: string, urls: SitemapUrl[]): string {
+  const body = urls.map((url) => sitemapUrlXml(siteUrl, url)).join('\n');
+
+  return `<?xml version="1.0" encoding="UTF-8"?>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+${body}
+</urlset>
+`;
+}
+
+function sitemapUrlXml(siteUrl: string, url: SitemapUrl): string {
+  return [
+    '  <url>',
+    `    <loc>${xmlEscape(siteUrl + normalizePath(url.path))}</loc>`,
+    ...(url.lastmod ? [`    <lastmod>${formatLastmod(url.lastmod)}</lastmod>`] : []),
+    ...(url.changefreq ? [`    <changefreq>${url.changefreq}</changefreq>`] : []),
+    ...(url.priority !== undefined ? [`    <priority>${formatPriority(url.priority)}</priority>`] : []),
+    '  </url>'
+  ].join('\n');
+}
+
+async function fetchAllPages<T extends SitemapEntity>(apiBaseUrl: string, path: string): Promise<T[]> {
+  const items: T[] = [];
+  let cursor: string | null = null;
+
+  do {
+    const url = new URL(path, `${apiBaseUrl}/`);
+    url.searchParams.set('limit', String(sitemapPageSize));
+    if (cursor) {
+      url.searchParams.set('cursor', cursor);
+    }
+
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`Sitemap source request failed: ${path} (${response.status})`);
+    }
+
+    const page = (await response.json()) as ListPage<T>;
+    items.push(...page.items);
+    cursor = page.hasMore ? page.nextCursor : null;
+  } while (cursor);
+
+  return items;
+}
+
+function entityLastmod(entity: SitemapEntity): string | null {
+  return entity.lastActiveAt ?? entity.updatedAt ?? entity.createdAt ?? null;
+}
+
+function normalizePath(path: string): string {
+  return path.startsWith('/') ? path : `/${path}`;
+}
+
+function formatLastmod(value: string): string {
+  const date = new Date(value);
+  return Number.isNaN(date.getTime()) ? xmlEscape(value) : date.toISOString();
+}
+
+function formatPriority(value: number): string {
+  return Math.max(0, Math.min(1, value)).toFixed(2).replace(/0$/, '').replace(/\.0$/, '.0');
+}
+
+function xmlEscape(value: string): string {
+  return value
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&apos;');
+}

frontend/src/App.vue

@@ -1,127 +0,0 @@
-<script setup lang="ts">
-import { computed, onMounted, onUnmounted, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useRouter } from 'vue-router';
-import AppShell from './components/AppShell.vue';
-import {
-  iconAction,
-  iconAdmin,
-  iconChecklist,
-  iconClothes,
-  iconDish,
-  iconDreamIsland,
-  iconEvent,
-  iconHabitat,
-  iconItem,
-  iconLife,
-  iconPokemon,
-  iconRecipe
-} from './icons';
-import { getCurrentLocale, onLocaleChange, setCurrentLocale } from './i18n';
-import { api, getAuthToken, onAuthTokenChange, setAuthToken, type AuthUser, type Language } from './services/api';
-
-const { t, locale } = useI18n();
-
-const router = useRouter();
-const currentUser = ref<AuthUser | null>(null);
-const languages = ref<Language[]>([
-  { code: 'en', name: 'English', enabled: true, isDefault: true, sortOrder: 10 },
-  { code: 'zh-CN', name: '简体中文', enabled: true, isDefault: false, sortOrder: 20 }
-]);
-let removeAuthListener: (() => void) | null = null;
-let removeLocaleListener: (() => void) | null = null;
-
-function inDevBadge() {
-  return { label: t('common.inDev'), tone: 'info' as const };
-}
-
-const navItems = computed(() => [
-  { label: t('nav.pokemon'), to: '/pokemon', icon: iconPokemon },
-  { label: t('nav.habitats'), to: '/habitats', icon: iconHabitat },
-  { label: t('nav.items'), to: '/items', icon: iconItem },
-  { label: t('nav.recipes'), to: '/recipes', icon: iconRecipe },
-  { label: t('nav.dish'), to: '/dish', icon: iconDish, badge: inDevBadge() },
-  { label: t('nav.events'), to: '/events', icon: iconEvent, badge: inDevBadge() },
-  { label: t('nav.actions'), to: '/actions', icon: iconAction, badge: inDevBadge() },
-  { label: t('nav.dreamIsland'), to: '/dream-island', icon: iconDreamIsland, badge: inDevBadge() },
-  { label: t('nav.clothes'), to: '/clothes', icon: iconClothes, badge: inDevBadge() },
-  { label: t('nav.checklist'), to: '/checklist', icon: iconChecklist },
-  { label: t('nav.life'), to: '/life', icon: iconLife },
-  { label: t('nav.admin'), to: '/admin', icon: iconAdmin }
-]);
-
-async function loadCurrentUser() {
-  if (!getAuthToken()) {
-    currentUser.value = null;
-    return;
-  }
-
-  try {
-    const response = await api.me();
-    currentUser.value = response.user;
-  } catch {
-    currentUser.value = null;
-    setAuthToken(null);
-  }
-}
-
-async function logout() {
-  try {
-    await api.logout();
-  } catch {
-    // The local session is cleared even when the server session is already gone.
-  }
-
-  currentUser.value = null;
-  setAuthToken(null);
-  await router.push('/pokemon');
-}
-
-async function loadLanguages() {
-  try {
-    const loadedLanguages = await api.languages();
-    if (loadedLanguages.length) {
-      languages.value = loadedLanguages;
-    }
-
-    if (!languages.value.some((language) => language.code === getCurrentLocale() && language.enabled)) {
-      setCurrentLocale('en');
-    }
-  } catch {
-    // Keep the built-in language list when the API is not ready yet.
-  }
-}
-
-function updateLocale(value: string) {
-  setCurrentLocale(value);
-}
-
-onMounted(() => {
-  void loadLanguages();
-  void loadCurrentUser();
-  removeAuthListener = onAuthTokenChange(() => {
-    void loadCurrentUser();
-  });
-  removeLocaleListener = onLocaleChange(() => {
-    void loadLanguages();
-  });
-});
-
-onUnmounted(() => {
-  removeAuthListener?.();
-  removeLocaleListener?.();
-});
-</script>
-
-<template>
-  <AppShell
-    :current-user="currentUser"
-    :languages="languages"
-    :locale="locale"
-    :nav-items="navItems"
-    @logout="logout"
-    @update:locale="updateLocale"
-  >
-    <RouterView :key="locale" />
-  </AppShell>
-</template>