client-web umbau

2025-09-10 14:40:18 +02:00
parent 13c8ed9816
commit fb37c3a64a
27 changed files with 1566 additions and 1053 deletions
@@ -1,10 +0,0 @@
 site:
  title: "Meldestelle Kobweb Application"
 server:
  files:
    dev:
      contentRoot: ".kobweb/server/dev"
    prod:
      contentRoot: ".kobweb/server/prod"
      siteRoot: "/"
@@ -1,48 +0,0 @@
 plugins {
    alias(libs.plugins.kotlin.multiplatform)
    alias(libs.plugins.compose)
 }
 group = "at.mocode.client.kobweb"
 version = "1.0-SNAPSHOT"
 // Configure Java 17 toolchain (required by modern Compose/Kobweb)
 java {
    toolchain {
        languageVersion.set(JavaLanguageVersion.of(17))
    }
 }
 kobweb {
    app {
        index {
            description.set("Meldestelle Kobweb Application")
        }
    }
 }
 kotlin {
    js {
        moduleName = "kobweb-app"
        compilerOptions.target = "es2015"
        browser()
        binaries.executable()
    }
    sourceSets {
        jsMain.dependencies {
            implementation(libs.compose.runtime)
            implementation(libs.kobweb.core)
            implementation(libs.kobweb.silk.core)
            implementation(libs.kobwebx.markdown)
            implementation(libs.compose.html.core)
            // Common UI module via published artifact (decoupled build)
            implementation("at.mocode.client:common-ui:1.0.0-SNAPSHOT")
            // Additional web-specific dependencies
            implementation(libs.kotlinx.coroutines.core)
            implementation(libs.ktor.client.js)
        }
    }
 }
@@ -1,9 +0,0 @@
 kotlin.code.style=official
 # It seems that live reloading + Compose stresses Gradle out, causing occasional memory dumps, so we give it a bit more
 # memory for a better user experience.
 org.gradle.jvmargs=-Xmx2048m
 org.gradle.caching=true
 # Disable configuration cache due to Kobweb plugin 0.23.0 incompatibility causing NPE on apply
 org.gradle.configuration-cache=false
@@ -1,30 +0,0 @@
 [versions]
 kobweb = "0.23.0"
 jetbrains-compose = "1.6.11"
 kotlin = "1.9.23"
 kotlinx = "1.8.1"
 ktor = "3.2.3"
 [libraries]
 kobweb-core = { module = "com.varabyte.kobweb:kobweb-core", version.ref = "kobweb" }
 kobweb-silk-core = { module = "com.varabyte.kobweb:kobweb-silk", version.ref = "kobweb" }
 kobwebx-markdown = { module = "com.varabyte.kobwebx:kobwebx-markdown", version.ref = "kobweb" }
 kobweb-silk-icons-fa = { module = "com.varabyte.kobwebx:silk-icons-fa", version.ref = "kobweb" }
 compose-html-core = { module = "org.jetbrains.compose.html:html-core", version.ref = "jetbrains-compose" }
 compose-runtime = { module = "org.jetbrains.compose.runtime:runtime", version.ref = "jetbrains-compose" }
 kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx" }
 ktor-client-js = { module = "io.ktor:ktor-client-js", version.ref = "ktor" }
 [plugins]
 kobweb-application = { id = "com.varabyte.kobweb.application", version.ref = "kobweb" }
 kobwebx-markdown = { id = "com.varabyte.kobwebx.markdown", version.ref = "kobweb" }
 compose = { id = "org.jetbrains.compose", version.ref = "jetbrains-compose" }
 compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
 kotlin-multiplatform = { id = "org.jetbrains.kotlin.multiplatform", version.ref = "kotlin" }
 kotlin-serialization = { id = "org.jetbrains.kotlin.plugin.serialization", version.ref = "kotlin" }
@@ -1,7 +0,0 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
 distributionUrl=https\://services.gradle.org/distributions/gradle-8.7-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME
 zipStorePath=wrapper/dists
@@ -1,251 +0,0 @@
 #!/bin/sh
 #
 # Copyright © 2015 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
 # You may obtain a copy of the License at
 #
 #      https://www.apache.org/licenses/LICENSE-2.0
 #
 # Unless required by applicable law or agreed to in writing, software
 # distributed under the License is distributed on an "AS IS" BASIS,
 # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 # See the License for the specific language governing permissions and
 # limitations under the License.
 #
 # SPDX-License-Identifier: Apache-2.0
 #
 ##############################################################################
 #
 #   Gradle start up script for POSIX generated by Gradle.
 #
 #   Important for running:
 #
 #   (1) You need a POSIX-compliant shell to run this script. If your /bin/sh is
 #       noncompliant, but you have some other compliant shell such as ksh or
 #       bash, then to run this script, type that shell name before the whole
 #       command line, like:
 #
 #           ksh Gradle
 #
 #       Busybox and similar reduced shells will NOT work, because this script
 #       requires all of these POSIX shell features:
 #         * functions;
 #         * expansions «$var», «${var}», «${var:-default}», «${var+SET}»,
 #           «${var#prefix}», «${var%suffix}», and «$( cmd )»;
 #         * compound commands having a testable exit status, especially «case»;
 #         * various built-in commands including «command», «set», and «ulimit».
 #
 #   Important for patching:
 #
 #   (2) This script targets any POSIX shell, so it avoids extensions provided
 #       by Bash, Ksh, etc; in particular arrays are avoided.
 #
 #       The "traditional" practice of packing multiple parameters into a
 #       space-separated string is a well documented source of bugs and security
 #       problems, so this is (mostly) avoided, by progressively accumulating
 #       options in "$@", and eventually passing that to Java.
 #
 #       Where the inherited environment variables (DEFAULT_JVM_OPTS, JAVA_OPTS,
 #       and GRADLE_OPTS) rely on word-splitting, this is performed explicitly;
 #       see the in-line comments for details.
 #
 #       There are tweaks for specific operating systems such as AIX, CygWin,
 #       Darwin, MinGW, and NonStop.
 #
 #   (3) This script is generated from the Groovy template
 #       https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
 #       within the Gradle project.
 #
 #       You can find Gradle at https://github.com/gradle/gradle/.
 #
 ##############################################################################
 # Attempt to set APP_HOME
 # Resolve links: $0 may be a link
 app_path=$0
 # Need this for daisy-chained symlinks.
 while
    APP_HOME=${app_path%"${app_path##*/}"}  # leaves a trailing /; empty if no leading path
    [ -h "$app_path" ]
 do
    ls=$( ls -ld "$app_path" )
    link=${ls#*' -> '}
    case $link in             #(
      /*)   app_path=$link ;; #(
      *)    app_path=$APP_HOME$link ;;
    esac
 done
 # This is normally unused
 # shellcheck disable=SC2034
 APP_BASE_NAME=${0##*/}
 # Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
 APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
 # Use the maximum available, or set MAX_FD != -1 to use that value.
 MAX_FD=maximum
 warn () {
    echo "$*"
 } >&2
 die () {
    echo
    echo "$*"
    echo
    exit 1
 } >&2
 # OS specific support (must be 'true' or 'false').
 cygwin=false
 msys=false
 darwin=false
 nonstop=false
 case "$( uname )" in                #(
  CYGWIN* )         cygwin=true  ;; #(
  Darwin* )         darwin=true  ;; #(
  MSYS* | MINGW* )  msys=true    ;; #(
  NONSTOP* )        nonstop=true ;;
 esac
 CLASSPATH="\\\"\\\""
 # Determine the Java command to use to start the JVM.
 if [ -n "$JAVA_HOME" ] ; then
    if [ -x "$JAVA_HOME/jre/sh/java" ] ; then
        # IBM's JDK on AIX uses strange locations for the executables
        JAVACMD=$JAVA_HOME/jre/sh/java
    else
        JAVACMD=$JAVA_HOME/bin/java
    fi
    if [ ! -x "$JAVACMD" ] ; then
        die "ERROR: JAVA_HOME is set to an invalid directory: $JAVA_HOME
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
    fi
 else
    JAVACMD=java
    if ! command -v java >/dev/null 2>&1
    then
        die "ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH.
 Please set the JAVA_HOME variable in your environment to match the
 location of your Java installation."
    fi
 fi
 # Increase the maximum file descriptors if we can.
 if ! "$cygwin" && ! "$darwin" && ! "$nonstop" ; then
    case $MAX_FD in #(
      max*)
        # In POSIX sh, ulimit -H is undefined. That's why the result is checked to see if it worked.
        # shellcheck disable=SC2039,SC3045
        MAX_FD=$( ulimit -H -n ) ||
            warn "Could not query maximum file descriptor limit"
    esac
    case $MAX_FD in  #(
      '' | soft) :;; #(
      *)
        # In POSIX sh, ulimit -n is undefined. That's why the result is checked to see if it worked.
        # shellcheck disable=SC2039,SC3045
        ulimit -n "$MAX_FD" ||
            warn "Could not set maximum file descriptor limit to $MAX_FD"
    esac
 fi
 # Collect all arguments for the java command, stacking in reverse order:
 #   * args from the command line
 #   * the main class name
 #   * -classpath
 #   * -D...appname settings
 #   * --module-path (only if needed)
 #   * DEFAULT_JVM_OPTS, JAVA_OPTS, and GRADLE_OPTS environment variables.
 # For Cygwin or MSYS, switch paths to Windows format before running java
 if "$cygwin" || "$msys" ; then
    APP_HOME=$( cygpath --path --mixed "$APP_HOME" )
    CLASSPATH=$( cygpath --path --mixed "$CLASSPATH" )
    JAVACMD=$( cygpath --unix "$JAVACMD" )
    # Now convert the arguments - kludge to limit ourselves to /bin/sh
    for arg do
        if
            case $arg in                                #(
              -*)   false ;;                            # don't mess with options #(
              /?*)  t=${arg#/} t=/${t%%/*}              # looks like a POSIX filepath
                    [ -e "$t" ] ;;                      #(
              *)    false ;;
            esac
        then
            arg=$( cygpath --path --ignore --mixed "$arg" )
        fi
        # Roll the args list around exactly as many times as the number of
        # args, so each arg winds up back in the position where it started, but
        # possibly modified.
        #
        # NB: a `for` loop captures its iteration list before it begins, so
        # changing the positional parameters here affects neither the number of
        # iterations, nor the values presented in `arg`.
        shift                   # remove old arg
        set -- "$@" "$arg"      # push replacement arg
    done
 fi
 # Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 # Collect all arguments for the java command:
 #   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
 #     and any embedded shellness will be escaped.
 #   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
 #     treated as '${Hostname}' itself on the command line.
 set -- \
        "-Dorg.gradle.appname=$APP_BASE_NAME" \
        -classpath "$CLASSPATH" \
        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
        "$@"
 # Stop when "xargs" is not available.
 if ! command -v xargs >/dev/null 2>&1
 then
    die "xargs is not available"
 fi
 # Use "xargs" to parse quoted args.
 #
 # With -n1 it outputs one arg per line, with the quotes and backslashes removed.
 #
 # In Bash we could simply go:
 #
 #   readarray ARGS < <( xargs -n1 <<<"$var" ) &&
 #   set -- "${ARGS[@]}" "$@"
 #
 # but POSIX shell has neither arrays nor command substitution, so instead we
 # post-process each arg (as a line of input to sed) to backslash-escape any
 # character that might be a shell metacharacter, then use eval to reverse
 # that process (while maintaining the separation between arguments), and wrap
 # the whole thing up as a single "set" statement.
 #
 # This will of course break if any of these variables contains a newline or
 # an unmatched quote.
 #
 eval "set -- $(
        printf '%s\n' "$DEFAULT_JVM_OPTS $JAVA_OPTS $GRADLE_OPTS" |
        xargs -n1 |
        sed ' s~[^-[:alnum:]+,./:=@_]~\\&~g; ' |
        tr '\n' ' '
    )" '"$@"'
 exec "$JAVACMD" "$@"
@@ -1,94 +0,0 @@
@rem
@rem Copyright 2015 the original author or authors.
@rem
@rem Licensed under the Apache License, Version 2.0 (the "License");
@rem you may not use this file except in compliance with the License.
@rem You may obtain a copy of the License at
@rem
@rem      https://www.apache.org/licenses/LICENSE-2.0
@rem
@rem Unless required by applicable law or agreed to in writing, software
@rem distributed under the License is distributed on an "AS IS" BASIS,
@rem WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@rem
@rem  Gradle startup script for Windows
@rem
@rem ##########################################################################
@rem Set local scope for the variables with windows NT shell
 if "%OS%"=="Windows_NT" setlocal
 set DIRNAME=%~dp0
 if "%DIRNAME%"=="" set DIRNAME=.
@rem This is normally unused
 set APP_BASE_NAME=%~n0
 set APP_HOME=%DIRNAME%
@rem Resolve any "." and ".." in APP_HOME to make it shorter.
 for %%i in ("%APP_HOME%") do set APP_HOME=%%~fi
@rem Add default JVM options here. You can also use JAVA_OPTS and GRADLE_OPTS to pass JVM options to this script.
 set DEFAULT_JVM_OPTS="-Xmx64m" "-Xms64m"
@rem Find java.exe
 if defined JAVA_HOME goto findJavaFromJavaHome
 set JAVA_EXE=java.exe
 %JAVA_EXE% -version >NUL 2>&1
 if %ERRORLEVEL% equ 0 goto execute
 echo. 1>&2
 echo ERROR: JAVA_HOME is not set and no 'java' command could be found in your PATH. 1>&2
 echo. 1>&2
 echo Please set the JAVA_HOME variable in your environment to match the 1>&2
 echo location of your Java installation. 1>&2
 goto fail
 :findJavaFromJavaHome
 set JAVA_HOME=%JAVA_HOME:"=%
 set JAVA_EXE=%JAVA_HOME%/bin/java.exe
 if exist "%JAVA_EXE%" goto execute
 echo. 1>&2
 echo ERROR: JAVA_HOME is set to an invalid directory: %JAVA_HOME% 1>&2
 echo. 1>&2
 echo Please set the JAVA_HOME variable in your environment to match the 1>&2
 echo location of your Java installation. 1>&2
 goto fail
 :execute
@rem Setup the command line
 set CLASSPATH=
@rem Execute Gradle
 "%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
 :end
@rem End local scope for the variables with windows NT shell
 if %ERRORLEVEL% equ 0 goto mainEnd
 :fail
 rem Set variable GRADLE_EXIT_CONSOLE if you need the _script_ return code instead of
 rem the _cmd.exe /c_ return code!
 set EXIT_CODE=%ERRORLEVEL%
 if %EXIT_CODE% equ 0 set EXIT_CODE=1
 if not ""=="%GRADLE_EXIT_CONSOLE%" exit %EXIT_CODE%
 exit /b %EXIT_CODE%
 :mainEnd
 if "%OS%"=="Windows_NT" endlocal
 :omega
@@ -1,21 +0,0 @@
 rootProject.name = "kobweb-app"
 pluginManagement {
    repositories {
        gradlePluginPortal()
        mavenCentral()
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
        maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
    }
 }
 dependencyResolutionManagement {
    @Suppress("UnstableApiUsage")
    repositories {
        google()
        mavenLocal()
        mavenCentral()
        maven("https://maven.pkg.jetbrains.space/public/p/compose/dev")
        maven("https://us-central1-maven.pkg.dev/varabyte-repos/public")
    }
 }
@@ -1,30 +0,0 @@
 package at.mocode.client.kobweb
 import androidx.compose.runtime.*
 import com.varabyte.kobweb.core.App
 import com.varabyte.kobweb.silk.SilkApp
 import com.varabyte.kobweb.silk.components.layout.Surface
 import com.varabyte.kobweb.silk.init.InitSilk
 import com.varabyte.kobweb.silk.init.InitSilkContext
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.modifiers.minHeight
 import org.jetbrains.compose.web.css.vh
@InitSilk
 fun initSilk(ctx: InitSilkContext) {
    // You can configure your app here.
    // This will be called once when your app starts up.
    //
    // As an example, you can use `ctx.stylesheet` to add styles,
    // or `ctx.theme` to modify colors, fonts, etc.
 }
@App
@Composable
 fun MyApp(content: @Composable () -> Unit) {
    SilkApp {
        Surface(modifier = Modifier.minHeight(100.vh)) {
            content()
        }
    }
 }
@@ -1,40 +0,0 @@
 package at.mocode.client.kobweb.components
 import androidx.compose.runtime.*
 import com.varabyte.kobweb.compose.foundation.layout.Box
 import com.varabyte.kobweb.compose.ui.Alignment
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.silk.components.text.SpanText
 import kotlinx.coroutines.delay
 /**
 * A simple loading indicator component using only Kobweb/Silk components.
 */
@Composable
 fun LoadingIndicator(
    message: String = "Loading",
    modifier: Modifier = Modifier
 ) {
    var dots by remember { mutableStateOf("") }
    LaunchedEffect(Unit) {
        while (true) {
            delay(500)
            dots = when (dots.length) {
                0 -> "."
                1 -> ".."
                2 -> "..."
                else -> ""
            }
        }
    }
    Box(
        modifier = modifier,
        contentAlignment = Alignment.Center
    ) {
        SpanText(
            text = "$message$dots"
        )
    }
 }
@@ -1,48 +0,0 @@
 package at.mocode.client.kobweb.config
 /**
 * Application configuration for the Kobweb client.
 * Provides centralized configuration management to avoid hardcoded values.
 */
 object AppConfig {
    /**
     * Base URL for the backend services.
     * Can be overridden via environment variables or build configuration.
     */
    val baseUrl: String = getBaseUrl()
    /**
     * Application title
     */
    const val APP_TITLE = "Meldestelle Kobweb Application"
    /**
     * Default timeout for network requests in milliseconds
     */
    const val DEFAULT_TIMEOUT = 10_000L
    /**
     * Gets the base URL from various sources with fallback hierarchy:
     * 1. Runtime environment variable
     * 2. Build-time configuration
     * 3. Default localhost for development
     */
    private fun getBaseUrl(): String {
        // Check for runtime configuration (if available in browser environment)
        val runtimeUrl = js("typeof window !== 'undefined' ? window.location.origin : null") as? String
        // For development, use localhost backend
        // In production, this should be configured during build or deployment
        return when {
            !runtimeUrl.isNullOrBlank() && runtimeUrl != "null" -> {
                // In production, backend might be on same origin or configured path
                if (runtimeUrl.contains("localhost") || runtimeUrl.contains("127.0.0.1")) {
                    "http://localhost:8081" // Development backend
                } else {
                    "$runtimeUrl/api" // Production backend on same origin
                }
            }
            else -> "http://localhost:8081" // Fallback for development
        }
    }
 }
@@ -1,53 +0,0 @@
 package at.mocode.client.kobweb.di
 import at.mocode.client.data.service.PingService
 import at.mocode.client.kobweb.config.AppConfig
 import at.mocode.client.ui.viewmodel.PingViewModel
 /**
 * Simple dependency injection container for the Kobweb application.
 * Provides centralized service management and lifecycle handling.
 */
 object ServiceProvider {
    // Lazy initialization of services
    private val _pingService by lazy {
        PingService(AppConfig.baseUrl)
    }
    // Track created ViewModels for cleanup
    private val createdViewModels = mutableListOf<PingViewModel>()
    /**
     * Get the singleton PingService instance
     */
    fun getPingService(): PingService = _pingService
    /**
     * Create a new PingViewModel instance.
     * Note: ViewModels should typically be created per screen/component
     * to maintain proper state isolation.
     */
    fun createPingViewModel(): PingViewModel {
        val viewModel = PingViewModel(_pingService)
        createdViewModels.add(viewModel)
        return viewModel
    }
    /**
     * Cleanup a specific ViewModel
     */
    fun cleanupViewModel(viewModel: PingViewModel) {
        viewModel.dispose()
        createdViewModels.remove(viewModel)
    }
    /**
     * Cleanup all resources when the application is shutting down.
     * Should be called when the app is being destroyed.
     */
    fun cleanup() {
        createdViewModels.forEach { it.dispose() }
        createdViewModels.clear()
    }
 }
@@ -1,99 +0,0 @@
 package at.mocode.client.kobweb.pages
 import androidx.compose.runtime.*
 import at.mocode.client.data.service.PingService
 import at.mocode.client.ui.viewmodel.PingUiState
 import at.mocode.client.ui.viewmodel.PingViewModel
 import com.varabyte.kobweb.core.Page
 import com.varabyte.kobweb.silk.components.forms.Button
 import com.varabyte.kobweb.compose.foundation.layout.Box
 import com.varabyte.kobweb.compose.foundation.layout.Column
 import com.varabyte.kobweb.compose.foundation.layout.Spacer
 import com.varabyte.kobweb.silk.components.text.SpanText
 import com.varabyte.kobweb.compose.ui.Modifier
 import com.varabyte.kobweb.compose.ui.Alignment
 import com.varabyte.kobweb.compose.ui.modifiers.*
 import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.css.rgb
 import org.jetbrains.compose.web.dom.Div
 import org.jetbrains.compose.web.dom.H1
 import org.jetbrains.compose.web.dom.Text
 import at.mocode.client.kobweb.config.AppConfig
 import at.mocode.client.kobweb.di.ServiceProvider
 import at.mocode.client.kobweb.components.LoadingIndicator
@Page
@Composable
 fun HomePage() {
    // Use dependency injection for better service management
    val viewModel = remember { ServiceProvider.createPingViewModel() }
    // Proper lifecycle management with ServiceProvider cleanup
    DisposableEffect(viewModel) {
        onDispose {
            ServiceProvider.cleanupViewModel(viewModel)
        }
    }
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(16.px)
    ) {
        H1 {
            Text(AppConfig.APP_TITLE)
        }
        Spacer()
        H1 {
            Text("Ping Backend Service")
        }
        Spacer()
        // Status display area
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .height(100.px),
            contentAlignment = Alignment.Center
        ) {
            when (val state = viewModel.uiState) {
                is PingUiState.Initial -> {
                    SpanText(
                        text = "Klicke auf den Button, um das Backend zu testen",
                        modifier = Modifier.color(rgb(0, 0, 0))
                    )
                }
                is PingUiState.Loading -> {
                    LoadingIndicator(
                        message = "Pinge Backend",
                        modifier = Modifier.fillMaxWidth()
                    )
                }
                is PingUiState.Success -> {
                    SpanText(
                        text = "Antwort vom Backend: ${state.response.status}",
                        modifier = Modifier.color(rgb(0, 150, 0))
                    )
                }
                is PingUiState.Error -> {
                    SpanText(
                        text = "Fehler: ${state.message}",
                        modifier = Modifier.color(rgb(180, 0, 0))
                    )
                }
            }
        }
        Spacer()
        Button(
            onClick = { viewModel.pingBackend() },
            enabled = viewModel.uiState !is PingUiState.Loading
        ) {
            SpanText("Ping Backend")
        }
    }
 }
@@ -0,0 +1,303 @@
 # Meldestelle Web-App
 Eine moderne Web-Anwendung basierend auf **Compose for Web** (Compose Multiplatform) für das Meldestelle-Projekt.
 ## 📋 Überblick
 Diese Web-Anwendung implementiert das Frontend für das Meldestelle-System unter Verwendung von Compose for Web. Sie folgt dem Architekturprinzip der maximalen Code-Wiederverwendung durch die Nutzung des `commonMain`-Source-Sets von Kotlin Multiplatform.
 ### Technologie-Stack
 - **Frontend Framework**: Compose for Web (Compose Multiplatform 1.8.2)
 - **Programmiersprache**: Kotlin/JS
 - **Build-System**: Gradle 8.10
 - **HTTP-Client**: Ktor Client
 - **UI-Komponenten**: Compose Material 3 (aus commonMain)
 - **Bundler**: Webpack (über Kotlin/JS Plugin)
 - **Container**: Nginx (Production)
 ## 🏗️ Architektur
 ```
 client/web-app/
 ├── src/
 │   └── jsMain/
 │       ├── kotlin/at/mocode/client/web/
 │       │   └── main.kt                 # Entry Point
 │       └── resources/
 │           └── index.html              # HTML Template
 ├── build.gradle.kts                    # Build Konfiguration
 └── build/                              # Build Artefakte
    └── dist/js/productionExecutable/   # Produktionsversion
 ```
 ### Design Prinzipien
 1. **Code-Wiederverwendung**: Maximale Nutzung des `client:common-ui` Moduls
 2. **Compose for Web**: Deklarative UI mit `@Composable` Funktionen
 3. **State Management**: Zustandsverwaltung über ViewModels im `commonMain`
 4. **Plattform-Trennung**: UI-Code in `jsMain`, Logik in `commonMain`
 ## 🚀 Schnellstart
 ### Voraussetzungen
 - Java 21+
 - Docker und Docker Compose
 - Node.js 18+ (wird automatisch im Container installiert)
 ### Entwicklung starten
 #### Mit Docker (Empfohlen)
 ```bash
 # Web-App im Entwicklungsmodus starten
 docker compose -f docker-compose.yml -f docker-compose.clients.yml up -d web-app
 # Anwendung ist verfügbar unter:
 # http://localhost:3000
 ```
 #### Lokale Entwicklung
 ```bash
 # Abhängigkeiten installieren und Entwicklungsserver starten
 ./gradlew :client:web-app:jsBrowserDevelopmentRun
 # Anwendung läuft auf http://localhost:8080
 ```
 ### Produktionsbuild
 ```bash
 # Optimierte JavaScript-Bundles erstellen
 ./gradlew :client:web-app:jsBrowserDistribution
 # Artefakte befinden sich in:
 # client/web-app/build/dist/js/productionExecutable/
 ```
 ## 🔧 Entwicklung
 ### Projekt-Struktur
 ```kotlin
 // main.kt - Entry Point
 fun main() {
    renderComposable(rootElementId = "root") {
        WebApp()
    }
 }
@Composable
 fun WebApp() {
    // Verwendet die gemeinsame App-Komponente aus commonMain
    App()
 }
 ```
 ### Hot-Reload
 Die Entwicklungsumgebung unterstützt Hot-Reload:
 - Änderungen an Kotlin-Code werden automatisch neu kompiliert
 - Browser wird automatisch aktualisiert
 - Schnelle Entwicklungszyklen durch Webpack Dev Server
 ### Build-Konfiguration
 Die `build.gradle.kts` konfiguriert:
 ```kotlin
 kotlin {
    js(IR) {
        browser {
            commonWebpackConfig {
                outputFileName = "web-app.js"
                // Webpack optimization directory
                configDirectory = project.projectDir.resolve("webpack.config.d")
            }
            webpackTask {
                mainOutputFileName = "web-app.js"
            }
        }
        binaries.executable()
    }
 }
 ```
 ### Webpack-Optimierungen
 Das Projekt verwendet erweiterte Webpack-Optimierungen für bessere Performance:
 #### Code Splitting
 - **Separate Chunks**: Bundle wird in ~60 kleinere, cacheable Dateien aufgeteilt
 - **Vendor Chunks**: Große Libraries (Kotlin stdlib, Compose runtime, Coroutines) werden separat geladen
 - **Lazy Loading**: Verbessertes Caching durch getrennte Vendor- und App-Code-Chunks
 #### Bundle-Größenoptimierung
 - **Tree Shaking**: Entfernt ungenutzten Code
 - **Minification**: Aggressive Komprimierung im Produktionsbuild
 - **Scope Hoisting**: Optimiert JavaScript-Execution
 - **Performance Budget**: Warnt bei zu großen Bundles (500KB pro Asset, 800KB Gesamt)
 #### Generierte Chunks (Beispiel)
 ```
 web-app-runtime.js          1.67 KiB  (Runtime)
 web-app.js                  482 bytes (Main App)
 web-app-compose-runtime-*.js 274 KiB   (Compose Framework)
 web-app-kotlin-stdlib.js    165 KiB   (Kotlin Standard Library)
 web-app-coroutines.js       119 KiB   (Kotlinx Coroutines)
 web-app-vendors-*.js        1.17 MiB  (Weitere Dependencies)
 ```
 ```
 **Abhängigkeiten:**
 - `compose.web.core` - Compose for Web Framework
 - `compose.runtime` - Compose Runtime
 - `project(":client:common-ui")` - Gemeinsame UI-Komponenten
 - `kotlinx-coroutines-core-js` - Coroutines für Web
 ## 🌐 Deployment
 ### Docker Container
 Die Anwendung wird als Docker-Container deployed:
 ```dockerfile
 # Multi-stage Build
 FROM gradle:8.10-jdk21 AS builder
 # ... Build Phase
 FROM nginx:1.25-alpine AS production
 # ... Production Phase
 ```
 **Features:**
 - Multi-stage Build für optimale Image-Größe
 - Nginx als Static File Server
 - Health Checks
 - Security Headers
 - Gzip Kompression
 ### Konfiguration
 Umgebungsvariablen:
 - `NODE_ENV`: Entwicklungs-/Produktionsmodus
 - `API_BASE_URL`: Backend API URL
 - `APP_TITLE`: Anwendungstitel
 - `APP_VERSION`: Versionsnummer
 ### Health Checks
 ```bash
 # Container Health Check
 curl --fail http://localhost:3000/health
 # Antwort: {"status":"ok","service":"web-app"}
 ```
 ## 🔗 Integration
 ### Backend-Kommunikation
 Die Web-App kommuniziert mit dem Backend über:
 - **API Gateway**: `http://api-gateway:8081`
 - **REST APIs**: Über Ktor Client
 - **WebSocket**: Für Realtime-Updates (geplant)
 ### Gemeinsame Komponenten
 Nutzt Komponenten aus `client:common-ui`:
 - **ViewModels**: `PingViewModel` für Backend-Tests
 - **UI-Komponenten**: `App`, `PingScreen`
 - **Services**: `PingService` für HTTP-Aufrufe
 - **Models**: Datenklassen und UI-States
 ### Beispiel Integration
 ```kotlin
@Composable
 fun WebApp() {
    // Verwendet die gemeinsame App-Komponente
    // Diese enthält Material 3 Komponenten und ViewModels
    App(baseUrl = "http://localhost:8081")
 }
 ```
 ## 📊 Build-Artefakte
 Nach dem Build werden folgende Dateien generiert:
 ```
 build/dist/js/productionExecutable/
 ├── web-app.js              # Hauptanwendung (minifiziert)
 ├── web-app.js.map          # Source Maps
 ├── 731.js                  # Code Splitting Chunk
 ├── index.html              # HTML Template
 ├── skiko.wasm              # Compose Runtime (WebAssembly)
 └── skiko.js                # Compose JavaScript Runtime
 ```
 ## 🧪 Testing
 ### Entwicklungstests
 ```bash
 # Backend-Konnektivität testen
 # Öffne http://localhost:3000
 # Klicke "Ping Backend" Button
 ```
 ### Build-Validierung
 ```bash
 # Build ohne Ausführung testen
 ./gradlew :client:web-app:jsBrowserDevelopmentRun --dry-run
 # Produktionsbuild testen
 ./gradlew :client:web-app:jsBrowserDistribution
 ```
 ## 📚 Weiterführende Dokumentation
 - [Web-App Guideline](../../.junie/guidelines/web-app-guideline.md) - Architektur-Richtlinien
 - [Docker README](../../README-DOCKER.md) - Container-Dokumentation
 - [Compose for Web Docs](https://github.com/JetBrains/compose-multiplatform) - Offizielle Dokumentation
 ## 🔍 Troubleshooting
 ### Häufige Probleme
 **Problem**: `Cannot connect to backend`
 ```bash
 # Lösung: Backend Services starten
 docker-compose -f docker-compose.yml -f docker-compose.services.yml up -d
 ```
 **Problem**: `Module build failed`
 ```bash
 # Lösung: Clean Build
 ./gradlew :client:web-app:clean :client:web-app:jsBrowserDevelopmentRun
 ```
 **Problem**: `Port 3000 already in use`
 ```bash
 # Lösung: Port in docker-compose.clients.yml ändern
 ports:
  - "3001:3000"  # Externer Port ändern
 ```
 ### Logs und Debugging
 ```bash
 # Container Logs anzeigen
 docker logs meldestelle-web-app
 # Build Logs mit Details
 ./gradlew :client:web-app:jsBrowserDevelopmentRun --info --stacktrace
 ```
 ---
 **Letzte Aktualisierung**: 2025-09-10
 **Version**: 1.0.0
@@ -0,0 +1,57 @@
 plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
    id("org.jetbrains.kotlin.plugin.compose")
 }
 group = "at.mocode.client.web"
 version = "1.0.0"
 kotlin {
    js(IR) {
        browser {
            commonWebpackConfig {
                devServer = devServer?.copy(
                    port = 8080,
                    static = mutableListOf("src/jsMain/resources")
                )
                // Webpack optimization settings
                configDirectory = project.projectDir.resolve("webpack.config.d")
            }
            webpackTask {
                args.add("--devtool=source-map")
            }
            runTask {
                args.add("--devtool=source-map")
            }
            // Add npm dependencies for webpack plugins
            useCommonJs()
        }
        binaries.executable()
    }
    sourceSets {
        val jsMain by getting {
            dependencies {
                // Compose for Web
                implementation(compose.html.core)
                implementation(compose.runtime)
                // Common UI module (contains ViewModels and shared components)
                implementation(project(":client:common-ui"))
                // Coroutines for web
                implementation("org.jetbrains.kotlinx:kotlinx-coroutines-core-js:1.7.3")
            }
        }
        val jsTest by getting {
            dependencies {
                implementation(kotlin("test-js"))
            }
        }
    }
 }
@@ -0,0 +1,22 @@
 package at.mocode.client.web
 import androidx.compose.runtime.Composable
 import at.mocode.client.ui.App
 import org.jetbrains.compose.web.renderComposable
 /**
 * Entry point for the Compose for Web application.
 * Follows the web-app guideline by using the shared App component from commonMain.
 */
 fun main() {
    renderComposable(rootElementId = "root") {
        WebApp()
    }
 }
@Composable
 fun WebApp() {
    // Use the shared App component from commonMain
    // This follows the guideline principle of maximum code reuse
    App()
 }
@@ -0,0 +1,23 @@
 <!DOCTYPE html>
 <html lang="de">
 <head>
    <meta charset="UTF-8">
    <title>Meldestelle</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
        }
        #root {
            width: 100%;
            height: 100vh;
        }
    </style>
 </head>
 <body>
 <div id="root"></div>
 </body>
 </html>
@@ -0,0 +1,37 @@
 // Compression and module resolution optimizations
 // Enhanced module resolution to reduce bundle size
 config.resolve = config.resolve || {};
 config.resolve.alias = config.resolve.alias || {};
 // Resolve optimizations
 config.resolve.modules = ['node_modules'];
 config.resolve.extensions = ['.js', '.json', '.wasm'];
 // Output optimizations
 config.output = config.output || {};
 config.output.pathinfo = false; // Disable path info in production for smaller bundles
 // Module concatenation for better tree shaking
 config.optimization = config.optimization || {};
 config.optimization.concatenateModules = true;
 // Enable scope hoisting for better performance
 config.optimization.moduleIds = 'deterministic';
 config.optimization.chunkIds = 'deterministic';
 // Webpack production mode optimizations
 if (config.mode === 'production') {
    // Disable development features
    config.devtool = false; // Disable source maps in production for smaller size
    // Additional optimization flags
    config.optimization.flagIncludedChunks = true;
    config.optimization.mergeDuplicateChunks = true;
    config.optimization.removeAvailableModules = true;
    config.optimization.removeEmptyChunks = true;
    // Aggressive dead code elimination
    config.optimization.innerGraph = true;
    config.optimization.mangleExports = true;
 }
@@ -0,0 +1,3 @@
 // Development server configuration
 config.devServer = config.devServer || {};
 config.devServer.historyApiFallback = true;
@@ -0,0 +1,104 @@
 const path = require('path');
 // Webpack optimization configuration for production builds
 config.optimization = {
    // Enable tree shaking and dead code elimination
    usedExports: true,
    sideEffects: false,
    // Code splitting configuration optimized for Kotlin/JS
    splitChunks: {
        chunks: 'all',
        minSize: 30000,
        maxSize: 300000,
        maxInitialRequests: 8, // Allow more initial requests for better caching
        maxAsyncRequests: 15,
        cacheGroups: {
            // Kotlin standard library - separate chunk
            kotlinStdlib: {
                test: /kotlin-kotlin-stdlib/,
                name: 'kotlin-stdlib',
                chunks: 'all',
                enforce: true,
                priority: 30,
                reuseExistingChunk: true,
            },
            // Coroutines - separate chunk
            coroutines: {
                test: /kotlinx-coroutines/,
                name: 'coroutines',
                chunks: 'all',
                enforce: true,
                priority: 25,
                reuseExistingChunk: true,
            },
            // Compose runtime - separate chunk
            composeRuntime: {
                test: /compose.*runtime/,
                name: 'compose-runtime',
                chunks: 'all',
                enforce: true,
                priority: 20,
                reuseExistingChunk: true,
            },
            // Large vendor libraries
            largeVendors: {
                test: /ktor|androidx-collection|kotlinx-serialization/,
                name: 'large-vendors',
                chunks: 'all',
                enforce: true,
                priority: 15,
                reuseExistingChunk: true,
            },
            // Common vendors
            vendors: {
                test: /[\\/]kotlin[\\/]/,
                name: 'vendors',
                chunks: 'all',
                priority: 10,
                reuseExistingChunk: true,
            },
            // Application code
            default: {
                minChunks: 2,
                priority: -10,
                reuseExistingChunk: true,
            },
        },
    },
    // Minimize bundle size
    minimize: true,
    minimizer: [
        // Use default TerserPlugin for JS minification
        '...',
    ],
    // Runtime chunk optimization
    runtimeChunk: {
        name: 'runtime',
    },
 };
 // Performance budget adjusted for Kotlin/JS applications
 // Note: Kotlin/JS apps require all dependencies loaded initially, so larger budgets are realistic
 config.performance = {
    maxAssetSize: 400000, // 400KB per asset (realistic for Kotlin libs)
    maxEntrypointSize: 2000000, // 2MB total entry point (realistic for Kotlin/JS + Compose)
    hints: 'warning',
    assetFilter: function(assetFilename) {
        // Only check JS files for performance
        return assetFilename.endsWith('.js');
    },
 };
 // Production-specific optimizations
 if (config.mode === 'production') {
    // Additional compression and optimizations
    config.optimization.concatenateModules = true;
    config.optimization.providedExports = true;
    // More aggressive code splitting for production
    config.optimization.splitChunks.maxInitialRequests = 10;
    config.optimization.splitChunks.maxAsyncRequests = 10;
 }
@@ -9,15 +9,15 @@
 services:
  # ===================================================================
-  # Web Application (Kotlin Multiplatform)
+  # Web Application (Compose for Web)
  # ===================================================================
  web-app:
    build:
      context: .
      dockerfile: dockerfiles/clients/web-app/Dockerfile
      args:
-        CLIENT_PATH: client/common-ui
+        CLIENT_PATH: client/web-app
-        CLIENT_MODULE: web-app
+        CLIENT_MODULE: client:web-app
        CLIENT_NAME: meldestelle-web-app
    container_name: meldestelle-web-app
    environment:
@@ -47,40 +47,6 @@ services:
      - "traefik.http.routers.web-app.rule=Host(`localhost`) && PathPrefix(`/`)"
      - "traefik.http.services.web-app.loadbalancer.server.port=3000"
  # ===================================================================
  # KobWeb Application (Kotlin/KobWeb)
  # ===================================================================
  kobweb-app:
    build:
      context: .
      dockerfile: dockerfiles/clients/kobweb-app/Dockerfile
      args:
        CLIENT_PATH: client/kobweb-app
        CLIENT_MODULE: client:kobweb-app
    container_name: meldestelle-kobweb-app
    environment:
      NODE_ENV: ${NODE_ENV:-production}
      API_BASE_URL: http://api-gateway:${GATEWAY_PORT:-8081}
      WS_URL: ws://api-gateway:${GATEWAY_PORT:-8081}/ws
      APP_TITLE: ${APP_NAME:-Meldestelle KobWeb}
      APP_VERSION: ${APP_VERSION:-1.0.0}
    ports:
      - "3001:80"
    depends_on:
      - api-gateway
    networks:
      - meldestelle-network
    healthcheck:
      test: ["CMD", "curl", "--fail", "http://localhost/health"]
      interval: 30s
      timeout: 10s
      retries: 3
      start_period: 60s
    restart: unless-stopped
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.kobweb-app.rule=Host(`localhost`) && PathPrefix(`/kobweb`)"
      - "traefik.http.services.kobweb-app.loadbalancer.server.port=80"
  # ===================================================================
  # Auth Server (Custom Keycloak Extension)
@@ -1,127 +0,0 @@
 # ===================================================================
 # Dockerfile for Meldestelle KobWeb Application
 # Builds Kotlin/JS (KobWeb) client and serves via Nginx
 # ===================================================================
 # Build arguments
 ARG GRADLE_VERSION=8.14
 ARG JAVA_VERSION=21
 ARG NGINX_VERSION=alpine
 ARG NODE_VERSION=20.11.0
 # Client-specific build arguments
 ARG CLIENT_PATH=client/kobweb-app
 ARG CLIENT_MODULE=client:kobweb-app
 # ===================================================================
 # Build Stage - Kotlin/JS (KobWeb) Compilation
 # ===================================================================
 FROM gradle:${GRADLE_VERSION}-jdk${JAVA_VERSION}-alpine AS kotlin-builder
 ARG CLIENT_PATH=client/kobweb-app
 ARG CLIENT_MODULE=client:kobweb-app
 ARG NODE_VERSION=20.11.0
 LABEL stage=kotlin-builder
 LABEL service=kobweb-app
 LABEL maintainer="Meldestelle Development Team"
 WORKDIR /workspace
 # Install specific Node.js version for Kotlin/JS compatibility
 RUN apk add --no-cache wget ca-certificates && \
    wget -q -O - https://unofficial-builds.nodejs.org/download/release/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64-musl.tar.xz | \
    tar -xJ -C /usr/local --strip-components=1 && \
    apk del wget ca-certificates && \
    rm -rf /var/cache/apk/* && \
    npm config set cache /tmp/.npm-cache && \
    npm config set progress false && \
    npm config set audit false
 # Gradle optimizations
 ENV GRADLE_OPTS="-Dorg.gradle.caching=true \
                 -Dorg.gradle.daemon=false \
                 -Dorg.gradle.parallel=true \
                 -Dorg.gradle.configureondemand=true \
                 -Dorg.gradle.jvmargs=-Xmx3g \
                 -Dkotlin.compiler.execution.strategy=in-process"
 # Kotlin/JS and Node.js environment variables
 ENV NODE_OPTIONS="--max-old-space-size=4096" \
    NPM_CONFIG_CACHE="/tmp/.npm-cache" \
    KOTLIN_JS_GENERATE_EXTERNALS=false
 # Copy build configuration first
 COPY gradlew gradlew.bat gradle.properties settings.gradle.kts ./
 COPY gradle/ gradle/
 COPY build.gradle.kts ./
 # Copy platform and core dependencies
 COPY platform/ platform/
 COPY core/ core/
 # Copy client modules in dependency order
 COPY client/common-ui/ client/common-ui/
 COPY ${CLIENT_PATH}/ ${CLIENT_PATH}/
 # Clear npm cache and verify Node.js
 RUN npm cache clean --force && \
    node --version && npm --version
 # Warm up dependencies
 RUN ./gradlew :${CLIENT_MODULE}:dependencies --no-daemon --info --stacktrace || true
 # Build production bundle. For KobWeb projects, jsBrowserProductionWebpack produces static assets
 RUN ./gradlew :${CLIENT_MODULE}:jsBrowserProductionWebpack --no-daemon --info --stacktrace
 # Verify build output
 RUN ls -la /workspace/${CLIENT_PATH}/build/dist/ || (echo "Build failed - no dist directory found" && exit 1)
 # ===================================================================
 # Production Stage - Nginx serving static assets
 # ===================================================================
 FROM nginx:${NGINX_VERSION} AS runtime
 ARG CLIENT_PATH=client/kobweb-app
 ARG GRADLE_VERSION=8.14
 ARG JAVA_VERSION=21
 ARG NGINX_VERSION=alpine
 LABEL service="kobweb-app" \
      version="1.0.0" \
      description="Meldestelle KobWeb Application" \
      maintainer="Meldestelle Development Team" \
      build.gradle.version="${GRADLE_VERSION}" \
      java.version="${JAVA_VERSION}" \
      nginx.version="${NGINX_VERSION}"
 RUN apk update && \
    apk upgrade && \
    apk add --no-cache curl && \
    rm -rf /var/cache/apk/*
 # Clean default content
 RUN rm -rf /usr/share/nginx/html/* && \
    rm -f /var/log/nginx/*.log
 # Copy built web application
 COPY --from=kotlin-builder /workspace/${CLIENT_PATH}/build/dist/ /usr/share/nginx/html/
 # Provide a minimal nginx config if none in project (fallback)
 # Try to copy project-specific nginx.conf if available
 # We use a small trick: copy will fail if file missing, so we create a basic one beforehand
 RUN printf "user nginx;\nworker_processes auto;\nerror_log /var/log/nginx/error.log warn;\npid /var/run/nginx.pid;\n\n events { worker_connections 1024; }\n http {\n  include /etc/nginx/mime.types;\n  default_type application/octet-stream;\n  sendfile on;\n  keepalive_timeout 65;\n  server {\n    listen 80;\n    server_name _;\n    root /usr/share/nginx/html;\n    location /health { return 200 'OK'; add_header Content-Type text/plain; }\n    location / { try_files $uri $uri/ /index.html; }\n  }\n }\n" > /etc/nginx/nginx.conf
 # Permissions
 RUN chown -R nginx:nginx /usr/share/nginx/html /var/cache/nginx /var/run /var/log/nginx && \
    chmod -R 755 /usr/share/nginx/html
 USER nginx
 HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
    CMD curl -f http://localhost/health || exit 1
 EXPOSE 80
 STOPSIGNAL SIGQUIT
 CMD ["sh", "-c", "nginx -t && exec nginx -g 'daemon off;'"]
@@ -1,169 +1,113 @@
-# ===================================================================
+# Multi-stage build for Meldestelle Compose for Web Application
-# Dockerfile for Meldestelle Web Application
+# Builds Kotlin/JS (Compose for Web) client and serves via Nginx
 # Based on kotlin-multiplatform-web template
 # ===================================================================
-# Build arguments
+# ===================================================================
-ARG GRADLE_VERSION=8.14
+# Arguments (can be overridden during build)
-ARG JAVA_VERSION=21
+# ===================================================================
-ARG NGINX_VERSION=alpine
+ARG JVM_VERSION=21
-ARG NODE_VERSION=20.11.0
+ARG GRADLE_VERSION=8.10
 ARG NODE_VERSION=18
 ARG NGINX_VERSION=1.25-alpine
-# Client-specific build arguments (parametrized for better maintainability)
+# ===================================================================
 # Build Arguments for Client Configuration
 # ===================================================================
 ARG CLIENT_PATH=client/web-app
 ARG CLIENT_MODULE=client:web-app
 # ===================================================================
-# Build Stage - Kotlin/JS Compilation
+# Build Stage - Kotlin/JS (Compose for Web) Compilation
 # ===================================================================
-FROM gradle:${GRADLE_VERSION}-jdk${JAVA_VERSION}-alpine AS kotlin-builder
+FROM gradle:${GRADLE_VERSION}-jdk${JVM_VERSION} AS builder
 # Re-declare build arguments for kotlin-builder stage
 ARG CLIENT_PATH=client/web-app
 ARG CLIENT_MODULE=client:web-app
 ARG NODE_VERSION=20.11.0
-LABEL stage=kotlin-builder
+# Set working directory
 WORKDIR /build
 # Set build labels
 LABEL service=web-app
-LABEL maintainer="Meldestelle Development Team"
+LABEL stage=build
-WORKDIR /workspace
+# Copy Gradle files first for better layer caching
 # Install specific Node.js version for Kotlin/JS compatibility
 RUN apk add --no-cache wget ca-certificates && \
    wget -q -O - https://unofficial-builds.nodejs.org/download/release/v${NODE_VERSION}/node-v${NODE_VERSION}-linux-x64-musl.tar.xz | \
    tar -xJ -C /usr/local --strip-components=1 && \
    apk del wget ca-certificates && \
    rm -rf /var/cache/apk/* && \
    npm config set cache /tmp/.npm-cache && \
    npm config set progress false && \
    npm config set audit false
 # Gradle optimizations for Kotlin Multiplatform builds
 ENV GRADLE_OPTS="-Dorg.gradle.caching=true \
                 -Dorg.gradle.daemon=false \
                 -Dorg.gradle.parallel=true \
                 -Dorg.gradle.configureondemand=true \
                 -Dorg.gradle.jvmargs=-Xmx3g \
                 -Dkotlin.compiler.execution.strategy=in-process"
 # Kotlin/JS and Node.js environment variables
 ENV NODE_OPTIONS="--max-old-space-size=4096" \
    NPM_CONFIG_CACHE="/tmp/.npm-cache" \
    KOTLIN_JS_GENERATE_EXTERNALS=false
 # Copy build configuration files first for optimal Docker layer caching
 COPY gradlew gradlew.bat gradle.properties settings.gradle.kts ./
 COPY gradle/ gradle/
 COPY gradlew gradlew.bat gradle.properties settings.gradle.kts ./
 COPY build.gradle.kts ./
-# Copy platform and core dependencies (changes less frequently)
+# Copy version catalog
-COPY platform/ platform/
+COPY gradle/libs.versions.toml gradle/libs.versions.toml
 # Copy all source files needed for the build
 # Core and platform modules (dependencies)
 COPY core/ core/
 COPY platform/ platform/
-# Copy client modules in dependency order for optimal caching
+# Infrastructure modules (if needed)
-COPY client/common-ui/ client/common-ui/
+COPY infrastructure/ infrastructure/
 COPY ${CLIENT_PATH}/ ${CLIENT_PATH}/
-# Clear npm cache and verify Node.js installation
+# Client modules
-RUN npm cache clean --force && \
+COPY client/ client/
    node --version && npm --version
-# Download and cache dependencies in a separate layer
+# Copy any additional required directories
-RUN ./gradlew :${CLIENT_MODULE}:dependencies --no-daemon --info --stacktrace
+COPY temp/ temp/
 COPY docs/ docs/
-# Build web application with production optimizations and better error handling
+# Install Node.js for JavaScript toolchain
-RUN ./gradlew :${CLIENT_MODULE}:jsBrowserProductionWebpack --no-daemon --info --stacktrace --debug
+RUN apt-get update && \
    apt-get install -y curl && \
    curl -fsSL https://deb.nodesource.com/setup_${NODE_VERSION}.x | bash - && \
    apt-get install -y nodejs
-# Verify build output
+# Make Gradle wrapper executable
-RUN ls -la /workspace/${CLIENT_PATH}/build/dist/ || (echo "Build failed - no dist directory found" && exit 1)
+RUN chmod +x gradlew
 # Build client application
 # For Compose for Web projects, jsBrowserDistribution produces static assets
 RUN echo "Building ${CLIENT_MODULE} module..." && \
    ./gradlew ${CLIENT_MODULE}:jsBrowserDistribution --no-daemon --stacktrace --info
 # ===================================================================
-# Production Stage - Nginx serving
+# Production Stage - Nginx Static File Server
 # ===================================================================
-FROM nginx:${NGINX_VERSION} AS runtime
+FROM nginx:${NGINX_VERSION} AS production
 # Re-declare build arguments for runtime stage
 ARG CLIENT_PATH=client/web-app
 ARG CLIENT_MODULE=client:web-app
 ARG GRADLE_VERSION=8.14
 ARG JAVA_VERSION=21
 ARG NGINX_VERSION=alpine
-# Comprehensive metadata
+# Set production labels
 LABEL service="web-app" \
-      version="1.0.0" \
+      environment="production" \
-      description="Meldestelle Web Application - Kotlin Multiplatform Client" \
+      description="Meldestelle Compose for Web Application"
      maintainer="Meldestelle Development Team" \
      build.gradle.version="${GRADLE_VERSION}" \
      java.version="${JAVA_VERSION}" \
      nginx.version="${NGINX_VERSION}"
-# Security and system setup
+# Create nginx user if not exists and set permissions
-RUN apk update && \
+RUN addgroup -g 1001 -S nginx-group && \
-    apk upgrade && \
+    adduser -S -D -H -u 1001 -h /var/cache/nginx -s /sbin/nologin -G nginx-group -g nginx nginx-user
    apk add --no-cache curl jq && \
    rm -rf /var/cache/apk/*
-# Remove default nginx content and logs
+# Copy built distribution files from builder stage
-RUN rm -rf /usr/share/nginx/html/* && \
+COPY --from=builder /build/${CLIENT_PATH}/build/dist/js/productionExecutable/ /usr/share/nginx/html/
-    rm -f /var/log/nginx/*.log
+COPY --from=builder /build/${CLIENT_PATH}/src/jsMain/resources/ /usr/share/nginx/html/
-# Copy built web application from builder stage
+# Copy custom nginx configuration
-COPY --from=kotlin-builder /workspace/${CLIENT_PATH}/build/dist/ /usr/share/nginx/html/
+COPY dockerfiles/clients/web-app/nginx.conf /etc/nginx/nginx.conf
-# Copy optimized nginx configuration
+# Create log directories and set permissions
-COPY ${CLIENT_PATH}/nginx.conf /etc/nginx/nginx.conf
+RUN mkdir -p /var/log/nginx && \
    chown -R nginx-user:nginx-group /var/log/nginx && \
    chown -R nginx-user:nginx-group /var/cache/nginx && \
    chown -R nginx-user:nginx-group /usr/share/nginx/html
-# Set proper permissions for nginx
+# Health check endpoint
-RUN chown -R nginx:nginx /usr/share/nginx/html /var/cache/nginx /var/run /var/log/nginx && \
+RUN echo '{"status":"ok","service":"web-app"}' > /usr/share/nginx/html/health
    chmod -R 755 /usr/share/nginx/html
-# Switch to nginx user for security
+# Switch to non-root user
-USER nginx
+USER nginx-user
-# Health check specifically for the web application
+# Expose port
-HEALTHCHECK --interval=30s --timeout=5s --start-period=15s --retries=3 \
+EXPOSE 3000
    CMD curl -f http://localhost/health || exit 1
-# Expose HTTP port
+# Health check
-EXPOSE 80
+HEALTHCHECK --interval=30s --timeout=10s --start-period=5s --retries=3 \
    CMD curl --fail http://localhost:3000/health || exit 1
-# Start nginx with proper signal handling for graceful shutdowns
+# Start nginx
-STOPSIGNAL SIGQUIT
+CMD ["nginx", "-g", "daemon off;"]
 # Run nginx in foreground with error handling
 CMD ["sh", "-c", "nginx -t && exec nginx -g 'daemon off;'"]
 # ===================================================================
 # Build and Usage Instructions
 # ===================================================================
 # Build with default parameters:
 #   docker build -t meldestelle/web-app:latest -f dockerfiles/clients/web-app/Dockerfile .
 #
 # Build with custom parameters:
 #   docker build -t meldestelle/web-app:latest \
 #     --build-arg NODE_VERSION=20.11.0 \
 #     --build-arg CLIENT_PATH=client/web-app \
 #     --build-arg CLIENT_MODULE=client:web-app \
 #     -f dockerfiles/clients/web-app/Dockerfile .
 #
 # Run standalone:
 #   docker run -p 3001:80 --name web-app meldestelle/web-app:latest
 #
 # Run with API backend:
 #   docker run -p 3001:80 --link api-gateway:api-gateway --name web-app meldestelle/web-app:latest
 #
 # Access application:
 #   http://localhost:3001
 #   http://localhost:3001/health (health check)
 #
 # Development with hot-reload (use docker-compose.override.yml instead)
 #
 # Optimization improvements:
 # - Added Node.js v20.11.0 for optimal Kotlin/JS compatibility
 # - Parametrized build arguments for better maintainability
 # - Enhanced npm and Node.js environment variables
 # - Improved error handling with --stacktrace and --debug flags
 # - npm cache management for better performance
 # ===================================================================
@@ -0,0 +1,99 @@
 user nginx-user;
 worker_processes auto;
 error_log /var/log/nginx/error.log notice;
 pid /tmp/nginx.pid;
 events {
    worker_connections 1024;
 }
 http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;
    log_format main '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';
    access_log /var/log/nginx/access.log main;
    sendfile        on;
    tcp_nopush      on;
    tcp_nodelay     on;
    keepalive_timeout  65;
    types_hash_max_size 4096;
    # Gzip Settings
    gzip on;
    gzip_vary on;
    gzip_min_length 10240;
    gzip_proxied expired no-cache no-store private must-revalidate auth;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/javascript
        application/xml+rss
        application/json
        image/svg+xml;
    # Security Headers
    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "no-referrer-when-downgrade" always;
    server {
        listen 3000;
        server_name localhost;
        root /usr/share/nginx/html;
        index index.html;
        # Main application route
        location / {
            try_files $uri $uri/ /index.html;
            # Cache static assets
            location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
                expires 1y;
                add_header Cache-Control "public, immutable";
            }
            # Source maps - no cache for development
            location ~* \.map$ {
                expires off;
                add_header Cache-Control "no-cache, no-store, must-revalidate";
            }
        }
        # Handle webpack development paths (return 404 gracefully)
        location ~* ^/webpack:// {
            return 404;
        }
        # Health check endpoint
        location /health {
            access_log off;
            return 200 '{"status":"ok","service":"web-app"}\n';
            add_header Content-Type application/json;
        }
        # API proxy (if needed for backend communication)
        location /api/ {
            proxy_pass http://api-gateway:8081/;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }
        # Error pages
        error_page 404 /index.html;
        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html;
        }
    }
 }
@@ -61,6 +61,7 @@ include(":temp:ping-service")
 include(":client:common-ui")
 // kobweb-app is now an independent build with its own Gradle wrapper (8.14.2). See client/kobweb-app/README.md for details.
 //include(":client:kobweb-app")
 include(":client:web-app")
 include(":client:desktop-app")
 // Documentation module