feat: highlight select row

Author: zhangmo8

src/views/history/components/CommitTable/ListItem.vue

@@ -13,11 +13,17 @@ const props = defineProps<{
   prevGraphData?: GitOperation
   nextGraphData?: GitOperation
   columnWidths: Record<string, number>
+  isSelected?: boolean
 }>()
 
+const emit = defineEmits(['select'])
+
 const hoveredCell = ref<string | null>(null)
 
 function handleCommitClick() {
+  // Emit the selection event
+  emit('select')
+
   try {
     if (window.vscode) {
       window.vscode.postMessage({
@@ -46,7 +52,12 @@ function handleDoubleClick() {
 </script>
 
 <template>
-  <li class="commit-row" @click="handleCommitClick" @dblclick="handleDoubleClick">
+  <li
+    class="commit-row"
+    :class="{ selected: isSelected }"
+    @click="handleCommitClick"
+    @dblclick="handleDoubleClick"
+  >
     <!-- <div class="branch-col commit-cell" :style="{ width: `${columnWidths.branch}px` }">
       <GitGraph
         :graph-data="graphData"
@@ -105,6 +116,15 @@ function handleDoubleClick() {
   background-color: var(--vscode-list-hoverBackground);
 }
 
+.commit-row.selected {
+  background-color: var(--vscode-list-activeSelectionBackground);
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
+.commit-row.selected .hash-col {
+  color: var(--vscode-list-activeSelectionForeground);
+}
+
 .commit-cell {
   white-space: nowrap;
   overflow: hidden;

src/views/history/components/CommitTable/index.vue

@@ -12,6 +12,9 @@ const props = defineProps<{
   graphData: GitOperation[]
 }>()
 
+// Selected commit hash state
+const selectedCommitHash = ref<string | null>(null)
+
 const ITEMS_PER_PAGE = 45
 const currentPage = ref(1)
 const observer = ref<IntersectionObserver | null>(null)
@@ -49,6 +52,11 @@ const visibleCommits = computed(() => {
   return commitData.value.slice(0, end)
 })
 
+// Handle commit selection
+function handleCommitSelected(hash: string) {
+  selectedCommitHash.value = hash
+}
+
 onMounted(() => {
   observer.value = new IntersectionObserver((entries) => {
     const target = entries[0]
@@ -80,7 +88,9 @@ onUnmounted(() => {
         :prev-graph-data="index > 0 ? graphData[index - 1] : null"
         :next-graph-data="index < graphData.length - 1 ? graphData[index + 1] : null"
         :commit="commit" 
-        :column-widths="columnWidths" 
+        :column-widths="columnWidths"
+        :is-selected="selectedCommitHash === commit.hash"
+        @select="handleCommitSelected(commit.hash)"
       />
       <li ref="loadingTriggerRef" class="loading-trigger">
         <div v-if="visibleCommits.length < commitData.length" class="loading-text">