fix: swap event search icon for clear control

src/index.css

@@ -209,6 +209,13 @@ html.dark .event-range-modal-overlay {
 html.dark .event-date-range-modal {
   box-shadow: 0 1rem 3rem hsl(0 0% 0% / 0.34);
 }
+
+.event-search-input::-webkit-search-cancel-button {
+  display: none;
+  -webkit-appearance: none;
+  appearance: none;
+}
+
 @keyframes event-range-fade-in {
   from { opacity: 0; }
   to { opacity: 1; }

src/views/Events.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import Image from "next/image";
-import { Search } from "lucide-react";
+import { Search, X } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { EventCard } from "@/components/events/EventCard";
@@ -108,6 +108,7 @@ export default function Events({
   const [loadError, setLoadError] = useState(false);
   const [retryToken, setRetryToken] = useState(0);
   const [now] = useState(() => Date.now());
+  const searchInputRef = useRef<HTMLInputElement>(null);
   const resultsRef = useRef<HTMLDivElement>(null);
   const skipFirstFetch = useRef(true);
 
@@ -264,14 +265,30 @@ export default function Events({
         <section aria-label="نتایج رویدادها" className="min-w-0 lg:flex lg:flex-col">
             <div dir="rtl" className="mb-4 flex items-center gap-2 sm:mb-5">
               <div className="relative min-w-0 flex-1">
-                <Search aria-hidden="true" className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                {search ? (
+                  <button
+                    type="button"
+                    aria-label="پاک‌کردن جستجو"
+                    className="absolute left-2 top-1/2 inline-flex size-7 -translate-y-1/2 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-secondary hover:text-foreground"
+                    onPointerDown={(event) => event.preventDefault()}
+                    onClick={() => {
+                      setSearch("");
+                      searchInputRef.current?.focus();
+                    }}
+                  >
+                    <X aria-hidden="true" className="size-4" />
+                  </button>
+                ) : (
+                  <Search aria-hidden="true" className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+                )}
                 <Input
+                  ref={searchInputRef}
                   type="search"
                   placeholder="جستجو در رویدادها…"
                   aria-label="جستجو در رویدادها"
                   value={search}
                   onChange={(event) => setSearch(event.target.value)}
-                  className="h-11 pl-10 pr-3 focus-visible:ring-0 focus-visible:ring-offset-0"
+                  className="event-search-input h-11 pl-10 pr-3 focus-visible:ring-0 focus-visible:ring-offset-0"
                 />
               </div>
               <EventFiltersDrawer