Navigation & Routing

Route Groups

SvelteKit uses group layouts (parentheses in folder names) to organize routes by authentication and layout requirements:

(auth) - Authentication Pages

/sign-in - Login with email/password or Google
/sign-up - Registration with terms acceptance
/forgot-password - Password reset via email
Layout: Centered card with background image, no sidebar
Auth guard: requireAuth={false} (redirects authenticated users to /)

(onboarding) - New User Setup

/onboarding - Two-step flow: goal selection + profile completion
Layout: Full-screen with logo header

(goals) - Goal Selection

/goals - Standalone goal selection page
Layout: Minimal with logo

(app) - Main Application

All authenticated routes share the app shell layout with sidebar navigation.

Primary routes:

/dashboard - Personalized dashboard
/hubs - Hub list and management
/hubs/new - Hub creation wizard
/hubs/[hubId]/* - Hub builder (deep nested routes for pages, settings, media, etc.)
/hyvflow - Workspace/portfolio listing
/hyvflow/[id]/[...path] - Project management with catch-all path
/connect - Chat inbox
/connect/[id] - Individual chat thread
/marketplace - Browse services
/orders - Purchase/sales management
/blog, /blog/new, /blog/[slug], /blog/[slug]/edit - Blog system
/docs, /docs/[id] - Document editor
/profile - Own profile editor
/profile-by-username/[id] - View other profiles
/account - Account settings
/billing - Billing management
/upgrade - Plan selection
/refer-and-earn - Referral dashboard
/notifications - Notification center
/my-tasks - Personal task view
/waiting-for-approve - Registration gate

(public) - Public Pages

/public-profile/[id] - Public user profile (no auth required)

api - Server Endpoints

POST /api/blogs - Proxy to WordPress blog API
POST /api/stripe/create-connect-account - Create Stripe Connect account

The sidebarManager store dynamically routes sidebar content based on the current URL path:

class SidebarManager {
  currentSidebar = $derived(/* maps path to component */);
}

Sidebar mapping:

Path Pattern	Sidebar Component
`/profile*`	`profile-sdiebar.svelte`
`/connect*`	`connect-sidebar.svelte`
`/hyvflow*`	`hyvflow-sidebar.svelte`
`/account*`	`account-sidebar.svelte`
`/marketplace*`	`marketplace-sidebar.svelte`
`/orders*`	`orders-sidebar.svelte`

Hub Nested Routing

Hubs use extensive nested routing for the builder interface:

/hubs/[hubId]/
├── builder          # Visual page editor
├── pages/           # Page management
│   └── [pageId]     # Edit specific page
├── apps             # App marketplace
├── media            # Media library
├── publish          # Publishing controls
├── history          # Version history
├── team             # Team management
├── blogs            # Hub blog management
├── docs             # Hub documentation
└── settings/
    ├── brand        # Branding & identity
    ├── theme        # Theme customization
    ├── domain       # Custom domain
    ├── payments     # Stripe Connect setup
    ├── security     # Security settings
    ├── integrations # Third-party integrations
    └── team         # Team settings

HyvFlow Deep Routing

HyvFlow uses a catch-all route pattern for deep workspace navigation:

/hyvflow/[id]/[...path]

The [...path] segment encodes the hierarchy:

/hyvflow/{workspaceId}/pf/{portfolioId}/p/{projectId}/m/{milestoneId}

Path segments are parsed from the URL to set the appropriate workspace, portfolio, project, and milestone context in the workspaceManager store.

Authentication Flow

Route Request
  ↓
+layout.svelte (root) → FirebaseApp wrapper
  ↓
+layout.svelte (group) → AuthGuard check
  ↓
CustomGuard → checkRegistrationApproved()
  │
  ├── false → redirect to /waiting-for-approve
  │
  └── true → checkOnboardingCompleted()
              │
              ├── false → redirect to /onboarding
              │
              └── true → render route