feat: история согласования — таймлайн с цветными плашками действий

Действие в ленте не выделялось среди остального текста, а комментарий шёл
серым курсивом. Теперь события на вертикальной линии с цветными кружками,
что произошло — плашкой по смыслу решения, комментарий — тем же блоком, что
в маршруте (ApprovalComment получил проп tone), у кого заявка сейчас —
пульсирующий кружок.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>

src/webparts/requestPortal/shared/approval/history/ApprovalHistory.module.scss

@@ -1,20 +1,22 @@
 @import '../../../../../styles/design-tokens';
 
-// Ширина колонки со временем — под «29.09.2026 11:02»; уже — текст переносится.
+// Кружок события на линии ленты.
-$time-col-width: 124px;
+$marker-size: 24px;
-// Ниже этой ширины время встаёт над текстом события, а не слева от него.
+// Толщина линии, соединяющей события.
-$feed-stack-breakpoint: 640px;
+$line-width: 2px;
+// Зазор между событиями — линия обязана его перекрыть, иначе рвётся.
+$event-gap: $sp-4;
 
 .feed {
   display: flex;
   flex-direction: column;
-  gap: $sp-4;
+  gap: $sp-5;
 }
 
 .round {
   display: flex;
   flex-direction: column;
-  gap: $sp-2;
+  gap: $sp-3;
 }
 
 .roundTitle {
@@ -30,62 +32,122 @@ $feed-stack-breakpoint: 640px;
 .events {
   display: flex;
   flex-direction: column;
-  gap: $sp-3;
+  gap: $event-gap;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
 .event {
+  position: relative;
   display: flex;
   align-items: flex-start;
   gap: $sp-3;
   font-size: $fs-sm;
   color: $gray-900;
-}
 
-.current {
+  // Линия от кружка к следующему событию — лента читается как хронология, а не
-  padding: $sp-2 $sp-3;
+  // как стопка одинаковых строк. У последнего события отправки линии нет:
-  border-radius: $r-sm;
+  // отправки разделены заголовками, а не одной сплошной нитью.
-  background: $gold-50;
+  &:not(:last-child)::before {
+    content: '';
+    position: absolute;
+    top: $marker-size;
+    bottom: -$event-gap;
+    left: calc((#{$marker-size} - #{$line-width}) / 2);
+    width: $line-width;
+    background: $gray-200;
+  }
 }
 
 .marker {
-  flex: 0 0 auto;
+  display: flex;
-  width: 20px;
+  flex: 0 0 $marker-size;
-  text-align: center;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: $marker-size;
+  height: $marker-size;
+  border: 1.5px solid;
+  border-radius: 50%;
+  font-size: 12px;
   font-weight: 700;
-  line-height: 1.4;
+  line-height: 1;
 }
 
-.markerNeutral { color: $navy-700; }
+// Цвета — те же смысловые, что у плашки события и полосы комментария
-.markerPositive { color: $green-600; }
+// (см. historyKinds.ts): кружок, плашка и комментарий одного события — одного цвета.
-.markerWarning { color: $amber-700; }
+.markerNeutral {
-.markerNegative { color: $red-500; }
+  border-color: $navy-600;
-.markerCurrent { color: $gold-600; }
+  background: $navy-50;
+  color: $navy-700;
+}
+
+.markerPositive {
+  border-color: $green-600;
+  background: $green-50;
+  color: $green-600;
+}
+
+.markerWarning {
+  border-color: $gold-500;
+  background: $gold-100;
+  color: $amber-700;
+}
+
+.markerNegative {
+  border-color: $red-500;
+  background: $red-50;
+  color: $red-500;
+}
+
+.markerCurrent {
+  border-color: $gold-500;
+  background: $gold-50;
+  color: $gold-600;
+  animation: current-pulse 2s ease-out infinite;
+}
+
+// Расходящееся кольцо вокруг кружка «сейчас».
+@keyframes current-pulse {
+  0% { box-shadow: 0 0 0 0 rgba($gold-500, .45); }
+  70% { box-shadow: 0 0 0 8px rgba($gold-500, 0); }
+  100% { box-shadow: 0 0 0 0 rgba($gold-500, 0); }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .markerCurrent {
+    animation: none;
+  }
+}
 
 .eventBody {
   display: flex;
+  flex: 1 1 auto;
   flex-direction: column;
-  gap: 2px;
+  gap: $sp-1;
-  min-width: 0;
+  min-width: 0; // иначе длинный комментарий распирает ленту вбок
 }
 
-.eventLine {
+// Плашка + время + длительность. На узкой ширине переносятся сами (flex-wrap),
+// отдельный медиазапрос не нужен. min-height — чтобы плашка стояла вровень
+// с центром кружка.
+.eventHead {
   display: flex;
   flex-wrap: wrap;
-  align-items: baseline;
+  align-items: center;
-  gap: $sp-1 $sp-3;
+  gap: $sp-1 $sp-2;
+  min-height: $marker-size;
 }
 
 .time {
-  flex: 0 0 $time-col-width;
+  font-size: $fs-label;
   color: $gray-500;
   font-variant-numeric: tabular-nums;
+}
 
-  @media (max-width: $feed-stack-breakpoint) {
+.actor {
-    flex-basis: 100%;
+  overflow-wrap: anywhere;
-  }
 }
 
 .meta {
@@ -93,12 +155,6 @@ $feed-stack-breakpoint: 640px;
   color: $gray-500;
 }
 
-.comment {
-  color: $gray-700;
-  font-style: italic;
-  overflow-wrap: anywhere;
-}
-
 .note {
   font-size: $fs-label;
   color: $gray-500;

src/webparts/requestPortal/shared/approval/history/CurrentHolderRow.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Badge } from '@tnsu/ui-kit';
 import { formatDuration, ICurrentHolder } from './historyModel';
 import { HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
@@ -11,16 +12,22 @@ interface Props {
 export const CurrentHolderRow: React.FC<Props> = ({ holder }) => {
   const waitedMs = holder.since ? Date.now() - new Date(holder.since).getTime() : NaN;
   return (
-    <li className={`${styles.event} ${styles.current}`}>
+    <li className={styles.event}>
+      {/* Пульсирующий кружок — единственное «живое» место ленты: всё остальное уже
+          случилось, а это ещё ждёт. */}
       <span className={`${styles.marker} ${styles.markerCurrent}`} aria-hidden="true">
         ●
       </span>
       <div className={styles.eventBody}>
-        <div className={styles.eventLine}>
+        <div className={styles.eventHead}>
-          <span className={styles.time}>{HISTORY_TEXT.now}</span>
+          <Badge variant="info" size="sm">
-          <strong>{holder.person || '—'}</strong>
+            {HISTORY_TEXT.awaiting}
+          </Badge>
           {waitedMs > 0 && <span className={styles.meta}>{HISTORY_TEXT.waiting(formatDuration(waitedMs))}</span>}
         </div>
+        <div className={styles.actor}>
+          <strong>{holder.person || '—'}</strong>
+        </div>
         {holder.stepTitle && <div className={styles.meta}>{holder.stepTitle}</div>}
       </div>
     </li>

src/webparts/requestPortal/shared/approval/history/HistoryEventRow.tsx

@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { formatDuration, HistoryEventKind, IHistoryEvent } from './historyModel';
+import { Badge } from '@tnsu/ui-kit';
-import { eventAction, HISTORY_TEXT } from './historyTexts';
+import { ApprovalComment, CommentTone } from '../ui/ApprovalComment';
+import { formatDuration, IHistoryEvent } from './historyModel';
+import { BADGE_BY_TONE, KIND_VIEW } from './historyKinds';
+import { eventDetails, eventLabel, HISTORY_TEXT } from './historyTexts';
 import styles from './ApprovalHistory.module.scss';
 
 interface Props {
   event: IHistoryEvent;
 }
 
-// Значок и цвет события — по смыслу решения, как у статусов в StatusBadge.
+const MARKER_CLASS: Record<CommentTone, string> = {
-const MARKER: Record<HistoryEventKind, { symbol: string; className: string }> = {
+  positive: styles.markerPositive,
-  submitted: { symbol: '↗', className: styles.markerNeutral },
+  negative: styles.markerNegative,
-  resubmitted: { symbol: '↗', className: styles.markerNeutral },
+  warning: styles.markerWarning,
-  approved: { symbol: '✓', className: styles.markerPositive },
+  neutral: styles.markerNeutral,
-  executed: { symbol: '✓', className: styles.markerPositive },
-  returned: { symbol: '↩', className: styles.markerWarning },
-  rejected: { symbol: '✕', className: styles.markerNegative },
-  delegated: { symbol: '→', className: styles.markerNeutral },
-  replaced: { symbol: '⇄', className: styles.markerNeutral },
 };
 
 export function formatDateTime(iso: string): string {
@@ -26,26 +24,35 @@ export function formatDateTime(iso: string): string {
   return `${pad(d.getDate())}.${pad(d.getMonth() + 1)}.${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
 }
 
-/** Одно событие ленты: время · кто — что сделал · за сколько + комментарий. */
+/**
+ * Одно событие ленты. Сверху — ЧТО произошло (цветная плашка) и когда: это то,
+ * за чем пользователь открывает историю. Ниже — кто, на каком шаге и почему.
+ */
 export const HistoryEventRow: React.FC<Props> = ({ event }) => {
-  const marker = MARKER[event.kind];
+  const view = KIND_VIEW[event.kind];
+  const details = eventDetails(event);
+
   return (
     <li className={styles.event}>
-      <span className={`${styles.marker} ${marker.className}`} aria-hidden="true">
+      <span className={`${styles.marker} ${MARKER_CLASS[view.tone]}`} aria-hidden="true">
-        {marker.symbol}
+        {view.symbol}
       </span>
       <div className={styles.eventBody}>
-        <div className={styles.eventLine}>
+        <div className={styles.eventHead}>
+          <Badge variant={BADGE_BY_TONE[view.tone]} size="sm">
+            {eventLabel(event.kind)}
+          </Badge>
           <span className={styles.time}>{formatDateTime(event.time)}</span>
-          <span>
-            <strong>{event.actor || '—'}</strong> — {eventAction(event)}
-          </span>
           {event.durationMs !== undefined && (
             <span className={styles.meta}>{HISTORY_TEXT.took(formatDuration(event.durationMs))}</span>
           )}
         </div>
+        <div className={styles.actor}>
+          <strong>{event.actor || '—'}</strong>
+          {details && <span className={styles.meta}> · {details}</span>}
+        </div>
         {event.stepTitle && <div className={styles.meta}>{event.stepTitle}</div>}
-        {event.comment && <div className={styles.comment}>«{event.comment}»</div>}
+        {event.comment && <ApprovalComment text={event.comment} tone={view.tone} />}
       </div>
     </li>
   );

src/webparts/requestPortal/shared/approval/history/historyKinds.ts

@@ -0,0 +1,29 @@
+import { BadgeVariant } from '@tnsu/ui-kit';
+import { CommentTone } from '../ui/ApprovalComment';
+import { HistoryEventKind } from './historyModel';
+
+/** Как событие выглядит в ленте: значок в кружке и цвет (кружок, плашка, комментарий). */
+export interface IKindView {
+  symbol: string;
+  tone: CommentTone;
+}
+
+// Цвет — по смыслу решения, как у статусов в StatusBadge: зелёное — пройдено,
+// золотое — вернули, красное — отказ, синее — служебное движение заявки.
+export const KIND_VIEW: Record<HistoryEventKind, IKindView> = {
+  submitted: { symbol: '↗', tone: 'neutral' },
+  resubmitted: { symbol: '↗', tone: 'neutral' },
+  approved: { symbol: '✓', tone: 'positive' },
+  executed: { symbol: '✓', tone: 'positive' },
+  returned: { symbol: '↩', tone: 'warning' },
+  rejected: { symbol: '✕', tone: 'negative' },
+  delegated: { symbol: '→', tone: 'neutral' },
+  replaced: { symbol: '⇄', tone: 'neutral' },
+};
+
+export const BADGE_BY_TONE: Record<CommentTone, BadgeVariant> = {
+  positive: 'success',
+  negative: 'danger',
+  warning: 'warning',
+  neutral: 'neutral',
+};

src/webparts/requestPortal/shared/approval/history/historyTexts.ts

@@ -9,28 +9,37 @@ export const HISTORY_TEXT = {
   empty: 'Пока нет событий: заявка ещё не отправлялась.',
   errorPrefix: 'Не удалось загрузить историю:',
   round: (n: number): string => `Отправка ${n}`,
-  now: 'сейчас',
+  awaiting: 'Ожидает решения',
-  waiting: (duration: string): string => `ждёт ${duration}`,
+  waiting: (duration: string): string => `уже ${duration}`,
   took: (duration: string): string => `за ${duration}`,
+  delegatedTo: (name: string): string => `кому: ${name}`,
   partialNote:
     'Показаны события, сохранённые в SharePoint. Решения из отправок до включения истории могли не сохраниться.',
 };
 
-const ACTION: Record<HistoryEventKind, string> = {
+// С заглавной: текст стоит первым словом в плашке события.
-  submitted: 'отправлено на согласование',
+const ACTION_LABEL: Record<HistoryEventKind, string> = {
-  resubmitted: 'отправлено повторно',
+  submitted: 'Отправлено на согласование',
-  approved: 'согласовано',
+  resubmitted: 'Отправлено повторно',
-  executed: 'выполнено',
+  approved: 'Согласовано',
-  returned: 'возвращено на доработку',
+  executed: 'Выполнено',
-  rejected: 'отклонено',
+  returned: 'Возвращено на доработку',
-  delegated: 'передано',
+  rejected: 'Отклонено',
-  replaced: 'заменён исполнитель',
+  delegated: 'Передано',
+  replaced: 'Заменён исполнитель',
 };
 
-/** Что произошло — «согласовано», «передано: Асель Самаева», «заменён исполнитель: А → Б». */
+/** Что произошло — текст плашки: «Согласовано», «Возвращено на доработку». */
-export function eventAction(event: IHistoryEvent): string {
+export function eventLabel(kind: HistoryEventKind): string {
-  const action = ACTION[event.kind];
+  return ACTION_LABEL[kind];
-  if (event.kind === 'delegated' && event.target) return `${action}: ${event.target}`;
+}
-  if (event.kind === 'replaced') return `${action}: ${event.previous || '—'} → ${event.target || '—'}`;
+
-  return action;
+/**
+ * Над кем действие — дописывается к имени автора: «кому: Асель Самаева» для
+ * передачи, «Иванов → Петров» для замены. У прочих событий пусто.
+ */
+export function eventDetails(event: IHistoryEvent): string {
+  if (event.kind === 'delegated' && event.target) return HISTORY_TEXT.delegatedTo(event.target);
+  if (event.kind === 'replaced') return `${event.previous || '—'} → ${event.target || '—'}`;
+  return '';
 }

src/webparts/requestPortal/shared/approval/ui/ApprovalComment.module.scss

@@ -22,7 +22,8 @@ $quote-line-height: 19px;
 }
 
 // Цвет — у полосы и кавычки, фон лишь подтон: текст должен читаться так же
-// спокойно, как остальная таблица, а не кричать.
+// спокойно, как остальная таблица, а не кричать. Белую карточку пробовали —
+// внутри формы она похожа на поле ввода.
 .neutral {
   border-left-color: $navy-600;
   background: $navy-50;

src/webparts/requestPortal/shared/approval/ui/ApprovalComment.tsx

@@ -3,7 +3,7 @@ import styles from './ApprovalComment.module.scss';
 import { REQUEST_STATUS } from '../models/statuses';
 import { useTextOverflow } from './useTextOverflow';
 
-type CommentTone = 'positive' | 'negative' | 'warning' | 'neutral';
+export type CommentTone = 'positive' | 'negative' | 'warning' | 'neutral';
 
 // Цвет полосы — по решению на шаге: причину отказа или возврата видно с первого
 // взгляда, ещё до того, как глаз дойдёт до колонки «Статус».
@@ -31,18 +31,23 @@ export interface IApprovalCommentProps {
   text: string;
   /** Статус строки маршрута (см. REQUEST_STATUS) — от него цвет полосы. */
   status?: string;
+  /**
+   * Цвет полосы напрямую — для мест, где статуса строки нет (напр. лента
+   * «Истории согласования» знает вид события, а не статус). Важнее status.
+   */
+  tone?: CommentTone;
 }
 
 /**
  * Комментарий участника маршрута к своему решению. Длинный текст свёрнут до
  * нескольких строк (см. $comment-visible-lines), остальное — по кнопке.
  */
-export const ApprovalComment: React.FC<IApprovalCommentProps> = ({ text, status }) => {
+export const ApprovalComment: React.FC<IApprovalCommentProps> = ({ text, status, tone: toneProp }) => {
   const [isExpanded, setIsExpanded] = React.useState(false);
   const textRef = React.useRef<HTMLDivElement>(null);
   const isClamped = useTextOverflow(textRef, text);
 
-  const tone = (status && TONE_BY_STATUS[status]) || 'neutral';
+  const tone = toneProp || (status && TONE_BY_STATUS[status]) || 'neutral';
   // В развёрнутом виде обрезки нет, и замер честно вернёт false, но кнопка
   // «Свернуть» при этом всё равно нужна.
   const showToggle = isExpanded || isClamped;