Preview: Block ausserhalb des Formulars, Validierung und Feinschliff

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

src/components/AssignedProjectCard.jsx

@@ -112,7 +112,7 @@ export default function AssignedProjectCard({ project, onUnassign, showActions =
         <StatusBadge label="Provisioning" value={project.provisioningStatus} />
       </div>
 
-      {showActions && (
+      {showActions && project.subdomain && (
         <div style={{ marginTop: 10 }}>
           <button
             type="button"
@@ -124,7 +124,7 @@ export default function AssignedProjectCard({ project, onUnassign, showActions =
           </button>
           {showPreviewBlock && (
             <div style={{ marginTop: 8 }}>
-              <PreviewBlock projectId={project.$id} />
+              <PreviewBlock key={project.$id} projectId={project.$id} />
             </div>
           )}
         </div>

src/components/PreviewBlock.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useRef } from 'react'
 import { MODE_OPTIONS, previewStatus, modeHint } from '../lib/previewView'
-import { isValidEnvName, buildEnvPayload, isDevPreview } from '../lib/previewEnv'
+import { isValidEnvName, buildEnvPayload, isDevPreview, dotColor, envValueTooLong, MAX_ENV_VARS } from '../lib/previewEnv'
 import {
   fetchPreview,
   setPreviewMode,
@@ -11,7 +11,7 @@ import {
   fetchPreviewLog,
 } from '../lib/previewApi'
 
-const DOT = { green: '#10b981', yellow: '#f59e0b', red: '#ef4444', grey: '#a0aec0' }
+const STATE_OF_COLOR = { green: 'online', yellow: 'building', red: 'failed', grey: 'off' }
 const NOT_ACTIVE = 'Preview-Runner ist nicht aktiv'
 
 const logDate = (at) => {
@@ -59,6 +59,7 @@ export default function PreviewBlock({ projectId }) {
       if (!alive.current) return
       setData(r)
       setInactive(false)
+      setError('')
     } catch (err) {
       handleError(err)
     } finally {
@@ -93,10 +94,17 @@ export default function PreviewBlock({ projectId }) {
     setLogFile(runFile)
     setLogText('')
     if (!runFile) return
-    run(async () => {
-      const r = await fetchPreviewLog(projectId, runFile)
-      setLogText(Array.isArray(r.lines) ? r.lines.join('\n') : String(r.log ?? r.text ?? ''))
-    })
+    setBusy(true)
+    setError('')
+    fetchPreviewLog(projectId, runFile)
+      .then((r) => {
+        if (alive.current) setLogText(Array.isArray(r.lines) ? r.lines.join('\n') : String(r.log ?? r.text ?? ''))
+      })
+      .catch((err) => {
+        handleError(err)
+        if (alive.current) setLogText(`Fehler: ${err?.message || 'Protokoll konnte nicht geladen werden'}`)
+      })
+      .finally(() => { if (alive.current) setBusy(false) })
   }
 
   const addPending = (name, value) => {
@@ -113,6 +121,14 @@ export default function PreviewBlock({ projectId }) {
       setEnvError('Bitte einen Wert eingeben.')
       return
     }
+    if (envValueTooLong(newValue)) {
+      setEnvError('Der Wert ist zu lang (max. 4096 Byte).')
+      return
+    }
+    if (!names.includes(newName) && names.length >= MAX_ENV_VARS) {
+      setEnvError(`Maximal ${MAX_ENV_VARS} Variablen möglich.`)
+      return
+    }
     setEnvError('')
     addPending(newName, newValue)
     setNewName('')
@@ -132,6 +148,10 @@ export default function PreviewBlock({ projectId }) {
       setEnvError('Bitte einen neuen Wert eingeben.')
       return
     }
+    if (envValueTooLong(editValue)) {
+      setEnvError('Der Wert ist zu lang (max. 4096 Byte).')
+      return
+    }
     setEnvError('')
     addPending(editName, editValue)
     setEditName('')
@@ -144,6 +164,13 @@ export default function PreviewBlock({ projectId }) {
     setPendingRemove([])
   })
 
+  const enter = (fn) => (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      fn()
+    }
+  }
+
   if (loading) return <div className="text-grey" style={{ fontSize: 12 }}>Lädt …</div>
 
   const view = data ? { ...data } : { state: 'off' }
@@ -153,7 +180,7 @@ export default function PreviewBlock({ projectId }) {
   const names = [...new Set([...(data?.envNames || []), ...Object.keys(pendingSet)])].filter((n) => !pendingRemove.includes(n))
   const dirty = Object.keys(pendingSet).length > 0 || pendingRemove.length > 0
   const dev = isDevPreview(data)
-  const logs = (data?.logs || []).slice(0, 5)
+  const logs = [...(data?.logs || [])].sort((a, b) => new Date(b.at) - new Date(a.at)).slice(0, 5)
 
   const small = { fontSize: 12 }
 
@@ -176,7 +203,7 @@ export default function PreviewBlock({ projectId }) {
           </div>
           {hint && <div className="text-grey" style={{ ...small, marginTop: 4 }}>{hint}</div>}
           <div style={{ marginTop: 8, display: 'flex', gap: 6, alignItems: 'flex-start' }}>
-            <span style={{ width: 10, height: 10, borderRadius: '50%', background: DOT[status.color], display: 'inline-block', flexShrink: 0, marginTop: 4 }} />
+            <span style={{ width: 10, height: 10, borderRadius: '50%', background: dotColor(STATE_OF_COLOR[status.color]), display: 'inline-block', flexShrink: 0, marginTop: 4 }} />
             <span style={{ overflowWrap: 'anywhere' }}>{status.text}</span>
           </div>
           {data.state === 'failed' && data.error && (
@@ -240,7 +267,7 @@ export default function PreviewBlock({ projectId }) {
                   <span className="text-grey">•••</span>
                   {editName === n ? (
                     <>
-                      <input type="text" className="form-control" style={{ flex: '1 1 120px', minWidth: 0 }} placeholder="Neuer Wert" value={editValue} onChange={(e) => setEditValue(e.target.value)} />
+                      <input className="form-control" style={{ flex: '1 1 120px', minWidth: 0 }} type="password" autoComplete="off" placeholder="Neuer Wert" value={editValue} onKeyDown={enter(handleChange)} onChange={(e) => setEditValue(e.target.value)} />
                       <button type="button" className="btn btn-sm" onClick={handleChange}>Übernehmen</button>
                     </>
                   ) : (
@@ -250,8 +277,8 @@ export default function PreviewBlock({ projectId }) {
                 </div>
               ))}
               <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center', marginTop: 8 }}>
-                <input type="text" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="NAME" value={newName} onChange={(e) => setNewName(e.target.value)} />
-                <input type="text" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="Wert" value={newValue} onChange={(e) => setNewValue(e.target.value)} />
+                <input type="text" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="NAME" onKeyDown={enter(handleAdd)} value={newName} onChange={(e) => setNewName(e.target.value)} />
+                <input type="password" autoComplete="off" className="form-control" style={{ flex: '1 1 140px', minWidth: 0 }} placeholder="Wert" onKeyDown={enter(handleAdd)} value={newValue} onChange={(e) => setNewValue(e.target.value)} />
                 <button type="button" className="btn btn-sm" disabled={busy} onClick={handleAdd}>Hinzufügen</button>
               </div>
               {envError && <div style={{ color: '#f87171', ...small, marginTop: 4 }}>{envError}</div>}

src/lib/previewEnv.js

@@ -22,3 +22,8 @@ export function isDevPreview(p) {
   if (p.mode === 'dev') return true
   return (p.mode || 'auto') === 'auto' && typeof p.detected === 'string' && p.detected.startsWith('dev:')
 }
+
+export const MAX_ENV_VARS = 30
+export function envValueTooLong(value) {
+  return new TextEncoder().encode(String(value ?? '')).length > 4096
+}

src/pages/ProjectsPage.jsx

@@ -735,13 +735,6 @@ export default function ProjectsPage() {
                 </div>
               )}
 
-              {editForm.projectType !== 'project' && (
-                <div className="form-group">
-                  <label className="form-label">Preview</label>
-                  <PreviewBlock projectId={editProject.$id} />
-                </div>
-              )}
-
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '8px', marginTop: '16px', flexWrap: 'wrap' }}>
                 <button
                   type="button"
@@ -759,6 +752,12 @@ export default function ProjectsPage() {
                 </button>
               </div>
             </form>
+            {editForm.projectType !== 'project' && (
+              <div className="form-group" style={{ marginTop: 16 }}>
+                <label className="form-label">Preview</label>
+                <PreviewBlock key={editProject.$id} projectId={editProject.$id} />
+              </div>
+            )}
           </div>
         </div>
       )}

src/pages/ServicesPage.jsx

@@ -58,7 +58,9 @@ export default function ServicesPage() {
                         <span
                           title={`Preview: ${p.previewState}`}
                           style={{ display: 'inline-block', width: 9, height: 9, borderRadius: '50%', background: dotColor(p.previewState), marginRight: 6 }}
-                        />
+                        >
+                          <span style={{ position: 'absolute', width: 1, height: 1, overflow: 'hidden', clip: 'rect(0 0 0 0)', whiteSpace: 'nowrap' }}>{`Preview: ${p.previewState}`}</span>
+                        </span>
                       )}
                       {p.projectName || p.repoFullName}
                     </div>