Allow artworks to have one primary category and extra secondaries.

Keep artwork_category as membership, store a deterministic primary_category_id, and let upload plus studio pick up to five additional same-type categories without changing canonical URLs.

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

@@ -2,7 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react'
 import ArchiveScreenshotPicker from '../ArchiveScreenshotPicker'
 import UploadSidebar from '../UploadSidebar'
 import { NovaSelect } from '../../ui'
-import { getContentTypeValue, getContentTypeVisualKey } from '../../../lib/uploadUtils'
+import { additionalCategoryOptions, getContentTypeValue, getContentTypeVisualKey } from '../../../lib/uploadUtils'
 
 /**
  * Step2Details
@@ -31,6 +31,8 @@ export default function Step2Details({
   onContentTypeChange,
   onRootCategoryChange,
   onSubCategoryChange,
+  onAdditionalCategoriesChange,
+  maxSecondaryCategories = 5,
   groupOptions,
   currentContributorOptions,
   onGroupChange,
@@ -100,6 +102,16 @@ export default function Step2Details({
     const q = subCategorySearch.trim().toLowerCase()
     return q ? sorted.filter((s) => s.name.toLowerCase().includes(q)) : sorted
   }, [subCategories, subCategorySearch])
+
+  const selectedLeafCategoryId = metadata.subCategoryId || (!requiresSubCategory ? metadata.rootCategoryId : '')
+  const extraCategoryOptions = useMemo(
+    () => additionalCategoryOptions(filteredCategoryTree, selectedLeafCategoryId),
+    [filteredCategoryTree, selectedLeafCategoryId]
+  )
+  const selectedAdditionalIds = useMemo(
+    () => (Array.isArray(metadata.additionalCategoryIds) ? metadata.additionalCategoryIds.map(String) : []),
+    [metadata.additionalCategoryIds]
+  )
   const contributorCredits = metadata.contributorCredits || {}
 
   useEffect(() => {
@@ -475,6 +487,50 @@ export default function Step2Details({
             <span className="font-medium text-slate-300">{selectedRoot.name}</span> has no subcategories — selecting it is enough.
           </div>
         )}
+
+        {selectedLeafCategoryId && extraCategoryOptions.length > 0 && (
+          <>
+            <div className="my-5 border-t border-white/8" />
+            <div>
+              <div className="mb-2 flex items-center justify-between gap-2">
+                <p className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Additional categories</p>
+                <span className="text-[11px] text-slate-600">{selectedAdditionalIds.length}/{maxSecondaryCategories}</span>
+              </div>
+              <p className="mb-3 text-sm text-slate-400">Optional. Add up to {maxSecondaryCategories} other categories from this content type. They appear on those category pages but do not change the artwork URL or breadcrumb.</p>
+              <div className="flex flex-wrap gap-2">
+                {extraCategoryOptions.map((option) => {
+                  const selected = selectedAdditionalIds.includes(String(option.id))
+                  const atLimit = !selected && selectedAdditionalIds.length >= maxSecondaryCategories
+                  return (
+                    <button
+                      key={`extra-${option.id}`}
+                      type="button"
+                      disabled={atLimit}
+                      onClick={() => {
+                        const next = selected
+                          ? selectedAdditionalIds.filter((id) => id !== String(option.id))
+                          : [...selectedAdditionalIds, String(option.id)]
+                        onAdditionalCategoriesChange?.(next)
+                      }}
+                      className={[
+                        'rounded-full border px-3 py-1.5 text-sm transition',
+                        selected
+                          ? 'border-sky-400/40 bg-sky-400/15 text-sky-100'
+                          : 'border-white/10 bg-white/[0.04] text-slate-300 hover:border-white/20 hover:bg-white/[0.08] disabled:cursor-not-allowed disabled:opacity-40',
+                      ].join(' ')}
+                      aria-pressed={selected}
+                    >
+                      {option.name}
+                    </button>
+                  )
+                })}
+              </div>
+              {metadataErrors.secondary_category_ids && (
+                <p className="mt-3 text-xs text-red-300">{metadataErrors.secondary_category_ids}</p>
+              )}
+            </div>
+          </>
+        )}
       </section>
 
       {Array.isArray(groupOptions) && groupOptions.length > 0 && (

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

@@ -169,6 +169,9 @@ export default function Step3Publish({
               {subLabel && (
                 <span>Sub: <span className="text-white/75">{subLabel}</span></span>
               )}
+              {(metadata.additionalCategoryIds || []).length > 0 && (
+                <span>Also in: <span className="text-white/75">{metadata.additionalCategoryIds.length}</span></span>
+              )}
             </div>
 
             <div className="flex flex-wrap gap-x-4 gap-y-1 text-xs text-white/55">