Studio: make grid checkbox rectangular and commit table changes

resources/js/components/Studio/StudioToolbar.jsx

@@ -0,0 +1,90 @@
+import React from 'react'
+
+const sortOptions = [
+  { value: 'created_at:desc',      label: 'Latest' },
+  { value: 'ranking_score:desc',   label: 'Trending' },
+  { value: 'heat_score:desc',      label: 'Rising' },
+  { value: 'views:desc',           label: 'Most viewed' },
+  { value: 'favorites_count:desc', label: 'Most favourited' },
+  { value: 'shares_count:desc',    label: 'Most shared' },
+  { value: 'downloads:desc',       label: 'Most downloaded' },
+]
+
+export default function StudioToolbar({
+  search,
+  onSearchChange,
+  sort,
+  onSortChange,
+  viewMode,
+  onViewModeChange,
+  onFilterToggle,
+  selectedCount,
+  onUpload,
+}) {
+  return (
+    <div className="flex flex-wrap items-center gap-3 mb-4">
+      {/* Search */}
+      <div className="relative flex-1 min-w-[200px] max-w-md">
+        <i className="fa-solid fa-magnifying-glass absolute left-3.5 top-1/2 -translate-y-1/2 text-slate-500 text-sm pointer-events-none" />
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Search title or tags…"
+          style={{ paddingLeft: '3rem' }}
+          className="w-full pr-4 py-2.5 rounded-xl bg-nova-900/60 border border-white/10 text-white placeholder-slate-500 text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 focus:border-accent/50 transition-all"
+        />
+      </div>
+
+      {/* Sort */}
+      <select
+        value={sort}
+        onChange={(e) => onSortChange(e.target.value)}
+        className="px-3 py-2.5 rounded-xl bg-nova-900/60 border border-white/10 text-white text-sm focus:outline-none focus:ring-2 focus:ring-accent/50 appearance-none cursor-pointer min-w-[160px]"
+      >
+        {sortOptions.map((opt) => (
+          <option key={opt.value} value={opt.value} className="bg-nova-900 text-white">
+            {opt.label}
+          </option>
+        ))}
+      </select>
+
+      {/* Filter toggle */}
+      <button
+        onClick={onFilterToggle}
+        className="flex items-center gap-2 px-4 py-2.5 rounded-xl border border-white/10 text-slate-400 hover:text-white hover:bg-white/5 text-sm transition-all"
+        aria-label="Toggle filters"
+      >
+        <i className="fa-solid fa-filter" />
+        <span className="hidden sm:inline">Filters</span>
+      </button>
+
+      {/* View toggle */}
+      <div className="flex items-center bg-nova-900/60 border border-white/10 rounded-xl overflow-hidden">
+        <button
+          onClick={() => onViewModeChange('grid')}
+          className={`px-3 py-2.5 text-sm transition-all ${viewMode === 'grid' ? 'bg-accent/20 text-accent' : 'text-slate-400 hover:text-white'}`}
+          aria-label="Grid view"
+        >
+          <i className="fa-solid fa-table-cells" />
+        </button>
+        <button
+          onClick={() => onViewModeChange('list')}
+          className={`px-3 py-2.5 text-sm transition-all ${viewMode === 'list' ? 'bg-accent/20 text-accent' : 'text-slate-400 hover:text-white'}`}
+          aria-label="List view"
+        >
+          <i className="fa-solid fa-list" />
+        </button>
+      </div>
+
+      {/* Upload */}
+      <a
+        href="/upload"
+        className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-accent hover:bg-accent/90 text-white font-semibold text-sm transition-all shadow-lg shadow-accent/25"
+      >
+        <i className="fa-solid fa-cloud-arrow-up" />
+        <span className="hidden sm:inline">Upload</span>
+      </a>
+    </div>
+  )
+}