Repository navigation
feat: compact two-row kit layout with brand-logo platform selector - #7
Conversation
Replace the tall stacked header (eyebrow + large essence title + always-open Launch Plan card + pills + toolbar) with two compact rows so content sits above the fold: - Header: product name only, with Start over (secondary) and Export (primary) icon actions on the right. - Toolbar: a Plan tab + platform selector using real brand logos (Product Hunt, Hacker News, Reddit, X via Simple Icons; AppSumo monogram), with the Edit/Launch ops/Preview tabs on the right. The Launch Plan opens in the content area via its Plan tab instead of a permanent card on top. - Drop the eyebrow, Copy all, and per-platform Regenerate from this screen (Export covers the kit; each field keeps its own Copy). Launch ops stays a Product-Hunt-only tab. Add a reusable PlatformLogo component. Update PostKit props/tests accordingly. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughRemoves per-platform regeneration and "copy all" functionality from ChangesPostKit Plan Mode Refactor
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@components/post-kit/PostKit/PostKit.tsx`:
- Line 52: Add explicit `type="button"` attribute to all plain button elements
in the PostKit component to prevent them from defaulting to submit behavior and
accidentally submitting surrounding forms. Locate the three button elements at
lines 52, 71, and 98 in PostKit.tsx and add the type attribute to each one to
explicitly set them as regular buttons rather than submit buttons.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 3847cc9d-581d-4827-86c7-82c4a545ae31
📒 Files selected for processing (7)
app/runs/[id]/page.tsxcomponents/brand/PlatformLogo/PlatformLogo.tsxcomponents/brand/PlatformLogo/PlatformLogo.types.tscomponents/brand/PlatformLogo/index.tscomponents/post-kit/PostKit/PostKit.test.tsxcomponents/post-kit/PostKit/PostKit.tsxcomponents/post-kit/PostKit/PostKit.types.ts
💤 Files with no reviewable changes (2)
- components/post-kit/PostKit/PostKit.test.tsx
- components/post-kit/PostKit/PostKit.types.ts
| <div className="flex flex-wrap items-center gap-1.5"> | ||
| {plan && ( | ||
| <> | ||
| <button |
There was a problem hiding this comment.
Set explicit type="button" on toolbar buttons.
These plain <button> elements default to submit behavior and can accidentally submit a surrounding form.
Proposed fix
<button
+ type="button"
onClick={() => setPlanMode(true)}
aria-label="Launch plan"
@@
<button
key={p.id}
+ type="button"
disabled={!ready}
aria-label={p.name}
@@
<button
key={v}
+ type="button"
onClick={() => setView(v)}
className={`whitespace-nowrap rounded-md px-3 py-1.5 text-sm transition-colors ${Also applies to: 71-71, 98-98
🧰 Tools
🪛 React Doctor (0.5.6)
[warning] 52-52: Your users can submit the form by accident because a <button> with no type defaults to submit.
Set an explicit button type so plain buttons do not submit forms by accident: type="button", "submit", or "reset".
(button-has-type)
[warning] 52-52: This JSX crashes because React isn't in scope.
If you're on React 17+ with the new JSX transform, disable this rule. Otherwise import React at the top of the file.
(react-in-jsx-scope)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@components/post-kit/PostKit/PostKit.tsx` at line 52, Add explicit
`type="button"` attribute to all plain button elements in the PostKit component
to prevent them from defaulting to submit behavior and accidentally submitting
surrounding forms. Locate the three button elements at lines 52, 71, and 98 in
PostKit.tsx and add the type attribute to each one to explicitly set them as
regular buttons rather than submit buttons.
This branch was successfully deployed
1 participant
What & why
The kit page (
/runs/[id]) stacked too many full-width rows before any content — wizard stepper, an eyebrow, a largecore.essencetitle (often 3 lines), an always-open Launch Plan card, the platform pills, and a toolbar with four action buttons — forcing a scroll to reach the actual kit. This compacts it to two rows so content sits above the fold.Direction was chosen interactively against a throwaway
/runs/mockupharness (four switchable layouts, sample data, no API). The maintainer picked a refined "plan-as-a-tab" layout; the mockup has been deleted.New layout
Plantab + a platform selector using real brand logos, with the Edit · Launch ops · Preview tabs on the right.Plantab instead of a permanent card pushing everything down.New component
components/brand/PlatformLogo— brand logos via Simple Icons (Product Hunt, Hacker News/Y, Reddit, X) in brand colors; AppSumo (no open logo) uses a monogram fallback.Accessibility preserved: logo-only selector buttons carry
aria-label(e.g. "Hacker News"), so existing role/name queries and the view-tab names ("Launch ops") keep working.How it was tested
Verified the real
PostKit(not just the mockup) in the browser with sample data: header, logo selector, view tabs, the Launch ops tab (PH only), and the Plan tab swapping the content area — all render and switch correctly, content above the fold.pnpm test— 88 passed (16 files)pnpm typecheckpnpm lintpnpm buildChecklist
PlatformLogofolder).envvalues committedScreenshots / notes
Plantab, and Copy all / Regenerate removed from the kit screen.Summary by CodeRabbit
New Features
Removals
Bug Fixes