1.x

.github/workflows/frontend-tests.yml

@@ -0,0 +1,35 @@
+name: Frontend Tests
+
+on:
+  push:
+    paths:
+      - 'tests/frontend/**'
+      - 'webroot/js/**'
+      - '.github/workflows/frontend-tests.yml'
+  pull_request:
+    paths:
+      - 'tests/frontend/**'
+      - 'webroot/js/**'
+      - '.github/workflows/frontend-tests.yml'
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      - name: Install dependencies
+        working-directory: tests/frontend
+        run: npm install
+
+      - name: Run tests
+        working-directory: tests/frontend
+        run: npm test -- --run
+

CHANGELOG.md

@@ -5,6 +5,20 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.1.0]
+
+### Changed
+
+- **Complete rewrite to Alpine.js**: Migrated from vanilla JavaScript to Alpine.js for reactive state management and declarative UI
+- **CakePHP Cell architecture**: Refactored notification bell to use `NotificationBellCell` for better component organization and separation of concerns
+- **Broadcasting architecture**: Introduced `BroadcastingBase` abstract class eliminating 42% code duplication between Pusher and Mercure modules
+
+### Added
+
+- **Alpine.js store**: New `NotificationStore` providing centralized state management with reactive updates
+- **Automatic theme detection**: Support for light/dark theme detection with system preference fallback
+- **Template customization**: Server-side PHP templates can now be overridden via CakePHP element system
+
 ## [1.0.3]
 
 ### Added

config/asset_compress.ini

@@ -13,29 +13,35 @@ paths[] = WEBROOT/js/*
 cachePath = WEBROOT/_js
 ;filters[] = JsMinFilter
 
-; Modular Notification System Bundle
+; Alpine.js bundle (with defer)
+[alpine.js]
+files[] = p:Crustum/NotificationUI:js/vendor/alpine.js
+
+; Main Notification Bundle (Alpine.js)
 ; Combines all modules in the correct dependency order
+; Alpine.js must load first
 [notifications.js]
 files[] = p:Crustum/NotificationUI:js/Notification.js
 files[] = p:Crustum/NotificationUI:js/NotificationAction.js
 files[] = p:Crustum/NotificationUI:js/NotificationManager.js
-files[] = p:Crustum/NotificationUI:js/NotificationRenderer.js
-files[] = p:Crustum/NotificationUI:js/NotificationWidget.js
+files[] = p:Crustum/NotificationUI:js/NotificationStore.js
 files[] = p:Crustum/NotificationUI:js/index.js
 
-; Broadcasting Bundle (includes Pusher, Echo, and our module)
+; Broadcasting Bundle (Pusher)
 ; Only loaded when broadcasting is enabled with broadcaster='pusher'
 [broadcasting.js]
 files[] = p:Crustum/NotificationUI:js/vendor/pusher.min.js
 files[] = p:Crustum/NotificationUI:js/vendor/echo.iife.js
-files[] = p:Crustum/NotificationUI:js/BroadcastingModule.js
+files[] = p:Crustum/NotificationUI:js/BroadcastingBase.js
+files[] = p:Crustum/NotificationUI:js/PusherModule.js
 
-; Mercure Broadcasting Bundle (includes Echo, MercureConnector, and Mercure module)
+; Mercure Broadcasting Bundle
 ; Only loaded when broadcasting is enabled with broadcaster='mercure'
 [mercure-broadcasting.js]
 files[] = p:Crustum/NotificationUI:js/vendor/echo.iife.js
 files[] = p:Crustum/NotificationUI:js/vendor/echo-mercure.js
-files[] = p:Crustum/NotificationUI:js/MercureBroadcastingModule.js
+files[] = p:Crustum/NotificationUI:js/BroadcastingBase.js
+files[] = p:Crustum/NotificationUI:js/MercureModule.js
 
 [css]
 paths[] = WEBROOT/css/*