feat: search

packages/website/src/components/Gallery/List.tsx

@@ -0,0 +1,48 @@
+import { Flex, Text } from '@radix-ui/themes';
+import fuzzysort from 'fuzzysort';
+import { useMemo } from 'react';
+import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+
+interface GalleryListProps {
+  avatars: Avatar[];
+}
+
+export interface Avatar {
+  name: string;
+  id: string;
+}
+
+export function GalleryList({ avatars }: GalleryListProps) {
+  const search = GalleryEphemeral.use((state) => state.search);
+  const filtered = useMemo(() => {
+    if (search === undefined) {
+      return avatars;
+    } else {
+      return fuzzysort
+        .go(search, avatars, { key: 'name' })
+        .map((result) => result.obj);
+    }
+  }, [search]);
+
+  return (
+    <Flex wrap="wrap" gap="4">
+      {filtered.map((avatar) => {
+        return (
+          <Flex key={avatar.id} direction="column" align="center" width="6rem">
+            <img
+              style={{
+                width: '4rem',
+                aspectRatio: '7 / 8',
+                objectFit: 'cover',
+              }}
+              src={`/api/gallery/${avatar.id}.webp`}
+            />
+            <Text align="center" style={{ maxWidth: '100%' }}>
+              {avatar.name}
+            </Text>
+          </Flex>
+        );
+      })}
+    </Flex>
+  );
+}

packages/website/src/components/Gallery/Search.tsx

@@ -0,0 +1,26 @@
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { TextField } from '@radix-ui/themes';
+import { useRef } from 'react';
+import { GalleryEphemeral } from '../../stores/galleryEphemeral';
+
+export function GallerySearch() {
+  const input = useRef<HTMLInputElement>(null);
+  const mutateGalleryEphemeral = GalleryEphemeral.useMutation();
+
+  return (
+    <TextField.Root
+      placeholder="Search avatars..."
+      ref={input}
+      onChange={(event) => {
+        mutateGalleryEphemeral((draft) => {
+          const trimmed = event.target.value.trim();
+          draft.search = trimmed.length === 0 ? undefined : trimmed;
+        });
+      }}
+    >
+      <TextField.Slot>
+        <MagnifyingGlassIcon />
+      </TextField.Slot>
+    </TextField.Root>
+  );
+}

packages/website/src/components/TankSearch/components/SearchBar.tsx

@@ -61,7 +61,7 @@ export function SearchBar({ topResult, onSelect }: SearchBarProps) {
   );
 
   return (
-    <Flex justify="center" mt="4">
+    <Flex justify="center">
       <Flex gap="2" flexGrow="1">
         <TextField.Root
           defaultValue={tankFilters.search}

packages/website/src/pages/tools/gallery/_index.tsx

@@ -0,0 +1,16 @@
+import { GalleryList, type Avatar } from '../../../components/Gallery/List';
+import { GallerySearch } from '../../../components/Gallery/Search';
+import { GalleryEphemeral } from '../../../stores/galleryEphemeral';
+
+interface PageProps {
+  avatars: Avatar[];
+}
+
+export function Page({ avatars }: PageProps) {
+  return (
+    <GalleryEphemeral.Provider>
+      <GallerySearch />
+      <GalleryList avatars={avatars} />
+    </GalleryEphemeral.Provider>
+  );
+}

packages/website/src/pages/tools/gallery/index.astro

@@ -1,45 +1,28 @@
 ---
-import { assertSecret, type BlitzGlossary } from '@blitzkit/core';
+import type { Avatar } from '../../../components/Gallery/List';
-import { Flex, Text } from '@radix-ui/themes';
 import { PageWrapper } from '../../../components/PageWrapper';
 import { galleryTool } from '../../../constants/tools';
+import { fetchGlossary } from '../../../core/blitz/fetchGlossary';
 import ToolLayout from '../../../layouts/ToolLayout.astro';
+import { Page } from './_index';
 
-const response = await fetch(assertSecret(import.meta.env.WOTB_GLOSSARY), {
+const glossary = await fetchGlossary();
-  cache: 'force-cache',
+const avatars = Object.entries(glossary)
-});
-const avatars = Object.entries((await response.json()) as BlitzGlossary)
   .filter(
     ([key, value]) =>
       key.startsWith('avatar') &&
       !key.endsWith('_part') &&
       value.image_url !== null,
   )
-  .sort(([, a], [, b]) => a.title.localeCompare(b.title));
+  .map(
+    ([key, value]) =>
+      ({ id: key.replace('avatar_', ''), name: value.title }) satisfies Avatar,
+  )
+  .sort((a, b) => a.name.localeCompare(b.name));
 ---
 
 <ToolLayout tool={galleryTool}>
-  <PageWrapper>
+  <PageWrapper color="gold">
-    <Flex wrap="wrap" gap="4">
+    <Page {avatars} client:load />
-      {
-        avatars.map(([key, value]) => {
-          return (
-            <Flex direction="column" align="center">
-              <img
-                style={{
-                  width: '4rem',
-                  aspectRatio: '7 / 8',
-                  objectFit: 'cover',
-                }}
-                src={`/api/gallery/${key.replace('avatar_', '')}.webp`}
-              />
-              <Text style={{ maxWidth: '6rem' }} align="center">
-                {value.title}
-              </Text>
-            </Flex>
-          );
-        })
-      }
-    </Flex>
   </PageWrapper>
 </ToolLayout>

packages/website/src/stores/galleryEphemeral.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+import { subscribeWithSelector } from 'zustand/middleware';
+import { createContextualStore } from '../core/zustand/createContextualStore';
+
+interface GalleryEphemeral {
+  searching: boolean;
+  search?: string;
+}
+
+export const GalleryEphemeral = createContextualStore(() => {
+  return create<GalleryEphemeral>()(
+    subscribeWithSelector<GalleryEphemeral>(() => ({
+      searching: false,
+    })),
+  );
+});