Overview

• File: src/pages/private/_layout.svelte

The private layout component serves as the main wrapper for all authenticated pages in the HVC Web application. It provides the base structure, authentication checks, and common UI elements that appear across all private pages.

Component Architecture

Dependencies

• Server Communication

• lib/server: mutation, query for GraphQL operations

• UI Components

• svelte-loading-spinners : Loading animations

• svelte-french-toast : Toast notifications

• @steeze-ui/heroicons: Icon components

Navigation

• @roxi/routify: Client-side routing

Custom Components

• TopBar: Main navigation header
• Chat : Chat functionality
• NotificationBanner :Show notice banner to users
• Notification: System notifications
• ChatNotification : Chat-specific notifications
• Simple Alert : Modal dialogs
• SideModal : Sliding side panel

Features

1. Authentication & User Management

• Maintains user session state
• Handles forced logout scenarios
• Redirects unauthenticated users
• Terms of Service (TOS) acceptance verification

$: if (user) {
  if (!user.tosAccepted) {
    $goto("/private/terms");
  } else if (window.location.href.endsWith("/private")) {
    $goto($homePage || "/private/dashboard");
  }
}

2. Layout Structure

+------------------------+
|       Top Bar         |
+------------------------+
|   Notification Banner  | (conditional)
+------------------------+
|                      |
|    Content Area      |
|      <slot />        |
|                      |
+------------------------+

3. State Management

• Uses Svelte stores for global state:
  • isReady: Application readiness state
  • domainError: Connection/domain error state
  • showChat: Chat visibility toggle
  • userInfo: User information
  • forceLogout: Logout trigger