feat(catalog): full-catalog search on vehicle page (leaf categories + OEM parts)

The vehicle page search previously only filtered category names at the
currently rendered level. Add a server-side cross-tree search over what's
already drilled into the DB.

New GET /categories/search/:vehicleId?q= returns two sections:
- categories: name-matched leaves UNION the leaf categories that contain a
  matching part (with hit count). "fren balatası" matches no leaf by name —
  the pads are parts under leaves like "Disk freni" — so the union surfaces
  the right leaves.
- parts: parts matching every token on name, or the raw query on oem_code,
  with OEM + leaf + breadcrumb.

Pure DB read (no upstream drill); a treeIncomplete hint is returned when the
vehicle's tree looks barely drilled. Frontend adds a debounced search box on
the vehicle page that hides the normal browse while active.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/api/src/categories/categories.controller.ts

@@ -1,4 +1,4 @@
-import { Controller, Get, Param } from "@nestjs/common";
+import { Controller, Get, Param, Query } from "@nestjs/common";
 import { CategoriesService } from "./categories.service";
 
 @Controller("categories")
@@ -10,6 +10,11 @@ export class CategoriesController {
     return this.categoriesService.getCategoryTree(vehicleId);
   }
 
+  @Get("search/:vehicleId")
+  async searchCatalog(@Param("vehicleId") vehicleId: string, @Query("q") q: string) {
+    return this.categoriesService.searchCatalog(vehicleId, q ?? "");
+  }
+
   @Get(":id/children")
   async getChildren(@Param("id") id: string) {
     return this.categoriesService.getChildren(id);

apps/api/src/categories/categories.service.ts

@@ -1,5 +1,5 @@
 import { Inject, Injectable, Logger, NotFoundException } from "@nestjs/common";
-import { eq, inArray, isNull, sql } from "drizzle-orm";
+import { and, eq, ilike, inArray, isNull, or, sql } from "drizzle-orm";
 import { DATABASE, type Database } from "../database/database.provider";
 import { categories, parts, schemaPics, vehicles } from "../database/schema/core";
 import { EmexService } from "../integrations/emex/emex.service";
@@ -615,6 +615,172 @@ export class CategoriesService {
     return rows.map((r) => ({ id: r.id, name: r.name }));
   }
 
+  /**
+   * Build root→parent breadcrumb trails for many categories in one round-trip.
+   * The per-node trail excludes the node itself, ordered root-first. Used by the
+   * catalog search so each hit can show where it sits in the tree.
+   */
+  private async buildBreadcrumbs(
+    ids: string[],
+  ): Promise<Map<string, Array<{ id: string; name: string }>>> {
+    const map = new Map<string, Array<{ id: string; name: string }>>();
+    if (ids.length === 0) return map;
+
+    const rows = await this.db.execute<{
+      start_id: string;
+      id: string;
+      name: string;
+      depth: number;
+    }>(sql`
+      WITH RECURSIVE anc AS (
+        SELECT id AS start_id, id, name, parent_id, 0 AS depth
+        FROM categories
+        WHERE id IN (${sql.join(
+          ids.map((i) => sql`${i}`),
+          sql`, `,
+        )})
+        UNION ALL
+        SELECT a.start_id, c.id, c.name, c.parent_id, a.depth + 1
+        FROM anc a
+        JOIN categories c ON c.id = a.parent_id
+      )
+      SELECT start_id, id, name, depth FROM anc WHERE depth > 0 ORDER BY start_id, depth DESC
+    `);
+
+    for (const r of rows) {
+      const trail = map.get(r.start_id) ?? [];
+      trail.push({ id: r.id, name: r.name });
+      map.set(r.start_id, trail);
+    }
+    return map;
+  }
+
+  /**
+   * Full-catalog search for a single vehicle, over what has already been drilled
+   * into the DB. Returns two sections:
+   *   - categories: leaf (and parent) categories whose name matches every token
+   *   - parts: parts whose name matches every token, or whose OEM code contains
+   *     the raw query
+   * Multi-word queries are AND-ed across tokens; matching is case-insensitive
+   * (ILIKE) and checks both the Turkish `name` and the original `nameOriginal`.
+   * Pure DB read — does not trigger any upstream drill (see getChildren for that).
+   */
+  async searchCatalog(vehicleId: string, rawQuery: string) {
+    const query = (rawQuery ?? "").trim();
+    if (query.length < 2) return { query, categories: [], parts: [], treeIncomplete: false };
+
+    const tokens = query.toLocaleLowerCase("tr").split(/\s+/).filter(Boolean).slice(0, 6);
+    if (tokens.length === 0) return { query, categories: [], parts: [], treeIncomplete: false };
+
+    // ── Section 1: categories (match every token on name OR nameOriginal) ──
+    const catTokenConds = tokens.map((tok) =>
+      or(ilike(categories.name, `%${tok}%`), ilike(categories.nameOriginal, `%${tok}%`)),
+    );
+    const matchedCats = await this.db
+      .select({
+        id: categories.id,
+        name: categories.name,
+        source: categories.source,
+        unavailable: categories.unavailable,
+      })
+      .from(categories)
+      .where(and(eq(categories.vehicleId, vehicleId), ...catTokenConds))
+      .limit(80);
+
+    // ── Section 2: parts (every token on name, OR raw query on OEM code) ──
+    const partTokenConds = tokens.map((tok) => ilike(parts.name, `%${tok}%`));
+    const matchedParts = await this.db
+      .select({
+        oemCode: parts.oemCode,
+        name: parts.name,
+        categoryId: parts.categoryId,
+        categoryName: categories.name,
+        unavailable: parts.unavailable,
+      })
+      .from(parts)
+      .innerJoin(categories, eq(parts.categoryId, categories.id))
+      .where(
+        and(
+          eq(parts.vehicleId, vehicleId),
+          or(and(...partTokenConds), ilike(parts.oemCode, `%${query}%`)),
+        ),
+      )
+      .limit(80);
+
+    // Section 1 = categories whose NAME matches ∪ the leaf categories that CONTAIN
+    // a matching part. "fren balatası" matches no leaf literally named that, but
+    // the leaves holding those parts (e.g. "Disk freni") are exactly what the user
+    // is after — so fold the matched parts' categories in, with a hit count.
+    const partCatInfo = new Map<string, { name: string; count: number }>();
+    for (const p of matchedParts) {
+      const cur = partCatInfo.get(p.categoryId);
+      if (cur) cur.count += 1;
+      else partCatInfo.set(p.categoryId, { name: p.categoryName, count: 1 });
+    }
+    const namedCats = new Map(matchedCats.map((c) => [c.id, c]));
+    const allCatIds = [...new Set([...namedCats.keys(), ...partCatInfo.keys()])];
+
+    // A category is a "leaf" (a real parts page) when nothing points to it as a
+    // parent. Un-drilled mid-groups can be mis-flagged as leaves, but clicking one
+    // just drills it like any browse, so this stays safe.
+    const parentRows = allCatIds.length
+      ? await this.db
+          .selectDistinct({ parentId: categories.parentId })
+          .from(categories)
+          .where(inArray(categories.parentId, allCatIds))
+      : [];
+    const parentSet = new Set(parentRows.map((r) => r.parentId).filter(Boolean) as string[]);
+
+    // Breadcrumbs for every category referenced by either section, in one query.
+    const crumbs = await this.buildBreadcrumbs(allCatIds);
+
+    const categoryResults = allCatIds
+      .map((id) => {
+        const named = namedCats.get(id);
+        const viaPart = partCatInfo.get(id);
+        return {
+          id,
+          name: named?.name ?? viaPart?.name ?? "",
+          source: named?.source,
+          unavailable: named?.unavailable ?? false,
+          isLeaf: !parentSet.has(id),
+          matchingPartCount: viaPart?.count ?? 0,
+          breadcrumb: crumbs.get(id) ?? [],
+        };
+      })
+      // Categories that actually contain matching parts lead, then other leaves.
+      .sort(
+        (a, b) =>
+          b.matchingPartCount - a.matchingPartCount ||
+          Number(b.isLeaf) - Number(a.isLeaf) ||
+          a.name.localeCompare(b.name, "tr"),
+      )
+      .slice(0, 50);
+
+    const partResults = matchedParts.slice(0, 50).map((p) => ({
+      oemCode: p.oemCode,
+      name: p.name,
+      categoryId: p.categoryId,
+      categoryName: p.categoryName,
+      unavailable: p.unavailable,
+      breadcrumb: crumbs.get(p.categoryId) ?? [],
+    }));
+
+    // Hint the UI when this vehicle's tree looks barely drilled (roots only, no
+    // parts): search only sees what's in the DB, so results may be sparse.
+    const [catAgg] = await this.db
+      .select({ n: sql<number>`count(*)`.mapWith(Number) })
+      .from(categories)
+      .where(eq(categories.vehicleId, vehicleId));
+    const [partAgg] = await this.db
+      .select({ n: sql<number>`count(*)`.mapWith(Number) })
+      .from(parts)
+      .where(eq(parts.vehicleId, vehicleId));
+    const treeIncomplete = partAgg.n === 0 && catAgg.n <= 20;
+
+    return { query, categories: categoryResults, parts: partResults, treeIncomplete };
+  }
+
   async getCategoryWithParts(categoryId: string) {
     const result = await this.getCategoryWithPartsInner(categoryId);
     // Attach the full ancestor trail so the client can render a complete,

apps/web/src/components/categories/catalog-search.tsx

@@ -0,0 +1,246 @@
+import { api } from "@/lib/api-client";
+import { getCategoryIcon } from "@/lib/category-icons";
+import { Badge, Input } from "@sase/ui";
+import { useQuery } from "@tanstack/react-query";
+import { useNavigate } from "@tanstack/react-router";
+import { ChevronRight, Info, Loader2, Package, Search, X } from "lucide-react";
+import { useEffect, useState } from "react";
+
+interface Crumb {
+  id: string;
+  name: string;
+}
+
+interface CategoryHit {
+  id: string;
+  name: string;
+  source?: string;
+  unavailable?: boolean;
+  isLeaf: boolean;
+  matchingPartCount: number;
+  breadcrumb: Crumb[];
+}
+
+interface PartHit {
+  oemCode: string;
+  name: string;
+  categoryId: string;
+  categoryName: string;
+  unavailable?: boolean;
+  breadcrumb: Crumb[];
+}
+
+interface SearchResponse {
+  query: string;
+  categories: CategoryHit[];
+  parts: PartHit[];
+  treeIncomplete: boolean;
+}
+
+/** Strip PL24 raw escapes (\r\n, literal \-) and collapse whitespace — part and
+ * category names often arrive as multi-line illustration captions. */
+function clean(s: string): string {
+  return (s || "").replace(/\r?\n/g, " ").replace(/\\/g, "").replace(/\s+/g, " ").trim();
+}
+
+function useDebounced<T>(value: T, ms: number): T {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const id = setTimeout(() => setDebounced(value), ms);
+    return () => clearTimeout(id);
+  }, [value, ms]);
+  return debounced;
+}
+
+function Breadcrumb({ trail, tail }: { trail: Crumb[]; tail?: string }) {
+  const parts = [...trail.map((c) => clean(c.name)), ...(tail ? [clean(tail)] : [])];
+  if (parts.length === 0) return null;
+  return <span className="block truncate text-xs text-muted-foreground">{parts.join(" › ")}</span>;
+}
+
+/**
+ * Cross-tree catalog search for one vehicle. Queries the server over everything
+ * already drilled into the DB and renders two sections: matching leaf categories
+ * and matching parts (OEM). Calls `onActiveChange` so the parent can hide the
+ * normal category browse while a search is active.
+ */
+export function CatalogSearch({
+  vehicleId,
+  onActiveChange,
+}: {
+  vehicleId: string;
+  onActiveChange?: (active: boolean) => void;
+}) {
+  const navigate = useNavigate();
+  const [input, setInput] = useState("");
+  const debounced = useDebounced(input.trim(), 300);
+  const active = debounced.length >= 2;
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setter from parent is stable
+  useEffect(() => {
+    onActiveChange?.(active);
+  }, [active]);
+
+  const { data, isLoading, isFetching } = useQuery({
+    queryKey: ["catalog-search", vehicleId, debounced],
+    queryFn: () =>
+      api.get<SearchResponse>(`/categories/search/${vehicleId}?q=${encodeURIComponent(debounced)}`),
+    enabled: active,
+    staleTime: 60_000,
+  });
+
+  const goCategory = (categoryId: string) =>
+    navigate({
+      to: "/dashboard/vehicles/$id/categories/$categoryId",
+      params: { id: vehicleId, categoryId },
+    });
+
+  const categories = data?.categories ?? [];
+  const parts = data?.parts ?? [];
+  const nothing = active && !isLoading && categories.length === 0 && parts.length === 0;
+
+  return (
+    <div>
+      <div className="relative mb-4">
+        <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+        <Input
+          type="search"
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          placeholder="Tüm katalogda ara — ör. fren balatası veya OEM kodu"
+          aria-label="Tüm katalogda ara"
+          className="pl-9 pr-9"
+        />
+        {active && isFetching ? (
+          <Loader2 className="absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 animate-spin text-muted-foreground" />
+        ) : input ? (
+          <button
+            type="button"
+            onClick={() => setInput("")}
+            aria-label="Aramayı temizle"
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        ) : null}
+      </div>
+
+      {active && (
+        <div className="space-y-6">
+          {isLoading ? (
+            <div className="flex items-center justify-center gap-2 py-8 text-sm text-muted-foreground">
+              <Loader2 className="h-4 w-4 animate-spin" /> Aranıyor…
+            </div>
+          ) : (
+            <>
+              {data?.treeIncomplete && (
+                <div className="flex items-start gap-2 rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-xs text-muted-foreground">
+                  <Info className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500" />
+                  <span>
+                    Bu aracın kataloğu henüz tam indirilmemiş. Arama yalnızca şu ana kadar açılmış
+                    kategorileri kapsar — kategorileri gezdikçe kapsam genişler.
+                  </span>
+                </div>
+              )}
+
+              {nothing ? (
+                <p className="py-8 text-center text-sm text-muted-foreground">
+                  "{debounced}" ile eşleşen kategori veya parça bulunamadı.
+                </p>
+              ) : (
+                <>
+                  {/* Section 1 — leaf categories */}
+                  <section>
+                    <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Kategoriler {categories.length > 0 && `(${categories.length})`}
+                    </h3>
+                    {categories.length === 0 ? (
+                      <p className="text-sm text-muted-foreground">Eşleşen kategori yok.</p>
+                    ) : (
+                      <ul className="space-y-1.5">
+                        {categories.map((c) => {
+                          const Icon = getCategoryIcon(c.name);
+                          return (
+                            <li key={c.id}>
+                              <button
+                                type="button"
+                                onClick={() => goCategory(c.id)}
+                                disabled={c.unavailable}
+                                className={`group flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:border-foreground/20 hover:bg-muted/40 ${c.unavailable ? "opacity-40" : ""}`}
+                              >
+                                <Icon className="h-5 w-5 flex-shrink-0 text-primary" />
+                                <span className="min-w-0 flex-1">
+                                  <span className="flex items-center gap-2">
+                                    <span className="truncate text-sm font-medium">
+                                      {clean(c.name)}
+                                    </span>
+                                    {c.matchingPartCount > 0 && (
+                                      <Badge
+                                        variant="secondary"
+                                        className="flex-shrink-0 text-[11px]"
+                                      >
+                                        {c.matchingPartCount} parça
+                                      </Badge>
+                                    )}
+                                  </span>
+                                  <Breadcrumb trail={c.breadcrumb} />
+                                </span>
+                                <ChevronRight className="h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+                              </button>
+                            </li>
+                          );
+                        })}
+                      </ul>
+                    )}
+                  </section>
+
+                  {/* Section 2 — parts (OEM) */}
+                  <section>
+                    <h3 className="mb-2 text-xs font-semibold uppercase tracking-wide text-muted-foreground">
+                      Parçalar (OEM) {parts.length > 0 && `(${parts.length})`}
+                    </h3>
+                    {parts.length === 0 ? (
+                      <p className="text-sm text-muted-foreground">
+                        Eşleşen parça yok. (Yalnızca açılmış kategorilerin parçaları aranır.)
+                      </p>
+                    ) : (
+                      <ul className="space-y-1.5">
+                        {parts.map((p, i) => (
+                          <li key={`${p.oemCode}-${p.categoryId}-${i}`}>
+                            <button
+                              type="button"
+                              onClick={() => goCategory(p.categoryId)}
+                              disabled={p.unavailable}
+                              className={`group flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors hover:border-foreground/20 hover:bg-muted/40 ${p.unavailable ? "opacity-40" : ""}`}
+                            >
+                              <Package className="h-5 w-5 flex-shrink-0 text-muted-foreground" />
+                              <span className="min-w-0 flex-1">
+                                <span className="flex items-center gap-2">
+                                  <Badge
+                                    variant="secondary"
+                                    className="flex-shrink-0 font-mono text-[11px]"
+                                  >
+                                    {p.oemCode}
+                                  </Badge>
+                                  <span className="truncate text-sm font-medium">
+                                    {clean(p.name)}
+                                  </span>
+                                </span>
+                                <Breadcrumb trail={p.breadcrumb} tail={p.categoryName} />
+                              </span>
+                              <ChevronRight className="h-4 w-4 flex-shrink-0 text-muted-foreground transition-transform group-hover:translate-x-0.5" />
+                            </button>
+                          </li>
+                        ))}
+                      </ul>
+                    )}
+                  </section>
+                </>
+              )}
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

apps/web/src/routes/dashboard/vehicles_/$id/index.tsx

@@ -1,3 +1,4 @@
+import { CatalogSearch } from "@/components/categories/catalog-search";
 import { CategoryBreadcrumb } from "@/components/categories/category-breadcrumb";
 import { CategoryColumns } from "@/components/categories/category-columns";
 import { CategoryGrid } from "@/components/categories/category-grid";
@@ -34,6 +35,9 @@ function VehicleDetailPage() {
   const [viewMode, setViewMode] = useState<"grid" | "tree" | "columns">(
     () => getUserSettings().categoryViewMode ?? "grid",
   );
+  // When a cross-tree catalog search is active, the normal browse (and its view
+  // toggle) are hidden in favour of the search results.
+  const [searchActive, setSearchActive] = useState(false);
 
   const changeViewMode = (mode: "grid" | "tree" | "columns") => {
     setViewMode(mode);
@@ -215,24 +219,32 @@ function VehicleDetailPage() {
       <Card>
         <CardHeader className="flex flex-row items-center justify-between">
           <CardTitle className="text-base">Yedek Parça Kategorileri</CardTitle>
-          <CategoryViewToggle value={viewMode} onChange={changeViewMode} />
+          {!searchActive && <CategoryViewToggle value={viewMode} onChange={changeViewMode} />}
         </CardHeader>
         <CardContent
-          className={viewMode === "columns" ? "p-0 overflow-hidden rounded-b-lg" : undefined}
+          className={
+            viewMode === "columns" && !searchActive ? "p-0 overflow-hidden rounded-b-lg" : undefined
+          }
         >
-          {categoriesLoading ? (
-            <div className="space-y-2">
-              {KEYS_8.map((__k) => (
-                <Skeleton key={__k} className="h-8 w-full" />
-              ))}
-            </div>
-          ) : viewMode === "grid" ? (
-            <CategoryGrid categories={categoryTree || []} vehicleId={id} />
-          ) : viewMode === "tree" ? (
-            <CategoryTree categories={categoryTree || []} vehicleId={id} />
-          ) : (
-            <CategoryColumns categories={categoryTree || []} vehicleId={id} />
-          )}
+          {/* Search box keeps its own padding when the columns view zeroes out
+              CardContent padding. */}
+          <div className={viewMode === "columns" && !searchActive ? "p-6 pb-0" : undefined}>
+            <CatalogSearch vehicleId={id} onActiveChange={setSearchActive} />
+          </div>
+          {!searchActive &&
+            (categoriesLoading ? (
+              <div className="space-y-2">
+                {KEYS_8.map((__k) => (
+                  <Skeleton key={__k} className="h-8 w-full" />
+                ))}
+              </div>
+            ) : viewMode === "grid" ? (
+              <CategoryGrid categories={categoryTree || []} vehicleId={id} />
+            ) : viewMode === "tree" ? (
+              <CategoryTree categories={categoryTree || []} vehicleId={id} />
+            ) : (
+              <CategoryColumns categories={categoryTree || []} vehicleId={id} />
+            ))}
         </CardContent>
       </Card>
     </div>