✨ Adds query placeholder and autoFocus (#267 #268)

src/components/Settings/CommonSettings.tsx

@@ -28,6 +28,15 @@ export default function CommonSettings(args: any) {
     <Group direction="column" grow>
       <Group grow direction="column" spacing={0}>
         <Text>Search engine</Text>
+        <Text
+          style={{
+            fontSize: '0.75rem',
+            color: 'gray',
+            marginBottom: '0.5rem',
+          }}
+        >
+          Tip: %s can be used as a placeholder for the query.
+        </Text>
         <SegmentedControl
           fullWidth
           title="Search engine"
@@ -53,7 +62,7 @@ export default function CommonSettings(args: any) {
         {searchUrl === 'Custom' && (
           <TextInput
             label="Query URL"
-            placeholder="Custom query url"
+            placeholder="Custom query URL"
             value={customSearchUrl}
             onChange={(event) => {
               setCustomSearchUrl(event.currentTarget.value);

src/components/modules/search/SearchModule.tsx

@@ -96,7 +96,13 @@ export default function SearchBar(props: any) {
           } else if (isTorrent) {
             window.open(`https://bitsearch.to/search?q=${query.substring(3)}`);
           } else {
-            window.open(`${queryUrl}${values.query}`);
+            window.open(
+              `${
+                queryUrl.includes('%s')
+                  ? queryUrl.replace('%s', values.query)
+                  : queryUrl + values.query
+              }`
+            );
           }
         }, 20);
       })}
@@ -114,6 +120,7 @@ export default function SearchBar(props: any) {
         onBlurCapture={() => setOpened(false)}
         target={
           <Autocomplete
+            autoFocus
             variant="filled"
             data={autocompleteData}
             icon={icon}