Merge branch '1033-add-move-fucntionality-to-the-box-header' into 'main'

  const containerRef = useRef<HTMLDivElement>(null)

  const handleMouseDown = useCallback(

    (e: React.MouseEvent<HTMLButtonElement>, mode: DragMode) => {

    (e: React.MouseEvent<HTMLElement> | MouseEvent, mode: DragMode) => {

      if (mode === null || !assessment) return

      e.preventDefault()

      dragStartRef.current = {

          assessment={assessment}

          pinned

          containerSize={size}

          onHeaderMouseDown={e => handleMouseDown(e, 'move')}

          moveActions={

            <ButtonGroup minimal>

              <Button

import { formattedText } from '@inject/shared'

import type { ReactNode } from '@tanstack/react-router'

import type { FC } from 'react'

import { useEffect, useRef } from 'react'

import type { PinAssessmentEventPayload } from './events'

import { PIN_ASSESSMENT_EVENT_TYPE } from './events'

  onPin?: () => void

  containerSize?: { width: number; height: number }

  moveActions?: ReactNode

  onHeaderMouseDown?: (e: React.MouseEvent<HTMLElement> | MouseEvent) => void

}

export const AssessmentResult: FC<AssessmentResultProps> = ({

  onPin,

  containerSize,

  moveActions,

  onHeaderMouseDown,

}) => {

  const { t } = useTranslationFrontend()

  const sectionRef = useRef<HTMLDivElement>(null)

  useEffect(() => {

    if (!pinned || !onHeaderMouseDown) return

    const header = sectionRef.current?.querySelector(

      '.bp5-section-header'

    ) as HTMLDivElement | null

    if (!header) return

    const handler = (e: MouseEvent) => {

      const target = e.target as HTMLElement | null

      // If im pressing button, turn off moving

      if (target?.closest('button, [role="button"]')) return

      onHeaderMouseDown(e)

    }

    header.addEventListener('mousedown', handler)

    return () => {

      header.removeEventListener('mousedown', handler)

    }

  }, [pinned, onHeaderMouseDown])

  return (

    <div ref={sectionRef}>

      <Section

        title={t('assessment.resultTitle')}

        compact

          )}

        </SectionCard>

      </Section>

    </div>

  )

}