Shared Svelte Components
Relevant source files
The following files were used as context for generating this wiki page:
The Warpgate web ecosystem utilizes a centralized set of Svelte components located in the common/ directory to ensure visual consistency and code reuse across both the Admin UI and the Gateway User UI. These components handle core functionalities such as theming, branding, asynchronous state management, and protocol-specific data rendering.
By abstracting these elements, the project maintains a uniform "Look and Feel" while reducing maintenance overhead for critical UI patterns like connection instructions and layout wrappers.
Sources: warpgate-web/src/admin/App.svelte, warpgate-web/src/gateway/App.svelte
Core Layout and Branding
The primary entry points for both the Admin and Gateway applications utilize a shared header and footer structure. This structure incorporates branding elements and global utility components.
Brand Component
The Brand.svelte component manages the Warpgate logo. It is unique in that it performs dynamic colorization of the logo's SVG paths based on the active theme (light or dark).
- Logic: It subscribes to the
currentThemeFilestore. - Implementation: It uses
querySelectorAll('path')to apply specific RGB values to the logo's vectors whenever the theme changes. - Usage: Displayed in the main header of both
admin/App.svelteandgateway/App.svelte.
Sources: warpgate-web/src/common/Brand.svelte:10-23, warpgate-web/src/admin/App.svelte:94-96
Application Shell Structure
The following diagram illustrates how shared components are integrated into the main application shells.
The diagram shows the standard layout pattern where Loadable wraps the application content, and Brand, AuthBar, and ThemeSwitcher occupy the consistent header/footer slots.
Sources: warpgate-web/src/admin/App.svelte:92-114, warpgate-web/src/gateway/App.svelte:81-105
Protocol and Connection UI
One of the most complex shared components is ConnectionInstructions.svelte. It provides users with specific strings and commands required to connect to various target types (SSH, MySQL, Postgres, HTTP).
Connection Instruction Logic
The component reactively derives connection strings based on the TargetKind and provided credentials or tickets.
| Target Type | Displayed Information | Derived From |
|---|---|---|
| SSH | Username and example SSH command | makeSSHUsername, makeExampleSSHCommand |
| HTTP | Access URL and Authorization header | makeTargetURL, ticketSecret |
| MySQL | Username, Command, and URI | makeMySQLUsername, makeExampleMySQLCommand |
| Postgres | Username, Command, and URI | makePostgreSQLUsername, makeExamplePostgreSQLCommand |
Sources: warpgate-web/src/common/ConnectionInstructions.svelte:28-40
Interaction Flow: Generating Instructions
This flow demonstrates how the component centralizes the formatting of complex connection strings using helper functions, ensuring that changes to connection logic are reflected everywhere instructions are shown.
Sources: warpgate-web/src/common/ConnectionInstructions.svelte:31-40
Utility and Support Components
Loadable Component
Loadable.svelte is a foundational utility used to wrap asynchronous operations. It ensures that UI components do not attempt to render data before the underlying API calls have resolved.
- Admin Usage: Wraps the entire application initialization in
admin/App.svelte. - Target Usage: Used in
admin/Target.svelteto fetch target details and role assignments before displaying the configuration forms.
Sources: warpgate-web/src/admin/App.svelte:92, warpgate-web/src/admin/Target.svelte:83
Sveltestrap Ports (S5 Compatibility)
The project includes a sveltestrap-s5-ports/ directory containing components modified to work with Svelte 5's new syntax (runes) and Bootstrap 5 requirements.
Tooltip Component
The Tooltip.svelte component is a wrapper around @popperjs/core. It manages the lifecycle of tooltips, including:
- Event Listeners: Automatically attaches
mouseover,mouseleave,focus, andblurto the target element. - Lifecycle: Creates a Popper instance on mount/open and destroys it on unmount/close to prevent memory leaks.
- Attributes: Manages
aria-describedbyfor accessibility.
Sources: warpgate-web/src/common/sveltestrap-s5-ports/Tooltip.svelte:115-135
Component Summary Table
| Component | Key Functionality | Primary Source File |
|---|---|---|
| AsyncButton | Handles button states during async operations | common/AsyncButton.svelte |
| ItemList | Provides paginated list rendering with snippets | common/ItemList.svelte |
| ThemeSwitcher | UI for toggling visual themes | common/ThemeSwitcher.svelte |
| ModalHeader | Standardized header for Bootstrap modals | common/sveltestrap-s5-ports/ModalHeader.svelte |
| Alert | Themed notification box | common/sveltestrap-s5-ports/Alert.svelte |
Sources: warpgate-web/src/admin/App.svelte, warpgate-web/src/admin/Target.svelte, warpgate-web/src/common/ConnectionInstructions.svelte
Significance in Architecture
The shared Svelte components act as the bridge between the backend API (via the generated TypeScript clients) and the end-user. By standardizing components like ConnectionInstructions and Loadable, Warpgate ensures that whether an administrator is creating a ticket or a user is viewing their profile, the interaction patterns remain predictable and technically accurate across different protocols.
Sources: README.md:95-99, warpgate-web/src/admin/App.svelte:10-15