♻ Rework the search bar

src/components/SearchBar/SearchBar.tsx

@@ -1,6 +1,6 @@
-import { TextInput, Text, Popover, Box } from '@mantine/core';
+import { TextInput, Text, Popover, Kbd, Group } from '@mantine/core';
-import { useForm } from '@mantine/hooks';
+import { useForm, useHotkeys } from '@mantine/hooks';
-import { useState } from 'react';
+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,71 +31,68 @@ export default function SearchBar(props: any) {
   }
 
   return (
-    <Box
+    <form
-      mb="xl"
+      onChange={() => {
-      style={{
+        // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
-        width: '100%',
+        const query = form.values.query.trim();
+        const isYoutube = query.startsWith('!yt');
+        const isTorrent = query.startsWith('!t');
+        if (isYoutube) {
+          setIcon(<BrandYoutube size={22} />);
+        } else if (isTorrent) {
+          setIcon(<Download size={22} />);
+        } else {
+          setIcon(<Search size={22} />);
+        }
       }}
+      onSubmit={form.onSubmit((values) => {
+        // Find if query is prefixed by !yt or !t
+        const query = values.query.trim();
+        const isYoutube = query.startsWith('!yt');
+        const isTorrent = query.startsWith('!t');
+        if (isYoutube) {
+          window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
+        } else if (isTorrent) {
+          window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
+        } else {
+          window.open(`${queryUrl}${values.query}`);
+        }
+      })}
     >
-      <form
+      <Popover
-        onChange={() => {
+        opened={opened}
-          // If query contains !yt or !t add "Searching on YouTube" or "Searching torrent"
+        position="bottom"
-          const query = form.values.query.trim();
+        placement="start"
-          const isYoutube = query.startsWith('!yt');
+        width={260}
-          const isTorrent = query.startsWith('!t');
+        withArrow
-          if (isYoutube) {
+        radius="md"
-            setIcon(<BrandYoutube size={22} />);
+        trapFocus={false}
-          } else if (isTorrent) {
+        transition="pop-bottom-right"
-            setIcon(<Download size={22} />);
+        onFocusCapture={() => setOpened(true)}
-          } else {
+        onBlurCapture={() => setOpened(false)}
-            setIcon(<Search size={22} />);
+        target={
-          }
+          <Group direction="row">
-        }}
-        onSubmit={form.onSubmit((values) => {
-          // Find if query is prefixed by !yt or !t
-          const query = values.query.trim();
-          const isYoutube = query.startsWith('!yt');
-          const isTorrent = query.startsWith('!t');
-          if (isYoutube) {
-            window.open(`https://www.youtube.com/results?search_query=${query.substring(3)}`);
-          } else if (isTorrent) {
-            window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
-          } else {
-            window.open(`${queryUrl}${values.query}`);
-          }
-        })}
-      >
-        <Popover
-          opened={opened}
-          style={{
-            width: '100%',
-          }}
-          position="bottom"
-          placement="start"
-          withArrow
-          trapFocus={false}
-          transition="pop-top-left"
-          onFocusCapture={() => setOpened(true)}
-          onBlurCapture={() => setOpened(false)}
-          target={
             <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
+        <Text>
-            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
-          </Text>
+          or for a Torrent respectively.
-        </Popover>
+        </Text>
-      </form>
+      </Popover>
-    </Box>
+    </form>
   );
 }