Featured artworks thumbnails

resources/js/components/forum/RichCompareNode.jsx

@@ -0,0 +1,193 @@
+import React, { useCallback } from 'react'
+import { Node, mergeAttributes as mergeNodeAttributes } from '@tiptap/core'
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+
+function readImageAttrs(element) {
+  const imageElements = Array.from(element.querySelectorAll?.('img') || [])
+  const subtitleElement = element.querySelector?.('figcaption')
+
+  return {
+    leftSrc: imageElements[0]?.getAttribute('src') || '',
+    leftAlt: imageElements[0]?.getAttribute('alt') || '',
+    rightSrc: imageElements[1]?.getAttribute('src') || '',
+    rightAlt: imageElements[1]?.getAttribute('alt') || '',
+    subtitle: subtitleElement?.textContent?.trim() || '',
+  }
+}
+
+function RichCompareNodeView({ editor, node, selected, updateAttributes, deleteNode, getPos }) {
+  const selectNode = useCallback(() => {
+    if (!editor || typeof getPos !== 'function') {
+      return
+    }
+
+    editor.chain().focus().setNodeSelection(getPos()).run()
+  }, [editor, getPos])
+
+  return (
+    <NodeViewWrapper
+      as="figure"
+      className={["rich-compare-node", selected ? 'is-selected' : ''].filter(Boolean).join(' ')}
+      data-rich-compare="true"
+      onMouseDown={(event) => {
+        if (event.target instanceof HTMLElement && event.target.closest('input, textarea, button, select, label')) {
+          return
+        }
+
+        selectNode()
+      }}
+    >
+      <div className="rich-compare-node__grid">
+        <div className="rich-compare-node__tile">
+          <span className="rich-compare-node__badge">Left</span>
+          <img
+            src={node.attrs.leftSrc}
+            alt={node.attrs.leftAlt || ''}
+            className="rich-compare-node__img"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+
+        <div className="rich-compare-node__tile">
+          <span className="rich-compare-node__badge">Right</span>
+          <img
+            src={node.attrs.rightSrc}
+            alt={node.attrs.rightAlt || ''}
+            className="rich-compare-node__img"
+            loading="lazy"
+            decoding="async"
+          />
+        </div>
+      </div>
+
+      {!selected && node.attrs.subtitle ? (
+        <figcaption className="rich-compare-node__subtitle">{node.attrs.subtitle}</figcaption>
+      ) : null}
+
+      {selected ? (
+        <div className="rich-compare-node__editor" contentEditable={false}>
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="grid gap-2 text-sm text-slate-300">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Left alt text</span>
+              <input
+                value={node.attrs.leftAlt || ''}
+                onChange={(event) => updateAttributes({ leftAlt: event.target.value })}
+                placeholder="Describe the left image"
+                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+              />
+            </label>
+
+            <label className="grid gap-2 text-sm text-slate-300">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Right alt text</span>
+              <input
+                value={node.attrs.rightAlt || ''}
+                onChange={(event) => updateAttributes({ rightAlt: event.target.value })}
+                placeholder="Describe the right image"
+                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+              />
+            </label>
+          </div>
+
+          <label className="grid gap-2 text-sm text-slate-300">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Subtitle</span>
+            <input
+              value={node.attrs.subtitle || ''}
+              onChange={(event) => updateAttributes({ subtitle: event.target.value })}
+              placeholder="Visible caption below the comparison"
+              className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+            />
+          </label>
+
+          <div className="flex flex-wrap gap-2">
+            <button
+              type="button"
+              onClick={selectNode}
+              className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
+            >
+              Keep selected
+            </button>
+
+            <button
+              type="button"
+              onClick={deleteNode}
+              className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15"
+            >
+              Remove comparison
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </NodeViewWrapper>
+  )
+}
+
+const RichCompare = Node.create({
+  name: 'imageCompare',
+  group: 'block',
+  atom: true,
+
+  addAttributes() {
+    return {
+      leftSrc: { default: '' },
+      leftAlt: { default: '' },
+      rightSrc: { default: '' },
+      rightAlt: { default: '' },
+      subtitle: { default: '' },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure[data-rich-compare]',
+        getAttrs: (element) => readImageAttrs(element),
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const {
+      leftSrc: _leftSrc,
+      leftAlt: _leftAlt,
+      rightSrc: _rightSrc,
+      rightAlt: _rightAlt,
+      subtitle: _subtitle,
+      ...figureHTMLAttributes
+    } = HTMLAttributes
+
+    const leftImageAttributes = {
+      src: node.attrs.leftSrc,
+      alt: node.attrs.leftAlt || '',
+      loading: 'lazy',
+      decoding: 'async',
+      class: 'rich-compare-node__img',
+    }
+
+    const rightImageAttributes = {
+      src: node.attrs.rightSrc,
+      alt: node.attrs.rightAlt || '',
+      loading: 'lazy',
+      decoding: 'async',
+      class: 'rich-compare-node__img',
+    }
+
+    return [
+      'figure',
+      mergeNodeAttributes(this.options.HTMLAttributes, figureHTMLAttributes, {
+        'data-rich-compare': 'true',
+      }),
+      ['div', { class: 'rich-compare-node__grid' },
+        ['div', { class: 'rich-compare-node__tile' }, ['img', leftImageAttributes]],
+        ['div', { class: 'rich-compare-node__tile' }, ['img', rightImageAttributes]],
+      ],
+      ...(node.attrs.subtitle ? [['figcaption', { class: 'rich-compare-node__subtitle' }, node.attrs.subtitle]] : []),
+    ]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(RichCompareNodeView)
+  },
+})
+
+export default RichCompare

resources/js/components/forum/RichImageNode.jsx

@@ -0,0 +1,317 @@
+import React, { useCallback, useEffect, useRef } from 'react'
+import { mergeAttributes } from '@tiptap/core'
+import Image from '@tiptap/extension-image'
+import { NodeViewWrapper, ReactNodeViewRenderer } from '@tiptap/react'
+
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function parsePixelValue(rawValue) {
+  const normalized = String(rawValue || '').trim()
+
+  if (!normalized) {
+    return null
+  }
+
+  const parsed = Number.parseFloat(normalized.replace(/px$/i, ''))
+  return Number.isFinite(parsed) ? Math.round(parsed) : null
+}
+
+function readImageAttrs(element) {
+  const imageElement = element.tagName?.toLowerCase() === 'img'
+    ? element
+    : element.querySelector?.('img')
+
+  const captionElement = element.querySelector?.('figcaption')
+
+  return {
+    src: imageElement?.getAttribute('src') || '',
+    alt: imageElement?.getAttribute('alt') || '',
+    title: imageElement?.getAttribute('title') || '',
+    caption: captionElement?.textContent?.trim() || '',
+    width: parsePixelValue(
+      element.getAttribute?.('data-width')
+      || element.getAttribute?.('width')
+      || imageElement?.getAttribute('width')
+      || element.style?.width
+      || '',
+    ),
+  }
+}
+
+function RichImageNodeView({ editor, node, selected, updateAttributes, deleteNode, getPos }) {
+  const imageRef = useRef(null)
+  const cleanupResizeRef = useRef(null)
+
+  useEffect(() => () => {
+    if (typeof cleanupResizeRef.current === 'function') {
+      cleanupResizeRef.current()
+    }
+  }, [])
+
+  const selectNode = useCallback(() => {
+    if (!editor || typeof getPos !== 'function') {
+      return
+    }
+
+    editor.chain().focus().setNodeSelection(getPos()).run()
+  }, [editor, getPos])
+
+  const startResize = useCallback((event) => {
+    if (!imageRef.current || event.button !== 0) {
+      return
+    }
+
+    event.preventDefault()
+    event.stopPropagation()
+    selectNode()
+
+    const imageElement = imageRef.current
+    const parentWidth = imageElement.parentElement?.getBoundingClientRect().width || imageElement.getBoundingClientRect().width || 0
+    const startX = event.clientX
+    const startWidth = node.attrs.width || Math.round(imageElement.getBoundingClientRect().width) || 0
+    const minWidth = 180
+    const maxWidth = Math.max(minWidth, Math.round(parentWidth || 1280))
+
+    const handleMove = (moveEvent) => {
+      const nextWidth = clamp(Math.round(startWidth + (moveEvent.clientX - startX)), minWidth, maxWidth)
+      updateAttributes({ width: nextWidth })
+    }
+
+    const handleUp = () => {
+      window.removeEventListener('pointermove', handleMove)
+      window.removeEventListener('pointerup', handleUp)
+      cleanupResizeRef.current = null
+    }
+
+    cleanupResizeRef.current = handleUp
+    window.addEventListener('pointermove', handleMove)
+    window.addEventListener('pointerup', handleUp)
+  }, [node.attrs.width, selectNode, updateAttributes])
+
+  const width = Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0
+    ? Number(node.attrs.width)
+    : null
+
+  return (
+    <NodeViewWrapper
+      as="figure"
+      className={[
+        'rich-image-node',
+        selected ? 'is-selected' : '',
+      ].filter(Boolean).join(' ')}
+      data-rich-image="true"
+      onMouseDown={(event) => {
+        if (event.target instanceof HTMLElement && event.target.closest('input, textarea, button, select, label')) {
+          return
+        }
+
+        selectNode()
+      }}
+    >
+      <div className="rich-image-node__frame">
+        <img
+          ref={imageRef}
+          src={node.attrs.src}
+          alt={node.attrs.alt || ''}
+          title={node.attrs.title || ''}
+          className="rich-image-node__img"
+          style={width ? { width: `${width}px` } : undefined}
+        />
+
+        {selected ? (
+          <button
+            type="button"
+            data-drag-handle
+            className="rich-image-node__drag-handle"
+            title="Drag to move image"
+            onMouseDown={selectNode}
+          >
+            <i className="fa-solid fa-grip-lines" />
+          </button>
+        ) : null}
+
+        {selected ? (
+          <button
+            type="button"
+            className="rich-image-node__resize-handle"
+            title="Resize image"
+            onPointerDown={startResize}
+          >
+            <i className="fa-solid fa-up-right-and-down-left-from-center" />
+          </button>
+        ) : null}
+      </div>
+
+      {!selected && node.attrs.caption ? (
+        <figcaption className="rich-image-node__caption">{node.attrs.caption}</figcaption>
+      ) : null}
+
+      {selected ? (
+        <div className="rich-image-node__editor" contentEditable={false}>
+          <div className="grid gap-3 md:grid-cols-2">
+            <label className="grid gap-2 text-sm text-slate-300">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Alt text</span>
+              <input
+                value={node.attrs.alt || ''}
+                onChange={(event) => updateAttributes({ alt: event.target.value })}
+                placeholder="Describe the image for screen readers"
+                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+              />
+            </label>
+
+            <label className="grid gap-2 text-sm text-slate-300">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Caption</span>
+              <input
+                value={node.attrs.caption || ''}
+                onChange={(event) => updateAttributes({ caption: event.target.value })}
+                placeholder="Visible caption below the image"
+                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+              />
+            </label>
+          </div>
+
+          <div className="grid gap-3 md:grid-cols-[minmax(0,1fr)_auto_auto] md:items-end">
+            <label className="grid gap-2 text-sm text-slate-300">
+              <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Width</span>
+              <input
+                type="number"
+                min="180"
+                max="2400"
+                value={width || ''}
+                onChange={(event) => {
+                  const nextValue = Number.parseInt(event.target.value, 10)
+                  updateAttributes({ width: Number.isFinite(nextValue) ? nextValue : null })
+                }}
+                placeholder="Auto"
+                className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+              />
+            </label>
+
+            <button
+              type="button"
+              onClick={() => updateAttributes({ width: null })}
+              className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-3 text-sm font-semibold text-white transition hover:bg-white/[0.08]"
+            >
+              Fit
+            </button>
+
+            <button
+              type="button"
+              onClick={deleteNode}
+              className="rounded-2xl border border-rose-300/20 bg-rose-400/10 px-4 py-3 text-sm font-semibold text-rose-100 transition hover:bg-rose-400/15"
+            >
+              Remove
+            </button>
+          </div>
+        </div>
+      ) : null}
+    </NodeViewWrapper>
+  )
+}
+
+const RichImage = Image.extend({
+  addOptions() {
+    return {
+      ...this.parent?.(),
+      HTMLAttributes: {
+        class: 'rich-image-node',
+      },
+    }
+  },
+
+  addAttributes() {
+    return {
+      ...this.parent?.(),
+      alt: {
+        default: '',
+      },
+      title: {
+        default: '',
+      },
+      caption: {
+        default: '',
+      },
+      width: {
+        default: null,
+        parseHTML: (element) => parsePixelValue(
+          element.getAttribute?.('data-width')
+          || element.getAttribute?.('width')
+          || element.style?.width
+          || '',
+        ),
+        renderHTML: (attributes) => {
+          const width = Number(attributes.width)
+
+          if (!Number.isFinite(width) || width <= 0) {
+            return {}
+          }
+
+          return {
+            'data-width': String(Math.round(width)),
+            style: `width:${Math.round(width)}px;max-width:100%;`,
+          }
+        },
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'figure[data-rich-image]',
+        getAttrs: (element) => readImageAttrs(element),
+      },
+      {
+        tag: 'img[src]',
+        getAttrs: (element) => readImageAttrs(element),
+      },
+    ]
+  },
+
+  renderHTML({ node, HTMLAttributes }) {
+    const {
+      src: _src,
+      alt: _alt,
+      title: _title,
+      caption: _caption,
+      width: _width,
+      'data-width': _dataWidth,
+      ...figureHTMLAttributes
+    } = HTMLAttributes
+
+    const figureAttributes = mergeAttributes(this.options.HTMLAttributes, figureHTMLAttributes, {
+      'data-rich-image': 'true',
+    })
+    const imageAttributes = {
+      src: node.attrs.src,
+      alt: node.attrs.alt || '',
+      title: node.attrs.title || '',
+      loading: 'lazy',
+      decoding: 'async',
+    }
+
+    if (Number.isFinite(Number(node.attrs.width)) && Number(node.attrs.width) > 0) {
+      const width = Math.round(Number(node.attrs.width))
+      imageAttributes.style = `width:${width}px;max-width:100%;`
+      imageAttributes['data-width'] = String(width)
+    }
+
+    const children = [
+      ['img', imageAttributes],
+    ]
+
+    if (node.attrs.caption) {
+      children.push(['figcaption', { class: 'rich-image-node__caption' }, node.attrs.caption])
+    }
+
+    return ['figure', figureAttributes, ...children]
+  },
+
+  addNodeView() {
+    return ReactNodeViewRenderer(RichImageNodeView)
+  },
+})
+
+export default RichImage

resources/js/components/forum/RichTableControls.jsx

@@ -0,0 +1,259 @@
+import React, { useCallback } from 'react'
+import { BubbleMenu } from '@tiptap/react/menus'
+
+function TableButton({ onClick, active = false, disabled = false, title, children }) {
+  return (
+    <button
+      type="button"
+      onMouseDown={(event) => {
+        event.preventDefault()
+      }}
+      onClick={onClick}
+      disabled={disabled}
+      title={title}
+      className={[
+        'inline-flex h-8 items-center justify-center rounded-lg px-2.5 text-[11px] font-semibold uppercase tracking-[0.14em] transition-colors',
+        'focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-400',
+        active
+          ? 'bg-sky-600/25 text-sky-300'
+          : 'text-zinc-400 hover:bg-white/[0.06] hover:text-zinc-200',
+        disabled && 'pointer-events-none opacity-30',
+      ].filter(Boolean).join(' ')}
+    >
+      {children}
+    </button>
+  )
+}
+
+export function TableInsertDialog({
+  open,
+  rows,
+  cols,
+  withHeaderRow,
+  withHeaderColumn,
+  onRowsChange,
+  onColsChange,
+  onHeaderRowChange,
+  onHeaderColumnChange,
+  onClose,
+  onInsert,
+}) {
+  if (!open) return null
+
+  return (
+    <div
+      className="fixed inset-0 z-[9999] flex items-center justify-center bg-[#04070dcc] px-4 backdrop-blur-md"
+      onClick={(event) => {
+        if (event.target === event.currentTarget) {
+          onClose?.()
+        }
+      }}
+      role="presentation"
+    >
+      <div className="w-full max-w-2xl overflow-hidden rounded-3xl border border-white/10 bg-[linear-gradient(180deg,rgba(16,22,34,0.98),rgba(8,12,19,0.98))] shadow-[0_30px_80px_rgba(0,0,0,0.55)]">
+        <div className="border-b border-white/[0.06] px-6 py-5">
+          <div className="text-[11px] font-semibold uppercase tracking-[0.24em] text-white/35">Table</div>
+          <h3 className="mt-2 text-lg font-semibold text-white">Insert table</h3>
+          <p className="mt-2 text-sm leading-6 text-white/65">Create a table and edit rows and columns directly in the editor.</p>
+        </div>
+
+        <div className="grid gap-4 px-6 py-5 md:grid-cols-2">
+          <label className="grid gap-2 text-sm text-slate-300">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Rows</span>
+            <input
+              type="number"
+              min="1"
+              max="12"
+              value={rows}
+              onChange={(event) => onRowsChange?.(Number.parseInt(event.target.value, 10) || 1)}
+              className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+            />
+          </label>
+
+          <label className="grid gap-2 text-sm text-slate-300">
+            <span className="text-[11px] font-semibold uppercase tracking-[0.16em] text-slate-500">Columns</span>
+            <input
+              type="number"
+              min="1"
+              max="12"
+              value={cols}
+              onChange={(event) => onColsChange?.(Number.parseInt(event.target.value, 10) || 1)}
+              className="rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-white outline-none"
+            />
+          </label>
+
+          <label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200 md:col-span-2">
+            <input
+              type="checkbox"
+              checked={withHeaderRow}
+              onChange={(event) => onHeaderRowChange?.(event.target.checked)}
+              className="mt-1"
+            />
+            <span>
+              <span className="block font-semibold text-white">Header row</span>
+              <span className="mt-1 block text-xs leading-5 text-slate-400">Use a header row for column labels.</span>
+            </span>
+          </label>
+
+          <label className="flex items-start gap-3 rounded-2xl border border-white/10 bg-black/20 px-4 py-3 text-sm text-slate-200 md:col-span-2">
+            <input
+              type="checkbox"
+              checked={withHeaderColumn}
+              onChange={(event) => onHeaderColumnChange?.(event.target.checked)}
+              className="mt-1"
+            />
+            <span>
+              <span className="block font-semibold text-white">Header column</span>
+              <span className="mt-1 block text-xs leading-5 text-slate-400">Use a header column for row labels.</span>
+            </span>
+          </label>
+        </div>
+
+        <div className="flex items-center justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
+          <button type="button" onClick={onClose} className="rounded-2xl border border-white/10 bg-white/[0.04] px-4 py-2.5 text-sm font-semibold text-white transition hover:bg-white/[0.08]">
+            Cancel
+          </button>
+          <button type="button" onClick={onInsert} className="rounded-2xl border border-sky-300/20 bg-sky-400/10 px-4 py-2.5 text-sm font-semibold text-sky-100 transition hover:bg-sky-400/15">
+            Insert table
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function RichTableControls({ editor }) {
+  const isTableActive = Boolean(editor?.isActive('table'))
+
+  const canRun = useCallback((commandName) => {
+    if (!editor) return false
+
+    try {
+      const chain = editor.can().chain().focus()
+      const next = typeof chain[commandName] === 'function' ? chain[commandName]() : null
+      return Boolean(next?.run?.())
+    } catch {
+      return false
+    }
+  }, [editor])
+
+  const runCommand = useCallback((commandName) => {
+    if (!editor) return
+
+    const chain = editor.chain().focus()
+    if (typeof chain[commandName] !== 'function') return
+
+    chain[commandName]().run()
+  }, [editor])
+
+  const deleteTable = useCallback(() => {
+    if (!editor) return
+
+    editor.chain().focus().deleteTable().run()
+  }, [editor])
+
+  const getActiveTable = useCallback(() => {
+    if (!editor) return null
+
+    const { state } = editor
+    const { $from } = state.selection
+
+    for (let depth = $from.depth; depth >= 0; depth -= 1) {
+      const node = $from.node(depth)
+      if (node?.type?.name !== 'table') {
+        continue
+      }
+
+      return {
+        node,
+        depth,
+        pos: $from.before(depth),
+      }
+    }
+
+    return null
+  }, [editor])
+
+  const moveTable = useCallback((direction) => {
+    if (!editor) return
+
+    const tableInfo = getActiveTable()
+    if (!tableInfo) return
+
+    const { state, view } = editor
+    const { doc } = state
+    const tableNode = tableInfo.node
+    const tablePos = tableInfo.pos
+    const tableSize = tableNode.nodeSize
+
+    let childPos = 1
+    let previous = null
+    let current = null
+    let next = null
+
+    for (let index = 0; index < doc.childCount; index += 1) {
+      const child = doc.child(index)
+      if (childPos === tablePos) {
+        current = { node: child, pos: childPos }
+        next = index + 1 < doc.childCount
+          ? { node: doc.child(index + 1), pos: childPos + child.nodeSize }
+          : null
+        break
+      }
+
+      previous = { node: child, pos: childPos }
+      childPos += child.nodeSize
+    }
+
+    if (!current) return
+
+    const tr = state.tr.delete(tablePos, tablePos + tableSize)
+    let insertPos = tablePos
+
+    if (direction === 'up') {
+      if (!previous) return
+      insertPos = previous.pos
+    } else if (direction === 'down') {
+      if (!next) return
+      insertPos = next.pos + next.node.nodeSize - tableSize
+    } else {
+      return
+    }
+
+    tr.insert(insertPos, tableNode.type.create(tableNode.attrs, tableNode.content, tableNode.marks))
+    view.dispatch(tr)
+    editor.chain().focus().setNodeSelection(insertPos).run()
+  }, [editor, getActiveTable])
+
+  if (!editor) return null
+
+  return (
+    <BubbleMenu
+      editor={editor}
+      shouldShow={({ editor: bubbleEditor }) => Boolean(bubbleEditor?.isActive('table'))}
+      tippyOptions={{
+        placement: 'top-start',
+        offset: [0, 12],
+        duration: 100,
+      }}
+      className="rich-table-toolbar"
+    >
+      <div className="flex flex-wrap items-center gap-2 rounded-2xl border border-sky-300/25 bg-[linear-gradient(180deg,rgba(12,18,29,0.98),rgba(6,10,16,0.98))] px-3 py-2 text-xs text-slate-400 shadow-[0_18px_50px_rgba(0,0,0,0.35)]">
+        <span className="rounded-full border border-white/10 bg-white/[0.04] px-3 py-1 font-semibold uppercase tracking-[0.16em] text-slate-300">Table tools</span>
+        <TableButton onClick={() => runCommand('addRowBefore')} disabled={!canRun('addRowBefore')} title="Add row before">Row +</TableButton>
+        <TableButton onClick={() => runCommand('addRowAfter')} disabled={!canRun('addRowAfter')} title="Add row after">Row +</TableButton>
+        <TableButton onClick={() => runCommand('deleteRow')} disabled={!canRun('deleteRow')} title="Delete row">Del row</TableButton>
+        <TableButton onClick={() => runCommand('addColumnBefore')} disabled={!canRun('addColumnBefore')} title="Add column before">Col +</TableButton>
+        <TableButton onClick={() => runCommand('addColumnAfter')} disabled={!canRun('addColumnAfter')} title="Add column after">Col +</TableButton>
+        <TableButton onClick={() => runCommand('deleteColumn')} disabled={!canRun('deleteColumn')} title="Delete column">Del col</TableButton>
+        <TableButton onClick={() => runCommand('mergeCells')} disabled={!canRun('mergeCells')} title="Merge selected cells">Merge</TableButton>
+        <TableButton onClick={() => runCommand('splitCell')} disabled={!canRun('splitCell')} title="Split selected cell">Split</TableButton>
+        <TableButton onClick={() => runCommand('toggleHeaderRow')} disabled={!canRun('toggleHeaderRow')} active={isTableActive} title="Toggle header row">Header row</TableButton>
+        <TableButton onClick={() => runCommand('toggleHeaderColumn')} disabled={!canRun('toggleHeaderColumn')} active={isTableActive} title="Toggle header column">Header col</TableButton>
+        <TableButton onClick={() => moveTable('up')} disabled={!getActiveTable()} title="Move table up">Move up</TableButton>
+        <TableButton onClick={() => moveTable('down')} disabled={!getActiveTable()} title="Move table down">Move down</TableButton>
+        <TableButton onClick={deleteTable} title="Delete table">Delete table</TableButton>
+      </div>
+    </BubbleMenu>
+  )
+}

resources/views/moderation/traffic/online.blade.php

@@ -0,0 +1,290 @@
+@extends('layouts.nova')
+
+@php
+    $initialPayload = [
+        'summary' => $summary,
+        'visitors' => $visitors,
+        'active_pages' => $activePages,
+        'generated_at' => $generatedAt,
+    ];
+@endphp
+
+@push('head')
+    <style>
+        body.page-moderation main { padding-top: 4rem; }
+    </style>
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            document.body.classList.add('page-moderation')
+        })
+    </script>
+@endpush
+
+@section('content')
+    <section class="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 py-6 sm:px-6 lg:px-8 text-zinc-100">
+        <div class="flex flex-col gap-4 rounded-3xl border border-white/10 bg-slate-950/70 p-6 shadow-2xl shadow-slate-950/40">
+            <div class="flex flex-col gap-3 lg:flex-row lg:items-end lg:justify-between">
+                <div>
+                    <div class="text-xs font-semibold uppercase tracking-[0.24em] text-cyan-300/80">Moderation Traffic</div>
+                    <h1 class="mt-2 text-3xl font-semibold text-white">Online Visitors</h1>
+                    <p class="mt-2 max-w-3xl text-sm text-zinc-300">Live view of logged users, guests, crawlers, AI bots, and suspicious traffic.</p>
+                </div>
+                <div class="flex flex-wrap items-center gap-3 text-sm text-zinc-400">
+                    <a href="{{ url('/moderation') }}" class="inline-flex items-center rounded-full border border-white/10 px-4 py-2 text-zinc-200 transition hover:border-cyan-300/40 hover:text-cyan-200">Back to moderation</a>
+                    <span id="online-generated-at" class="rounded-full border border-white/10 bg-white/5 px-4 py-2">Updated {{ $generatedAt }}</span>
+                </div>
+            </div>
+
+            <div id="online-summary" class="grid gap-3 sm:grid-cols-2 xl:grid-cols-7"></div>
+        </div>
+
+        <div class="grid gap-6 xl:grid-cols-[1.7fr_1fr]">
+            <div class="rounded-3xl border border-white/10 bg-slate-950/70 p-6 shadow-2xl shadow-slate-950/30">
+                <div class="flex flex-col gap-4 border-b border-white/10 pb-5 lg:flex-row lg:items-center lg:justify-between">
+                    <div>
+                        <h2 class="text-lg font-semibold text-white">Visitors</h2>
+                        <p class="mt-1 text-sm text-zinc-400">Filter the live table without leaving the page.</p>
+                    </div>
+                    <div id="visitor-filters" class="flex flex-wrap gap-2"></div>
+                </div>
+
+                <div class="mt-5 overflow-x-auto">
+                    <table class="min-w-full divide-y divide-white/10 text-sm">
+                        <thead class="text-left text-xs uppercase tracking-[0.18em] text-zinc-500">
+                            <tr>
+                                <th class="px-3 py-3 font-medium">Type</th>
+                                <th class="px-3 py-3 font-medium">User</th>
+                                <th class="px-3 py-3 font-medium">IP</th>
+                                <th class="px-3 py-3 font-medium">Bot / Browser</th>
+                                <th class="px-3 py-3 font-medium">Current URL</th>
+                                <th class="px-3 py-3 font-medium">Referer</th>
+                                <th class="px-3 py-3 font-medium">First Seen</th>
+                                <th class="px-3 py-3 font-medium">Last Seen</th>
+                                <th class="px-3 py-3 font-medium">Hits</th>
+                            </tr>
+                        </thead>
+                        <tbody id="online-visitors-table" class="divide-y divide-white/5 text-zinc-200"></tbody>
+                    </table>
+                </div>
+            </div>
+
+            <aside class="rounded-3xl border border-white/10 bg-slate-950/70 p-6 shadow-2xl shadow-slate-950/30">
+                <div class="flex items-center justify-between">
+                    <div>
+                        <h2 class="text-lg font-semibold text-white">Active Pages</h2>
+                        <p class="mt-1 text-sm text-zinc-400">Current URLs with live visitor counts.</p>
+                    </div>
+                </div>
+
+                <div id="online-active-pages" class="mt-5 space-y-3"></div>
+            </aside>
+        </div>
+    </section>
+
+    <script>
+        (() => {
+            const dataUrl = @json($dataUrl);
+            const initialState = @json($initialPayload);
+            const summaryContainer = document.getElementById('online-summary');
+            const filtersContainer = document.getElementById('visitor-filters');
+            const tableBody = document.getElementById('online-visitors-table');
+            const activePagesContainer = document.getElementById('online-active-pages');
+            const generatedAtContainer = document.getElementById('online-generated-at');
+            const dateFormatter = new Intl.DateTimeFormat(undefined, {
+                year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit', second: '2-digit'
+            });
+
+            const summaryCards = [
+                { key: 'total', label: 'Online now' },
+                { key: 'logged', label: 'Logged users' },
+                { key: 'guests', label: 'Guests' },
+                { key: 'bots', label: 'Bots' },
+                { key: 'search_bots', label: 'Search bots' },
+                { key: 'ai_bots', label: 'AI bots' },
+                { key: 'suspicious_bots', label: 'Suspicious' },
+            ];
+
+            const filterDefinitions = [
+                { key: 'all', label: 'All', matches: () => true },
+                { key: 'logged', label: 'Logged', matches: (visitor) => visitor.type === 'human_logged' },
+                { key: 'guests', label: 'Guests', matches: (visitor) => visitor.type === 'human_guest' },
+                { key: 'bots', label: 'Bots', matches: (visitor) => String(visitor.type || '').endsWith('_bot') },
+                { key: 'search_bot', label: 'Search bots', matches: (visitor) => visitor.type === 'search_bot' },
+                { key: 'ai_bot', label: 'AI bots', matches: (visitor) => visitor.type === 'ai_bot' },
+                { key: 'social_bot', label: 'Social bots', matches: (visitor) => visitor.type === 'social_bot' },
+                { key: 'seo_bot', label: 'SEO bots', matches: (visitor) => visitor.type === 'seo_bot' },
+                { key: 'suspicious_bot', label: 'Suspicious', matches: (visitor) => visitor.type === 'suspicious_bot' },
+            ];
+
+            const typeLabels = {
+                human_logged: 'Logged',
+                human_guest: 'Guest',
+                search_bot: 'Search Bot',
+                ai_bot: 'AI Bot',
+                social_bot: 'Social Bot',
+                seo_bot: 'SEO Bot',
+                monitoring_bot: 'Monitoring Bot',
+                suspicious_bot: 'Suspicious',
+                unknown_bot: 'Unknown Bot',
+            };
+
+            const typeClasses = {
+                human_logged: 'border-emerald-400/30 bg-emerald-400/10 text-emerald-200',
+                human_guest: 'border-sky-400/30 bg-sky-400/10 text-sky-200',
+                search_bot: 'border-indigo-400/30 bg-indigo-400/10 text-indigo-200',
+                ai_bot: 'border-fuchsia-400/30 bg-fuchsia-400/10 text-fuchsia-200',
+                social_bot: 'border-amber-400/30 bg-amber-400/10 text-amber-200',
+                seo_bot: 'border-orange-400/30 bg-orange-400/10 text-orange-200',
+                monitoring_bot: 'border-teal-400/30 bg-teal-400/10 text-teal-200',
+                suspicious_bot: 'border-rose-400/30 bg-rose-400/10 text-rose-200',
+                unknown_bot: 'border-zinc-400/30 bg-zinc-400/10 text-zinc-200',
+            };
+
+            let activeFilter = 'all';
+            let state = initialState;
+
+            function formatDate(value) {
+                if (!value) {
+                    return '—';
+                }
+
+                const parsed = new Date(value);
+                return Number.isNaN(parsed.getTime()) ? value : dateFormatter.format(parsed);
+            }
+
+            function escapeHtml(value) {
+                return String(value ?? '')
+                    .replaceAll('&', '&amp;')
+                    .replaceAll('<', '&lt;')
+                    .replaceAll('>', '&gt;')
+                    .replaceAll('"', '&quot;')
+                    .replaceAll("'", '&#039;');
+            }
+
+            function renderSummary() {
+                summaryContainer.innerHTML = summaryCards.map((card) => `
+                    <article class="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
+                        <div class="text-xs uppercase tracking-[0.18em] text-zinc-500">${card.label}</div>
+                        <div class="mt-3 text-3xl font-semibold text-white">${state.summary?.[card.key] ?? 0}</div>
+                    </article>
+                `).join('');
+            }
+
+            function renderFilters() {
+                filtersContainer.innerHTML = filterDefinitions.map((filter) => {
+                    const isActive = filter.key === activeFilter;
+                    return `<button type="button" data-filter="${filter.key}" class="rounded-full border px-3 py-1.5 text-sm transition ${isActive ? 'border-cyan-300/50 bg-cyan-300/10 text-cyan-100' : 'border-white/10 bg-white/[0.03] text-zinc-300 hover:border-white/20 hover:text-white'}">${filter.label}</button>`;
+                }).join('');
+
+                filtersContainer.querySelectorAll('[data-filter]').forEach((button) => {
+                    button.addEventListener('click', () => {
+                        activeFilter = button.getAttribute('data-filter') || 'all';
+                        renderFilters();
+                        renderVisitors();
+                    });
+                });
+            }
+
+            function filteredVisitors() {
+                const currentFilter = filterDefinitions.find((filter) => filter.key === activeFilter) || filterDefinitions[0];
+                return (state.visitors || []).filter(currentFilter.matches);
+            }
+
+            function renderVisitors() {
+                const visitors = filteredVisitors();
+
+                if (visitors.length === 0) {
+                    tableBody.innerHTML = '<tr><td colspan="9" class="px-3 py-8 text-center text-zinc-500">No visitors match the current filter.</td></tr>';
+                    return;
+                }
+
+                tableBody.innerHTML = visitors.map((visitor) => {
+                    const type = String(visitor.type || 'unknown_bot');
+                    const badgeClass = typeClasses[type] || typeClasses.unknown_bot;
+                    const badgeLabel = typeLabels[type] || 'Unknown';
+                    const agentLabel = visitor.bot_family || visitor.browser || 'Unknown';
+                    const userLabel = visitor.user_name || (type === 'human_guest' ? 'Guest visitor' : 'Anonymous');
+                    const currentUrl = visitor.current_url || '/';
+                    const referer = visitor.referer || '—';
+
+                    return `
+                        <tr class="align-top">
+                            <td class="px-3 py-4"><span class="inline-flex rounded-full border px-2.5 py-1 text-xs font-semibold ${badgeClass}">${badgeLabel}</span></td>
+                            <td class="px-3 py-4">
+                                <div class="font-medium text-white">${escapeHtml(userLabel)}</div>
+                                <div class="mt-1 text-xs text-zinc-500">${visitor.user_id ? `User #${escapeHtml(visitor.user_id)}` : 'No account'}</div>
+                            </td>
+                            <td class="px-3 py-4 font-mono text-xs text-zinc-300">${escapeHtml(visitor.ip_masked || 'unknown')}</td>
+                            <td class="px-3 py-4">
+                                <div class="font-medium text-white">${escapeHtml(agentLabel)}</div>
+                                <div class="mt-1 text-xs text-zinc-500">${escapeHtml(visitor.browser || 'Unknown')} · ${escapeHtml(visitor.platform || 'Unknown')}</div>
+                            </td>
+                            <td class="px-3 py-4">
+                                <a href="${escapeHtml(currentUrl)}" class="break-all text-cyan-200 hover:text-cyan-100 hover:underline">${escapeHtml(currentUrl)}</a>
+                                <div class="mt-1 text-xs text-zinc-500">${escapeHtml(visitor.route_name || 'No route name')}</div>
+                            </td>
+                            <td class="px-3 py-4 break-all text-zinc-400">${escapeHtml(referer)}</td>
+                            <td class="px-3 py-4 text-zinc-300">${escapeHtml(formatDate(visitor.first_seen_at))}</td>
+                            <td class="px-3 py-4 text-zinc-300">${escapeHtml(formatDate(visitor.last_seen_at))}</td>
+                            <td class="px-3 py-4 text-white">${escapeHtml(visitor.hits || 0)}</td>
+                        </tr>
+                    `;
+                }).join('');
+            }
+
+            function renderActivePages() {
+                const pages = state.active_pages || [];
+
+                if (pages.length === 0) {
+                    activePagesContainer.innerHTML = '<div class="rounded-2xl border border-dashed border-white/10 px-4 py-6 text-sm text-zinc-500">No active public pages recorded.</div>';
+                    return;
+                }
+
+                activePagesContainer.innerHTML = pages.map((page) => `
+                    <div class="rounded-2xl border border-white/10 bg-white/[0.03] px-4 py-3">
+                        <div class="flex items-start justify-between gap-3">
+                            <a href="${escapeHtml(page.url)}" class="break-all text-sm font-medium text-cyan-200 hover:text-cyan-100 hover:underline">${escapeHtml(page.url)}</a>
+                            <span class="rounded-full border border-white/10 bg-white/[0.06] px-2.5 py-1 text-xs text-zinc-300">${escapeHtml(page.visitors)} online</span>
+                        </div>
+                    </div>
+                `).join('');
+            }
+
+            function renderGeneratedAt() {
+                generatedAtContainer.textContent = `Updated ${formatDate(state.generated_at)}`;
+            }
+
+            async function loadOnlineVisitors() {
+                try {
+                    const response = await fetch(dataUrl, {
+                        headers: {
+                            'Accept': 'application/json',
+                            'X-Requested-With': 'XMLHttpRequest',
+                        },
+                        credentials: 'same-origin',
+                    });
+
+                    if (!response.ok) {
+                        return;
+                    }
+
+                    state = await response.json();
+                    renderAll();
+                } catch (_error) {
+                    // Keep the last rendered snapshot if polling fails.
+                }
+            }
+
+            function renderAll() {
+                renderSummary();
+                renderFilters();
+                renderVisitors();
+                renderActivePages();
+                renderGeneratedAt();
+            }
+
+            renderAll();
+            setInterval(loadOnlineVisitors, 10000);
+        })();
+    </script>
+@endsection