feat(frontend): redesign onboarding wizard#5116
Conversation
|
🚅 Deployed to the rivet-pr-5116 environment in rivet-frontend
|
Code Review: feat(frontend): redesign onboarding wizardOverviewThis PR redesigns the onboarding wizard into a fixed-width card layout (~36rem), removes the "Explore Rivet Actors" step, improves animations by replacing directional sliding with a cross-fade + animated height approach, adds an Bugs / Issues1. Unhandled clipboard promise in
onClick={(e) => {
navigator.clipboard.writeText(command); // rejection silently swallowed
toast.success("Copied to clipboard");
}}The existing navigator.clipboard.writeText(command).then(
() => toast.success("Copied to clipboard"),
() => toast.error("Failed to copy"),
);2. Misleading constant name: The comment directly above it explains the animation is a cross-fade (opacity only), not a slide. The name contradicts the comment and will confuse future readers. Consider renaming to Minor Notes3. Type cast on
{"description" in step && step.description ? ( ... ) : null}4. Empty ) : (
<span />
)}This is used as a flex 5.
What Works Well
PR DescriptionThe description template was not filled out — no summary, no test plan, no checked boxes. For a UI change of this scope, please add a brief description of what changed and confirmation of how it was verified (e.g. screenshots, manual test in local dev). |
| function AnimatedHeight({ children }: { children: ReactNode }) { | ||
| const innerRef = useRef<HTMLDivElement>(null); | ||
| const [height, setHeight] = useState<number | "auto">("auto"); | ||
|
|
||
| useLayoutEffect(() => { | ||
| const el = innerRef.current; | ||
| if (!el) return; | ||
| const measure = () => setHeight(el.offsetHeight); | ||
| measure(); | ||
| const observer = new ResizeObserver(measure); | ||
| observer.observe(el); | ||
| return () => observer.disconnect(); | ||
| }, []); | ||
|
|
||
| return directionRef.current; | ||
| return ( | ||
| <motion.div | ||
| animate={{ height }} | ||
| transition={{ duration: 0.25, ease: [0.4, 0, 0.2, 1] }} | ||
| style={{ overflow: "hidden" }} | ||
| > | ||
| <div ref={innerRef}>{children}</div> | ||
| </motion.div> | ||
| ); |
There was a problem hiding this comment.
i feel like this is supported in motion by a layout prop or height: auto
2 participants
Redesigns the Rivet onboarding wizard (cloud/compute flavor) for clearer information architecture, a more cohesive look, and smoother step transitions.
Structure
descriptionslot toStepperForm(singlePage) so the intro line is structural instead of ad-hoc per step.Per-step
StepNumberpattern. One consistent command treatment.Animation
AnimatedHeightwrapper animates the card between differently-sized steps instead of snapping.useStepperDirection,customprops) and the unusedisLastVisibleprop onStepPanel.Misc
size-5box (the Rivet mark's aspect ratio didn't match the others under the old fixed-width sizing).🤖 Generated with Claude Code