Redesign three-line poem page to immersive layout and liquid‑glass comments

[XRYua]

Motivation

• Convert the three-line love‑letter activity into an immersive full‑page experience without sidebars and make the comment area more polished while keeping the existing color palette.
• Restore the original local browser‑stored three‑line comments so past entries remain visible and usable alongside the Twikoo guestbook.

Description

• Replace the grid layout entry with an immersive shell in src/pages/three-line-poem.astro by using Layout and a full‑height .immersive-page-shell container.
• Rework src/components/ThreeLinePoemActivity.astro into a two‑column immersive layout: left column is an intro/stats panel and right column contains the comment studio, with responsive fallbacks.
• Add legacy localStorage support for previous three‑line entries under the key mizuki-three-line-poems, including readLegacyPoems, renderLegacyPoems, a #legacy-poem-list UI, a refresh button and in‑place like handling so old comments are restored and can be liked.
• Consolidate Twikoo mounting to a single #three-line-twikoo element and introduce a setupThreeLinePoemPage() initializer that runs on DOMContentLoaded, swup content replace and storage events to keep comments consistent after navigation.
• Add scoped liquid‑glass styling for the three‑line comment area in src/styles/twikoo.css to give inputs, comment cards and action areas a softened glassy appearance while preserving the site color variables.

Testing

• Ran git diff --check to ensure no whitespace/errors from the diff and fixed style issues where necessary (passed).
• Ran pnpm astro check to validate build types and Astro diagnostics; this run reported unrelated existing errors in the project (duplicate identifier for ThreeLinePoemEntry in src/pages/[...page].astro) and therefore the check did not complete cleanly; the errors are pre‑existing and not caused by these changes.
• Verified the modified files src/pages/three-line-poem.astro, src/components/ThreeLinePoemActivity.astro, and src/styles/twikoo.css were formatted/updated locally.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mizuki	Ready	Preview, Comment	Mar 21, 2026 6:32pm

[gemini-code-assist]

Important

Installation incomplete: to start using Gemini Code Assist, please ask the organization owner(s) to visit the Gemini Code Assist Admin Console and sign the Terms of Services.

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8a1e580090

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Load twikoo.css before relying on its three-line overrides

These selectors never take effect as written because the new rules were moved out of ThreeLinePoemActivity.astro, but src/styles/twikoo.css still is not imported anywhere in the repo (I checked Layout.astro, ThreeLinePoemActivity.astro, and a repo-wide rg -n "twikoo.css" src). As a result, both /three-line-poem/ and the embedded /three-line-poem-space/ fall back to Twikoo’s default styling, so the liquid-glass redesign in this commit does not actually ship.

Useful? React with 👍 / 👎.