@package-uploader/ui 1.1.0 → 1.1.2

package/src/components/UploadModal.tsx

@@ -11,8 +11,6 @@ interface FileItem {
   error?: string;
 }
 
-type Step = 'drop' | 'structure' | 'options';
-
 interface UploadModalProps {
   folderId: number;
   folderName: string;
@@ -28,106 +26,115 @@ export default function UploadModal({
 }: UploadModalProps) {
   const [files, setFiles] = useState<FileItem[]>([]);
   const [uploading, setUploading] = useState(false);
-  const [step, setStep] = useState<Step>('drop');
 
-  // Course structure (parsed from Rise ZIP)
+  // Course structure — on-demand, collapsible
   const [courseStructure, setCourseStructure] = useState<CourseStructure | null>(null);
   const [classMappings, setClassMappings] = useState<CourseClassMappings>({});
   const [parsingStructure, setParsingStructure] = useState(false);
+  const [structurePanelOpen, setStructurePanelOpen] = useState(false);
+  const [parseFailed, setParseFailed] = useState(false);
 
   // LMS Thin Pack options
-  const [createThinPack, setCreateThinPack] = useState(true); // Default ON
+  const [createThinPack, setCreateThinPack] = useState(true);
   const [thinPackName, setThinPackName] = useState('');
 
   // Shared Link options
-  const [createSharedLink, setCreateSharedLink] = useState(false); // Default OFF
+  const [createSharedLink, setCreateSharedLink] = useState(false);
   const [sharedLinkName, setSharedLinkName] = useState('');
 
-  // Skin option (optional)
+  // Skin option
   const [skinName, setSkinName] = useState('');
 
-  // Wrap & Download mode (skip CDS upload)
+  // Wrap & Download mode
   const [wrapOnly, setWrapOnly] = useState(false);
 
-  // Generate slug from name: replace spaces with underscores
   function generateSlug(name: string): string {
     return name.trim().replace(/\s+/g, '_');
   }
 
-  async function handleFilesAccepted(newFiles: File[]) {
+  function handleFilesAccepted(newFiles: File[]) {
     const fileItems: FileItem[] = newFiles.map((file) => ({
       file,
       status: 'pending',
     }));
     setFiles((prev) => [...prev, ...fileItems]);
 
-    // Auto-parse structure for single file uploads
-    const allFiles = [...files, ...fileItems];
-    if (allFiles.length === 1 || (files.length === 0 && newFiles.length === 1)) {
-      const targetFile = newFiles.length === 1 ? newFiles[0] : allFiles[0].file;
-      setParsingStructure(true);
-      try {
-        const structure = await api.parseCourseStructure(targetFile);
-        setCourseStructure(structure);
-      } catch {
-        setCourseStructure(null);
-      }
-      setParsingStructure(false);
-    } else {
-      // Multi-file: no structure parsing
-      setCourseStructure(null);
-    }
+    // Reset structure state when files change
+    setCourseStructure(null);
+    setClassMappings({});
+    setStructurePanelOpen(false);
+    setParseFailed(false);
   }
 
   function handleRemoveFile(index: number) {
     setFiles((prev) => {
       const next = prev.filter((_, i) => i !== index);
-      // Reset structure if we removed the only file or now have multiple
       if (next.length !== 1) {
         setCourseStructure(null);
         setClassMappings({});
+        setStructurePanelOpen(false);
+        setParseFailed(false);
       }
       return next;
     });
   }
 
+  async function handleCustomizeClick() {
+    // Already parsed — just toggle
+    if (courseStructure) {
+      setStructurePanelOpen((prev) => !prev);
+      return;
+    }
+
+    // Already failed — don't retry
+    if (parseFailed) return;
+
+    // Parse on first click
+    if (files.length !== 1) return;
+
+    setParsingStructure(true);
+    try {
+      const structure = await api.parseCourseStructure(files[0].file);
+      if (structure) {
+        setCourseStructure(structure);
+        setStructurePanelOpen(true);
+        setParseFailed(false);
+      } else {
+        setParseFailed(true);
+      }
+    } catch {
+      setParseFailed(true);
+    }
+    setParsingStructure(false);
+  }
+
   function formatSize(bytes: number): string {
     if (bytes < 1024) return `${bytes} B`;
     if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
     return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
   }
 
-  function handleNextFromDrop() {
-    if (courseStructure && files.length === 1) {
-      setStep('structure');
-    } else {
-      setStep('options');
-    }
-  }
-
   async function handleUpload() {
     const pendingFiles = files.filter((f) => f.status === 'pending');
     if (pendingFiles.length === 0) return;
 
     setUploading(true);
 
-    // Build class mappings option (only if any assignments exist)
     const hasClassAssignments =
       classMappings.course ||
       Object.keys(classMappings.lessons || {}).length > 0 ||
-      Object.keys(classMappings.blocks || {}).length > 0;
+      Object.keys(classMappings.blocks || {}).length > 0 ||
+      (classMappings.blockGroups && classMappings.blockGroups.length > 0);
 
     for (let i = 0; i < files.length; i++) {
       if (files[i].status !== 'pending') continue;
 
-      // Mark as uploading
       setFiles((prev) =>
         prev.map((f, idx) => (idx === i ? { ...f, status: 'uploading' } : f))
       );
 
       try {
         if (wrapOnly) {
-          // Wrap & Download mode: wrap with PA-Patcher and download, no CDS upload
           const wrapOptions: { skin?: string; classMappings?: CourseClassMappings } = {};
           if (skinName.trim()) wrapOptions.skin = skinName.trim();
           if (hasClassAssignments) wrapOptions.classMappings = classMappings;
@@ -143,7 +150,6 @@ export default function UploadModal({
             )
           );
         } else {
-          // Normal upload mode
           const uploadOptions: { title?: string; skin?: string; classMappings?: CourseClassMappings } = {};
           if (skinName.trim()) uploadOptions.skin = skinName.trim();
           if (hasClassAssignments) uploadOptions.classMappings = classMappings;
@@ -155,7 +161,6 @@ export default function UploadModal({
           );
 
           if (result.success && result.documentId) {
-            // Create LMS Thin Pack if enabled
             if (createThinPack) {
               const name = thinPackName.trim() || `${result.documentName} - LMS Thin Pack`;
               try {
@@ -170,7 +175,6 @@ export default function UploadModal({
               }
             }
 
-            // Create Shared Link if enabled
             if (createSharedLink) {
               const name = sharedLinkName.trim() || `${result.documentName} - Private`;
               try {
@@ -223,8 +227,8 @@ export default function UploadModal({
 
   const pendingCount = files.filter((f) => f.status === 'pending').length;
   const hasFiles = files.length > 0;
+  const isSingleFile = files.length === 1;
 
-  // Preview slugs
   const thinPackSlugPreview = thinPackName.trim()
     ? generateSlug(thinPackName)
     : '(will use document name)';
@@ -232,14 +236,29 @@ export default function UploadModal({
     ? generateSlug(sharedLinkName)
     : '(will use document name)';
 
+  // Class assignment count for summary
+  const groupCount = (classMappings.blockGroups || []).length;
+  const assignmentCount =
+    (classMappings.course ? 1 : 0) +
+    Object.keys(classMappings.lessons || {}).length +
+    Object.keys(classMappings.blocks || {}).length +
+    groupCount;
+
+  // Customize button label
+  const customizeLabel = parsingStructure
+    ? 'Analyzing...'
+    : parseFailed
+    ? 'Not a Rise course'
+    : courseStructure
+    ? `Customize Classes (${courseStructure.lessons.length} lessons)`
+    : 'Customize Classes';
+
   return (
     <div className="modal-overlay" onClick={onClose}>
       <div className="modal upload-modal" onClick={(e) => e.stopPropagation()}>
         <div className="modal-header">
           <h3 className="modal-title">
             {wrapOnly ? 'Wrap & Download' : `Upload to: ${folderName}`}
-            {step === 'structure' && ' — Customize'}
-            {step === 'options' && ' — Options'}
           </h3>
           <button className="modal-close" onClick={onClose}>
             x
@@ -247,264 +266,213 @@ export default function UploadModal({
         </div>
 
         <div className="upload-modal-content">
-          {/* Step 1: Drop Zone */}
-          {step === 'drop' && (
-            <>
-              <DropZone onFilesAccepted={handleFilesAccepted} disabled={uploading} />
-
-              {/* File List */}
-              {hasFiles && (
-                <div className="upload-file-list">
-                  <h4>Files ({files.length})</h4>
-                  {files.map((item, index) => (
-                    <div key={index} className="upload-file-item">
-                      <div className="upload-file-info">
-                        <span className="upload-file-name">{item.file.name}</span>
-                        <span className="upload-file-size">{formatSize(item.file.size)}</span>
-                      </div>
-                      <div className="upload-file-status">
-                        {item.status === 'pending' && (
-                          <button
-                            className="btn btn-sm btn-secondary"
-                            onClick={() => handleRemoveFile(index)}
-                          >
-                            Remove
-                          </button>
-                        )}
-                        {item.status === 'uploading' && (
-                          <>
-                            <div className="spinner" />
-                            <span className="status-uploading">{wrapOnly ? 'Wrapping...' : 'Uploading...'}</span>
-                          </>
-                        )}
-                        {item.status === 'success' && (
-                          <span className="status-success">{wrapOnly ? 'Downloaded' : 'Uploaded'}</span>
-                        )}
-                        {item.status === 'error' && (
-                          <span className="status-error" title={item.error}>
-                            Failed
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  ))}
-                </div>
-              )}
-
-              {/* Parsing indicator */}
-              {parsingStructure && (
-                <div className="structure-parsing-indicator">
-                  <div className="spinner" />
-                  <span>Analyzing course structure...</span>
+          {/* Dropzone */}
+          <DropZone onFilesAccepted={handleFilesAccepted} disabled={uploading} />
+
+          {/* File List */}
+          {hasFiles && (
+            <div className="upload-file-list">
+              <h4>Files ({files.length})</h4>
+              {files.map((item, index) => (
+                <div key={index} className="upload-file-item">
+                  <div className="upload-file-info">
+                    <span className="upload-file-name">{item.file.name}</span>
+                    <span className="upload-file-size">{formatSize(item.file.size)}</span>
+                  </div>
+                  <div className="upload-file-status">
+                    {item.status === 'pending' && (
+                      <button
+                        className="btn btn-sm btn-secondary"
+                        onClick={() => handleRemoveFile(index)}
+                      >
+                        Remove
+                      </button>
+                    )}
+                    {item.status === 'uploading' && (
+                      <>
+                        <div className="spinner" />
+                        <span className="status-uploading">{wrapOnly ? 'Wrapping...' : 'Uploading...'}</span>
+                      </>
+                    )}
+                    {item.status === 'success' && (
+                      <span className="status-success">{wrapOnly ? 'Downloaded' : 'Uploaded'}</span>
+                    )}
+                    {item.status === 'error' && (
+                      <span className="status-error" title={item.error}>
+                        Failed
+                      </span>
+                    )}
+                  </div>
                 </div>
-              )}
+              ))}
+            </div>
+          )}
 
-              {/* Structure detected badge */}
-              {courseStructure && !parsingStructure && (
-                <div className="structure-detected-badge">
-                  Rise course detected — {courseStructure.lessons.length} lessons,{' '}
-                  {courseStructure.lessons.reduce((sum, l) => sum + l.blocks.length, 0)} blocks.
-                  You can customize classes in the next step.
-                </div>
-              )}
+          {/* Customize Classes — on-demand toggle */}
+          {isSingleFile && !uploading && (
+            <div className="structure-section">
+              <button
+                className={`structure-toggle-btn${structurePanelOpen ? ' open' : ''}${parseFailed ? ' disabled' : ''}`}
+                onClick={handleCustomizeClick}
+                disabled={parsingStructure || parseFailed}
+              >
+                {parsingStructure && <div className="spinner" />}
+                <span>{customizeLabel}</span>
+                {!parsingStructure && !parseFailed && (
+                  <span className="structure-toggle-arrow">
+                    {structurePanelOpen ? '\u25B2' : '\u25BC'}
+                  </span>
+                )}
+                {assignmentCount > 0 && !structurePanelOpen && (
+                  <span className="course-structure-badge">{assignmentCount} assigned</span>
+                )}
+              </button>
 
-              {/* Multi-file note */}
-              {files.length > 1 && (
-                <div className="structure-multi-note">
-                  Course structure customization is available for single-file uploads only.
+              {structurePanelOpen && courseStructure && (
+                <div className="structure-panel">
+                  <CourseStructureStep
+                    structure={courseStructure}
+                    classMappings={classMappings}
+                    onChange={setClassMappings}
+                  />
                 </div>
               )}
-            </>
-          )}
-
-          {/* Step 2: Course Structure */}
-          {step === 'structure' && courseStructure && (
-            <CourseStructureStep
-              structure={courseStructure}
-              classMappings={classMappings}
-              onChange={setClassMappings}
-            />
+            </div>
           )}
 
-          {/* Step 3: Options */}
-          {step === 'options' && (
-            <div className="upload-link-options">
-              {/* Wrap & Download toggle */}
-              <div className="upload-link-option">
-                <label className="upload-link-toggle">
-                  <input
-                    type="checkbox"
-                    checked={wrapOnly}
-                    onChange={(e) => setWrapOnly(e.target.checked)}
-                    disabled={uploading}
-                  />
-                  <span>Wrap & Download only (skip CDS upload)</span>
-                </label>
-                {wrapOnly && (
-                  <span className="slug-preview">Wraps with PA-Patcher and downloads the ZIP directly</span>
-                )}
-              </div>
-
-              {/* CDS upload options (hidden in wrap-only mode) */}
-              {!wrapOnly && (
-                <>
-                  <h4>After upload, create:</h4>
+          {/* Options */}
+          <div className="upload-link-options">
+            {/* Wrap & Download toggle */}
+            <div className="upload-link-option">
+              <label className="upload-link-toggle">
+                <input
+                  type="checkbox"
+                  checked={wrapOnly}
+                  onChange={(e) => setWrapOnly(e.target.checked)}
+                  disabled={uploading}
+                />
+                <span>Wrap & Download only (skip CDS upload)</span>
+              </label>
+              {wrapOnly && (
+                <span className="slug-preview">Wraps with PA-Patcher and downloads the ZIP directly</span>
+              )}
+            </div>
 
-                  {/* LMS Thin Pack */}
-                  <div className="upload-link-option">
-                    <label className="upload-link-toggle">
+            {/* CDS upload options */}
+            {!wrapOnly && (
+              <>
+                <h4>After upload, create:</h4>
+
+                <div className="upload-link-option">
+                  <label className="upload-link-toggle">
+                    <input
+                      type="checkbox"
+                      checked={createThinPack}
+                      onChange={(e) => setCreateThinPack(e.target.checked)}
+                      disabled={uploading}
+                    />
+                    <span>LMS Thin Pack (public)</span>
+                  </label>
+                  {createThinPack && (
+                    <div className="upload-link-name-input">
                       <input
-                        type="checkbox"
-                        checked={createThinPack}
-                        onChange={(e) => setCreateThinPack(e.target.checked)}
+                        type="text"
+                        placeholder="Link name (uses document name if empty)"
+                        value={thinPackName}
+                        onChange={(e) => setThinPackName(e.target.value)}
                         disabled={uploading}
                       />
-                      <span>LMS Thin Pack (public)</span>
-                    </label>
-                    {createThinPack && (
-                      <div className="upload-link-name-input">
-                        <input
-                          type="text"
-                          placeholder="Link name (uses document name if empty)"
-                          value={thinPackName}
-                          onChange={(e) => setThinPackName(e.target.value)}
-                          disabled={uploading}
-                        />
-                        <span className="slug-preview">Slug: {thinPackSlugPreview}</span>
-                      </div>
-                    )}
-                  </div>
+                      <span className="slug-preview">Slug: {thinPackSlugPreview}</span>
+                    </div>
+                  )}
+                </div>
 
-                  {/* Shared Link */}
-                  <div className="upload-link-option">
-                    <label className="upload-link-toggle">
+                <div className="upload-link-option">
+                  <label className="upload-link-toggle">
+                    <input
+                      type="checkbox"
+                      checked={createSharedLink}
+                      onChange={(e) => setCreateSharedLink(e.target.checked)}
+                      disabled={uploading}
+                    />
+                    <span>Shared Link (private/SSO)</span>
+                  </label>
+                  {createSharedLink && (
+                    <div className="upload-link-name-input">
                       <input
-                        type="checkbox"
-                        checked={createSharedLink}
-                        onChange={(e) => setCreateSharedLink(e.target.checked)}
+                        type="text"
+                        placeholder="Link name (uses document name if empty)"
+                        value={sharedLinkName}
+                        onChange={(e) => setSharedLinkName(e.target.value)}
                         disabled={uploading}
                       />
-                      <span>Shared Link (private/SSO)</span>
-                    </label>
-                    {createSharedLink && (
-                      <div className="upload-link-name-input">
-                        <input
-                          type="text"
-                          placeholder="Link name (uses document name if empty)"
-                          value={sharedLinkName}
-                          onChange={(e) => setSharedLinkName(e.target.value)}
-                          disabled={uploading}
-                        />
-                        <span className="slug-preview">Slug: {sharedLinkSlugPreview}</span>
-                      </div>
-                    )}
-                  </div>
-                </>
-              )}
-
-              {/* Skin Option */}
-              <div className="upload-link-option" style={{ marginTop: '12px' }}>
-                <label className="upload-link-toggle">
-                  <span>Skin (optional)</span>
-                </label>
-                <div className="upload-link-name-input">
-                  <input
-                    type="text"
-                    placeholder="e.g. marketing"
-                    value={skinName}
-                    onChange={(e) => setSkinName(e.target.value)}
-                    disabled={uploading}
-                  />
-                  <span className="slug-preview">CSS class for custom skin styling</span>
+                      <span className="slug-preview">Slug: {sharedLinkSlugPreview}</span>
+                    </div>
+                  )}
                 </div>
+              </>
+            )}
+
+            {/* Skin */}
+            <div className="upload-link-option" style={{ marginTop: '12px' }}>
+              <label className="upload-link-toggle">
+                <span>Skin (optional)</span>
+              </label>
+              <div className="upload-link-name-input">
+                <input
+                  type="text"
+                  placeholder="e.g. marketing"
+                  value={skinName}
+                  onChange={(e) => setSkinName(e.target.value)}
+                  disabled={uploading}
+                />
+                <span className="slug-preview">CSS class for custom skin styling</span>
               </div>
-
-              {/* Class mappings summary (if any assigned) */}
-              {(classMappings.course ||
-                Object.keys(classMappings.lessons || {}).length > 0 ||
-                Object.keys(classMappings.blocks || {}).length > 0) && (
-                <div className="structure-summary-badge">
-                  Class assignments:{' '}
-                  {[
-                    classMappings.course ? '1 course' : '',
-                    Object.keys(classMappings.lessons || {}).length > 0
-                      ? `${Object.keys(classMappings.lessons || {}).length} lesson(s)`
-                      : '',
-                    Object.keys(classMappings.blocks || {}).length > 0
-                      ? `${Object.keys(classMappings.blocks || {}).length} block(s)`
-                      : '',
-                  ]
-                    .filter(Boolean)
-                    .join(', ')}
-                </div>
-              )}
+            </div>
+          </div>
+
+          {/* Class assignments summary */}
+          {assignmentCount > 0 && !structurePanelOpen && (
+            <div className="structure-summary-badge">
+              Class assignments:{' '}
+              {[
+                classMappings.course ? '1 course' : '',
+                Object.keys(classMappings.lessons || {}).length > 0
+                  ? `${Object.keys(classMappings.lessons || {}).length} lesson(s)`
+                  : '',
+                Object.keys(classMappings.blocks || {}).length > 0
+                  ? `${Object.keys(classMappings.blocks || {}).length} block(s)`
+                  : '',
+                groupCount > 0
+                  ? `${groupCount} group(s)`
+                  : '',
+              ]
+                .filter(Boolean)
+                .join(', ')}
             </div>
           )}
         </div>
 
         <div className="modal-footer">
-          {step === 'drop' && (
-            <>
-              <button className="btn btn-secondary" onClick={onClose} disabled={uploading}>
-                Cancel
-              </button>
-              <button
-                className="btn btn-primary"
-                onClick={handleNextFromDrop}
-                disabled={uploading || pendingCount === 0 || parsingStructure}
-              >
-                Next
-              </button>
-            </>
-          )}
-
-          {step === 'structure' && (
-            <>
-              <button className="btn btn-secondary" onClick={() => setStep('drop')}>
-                Back
-              </button>
-              <button
-                className="btn btn-secondary"
-                onClick={() => {
-                  setClassMappings({});
-                  setStep('options');
-                }}
-              >
-                Skip
-              </button>
-              <button className="btn btn-primary" onClick={() => setStep('options')}>
-                Next
-              </button>
-            </>
-          )}
-
-          {step === 'options' && (
-            <>
-              <button
-                className="btn btn-secondary"
-                onClick={() => setStep(courseStructure && files.length === 1 ? 'structure' : 'drop')}
-                disabled={uploading}
-              >
-                Back
-              </button>
-              <button
-                className="btn btn-primary"
-                onClick={handleUpload}
-                disabled={uploading || pendingCount === 0}
-              >
-                {uploading ? (
-                  <>
-                    <div className="spinner" />
-                    {wrapOnly ? 'Wrapping...' : 'Uploading...'}
-                  </>
-                ) : wrapOnly ? (
-                  `Wrap & Download ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
-                ) : (
-                  `Upload ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
-                )}
-              </button>
-            </>
-          )}
+          <button className="btn btn-secondary" onClick={onClose} disabled={uploading}>
+            Cancel
+          </button>
+          <button
+            className="btn btn-primary"
+            onClick={handleUpload}
+            disabled={uploading || pendingCount === 0}
+          >
+            {uploading ? (
+              <>
+                <div className="spinner" />
+                {wrapOnly ? 'Wrapping...' : 'Uploading...'}
+              </>
+            ) : wrapOnly ? (
+              `Wrap & Download ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
+            ) : (
+              `Upload ${pendingCount} file${pendingCount !== 1 ? 's' : ''}`
+            )}
+          </button>
         </div>
       </div>
     </div>