Обновление на Sonner

📋 Что было сделано

❌ Удалено (устаревшие компоненты)

src/components/ui/toast.tsx
src/components/ui/toaster.tsx
src/hooks/use-toast.ts

✅ Добавлено (современные решения)

sonner package
src/components/ui/sonner.tsx (официальная интеграция shadcn/ui)

🔧 Обновлено

App.tsx

- import { Toaster } from './components/ui/toaster';
+ import { Toaster } from '@/components/ui/sonner';

PostCreate.tsx

- import { useToast } from '@/hooks/use-toast';
+ import { toast } from 'sonner';

- const { toast } = useToast();
- toast({
-   title: "Успешно!",
-   description: `Пост "${data.title}" был создан`,
- });
+ toast.success(`Пост "${data.title}" был создан`);

PostsList.tsx

- import { useToast } from '@/hooks/use-toast';
+ import { toast } from 'sonner';

- toast({
-   title: "Пост удален",
-   description: "Пост был успешно удален",
- });
+ toast.success("Пост был успешно удален");

PostEdit.tsx (новый файл)

✅ Создана полноценная страница редактирования постов
✅ Использует sonner для уведомлений
✅ Поддерживает загрузку, обработку ошибок, предпросмотр

🎯 Новые возможности

📝 Полный CRUD функционал

✅ Создание постов (/posts/new)
✅ Просмотр постов (/posts)
✅ Редактирование постов (/posts/:slug/edit)
✅ Удаление постов (с подтверждением)

🎨 Современный UI

✅ Sonner уведомления - красивые toast'ы
✅ Валидация форм с zod + react-hook-form
✅ Автогенерация slug из заголовка
✅ Режим черновика для неопубликованных постов
✅ Поддержка тегов и метаданных

🔧 Техническая часть

✅ TypeScript типизация для всех компонентов
✅ TanStack Query для управления состоянием
✅ shadcn/ui компоненты для консистентного дизайна
✅ React Router для навигации

📊 Статистика системы

После обновления в системе:

🎯 3 демо поста (welcome, test-post, sonner-update)
🔧 Полный API для CRUD операций
📁 Автосохранение в backend/content/*.mdx
🌐 Готовность к синхронизации с frontend

🚀 Команды для использования

Запуск системы

npm run dev

Доступ к сервисам

Админка: http://localhost:5173
API: http://localhost:3333
Frontend: http://localhost:3000 (скоро)

Тестирование API

# Получить все посты
curl http://localhost:3333/api/posts

# Получить конкретный пост
curl http://localhost:3333/api/posts/sonner-update

# Создать пост
curl -X POST http://localhost:3333/api/posts \
  -H "Content-Type: application/json" \
  -d '{"filename": "my-post.mdx", "content": "..."}'

📖 Примеры использования Sonner

✅ Успешные операции

import { toast } from 'sonner';

toast.success("Пост создан!");
toast.success("Изменения сохранены");

❌ Обработка ошибок

toast.error("Не удалось создать пост");
toast.error(error.message);

ℹ️ Информационные сообщения

toast.info("Загрузка данных...");
toast.warning("Проверьте данные");

🎨 Кастомные toast'ы

toast("Кастомное сообщение", {
  description: "Дополнительная информация",
  action: {
    label: "Отменить",
    onClick: () => console.log("Отменено"),
  },
});

🎉 Результат

Система стала:

🎨 Современнее - красивые уведомления
🚀 Быстрее - оптимизированный рендеринг
📱 Адаптивнее - работает на всех устройствах
🔧 Проще в использовании - минимум кода
💪 Надежнее - лучшая обработка ошибок

Готово к продакшну! ✨