chore: handle enter press on search

.idea/workspace.xml

@@ -4,9 +4,10 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: bg">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="docs: readme">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/README.md" beforeDir="false" afterPath="$PROJECT_DIR$/README.md" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -117,11 +118,11 @@
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\string" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
+      <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\public\assets" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\tools" />
       <recent name="C:\Users\Ibrahima\IdeaProjects\omni-tools\src\pages\categories" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components" />
       <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\components\options" />
-      <recent name="C:\Users\HP\IdeaProjects\omni-tools\src\pages\images\png\change-colors-in-png" />
     </key>
   </component>
   <component name="RunManager" selected="npm.dev">
@@ -259,31 +260,9 @@
       <workItem from="1740459961271" duration="66000" />
       <workItem from="1740460036909" duration="8299000" />
       <workItem from="1740490890760" duration="1889000" />
-      <workItem from="1740503199053" duration="1893000" />
+      <workItem from="1740503199053" duration="4853000" />
-    </task>
+      <workItem from="1740584243965" duration="17000" />
-    <task id="LOCAL-00074" summary="fix: radio and list sort init">
+      <workItem from="1740613094492" duration="1804000" />
-      <option name="closed" value="true" />
-      <created>1719516424652</created>
-      <option name="number" value="00074" />
-      <option name="presentableId" value="LOCAL-00074" />
-      <option name="project" value="LOCAL" />
-      <updated>1719516424652</updated>
-    </task>
-    <task id="LOCAL-00075" summary="chore: formik updateField">
-      <option name="closed" value="true" />
-      <created>1719519913328</created>
-      <option name="number" value="00075" />
-      <option name="presentableId" value="LOCAL-00075" />
-      <option name="project" value="LOCAL" />
-      <updated>1719519913328</updated>
-    </task>
-    <task id="LOCAL-00076" summary="ci: run e2e tests">
-      <option name="closed" value="true" />
-      <created>1719586077004</created>
-      <option name="number" value="00076" />
-      <option name="presentableId" value="LOCAL-00076" />
-      <option name="project" value="LOCAL" />
-      <updated>1719586077005</updated>
     </task>
     <task id="LOCAL-00077" summary="ci: run e2e tests">
       <option name="closed" value="true" />
@@ -653,7 +632,31 @@
       <option name="project" value="LOCAL" />
       <updated>1740504100676</updated>
     </task>
-    <option name="localTasksCounter" value="123" />
+    <task id="LOCAL-00123" summary="fix: bg">
+      <option name="closed" value="true" />
+      <created>1740505390205</created>
+      <option name="number" value="00123" />
+      <option name="presentableId" value="LOCAL-00123" />
+      <option name="project" value="LOCAL" />
+      <updated>1740505390205</updated>
+    </task>
+    <task id="LOCAL-00124" summary="docs: readme">
+      <option name="closed" value="true" />
+      <created>1740614012237</created>
+      <option name="number" value="00124" />
+      <option name="presentableId" value="LOCAL-00124" />
+      <option name="project" value="LOCAL" />
+      <updated>1740614012237</updated>
+    </task>
+    <task id="LOCAL-00125" summary="docs: readme">
+      <option name="closed" value="true" />
+      <created>1740614185980</created>
+      <option name="number" value="00125" />
+      <option name="presentableId" value="LOCAL-00125" />
+      <option name="project" value="LOCAL" />
+      <updated>1740614185980</updated>
+    </task>
+    <option name="localTasksCounter" value="126" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -685,7 +688,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="feat: find unique ui" />
     <MESSAGE value="feat: group list ui" />
     <MESSAGE value="feat: reverse list ui" />
     <MESSAGE value="feat: self host" />
@@ -710,7 +712,8 @@
     <MESSAGE value="style: background svg" />
     <MESSAGE value="docs: img" />
     <MESSAGE value="fix: bg" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: bg" />
+    <MESSAGE value="docs: readme" />
+    <option name="LAST_COMMIT_MESSAGE" value="docs: readme" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />

README.md

@@ -22,7 +22,7 @@
 </p>
 
 Welcome to OmniTools, a self-hosted web app offering a variety of online tools to simplify everyday tasks.
-Whether you are coding, manipulating images, crunching numbers, or OmniTools has you covered. Please don't forget to
+Whether you are coding, manipulating images or crunching numbers, OmniTools has you covered. Please don't forget to
 star the repo to support us.
 Here is the [demo](https://omnitools.netlify.app/) website.
 

src/components/Hero.tsx

@@ -2,7 +2,7 @@ import { Autocomplete, Box, Stack, TextField } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import SearchIcon from '@mui/icons-material/Search';
 import Grid from '@mui/material/Grid';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { DefinedTool } from '@tools/defineTool';
 import { filterTools, tools } from '@tools/index';
 import { useNavigate } from 'react-router-dom';
@@ -27,6 +27,7 @@ export default function Hero() {
   const [filteredTools, setFilteredTools] = useState<DefinedTool[]>(
     _.shuffle(tools)
   );
+  const [pendingNavigation, setPendingNavigation] = useState<boolean>(false);
   const navigate = useNavigate();
   const handleInputChange = (
     event: React.ChangeEvent<{}>,
@@ -35,6 +36,14 @@ export default function Hero() {
     setInputValue(newInputValue);
     setFilteredTools(_.shuffle(filterTools(tools, newInputValue)));
   };
+
+  useEffect(() => {
+    if (pendingNavigation && filteredTools.length > 0) {
+      navigate('/' + filteredTools[0].path);
+      setPendingNavigation(false);
+    }
+  }, [pendingNavigation, filteredTools, navigate]);
+
   return (
     <Box width={{ xs: '90%', md: '80%', lg: '60%' }}>
       <Stack mb={1} direction={'row'} spacing={1} justifyContent={'center'}>
@@ -94,6 +103,11 @@ export default function Hero() {
             </Box>
           </Box>
         )}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            setPendingNavigation(true);
+          }
+        }}
       />
       <Grid container spacing={2} mt={2}>
         {exampleTools.map((tool) => (