@86d-app/search 0.0.3

package/src/store/components/search-results.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useSearchApi } from "./_hooks";
+
+interface SearchResult {
+	id: string;
+	entityType: string;
+	entityId: string;
+	title: string;
+	url: string;
+	image?: string;
+	score: number;
+}
+
+interface SearchResultsProps {
+	query: string;
+	entityType?: string | undefined;
+	sessionId?: string | undefined;
+	limit?: number | undefined;
+}
+
+export function SearchResults({
+	query,
+	entityType,
+	sessionId,
+	limit = 20,
+}: SearchResultsProps) {
+	const api = useSearchApi();
+
+	const { data, isLoading } =
+		query.trim().length > 0
+			? (api.search.useQuery({
+					q: query.trim(),
+					type: entityType,
+					limit: String(limit),
+					sessionId,
+				}) as {
+					data: { results: SearchResult[]; total: number } | undefined;
+					isLoading: boolean;
+				})
+			: { data: undefined, isLoading: false };
+
+	const results = data?.results ?? [];
+	const total = data?.total ?? 0;
+
+	if (!query.trim()) return null;
+
+	if (isLoading) {
+		return (
+			<div className="py-12 text-center">
+				<div className="mx-auto h-6 w-6 animate-spin rounded-full border-2 border-muted border-t-foreground" />
+				<p className="mt-3 text-muted-foreground text-sm">Searching...</p>
+			</div>
+		);
+	}
+
+	if (results.length === 0) {
+		return (
+			<div className="py-12 text-center">
+				<p className="text-foreground">
+					No results found for &ldquo;{query}&rdquo;
+				</p>
+				<p className="mt-1 text-muted-foreground text-sm">
+					Try different keywords or check the spelling.
+				</p>
+			</div>
+		);
+	}
+
+	return (
+		<div>
+			<p className="mb-4 text-muted-foreground text-sm">
+				{total} result{total !== 1 ? "s" : ""} for &ldquo;{query}&rdquo;
+			</p>
+			<div className="space-y-3">
+				{results.map((result) => (
+					<a
+						key={result.id}
+						href={result.url}
+						className="block rounded-lg border border-border p-4 transition-colors hover:bg-muted/50"
+					>
+						<div className="flex items-start gap-4">
+							{result.image && (
+								<img
+									src={result.image}
+									alt=""
+									className="h-16 w-16 rounded-md object-cover"
+								/>
+							)}
+							<div className="min-w-0 flex-1">
+								<h3 className="font-medium text-foreground">{result.title}</h3>
+								<p className="mt-0.5 text-muted-foreground text-xs capitalize">
+									{result.entityType}
+								</p>
+							</div>
+						</div>
+					</a>
+				))}
+			</div>
+		</div>
+	);
+}

package/src/store/endpoints/index.ts

@@ -0,0 +1,11 @@
+import { recentEndpoint } from "./recent";
+import { searchEndpoint } from "./search";
+import { storeSearch } from "./store-search";
+import { suggestEndpoint } from "./suggest";
+
+export const storeEndpoints = {
+	"/search/store-search": storeSearch,
+	"/search": searchEndpoint,
+	"/search/suggest": suggestEndpoint,
+	"/search/recent": recentEndpoint,
+};

package/src/store/endpoints/recent.ts

@@ -0,0 +1,27 @@
+import { createStoreEndpoint, z } from "@86d-app/core";
+import type { SearchController } from "../../service";
+
+export const recentEndpoint = createStoreEndpoint(
+	"/search/recent",
+	{
+		method: "GET",
+		query: z.object({
+			sessionId: z.string().min(1),
+			limit: z.coerce.number().int().min(1).max(20).optional(),
+		}),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.search as SearchController;
+		const queries = await controller.getRecentQueries(
+			ctx.query.sessionId,
+			ctx.query.limit ?? 10,
+		);
+		return {
+			recent: queries.map((q) => ({
+				term: q.term,
+				resultCount: q.resultCount,
+				searchedAt: q.searchedAt,
+			})),
+		};
+	},
+);

package/src/store/endpoints/search.ts

@@ -0,0 +1,42 @@
+import { createStoreEndpoint, z } from "@86d-app/core";
+import type { SearchController } from "../../service";
+
+export const searchEndpoint = createStoreEndpoint(
+	"/search",
+	{
+		method: "GET",
+		query: z.object({
+			q: z.string().min(1).max(500),
+			type: z.string().optional(),
+			limit: z.coerce.number().int().min(1).max(100).optional(),
+			skip: z.coerce.number().int().min(0).optional(),
+			sessionId: z.string().optional(),
+		}),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.search as SearchController;
+		const { results, total } = await controller.search(ctx.query.q, {
+			entityType: ctx.query.type,
+			limit: ctx.query.limit ?? 20,
+			skip: ctx.query.skip ?? 0,
+		});
+
+		// Record query for analytics (fire-and-forget)
+		controller
+			.recordQuery(ctx.query.q, total, ctx.query.sessionId)
+			.catch(() => {});
+
+		return {
+			results: results.map((r) => ({
+				id: r.item.id,
+				entityType: r.item.entityType,
+				entityId: r.item.entityId,
+				title: r.item.title,
+				url: r.item.url,
+				image: r.item.image,
+				score: r.score,
+			})),
+			total,
+		};
+	},
+);

package/src/store/endpoints/store-search.ts

@@ -0,0 +1,41 @@
+import { createStoreEndpoint, z } from "@86d-app/core";
+import type { SearchController } from "../../service";
+
+export const storeSearch = createStoreEndpoint(
+	"/search/store-search",
+	{
+		method: "GET",
+		query: z.object({
+			q: z.string().min(0).max(500),
+			limit: z.string().optional(),
+		}),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.search as SearchController;
+		const limit = ctx.query.limit ? parseInt(ctx.query.limit, 10) : 5;
+		const q = ctx.query.q.trim();
+
+		if (q.length === 0) {
+			return {
+				results: [
+					{
+						id: "search",
+						label: "Search",
+						href: "/search",
+						group: "Pages",
+					},
+				],
+			};
+		}
+
+		const { results } = await controller.search(q, { limit });
+		return {
+			results: results.map((r) => ({
+				id: r.item.id,
+				label: r.item.title,
+				href: r.item.url,
+				group: r.item.entityType,
+			})),
+		};
+	},
+);

package/src/store/endpoints/suggest.ts

@@ -0,0 +1,21 @@
+import { createStoreEndpoint, z } from "@86d-app/core";
+import type { SearchController } from "../../service";
+
+export const suggestEndpoint = createStoreEndpoint(
+	"/search/suggest",
+	{
+		method: "GET",
+		query: z.object({
+			q: z.string().min(1).max(200),
+			limit: z.coerce.number().int().min(1).max(20).optional(),
+		}),
+	},
+	async (ctx) => {
+		const controller = ctx.context.controllers.search as SearchController;
+		const suggestions = await controller.suggest(
+			ctx.query.q,
+			ctx.query.limit ?? 8,
+		);
+		return { suggestions };
+	},
+);

package/tsconfig.json

@@ -0,0 +1,9 @@
+{
+	"extends": "../../tsconfig.base.json",
+	"compilerOptions": {
+		"lib": ["ES2022", "dom", "dom.iterable"],
+		"jsx": "preserve"
+	},
+	"include": ["src"],
+	"exclude": ["node_modules"]
+}