web: add sticker search and close formatting/media checklist items

web/src/components/MessageComposer.tsx

@@ -123,6 +123,7 @@ export function MessageComposer() {
   const [showStickerMenu, setShowStickerMenu] = useState(false);
   const [showGifMenu, setShowGifMenu] = useState(false);
   const [stickerTab, setStickerTab] = useState<"all" | "favorites">("all");
+  const [stickerQuery, setStickerQuery] = useState("");
   const [gifTab, setGifTab] = useState<"all" | "favorites">("all");
   const [gifQuery, setGifQuery] = useState("");
   const [gifResults, setGifResults] = useState<Array<{ name: string; url: string }>>([]);
@@ -1132,8 +1133,14 @@ export function MessageComposer() {
 
       {showStickerMenu ? (
       <div className="mb-2 rounded-xl border border-slate-700/80 bg-slate-900/95 p-2">
-          <div className="mb-2 flex items-center justify-between">
+          <div className="mb-2 flex items-center justify-between gap-2">
             <p className="text-xs font-semibold text-slate-200">Stickers</p>
+            <input
+              className="w-full max-w-xs rounded border border-slate-700/80 bg-slate-800/80 px-2 py-1 text-xs outline-none placeholder:text-slate-400 focus:border-sky-500"
+              onChange={(event) => setStickerQuery(event.target.value)}
+              placeholder="Search sticker"
+              value={stickerQuery}
+            />
             <div className="flex items-center gap-1">
               <button
                 className={`rounded px-2 py-1 text-[11px] ${stickerTab === "all" ? "bg-sky-500 text-slate-950" : "bg-slate-700"}`}
@@ -1155,7 +1162,10 @@ export function MessageComposer() {
             </div>
           </div>
           <div className="grid grid-cols-4 gap-2 md:grid-cols-8">
-            {STICKER_PRESETS.filter((item) => (stickerTab === "favorites" ? favoriteStickers.has(item.url) : true)).map((sticker) => (
+            {STICKER_PRESETS
+              .filter((item) => (stickerTab === "favorites" ? favoriteStickers.has(item.url) : true))
+              .filter((item) => item.name.toLowerCase().includes(stickerQuery.trim().toLowerCase()))
+              .map((sticker) => (
               <button
                 className="relative rounded-lg bg-slate-800/80 p-2 hover:bg-slate-700"
                 key={sticker.url}
@@ -1177,6 +1187,11 @@ export function MessageComposer() {
               </button>
             ))}
           </div>
+          {STICKER_PRESETS
+            .filter((item) => (stickerTab === "favorites" ? favoriteStickers.has(item.url) : true))
+            .filter((item) => item.name.toLowerCase().includes(stickerQuery.trim().toLowerCase())).length === 0 ? (
+            <p className="mt-2 text-xs text-slate-400">No stickers found</p>
+          ) : null}
         </div>
       ) : null}