feat: commit list

Author: zhangmo8

eslint.config.mjs

@@ -4,7 +4,12 @@ import antfu from '@antfu/eslint-config'
 export default antfu(
   {
     ignores: [
-      // eslint ignore globs here
+      'dist',
+      'node_modules',
+      'package-lock.json',
+      'pnpm-lock.yaml',
+      'yarn.lock',
+      'generated',
     ],
   },
   {

src/services/git.ts renamed to src/git/index.ts

@@ -19,10 +19,8 @@ export class GitService {
   }
 
   async getHistory(): Promise<LogResult> {
-    const COMMIT_FORMAT = '%H%n%D%n%aN%n%aE%n%at%n%ct%n%P%n%B'
-
     try {
-      return await this.git.log()
+      return await this.git.log([])
     }
     catch (error) {
       console.error('Error getting git history:', error)

src/index.ts

@@ -1,7 +1,7 @@
 import { defineExtension } from 'reactive-vscode'
 import * as vscode from 'vscode'
 
-import { GitPanelViewProvider } from './container/webview'
+import { GitPanelViewProvider } from './views/webview'
 
 import { logger } from './utils'
 

src/services/storage.ts renamed to src/storage.ts

@@ -1,16 +1,17 @@
+import type { ListLogLine } from 'simple-git'
 import type * as vscode from 'vscode'
 
 export class StorageService {
   private static readonly COMMITS_KEY = 'git-panel.commits'
 
   constructor(private context: vscode.ExtensionContext) {}
 
-  saveCommits(commits: any[]) {
+  saveCommits(commits: ListLogLine[]) {
     this.context.globalState.update(StorageService.COMMITS_KEY, commits)
   }
 
-  getCommits(): any[] {
-    return this.context.globalState.get<any[]>(StorageService.COMMITS_KEY) || []
+  getCommits(): ListLogLine[] {
+    return this.context.globalState.get<ListLogLine[]>(StorageService.COMMITS_KEY) || []
   }
 
   clearCommits() {

src/views/App.vue

@@ -1,12 +1,15 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import GitGraph from './components/GitGraph.vue'
 
 interface Commit {
   hash: string
   author_name: string
   author_email: string
   message: string
   body: string
+  parents?: string[]
+  date: string
 }
 
 interface State {
@@ -39,173 +42,98 @@ window.addEventListener('message', (event: { data: any }) => {
 
 // Save state when it changes
 watch([commits, selectedHash, filter], () => {
-  const state: State = {
-    commits: commits.value,
-    selectedHash: selectedHash.value,
-    filter: filter.value,
+  try {
+    const state: State = {
+      commits: commits.value.map(commit => ({
+        ...commit,
+        parents: Array.isArray(commit.parents) ? [...commit.parents] : [],
+      })),
+      selectedHash: selectedHash.value || '',
+      filter: filter.value || '',
+    }
+    vscode.postMessage({ command: 'setState', state })
+  }
+  catch (err) {
+    console.error('Failed to save state:', err)
   }
-  vscode.postMessage({ command: 'setState', state })
 }, { deep: true })
 
-function refreshHistory() {
-  commits.value = []
-  vscode.postMessage({ command: 'getHistory', forceRefresh: true })
-}
+// function refreshHistory() {
+//   commits.value = []
+//   vscode.postMessage({ command: 'getHistory', forceRefresh: true })
+// }
 
 onMounted(() => {
   // Request git history
   vscode.postMessage({ command: 'getHistory', forceRefresh: true })
 })
 
-function selectCommit(hash: string) {
-  selectedHash.value = hash
-}
+const transformedCommits = computed(() => {
+  return commits.value.map(commit => ({
+    hash: commit.hash,
+    message: commit.message,
+    author: commit.author_name,
+    date: commit.date,
+    parents: commit.parents || [],
+  }))
+})
 </script>
 
 <template>
   <div class="git-panel">
     <div class="toolbar">
-      <button class="refresh-button" @click="refreshHistory">
-        <span class="codicon codicon-refresh" />
-        Refresh
-      </button>
+      <input
+        v-model="filter"
+        type="text"
+        placeholder="Search commits..."
+        class="search-input"
+      >
     </div>
+
+    <GitGraph
+      :commits="transformedCommits"
+      class="git-graph-container"
+    />
+
     <div v-if="error" class="error">
       {{ error }}
     </div>
-    <div v-else-if="commits.length === 0" class="loading">
-      Loading git history...
-    </div>
-    <div v-else class="commits">
-      <div class="filter">
-        <input
-          v-model="filter"
-          type="text"
-          placeholder="Filter commits..."
-          class="filter-input"
-        >
-      </div>
-      <div
-        v-for="commit in commits"
-        :key="commit.hash"
-        class="commit"
-        :class="{ selected: commit.hash === selectedHash }"
-        @click="selectCommit(commit.hash)"
-      >
-        <div class="commit-header">
-          <span class="commit-hash">{{ commit.hash.substring(0, 7) }}</span>
-          <span class="commit-author">{{ commit.author_name }}</span>
-        </div>
-        <div class="commit-message">
-          {{ commit.message }}
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <style scoped>
 .git-panel {
-  padding: 10px;
-}
-
-.error {
-  color: red;
-  padding: 10px;
-}
-
-.loading {
-  padding: 10px;
-  color: #666;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--vscode-sideBar-background);
 }
 
 .toolbar {
-  margin-bottom: 10px;
-}
-
-.refresh-button {
-  background-color: var(--vscode-button-background);
-  color: var(--vscode-button-foreground);
-  border: none;
-  padding: 4px 8px;
-  border-radius: 2px;
-  cursor: pointer;
-}
-
-.refresh-button:hover {
-  background-color: var(--vscode-button-hoverBackground);
-}
-
-.refresh-button:active {
-  background-color: var(--vscode-button-activeBackground);
-}
-
-.filter {
-  margin-bottom: 10px;
+  padding: 8px;
+  border-bottom: 1px solid var(--vscode-panel-border);
 }
 
-.filter-input {
+.search-input {
   width: 100%;
   padding: 4px 8px;
   border: 1px solid var(--vscode-input-border);
-  background: var(--vscode-input-background);
+  background-color: var(--vscode-input-background);
   color: var(--vscode-input-foreground);
-  border-radius: 2px;
+  outline: none;
 }
 
-.filter-input:focus {
-  outline: 1px solid var(--vscode-focusBorder);
-  border-color: transparent;
+.search-input:focus {
+  border-color: var(--vscode-focusBorder);
 }
 
-.commits {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
+.git-graph-container {
+  flex: 1;
+  overflow: auto;
 }
 
-.commit {
+.error {
+  color: var(--vscode-errorForeground);
   padding: 8px;
-  border: 1px solid var(--vscode-panel-border);
-  border-radius: 4px;
-  cursor: pointer;
-  transition: background-color 0.1s;
-}
-
-.commit:hover {
-  background-color: var(--vscode-list-hoverBackground);
-}
-
-.commit.selected {
-  background-color: var(--vscode-list-activeSelectionBackground);
-  color: var(--vscode-list-activeSelectionForeground);
-}
-
-.commit-header {
-  display: flex;
-  gap: 8px;
-  margin-bottom: 4px;
-}
-
-.commit-hash {
-  color: var(--vscode-textLink-foreground);
-  font-family: monospace;
-}
-
-.commit.selected .commit-hash {
-  color: inherit;
-}
-
-.commit-author {
-  color: var(--vscode-textPreformat-foreground);
-}
-
-.commit-message {
-  color: var(--vscode-foreground);
-}
-
-.commit.selected .commit-message,
-.commit.selected .commit-author {
-  color: inherit;
 }
 </style>