Convert to drop down

frontend/src/components/tools/convert/ConvertSettings.tsx

@@ -1,6 +1,8 @@
 import React from "react";
-import { Stack, Text, Select, NumberInput, Group, Divider } from "@mantine/core";
+import { Stack, Text, Select, NumberInput, Group, Divider, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import { useTranslation } from "react-i18next";
+import GroupedFormatDropdown from "./GroupedFormatDropdown";
 import { ConvertParameters } from "../../../hooks/tools/convert/useConvertParameters";
 import { 
   FROM_FORMAT_OPTIONS,
@@ -23,6 +25,8 @@ const ConvertSettings = ({
   disabled = false 
 }: ConvertSettingsProps) => {
   const { t } = useTranslation();
+  const theme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
 
   const handleFromExtensionChange = (value: string | null) => {
     if (value) {
@@ -38,8 +42,7 @@ const ConvertSettings = ({
     }
   };
 
-  const handleToExtensionChange = (value: string | null) => {
+  const handleToExtensionChange = (value: string) => {
-    if (value) {
     onParameterChange('toExtension', value);
     // Reset format-specific options when target extension changes
     onParameterChange('imageOptions', {
@@ -47,9 +50,9 @@ const ConvertSettings = ({
       dpi: 300,
       singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
     });
-    }
   };
 
+
   return (
     <Stack gap="md">
       {/* Format Selection */}
@@ -72,15 +75,37 @@ const ConvertSettings = ({
         <Text size="sm" fw={500}>
           {t("convert.convertTo", "Convert to")}:
         </Text>
-        <Select
+        {!parameters.fromExtension ? (
-          value={parameters.toExtension}
+          <UnstyledButton
-          onChange={handleToExtensionChange}
+            style={{
-          data={(getAvailableToExtensions(parameters.fromExtension) || []).map(option => ({ value: option.value, label: option.label }))}
+              padding: '8px 12px',
-          disabled={!parameters.fromExtension || disabled}
+              border: `1px solid ${theme.colors.gray[4]}`,
-          searchable
+              borderRadius: theme.radius.sm,
-          clearable
+              backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-          placeholder="Select target file format"
+              color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
+              cursor: 'not-allowed'
+            }}
+          >
+            <Group justify="space-between">
+              <Text size="sm">Select a source format first</Text>
+              <KeyboardArrowDownIcon 
+                style={{ 
+                  fontSize: 16,
+                  color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
+                }} 
               />
+            </Group>
+          </UnstyledButton>
+        ) : (
+          <GroupedFormatDropdown
+            value={parameters.toExtension}
+            placeholder="Select target file format"
+            options={getAvailableToExtensions(parameters.fromExtension) || []}
+            onChange={handleToExtensionChange}
+            disabled={disabled}
+            minWidth="350px"
+          />
+        )}
       </Stack>
 
       {/* Format-specific options */}

frontend/src/components/tools/convert/GroupedFormatDropdown.tsx

@@ -0,0 +1,143 @@
+import React, { useState, useMemo } from "react";
+import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
+interface FormatOption {
+  value: string;
+  label: string;
+  group: string;
+}
+
+interface GroupedFormatDropdownProps {
+  value?: string;
+  placeholder?: string;
+  options: FormatOption[];
+  onChange: (value: string) => void;
+  disabled?: boolean;
+  minWidth?: string;
+}
+
+const GroupedFormatDropdown = ({
+  value,
+  placeholder = "Select an option",
+  options,
+  onChange,
+  disabled = false,
+  minWidth = "300px"
+}: GroupedFormatDropdownProps) => {
+  const [dropdownOpened, setDropdownOpened] = useState(false);
+  const theme = useMantineTheme();
+  const { colorScheme } = useMantineColorScheme();
+
+  // Group options by category
+  const groupedOptions = useMemo(() => {
+    const groups: Record<string, FormatOption[]> = {};
+    
+    options.forEach(option => {
+      if (!groups[option.group]) {
+        groups[option.group] = [];
+      }
+      groups[option.group].push(option);
+    });
+    
+    return groups;
+  }, [options]);
+
+  // Get selected option label for display
+  const selectedLabel = useMemo(() => {
+    if (!value) return placeholder;
+    const selected = options.find(opt => opt.value === value);
+    return selected ? selected.label : value;
+  }, [value, options, placeholder]);
+
+  const handleOptionSelect = (selectedValue: string) => {
+    onChange(selectedValue);
+    setDropdownOpened(false);
+  };
+
+  return (
+    <Popover
+      opened={dropdownOpened}
+      onClose={() => setDropdownOpened(false)}
+      position="bottom-start"
+      withArrow
+      shadow="sm"
+      disabled={disabled}
+    >
+      <Popover.Target>
+        <UnstyledButton
+          onClick={() => setDropdownOpened(!dropdownOpened)}
+          disabled={disabled}
+          style={{
+            padding: '8px 12px',
+            border: `1px solid ${theme.colors.gray[4]}`,
+            borderRadius: theme.radius.sm,
+            backgroundColor: disabled 
+              ? theme.colors.gray[1] 
+              : colorScheme === 'dark' 
+                ? theme.colors.dark[6] 
+                : theme.white,
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            width: '100%',
+            color: colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[9]
+          }}
+        >
+          <Group justify="space-between">
+            <Text size="sm" c={value ? undefined : 'dimmed'}>
+              {selectedLabel}
+            </Text>
+            <KeyboardArrowDownIcon 
+              style={{ 
+                fontSize: 16,
+                transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
+                transition: 'transform 0.2s ease',
+                color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
+              }} 
+            />
+          </Group>
+        </UnstyledButton>
+      </Popover.Target>
+      <Popover.Dropdown 
+        style={{ 
+          minWidth,
+          backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
+          border: `1px solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+        }}
+      >
+        <Stack gap="md">
+          {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
+            <Box key={groupName}>
+              <Text 
+                size="sm" 
+                fw={600} 
+                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'} 
+                mb="xs"
+              >
+                {groupName}
+              </Text>
+              <Group gap="xs">
+                {groupOptions.map((option) => (
+                  <Button
+                    key={option.value}
+                    variant={value === option.value ? "filled" : "outline"}
+                    size="sm"
+                    onClick={() => handleOptionSelect(option.value)}
+                    style={{
+                      fontSize: '12px',
+                      height: '32px',
+                      padding: '0 12px'
+                    }}
+                  >
+                    {option.label}
+                  </Button>
+                ))}
+              </Group>
+            </Box>
+          ))}
+        </Stack>
+      </Popover.Dropdown>
+    </Popover>
+  );
+};
+
+export default GroupedFormatDropdown;