nca-ai-cms-astro-plugin 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nca-ai-cms-astro-plugin",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "type": "module",
   "exports": {
     ".": "./src/index.ts",

package/src/components/editor/SettingsTab.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import type { Prompt, SettingsSubTab } from './types';
+import type { Prompt, Setting, SettingsSubTab } from './types';
 import { styles } from './styles';
 
 const SUB_TABS: { key: SettingsSubTab; label: string }[] = [
@@ -10,11 +10,30 @@ const SUB_TABS: { key: SettingsSubTab; label: string }[] = [
   { key: 'website', label: 'Website' },
 ];
 
+const SETTINGS_TABS: SettingsSubTab[] = ['homepage', 'website'];
+
+const SETTINGS_FIELDS: Record<string, { key: string; label: string; type: 'input' | 'textarea' }[]> = {
+  homepage: [
+    { key: 'hero_headline', label: 'Hero Ueberschrift', type: 'input' },
+    { key: 'hero_text', label: 'Hero Text', type: 'textarea' },
+    { key: 'target_audience', label: 'Zielgruppe', type: 'input' },
+    { key: 'tone', label: 'Tonalitaet', type: 'input' },
+    { key: 'core_message', label: 'Kernbotschaft', type: 'textarea' },
+  ],
+  website: [
+    { key: 'cta_url', label: 'CTA Link', type: 'input' },
+    { key: 'cta_style', label: 'CTA Stil', type: 'input' },
+    { key: 'cta_prompt', label: 'CTA Prompt', type: 'textarea' },
+    { key: 'core_tags', label: 'Core Tags (kommagetrennt)', type: 'input' },
+    { key: 'brand_guidelines', label: 'Markenrichtlinien', type: 'textarea' },
+  ],
+};
+
 const CATEGORY_GUIDES: Record<SettingsSubTab, { title: string; description: string; example: string }> = {
   'homepage': {
     title: 'Homepage-Einstellungen',
-    description: 'Definiere hier Prompts, die das Erscheinungsbild und den Inhalt deiner Startseite steuern. Gute Prompts beschreiben Zielgruppe, Tonalitaet und zentrale Botschaft.',
-    example: 'Beispiel: "Schreibe einen Hero-Text fuer eine Webdesign-Agentur. Zielgruppe: KMU in Deutschland. Ton: professionell, nahbar. Kernbotschaft: Barrierefreies Webdesign als Wettbewerbsvorteil."',
+    description: 'Konfiguriere hier die zentralen Inhalte deiner Startseite: Hero-Text, Zielgruppe, Tonalitaet und Kernbotschaft.',
+    example: '',
   },
   'content-ai': {
     title: 'Content-KI Prompts',
@@ -33,11 +52,15 @@ const CATEGORY_GUIDES: Record<SettingsSubTab, { title: string; description: stri
   },
   'website': {
     title: 'Website-Einstellungen',
-    description: 'Allgemeine Einstellungen fuer deine Website: CTA-Texte, Standard-Tags, Markenrichtlinien und wiederkehrende Textbausteine.',
-    example: 'Beispiel: "Standard-CTA: Jetzt kostenlos beraten lassen. Core-Tags: Barrierefreiheit, Webdesign, SEO, WCAG. Markensprache: Sie-Anrede, professionell, loesungsorientiert."',
+    description: 'Allgemeine Einstellungen fuer deine Website: CTA-Texte, Standard-Tags und Markenrichtlinien.',
+    example: '',
   },
 };
 
+function isSettingsTab(tab: SettingsSubTab): boolean {
+  return SETTINGS_TABS.includes(tab);
+}
+
 interface EditState {
   id: string;
   value: string;
@@ -52,6 +75,9 @@ export function SettingsTab() {
   const [activeSubTab, setActiveSubTab] =
     useState<SettingsSubTab>('homepage');
   const [prompts, setPrompts] = useState<Prompt[]>([]);
+  const [_settings, setSettings] = useState<Setting[]>([]);
+  const [settingsForm, setSettingsForm] = useState<Record<string, string>>({});
+  const [settingsSaved, setSettingsSaved] = useState(false);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [editing, setEditing] = useState<EditState | null>(null);
@@ -60,7 +86,7 @@ export function SettingsTab() {
   const [addForm, setAddForm] = useState<AddFormState>({ name: '', promptText: '' });
   const [deleting, setDeleting] = useState<string | null>(null);
 
-  const loadPrompts = useCallback(async () => {
+  const loadData = useCallback(async () => {
     setLoading(true);
     setError(null);
     try {
@@ -68,6 +94,13 @@ export function SettingsTab() {
       if (!res.ok) throw new Error('Fehler beim Laden der Einstellungen');
       const data = await res.json();
       setPrompts(Array.isArray(data.prompts) ? data.prompts : []);
+      const loadedSettings: Setting[] = Array.isArray(data.settings) ? data.settings : [];
+      setSettings(loadedSettings);
+      const formValues: Record<string, string> = {};
+      for (const s of loadedSettings) {
+        formValues[s.key] = s.value;
+      }
+      setSettingsForm(formValues);
     } catch (err) {
       setError(
         err instanceof Error ? err.message : 'Ein Fehler ist aufgetreten',
@@ -78,8 +111,8 @@ export function SettingsTab() {
   }, []);
 
   useEffect(() => {
-    loadPrompts();
-  }, [loadPrompts]);
+    loadData();
+  }, [loadData]);
 
   const filteredPrompts = prompts.filter(
     (p) => p.category === activeSubTab,
@@ -122,6 +155,32 @@ export function SettingsTab() {
     }
   };
 
+  const handleSettingsSave = async () => {
+    setSaving(true);
+    setError(null);
+    setSettingsSaved(false);
+    try {
+      const fields = SETTINGS_FIELDS[activeSubTab] ?? [];
+      for (const field of fields) {
+        const value = settingsForm[field.key] ?? '';
+        const res = await fetch('/api/prompts', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ type: 'setting', key: field.key, value }),
+        });
+        if (!res.ok) throw new Error(`Fehler beim Speichern von "${field.label}"`);
+      }
+      setSettingsSaved(true);
+      setTimeout(() => setSettingsSaved(false), 3000);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Fehler beim Speichern',
+      );
+    } finally {
+      setSaving(false);
+    }
+  };
+
   const handleAdd = async () => {
     if (!addForm.name.trim() || !addForm.promptText.trim()) return;
     setSaving(true);
@@ -140,7 +199,7 @@ export function SettingsTab() {
       if (!res.ok) throw new Error('Fehler beim Erstellen');
       setAddForm({ name: '', promptText: '' });
       setShowAddForm(false);
-      await loadPrompts();
+      await loadData();
     } catch (err) {
       setError(
         err instanceof Error ? err.message : 'Fehler beim Erstellen',
@@ -191,6 +250,7 @@ export function SettingsTab() {
               setActiveSubTab(tab.key);
               setEditing(null);
               setShowAddForm(false);
+              setSettingsSaved(false);
             }}
           >
             {tab.label}
@@ -204,136 +264,189 @@ export function SettingsTab() {
 
       {error && <div style={styles.error}>{error}</div>}
 
-      {!loading && filteredPrompts.length === 0 && !showAddForm && (
-        <div style={styles.emptyGuide}>
-          <div style={styles.emptyGuideTitle}>{guide.title}</div>
-          <div style={styles.emptyGuideText}>{guide.description}</div>
-          <div style={styles.emptyGuideExample}>{guide.example}</div>
-        </div>
-      )}
-
-      {!loading && filteredPrompts.length > 0 && (
-        <div style={styles.cardGrid}>
-          {filteredPrompts.map((prompt) => (
-            <div key={prompt.id} style={styles.settingsCard}>
-              <div style={styles.settingsCardHeader}>
-                <div style={styles.settingsItemLabel}>{prompt.name}</div>
-                <div style={styles.settingsItemCategory}>
-                  {prompt.category}
-                </div>
-              </div>
-
-              {editing?.id === prompt.id ? (
-                <div style={styles.editArea}>
-                  <textarea
-                    style={styles.textarea}
-                    value={editing.value}
-                    onChange={(e) =>
-                      setEditing({ ...editing, value: e.target.value })
-                    }
-                  />
-                  <div style={styles.editButtons}>
-                    <button
-                      type="button"
-                      style={styles.saveButton}
-                      onClick={handleSave}
-                      disabled={saving}
-                    >
-                      {saving ? 'Speichere...' : 'Speichern'}
-                    </button>
-                    <button
-                      type="button"
-                      style={styles.cancelButton}
-                      onClick={handleCancel}
-                    >
-                      Abbrechen
-                    </button>
-                  </div>
-                </div>
+      {/* Settings tabs: Homepage, Website — key-value form */}
+      {!loading && isSettingsTab(activeSubTab) && (
+        <div style={styles.addForm}>
+          <div style={styles.addFormTitle}>{guide.title}</div>
+          <div style={{ ...styles.emptyGuideText, marginBottom: '1rem' }}>{guide.description}</div>
+          {(SETTINGS_FIELDS[activeSubTab] ?? []).map((field) => (
+            <div key={field.key} style={styles.addFormField}>
+              <label style={styles.addFormLabel}>{field.label}</label>
+              {field.type === 'textarea' ? (
+                <textarea
+                  style={styles.textarea}
+                  value={settingsForm[field.key] ?? ''}
+                  onChange={(e) =>
+                    setSettingsForm({ ...settingsForm, [field.key]: e.target.value })
+                  }
+                />
               ) : (
-                <>
-                  <div style={styles.settingsItemValue}>
-                    {prompt.promptText}
-                  </div>
-                  <div style={{ padding: '0 1rem 1rem', display: 'flex', gap: '0.5rem' }}>
-                    <button
-                      type="button"
-                      style={styles.editButton}
-                      onClick={() => handleEdit(prompt)}
-                    >
-                      Bearbeiten
-                    </button>
-                    <button
-                      type="button"
-                      style={styles.deleteButton}
-                      onClick={() => handleDelete(prompt.id)}
-                      disabled={deleting === prompt.id}
-                    >
-                      {deleting === prompt.id ? 'Loesche...' : 'Loeschen'}
-                    </button>
-                  </div>
-                </>
+                <input
+                  style={styles.addFormInput}
+                  type="text"
+                  value={settingsForm[field.key] ?? ''}
+                  onChange={(e) =>
+                    setSettingsForm({ ...settingsForm, [field.key]: e.target.value })
+                  }
+                />
               )}
             </div>
           ))}
-        </div>
-      )}
-
-      {!loading && showAddForm && (
-        <div style={styles.addForm}>
-          <div style={styles.addFormTitle}>Neuen Prompt hinzufuegen ({guide.title})</div>
-          <div style={styles.addFormField}>
-            <label style={styles.addFormLabel}>Name</label>
-            <input
-              style={styles.addFormInput}
-              type="text"
-              placeholder="z.B. Blog-Artikel Prompt, SEO-Analyse, Hero-Text"
-              value={addForm.name}
-              onChange={(e) => setAddForm({ ...addForm, name: e.target.value })}
-            />
-          </div>
-          <div style={styles.addFormField}>
-            <label style={styles.addFormLabel}>Prompt-Text</label>
-            <textarea
-              style={styles.textarea}
-              placeholder={guide.example}
-              value={addForm.promptText}
-              onChange={(e) => setAddForm({ ...addForm, promptText: e.target.value })}
-            />
-          </div>
           <div style={styles.editButtons}>
             <button
               type="button"
               style={styles.addButton}
-              onClick={handleAdd}
-              disabled={saving || !addForm.name.trim() || !addForm.promptText.trim()}
-            >
-              {saving ? 'Erstelle...' : 'Erstellen'}
-            </button>
-            <button
-              type="button"
-              style={styles.cancelButton}
-              onClick={() => {
-                setShowAddForm(false);
-                setAddForm({ name: '', promptText: '' });
-              }}
+              onClick={handleSettingsSave}
+              disabled={saving}
             >
-              Abbrechen
+              {saving ? 'Speichere...' : 'Einstellungen speichern'}
             </button>
+            {settingsSaved && (
+              <span style={{ color: '#4ade80', fontSize: '0.85rem', alignSelf: 'center' }}>
+                Gespeichert
+              </span>
+            )}
           </div>
         </div>
       )}
 
-      {!loading && !showAddForm && (
-        <div style={{ textAlign: 'center' as const, padding: '1rem 0' }}>
-          <button
-            type="button"
-            style={styles.addButton}
-            onClick={() => setShowAddForm(true)}
-          >
-            + Neuen Prompt hinzufuegen
-          </button>
-        </div>
+      {/* Prompt tabs: Content-KI, Analyse-KI, Bild-KI — prompt cards */}
+      {!loading && !isSettingsTab(activeSubTab) && (
+        <>
+          {filteredPrompts.length === 0 && !showAddForm && (
+            <div style={styles.emptyGuide}>
+              <div style={styles.emptyGuideTitle}>{guide.title}</div>
+              <div style={styles.emptyGuideText}>{guide.description}</div>
+              {guide.example && (
+                <div style={styles.emptyGuideExample}>{guide.example}</div>
+              )}
+            </div>
+          )}
+
+          {filteredPrompts.length > 0 && (
+            <div style={styles.cardGrid}>
+              {filteredPrompts.map((prompt) => (
+                <div key={prompt.id} style={styles.settingsCard}>
+                  <div style={styles.settingsCardHeader}>
+                    <div style={styles.settingsItemLabel}>{prompt.name}</div>
+                    <div style={styles.settingsItemCategory}>
+                      {prompt.category}
+                    </div>
+                  </div>
+
+                  {editing?.id === prompt.id ? (
+                    <div style={styles.editArea}>
+                      <textarea
+                        style={styles.textarea}
+                        value={editing.value}
+                        onChange={(e) =>
+                          setEditing({ ...editing, value: e.target.value })
+                        }
+                      />
+                      <div style={styles.editButtons}>
+                        <button
+                          type="button"
+                          style={styles.saveButton}
+                          onClick={handleSave}
+                          disabled={saving}
+                        >
+                          {saving ? 'Speichere...' : 'Speichern'}
+                        </button>
+                        <button
+                          type="button"
+                          style={styles.cancelButton}
+                          onClick={handleCancel}
+                        >
+                          Abbrechen
+                        </button>
+                      </div>
+                    </div>
+                  ) : (
+                    <>
+                      <div style={styles.settingsItemValue}>
+                        {prompt.promptText}
+                      </div>
+                      <div style={{ padding: '0 1rem 1rem', display: 'flex', gap: '0.5rem' }}>
+                        <button
+                          type="button"
+                          style={styles.editButton}
+                          onClick={() => handleEdit(prompt)}
+                        >
+                          Bearbeiten
+                        </button>
+                        <button
+                          type="button"
+                          style={styles.deleteButton}
+                          onClick={() => handleDelete(prompt.id)}
+                          disabled={deleting === prompt.id}
+                        >
+                          {deleting === prompt.id ? 'Loesche...' : 'Loeschen'}
+                        </button>
+                      </div>
+                    </>
+                  )}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {showAddForm && (
+            <div style={styles.addForm}>
+              <div style={styles.addFormTitle}>Neuen Prompt hinzufuegen ({guide.title})</div>
+              <div style={styles.addFormField}>
+                <label style={styles.addFormLabel}>Name</label>
+                <input
+                  style={styles.addFormInput}
+                  type="text"
+                  placeholder="z.B. Blog-Artikel Prompt, SEO-Analyse, Hero-Text"
+                  value={addForm.name}
+                  onChange={(e) => setAddForm({ ...addForm, name: e.target.value })}
+                />
+              </div>
+              <div style={styles.addFormField}>
+                <label style={styles.addFormLabel}>Prompt-Text</label>
+                <textarea
+                  style={styles.textarea}
+                  placeholder={guide.example}
+                  value={addForm.promptText}
+                  onChange={(e) => setAddForm({ ...addForm, promptText: e.target.value })}
+                />
+              </div>
+              <div style={styles.editButtons}>
+                <button
+                  type="button"
+                  style={styles.addButton}
+                  onClick={handleAdd}
+                  disabled={saving || !addForm.name.trim() || !addForm.promptText.trim()}
+                >
+                  {saving ? 'Erstelle...' : 'Erstellen'}
+                </button>
+                <button
+                  type="button"
+                  style={styles.cancelButton}
+                  onClick={() => {
+                    setShowAddForm(false);
+                    setAddForm({ name: '', promptText: '' });
+                  }}
+                >
+                  Abbrechen
+                </button>
+              </div>
+            </div>
+          )}
+
+          {!showAddForm && (
+            <div style={{ textAlign: 'center' as const, padding: '1rem 0' }}>
+              <button
+                type="button"
+                style={styles.addButton}
+                onClick={() => setShowAddForm(true)}
+              >
+                + Neuen Prompt hinzufuegen
+              </button>
+            </div>
+          )}
+        </>
       )}
     </div>
   );

package/task.md

@@ -13,7 +13,80 @@ Line 33-34: API `/api/prompts` returns `{ prompts, settings }` but the component
 + setPrompts(Array.isArray(data.prompts) ? data.prompts : []);
 ```
 
-## 2. Auto-register dependencies in index.ts
+## 2. Separate Settings from Prompts in SettingsTab
+
+**File:** `src/components/editor/SettingsTab.tsx`
+
+The SettingsTab currently treats all 5 sub-tabs identically, showing the "Neuen Prompt hinzufuegen" (prompt CRUD) UI for every tab. But **Homepage** and **Website** are **site settings** (key-value pairs in `SiteSettings` table), not AI prompts. Only **Content-KI**, **Analyse-KI**, and **Bild-KI** should show the prompt CRUD interface.
+
+### Changes required:
+
+1. **Import `Setting` type** from `./types` (already defined there)
+
+2. **Add constants** at the top of the file:
+
+```ts
+const SETTINGS_TABS: SettingsSubTab[] = ['homepage', 'website'];
+
+const SETTINGS_FIELDS: Record<string, { key: string; label: string; type: 'input' | 'textarea' }[]> = {
+  homepage: [
+    { key: 'hero_headline', label: 'Hero Ueberschrift', type: 'input' },
+    { key: 'hero_text', label: 'Hero Text', type: 'textarea' },
+    { key: 'target_audience', label: 'Zielgruppe', type: 'input' },
+    { key: 'tone', label: 'Tonalitaet', type: 'input' },
+    { key: 'core_message', label: 'Kernbotschaft', type: 'textarea' },
+  ],
+  website: [
+    { key: 'cta_url', label: 'CTA Link', type: 'input' },
+    { key: 'cta_style', label: 'CTA Stil', type: 'input' },
+    { key: 'cta_prompt', label: 'CTA Prompt', type: 'textarea' },
+    { key: 'core_tags', label: 'Core Tags (kommagetrennt)', type: 'input' },
+    { key: 'brand_guidelines', label: 'Markenrichtlinien', type: 'textarea' },
+  ],
+};
+```
+
+3. **Add helper function:**
+
+```ts
+function isSettingsTab(tab: SettingsSubTab): boolean {
+  return SETTINGS_TABS.includes(tab);
+}
+```
+
+4. **Add new state** in the component:
+
+```ts
+const [settings, setSettings] = useState<Setting[]>([]);
+const [settingsForm, setSettingsForm] = useState<Record<string, string>>({});
+const [settingsSaved, setSettingsSaved] = useState(false);
+```
+
+5. **Update `loadPrompts`** to also load settings:
+
+```ts
+const loadedSettings: Setting[] = Array.isArray(data.settings) ? data.settings : [];
+setSettings(loadedSettings);
+const formValues: Record<string, string> = {};
+for (const s of loadedSettings) {
+  formValues[s.key] = s.value;
+}
+setSettingsForm(formValues);
+```
+
+6. **Add `handleSettingsSave`** function that POSTs each field with `{ type: 'setting', key, value }` to `/api/prompts`
+
+7. **Update the render/return** to branch on `isSettingsTab(activeSubTab)`:
+   - **Settings tabs** (homepage, website): render a key-value form with text inputs/textareas for each field defined in `SETTINGS_FIELDS`, plus a "Einstellungen speichern" button
+   - **Prompt tabs** (content-ai, analysis-ai, image-ai): keep existing prompt card grid + "Neuen Prompt hinzufuegen" button (unchanged)
+
+8. **Update `CATEGORY_GUIDES`** for homepage and website — change descriptions to reflect settings (not prompts), remove example text
+
+### API usage for settings
+- Read: from `data.settings` array returned by `GET /api/prompts`, find by `key`
+- Write: `POST /api/prompts` with `{ type: 'setting', key, value }`
+
+## 3. Auto-register dependencies in index.ts
 
 **File:** `src/index.ts`
 
@@ -45,13 +118,13 @@ The consumer currently must manually add `react()`, `db()`, `output: 'server'`,
 }
 ```
 
-## 3. Bump version to 1.0.5
+## 4. Bump version to 1.0.5
 
 **File:** `package.json`
 
 Change `"version": "1.0.4"` to `"version": "1.0.5"`.
 
-## 4. Update README with simplified setup
+## 5. Update README with simplified setup
 
 **File:** `README.md`
 
@@ -74,4 +147,8 @@ Note that `prerender: false` is already present on all 18 `injectRoute()` calls
 1. In a test project, use only `integrations: [ncaAiCms()]` in astro config
 2. Run `npx astro dev`
 3. Open `/login` — should render without errors
-4. Log in, open `/editor` — settings tab should load without crash
+4. Log in, open `/editor` → Settings tab → Homepage: should show key-value form fields, no "Neuen Prompt hinzufuegen"
+5. Homepage tab → edit hero text → save → reload → value persists
+6. Website tab → edit CTA URL, core tags → save → reload → values persist
+7. Content-KI tab → still shows prompt cards with create/edit/delete
+8. Analyse-KI and Bild-KI → same prompt UI as before

package/update.md

@@ -1,8 +1,14 @@
 # v1.0.6
 
-## SettingsTab: category guides and custom prompts
-- Empty categories now show content marketing guidance with concrete examples per tab (Homepage, Content-KI, Analyse-KI, Bild-KI, Website)
-- New "+ Neuen Prompt hinzufuegen" button to create custom prompts directly in the UI
+## Separate settings from prompts in SettingsTab
+- Homepage and Website tabs now show key-value settings forms (hero text, zielgruppe, CTA, core tags, etc.)
+- Content-KI, Analyse-KI, and Bild-KI tabs show prompt card UI with create/edit/delete
+- Settings are saved via `POST /api/prompts` with `type: setting`
+- Each settings tab has defined fields: homepage (hero, zielgruppe, ton, kernbotschaft), website (CTA, tags, markenrichtlinien)
+
+## Category guides and custom prompts
+- Empty prompt categories show content marketing guidance with concrete examples
+- New "+ Neuen Prompt hinzufuegen" button to create custom prompts
 - Each prompt card now has a delete button
 - API: added POST with `action: create` and DELETE endpoint for prompts
 - PromptService: added `createPrompt()` and `deletePrompt()` methods