add translation for tags

src/components/MetricCard.tsx

@@ -5,28 +5,33 @@ import { getMetricStatus, type MetricStatusInfo } from '../utils/metricStatus';
 
 type MetricCardProps = {
   item: CurrentItem;
+  displayName?: string;
   selected: boolean;
   statusInfo?: MetricStatusInfo;
   onToggle: (tag: string) => void;
 };
 
 /** Показывает детальную карточку текущего показателя и управляет добавлением тега на график. */
-export function MetricCard({ item, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
+export function MetricCard({ item, displayName, selected, statusInfo = getMetricStatus(item), onToggle }: MetricCardProps) {
   const { ageSeconds, label, status } = statusInfo;
   const ageLabel = ageSeconds < 60 ? `${ageSeconds}с` : `${Math.floor(ageSeconds / 60)}м ${ageSeconds % 60}с`;
+  const title = displayName ?? item.tag;
 
   return (
     <button
       className={`metric-card metric-card--${status} ${selected ? 'metric-card--selected' : ''}`}
       type="button"
       onClick={() => onToggle(item.tag)}
-      title={selected ? 'Убрать с графика' : 'Добавить на график'}
+      title={`${selected ? 'Убрать с графика' : 'Добавить на график'}: ${title}`}
     >
       <div className="metric-card__header">
         <span className="metric-card__signal">
           <Activity size={15} />
         </span>
-        <span className="metric-card__tag">{item.tag}</span>
+        <span className="metric-card__tag">
+          <span>{title}</span>
+          {displayName && displayName !== item.tag ? <small>{item.tag}</small> : null}
+        </span>
         <span className="metric-card__corner">
           <span className={`metric-card__state is-${status}`}>{label}</span>
           <span className="metric-card__age" title="Возраст последнего измерения">