From c595cbb44835108404afd115433ce0cd379c9f04 Mon Sep 17 00:00:00 2001
From: admin <tim.leikauf@gmail.com>
Date: Thu, 28 May 2026 21:45:31 +0200
Subject: [PATCH] feat: status dropdowns, difficulty badges, published=violet
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- STATUS_COLORS: published → violet, draft → gray
- StatusSelect: shared dropdown component with status colors
- Top bar: picture status dropdown (uploaded/published/blocked)
- ObjectListPanel: per-object status dropdown, changeable inline
- PairsPanel collapsed: difficulty badge (Leicht/Mittel) + status badge
- EditPairForm: status dropdown at top of edit form

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 src/lib/tables.js             |  4 +-
 src/pages/ContentCreation.jsx | 78 ++++++++++++++++++++++++++++++-----
 2 files changed, 69 insertions(+), 13 deletions(-)

diff --git a/src/lib/tables.js b/src/lib/tables.js
index 3e6f8d6..e119562 100644
--- a/src/lib/tables.js
+++ b/src/lib/tables.js
@@ -276,9 +276,9 @@ export const TABLES = {
 };
 
 export const STATUS_COLORS = {
-  published:   'bg-green-100 text-green-800',
+  published:   'bg-violet-100 text-violet-800',
   blocked:     'bg-red-100 text-red-800',
-  draft:       'bg-gray-100 text-gray-700',
+  draft:       'bg-gray-100 text-gray-600',
   uploaded:    'bg-blue-100 text-blue-800',
   requested:   'bg-yellow-100 text-yellow-800',
   translated:  'bg-indigo-100 text-indigo-800',
diff --git a/src/pages/ContentCreation.jsx b/src/pages/ContentCreation.jsx
index c00f86b..eb36340 100644
--- a/src/pages/ContentCreation.jsx
+++ b/src/pages/ContentCreation.jsx
@@ -181,6 +181,27 @@ function WordTag({ word, onRemove }) {
 
 // ─── PairForm ─────────────────────────────────────────────────────────────────
 
+// ─── Shared status helpers ────────────────────────────────────────────────────
+
+const LEVEL_LABELS = { 1: 'Leicht', 2: 'Mittel' };
+const LEVEL_COLORS = { 1: 'bg-sky-50 text-sky-700', 2: 'bg-amber-50 text-amber-700' };
+
+function StatusSelect({ value, options, onChange, saving, size = 'sm' }) {
+  const cls = STATUS_COLORS[value] || 'bg-gray-100 text-gray-600';
+  const pad = size === 'xs' ? 'px-1.5 py-0.5 text-[10px]' : 'px-2 py-1 text-xs';
+  return (
+    <select
+      value={value || ''}
+      onChange={e => onChange(e.target.value)}
+      disabled={saving}
+      onClick={e => e.stopPropagation()}
+      className={`${cls} ${pad} rounded-full font-medium border-0 cursor-pointer focus:outline-none focus:ring-1 focus:ring-slate-300 appearance-none disabled:opacity-50`}
+    >
+      {options.map(o => <option key={o} value={o}>{o}</option>)}
+    </select>
+  );
+}
+
 const PAIR_TYPES = [
   { value: 'text',     label: 'Text',      hint: 'Nur positives Statement' },
   { value: 'yes_no',   label: 'Ja / Nein', hint: 'Frage + Ja/Nein Antwort' },
@@ -448,6 +469,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
   const [type, setType] = useState(pair.answer_type || '');
+  const [pairStatus, setPairStatus] = useState(pair.status || 'draft');
   const [question, setQuestion] = useState('');
   const [positive, setPositive] = useState('');
   const [negative, setNegative] = useState('');
@@ -597,6 +619,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
         patchPair.negative_statement_id = s.id;
       }
       if (pair.answer_type !== type) patchPair.answer_type = type;
+      if (pair.status !== pairStatus) patchPair.status = pairStatus;
       if (Object.keys(patchPair).length) await apiPatch('/pairs', pair.id, patchPair);
       onSaved();
     } catch (e) { alert('Fehler: ' + e.message); }
@@ -609,6 +632,10 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
 
   return (
     <div className="border border-amber-200 rounded-xl p-3 bg-amber-50/20 space-y-3">
+      <div className="flex items-center gap-2">
+        <label className="text-xs font-semibold text-slate-500 uppercase tracking-wide shrink-0">Status</label>
+        <StatusSelect value={pairStatus} options={['draft','published','blocked']} onChange={setPairStatus} saving={saving} />
+      </div>
       <div>
         <label className="block text-xs font-semibold text-slate-500 uppercase tracking-wide mb-1">Typ</label>
         <select value={type} onChange={e => setType(e.target.value)}
@@ -744,7 +771,7 @@ function EditPairForm({ pair, allObjects, onSaved, onCancel, onDeleted }) {
 
 // ─── Left panel: Object list ──────────────────────────────────────────────────
 
-function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAddObject, onSelectObject, currentPicture }) {
+function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAddObject, onSelectObject, currentPicture, onObjectStatusChange }) {
   return (
     <aside className="w-1/5 min-w-[180px] border-r border-slate-200 bg-white flex flex-col overflow-hidden">
       <div className="px-3 py-2.5 border-b border-slate-100 bg-slate-50 flex-shrink-0 space-y-1.5">
@@ -769,19 +796,22 @@ function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAd
           <p className="text-xs text-slate-400 text-center mt-6">Noch keine Objekte.<br />Klicke oben um eines zu zeichnen.</p>
         )}
         {objects.map((obj, i) => (
-          <button
+          <div
             key={obj.id}
             onClick={() => onSelectObject(obj.id === selectedObjectId ? null : obj.id)}
-            className={`w-full text-left rounded-lg border p-2.5 transition-all
+            className={`w-full text-left rounded-lg border p-2.5 transition-all cursor-pointer
               ${obj.id === selectedObjectId && mode !== 'add'
                 ? 'border-indigo-400 bg-indigo-50 ring-1 ring-indigo-300'
                 : 'border-slate-200 bg-slate-50 hover:border-indigo-200 hover:bg-indigo-50/40'}`}
           >
             <div className="flex items-center gap-1.5 mb-1">
-              <span className="text-xs font-bold text-slate-400">#{i + 1}</span>
-              <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${STATUS_COLORS[obj.status] || 'bg-slate-100 text-slate-600'}`}>
-                {obj.status}
-              </span>
+              <span className="text-xs font-bold text-slate-400 shrink-0">#{i + 1}</span>
+              <StatusSelect
+                value={obj.status}
+                options={['draft', 'published', 'blocked']}
+                onChange={s => onObjectStatusChange(obj.id, s)}
+                size="xs"
+              />
             </div>
             <div className="flex flex-wrap gap-1">
               {(obj._words || []).slice(0, 4).map(w => (
@@ -793,7 +823,7 @@ function ObjectListPanel({ objects, loadingObjects, mode, selectedObjectId, onAd
                 <span className="text-xs text-slate-400">Keine Wörter</span>
               )}
             </div>
-          </button>
+          </div>
         ))}
       </div>
     </aside>
@@ -1090,10 +1120,15 @@ function PairsPanel({ selectedObject, allObjects, objectPairs, loadingPairs, onP
                   onDeleted={id => { setEditingId(null); onPairsReload(); }} />
               ) : (
                 <div className="rounded-lg border border-slate-200 p-3 bg-slate-50 space-y-1.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-xs font-bold text-slate-400">#{i + 1}</span>
+                  <div className="flex items-center gap-1.5 flex-wrap">
+                    <span className="text-xs font-bold text-slate-400 shrink-0">#{i + 1}</span>
                     <span className={`text-xs px-1.5 py-0.5 rounded-full font-medium ${STATUS_COLORS[pair.status] || 'bg-slate-100 text-slate-600'}`}>{pair.status}</span>
                     <span className="text-xs bg-slate-200 text-slate-600 rounded px-1.5 py-0.5">{pair.answer_type}</span>
+                    {pair.difficulty_level && (
+                      <span className={`text-xs px-1.5 py-0.5 rounded font-medium ${LEVEL_COLORS[pair.difficulty_level] || 'bg-slate-100 text-slate-500'}`}>
+                        {LEVEL_LABELS[pair.difficulty_level] || pair.difficulty_level}
+                      </span>
+                    )}
                     <button onClick={() => setEditingId(pair.id)}
                       className="ml-auto text-xs text-slate-400 hover:text-indigo-600 px-1.5 py-0.5 rounded hover:bg-indigo-50 transition-colors" title="Bearbeiten">✏️</button>
                   </div>
@@ -1378,6 +1413,21 @@ export default function ContentCreation() {
     finally { setMarkingDone(false); }
   }
 
+  async function handlePictureStatusChange(newStatus) {
+    if (!currentPicture) return;
+    try {
+      await apiPatch('/pictures', currentPicture.id, { status: newStatus });
+      setPictures(prev => prev.map((p, i) => i === pictureIndex ? { ...p, status: newStatus } : p));
+    } catch (e) { alert('Fehler: ' + e.message); }
+  }
+
+  async function handleObjectStatusChange(objectId, newStatus) {
+    try {
+      await apiPatch('/objects', objectId, { status: newStatus });
+      setObjects(prev => prev.map(o => o.id === objectId ? { ...o, status: newStatus } : o));
+    } catch (e) { alert('Fehler: ' + e.message); }
+  }
+
   function reloadPairs() {
     if (!selectedObjectId) return;
     setLoadingPairs(true);
@@ -1412,8 +1462,13 @@ export default function ContentCreation() {
               <>
                 <span className="font-mono opacity-60">{currentPicture.id?.slice(0, 8)}…</span>
                 {currentPicture.design && <span>{currentPicture.design}</span>}
+                <StatusSelect
+                  value={currentPicture.status}
+                  options={['uploaded', 'published', 'blocked']}
+                  onChange={handlePictureStatusChange}
+                />
                 {currentPicture.objects_created && (
-                  <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">✓ Objekte erstellt</span>
+                  <span className="px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">✓ Objekte</span>
                 )}
               </>
             )}
@@ -1435,6 +1490,7 @@ export default function ContentCreation() {
             onAddObject={handleAddObject}
             onSelectObject={handleSelectObject}
             currentPicture={currentPicture}
+            onObjectStatusChange={handleObjectStatusChange}
           />
 
           <ImageCanvas