From 4529590f716fdcab857e64c7f2ea5df249f3e081 Mon Sep 17 00:00:00 2001
From: Kevin Deng <sxzz@sxzz.moe>
Date: Sun, 23 Aug 2026 07:01:07 +0900
Subject: [PATCH] Add localized error page with recovery actions

---
 app/error.vue        | 252 +++++++++++++++++++++++++++++++++++++++++++
 app/locales/ja-jp.ts |  11 ++
 app/locales/ko-kr.ts |  11 ++
 app/locales/zh-cn.ts |  10 ++
 app/locales/zh-hk.ts |  10 ++
 app/locales/zh-tw.ts |  10 ++
 6 files changed, 304 insertions(+)
 create mode 100644 app/error.vue

diff --git a/app/error.vue b/app/error.vue
new file mode 100644
index 0000000..c39aee0
--- /dev/null
+++ b/app/error.vue
@@ -0,0 +1,252 @@
+<script setup lang="ts">
+import { useStyle } from '~/composables/style.ts'
+import { revealRestoredPreferences } from '~/utils/preference-restore.ts'
+import serifStylesheetUrl from '~/assets/fonts/fonts-serif.css?url'
+import type { NuxtError } from '#app'
+
+const props = defineProps<{
+  error: NuxtError
+}>()
+
+const { t, meta } = useT()
+const style = useStyle()
+const statusCode = computed(() =>
+  Number(props.error.status || props.error.statusCode || 500),
+)
+const isNotFound = computed(() => statusCode.value === 404)
+const title = computed(() =>
+  t(isNotFound.value ? 'error.notFoundTitle' : 'error.genericTitle'),
+)
+const description = computed(() =>
+  t(
+    isNotFound.value ? 'error.notFoundDescription' : 'error.genericDescription',
+  ),
+)
+
+// app.vue is not mounted while Nuxt renders error.vue. Finish the same locale
+// restoration here so a saved language never waits for the four-second
+// emergency timeout before the error page becomes visible.
+const { ready: localeReady } = useLocaleChoice()
+if (import.meta.client) {
+  watch(
+    localeReady,
+    async (ready) => {
+      if (!ready) return
+      await nextTick()
+      revealRestoredPreferences(meta.value.htmlLang)
+    },
+    { flush: 'post' },
+  )
+}
+
+const serifWanted = ref(false)
+watchEffect(() => {
+  if (style.value === 'serif') serifWanted.value = true
+})
+
+useHead({
+  htmlAttrs: {
+    lang: () => meta.value.htmlLang,
+    'data-style': () => style.value,
+  },
+  title: () => `${statusCode.value} · ${title.value} · ${t('meta.title')}`,
+  meta: [
+    {
+      name: 'description',
+      content: () => description.value,
+    },
+  ],
+  link: () =>
+    serifWanted.value ? [{ rel: 'stylesheet', href: serifStylesheetUrl }] : [],
+})
+
+function goBack(): void {
+  if (!import.meta.client) return
+  if (window.history.length > 1) window.history.back()
+  else window.location.assign('/')
+}
+
+function reload(): void {
+  if (import.meta.client) window.location.reload()
+}
+</script>
+
+<template>
+  <div class="min-h-screen flex flex-col bg-paper">
+    <!--
+      THESIS: A missing page is a lost proof sheet, not a framework failure.
+      OWN-WORLD: Warm paper, cool ink, hairline guides, and one misregistered Han glyph.
+      STORY: Name the problem plainly, reassure the reader, and offer an immediate way back.
+      FIRST VIEWPORT: A compact preference bar sits above a split specimen-and-copy composition; recovery actions follow the explanation.
+      FORM: EXISTING-PROOF-SHEET — the established world extended as a focused error state, with no new visual system introduced.
+      FINISH: Reviewed at desktop, mobile, and the reported viewport; no new image assets or durable system changes ship here.
+    -->
+    <header class="bg-paper">
+      <div class="mx-auto max-w-6xl px-4 sm:px-6">
+        <div class="h-[var(--nav-h)] flex items-center">
+          <a
+            href="/"
+            class="focus-ring mr-auto flex shrink-0 items-baseline gap-2"
+          >
+            <span class="whitespace-nowrap text-base font-medium">
+              {{ t('meta.title') }}
+            </span>
+            <span
+              class="hidden whitespace-nowrap text-sm text-mute xs:inline"
+              >{{ t('meta.name') }}</span
+            >
+          </a>
+
+          <nav
+            class="flex items-center gap-1 text-sm text-mute"
+            :aria-label="t('nav.options')"
+          >
+            <StyleToggle />
+            <LocaleMenu />
+            <ThemeToggle />
+          </nav>
+        </div>
+      </div>
+    </header>
+
+    <main
+      class="mx-auto max-w-6xl w-full flex flex-1 items-center px-4 py-10 sm:px-6 sm:py-14"
+    >
+      <section
+        class="grid w-full items-center gap-10 md:grid-cols-[minmax(16rem,0.8fr)_minmax(0,1fr)] lg:gap-24 md:gap-16"
+        aria-labelledby="error-title"
+      >
+        <div class="error-proof mx-auto max-w-80 w-full" aria-hidden="true">
+          <span class="error-axis error-axis-x" />
+          <span class="error-axis error-axis-y" />
+
+          <div class="error-glyph overprint hanji-cn">
+            <span
+              class="overprint-layer baseline"
+              style="--i: 0; --n: 3; --layer-color: var(--c-ink)"
+              >失</span
+            >
+            <span
+              class="overprint-layer"
+              style="--i: 1; --n: 3; --layer-color: var(--c-g1)"
+              >失</span
+            >
+            <span
+              class="overprint-layer"
+              style="--i: 2; --n: 3; --layer-color: var(--c-g2)"
+              >失</span
+            >
+          </div>
+
+          <span class="error-code tabular font-mono">{{ statusCode }}</span>
+        </div>
+
+        <div class="max-w-xl md:py-6">
+          <h1
+            id="error-title"
+            class="text-balance text-3xl font-normal leading-tight sm:text-4xl"
+          >
+            {{ title }}
+          </h1>
+          <p class="mt-5 max-w-[34rem] text-base text-soft leading-relaxed">
+            {{ description }}
+          </p>
+
+          <div class="mt-8 flex flex-wrap items-center gap-3">
+            <a
+              v-if="isNotFound"
+              href="/"
+              class="focus-ring h-10 inline-flex items-center gap-2 rounded-md bg-ink px-4 text-sm text-paper transition-opacity duration-150 hover:opacity-85"
+            >
+              <span class="i-ri-arrow-left-line" aria-hidden="true" />
+              {{ t('error.home') }}
+            </a>
+            <button
+              v-else
+              type="button"
+              class="focus-ring h-10 inline-flex items-center gap-2 rounded-md bg-ink px-4 text-sm text-paper transition-opacity duration-150 hover:opacity-85"
+              @click="reload"
+            >
+              <span class="i-ri-refresh-line" aria-hidden="true" />
+              {{ t('error.reload') }}
+            </button>
+
+            <button
+              v-if="isNotFound"
+              type="button"
+              class="focus-ring h-10 inline-flex items-center gap-2 btn-ghost px-4 text-sm"
+              @click="goBack"
+            >
+              {{ t('error.back') }}
+            </button>
+            <a
+              v-else
+              href="/"
+              class="focus-ring h-10 inline-flex items-center gap-2 btn-ghost px-4 text-sm"
+            >
+              {{ t('error.home') }}
+            </a>
+          </div>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style scoped>
+.error-proof {
+  position: relative;
+  display: grid;
+  aspect-ratio: 1;
+  place-items: center;
+  border-block: 1px solid var(--c-rule);
+}
+
+.error-axis {
+  position: absolute;
+  display: block;
+  background: var(--c-rule);
+}
+
+.error-axis-x {
+  right: 0;
+  left: 0;
+  top: 50%;
+  height: 1px;
+}
+
+.error-axis-y {
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 1px;
+}
+
+.error-glyph {
+  --fan-step: 3px;
+
+  width: 11rem;
+  height: 11rem;
+  font-size: 11rem;
+  line-height: 1;
+}
+
+.error-glyph .overprint-layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.error-code {
+  position: absolute;
+  right: 0;
+  bottom: 0.75rem;
+  padding-left: 0.5rem;
+  color: var(--c-ink-mute);
+  background: var(--c-paper);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+}
+</style>
diff --git a/app/locales/ja-jp.ts b/app/locales/ja-jp.ts
index d9c7deb..b7bc6dc 100644
--- a/app/locales/ja-jp.ts
+++ b/app/locales/ja-jp.ts
@@ -44,6 +44,17 @@ export const jaJP: typeof zhCN = {
     back: '漢字表に戻る',
     options: '表示設定',
   },
+  error: {
+    notFoundTitle: 'このページは漢字表にありません',
+    notFoundDescription:
+      'リンクが変更されたか、アドレスが正しくない可能性があります。漢字表に戻って、漢字の検索と比較を続けられます。',
+    genericTitle: 'このページは一時的に開けません',
+    genericDescription:
+      'ページで問題が発生しました。再読み込みするか、漢字表に戻ってください。',
+    home: '漢字表に戻る',
+    back: '前のページへ',
+    reload: '再読み込み',
+  },
   options: {
     title: '表示設定',
     language: '表示言語',
diff --git a/app/locales/ko-kr.ts b/app/locales/ko-kr.ts
index a138f22..6f8c41f 100644
--- a/app/locales/ko-kr.ts
+++ b/app/locales/ko-kr.ts
@@ -44,6 +44,17 @@ export const koKR: typeof zhCN = {
     back: '한자표로 돌아가기',
     options: '표시 설정',
   },
+  error: {
+    notFoundTitle: '이 페이지는 한자표에 없습니다',
+    notFoundDescription:
+      '링크가 바뀌었거나 주소가 잘못되었을 수 있습니다. 한자표로 돌아가 한자 검색과 비교를 계속할 수 있습니다.',
+    genericTitle: '이 페이지를 지금 열 수 없습니다',
+    genericDescription:
+      '페이지에 문제가 발생했습니다. 다시 불러오거나 한자표로 돌아가 주세요.',
+    home: '한자표로 돌아가기',
+    back: '이전 페이지로',
+    reload: '다시 불러오기',
+  },
   options: {
     title: '표시 설정',
     language: '인터페이스 언어',
diff --git a/app/locales/zh-cn.ts b/app/locales/zh-cn.ts
index 83d7946..147caf3 100644
--- a/app/locales/zh-cn.ts
+++ b/app/locales/zh-cn.ts
@@ -43,6 +43,16 @@ export const zhCN = {
     back: '返回字表',
     options: '显示选项',
   },
+  error: {
+    notFoundTitle: '这一页不在字表里',
+    notFoundDescription:
+      '链接可能已经更改，或地址有误。你可以返回字表，继续查找和对照汉字。',
+    genericTitle: '这一页暂时打不开',
+    genericDescription: '页面遇到了问题。请重新载入，或返回字表继续浏览。',
+    home: '返回字表',
+    back: '返回上一页',
+    reload: '重新载入',
+  },
   options: {
     title: '显示选项',
     language: '界面语言',
diff --git a/app/locales/zh-hk.ts b/app/locales/zh-hk.ts
index 513115f..379b504 100644
--- a/app/locales/zh-hk.ts
+++ b/app/locales/zh-hk.ts
@@ -44,6 +44,16 @@ export const zhHK: typeof zhCN = {
     back: '返回字表',
     options: '顯示選項',
   },
+  error: {
+    notFoundTitle: '這一頁不在字表裏',
+    notFoundDescription:
+      '連結可能已經變更，或網址有誤。你可以返回字表，繼續查找和對照漢字。',
+    genericTitle: '這一頁暫時無法開啟',
+    genericDescription: '頁面遇到了問題。請重新載入，或返回字表繼續瀏覽。',
+    home: '返回字表',
+    back: '返回上一頁',
+    reload: '重新載入',
+  },
   options: {
     title: '顯示選項',
     language: '介面語言',
diff --git a/app/locales/zh-tw.ts b/app/locales/zh-tw.ts
index cb835d0..db1c789 100644
--- a/app/locales/zh-tw.ts
+++ b/app/locales/zh-tw.ts
@@ -44,6 +44,16 @@ export const zhTW: typeof zhCN = {
     back: '返回字表',
     options: '顯示選項',
   },
+  error: {
+    notFoundTitle: '這一頁不在字表裡',
+    notFoundDescription:
+      '連結可能已經變更，或網址有誤。你可以返回字表，繼續查找和對照漢字。',
+    genericTitle: '這一頁暫時無法開啟',
+    genericDescription: '頁面遇到了問題。請重新載入，或返回字表繼續瀏覽。',
+    home: '返回字表',
+    back: '返回上一頁',
+    reload: '重新載入',
+  },
   options: {
     title: '顯示選項',
     language: '介面語言',
-- 
2.51.2