feat: last updated time

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

@@ -27,7 +27,7 @@ export function GalleryList({ avatars }: GalleryListProps) {
       return avatars;
     } else {
       return fuzzysort
-        .go(search, avatars, { key: 'name' })
+        .go(search, avatars, { keys: ['name', 'id'] })
         .map((result) => result.obj);
     }
   }, [search]);

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

@@ -1,3 +1,5 @@
+import { InfoCircledIcon } from '@radix-ui/react-icons';
+import { Callout, Flex } from '@radix-ui/themes';
 import { GalleryList, type Avatar } from '../../../components/Gallery/List';
 import { GallerySearch } from '../../../components/Gallery/Search';
 import { PageWrapper } from '../../../components/PageWrapper';
@@ -5,11 +7,21 @@ import { GalleryEphemeral } from '../../../stores/galleryEphemeral';
 
 interface PageProps {
   avatars: Avatar[];
+  lastUpdated: string;
 }
 
-export function Page({ avatars }: PageProps) {
+export function Page({ avatars, lastUpdated }: PageProps) {
   return (
     <PageWrapper color="gold">
+      <Flex justify="center">
+        <Callout.Root size="1">
+          <Callout.Icon>
+            <InfoCircledIcon />
+          </Callout.Icon>
+          <Callout.Text>Last updated on {lastUpdated}</Callout.Text>
+        </Callout.Root>
+      </Flex>
+
       <GalleryEphemeral.Provider>
         <GallerySearch />
         <GalleryList avatars={avatars} />

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

@@ -18,8 +18,9 @@ const avatars = Object.entries(glossary)
       ({ id: key.replace('avatar_', ''), name: value.title }) satisfies Avatar,
   )
   .sort((a, b) => a.name.localeCompare(b.name));
+const lastUpdated = new Date().toLocaleDateString();
 ---
 
 <ToolLayout tool={galleryTool}>
-  <Page {avatars} client:load />
+  <Page {avatars} {lastUpdated} client:load />
 </ToolLayout>