optimizations

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

@@ -28,67 +28,50 @@ export default function Step1FileUpload({
   // Machine state (passed for potential future use)
   machine,
 }) {
+  const fileSelected = Boolean(primaryFile)
+
   return (
-    <div className="space-y-5 rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-6 shadow-[0_24px_90px_rgba(2,8,23,0.28)] backdrop-blur sm:p-7">
-      {/* Step header */}
-      <div className="rounded-2xl border border-white/8 bg-white/[0.04] px-5 py-4">
+    <div className="space-y-6 rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-6 shadow-[0_24px_90px_rgba(2,8,23,0.28)] backdrop-blur sm:p-8">
+
+      {/* ── Hero heading ─────────────────────────────────────────────────── */}
+      <div className="text-center">
+        <span className="inline-flex items-center gap-1.5 rounded-full border border-sky-400/30 bg-sky-400/10 px-3 py-1 text-[11px] uppercase tracking-widest text-sky-300">
+          Step 1 of 3
+        </span>
         <h2
           ref={headingRef}
           tabIndex={-1}
-          className="text-lg font-semibold text-white focus:outline-none"
+          className="mt-4 text-2xl font-bold text-white focus:outline-none"
         >
           Upload your artwork
         </h2>
-        <p className="mt-1 text-sm text-white/60">
-          Drop or browse a file. Validation runs immediately. Upload starts when you click&nbsp;
-          <span className="text-white/80">Start upload</span>.
+        <p className="mx-auto mt-2 max-w-md text-sm text-white/55">
+          Drop an image or an archive pack. We validate the file instantly so you can start uploading straight away.
         </p>
       </div>
 
-      <div className="grid gap-3 sm:grid-cols-3">
-        {[
-          {
-            title: '1. Add the file',
-            body: 'Drop an image or archive pack into the upload area.',
-          },
-          {
-            title: '2. Check validation',
-            body: 'We flag unsupported formats, missing screenshots, and basic file issues immediately.',
-          },
-          {
-            title: '3. Start upload',
-            body: 'Once the file is clean, the secure processing pipeline takes over.',
-          },
-        ].map((item) => (
-          <div key={item.title} className="rounded-2xl border border-white/8 bg-white/[0.03] p-4">
-            <p className="text-sm font-semibold text-white">{item.title}</p>
-            <p className="mt-2 text-sm leading-6 text-slate-300">{item.body}</p>
-          </div>
-        ))}
-      </div>
-
-      {/* Locked notice */}
+      {/* ── Locked notice ────────────────────────────────────────────────── */}
       {fileSelectionLocked && (
-        <div className="flex items-center gap-2 rounded-2xl bg-amber-500/10 px-4 py-3 text-xs text-amber-100 ring-1 ring-amber-300/30">
-          <svg className="h-3.5 w-3.5 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <div className="flex items-center gap-2.5 rounded-2xl bg-amber-500/10 px-4 py-3 text-sm text-amber-100 ring-1 ring-amber-300/30">
+          <svg className="h-4 w-4 shrink-0" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
             <path fillRule="evenodd" d="M10 1a4.5 4.5 0 00-4.5 4.5V9H5a2 2 0 00-2 2v6a2 2 0 002 2h10a2 2 0 002-2v-6a2 2 0 00-2-2h-.5V5.5A4.5 4.5 0 0010 1zm3 8V5.5a3 3 0 10-6 0V9h6z" clipRule="evenodd" />
           </svg>
-          File is locked after upload. Reset to change.
+          File is locked after upload starts. Reset to change the file.
         </div>
       )}
 
-      {/* Primary dropzone */}
+      {/* ── Primary dropzone ─────────────────────────────────────────────── */}
       <UploadDropzone
-        title="Upload your artwork file"
-        description="Drag & drop or click to browse. Accepted: JPG, PNG, WEBP, ZIP, RAR, 7Z."
+        title="Drop your file here"
+        description="JPG, PNG, WEBP · ZIP, RAR, 7Z · Images up to 50 MB · Archives up to 200 MB"
         fileName={primaryFile?.name || ''}
         previewUrl={primaryPreviewUrl}
         fileMeta={fileMetadata}
         fileHint="No file selected"
         invalid={primaryErrors.length > 0}
         errors={primaryErrors}
-        showLooksGood={Boolean(primaryFile) && primaryErrors.length === 0}
-        looksGoodText="Looks good"
+        showLooksGood={fileSelected && primaryErrors.length === 0}
+        looksGoodText="File looks good — ready to upload"
         locked={fileSelectionLocked}
         onPrimaryFileChange={(file) => {
           if (fileSelectionLocked) return
@@ -96,10 +79,10 @@ export default function Step1FileUpload({
         }}
       />
 
-      {/* Screenshots (archives only) */}
+      {/* ── Screenshots (archives only) ──────────────────────────────────── */}
       <ScreenshotUploader
         title="Archive screenshots"
-        description="We need at least 1 screenshot to generate thumbnails and analyze content."
+        description="Add at least 1 screenshot so we can generate a thumbnail and analyze your content."
         visible={isArchive}
         files={screenshots}
         min={1}
@@ -108,9 +91,54 @@ export default function Step1FileUpload({
         errors={screenshotErrors}
         invalid={isArchive && screenshotErrors.length > 0}
         showLooksGood={isArchive && screenshots.length > 0 && screenshotErrors.length === 0}
-        looksGoodText="Looks good"
+        looksGoodText="Screenshots look good"
         onFilesChange={onScreenshotsChange}
       />
+
+      {/* ── Subtle what-happens-next hints (shown only before a file is picked) */}
+      {!fileSelected && (
+        <div className="grid gap-3 sm:grid-cols-3">
+          {[
+            {
+              icon: (
+                <svg className="h-5 w-5 text-sky-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M21 15v4a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-4" /><path d="M7 10l5-5 5 5" /><path d="M12 5v10" />
+                </svg>
+              ),
+              label: 'Add your file',
+              hint: 'Image or archive — drop it in or click to browse.',
+            },
+            {
+              icon: (
+                <svg className="h-5 w-5 text-violet-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M9 12l2 2 4-4" /><path d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10z" />
+                </svg>
+              ),
+              label: 'Instant validation',
+              hint: 'Format, size, and screenshot checks run immediately.',
+            },
+            {
+              icon: (
+                <svg className="h-5 w-5 text-emerald-300" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+                  <path d="M5 13l4 4L19 7" />
+                </svg>
+              ),
+              label: 'Start upload',
+              hint: 'One click sends your file through the secure pipeline.',
+            },
+          ].map((item) => (
+            <div key={item.label} className="flex items-start gap-3 rounded-2xl border border-white/8 bg-white/[0.03] px-4 py-4">
+              <div className="mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-xl border border-white/10 bg-white/[0.05]">
+                {item.icon}
+              </div>
+              <div>
+                <p className="text-sm font-semibold text-white">{item.label}</p>
+                <p className="mt-1 text-xs leading-5 text-slate-400">{item.hint}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   )
 }

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

@@ -1,7 +1,6 @@
-import React from 'react'
-import ContentTypeSelector from '../ContentTypeSelector'
-import CategorySelector from '../CategorySelector'
+import React, { useEffect, useMemo, useState } from 'react'
 import UploadSidebar from '../UploadSidebar'
+import { getContentTypeValue, getContentTypeVisualKey } from '../../../lib/uploadUtils'
 
 /**
  * Step2Details
@@ -33,8 +32,78 @@ export default function Step2Details({
   onChangeTitle,
   onChangeTags,
   onChangeDescription,
+  onToggleMature,
   onToggleRights,
 }) {
+  const [isContentTypeChooserOpen, setIsContentTypeChooserOpen] = useState(() => !metadata.contentType)
+  const [isCategoryChooserOpen, setIsCategoryChooserOpen] = useState(() => !metadata.rootCategoryId)
+  const [isSubCategoryChooserOpen, setIsSubCategoryChooserOpen] = useState(() => !metadata.subCategoryId)
+  const [categorySearch, setCategorySearch] = useState('')
+  const [subCategorySearch, setSubCategorySearch] = useState('')
+
+  const contentTypeOptions = useMemo(
+    () => (Array.isArray(contentTypes) ? contentTypes : []).map((item) => {
+      const normalizedName = String(item?.name || '').trim().toLowerCase()
+      const normalizedSlug = String(item?.slug || '').trim().toLowerCase()
+
+      if (normalizedName === 'other' || normalizedSlug === 'other') {
+        return {
+          ...item,
+          name: 'Others',
+        }
+      }
+
+      return item
+    }),
+    [contentTypes]
+  )
+
+  const selectedContentType = useMemo(
+    () => contentTypeOptions.find((item) => String(getContentTypeValue(item)) === String(metadata.contentType || '')) ?? null,
+    [contentTypeOptions, metadata.contentType]
+  )
+
+  const selectedRoot = useMemo(
+    () => filteredCategoryTree.find((item) => String(item.id) === String(metadata.rootCategoryId || '')) ?? null,
+    [filteredCategoryTree, metadata.rootCategoryId]
+  )
+
+  const subCategories = selectedRoot?.children || []
+  const selectedSubCategory = useMemo(
+    () => subCategories.find((item) => String(item.id) === String(metadata.subCategoryId || '')) ?? null,
+    [subCategories, metadata.subCategoryId]
+  )
+
+  const sortedFilteredCategories = useMemo(() => {
+    const sorted = [...filteredCategoryTree].sort((a, b) => a.name.localeCompare(b.name))
+    const q = categorySearch.trim().toLowerCase()
+    return q ? sorted.filter((c) => c.name.toLowerCase().includes(q)) : sorted
+  }, [filteredCategoryTree, categorySearch])
+
+  const sortedFilteredSubCategories = useMemo(() => {
+    const sorted = [...subCategories].sort((a, b) => a.name.localeCompare(b.name))
+    const q = subCategorySearch.trim().toLowerCase()
+    return q ? sorted.filter((s) => s.name.toLowerCase().includes(q)) : sorted
+  }, [subCategories, subCategorySearch])
+
+  useEffect(() => {
+    if (!metadata.contentType) {
+      setIsContentTypeChooserOpen(true)
+    }
+  }, [metadata.contentType])
+
+  useEffect(() => {
+    if (!metadata.rootCategoryId) {
+      setIsCategoryChooserOpen(true)
+    }
+  }, [metadata.rootCategoryId])
+
+  useEffect(() => {
+    if (!metadata.subCategoryId) {
+      setIsSubCategoryChooserOpen(true)
+    }
+  }, [metadata.subCategoryId])
+
   return (
     <div className="space-y-5 rounded-[28px] border border-white/10 bg-[linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.02))] p-6 shadow-[0_24px_90px_rgba(2,8,23,0.28)] backdrop-blur sm:p-7">
       {/* Step header */}
@@ -95,56 +164,306 @@ export default function Step2Details({
         </div>
       </div>
 
-      {/* Content type selector */}
-      <section className="rounded-2xl ring-1 ring-white/10 bg-gradient-to-br from-white/[0.04] to-white/[0.01] p-5 sm:p-6">
+      <section className="rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(14,165,233,0.08),_rgba(15,23,36,0.92)_52%)] p-5 sm:p-6">
         <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
           <div>
             <h3 className="text-sm font-semibold text-white">Content type</h3>
-            <p className="mt-0.5 text-xs text-white/55">Choose what kind of artwork this is.</p>
+            <p className="mt-1 text-xs text-white/55">Choose the main content family first.</p>
           </div>
           <span className="rounded-full border border-sky-400/35 bg-sky-400/10 px-2.5 py-0.5 text-[11px] uppercase tracking-widest text-sky-300">
             Step 2a
           </span>
         </div>
 
-        <ContentTypeSelector
-          contentTypes={contentTypes}
-          selected={metadata.contentType}
-          error={metadataErrors.contentType}
-          onChange={onContentTypeChange}
-        />
+        {contentTypeOptions.length === 0 && (
+          <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-4 text-sm text-slate-400">
+            No content types are available right now.
+          </div>
+        )}
+
+        {selectedContentType && !isContentTypeChooserOpen && (
+          <div className="rounded-2xl border border-emerald-400/25 bg-emerald-400/[0.08] p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+              <div>
+                <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-emerald-200/80">Selected content type</div>
+                <div className="mt-1 text-lg font-semibold text-white">{selectedContentType.name}</div>
+                <div className="mt-1 text-sm text-slate-400">
+                  {filteredCategoryTree.length > 0
+                    ? `Continue by choosing one of the ${filteredCategoryTree.length} matching categories below.`
+                    : 'This content type does not have categories yet.'}
+                </div>
+              </div>
+              <button
+                type="button"
+                onClick={() => setIsContentTypeChooserOpen(true)}
+                className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm font-medium text-slate-200 transition hover:border-white/20 hover:bg-white/[0.08] hover:text-white"
+              >
+                Change
+              </button>
+            </div>
+          </div>
+        )}
+
+        {(!selectedContentType || isContentTypeChooserOpen) && (
+          <div className="grid gap-3 lg:grid-cols-2">
+            {contentTypeOptions.map((ct) => {
+            const typeValue = String(getContentTypeValue(ct))
+            const isActive = typeValue === String(metadata.contentType || '')
+            const visualKey = getContentTypeVisualKey(ct)
+            const categoryCount = Array.isArray(ct.categories) ? ct.categories.length : 0
+
+            return (
+              <button
+                key={typeValue || ct.name}
+                type="button"
+                onClick={() => {
+                  setIsContentTypeChooserOpen(false)
+                  setIsCategoryChooserOpen(true)
+                  onContentTypeChange(typeValue)
+                }}
+                className={[
+                  'group flex w-full items-center gap-3 rounded-2xl border px-3 py-3 text-left transition-all',
+                  isActive
+                    ? 'border-emerald-400/40 bg-emerald-400/10 shadow-[0_0_0_1px_rgba(52,211,153,0.18)]'
+                    : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.06]',
+                ].join(' ')}
+                aria-pressed={isActive}
+              >
+                <div className={`flex h-12 w-12 items-center justify-center rounded-2xl border ${isActive ? 'border-emerald-400/30 bg-emerald-400/10' : 'border-white/10 bg-white/[0.04]'}`}>
+                  <img
+                    src={`/gfx/mascot_${visualKey}.webp`}
+                    alt=""
+                    className="h-8 w-8 object-contain"
+                    onError={(e) => { e.currentTarget.style.display = 'none' }}
+                  />
+                </div>
+                <div className="min-w-0 flex-1">
+                  <div className={`text-sm font-semibold ${isActive ? 'text-emerald-200' : 'text-white'}`}>{ct.name}</div>
+                  <div className="mt-1 text-[11px] text-slate-500">{categoryCount} {categoryCount === 1 ? 'category' : 'categories'}</div>
+                </div>
+                <div className={`text-xs ${isActive ? 'text-emerald-300' : 'text-slate-500 group-hover:text-slate-300'}`}>
+                  {isActive ? 'Selected' : 'Open'}
+                </div>
+              </button>
+            )
+            })}
+          </div>
+        )}
+
+        {metadataErrors.contentType && <p className="mt-3 text-xs text-red-300">{metadataErrors.contentType}</p>}
       </section>
 
-      {/* Category selector */}
-      <section className="rounded-2xl ring-1 ring-white/10 bg-gradient-to-br from-white/[0.04] to-white/[0.01] p-5 sm:p-6">
-        <div className="mb-4 flex flex-wrap items-center justify-between gap-2">
+      <section className="rounded-2xl border border-white/10 bg-[radial-gradient(circle_at_top_left,_rgba(168,85,247,0.08),_rgba(15,23,36,0.88)_55%)] p-5 sm:p-6">
+        <div className="flex flex-col gap-3 lg:flex-row lg:items-start lg:justify-between">
           <div>
-            <h3 className="text-sm font-semibold text-white">Category</h3>
-            <p className="mt-0.5 text-xs text-white/55">
-              {requiresSubCategory ? 'Select a category, then a subcategory.' : 'Select a category.'}
-            </p>
+            <h4 className="text-[11px] font-semibold uppercase tracking-[0.18em] text-slate-400">Category path</h4>
+            <p className="mt-1 text-sm text-slate-400">Choose the main branch first, then refine with a subcategory when needed.</p>
           </div>
           <span className="rounded-full border border-violet-400/35 bg-violet-400/10 px-2.5 py-0.5 text-[11px] uppercase tracking-widest text-violet-300">
             Step 2b
           </span>
         </div>
 
-        <CategorySelector
-          categories={filteredCategoryTree}
-          rootCategoryId={metadata.rootCategoryId}
-          subCategoryId={metadata.subCategoryId}
-          hasContentType={Boolean(metadata.contentType)}
-          error={metadataErrors.category}
-          onRootChange={onRootCategoryChange}
-          onSubChange={onSubCategoryChange}
-          allRoots={allRootCategoryOptions}
-          onRootChangeAll={(rootId, contentTypeValue) => {
-            if (contentTypeValue) {
-              onContentTypeChange(contentTypeValue)
-            }
-            onRootCategoryChange(rootId)
-          }}
-        />
+        {!selectedContentType && (
+          <div className="mt-5 rounded-2xl border border-dashed border-white/12 bg-white/[0.02] px-5 py-10 text-center">
+            <div className="text-sm font-medium text-white">Select a content type first</div>
+            <p className="mt-2 text-sm text-slate-500">Once you choose the content type, the matching category tree will appear here.</p>
+          </div>
+        )}
+
+        {selectedContentType && (
+          <div className="mt-5 space-y-5">
+            <div className="flex items-center gap-2 text-sm text-slate-400">
+              <span className="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-2.5 py-1 text-emerald-200">{selectedContentType.name}</span>
+              <span>contains {filteredCategoryTree.length} top-level {filteredCategoryTree.length === 1 ? 'category' : 'categories'}</span>
+            </div>
+
+            {selectedRoot && !isCategoryChooserOpen && (
+              <div className="rounded-2xl border border-purple-400/25 bg-purple-400/[0.08] p-4">
+                <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                  <div>
+                    <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-purple-200/80">Selected category</div>
+                    <div className="mt-1 text-lg font-semibold text-white">{selectedRoot.name}</div>
+                    <div className="mt-1 text-sm text-slate-400">
+                      {subCategories.length > 0
+                        ? `Next step: choose one of the ${subCategories.length} subcategories below.`
+                        : 'This category is complete. No subcategory is required.'}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => { setCategorySearch(''); setIsCategoryChooserOpen(true) }}
+                    className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm font-medium text-slate-200 transition hover:border-white/20 hover:bg-white/[0.08] hover:text-white"
+                  >
+                    Change
+                  </button>
+                </div>
+              </div>
+            )}
+
+            {(!selectedRoot || isCategoryChooserOpen) && (
+              <div className="space-y-3">
+                <div className="relative">
+                  <svg className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" /></svg>
+                  <input
+                    type="search"
+                    value={categorySearch}
+                    onChange={(e) => setCategorySearch(e.target.value)}
+                    placeholder="Search categories…"
+                    className="w-full rounded-xl border border-white/10 bg-white/[0.04] py-2.5 pl-9 pr-4 text-sm text-white placeholder:text-slate-500 focus:border-purple-400/40 focus:outline-none focus:ring-1 focus:ring-purple-400/30"
+                  />
+                </div>
+                {sortedFilteredCategories.length === 0 && (
+                  <p className="py-4 text-center text-sm text-slate-500">No categories match &ldquo;{categorySearch}&rdquo;</p>
+                )}
+                <div className="grid gap-3 lg:grid-cols-2">
+                {sortedFilteredCategories.map((cat) => {
+                  const isActive = String(metadata.rootCategoryId || '') === String(cat.id)
+                  const childCount = cat.children?.length || 0
+
+                  return (
+                    <button
+                      key={cat.id}
+                      type="button"
+                      onClick={() => {
+                        setIsCategoryChooserOpen(false)
+                        onRootCategoryChange(String(cat.id))
+                      }}
+                      className={[
+                        'rounded-2xl border px-4 py-4 text-left transition-all',
+                        isActive
+                          ? 'border-purple-400/40 bg-purple-400/12 shadow-[0_0_0_1px_rgba(192,132,252,0.15)]'
+                          : 'border-white/10 bg-white/[0.03] hover:border-white/20 hover:bg-white/[0.05]',
+                      ].join(' ')}
+                    >
+                      <div className="flex items-start justify-between gap-3">
+                        <div>
+                          <div className={`text-sm font-semibold ${isActive ? 'text-purple-200' : 'text-white'}`}>{cat.name}</div>
+                          <div className="mt-1 text-[11px] text-slate-500">{childCount > 0 ? `${childCount} subcategories available` : 'Standalone category'}</div>
+                        </div>
+                        <span className={`rounded-full px-2 py-1 text-[11px] ${isActive ? 'bg-purple-300/15 text-purple-200' : 'bg-white/[0.05] text-slate-500'}`}>
+                          {isActive ? 'Selected' : 'Choose'}
+                        </span>
+                      </div>
+                    </button>
+                  )
+                })}
+                </div>
+              </div>
+            )}
+
+            {selectedRoot && subCategories.length > 0 && (
+              <div className="rounded-2xl border border-cyan-400/15 bg-cyan-400/[0.05] p-4">
+                <div className="flex items-center justify-between gap-3">
+                  <div>
+                    <h5 className="text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-200/80">Subcategories</h5>
+                    <p className="mt-1 text-sm text-slate-400">Refine <span className="text-white">{selectedRoot.name}</span> with one more level.</p>
+                  </div>
+                  <span className="rounded-full border border-cyan-400/20 bg-cyan-400/10 px-2 py-1 text-[11px] text-cyan-200">{subCategories.length}</span>
+                </div>
+
+                {!metadata.subCategoryId && requiresSubCategory && (
+                  <div className="mt-4 rounded-xl border border-amber-400/20 bg-amber-400/10 px-3 py-2 text-sm text-amber-100">
+                    Subcategory still needs to be selected.
+                  </div>
+                )}
+
+                {selectedSubCategory && !isSubCategoryChooserOpen && (
+                  <div className="mt-4 rounded-2xl border border-cyan-400/25 bg-cyan-400/[0.09] p-4">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+                      <div>
+                        <div className="text-[11px] font-semibold uppercase tracking-[0.18em] text-cyan-200/80">Selected subcategory</div>
+                        <div className="mt-1 text-lg font-semibold text-white">{selectedSubCategory.name}</div>
+                        <div className="mt-1 text-sm text-slate-300">
+                          Final category path: <span className="text-white">{selectedRoot.name}</span> / <span className="text-cyan-100">{selectedSubCategory.name}</span>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => { setSubCategorySearch(''); setIsSubCategoryChooserOpen(true) }}
+                        className="inline-flex items-center justify-center rounded-xl border border-white/10 bg-white/[0.05] px-3 py-2 text-sm font-medium text-slate-200 transition hover:border-white/20 hover:bg-white/[0.08] hover:text-white"
+                      >
+                        Change
+                      </button>
+                    </div>
+                  </div>
+                )}
+
+                {(!selectedSubCategory || isSubCategoryChooserOpen) && (
+                  <div className="mt-4 space-y-3">
+                    <div className="relative">
+                      <svg className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path fillRule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clipRule="evenodd" /></svg>
+                      <input
+                        type="search"
+                        value={subCategorySearch}
+                        onChange={(e) => setSubCategorySearch(e.target.value)}
+                        placeholder="Search subcategories…"
+                        className="w-full rounded-xl border border-white/10 bg-white/[0.04] py-2.5 pl-9 pr-4 text-sm text-white placeholder:text-slate-500 focus:border-cyan-400/40 focus:outline-none focus:ring-1 focus:ring-cyan-400/30"
+                      />
+                    </div>
+                    {sortedFilteredSubCategories.length === 0 && (
+                      <p className="py-4 text-center text-sm text-slate-500">No subcategories match &ldquo;{subCategorySearch}&rdquo;</p>
+                    )}
+                    <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+                    {sortedFilteredSubCategories.map((sub) => {
+                      const isActive = String(metadata.subCategoryId || '') === String(sub.id)
+                      return (
+                        <button
+                          key={sub.id}
+                          type="button"
+                          onClick={() => {
+                            setIsSubCategoryChooserOpen(false)
+                            onSubCategoryChange(String(sub.id))
+                          }}
+                          className={[
+                            'group rounded-2xl border px-4 py-3 text-left transition-all',
+                            isActive
+                              ? 'border-cyan-400/40 bg-cyan-400/[0.13] shadow-[0_0_0_1px_rgba(34,211,238,0.14)]'
+                              : 'border-white/10 bg-white/[0.04] hover:border-white/20 hover:bg-white/[0.06]',
+                          ].join(' ')}
+                        >
+                          <div className="flex items-start justify-between gap-3">
+                            <div className="min-w-0">
+                              <div className={[
+                                'text-sm font-semibold transition-colors',
+                                isActive ? 'text-cyan-100' : 'text-slate-100 group-hover:text-white',
+                              ].join(' ')}>
+                                {sub.name}
+                              </div>
+                              <div className={[
+                                'mt-1 text-xs',
+                                isActive ? 'text-cyan-200/80' : 'text-slate-500 group-hover:text-slate-300',
+                              ].join(' ')}>
+                                Subcategory option
+                              </div>
+                            </div>
+                            <span className={[
+                              'shrink-0 rounded-full px-2.5 py-1 text-[11px] font-medium',
+                              isActive
+                                ? 'bg-cyan-300/15 text-cyan-100'
+                                : 'bg-white/[0.05] text-slate-500 group-hover:text-slate-300',
+                            ].join(' ')}>
+                              {isActive ? 'Selected' : 'Choose'}
+                            </span>
+                          </div>
+                        </button>
+                      )
+                    })}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+
+            {selectedRoot && subCategories.length === 0 && (
+              <div className="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3 text-sm text-slate-400">
+                <span className="font-medium text-white">{selectedRoot.name}</span> does not have subcategories. Selecting it is enough.
+              </div>
+            )}
+          </div>
+        )}
+
+        {metadataErrors.category && <p className="mt-4 text-xs text-red-300">{metadataErrors.category}</p>}
       </section>
 
       {/* Title, tags, description, rights */}
@@ -156,6 +475,7 @@ export default function Step2Details({
         onChangeTitle={onChangeTitle}
         onChangeTags={onChangeTags}
         onChangeDescription={onChangeDescription}
+        onToggleMature={onToggleMature}
         onToggleRights={onToggleRights}
       />
     </div>

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

@@ -1,6 +1,14 @@
 import React from 'react'
 import { motion, useReducedMotion } from 'framer-motion'
 
+function stripHtml(value) {
+  return String(value || '')
+    .replace(/<[^>]*>/g, ' ')
+    .replace(/&nbsp;/g, ' ')
+    .replace(/\s+/g, ' ')
+    .trim()
+}
+
 /**
  * PublishCheckBadge – a single status item for the review section
  */
@@ -66,6 +74,7 @@ export default function Step3Publish({
     (c) => String(c.id) === String(metadata.subCategoryId)
   ) ?? null
   const subLabel = subCategory?.name ?? null
+  const descriptionPreview = stripHtml(metadata.description)
 
   const checks = [
     { label: 'File uploaded', ok: uploadReady },
@@ -137,6 +146,7 @@ export default function Step3Publish({
 
             <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/55">
               <span>Tags: <span className="text-white/75">{(metadata.tags || []).length}</span></span>
+              <span>Audience: <span className="text-white/75">{metadata.isMature ? 'Mature' : 'General'}</span></span>
               {!isArchive && fileMetadata?.resolution && fileMetadata.resolution !== '—' && (
                 <span>Resolution: <span className="text-white/75">{fileMetadata.resolution}</span></span>
               )}
@@ -145,8 +155,8 @@ export default function Step3Publish({
               )}
             </div>
 
-            {metadata.description && (
-              <p className="line-clamp-2 text-xs text-white/50">{metadata.description}</p>
+            {descriptionPreview && (
+              <p className="line-clamp-2 text-xs text-white/50">{descriptionPreview}</p>
             )}
           </div>
         </div>