Redesign of Moryx.Launcher to full Angular-App

[dbeuchler]

Summary

Complete redesign of the launcher from a mixed Razor/Angular implementation to a fully Angular-based web component architecture. This change improves module isolation, eliminates CSS conflicts, simplifies maintenance, and provides a foundation for future extensibility.

Background

The previous launcher implementation mixed Razor pages with Angular and web components, which caused:

• CSS isolation problems where launcher styles could override module styles
• Inconsistent module appearances
• Difficulty maintaining separation of concerns

Key Technical Changes

Architecture

• Entire launcher is now a single Angular web component with complete style isolation
• Slot-Based Architecture Uses slots for regions (top, right, app) allowing modules to be plugged in without code modifications
• Simplified Codebase: Consolidated services for module and culture initialization, removed redundant code

Code Structure

• Refactored layout management through Angular components
• Support for multiple display modes (full, operator, full screen)
• Dynamic slot-based content rendering
• Removed hard-coded logic (assembly info helper, module headers)
• Consolidated information retrieval through runtime endpoints

Styling and Theming

• Default Angular Material styling with MORYX theme
• Removed custom/mixed styles from previous implementation
• Resolved flex container and layout issues
• Improved text truncation with ellipsis for long module names

UI/UX Improvements

• YouTube-style scrollable and collapsible navigation menu
• Persistent UI state (operator mode, navigation collapse) across reloads
• Improved responsive design foundation
• Consistent button styling using Angular defaults

Compatibility

• Maintains major and minor compatibility with existing modules
• All launcher features re-implemented
• Minor styling differences (intentional improvements, default theme)

Assets and Localization

• Assets (logos) and localization JSON files loaded from server
• Supports translation while maintaining web component independence
• Module and language inputs passed from Razor layer to Angular component

Benefits

1. Eliminates CSS conflicts between launcher and modules
2. Cleaner, more organized codebase
3. Slot-based architecture enables custom layout injection
4. Persistent state, improved navigation, responsive design
5. Fully leverages Angular Material 22 capabilities

Spotlight Search

The search bar was refactored to be a spotlight search, inspired by macOS. Can be opened by search button or by CMD+K / CTRL+K on desktops.

Dark mode

After replacing hardcoded colors and rely on fully angular material it is easy to implement a theme switch between light, dark and system and makes MORYX more modern web application.

Known Issues

The following minor issues are documented and will be addressed:

• Highlight active module
• Language switching updates launcher but not modules
• Spotlight search
  • Implement layout and spotlight
  • Check what do do with modules which filter directly (e.g. orders)
• Arrange and style Right-Region in view-modes

Migration Path

No breaking changes for modules. The slot-based architecture is designed to work with existing module implementations without modification.

Follow-Up Tasks/Ideas

Responsivenes

Make MORYX-launcher fully responsive (desktop/+touch, tablets, mobile phones