ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/ImportGlossaryTerm.kt (1)

7-10: Verify if flag mutability is necessary.

The flag properties are declared as var, making them mutable after construction. If these properties don't need to be modified after the ImportGlossaryTerm is created, consider changing them to val for immutability and thread safety.

If mutability is not required, apply this diff:

   val term: String?,
   val description: String?,
   val translations: Map<String, String>,
-  var flagNonTranslatable: Boolean?,
-  var flagCaseSensitive: Boolean?,
-  var flagAbbreviation: Boolean?,
-  var flagForbiddenTerm: Boolean?,
+  val flagNonTranslatable: Boolean?,
+  val flagCaseSensitive: Boolean?,
+  val flagAbbreviation: Boolean?,
+  val flagForbiddenTerm: Boolean?,

ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/controllers/glossary/GlossaryImportController.kt (1)

52-54: Consider exposing CSV delimiter as an API parameter.

The CSV delimiter is currently hardcoded to comma (default in GlossaryImportService.importCsv). Consider adding an optional request parameter to support other delimiters (e.g., semicolon, tab) for broader CSV format compatibility.

Example enhancement:

   @RequestParam(name = "override_existing_terms", required = false, defaultValue = "false")
   overrideExistingTerms: Boolean,
+  @RequestParam(name = "delimiter", required = false, defaultValue = ",")
+  delimiter: String,
 ): GlossaryImportResult {
   val organization = organizationHolder.organization
   val glossary = glossaryService.get(organization.id, glossaryId)
   if (overrideExistingTerms) {
     glossaryTermService.deleteAllByGlossary(glossary)
   }

   val imported = file.inputStream.use { input ->
-    glossaryImportService.importCsv(glossary, input)
+    glossaryImportService.importCsv(glossary, input, delimiter.firstOrNull() ?: ',')
   }
   return GlossaryImportResult(imported)
 }

ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/controllers/glossary/GlossaryExportController.kt (1)

40-64: LGTM! Consider more explicit resource management.

The export implementation is correct and uses proper HTTP headers for CSV download. The streaming approach is efficient for large exports.

For more explicit resource management, consider using Kotlin's use for automatic stream closure even if exceptions occur:

   return ResponseEntity.ok().headers(headers).body(
     streamingResponseBodyProvider.createStreamingResponseBody { out: OutputStream ->
-      IOUtils.copy(stream, out)
-      stream.close()
-      out.close()
+      stream.use { input ->
+        IOUtils.copy(input, out)
+      }
     },
   )

Note: The OutputStream out is managed by Spring's streaming response framework and doesn't need explicit closing in the lambda.

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/GlossaryExportService.kt (1)

13-17: LGTM! Consider pagination for very large glossaries.

The export implementation is straightforward and correct. All terms are loaded into memory before CSV generation.

For organizations with very large glossaries (thousands of terms), loading all data at once could cause memory pressure. Consider implementing batch processing or streaming if performance issues arise in production. For typical use cases, the current approach should be sufficient.

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/out/GlossaryCSVExporter.kt (1)

15-16: Stabilize column order for language tags

Sets can be unordered; sort for consistent exports.

-    val languageTagsWithoutBaseLanguage by lazy { languageTags - glossary.baseLanguageTag }
+    val languageTagsWithoutBaseLanguage by lazy { (languageTags - glossary.baseLanguageTag).toList().sorted() }

Ensure tests (if any) expect the new deterministic order (sorted lexicographically).

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParser.kt (1)

14-17: Specify UTF‑8 and close the CSVReader/InputStream

Current code uses platform default charset and never closes the reader/input stream. Create the reader with UTF‑8 and close it within parse().

Suggested refactor inside parse():

fun parse(): List<ImportGlossaryTerm> {
  val csvParser = CSVParserBuilder().withSeparator(delimiter).build()
  InputStreamReader(input, StandardCharsets.UTF_8).use { isr ->
    CSVReaderBuilder(isr).withCSVParser(csvParser).build().use { csv ->
      val rawRows = csv.readAll()
      if (rawRows.isEmpty()) return emptyList()
      val headers = rawRows.first().map { it.trim() }
      val idxTerm = headers.indexOfFirst { it.equals("Term", ignoreCase = true) }.takeIf { it >= 0 }
      // ...compute other indices similarly...
      val specialHeaderIndices = listOfNotNull(idxTerm, /* ... */)
      val idxTranslations = (0 until headers.size).filter { it !in specialHeaderIndices }
      return rawRows.drop(1).mapNotNull { row ->
        // build ImportGlossaryTerm using safe access as above
      }
    }
  }
}

And add imports:

import java.io.InputStreamReader
import java.nio.charset.StandardCharsets

Confirm callers aren’t expected to close the InputStream themselves after parse(); with this refactor, parser takes ownership during parsing.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/out/GlossaryCSVExporter.kt (1)

28-39: Optimize translation lookups for better performance.

Each call to translations.find { it.languageTag == ... } is O(n). For glossaries with many terms and languages, this results in O(terms × languages × translations) complexity. Grouping translations into a map would reduce this to O(terms × languages).

Consider refactoring asColumns() to build a translation map once per term:

 fun GlossaryTerm.asColumns(): Array<String> {
+    val translationMap = translations.associateBy { it.languageTag }
     return arrayOf(
-        translations.find { it.languageTag == glossary.baseLanguageTag }?.text ?: "",
+        translationMap[glossary.baseLanguageTag]?.text ?: "",
         description,
         flagNonTranslatable.toString(),
         flagCaseSensitive.toString(),
         flagAbbreviation.toString(),
         flagForbiddenTerm.toString(),
     ) + languageTagsWithoutBaseLanguage.map { languageTag ->
-        translations.find { it.languageTag == languageTag }?.text ?: ""
+        translationMap[languageTag]?.text ?: ""
     }
 }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParser.kt (1)

76-83: Don't coerce unknown boolean tokens to false.

This issue was flagged in a previous review but remains unaddressed. Unrecognized values (e.g., typos like "tru" or invalid entries) are silently mapped to false, which can corrupt data. Return null for unknown values instead.

Apply this diff:

 private fun parseBoolean(value: String?): Boolean? {
     if (value.isNullOrBlank()) return null
     return when (value.trim().lowercase()) {
         "true", "1", "yes", "y", "t" -> true
         "false", "0", "no", "n", "f" -> false
-        else -> false
+        else -> null
     }
 }

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParser.kt (1)

70-74: Add negative index check for defensive programming.

While fixing findHeaderIndex prevents -1 from being passed, getSafe should defensively check both array bounds.

Apply this diff:

 fun Array<String>.getSafe(idx: Int?): String? {
     if (idx == null) return null
-    if (idx >= size) return null
+    if (idx < 0 || idx >= size) return null
     return this[idx]
 }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/out/GlossaryCSVExporter.kt (1)

28-39: Consider caching translation lookups in a map for better performance.

The repeated find calls (lines 30, 37) iterate through the translations collection for each language tag. For terms with many translations or glossaries with many languages, this becomes inefficient.

Apply this diff to optimize translation lookups:

 fun GlossaryTerm.asColumns(): Array<String> {
+    val translationMap = translations.associateBy { it.languageTag }
     return arrayOf(
-        translations.find { it.languageTag == glossary.baseLanguageTag }?.text ?: "",
+        translationMap[glossary.baseLanguageTag]?.text ?: "",
         description,
         flagNonTranslatable.toString(),
         flagCaseSensitive.toString(),
         flagAbbreviation.toString(),
         flagForbiddenTerm.toString(),
     ) + languageTagsWithoutBaseLanguage.map { languageTag ->
-        translations.find { it.languageTag == languageTag }?.text ?: ""
+        translationMap[languageTag]?.text ?: ""
     }
 }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParser.kt (1)

76-83: Don't coerce unrecognized boolean values to false.

This issue was previously flagged but remains unaddressed. Mapping unknown tokens to false (line 81) can silently corrupt data. Return null instead to surface the issue.

Apply this diff:

 private fun parseBoolean(value: String?): Boolean? {
     if (value.isNullOrBlank()) return null
     return when (value.trim().lowercase()) {
         "true", "1", "yes", "y", "t" -> true
         "false", "0", "no", "n", "f" -> false
-        else -> false
+        else -> null
     }
 }

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParser.kt (1)

70-74: Add negative index bounds check for complete safety.

While callers currently pass valid indices, a method named getSafe should defensively guard both bounds.

Apply this diff:

 fun Array<String>.getSafe(idx: Int?): String? {
     if (idx == null) return null
+    if (idx < 0) return null
     if (idx >= size) return null
     return this[idx]
 }

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/GlossaryImportService.kt (1)

54-56: Prevent duplicate base-language translations
You already add the base-language translation above, but the forEach copies every entry—including the base language again. With the unique constraint on (term_id, language_tag), this will explode as soon as the CSV contains a column for the base language. Skip glossary.baseLanguageTag here.

-    glossaryTerm.translations.forEach { (languageTag, text) ->
-      translations.add(GlossaryTermTranslation(languageTag, text).apply { term = this@applyFrom })
-    }
+    glossaryTerm.translations
+      .filterKeys { it != glossary.baseLanguageTag }
+      .forEach { (languageTag, text) ->
+        translations.add(GlossaryTermTranslation(languageTag, text).apply { term = this@applyFrom })
+      }

webapp/src/ee/glossary/hooks/useGlossaryTermCreateDialog.tsx (1)

15-18: Permission check is correct.

The permission check appropriately restricts term creation to users with OWNER or MAINTAINER roles, or admin users. This aligns with the glossary feature's access control requirements.

The permission check logic (['OWNER', 'MAINTAINER'].includes(...)) is duplicated in useGlossaryImportDialog. Consider extracting it into a shared helper like useCanManageGlossary() to reduce duplication:

// New shared hook
export const useCanManageGlossary = () => {
  const { preferredOrganization } = usePreferredOrganization();
  const isUserAdmin = useIsAdmin();
  
  return ['OWNER', 'MAINTAINER'].includes(
    preferredOrganization?.currentUserRole || ''
  ) || isUserAdmin;
};

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/controllers/glossary/GlossaryExportController.kt (1)

57-62: Don't close the servlet output stream.

Spring manages the lifecycle of the StreamingResponseBody output stream. Calling out.close() can trigger IllegalStateException when the container tries to close it again. Remove the explicit out.close() call and let Spring handle it.

Apply this diff to fix the issue:

     return ResponseEntity.ok().headers(headers).body(
       streamingResponseBodyProvider.createStreamingResponseBody { out: OutputStream ->
         stream.use { IOUtils.copy(stream, out) }
-        out.close()
       },
     )

webapp/src/component/common/ModeSelector.tsx (1)

42-76: Consider accessibility improvements for screen readers.

While the component is functional and keyboard-accessible via the Radio elements, the current structure has accessibility gaps:

1. The Radio button lacks a proper label association (no <label> wrapping or aria-labelledby).
2. The focusable element (Radio) doesn't match the visual clickable area (entire card), which can confuse users navigating by keyboard.
3. The description text is not programmatically associated with the radio button, so screen readers won't announce it as part of the option.

To improve accessibility, consider wrapping the content in a <label> element or using aria-labelledby and aria-describedby to associate the title and description with the Radio. For example:

<StyledRadioOption
  key={option.value}
  selected={value === option.value}
  onClick={() => onChange(option.value)}
  role="radio"
  aria-checked={value === option.value}
  tabIndex={0}
  onKeyDown={(e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      onChange(option.value);
    }
  }}
>
  <Box display="flex" flexDirection="column" width="100%">
    <Box
      display="flex"
      justifyContent="space-between"
      alignItems="center"
      mb={0.5}
    >
      <Typography variant="body1" fontWeight={500} id={`option-title-${option.value}`}>
        {option.title}
      </Typography>
      <Radio
        checked={value === option.value}
        data-cy={option.dataCy}
        size="small"
        sx={{ padding: 0.5, pointerEvents: 'none' }}
        aria-hidden="true"
      />
    </Box>
    <Typography variant="body2" color="text.secondary" id={`option-desc-${option.value}`}>
      {option.description}
    </Typography>
  </Box>
</StyledRadioOption>

This approach makes the entire card focusable and keyboard-navigable while ensuring screen readers properly announce the option's title and description.

webapp/src/ee/glossary/hooks/useGlossaryTermCreateDialog.tsx (2)

27-33: Consider simplifying the dialog rendering logic.

The createTermDialog is only rendered when isOpen is true (which means createTermDialogOpen is true), yet the dialog still receives open={createTermDialogOpen}. This prop is redundant at this point.

Consider simplifying to:

 const createTermDialog = isOpen && (
   <GlossaryTermCreateDialog
-    open={createTermDialogOpen}
+    open={true}
     onClose={() => setCreateTermDialogOpen(false)}
     onFinished={() => setCreateTermDialogOpen(false)}
   />
 );

Or if the Dialog component defaults open to true, you could omit it entirely.

---

35-39: Consider renaming the return value for clarity.

The returned createTermDialogOpen property contains the computed isOpen value (which combines dialog state with permissions), not the raw createTermDialogOpen state. This naming could be confusing for consumers who might expect it to reflect only the dialog state.

Consider renaming to better reflect what it represents:

 return {
   onCreateTerm: canCreate ? onCreateTerm : undefined,
-  createTermDialogOpen: isOpen,
+  isDialogOpen: isOpen,
   createTermDialog,
 };

Or alternatively, return both the raw state and permission check:

 return {
   onCreateTerm: canCreate ? onCreateTerm : undefined,
-  createTermDialogOpen: isOpen,
+  createTermDialogOpen,
+  canCreate,
   createTermDialog,
 };

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParser.kt (1)

83-89: Don’t coerce unknown boolean tokens to false

Treating any unrecognized value as false silently corrupts data—for example, an invalid translatable token becomes “non-translatable” on import. Keep known true/false mappings, but return null for everything else so callers can detect the missing/invalid flag.

Recommended change:

   private fun parseBoolean(value: String?): Boolean? {
     if (value.isNullOrBlank()) return null
     return when (value.trim().lowercase()) {
       "true", "1", "yes", "y", "t" -> true
       "false", "0", "no", "n", "f" -> false
-      else -> false
+      else -> null
     }
   }

webapp/src/views/projects/export/downloadExported.ts (1)

30-39: Consider more robust Content-Disposition parsing.

The current regex pattern assumes the header value ends with a quoted filename and doesn't handle edge cases like:

• Unquoted filenames (valid per RFC 6266)
• filename* parameter (UTF-8 encoded filenames)
• Missing filename attribute

While the fallback to format.extension provides resilience, consider using a more comprehensive parser or library for Content-Disposition headers.

Example improvement:

const parseExtension = (response: Response) => {
  const contentDisposition = response.headers.get('Content-Disposition');
  if (contentDisposition) {
    // Try filename* first (RFC 5987), then filename
    const filenameMatch = /filename\*?="?([^";\n]*)"?/i.exec(contentDisposition);
    if (filenameMatch) {
      const filename = filenameMatch[1];
      const extensionMatch = /\.(\w+)$/.exec(filename);
      if (extensionMatch) {
        return extensionMatch[1];
      }
    }
  }
  return null;
};

ee/backend/tests/src/test/kotlin/io/tolgee/ee/service/glossary/formats/csv/in/GlossaryCSVParserTest.kt (1)

134-161: Update expectations for invalid boolean tokens

After the parser stops coercing unknown tokens to false, the fourth row in this test should no longer assert negative flags. Please switch the expectations for Term4 to check that the flags remain unset (e.g., hasNoFlags() or explicit null checks).

webapp/src/ee/glossary/views/GlossaryTermCreateDialog.tsx (1)

7-7: Remove unused import.

The usePreferredOrganization import is no longer used after switching to derive organization context from glossary.organizationOwner.id.

Apply this diff:

-import { usePreferredOrganization } from 'tg.globalContext/helpers';

webapp/src/views/projects/import/component/ImportFileDropzone.tsx (1)

91-97: Good: prevent default on drag over; consider more robust drag depth handling

The onDragOver guard is correct. To avoid drag state flicker from child enter/leave, consider a drag depth counter (as suggested for DragDropArea) instead of comparing event targets.

If aligning with DragDropArea, you can:

• increment depth on dragEnter, decrement on dragLeave;
• set active when depth > 0;
• reset to 0 on drop.

Also applies to: 128-128

webapp/src/ee/glossary/hooks/useGlossaryImportDialog.tsx (1)

36-41: Expose canImport for consumers; clarify return shape

Returning onImport as undefined requires consumers to null-check. Expose a boolean for simpler usage and consider naming the open flag consistently.

Apply:

   return {
-    onImport: canImport ? onImport : undefined,
-    importDialogOpen: isOpen,
-    importDialog,
+    canImport,
+    onImport: canImport ? onImport : undefined,
+    isOpen,
+    importDialog,
   };

webapp/src/ee/glossary/components/GlossaryImportDialog.tsx (1)

44-44: Replace deprecated React.VFC with React.FC.

React.VFC was removed in React 18. Use React.FC instead.

Apply this diff:

-export const GlossaryImportDialog: React.VFC<Props> = ({
+export const GlossaryImportDialog: React.FC<Props> = ({

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

webapp/src/service/apiSchema.generated.ts (1)

8721-8747: Fix export response media type

The export endpoint still advertises "application/json" for its 200 response even though it streams a CSV file. Client SDKs generated from this schema will try to JSON‑decode the CSV stream and fail. Please declare the real media type (e.g. "text/csv" or another appropriate non‑JSON type) for the success response.

-      200: {
-        content: {
-          "application/json": components["schemas"]["StreamingResponseBody"];
-        };
-      };
+      200: {
+        content: {
+          "text/csv": components["schemas"]["StreamingResponseBody"];
+        };
+      };

e2e/cypress/support/dataCyType.d.ts (1)

335-341: Unused glossary-import-mode selectors remain unresolved.

The previous review identified that glossary-import-mode-add and glossary-import-mode-replace are unused in the UI. Since this PR is still in draft, either:

1. Add the corresponding data-cy attributes to the import mode controls in the UI
2. Remove these declarations if the mode selection UI won't be implemented

Verify if the other glossary selectors are used:

#!/bin/bash
# Description: Verify usage of glossary export/import selectors (excluding mode selectors already flagged)

echo "Checking usage of glossary import/export selectors..."
for selector in "glossary-export-button" "glossary-import-button" "glossary-import-cancel-button" "glossary-import-dialog" "glossary-import-submit-button"; do
  echo "---"
  echo "Searching for: $selector"
  rg -n "data-cy=['\"]$selector['\"]" -g '*.{ts,tsx,js,jsx}' || echo "  No matches found"
done

webapp/src/component/common/SingleFileDropzone.tsx (1)

5-11: Minor typing/readability nits

• Prefer a SingleFile alias (FilesType[number]) over FilesType[0].
• Use nullish coalescing for brevity: onFileSelect(newFiles[0] ?? null).

+type SingleFile = FilesType[number];
 export type SingleFileDropzoneProps = Omit<
   FileDropzoneProps,
   'files' | 'onFilesSelect' | 'maxFiles'
 > & {
-  file: FilesType[0] | null;
-  onFileSelect: (file: FilesType[0] | null) => void;
+  file: SingleFile | null;
+  onFileSelect: (file: SingleFile | null) => void;
 };
@@
-  const handleFilesSelect = (newFiles: FilesType) => {
-    onFileSelect(newFiles.length > 0 ? newFiles[0] : null);
-  };
+  const handleFilesSelect = (newFiles: FilesType) => {
+    onFileSelect(newFiles[0] ?? null);
+  };

Also applies to: 20-22

webapp/src/component/common/DragDropArea.tsx (2)

71-101: Stabilize drag state with a depth counter; reset on drop

Target equality is fragile and can flicker. Track depth and reset reliably.

-  const [dragOver, setDragOver] = useState<null | 'valid' | 'invalid'>(null);
-  const [dragEnterTarget, setDragEnterTarget] = useState<EventTarget | null>(
-    null
-  );
+  const [dragOver, setDragOver] = useState<null | 'valid' | 'invalid'>(null);
+  const [dragDepth, setDragDepth] = useState(0);
@@
-  const handleDragEnter = (e: React.DragEvent) => {
-    if (!active) return;
+  const handleDragEnter = (e: React.DragEvent) => {
+    if (!active) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    setDragEnterTarget(e.target);
+    setDragDepth((d) => d + 1);
@@
-  const handleDragLeave = (e: React.DragEvent) => {
-    if (!active) return;
+  const handleDragLeave = (e: React.DragEvent) => {
+    if (!active) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
-    if (e.target === dragEnterTarget) {
-      setDragOver(null);
-      setDragEnterTarget(null);
-    }
+    setDragDepth((d) => Math.max(0, d - 1));
+    if (dragDepth <= 1) setDragOver(null);
   };
@@
-  const handleDrop = async (e: React.DragEvent) => {
-    if (!active) return;
+  const handleDrop = async (e: React.DragEvent) => {
+    if (!active) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
     e.preventDefault();
     e.stopPropagation();
@@
     onFilesReceived(files);
     setDragOver(null);
-    setDragEnterTarget(null);
+    setDragDepth(0);
   };

Also applies to: 108-117

---

122-160: Add basic keyboard/ARIA support and prevent default when inactive

Make the surface operable via keyboard and non-destructive when disabled.

   return (
-    <Box
+    <Box
       position="relative"
       overflow="visible"
-      onClick={onClick}
+      onClick={onClick}
+      role={onClick ? 'button' : undefined}
+      tabIndex={onClick ? 0 : -1}
+      aria-disabled={!active || undefined}
+      onKeyDown={(e) => {
+        if (!onClick) return;
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick();
+        }
+      }}
       data-cy={dataCy}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
     >

webapp/src/component/common/FileDropzone.tsx (1)

86-92: Reset file input after selection to allow re-selecting the same file

Without clearing the input value, choosing the same file again will not trigger onChange.

Apply this diff:

   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFiles = e.target.files;
     if (selectedFiles && selectedFiles.length > 0) {
       const fileArray = Array.from(selectedFiles);
       handleFilesReceived(fileArray.map((f) => ({ file: f, name: f.name })));
+      e.currentTarget.value = '';
     }
   };

ee/backend/app/src/main/kotlin/io/tolgee/ee/api/v2/controllers/glossary/GlossaryImportController.kt (2)

32-45: Consider clarifying the unused path parameter.

The organizationId path parameter is declared but never used. Instead, the code correctly uses organizationHolder.organization.id (line 47), which is the right approach for security—it ensures users can only import into their own organization's glossaries. However, having the unused parameter in the path can be confusing for API consumers who might expect it to be validated or used.

Consider either:

• Removing organizationId from the path if it's not semantically necessary for the API design
• Or keeping it for REST convention but adding a comment explaining why it's not directly used (authentication context takes precedence)

---

46-56: Solid implementation with proper resource management.

The method body correctly:

• Uses authenticated organization context for security
• Ensures atomic delete+import via @Transactional
• Manages file input stream with Kotlin's use{} (try-with-resources equivalent)

Optional improvements:

• Consider adding explicit validation that the file is not empty before processing
• Document the expected CSV format in the @Operation annotation or API docs
• For better UX, consider returning more detailed results (e.g., rows skipped, validation errors) instead of just the imported count

webapp/src/component/common/FileDropzoneSelectedFile.tsx (2)

45-53: Add accessible name to remove button

Provide aria-label so screen readers announce the action.

-      <IconButton
+      <IconButton
         size="small"
         onClick={(e) => {
           e.stopPropagation();
           onRemove?.();
         }}
+        aria-label={`Remove ${file.name}`}
         data-cy={`file-dropzone-remove-button`}
       >

---

42-44: Expose full filename on hover

Long names may be truncated; add title for discoverability.

-      <Typography variant="body2" sx={{ flex: 1 }}>
+      <Typography variant="body2" sx={{ flex: 1 }} title={file.name}>
         {file.name}
       </Typography>

webapp/src/views/projects/import/component/ImportFileInput.tsx (3)

193-199: Use native click() instead of dispatchEvent

click() is simpler and more reliable for file inputs.

-              <Button
-                onClick={() =>
-                  fileRef.current?.dispatchEvent(new MouseEvent('click'))
-                }
+              <Button
+                onClick={() => fileRef.current?.click()}
                 variant="outlined"
                 color="primary"
               >

---

153-158: Optional: Make the whole drop area open the picker on click

Improves UX; consistent with other dropzones.

-    <DragDropArea
-      onFilesReceived={onNewFiles}
-      data-cy="dropzone"
-      active={!props.isProgressOverlayActive}
-      maxItems={MAX_FILE_COUNT}
-    >
+    <DragDropArea
+      onFilesReceived={onNewFiles}
+      data-cy="dropzone"
+      active={!props.isProgressOverlayActive}
+      maxItems={MAX_FILE_COUNT}
+      onClick={() => fileRef.current?.click()}
+    >

---

151-187: Scope TS suppression to the non-standard attribute, not the whole return

Avoid broad @ts-ignore; annotate just the input element for webkitdirectory.

-  /* @ts-ignore */
   return (
@@
-              <input
+              {/* @ts-expect-error: non-standard attribute not in React types */}
+              <input
                 key={resetKey}
                 data-cy={'import-file-input'}
                 type="file"
                 style={{ display: 'none' }}
                 ref={fileRef}
                 onChange={(e) => onFileSelected(e)}
                 multiple
                 webkitdirectory
               />

webapp/src/views/projects/translations/Screenshots/ScreenshotDropzone.tsx (1)

31-38: Remove no-op onClick

Unnecessary handler; omit to reduce noise.

-    <DragDropArea
-      onFilesReceived={validateAndUpload}
-      onClick={() => {}}
+    <DragDropArea
+      onFilesReceived={validateAndUpload}

webapp/src/views/projects/translations/Screenshots/useScreenshotUpload.tsx (2)

127-129: Use native click() instead of dispatchEvent

Simpler and consistent with other places.

-  function openFiles() {
-    fileRef.current?.dispatchEvent(new MouseEvent('click'));
-  }
+  function openFiles() {
+    fileRef.current?.click();
+  }

---

85-93: Avoid as any if API typing allows File/Blob

If the OpenAPI types accept File/Blob, drop the cast.

-                  screenshot: file.file as any,
+                  screenshot: file.file,

webapp/src/component/common/FileDropzone.tsx (3)

58-69: Document or validate extension format assumption

The code assumes extension includes the leading dot (e.g., ".csv"):

• Line 60 uses endsWith(config.extension), which would incorrectly match if the dot is missing (e.g., extension "sv" would match filename "data.asv")
• Line 128 passes extensions to the accept attribute, which per HTML spec requires a leading dot for extension-based file types

Consider adding TypeScript branding, JSDoc, or runtime validation to ensure extensions are properly formatted.

Example validation in the component:

  const findFileType = (fileName: string) =>
    acceptedFileTypes.find((config) =>
      fileName.toLowerCase().endsWith(config.extension.toLowerCase())
    );
+
+ // Validate extensions format on mount (development only)
+ if (process.env.NODE_ENV === 'development') {
+   acceptedFileTypes.forEach((fileType) => {
+     if (!fileType.extension.startsWith('.')) {
+       console.warn(
+         `FileDropzone: extension "${fileType.extension}" should start with a dot`
+       );
+     }
+   });
+ }

---

71-84: Consider notifying users when files exceed the limit

Line 81 silently truncates files beyond maxFiles. If a user drags 5 files but maxFiles is 1, only the first file is kept without notification, which may be confusing.

Optional enhancement:

  const handleFilesReceived = (receivedFiles: FilesType) => {
    const validFiles = receivedFiles.filter((receivedFile) => {
      if (!isValidFileType(receivedFile.name)) {
        messageService.error(<T keyName="error_message_invalid_file_type" />);
        return false;
      }
      return true;
    });

    if (validFiles.length > 0) {
      const newFiles = [...files, ...validFiles].slice(0, maxFiles);
+     const droppedCount = files.length + validFiles.length - newFiles.length;
+     if (droppedCount > 0) {
+       messageService.error(
+         <T keyName="error_message_too_many_files" params={{ count: droppedCount }} />
+       );
+     }
      onFilesSelect(newFiles);
    }
  };

---

33-36: Consider stronger typing for icon component

The icon property uses React.ComponentType<any>, which sacrifices type safety. If all icons share a common interface (e.g., MUI's SvgIconComponent or a custom IconProps), consider using that type instead.

Example:

+import { SvgIconComponent } from '@mui/material';
+
 export type FileType = {
   extension: string;
-  icon: React.ComponentType<any>;
+  icon: SvgIconComponent;
 };

Note: Only apply this if the icon components conform to SvgIconComponent. Otherwise, you could define a minimal shared interface.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

webapp/src/component/common/FileDropzone.tsx (1)

85-91: Reset file input after selection to allow re-selecting the same file

Without clearing the input value, choosing the same file again won’t trigger onChange.

Apply:

   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selectedFiles = e.target.files;
     if (selectedFiles && selectedFiles.length > 0) {
       const fileArray = Array.from(selectedFiles);
       handleFilesReceived(fileArray.map((f) => ({ file: f, name: f.name })));
+      // allow selecting the same file again
+      e.currentTarget.value = '';
     }
   };

webapp/src/fixtures/useOnFilePaste.ts (1)

6-18: Consider simplifying the file collection logic.

The manual loop through clipboardData.files can be simplified using Array.from() for cleaner code.

Apply this diff to simplify the implementation:

 const pasteListener = (e: ClipboardEvent) => {
-  const files: File[] = [];
   if (!e.clipboardData?.files.length) {
     return;
   }
-  for (let i = 0; i < e.clipboardData.files.length; i++) {
-    const item = e.clipboardData.files.item(i);
-    if (item) {
-      files.push(item);
-    }
-  }
+  const files = Array.from(e.clipboardData.files);
   onFilePaste(files.map((f) => ({ file: f, name: f.name })));
 };

webapp/src/component/common/FileDropzone.tsx (1)

110-119: Accessibility: add aria-label to remove button (in FileDropzoneSelectedFile)

The remove IconButton lives in FileDropzoneSelectedFile and lacks an aria-label. Add an accessible label using the file name.

Proposed change in webapp/src/component/common/FileDropzoneSelectedFile.tsx:

-      <IconButton
+      <IconButton
         size="small"
         onClick={(e) => {
           e.stopPropagation();
           onRemove?.();
         }}
         data-cy={`file-dropzone-remove-button`}
+        aria-label={`Remove ${file.name}`}
       >

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

backend/data/src/main/kotlin/io/tolgee/constants/Message.kt (1)

312-312: LGTM! Consider grouping with related constants.

The new FILE_PROCESSING_FAILED constant is correctly added and follows the enum's naming convention. It aligns well with the PR's glossary import/export functionality.

For improved organization, you might consider positioning it near related file/import error constants like CANNOT_PARSE_FILE (line 68), IMPORT_FAILED (line 221), or NO_DATA_TO_IMPORT (line 223), though placing it at the end is also acceptable as it minimizes merge conflicts.

webapp/src/fixtures/useOnFilePaste.ts (1)

11-16: Consider simplifying the FileList iteration.

The standard for-loop works correctly, but you could simplify it using modern array methods.

Apply this diff for a more concise implementation:

-      for (let i = 0; i < e.clipboardData.files.length; i++) {
-        const item = e.clipboardData.files.item(i);
-        if (item) {
-          files.push(item);
-        }
-      }
-      onFilePaste(files.map((f) => ({ file: f, name: f.name })));
+      const clipboardFiles = Array.from(e.clipboardData.files);
+      onFilePaste(clipboardFiles.map((f) => ({ file: f, name: f.name })));

This eliminates the need for the temporary files array and the null check, since Array.from() handles the FileList conversion cleanly.

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

webapp/src/ee/billing/Invoices/DownloadButton.tsx (1)

37-37: Remove unnecessary double type cast.

The res.blob() method already returns a Promise<Blob>, so the double cast as any as Blob is unnecessary.

Apply this diff:

-          const url = URL.createObjectURL(data as any as Blob);
+          const url = URL.createObjectURL(data);

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

webapp/src/service/apiSchema.generated.ts (1)

8723-8752: Fix export response media type

GET /v2/organizations/{organizationId}/glossaries/{glossaryId}/export returns a CSV stream, but the schema still advertises "application/json" with StreamingResponseBody. Any generated client will try to JSON-decode the stream and crash at runtime. Please expose the real media type (e.g. "text/csv" or the exact type you stream) so clients handle it correctly.

webapp/src/component/common/DragDropArea.tsx (2)

70-72: Drag state tracking via event target is fragile.

The dragEnterTarget comparison on line 94 can cause flickering when dragging over child elements. A drag depth counter would be more reliable.

This issue was raised in a previous review. As per the past comment, replace dragEnterTarget with a dragCounter (number) that increments on dragenter and decrements on dragleave, setting dragOver when the counter is positive.

Also applies to: 94-97

---

120-159: Missing keyboard accessibility for the drop area.

The drop zone lacks keyboard navigation support. Users who cannot use a mouse cannot activate the file picker or interact with the drop area.

This issue was raised in a previous review. As per the past comment, add:

• role="button" or appropriate ARIA role
• tabIndex={0} to make it focusable
• onKeyDown handler to activate onClick on Enter/Space
• Consider adding visual focus indicators

Apply this diff:

     <Box
       position="relative"
       overflow="visible"
       onClick={onClick}
       data-cy="dropzone"
+      role="button"
+      tabIndex={onClick ? 0 : undefined}
+      onKeyDown={(e) => {
+        if (onClick && (e.key === 'Enter' || e.key === ' ')) {
+          e.preventDefault();
+          onClick();
+        }
+      }}
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
     >

backend/data/src/main/kotlin/io/tolgee/util/CsvDelimiterDetector.kt (1)

12-21: Consider handling quoted strings in delimiter detection.

The current heuristic counts delimiter occurrences in the header line, which can be misled by delimiters inside quoted values. For example, a CSV with header "Name","Description,with,comma","Value" would count 4 commas as field separators when only 2 are actual delimiters.

While the simple heuristic works for typical well-formed CSVs, consider enhancing the logic to respect quoted strings for more robust delimiter detection.

webapp/src/views/projects/translations/Screenshots/ScreenshotDropzone.tsx (1)

33-33: Address empty onClick in ScreenshotDropzone
ScreenshotDropzone.tsx:33 sets onClick={() => {}}, which is a no-op. Either remove this prop to disable clicks or implement a file-picker trigger (e.g. use a hidden <input> and call inputRef.current?.click(), as in webapp/src/component/common/FileDropzone.tsx).

e2e/cypress/e2e/glossary/importExport.cy.ts (5)

5-7: Remove unused imports to satisfy lints.

E2GlossariesView and E2GlossaryCreateEditDialog are unused. Clean them up to fix static warnings.

-import { E2GlossariesView } from '../../compounds/glossaries/E2GlossariesView';
 import { E2GlossaryView } from '../../compounds/glossaries/E2GlossaryView';
-import { E2GlossaryCreateEditDialog } from '../../compounds/glossaries/E2GlossaryCreateEditDialog';

---

23-38: Wait on the import API for determinism.

Add an intercept and assert 200 before DOM checks to reduce flakiness.

   it('imports into an empty glossary', () => {
     login('Owner');
     const view = new E2GlossaryView();
     view.findAndVisit(data, 'Owner', 'Empty Glossary');

+    cy.intercept('POST', '/v2/organizations/**/glossaries/**/import').as(
+      'importGlossary'
+    );
     const importDialog = view.openImportDialogWhenGlossaryIsEmpty();
     importDialog.selectFile('glossary/import_basic.csv');
     importDialog.submit();
+    cy.wait('@importGlossary').its('response.statusCode').should('eq', 200);

     gcy('glossary-term-list-item')
       .filter(':contains("Imported Term One")')
       .should('be.visible');
     gcy('glossary-term-list-item')
       .filter(':contains("Imported Term Two")')
       .should('be.visible');
   });

---

45-55: Replace mode: wait on import and scope the negative assertion.

• Wait for POST /import to complete.
• Scope “A.B.C Inc” assertion to the term list to avoid false positives.

     const importDialog = view.openImportDialog();
+    cy.intercept('POST', '/v2/organizations/**/glossaries/**/import').as(
+      'importGlossary'
+    );
     importDialog.selectFile('glossary/import_basic.csv');
     importDialog.chooseReplace();
     importDialog.submit();
+    cy.wait('@importGlossary').its('response.statusCode').should('eq', 200);

     gcy('glossary-term-list-item')
       .filter(':contains("Imported Term One")')
       .should('be.visible');

-    cy.contains('A.B.C Inc').should('not.exist');
+    gcy('glossary-term-list-item')
+      .filter(':contains("A.B.C Inc")')
+      .should('not.exist');

---

62-72: Add mode: wait on import and scope the positive assertion.

Make the check deterministic and scoped.

     const importDialog = view.openImportDialog();
+    cy.intercept('POST', '/v2/organizations/**/glossaries/**/import').as(
+      'importGlossary'
+    );
     importDialog.selectFile('glossary/import_basic.csv');
     importDialog.chooseAdd();
     importDialog.submit();
+    cy.wait('@importGlossary').its('response.statusCode').should('eq', 200);

     gcy('glossary-term-list-item')
       .filter(':contains("Imported Term One")')
       .should('be.visible');

-    cy.contains('A.B.C Inc').should('be.visible');
+    gcy('glossary-term-list-item')
+      .filter(':contains("A.B.C Inc")')
+      .should('be.visible');

---

79-91: Strengthen export assertions.

Also assert content-type is CSV and content-disposition includes attachment.

     cy.wait('@exportGlossary').then(({ response }) => {
       expect(response?.statusCode).to.eq(200);
       const disp = response?.headers?.['content-disposition'] as string;
       expect(disp).to.exist;
       expect(disp).to.include('.csv');
+      expect(response?.headers?.['content-type']).to.contain('text/csv');
+      expect(disp).to.match(/attachment/i);
     });

e2e/cypress/compounds/glossaries/E2GlossaryImportDialog.ts (2)

1-2: Register cypress-file-upload in support for global availability.

Importing the plugin per component works but scatters side-effects and types. Prefer adding it once in Cypress support (e.g., cypress/support/e2e.ts or commands.ts) and remove local imports.

Based on learnings

---

26-29: Offer helper to submit and wait on network alias.

To reduce duplication in tests, add a submit helper that waits on an alias (e.g., @importGlossary) before asserting dialog close.

Example:

submitAndWaitFor(alias = 'importGlossary') {
  gcy('glossary-import-submit-button').click();
  cy.wait(`@${alias}`).its('response.statusCode').should('eq', 200);
  gcy('glossary-import-dialog').should('not.exist');
}

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

e2e/cypress/support/dataCyType.d.ts (1)

335-341: Verify usage of glossary import/export selectors in UI components.

The seven glossary import/export selectors are correctly formatted and follow naming conventions. However, previous review comments flagged glossary-import-mode-add and glossary-import-mode-replace as unused. Confirm all selectors are now properly used in the UI components.

Run the following script to verify usage:

#!/bin/bash
# Description: Verify all glossary import/export selectors are used in UI components

echo "Checking usage of glossary import/export selectors..."
for selector in "glossary-export-button" "glossary-import-button" "glossary-import-cancel-button" "glossary-import-dialog" "glossary-import-mode-add" "glossary-import-mode-replace" "glossary-import-submit-button"; do
  echo "---"
  echo "Searching for: $selector"
  rg -n "data-cy=['\"\`]$selector['\"\`]" -g '*.{ts,tsx,js,jsx}' || echo "  No matches found"
done

webapp/src/service/apiSchema.generated.ts (1)

8724-8726: Fix the export media type declaration

The export endpoint still claims the 200 response is "application/json", but the backend streams CSV. Generated clients will try to decode CSV as JSON and fail. Change the response content type to the actual CSV media type (e.g. "text/csv").

e2e/cypress/compounds/glossaries/E2GlossaryImportDialog.ts (2)

2-2: Prefer Cypress built-in .selectFile() over the plugin.

The cypress-file-upload plugin is 4+ years old. Cypress 9.3+ includes a built-in .selectFile() command that provides similar functionality and is actively maintained. Consider migrating to the built-in command for better long-term support.

Based on learnings

---

5-10: Consider using Cypress built-in .selectFile() for better maintainability.

While the current implementation works, the built-in .selectFile() command is more modern and doesn't require an external plugin.

Example migration:

  selectFile(fixturePath: string) {
-   gcy('file-dropzone-select-button').click();
-   gcy('glossary-import-dialog')
-     .find('input[type="file"]')
-     .attachFile(fixturePath, { subjectType: 'input' });
+   gcy('glossary-import-dialog')
+     .find('input[type="file"]')
+     .selectFile(`cypress/fixtures/${fixturePath}`);

ee/backend/app/src/main/kotlin/io/tolgee/ee/service/glossary/GlossaryImportService.kt (1)

26-32: Consider streaming approach for very large files.

The current implementation loads the entire CSV into memory before parsing. While this is acceptable for typical glossary sizes, consider a streaming approach if you expect to handle very large imports (100K+ terms).

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

webapp/src/component/common/DragDropArea.tsx (1)

69-88: Stabilize drag state (depth counter) and add keyboard accessibility; also guard clicks when inactive

Current target-based tracking flickers and isn’t keyboard-accessible. Use a drag depth counter, handle Enter/Space, and ignore clicks when inactive.

@@
-  const [dragOver, setDragOver] = useState<null | 'valid' | 'invalid'>(null);
-  const [dragEnterTarget, setDragEnterTarget] = useState<EventTarget | null>(
-    null
-  );
+  const [dragOver, setDragOver] = useState<null | 'valid' | 'invalid'>(null);
+  const [dragCounter, setDragCounter] = useState(0);
@@
   const handleDragEnter = (e: React.DragEvent) => {
     if (!active) return;
     e.preventDefault();
     e.stopPropagation();
-    setDragEnterTarget(e.target);
+    setDragCounter((c) => c + 1);
@@
   const handleDragLeave = (e: React.DragEvent) => {
     if (!active) return;
     e.preventDefault();
     e.stopPropagation();
-    if (e.target === dragEnterTarget) {
-      setDragOver(null);
-      setDragEnterTarget(null);
-    }
+    setDragCounter((c) => {
+      const next = Math.max(0, c - 1);
+      if (next === 0) setDragOver(null);
+      return next;
+    });
   };
@@
   const handleDrop = async (e: React.DragEvent) => {
     if (!active) return;
     e.preventDefault();
     e.stopPropagation();
 
-    const files = await getFilesAsync(e.dataTransfer);
+    const dt = e.dataTransfer;
+    const files = await getFilesAsync(dt);
     onFilesReceived(files);
     setDragOver(null);
-    setDragEnterTarget(null);
+    setDragCounter(0);
   };
@@
   return (
     <Box
       position="relative"
       overflow="visible"
-      onClick={onClick}
+      onClick={(e) => {
+        if (!active) {
+          e.preventDefault();
+          return;
+        }
+        onClick?.();
+      }}
+      role="button"
+      tabIndex={0}
+      aria-disabled={!active}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          if (active) onClick?.();
+        }
+        if (e.key === 'Escape') {
+          setDragOver(null);
+          setDragCounter(0);
+        }
+      }}
       data-cy="dropzone"
       onDragEnter={handleDragEnter}
       onDragLeave={handleDragLeave}
       onDragOver={handleDragOver}
       onDrop={handleDrop}
     >

Also applies to: 90-98, 106-115, 120-130

webapp/src/ee/glossary/components/GlossaryViewTopbar.tsx (1)

75-86: Consider adding a loading indicator for better UX.

The export button handles the loading state by disabling itself, but users might not realize an export is in progress without a visual indicator.

Consider adding a CircularProgress spinner:

           <Tooltip title={t('glossary_export_button')}>
             <IconButton
               size="small"
               color="primary"
               onClick={triggerExport}
               data-cy="glossary-export-button"
               disabled={exportLoading}
               aria-label={t('glossary_export_button')}
             >
-              <FileDownload03 height={20} width={20} />
+              {exportLoading ? (
+                <CircularProgress size={20} />
+              ) : (
+                <FileDownload03 height={20} width={20} />
+              )}
             </IconButton>
           </Tooltip>

Additionally, verify whether the export button should always be visible or if it should be conditionally rendered like the import button (e.g., based on whether there are terms to export or user permissions).

webapp/src/component/common/FileDropzone.tsx (4)

1-1: Memoize handlers to avoid paste-listener churn

Stabilize findFileType and handleFilesReceived so useOnFilePaste doesn’t reattach on every render.

- import React, { useRef, ReactNode } from 'react';
+ import React, { useRef, ReactNode, useCallback, useMemo } from 'react';
@@
-  const findFileType = (fileName: string) =>
-    acceptedFileTypes.find((config) =>
-      fileName.toLowerCase().endsWith(config.extension.toLowerCase())
-    );
+  const findFileType = useCallback(
+    (fileName: string) =>
+      acceptedFileTypes.find((config) =>
+        fileName.toLowerCase().endsWith(config.extension.toLowerCase())
+      ),
+    [acceptedFileTypes]
+  );
@@
-  const handleFilesReceived = (receivedFiles: FilesType) => {
+  const handleFilesReceived = useCallback((receivedFiles: FilesType) => {
     const validFiles = receivedFiles.filter((receivedFile) => {
       if (!isValidFileType(receivedFile.name)) {
         messageService.error(<T keyName="error_message_invalid_file_type" />);
         return false;
       }
       return true;
     });
 
     if (validFiles.length > 0) {
       const allFiles = [...files, ...validFiles];
       const newFiles = allFiles.slice(0, maxFiles);
       if (newFiles.length !== allFiles.length) {
         messageService.error(
           <T keyName="error_message_too_many_files" params={{ maxFiles }} />
         );
       }
       onFilesSelect(newFiles);
     }
-  };
+  }, [files, maxFiles, onFilesSelect, findFileType]);

Also applies to: 74-81, 83-102

---

72-73: Normalize accept attribute (ensure leading dot)

Ensure accept strings are valid (e.g., ".csv,.json") even if extensions are provided without a dot.

   const fileInputRef = useRef<HTMLInputElement>(null);
+  const acceptAttr = useMemo(
+    () =>
+      acceptedFileTypes
+        .map((config) =>
+          config.extension.startsWith('.')
+            ? config.extension
+            : `.${config.extension}`
+        )
+        .join(','),
+    [acceptedFileTypes]
+  );
@@
-        accept={acceptedFileTypes.map((config) => config.extension).join(',')}
+        accept={acceptAttr}

Also applies to: 161-168

---

170-174: Pass active and clamp maxItems to avoid negative values

Disable interactions when the quota is reached and ensure maxItems isn’t negative.

-      <DragDropArea
-        onFilesReceived={handleFilesReceived}
-        onClick={handleClick}
-        maxItems={maxFiles - files.length}
-      >
+      <DragDropArea
+        onFilesReceived={handleFilesReceived}
+        onClick={handleClick}
+        active={canAddMoreFiles}
+        maxItems={Math.max(0, maxFiles - files.length)}
+      >

---

221-226: Add noreferrer with target="_blank"

Minor security/privacy tweak.

-            <Link
+            <Link
               href={helpLink.href}
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}
             >

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro