Studio: make grid checkbox rectangular and commit table changes

2026-03-01 08:43:48 +01:00
parent 211dc58884
commit e3ca845a6d
89 changed files with 7323 additions and 475 deletions
--- a/resources/js/components/Studio/BulkActionsBar.jsx
+++ b/resources/js/components/Studio/BulkActionsBar.jsx
@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+
+const actions = [
+  { value: 'publish',         label: 'Publish',          icon: 'fa-eye',          danger: false },
+  { value: 'unpublish',       label: 'Unpublish (draft)', icon: 'fa-eye-slash',   danger: false },
+  { value: 'archive',         label: 'Archive',          icon: 'fa-box-archive',  danger: false },
+  { value: 'unarchive',       label: 'Unarchive',        icon: 'fa-rotate-left',  danger: false },
+  { value: 'delete',          label: 'Delete',           icon: 'fa-trash',        danger: true },
+  { value: 'change_category', label: 'Change category',  icon: 'fa-folder',       danger: false },
+  { value: 'add_tags',        label: 'Add tags',         icon: 'fa-tag',          danger: false },
+  { value: 'remove_tags',     label: 'Remove tags',      icon: 'fa-tags',         danger: false },
+]
+
+export default function BulkActionsBar({ count, onExecute, onClearSelection }) {
+  const [action, setAction] = useState('')
+
+  if (count === 0) return null
+
+  const handleExecute = () => {
+    if (!action) return
+    onExecute(action)
+    setAction('')
+  }
+
+  const selectedAction = actions.find((a) => a.value === action)
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 z-50 bg-nova-900/95 backdrop-blur-xl border-t border-white/10 px-4 py-3 shadow-xl shadow-black/20">
+      <div className="max-w-7xl mx-auto flex items-center justify-between gap-4">
+        <div className="flex items-center gap-3">
+          <span className="inline-flex items-center justify-center w-8 h-8 rounded-full bg-accent/20 text-accent text-sm font-bold">
+            {count}
+          </span>
+          <span className="text-sm text-slate-300">
+            {count === 1 ? 'artwork' : 'artworks'} selected
+          </span>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <select
+            value={action}
+            onChange={(e) => setAction(e.target.value)}
+            className="px-3 py-2 rounded-xl bg-white/5 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 min-w-[180px]"
+          >
+            <option value="" className="bg-nova-900">Choose action…</option>
+            {actions.map((a) => (
+              <option key={a.value} value={a.value} className="bg-nova-900">
+                {a.label}
+              </option>
+            ))}
+          </select>
+
+          <button
+            onClick={handleExecute}
+            disabled={!action}
+            className={`px-5 py-2 rounded-xl text-sm font-semibold transition-all ${
+              action
+                ? selectedAction?.danger
+                  ? 'bg-red-600 hover:bg-red-700 text-white'
+                  : 'bg-accent hover:bg-accent/90 text-white'
+                : 'bg-white/5 text-slate-500 cursor-not-allowed'
+            }`}
+          >
+            Apply
+          </button>
+
+          <button
+            onClick={onClearSelection}
+            className="px-4 py-2 rounded-xl text-sm text-slate-400 hover:text-white hover:bg-white/5 transition-all"
+          >
+            Clear
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}