add explore page with basic search for users

deno.json

···
   "imports": {
     "$lexicon/": "./__generated__/",
     "@atproto/syntax": "npm:@atproto/syntax@^0.4.0",
-    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.24",
+    "@bigmoves/bff": "jsr:@bigmoves/bff@0.3.0-beta.25",
     "@gfx/canvas": "jsr:@gfx/canvas@^0.5.8",
     "@std/path": "jsr:@std/path@^1.0.9",
     "@tailwindcss/cli": "npm:@tailwindcss/cli@^4.1.4",

deno.lock

···
   "version": "5",
   "specifiers": {
     "jsr:@bigmoves/atproto-oauth-client@0.2": "0.2.0",
-    "jsr:@bigmoves/bff@0.3.0-beta.24": "0.3.0-beta.24",
+    "jsr:@bigmoves/bff@0.3.0-beta.25": "0.3.0-beta.25",
     "jsr:@deno/gfm@0.10": "0.10.0",
     "jsr:@denosaurs/emoji@0.3": "0.3.1",
     "jsr:@denosaurs/plug@1": "1.0.5",
···
     "jsr:@std/assert@^1.0.12": "1.0.13",
     "jsr:@std/assert@^1.0.13": "1.0.13",
     "jsr:@std/async@^1.0.12": "1.0.12",
-    "jsr:@std/cli@^1.0.16": "1.0.17",
     "jsr:@std/cli@^1.0.17": "1.0.17",
     "jsr:@std/data-structures@^1.0.6": "1.0.7",
     "jsr:@std/encoding@0.214": "0.214.0",
···
         "npm:tailwind-merge"
       ]
     },
-    "@bigmoves/bff@0.3.0-beta.24": {
-      "integrity": "8ea9b9be5c2a338ce3bda57141b7ea7948a22578275029f225f6b09fb11d18ef",
+    "@bigmoves/bff@0.3.0-beta.25": {
+      "integrity": "33a71b4d3f8e28832f2caa13dd09fbf799c5142509e16ce934bc4757509b4a3d",
       "dependencies": [
         "jsr:@bigmoves/atproto-oauth-client",
         "jsr:@std/assert@^1.0.13",
···
     "@std/http@1.0.16": {
       "integrity": "80c8d08c4bfcf615b89978dcefb84f7e880087cf3b6b901703936f3592a06933",
       "dependencies": [
-        "jsr:@std/cli@^1.0.17",
+        "jsr:@std/cli",
         "jsr:@std/encoding@^1.0.10",
         "jsr:@std/fmt@^1.0.8",
         "jsr:@std/html",
···
   },
   "workspace": {
     "dependencies": [
-      "jsr:@bigmoves/bff@0.3.0-beta.24",
+      "jsr:@bigmoves/bff@0.3.0-beta.25",
       "jsr:@gfx/canvas@~0.5.8",
       "jsr:@std/path@^1.0.9",
       "npm:@atproto/syntax@0.4",

src/actor.ts

···
   return profileRecord ? profileToView(profileRecord, actor.handle) : null;
 }
 
-function profileToView(
+export function profileToView(
   record: WithBffMeta<Profile>,
   handle: string,
 ): Un$Typed<ProfileView> {

src/app.tsx

···
               </h1>
             }
             profile={profile}
+            showSearch
             showNotifications
             hasNotifications={hasNotifications}
             class="border-zinc-200 dark:border-zinc-800"

src/main.tsx

···
 import { onError } from "./errors.ts";
 import * as actionHandlers from "./routes/actions.tsx";
 import * as dialogHandlers from "./routes/dialogs.tsx";
+import { handler as exploreHandler } from "./routes/explore.tsx";
 import { handler as galleryHandler } from "./routes/gallery.tsx";
 import { handler as notificationsHandler } from "./routes/notifications.tsx";
 import { handler as onboardHandler } from "./routes/onboard.tsx";
···
       LoginComponent: LoginPage,
     }),
     route("/", timelineHandler),
+    route("/explore", exploreHandler),
     route("/notifications", notificationsHandler),
     route("/profile/:handle", profileHandler),
     route("/profile/:handle/gallery/:rkey", galleryHandler),

src/routes/explore.tsx

···
+import { ProfileView } from "$lexicon/types/social/grain/actor/defs.ts";
+import { Record as Profile } from "$lexicon/types/social/grain/actor/profile.ts";
+import { Un$Typed } from "$lexicon/util.ts";
+import { BffContext, RouteHandler, WithBffMeta } from "@bigmoves/bff";
+import { Input } from "@bigmoves/bff/components";
+import { ComponentChildren } from "preact";
+import { profileToView } from "../actor.ts";
+import { getPageMeta } from "../meta.ts";
+import type { State } from "../state.ts";
+
+export const handler: RouteHandler = (
+  req,
+  _params,
+  ctx: BffContext<State>,
+) => {
+  ctx.requireAuth();
+  const url = new URL(req.url);
+  const query = url.searchParams.get("q") ?? "";
+  ctx.state.meta = [{ title: "Explore — Grain" }, ...getPageMeta("/explore")];
+  if (query) {
+    const profileViews = doSearch(query, ctx);
+    if (req.headers.get("hx-request")) {
+      if (profileViews.length === 0) {
+        return ctx.html(<p>No results for "{query}"</p>);
+      }
+      return ctx.html(
+        <SearchResults query={query} profileViews={profileViews} />,
+      );
+    } else {
+      return ctx.render(
+        <ExplorePage query={query}>
+          <SearchResults query={query} profileViews={profileViews} />
+        </ExplorePage>,
+      );
+    }
+  }
+  if (req.headers.get("hx-request")) {
+    return ctx.html(<div />);
+  }
+  return ctx.render(
+    <ExplorePage />,
+  );
+};
+
+function ExplorePage(
+  { query, children }: Readonly<
+    { query?: string; children?: ComponentChildren }
+  >,
+) {
+  return (
+    <div class="px-4 mb-4 sm:max-w-[500px]">
+      <div class="my-4">
+        <Input
+          name="q"
+          class="dark:bg-zinc-800 dark:text-white"
+          placeholder="Search for users"
+          hx-get="/explore"
+          hx-target="#search-results"
+          hx-trigger="input changed delay:500ms, keyup[key=='Enter']"
+          hx-swap="innerHTML"
+          hx-push-url="true"
+          value={query}
+          autoFocus
+        />
+      </div>
+      <div id="search-results">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+function SearchResults(
+  { query, profileViews }: Readonly<
+    { query: string; profileViews: Un$Typed<ProfileView>[] }
+  >,
+) {
+  return (
+    <>
+      <p class="my-4">
+        Search for "{query}"
+      </p>
+      <ul class="space-y-2">
+        {profileViews.map((profile) => (
+          <li key={profile.did}>
+            <a class="flex items-center" href={`/profile/${profile.handle}`}>
+              <img
+                src={profile.avatar}
+                alt={profile.displayName || profile.handle}
+                className="rounded-full w-8 h-8 mr-2"
+              />
+              <div class="flex flex-col">
+                <div class="font-semibold">
+                  {profile.displayName || profile.handle}
+                </div>
+                <div class="text-sm text-zinc-600 dark:text-zinc-500">
+                  @{profile.handle}
+                </div>
+              </div>
+            </a>
+          </li>
+        ))}
+      </ul>
+    </>
+  );
+}
+
+function doSearch(query: string, ctx: BffContext<State>) {
+  const actors = ctx.indexService.searchActors(query);
+
+  const { items } = ctx.indexService.getRecords<WithBffMeta<Profile>>(
+    "social.grain.actor.profile",
+    {
+      where: {
+        OR: [
+          ...(actors.length > 0
+            ? [{
+              field: "did",
+              in: actors.map((actor) => actor.did),
+            }]
+            : []),
+          {
+            field: "displayName",
+            contains: query,
+          },
+          {
+            field: "did",
+            contains: query,
+          },
+        ],
+      },
+    },
+  );
+
+  const profileMap = new Map<string, WithBffMeta<Profile>>();
+  for (const item of items) {
+    profileMap.set(item.did, item);
+  }
+
+  const actorMap = new Map();
+  actors.forEach((actor) => {
+    actorMap.set(actor.did, actor);
+  });
+
+  const profileViews = [];
+
+  for (const actor of actors) {
+    if (profileMap.has(actor.did)) {
+      const profile = profileMap.get(actor.did)!;
+      profileViews.push(profileToView(profile, actor.handle));
+    }
+  }
+
+  for (const profile of items) {
+    if (!actorMap.has(profile.did)) {
+      const handle = ctx.indexService.getActor(profile.did)?.handle;
+      if (!handle) continue;
+      profileViews.push(profileToView(profile, handle));
+    }
+  }
+
+  return profileViews;
+}