Function FeedbackModal

packages/shared/src/components/modals/FeedbackModal.tsx:48–408

({
  onRequestClose,
  ...props
}: FeedbackModalProps)

];

const FeedbackModal = ({
  onRequestClose,
  ...props
}: FeedbackModalProps): ReactElement => {
  const { displayToast } = useToastNotification();
  const { themeMode } = useSettingsContext();
  const fileInputRef = useRef<HTMLInputElement>(null);
  const hasSubmitted = useRef(false);

  const [category, setCategory] = useState<FeedbackCategory>(
    FeedbackCategory.BugReport,
  );
  const [description, setDescription] = useState('');
  const [screenshot, setScreenshot] = useState<File | null>(null);
  const [screenshotPreview, setScreenshotPreview] = useState<string | null>(
    null,
  );
  const [isCapturing, setIsCapturing] = useState(false);
  const [isCropping, setIsCropping] = useState(false);

  // Clean up preview URL when component unmounts or screenshot changes
  useEffect(() => {
    return () => {
      if (screenshotPreview) {
        revokePreviewUrl(screenshotPreview);
      }
    };
  }, [screenshotPreview]);

  // Validate the incoming file BEFORE revoking the current preview URL, so
  // a rejected replacement (or an oversized crop result) leaves the existing
  // attachment and its preview intact.
  const handleScreenshotChange = useCallback(
    (file: File | null) => {
      if (file && !isValidImageType(file)) {
        displayToast('Invalid image type. Use PNG, JPG, WebP, or GIF.');
        return;
      }

      if (file && !isValidFileSize(file)) {
        displayToast(
          `File too large. Maximum size is ${
            MAX_SCREENSHOT_SIZE / 1024 / 1024
          }MB.`,
        );
        return;
      }

      if (screenshotPreview) {
        revokePreviewUrl(screenshotPreview);
      }

      setIsCropping(false);
      setScreenshot(file);
      setScreenshotPreview(file ? createPreviewUrl(file) : null);
    },
    [screenshotPreview, displayToast],
  );