Skip to content

Conversation

@nourmalaeb
Copy link
Collaborator

@nourmalaeb nourmalaeb commented Jan 21, 2026

Summary

Implements a two-level tab navigation for the Process Builder edit page with URL state sync.

Key Patterns

Navigation Config (navigation-config.ts)

  • Single source of truth for steps and sections using as const
  • Types derived from config: StepId, SectionId
  • NavigationConfig interface allows hiding steps/sections dynamically

Navigation Hook (useProcessNavigation.ts)

  • Manages ?step=X&section=Y query params via nuqs
  • Handles invalid params (removes invalid step, replaces invalid section with first valid)
  • Auto-hides section param for single-section steps (e.g., template step)
  • Resets section when step changes
  • Navigation between steps and sections is stored the browser's history (the user's back button will work)

Content Registry (content-registry.tsx)

  • Maps (stepId, sectionId) → React component
  • Simple lookup: getContentComponent(stepId, sectionId)
  • Placeholder components in stepContent/{step}/{section}.tsx

Behavior

  • Steps with multiple sections → sidebar shows section tabs
  • Steps with single section → sidebar hidden, section manages own layout
  • Invalid URL params → corrected automatically

Files

  • navigationConfig.ts - Config and types
  • useProcessNavigation.ts - Navigation state hook
  • contentRegistry.tsx - Component registry
  • ProcessBuilderSectionNav.tsx - Section tabs (hidden for single-section steps)
  • stepContent/**/*.tsx - Placeholder section components

Comment on lines -88 to -94
<div
data-slot="sidebar-wrapper"
className={cn('min-h-svh w-full', className)}
{...props}
>
{children}
</div>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Took the opportunity to simplify the sidebar component, as the provider shouldn't have any styles associated with it -- that's what SidebarLayout is for. I've tested it but let me know if you spot anything off.

tabListStyles({
...renderProps,
variant: props.variant,
orientation: props.orientation,
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This wasn't fully set up, so I updated it and now it works

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants