Preview: Block im WOMS

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

src/pages/ProjectsPage.jsx

@@ -1,5 +1,6 @@
 import { useState, useEffect, useMemo } from 'react'
 import { useNavigate } from 'react-router-dom'
+import PreviewBlock from '../components/PreviewBlock'
 import {
   FaFolder,
   FaPlus,
@@ -734,6 +735,13 @@ 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"

src/pages/ServicesPage.jsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useMemo } from 'react'
 import { Link, useNavigate } from 'react-router-dom'
 import { FaSpinner } from 'react-icons/fa6'
+import { dotColor } from '../lib/previewEnv'
 import { fetchServices } from '../lib/projectKindsApi'
 import { servicesCards } from '../lib/servicesView'
 import { PageHeader, Card, Button, Badge } from '../components/ui'
@@ -52,7 +53,15 @@ export default function ServicesPage() {
               {c.projects.map((p) => (
                 <div key={p.id} className="list-row" style={{ flexWrap: 'wrap' }}>
                   <div className="grow" style={{ minWidth: 0, overflowWrap: 'anywhere' }}>
-                    <div style={{ fontWeight: 700 }}>{p.projectName || p.repoFullName}</div>
+                    <div style={{ fontWeight: 700 }}>
+                      {p.previewState && (
+                        <span
+                          title={`Preview: ${p.previewState}`}
+                          style={{ display: 'inline-block', width: 9, height: 9, borderRadius: '50%', background: dotColor(p.previewState), marginRight: 6 }}
+                        />
+                      )}
+                      {p.projectName || p.repoFullName}
+                    </div>
                     <div className="muted">
                       {[p.customerName, p.previewUrl && 'Preview'].filter(Boolean).join(' · ') || 'Intern'}
                     </div>