♻ Rework the search bar

src/components/SearchBar/SearchBar.tsx

@@ -1,6 +1,6 @@
-import { TextInput, Text, Popover, Box } from '@mantine/core';
-import { useForm } from '@mantine/hooks';
-import { useState } from 'react';
+import { TextInput, Text, Popover, Kbd, Group } from '@mantine/core';
+import { useForm, useHotkeys } from '@mantine/hooks';
+import { useRef, useState } from 'react';
 import { Search, BrandYoutube, Download } from 'tabler-icons-react';
 import { useConfig } from '../../tools/state';
 
@@ -9,6 +9,16 @@ export default function SearchBar(props: any) {
   const [opened, setOpened] = useState(false);
   const [icon, setIcon] = useState(<Search />);
   const queryUrl = config.settings.searchUrl || 'https://www.google.com/search?q=';
+  const textInput: any = useRef(null);
+  useHotkeys([['ctrl+K', () => textInput.current.focus()]]);
+
+  const rightSection = (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Kbd>Ctrl</Kbd>
+      <span style={{ margin: '0 5px' }}>+</span>
+      <Kbd>K</Kbd>
+    </div>
+  );
 
   const form = useForm({
     initialValues: {
@@ -21,12 +31,6 @@ export default function SearchBar(props: any) {
   }
 
   return (
-    <Box
-      mb="xl"
-      style={{
-        width: '100%',
-      }}
-    >
     <form
       onChange={() => {
         // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
@@ -57,35 +61,38 @@ export default function SearchBar(props: any) {
     >
       <Popover
         opened={opened}
-          style={{
-            width: '100%',
-          }}
         position="bottom"
         placement="start"
+        width={260}
         withArrow
+        radius="md"
         trapFocus={false}
-          transition="pop-top-left"
+        transition="pop-bottom-right"
         onFocusCapture={() => setOpened(true)}
         onBlurCapture={() => setOpened(false)}
         target={
+          <Group direction="row">
             <TextInput
               variant="filled"
-              color="blue"
               icon={icon}
+              ref={textInput}
+              rightSectionWidth={90}
+              rightSection={rightSection}
               radius="md"
               size="md"
-              placeholder="Search the web"
+              styles={{ rightSection: { pointerEvents: 'none' } }}
+              placeholder="Search the web..."
               {...props}
               {...form.getInputProps('query')}
             />
+          </Group>
         }
       >
         <Text>
-            tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on
-            YouTube or for a Torrent respectively.
+          tip: Use the prefixes <b>!yt</b> and <b>!t</b> in front of your query to search on YouTube
+          or for a Torrent respectively.
         </Text>
       </Popover>
     </form>
-    </Box>
   );
 }