Add support for duckduckgo and bing search engines

Author: ospfranco

bun.lockb

@@ -59,6 +59,7 @@
     "@types/jest": "^29.2.1",
     "@types/lodash": "^4.14.182",
     "@types/luxon": "^2.0.9",
+    "@types/react": "^19.0.2",
     "@types/react-native": "^0.66.12",
     "@types/react-test-renderer": "^18.0.0",
     "@types/uuid": "^9.0.0",

package.json

@@ -253,14 +253,38 @@ export const createKeystrokeStore = (root: IRootStore) => {
 
               // If there are no items, or if the query is a meta (⌘ is pressed) query, open a google search
               if (!root.ui.items.length || meta) {
-                Linking.openURL(
-                  `https://google.com/search?q=${encodeURI(root.ui.query)}`,
-                ).catch(e => {
-                  solNative.showToast(
-                    `Could not open URL: ${root.ui.query}, error: ${e}`,
-                    'error',
-                  )
-                })
+                switch (root.ui.searchEngine) {
+                  case 'google':
+                    Linking.openURL(
+                      `https://google.com/search?q=${encodeURI(root.ui.query)}`,
+                    ).catch(e => {
+                      solNative.showToast(
+                        `Could not open URL: ${root.ui.query}, error: ${e}`,
+                        'error',
+                      )
+                    })
+                    break
+                  case 'duckduckgo':
+                    Linking.openURL(
+                      `https://duckduckgo.com/?q=${encodeURI(root.ui.query)}`,
+                    ).catch(e => {
+                      solNative.showToast(
+                        `Could not open URL: ${root.ui.query}, error: ${e}`,
+                        'error',
+                      )
+                    })
+                    break
+                  case 'bing':
+                    Linking.openURL(
+                      `https://bing.com/search?q=${encodeURI(root.ui.query)}`,
+                    ).catch(e => {
+                      solNative.showToast(
+                        `Could not open URL: ${root.ui.query}, error: ${e}`,
+                        'error',
+                      )
+                    })
+                    break
+                }
 
                 solNative.hideWindow()
                 return

src/stores/keystroke.store.ts

@@ -113,6 +113,7 @@ let minisearch = new MiniSearch({
 })
 
 export type UIStore = ReturnType<typeof createUIStore>
+type SearchEngine = 'google' | 'bing' | 'duckduckgo'
 
 export const createUIStore = (root: IRootStore) => {
   let persist = async () => {
@@ -184,6 +185,7 @@ export const createUIStore = (root: IRootStore) => {
           `/Users/${solNative.userName()}/Music`,
         ]
         store.emojiPickerDisabled = parsedStore.emojiPickerDisabled ?? false
+        store.searchEngine = parsedStore.searchEngine ?? 'google'
       })
 
       solNative.setLaunchAtLogin(parsedStore.launchAtLogin ?? true)
@@ -220,6 +222,7 @@ export const createUIStore = (root: IRootStore) => {
     isAccessibilityTrusted: false,
     calendarAuthorizationStatus: null as CalendarAuthorizationStatus | null,
     onboardingStep: 'v1_start' as OnboardingStep,
+    searchEngine: 'google' as SearchEngine,
     globalShortcut: 'option' as 'command' | 'option' | 'control',
     scratchpadShortcut: 'command' as 'command' | 'option' | 'none',
     clipboardManagerShortcut: 'shift' as 'shift' | 'option' | 'none',
@@ -806,6 +809,10 @@ export const createUIStore = (root: IRootStore) => {
       store.emojiPickerDisabled = !store.emojiPickerDisabled
       solNative.setEmojiPickerDisabled(store.emojiPickerDisabled)
     },
+
+    setSearchEngine: (engine: SearchEngine) => {
+      store.searchEngine = engine
+    },
   })
 
   // solNative.setWindowHeight(50)

src/stores/ui.store.tsx

@@ -148,12 +148,7 @@ export const SearchWidget: FC<Props> = observer(() => {
         'flex-1': !!store.ui.query,
       })}>
       <View className="flex-row items-center gap-2 px-3">
-        {!items.length && (
-          <View className="h-6 w-6 items-center justify-center">
-            <Image source={Assets.googleLogo} className="h-4 w-4" />
-          </View>
-        )}
-        <MainInput className="flex-1" hideIcon={!items.length} />
+        <MainInput className="flex-1" />
       </View>
 
       {!!store.ui.query && (

src/widgets/search.widget.tsx

@@ -127,9 +127,10 @@ export const SettingsWidget: FC = observer(() => {
                     {label: '⌘ ⇧ Space', value: 'command' as const},
                     {label: '⇧ ⌥ Space', value: 'option' as const},
                     {label: 'Disabled', value: 'none' as const},
-                  ].map(({label, value}) => {
+                  ].map(({label, value}, idx) => {
                     return (
                       <MyRadioButton
+                        index={idx}
                         label={label}
                         value={value}
                         onValueChange={() => {
@@ -149,9 +150,10 @@ export const SettingsWidget: FC = observer(() => {
                     {label: '⌘ ⇧ V', value: 'shift' as const},
                     {label: '⌘ ⌥ V', value: 'option' as const},
                     {label: 'Disabled', value: 'none' as const},
-                  ].map(({label, value}) => {
+                  ].map(({label, value}, idx) => {
                     return (
                       <MyRadioButton
+                        index={idx}
                         label={label}
                         value={value}
                         onValueChange={() => {
@@ -163,6 +165,29 @@ export const SettingsWidget: FC = observer(() => {
                   })}
                 </View>
               </View>
+              <View className="border-t border-lightBorder dark:border-darkBorder" />
+              <View className="gap-3">
+                <Text className="flex-1">Search Engine</Text>
+                <View className="flex-1">
+                  {[
+                    {label: 'Google', value: 'google' as const},
+                    {label: 'DuckDuckGo', value: 'duckduckgo' as const},
+                    {label: 'Bing', value: 'bing' as const},
+                  ].map(({label, value}, idx) => {
+                    return (
+                      <MyRadioButton
+                        index={idx}
+                        label={label}
+                        value={value}
+                        onValueChange={() => {
+                          store.ui.setSearchEngine(value)
+                        }}
+                        selected={store.ui.searchEngine === value}
+                      />
+                    )
+                  })}
+                </View>
+              </View>
             </View>
 
             <View className="p-3 subBg rounded gap-3">
@@ -214,9 +239,10 @@ export const SettingsWidget: FC = observer(() => {
                       label: 'Screen with cursor',
                       value: 'screenWithCursor' as const,
                     },
-                  ].map(({label, value}) => {
+                  ].map(({label, value}, index) => {
                     return (
                       <MyRadioButton
+                        index={index}
                         label={label}
                         value={value}
                         onValueChange={() => {

src/widgets/settings.widget.tsx

@@ -5,7 +5,7 @@
     "allowJs": true,
     "strict": true,
     "baseUrl": "./src",
-    "jsx": "react-native",
+    "jsx": "react-jsx",
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "useDefineForClassFields": true,