refactor(frontend): refactor locate form and extract route components

drops `react-hook-form` dependency in favor of using search params for form state

apps/frontend/package.json

@@ -17,6 +17,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@icons-pack/react-simple-icons": "^9.3.0",
     "@repo/env": "workspace:*",
+    "@repo/schemas": "workspace:*",
     "@repo/ui": "workspace:*",
     "@tanstack/react-query": "^5.24.6",
     "@tanstack/react-query-devtools": "^5.24.6",
@@ -28,7 +29,6 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
-    "react-hook-form": "^7.51.0",
     "tailwindcss-animate": "^1.0.7",
     "valibot": "^0.29.0"
   },

apps/frontend/src/components/error-card.tsx

@@ -1,12 +1,17 @@
-import { Card } from "@repo/ui";
+import { Card, cn } from "@repo/ui";
 
 import { DroppedCone } from "~/components/dropped-cone";
 
-export function ErrorCard() {
+export function ErrorCard(props: { className?: string }) {
   return (
-    <Card className="text-muted-foreground flex h-64 flex-col items-center justify-center gap-4">
+    <Card
+      className={cn(
+        "text-muted-foreground flex h-64 flex-col items-center justify-center gap-4",
+        props.className,
+      )}
+    >
       <DroppedCone className="fill-muted-foreground h-28" />
-      {"Something went wrong..."}
+      Something went wrong...
     </Card>
   );
 }

apps/frontend/src/components/layout.tsx

@@ -44,16 +44,24 @@ export function Layout() {
           ) : null}
 
           <nav className="flex items-center sm:gap-12">
-            <Link to="/">
+            <Link
+              to="/"
+              search={{ type: "address", address: "" }}
+              activeOptions={{ includeSearch: false }}
+              preload={false}
+            >
               <Logo />
             </Link>
 
             <ul className="hidden sm:flex">
               <li>
                 <Link
                   to="/"
+                  search={{ type: "address", address: "" }}
                   className={linkClassNames}
                   inactiveProps={{ className: inactiveLinkClassNames }}
+                  activeOptions={{ includeSearch: false }}
+                  preload={false}
                 >
                   <Locate />
                   <span>Locate</span>
@@ -140,8 +148,11 @@ function MobileNav({ setIsVisible }: MobileNavProps) {
           <li>
             <Link
               to="/"
+              search={{ type: "address", address: "" }}
               className={linkClassNames}
               inactiveProps={{ className: inactiveLinkClassNames }}
+              activeOptions={{ includeSearch: false }}
+              preload={false}
               onClick={() => setIsVisible(false)}
             >
               <Locate />