fix: Simplify Gitea variables and improve staging banner design

- Remove branch-specific variable names (not needed)
- Each workflow uses its own default based on branch
- Users only need to set general variables, not branch-specific ones
- Redesign staging banner as floating box in bottom-right corner
- Better UX: doesn't block content, dismissible, modern design

.gitea/workflows/dev-deploy.yml

@@ -101,8 +101,8 @@ jobs:
           echo "✅ Dev deployment completed!"
         env:
           NODE_ENV: staging
-          LOG_LEVEL: ${{ vars.LOG_LEVEL_DEV || vars.LOG_LEVEL || 'debug' }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_DEV || vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'debug' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
           MY_EMAIL: ${{ vars.MY_EMAIL }}
           MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
           MY_PASSWORD: ${{ secrets.MY_PASSWORD }}

.gitea/workflows/production-deploy.yml

@@ -103,8 +103,8 @@ jobs:
           echo "✅ Production deployment completed with zero downtime!"
         env:
           NODE_ENV: production
-          LOG_LEVEL: ${{ vars.LOG_LEVEL_PRODUCTION || vars.LOG_LEVEL || 'info' }}
-          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
+          LOG_LEVEL: ${{ vars.LOG_LEVEL || 'info' }}
+          NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
           MY_EMAIL: ${{ vars.MY_EMAIL }}
           MY_INFO_EMAIL: ${{ vars.MY_INFO_EMAIL }}
           MY_PASSWORD: ${{ secrets.MY_PASSWORD }}

GITEA_VARIABLES_SETUP.md

@@ -44,62 +44,66 @@ Für den `dev` Branch brauchst du die **gleichen** Variablen, aber mit anderen W
 - `ADMIN_BASIC_AUTH` = `admin:staging_password` (kann anders sein)
 - `N8N_SECRET_TOKEN` = Dein n8n Secret Token (optional)
 
-## ⚠️ Problem: Gitea unterstützt keine branch-spezifischen Variablen
+## ✅ Lösung: Automatische Branch-Erkennung
 
-**Gitea hat keine eingebaute Funktion für branch-spezifische Variablen!**
+**Gitea unterstützt keine branch-spezifischen Variablen, aber die Workflows erkennen automatisch den Branch!**
 
-### Lösung 1: Separate Variablen (Empfohlen)
+### Wie es funktioniert:
 
-Du kannst Variablen mit Suffixen erstellen:
-
-**Variables:**
-- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev`
-- `NEXT_PUBLIC_BASE_URL_DEV` = `https://dev.dk0.dev`
-- `LOG_LEVEL_PRODUCTION` = `info`
-- `LOG_LEVEL_DEV` = `debug`
-
-Dann musst du die Workflows anpassen, um die richtige Variable zu verwenden.
-
-### Lösung 2: Workflow-spezifische Werte (Aktuell implementiert)
-
-Die Workflows haben bereits **Hardcoded Defaults**:
+Die Workflows triggern auf unterschiedlichen Branches und verwenden automatisch die richtigen Defaults:
 
 **Production Workflow** (`.gitea/workflows/production-deploy.yml`):
-```yaml
-NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
-```
+- Triggert nur auf `production` Branch
+- Verwendet: `NEXT_PUBLIC_BASE_URL` (wenn gesetzt) oder Default: `https://dk0.dev`
 
 **Dev Workflow** (`.gitea/workflows/dev-deploy.yml`):
-```yaml
-NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
-```
+- Triggert nur auf `dev` Branch  
+- Verwendet: `NEXT_PUBLIC_BASE_URL` (wenn gesetzt) oder Default: `https://dev.dk0.dev`
 
 **Das bedeutet:**
-- Wenn `NEXT_PUBLIC_BASE_URL` in Gitea gesetzt ist → wird verwendet
-- Wenn **nicht** gesetzt → verwendet den Default (Production: `dk0.dev`, Dev: `dev.dk0.dev`)
+- Du setzt **eine** Variable `NEXT_PUBLIC_BASE_URL` in Gitea
+- **Production Branch** → verwendet diese Variable (oder Default `https://dk0.dev`)
+- **Dev Branch** → verwendet diese Variable (oder Default `https://dev.dk0.dev`)
 
-## ✅ Empfohlene Konfiguration (JETZT IMPLEMENTIERT!)
+### ⚠️ WICHTIG:
 
-Die Workflows unterstützen jetzt **branch-spezifische Variablen**:
+Da beide Workflows die **gleiche Variable** verwenden, aber unterschiedliche Defaults haben:
 
-### Für Production:
-Setze in Gitea Variables:
-- `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev` ⭐ **Empfohlen**
-- ODER `NEXT_PUBLIC_BASE_URL` = `https://dk0.dev` (Fallback)
-- `LOG_LEVEL_PRODUCTION` = `info` (optional)
-- ODER `LOG_LEVEL` = `info` (Fallback)
+**Option 1: Variable NICHT setzen (Empfohlen)**
+- Production verwendet automatisch: `https://dk0.dev`
+- Dev verwendet automatisch: `https://dev.dk0.dev`
+- ✅ Funktioniert perfekt ohne Konfiguration!
 
-### Für Dev:
-Setze in Gitea Variables:
-- `NEXT_PUBLIC_BASE_URL_DEV` = `https://dev.dk0.dev` ⭐ **Empfohlen**
-- ODER `NEXT_PUBLIC_BASE_URL` = `https://dev.dk0.dev` (Fallback)
-- `LOG_LEVEL_DEV` = `debug` (optional)
-- ODER `LOG_LEVEL` = `debug` (Fallback)
+**Option 2: Variable setzen**
+- Wenn du `NEXT_PUBLIC_BASE_URL` = `https://dk0.dev` setzt
+- Dann verwendet **beide** Branches diese URL (nicht ideal für Dev)
+- ⚠️ Nicht empfohlen, da Dev dann die Production-URL verwendet
 
-### Fallback-Logik:
-1. Zuerst wird die branch-spezifische Variable geprüft (`NEXT_PUBLIC_BASE_URL_PRODUCTION` / `NEXT_PUBLIC_BASE_URL_DEV`)
-2. Falls nicht gesetzt, wird die allgemeine Variable verwendet (`NEXT_PUBLIC_BASE_URL`)
-3. Falls auch die nicht gesetzt ist, wird der Default verwendet (`https://dk0.dev` / `https://dev.dk0.dev`)
+## ✅ Empfohlene Konfiguration
+
+### ⭐ Einfachste Lösung: NICHTS setzen!
+
+Die Workflows haben bereits die richtigen Defaults:
+- **Production Branch** → automatisch `https://dk0.dev`
+- **Dev Branch** → automatisch `https://dev.dk0.dev`
+
+Du musst **NICHTS** in Gitea setzen, es funktioniert automatisch!
+
+### Wenn du Variablen setzen willst:
+
+**Nur diese Variablen setzen (für beide Branches):**
+- `MY_EMAIL` = `contact@dk0.dev`
+- `MY_INFO_EMAIL` = `info@dk0.dev`
+- `LOG_LEVEL` = `info` (wird für Production verwendet, Dev überschreibt mit `debug`)
+
+**Secrets (für beide Branches):**
+- `MY_PASSWORD` = Dein Email-Passwort
+- `MY_INFO_PASSWORD` = Dein Info-Email-Passwort
+- `ADMIN_BASIC_AUTH` = `admin:dein_passwort`
+- `N8N_SECRET_TOKEN` = Dein n8n Token (optional)
+
+**⚠️ NICHT setzen:**
+- `NEXT_PUBLIC_BASE_URL` - Lass diese Variable leer, damit jeder Branch seinen eigenen Default verwendet!
 
 ## 📝 Schritt-für-Schritt Anleitung
 
@@ -125,24 +129,26 @@ https://git.dk0.dev/denshooter/portfolio/settings
 
 ## 🔄 Aktuelle Workflow-Logik
 
-Die Workflows verwenden diese Logik:
+Die Workflows verwenden diese einfache Logik:
 
 ```yaml
-# Production
-NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_PRODUCTION || vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
+# Production Workflow (triggert nur auf production branch)
+NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dk0.dev' }}
 
-# Dev
-NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL_DEV || vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
+# Dev Workflow (triggert nur auf dev branch)
+NEXT_PUBLIC_BASE_URL: ${{ vars.NEXT_PUBLIC_BASE_URL || 'https://dev.dk0.dev' }}
 ```
 
 **Das bedeutet:**
-1. **Production** sucht zuerst nach `NEXT_PUBLIC_BASE_URL_PRODUCTION`, dann `NEXT_PUBLIC_BASE_URL`, dann Default
-2. **Dev** sucht zuerst nach `NEXT_PUBLIC_BASE_URL_DEV`, dann `NEXT_PUBLIC_BASE_URL`, dann Default
+- Jeder Workflow hat seinen **eigenen Default**
+- Wenn `NEXT_PUBLIC_BASE_URL` in Gitea gesetzt ist, wird diese verwendet
+- Wenn **nicht** gesetzt, verwendet jeder Branch seinen eigenen Default
 
-**Empfehlung:**
-- Setze `NEXT_PUBLIC_BASE_URL_PRODUCTION` = `https://dk0.dev` für Production
-- Setze `NEXT_PUBLIC_BASE_URL_DEV` = `https://dev.dk0.dev` für Dev
-- So kannst du beide Branches unabhängig konfigurieren!
+**⭐ Beste Lösung:**
+- **NICHT** `NEXT_PUBLIC_BASE_URL` in Gitea setzen
+- Dann verwendet Production automatisch `https://dk0.dev`
+- Und Dev verwendet automatisch `https://dev.dk0.dev`
+- ✅ Perfekt getrennt, ohne Konfiguration!
 
 ## 🎯 Best Practice
 

components/StagingBanner.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import React from 'react';
-import { motion } from 'framer-motion';
+import { motion, AnimatePresence } from 'framer-motion';
 import { AlertTriangle, X } from 'lucide-react';
 
 export function StagingBanner() {
@@ -31,32 +31,43 @@ export function StagingBanner() {
   }
 
   return (
+    <AnimatePresence>
       <motion.div
-      initial={{ y: -100, opacity: 0 }}
-      animate={{ y: 0, opacity: 1 }}
-      exit={{ y: -100, opacity: 0 }}
-      className="fixed top-0 left-0 right-0 z-50 bg-gradient-to-r from-yellow-500 via-orange-500 to-red-500 text-white shadow-lg"
+        initial={{ scale: 0, opacity: 0, x: 20, y: 20 }}
+        animate={{ scale: 1, opacity: 1, x: 0, y: 0 }}
+        exit={{ scale: 0, opacity: 0 }}
+        transition={{ type: "spring", damping: 20, stiffness: 300 }}
+        className="fixed bottom-6 right-6 z-50 max-w-sm"
       >
-      <div className="container mx-auto px-4 py-2 md:py-3 flex items-center justify-between gap-4">
-            <div className="flex items-center gap-3">
-          <AlertTriangle className="w-5 h-5 animate-pulse flex-shrink-0" />
-          <div className="flex-1 min-w-0">
-            <p className="font-bold text-sm md:text-base">
-              🧪 TEST / DEVELOPMENT VERSION
-            </p>
-            <p className="text-xs md:text-sm text-white/90">
-              This is a staging environment. Not production-ready. Data may be unstable.
-            </p>
-          </div>
+        <div className="bg-gradient-to-br from-yellow-500 via-orange-500 to-red-500 text-white rounded-xl shadow-2xl border-2 border-white/20 backdrop-blur-sm overflow-hidden">
+          {/* Header */}
+          <div className="bg-black/20 px-4 py-2 flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="w-4 h-4 animate-pulse" />
+              <span className="font-bold text-xs uppercase tracking-wide">
+                Test Environment
+              </span>
             </div>
             <button
               onClick={() => setIsVisible(false)}
               className="p-1 hover:bg-white/20 rounded transition-colors"
               aria-label="Close banner"
             >
-          <X className="w-4 h-4" />
+              <X className="w-3 h-3" />
             </button>
           </div>
+          
+          {/* Content */}
+          <div className="px-4 py-3">
+            <p className="text-sm font-semibold mb-1">
+              🧪 Development Version
+            </p>
+            <p className="text-xs text-white/90 leading-relaxed">
+              This is a staging environment. Not production-ready. Data may be unstable.
+            </p>
+          </div>
+        </div>
       </motion.div>
+    </AnimatePresence>
   );
 }