From 21dbce6631a2373e995a5acaffd8c4d236903845 Mon Sep 17 00:00:00 2001 From: Till JS Date: Sat, 25 Apr 2026 13:57:08 +0200 Subject: [PATCH] feat(writing): smarter empty-state + help-content + de-emphasized Stile link MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Three workbench-card UX fixes for the Schreiben module. Smart empty-state (replaces the small "Noch keine Drafts" line): - Hero block with icon + 1-line pitch + meta-line ("✨ 12 Textarten · 9 Stile · 7 Quellen-Typen · End-to-End-verschlüsselt"). Sells the module's surface area before the user has anything saved. - Six quick-start tiles (Blog · Essay · E-Mail · Social · Brief · Rede) in a 3-col grid. Tile click → BriefingForm opens with that kind pre-selected, skipping the Textart-dropdown for the most common cases. Full 12-kind picker remains one click away inside the form. - Search + KindTabs + status-filter + favorites-toggle now hide when drafts.length === 0 — filtering nothing was visual noise. They reappear the moment the first draft lands. De-emphasized Stile link: - Was a labeled "🎨 Stile" pill competing with "+ Neuer Draft" for attention. Now a compact icon-only ghost button (just 🎨) with an aria-label so screen readers still get it. Frees the action bar so the primary CTA stands alone. Module help (renders behind the ?-icon in the Workbench shell): - New `writing` entry in MODULE_HELP with description + 9 features (kinds / styles / references / refinement / versioning / visibility / export / persona-linkage / token cost) + 5 tips covering keyboard shortcuts, ✨-button, the Quellen-flow, drag-source, and custom styles. Uses the existing auto-attach via app-registry's onMissing- help fallback — no AppPage changes needed. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../web/src/lib/app-registry/help-content.ts | 22 ++ .../lib/modules/writing/views/ListView.svelte | 250 ++++++++++++++---- 2 files changed, 223 insertions(+), 49 deletions(-) diff --git a/apps/mana/apps/web/src/lib/app-registry/help-content.ts b/apps/mana/apps/web/src/lib/app-registry/help-content.ts index 82693ff8d..fc6e4b0c6 100644 --- a/apps/mana/apps/web/src/lib/app-registry/help-content.ts +++ b/apps/mana/apps/web/src/lib/app-registry/help-content.ts @@ -612,6 +612,28 @@ export const MODULE_HELP: Record = { 'Lege deinen Heimatort als Standard fest', ], }, + writing: { + description: + 'KI-Ghostwriter für intentional produzierten Prosa-Text. Brief Thema, Stil und Quellen — ein fertiger Entwurf entsteht, den du iterativ verfeinerst.', + features: [ + '12 Textarten: Blog, Essay, E-Mail, Social, Story, Brief, Rede, Bewerbung, Pressetext, Bio, …', + '9 eingebaute Schreibstile (Akademisch, Casual Blog, LinkedIn, Hemingway, Memoir, …) plus eigene Stile', + 'Quellen verknüpfen aus 7 Modulen: Artikel, Notiz, Library, Kontext, Ziel, Bild, URL', + 'Selection-Verfeinerung: Markiere Text → Kürzen / Erweitern / Ton ändern / Umschreiben / Übersetzen', + 'Versionierung mit "Als Checkpoint speichern" + Wiederherstellen', + 'Visibility: privat / Space / Unlisted-Link / öffentlich', + 'Export: Markdown, PDF, "Als Artikel speichern"', + 'Persona-Linkage: Agents pinnen einen Default-Stil', + 'Token-Cost pro Generation in der Versionshistorie', + ], + tips: [ + '⌘G generiert · ⌘⇧S speichert Checkpoint · ⌘Z macht letzte Verfeinerung rückgängig', + 'Klicke ✨ neben dem Titel-Feld — die KI schlägt einen Titel aus deinem Briefing vor', + 'In der BriefingForm: "Quellen" → 7 Buttons. Nutze "Kontext" um den Space-Kontext-Doc anzuhängen.', + 'Drafts sind ziehbar — auf andere Module droppen, sobald deren Drop-Targets ausgebaut sind', + 'Eigene Stile unter "🎨 Stile" anlegen — die Beschreibung wird wörtlich an die KI übergeben', + ], + }, library: { description: 'Medien-Log — Bücher, Filme, Serien und Comics tracken. Status, Fortschritt, Bewertung.', diff --git a/apps/mana/apps/web/src/lib/modules/writing/views/ListView.svelte b/apps/mana/apps/web/src/lib/modules/writing/views/ListView.svelte index d605054b6..7b7dcfc82 100644 --- a/apps/mana/apps/web/src/lib/modules/writing/views/ListView.svelte +++ b/apps/mana/apps/web/src/lib/modules/writing/views/ListView.svelte @@ -1,6 +1,10 @@ +
+ {#if !isEmpty} - 🎨 Stile - -
- - (activeKind = k)} /> - -
- (activeStatus = s)} /> - -
+ {/if} + + 🎨 + + + {#if !isEmpty} +
+ (activeKind = k)} /> +
+ (activeStatus = s)} /> + +
+
+ {/if} + {#if showCreate}
Lädt…

+ {:else if isEmpty && !showCreate} + +
+ +

Dein KI-Ghostwriter

+

+ Brief Thema, Stil und Quellen — ein fertiger Entwurf entsteht. Verfeinere ihn absatzweise + mit ⌘G zum Generieren, Markieren + Selection-Tools, oder direkt im Editor. +

+

+ ✨ 12 Textarten · 9 Stile · 7 Quellen-Typen · End-to-End-verschlüsselt +

+ +
+

Schnellstart:

+
+ {#each QUICK_START_KINDS as kind (kind)} + + {/each} +
+
+
{:else if filtered.length === 0}
- {#if drafts.length === 0} -

Noch keine Drafts

-

- Klick auf + Neuer Draft, brief dem Ghostwriter Thema, Stil und Länge — M3 - ergänzt die Generate-Funktion. Bis dahin kannst du Drafts manuell erstellen und editieren. -

- {:else} -

Keine Drafts passen zum aktuellen Filter.

- {/if} +

Keine Drafts passen zum aktuellen Filter.

{:else}
@@ -188,25 +251,31 @@ text-align: center; margin-top: 2rem; } - .controls { + .action-bar { + display: flex; + align-items: center; + gap: 0.5rem; + margin-bottom: 0.75rem; + } + .action-bar.compact { + justify-content: flex-end; + margin-bottom: 0.25rem; + } + .filter-stack { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 1.5rem; } - .search-row { - display: flex; - align-items: center; - gap: 0.75rem; - } .styles-link { - padding: 0.45rem 0.75rem; - border-radius: 0.55rem; - border: 1px solid var(--color-border, rgba(0, 0, 0, 0.1)); + padding: 0.4rem 0.55rem; + border-radius: 0.5rem; + border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)); background: transparent; - color: inherit; + color: var(--color-text-muted, rgba(0, 0, 0, 0.55)); text-decoration: none; - font-size: 0.85rem; + font-size: 0.95rem; + line-height: 1; white-space: nowrap; flex-shrink: 0; } @@ -272,17 +341,100 @@ } .empty { max-width: 540px; - margin: 3rem auto; + margin: 2rem auto; text-align: center; } - .empty h2 { - margin: 0 0 0.5rem; - font-size: 1.2rem; - } .empty p { color: var(--color-text-muted, rgba(0, 0, 0, 0.55)); line-height: 1.5; } + + .hero { + max-width: 600px; + margin: 1.5rem auto; + padding: 1.5rem 1rem; + text-align: center; + } + .hero-icon { + font-size: 2.4rem; + line-height: 1; + margin-bottom: 0.75rem; + } + .hero h2 { + margin: 0 0 0.5rem; + font-size: 1.4rem; + font-weight: 600; + } + .hero-pitch { + color: var(--color-text-muted, rgba(0, 0, 0, 0.55)); + line-height: 1.55; + margin: 0 auto 1rem; + max-width: 480px; + font-size: 0.95rem; + } + .hero-meta { + font-size: 0.75rem; + color: var(--color-text-muted, rgba(0, 0, 0, 0.45)); + margin: 0 0 1.75rem; + } + + .quick-start { + margin-top: 1rem; + } + .quick-start-label { + font-size: 0.75rem; + text-transform: uppercase; + letter-spacing: 0.05em; + color: var(--color-text-muted, rgba(0, 0, 0, 0.55)); + margin: 0 0 0.6rem; + font-weight: 500; + } + .quick-grid { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 0.55rem; + } + .quick-tile { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 0.3rem; + padding: 0.85rem 0.5rem; + border-radius: 0.65rem; + border: 1px solid var(--color-border, rgba(0, 0, 0, 0.08)); + background: var(--color-surface, rgba(255, 255, 255, 0.04)); + cursor: pointer; + font: inherit; + color: inherit; + transition: + border-color 0.15s ease, + background 0.15s ease, + transform 0.1s ease; + } + .quick-tile:hover { + border-color: #0ea5e9; + background: color-mix(in srgb, #0ea5e9 6%, transparent); + color: #0ea5e9; + } + .quick-tile:active { + transform: scale(0.98); + } + .quick-emoji { + font-size: 1.35rem; + line-height: 1; + } + .quick-label { + font-size: 0.8rem; + font-weight: 500; + } + + @media (max-width: 480px) { + .quick-grid { + grid-template-columns: repeat(2, 1fr); + } + } + .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));