Save workspace changes

2026-04-18 17:02:56 +02:00
parent f02ea9a711
commit 87d60af5a9
4220 changed files with 1388603 additions and 1554 deletions
--- a/.deploy/artwork-evolution-release/resources/js/components/upload/PublishPanel.jsx
+++ b/.deploy/artwork-evolution-release/resources/js/components/upload/PublishPanel.jsx
@@ -0,0 +1,287 @@
+import React, { useCallback } from 'react'
+import ArchiveScreenshotPicker from './ArchiveScreenshotPicker'
+import ReadinessChecklist from './ReadinessChecklist'
+import SchedulePublishPicker from './SchedulePublishPicker'
+import Checkbox from '../../Components/ui/Checkbox'
+
+/**
+ * PublishPanel
+ *
+ * Right-sidebar panel (or mobile bottom-sheet) that shows:
+ *   - Thumbnail preview + title
+ *   - Status pill
+ *   - ReadinessChecklist
+ *   - Visibility selector
+ *   - Publish now / Schedule controls
+ *   - Primary action button
+ *
+ * Props mirror what UploadWizard collects.
+ */
+
+const STATUS_PILL = {
+  idle: null,
+  initializing: { label: 'Uploading', cls: 'bg-sky-500/20 text-sky-200 border-sky-300/30' },
+  uploading: { label: 'Uploading', cls: 'bg-sky-500/25 text-sky-100 border-sky-300/40' },
+  finishing: { label: 'Processing', cls: 'bg-amber-500/20 text-amber-200 border-amber-300/30' },
+  processing: { label: 'Processing', cls: 'bg-amber-500/20 text-amber-200 border-amber-300/30' },
+  ready_to_publish: { label: 'Ready', cls: 'bg-emerald-500/20 text-emerald-100 border-emerald-300/35' },
+  publishing: { label: 'Publishing…', cls: 'bg-sky-500/25 text-sky-100 border-sky-300/40' },
+  complete: { label: 'Published', cls: 'bg-emerald-500/25 text-emerald-100 border-emerald-300/50' },
+  scheduled: { label: 'Scheduled', cls: 'bg-violet-500/20 text-violet-200 border-violet-300/30' },
+  error: { label: 'Error', cls: 'bg-red-500/20 text-red-200 border-red-300/30' },
+  cancelled: { label: 'Cancelled', cls: 'bg-white/8 text-white/40 border-white/10' },
+}
+
+export default function PublishPanel({
+  // Asset
+  primaryPreviewUrl = null,
+  isArchive = false,
+  screenshots = [],
+  selectedScreenshotIndex = 0,
+  onSelectedScreenshotChange,
+  // Metadata
+  metadata = {},
+  // Readiness
+  machineState = 'idle',
+  uploadReady = false,
+  canPublish = false,
+  isPublishing = false,
+  isArchiveRequiresScreenshot = false,
+  // Publish options
+  publishMode = 'now',        // 'now' | 'schedule'
+  scheduledAt = null,
+  timezone = Intl.DateTimeFormat().resolvedOptions().timeZone,
+  visibility = 'public',      // 'public' | 'unlisted' | 'private'
+  showRightsConfirmation = true,
+  showVisibility = false,
+  onPublishModeChange,
+  onScheduleAt,
+  onVisibilityChange,
+  onToggleRights,
+  // Actions
+  onPublish,
+  onCancel,
+  // Navigation helpers (for checklist quick-links)
+  onGoToStep,
+  allRootCategoryOptions = [],
+  actionLabel = 'Publish now',
+  showScheduleControls = true,
+}) {
+  const pill = STATUS_PILL[machineState] ?? null
+  const hasPreview = Boolean(primaryPreviewUrl && !isArchive)
+
+  const title = String(metadata.title || '').trim()
+  const hasTitle = Boolean(title)
+  const selectedRoot = allRootCategoryOptions.find(
+    (item) => String(item.id) === String(metadata.rootCategoryId || '')
+  ) ?? null
+  const requiresSubCategory = Boolean(selectedRoot?.children?.length)
+  const hasCompleteCategory = Boolean(
+    metadata.rootCategoryId && (!requiresSubCategory || metadata.subCategoryId)
+  )
+  const hasTag = Array.isArray(metadata.tags) && metadata.tags.length > 0
+  const hasRights = Boolean(metadata.rightsAccepted)
+  const hasScreenshot = !isArchiveRequiresScreenshot || screenshots.length > 0
+
+  const checklist = [
+    { label: 'File uploaded & processed', ok: uploadReady },
+    { label: 'Title', ok: hasTitle, onClick: () => onGoToStep?.(2) },
+    { label: 'Category', ok: hasCompleteCategory, onClick: () => onGoToStep?.(2) },
+    { label: 'Rights confirmed', ok: hasRights, onClick: () => onGoToStep?.(2) },
+    ...( isArchiveRequiresScreenshot
+      ? [{ label: 'Screenshot (required for pack)', ok: hasScreenshot, onClick: () => onGoToStep?.(1) }]
+      : [] ),
+    { label: 'At least 1 tag', ok: hasTag, onClick: () => onGoToStep?.(2) },
+  ]
+
+  const publishLabel = useCallback(() => {
+    if (isPublishing) return `${actionLabel}…`
+    if (!showScheduleControls) return actionLabel
+    if (publishMode === 'schedule') return 'Schedule publish'
+    return actionLabel
+  }, [isPublishing, publishMode, actionLabel, showScheduleControls])
+
+  const canSchedulePublish =
+    publishMode === 'schedule' ? Boolean(scheduledAt) && canPublish : canPublish
+
+  const rightsError = uploadReady && !hasRights ? 'Rights confirmation is required.' : null
+
+  const visibilityOptions = [
+    {
+      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',
+    },
+  ]
+
+  return (
+    <div className="h-fit 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-5 shadow-[0_24px_90px_rgba(2,8,23,0.28)] backdrop-blur">
+      {/* Preview + title */}
+      <div className="flex items-start gap-3">
+        {/* Thumbnail */}
+        <div className="shrink-0 h-[72px] w-[72px] overflow-hidden rounded-xl ring-1 ring-white/10 bg-black/30 flex items-center justify-center">
+          {hasPreview ? (
+            <img
+              src={primaryPreviewUrl}
+              alt="Artwork preview"
+              className="max-h-full max-w-full object-contain"
+              loading="lazy"
+              decoding="async"
+              width={72}
+              height={72}
+            />
+          ) : (
+            <svg className="h-6 w-6 text-white/25" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" aria-hidden="true">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+            </svg>
+          )}
+        </div>
+
+        {/* Title + status */}
+        <div className="min-w-0 flex-1 pt-0.5">
+          <p className="truncate text-sm font-semibold text-white leading-snug">
+            {hasTitle ? title : <span className="italic text-white/35">Untitled artwork</span>}
+          </p>
+          {pill && (
+            <span className={`mt-1 inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-[10px] ${pill.cls}`}>
+              {['uploading', 'initializing', 'finishing', 'processing', 'publishing'].includes(machineState) && (
+                <span className="relative flex h-1.5 w-1.5 shrink-0" aria-hidden="true">
+                  <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-60" />
+                  <span className="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+                </span>
+              )}
+              {pill.label}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {isArchive && screenshots.length > 0 && (
+        <div className="rounded-2xl border border-white/8 bg-white/[0.03] p-3">
+          <ArchiveScreenshotPicker
+            screenshots={screenshots}
+            selectedIndex={selectedScreenshotIndex}
+            onSelect={onSelectedScreenshotChange}
+            compact
+            title="Preview screenshot"
+            description="Choose which screenshot should represent this archive in the publish panel."
+          />
+        </div>
+      )}
+
+      {/* Divider */}
+      <div className="border-t border-white/8" />
+
+      {/* Readiness checklist */}
+      <div className="rounded-2xl border border-white/8 bg-white/[0.03] p-4">
+        <ReadinessChecklist items={checklist} />
+      </div>
+
+      {/* Visibility (only when showVisibility=true) */}
+      {showVisibility && (
+      <div>
+        <label className="mb-2 block text-[10px] uppercase tracking-wider text-white/40" htmlFor="publish-visibility">
+          Visibility
+        </label>
+        <div id="publish-visibility" className="grid gap-2">
+          {visibilityOptions.map((option) => {
+            const active = visibility === option.value
+            return (
+              <button
+                key={option.value}
+                type="button"
+                onClick={() => onVisibilityChange?.(option.value)}
+                disabled={!canPublish && machineState !== 'ready_to_publish'}
+                className={[
+                  'flex items-start justify-between gap-3 rounded-2xl border px-4 py-3 text-left transition disabled:opacity-50',
+                  active
+                    ? 'border-sky-300/30 bg-sky-400/10 text-white'
+                    : '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/50">{option.hint}</div>
+                </div>
+                <span className={[
+                  'mt-0.5 inline-flex h-5 w-5 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/35',
+                ].join(' ')}>
+                  {active ? '✓' : ''}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </div>
+      )}
+
+      {/* Schedule picker – only shows when enabled for this panel */}
+      {showVisibility && showScheduleControls && uploadReady && machineState !== 'complete' && (
+        <SchedulePublishPicker
+          mode={publishMode}
+          scheduledAt={scheduledAt}
+          timezone={timezone}
+          onModeChange={onPublishModeChange}
+          onScheduleAt={onScheduleAt}
+          disabled={!canPublish || isPublishing}
+        />
+      )}
+
+      {showRightsConfirmation && (
+        <div>
+          <Checkbox
+            id="publish-rights-confirm"
+            checked={Boolean(metadata.rightsAccepted)}
+            onChange={(event) => onToggleRights?.(event.target.checked)}
+            variant="emerald"
+            size={18}
+            label={<span className="text-xs text-white/85">I confirm I own the rights to this content.</span>}
+            hint={<span className="text-[11px] text-white/50">Required before publishing.</span>}
+            error={rightsError}
+            required
+          />
+        </div>
+      )}
+
+      {/* Primary action button */}
+      <button
+        type="button"
+        disabled={!canSchedulePublish || isPublishing}
+        onClick={() => onPublish?.()}
+        title={!canPublish ? 'Complete all requirements first' : undefined}
+        className={[
+          'w-full rounded-2xl py-3 text-sm font-semibold transition',
+          canSchedulePublish && !isPublishing
+            ? publishMode === 'schedule'
+              ? 'bg-violet-500/80 text-white hover:bg-violet-500 shadow-[0_4px_16px_rgba(139,92,246,0.25)]'
+              : 'btn-primary'
+            : 'cursor-not-allowed bg-white/8 text-white/35 ring-1 ring-white/10',
+        ].join(' ')}
+      >
+        {publishLabel()}
+      </button>
+
+      {/* Cancel link */}
+      {onCancel && machineState !== 'idle' && machineState !== 'complete' && (
+        <button
+          type="button"
+          onClick={onCancel}
+          className="w-full text-center text-xs text-white/35 hover:text-white/70 transition"
+        >
+          Cancel upload
+        </button>
+      )}
+    </div>
+  )
+}