Nightly Badge zuverlässig: Vite Env VITE_BUILD_CHANNEL, Dockerfile ARG/ENV, CI Build-Args angepasst

.github/workflows/docker-build.yml

@@ -41,7 +41,7 @@ jobs:
           context: .
           push: true
           build-args: |
-            REACT_APP_VERSION=${{ steps.docker_tag.outputs.tag == 'main' && 'stable' || 'nightly' }}
+            VITE_BUILD_CHANNEL=${{ steps.docker_tag.outputs.tag == 'main' && 'stable' || 'nightly' }}
           tags: |
             ${{ env.IMAGE_NAME }}:latest
             ${{ env.IMAGE_NAME }}:${{ github.sha }}

Dockerfile

@@ -6,9 +6,9 @@ WORKDIR /app/web
 COPY web/package*.json ./
 RUN npm install --no-audit --no-fund
 COPY web/ .
-# Umgebungsvariable für React Build verfügbar machen
-ARG REACT_APP_VERSION=stable
-ENV REACT_APP_VERSION=$REACT_APP_VERSION
+# Umgebungsvariable für React Build verfügbar machen (Vite liest nur VITE_*)
+ARG VITE_BUILD_CHANNEL=stable
+ENV VITE_BUILD_CHANNEL=$VITE_BUILD_CHANNEL
 RUN npm run build
 
 # --- Build server (npm) ---

web/src/App.tsx

@@ -179,8 +179,8 @@ export default function App() {
             <div>
               <h1 className="text-4xl font-bold">
                 Jukebox 420
-                {process.env.REACT_APP_VERSION === 'nightly' && (
-                  <span className="text-sm text-red-400 ml-2">Nightly</span>
+                {import.meta.env.VITE_BUILD_CHANNEL === 'nightly' && (
+                  <span className="text-sm font-semibold ml-2" style={{ color: '#ff4d4f' }}>Nightly Build</span>
                 )}
               </h1>
               <p className="text-7xl font-bold mt-2">{clock}</p>

web/src/styles.css

@@ -339,6 +339,9 @@ header h1 {
   color: inherit;
 }
 
+/* Nightly Badge Farbe (Fallback) */
+.nightly-badge { color: #ff4d4f; }
+
 header p { 
   margin: 0;
   opacity: .9;