From 537e71cfb9163868d18934b1b76616c889f8e9da Mon Sep 17 00:00:00 2001
From: Connor Yoh <connor@stirlingpdf.com>
Date: Wed, 23 Jul 2025 14:30:53 +0100
Subject: [PATCH] Options are now in drop down grid

---
 .../tools/convert/ConvertSettings.tsx         | 33 +++++-----
 .../tools/convert/GroupedFormatDropdown.tsx   |  4 +-
 frontend/src/constants/convertConstants.ts    | 62 +++++++++----------
 3 files changed, 48 insertions(+), 51 deletions(-)

diff --git a/frontend/src/components/tools/convert/ConvertSettings.tsx b/frontend/src/components/tools/convert/ConvertSettings.tsx
index 36cc9b76d..7cc0d3e0b 100644
--- a/frontend/src/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/components/tools/convert/ConvertSettings.tsx
@@ -28,18 +28,16 @@ const ConvertSettings = ({
   const theme = useMantineTheme();
   const { colorScheme } = useMantineColorScheme();
 
-  const handleFromExtensionChange = (value: string | null) => {
-    if (value) {
-      onParameterChange('fromExtension', value);
-      // Reset to extension when from extension changes
-      onParameterChange('toExtension', '');
-      // Reset format-specific options
-      onParameterChange('imageOptions', {
-        colorType: COLOR_TYPES.COLOR,
-        dpi: 300,
-        singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
-      });
-    }
+  const handleFromExtensionChange = (value: string) => {
+    onParameterChange('fromExtension', value);
+    // Reset to extension when from extension changes
+    onParameterChange('toExtension', '');
+    // Reset format-specific options
+    onParameterChange('imageOptions', {
+      colorType: COLOR_TYPES.COLOR,
+      dpi: 300,
+      singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
+    });
   };
 
   const handleToExtensionChange = (value: string) => {
@@ -60,14 +58,13 @@ const ConvertSettings = ({
         <Text size="sm" fw={500}>
           {t("convert.convertFrom", "Convert from")}:
         </Text>
-        <Select
+        <GroupedFormatDropdown
           value={parameters.fromExtension}
-          onChange={handleFromExtensionChange}
-          data={FROM_FORMAT_OPTIONS.map(option => ({ value: option.value, label: option.label }))}
-          disabled={disabled}
-          searchable
-          clearable
           placeholder="Select source file format"
+          options={FROM_FORMAT_OPTIONS}
+          onChange={handleFromExtensionChange}
+          disabled={disabled}
+          minWidth="350px"
         />
       </Stack>
 
diff --git a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
index 2d17b0750..3fc4563d3 100644
--- a/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
+++ b/frontend/src/components/tools/convert/GroupedFormatDropdown.tsx
@@ -43,11 +43,11 @@ const GroupedFormatDropdown = ({
     return groups;
   }, [options]);
 
-  // Get selected option label for display
+  // Get selected option label for display in format "Group (EXTENSION)"
   const selectedLabel = useMemo(() => {
     if (!value) return placeholder;
     const selected = options.find(opt => opt.value === value);
-    return selected ? selected.label : value;
+    return selected ? `${selected.group} (${selected.label})` : value.toUpperCase();
   }, [value, options, placeholder]);
 
   const handleOptionSelect = (selectedValue: string) => {
diff --git a/frontend/src/constants/convertConstants.ts b/frontend/src/constants/convertConstants.ts
index 29fca7fd6..49daf6dc5 100644
--- a/frontend/src/constants/convertConstants.ts
+++ b/frontend/src/constants/convertConstants.ts
@@ -84,41 +84,41 @@ export const FILE_EXTENSIONS = {
 // Grouped file extensions for dropdowns
 export const FROM_FORMAT_OPTIONS = [
   { value: 'pdf', label: 'PDF', group: 'Document' },
-  { value: 'docx', label: 'Word Document (.docx)', group: 'Office Documents' },
-  { value: 'doc', label: 'Word Document (.doc)', group: 'Office Documents' },
-  { value: 'xlsx', label: 'Excel Spreadsheet (.xlsx)', group: 'Office Documents' },
-  { value: 'xls', label: 'Excel Spreadsheet (.xls)', group: 'Office Documents' },
-  { value: 'pptx', label: 'PowerPoint (.pptx)', group: 'Office Documents' },
-  { value: 'ppt', label: 'PowerPoint (.ppt)', group: 'Office Documents' },
-  { value: 'odt', label: 'OpenDocument Text (.odt)', group: 'Office Documents' },
-  { value: 'ods', label: 'OpenDocument Spreadsheet (.ods)', group: 'Office Documents' },
-  { value: 'odp', label: 'OpenDocument Presentation (.odp)', group: 'Office Documents' },
-  { value: 'jpg', label: 'JPEG Image (.jpg)', group: 'Images' },
-  { value: 'jpeg', label: 'JPEG Image (.jpeg)', group: 'Images' },
-  { value: 'png', label: 'PNG Image (.png)', group: 'Images' },
-  { value: 'gif', label: 'GIF Image (.gif)', group: 'Images' },
-  { value: 'bmp', label: 'BMP Image (.bmp)', group: 'Images' },
-  { value: 'tiff', label: 'TIFF Image (.tiff)', group: 'Images' },
-  { value: 'webp', label: 'WebP Image (.webp)', group: 'Images' },
-  { value: 'html', label: 'HTML (.html)', group: 'Web' },
-  { value: 'htm', label: 'HTML (.htm)', group: 'Web' },
-  { value: 'md', label: 'Markdown (.md)', group: 'Text' },
-  { value: 'txt', label: 'Text File (.txt)', group: 'Text' },
-  { value: 'rtf', label: 'Rich Text Format (.rtf)', group: 'Text' },
+  { value: 'docx', label: 'DOCX', group: 'Document' },
+  { value: 'doc', label: 'DOC', group: 'Document' },
+  { value: 'odt', label: 'ODT', group: 'Document' },
+  { value: 'xlsx', label: 'XLSX', group: 'Spreadsheet' },
+  { value: 'xls', label: 'XLS', group: 'Spreadsheet' },
+  { value: 'ods', label: 'ODS', group: 'Spreadsheet' },
+  { value: 'pptx', label: 'PPTX', group: 'Presentation' },
+  { value: 'ppt', label: 'PPT', group: 'Presentation' },
+  { value: 'odp', label: 'ODP', group: 'Presentation' },
+  { value: 'jpg', label: 'JPG', group: 'Image' },
+  { value: 'jpeg', label: 'JPEG', group: 'Image' },
+  { value: 'png', label: 'PNG', group: 'Image' },
+  { value: 'gif', label: 'GIF', group: 'Image' },
+  { value: 'bmp', label: 'BMP', group: 'Image' },
+  { value: 'tiff', label: 'TIFF', group: 'Image' },
+  { value: 'webp', label: 'WEBP', group: 'Image' },
+  { value: 'html', label: 'HTML', group: 'Web' },
+  { value: 'htm', label: 'HTM', group: 'Web' },
+  { value: 'md', label: 'MD', group: 'Text' },
+  { value: 'txt', label: 'TXT', group: 'Text' },
+  { value: 'rtf', label: 'RTF', group: 'Text' },
 ];
 
 export const TO_FORMAT_OPTIONS = [
   { value: 'pdf', label: 'PDF', group: 'Document' },
-  { value: 'docx', label: 'Word Document (.docx)', group: 'Office Documents' },
-  { value: 'odt', label: 'OpenDocument Text (.odt)', group: 'Office Documents' },
-  { value: 'pptx', label: 'PowerPoint (.pptx)', group: 'Office Documents' },
-  { value: 'odp', label: 'OpenDocument Presentation (.odp)', group: 'Office Documents' },
-  { value: 'txt', label: 'Text File (.txt)', group: 'Text' },
-  { value: 'rtf', label: 'Rich Text Format (.rtf)', group: 'Text' },
-  { value: 'png', label: 'PNG Image (.png)', group: 'Images' },
-  { value: 'jpg', label: 'JPEG Image (.jpg)', group: 'Images' },
-  { value: 'html', label: 'HTML (.html)', group: 'Web' },
-  { value: 'xml', label: 'XML (.xml)', group: 'Web' },
+  { value: 'docx', label: 'DOCX', group: 'Document' },
+  { value: 'odt', label: 'ODT', group: 'Document' },
+  { value: 'pptx', label: 'PPTX', group: 'Presentation' },
+  { value: 'odp', label: 'ODP', group: 'Presentation' },
+  { value: 'txt', label: 'TXT', group: 'Text' },
+  { value: 'rtf', label: 'RTF', group: 'Text' },
+  { value: 'png', label: 'PNG', group: 'Image' },
+  { value: 'jpg', label: 'JPG', group: 'Image' },
+  { value: 'html', label: 'HTML', group: 'Web' },
+  { value: 'xml', label: 'XML', group: 'Web' },
 ];
 
 // Conversion matrix - what each source format can convert to