Function FeedbackModal

packages/shared/src/components/modals/FeedbackModal.tsx:44–367

({
  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);

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

  const handleScreenshotChange = useCallback(
    (file: File | null) => {
      // Revoke old preview URL
      if (screenshotPreview) {
        revokePreviewUrl(screenshotPreview);
      }

      if (!file) {
        setScreenshot(null);
        setScreenshotPreview(null);
        return;
      }

      // Validate file type
      if (!isValidImageType(file)) {
        displayToast('Invalid image type. Use PNG, JPG, WebP, or GIF.');
        return;
      }

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

      setScreenshot(file);