feat(Searchbar): cycle search engine by scrolling the icon

src/Startpage/Searchbar/Searchbar.tsx

@@ -1,5 +1,8 @@
+import { useState } from "react"
+
 import styled from "@emotion/styled"
 
+import { searchEngines } from "../../data/data"
 import duckduckgo from "../../data/pictures/duckduckgo.svg"
 import ecosia from "../../data/pictures/ecosia.svg"
 import google from "../../data/pictures/google.svg"
@@ -40,6 +43,17 @@ const StyledSearchbar = styled.input`
   }
 `
 
+const IconWrapper = styled.div`
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+
+  :hover > span {
+    opacity: 1;
+  }
+`
+
 const SearchIcon = styled.div<{ src: string }>`
   height: 2.9rem;
   width: 3.1rem;
@@ -51,16 +65,44 @@ const SearchIcon = styled.div<{ src: string }>`
   mask-image: url("${({ src }) => src}");
 `
 
+const EngineLabel = styled.span`
+  position: absolute;
+  bottom: calc(100% + 6px);
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 0.7rem;
+  color: var(--default-color);
+  white-space: nowrap;
+  opacity: 0;
+  transition: opacity 0.2s;
+  pointer-events: none;
+`
+
 export const Searchbar = () => {
-  const searchSettings = Settings.Search.getWithFallback()
+  const [searchSettings, setSearchSettings] = useState(
+    Settings.Search.getWithFallback
+  )
+
   const engine: string = searchSettings.engine || "duckduckgo.com/"
+  const engineIndex = Math.max(
+    0,
+    searchEngines.findIndex(e => e.value === engine)
+  )
 
   let searchSymbol = undefined
   if (engine.includes("duckduckgo")) searchSymbol = duckduckgo
   else if (engine.includes("google")) searchSymbol = google
   else if (engine.includes("qwant")) searchSymbol = qwant
   else if (engine.includes("ecosia")) searchSymbol = ecosia
 
+  const cycleEngine = () => {
+    const next = searchEngines[(engineIndex + 1) % searchEngines.length]
+    if (!next) return
+    const updated = { ...searchSettings, engine: next.value }
+    setSearchSettings(updated)
+    Settings.Search.set(updated)
+  }
+
   const redirectToSearch = (query: string) => {
     if (searchSettings.fastForward[query])
       window.location.href = searchSettings.fastForward[query]
@@ -74,7 +116,12 @@ export const Searchbar = () => {
 
   return (
     <StyledSearchbarContainer>
-      {searchSymbol && <SearchIcon src={searchSymbol} />}
+      <IconWrapper onClick={cycleEngine}>
+        {searchSymbol && <SearchIcon src={searchSymbol} />}
+        <EngineLabel>
+          {searchEngines[engineIndex]?.label ?? "Custom"}
+        </EngineLabel>
+      </IconWrapper>
       <StyledSearchbar
         placeholder="Always stay clean!"
         type="input"