fixes and architecture

src/components/catalog/SortDropdown.tsx

@@ -0,0 +1,67 @@
+"use client";
+import { useState, useRef, useEffect } from "react";
+import { FiChevronDown, FiCheck } from "react-icons/fi";
+import { useTheme } from "@/context/ThemeContext";
+import { SORT_OPTIONS } from "./sortOptions";
+
+interface Props { value: string; onChange: (v: string) => void; }
+
+export function SortDropdown({ value, onChange }: Props) {
+  const [open, setOpen] = useState(false);
+  const { isDark } = useTheme();
+  const ref = useRef<HTMLDivElement>(null);
+  const active = SORT_OPTIONS.find((o) => o.value === value) ?? SORT_OPTIONS[0];
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, []);
+
+  const triggerCl = isDark
+    ? "bg-slate-900 border-slate-700 text-slate-200 hover:border-violet-500/50"
+    : "bg-white border-slate-200 text-slate-700 hover:border-violet-400";
+  const menuCl = isDark
+    ? "bg-slate-900 border-slate-700 shadow-xl shadow-black/40"
+    : "bg-white border-slate-200 shadow-xl shadow-slate-200/60";
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        onClick={() => setOpen((p) => !p)}
+        className={`flex items-center gap-2 h-9 pl-3 pr-2.5 rounded-xl border text-xs font-medium transition-all ${triggerCl} ${open ? "border-violet-500/60" : ""}`}
+      >
+        <active.icon className={`text-sm shrink-0 ${isDark ? "text-violet-400" : "text-violet-500"}`} />
+        <span className="whitespace-nowrap">{active.label}</span>
+        <FiChevronDown className={`text-slate-400 text-xs shrink-0 transition-transform duration-200 ${open ? "rotate-180" : ""}`} />
+      </button>
+
+      {open && (
+        <div className={`absolute right-0 top-full mt-1.5 z-50 min-w-[188px] rounded-2xl border overflow-hidden ${menuCl}`}>
+          <div className="py-1.5">
+            {SORT_OPTIONS.map((opt) => {
+              const isActive = opt.value === value;
+              return (
+                <button
+                  key={opt.value}
+                  onClick={() => { onChange(opt.value); setOpen(false); }}
+                  className={`w-full flex items-center gap-3 px-3.5 py-2.5 text-xs font-medium transition-colors text-left ${
+                    isActive
+                      ? isDark ? "bg-violet-600/20 text-violet-300" : "bg-violet-50 text-violet-700"
+                      : isDark ? "text-slate-300 hover:bg-slate-800" : "text-slate-600 hover:bg-slate-50"
+                  }`}
+                >
+                  <opt.icon className={`text-sm shrink-0 ${isActive ? (isDark ? "text-violet-400" : "text-violet-500") : "text-slate-400"}`} />
+                  <span className="flex-1">{opt.label}</span>
+                  {isActive && <FiCheck className={`text-xs shrink-0 ${isDark ? "text-violet-400" : "text-violet-500"}`} />}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}