Studio: make grid checkbox rectangular and commit table changes

resources/js/components/Studio/BulkCategoryModal.jsx

@@ -0,0 +1,96 @@
+import React, { useState, useEffect } from 'react'
+
+/**
+ * Modal for choosing a category in bulk.
+ *
+ * Props:
+ *  - open: boolean
+ *  - categories: array of content types with nested categories
+ *  - onClose: () => void
+ *  - onConfirm: (categoryId: number) => void
+ */
+export default function BulkCategoryModal({ open, categories = [], onClose, onConfirm }) {
+  const [selectedId, setSelectedId] = useState('')
+
+  useEffect(() => {
+    if (open) setSelectedId('')
+  }, [open])
+
+  const handleConfirm = () => {
+    if (!selectedId) return
+    onConfirm(Number(selectedId))
+  }
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') onClose()
+    if (e.key === 'Enter' && selectedId) handleConfirm()
+  }
+
+  if (!open) return null
+
+  return (
+    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4" onKeyDown={handleKeyDown}>
+      {/* Backdrop */}
+      <div className="absolute inset-0 bg-black/70 backdrop-blur-sm" onClick={onClose} />
+
+      {/* Modal */}
+      <div className="relative w-full max-w-md bg-nova-900 border border-white/10 rounded-2xl shadow-2xl p-6 space-y-4">
+        {/* Header */}
+        <div className="flex items-center gap-3">
+          <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center flex-shrink-0">
+            <i className="fa-solid fa-folder text-accent" />
+          </div>
+          <div>
+            <h3 className="text-lg font-bold text-white">Change category</h3>
+            <p className="text-sm text-slate-400">Choose a category to assign to the selected artworks.</p>
+          </div>
+        </div>
+
+        {/* Category select */}
+        <div>
+          <label className="text-xs font-medium text-slate-400 mb-1.5 block">Category</label>
+          <select
+            value={selectedId}
+            onChange={(e) => setSelectedId(e.target.value)}
+            className="w-full px-3 py-2.5 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50"
+          >
+            <option value="" className="bg-nova-900">Select a category…</option>
+            {categories.map((ct) => (
+              <optgroup key={ct.id} label={ct.name}>
+                {ct.categories?.map((cat) => (
+                  <React.Fragment key={cat.id}>
+                    <option value={cat.id} className="bg-nova-900">{cat.name}</option>
+                    {cat.children?.map((ch) => (
+                      <option key={ch.id} value={ch.id} className="bg-nova-900">&nbsp;&nbsp;{ch.name}</option>
+                    ))}
+                  </React.Fragment>
+                ))}
+              </optgroup>
+            ))}
+          </select>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center justify-end gap-2 pt-2">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleConfirm}
+            disabled={!selectedId}
+            className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
+              selectedId
+                ? 'bg-accent hover:bg-accent/90 text-white'
+                : 'bg-white/5 text-slate-500 cursor-not-allowed'
+            }`}
+          >
+            Apply category
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}