From 2b5a7b1a468036ae85431fd3b5e294bdef07897f Mon Sep 17 00:00:00 2001 From: Till JS Date: Fri, 24 Apr 2026 00:09:56 +0200 Subject: [PATCH] refactor(wardrobe): lift upload zone to top, move intro behind help icon MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The GridView opened with a big welcome card ("Kleiderschrank · Fotografiere Kleidungsstücke …") followed by the category tabs and the grid, with the upload zone tucked at the very bottom. In the narrow workbench card this pushed every actionable element below the fold on first open — the user had to scroll past an empty state to find "Kleidungsstück hochladen". Match the pattern profile/ListView and other mature modules use: - Welcome + category-pick hint move into help-content.ts under the `wardrobe` key. registerApp auto-attaches it, so the (?) icon in the ModuleShell header now renders an overlay with the description, features list, and tips. - Upload zone moves up to sit directly under the category tabs — always visible, reflecting the active category in its label. - Empty-state text updates to point at the zone above instead of the (now-removed) "Hinzufügen" button. - Active-space hint becomes a small footer line, only rendered in non-personal spaces where the per-Space wardrobe split actually matters. No data-layer or store changes. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../web/src/lib/app-registry/help-content.ts | 17 ++++ .../modules/wardrobe/views/GridView.svelte | 82 ++++++++----------- 2 files changed, 52 insertions(+), 47 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 69595588b..7ed49beb0 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 @@ -967,6 +967,23 @@ export const MODULE_HELP: Record = { ], tips: ['System-Auto folgt deinem OS-Dark-Mode automatisch zur richtigen Uhrzeit'], }, + wardrobe: { + description: + 'Dein digitaler Kleiderschrank — fotografiere Kleidungsstücke und Accessoires, komponiere Outfits, und probiere sie mit KI an dir selbst an. Pro Space ein eigener Schrank: was im Family-Space liegt, taucht im Brand-Space nicht auf.', + features: [ + 'Kleidung nach Kategorien (Oberteile, Hosen, Kleider, Jacken, Schuhe, Accessoires …)', + 'Outfits aus mehreren Stücken komponieren und als Set anprobieren', + 'Solo-Try-On pro Einzelstück — Accessoire-Modus (Brille, Schmuck, Hut) rendert nur das Gesicht und spart Credits', + 'Referenzbilder aus „Meine Bilder" (Gesicht + optional Ganzkörper) werden automatisch genutzt', + 'MCP-Tools: listGarments / listOutfits / createOutfit / tryOn für Agents', + ], + tips: [ + 'Aktive Kategorie oben bestimmt den Typ für neue Uploads — erst die Kategorie wählen, dann die Datei droppen.', + 'Die Upload-Zone oben akzeptiert Drag-&-Drop direkt aus dem Finder.', + 'Frontal-Fotos mit hellem Hintergrund liefern die besten Try-On-Ergebnisse.', + 'Ohne Gesichtsbild kannst du kein Try-On starten — der Banner oben hilft beim Upload in einem Schritt.', + ], + }, 'research-lab': { description: 'Web-Research-Anbieter Seite-an-Seite vergleichen: gleiche Query an bis zu fünf Provider parallel, Antworten + Latenz + Kosten nebeneinander. Alle Runs werden serverseitig persistiert für spätere Auswertung.', diff --git a/apps/mana/apps/web/src/lib/modules/wardrobe/views/GridView.svelte b/apps/mana/apps/web/src/lib/modules/wardrobe/views/GridView.svelte index be5873d0e..b14d72a3c 100644 --- a/apps/mana/apps/web/src/lib/modules/wardrobe/views/GridView.svelte +++ b/apps/mana/apps/web/src/lib/modules/wardrobe/views/GridView.svelte @@ -1,16 +1,21 @@ -
- -
-
-
- -

Kleiderschrank

-
- {#if activeSpace} - - {activeSpace.type === 'personal' ? 'Persönlich' : activeSpace.name} - - {/if} -
-

- Fotografiere Kleidungsstücke und Accessoires, gruppiere sie in Outfits, und probiere sie mit - KI an dir selbst an. Du kannst sie später im Generator als Referenz nutzen. -

-

- - - Aktive Kategorie bestimmt den Typ für neue Uploads — auf "Alle" landen sie als "{CATEGORY_LABELS_SINGULAR.other}" - und können auf der Detailseite umgestellt werden. - -

-
- - +
+ (activeTab = next)} /> + + + {#if uploadError} {:else if garments.length === 0} -
+

Noch nichts im Schrank.

- Lade dein erstes Kleidungsstück hoch — unten auf "Hinzufügen" oder zieh eine Datei direkt in - die Zone. + Zieh ein Foto in die Zone oben — oder klick sie an, um eins auszuwählen.

{:else} -
+

Keine Einträge unter {activeTab === 'all' ? 'Alle' : CATEGORY_LABELS[activeTab]} {/if} - - + + {#if activeSpace && activeSpace.type !== 'personal'} +

+ Dieser Schrank gehört zu {activeSpace.name} — Uploads landen + nur hier, nicht in deinem persönlichen Schrank. +

+ {/if}