Add search to picker and some small styling suggestions

src/App.css

@@ -53,6 +53,19 @@
   gap: 1rem;
 }
 
+.picker-search {
+  margin: 0.5rem;
+}
+
+.image-grid-wrapper {
+  overflow: auto;
+}
+
+.image-grid {
+  margin: 0.5rem;
+  border-radius: 0.25rem;
+}
+
 .buttons {
   display: flex;
   align-items: center;
@@ -73,4 +86,15 @@
 
 .footer > a:hover {
   color: rgb(255, 255, 255);
-}
+}
+
+::-webkit-scrollbar {
+  width: 0.5rem;
+  height: 0.5rem;
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: white;
+  border-radius: 1rem;
+  min-height: 2rem;
+}

src/App.jsx

@@ -162,7 +162,7 @@ ctx.drawImage(img, 0,0, img.width, img.height,centerShift_x,centerShift_y,img.wi
                 onChange={(e, v) => setRotate(v)}
                 min={-10}
                 max={10}
-                step={1}
+                step={0.2}
                 track={false}
                 color="secondary"
               />

src/components/Picker.jsx

@@ -1,12 +1,30 @@
-import ImageList from "@mui/material/ImageList";
-import ImageListItem from "@mui/material/ImageListItem";
-import Popover from "@mui/material/Popover";
-import Button from "@mui/material/Button";
-import { useState } from "react";
-import characters from "../characters.json";
+import {
+  ImageList,
+  ImageListItem,
+  Popover,
+  Button,
+  TextField,
+} from "@mui/material";
+import { useState, useEffect } from "react";
+import default_characters from "../characters.json";
 
 export default function Picker({ setCharacter }) {
   const [anchorEl, setAnchorEl] = useState(null);
+  const [search, setSearch] = useState("");
+  const [characters, setCharacters] = useState(default_characters);
+
+  useEffect(() => {
+    setCharacters(
+      default_characters.filter((char) => {
+        const s = search.toLowerCase();
+        return (
+          s === char.id ||
+          char.name.toLowerCase().includes(s) ||
+          char.character.toLowerCase().includes(s)
+        );
+      })
+    );
+  }, [search]);
 
   const handleClick = (event) => {
     setAnchorEl(event.currentTarget);
@@ -39,40 +57,55 @@ export default function Picker({ setCharacter }) {
           horizontal: "left",
         }}
       >
-        <ImageList
-          sx={{
-            width: window.innerWidth < 600 ? 300 : 500,
-            height: 450,
-          }}
-          cols={window.innerWidth < 600 ? 3 : 4}
-          rowHeight={140}
-        >
-          {characters.map((c, index) => (
-            <ImageListItem
-              key={index}
-              onClick={() => {
-                handleClose();
-                setCharacter(index);
-              }}
-              sx={{
-                cursor: "pointer",
-                "&:hover": {
-                  opacity: 0.5,
-                },
-                "&:active": {
-                  opacity: 0.8,
-                },
-              }}
-            >
-              <img
-                src={`/img/${c.img}`}
-                srcSet={`/img/${c.img}`}
-                alt={c.name}
-                loading="lazy"
-              />
-            </ImageListItem>
-          ))}
-        </ImageList>
+        <div className="picker-search">
+          <TextField
+            label="Search"
+            size="small"
+            color="secondary"
+            value={search}
+            multiline={true}
+            fullWidth
+            onChange={(e) => setSearch(e.target.value)}
+          />
+        </div>
+        <div className="image-grid-wrapper">
+          <ImageList
+            sx={{
+              width: window.innerWidth < 600 ? 300 : 500,
+              height: 450,
+              overflow: "visible",
+            }}
+            cols={window.innerWidth < 600 ? 3 : 4}
+            rowHeight={140}
+            className="image-grid"
+          >
+            {characters.map((c, index) => (
+              <ImageListItem
+                key={index}
+                onClick={() => {
+                  handleClose();
+                  setCharacter(index);
+                }}
+                sx={{
+                  cursor: "pointer",
+                  "&:hover": {
+                    opacity: 0.5,
+                  },
+                  "&:active": {
+                    opacity: 0.8,
+                  },
+                }}
+              >
+                <img
+                  src={`/img/${c.img}`}
+                  srcSet={`/img/${c.img}`}
+                  alt={c.name}
+                  loading="lazy"
+                />
+              </ImageListItem>
+            ))}
+          </ImageList>
+        </div>
       </Popover>
     </div>
   );