Gregor Klevze
a875203482
- Add Nova UI library: Button, TextInput, Textarea, FormField, Select, NovaSelect, Checkbox, Radio/RadioGroup, Toggle, DatePicker, DateRangePicker, Modal + barrel index.js - Replace all native <select> in Studio with NovaSelect (StudioFilters, StudioToolbar, BulkActionsBar) including frosted-glass portal and category group headers - Replace native checkboxes in StudioGridCard, StudioTable, UploadSidebar, UploadWizard, Upload/Index with custom Checkbox component - Add nova-scrollbar CSS utility (thin 4px, semi-transparent) - Fix portal position drift: use viewport-relative coords (no scrollY offset) for NovaSelect, DatePicker and DateRangePicker - Close portals on external scroll instead of remeasuring - Improve hover highlight visibility in NovaSelect (bg-white/[0.13]) - Move search icon to right side in NovaSelect dropdown - Reduce Studio layout top spacing (py-6 -> pt-4 pb-8) - Add StudioCheckbox and SquareCheckbox backward-compat shims - Add sync.sh rsync deploy script
76 lines
2.9 KiB
JavaScript
76 lines
2.9 KiB
JavaScript
import React, { useState } from 'react'
|
|
import NovaSelect from '../ui/NovaSelect'
|
|
|
|
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">
|
|
<div className="min-w-[180px]">
|
|
<NovaSelect
|
|
options={actions.map((a) => ({ value: a.value, label: a.label }))}
|
|
value={action || null}
|
|
onChange={(val) => setAction(val ?? '')}
|
|
placeholder="Choose action…"
|
|
searchable={false}
|
|
/>
|
|
</div>
|
|
|
|
<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>
|
|
)
|
|
}
|