From 2f8fd66812465f93fdcb6c7245cd571a5ab71570 Mon Sep 17 00:00:00 2001
From: moh <mf@planetmutlu.com>
Date: Sun, 20 Sep 2026 17:16:52 +0200
Subject: [PATCH] STYLED - Simplify and compact the add-project form

Reorganize the project form for a lighter, more professional flow without
touching field names or the save action (all data preserved):

- LocaleInputs: drop the per-locale card wrappers for a tight 3-column
  labelled grid; shorter textareas.
- Sections and Assets: collapse each item into an accordion (closed by
  default) and show a proper empty state when there are none.
- Slim the header to badges + title + a compact progress indicator instead
  of a stats grid; drop the assets stats sidebar.
- Tighten section paddings/spacing (lg -> md) throughout.

All 375 tests pass; tsc and eslint clean.
---
 components/admin/portfolio-project-form.tsx | 555 ++++++++++----------
 1 file changed, 289 insertions(+), 266 deletions(-)

diff --git a/components/admin/portfolio-project-form.tsx b/components/admin/portfolio-project-form.tsx
index 37a5f3e..98b0fd4 100644
--- a/components/admin/portfolio-project-form.tsx
+++ b/components/admin/portfolio-project-form.tsx
@@ -9,7 +9,6 @@ import {
   CalendarDays,
   CheckCircle2,
   CircleAlert,
-  Files,
   FolderTree,
   Grid2x2,
   ImagePlus,
@@ -25,7 +24,12 @@ import { type ReactNode, useEffect, useRef, useState } from "react";
 import { useFormStatus } from "react-dom";
 
 import { MediaFieldPicker, type MediaFieldState } from "@/components/admin/media-field-picker";
-import { StatsCard } from "@/components/dashboard/stats-card";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
 import { AppCard } from "@/components/ui/app-card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -293,34 +297,32 @@ function LocaleInputs({
   multiline?: boolean;
 }) {
   return (
-    <div className="space-y-3">
-      <div className="grid gap-3 xl:grid-cols-3">
+    <div className="space-y-2">
+      <p className="text-xs font-medium uppercase tracking-[0.14em] text-muted-foreground">{title}</p>
+      <div className="grid gap-3 md:grid-cols-3">
         {locales.map((locale) => (
-          <AppCard
-            key={`${title}-${locale.suffix}`}
-            level={2}
-            layer="single"
-            padding="sm"
-            className="space-y-2 rounded-nested"
-          >
-            <p className="text-xs uppercase tracking-[0.18em] text-muted-foreground">{locale.label}</p>
+          <div key={`${title}-${locale.suffix}`} className="space-y-1.5">
+            <span className="block text-[11px] font-medium uppercase tracking-wide text-muted-foreground/70">
+              {locale.label}
+            </span>
             {multiline ? (
               <Textarea
                 name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
-                rows={5}
-                placeholder={`${title} ${locale.label}`}
+                rows={3}
+                placeholder={locale.label}
                 value={values[locale.suffix]}
                 onChange={(event) => onChange(locale.suffix, event.target.value)}
+                className="resize-y"
               />
             ) : (
               <Input
                 name={namePrefix ? `${namePrefix}${locale.suffix}` : undefined}
-                placeholder={`${title} ${locale.label}`}
+                placeholder={locale.label}
                 value={values[locale.suffix]}
                 onChange={(event) => onChange(locale.suffix, event.target.value)}
               />
             )}
-          </AppCard>
+          </div>
         ))}
       </div>
     </div>
@@ -347,6 +349,31 @@ function SectionHeader({
   );
 }
 
+function EmptyPanel({
+  icon: Icon,
+  title,
+  description,
+  action,
+}: {
+  icon: typeof Grid2x2;
+  title: string;
+  description: string;
+  action?: ReactNode;
+}) {
+  return (
+    <div className="flex flex-col items-center gap-3 rounded-surface border border-dashed border-border/70 bg-surface-2/40 px-6 py-10 text-center">
+      <div className="flex h-12 w-12 items-center justify-center rounded-pill border border-border/70 bg-surface-2 text-muted-foreground">
+        <Icon className="h-5 w-5" />
+      </div>
+      <div className="space-y-1">
+        <p className="text-sm font-semibold text-foreground">{title}</p>
+        <p className="max-w-sm text-sm text-muted-foreground">{description}</p>
+      </div>
+      {action}
+    </div>
+  );
+}
+
 function SubmitButton({ onSelect }: { onSelect: () => void }) {
   const { pending } = useFormStatus();
 
@@ -577,8 +604,8 @@ export function PortfolioProjectForm({
       <input ref={assetsInputRef} type="hidden" name="assets" value={assetsPayload} />
       <input ref={intentRef} type="hidden" name="intent" defaultValue="save" />
 
-      <AppCard level={3} padding="lg" contentClassName="space-y-6">
-        <div className="flex flex-col gap-6">
+      <AppCard level={3} padding="md" contentClassName="space-y-5">
+        <div className="flex flex-col gap-5">
           <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
             <div className="space-y-3">
               <div className="flex flex-wrap items-center gap-2">
@@ -596,14 +623,14 @@ export function PortfolioProjectForm({
               </div>
             </div>
 
-            <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-4">
-              <StatsCard title="Sections" value={String(sections.length)} icon={Files} />
-              <StatsCard title="Assets" value={String(assets.length)} icon={ImagePlus} />
-              <StatsCard
-                title="Progress"
-                value={`${progress.filter((step) => step.complete).length}/${progress.length}`}
-                icon={CheckCircle2}
-              />
+            <div className="flex items-center gap-3 rounded-nested border border-border/70 bg-surface-2 px-4 py-2.5">
+              <CheckCircle2 className="h-5 w-5 shrink-0 text-brand-primary" />
+              <div className="min-w-0">
+                <p className="text-[11px] uppercase tracking-[0.14em] text-muted-foreground">Fortschritt</p>
+                <p className="text-sm font-semibold text-foreground">
+                  {progress.filter((step) => step.complete).length}/{progress.length} bereit
+                </p>
+              </div>
             </div>
           </div>
 
@@ -625,8 +652,8 @@ export function PortfolioProjectForm({
 
       <div className="space-y-6">
         <div>
-          <AppCard level={3} padding="lg">
-            <section className="space-y-6">
+          <AppCard level={3} padding="md">
+            <section className="space-y-5">
               <SectionHeader
                 title="Basic Information"
                 description="Choose the category and the stable project metadata first."
@@ -787,8 +814,8 @@ export function PortfolioProjectForm({
         </div>
 
         <div>
-          <AppCard level={3} padding="lg">
-            <section className="space-y-6">
+          <AppCard level={3} padding="md">
+            <section className="space-y-5">
               <SectionHeader
                 title="Localized Content"
                 description="Finish the user-facing copy before building sections and media."
@@ -838,11 +865,11 @@ export function PortfolioProjectForm({
         </div>
 
         <div>
-          <AppCard level={3} padding="lg">
-            <section className="space-y-6">
+          <AppCard level={3} padding="md">
+            <section className="space-y-5">
               <SectionHeader
                 title="Sections"
-                description="Each section keeps one clear role in the project story."
+                description="Optional — baue die Projektgeschichte aus einzelnen Abschnitten."
                 action={(
                   <Button
                     type="button"
@@ -855,73 +882,85 @@ export function PortfolioProjectForm({
                 )}
               />
 
-              <div className="space-y-4">
-                {sections.map((section, index) => (
-                  <div
-                    key={section.id ?? `section-${index}`}
-                    className="space-y-4 rounded-surface border border-border/70 bg-background p-4"
-                  >
-                    <div className="flex flex-wrap items-center justify-between gap-3">
-                      <div className="flex items-center gap-3">
-                        <Badge variant={isPortfolioSectionReady({
-                          type: section.type,
-                          titleAr: section.titleAr,
-                          titleEn: section.titleEn,
-                          titleDe: section.titleDe,
-                          bodyAr: section.bodyAr,
-                          bodyEn: section.bodyEn,
-                          bodyDe: section.bodyDe,
-                          linkUrl: section.linkUrl,
-                          mediaAssetId: section.media.assetId,
-                        }) ? "success" : "outline"}>
-                          {isPortfolioSectionReady({
-                            type: section.type,
-                            titleAr: section.titleAr,
-                            titleEn: section.titleEn,
-                            titleDe: section.titleDe,
-                            bodyAr: section.bodyAr,
-                            bodyEn: section.bodyEn,
-                            bodyDe: section.bodyDe,
-                            linkUrl: section.linkUrl,
-                            mediaAssetId: section.media.assetId,
-                          })
-                            ? "Ready"
-                            : "Open"}
-                        </Badge>
-                        <p className="text-sm font-medium text-foreground">{`Section ${index + 1}`}</p>
-                      </div>
+              {sections.length === 0 ? (
+                <EmptyPanel
+                  icon={Layers3}
+                  title="Noch keine Abschnitte"
+                  description="Abschnitte sind optional. Rich-Text, Galerie, Stats, Deliverables oder Links – frei kombinierbar."
+                  action={(
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setSections((current) => [...current, createEmptySection(current.length)])}
+                    >
+                      <Plus className="h-4 w-4" />
+                      Add Section
+                    </Button>
+                  )}
+                />
+              ) : (
+                <Accordion type="multiple" className="space-y-3">
+                  {sections.map((section, index) => {
+                    const ready = isPortfolioSectionReady({
+                      type: section.type,
+                      titleAr: section.titleAr,
+                      titleEn: section.titleEn,
+                      titleDe: section.titleDe,
+                      bodyAr: section.bodyAr,
+                      bodyEn: section.bodyEn,
+                      bodyDe: section.bodyDe,
+                      linkUrl: section.linkUrl,
+                      mediaAssetId: section.media.assetId,
+                    });
 
-                      <div className="flex gap-2">
-                        <Button
-                          type="button"
-                          variant="outline"
-                          onClick={() => setSections((current) => moveArrayItem(current, index, index - 1))}
-                          disabled={index === 0}
-                        >
-                          <ArrowUp className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="outline"
-                          onClick={() => setSections((current) => moveArrayItem(current, index, index + 1))}
-                          disabled={index === sections.length - 1}
-                        >
-                          <ArrowDown className="h-4 w-4" />
-                        </Button>
-                        <Button
-                          type="button"
-                          variant="ghost"
-                          className="text-destructive"
-                          onClick={() =>
-                            setSections((current) =>
-                              current.filter((_, currentIndex) => currentIndex !== index),
-                            )
-                          }
-                        >
-                          <Trash2 className="h-4 w-4" />
-                        </Button>
-                      </div>
-                    </div>
+                    return (
+                      <AccordionItem
+                        key={section.id ?? `section-${index}`}
+                        value={section.id ?? `section-${index}`}
+                        className="border-border/70 bg-surface-2"
+                      >
+                        <AccordionTrigger className="hover:no-underline">
+                          <span className="flex flex-wrap items-center gap-2.5">
+                            <Badge variant={ready ? "success" : "outline"}>{ready ? "Ready" : "Open"}</Badge>
+                            <span className="text-sm font-medium text-foreground">{`Section ${index + 1}`}</span>
+                            <span className="text-xs text-muted-foreground">{sectionTypeLabels[section.type]}</span>
+                          </span>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          <div className="space-y-4">
+                            <div className="flex justify-end gap-2">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setSections((current) => moveArrayItem(current, index, index - 1))}
+                                disabled={index === 0}
+                              >
+                                <ArrowUp className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setSections((current) => moveArrayItem(current, index, index + 1))}
+                                disabled={index === sections.length - 1}
+                              >
+                                <ArrowDown className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="text-destructive"
+                                onClick={() =>
+                                  setSections((current) =>
+                                    current.filter((_, currentIndex) => currentIndex !== index),
+                                  )
+                                }
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
 
                     <div className="grid gap-4 md:grid-cols-2">
                       <div className="space-y-2">
@@ -1020,190 +1059,174 @@ export function PortfolioProjectForm({
                         multiline
                       />
                     ) : null}
-                  </div>
-                ))}
-              </div>
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
+                    );
+                  })}
+                </Accordion>
+              )}
             </section>
           </AppCard>
         </div>
 
         <div>
-          <AppCard level={3} padding="lg">
-            <div className="space-y-8">
-              <div className="grid gap-4 lg:grid-cols-[minmax(0,1fr)_280px]">
-                <div className="space-y-6">
-                  <section className="space-y-6">
-                    <SectionHeader
-                      title="Cover Media"
-                      description="Choose the primary cover that represents the project in listings."
-                    />
+          <AppCard level={3} padding="md">
+            <section className="space-y-5">
+              <SectionHeader
+                title="Cover Media"
+                description="Wähle das Titelbild, das das Projekt in Listen repräsentiert."
+              />
 
-                    <MediaFieldPicker
-                      title="Cover"
-                      value={coverMedia}
-                      onChange={setCoverMedia}
-                      options={mediaOptions}
-                      hasInitialValue={Boolean(project?.coverImagePath || project?.coverMediaAssetId)}
-                      inputName="coverMedia"
-                      fileFieldName="coverFile"
-                      allowClear
-                      clearLabel="Remove Cover"
-                      emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
-                    />
-                  </section>
+              <MediaFieldPicker
+                title="Cover"
+                value={coverMedia}
+                onChange={setCoverMedia}
+                options={mediaOptions}
+                hasInitialValue={Boolean(project?.coverImagePath || project?.coverMediaAssetId)}
+                inputName="coverMedia"
+                fileFieldName="coverFile"
+                allowClear
+                clearLabel="Remove Cover"
+                emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
+              />
 
-                  <Separator />
+              <Separator />
 
-                  <section className="space-y-6">
-                    <SectionHeader
-                      title="Assets"
-                      description="Assets stay ordered and ready for localized alt text."
-                      action={(
-                        <Button
-                          type="button"
-                          variant="outline"
-                          onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
-                        >
-                          <Plus className="h-4 w-4" />
-                          Add Asset
-                        </Button>
-                      )}
-                    />
+              <SectionHeader
+                title="Assets"
+                description="Optional — Galeriebilder mit lokalisiertem Alt-Text."
+                action={(
+                  <Button
+                    type="button"
+                    variant="outline"
+                    onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
+                  >
+                    <Plus className="h-4 w-4" />
+                    Add Asset
+                  </Button>
+                )}
+              />
 
-                    <div className="grid gap-4 md:grid-cols-2">
-                  {assets.map((asset, index) => (
-                    <div
-                      key={asset.id ?? `asset-${index}`}
-                      className="space-y-4 rounded-surface border border-border/70 bg-background p-4"
+              {assets.length === 0 ? (
+                <EmptyPanel
+                  icon={ImagePlus}
+                  title="Noch keine Assets"
+                  description="Assets sind optional. Füge Galeriebilder hinzu – jedes braucht ein Medium und lokalisierten Alt-Text."
+                  action={(
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => setAssets((current) => [...current, createEmptyAsset(current.length)])}
                     >
-                      <div className="flex flex-wrap items-center justify-between gap-3">
-                        <div className="flex items-center gap-3">
-                          <Badge variant={isPortfolioAssetReady({
-                            mediaAssetId: asset.media.assetId,
-                            altAr: asset.altAr,
-                            altEn: asset.altEn,
-                            altDe: asset.altDe,
-                          }) ? "success" : "outline"}>
-                            {isPortfolioAssetReady({
-                              mediaAssetId: asset.media.assetId,
-                              altAr: asset.altAr,
-                              altEn: asset.altEn,
-                              altDe: asset.altDe,
-                            })
-                              ? "Ready"
-                              : "Open"}
-                          </Badge>
-                          <p className="text-sm font-medium text-foreground">{`Asset ${index + 1}`}</p>
-                        </div>
+                      <Plus className="h-4 w-4" />
+                      Add Asset
+                    </Button>
+                  )}
+                />
+              ) : (
+                <Accordion type="multiple" className="space-y-3">
+                  {assets.map((asset, index) => {
+                    const ready = isPortfolioAssetReady({
+                      mediaAssetId: asset.media.assetId,
+                      altAr: asset.altAr,
+                      altEn: asset.altEn,
+                      altDe: asset.altDe,
+                    });
 
-                        <div className="flex gap-2">
-                          <Button
-                            type="button"
-                            variant="outline"
-                            onClick={() => setAssets((current) => moveArrayItem(current, index, index - 1))}
-                            disabled={index === 0}
-                          >
-                            <ArrowUp className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="outline"
-                            onClick={() => setAssets((current) => moveArrayItem(current, index, index + 1))}
-                            disabled={index === assets.length - 1}
-                          >
-                            <ArrowDown className="h-4 w-4" />
-                          </Button>
-                          <Button
-                            type="button"
-                            variant="ghost"
-                            className="text-destructive"
-                            onClick={() =>
-                              setAssets((current) =>
-                                current.filter((_, currentIndex) => currentIndex !== index),
-                              )
-                            }
-                          >
-                            <Trash2 className="h-4 w-4" />
-                          </Button>
-                        </div>
-                      </div>
+                    return (
+                      <AccordionItem
+                        key={asset.id ?? `asset-${index}`}
+                        value={asset.id ?? `asset-${index}`}
+                        className="border-border/70 bg-surface-2"
+                      >
+                        <AccordionTrigger className="hover:no-underline">
+                          <span className="flex flex-wrap items-center gap-2.5">
+                            <Badge variant={ready ? "success" : "outline"}>{ready ? "Ready" : "Open"}</Badge>
+                            <span className="text-sm font-medium text-foreground">{`Asset ${index + 1}`}</span>
+                          </span>
+                        </AccordionTrigger>
+                        <AccordionContent>
+                          <div className="space-y-4">
+                            <div className="flex justify-end gap-2">
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setAssets((current) => moveArrayItem(current, index, index - 1))}
+                                disabled={index === 0}
+                              >
+                                <ArrowUp className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="outline"
+                                size="icon"
+                                onClick={() => setAssets((current) => moveArrayItem(current, index, index + 1))}
+                                disabled={index === assets.length - 1}
+                              >
+                                <ArrowDown className="h-4 w-4" />
+                              </Button>
+                              <Button
+                                type="button"
+                                variant="ghost"
+                                size="icon"
+                                className="text-destructive"
+                                onClick={() =>
+                                  setAssets((current) =>
+                                    current.filter((_, currentIndex) => currentIndex !== index),
+                                  )
+                                }
+                              >
+                                <Trash2 className="h-4 w-4" />
+                              </Button>
+                            </div>
 
-                      <MediaFieldPicker
-                        title="Asset Image"
-                        value={asset.media}
-                        onChange={(media) =>
-                          setAssets((current) =>
-                            current.map((item, currentIndex) =>
-                              currentIndex === index
-                                ? { ...item, media, filePath: media.url }
-                                : item,
-                            ),
-                          )
-                        }
-                        options={mediaOptions}
-                        hasInitialValue={Boolean(asset.media.assetId || asset.filePath)}
-                        inputName={`asset-media-${index}`}
-                        fileFieldName={asset.fileFieldName}
-                        allowClear
-                        clearLabel="Remove Asset"
-                        emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
-                      />
+                            <MediaFieldPicker
+                              title="Asset Image"
+                              value={asset.media}
+                              onChange={(media) =>
+                                setAssets((current) =>
+                                  current.map((item, currentIndex) =>
+                                    currentIndex === index
+                                      ? { ...item, media, filePath: media.url }
+                                      : item,
+                                  ),
+                                )
+                              }
+                              options={mediaOptions}
+                              hasInitialValue={Boolean(asset.media.assetId || asset.filePath)}
+                              inputName={`asset-media-${index}`}
+                              fileFieldName={asset.fileFieldName}
+                              allowClear
+                              clearLabel="Remove Asset"
+                              emptyValue={{ mode: "upload", assetId: "", url: "", label: "" }}
+                            />
 
-                      <LocaleInputs
-                        title="Alt Text"
-                        values={{ Ar: asset.altAr, En: asset.altEn, De: asset.altDe }}
-                        onChange={(key, value) =>
-                          setAssets((current) =>
-                            current.map((item, currentIndex) =>
-                              currentIndex === index ? { ...item, [`alt${key}`]: value } : item,
-                            ),
-                          )
-                        }
-                      />
-                    </div>
-                  ))}
-                    </div>
-                  </section>
-                </div>
-
-                <div className="space-y-4 lg:sticky lg:top-4 lg:self-start">
-                  <AppCard level={2} layer="single" padding="sm" className="space-y-4">
-                    <div className="flex items-center gap-2">
-                      <ImagePlus className="h-4 w-4 text-brand-primary" />
-                      <p className="text-sm font-semibold text-foreground">Assets Overview</p>
-                    </div>
-
-                    <div className="grid gap-3">
-                      <StatsCard title="Cover" value={coverMedia.assetId ? "Selected" : "Missing"} icon={ImagePlus} />
-                      <StatsCard title="Assets" value={String(assets.length)} icon={Files} />
-                      <StatsCard
-                        title="Ready"
-                        value={String(
-                          assets.filter((asset) =>
-                            isPortfolioAssetReady({
-                              mediaAssetId: asset.media.assetId,
-                              altAr: asset.altAr,
-                              altEn: asset.altEn,
-                              altDe: asset.altDe,
-                            }),
-                          ).length,
-                        )}
-                        icon={CheckCircle2}
-                      />
-                    </div>
-
-                    <div className="rounded-nested border border-dashed border-border/70 bg-background px-4 py-3 text-sm text-muted-foreground">
-                      Start with the cover, then add gallery assets. Each asset needs media plus localized alt text.
-                    </div>
-                  </AppCard>
-                </div>
-              </div>
-            </div>
+                            <LocaleInputs
+                              title="Alt Text"
+                              values={{ Ar: asset.altAr, En: asset.altEn, De: asset.altDe }}
+                              onChange={(key, value) =>
+                                setAssets((current) =>
+                                  current.map((item, currentIndex) =>
+                                    currentIndex === index ? { ...item, [`alt${key}`]: value } : item,
+                                  ),
+                                )
+                              }
+                            />
+                          </div>
+                        </AccordionContent>
+                      </AccordionItem>
+                    );
+                  })}
+                </Accordion>
+              )}
+            </section>
           </AppCard>
         </div>
       </div>
 
-      <AppCard level={3} padding="lg">
+      <AppCard level={3} padding="md">
         <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-end">
           <div className="flex flex-wrap items-center gap-3">
             {firstIncompleteStep ? (