Save workspace changes

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

@@ -1,6 +1,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'
 
 /**
@@ -47,7 +48,6 @@ export default function Step2Details({
   onChangeTitle,
   onChangeTags,
   onChangeDescription,
-  onToggleMature,
   onToggleRights,
 }) {
   const [isContentTypeChooserOpen, setIsContentTypeChooserOpen] = useState(() => !metadata.contentType)
@@ -488,34 +488,33 @@ export default function Step2Details({
           </div>
 
           <label className="block">
-            <span className="text-sm font-medium text-white/90">Publishing identity</span>
-            <select
+            <NovaSelect
+              label="Publishing identity"
               value={metadata.group || ''}
-              onChange={(event) => onGroupChange?.(event.target.value)}
-              className="mt-2 w-full rounded-xl border border-white/15 bg-black/20 px-3 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
-            >
-              <option value="">Personal profile</option>
-              {groupOptions.map((group) => (
-                <option key={group.slug} value={group.slug}>{group.name}</option>
-              ))}
-            </select>
+              onChange={(nextValue) => onGroupChange?.(String(nextValue || ''))}
+              options={[
+                { value: '', label: 'Personal profile' },
+                ...groupOptions.map((group) => ({ value: group.slug, label: group.name })),
+              ]}
+              searchable={false}
+              className="mt-2 bg-black/20"
+            />
           </label>
 
           {metadata.group && (
             <div className="mt-5 grid gap-5 lg:grid-cols-[minmax(0,0.95fr)_minmax(0,1.05fr)]">
               <div>
-                <label className="block">
-                  <span className="text-sm font-medium text-white/90">Primary author</span>
-                  <select
-                    value={metadata.primaryAuthorUserId || ''}
-                    onChange={(event) => onPrimaryAuthorChange?.(event.target.value)}
-                    className="mt-2 w-full rounded-xl border border-white/15 bg-black/20 px-3 py-3 text-sm text-white outline-none transition focus:border-sky-300/40"
-                  >
-                    {currentContributorOptions.map((user) => (
-                      <option key={user.id} value={user.id}>{user.name || user.username}</option>
-                    ))}
-                  </select>
-                </label>
+                <NovaSelect
+                  label="Primary author"
+                  value={metadata.primaryAuthorUserId || null}
+                  onChange={(nextValue) => onPrimaryAuthorChange?.(nextValue == null ? '' : String(nextValue))}
+                  options={currentContributorOptions.map((user) => ({
+                    value: user.id,
+                    label: user.name || user.username,
+                  }))}
+                  searchable={false}
+                  className="mt-2 bg-black/20"
+                />
                 <p className="mt-2 text-xs text-slate-400">The primary author is shown as the lead creator for this group-published artwork.</p>
               </div>
 
@@ -613,7 +612,6 @@ export default function Step2Details({
         onChangeTitle={onChangeTitle}
         onChangeTags={onChangeTags}
         onChangeDescription={onChangeDescription}
-        onToggleMature={onToggleMature}
         onToggleRights={onToggleRights}
       />
     </div>