feat: add client-side routing and page structure

[acald-creator]

Summary

• Add RescriptReactRouter with URL pattern matching in Router.res
• Split monolithic App.res into 4 pages: Home, Components, Posts (placeholder), Login (placeholder)
• Create NavBar component with active link highlighting and SPA navigation
• Add 404 Not Found fallback page
• Add historyApiFallback: true to Rspack dev server config
• App.res is now a clean shell: NavBar + Router + Footer

New files

• src/Router.res — URL → page component mapping
• src/components/NavBar/NavBar.res — sticky nav with active states
• src/pages/HomePage.res — hero + features (extracted from App.res)
• src/pages/ComponentsPage.res — component showcase (extracted from App.res)
• src/pages/PostsPage.res — placeholder for Phase 2 (Relay)
• src/pages/LoginPage.res — placeholder for Phase 3 (Auth)

Test plan

• bun run res:build — 88 modules compiled, zero warnings
• bun run build — production build succeeds
• bun run test — all 18 tests pass

Closes #36

Summary by CodeRabbit

• New Features

  • Added navigation bar with links to Home, Components, Posts, and Sign In pages.
  • Implemented client-side routing system for seamless page navigation.
  • Added dedicated pages for components showcase, posts, and sign-in sections.
  • Added 404 "Page not found" error page for unmatched routes.

• Refactor

  • Reorganized app component structure and removed inline component scaffolding.
  • Updated development server configuration for improved SPA routing behavior.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
rspack-rescript	Ready	Preview, Comment	Apr 13, 2026 7:07am

[coderabbitai]

Caution

Review failed

Pull request was closed or merged during review

📝 Walkthrough

Walkthrough

Restructured the application with client-side routing by introducing a Router component, creating separate page components (Home, Components, Posts, Login, NotFound), adding a NavBar for persistent navigation, removing scaffolding components from App.res, configuring devServer history API fallback, and refactoring theme color references throughout.

Changes

Cohort / File(s)	Summary
Configuration rspack.config.js	Added devServer configuration with historyApiFallback: true to support client-side routing and serve index fallback for non-matching static paths.
Routing System src/Router.res	New router component that reads current URL, pattern-matches on url.path, and renders appropriate page components (HomePage, ComponentsPage, PostsPage, LoginPage, or NotFound).
Navigation src/components/NavBar/NavBar.res	New sticky NavBar component with programmatic routing via RescriptReactRouter.push(), active state styling based on current path, and links to Home, Components, Posts, and Sign In.
App Restructuring src/App.res	Removed local component scaffolding (Components, Logo, HeroSection, FeaturesSection, ComponentsSection modules); replaced hero/footer sections with NavBar and Router; refactored theme color references to use Theme.Theme.Colors.brand for gradients and hover effects.
Page Components src/pages/HomePage.res, src/pages/ComponentsPage.res, src/pages/LoginPage.res, src/pages/PostsPage.res	Four new page components: HomePage includes HeroSection (with interactive button) and FeaturesSection (with feature cards); ComponentsPage demonstrates UI component variants with controlled input state; LoginPage and PostsPage provide placeholder layouts for OAuth and data fetching.

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant Router
    participant NavBar
    participant Page

    User->>Browser: Navigate to URL / click link
    Browser->>Router: URL change detected
    Router->>Router: useUrl() reads path
    Router->>Router: Pattern match on path
    Router->>NavBar: Render NavBar component
    NavBar->>NavBar: useUrl() gets currentPath
    NavBar->>NavBar: Apply active state styling
    NavBar->>Browser: Display with active link
    Router->>Page: Render matched page component
    Page->>Browser: Display page content
    User->>NavBar: Click navigation link
    NavBar->>Router: handleNav() calls RescriptReactRouter.push()
    Router->>Router: useUrl() detects new path
    Router->>Router: Re-render with matched page

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 Routes now flow through whispered paths,
Where NavBar guides with glowing stats,
Pages stand ready, each one neat,
History API makes the journey sweet! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	⚠️ Warning	Issue #36 requests research on state management libraries and alternatives, but the PR implements client-side routing and page structure without addressing state management research or decisions.	The PR scope appears misaligned with issue #36. Clarify whether the routing/pages work is a prerequisite for state management research, or if issue #36 should be addressed separately.
Out of Scope Changes check	❓ Inconclusive	The PR introduces extensive routing, page components, and navigation features that go beyond the scope of the linked issue #36 (state management research). However, these changes are cohesive and well-documented in the PR objectives.	Confirm whether routing/page structure changes are intentionally bundled with state management research, or if they should be in a separate PR from issue #36.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title 'feat: add client-side routing and page structure' accurately summarizes the primary changes: implementing routing via Router.res and splitting the monolithic App into a multi-page structure with NavBar and page components.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/routing-and-pages

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}