Тосты: убрать лишние, остальные показывать как уведомления сверху

Многие тосты повторяли то, что пользователь и так видит сразу после действия:
новую фракцию или аватар в профиле, переход на страницу партии, исчезнувшую
карточку приглашения, закрывшийся редактор. Такой шум приучает не читать
всплывашки, в том числе ошибки. Убраны 19 таких тостов в профиле, группах,
партиях и админке.

Остались ошибки, предупреждения (лимит фото, повторы фракций, конфликт правок,
«вы не в группе») и сообщения о действиях без видимого следа: приглашение
отправлено, дополнения сохранены, вступление в группу, пароль задан. Сохранение
текстового поля, где заметна только погасшая кнопка, тоже осталось.

По просьбе владельца оставшиеся тосты показываются не нижней «таблеткой», а
всплывашкой сверху, как входящие уведомления. ToastProvider держит одну стопку
на всё приложение: show — обычное сообщение, error — ошибка с красной полосой
(держится 5 с), notify — уведомление с переходом по клику. Одинаковое сообщение
не копится, а заменяет прежнее; клик по карточке закрывает её.
NotificationToaster больше не рисует свою стопку, а отдаёт новые уведомления в
общую, поэтому они не наезжают на сообщения. Все вызовы с ApiError и отказы
(лимит фото, партия изменилась на другом устройстве) переведены на toast.error.
Нижний класс .toast удалён.

#41

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XfTsytzT6TojfmprRDKiV6

frontend/src/components/CreateGroupForm.tsx

@@ -1,7 +1,6 @@
 import { useState } from "react";
 
 import { ApiError } from "../api/client";
-import { useToast } from "../context/ToastContext";
 import { useCreateGroup } from "../hooks/groups";
 import { useExpansions } from "../hooks/reference";
 import { Switch } from "./Switch";
@@ -9,7 +8,6 @@ import { Switch } from "./Switch";
 export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
   const { data: expansions } = useExpansions();
   const createGroup = useCreateGroup();
-  const toast = useToast();
   const [name, setName] = useState("");
   const [selected, setSelected] = useState<Set<number>>(new Set());
   const [error, setError] = useState<string | null>(null);
@@ -25,7 +23,6 @@ export function CreateGroupForm({ onCreated }: { onCreated?: () => void }) {
     setError(null);
     try {
       await createGroup.mutateAsync({ name: name.trim(), expansion_ids: [...selected] });
-      toast.show("Группа создана");
       onCreated?.();
     } catch (e) {
       setError(e instanceof ApiError ? e.message : "Не удалось создать группу");

frontend/src/components/GroupInvitations.tsx

@@ -15,16 +15,15 @@ export function GroupInvitations() {
       await accept.mutateAsync(id);
       toast.show("Вы вступили в группу");
     } catch (e) {
-      toast.show(e instanceof ApiError ? e.message : "Ошибка");
+      toast.error(e instanceof ApiError ? e.message : "Ошибка");
     }
   };
 
   const onDecline = async (id: number) => {
     try {
       await decline.mutateAsync(id);
-      toast.show("Приглашение отклонено");
     } catch (e) {
-      toast.show(e instanceof ApiError ? e.message : "Ошибка");
+      toast.error(e instanceof ApiError ? e.message : "Ошибка");
     }
   };
 

frontend/src/components/MatchMedia.tsx

@@ -35,14 +35,14 @@ export function MatchMedia({
     let slots = max - attachments.length;
     for (const f of files) {
       if (slots <= 0) {
-        toast.show(`Максимум ${max} фото`);
+        toast.error(`Максимум ${max} фото`);
         break;
       }
       try {
         await onUpload(f);
         slots--;
       } catch (err) {
-        toast.show(err instanceof ApiError ? err.message : "Не удалось загрузить");
+        toast.error(err instanceof ApiError ? err.message : "Не удалось загрузить");
         break;
       }
     }
@@ -53,7 +53,7 @@ export function MatchMedia({
     try {
       await onDelete(id);
     } catch (e) {
-      toast.show(e instanceof ApiError ? e.message : "Не удалось удалить");
+      toast.error(e instanceof ApiError ? e.message : "Не удалось удалить");
     }
   };
 

frontend/src/components/NotificationToaster.tsx

@@ -1,18 +1,17 @@
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 
-import { useNotifications, type Notification } from "../hooks/notifications";
-
-const TOAST_TTL_MS = 5000;
-const MAX_VISIBLE = 4;
+import { useToast } from "../context/ToastContext";
+import { useNotifications } from "../hooks/notifications";
 
 /** Всплывашки сверху экрана в момент прихода новых уведомлений (push-to-invalidate → pull).
- * Первый снимок списка не всплывает (чтобы не спамить при загрузке) — только новые id. */
+ * Первый снимок списка не всплывает (чтобы не спамить при загрузке) — только новые id.
+ * Показывает их общая стопка ToastProvider — там же, где сообщения приложения. */
 export function NotificationToaster({ enabled }: { enabled: boolean }) {
   const { data } = useNotifications(enabled);
   const navigate = useNavigate();
+  const toast = useToast();
   const seen = useRef<Set<number> | null>(null);
-  const [toasts, setToasts] = useState<Notification[]>([]);
 
   useEffect(() => {
     if (!data) return;
@@ -22,29 +21,16 @@ export function NotificationToaster({ enabled }: { enabled: boolean }) {
       return;
     }
     const fresh = items.filter((n) => !seen.current!.has(n.id));
-    if (fresh.length === 0) return;
     fresh.forEach((n) => seen.current!.add(n.id));
-    setToasts((prev) => [...fresh, ...prev].slice(0, MAX_VISIBLE));
-    fresh.forEach((n) => {
-      setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== n.id)), TOAST_TTL_MS);
-    });
-  }, [data]);
+    // Стопка добавляет новое наверх, поэтому идём с конца: первое в списке окажется сверху.
+    [...fresh].reverse().forEach((n) =>
+      toast.notify({
+        title: n.title,
+        body: n.body,
+        onClick: n.link ? () => navigate(n.link!) : undefined,
+      }),
+    );
+  }, [data, toast, navigate]);
 
-  if (!enabled || toasts.length === 0) return null;
-
-  const click = (n: Notification) => {
-    setToasts((prev) => prev.filter((t) => t.id !== n.id));
-    if (n.link) navigate(n.link);
-  };
-
-  return (
-    <div className="toast-top-wrap">
-      {toasts.map((n) => (
-        <button key={n.id} className="toast-top" onClick={() => click(n)}>
-          <div className="toast-top-title">{n.title}</div>
-          {n.body && <div className="toast-top-body">{n.body}</div>}
-        </button>
-      ))}
-    </div>
-  );
+  return null;
 }