optimizations

resources/js/components/artwork/ArtworkGallery.jsx

@@ -1,6 +1,67 @@
-import React from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import ArtworkCard from './ArtworkCard'
 
+function getCsrfToken() {
+  if (typeof document === 'undefined') return ''
+  return document.querySelector('meta[name="csrf-token"]')?.getAttribute('content') || ''
+}
+
+async function revokeDismissSignal(entry) {
+  const item = entry?.item || null
+  const kind = entry?.kind || null
+
+  if (!item || !kind) {
+    throw new Error('missing_dismiss_entry')
+  }
+
+  const endpoint = kind === 'dislike-tag'
+    ? item.dislike_tag_endpoint || item?.negative_feedback?.dislike_tag_endpoint
+    : item.hide_artwork_endpoint || item?.negative_feedback?.hide_artwork_endpoint
+
+  if (!endpoint) {
+    throw new Error('missing_revoke_endpoint')
+  }
+
+  const payload = kind === 'dislike-tag'
+    ? {
+        tag_id: item?.primary_tag?.id ? Number(item.primary_tag.id) : undefined,
+        tag_slug: item?.primary_tag?.slug || item?.primary_tag?.name || undefined,
+        artwork_id: Number(item.id),
+        algo_version: item?.recommendation_algo_version || item?.algo_version || undefined,
+        meta: {
+          gallery_type: item?.recommendation_surface || item?.gallery_type || 'recommendation-surface',
+          reason: item?.recommendation_reason || null,
+          interaction_origin: 'artwork-gallery-undo-dislike-tag',
+        },
+      }
+    : {
+        artwork_id: Number(item.id),
+        algo_version: item?.recommendation_algo_version || item?.algo_version || undefined,
+        meta: {
+          gallery_type: item?.recommendation_surface || item?.gallery_type || 'recommendation-surface',
+          reason: item?.recommendation_reason || null,
+          interaction_origin: 'artwork-gallery-undo-hide',
+        },
+      }
+
+  const response = await fetch(endpoint, {
+    method: 'DELETE',
+    credentials: 'same-origin',
+    headers: {
+      'Content-Type': 'application/json',
+      'X-CSRF-TOKEN': getCsrfToken(),
+      'X-Requested-With': 'XMLHttpRequest',
+    },
+    body: JSON.stringify(payload),
+  })
+
+  if (!response.ok) {
+    throw new Error('revoke_request_failed')
+  }
+
+  return response.json().catch(() => null)
+}
+
 function cx(...parts) {
   return parts.filter(Boolean).join(' ')
 }
@@ -14,6 +75,36 @@ function getArtworkKey(item, index) {
   return `artwork-${index}`
 }
 
+function DismissNotice({ notice, onUndo, onClose }) {
+  if (!notice) return null
+
+  return (
+    <div className="pointer-events-none fixed bottom-5 right-5 z-50 max-w-sm" aria-live="polite" aria-atomic="true">
+      <div className="pointer-events-auto rounded-2xl border border-amber-300/30 bg-slate-950/92 px-4 py-3 text-amber-50 shadow-2xl shadow-black/40 backdrop-blur">
+        <p className="text-[11px] uppercase tracking-[0.2em] text-amber-100/70">Discovery Feedback</p>
+        <p className="mt-1 text-sm font-medium">{notice.message}</p>
+        <div className="mt-3 flex items-center gap-2">
+          <button
+            type="button"
+            onClick={onUndo}
+            disabled={notice.busy}
+            className="inline-flex items-center rounded-full border border-white/15 px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-white/85 transition hover:border-white/30 hover:text-white"
+          >
+            {notice.busy ? 'Undoing...' : 'Undo'}
+          </button>
+          <button
+            type="button"
+            onClick={onClose}
+            className="inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-[0.14em] text-white/55 transition hover:text-white/85"
+          >
+            Dismiss
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
 export default function ArtworkGallery({
   items,
   layout = 'grid',
@@ -30,13 +121,81 @@ export default function ArtworkGallery({
   if (!Array.isArray(items) || items.length === 0) return null
 
   const visibleItems = typeof limit === 'number' ? items.slice(0, limit) : items
+  const [dismissedEntries, setDismissedEntries] = useState([])
+  const [dismissNotice, setDismissNotice] = useState(null)
+  const visibleArtworkItems = useMemo(
+    () => visibleItems.filter((item) => !dismissedEntries.some((entry) => entry.item?.id === item?.id)),
+    [dismissedEntries, visibleItems]
+  )
   const baseClassName = layout === 'masonry'
     ? 'grid gap-6'
-    : 'grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4'
+    : 'grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5'
+
+  useEffect(() => {
+    if (!dismissNotice) {
+      return undefined
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setDismissNotice(null)
+    }, 3200)
+
+    return () => {
+      window.clearTimeout(timeoutId)
+    }
+  }, [dismissNotice])
+
+  function handleDismissed(item, kind) {
+    if (!item?.id) return
+
+    setDismissedEntries((current) => {
+      const next = current.filter((entry) => entry.item?.id !== item.id)
+      next.push({ item, kind })
+      return next
+    })
+
+    setDismissNotice({
+      itemId: item.id,
+      busy: false,
+      message: kind === 'dislike-tag'
+        ? `We will show less content like #${item?.primary_tag?.slug || item?.primary_tag?.name || 'this tag'}.`
+        : 'Artwork hidden from this recommendation view.',
+    })
+  }
+
+  async function handleUndoDismiss() {
+    if (!dismissNotice?.itemId) {
+      setDismissNotice(null)
+      return
+    }
+
+    const entry = dismissedEntries.find((current) => current.item?.id === dismissNotice.itemId)
+    if (!entry) {
+      setDismissNotice(null)
+      return
+    }
+
+    setDismissNotice((current) => current ? { ...current, busy: true } : current)
+
+    try {
+      await revokeDismissSignal(entry)
+    } catch {
+      setDismissNotice({
+        itemId: entry.item.id,
+        busy: false,
+        message: 'Undo failed. The feedback signal is still active.',
+      })
+      return
+    }
+
+    setDismissedEntries((current) => current.filter((entry) => entry.item?.id !== dismissNotice.itemId))
+    setDismissNotice(null)
+  }
 
   return (
-    <div className={cx(baseClassName, className)} {...containerProps}>
-      {visibleItems.map((item, index) => {
+    <>
+      <div className={cx(baseClassName, className)} {...containerProps}>
+      {visibleArtworkItems.map((item, index) => {
         const cardProps = resolveCardProps?.(item, index) || {}
         const { className: resolvedClassName = '', ...restCardProps } = cardProps
 
@@ -48,11 +207,14 @@ export default function ArtworkGallery({
             showStats={showStats}
             showAuthor={showAuthor}
             className={cx(cardClassName, resolvedClassName)}
+            onDismissed={handleDismissed}
             {...restCardProps}
           />
         )
       })}
       {children}
-    </div>
+      </div>
+      <DismissNotice notice={dismissNotice} onUndo={handleUndoDismiss} onClose={() => setDismissNotice(null)} />
+    </>
   )
 }