feat: linkage

Author: zhangmo8

README.md

@@ -12,13 +12,13 @@
 ## Commands
 
 <!-- commands -->
-| Command                           | Title                         |
-| --------------------------------- | ----------------------------- |
-| `git-panel.history`               | Git Panel: History            |
-| `git-panel.history.filter`        | Git Panel: Git History Filter |
-| `git-panel.history.clear`         | Git Panel: Clear Selection    |
-| `git-panel.history.refresh`       | Git Panel: Refresh History    |
-| `git-panel.history.switch.branch` | Git Panel: Select Branch      |
+| Command                           | Title                        |
+| --------------------------------- | ---------------------------- |
+| `git-panel.history`               | GitPanel: History            |
+| `git-panel.history.filter`        | GitPanel: Git History Filter |
+| `git-panel.history.clear`         | GitPanel: Clear Selection    |
+| `git-panel.history.refresh`       | GitPanel: Refresh History    |
+| `git-panel.history.switch.branch` | GitPanel: Select Branch      |
 <!-- commands -->
 
 ## Sponsors

package.json

@@ -164,6 +164,7 @@
     "typescript": "~5.6.2",
     "vite": "^6.0.5",
     "vscode-ext-gen": "^0.4.1",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.0",
+    "vue-virtual-scroller": "^1.1.2"
   }
 }

pnpm-lock.yaml

@@ -7,5 +7,4 @@ export const WEBVIEW_CHANNEL = {
 // vscode to webview channel
 export const CHANNEL = {
   HISTORY: 'history',
-  HISTORY_LOADED: 'history-loaded',
 }

src/channel/constant.ts

@@ -16,7 +16,7 @@ export function activate(context: vscode.ExtensionContext) {
   const provider = new GitPanelViewProvider(vscode.Uri.file(__dirname), context, gitService)
   vscode.window.registerWebviewViewProvider(GitPanelViewProvider.viewType, provider)
 
-  const gitChangesProvider = new GitChangesProvider()
+  const gitChangesProvider = GitChangesProvider.getInstance()
   vscode.window.createTreeView('git-panel.changes', {
     treeDataProvider: gitChangesProvider,
     showCollapseAll: true,

src/index.ts

@@ -9,45 +9,56 @@ export class GitChangesProvider implements vscode.TreeDataProvider<CommitNode> {
   readonly onDidChangeTreeData: vscode.Event<CommitNode | undefined | null | void> = this._onDidChangeTreeData.event
   private gitService: GitService
   private fileTreeProvider: FileTreeProvider
+  private selectedCommitHash?: string
+  private static instance: GitChangesProvider
 
-  constructor() {
+  private constructor() {
     this.gitService = new GitService()
     this.fileTreeProvider = new FileTreeProvider(this.gitService)
   }
 
-  refresh(): void {
+  static getInstance(): GitChangesProvider {
+    if (!GitChangesProvider.instance) {
+      GitChangesProvider.instance = new GitChangesProvider()
+    }
+    return GitChangesProvider.instance
+  }
+
+  refresh(commitHash?: string): void {
+    this.selectedCommitHash = commitHash
     this._onDidChangeTreeData.fire()
   }
 
   getTreeItem(element: CommitNode): vscode.TreeItem {
     return element
   }
 
-  private async getFirstCommitDetails(): Promise<CommitDetails | null> {
+  private async getCommitByHash(hash?: string): Promise<CommitDetails | null> {
     try {
       const history = await this.gitService.getHistory()
       if (history.all.length === 0) {
         return null
       }
 
-      const firstCommit = history.all[0]
+      const commit = history.all.find(c => c.hash === hash) || history.all[0]
       return {
-        hash: firstCommit.hash,
-        authorName: firstCommit.author_name,
-        authorEmail: firstCommit.author_email,
-        date: firstCommit.date,
-        stats: firstCommit.stats,
+        hash: commit.hash,
+        authorName: commit.author_name,
+        authorEmail: commit.author_email,
+        date: commit.date,
+        stats: commit.stats,
       }
     }
     catch (error) {
-      console.error('Error getting first commit details:', error)
+      console.error('Error getting commit details:', error)
       return null
     }
   }
 
   async getChildren(element?: CommitNode): Promise<CommitNode[]> {
     if (!element) {
-      const commitDetails = await this.getFirstCommitDetails()
+      const commitDetails = await this.getCommitByHash(this.selectedCommitHash)
+
       if (!commitDetails) {
         return []
       }
@@ -79,14 +90,14 @@ export class GitChangesProvider implements vscode.TreeDataProvider<CommitNode> {
         ),
         new CommitNode(
           'Changed Files',
-          'Changed Files',
+          `${changedFiles.length} Files Changed`,
           changedFiles.length > 0 ? vscode.TreeItemCollapsibleState.Expanded : vscode.TreeItemCollapsibleState.None,
           'files',
-          changedFiles
+          changedFiles,
         ),
       ]
     }
-    else if (element.label === 'Changed Files' && element.children) {
+    else if (element.children) {
       return element.children as CommitNode[]
     }
 

src/views/diff/GitChangesProvider.ts

@@ -33,7 +33,7 @@ window.addEventListener('message', (event: { data: any }) => {
   const message = event.data
   switch (message.command) {
     case CHANNEL.HISTORY:
-      commits.value = message.data as Commit[]
+      commits.value = message.commits as Commit[]
       break
     case 'error':
       error.value = message.message
@@ -63,7 +63,7 @@ watch([commits, selectedHash, filter], () => {
 
 onMounted(() => {
   // Request git history
-  vscode.postMessage({ command: WEBVIEW_CHANNEL.GET_HISTORY, forceRefresh: true })
+  vscode.postMessage({ command: WEBVIEW_CHANNEL.GET_HISTORY })
 })
 
 const transformedCommits = computed(() => {

src/views/history/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
 import dayjs from 'dayjs'
 
 import type { Commit } from '@/git'
@@ -19,17 +19,17 @@ const props = defineProps<{
 //   isMerge?: boolean
 // }
 
+const ITEMS_PER_PAGE = 45
+const currentPage = ref(1)
+const observer = ref<IntersectionObserver | null>(null)
+const loadingTriggerRef = ref<HTMLElement | null>(null)
+
 function handleCommitClick(commit: Commit & { date: string }) {
   try {
     if (window.vscode) {
       window.vscode.postMessage({
         command: WEBVIEW_CHANNEL.SHOW_COMMIT_DETAILS,
-        commit: {
-          hash: commit.hash,
-          message: commit.message,
-          date: commit.date,
-          stats: commit.stats,
-        },
+        commitHash: commit.hash,
       })
     }
   }
@@ -56,6 +56,30 @@ const graphData = computed(() => {
     date: dayjs(commit.date).format('YYYY-MM-DD HH:mm'),
   }))
 })
+
+const visibleCommits = computed(() => {
+  const end = currentPage.value * ITEMS_PER_PAGE
+  return graphData.value.slice(0, end)
+})
+
+onMounted(() => {
+  observer.value = new IntersectionObserver((entries) => {
+    const target = entries[0]
+    if (target.isIntersecting && currentPage.value * ITEMS_PER_PAGE < graphData.value.length) {
+      currentPage.value++
+    }
+  })
+
+  if (loadingTriggerRef.value) {
+    observer.value.observe(loadingTriggerRef.value)
+  }
+})
+
+onUnmounted(() => {
+  if (observer.value) {
+    observer.value.disconnect()
+  }
+})
 </script>
 
 <template>
@@ -78,7 +102,7 @@ const graphData = computed(() => {
       </thead>
       <tbody>
         <tr
-          v-for="commit in graphData"
+          v-for="commit in visibleCommits"
           :key="commit.hash"
           class="commit-row"
           @click="handleCommitClick(commit)"
@@ -103,6 +127,13 @@ const graphData = computed(() => {
             {{ commit.date }}
           </td>
         </tr>
+        <tr ref="loadingTriggerRef" class="loading-trigger">
+          <td colspan="5" class="loading-cell">
+            <div v-if="visibleCommits.length < graphData.length" class="loading-text">
+              Loading more commits...
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>
@@ -196,6 +227,16 @@ tr:hover {
   background-color: var(--vscode-list-hoverBackground);
 }
 
+.loading-cell {
+  text-align: center;
+  padding: 8px;
+  color: var(--vscode-descriptionForeground);
+}
+
+.loading-text {
+  font-size: 12px;
+}
+
 /* Ensure the graph lines remain visible when hovering */
 tr:hover .commit-line {
   opacity: 0.8;