Adds keyboard navigation support to history card list

Enhances the history card list component with keyboard navigation capabilities by adding clickable props, item references for focus management, and range selection anchor highlighting.

Introduces new event handlers for keyboard interactions and card clicks to enable accessible navigation through history entries.

Adds visual styling for range selection anchor with primary color shadow to improve user feedback during keyboard navigation.

Author: itisAliRH

client/src/components/History/HistoryCardList.vue

@@ -23,6 +23,8 @@
  *   @tagClick="onTagClick" />
  */
 
+import type { Ref } from "vue";
+
 import type { AnyHistoryEntry, MyHistory } from "@/api/histories";
 import { isMyHistory } from "@/api/histories";
 
@@ -76,13 +78,36 @@ interface Props {
      * @default []
      */
     selectedHistoryIds?: { id: string }[];
+
+    /**
+     * Whether cards are clickable for navigation
+     * @type {boolean}
+     * @default false
+     */
+    clickable?: boolean;
+
+    /**
+     * Item refs for keyboard navigation
+     * @type {Record<string, Ref<InstanceType<typeof HistoryCard> | null>>}
+     * @default {}
+     */
+    itemRefs?: Record<string, Ref<InstanceType<typeof HistoryCard> | null>>;
+
+    /**
+     * Range select anchor for keyboard navigation
+     * @type {AnyHistoryEntry | undefined}
+     */
+    rangeSelectAnchor?: AnyHistoryEntry;
 }
 
 const props = withDefaults(defineProps<Props>(), {
     gridView: false,
     publishedView: false,
     selectable: false,
     selectedHistoryIds: () => [],
+    clickable: false,
+    itemRefs: () => ({}),
+    rangeSelectAnchor: undefined,
 });
 
 /**
@@ -112,30 +137,59 @@ const emit = defineEmits<{
      * @event updateFilter
      */
     (e: "updateFilter", key: string, value: any): void;
+
+    /**
+     * Emitted when a keyboard event occurs on a history card
+     * @event on-key-down
+     */
+    (e: "on-key-down", history: AnyHistoryEntry, event: KeyboardEvent): void;
+
+    /**
+     * Emitted when a history card is clicked
+     * @event on-history-card-click
+     */
+    (e: "on-history-card-click", history: AnyHistoryEntry, event: Event): void;
 }>();
 </script>
 
 <template>
-    <div class="history-card-list d-flex flex-wrap overflow-auto">
+    <div class="history-card-list d-flex flex-wrap overflow-auto pt-1">
         <HistoryCard
             v-for="history in props.histories"
+            :ref="props.itemRefs[history.id]"
             :key="history.id"
+            tabindex="0"
             :history="history"
             :grid-view="props.gridView"
             :shared-view="props.sharedView"
             :published-view="props.publishedView"
             :archived-view="props.archivedView"
             :selectable="props.selectable"
             :selected="props.selectedHistoryIds.some((selected) => selected.id === history.id)"
+            :clickable="props.clickable"
+            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)"
-            @updateFilter="(...args) => emit('updateFilter', ...args)" />
+            @updateFilter="(...args) => emit('updateFilter', ...args)"
+            @on-key-down="(...args) => emit('on-key-down', ...args)"
+            @on-history-card-click="(...args) => emit('on-history-card-click', ...args)" />
     </div>
 </template>
 
 <style lang="scss" scoped>
+@import "theme/blue.scss";
+
 .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>