Hacktoberfest 2026:维护者为十月标记出来的 issue,仍然开放、适合新手。 浏览 Hacktoberfest issue

The organizer's preview opens in a new tab with no way back to the signup

未关闭
#587 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看

维护者通常 1 天内回复

还没有人认领这个 Issue。

评估

难度
4/5
预计耗时
3-5 天
新手友好度
45/100
Issue 类型
功能
描述清晰度
描述清楚
活跃度
活跃

调研方向

Start with src/components/banner.tsx and src/app/s/[slug]/signup-view.tsx, then trace the Preview links in src/components/signup/SignupHeader.tsx and src/components/signup/HeaderParts.tsx. Review the listed unit and e2e tests, plus the help page text and screenshot mentioned in the issue. Done means the preview includes a working Back to editing link for every status, opens in the same tab, and the updated checks and listed project commands pass.

由索引模型根据 Issue 内容生成。

描述

enhancement pipeline:proposed pipeline:ux

Needs your OK: this changes how Preview opens and adds a link back to the signup on the preview page. Swap pipeline:proposed for pipeline:ready to have it built.

What happens

  • Preview opens a new tab. On a computer, the Preview link in SignupHeader (src/components/signup/SignupHeader.tsx) has target="_blank". On main a phone has no Preview at all. #578 adds one to the phone's More actions sheet (PhonePreviewItem in src/components/signup/HeaderParts.tsx), also as a new tab, "as on a computer".
  • The preview page has no way out. src/app/app/signups/[id]/preview/page.tsx sits outside the organizer layout. It has no header, no breadcrumb and no link back. It shows the Preview banner ("This is what people will see once you publish. No signups will be saved.") and the page, and nothing else. A draft can't be published from it.
  • The new tab has no history. The page itself offers no way back, so the organizer has to find the editor through the browser's tabs. On a phone that tab is easy to lose.
  • Assistants link here too. The AI connector gives organizers links.preview (previewPageUrl in src/lib/links.ts). They land on the same page, with no way into the editor.

To see it: create a signup with one slot. On a computer, choose Preview. A new tab opens on the preview, and nothing on it leads back to the signup or to Publish.

Fix, in outline

  • Put "Back to editing" on the preview page. Add it as a link in the Preview banner, after the text. Point it at /app/signups/[id]. That route sends the organizer to Build today, and will send a draft to #502's review page if that lands, so the link stays right.
    • Banner (src/components/banner.tsx) takes only a title and a body. Give it an optional action slot. Don't draw a second banner.
    • SignupView (src/app/s/[slug]/signup-view.tsx) draws the preview banner in preview mode. Only the preview page uses that mode, so the page can pass the link in.
  • Open Preview in the same tab. Drop target="_blank" from the computer's Preview link in SignupHeader and from PhonePreviewItem. The browser's Back then works as well.
  • Leave Publish where it is. Back to editing lands one tap from Publish and share: the header button on a computer, the bar at the bottom on a phone after #578.

Watch for

  • Tests that pin the new tab. tests/e2e/help/create-and-publish-a-signup.spec.ts opens Preview by waiting for a new page. #578's MobileSignupHeader.test.tsx checks target="_blank" and that the sheet closes "as Preview opens its tab". #578's SignupHeader.test.tsx checks the link too.
  • Help page. create-and-publish-a-signup says Preview "opens in a new tab". Update the text and any screenshot that shows the preview (help-pages skill).
  • Every status. The banner's text differs for draft, open, closed and archived (previewCopy in SignupView). The link goes on all four.
  • The load-error card. When the signup can't load, the page shows SignupLoadError, which already has "Back to dashboard". Leave it.
  • Telemetry. signup.previewed is recorded when the page loads. Nothing about it changes.
  • CHANGELOG: add a line under Unreleased › Changed.

Choices this makes

  • Same tab on a phone and a computer. Once the page has its own way back, a new tab only adds a tab to lose. The other option is the same tab on a phone only, keeping a computer's new tab for checking side by side.
  • No Publish on the preview page. Publishing here would need #580's check and #574's share panel on this page too. Back to editing puts Publish one tap away. A Publish and share button in the banner for drafts could follow as its own issue.
  • The words "Back to editing", with a left arrow, for every status. Participant pages say "Back to the signup", but here the organizer goes back to change it. For an open or closed signup it still leads to Build.
  • In the banner, not a bar above it, so everything under the banner still looks exactly like the public page.

Order

After #578, because it adds the phone's Preview item and rewrites the computer's Preview link and the help text about it. Built first, this change would have to be redone on all three.

Done when

  • On a computer and at 390px wide, Preview opens in the same tab, and the browser's Back returns to the signup.
  • The preview page shows "Back to editing" in its banner for a draft, an open, a closed and an archived signup. It leads to /app/signups/[id].
  • The preview page opened on its own, as from an assistant's link, shows the same link.
  • The tests that pinned the new tab check the same tab instead, and an e2e check follows Back to editing from the preview to the signup.
  • pnpm lint && pnpm typecheck && pnpm knip && pnpm test pass.

Found by the UX walkthrough (scenarios X1 and O1) on 2026-10-24, and checked against the code on main at 4ed27a9.


Generated by Claude Code

主要语言
TypeScript
星标
19
派生
4
平均合并
21 小时 3 分钟
30 天内合并 PR
176

环境准备

  • 提供 Dockerfile 或 Docker Compose 文件
  • 没有 Pull Request 模板
  • 阅读贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

richshaw/OpenSignup 的其他 Issue

查看 richshaw/OpenSignup 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。