feat: admin UX — shared input classes, autocomplete role, auto-save team, video improvements

- Extract base input classes (baseInput, textAreaInput, smallInput, dashedInput) with gold hover
- Move AutocompleteMulti to shared FormField, support · separator
- Team editor: auto-save with toast, split name into first/last, autocomplete role from class styles
- Team photo: click-to-upload overlay, smaller 130px thumbnail
- Hero videos: play on hover, file size display, 8MB warning, total size performance table
- Remove ctaHref field from Hero admin (unused on frontend)
- Move Toast to shared _components for reuse across admin pages

src/app/admin/_components/FormField.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect, useState } from "react";
+import { useRef, useEffect, useState, useMemo } from "react";
 import { Plus, X, Upload, Loader2, Link, ImageIcon, Calendar, AlertCircle, MapPin } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
 import type { RichListItem, VictoryItem } from "@/types/content";
@@ -11,7 +11,11 @@ interface InputFieldProps {
   type?: "text" | "url" | "tel";
 }
 
-const inputCls = "w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors";
+const baseInput = "w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none hover:border-gold/30 focus:border-gold transition-colors";
+const textAreaInput = `${baseInput} resize-none overflow-hidden`;
+const smallInput = "rounded-md border border-white/10 bg-neutral-800 px-2.5 py-1.5 text-sm text-white placeholder-neutral-600 outline-none hover:border-gold/30 focus:border-gold transition-colors";
+const dashedInput = "flex-1 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-white placeholder-neutral-600 outline-none hover:border-gold/30 hover:placeholder-neutral-500 focus:border-gold/50 transition-colors";
+const inputCls = baseInput;
 
 export function InputField({
   label,
@@ -143,7 +147,7 @@ export function TextareaField({
         onChange={(e) => onChange(e.target.value)}
         placeholder={placeholder}
         rows={rows}
-        className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors resize-none overflow-hidden"
+        className={textAreaInput}
       />
     </div>
   );
@@ -388,7 +392,7 @@ export function ListField({ label, items, onChange, placeholder }: ListFieldProp
             onChange={(e) => setDraft(e.target.value)}
             onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
             placeholder={placeholder || "Добавить..."}
-            className="flex-1 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+            className={dashedInput}
           />
           <button
             type="button"
@@ -510,7 +514,7 @@ export function VictoryListField({ label, items, onChange, placeholder, onLinkVa
             onChange={(e) => setDraft(e.target.value)}
             onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
             placeholder={placeholder || "Добавить..."}
-            className="flex-1 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+            className={dashedInput}
           />
           <button
             type="button"
@@ -770,21 +774,21 @@ export function VictoryItemListField({ label, items, onChange, cityErrors, cityS
                 value={item.place || ""}
                 onChange={(e) => update(i, "place", e.target.value)}
                 placeholder="1 место, финалист..."
-                className="w-28 shrink-0 rounded-md border border-white/10 bg-neutral-800 px-2.5 py-1.5 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+                className={`w-28 shrink-0 ${smallInput}`}
               />
               <input
                 type="text"
                 value={item.category || ""}
                 onChange={(e) => update(i, "category", e.target.value)}
                 placeholder="Категория"
-                className="flex-1 rounded-md border border-white/10 bg-neutral-800 px-2.5 py-1.5 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+                className={`flex-1 ${smallInput}`}
               />
               <input
                 type="text"
                 value={item.competition || ""}
                 onChange={(e) => update(i, "competition", e.target.value)}
                 placeholder="Чемпионат"
-                className="flex-1 rounded-md border border-white/10 bg-neutral-800 px-2.5 py-1.5 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold transition-colors"
+                className={`flex-1 ${smallInput}`}
               />
               <button
                 type="button"
@@ -828,3 +832,105 @@ export function VictoryItemListField({ label, items, onChange, cityErrors, cityS
     </div>
   );
 }
+
+// --- Autocomplete Multi-Select ---
+export function AutocompleteMulti({
+  label,
+  value,
+  onChange,
+  options,
+  placeholder,
+}: {
+  label: string;
+  value: string;
+  onChange: (v: string) => void;
+  options: string[];
+  placeholder?: string;
+}) {
+  const selected = useMemo(() => (value ? value.split(/\s*[,·]\s*/).filter(Boolean) : []), [value]);
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const filtered = useMemo(() => {
+    if (!query) return options.filter((o) => !selected.includes(o));
+    const q = query.toLowerCase();
+    return options.filter((o) => !selected.includes(o) && o.toLowerCase().includes(q));
+  }, [query, options, selected]);
+
+  useEffect(() => {
+    if (!open) return;
+    function handle(e: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setOpen(false);
+        setQuery("");
+      }
+    }
+    document.addEventListener("mousedown", handle);
+    return () => document.removeEventListener("mousedown", handle);
+  }, [open]);
+
+  function addItem(item: string) {
+    onChange([...selected, item].join(" · "));
+    setQuery("");
+    inputRef.current?.focus();
+  }
+
+  function removeItem(item: string) {
+    onChange(selected.filter((s) => s !== item).join(" · "));
+  }
+
+  function handleKeyDown(e: React.KeyboardEvent) {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered.length > 0) addItem(filtered[0]);
+      else if (query.trim()) addItem(query.trim());
+    }
+    if (e.key === "Backspace" && !query && selected.length > 0) {
+      removeItem(selected[selected.length - 1]);
+    }
+    if (e.key === "Escape") { setOpen(false); setQuery(""); }
+  }
+
+  return (
+    <div ref={containerRef} className="relative">
+      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
+      <div
+        onClick={() => { setOpen(true); inputRef.current?.focus(); }}
+        className={`flex flex-wrap items-center gap-1.5 rounded-lg border bg-neutral-800 px-3 py-2 min-h-[42px] cursor-text transition-colors ${
+          open ? "border-gold" : "border-white/10 hover:border-gold/30"
+        }`}
+      >
+        {selected.map((item) => (
+          <span key={item} className="inline-flex items-center gap-1 rounded-full bg-gold/15 border border-gold/30 px-2.5 py-0.5 text-xs font-medium text-gold">
+            {item}
+            <button type="button" onClick={(e) => { e.stopPropagation(); removeItem(item); }} className="text-gold/60 hover:text-gold transition-colors">
+              <X size={10} />
+            </button>
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => { setQuery(e.target.value); setOpen(true); }}
+          onFocus={() => setOpen(true)}
+          onKeyDown={handleKeyDown}
+          placeholder={selected.length === 0 ? placeholder : ""}
+          className="flex-1 min-w-[80px] bg-transparent text-sm text-white placeholder-neutral-500 outline-none"
+        />
+      </div>
+      {open && filtered.length > 0 && (
+        <div className="absolute z-50 mt-1 w-full rounded-lg border border-white/10 bg-neutral-800 shadow-xl overflow-hidden max-h-48 overflow-y-auto">
+          {filtered.map((opt) => (
+            <button key={opt} type="button" onMouseDown={(e) => e.preventDefault()} onClick={() => addItem(opt)}
+              className="w-full px-4 py-2 text-left text-sm text-white hover:bg-white/5 transition-colors">
+              {opt}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

src/app/admin/_components/Toast.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { useState, useEffect, useCallback, createContext, useContext } from "react";
+import { X, AlertCircle, CheckCircle2 } from "lucide-react";
+
+interface ToastItem {
+  id: number;
+  message: string;
+  type: "error" | "success";
+}
+
+interface ToastContextValue {
+  showError: (message: string) => void;
+  showSuccess: (message: string) => void;
+}
+
+const ToastContext = createContext<ToastContextValue>({
+  showError: () => {},
+  showSuccess: () => {},
+});
+
+export function useToast() {
+  return useContext(ToastContext);
+}
+
+let nextId = 0;
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [toasts, setToasts] = useState<ToastItem[]>([]);
+
+  const addToast = useCallback((message: string, type: "error" | "success") => {
+    const id = ++nextId;
+    setToasts((prev) => [...prev, { id, message, type }]);
+    setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 4000);
+  }, []);
+
+  const showError = useCallback((message: string) => addToast(message, "error"), [addToast]);
+  const showSuccess = useCallback((message: string) => addToast(message, "success"), [addToast]);
+
+  return (
+    <ToastContext.Provider value={{ showError, showSuccess }}>
+      {children}
+      {toasts.length > 0 && (
+        <div className="fixed bottom-4 right-4 z-[60] flex flex-col gap-2 max-w-sm">
+          {toasts.map((t) => (
+            <div
+              key={t.id}
+              className={`flex items-center gap-2 rounded-lg border px-3 py-2.5 text-sm shadow-lg animate-in slide-in-from-right ${
+                t.type === "error"
+                  ? "bg-red-950/90 border-red-500/30 text-red-200"
+                  : "bg-emerald-950/90 border-emerald-500/30 text-emerald-200"
+              }`}
+            >
+              {t.type === "error" ? <AlertCircle size={14} className="shrink-0" /> : <CheckCircle2 size={14} className="shrink-0" />}
+              <span className="flex-1">{t.message}</span>
+              <button
+                onClick={() => setToasts((prev) => prev.filter((tt) => tt.id !== t.id))}
+                className="shrink-0 text-neutral-400 hover:text-white"
+              >
+                <X size={12} />
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </ToastContext.Provider>
+  );
+}