feat: news improvements — crop preview, auto-date, validation, add-to-top

- Draggable focal point crop preview for news images (admin + user + modal)
- Auto-set date+time on creation, remove date picker
- Draft validation: title, text, image required — "Черновик" badge if missing
- Empty/draft news filtered from user side
- ArrayEditor: addPosition="top" option, fix new item expand + index shift
- News sorted newest first, "Показать ещё" pagination

src/app/admin/_components/ArrayEditor.tsx

@@ -13,6 +13,9 @@ interface ArrayEditorProps<T> {
   addLabel?: string;
   collapsible?: boolean;
   getItemTitle?: (item: T, index: number) => string;
+  getItemBadge?: (item: T, index: number) => React.ReactNode;
+  hiddenItems?: Set<number>;
+  addPosition?: "top" | "bottom";
 }
 
 export function ArrayEditor<T>({
@@ -24,6 +27,9 @@ export function ArrayEditor<T>({
   addLabel = "Добавить",
   collapsible = false,
   getItemTitle,
+  getItemBadge,
+  hiddenItems,
+  addPosition = "bottom",
 }: ArrayEditorProps<T>) {
   const [dragIndex, setDragIndex] = useState<number | null>(null);
   const [insertAt, setInsertAt] = useState<number | null>(null);
@@ -33,6 +39,7 @@ export function ArrayEditor<T>({
   const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
   const [mounted, setMounted] = useState(false);
   const [newItemIndex, setNewItemIndex] = useState<number | null>(null);
+  const [droppedIndex, setDroppedIndex] = useState<number | null>(null);
   const [collapsed, setCollapsed] = useState<Set<number>>(() => collapsible ? new Set(items.map((_, i) => i)) : new Set());
 
   function toggleCollapse(index: number) {
@@ -128,6 +135,8 @@ export function ArrayEditor<T>({
             const [moved] = updated.splice(capturedDrag, 1);
             updated.splice(targetIndex, 0, moved);
             onChange(updated);
+            setDroppedIndex(targetIndex);
+            setTimeout(() => setDroppedIndex(null), 1500);
           }
         }
       });
@@ -146,14 +155,15 @@ export function ArrayEditor<T>({
     if (dragIndex === null || insertAt === null) {
       return items.map((item, i) => {
         const isCollapsed = collapsible && collapsed.has(i) && newItemIndex !== i;
+        const isHidden = hiddenItems?.has(i) ?? false;
         const title = getItemTitle?.(item, i) || `#${i + 1}`;
         return (
           <div
             key={i}
             ref={(el) => { itemRefs.current[i] = el; }}
-            className={`rounded-lg border bg-neutral-900/50 mb-3 hover:border-white/25 hover:bg-neutral-800/50 transition-all ${
-              newItemIndex === i ? "border-gold/40 ring-1 ring-gold/20" : "border-white/10"
-            }`}
+            className={`rounded-lg border bg-neutral-900/50 mb-3 hover:border-white/25 hover:bg-neutral-800/50 focus-within:border-gold/50 focus-within:bg-neutral-800 transition-all ${
+              newItemIndex === i || droppedIndex === i ? "border-gold/40 ring-1 ring-gold/20" : "border-white/10"
+            } ${isHidden ? "hidden" : ""}`}
           >
             <div className={`flex items-center justify-between gap-2 p-4 ${isCollapsed ? "" : "pb-0 mb-3"}`}>
               <div className="flex items-center gap-2 flex-1 min-w-0">
@@ -170,6 +180,7 @@ export function ArrayEditor<T>({
                     className="flex items-center gap-2 flex-1 min-w-0 text-left cursor-pointer group"
                   >
                     <span className="text-sm font-medium text-neutral-300 truncate group-hover:text-white transition-colors">{title}</span>
+                    {getItemBadge?.(item, i)}
                     <ChevronDown size={14} className={`text-neutral-500 transition-transform duration-200 shrink-0 ${isCollapsed ? "" : "rotate-180"}`} />
                   </button>
                 )}
@@ -220,35 +231,48 @@ export function ArrayEditor<T>({
         elements.push(
           <div
             key="placeholder"
-            className="rounded-lg border-2 border-dashed border-rose-500/50 bg-rose-500/5 mb-3"
-            style={{ height: dragSize.h }}
+            className="rounded-lg border-2 border-dashed border-gold/40 bg-gold/5 mb-3"
+            style={{ height: collapsible ? 48 : dragSize.h }}
           />
         );
       }
 
       const item = items[i];
+      const dragTitle = getItemTitle?.(item, i) || `#${i + 1}`;
       elements.push(
         <div
           key={i}
           ref={(el) => { itemRefs.current[i] = el; }}
-          className="rounded-lg border border-white/10 bg-neutral-900/50 p-4 mb-3 hover:border-white/25 hover:bg-neutral-800/50 transition-colors"
+          className="rounded-lg border border-white/10 bg-neutral-900/50 mb-3 transition-colors"
         >
-          <div className="flex items-start justify-between gap-2 mb-3">
-            <div
-              className="cursor-grab active:cursor-grabbing rounded p-1 text-neutral-500 hover:text-white transition-colors select-none"
-              onMouseDown={(e) => handleGripMouseDown(e, i)}
-            >
-              <GripVertical size={16} />
+          {collapsible ? (
+            <div className="flex items-center gap-2 p-4">
+              <GripVertical size={16} className="text-neutral-500 shrink-0" />
+              <span className="text-sm font-medium text-neutral-300 truncate">{dragTitle}</span>
+              {getItemBadge?.(item, i)}
             </div>
-            <button
-              type="button"
-              onClick={() => removeItem(i)}
-              className="rounded p-1 text-neutral-500 hover:text-red-400 transition-colors"
-            >
-              <Trash2 size={16} />
-            </button>
-          </div>
-          {renderItem(item, i, (updated) => updateItem(i, updated))}
+          ) : (
+            <>
+              <div className="flex items-start justify-between gap-2 p-4 pb-0 mb-3">
+                <div
+                  className="cursor-grab active:cursor-grabbing rounded p-1 text-neutral-500 hover:text-white transition-colors select-none"
+                  onMouseDown={(e) => handleGripMouseDown(e, i)}
+                >
+                  <GripVertical size={16} />
+                </div>
+                <button
+                  type="button"
+                  onClick={() => removeItem(i)}
+                  className="rounded p-1 text-neutral-500 hover:text-red-400 transition-colors"
+                >
+                  <Trash2 size={16} />
+                </button>
+              </div>
+              <div className="px-4 pb-4">
+                {renderItem(item, i, (updated) => updateItem(i, updated))}
+              </div>
+            </>
+          )}
         </div>
       );
       visualIndex++;
@@ -258,8 +282,8 @@ export function ArrayEditor<T>({
       elements.push(
         <div
           key="placeholder"
-          className="rounded-lg border-2 border-dashed border-rose-500/50 bg-rose-500/5 mb-3"
-          style={{ height: dragSize.h }}
+          className="rounded-lg border-2 border-dashed border-gold/40 bg-gold/5 mb-3"
+          style={{ height: collapsible ? 48 : dragSize.h }}
         />
       );
     }
@@ -273,18 +297,44 @@ export function ArrayEditor<T>({
         <h3 className="text-sm font-medium text-neutral-300 mb-3">{label}</h3>
       )}
 
+      {addPosition === "top" && (
+        <button
+          type="button"
+          onClick={() => {
+            onChange([createItem(), ...items]);
+            setNewItemIndex(0);
+            // Shift collapsed indices and ensure new item is expanded
+            setCollapsed(prev => {
+              const next = new Set<number>();
+              for (const idx of prev) next.add(idx + 1);
+              return next;
+            });
+          }}
+          className="mb-3 flex items-center gap-2 rounded-lg border border-dashed border-white/20 px-4 py-2.5 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors"
+        >
+          <Plus size={16} />
+          {addLabel}
+        </button>
+      )}
+
       <div>
         {renderList()}
       </div>
 
-      <button
-        type="button"
-        onClick={() => { onChange([...items, createItem()]); setNewItemIndex(items.length); }}
-        className="mt-3 flex items-center gap-2 rounded-lg border border-dashed border-white/20 px-4 py-2.5 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors"
-      >
-        <Plus size={16} />
-        {addLabel}
-      </button>
+      {addPosition === "bottom" && (
+        <button
+          type="button"
+          onClick={() => {
+            onChange([...items, createItem()]);
+            setNewItemIndex(items.length);
+            setCollapsed(prev => { const next = new Set(prev); next.delete(items.length); return next; });
+          }}
+          className="mt-3 flex items-center gap-2 rounded-lg border border-dashed border-white/20 px-4 py-2.5 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors"
+        >
+          <Plus size={16} />
+          {addLabel}
+        </button>
+      )}
 
       {/* Floating clone following cursor */}
       {mounted && dragIndex !== null &&
@@ -298,9 +348,9 @@ export function ArrayEditor<T>({
               height: dragSize.h,
             }}
           >
-            <div className="h-full rounded-lg border-2 border-rose-500 bg-neutral-900/95 shadow-2xl shadow-rose-500/20 flex items-center gap-3 px-4">
-              <GripVertical size={16} className="text-rose-400 shrink-0" />
-              <span className="text-sm text-neutral-300">Перемещение элемента...</span>
+            <div className="h-full rounded-lg border-2 border-gold/60 bg-neutral-900/95 shadow-2xl shadow-gold/20 flex items-center gap-3 px-4">
+              <GripVertical size={16} className="text-gold shrink-0" />
+              <span className="text-sm text-neutral-300">{collapsible && dragIndex !== null ? (getItemTitle?.(items[dragIndex], dragIndex) || "Перемещение...") : "Перемещение элемента..."}</span>
             </div>
           </div>,
           document.body

src/app/admin/contact/page.tsx

@@ -1,54 +1,240 @@
 "use client";
 
+import { useState } from "react";
+import { ChevronDown, Plus, X, AlertCircle, Check } from "lucide-react";
 import { SectionEditor } from "../_components/SectionEditor";
-import { InputField, TextareaField } from "../_components/FormField";
-import { ArrayEditor } from "../_components/ArrayEditor";
+import { InputField } from "../_components/FormField";
 import type { ContactInfo } from "@/types/content";
 
+// --- Phone input with mask ---
+function PhoneField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  function formatPhone(raw: string): string {
+    const digits = raw.replace(/\D/g, "").slice(0, 12);
+    if (digits.length === 0) return "+375 ";
+    let result = "+";
+    for (let i = 0; i < digits.length; i++) {
+      if (i === 3) result += " (";
+      if (i === 5) result += ") ";
+      if (i === 8) result += "-";
+      if (i === 10) result += "-";
+      result += digits[i];
+    }
+    return result;
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const formatted = formatPhone(e.target.value);
+    onChange(formatted);
+  }
+
+  const digits = value.replace(/\D/g, "");
+  const isComplete = digits.length === 12;
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">Телефон</label>
+      <div className="relative">
+        <input
+          type="tel"
+          value={value}
+          onChange={handleChange}
+          placeholder="+375 (XX) XXX-XX-XX"
+          className={`w-full rounded-lg border bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+            value && !isComplete ? "border-red-500/50" : "border-white/10 focus:border-gold"
+          }`}
+        />
+        {isComplete && (
+          <Check size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-emerald-400" />
+        )}
+      </div>
+      {value && !isComplete && (
+        <p className="mt-1 text-[11px] text-red-400">Формат: +375 (XX) XXX-XX-XX</p>
+      )}
+    </div>
+  );
+}
+
+// --- Instagram field with validation ---
+function InstagramField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  function getError(): string | null {
+    if (!value) return null;
+    try {
+      const url = new URL(value);
+      const host = url.hostname.replace("www.", "");
+      if (host !== "instagram.com" && host !== "instagr.am") {
+        return "Ссылка должна вести на instagram.com";
+      }
+      return null;
+    } catch {
+      return "Некорректная ссылка";
+    }
+  }
+
+  const error = getError();
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">Instagram</label>
+      <div className="relative">
+        <input
+          type="url"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://instagram.com/blackheartdancehouse"
+          className={`w-full rounded-lg border bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+            error ? "border-red-500/50" : "border-white/10 focus:border-gold"
+          }`}
+        />
+        {value && !error && (
+          <Check size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-emerald-400" />
+        )}
+        {error && (
+          <AlertCircle size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-red-400" />
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-[11px] text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}
+
+// --- Compact address list ---
+function AddressList({ items, onChange }: { items: string[]; onChange: (items: string[]) => void }) {
+  const [draft, setDraft] = useState("");
+
+  function add() {
+    const val = draft.trim();
+    if (!val) return;
+    onChange([...items, val]);
+    setDraft("");
+  }
+
+  function remove(index: number) {
+    onChange(items.filter((_, i) => i !== index));
+  }
+
+  function update(index: number, value: string) {
+    onChange(items.map((item, i) => (i === index ? value : item)));
+  }
+
+  return (
+    <div className="space-y-2">
+      {items.map((addr, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <input
+            type="text"
+            value={addr}
+            onChange={(e) => update(i, e.target.value)}
+            className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-sm text-white outline-none focus:border-gold transition-colors"
+          />
+          <button
+            type="button"
+            onClick={() => remove(i)}
+            className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      ))}
+      <div className="flex items-center gap-2">
+        <input
+          type="text"
+          value={draft}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
+          onBlur={add}
+          placeholder="Добавить адрес..."
+          className="flex-1 rounded-lg border border-dashed border-white/15 bg-neutral-800/50 px-4 py-2.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-gold/50 transition-colors"
+        />
+        <button
+          type="button"
+          onClick={add}
+          disabled={!draft.trim()}
+          className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-gold transition-colors disabled:opacity-30"
+        >
+          <Plus size={14} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// --- Collapsible section ---
+function CollapsibleSection({
+  title,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-xl border border-white/10 bg-neutral-900/30 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-between w-full px-5 py-3.5 text-left cursor-pointer group hover:bg-white/[0.02] transition-colors"
+      >
+        <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-white transition-colors">{title}</h3>
+        <ChevronDown
+          size={16}
+          className={`text-neutral-500 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+      <div
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
+      >
+        <div className="overflow-hidden">
+          <div className="px-5 pb-5 space-y-4">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ContactEditorPage() {
   return (
     <SectionEditor<ContactInfo> sectionKey="contact" title="Контакты">
       {(data, update) => (
-        <>
+        <div className="space-y-4">
           <InputField
             label="Заголовок секции"
             value={data.title}
             onChange={(v) => update({ ...data, title: v })}
           />
-          <InputField
-            label="Телефон"
-            value={data.phone}
-            onChange={(v) => update({ ...data, phone: v })}
-            type="tel"
-          />
-          <InputField
-            label="Instagram"
-            value={data.instagram}
-            onChange={(v) => update({ ...data, instagram: v })}
-            type="url"
-          />
+
+          <div className="grid gap-4 sm:grid-cols-2">
+            <PhoneField
+              value={data.phone}
+              onChange={(v) => update({ ...data, phone: v })}
+            />
+            <InstagramField
+              value={data.instagram}
+              onChange={(v) => update({ ...data, instagram: v })}
+            />
+          </div>
+
           <InputField
             label="Часы работы"
             value={data.workingHours}
             onChange={(v) => update({ ...data, workingHours: v })}
           />
-          <ArrayEditor
-            label="Адреса"
-            items={data.addresses}
-            onChange={(addresses) => update({ ...data, addresses })}
-            renderItem={(addr, _i, updateItem) => (
-              <InputField label="Адрес" value={addr} onChange={updateItem} />
-            )}
-            createItem={() => ""}
-            addLabel="Добавить адрес"
-          />
-          <TextareaField
-            label="URL карты (Yandex Maps iframe)"
-            value={data.mapEmbedUrl}
-            onChange={(v) => update({ ...data, mapEmbedUrl: v })}
-            rows={2}
-          />
-        </>
+
+          <CollapsibleSection title="Адреса">
+            <AddressList
+              items={data.addresses}
+              onChange={(addresses) => update({ ...data, addresses })}
+            />
+          </CollapsibleSection>
+
+        </div>
       )}
     </SectionEditor>
   );

src/app/admin/faq/page.tsx

@@ -23,6 +23,8 @@ export default function FAQEditorPage() {
             label="Вопросы и ответы"
             items={data.items}
             onChange={(items) => update({ ...data, items })}
+            collapsible
+            getItemTitle={(item) => item.question || "Без вопроса"}
             renderItem={(item, _i, updateItem) => (
               <div className="space-y-3">
                 <InputField

src/app/admin/master-classes/page.tsx

@@ -1,13 +1,45 @@
 "use client";
 
-import { useState, useRef, useEffect, useMemo } from "react";
+import { useState, useEffect } from "react";
+import Image from "next/image";
 import { SectionEditor } from "../_components/SectionEditor";
 import { InputField, TextareaField, ParticipantLimits, AutocompleteMulti } from "../_components/FormField";
 import { ArrayEditor } from "../_components/ArrayEditor";
-import { Plus, X, Upload, Loader2, ImageIcon, AlertCircle, Check } from "lucide-react";
+import { Plus, X, Upload, Loader2, AlertCircle, Check, Search } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
 import type { MasterClassItem, MasterClassSlot } from "@/types/content";
 
+// --- Helpers ---
+
+function isItemArchived(item: MasterClassItem): boolean {
+  const slots = item.slots ?? [];
+  if (slots.length === 0) return false;
+  const today = new Date().toISOString().slice(0, 10);
+  return slots.every((s) => s.date && s.date < today);
+}
+
+function itemMatchesSearch(item: MasterClassItem, query: string): boolean {
+  if (!query) return true;
+  const q = query.toLowerCase();
+  return (
+    (item.title || "").toLowerCase().includes(q) ||
+    (item.trainer || "").toLowerCase().includes(q)
+  );
+}
+
+function itemMatchesDateFilter(item: MasterClassItem, filter: "all" | "upcoming" | "past"): boolean {
+  if (filter === "all") return true;
+  const archived = isItemArchived(item);
+  return filter === "past" ? archived : !archived;
+}
+
+function itemMatchesLocation(item: MasterClassItem, locationFilter: string): boolean {
+  if (!locationFilter) return true;
+  return (item.location || "") === locationFilter;
+}
+
+// --- Price Field ---
+
 function PriceField({ label, value, onChange, placeholder }: { label: string; value: string; onChange: (v: string) => void; placeholder?: string }) {
   const raw = value.replace(/\s*BYN\s*$/i, "").trim();
   return (
@@ -37,7 +69,6 @@ interface MasterClassesData {
   items: MasterClassItem[];
 }
 
-
 // --- Location Select ---
 function LocationSelect({
   value,
@@ -92,6 +123,13 @@ function calcDurationText(startTime: string, endTime: string): string {
   return `${m} мин`;
 }
 
+function hasTimeError(startTime: string, endTime: string): boolean {
+  if (!startTime || !endTime) return false;
+  const [sh, sm] = startTime.split(":").map(Number);
+  const [eh, em] = endTime.split(":").map(Number);
+  return (eh * 60 + em) <= (sh * 60 + sm);
+}
+
 function SlotsField({
   slots,
   onChange,
@@ -123,41 +161,54 @@ function SlotsField({
       <div className="space-y-2">
         {slots.map((slot, i) => {
           const dur = calcDurationText(slot.startTime, slot.endTime);
+          const timeError = hasTimeError(slot.startTime, slot.endTime);
           return (
-            <div key={i} className="flex items-center gap-2 flex-wrap">
-              <input
-                type="date"
-                value={slot.date}
-                onChange={(e) => updateSlot(i, { date: e.target.value })}
-                className={`w-[140px] rounded-lg border bg-neutral-800 px-3 py-2 text-sm text-white outline-none transition-colors [color-scheme:dark] ${
-                  !slot.date ? "border-red-500/50" : "border-white/10 focus:border-gold"
-                }`}
-              />
-              <input
-                type="time"
-                value={slot.startTime}
-                onChange={(e) => updateSlot(i, { startTime: e.target.value })}
-                className="w-[100px] rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
-              />
-              <span className="text-neutral-500 text-xs">–</span>
-              <input
-                type="time"
-                value={slot.endTime}
-                onChange={(e) => updateSlot(i, { endTime: e.target.value })}
-                className="w-[100px] rounded-lg border border-white/10 bg-neutral-800 px-3 py-2 text-sm text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
-              />
-              {dur && (
-                <span className="text-[11px] text-neutral-500 bg-neutral-800/50 rounded-full px-2 py-0.5">
-                  {dur}
-                </span>
+            <div key={i}>
+              <div className="flex items-center gap-2 flex-wrap">
+                <input
+                  type="date"
+                  value={slot.date}
+                  onChange={(e) => updateSlot(i, { date: e.target.value })}
+                  className={`w-[140px] rounded-lg border bg-neutral-800 px-3 py-2 text-sm text-white outline-none transition-colors [color-scheme:dark] ${
+                    !slot.date ? "border-red-500/50" : "border-white/10 focus:border-gold"
+                  }`}
+                />
+                <input
+                  type="time"
+                  value={slot.startTime}
+                  onChange={(e) => updateSlot(i, { startTime: e.target.value })}
+                  className={`w-[100px] rounded-lg border bg-neutral-800 px-3 py-2 text-sm text-white outline-none transition-colors [color-scheme:dark] ${
+                    timeError ? "border-red-500/50" : "border-white/10 focus:border-gold"
+                  }`}
+                />
+                <span className="text-neutral-500 text-xs">&ndash;</span>
+                <input
+                  type="time"
+                  value={slot.endTime}
+                  onChange={(e) => updateSlot(i, { endTime: e.target.value })}
+                  className={`w-[100px] rounded-lg border bg-neutral-800 px-3 py-2 text-sm text-white outline-none transition-colors [color-scheme:dark] ${
+                    timeError ? "border-red-500/50" : "border-white/10 focus:border-gold"
+                  }`}
+                />
+                {dur && (
+                  <span className="text-[11px] text-neutral-500 bg-neutral-800/50 rounded-full px-2 py-0.5">
+                    {dur}
+                  </span>
+                )}
+                <button
+                  type="button"
+                  onClick={() => removeSlot(i)}
+                  className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+                >
+                  <X size={14} />
+                </button>
+              </div>
+              {!slot.date && (
+                <p className="mt-0.5 ml-1 text-[11px] text-red-400">Укажите дату</p>
+              )}
+              {timeError && (
+                <p className="mt-0.5 ml-1 text-[11px] text-red-400">Время окончания должно быть позже начала</p>
               )}
-              <button
-                type="button"
-                onClick={() => removeSlot(i)}
-                className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
-              >
-                <X size={14} />
-              </button>
             </div>
           );
         })}
@@ -174,8 +225,8 @@ function SlotsField({
   );
 }
 
-// --- Image Upload ---
-function ImageUploadField({
+// --- Photo Preview (like trainer page) ---
+function PhotoPreview({
   value,
   onChange,
 }: {
@@ -183,7 +234,6 @@ function ImageUploadField({
   onChange: (path: string) => void;
 }) {
   const [uploading, setUploading] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
 
   async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
@@ -208,54 +258,48 @@ function ImageUploadField({
 
   return (
     <div>
-      <label className="block text-sm text-neutral-400 mb-1.5">
-        Изображение
-      </label>
+      <label className="block text-sm text-neutral-400 mb-1.5">Изображение</label>
       {value ? (
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 rounded-lg bg-neutral-700/50 px-3 py-2 text-sm text-neutral-300">
-            <ImageIcon size={14} className="text-gold" />
-            <span className="max-w-[200px] truncate">
-              {value.split("/").pop()}
-            </span>
-          </div>
+        <div className="relative">
+          <label className="relative block w-full aspect-[16/9] overflow-hidden rounded-xl border border-white/10 cursor-pointer group">
+            <Image
+              src={value}
+              alt="Превью"
+              fill
+              className="object-cover"
+              sizes="(max-width: 768px) 100vw, 500px"
+            />
+            <div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col items-center justify-center gap-1">
+              {uploading ? (
+                <Loader2 size={20} className="animate-spin text-white" />
+              ) : (
+                <>
+                  <Upload size={20} className="text-white" />
+                  <span className="text-[11px] text-white/80">Изменить</span>
+                </>
+              )}
+            </div>
+            <input type="file" accept="image/*" onChange={handleUpload} className="hidden" />
+          </label>
           <button
             type="button"
             onClick={() => onChange("")}
-            className="rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+            className="absolute top-2 right-2 rounded-lg bg-black/60 p-1.5 text-neutral-400 hover:text-red-400 transition-colors"
           >
             <X size={14} />
           </button>
-          <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-white/10 px-3 py-2 text-sm text-neutral-400 hover:text-white hover:border-white/25 transition-colors">
-            {uploading ? (
-              <Loader2 size={14} className="animate-spin" />
-            ) : (
-              <Upload size={14} />
-            )}
-            Заменить
-            <input
-              type="file"
-              accept="image/*"
-              onChange={handleUpload}
-              className="hidden"
-            />
-          </label>
         </div>
       ) : (
-        <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-white/20 px-4 py-3 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors">
+        <label className="flex cursor-pointer items-center justify-center gap-2 w-full aspect-[16/9] rounded-xl border-2 border-dashed border-white/20 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors">
           {uploading ? (
-            <Loader2 size={16} className="animate-spin" />
+            <Loader2 size={20} className="animate-spin" />
           ) : (
-            <Upload size={16} />
+            <>
+              <Upload size={20} />
+              <span>Загрузить изображение</span>
+            </>
           )}
-          {uploading ? "Загрузка..." : "Загрузить изображение"}
-          <input
-            ref={inputRef}
-            type="file"
-            accept="image/*"
-            onChange={handleUpload}
-            className="hidden"
-          />
+          <input type="file" accept="image/*" onChange={handleUpload} className="hidden" />
         </label>
       )}
     </div>
@@ -339,11 +383,113 @@ function ValidationHint({ fields }: { fields: Record<string, string> }) {
   );
 }
 
+// --- Filter bar ---
+type DateFilter = "all" | "upcoming" | "past";
+
+const DATE_FILTER_LABELS: Record<DateFilter, string> = {
+  all: "Все",
+  upcoming: "Предстоящие",
+  past: "Прошедшие",
+};
+
+function FilterBar({
+  search,
+  onSearchChange,
+  dateFilter,
+  onDateFilterChange,
+  locationFilter,
+  onLocationFilterChange,
+  locations,
+  totalCount,
+  visibleCount,
+}: {
+  search: string;
+  onSearchChange: (v: string) => void;
+  dateFilter: DateFilter;
+  onDateFilterChange: (v: DateFilter) => void;
+  locationFilter: string;
+  onLocationFilterChange: (v: string) => void;
+  locations: { name: string; address: string }[];
+  totalCount: number;
+  visibleCount: number;
+}) {
+  return (
+    <div className="space-y-3 mb-4">
+      <div className="relative">
+        <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500" />
+        <input
+          type="text"
+          value={search}
+          onChange={(e) => onSearchChange(e.target.value)}
+          placeholder="Поиск по названию или тренеру..."
+          className="w-full rounded-lg border border-white/10 bg-neutral-800 pl-10 pr-4 py-2.5 text-sm text-white placeholder-neutral-500 outline-none focus:border-gold transition-colors"
+        />
+        {search && (
+          <button
+            type="button"
+            onClick={() => onSearchChange("")}
+            className="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-500 hover:text-white transition-colors"
+          >
+            <X size={14} />
+          </button>
+        )}
+      </div>
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="flex gap-1">
+          {(Object.keys(DATE_FILTER_LABELS) as DateFilter[]).map((key) => (
+            <button
+              key={key}
+              type="button"
+              onClick={() => onDateFilterChange(key)}
+              className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
+                dateFilter === key
+                  ? "bg-gold/20 text-gold border border-gold/40"
+                  : "bg-neutral-800 text-neutral-400 border border-white/10 hover:border-white/25 hover:text-white"
+              }`}
+            >
+              {DATE_FILTER_LABELS[key]}
+            </button>
+          ))}
+        </div>
+        {locations.length > 0 && (
+          <>
+            <span className="text-neutral-600 text-xs">|</span>
+            <div className="flex gap-1">
+              {locations.map((loc) => (
+                <button
+                  key={loc.name}
+                  type="button"
+                  onClick={() => onLocationFilterChange(locationFilter === loc.name ? "" : loc.name)}
+                  className={`rounded-full px-3 py-1 text-xs font-medium transition-all ${
+                    locationFilter === loc.name
+                      ? "bg-gold/20 text-gold border border-gold/40"
+                      : "bg-neutral-800 text-neutral-400 border border-white/10 hover:border-white/25 hover:text-white"
+                  }`}
+                >
+                  {loc.name}
+                </button>
+              ))}
+            </div>
+          </>
+        )}
+        {visibleCount < totalCount && (
+          <span className="text-xs text-neutral-500 ml-auto">
+            {visibleCount} из {totalCount}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // --- Main page ---
 export default function MasterClassesEditorPage() {
   const [trainers, setTrainers] = useState<string[]>([]);
   const [styles, setStyles] = useState<string[]>([]);
   const [locations, setLocations] = useState<{ name: string; address: string }[]>([]);
+  const [search, setSearch] = useState("");
+  const [dateFilter, setDateFilter] = useState<DateFilter>("all");
+  const [locationFilter, setLocationFilter] = useState("");
 
   useEffect(() => {
     // Fetch trainers from team
@@ -376,119 +522,173 @@ export default function MasterClassesEditorPage() {
       sectionKey="masterClasses"
       title="Мастер-классы"
     >
-      {(data, update) => (
-        <>
-          <InputField
-            label="Заголовок секции"
-            value={data.title}
-            onChange={(v) => update({ ...data, title: v })}
-          />
+      {(data, update) => {
+        // Sort: active first, archived at bottom
+        const displayItems = [...data.items].sort((a, b) => {
+          const aArch = isItemArchived(a);
+          const bArch = isItemArchived(b);
+          if (aArch === bArch) return 0;
+          return aArch ? 1 : -1;
+        });
 
-          <ArrayEditor
-            label="Мастер-классы"
-            items={data.items}
-            onChange={(items) => update({ ...data, items })}
-            renderItem={(item, _i, updateItem) => (
-              <div className="space-y-3">
-                <ValidationHint
-                  fields={{
-                    Название: item.title,
-                    Тренер: item.trainer,
-                    Стиль: item.style,
-                    Стоимость: item.cost,
-                    "Даты и время": (item.slots ?? []).length > 0 ? "ok" : "",
-                  }}
-                />
+        const hiddenItems = new Set<number>();
+        displayItems.forEach((item, i) => {
+          if (
+            !itemMatchesSearch(item, search) ||
+            !itemMatchesDateFilter(item, dateFilter) ||
+            !itemMatchesLocation(item, locationFilter)
+          ) {
+            hiddenItems.add(i);
+          }
+        });
 
-                <InputField
-                  label="Название"
-                  value={item.title}
-                  onChange={(v) => updateItem({ ...item, title: v })}
-                  placeholder="Мастер-класс от Анны Тарыбы"
-                />
+        const visibleCount = data.items.length - hiddenItems.size;
 
-                <ImageUploadField
-                  value={item.image}
-                  onChange={(v) => updateItem({ ...item, image: v })}
-                />
+        return (
+          <>
+            <InputField
+              label="Заголовок секции"
+              value={data.title}
+              onChange={(v) => update({ ...data, title: v })}
+            />
 
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <AutocompleteMulti
-                    label="Тренер"
-                    value={item.trainer}
-                    onChange={(v) => updateItem({ ...item, trainer: v })}
-                    options={trainers}
-                    placeholder="Добавить тренера..."
-                  />
-                  <AutocompleteMulti
-                    label="Стиль"
-                    value={item.style}
-                    onChange={(v) => updateItem({ ...item, style: v })}
-                    options={styles}
-                    placeholder="Добавить стиль..."
-                  />
-                </div>
+            <FilterBar
+              search={search}
+              onSearchChange={setSearch}
+              dateFilter={dateFilter}
+              onDateFilterChange={setDateFilter}
+              locationFilter={locationFilter}
+              onLocationFilterChange={setLocationFilter}
+              locations={locations}
+              totalCount={data.items.length}
+              visibleCount={visibleCount}
+            />
 
-                <PriceField
-                  label="Стоимость"
-                  value={item.cost}
-                  onChange={(v) => updateItem({ ...item, cost: v })}
-                  placeholder="40"
-                />
+            <ArrayEditor
+              label="Мастер-классы"
+              items={displayItems}
+              onChange={(items) => update({ ...data, items })}
+              collapsible
+              hiddenItems={hiddenItems}
+              getItemTitle={(item) => {
+                const base = item.location
+                  ? `${item.title || "Без названия"} · ${item.location}`
+                  : item.title || "Без названия";
+                return base;
+              }}
+              getItemBadge={(item) =>
+                isItemArchived(item) ? (
+                  <span className="shrink-0 rounded-full bg-neutral-700/50 px-2 py-0.5 text-[10px] font-medium text-neutral-500">
+                    Архив
+                  </span>
+                ) : null
+              }
+              renderItem={(item, _i, updateItem) => {
+                const archived = isItemArchived(item);
+                return (
+                  <div className={`space-y-3 ${archived ? "opacity-50" : ""}`}>
 
-                {locations.length > 0 && (
-                  <LocationSelect
-                    value={item.location || ""}
-                    onChange={(v) =>
-                      updateItem({ ...item, location: v || undefined })
-                    }
-                    locations={locations}
-                  />
-                )}
+                    <ValidationHint
+                      fields={{
+                        Название: item.title,
+                        Тренер: item.trainer,
+                        Стиль: item.style,
+                        Стоимость: item.cost,
+                        "Даты и время": (item.slots ?? []).length > 0 ? "ok" : "",
+                      }}
+                    />
 
-                <SlotsField
-                  slots={item.slots ?? []}
-                  onChange={(slots) => updateItem({ ...item, slots })}
-                />
+                    <InputField
+                      label="Название"
+                      value={item.title}
+                      onChange={(v) => updateItem({ ...item, title: v })}
+                      placeholder="Мастер-класс от Анны Тарыбы"
+                    />
 
-                <TextareaField
-                  label="Описание"
-                  value={item.description || ""}
-                  onChange={(v) =>
-                    updateItem({ ...item, description: v || undefined })
-                  }
-                  placeholder="Описание мастер-класса, трек, стиль..."
-                  rows={3}
-                />
+                    <PhotoPreview
+                      value={item.image}
+                      onChange={(v) => updateItem({ ...item, image: v })}
+                    />
 
-                <InstagramLinkField
-                  value={item.instagramUrl || ""}
-                  onChange={(v) =>
-                    updateItem({ ...item, instagramUrl: v || undefined })
-                  }
-                />
+                    <div className="grid gap-3 sm:grid-cols-2">
+                      <AutocompleteMulti
+                        label="Тренер"
+                        value={item.trainer}
+                        onChange={(v) => updateItem({ ...item, trainer: v })}
+                        options={trainers}
+                        placeholder="Добавить тренера..."
+                      />
+                      <AutocompleteMulti
+                        label="Стиль"
+                        value={item.style}
+                        onChange={(v) => updateItem({ ...item, style: v })}
+                        options={styles}
+                        placeholder="Добавить стиль..."
+                      />
+                    </div>
 
-                <ParticipantLimits
-                  min={item.minParticipants ?? 0}
-                  max={item.maxParticipants ?? 0}
-                  onMinChange={(v) => updateItem({ ...item, minParticipants: v })}
-                  onMaxChange={(v) => updateItem({ ...item, maxParticipants: v })}
-                />
+                    <PriceField
+                      label="Стоимость"
+                      value={item.cost}
+                      onChange={(v) => updateItem({ ...item, cost: v })}
+                      placeholder="40"
+                    />
 
-              </div>
-            )}
-            createItem={() => ({
-              title: "",
-              image: "",
-              slots: [],
-              trainer: "",
-              cost: "",
-              style: "",
-            })}
-            addLabel="Добавить мастер-класс"
-          />
-        </>
-      )}
+                    {locations.length > 0 && (
+                      <LocationSelect
+                        value={item.location || ""}
+                        onChange={(v) =>
+                          updateItem({ ...item, location: v || undefined })
+                        }
+                        locations={locations}
+                      />
+                    )}
+
+                    <SlotsField
+                      slots={item.slots ?? []}
+                      onChange={(slots) => updateItem({ ...item, slots })}
+                    />
+
+                    <TextareaField
+                      label="Описание"
+                      value={item.description || ""}
+                      onChange={(v) =>
+                        updateItem({ ...item, description: v || undefined })
+                      }
+                      placeholder="Описание мастер-класса, трек, стиль..."
+                      rows={3}
+                    />
+
+                    <InstagramLinkField
+                      value={item.instagramUrl || ""}
+                      onChange={(v) =>
+                        updateItem({ ...item, instagramUrl: v || undefined })
+                      }
+                    />
+
+                    <ParticipantLimits
+                      min={item.minParticipants ?? 0}
+                      max={item.maxParticipants ?? 0}
+                      onMinChange={(v) => updateItem({ ...item, minParticipants: v })}
+                      onMaxChange={(v) => updateItem({ ...item, maxParticipants: v })}
+                    />
+
+                  </div>
+                );
+              }}
+              createItem={() => ({
+                title: "",
+                image: "",
+                slots: [],
+                trainer: "",
+                cost: "",
+                style: "",
+              })}
+              addLabel="Добавить мастер-класс"
+            />
+          </>
+        );
+      }}
     </SectionEditor>
   );
 }

src/app/admin/news/page.tsx

@@ -1,10 +1,11 @@
 "use client";
 
 import { useState, useRef } from "react";
+import Image from "next/image";
 import { SectionEditor } from "../_components/SectionEditor";
 import { InputField, TextareaField } from "../_components/FormField";
 import { ArrayEditor } from "../_components/ArrayEditor";
-import { Upload, Loader2, ImageIcon, X } from "lucide-react";
+import { Upload, Loader2, X, AlertCircle } from "lucide-react";
 import { adminFetch } from "@/lib/csrf";
 import type { NewsItem } from "@/types/content";
 
@@ -13,15 +14,22 @@ interface NewsData {
   items: NewsItem[];
 }
 
-function ImageUploadField({
-  value,
-  onChange,
+function CropPreview({
+  image,
+  focalX,
+  focalY,
+  onImageChange,
+  onFocalChange,
 }: {
-  value: string;
-  onChange: (path: string) => void;
+  image: string;
+  focalX: number;
+  focalY: number;
+  onImageChange: (path: string) => void;
+  onFocalChange: (x: number, y: number) => void;
 }) {
   const [uploading, setUploading] = useState(false);
-  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
     const file = e.target.files?.[0];
@@ -36,7 +44,7 @@ function ImageUploadField({
         body: formData,
       });
       const result = await res.json();
-      if (result.path) onChange(result.path);
+      if (result.path) onImageChange(result.path);
     } catch {
       /* upload failed */
     } finally {
@@ -44,56 +52,83 @@ function ImageUploadField({
     }
   }
 
+  function updateFocalFromEvent(clientX: number, clientY: number) {
+    const el = containerRef.current;
+    if (!el) return;
+    const rect = el.getBoundingClientRect();
+    const x = Math.max(0, Math.min(100, ((clientX - rect.left) / rect.width) * 100));
+    const y = Math.max(0, Math.min(100, ((clientY - rect.top) / rect.height) * 100));
+    onFocalChange(Math.round(x), Math.round(y));
+  }
+
+  function handlePointerDown(e: React.PointerEvent) {
+    e.preventDefault();
+    (e.target as HTMLElement).setPointerCapture(e.pointerId);
+    setDragging(true);
+    updateFocalFromEvent(e.clientX, e.clientY);
+  }
+
+  function handlePointerMove(e: React.PointerEvent) {
+    if (!dragging) return;
+    updateFocalFromEvent(e.clientX, e.clientY);
+  }
+
+  function handlePointerUp() {
+    setDragging(false);
+  }
+
   return (
     <div>
       <label className="block text-sm text-neutral-400 mb-1.5">
-        Изображение
+        Изображение <span className="text-neutral-600">(перетащите для кадрирования)</span>
       </label>
-      {value ? (
-        <div className="flex items-center gap-2">
-          <div className="flex items-center gap-1.5 rounded-lg bg-neutral-700/50 px-3 py-2 text-sm text-neutral-300">
-            <ImageIcon size={14} className="text-gold" />
-            <span className="max-w-[200px] truncate">
-              {value.split("/").pop()}
-            </span>
-          </div>
-          <button
-            type="button"
-            onClick={() => onChange("")}
-            className="rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+      {image ? (
+        <div className="space-y-2">
+          {/* Crop area — drag to reposition */}
+          <div
+            ref={containerRef}
+            className="relative w-full aspect-[21/9] overflow-hidden rounded-xl border border-white/10 cursor-grab active:cursor-grabbing select-none"
+            onPointerDown={handlePointerDown}
+            onPointerMove={handlePointerMove}
+            onPointerUp={handlePointerUp}
+            onPointerCancel={handlePointerUp}
           >
-            <X size={14} />
-          </button>
-          <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-white/10 px-3 py-2 text-sm text-neutral-400 hover:text-white hover:border-white/25 transition-colors">
-            {uploading ? (
-              <Loader2 size={14} className="animate-spin" />
-            ) : (
-              <Upload size={14} />
-            )}
-            Заменить
-            <input
-              type="file"
-              accept="image/*"
-              onChange={handleUpload}
-              className="hidden"
+            <Image
+              src={image}
+              alt="Превью"
+              fill
+              className="object-cover pointer-events-none"
+              style={{ objectPosition: `${focalX}% ${focalY}%` }}
+              sizes="(max-width: 768px) 100vw, 600px"
             />
-          </label>
+          </div>
+          {/* Actions */}
+          <div className="flex items-center gap-2">
+            <label className="flex cursor-pointer items-center gap-1.5 rounded-lg border border-white/10 px-3 py-1.5 text-xs text-neutral-400 hover:text-white hover:border-white/25 transition-colors">
+              {uploading ? <Loader2 size={12} className="animate-spin" /> : <Upload size={12} />}
+              Заменить
+              <input type="file" accept="image/*" onChange={handleUpload} className="hidden" />
+            </label>
+            <button
+              type="button"
+              onClick={() => onImageChange("")}
+              className="rounded-lg px-3 py-1.5 text-xs text-neutral-500 hover:text-red-400 transition-colors ml-auto"
+            >
+              Удалить
+            </button>
+          </div>
         </div>
       ) : (
-        <label className="flex cursor-pointer items-center gap-2 rounded-lg border border-dashed border-white/20 px-4 py-3 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors">
+        <label className="flex cursor-pointer items-center justify-center gap-2 w-full aspect-[16/9] rounded-xl border-2 border-dashed border-white/20 text-sm text-neutral-400 hover:text-white hover:border-white/40 transition-colors">
           {uploading ? (
-            <Loader2 size={16} className="animate-spin" />
+            <Loader2 size={20} className="animate-spin" />
           ) : (
-            <Upload size={16} />
+            <>
+              <Upload size={20} />
+              <span>Загрузить изображение</span>
+            </>
           )}
-          {uploading ? "Загрузка..." : "Загрузить изображение"}
-          <input
-            ref={inputRef}
-            type="file"
-            accept="image/*"
-            onChange={handleUpload}
-            className="hidden"
-          />
+          <input type="file" accept="image/*" onChange={handleUpload} className="hidden" />
         </label>
       )}
     </div>
@@ -115,49 +150,79 @@ export default function NewsEditorPage() {
             label="Новости"
             items={data.items}
             onChange={(items) => update({ ...data, items })}
-            renderItem={(item, _i, updateItem) => (
+            collapsible
+            getItemTitle={(item) => {
+              const title = item.title || "Без заголовка";
+              if (item.date) {
+                try {
+                  const d = new Date(item.date);
+                  const date = d.toLocaleDateString("ru-RU", { day: "numeric", month: "short" });
+                  const time = item.date.includes("T") ? ` ${d.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" })}` : "";
+                  return `${title} · ${date}${time}`;
+                } catch { /* ignore */ }
+              }
+              return title;
+            }}
+            getItemBadge={(item) => {
+              const missing = [
+                !item.title.trim() && "заголовок",
+                !item.text.trim() && "текст",
+                !item.image && "фото",
+              ].filter(Boolean);
+              if (missing.length === 0) return null;
+              return (
+                <span className="shrink-0 rounded-full bg-red-500/10 border border-red-500/20 px-2 py-0.5 text-[10px] font-medium text-red-400">
+                  Черновик
+                </span>
+              );
+            }}
+            renderItem={(item, _i, updateItem) => {
+              const missing = [
+                !item.title.trim() && "Заголовок",
+                !item.text.trim() && "Текст",
+                !item.image && "Изображение",
+              ].filter(Boolean);
+              return (
               <div className="space-y-3">
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <InputField
-                    label="Заголовок"
-                    value={item.title}
-                    onChange={(v) => updateItem({ ...item, title: v })}
-                  />
-                  <div>
-                    <label className="block text-sm text-neutral-400 mb-1.5">Дата</label>
-                    <input
-                      type="date"
-                      value={item.date}
-                      onChange={(e) => updateItem({ ...item, date: e.target.value })}
-                      className="w-full rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 text-white outline-none focus:border-gold transition-colors [color-scheme:dark]"
-                    />
+                {missing.length > 0 && (
+                  <div className="flex items-start gap-1.5 rounded-lg bg-red-500/10 border border-red-500/20 px-3 py-2 text-xs text-red-400">
+                    <AlertCircle size={12} className="shrink-0 mt-0.5" />
+                    <span>Не опубликовано — не заполнено: {missing.join(", ")}</span>
                   </div>
-                </div>
+                )}
+                <InputField
+                  label="Заголовок"
+                  value={item.title}
+                  onChange={(v) => updateItem({ ...item, title: v })}
+                />
                 <TextareaField
                   label="Текст"
                   value={item.text}
                   onChange={(v) => updateItem({ ...item, text: v })}
                 />
-                <div className="grid gap-3 sm:grid-cols-2">
-                  <ImageUploadField
-                    value={item.image || ""}
-                    onChange={(v) => updateItem({ ...item, image: v || undefined })}
-                  />
-                  <InputField
-                    label="Ссылка (необязательно)"
-                    value={item.link || ""}
-                    onChange={(v) => updateItem({ ...item, link: v || undefined })}
-                    placeholder="https://instagram.com/p/..."
-                  />
-                </div>
+                <CropPreview
+                  image={item.image || ""}
+                  focalX={item.imageFocalX ?? 50}
+                  focalY={item.imageFocalY ?? 50}
+                  onImageChange={(v) => updateItem({ ...item, image: v || undefined })}
+                  onFocalChange={(x, y) => updateItem({ ...item, imageFocalX: x, imageFocalY: y })}
+                />
+                <InputField
+                  label="Ссылка (необязательно)"
+                  value={item.link || ""}
+                  onChange={(v) => updateItem({ ...item, link: v || undefined })}
+                  placeholder="https://instagram.com/p/..."
+                />
               </div>
-            )}
+              );
+            }}
             createItem={(): NewsItem => ({
               title: "",
               text: "",
-              date: new Date().toISOString().slice(0, 10),
+              date: new Date().toISOString(),
             })}
             addLabel="Добавить новость"
+            addPosition="top"
           />
         </>
       )}

src/app/admin/pricing/page.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
 import { SectionEditor } from "../_components/SectionEditor";
 import { InputField, SelectField } from "../_components/FormField";
 import { ArrayEditor } from "../_components/ArrayEditor";
@@ -23,7 +25,6 @@ interface PricingData {
 }
 
 function PriceField({ label, value, onChange }: { label: string; value: string; onChange: (v: string) => void }) {
-  // Strip "BYN" suffix for editing, add back on save
   const raw = value.replace(/\s*BYN\s*$/i, "").trim();
 
   return (
@@ -48,157 +49,205 @@ function PriceField({ label, value, onChange }: { label: string; value: string;
   );
 }
 
+function CollapsibleSection({
+  title,
+  count,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  count?: number;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-xl border border-white/10 bg-neutral-900/30 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-between w-full px-5 py-3.5 text-left cursor-pointer group hover:bg-white/[0.02] transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-white transition-colors">{title}</h3>
+          {count !== undefined && (
+            <span className="text-xs text-neutral-500">{count}</span>
+          )}
+        </div>
+        <ChevronDown
+          size={16}
+          className={`text-neutral-500 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+      <div
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
+      >
+        <div className="overflow-hidden">
+          <div className="px-5 pb-5 space-y-4">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function PricingEditorPage() {
   return (
     <SectionEditor<PricingData> sectionKey="pricing" title="Цены">
       {(data, update) => (
-        <>
-          <InputField
-            label="Заголовок секции"
-            value={data.title}
-            onChange={(v) => update({ ...data, title: v })}
-          />
-          <InputField
-            label="Подзаголовок"
-            value={data.subtitle}
-            onChange={(v) => update({ ...data, subtitle: v })}
-          />
+        <div className="space-y-4">
+          <div className="grid gap-3 sm:grid-cols-2">
+            <InputField
+              label="Заголовок секции"
+              value={data.title}
+              onChange={(v) => update({ ...data, title: v })}
+            />
+            <InputField
+              label="Подзаголовок"
+              value={data.subtitle}
+              onChange={(v) => update({ ...data, subtitle: v })}
+            />
+          </div>
 
-          <label className="inline-flex items-center gap-2 cursor-pointer select-none">
-            <button
-              type="button"
-              role="switch"
-              aria-checked={data.showContactHint !== false}
-              onClick={() => update({ ...data, showContactHint: data.showContactHint === false })}
-              className={`relative h-5 w-9 rounded-full transition-colors ${
-                data.showContactHint !== false ? "bg-gold" : "bg-neutral-600"
-              }`}
-            >
-              <span
-                className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
-                  data.showContactHint !== false ? "translate-x-4" : ""
-                }`}
-              />
-            </button>
-            <span className="text-sm text-neutral-400">Показывать контакты для записи (Instagram, Telegram, телефон)</span>
-          </label>
+          {/* Абонементы */}
+          <CollapsibleSection title="Абонементы" count={data.items.length}>
+            {(() => {
+              const itemOptions = data.items
+                .map((it, idx) => ({ value: String(idx), label: it.name }))
+                .filter((o) => o.label.trim() !== "");
+              const noneOption = { value: "", label: "— Нет —" };
+              const featuredIdx = data.items.findIndex((it) => it.featured);
 
-          {/* Featured selector */}
-          {(() => {
-            const itemOptions = data.items
-              .map((it, idx) => ({ value: String(idx), label: it.name }))
-              .filter((o) => o.label.trim() !== "");
-            const noneOption = { value: "", label: "— Нет —" };
-            const featuredIdx = data.items.findIndex((it) => it.featured);
+              return (
+                <SelectField
+                  label="Выделенный абонемент (безлимит)"
+                  value={featuredIdx >= 0 ? String(featuredIdx) : ""}
+                  onChange={(v) => {
+                    const items = data.items.map((it, idx) => ({
+                      ...it,
+                      featured: v ? idx === Number(v) : false,
+                    }));
+                    update({ ...data, items });
+                  }}
+                  options={[noneOption, ...itemOptions]}
+                  placeholder="Выберите..."
+                />
+              );
+            })()}
 
-            return (
-              <SelectField
-                label="Выделенный абонемент (безлимит)"
-                value={featuredIdx >= 0 ? String(featuredIdx) : ""}
-                onChange={(v) => {
-                  const items = data.items.map((it, idx) => ({
-                    ...it,
-                    featured: v ? idx === Number(v) : false,
-                  }));
-                  update({ ...data, items });
-                }}
-                options={[noneOption, ...itemOptions]}
-                placeholder="Выберите..."
-              />
-            );
-          })()}
-
-          <ArrayEditor
-            label="Абонементы"
-            items={data.items}
-            onChange={(items) => update({ ...data, items })}
-            renderItem={(item, _i, updateItem) => (
-              <div className="space-y-3">
-                <div className="grid gap-3 sm:grid-cols-3">
-                  <InputField
-                    label="Название"
-                    value={item.name}
-                    onChange={(v) => updateItem({ ...item, name: v })}
-                  />
-                  <PriceField
-                    label="Цена"
-                    value={item.price}
-                    onChange={(v) => updateItem({ ...item, price: v })}
-                  />
+            <ArrayEditor
+              items={data.items}
+              onChange={(items) => update({ ...data, items })}
+              collapsible
+              getItemTitle={(item) => item.name || "Без названия"}
+              getItemBadge={(item) =>
+                item.popular ? (
+                  <span className="shrink-0 rounded-full bg-gold/20 px-2 py-0.5 text-[10px] font-medium text-gold">
+                    Популярный
+                  </span>
+                ) : null
+              }
+              renderItem={(item, _i, updateItem) => (
+                <div className="space-y-3">
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <InputField
+                      label="Название"
+                      value={item.name}
+                      onChange={(v) => updateItem({ ...item, name: v })}
+                    />
+                    <PriceField
+                      label="Цена"
+                      value={item.price}
+                      onChange={(v) => updateItem({ ...item, price: v })}
+                    />
+                  </div>
                   <InputField
                     label="Примечание"
                     value={item.note || ""}
-                    onChange={(v) => updateItem({ ...item, note: v })}
+                    onChange={(v) => updateItem({ ...item, note: v || undefined })}
+                    placeholder="Например: 8 занятий, срок 30 дней"
+                  />
+                  <label className="inline-flex items-center gap-2 cursor-pointer select-none">
+                    <button
+                      type="button"
+                      role="switch"
+                      aria-checked={!!item.popular}
+                      onClick={() => updateItem({ ...item, popular: !item.popular })}
+                      className={`relative h-5 w-9 rounded-full transition-colors ${
+                        item.popular ? "bg-gold" : "bg-neutral-600"
+                      }`}
+                    >
+                      <span
+                        className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
+                          item.popular ? "translate-x-4" : ""
+                        }`}
+                      />
+                    </button>
+                    <span className="text-sm text-neutral-400">Популярный</span>
+                  </label>
+                </div>
+              )}
+              createItem={() => ({ name: "", price: "", note: "" })}
+              addLabel="Добавить абонемент"
+            />
+          </CollapsibleSection>
+
+          {/* Аренда */}
+          <CollapsibleSection title="Аренда" count={data.rentalItems.length}>
+            <InputField
+              label="Заголовок"
+              value={data.rentalTitle}
+              onChange={(v) => update({ ...data, rentalTitle: v })}
+            />
+
+            <ArrayEditor
+              items={data.rentalItems}
+              onChange={(rentalItems) => update({ ...data, rentalItems })}
+              collapsible
+              getItemTitle={(item) => item.name || "Без названия"}
+              renderItem={(item, _i, updateItem) => (
+                <div className="space-y-3">
+                  <div className="grid gap-3 sm:grid-cols-2">
+                    <InputField
+                      label="Название"
+                      value={item.name}
+                      onChange={(v) => updateItem({ ...item, name: v })}
+                    />
+                    <PriceField
+                      label="Цена"
+                      value={item.price}
+                      onChange={(v) => updateItem({ ...item, price: v })}
+                    />
+                  </div>
+                  <InputField
+                    label="Примечание"
+                    value={item.note || ""}
+                    onChange={(v) => updateItem({ ...item, note: v || undefined })}
+                    placeholder="Например: за 1 час"
                   />
                 </div>
-                <label className="inline-flex items-center gap-2 cursor-pointer select-none">
-                  <button
-                    type="button"
-                    role="switch"
-                    aria-checked={!!item.popular}
-                    onClick={() => updateItem({ ...item, popular: !item.popular })}
-                    className={`relative h-5 w-9 rounded-full transition-colors ${
-                      item.popular ? "bg-gold" : "bg-neutral-600"
-                    }`}
-                  >
-                    <span
-                      className={`absolute top-0.5 left-0.5 h-4 w-4 rounded-full bg-white transition-transform ${
-                        item.popular ? "translate-x-4" : ""
-                      }`}
-                    />
-                  </button>
-                  <span className="text-sm text-neutral-400">Популярный</span>
-                </label>
-              </div>
-            )}
-            createItem={() => ({ name: "", price: "", note: "" })}
-            addLabel="Добавить абонемент"
-          />
+              )}
+              createItem={() => ({ name: "", price: "", note: "" })}
+              addLabel="Добавить вариант аренды"
+            />
+          </CollapsibleSection>
 
-          <InputField
-            label="Заголовок аренды"
-            value={data.rentalTitle}
-            onChange={(v) => update({ ...data, rentalTitle: v })}
-          />
-
-          <ArrayEditor
-            label="Аренда"
-            items={data.rentalItems}
-            onChange={(rentalItems) => update({ ...data, rentalItems })}
-            renderItem={(item, _i, updateItem) => (
-              <div className="grid gap-3 sm:grid-cols-3">
-                <InputField
-                  label="Название"
-                  value={item.name}
-                  onChange={(v) => updateItem({ ...item, name: v })}
-                />
-                <PriceField
-                  label="Цена"
-                  value={item.price}
-                  onChange={(v) => updateItem({ ...item, price: v })}
-                />
-                <InputField
-                  label="Примечание"
-                  value={item.note || ""}
-                  onChange={(v) => updateItem({ ...item, note: v })}
-                />
-              </div>
-            )}
-            createItem={() => ({ name: "", price: "", note: "" })}
-            addLabel="Добавить вариант аренды"
-          />
-
-          <ArrayEditor
-            label="Правила"
-            items={data.rules}
-            onChange={(rules) => update({ ...data, rules })}
-            renderItem={(rule, _i, updateItem) => (
-              <InputField label="Правило" value={rule} onChange={updateItem} />
-            )}
-            createItem={() => ""}
-            addLabel="Добавить правило"
-          />
-        </>
+          {/* Правила */}
+          <CollapsibleSection title="Правила" count={data.rules.length} defaultOpen={false}>
+            <ArrayEditor
+              items={data.rules}
+              onChange={(rules) => update({ ...data, rules })}
+              renderItem={(rule, _i, updateItem) => (
+                <InputField label="Правило" value={rule} onChange={updateItem} />
+              )}
+              createItem={() => ""}
+              addLabel="Добавить правило"
+            />
+          </CollapsibleSection>
+        </div>
       )}
     </SectionEditor>
   );

src/components/sections/News.tsx

@@ -14,11 +14,18 @@ interface NewsProps {
 
 function formatDate(iso: string): string {
   try {
-    return new Date(iso).toLocaleDateString("ru-RU", {
+    const d = new Date(iso);
+    const date = d.toLocaleDateString("ru-RU", {
       day: "numeric",
       month: "long",
       year: "numeric",
     });
+    // Show time only if it's a full ISO timestamp (not just date)
+    if (iso.includes("T")) {
+      const time = d.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
+      return `${date}, ${time}`;
+    }
+    return date;
   } catch {
     return iso;
   }
@@ -45,6 +52,7 @@ function FeaturedArticle({
             loading="lazy"
             sizes="(min-width: 768px) 80vw, 100vw"
             className="object-cover transition-transform duration-700 group-hover:scale-105"
+            style={{ objectPosition: `${item.imageFocalX ?? 50}% ${item.imageFocalY ?? 50}%` }}
           />
           <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent" />
         </div>
@@ -88,6 +96,7 @@ function CompactArticle({
             loading="lazy"
             sizes="112px"
             className="object-cover transition-transform duration-500 group-hover:scale-105"
+            style={{ objectPosition: `${item.imageFocalX ?? 50}% ${item.imageFocalY ?? 50}%` }}
           />
         </div>
       )}
@@ -106,12 +115,22 @@ function CompactArticle({
   );
 }
 
+const INITIAL_VISIBLE = 4;
+
 export function News({ data }: NewsProps) {
   const [selected, setSelected] = useState<NewsItem | null>(null);
+  const [showAll, setShowAll] = useState(false);
 
   if (!data.items || data.items.length === 0) return null;
 
-  const [featured, ...rest] = data.items;
+  // Filter out empty/draft items, sort by date newest first
+  const sorted = [...data.items]
+    .filter((item) => item.title.trim() && item.text.trim() && item.image)
+    .sort((a, b) => (b.date || "").localeCompare(a.date || ""));
+  if (sorted.length === 0) return null;
+  const [featured, ...rest] = sorted;
+  const visibleRest = showAll ? rest : rest.slice(0, INITIAL_VISIBLE - 1);
+  const hasMore = rest.length > INITIAL_VISIBLE - 1 && !showAll;
 
   return (
     <section id="news" className="section-glow relative section-padding">
@@ -129,12 +148,12 @@ export function News({ data }: NewsProps) {
             />
           </Reveal>
 
-          {rest.length > 0 && (
+          {visibleRest.length > 0 && (
             <Reveal>
               <div className="rounded-2xl bg-neutral-50/80 px-5 sm:px-6 dark:bg-white/[0.02]">
-                {rest.map((item) => (
+                {visibleRest.map((item) => (
                   <CompactArticle
-                    key={item.title}
+                    key={item.title + item.date}
                     item={item}
                     onClick={() => setSelected(item)}
                   />
@@ -142,6 +161,19 @@ export function News({ data }: NewsProps) {
               </div>
             </Reveal>
           )}
+
+          {hasMore && (
+            <Reveal>
+              <div className="text-center">
+                <button
+                  onClick={() => setShowAll(true)}
+                  className="rounded-full border border-white/10 bg-white/[0.03] px-6 py-2.5 text-sm font-medium text-neutral-400 hover:text-white hover:border-white/25 transition-colors cursor-pointer"
+                >
+                  Показать ещё ({rest.length - INITIAL_VISIBLE + 1})
+                </button>
+              </div>
+            </Reveal>
+          )}
         </div>
       </div>
 

src/components/ui/NewsModal.tsx

@@ -13,11 +13,17 @@ interface NewsModalProps {
 
 function formatDate(iso: string): string {
   try {
-    return new Date(iso).toLocaleDateString("ru-RU", {
+    const d = new Date(iso);
+    const date = d.toLocaleDateString("ru-RU", {
       day: "numeric",
       month: "long",
       year: "numeric",
     });
+    if (iso.includes("T")) {
+      const time = d.toLocaleTimeString("ru-RU", { hour: "2-digit", minute: "2-digit" });
+      return `${date}, ${time}`;
+    }
+    return date;
   } catch {
     return iso;
   }
@@ -76,6 +82,7 @@ export function NewsModal({ item, onClose }: NewsModalProps) {
               fill
               sizes="(min-width: 768px) 672px, 100vw"
               className="object-cover"
+              style={{ objectPosition: `${item.imageFocalX ?? 50}% ${item.imageFocalY ?? 50}%` }}
             />
             <div className="absolute inset-0 bg-gradient-to-t from-[#0a0a0a] via-transparent to-transparent" />
           </div>

src/types/content.ts

@@ -84,6 +84,8 @@ export interface NewsItem {
   text: string;
   date: string;
   image?: string;
+  imageFocalX?: number; // 0-100, default 50
+  imageFocalY?: number; // 0-100, default 50
   link?: string;
 }