diff --git a/resources/js/Pages/CategoriesPage.jsx b/resources/js/Pages/CategoriesPage.jsx
index de56f1d8..c369b75b 100644
--- a/resources/js/Pages/CategoriesPage.jsx
+++ b/resources/js/Pages/CategoriesPage.jsx
@@ -2,6 +2,7 @@ import React, { startTransition, useDeferredValue, useEffect, useRef, useState }
import { createRoot } from 'react-dom/client'
import CategoryCard from '../components/category/CategoryCard'
import Pagination from '../components/forum/Pagination'
+import NovaSelect from '../components/ui/NovaSelect'
const SORT_OPTIONS = [
{ value: 'popular', label: 'Popular' },
@@ -13,6 +14,26 @@ const PAGE_SIZE = 24
const numberFormatter = new Intl.NumberFormat()
+function normalizeInitialData(initialData) {
+ if (!initialData || typeof initialData !== 'object') {
+ return {
+ data: [],
+ meta: { current_page: 1, last_page: 1, per_page: PAGE_SIZE, total: 0 },
+ summary: { total_categories: 0, total_artworks: 0 },
+ popular_categories: [],
+ request: { query: '', sort: 'popular', page: 1 },
+ }
+ }
+
+ return {
+ data: Array.isArray(initialData.data) ? initialData.data : [],
+ meta: initialData.meta || { current_page: 1, last_page: 1, per_page: PAGE_SIZE, total: 0 },
+ summary: initialData.summary || { total_categories: 0, total_artworks: 0 },
+ popular_categories: Array.isArray(initialData.popular_categories) ? initialData.popular_categories : [],
+ request: initialData.request || { query: '', sort: 'popular', page: 1 },
+ }
+}
+
function LoadingGrid() {
return (
@@ -113,17 +134,21 @@ function syncQueryState({ page, sort, query }) {
window.history.replaceState({}, '', url.toString())
}
-function CategoriesPage({ apiUrl = '/api/categories', pageTitle = 'Categories', pageDescription = '' }) {
- const [categories, setCategories] = useState([])
- const [popularCategories, setPopularCategories] = useState([])
- const [meta, setMeta] = useState({ current_page: 1, last_page: 1, per_page: PAGE_SIZE, total: 0 })
- const [summary, setSummary] = useState({ total_categories: 0, total_artworks: 0 })
- const [loading, setLoading] = useState(true)
+function CategoriesPage({ apiUrl = '/api/categories', pageTitle = 'Categories', pageDescription = '', initialData = null }) {
+ const bootstrap = normalizeInitialData(initialData)
+ const hasInitialData = initialData !== null
+ const initialRequestRef = useRef(hasInitialData ? bootstrap.request : null)
+
+ const [categories, setCategories] = useState(() => (hasInitialData ? bootstrap.data : []))
+ const [popularCategories, setPopularCategories] = useState(() => (hasInitialData ? bootstrap.popular_categories : []))
+ const [meta, setMeta] = useState(() => (hasInitialData ? bootstrap.meta : { current_page: 1, last_page: 1, per_page: PAGE_SIZE, total: 0 }))
+ const [summary, setSummary] = useState(() => (hasInitialData ? bootstrap.summary : { total_categories: 0, total_artworks: 0 }))
+ const [loading, setLoading] = useState(() => !hasInitialData)
const [loadingMore, setLoadingMore] = useState(false)
const [error, setError] = useState(false)
- const [searchQuery, setSearchQuery] = useState(() => getInitialSearchQuery())
- const [sort, setSort] = useState(() => getInitialSort())
- const [currentPage, setCurrentPage] = useState(() => getInitialPage())
+ const [searchQuery, setSearchQuery] = useState(() => (hasInitialData ? (bootstrap.request.query || '') : getInitialSearchQuery()))
+ const [sort, setSort] = useState(() => (hasInitialData ? (bootstrap.request.sort || 'popular') : getInitialSort()))
+ const [currentPage, setCurrentPage] = useState(() => (hasInitialData ? (bootstrap.request.page || 1) : getInitialPage()))
const deferredQuery = useDeferredValue(searchQuery)
const sentinelRef = useRef(null)
@@ -199,6 +224,20 @@ function CategoriesPage({ apiUrl = '/api/categories', pageTitle = 'Categories',
}
useEffect(() => {
+ const initialRequest = initialRequestRef.current
+
+ if (initialRequest) {
+ const sameQuery = (initialRequest.query || '') === deferredQuery
+ const sameSort = (initialRequest.sort || 'popular') === sort
+ const samePage = Number(initialRequest.page || 1) === currentPage
+
+ initialRequestRef.current = null
+
+ if (sameQuery && sameSort && samePage) {
+ return undefined
+ }
+ }
+
const controller = new AbortController()
void loadCategories({
@@ -334,24 +373,19 @@ function CategoriesPage({ apiUrl = '/api/categories', pageTitle = 'Categories',
/>
-
-
+ onFormChange('action', val)} searchable={false} options={[{ value: 'archive', label: 'Archive' }, { value: 'assign_campaign', label: 'Assign campaign' }, { value: 'update_lifecycle', label: 'Update lifecycle' }, { value: 'request_ai_review', label: 'Request AI review' }, { value: 'mark_editorial_review', label: 'Mark editorial review' }]} />
{form.action === 'assign_campaign' ? (
@@ -284,11 +280,7 @@ function BulkActionsPanel({
{form.action === 'update_lifecycle' ? (
-
+ onFormChange('lifecycle_state', val)} searchable={false} options={[{ value: 'draft', label: 'Draft' }, { value: 'published', label: 'Published' }, { value: 'archived', label: 'Archived' }]} />
) : null}
@@ -344,15 +336,13 @@ function SearchResults({ state, endpoints, selectedIds, onToggleSelected }) {
{state.collections.map((collection) => (
@@ -584,56 +574,27 @@ export default function CollectionDashboard() {
-
+ updateFilter('type', val)} placeholder="Any type" options={(Array.isArray(filterOptions.types) ? filterOptions.types : []).map((o) => ({ value: o, label: titleize(o) }))} />
-
+ updateFilter('visibility', val)} placeholder="Any visibility" options={(Array.isArray(filterOptions.visibilities) ? filterOptions.visibilities : []).map((o) => ({ value: o, label: titleize(o) }))} />
-
+ updateFilter('lifecycle_state', val)} placeholder="Any lifecycle" options={(Array.isArray(filterOptions.lifecycleStates) ? filterOptions.lifecycleStates : []).map((o) => ({ value: o, label: titleize(o) }))} />
-
+ updateFilter('workflow_state', val)} placeholder="Any workflow" options={(Array.isArray(filterOptions.workflowStates) ? filterOptions.workflowStates : []).map((o) => ({ value: o, label: titleize(o) }))} />
-
+ updateFilter('health_state', val)} placeholder="Any health state" options={(Array.isArray(filterOptions.healthStates) ? filterOptions.healthStates : []).map((o) => ({ value: o, label: titleize(o) }))} />
-
+ updateFilter('placement_eligibility', val)} placeholder="Any placement state" searchable={false} options={[{ value: '1', label: 'Eligible' }, { value: '0', label: 'Blocked' }]} />
diff --git a/resources/js/Pages/Collection/CollectionFeaturedIndex.jsx b/resources/js/Pages/Collection/CollectionFeaturedIndex.jsx
index ea07987a..2cdbd77c 100644
--- a/resources/js/Pages/Collection/CollectionFeaturedIndex.jsx
+++ b/resources/js/Pages/Collection/CollectionFeaturedIndex.jsx
@@ -1,7 +1,8 @@
import React from 'react'
-import { usePage } from '@inertiajs/react'
+import { router, usePage } from '@inertiajs/react'
import CollectionCard from '../../components/profile/collections/CollectionCard'
import SeoHead from '../../components/seo/SeoHead'
+import NovaSelect from '../../components/ui/NovaSelect'
const SEARCH_SELECT_OPTIONS = {
type: [
@@ -174,6 +175,33 @@ function SearchPanel({ search }) {
const options = search.options || {}
const chips = activeSearchChips(filters)
+ const [localFilters, setLocalFilters] = React.useState({
+ q: filters.q || '',
+ type: filters.type || '',
+ sort: filters.sort || 'trending',
+ category: filters.category || '',
+ mode: filters.mode || '',
+ style: filters.style || '',
+ lifecycle_state: filters.lifecycle_state || '',
+ theme: filters.theme || '',
+ health_state: filters.health_state || '',
+ color: filters.color || '',
+ campaign_key: filters.campaign_key || '',
+ program_key: filters.program_key || '',
+ quality_tier: filters.quality_tier || '',
+ })
+
+ function updateFilter(key, val) {
+ setLocalFilters((curr) => ({ ...curr, [key]: val }))
+ }
+
+ function handleSubmit(event) {
+ event.preventDefault()
+ const params = {}
+ Object.entries(localFilters).forEach(([k, v]) => { if (v) params[k] = v })
+ router.get('/collections/search', params)
+ }
+
return (
@@ -183,75 +211,20 @@ function SearchPanel({ search }) {
{search?.meta?.total ?? 0} results
-
-
+ onChange={(value) => onSlotChange(module.key, value)}
+ options={module.slots.map((slot) => ({
+ value: slot,
+ label: slot === 'full' ? 'Full width' : slot === 'main' ? 'Main column' : 'Sidebar',
+ }))}
+ searchable={false}
+ />
@@ -646,27 +651,21 @@ function SmartRuleRow({
-
+ onChange={(value) => onFieldChange(value)}
+ options={fieldOptions.map((option) => ({ value: option.value, label: option.label }))}
+ searchable={false}
+ />
-
+ onChange={(value) => onOperatorChange(value)}
+ options={operatorOptions.map((option) => ({ value: option.value, label: option.label }))}
+ searchable={false}
+ />
{rule.field === 'created_at' ? (
@@ -688,23 +687,20 @@ function SmartRuleRow({
) : rule.field === 'is_featured' || rule.field === 'is_mature' ? (
-
+ onChange={(value) => onValueChange(value === 'true')}
+ options={rule.field === 'is_featured'
+ ? [
+ { value: 'true', label: 'Featured only' },
+ { value: 'false', label: 'Not featured' },
+ ]
+ : [
+ { value: 'true', label: 'Mature only' },
+ { value: 'false', label: 'Not mature' },
+ ]}
+ searchable={false}
+ />
) : rule.field === 'tags' ? (
@@ -718,16 +714,13 @@ function SmartRuleRow({
) : valueOptions.length ? (
-
+ onChange={(value) => onValueChange(value)}
+ options={valueOptions.map((option) => ({ value: option.value, label: option.label }))}
+ placeholder="Select one"
+ searchable={false}
+ />
) : (
@@ -1917,11 +1910,7 @@ export default function CollectionManage() {
/>
-
+ updateForm('visibility', val)} searchable={false} options={[{ value: 'public', label: 'Public — visible to everyone' }, { value: 'unlisted', label: 'Unlisted — accessible by link only' }, { value: 'private', label: 'Private — only you can see it' }]} />
@@ -1965,12 +1954,7 @@ export default function CollectionManage() {
/>
-
+ updateForm('presentation_style', val)} searchable={false} options={[{ value: 'standard', label: 'Standard' }, { value: 'editorial_grid', label: 'Editorial Grid' }, { value: 'hero_grid', label: 'Hero Grid' }, { value: 'masonry', label: 'Masonry' }]} />
@@ -1986,73 +1970,49 @@ export default function CollectionManage() {
-
+ updateForm('emphasis_mode', val)} searchable={false} options={[{ value: 'cover_heavy', label: 'Cover Heavy' }, { value: 'balanced', label: 'Balanced' }, { value: 'artwork_first', label: 'Artwork First' }]} />
-
+ updateForm('theme_token', val)} searchable={false} options={[{ value: 'default', label: 'Default' }, { value: 'subtle-blue', label: 'Subtle Blue' }, { value: 'violet', label: 'Violet' }, { value: 'amber', label: 'Amber' }]} />
{!isSmartMode ? (
-
+ updateForm('sort_mode', val)} searchable={false} options={[{ value: 'manual', label: 'Manual' }, { value: 'newest', label: 'Newest first' }, { value: 'oldest', label: 'Oldest first' }, { value: 'popular', label: 'Most popular' }]} />
) : (
-
+ onChange={(val) => setSmartRules((current) => ({ ...current, match: val }))}
+ searchable={false}
+ options={[{ value: 'all', label: 'All rules' }, { value: 'any', label: 'Any rule' }]}
+ />
)}
{!isSmartMode ? (
-
+ placeholder="Automatic cover"
+ options={attachedCoverOptions.map((a) => ({ value: String(a.id), label: a.title }))}
+ />
) : (
-
+ options={(smartRuleOptions?.sort_options || [])}
+ />
)}
@@ -2061,48 +2021,32 @@ export default function CollectionManage() {
-
+ updateForm('type', val)} searchable={false} options={[{ value: 'personal', label: 'Personal' }, { value: 'community', label: 'Community' }, { value: 'editorial', label: 'Editorial' }]} />
-
+ updateForm('collaboration_mode', val)} searchable={false} options={[{ value: 'closed', label: 'Closed — curated by you only' }, { value: 'invite_only', label: 'Invite only' }, { value: 'open', label: 'Open submissions' }]} />
-
-
-
-
+
+ updateForm('allow_submissions', event.target.checked)} label="Allow submissions" />
+
+
+ updateForm('allow_comments', event.target.checked)} label="Allow comments" />
+
+
+ updateForm('allow_saves', event.target.checked)} label="Allow saves" />
+
+
+ updateForm('commercial_eligibility', event.target.checked)} label="Commercially eligible" />
+
-
+ updateForm('editorial_owner_mode', val)} searchable={false} options={[{ value: 'creator', label: 'Current curator' }, { value: 'staff_account', label: 'Staff account' }, { value: 'system', label: 'System editorial identity' }]} />
{form.editorial_owner_mode === 'staff_account' ? (
@@ -2156,13 +2100,7 @@ export default function CollectionManage() {
updateForm('campaign_label', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={120} />
-
+ updateForm('spotlight_style', val)} searchable={false} options={[{ value: 'default', label: 'Default' }, { value: 'editorial', label: 'Editorial' }, { value: 'seasonal', label: 'Seasonal' }, { value: 'challenge', label: 'Challenge' }, { value: 'community', label: 'Community' }]} />
updateForm('banner_text', event.target.value)} className="w-full rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-white outline-none transition focus:border-sky-300/35 focus:bg-white/[0.06]" maxLength={200} />
@@ -2195,14 +2133,7 @@ export default function CollectionManage() {
-
+ updateForm('lifecycle_state', val)} searchable={false} options={[{ value: 'draft', label: 'Draft' }, { value: 'scheduled', label: 'Scheduled' }, { value: 'published', label: 'Published' }, { value: 'featured', label: 'Featured' }, { value: 'archived', label: 'Archived' }, { value: 'expired', label: 'Expired' }]} />
@@ -2800,19 +2730,9 @@ export default function CollectionManage() {