From 66ffd51d5b355a82c62d58c60ea735dbfe97742f Mon Sep 17 00:00:00 2001
From: Nathnael <nathnael@example.com>
Date: Sat, 4 Jul 2026 09:27:38 +0000
Subject: [PATCH] style: update the multi file document ui

---
 .../src/components/SmartFileInput/index.tsx   | 600 ++++++++++++------
 1 file changed, 397 insertions(+), 203 deletions(-)

diff --git a/packages/ui-common/src/components/SmartFileInput/index.tsx b/packages/ui-common/src/components/SmartFileInput/index.tsx
index 0da3e2f37..1e1eaf223 100644
--- a/packages/ui-common/src/components/SmartFileInput/index.tsx
+++ b/packages/ui-common/src/components/SmartFileInput/index.tsx
@@ -153,6 +153,76 @@ function ExistingFileLink({
   );
 }
 
+/**
+ * A file the user just picked (in memory, not yet persisted). Rendered with a
+ * subtle "just added" entrance + an emerald accent so a fresh upload reads as
+ * distinct from the neutral surrounding surface.
+ */
+function NewFileCard({
+  file: fileObj,
+  onRemove,
+  disabled,
+  hasError,
+  inputName,
+}: {
+  file: File;
+  onRemove: () => void;
+  disabled?: boolean;
+  hasError?: boolean;
+  inputName: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "relative z-10 flex items-center justify-between gap-3 rounded-lg border bg-card p-3 shadow-2xs transition",
+        "animate-in fade-in slide-in-from-top-1 duration-300 hover:shadow-xs",
+        hasError
+          ? "border-destructive/30"
+          : "border-emerald-300/60 dark:border-emerald-500/25",
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-3">
+        <div className="flex items-center justify-center rounded-md bg-muted p-2">
+          <FileIcon name={fileObj.name} className="h-5 w-5" />
+        </div>
+
+        <div className="min-w-0">
+          <p
+            className="truncate max-w-[200px] text-sm font-medium text-foreground md:max-w-md"
+            title={fileObj.name}
+          >
+            {fileObj.name}
+          </p>
+          <div className="mt-0.5 flex items-center gap-2">
+            <span className="text-xs text-muted-foreground">
+              {formatBytes(fileObj.size)}
+            </span>
+            <span className="flex items-center gap-0.5 text-xs font-medium text-emerald-600 dark:text-emerald-400">
+              <CheckCircle2 className="h-3 w-3" /> Ready to upload
+            </span>
+          </div>
+        </div>
+      </div>
+
+      <button
+        type="button"
+        disabled={disabled}
+        onClick={onRemove}
+        className={cn(
+          "relative z-10 rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+          disabled && "pointer-events-none opacity-50",
+        )}
+        aria-label={`Remove file ${fileObj.name}`}
+      >
+        <Trash2 className="h-4 w-4" />
+      </button>
+
+      {/* Hidden input to represent file details in traditional form submissions */}
+      <input type="hidden" name={inputName} value={fileObj.name} />
+    </div>
+  );
+}
+
 export function SmartFileInput({
   file,
   value,
@@ -407,228 +477,352 @@ export function SmartFileInput({
                 </p>
               )}
 
-              {/* Selected Files List */}
-              {currentFiles.length > 0 && (
-                <div className="flex flex-col gap-2">
-                  {currentFiles.map((fileObj, idx) => (
-                    <div
-                      key={`${fileObj.name}-${idx}`}
-                      className={cn(
-                        "flex items-center justify-between p-3 rounded-lg border bg-card transition shadow-2xs hover:shadow-xs",
-                        fieldError ? "border-destructive/30" : "border-border",
-                      )}
-                    >
-                      <div className="flex items-center gap-3 min-w-0">
-                        <div className="p-2 bg-muted rounded-md flex items-center justify-center">
-                          <FileIcon name={fileObj.name} className="h-5 w-5" />
-                        </div>
-
-                        <div className="min-w-0">
-                          <p
-                            className="text-sm font-medium text-foreground truncate max-w-[200px] md:max-w-md"
-                            title={fileObj.name}
-                          >
-                            {fileObj.name}
-                          </p>
-                          <div className="flex items-center gap-2 mt-0.5">
-                            <span className="text-xs text-muted-foreground">
-                              {formatBytes(fileObj.size)}
-                            </span>
-                            <span className="flex items-center gap-0.5 text-xs text-primary font-medium">
-                              <CheckCircle2 className="h-3 w-3" /> Ready
-                            </span>
-                          </div>
-                        </div>
-                      </div>
-
-                      <button
-                        type="button"
-                        disabled={disabled}
-                        onClick={() => removeFile(field.fileKey, idx)}
-                        className={cn(
-                          "p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
-                          disabled && "opacity-50 pointer-events-none",
-                        )}
-                        aria-label={`Remove file ${fileObj.name}`}
-                      >
-                        <Trash2 className="h-4 w-4" />
-                      </button>
-
-                      {/* Hidden inputs to represent file details in traditional form submissions */}
-                      <input
-                        type="hidden"
-                        name={
-                          field.isMultiple
-                            ? `${field.fileKey}[]`
-                            : field.fileKey
-                        }
-                        value={fileObj.name}
-                      />
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Dropzone area */}
-              {!reachedLimit &&
-                (variant === "minimal" ? (
-                  <div className="flex flex-wrap items-center gap-3">
-                    <Button
-                      type="button"
-                      variant="outline"
-                      size="sm"
-                      disabled={disabled}
-                      onClick={() =>
-                        fileInputRefs.current[field.fileKey]?.click()
-                      }
-                      className="gap-1.5 cursor-pointer"
-                    >
-                      <UploadCloud className="h-4 w-4 text-muted-foreground" />
-                      <span>{isUploaded ? "Replace File" : "Upload File"}</span>
-                    </Button>
+              {/*
+                Multiple-file fields (default variant) render as ONE integrated
+                drag-and-drop surface. Uploaded files live INSIDE the dropzone as
+                lightweight rows — part of the surface, not separate cards — with
+                the "add more" prompt on the same surface below them. A full-cover
+                transparent input makes clicking anywhere (outside a file row)
+                open the picker; the prompt is pointer-transparent so clicks fall
+                through to it, while file rows and their controls sit above it.
+              */}
+              {variant === "default" && field.isMultiple ? (
+                <div
+                  onDragOver={(e) => handleDrag(e, field.fileKey, true)}
+                  onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
+                  onDrop={(e) => handleDrop(e, field)}
+                  className={cn(
+                    "relative flex flex-col gap-2.5 rounded-xl border-2 border-dashed p-4 transition-all",
+                    isDragOver
+                      ? "border-primary bg-primary/5 dark:bg-primary/10"
+                      : fieldError
+                        ? "border-destructive/70"
+                        : "border-border bg-card/40 hover:border-primary/40",
+                    disabled && "pointer-events-none opacity-50",
+                  )}
+                >
+                  {/* Click anywhere on the surface (except a file row) to browse */}
+                  {!reachedLimit && (
                     <input
                       type="file"
-                      ref={(el) => {
-                        if (fileInputRefs.current) {
-                          fileInputRefs.current[field.fileKey] = el;
-                        }
-                      }}
-                      multiple={field.isMultiple}
+                      multiple
                       accept={acceptString}
                       disabled={disabled}
                       onChange={(e) => handleFileSelect(e, field)}
-                      className="hidden"
-                    />
-                    <span className="text-xs text-muted-foreground">
-                      Accepts:{" "}
-                      {field.allowedExtensions.join(", ").toUpperCase() ||
-                        "All"}
-                    </span>
-                    {existingForField.length > 0 && (
-                      <div className="flex flex-col gap-1 basis-full">
-                        {existingForField.map((f, idx) => (
-                          <ExistingFileLink
-                            key={`${f.url}-${idx}`}
-                            file={f}
-                            onViewFile={onViewFile}
-                          />
-                        ))}
-                      </div>
-                    )}
-                  </div>
-                ) : isUploaded ? (
-                  // Uploaded state: a solid success panel that still doubles as a
-                  // replace target (click anywhere or drag a new file onto it).
-                  <div
-                    onDragOver={(e) => handleDrag(e, field.fileKey, true)}
-                    onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
-                    onDrop={(e) => handleDrop(e, field)}
-                    className={cn(
-                      "group relative flex items-center gap-4 rounded-lg border p-4 transition-all",
-                      isDragOver
-                        ? "border-2 border-dashed border-primary bg-primary/5 dark:bg-primary/10"
-                        : "border-emerald-300/70 bg-emerald-50/60 dark:border-emerald-500/30 dark:bg-emerald-500/10",
-                      disabled &&
-                        "opacity-50 pointer-events-none cursor-not-allowed",
-                    )}
-                  >
-                    <input
-                      type="file"
-                      multiple={field.isMultiple}
-                      accept={acceptString}
-                      disabled={disabled}
-                      onChange={(e) => handleFileSelect(e, field)}
-                      id={`file-input-${field.fileKey}`}
-                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
-                      aria-label={`Replace ${field.fileLabel}`}
+                      className="absolute inset-0 z-0 h-full w-full cursor-pointer opacity-0 disabled:cursor-not-allowed"
+                      aria-label={`Add files to ${field.fileLabel}`}
                     />
+                  )}
 
-                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
-                      {isDragOver ? (
-                        <UploadCloud className="h-5 w-5 animate-bounce" />
-                      ) : (
-                        <CheckCircle2 className="h-5 w-5" />
-                      )}
-                    </div>
-
-                    <div className="min-w-0 flex-1">
-                      <p className="text-sm font-semibold text-foreground">
-                        {isDragOver ? "Drop to replace" : "Document uploaded"}
-                      </p>
-                      {existingForField.length > 0 ? (
-                        <div className="mt-0.5 flex flex-col gap-0.5">
-                          {existingForField.map((f, idx) => (
+                  {(existingForField.length > 0 || currentFiles.length > 0) && (
+                    <div className="relative z-10 flex flex-col gap-1.5">
+                      {/* Already-saved (server) files — view/download only */}
+                      {existingForField.map((f, idx) => (
+                        <div
+                          key={`${f.url}-${idx}`}
+                          className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-border/60"
+                        >
+                          <FileIcon name={f.name} className="h-4 w-4 shrink-0" />
+                          <div className="min-w-0 flex-1">
                             <ExistingFileLink
-                              key={`${f.url}-${idx}`}
                               file={f}
                               onViewFile={onViewFile}
+                              className="max-w-none font-medium text-foreground hover:text-primary"
                               showSize
                             />
-                          ))}
+                          </div>
+                          <span className="shrink-0 text-[11px] text-muted-foreground">
+                            Saved
+                          </span>
                         </div>
-                      ) : (
-                        <p className="mt-0.5 text-xs text-muted-foreground">
-                          {isDragOver
-                            ? "Release to replace the document on file."
-                            : "Saved to your application. Drag a new file here or click to replace it."}
-                        </p>
+                      ))}
+
+                      {/* Just-added (in-memory) files */}
+                      {currentFiles.map((fileObj, idx) => (
+                        <div
+                          key={`${fileObj.name}-${idx}`}
+                          className="flex items-center gap-2.5 rounded-lg bg-background/70 px-3 py-2 ring-1 ring-inset ring-emerald-300/50 dark:ring-emerald-500/25 animate-in fade-in slide-in-from-top-1 duration-300"
+                        >
+                          <FileIcon
+                            name={fileObj.name}
+                            className="h-4 w-4 shrink-0"
+                          />
+                          <div className="min-w-0 flex-1">
+                            <p
+                              className="truncate text-xs font-medium text-foreground"
+                              title={fileObj.name}
+                            >
+                              {fileObj.name}
+                            </p>
+                            <p className="text-[11px] text-muted-foreground">
+                              {formatBytes(fileObj.size)}
+                            </p>
+                          </div>
+                          <span className="flex shrink-0 items-center gap-0.5 text-[11px] font-medium text-emerald-600 dark:text-emerald-400">
+                            <CheckCircle2 className="h-3 w-3" /> Ready
+                          </span>
+                          <button
+                            type="button"
+                            disabled={disabled}
+                            onClick={() => removeFile(field.fileKey, idx)}
+                            className={cn(
+                              "rounded-md p-1 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive",
+                              disabled && "pointer-events-none opacity-50",
+                            )}
+                            aria-label={`Remove file ${fileObj.name}`}
+                          >
+                            <Trash2 className="h-3.5 w-3.5" />
+                          </button>
+                          <input
+                            type="hidden"
+                            name={`${field.fileKey}[]`}
+                            value={fileObj.name}
+                          />
+                        </div>
+                      ))}
+                    </div>
+                  )}
+
+                  {reachedLimit ? (
+                    <div className="relative z-10 flex items-center justify-center gap-1.5 py-2 text-xs font-medium text-muted-foreground">
+                      <CheckCircle2 className="h-3.5 w-3.5 text-emerald-500" />
+                      Maximum of {maxFiles} files reached
+                    </div>
+                  ) : (
+                    <div
+                      className={cn(
+                        "pointer-events-none relative z-10 flex flex-col items-center justify-center gap-1 text-center",
+                        existingForField.length > 0 || currentFiles.length > 0
+                          ? "py-1"
+                          : "py-6",
                       )}
-                    </div>
-
-                    <span className="hidden shrink-0 items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-2xs transition group-hover:border-primary/50 group-hover:text-primary sm:inline-flex">
-                      <UploadCloud className="h-3.5 w-3.5" />
-                      Replace
-                    </span>
-                  </div>
-                ) : (
-                  <div
-                    onDragOver={(e) => handleDrag(e, field.fileKey, true)}
-                    onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
-                    onDrop={(e) => handleDrop(e, field)}
-                    className={cn(
-                      "relative border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all bg-card/50",
-                      isDragOver
-                        ? "border-primary bg-primary/5 dark:bg-primary/10"
-                        : "border-border hover:border-primary/50 hover:bg-muted/10",
-                      fieldError &&
-                        "border-destructive hover:border-destructive/80",
-                      disabled &&
-                        "opacity-50 pointer-events-none cursor-not-allowed",
-                    )}
-                  >
-                    <input
-                      type="file"
-                      multiple={field.isMultiple}
-                      accept={acceptString}
-                      disabled={disabled}
-                      onChange={(e) => handleFileSelect(e, field)}
-                      id={`file-input-${field.fileKey}`}
-                      className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
-                    />
-
-                    <div className="p-3 bg-muted rounded-full mb-3 text-muted-foreground transition group-hover:scale-110">
-                      <UploadCloud
+                    >
+                      <div
                         className={cn(
-                          "h-6 w-6 text-muted-foreground",
-                          isDragOver && "text-primary animate-bounce",
+                          "rounded-full bg-muted text-muted-foreground",
+                          existingForField.length > 0 || currentFiles.length > 0
+                            ? "p-1.5"
+                            : "p-3",
                         )}
-                      />
+                      >
+                        <UploadCloud
+                          className={cn(
+                            existingForField.length > 0 ||
+                              currentFiles.length > 0
+                              ? "h-4 w-4"
+                              : "h-6 w-6",
+                            isDragOver && "animate-bounce text-primary",
+                          )}
+                        />
+                      </div>
+                      <p className="text-sm font-semibold text-foreground">
+                        {isDragOver
+                          ? "Drop your files here"
+                          : existingForField.length > 0 ||
+                              currentFiles.length > 0
+                            ? "Add more files, or "
+                            : "Drag & drop your files here, or "}
+                        {!isDragOver && (
+                          <span className="text-primary font-bold">browse</span>
+                        )}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {field.allowedExtensions.join(", ").toUpperCase() ||
+                          "All formats"}
+                        {" • "}
+                        {currentFiles.length}/{maxFiles} added
+                      </p>
                     </div>
+                  )}
+                </div>
+              ) : (
+                <>
+                  {/* Selected Files List */}
+                  {currentFiles.length > 0 && (
+                    <div className="flex flex-col gap-2">
+                      {currentFiles.map((fileObj, idx) => (
+                        <NewFileCard
+                          key={`${fileObj.name}-${idx}`}
+                          file={fileObj}
+                          disabled={disabled}
+                          hasError={!!fieldError}
+                          inputName={
+                            field.isMultiple
+                              ? `${field.fileKey}[]`
+                              : field.fileKey
+                          }
+                          onRemove={() => removeFile(field.fileKey, idx)}
+                        />
+                      ))}
+                    </div>
+                  )}
 
-                    <p className="text-sm font-semibold text-foreground">
-                      Drag & drop your file here, or{" "}
-                      <span className="text-primary font-bold hover:underline">
-                        browse
-                      </span>
-                    </p>
+                  {/* Dropzone area */}
+                  {!reachedLimit &&
+                    (variant === "minimal" ? (
+                      <div className="flex flex-wrap items-center gap-3">
+                        <Button
+                          type="button"
+                          variant="outline"
+                          size="sm"
+                          disabled={disabled}
+                          onClick={() =>
+                            fileInputRefs.current[field.fileKey]?.click()
+                          }
+                          className="gap-1.5 cursor-pointer"
+                        >
+                          <UploadCloud className="h-4 w-4 text-muted-foreground" />
+                          <span>
+                            {isUploaded ? "Replace File" : "Upload File"}
+                          </span>
+                        </Button>
+                        <input
+                          type="file"
+                          ref={(el) => {
+                            if (fileInputRefs.current) {
+                              fileInputRefs.current[field.fileKey] = el;
+                            }
+                          }}
+                          multiple={field.isMultiple}
+                          accept={acceptString}
+                          disabled={disabled}
+                          onChange={(e) => handleFileSelect(e, field)}
+                          className="hidden"
+                        />
+                        <span className="text-xs text-muted-foreground">
+                          Accepts:{" "}
+                          {field.allowedExtensions.join(", ").toUpperCase() ||
+                            "All"}
+                        </span>
+                        {existingForField.length > 0 && (
+                          <div className="flex flex-col gap-1 basis-full">
+                            {existingForField.map((f, idx) => (
+                              <ExistingFileLink
+                                key={`${f.url}-${idx}`}
+                                file={f}
+                                onViewFile={onViewFile}
+                              />
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                    ) : isUploaded ? (
+                      // Uploaded state: a solid success panel that still doubles as a
+                      // replace target (click anywhere or drag a new file onto it).
+                      <div
+                        onDragOver={(e) => handleDrag(e, field.fileKey, true)}
+                        onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
+                        onDrop={(e) => handleDrop(e, field)}
+                        className={cn(
+                          "group relative flex items-center gap-4 rounded-lg border p-4 transition-all",
+                          isDragOver
+                            ? "border-2 border-dashed border-primary bg-primary/5 dark:bg-primary/10"
+                            : "border-emerald-300/70 bg-emerald-50/60 dark:border-emerald-500/30 dark:bg-emerald-500/10",
+                          disabled &&
+                            "opacity-50 pointer-events-none cursor-not-allowed",
+                        )}
+                      >
+                        <input
+                          type="file"
+                          multiple={field.isMultiple}
+                          accept={acceptString}
+                          disabled={disabled}
+                          onChange={(e) => handleFileSelect(e, field)}
+                          id={`file-input-${field.fileKey}`}
+                          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                          aria-label={`Replace ${field.fileLabel}`}
+                        />
 
-                    <p className="text-xs text-muted-foreground mt-1">
-                      Supported formats:{" "}
-                      {field.allowedExtensions.join(", ").toUpperCase() ||
-                        "All"}
-                    </p>
-                  </div>
-                ))}
+                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-emerald-100 text-emerald-600 dark:bg-emerald-500/20 dark:text-emerald-400">
+                          {isDragOver ? (
+                            <UploadCloud className="h-5 w-5 animate-bounce" />
+                          ) : (
+                            <CheckCircle2 className="h-5 w-5" />
+                          )}
+                        </div>
+
+                        <div className="min-w-0 flex-1">
+                          <p className="text-sm font-semibold text-foreground">
+                            {isDragOver
+                              ? "Drop to replace"
+                              : "Document uploaded"}
+                          </p>
+                          {existingForField.length > 0 ? (
+                            <div className="mt-0.5 flex flex-col gap-0.5">
+                              {existingForField.map((f, idx) => (
+                                <ExistingFileLink
+                                  key={`${f.url}-${idx}`}
+                                  file={f}
+                                  onViewFile={onViewFile}
+                                  showSize
+                                />
+                              ))}
+                            </div>
+                          ) : (
+                            <p className="mt-0.5 text-xs text-muted-foreground">
+                              {isDragOver
+                                ? "Release to replace the document on file."
+                                : "Saved to your application. Drag a new file here or click to replace it."}
+                            </p>
+                          )}
+                        </div>
+
+                        <span className="hidden shrink-0 items-center gap-1.5 rounded-md border border-border bg-card px-3 py-1.5 text-xs font-medium text-foreground shadow-2xs transition group-hover:border-primary/50 group-hover:text-primary sm:inline-flex">
+                          <UploadCloud className="h-3.5 w-3.5" />
+                          Replace
+                        </span>
+                      </div>
+                    ) : (
+                      <div
+                        onDragOver={(e) => handleDrag(e, field.fileKey, true)}
+                        onDragLeave={(e) => handleDrag(e, field.fileKey, false)}
+                        onDrop={(e) => handleDrop(e, field)}
+                        className={cn(
+                          "relative border-2 border-dashed rounded-lg p-6 flex flex-col items-center justify-center text-center transition-all bg-card/50",
+                          isDragOver
+                            ? "border-primary bg-primary/5 dark:bg-primary/10"
+                            : "border-border hover:border-primary/50 hover:bg-muted/10",
+                          fieldError &&
+                            "border-destructive hover:border-destructive/80",
+                          disabled &&
+                            "opacity-50 pointer-events-none cursor-not-allowed",
+                        )}
+                      >
+                        <input
+                          type="file"
+                          multiple={field.isMultiple}
+                          accept={acceptString}
+                          disabled={disabled}
+                          onChange={(e) => handleFileSelect(e, field)}
+                          id={`file-input-${field.fileKey}`}
+                          className="absolute inset-0 w-full h-full opacity-0 cursor-pointer disabled:cursor-not-allowed"
+                        />
+
+                        <div className="p-3 bg-muted rounded-full mb-3 text-muted-foreground transition group-hover:scale-110">
+                          <UploadCloud
+                            className={cn(
+                              "h-6 w-6 text-muted-foreground",
+                              isDragOver && "text-primary animate-bounce",
+                            )}
+                          />
+                        </div>
+
+                        <p className="text-sm font-semibold text-foreground">
+                          Drag & drop your file here, or{" "}
+                          <span className="text-primary font-bold hover:underline">
+                            browse
+                          </span>
+                        </p>
+
+                        <p className="text-xs text-muted-foreground mt-1">
+                          Supported formats:{" "}
+                          {field.allowedExtensions.join(", ").toUpperCase() ||
+                            "All"}
+                        </p>
+                      </div>
+                    ))}
+                </>
+              )}
 
               {/* Validation Error Message */}
               {fieldError && (