support different coordinate searches & auto focus search on home page

.github/workflows/ci.yaml

@@ -15,7 +15,7 @@ jobs:
           node-version: '20'
 
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile
 
       - name: Generate code
         run: make gen
@@ -37,7 +37,7 @@ jobs:
           node-version: '20'
 
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --frozen-lockfile
 
       - name: Generate code
         run: make gen

.gitignore

@@ -23,8 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-yarn.lock
-
 # code-generated files
 src/clients/backend
 src/clients/admin

Dockerfile

@@ -1,7 +1,7 @@
 FROM node:22-slim AS builder
 WORKDIR /app
-COPY package.json ./
-RUN yarn install
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
 COPY . .
 
 RUN yarn build

makefile

@@ -1,6 +1,7 @@
 check:
 	@output=$$(yarn run --silent prettier --check src 2>&1) || { echo "$$output"; exit 1; }
 	@output=$$(yarn run --silent eslint src 2>&1) || { echo "$$output"; exit 1; }
+	@yarn test
 	@yarn build
 
 fix:

package.json

@@ -9,7 +9,9 @@
     "lint": "eslint .",
     "preview": "vite preview",
     "openapi-ts": "openapi-ts",
-    "prettier": "prettier"
+    "prettier": "prettier",
+    "test": "output=$(vitest run 2>&1) || { printf '%s\\n' \"$output\"; exit 1; }",
+    "test:watch": "vitest"
   },
   "dependencies": {
     "@hey-api/openapi-ts": "^0.80.10",
@@ -43,6 +45,7 @@
     "prettier": "3.6.2",
     "typescript": "^5.9.2",
     "typescript-eslint": "^8.41.0",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vitest": "3.2.4"
   }
 }

src/App.tsx

@@ -23,7 +23,7 @@ function App() {
             path="/"
             element={
               <>
-                <SearchBar logoSize="large" />
+                <SearchBar logoSize="large" autoFocus />
                 <HomePage />
               </>
             }

src/components/core/SuggestibleInput.tsx

@@ -12,6 +12,7 @@ interface SuggestibleInputProps {
   getSuggestions: (value: string) => ReactNode[];
   placeholder?: string;
   disabled?: boolean;
+  autoFocus?: boolean;
   className?: string;
   onKeyDown?: KeyboardEventHandler<HTMLInputElement>;
   onFocus?: FocusEventHandler<HTMLInputElement>;
@@ -24,6 +25,7 @@ export function SuggestibleInput({
   getSuggestions,
   placeholder,
   disabled,
+  autoFocus,
   className,
   onKeyDown,
   onFocus,
@@ -37,6 +39,7 @@ export function SuggestibleInput({
         type="text"
         value={value}
         disabled={disabled}
+        autoFocus={autoFocus}
         placeholder={placeholder}
         onChange={(event) => onChange(event.target.value)}
         onKeyDown={onKeyDown}

src/components/ui/Searchbar.tsx

@@ -3,13 +3,15 @@ import { Link, NavigateFunction, useNavigate } from "react-router-dom";
 import classNames from "classnames";
 import { Button } from "../core/Button";
 import { SuggestibleInput } from "../core/SuggestibleInput";
+import { useTheme } from "../../hooks/useTheme";
 import { inspectSearchTypes } from "../../lib/search/searchTypes";
 
 interface SearchBarProps {
   initialValue?: string;
   onSearch?: (query: string) => void;
   className?: string;
   logoSize?: "small" | "large";
+  autoFocus?: boolean;
 }
 
 function searchHandler(navigate: NavigateFunction) {
@@ -39,11 +41,14 @@ export function SearchBar({
   logoSize = "small",
   onSearch,
   className,
+  autoFocus,
 }: SearchBarProps): ReactElement {
   const [searchQuery, setSearchQuery] = useState<string>(initialValue);
   const [focused, setFocused] = useState(false);
   const navigate = useNavigate();
+  const { effectiveTheme } = useTheme();
   const onSearchHandler = onSearch ?? searchHandler(navigate);
+  const logoSrc = effectiveTheme === "dark" ? "/logo-dark.png" : "/logo.png";
 
   function handleSubmit() {
     if (searchQuery.trim()) {
@@ -75,7 +80,7 @@ export function SearchBar({
     >
       <Link to="/">
         <img
-          src="/logo.png"
+          src={logoSrc}
           alt="HyperLeda Logo"
           className={classNames({
             "h-32 mx-auto mb-2": logoSize === "large",
@@ -97,6 +102,7 @@ export function SearchBar({
               getSuggestions={getSuggestions}
               placeholder="Search for an object..."
               className="h-10 px-2 py-1"
+              autoFocus={autoFocus}
               onFocus={() => setFocused(true)}
               onBlur={() => setFocused(false)}
               onKeyDown={(e) => {