Improve activity journal readability

src/web/features/activity-journal/ActivityJournalFeature.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { assertActivityJournalPage, type ActivityJournalEvent } from '../../../shared/activityJournal.js';
+import { compactActivityJournalEvents, refreshStreakCopy, type ActivityJournalDisplayItem } from './activityJournalModel.js';
 import { Drawer } from '../../ui/Drawer.js';
 import { RailAction } from '../../ui/RailAction.js';
 
@@ -122,11 +123,11 @@ export function ActivityJournalPanel({ feature, loadPage }: {
     if (feature.isOpen) void load(null, status !== 'idle');
   }, [feature.isOpen]);
 
-  const groups = events.reduce<Array<{ label: string; events: ActivityJournalEvent[] }>>((result, event) => {
-    const label = dayLabel(event.occurredAt);
+  const groups = compactActivityJournalEvents(events).reduce<Array<{ label: string; items: ActivityJournalDisplayItem[] }>>((result, item) => {
+    const label = dayLabel(item.event.occurredAt);
     const group = result.at(-1);
-    if (group?.label === label) group.events.push(event);
-    else result.push({ label, events: [event] });
+    if (group?.label === label) group.items.push(item);
+    else result.push({ label, items: [item] });
     return result;
   }, []);
 
@@ -152,9 +153,18 @@ export function ActivityJournalPanel({ feature, loadPage }: {
       : !events.length && status === 'ready' ? <p className="client-journal-empty">За последние 30 дней важных событий пока нет</p>
         : <div className="client-journal-groups">{groups.map((group) => <section key={group.label}>
           <h3>{group.label}</h3>
-          <ol>{group.events.map((event) => {
-            const [title, details] = eventCopy(event);
-            return <li key={event.id} className={event.severity === 'error' ? 'is-error' : event.severity === 'warning' ? 'is-warning' : ''}>
+          <ol>{group.items.map((item) => {
+            const { event } = item;
+            const [title, details] = refreshStreakCopy(item) || eventCopy(event);
+            return <li key={event.id} className={event.severity === 'error'
+              ? 'client-journal-event is-error'
+              : event.severity === 'warning'
+                ? 'client-journal-event is-warning'
+                : event.type === 'failover.switched' && event.data.toRole === 'primary'
+                  ? 'client-journal-event is-switch-primary'
+                  : event.type === 'failover.switched' && event.data.toRole === 'reserve'
+                    ? 'client-journal-event is-switch-reserve'
+                    : 'client-journal-event'}>
               <div className="client-journal-time"><time dateTime={event.occurredAt}>{new Intl.DateTimeFormat('ru-RU', { hour: '2-digit', minute: '2-digit' }).format(new Date(event.occurredAt))}</time><span>{event.source}</span></div>
               <div><strong>{title}</strong>{details && <span>{details}</span>}{event.severity !== 'info' && <em>{event.severity === 'error' ? 'Ошибка' : 'Внимание'}</em>}</div>
             </li>;