Hacktoberfest 2026: những issue maintainer đã đánh dấu cho tháng Mười, đang mở và phù hợp người mới. Xem issue Hacktoberfest

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

Đang mở
  • Có gì không ổn?
#587 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

Chưa có ai nhận issue này.

Đánh giá

Độ khó
4/5
Thời gian dự kiến
3-5 ngày
Mức phù hợp với người mới
45/100
Loại issue
Tính năng
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Sôi nổi
Công nghệ
next.js, react, typescript
Lĩnh vực
accessibility, frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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

Ngôn ngữ chính
TypeScript
Star
19
Fork
4
Merge trung bình
20 giờ 9 phút
Pull request đã merge (30 ngày)
156

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của richshaw/OpenSignup

Tất cả issue của richshaw/OpenSignup

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.