AnswerHub frontend redesign + rename — spec

⚠️ Built, and partly superseded by SPEC_ACCOUNTS.md. The restyle shipped. But the account pages this spec styles no longer exist: register, magic-login, 2FA-code and the local login form were removed when identity moved to accounts.siao.ai. /answerhub/login is now a redirect, not a page, and the two-factor-and-magic-login test file is deleted. The sign-in page to style is Logto's, and its CSS lives at git-siao-ai/logto/sign-in-experience.css. Everything about submissions, blog, knowledge-base and admin styling still holds.

What this covers: the AnswerHub rename and frontend restyle — shared tokens, page structure, what was cut from nav. Visual only.

For what is built or deployed, see ClaudeDocs/HANDOFF.md — status deliberately does not live here. Lives in the apps-siao-ai repo, on top of the already-complete Lwopan migration backend (SPEC_LWOPAN_MIGRATION.md, tickets 01–09, all done and tested). This spec covers the restyle only — no new backend behavior, no new information architecture. Full decision trail: NOTES_APPS.md ch.7.

Problem Statement

The Lwopan migration shipped fully working backend logic (accounts, 2FA, magic login, submissions with likes/comments, admin moderation, blog, knowledge base, search) but the frontend built alongside it is bare-bones: plain HTML <input>/<textarea> elements, one shadcn Button, no shared navigation, no visual identity, and the temporary name "Lwopan" was never meant to be permanent. The owner wants a real name and a real visual pass before this goes further — asked to compare it after seeing the working-but-unstyled version and confirmed "後端完整，前端完全沒有" (backend complete, frontend basically absent).

Solution

Rename the product to AnswerHub（答案庫）, permanently retiring "Lwopan" as a label (the /lwopan route prefix and internal identifiers are a separate, later cleanup — not part of this spec, see Out of Scope). Cut blog and knowledge base from the navigable product entirely for now — the backend code stays, but neither appears in the UI or nav. Restyle every existing page using the same page structure the old ~/Lwopan/learning-platform app had (hero homepage with search, existing upload/detail/profile/settings layouts) — this is a visual system change, not an information-architecture redesign. Adopt SiaoHub's exact color token system (paper/ink light theme, dark-mode counterpart, sage-green accent) by overwriting apps-siao-ai's existing shadcn oklch tokens, so the whole family shares one palette rather than each app maintaining its own. Add a shared header/nav across all AnswerHub pages, replace raw HTML form elements with shadcn's Input/Textarea/Card, and drop every remnant of Liquid Glass (decorative blurred background shapes included).

User Stories

1. As a visitor, I want to land on AnswerHub's homepage and see a hero section with the product name and a search bar, so that I immediately understand what this product does and can start looking for an answer right away — matching the old app's homepage structure, not a blank or list-only page.
2. As a visitor, I want prominent "新增解答" and "我的解答" actions on the homepage, so that both core actions (contribute, manage mine) are one click away without hunting through a nav menu.
3. As a visitor or logged-in user, I want a consistent header on every AnswerHub page showing the product name, my login state, and a way back to the main list, so that I never lose my place navigating between upload, detail, profile, and settings pages.
4. As a user, I want the login, register, magic-login, 2FA-code, and settings forms to use styled inputs (not raw unstyled HTML elements), so that the product feels like one coherent piece of software instead of a developer scaffold.
5. As a user, I want submission cards, the submission detail page, and the admin review list to visually read as related, so the product feels designed rather than assembled from independent pages.
6. As a visitor, I want light and dark mode to both look intentional (not just an inverted default), matching the SiaoHub token system's existing light/dark pair.
7. As the owner, I want the same color tokens shared between apps-siao-ai and siaohub rather than two palettes to keep in sync, so that a future palette tweak is one edit, not two.
8. As the owner, I want blog and knowledge base completely absent from AnswerHub's navigation and homepage, so the product's surface area matches what's actually being offered right now (answers only), not what the backend happens to support.
9. As a visitor, I want the search bar on the homepage to be present and usable (dispatches a query) even though it returns no live results yet, so the interface doesn't look broken or half-finished — consistent with ticket 09's "search unavailable" state.
10. As a developer maintaining this later, I want the visual restyle to not have changed any backend contract (API routes, Prisma schema, auth flow), so that the full existing Playwright test suite's behavioral assertions (what happens on submit, what status codes come back) keep passing without logic changes — only text/selector updates where the DOM changed.

Implementation Decisions

• Naming: product is "AnswerHub"（答案庫 as the Chinese subtitle）. This replaces "Lwopan" in all user-facing copy (page titles, hero text, nav header). The /lwopan URL prefix, internal file/variable names, and test file names are not renamed as part of this spec — that's a distinct, larger, deliberately deferred cleanup (see Out of Scope), so as not to block the visual work on a mechanical rename pass.
• Scope cut: blog (/lwopan/blog/*) and knowledge base (/lwopan/knowledge/*) routes and their backend code are left in place, untouched, but get no nav entry point and no links from any restyled page. They become unreachable via normal navigation (still reachable by direct URL, which is fine — not a security boundary, just not promoted).
• Visual tone: minimal, tool-like (Notion/Linear-style restraint) over a playful/colorful direction — chosen for a functional "look something up" product, not a lifestyle/engagement product.
• Color system: apps-siao-ai's shadcn-generated oklch CSS variables (--background, --foreground, --accent, etc., set by shadcn init) get their values replaced with the exact values from siaohub/src/app/globals.css — paper (#FAF9F6) / ink (#1A1A1A) light theme, #17161a / #e6e6e6 dark theme, sage-green accent (#5f8567 light / #83b58c dark). This is a shared token set, not a copy that can drift — future palette changes should be made with the intent of updating both repos together. The nav homepage's own --bg/--accent-brand tokens (decided in SPEC_APPS.md) are explicitly not touched by this change — they stay whatever they already are, this restyle is scoped to /lwopan only.
• Component scope: this pass only replaces raw HTML form elements with shadcn Input, Textarea, and Card. Dialog, Dropdown, Tabs, Toast, and other interactive Radix primitives are explicitly not introduced this round — nothing in the current page set needs them; add them when a real interaction (e.g. a modal-based admin action) actually calls for one.
• Shared navigation: a header component added to app/lwopan/layout.tsx, present on every page under /lwopan. Shows the AnswerHub name/mark, current auth state (login/logout, profile link), and a link back to the homepage/list. This is new structure, not present in the old app or the current unstyled build.
• Page-by-page approach: mirror the old learning-platform app's page structure page-by-page (homepage hero + search + CTAs, login/register forms, submission upload/detail, profile, settings, admin review list) rather than inventing new layouts. Concretely this means, for each page already built in the Lwopan migration, looking at the equivalent old page's structure as a layout reference and reimplementing it with the new tokens/components — not redesigning the information architecture. Liquid Glass effects and decorative blurred background shapes from the old homepage are dropped entirely, per the standing "Liquid Glass: dropped entirely" decision in SPEC_LWOPAN_MIGRATION.md.
• Homepage content: hero section with the AnswerHub name, a subtitle, a search bar (wired to the existing ticket-09 search endpoint — still returns available: false, this spec doesn't change that), and two primary actions ("新增解答" → submission upload, "我的解答" → the current user's submissions). This replaces the current homepage, which only shows a login/register CTA.

Testing Decisions

• Good tests here assert on rendered, externally-observable page content and structure — same seam already established across the Lwopan migration's Playwright suite (tests/*.spec.ts): rendered DOM, route status codes, not component internals.
• No new seam — this is a pure restyle over already-tested backend behavior, so the existing test files' behavioral assertions (what happens on form submit, what status code an API call returns, what a banned user can/can't do) should keep passing unchanged.
• Expect selector/text updates across most existing spec files wherever the DOM actually changes shape — e.g. any test that locates a raw <input> by placeholder text will need to keep working against the shadcn Input (same placeholder text, different underlying markup — should mostly transfer, but verify each file after the restyle rather than assuming).
• New assertions to add: the shared header renders on every /lwopan page with correct auth-state-dependent content; the homepage renders the hero/search/CTA structure; blog and knowledge base links are absent from any rendered nav (even though their routes still work directly).
• Prior art: every existing tests/*.spec.ts file in apps-siao-ai (account, profile, two-factor-and-magic-login, submissions, admin, blog, knowledge, search) — extend/update these rather than starting a new suite.

Out of Scope

• Renaming the /lwopan URL path, internal file names (app/lwopan/), variable names, or test file names to match "AnswerHub" — this is a larger mechanical rename deliberately deferred to its own later pass, not bundled into the visual restyle.
• Building out blog or knowledge base UI — their code stays as-is, unreachable via nav; reviving them is a separate future decision, not a "temporarily hidden, coming back automatically" state.
• Any new Radix/shadcn interactive components (Dialog, Dropdown, Tabs, Toast) — add only when a real interaction need arises.
• Wiring live Algolia search — the search bar dispatches to the existing inert endpoint; going live with search results is still deferred per SPEC_LWOPAN_MIGRATION.md.
• Any backend/schema/API changes — this spec is visual-only.
• Deployment — still local-only per the standing "目前不上線" decision carried through the whole apps.siao.ai project.
• A logo or custom mark for AnswerHub — text-based branding only this round, unless design work surfaces an obvious need.

Further Notes

• The owner explicitly chose to share one color-token set across apps-siao-ai and siaohub rather than maintain two similar-but- distinct palettes — this is a standing preference worth applying if a third app joins the family later, not a one-off for this spec.
• Naming direction went through several rounds before landing: compass/ direction imagery (rejected — "既有詞彙" was still considered too abstract), Taiwanese-Hokkien hard-translation style like 抖音'sTikTok naming logic (rejected as too much effort right now — "懶得折騰 了"), several subject/content-adjective-prefixed "OO答案庫" candidates (all rejected without a clear reason given), landing on the owner's own proposal: AnswerHub（答案庫）. Full back-and-forth in NOTES_APPS.md ch.7 — don't re-litigate the rejected directions if renaming comes up again later.