Merge branch 'main' into feat/pdf-merge

src/components/Hero.tsx

@@ -12,7 +12,7 @@ import { Icon } from '@iconify/react';
 const exampleTools: { label: string; url: string }[] = [
   {
     label: 'Create a transparent image',
-    url: '/png/create-transparent'
+    url: '/image-generic/create-transparent'
   },
   { label: 'Prettify JSON', url: '/json/prettify' },
   { label: 'Change GIF speed', url: '/gif/change-speed' },
@@ -35,7 +35,7 @@ export default function Hero() {
     newInputValue: string
   ) => {
     setInputValue(newInputValue);
-    setFilteredTools(_.shuffle(filterTools(tools, newInputValue)));
+    setFilteredTools(filterTools(tools, newInputValue));
   };
 
   return (

src/components/Navbar/index.tsx

@@ -48,7 +48,7 @@ const Navbar: React.FC<NavbarProps> = ({ onSwitchTheme }) => {
       src="https://ghbtns.com/github-btn.html?user=iib0011&repo=omni-tools&type=star&count=true&size=large"
       frameBorder="0"
       scrolling="0"
-      width="130"
+      width="150"
       height="30"
       title="GitHub"
     ></iframe>,

src/components/ToolContent.tsx

@@ -40,7 +40,7 @@ const FormikListenerComponent = <T,>({
 
 interface ToolContentProps<T, I> extends ToolComponentProps {
   inputComponent?: ReactNode;
-  resultComponent: ReactNode;
+  resultComponent?: ReactNode;
   renderCustomInput?: (
     values: T,
     setFieldValue: (fieldName: string, value: any) => void
@@ -57,6 +57,7 @@ interface ToolContentProps<T, I> extends ToolComponentProps {
   setInput?: React.Dispatch<React.SetStateAction<I>>;
   validationSchema?: any;
   onValuesChange?: (values: T) => void;
+  verticalGroups?: boolean;
 }
 
 export default function ToolContent<T extends FormikValues, I>({
@@ -72,7 +73,8 @@ export default function ToolContent<T extends FormikValues, I>({
   setInput,
   validationSchema,
   renderCustomInput,
-  onValuesChange
+  onValuesChange,
+  verticalGroups
 }: ToolContentProps<T, I>) {
   return (
     <Box>
@@ -97,7 +99,7 @@ export default function ToolContent<T extends FormikValues, I>({
                 input={input}
                 onValuesChange={onValuesChange}
               />
-              <ToolOptions getGroups={getGroups} />
+              <ToolOptions getGroups={getGroups} vertical={verticalGroups} />
 
               {toolInfo && toolInfo.title && toolInfo.description && (
                 <ToolInfo

src/components/ToolHeader.tsx

@@ -5,6 +5,7 @@ import { capitalizeFirstLetter } from '../utils/string';
 import Grid from '@mui/material/Grid';
 import { Icon, IconifyIcon } from '@iconify/react';
 import { categoriesColors } from '../config/uiConfig';
+import { getToolsByCategory } from '@tools/index';
 
 const StyledButton = styled(Button)(({ theme }) => ({
   backgroundColor: 'white',
@@ -70,7 +71,9 @@ export default function ToolHeader({
         items={[
           { title: 'All tools', link: '/' },
           {
-            title: capitalizeFirstLetter(type),
+            title: getToolsByCategory().find(
+              (category) => category.type === type
+            )!.rawTitle,
             link: '/categories/' + type
           },
           { title }

src/components/ToolInputAndResult.tsx

@@ -6,18 +6,20 @@ export default function ToolInputAndResult({
   result
 }: {
   input?: ReactNode;
-  result: ReactNode;
+  result?: ReactNode;
 }) {
-  return (
-    <Grid id="tool" container spacing={2}>
-      {input && (
-        <Grid item xs={12} md={6}>
-          {input}
+  if (input || result) {
+    return (
+      <Grid id="tool" container spacing={2}>
+        {input && (
+          <Grid item xs={12} md={6}>
+            {input}
+          </Grid>
+        )}
+        <Grid item xs={12} md={input ? 6 : 12}>
+          {result}
         </Grid>
-      )}
-      <Grid item xs={12} md={input ? 6 : 12}>
-        {result}
       </Grid>
-    </Grid>
-  );
+    );
+  }
 }

src/components/ToolLayout.tsx

@@ -53,7 +53,10 @@ export default function ToolLayout({
         {children}
         <Separator backgroundColor="#5581b5" margin="50px" />
         <AllTools
-          title={`All ${capitalizeFirstLetter(type)} tools`}
+          title={`All ${capitalizeFirstLetter(
+            getToolsByCategory().find((category) => category.type === type)!
+              .rawTitle
+          )} tools`}
           toolCards={otherCategoryTools}
         />
       </Box>

src/components/input/BaseFileInput.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode, useContext, useEffect } from 'react';
+import React, { ReactNode, useContext, useEffect, useState } from 'react';
 import { Box, useTheme } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import InputHeader from '../InputHeader';
@@ -26,7 +26,8 @@ export default function BaseFileInput({
   children,
   type
 }: BaseFileInputComponentProps) {
-  const [preview, setPreview] = React.useState<string | null>(null);
+  const [preview, setPreview] = useState<string | null>(null);
+  const [isDragging, setIsDragging] = useState<boolean>(false);
   const theme = useTheme();
   const fileInputRef = React.useRef<HTMLInputElement>(null);
   const { showSnackBar } = useContext(CustomSnackBarContext);
@@ -54,6 +55,7 @@ export default function BaseFileInput({
   const handleImportClick = () => {
     fileInputRef.current?.click();
   };
+
   const handleCopy = () => {
     if (isArray(value)) {
       const blob = new Blob([value[0]], { type: value[0].type });
@@ -73,6 +75,52 @@ export default function BaseFileInput({
     onChange(null);
   }
 
+  const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+
+    if (event.dataTransfer.files && event.dataTransfer.files.length > 0) {
+      const file = event.dataTransfer.files[0];
+
+      // Check if file type is acceptable
+      const isAcceptable = accept.some((acceptType) => {
+        // Handle wildcards like "image/*"
+        if (acceptType.endsWith('/*')) {
+          const category = acceptType.split('/')[0];
+          return file.type.startsWith(category);
+        }
+        return acceptType === file.type;
+      });
+
+      if (isAcceptable) {
+        onChange(file);
+      } else {
+        showSnackBar(
+          `Invalid file type. Please use ${accept.join(', ')}`,
+          'error'
+        );
+      }
+    }
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  const handleDragEnter = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(true);
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDragging(false);
+  };
+
   useEffect(() => {
     const handlePaste = (event: ClipboardEvent) => {
       const clipboardItems = event.clipboardData?.items ?? [];
@@ -105,8 +153,15 @@ export default function BaseFileInput({
           borderRadius: 2,
           boxShadow: '5',
           bgcolor: 'background.paper',
-          position: 'relative'
+          position: 'relative',
+          borderColor: isDragging ? theme.palette.primary.main : undefined,
+          borderWidth: isDragging ? 2 : 1,
+          borderStyle: isDragging ? 'dashed' : 'solid'
         }}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragEnter={handleDragEnter}
+        onDragLeave={handleDragLeave}
       >
         {preview ? (
           <Box
@@ -137,17 +192,27 @@ export default function BaseFileInput({
               cursor: 'pointer'
             }}
           >
-            <Typography
-              color={
-                theme.palette.mode === 'dark'
-                  ? theme.palette.grey['300']
-                  : theme.palette.grey['600']
-              }
-            >
-              Click here to select a {type} from your device, press Ctrl+V to
-              use a {type} from your clipboard, drag and drop a file from
-              desktop
-            </Typography>
+            {isDragging ? (
+              <Typography
+                color={theme.palette.primary.main}
+                variant="h6"
+                align="center"
+              >
+                Drop your {type} here
+              </Typography>
+            ) : (
+              <Typography
+                color={
+                  theme.palette.mode === 'dark'
+                    ? theme.palette.grey['300']
+                    : theme.palette.grey['600']
+                }
+              >
+                Click here to select a {type} from your device, press Ctrl+V to
+                use a {type} from your clipboard, or drag and drop a file from
+                desktop
+              </Typography>
+            )}
           </Box>
         )}
       </Box>

src/components/input/NumericInputWithUnit.tsx

@@ -0,0 +1,178 @@
+import React, { useState, useEffect } from 'react';
+import { Grid, Select, MenuItem } from '@mui/material';
+import TextFieldWithDesc from '@components/options/TextFieldWithDesc';
+import Qty from 'js-quantities';
+//
+
+const siPrefixes: { [key: string]: number } = {
+  'Default prefix': 1,
+  k: 1000,
+  M: 1000000,
+  G: 1000000000,
+  T: 1000000000000,
+  m: 0.001,
+  u: 0.000001,
+  n: 0.000000001,
+  p: 0.000000000001
+};
+
+export default function NumericInputWithUnit(props: {
+  value: { value: number; unit: string };
+  disabled?: boolean;
+  disableChangingUnit?: boolean;
+  onOwnChange?: (value: { value: number; unit: string }) => void;
+  defaultPrefix?: string;
+}) {
+  const [inputValue, setInputValue] = useState(props.value.value);
+  const [prefix, setPrefix] = useState(props.defaultPrefix || 'Default prefix');
+
+  // internal display unit
+  const [unit, setUnit] = useState('');
+
+  // Whether user has overridden the unit
+  const [userSelectedUnit, setUserSelectedUnit] = useState(false);
+  const [unitKind, setUnitKind] = useState('');
+  const [unitOptions, setUnitOptions] = useState<string[]>([]);
+
+  const [disabled, setDisabled] = useState(props.disabled);
+  const [disableChangingUnit, setDisableChangingUnit] = useState(
+    props.disableChangingUnit
+  );
+
+  useEffect(() => {
+    setDisabled(props.disabled);
+    setDisableChangingUnit(props.disableChangingUnit);
+  }, [props.disabled, props.disableChangingUnit]);
+
+  useEffect(() => {
+    if (unitKind != Qty(props.value.unit).kind()) {
+      // Update the options for what units similar to this one are available
+      const kind = Qty(props.value.unit).kind();
+      let units: string[] = [];
+      if (kind) {
+        units = Qty.getUnits(kind);
+      }
+
+      if (!units.includes(props.value.unit)) {
+        units.push(props.value.unit);
+      }
+
+      // Workaround because the lib doesn't list them
+      if (kind == 'area') {
+        units.push('km^2');
+        units.push('mile^2');
+        units.push('inch^2');
+        units.push('m^2');
+        units.push('cm^2');
+      }
+      setUnitOptions(units);
+      setInputValue(props.value.value);
+      setUnit(props.value.unit);
+      setUnitKind(kind);
+      setUserSelectedUnit(false);
+      return;
+    }
+
+    if (userSelectedUnit) {
+      if (!isNaN(props.value.value)) {
+        const converted = Qty(props.value.value, props.value.unit).to(
+          unit
+        ).scalar;
+        setInputValue(converted);
+      } else {
+        setInputValue(props.value.value);
+      }
+    } else {
+      setInputValue(props.value.value);
+      setUnit(props.value.unit);
+    }
+  }, [props.value.value, props.value.unit, unit]);
+
+  const handleUserValueChange = (newValue: number) => {
+    setInputValue(newValue);
+
+    if (props.onOwnChange) {
+      try {
+        const converted = Qty(newValue * siPrefixes[prefix], unit).to(
+          props.value.unit
+        ).scalar;
+
+        props.onOwnChange({ unit: props.value.unit, value: converted });
+      } catch (error) {
+        console.error('Conversion error', error);
+      }
+    }
+  };
+
+  const handlePrefixChange = (newPrefix: string) => {
+    setPrefix(newPrefix);
+  };
+
+  const handleUserUnitChange = (newUnit: string) => {
+    if (!newUnit) return;
+    const oldInputValue = inputValue;
+    const oldUnit = unit;
+    setUnit(newUnit);
+    setPrefix('Default prefix');
+
+    const convertedValue = Qty(oldInputValue * siPrefixes[prefix], oldUnit).to(
+      newUnit
+    ).scalar;
+    setInputValue(convertedValue);
+  };
+
+  return (
+    <Grid container spacing={2} alignItems="center">
+      <Grid item xs={12} md={4}>
+        <TextFieldWithDesc
+          disabled={disabled}
+          type="number"
+          fullWidth
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
+          value={(inputValue / siPrefixes[prefix])
+            .toFixed(9)
+            .replace(/(\d*\.\d+?)0+$/, '$1')}
+          onOwnChange={(value) => handleUserValueChange(parseFloat(value))}
+        />
+      </Grid>
+
+      <Grid item xs={12} md={3}>
+        <Select
+          fullWidth
+          disabled={disableChangingUnit}
+          value={prefix}
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
+          onChange={(evt) => {
+            handlePrefixChange(evt.target.value || '');
+          }}
+        >
+          {Object.keys(siPrefixes).map((key) => (
+            <MenuItem key={key} value={key}>
+              {key}
+            </MenuItem>
+          ))}
+        </Select>
+      </Grid>
+
+      <Grid item xs={12} md={5}>
+        <Select
+          fullWidth
+          disabled={disableChangingUnit}
+          placeholder={'Unit'}
+          sx={{ width: { xs: '75%', sm: '80%', md: '90%' } }}
+          value={unit}
+          onChange={(event) => {
+            setUserSelectedUnit(true);
+            handleUserUnitChange(event.target.value || '');
+          }}
+        >
+          {unitOptions.map((key) => (
+            <MenuItem key={key} value={key}>
+              {key}
+            </MenuItem>
+          ))}
+        </Select>
+      </Grid>
+    </Grid>
+  );
+}

src/components/input/ToolVideoInput.tsx

@@ -5,11 +5,12 @@ import 'rc-slider/assets/index.css';
 import BaseFileInput from './BaseFileInput';
 import { BaseFileInputProps, formatTime } from './file-input-utils';
 
-interface VideoFileInputProps extends BaseFileInputProps {
+interface VideoFileInputProps extends Omit<BaseFileInputProps, 'accept'> {
   showTrimControls?: boolean;
   onTrimChange?: (trimStart: number, trimEnd: number) => void;
   trimStart?: number;
   trimEnd?: number;
+  accept?: string[];
 }
 
 export default function ToolVideoInput({
@@ -17,6 +18,7 @@ export default function ToolVideoInput({
   onTrimChange,
   trimStart = 0,
   trimEnd = 100,
+  accept = ['video/*', '.mkv'],
   ...props
 }: VideoFileInputProps) {
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -38,7 +40,7 @@ export default function ToolVideoInput({
   };
 
   return (
-    <BaseFileInput {...props} type={'video'}>
+    <BaseFileInput {...props} type={'video'} accept={accept}>
       {({ preview }) => (
         <Box
           sx={{

src/components/options/ToolOptions.tsx

@@ -13,10 +13,12 @@ export type GetGroupsType<T> = (
 
 export default function ToolOptions<T extends FormikValues>({
   children,
-  getGroups
+  getGroups,
+  vertical
 }: {
   children?: ReactNode;
   getGroups: GetGroupsType<T> | null;
+  vertical?: boolean;
 }) {
   const theme = useTheme();
   const formikContext = useFormikContext<T>();
@@ -49,6 +51,7 @@ export default function ToolOptions<T extends FormikValues>({
         <Stack direction={'row'} spacing={2}>
           <ToolOptionGroups
             groups={getGroups({ ...formikContext, updateField }) ?? []}
+            vertical={vertical}
           />
           {children}
         </Stack>

src/components/result/ResultFooter.tsx

@@ -7,11 +7,13 @@ import React from 'react';
 export default function ResultFooter({
   handleDownload,
   handleCopy,
-  disabled
+  disabled,
+  hideCopy
 }: {
   handleDownload: () => void;
   handleCopy: () => void;
   disabled?: boolean;
+  hideCopy?: boolean;
 }) {
   return (
     <Stack mt={1} direction={'row'} spacing={2}>
@@ -22,13 +24,15 @@ export default function ResultFooter({
       >
         Save as
       </Button>
-      <Button
-        disabled={disabled}
-        onClick={handleCopy}
-        startIcon={<ContentPasteIcon />}
-      >
-        Copy to clipboard
-      </Button>
+      {!hideCopy && (
+        <Button
+          disabled={disabled}
+          onClick={handleCopy}
+          startIcon={<ContentPasteIcon />}
+        >
+          Copy to clipboard
+        </Button>
+      )}
     </Stack>
   );
 }

src/components/result/ToolFileResult.tsx

@@ -15,7 +15,7 @@ export default function ToolFileResult({
 }: {
   title?: string;
   value: File | null;
-  extension: string;
+  extension?: string;
   loading?: boolean;
   loadingText?: string;
 }) {
@@ -50,9 +50,20 @@ export default function ToolFileResult({
 
   const handleDownload = () => {
     if (value) {
-      const hasExtension = value.name.includes('.');
-      const filename = hasExtension ? value.name : `${value.name}.${extension}`;
-
+      let filename: string = value.name;
+      if (extension) {
+        // Split at the last period to separate filename and extension
+        const parts = filename.split('.');
+        // If there's more than one part (meaning there was a period)
+        if (parts.length > 1) {
+          // Remove the last part (the extension) and add the new extension
+          parts.pop();
+          filename = `${parts.join('.')}.${extension}`;
+        } else {
+          // No extension exists, just add it
+          filename = `${filename}.${extension}`;
+        }
+      }
       const blob = new Blob([value], { type: value.type });
       const url = window.URL.createObjectURL(blob);
       const a = document.createElement('a');
@@ -162,6 +173,7 @@ export default function ToolFileResult({
         disabled={!value}
         handleCopy={handleCopy}
         handleDownload={handleDownload}
+        hideCopy={fileType === 'video' || fileType === 'audio'}
       />
     </Box>
   );

src/components/result/ToolTextResult.tsx

@@ -1,21 +1,24 @@
-import { Box, TextField } from '@mui/material';
+import { Box, CircularProgress, TextField, Typography } from '@mui/material';
 import React, { useContext } from 'react';
 import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
 import InputHeader from '../InputHeader';
 import ResultFooter from './ResultFooter';
 import { replaceSpecialCharacters } from '@utils/string';
 import mime from 'mime';
+import { globalInputHeight } from '../../config/uiConfig';
 
 export default function ToolTextResult({
   title = 'Result',
   value,
   extension = 'txt',
-  keepSpecialCharacters
+  keepSpecialCharacters,
+  loading
 }: {
   title?: string;
   value: string;
   extension?: string;
   keepSpecialCharacters?: boolean;
+  loading?: boolean;
 }) {
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const handleCopy = () => {
@@ -46,18 +49,37 @@ export default function ToolTextResult({
   return (
     <Box>
       <InputHeader title={title} />
-      <TextField
-        value={keepSpecialCharacters ? value : replaceSpecialCharacters(value)}
-        fullWidth
-        multiline
-        sx={{
-          '&.MuiTextField-root': {
-            backgroundColor: 'background.paper'
+      {loading ? (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            height: globalInputHeight
+          }}
+        >
+          <CircularProgress />
+          <Typography variant="body2" sx={{ mt: 2 }}>
+            Loading... This may take a moment.
+          </Typography>
+        </Box>
+      ) : (
+        <TextField
+          value={
+            keepSpecialCharacters ? value : replaceSpecialCharacters(value)
           }
-        }}
-        rows={10}
-        inputProps={{ 'data-testid': 'text-result' }}
-      />
+          fullWidth
+          multiline
+          sx={{
+            '&.MuiTextField-root': {
+              backgroundColor: 'background.paper'
+            }
+          }}
+          rows={10}
+          inputProps={{ 'data-testid': 'text-result' }}
+        />
+      )}
       <ResultFooter handleCopy={handleCopy} handleDownload={handleDownload} />
     </Box>
   );