chore: add rd-ui submodule and update .gitmodules

Author: Timothy Dodd

.gitmodules

@@ -1,3 +1,6 @@
 [submodule "src/RoboDodd.OrmLite"]
 	path = src/RoboDodd.OrmLite
 	url = https://github.com/timothydodd/RoboDodd.OrmLite
+[submodule "src/LogMkWeb/src/rd-ui"]
+	path = src/LogMkWeb/src/rd-ui
+	url = https://github.com/timothydodd/rd-ui.git

README.md

@@ -85,9 +85,13 @@ LogMk consists of three main components:
 
 #### 1. **Clone and Build**
 ```bash
-git clone <repository-url>
+# Clone with submodules (includes rd-ui shared component library)
+git clone --recurse-submodules <repository-url>
 cd LogMk2/src
 
+# Or if already cloned, initialize submodules
+git submodule update --init --recursive
+
 # Build entire solution
 dotnet build LogMk.sln
 ```
@@ -123,9 +127,13 @@ cd src/LogMkWeb
 # Install dependencies
 npm install
 
-# Start development server
+# Start development server (automatically builds rd-ui library first)
 npm start
 # Web app available at: http://localhost:6200
+
+# Or build and run separately:
+npm run lib:build    # Build rd-ui shared component library
+npm run serve        # Start Angular dev server
 ```
 
 #### 5. **Deploy Agent (Kubernetes)**

src/LogMkApi/Dockerfile

@@ -15,10 +15,16 @@ RUN dotnet restore "./LogMkApi/LogMkApi.csproj"
 # Install Node.js and Angular CLI
 RUN curl -fsSL https://deb.nodesource.com/setup_22.x | bash - \
     && apt-get install -y nodejs \
-    && npm install -g @angular/cli@20
+    && npm install -g @angular/cli@21
 
 
 COPY . .
+
+# Build rd-ui library before main app build
+WORKDIR "/src/LogMkWeb"
+RUN npm install
+RUN npm run lib:build
+WORKDIR "/src"
 RUN chmod +x ./LogMkApi/replace_vars.sh
 RUN ./LogMkApi/replace_vars.sh ./LogMkWeb/src/environments
 

src/LogMkWeb/README.md

@@ -39,6 +39,20 @@ A modern Angular 20 web application for real-time log monitoring and analysis. B
 
 ## 📦 Dependencies
 
+### Shared Component Library (rd-ui)
+This project uses **rd-ui**, a shared Angular component library included as a git submodule at `src/rd-ui/`. The library provides reusable UI components with consistent theming.
+
+**Included Components:**
+- `rd-dropdown`: Multi-select dropdown with search, tri-state support
+- `rd-modal`: Service-based modal system with layout slots
+- `rd-toast`: Animated toast notifications
+- `rd-tabs`: Signal-based tab navigation
+- `rd-checkbox`: Custom styled checkbox
+- `rd-input-switch`: Toggle switch component
+- `rd-skeleton`: Loading skeleton placeholders
+- `rd-spinner`: Loading spinner overlay
+- `rd-progress-bar`: Progress indicator
+
 ### Core Dependencies
 - `@angular/core`: Angular framework
 - `@angular/common`: Common Angular modules
@@ -52,17 +66,22 @@ A modern Angular 20 web application for real-time log monitoring and analysis. B
 ### Development Dependencies
 - `@angular/cli`: Build system and development tools
 - `@angular-eslint/builder`: Linting and code quality
+- `ng-packagr`: Angular library packaging (for rd-ui)
 - `typescript`: TypeScript compiler
 - `sass`: CSS preprocessing
 
 ## 🚀 Development
 
 ### **Quick Start**
 ```bash
+# Ensure submodules are initialized (from repo root)
+git submodule update --init --recursive
+
 # Install dependencies
 npm install
 
 # Start development server (port 6200)
+# This automatically builds the rd-ui library first
 npm start
 
 # Navigate to http://localhost:6200
@@ -71,16 +90,24 @@ npm start
 ### **Available Scripts**
 ```bash
 # Development
-npm start              # Start dev server
-npm run dev           # Alias for start
+npm start              # Build rd-ui library + start dev server with watch
+npm run serve          # Start dev server only (library must be built)
+npm run serve:local    # Start with local environment config
+
+# Library Build (rd-ui shared components)
+npm run lib:build      # One-time build of rd-ui library
+npm run lib:watch      # Build rd-ui in watch mode
+
+# App Building
+npm run build          # Development build
+npm run prod           # Optimized production build
 
-# Building
-npm run build         # Production build
-npm run prod          # Optimized production build
+# Testing & Quality
+npm test               # Unit tests with Karma
+npm run lint           # ESLint code analysis
 
-# Testing
-npm test              # Unit tests with Karma
-npm run lint          # ESLint code analysis
+# Maintenance
+npm run clean          # Remove dist folders
 
 # Code Generation
 ng generate component _components/my-component
@@ -92,8 +119,7 @@ ng generate pipe _pipes/my-pipe
 ```
 src/
 ├── app/
-│   ├── _components/          # Reusable UI components
-│   │   ├── dropdown/         # Multi-select dropdown with search
+│   ├── _components/          # App-specific UI components
 │   │   ├── modal/            # Template-based modal system
 │   │   ├── context-menu/     # Right-click context menus
 │   │   └── ...
@@ -108,6 +134,10 @@ src/
 │   │   └── ...
 │   ├── _pipes/               # Data transformation
 │   └── styles/               # Global styling system
+├── rd-ui/                    # Git submodule - shared component library
+│   └── projects/rd-ui/       # Library source code
+├── environments/             # Environment configurations
+└── styles.scss               # Global styles with rd-ui CSS variable mappings
 ```
 
 ## 🎨 Styling Architecture

src/LogMkWeb/angular.json

@@ -3,6 +3,29 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
+    "rd-ui": {
+      "projectType": "library",
+      "root": "src/rd-ui/projects/rd-ui",
+      "sourceRoot": "src/rd-ui/projects/rd-ui/src",
+      "prefix": "rd",
+      "architect": {
+        "build": {
+          "builder": "@angular/build:ng-packagr",
+          "options": {
+            "project": "src/rd-ui/projects/rd-ui/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "src/rd-ui/projects/rd-ui/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "src/rd-ui/projects/rd-ui/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        }
+      }
+    },
     "LogMk": {
       "projectType": "application",
       "schematics": {