Implement creator studio and upload updates

resources/js/components/upload/steps/Step1FileUpload.jsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import ArchiveScreenshotPicker from '../ArchiveScreenshotPicker'
 import UploadDropzone from '../UploadDropzone'
 import ScreenshotUploader from '../ScreenshotUploader'
 
@@ -22,9 +23,11 @@ export default function Step1FileUpload({
   // Archive screenshots
   isArchive,
   screenshots,
+  selectedScreenshotIndex,
   screenshotErrors,
   screenshotPerFileErrors,
   onScreenshotsChange,
+  onSelectedScreenshotChange,
   // Machine state (passed for potential future use)
   machine,
 }) {
@@ -95,6 +98,19 @@ export default function Step1FileUpload({
         onFilesChange={onScreenshotsChange}
       />
 
+      {isArchive && screenshots.length > 0 && (
+        <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4 sm:p-5">
+          <ArchiveScreenshotPicker
+            screenshots={screenshots}
+            selectedIndex={selectedScreenshotIndex}
+            onSelect={onSelectedScreenshotChange}
+            compact
+            title="Choose default screenshot"
+            description="Pick the screenshot that should be uploaded as the archive preview before you start the upload."
+          />
+        </div>
+      )}
+
       {/* ── Subtle what-happens-next hints (shown only before a file is picked) */}
       {!fileSelected && (
         <div className="grid gap-3 sm:grid-cols-3">

resources/js/components/upload/steps/Step2Details.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react'
+import ArchiveScreenshotPicker from '../ArchiveScreenshotPicker'
 import UploadSidebar from '../UploadSidebar'
 import { getContentTypeValue, getContentTypeVisualKey } from '../../../lib/uploadUtils'
 
@@ -17,6 +18,8 @@ export default function Step2Details({
   isArchive,
   fileMetadata,
   screenshots,
+  selectedScreenshotIndex,
+  onSelectedScreenshotChange,
   // Content type + category
   contentTypes,
   metadata,
@@ -167,6 +170,18 @@ export default function Step2Details({
             </span>
           </div>
         </div>
+
+        {isArchive && screenshots.length > 0 && (
+          <div className="mt-5 border-t border-white/8 pt-5">
+            <ArchiveScreenshotPicker
+              screenshots={screenshots}
+              selectedIndex={selectedScreenshotIndex}
+              onSelect={onSelectedScreenshotChange}
+              title="Archive screenshots"
+              description="All selected screenshots are shown here. Pick the one that should become the main preview thumbnail."
+            />
+          </div>
+        )}
       </div>
 
       {/* ── Combined: Content type → Category → Subcategory ─────────────────── */}

resources/js/components/upload/steps/Step3Publish.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { motion, useReducedMotion } from 'framer-motion'
+import ArchiveScreenshotPicker from '../ArchiveScreenshotPicker'
 
 function stripHtml(value) {
   return String(value || '')
@@ -45,6 +46,8 @@ export default function Step3Publish({
   primaryPreviewUrl,
   isArchive,
   screenshots,
+  selectedScreenshotIndex,
+  onSelectedScreenshotChange,
   fileMetadata,
   // Metadata
   metadata,
@@ -161,6 +164,18 @@ export default function Step3Publish({
             )}
           </div>
         </div>
+
+        {isArchive && screenshots.length > 0 && (
+          <div className="mt-5 border-t border-white/8 pt-5">
+            <ArchiveScreenshotPicker
+              screenshots={screenshots}
+              selectedIndex={selectedScreenshotIndex}
+              onSelect={onSelectedScreenshotChange}
+              title="Archive preview"
+              description="This screenshot will be used as the default preview once the archive is published."
+            />
+          </div>
+        )}
       </div>
 
       {/* ── Visibility selector ────────────────────────────────────────── */}