feat: add search field in extension popup

src/entrypoints/popup/Popup.tsx

@@ -1,4 +1,5 @@
 import { useEffect } from 'react'
+import { SearchField } from '@/features/search/SearchField'
 import { SearchAutoSyncToggle } from '@/features/search-sync/SearchAutoSyncToggle'
 import { UsefulLinksSection } from '@/features/useful-links/UsefulLinksSection'
 import { TopBar } from '@/entrypoints/popup/TopBar'
@@ -14,6 +15,7 @@ export default function Popup() {
     <div className="min-w-md flex flex-col">
       <TopBar />
       <UsefulLinksSection />
+      <SearchField />
       <CoursesList />
       <SearchAutoSyncToggle />
     </div>

src/features/search/SearchField.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react'
+
+export function SearchField() {
+  const [text, setText] = useState('')
+  return (
+    <form
+      className="flex flex-row gap-2 p-2"
+      onSubmit={(e) => {
+        e.preventDefault()
+        const url = new URL('https://innohassle.ru/search')
+        url.searchParams.append('q', text)
+        chrome.tabs.create({ url: url.toString() })
+      }}
+    >
+      <input
+        autoComplete="off"
+        spellCheck={false}
+        className="caret-focus bg-base border-focus text-base-content inset-0 h-10 w-full resize-none rounded-lg p-3 text-base outline-none dark:text-white"
+        placeholder="Search anything"
+        onChange={e => setText(e.target.value)}
+        value={text}
+        autoFocus
+      />
+      <button
+        type="submit"
+        className="btn-primary h-10 w-[93px] flex items-center justify-center gap-2 rounded-lg bg-[#9747FF] px-2 py-1 text-base text-white font-normal leading-6 hover:bg-[#6600CC]"
+      >
+        <span className="i-material-symbols-search-rounded h-4 w-4" />
+        Search
+      </button>
+    </form>
+  )
+}