feat: Migrate backend-ai-splash to React SplashModal

[inureyes]

⚠️ Before implementing, read and follow the Implementation Rules in the epic issue #5364. These rules cover mandatory patterns for React component structure, BAI component usage, reactToWebComponent bridge, state management, i18n, error handling, styling, and code quality. The reference implementation is react/src/components/SignupModal.tsx.

Goal: Complete Lit file removal. Each migration must fully replace the Lit source file with React — not just the dialog parts. The migrated Lit .ts file and its type declarations must be deleted. This epic is a critical step toward removing all Lit/MWC/Vaadin dependencies from the codebase.

Description

Migrate backend-ai-splash.ts (Lit-Element) to a React component using BAIModal. This is one of the simplest dialog components and serves as a good starting point for establishing migration patterns.

Part of epic #5364 — Phase 1 (Simple standalone views)

Current Implementation

File: src/components/backend-ai-splash.ts

Dialog: #splash-panel

• Attributes: fixed, backdrop, blockscrolling, persistent, narrowLayout, hideActions
• Content: Version information display (WebUI version, edition, license type, manager version)
• Theme: Dark/light mode logo switching
• No form inputs — pure display component

State:

• edition (Open Source / Commercial)
• license (Perpetual / Subscription)
• validUntil, version, managerVersion
• isDarkMode

Integration:

• Called from main app shell to show "About" dialog
• Reads global variables (globalThis.packageEdition, globalThis.packageVersion, etc.)
• Listens to change:backendaiwebui.setting.isDarkMode for theme changes
• Links to GitHub license and release notes

Migration Plan

1. Create react/src/components/SplashModal.tsx
2. Use BAIModal with footer={null} (no action buttons)
3. Use BAIFlex for layout
4. Use BAIText for version text display
5. Use useRecoilValue or context for theme mode
6. Register as <backend-ai-react-splash-modal> via reactToWebComponent
7. Replace usage in parent component

Component Mapping

Current (Lit)	Target (React)
backend-ai-dialog	BAIModal
Manual CSS flex	BAIFlex
img with theme toggle	Conditional image source via theme hook
ul > li version list	BAIFlex + BAIText or Ant Design Descriptions
External links	BAILink or <a> tags

Acceptance Criteria

• SplashModal.tsx created with all version info displayed
• Dark/light theme logo switching works
• All version fields displayed correctly
• GitHub links functional
• Registered as web component for backward compatibility
• i18n translations preserved
• Original backend-ai-splash.ts can be removed