feat: connect backend via trpc, homepage group search

.env.example

@@ -9,3 +9,4 @@
 # When adding additional environment variables, the schema in "/src/env.js"
 # should be updated accordingly.
 
+BACKEND_URL=http://localhost:3000

package.json

@@ -14,13 +14,17 @@
     "check:fix": "biome check --write --unsafe"
   },
   "dependencies": {
+    "@polinetwork/backend": "^0.15.18",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.8",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-tabs": "^1.1.13",
     "@t3-oss/env-nextjs": "^0.13.10",
+    "@tanstack/react-pacer": "^0.22.1",
     "@tanstack/react-table": "^8.21.3",
+    "@trpc/client": "11.5.1",
+    "@trpc/next": "11.5.1",
     "babel-plugin-react-compiler": "^1.0.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -34,13 +38,15 @@
     "react-dom": "^19.2.3",
     "react-hook-form": "^7.68.0",
     "react-icons": "^5.6.0",
+    "superjson": "^2.2.6",
     "tailwind-merge": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^4.2.1"
   },
   "devDependencies": {
     "@biomejs/biome": "2.2.5",
     "@tailwindcss/postcss": "^4.1.18",
+    "@trpc/server": "11.5.1",
     "@types/node": "^24.10.4",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",

src/components/home/group-search.tsx

@@ -0,0 +1,78 @@
+"use client"
+import { useAsyncDebouncer } from "@tanstack/react-pacer"
+import Image from "next/image"
+import Link from "next/link"
+import { useEffect, useState } from "react"
+import { FiSearch } from "react-icons/fi"
+import telegram from "@/assets/icons/telegram-fill.svg"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import { searchGroups } from "@/queries/groups"
+import type { ApiOutput } from "@/types"
+import { Glass } from "../glass"
+import { Spinner } from "../spinner"
+
+export function GroupSearch() {
+  const [query, setQuery] = useState("")
+  const [results, setResults] = useState<ApiOutput["tg"]["groups"]["search"] | null>(null)
+
+  const debouncedSearch = useAsyncDebouncer(
+    async (searchTerm: string) => {
+      const res = await searchGroups(searchTerm, 20)
+      setResults(res)
+    },
+    {
+      wait: 500,
+    },
+    (state) => ({ isLoading: state.isPending || state.isExecuting })
+  )
+
+  useEffect(() => {
+    setResults(null)
+    if (query) debouncedSearch.maybeExecute(query)
+  }, [query, debouncedSearch.maybeExecute])
+
+  return (
+    <div className="relative w-full max-w-lg">
+      <Input
+        icon={<FiSearch className="h-5 w-5" />}
+        type="text"
+        placeholder="Find your group"
+        aria-label="Find your group"
+        containerClassName="w-full"
+        className="typo-body-medium"
+        value={query}
+        onChange={(e) => {
+          setQuery(e.target.value)
+        }}
+      />
+
+      {query && (
+        <Glass className={cn("absolute top-15 grid w-full overflow-hidden rounded-xl p-0")}>
+          <div className="max-h-70 overflow-y-auto">
+            {results && results.count > 0 ? (
+              results?.groups
+                .filter((g): g is typeof g & { link: string } => !!g.link)
+                .map((g) => (
+                  <Link key={g.telegramId} href={g.link} target="_blank">
+                    <div className="flex items-center justify-start gap-3 px-4 py-3 text-start hover:bg-background-blur">
+                      <Image key="telegram" src={telegram} alt="Telegram" className="size-5" />
+                      {g.title}
+                    </div>
+                  </Link>
+                ))
+            ) : (
+              <div className="flex h-12 items-center justify-center px-4">
+                {debouncedSearch.state.isLoading ? (
+                  <Spinner className="fill-blue-primary text-blue-primary/20" />
+                ) : (
+                  "No group found"
+                )}
+              </div>
+            )}
+          </div>
+        </Glass>
+      )}
+    </div>
+  )
+}