Profile: store covers in object storage (WebP); add covers config; remember artworks categories content-type preference

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

@@ -56,6 +56,7 @@ export default function Step3Publish({
   scheduledAt = null,
   timezone = null,
   visibility = 'public',
+  onVisibilityChange,
   // Category tree (for label lookup)
   allRootCategoryOptions = [],
   filteredCategoryTree = [],
@@ -162,7 +163,45 @@ export default function Step3Publish({
         </div>
       </div>
 
-      {/* Publish summary: visibility + schedule */}
+      {/* ── Visibility selector ────────────────────────────────────────── */}
+      <section className="rounded-2xl border border-white/10 bg-white/[0.03] p-5">
+        <p className="mb-3 text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Visibility</p>
+        <div className="grid gap-2 sm:grid-cols-3">
+          {[
+            { value: 'public', label: 'Public', hint: 'Visible to everyone' },
+            { value: 'unlisted', label: 'Unlisted', hint: 'Available by direct link' },
+            { value: 'private', label: 'Private', hint: 'Keep as draft visibility' },
+          ].map((option) => {
+            const active = visibility === option.value
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => onVisibilityChange?.(option.value)}
+                className={[
+                  'flex items-start justify-between gap-3 rounded-2xl border px-4 py-3 text-left transition',
+                  active
+                    ? 'border-sky-300/30 bg-sky-400/10 text-white shadow-[0_0_0_1px_rgba(56,189,248,0.12)]'
+                    : 'border-white/10 bg-white/[0.03] text-white/75 hover:border-white/20 hover:bg-white/[0.06]',
+                ].join(' ')}
+              >
+                <div>
+                  <div className="text-sm font-semibold">{option.label}</div>
+                  <div className="mt-1 text-xs text-white/45">{option.hint}</div>
+                </div>
+                <span className={[
+                  'mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border text-[10px]',
+                  active ? 'border-sky-300/40 bg-sky-400/20 text-sky-100' : 'border-white/10 bg-white/5 text-white/30',
+                ].join(' ')}>
+                  {active ? '✓' : ''}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </section>
+
+      {/* Publish summary: schedule info */}
       <div className="flex flex-wrap gap-3">
         <span className="inline-flex items-center gap-1.5 rounded-full border border-white/15 bg-white/6 px-2.5 py-1 text-xs text-white/60">
           👁 {visibility === 'public' ? 'Public' : visibility === 'unlisted' ? 'Unlisted' : 'Private'}