Добавлены изменения для PWA

figma/src/app/pages/History.tsx

@@ -1,52 +1,33 @@
-import { MessageSquare, Clock, ArrowLeft } from 'lucide-react';
+import { Clock, ArrowLeft, Bell, AlertCircle, Calendar, MessageCircle, Tag } from 'lucide-react';
 import { useNavigate } from 'react-router';
+import { getActiveMessages, CompanyMessage } from '../data/companyMessages';
 
-interface ChatSession {
-  id: string;
-  title: string;
-  lastMessage: string;
-  timestamp: string;
-  unread?: boolean;
+function getIcon(type: CompanyMessage['type']) {
+  if (type === 'urgent') return <AlertCircle className="w-4 h-4" />;
+  if (type === 'reminder') return <Calendar className="w-4 h-4" />;
+  if (type === 'message') return <MessageCircle className="w-4 h-4" />;
+  if (type === 'promo') return <Tag className="w-4 h-4" />;
+  return <Bell className="w-4 h-4" />;
 }
 
-const chatHistory: ChatSession[] = [
-  {
-    id: '1',
-    title: 'Продление патента',
-    lastMessage: 'Спасибо за помощь! Я понял что нужно делать.',
-    timestamp: 'Сегодня, 14:30',
-    unread: false
-  },
-  {
-    id: '2',
-    title: 'Документы для РВП',
-    lastMessage: 'Какие документы нужны для подачи на РВП?',
-    timestamp: 'Вчера, 18:45',
-    unread: false
-  },
-  {
-    id: '3',
-    title: 'Регистрация по месту жительства',
-    lastMessage: 'HAN: Вам нужно обратиться в МФЦ с паспортом и...',
-    timestamp: '20 мая, 10:15',
-    unread: false
-  },
-  {
-    id: '4',
-    title: 'Оплата патента',
-    lastMessage: 'Где можно оплатить патент?',
-    timestamp: '18 мая, 16:20',
-    unread: false
-  },
-];
+function typeColors(type: CompanyMessage['type']) {
+  if (type === 'urgent') return { icon: 'bg-destructive/12 text-destructive', dot: 'bg-destructive' };
+  if (type === 'reminder') return { icon: 'bg-primary/10 text-primary', dot: 'bg-primary' };
+  if (type === 'message') return { icon: 'bg-[#c8e6c9] text-[#2e7d32]', dot: 'bg-[#43a047]' };
+  if (type === 'promo') return { icon: 'bg-[#fff3cd] text-[#e65100]', dot: 'bg-[#fb8c00]' };
+  return { icon: 'bg-muted text-muted-foreground', dot: 'bg-muted-foreground' };
+}
 
 export function History() {
   const navigate = useNavigate();
+  const messages = getActiveMessages();
 
   return (
     <div className="flex-1 overflow-y-auto">
-      <div className="px-4 py-4">
-        <div className="flex items-center gap-3 mb-4">
+      <div className="px-4 py-4 space-y-4">
+
+        {/* Заголовок страницы */}
+        <div className="flex items-center gap-3">
           <button
             onClick={() => navigate('/')}
             className="flex items-center justify-center w-9 h-9 rounded-full hover:bg-muted transition-colors"
@@ -54,35 +35,58 @@ export function History() {
           >
             <ArrowLeft className="w-5 h-5" />
           </button>
-          <div>
-            <h1 className="text-xl font-medium">История общения</h1>
-            <p className="text-sm text-muted-foreground">Все ваши диалоги с HAN</p>
-          </div>
+          <h1 className="flex-1 text-xl font-medium">Центр уведомлений</h1>
+          {messages.length > 0 && (
+            <span className="text-xs font-medium text-primary bg-primary/10 rounded-full px-2.5 py-1">
+              {messages.length}
+            </span>
+          )}
         </div>
 
-        <div className="space-y-2">
-          {chatHistory.map((chat) => (
-            <button
-              key={chat.id}
-              onClick={() => navigate(`/chat/${chat.id}`)}
-              className="w-full bg-card border border-border rounded-lg p-4 flex items-start gap-3 hover:bg-accent/50 transition-colors text-left"
-            >
-              <div className="flex items-center justify-center w-10 h-10 rounded-full bg-primary/10 text-primary flex-shrink-0">
-                <MessageSquare className="w-5 h-5" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <h3 className="font-medium text-sm mb-1">{chat.title}</h3>
-                <p className="text-xs text-muted-foreground line-clamp-1 mb-2">
-                  {chat.lastMessage}
-                </p>
-                <div className="flex items-center gap-1 text-xs text-muted-foreground">
-                  <Clock className="w-3 h-3" />
-                  <span>{chat.timestamp}</span>
-                </div>
-              </div>
-            </button>
-          ))}
-        </div>
+        {/* Список уведомлений */}
+        {messages.length > 0 ? (
+          <div className="space-y-2">
+            {messages.map(msg => {
+              const colors = typeColors(msg.type);
+              return (
+                <button
+                  key={msg.id}
+                  onClick={() => msg.type === 'message' && msg.chatId
+                    ? navigate(`/chat/${msg.chatId}`)
+                    : navigate(`/notification/${msg.id}`)
+                  }
+                  className="w-full bg-card border border-border rounded-xl p-3.5 flex items-start gap-3 hover:bg-accent/50 transition-colors text-left"
+                >
+                  <div className={`relative flex items-center justify-center w-9 h-9 rounded-full flex-shrink-0 ${colors.icon}`}>
+                    {getIcon(msg.type)}
+                    <span className={`absolute -top-0.5 -right-0.5 w-2.5 h-2.5 rounded-full border-2 border-background ${colors.dot}`} />
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <p className="text-sm font-medium text-foreground leading-snug line-clamp-1 mb-0.5">
+                      {msg.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground line-clamp-1 mb-1.5">
+                      {msg.description}
+                    </p>
+                    <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                      <Clock className="w-3 h-3" />
+                      <span>{msg.date}</span>
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="flex flex-col items-center justify-center py-12 text-center">
+            <div className="w-12 h-12 rounded-full bg-muted flex items-center justify-center mb-3">
+              <Bell className="w-5 h-5 text-muted-foreground" />
+            </div>
+            <p className="text-sm font-medium text-foreground mb-1">Всё актуально</p>
+            <p className="text-xs text-muted-foreground">Новых уведомлений нет</p>
+          </div>
+        )}
+
       </div>
     </div>
   );