From 63ce3274580602b1549950b11fbe774b9cf41583 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tr=C3=A8sAbhi?= <43380238+tresabhi@users.noreply.github.com>
Date: Thu, 15 Jan 2026 14:13:34 -0600
Subject: [PATCH] feat: avatars search bar ui

---
 packages/i18n/strings/en.json                 |  4 +++
 .../src/components/AvatarControls/index.css   |  0
 .../src/components/AvatarControls/index.tsx   | 16 ++++++++++++
 .../website-ue/src/components/Section.astro   | 22 ----------------
 .../src/components/Section/index.css          | 14 ++++++++++
 .../src/components/Section/index.tsx          | 15 +++++++++++
 .../src/components/TextField/index.css        |  5 ++++
 .../src/components/ToolBanner.astro           |  5 ++--
 .../src/pages/[...locale]/avatars/_index.tsx  | 26 +++++++++++++------
 .../src/pages/[...locale]/avatars/index.astro |  9 +++----
 .../src/pages/[...locale]/index.astro         |  2 +-
 11 files changed, 79 insertions(+), 39 deletions(-)
 create mode 100644 packages/website-ue/src/components/AvatarControls/index.css
 create mode 100644 packages/website-ue/src/components/AvatarControls/index.tsx
 delete mode 100644 packages/website-ue/src/components/Section.astro
 create mode 100644 packages/website-ue/src/components/Section/index.css
 create mode 100644 packages/website-ue/src/components/Section/index.tsx

diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json
index 6ff8d57be..b6603b340 100644
--- a/packages/i18n/strings/en.json
+++ b/packages/i18n/strings/en.json
@@ -46,5 +46,9 @@
   "home": {
     "search": "Search tanks, players, tools...",
     "credit": "by TrèsAbhi"
+  },
+
+  "avatars": {
+    "search": "Search avatars..."
   }
 }
diff --git a/packages/website-ue/src/components/AvatarControls/index.css b/packages/website-ue/src/components/AvatarControls/index.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/packages/website-ue/src/components/AvatarControls/index.tsx b/packages/website-ue/src/components/AvatarControls/index.tsx
new file mode 100644
index 000000000..1b11d810f
--- /dev/null
+++ b/packages/website-ue/src/components/AvatarControls/index.tsx
@@ -0,0 +1,16 @@
+import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
+import { useStrings } from "../../hooks/useStrings";
+import { TextField } from "../TextField";
+import "./index.css";
+
+export function AvatarControls() {
+  const strings = useStrings();
+
+  return (
+    <div>
+      <TextField placeholder={strings.avatars.search}>
+        <MagnifyingGlassIcon />
+      </TextField>
+    </div>
+  );
+}
diff --git a/packages/website-ue/src/components/Section.astro b/packages/website-ue/src/components/Section.astro
deleted file mode 100644
index 7d30a525d..000000000
--- a/packages/website-ue/src/components/Section.astro
+++ /dev/null
@@ -1,22 +0,0 @@
-<style>
-  .section {
-    display: flex;
-    justify-content: center;
-    padding: 0 var(--space-4);
-
-    .content {
-      flex: 1;
-      max-width: var(--page-width);
-
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-4);
-    }
-  }
-</style>
-
-<div class="section">
-  <div class="content">
-    <slot />
-  </div>
-</div>
diff --git a/packages/website-ue/src/components/Section/index.css b/packages/website-ue/src/components/Section/index.css
new file mode 100644
index 000000000..a38234a6a
--- /dev/null
+++ b/packages/website-ue/src/components/Section/index.css
@@ -0,0 +1,14 @@
+.section {
+  display: flex;
+  justify-content: center;
+  padding: 0 var(--space-4);
+
+  .content {
+    flex: 1;
+    max-width: var(--page-width);
+
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+  }
+}
diff --git a/packages/website-ue/src/components/Section/index.tsx b/packages/website-ue/src/components/Section/index.tsx
new file mode 100644
index 000000000..f98643d14
--- /dev/null
+++ b/packages/website-ue/src/components/Section/index.tsx
@@ -0,0 +1,15 @@
+import type { ComponentProps } from "react";
+import { classNames } from "../../core/ui/classNames";
+import "./index.css";
+
+export function Section({
+  className,
+  children,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div className={classNames("section", className)} {...props}>
+      <div className="content">{children}</div>
+    </div>
+  );
+}
diff --git a/packages/website-ue/src/components/TextField/index.css b/packages/website-ue/src/components/TextField/index.css
index 2863a007f..c6a1a9fe9 100644
--- a/packages/website-ue/src/components/TextField/index.css
+++ b/packages/website-ue/src/components/TextField/index.css
@@ -16,6 +16,10 @@
 
   &[data-has-icon="true"] {
     padding-left: var(--space-3);
+
+    input {
+      padding-left: 0;
+    }
   }
 
   &:focus-within {
@@ -38,6 +42,7 @@
     font-size: inherit;
     font-weight: medium;
     padding: var(--space-3) 0;
+    padding-left: var(--space-4);
 
     color: var(--gray-12);
 
diff --git a/packages/website-ue/src/components/ToolBanner.astro b/packages/website-ue/src/components/ToolBanner.astro
index d60d36d0b..4a7065c4b 100644
--- a/packages/website-ue/src/components/ToolBanner.astro
+++ b/packages/website-ue/src/components/ToolBanner.astro
@@ -15,8 +15,9 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 ---
 
 <style>
-  .tool-hero {
+  .tool-banner {
     background-size: cover;
+    margin-bottom: calc(var(--space-5) - var(--space-4));
 
     .content {
       width: 100%;
@@ -63,7 +64,7 @@ const toolStrings = strings.tools[tool.id as keyof typeof strings.tools];
 </style>
 
 <div
-  class="tool-hero"
+  class="tool-banner"
   style={{
     backgroundImage: `url(/assets/tools/${tool.id}.webp)`,
     backgroundPosition: tool.banner_background_position ?? "top",
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx b/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
index 6caec4e6a..355db2c3c 100644
--- a/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
+++ b/packages/website-ue/src/pages/[...locale]/avatars/_index.tsx
@@ -1,6 +1,8 @@
 import { useMemo } from "react";
 import { AvatarCard } from "../../../components/AvatarCard";
+import { AvatarControls } from "../../../components/AvatarControls";
 import { IncrementalLoader } from "../../../components/IncrementalLoader";
+import { Section } from "../../../components/Section";
 import { api } from "../../../core/api/dynamic";
 import { useAwait } from "../../../hooks/useAwait";
 import { useGameStrings } from "../../../hooks/useGameStrings";
@@ -75,13 +77,21 @@ function Content({}: ContentProps) {
   }, []);
 
   return (
-    <div className="avatars">
-      <IncrementalLoader
-        initial={40}
-        intermediate={10}
-        data={ordered}
-        Component={AvatarCard}
-      />
-    </div>
+    <>
+      <Section>
+        <AvatarControls />
+      </Section>
+
+      <Section>
+        <div className="avatars">
+          <IncrementalLoader
+            initial={40}
+            intermediate={10}
+            data={ordered}
+            Component={AvatarCard}
+          />
+        </div>
+      </Section>
+    </>
   );
 }
diff --git a/packages/website-ue/src/pages/[...locale]/avatars/index.astro b/packages/website-ue/src/pages/[...locale]/avatars/index.astro
index 736eca659..2286e4766 100644
--- a/packages/website-ue/src/pages/[...locale]/avatars/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/avatars/index.astro
@@ -1,5 +1,4 @@
 ---
-import Section from "../../../components/Section.astro";
 import ToolBanner from "../../../components/ToolBanner.astro";
 import { tools } from "../../../core/tools/tools";
 import BaseLayout from "../../../layouts/BaseLayout.astro";
@@ -21,9 +20,7 @@ const { locale } = Astro.props;
 <BaseLayout {locale} accent="gold">
   <ToolBanner {locale} tool={tools.avatars} slot="pre-app" />
 
-  <Section>
-    <Page {locale} client:only="react">
-      <Page {locale} skeleton slot="fallback" />
-    </Page>
-  </Section>
+  <Page {locale} client:only="react">
+    <Page {locale} skeleton slot="fallback" />
+  </Page>
 </BaseLayout>
diff --git a/packages/website-ue/src/pages/[...locale]/index.astro b/packages/website-ue/src/pages/[...locale]/index.astro
index 8d8269016..489fc40c2 100644
--- a/packages/website-ue/src/pages/[...locale]/index.astro
+++ b/packages/website-ue/src/pages/[...locale]/index.astro
@@ -4,7 +4,7 @@ import "@radix-ui/colors/amber-dark.css";
 import type { GetStaticPaths } from "astro";
 import ColorScale from "../../components/ColorScale.astro";
 import HomeHero from "../../components/HomeHero.astro";
-import Section from "../../components/Section.astro";
+import Section from "../../components/Section";
 import ToolCard from "../../components/ToolCard.astro";
 import { tools } from "../../core/tools/tools";
 import BaseLayout from "../../layouts/BaseLayout.astro";