Refactors history card highlighting to use prop-based approach

Replaces CSS class-based highlighting with a dedicated highlighted prop for better component encapsulation and maintainability.

Removes hardcoded styling logic from the parent component and moves the highlighting responsibility to the card component itself.

Author: itisAliRH

client/src/components/History/HistoryCard.vue

@@ -100,6 +100,13 @@ interface Props {
      * @default false
      */
     clickable?: boolean;
+
+    /**
+     * Whether this card is highlighted (for example, as a range selection anchor)
+     * @type {boolean}
+     * @default false
+     */
+    highlighted?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -110,6 +117,7 @@ const props = withDefaults(defineProps<Props>(), {
     selected: false,
     sharedView: false,
     clickable: false,
+    highlighted: false,
 });
 
 const router = useRouter();
@@ -260,6 +268,7 @@ function onKeyDown(event: KeyboardEvent) {
         :max-visible-tags="props.gridView ? 2 : 8"
         :update-time="history.update_time"
         :clickable="props.clickable"
+        :highlighted="props.highlighted"
         @titleClick="onTitleClick"
         @rename="() => router.push(`/histories/rename?id=${history.id}`)"
         @select="isMyHistory(history) && emit('select', history)"

client/src/components/History/HistoryCardList.vue

@@ -167,8 +167,8 @@ const emit = defineEmits<{
             :selectable="props.selectable"
             :selected="props.selectedHistoryIds.some((selected) => selected.id === history.id)"
             :clickable="props.clickable"
+            :highlighted="props.rangeSelectAnchor?.id === history.id"
             class="history-card-in-list"
-            :class="{ 'range-select-anchor-history': props.rangeSelectAnchor?.id === history.id }"
             @select="isMyHistory(history) && emit('select', history)"
             @tagClick="(...args) => emit('tagClick', ...args)"
             @refreshList="(...args) => emit('refreshList', ...args)"
@@ -183,13 +183,5 @@ const emit = defineEmits<{
 
 .history-card-list {
     container: cards-list / inline-size;
-
-    .history-card-in-list {
-        &.range-select-anchor-history {
-            &:deep(.g-card-content) {
-                box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
-            }
-        }
-    }
 }
 </style>