fix: безопасность и UX лендингов — 16 исправлений

- CRITICAL: усиленная CSS-санитизация (escape-последовательности, at-rules)
- CRITICAL: очистка setTimeout при unmount
- HIGH: useMutation для создания покупки (вместо ручного fetch)
- HIGH: DOMPurify + rel="noopener noreferrer" на ссылках
- HIGH: ErrorBoundary для публичных страниц покупки
- MEDIUM: стабильные UUID для DnD элементов
- MEDIUM: race condition в delete timeout
- MEDIUM: клиентская валидация формы лендинга
- MEDIUM: staleTime для админ-запросов
- MEDIUM: общая утилита getApiErrorMessage
- MEDIUM: уведомление о таймауте поллинга
- LOW: ARIA роли для radio-карточек и форм
- LOW: дедупликация иконок в LandingIcons.tsx
- LOW: cn() вместо template literals

src/pages/AdminLandings.tsx

@@ -5,7 +5,10 @@ import { useTranslation } from 'react-i18next';
 import { adminLandingsApi, LandingListItem } from '../api/landings';
 import { useNotify } from '@/platform';
 import { copyToClipboard } from '../utils/clipboard';
+import { getApiErrorMessage } from '../utils/api-error';
 import { usePlatform } from '../platform/hooks/usePlatform';
+import { cn } from '../lib/utils';
+import { BackIcon, PlusIcon, TrashIcon, GripIcon } from '../components/icons/LandingIcons';
 import {
   DndContext,
   KeyboardSensor,
@@ -23,13 +26,7 @@ import {
 } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 
-// Icons
-const PlusIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
-  </svg>
-);
-
+// Icons (non-shared, page-specific)
 const EditIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path
@@ -40,16 +37,6 @@ const EditIcon = () => (
   </svg>
 );
 
-const TrashIcon = () => (
-  <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
-    />
-  </svg>
-);
-
 const CheckIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path strokeLinecap="round" strokeLinejoin="round" d="M4.5 12.75l6 6 9-13.5" />
@@ -72,28 +59,6 @@ const GiftIcon = () => (
   </svg>
 );
 
-const BackIcon = () => (
-  <svg
-    className="h-5 w-5 text-dark-400"
-    fill="none"
-    viewBox="0 0 24 24"
-    stroke="currentColor"
-    strokeWidth={2}
-  >
-    <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
-  </svg>
-);
-
-const GripIcon = () => (
-  <svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-    />
-  </svg>
-);
-
 const SaveIcon = () => (
   <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
     <path
@@ -149,13 +114,14 @@ function SortableLandingCard({
     <div
       ref={setNodeRef}
       style={style}
-      className={`rounded-xl border bg-dark-800 p-4 transition-colors ${
+      className={cn(
+        'rounded-xl border bg-dark-800 p-4 transition-colors',
         isDragging
           ? 'border-accent-500/50 shadow-xl shadow-accent-500/20'
           : landing.is_active
             ? 'border-dark-700'
-            : 'border-dark-700/50 opacity-60'
-      }`}
+            : 'border-dark-700/50 opacity-60',
+      )}
     >
       <div className="flex items-start gap-3">
         {/* Drag handle */}
@@ -209,11 +175,12 @@ function SortableLandingCard({
 
           <button
             onClick={onToggle}
-            className={`rounded-lg p-2 transition-colors ${
+            className={cn(
+              'rounded-lg p-2 transition-colors',
               landing.is_active
                 ? 'bg-success-500/20 text-success-400 hover:bg-success-500/30'
-                : 'bg-dark-700 text-dark-400 hover:bg-dark-600'
-            }`}
+                : 'bg-dark-700 text-dark-400 hover:bg-dark-600',
+            )}
             title={landing.is_active ? t('admin.landings.inactive') : t('admin.landings.active')}
           >
             {landing.is_active ? <CheckIcon /> : <XIcon />}
@@ -229,11 +196,12 @@ function SortableLandingCard({
 
           <button
             onClick={onDelete}
-            className={`rounded-lg p-2 transition-colors ${
+            className={cn(
+              'rounded-lg p-2 transition-colors',
               isPendingDelete
                 ? 'bg-error-500/20 text-error-400 ring-1 ring-error-500/30'
-                : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400'
-            }`}
+                : 'bg-dark-700 text-dark-300 hover:bg-error-500/20 hover:text-error-400',
+            )}
             title={
               isPendingDelete
                 ? t('admin.landings.deleteConfirm', { title: landing.title })
@@ -276,6 +244,7 @@ export default function AdminLandings() {
   const { data: landingsData, isLoading } = useQuery({
     queryKey: ['admin-landings'],
     queryFn: () => adminLandingsApi.list(),
+    staleTime: 30_000,
   });
 
   // Sync fetched data to local state
@@ -294,9 +263,7 @@ export default function AdminLandings() {
       notify.success(t('admin.landings.orderSaved'));
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
@@ -308,9 +275,7 @@ export default function AdminLandings() {
       notify.success(t('admin.landings.deleted'));
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });
 
@@ -320,6 +285,7 @@ export default function AdminLandings() {
       setPendingDeleteId(null);
     } else {
       setPendingDeleteId(landing.id);
+      if (deleteTimeoutRef.current) clearTimeout(deleteTimeoutRef.current);
       deleteTimeoutRef.current = setTimeout(
         () => setPendingDeleteId((prev) => (prev === landing.id ? null : prev)),
         3000,
@@ -333,9 +299,7 @@ export default function AdminLandings() {
       queryClient.invalidateQueries({ queryKey: ['admin-landings'] });
     },
     onError: (err: unknown) => {
-      const message = (err as { response?: { data?: { detail?: string } } })?.response?.data
-        ?.detail;
-      notify.error(message || t('common.error'));
+      notify.error(getApiErrorMessage(err, t('common.error')));
     },
   });