feat: add navigation to previous routine session and enhance session delta badge interaction

Author: aree6

frontend/components/historyView/ui/HistorySessionBlock.tsx

@@ -9,6 +9,7 @@ import { HistorySessionHeaderCard } from './HistorySessionHeaderCard';
 import { HistorySessionExercises } from './HistorySessionExercises';
 import { HistoryRestDivider } from './HistoryRestDivider';
 import { formatRestDuration, formatWorkoutDuration, getSessionDurationMs, isSameCalendarDay } from '../utils/historyViewConstants';
+import { findPreviousRoutineSession } from '../utils/routineNameMatcher';
 import type { ExerciseBestEvent, ExerciseVolumePrEvent } from '../utils/historyViewTypes';
 import type { TooltipState } from './HistoryTooltipPortal';
 import { ExerciseAsset } from '../../../utils/data/exerciseAssets';
@@ -40,6 +41,7 @@ interface HistorySessionBlockProps {
   onMouseEnter: (e: React.MouseEvent, data: any, variant: 'set' | 'macro') => void;
   onClearTooltip: () => void;
   setTooltip: (state: TooltipState | null) => void;
+  onNavigateToSession?: (sessionKey: string) => void;
 }
 
 export const HistorySessionBlock: React.FC<HistorySessionBlockProps> = ({
@@ -67,6 +69,7 @@ export const HistorySessionBlock: React.FC<HistorySessionBlockProps> = ({
   onMouseEnter,
   onClearTooltip,
   setTooltip,
+  onNavigateToSession,
 }) => {
   const allSessionSets = session.exercises.flatMap((e) => e.sets);
   const sessionHeatmap = buildSessionMuscleHeatmap(allSessionSets, exerciseMuscleData, secondarySetMultiplier);
@@ -85,8 +88,10 @@ export const HistorySessionBlock: React.FC<HistorySessionBlockProps> = ({
   const restText = restMs != null ? formatRestDuration(restMs) : null;
   const restIsDayBreak = !!(previousDisplayedSession?.date && session.date && !isSameCalendarDay(previousDisplayedSession.date, session.date));
 
-  const sessionIdx = sessions.findIndex((s) => s.key === session.key);
-  const prevSession = sessionIdx < sessions.length - 1 ? sessions[sessionIdx + 1] : null;
+  const prevSession = React.useMemo(
+    () => findPreviousRoutineSession(session, sessions),
+    [session, sessions],
+  );
 
   const toggleCollapsed = () => {
     setCollapsedSessions((prev) => {
@@ -121,6 +126,7 @@ export const HistorySessionBlock: React.FC<HistorySessionBlockProps> = ({
           bodyMapGender={bodyMapGender}
           setTooltip={setTooltip}
           toggleCollapsed={toggleCollapsed}
+          onNavigateToSession={onNavigateToSession}
         />
 
         {!isCollapsed && (

frontend/components/historyView/ui/HistorySessionHeaderCard.tsx

@@ -40,6 +40,7 @@ interface HistorySessionHeaderCardProps {
   bodyMapGender: BodyMapGender;
   setTooltip: (state: TooltipState | null) => void;
   toggleCollapsed: () => void;
+  onNavigateToSession?: (sessionKey: string) => void;
 }
 
 export const HistorySessionHeaderCard: React.FC<
@@ -59,6 +60,7 @@ export const HistorySessionHeaderCard: React.FC<
   bodyMapGender,
   setTooltip,
   toggleCollapsed,
+  onNavigateToSession,
 }) => {
   const [copied, setCopied] = useState(false);
 
@@ -308,7 +310,8 @@ export const HistorySessionHeaderCard: React.FC<
                   current={session.totalVolume}
                   previous={prevSession.totalVolume}
                   label="volume"
-                  context="vs lst"
+                  context={`vs lst - ${prevSession.title} ${prevSession.date ? formatRelativeTime(prevSession.date, effectiveNow) : ''}`}
+                  onClick={() => onNavigateToSession?.(prevSession.key)}
                 />
               </span>
             )}

frontend/components/historyView/ui/HistoryView.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { WorkoutSet } from '../../../types';
 import { Calendar, Dumbbell } from 'lucide-react';
 import { getExerciseAssets, ExerciseAsset } from '../../../utils/data/exerciseAssets';
@@ -94,6 +94,21 @@ export const HistoryView: React.FC<HistoryViewProps> = ({
   const totalPages = Math.ceil(sessions.length / ITEMS_PER_PAGE);
   const currentSessions = sessions.slice((currentPage - 1) * ITEMS_PER_PAGE, currentPage * ITEMS_PER_PAGE);
 
+  const navigateToSession = useCallback((key: string) => {
+    const idx = sessions.findIndex((s) => s.key === key);
+    if (idx === -1) return;
+
+    const page = Math.floor(idx / ITEMS_PER_PAGE) + 1;
+
+    if (page !== currentPage) {
+      setCurrentPage(page);
+    }
+
+    setTimeout(() => {
+      document.getElementById(`session-${key}`)?.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    }, page !== currentPage ? 100 : 0);
+  }, [sessions, currentPage]);
+
   useEffect(() => {
     if (!targetDate || sessions.length === 0) return;
 
@@ -202,6 +217,7 @@ export const HistoryView: React.FC<HistoryViewProps> = ({
             onMouseEnter={handleMouseEnter}
             onClearTooltip={() => setTooltip(null)}
             setTooltip={setTooltip}
+            onNavigateToSession={navigateToSession}
           />
         ))}
       </div>

frontend/components/historyView/ui/SessionDeltaBadge.tsx

@@ -8,6 +8,7 @@ interface SessionDeltaBadgeProps {
   suffix?: string;
   label: string;
   context?: string;
+  onClick?: () => void;
 }
 
 export const SessionDeltaBadge: React.FC<SessionDeltaBadgeProps> = ({
@@ -16,6 +17,7 @@ export const SessionDeltaBadge: React.FC<SessionDeltaBadgeProps> = ({
   suffix = '',
   label,
   context = 'vs lst',
+  onClick,
 }) => {
   const delta = current - previous;
   if (delta === 0 || previous === 0) return null;
@@ -27,13 +29,35 @@ export const SessionDeltaBadge: React.FC<SessionDeltaBadgeProps> = ({
 
   const formattedPercent = formatDeltaPercentage(deltaPercent, getDeltaFormatPreset('badge'));
 
+  const content = (
+    <>
+      <Icon className={`w-3 h-3 ${colorClass}`} />
+      <span>{formattedPercent}{suffix}</span>
+    </>
+  );
+
+  if (onClick) {
+    return (
+      <button
+        type="button"
+        onClick={(e) => {
+          e.stopPropagation();
+          onClick();
+        }}
+        className={`relative -top-[2px] inline-flex items-center gap-0.5 ml-1 text-[10px] font-bold leading-none ${colorClass} hover:opacity-80 transition-opacity cursor-pointer`}
+        title={`${deltaPercent}% ${label} ${context} — click to view`}
+      >
+        {content}
+      </button>
+    );
+  }
+
   return (
     <span
       className={`relative -top-[2px] inline-flex items-center gap-0.5 ml-1 text-[10px] font-bold leading-none ${colorClass}`}
       title={`${deltaPercent}% ${label} ${context}`}
     >
-      <Icon className={`w-3 h-3 ${colorClass}`} />
-      <span>{formattedPercent}{suffix}</span>
+      {content}
     </span>
   );
 };

frontend/components/historyView/utils/routineNameMatcher.ts

@@ -0,0 +1,46 @@
+import { createExerciseNameResolver } from '../../../utils/exercise/exerciseNameResolver';
+import type { Session } from './historySessions';
+
+const LOOKBACK_MS = 14 * 24 * 60 * 60 * 1000;
+
+let titleResolverCache: { titles: string[]; resolver: ReturnType<typeof createExerciseNameResolver> } | null = null;
+
+const getTitleResolver = (titles: string[]) => {
+  if (titleResolverCache && titleResolverCache.titles.length === titles.length && titleResolverCache.titles.every((t, i) => t === titles[i])) {
+    return titleResolverCache.resolver;
+  }
+  const resolver = createExerciseNameResolver(titles, { mode: 'relaxed' });
+  titleResolverCache = { titles, resolver };
+  return resolver;
+};
+
+export const findPreviousRoutineSession = (
+  session: Session,
+  allSessions: Session[],
+): Session | null => {
+  if (!session.date) return null;
+
+  const cutoff = new Date(session.date.getTime() - LOOKBACK_MS);
+
+  const candidates = allSessions.filter(
+    (s) =>
+      s.key !== session.key &&
+      s.date &&
+      s.date < session.date! &&
+      s.date >= cutoff,
+  );
+
+  if (candidates.length === 0) return null;
+
+  const uniqueTitles = [...new Set(candidates.map((s) => s.title))];
+  const resolver = getTitleResolver(uniqueTitles);
+  const resolution = resolver.resolve(session.title);
+
+  if (resolution.method === 'none' || !resolution.name) return null;
+
+  const matched = candidates
+    .filter((s) => s.title === resolution.name)
+    .sort((a, b) => (b.date?.getTime() ?? 0) - (a.date?.getTime() ?? 0));
+
+  return matched[0] ?? null;
+};