better diagrams

docs/component-diagram.puml

@@ -1,20 +1,23 @@
 @startuml "System Komponenten"
 
+scale 0.7
+skinparam dpi 600
+skinparam backgroundColor #FFAB40
+
 skinparam componentStyle uml2
 skinparam packageStyle rectangle
 skinparam defaultFontSize 10
 
-top to bottom direction
-
 title Monorepo - System Komponenten
 
-' ===== FRONTEND =====
-package "apps/client (Expo React Native)" #87CEEB {
+' ===== ROW 1: FRONTEND =====
+package "apps/client (Expo React Native)" as ClientPkg #87CEEB {
     package "Screens (app/)" {
         [Login/Register] as AuthScreens
         [Calendar View] as CalendarScreen
         [Chat View] as ChatScreen
         [Event Detail] as EventDetail
+        [Note Editor] as NoteScreen
     }
 
     package "Services" {
@@ -25,9 +28,8 @@ package "apps/client (Expo React Native)" #87CEEB {
     }
 
     package "Components" {
-        [EventCard] as EventCard
-        [ProposedEventCard] as ProposedEventCard
-        [ConfirmDialog] as ConfirmDialog
+        [UI Components] as UIComponents
+        [Event Cards] as EventCards
     }
 
     package "Stores" {
@@ -37,14 +39,15 @@ package "apps/client (Expo React Native)" #87CEEB {
     }
 }
 
-' ===== SHARED =====
-package "packages/shared" #DDA0DD {
+' ===== ROW 2: SHARED (centered) =====
+package "packages/shared" as SharedPkg #DDA0DD {
     [Models] as SharedModels
     [DTOs] as SharedDTOs
+    [Utils] as SharedUtils
 }
 
-' ===== BACKEND =====
-package "apps/server (Express.js)" #98FB98 {
+' ===== ROW 3: BACKEND =====
+package "apps/server (Express.js)" as ServerPkg #98FB98 {
     package "Controller Layer" {
         [Routes] as Routes
         [Controllers] as Controllers
@@ -58,11 +61,11 @@ package "apps/server (Express.js)" #98FB98 {
         [EventService] as EventSvc
     }
 
-    package "AI Layer" {
+    package "AI Implementations" {
         [ClaudeAdapter] as Claude
     }
 
-    package "Data Access Layer" {
+    package "Data Access Implementations" {
         [Repositories] as Repos
         [Mongoose Schemas] as Schemas
     }
@@ -70,20 +73,23 @@ package "apps/server (Express.js)" #98FB98 {
     package "Utils" {
         [JWT] as JWTUtil
         [Password] as PwdUtil
+        [RecurrenceExpander] as RecExpander
+        [EventFormatters] as EvtFormatters
     }
 }
 
-' ===== EXTERNAL =====
+' ===== ROW 4: EXTERNAL =====
 database "MongoDB" as MongoDB
 cloud "Claude API" as ClaudeAPI
 
 ' ===== CONNECTIONS =====
 
-' Frontend internal
+' Frontend: Screens -> Services
 AuthScreens --> ClientAuth
 CalendarScreen --> ClientEvent
 ChatScreen --> ClientChat
 EventDetail --> ClientEvent
+NoteScreen --> ClientEvent
 
 ClientAuth --> ApiClient
 ClientEvent --> ApiClient
@@ -93,12 +99,19 @@ ApiClient --> AuthStore
 ClientEvent --> EventsStore
 ClientChat --> ChatStore
 
-' Frontend -> Shared
-ApiClient ..> SharedDTOs
-ApiClient ..> SharedModels
+' Frontend: Screens -> Components
+CalendarScreen --> EventCards
+ChatScreen --> EventCards
+ChatScreen --> UIComponents
 
-' Frontend -> Backend
-ApiClient --> Routes : HTTP/REST
+' Frontend -> Shared -> Backend (HTTP flow)
+ApiClient --> SharedDTOs : sends
+SharedDTOs --> Routes : HTTP/REST
+
+' Shared types used by both sides
+SharedModels ..> ApiClient : used by
+SharedDTOs ..> Controllers : used by
+SharedModels ..> Repos : used by
 
 ' Backend: Controller Layer
 Routes --> Middleware
@@ -122,14 +135,12 @@ Repos ..|> Interfaces
 AuthSvc --> JWTUtil
 AuthSvc --> PwdUtil
 Middleware --> JWTUtil
+EventSvc --> RecExpander
+ChatSvc --> EvtFormatters
 
 ' Backend: Data Access
 Repos --> Schemas
 
-' Backend -> Shared
-Repos ..> SharedModels
-Controllers ..> SharedDTOs
-
 ' Backend -> External
 Schemas --> MongoDB
 Claude --> ClaudeAPI