Merge pull request #13001 from overleaf/td-history-version-hover-style

History migration: Use green selected style when hovering over selected version

GitOrigin-RevId: 7771ce64d719c3d0e5264dfd2fbbf52f5b519213

services/web/frontend/js/features/history/components/change-list/history-version.tsx

@@ -42,7 +42,7 @@ function HistoryVersion({ update, faded }: HistoryEntryProps) {
         fromVTimestamp={update.meta.end_ts}
         toVTimestamp={update.meta.end_ts}
         selected={selected}
-        selectable={!faded}
+        selectable={!faded && (selection.comparing || !selected)}
       >
         <div className="history-version-main-details">
           <time className="history-version-metadata-time">

services/web/frontend/js/features/history/components/change-list/labels-list.tsx

@@ -9,6 +9,7 @@ import { useUserContext } from '../../../../shared/context/user-context'
 import { isVersionSelected } from '../../utils/history-details'
 import { getVersionWithLabels, isPseudoLabel } from '../../utils/label'
 import { formatTime, isoToUnix } from '../../../utils/format-date'
+import { Version } from '../../services/types/update'
 
 function LabelsList() {
   const { t } = useTranslation()
@@ -20,10 +21,18 @@ function LabelsList() {
     [labels]
   )
 
+  const selectedVersions = new Set<Version>(
+    Array.from(versionWithLabels.values(), value => value.version).filter(
+      version => isVersionSelected(selection, version)
+    )
+  )
+
+  const singleVersionSelected = selectedVersions.size === 1
+
   return (
     <>
       {versionWithLabels.map(({ version, labels }) => {
-        const selected = isVersionSelected(selection, version)
+        const selected = selectedVersions.has(version)
 
         // first label
         const fromVTimestamp = isoToUnix(labels[labels.length - 1].created_at)
@@ -38,7 +47,7 @@ function LabelsList() {
             fromVTimestamp={fromVTimestamp}
             toVTimestamp={toVTimestamp}
             selected={selected}
-            selectable
+            selectable={!(singleVersionSelected && selected)}
           >
             <div className="history-version-main-details">
               {labels.map(label => (

services/web/frontend/stylesheets/app/editor/history-react.less

@@ -99,14 +99,18 @@ history-root {
     padding-top: 8px;
     padding-bottom: 8px;
 
-    &.history-version-selectable:hover {
+    &.history-version-selectable {
       cursor: pointer;
-      background-color: @neutral-10;
+
+      &:hover {
+        background-color: @neutral-10;
+      }
     }
-  }
 
-  .history-version-selected {
-    background-color: @green-10;
+    &.history-version-selected,
+    &.history-version-selected.history-version-selectable:hover {
+      background-color: @green-10;
+    }
   }
 
   .history-version-metadata-time {