Playwright start

docs/AI Gen Docs/components.md

@@ -0,0 +1,27 @@
+# UI Components and Layout
+
+The application uses a modular component architecture, leveraging the **MudBlazor** library for UI elements.
+
+## Reusable Components (`Components` project)
+
+Shared components are located in the `Components` project, categorized by their function:
+
+- **Display**: Components for visualizing data (e.g., `EntityIcon`, `StatDisplay`).
+- **Inputs**: Specialized input fields for game data.
+- **Layout**: Reusable layout sections like `FooterComponent`.
+- **Navigation**: Components like `SearchButtonComponent` and `NavigationTracker`.
+- **Feedback**: UI elements for user interactions like `ConfirmationDialog`.
+
+## Key Layout Files
+
+- **App.razor**: Configures the Blazor router and hosts global "Portals". Portals are components that stay active across all pages (e.g., `EntityDialogPortal`, `ToastPortal`).
+- **PageLayout.razor**: The standard layout for all pages. It includes:
+  - `MudAppBar`: The top navigation bar.
+  - `MudDrawer`: A side navigation menu (primarily for mobile/small screens).
+  - `MudMainContent`: The area where page-specific content is rendered.
+
+## Design Patterns
+
+- **Portals**: Used for dialogs and notifications to ensure they are rendered correctly in the DOM hierarchy regardless of which page is active. They listen to events from their corresponding services (e.g., `EntityDialogService`).
+- **Data-Driven UI**: Navigation links and unit lists are driven by static data classes in the `Model` project (e.g., `WebsiteData.GetPages()`), making it easy to add new sections.
+- **Dark Mode**: The site is designed primarily for dark mode, managed via `MudThemeProvider`.