Merge remote-tracking branch 'origin/main'

# Conflicts:
#	.idea/workspace.xml

src/components/App.tsx

@@ -1,9 +1,9 @@
 import { BrowserRouter, useRoutes } from 'react-router-dom';
 import routesConfig from '../config/routesConfig';
 import Navbar from './Navbar';
-import { Suspense, useMemo, useState } from 'react';
+import { Suspense, useState, useEffect } from 'react';
 import Loading from './Loading';
-import { CssBaseline, ThemeProvider } from '@mui/material';
+import { CssBaseline, Theme, ThemeProvider } from '@mui/material';
 import { CustomSnackBarProvider } from '../contexts/CustomSnackBarContext';
 import { SnackbarProvider } from 'notistack';
 import { tools } from '../tools';
@@ -11,6 +11,8 @@ import './index.css';
 import { darkTheme, lightTheme } from '../config/muiConfig';
 import ScrollToTopButton from './ScrollToTopButton';
 
+export type Mode = 'dark' | 'light' | 'system';
+
 const AppRoutes = () => {
   const updatedRoutesConfig = [...routesConfig];
   tools.forEach((tool) => {
@@ -20,10 +22,26 @@ const AppRoutes = () => {
 };
 
 function App() {
-  const [darkMode, setDarkMode] = useState<boolean>(() => {
-    return localStorage.getItem('theme') === 'dark';
-  });
-  const theme = useMemo(() => (darkMode ? darkTheme : lightTheme), [darkMode]);
+  const [mode, setMode] = useState<Mode>(
+    () => (localStorage.getItem('theme') || 'system') as Mode
+  );
+  const [theme, setTheme] = useState<Theme>(() => getTheme(mode));
+  useEffect(() => setTheme(getTheme(mode)), [mode]);
+
+  // Make sure to update the theme when the mode changes
+  useEffect(() => {
+    const systemDarkModeQuery = window.matchMedia(
+      '(prefers-color-scheme: dark)'
+    );
+    const handleThemeChange = (e: MediaQueryListEvent) => {
+      setTheme(e.matches ? darkTheme : lightTheme);
+    };
+    systemDarkModeQuery.addEventListener('change', handleThemeChange);
+
+    return () => {
+      systemDarkModeQuery.removeEventListener('change', handleThemeChange);
+    };
+  }, []);
 
   return (
     <ThemeProvider theme={theme}>
@@ -38,9 +56,10 @@ function App() {
         <CustomSnackBarProvider>
           <BrowserRouter>
             <Navbar
-              onSwitchTheme={() => {
-                setDarkMode((prevState) => !prevState);
-                localStorage.setItem('theme', darkMode ? 'light' : 'dark');
+              mode={mode}
+              onChangeMode={() => {
+                setMode((prev) => nextMode(prev));
+                localStorage.setItem('theme', nextMode(mode));
               }}
             />
             <Suspense fallback={<Loading />}>
@@ -54,4 +73,21 @@ function App() {
   );
 }
 
+function getTheme(mode: Mode): Theme {
+  switch (mode) {
+    case 'dark':
+      return darkTheme;
+    case 'light':
+      return lightTheme;
+    default:
+      return window.matchMedia('(prefers-color-scheme: dark)').matches
+        ? darkTheme
+        : lightTheme;
+  }
+}
+
+function nextMode(mode: Mode): Mode {
+  return mode === 'light' ? 'dark' : mode === 'dark' ? 'system' : 'light';
+}
+
 export default App;

src/components/Hero.tsx

@@ -1,4 +1,13 @@
-import { Autocomplete, Box, Stack, TextField, useTheme } from '@mui/material';
+import {
+  Autocomplete,
+  Box,
+  darken,
+  lighten,
+  Stack,
+  styled,
+  TextField,
+  useTheme
+} from '@mui/material';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
 import Grid from '@mui/material/Grid';
@@ -8,7 +17,22 @@ import { filterTools, tools } from '@tools/index';
 import { useNavigate } from 'react-router-dom';
 import _ from 'lodash';
 import { Icon } from '@iconify/react';
+import { getToolCategoryTitle } from '@utils/string';
 
+const GroupHeader = styled('div')(({ theme }) => ({
+  position: 'sticky',
+  top: '-8px',
+  padding: '4px 10px',
+  color: theme.palette.primary.main,
+  backgroundColor: lighten(theme.palette.primary.light, 0.85),
+  ...theme.applyStyles('dark', {
+    backgroundColor: darken(theme.palette.primary.main, 0.8)
+  })
+}));
+
+const GroupItems = styled('ul')({
+  padding: 0
+});
 const exampleTools: { label: string; url: string }[] = [
   {
     label: 'Create a transparent image',
@@ -26,9 +50,7 @@ const exampleTools: { label: string; url: string }[] = [
 export default function Hero() {
   const [inputValue, setInputValue] = useState<string>('');
   const theme = useTheme();
-  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(
-    _.shuffle(tools)
-  );
+  const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(tools);
   const navigate = useNavigate();
   const handleInputChange = (
     event: React.ChangeEvent<{}>,
@@ -66,6 +88,15 @@ export default function Hero() {
         sx={{ mb: 2 }}
         autoHighlight
         options={filteredTools}
+        groupBy={(option) => option.type}
+        renderGroup={(params) => {
+          return (
+            <li key={params.key}>
+              <GroupHeader>{getToolCategoryTitle(params.group)}</GroupHeader>
+              <GroupItems>{params.children}</GroupItems>
+            </li>
+          );
+        }}
         inputValue={inputValue}
         getOptionLabel={(option) => option.name}
         renderInput={(params) => (

src/components/Navbar/index.tsx

@@ -17,13 +17,17 @@ import {
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useTheme } from '@mui/material/styles';
 import { Icon } from '@iconify/react';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
+import { Mode } from 'components/App';
 
 interface NavbarProps {
-  onSwitchTheme: () => void;
+  mode: Mode;
+  onChangeMode: () => void;
 }
 
-const Navbar: React.FC<NavbarProps> = ({ onSwitchTheme }) => {
+const Navbar: React.FC<NavbarProps> = ({
+  mode,
+  onChangeMode: onChangeMode
+}) => {
   const navigate = useNavigate();
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
@@ -37,7 +41,19 @@ const Navbar: React.FC<NavbarProps> = ({ onSwitchTheme }) => {
   ];
 
   const buttons: ReactNode[] = [
-    <DarkModeIcon onClick={onSwitchTheme} style={{ cursor: 'pointer' }} />,
+    <Icon
+      key={mode}
+      onClick={onChangeMode}
+      style={{ cursor: 'pointer' }}
+      fontSize={30}
+      icon={
+        mode === 'dark'
+          ? 'ic:round-dark-mode'
+          : mode === 'light'
+            ? 'ic:round-light-mode'
+            : 'ic:round-contrast'
+      }
+    />,
     <Icon
       onClick={() => window.open('https://discord.gg/SDbbn3hT4b', '_blank')}
       style={{ cursor: 'pointer' }}

src/components/input/ToolAudioInput.tsx

@@ -0,0 +1,46 @@
+import React, { useRef } from 'react';
+import { Box, Typography } from '@mui/material';
+import BaseFileInput from './BaseFileInput';
+import { BaseFileInputProps } from './file-input-utils';
+
+interface AudioFileInputProps extends Omit<BaseFileInputProps, 'accept'> {
+  accept?: string[];
+}
+
+export default function ToolAudioInput({
+  accept = ['audio/*', '.mp3', '.wav', '.aac'],
+  ...props
+}: AudioFileInputProps) {
+  const audioRef = useRef<HTMLAudioElement>(null);
+
+  return (
+    <BaseFileInput {...props} type={'audio'} accept={accept}>
+      {({ preview }) => (
+        <Box
+          sx={{
+            position: 'relative',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+          }}
+        >
+          {preview ? (
+            <audio
+              ref={audioRef}
+              src={preview}
+              style={{ maxWidth: '100%' }}
+              controls
+            />
+          ) : (
+            <Typography variant="body2" color="textSecondary">
+              Drag & drop or import an audio file
+            </Typography>
+          )}
+        </Box>
+      )}
+    </BaseFileInput>
+  );
+}

src/components/input/ToolMultipleAudioInput.tsx

@@ -0,0 +1,172 @@
+import { ReactNode, useContext, useEffect, useRef, useState } from 'react';
+import { Box, useTheme } from '@mui/material';
+import Typography from '@mui/material/Typography';
+import InputHeader from '../InputHeader';
+import InputFooter from './InputFooter';
+import { CustomSnackBarContext } from '../../contexts/CustomSnackBarContext';
+import { isArray } from 'lodash';
+import MusicNoteIcon from '@mui/icons-material/MusicNote';
+
+interface MultiAudioInputComponentProps {
+  accept: string[];
+  title?: string;
+  type: 'audio';
+  value: MultiAudioInput[];
+  onChange: (file: MultiAudioInput[]) => void;
+}
+
+export interface MultiAudioInput {
+  file: File;
+  order: number;
+}
+
+export default function ToolMultipleAudioInput({
+  value,
+  onChange,
+  accept,
+  title,
+  type
+}: MultiAudioInputComponentProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.target.files;
+    if (files)
+      onChange([
+        ...value,
+        ...Array.from(files).map((file) => ({ file, order: value.length }))
+      ]);
+  };
+
+  const handleImportClick = () => {
+    fileInputRef.current?.click();
+  };
+
+  function handleClear() {
+    onChange([]);
+  }
+
+  function fileNameTruncate(fileName: string) {
+    const maxLength = 15;
+    if (fileName.length > maxLength) {
+      return fileName.slice(0, maxLength) + '...';
+    }
+    return fileName;
+  }
+
+  const sortList = () => {
+    const list = [...value];
+    list.sort((a, b) => a.order - b.order);
+    onChange(list);
+  };
+
+  const reorderList = (sourceIndex: number, destinationIndex: number) => {
+    if (destinationIndex === sourceIndex) {
+      return;
+    }
+    const list = [...value];
+
+    if (destinationIndex === 0) {
+      list[sourceIndex].order = list[0].order - 1;
+      sortList();
+      return;
+    }
+
+    if (destinationIndex === list.length - 1) {
+      list[sourceIndex].order = list[list.length - 1].order + 1;
+      sortList();
+      return;
+    }
+
+    if (destinationIndex < sourceIndex) {
+      list[sourceIndex].order =
+        (list[destinationIndex].order + list[destinationIndex - 1].order) / 2;
+      sortList();
+      return;
+    }
+
+    list[sourceIndex].order =
+      (list[destinationIndex].order + list[destinationIndex + 1].order) / 2;
+    sortList();
+  };
+
+  return (
+    <Box>
+      <InputHeader
+        title={title || 'Input ' + type.charAt(0).toUpperCase() + type.slice(1)}
+      />
+      <Box
+        sx={{
+          width: '100%',
+          height: '300px',
+          border: value?.length ? 0 : 1,
+          borderRadius: 2,
+          boxShadow: '5',
+          bgcolor: 'background.paper',
+          position: 'relative'
+        }}
+      >
+        <Box
+          width="100%"
+          height="100%"
+          sx={{
+            overflow: 'auto',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexWrap: 'wrap',
+            position: 'relative'
+          }}
+        >
+          {value?.length ? (
+            value.map((file, index) => (
+              <Box
+                key={index}
+                sx={{
+                  margin: 1,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  width: '200px',
+                  border: 1,
+                  borderRadius: 1,
+                  padding: 1
+                }}
+              >
+                <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                  <MusicNoteIcon />
+                  <Typography sx={{ marginLeft: 1 }}>
+                    {fileNameTruncate(file.file.name)}
+                  </Typography>
+                </Box>
+                <Box
+                  sx={{ cursor: 'pointer' }}
+                  onClick={() => {
+                    const updatedFiles = value.filter((_, i) => i !== index);
+                    onChange(updatedFiles);
+                  }}
+                >
+                  ✖
+                </Box>
+              </Box>
+            ))
+          ) : (
+            <Typography variant="body2" color="text.secondary">
+              No files selected
+            </Typography>
+          )}
+        </Box>
+      </Box>
+
+      <InputFooter handleImport={handleImportClick} handleClear={handleClear} />
+      <input
+        ref={fileInputRef}
+        style={{ display: 'none' }}
+        type="file"
+        accept={accept.join(',')}
+        onChange={handleFileChange}
+        multiple={true}
+      />
+    </Box>
+  );
+}

src/components/input/ToolTextInput.tsx

@@ -7,11 +7,13 @@ import InputFooter from './InputFooter';
 export default function ToolTextInput({
   value,
   onChange,
-  title = 'Input text'
+  title = 'Input text',
+  placeholder
 }: {
   title?: string;
   value: string;
   onChange: (value: string) => void;
+  placeholder?: string;
 }) {
   const { showSnackBar } = useContext(CustomSnackBarContext);
   const fileInputRef = useRef<HTMLInputElement>(null);
@@ -50,6 +52,7 @@ export default function ToolTextInput({
         fullWidth
         multiline
         rows={10}
+        placeholder={placeholder}
         sx={{
           '&.MuiTextField-root': {
             backgroundColor: 'background.paper'