Refactors range selection highlighting to use prop-based approach

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

Removes custom CSS styling and ESLint disable comment while consolidating the highlighting logic into the component's prop system.

Author: itisAliRH

client/src/components/Workflow/List/WorkflowCard.vue

@@ -23,6 +23,7 @@ interface Props {
     selected?: boolean;
     selectable?: boolean;
     clickable?: boolean;
+    highlighted?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -36,6 +37,7 @@ const props = withDefaults(defineProps<Props>(), {
     selected: false,
     selectable: false,
     clickable: false,
+    highlighted: false,
 });
 
 const emit = defineEmits<{
@@ -126,7 +128,6 @@ function onKeyDown(event: KeyboardEvent) {
 </script>
 
 <template>
-    <!-- eslint-disable-next-line vuejs-accessibility/click-events-have-key-events, vuejs-accessibility/no-static-element-interactions -->
     <GCard
         :id="workflow.id"
         class="workflow-card"
@@ -151,6 +152,7 @@ function onKeyDown(event: KeyboardEvent) {
         :update-time="workflow.update_time"
         :bookmarked="!!workflow.show_in_tool_panel"
         :clickable="props.clickable"
+        :highlighted="props.highlighted"
         @bookmark="() => toggleBookmark(!workflow?.show_in_tool_panel)"
         @rename="emit('rename', props.workflow.id, props.workflow.name)"
         @select="emit('select', workflow)"

client/src/components/Workflow/List/WorkflowCardList.vue

@@ -109,8 +109,8 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>();
             :compact="props.compact"
             :current="workflow.id === props.currentWorkflowId"
             :clickable="props.clickable"
+            :highlighted="props.rangeSelectAnchor?.id === workflow.id"
             class="workflow-card-in-list"
-            :class="{ 'range-select-anchor-workfow': props.rangeSelectAnchor?.id === workflow.id }"
             @select="(...args) => emit('select', ...args)"
             @tagClick="(...args) => emit('tagClick', ...args)"
             @refreshList="(...args) => emit('refreshList', ...args)"
@@ -170,12 +170,5 @@ const workflowPublished = ref<InstanceType<typeof WorkflowPublished>>();
 
 .workflow-card-list {
     container: cards-list / inline-size;
-    .workflow-card-in-list {
-        &.range-select-anchor-workfow {
-            &:deep(.g-card-content) {
-                box-shadow: 0 0 0 0.2rem transparentize($brand-primary, 0.75);
-            }
-        }
-    }
 }
 </style>