davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: git status bar — show last commit link, remove branch name (#92)

Browse Source 
* feat: show last commit hash in status bar, remove branch name

Replace the hardcoded "main" branch display with a clickable short SHA
linking to the GitHub commit. Add Rust get_last_commit_info command that
returns the last commit hash and constructs a GitHub URL from the remote.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* docs: add design/git-status-bar.pen with new status bar layout

Shows the updated status bar with commit hash link, no branch name,
and annotated change callouts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* ci: retrigger — runner 3 pnpm not found (env issue)

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Luca Rossi
2026-02-26 20:14:46 +01:00
committed by GitHub
parent ecc6734881
commit fa5bc3fac2
10 changed files with 332 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -292,7 +292,7 @@ function App() {
/>
</div>
</div>
<StatusBar noteCount={vault.entries.length} modifiedCount={vault.modifiedFiles.length} vaultPath={vaultSwitcher.vaultPath} vaults={vaultSwitcher.allVaults} onSwitchVault={vaultSwitcher.switchVault} onOpenSettings={dialogs.openSettings} onOpenLocalFolder={vaultSwitcher.handleOpenLocalFolder} onConnectGitHub={dialogs.openGitHubVault} onClickPending={() => setSelection({ kind: 'filter', filter: 'changes' })} hasGitHub={!!settings.github_token} syncStatus={autoSync.syncStatus} lastSyncTime={autoSync.lastSyncTime} conflictCount={autoSync.conflictFiles.length} onTriggerSync={autoSync.triggerSync} />
<StatusBar noteCount={vault.entries.length} modifiedCount={vault.modifiedFiles.length} vaultPath={vaultSwitcher.vaultPath} vaults={vaultSwitcher.allVaults} onSwitchVault={vaultSwitcher.switchVault} onOpenSettings={dialogs.openSettings} onOpenLocalFolder={vaultSwitcher.handleOpenLocalFolder} onConnectGitHub={dialogs.openGitHubVault} onClickPending={() => setSelection({ kind: 'filter', filter: 'changes' })} hasGitHub={!!settings.github_token} syncStatus={autoSync.syncStatus} lastSyncTime={autoSync.lastSyncTime} conflictCount={autoSync.conflictFiles.length} lastCommitInfo={autoSync.lastCommitInfo} onTriggerSync={autoSync.triggerSync} />
<Toast message={toastMessage} onDismiss={() => setToastMessage(null)} />
<QuickOpenPalette open={dialogs.showQuickOpen} entries={vault.entries} onSelect={notes.handleSelectNote} onClose={dialogs.closeQuickOpen} />
<CommandPalette open={dialogs.showCommandPalette} commands={commands} onClose={dialogs.closeCommandPalette} />

50
src/components/StatusBar.test.tsx
View File

@@ -14,10 +14,56 @@ describe('StatusBar', () => {
expect(screen.getByText('9,200 notes')).toBeInTheDocument()
})
it('displays version and branch info', () => {
it('displays version info', () => {
render(<StatusBar noteCount={100} vaultPath="/Users/luca/Laputa" vaults={vaults} onSwitchVault={vi.fn()} />)
expect(screen.getByText('v0.4.2')).toBeInTheDocument()
expect(screen.getByText('main')).toBeInTheDocument()
})
it('does not display branch name', () => {
render(<StatusBar noteCount={100} vaultPath="/Users/luca/Laputa" vaults={vaults} onSwitchVault={vi.fn()} />)
expect(screen.queryByText('main')).not.toBeInTheDocument()
})
it('shows clickable commit hash when commitUrl is available', () => {
render(
<StatusBar
noteCount={100}
vaultPath="/Users/luca/Laputa"
vaults={vaults}
onSwitchVault={vi.fn()}
lastCommitInfo={{ shortHash: 'a3f9b1c', commitUrl: 'https://github.com/owner/repo/commit/abc123' }}
/>
)
const link = screen.getByTestId('status-commit-link')
expect(link).toBeInTheDocument()
expect(link.tagName).toBe('A')
expect(link).toHaveAttribute('href', 'https://github.com/owner/repo/commit/abc123')
expect(link).toHaveAttribute('target', '_blank')
expect(screen.getByText('a3f9b1c')).toBeInTheDocument()
})
it('shows non-clickable commit hash when no commitUrl', () => {
render(
<StatusBar
noteCount={100}
vaultPath="/Users/luca/Laputa"
vaults={vaults}
onSwitchVault={vi.fn()}
lastCommitInfo={{ shortHash: 'b4e2d8f', commitUrl: null }}
/>
)
const span = screen.getByTestId('status-commit-hash')
expect(span).toBeInTheDocument()
expect(span.tagName).toBe('SPAN')
expect(screen.getByText('b4e2d8f')).toBeInTheDocument()
})
it('hides commit hash when lastCommitInfo is null', () => {
render(
<StatusBar noteCount={100} vaultPath="/Users/luca/Laputa" vaults={vaults} onSwitchVault={vi.fn()} lastCommitInfo={null} />
)
expect(screen.queryByTestId('status-commit-link')).not.toBeInTheDocument()
expect(screen.queryByTestId('status-commit-hash')).not.toBeInTheDocument()
})
it('displays active vault name', () => {

29
src/components/StatusBar.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useRef, useEffect } from 'react'
import { Package, GitBranch, RefreshCw, Sparkles, FileText, Bell, Settings, FolderOpen, Check, Github, CircleDot, AlertTriangle, Loader2 } from 'lucide-react'
import type { SyncStatus } from '../types'
import { Package, RefreshCw, Sparkles, FileText, Bell, Settings, FolderOpen, Check, Github, CircleDot, AlertTriangle, Loader2, GitCommitHorizontal } from 'lucide-react'
import type { LastCommitInfo, SyncStatus } from '../types'
export interface VaultOption {
label: string
@@ -21,6 +21,7 @@ interface StatusBarProps {
syncStatus?: SyncStatus
lastSyncTime?: number | null
conflictCount?: number
lastCommitInfo?: LastCommitInfo | null
onTriggerSync?: () => void
}
@@ -127,7 +128,7 @@ function syncIconColor(status: SyncStatus): string {
return 'var(--accent-green)'
}
export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onSwitchVault, onOpenSettings, onOpenLocalFolder, onConnectGitHub, onClickPending, hasGitHub, syncStatus = 'idle', lastSyncTime = null, conflictCount = 0, onTriggerSync }: StatusBarProps) {
export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onSwitchVault, onOpenSettings, onOpenLocalFolder, onConnectGitHub, onClickPending, hasGitHub, syncStatus = 'idle', lastSyncTime = null, conflictCount = 0, lastCommitInfo, onTriggerSync }: StatusBarProps) {
// Force re-render every 30s to keep relative time label fresh
const [, setTick] = useState(0)
useEffect(() => {
@@ -145,8 +146,6 @@ export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onS
<span style={SEP_STYLE}>|</span>
<span style={ICON_STYLE}><Package size={13} />v0.4.2</span>
<span style={SEP_STYLE}>|</span>
<span style={ICON_STYLE}><GitBranch size={13} />main</span>
<span style={SEP_STYLE}>|</span>
<span
role="button"
onClick={onTriggerSync}
@@ -156,6 +155,26 @@ export function StatusBar({ noteCount, modifiedCount = 0, vaultPath, vaults, onS
>
<SyncIcon size={13} style={{ color: syncIconColor(syncStatus) }} className={syncStatus === 'syncing' ? 'animate-spin' : ''} />{syncLabel}
</span>
{lastCommitInfo && (
lastCommitInfo.commitUrl ? (
<a
href={lastCommitInfo.commitUrl}
target="_blank"
rel="noopener noreferrer"
style={{ ...ICON_STYLE, color: 'var(--muted-foreground)', textDecoration: 'none', cursor: 'pointer', padding: '2px 4px', borderRadius: 3 }}
title={`Open commit ${lastCommitInfo.shortHash} on GitHub`}
data-testid="status-commit-link"
onMouseEnter={e => { e.currentTarget.style.color = 'var(--foreground)' }}
onMouseLeave={e => { e.currentTarget.style.color = 'var(--muted-foreground)' }}
>
<GitCommitHorizontal size={13} />{lastCommitInfo.shortHash}
</a>
) : (
<span style={ICON_STYLE} data-testid="status-commit-hash">
<GitCommitHorizontal size={13} />{lastCommitInfo.shortHash}
</span>
)
)}
{conflictCount > 0 && (
<>
<span style={SEP_STYLE}>|</span>

64
src/hooks/useAutoSync.test.ts
View File

@@ -12,6 +12,8 @@ vi.mock('../mock-tauri', () => ({
mockInvoke: (...args: unknown[]) => mockInvokeFn(...args),
}))
const MOCK_COMMIT_INFO = { shortHash: 'a1b2c3d', commitUrl: 'https://github.com/owner/repo/commit/abc' }
function upToDate(): GitPullResult {
return { status: 'up_to_date', message: 'Already up to date', updatedFiles: [], conflictFiles: [] }
}
@@ -31,7 +33,10 @@ describe('useAutoSync', () => {
beforeEach(() => {
vi.clearAllMocks()
mockInvokeFn.mockResolvedValue(upToDate())
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(MOCK_COMMIT_INFO)
return Promise.resolve(upToDate())
})
})
function renderSync(intervalMinutes: number | null = 5) {
@@ -62,7 +67,10 @@ describe('useAutoSync', () => {
})
it('calls onVaultUpdated and onToast when pull has updates', async () => {
mockInvokeFn.mockResolvedValue(updated(['note.md', 'project/plan.md']))
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(MOCK_COMMIT_INFO)
return Promise.resolve(updated(['note.md', 'project/plan.md']))
})
const { result } = renderSync()
await waitFor(() => {
@@ -73,7 +81,10 @@ describe('useAutoSync', () => {
})
it('calls onConflict and sets conflict status when pull has conflicts', async () => {
mockInvokeFn.mockResolvedValue(conflict(['note.md']))
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(MOCK_COMMIT_INFO)
return Promise.resolve(conflict(['note.md']))
})
const { result } = renderSync()
await waitFor(() => {
@@ -84,7 +95,10 @@ describe('useAutoSync', () => {
})
it('sets error status when pull fails', async () => {
mockInvokeFn.mockRejectedValue(new Error('Network error'))
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(null)
return Promise.reject(new Error('Network error'))
})
const { result } = renderSync()
await waitFor(() => {
@@ -95,7 +109,7 @@ describe('useAutoSync', () => {
it('pulls on window focus', async () => {
renderSync()
await waitFor(() => {
expect(mockInvokeFn).toHaveBeenCalledTimes(1)
expect(mockInvokeFn).toHaveBeenCalledWith('git_pull', { vaultPath: '/Users/luca/Laputa' })
})
mockInvokeFn.mockClear()
@@ -115,7 +129,10 @@ describe('useAutoSync', () => {
})
mockInvokeFn.mockClear()
mockInvokeFn.mockResolvedValue(updated(['note.md']))
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(MOCK_COMMIT_INFO)
return Promise.resolve(updated(['note.md']))
})
await act(async () => {
result.current.triggerSync()
@@ -128,8 +145,11 @@ describe('useAutoSync', () => {
})
it('handles no_remote status silently', async () => {
mockInvokeFn.mockResolvedValue({
status: 'no_remote', message: 'No remote configured', updatedFiles: [], conflictFiles: [],
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(null)
return Promise.resolve({
status: 'no_remote', message: 'No remote configured', updatedFiles: [], conflictFiles: [],
})
})
const { result } = renderSync()
@@ -142,20 +162,24 @@ describe('useAutoSync', () => {
it('does not fire concurrent pulls', async () => {
let resolveFirst: ((v: GitPullResult) => void) | null = null
mockInvokeFn.mockImplementation(() => new Promise<GitPullResult>((r) => { resolveFirst = r }))
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(MOCK_COMMIT_INFO)
return new Promise<GitPullResult>((r) => { resolveFirst = r })
})
const { result } = renderSync()
// First pull is in flight
expect(mockInvokeFn).toHaveBeenCalledTimes(1)
// First pull is in flight (git_pull called once)
const pullCalls = () => mockInvokeFn.mock.calls.filter((c: unknown[]) => c[0] === 'git_pull').length
expect(pullCalls()).toBe(1)
// Trigger a manual sync while first is still running
act(() => {
result.current.triggerSync()
})
// Should NOT have fired a second call
expect(mockInvokeFn).toHaveBeenCalledTimes(1)
// Should NOT have fired a second git_pull call
expect(pullCalls()).toBe(1)
// Resolve the first
await act(async () => {
@@ -163,9 +187,19 @@ describe('useAutoSync', () => {
})
})
it('exposes lastCommitInfo after sync', async () => {
const { result } = renderSync()
await waitFor(() => {
expect(result.current.lastCommitInfo).toEqual(MOCK_COMMIT_INFO)
})
})
it('handles error status from git_pull result', async () => {
mockInvokeFn.mockResolvedValue({
status: 'error', message: 'remote: Not Found', updatedFiles: [], conflictFiles: [],
mockInvokeFn.mockImplementation((cmd: string) => {
if (cmd === 'get_last_commit_info') return Promise.resolve(null)
return Promise.resolve({
status: 'error', message: 'remote: Not Found', updatedFiles: [], conflictFiles: [],
})
})
const { result } = renderSync()

9
src/hooks/useAutoSync.ts
View File

@@ -1,7 +1,7 @@
import { useCallback, useEffect, useRef, useState } from 'react'
import { invoke } from '@tauri-apps/api/core'
import { isTauri, mockInvoke } from '../mock-tauri'
import type { GitPullResult, SyncStatus } from '../types'
import type { GitPullResult, LastCommitInfo, SyncStatus } from '../types'
const DEFAULT_INTERVAL_MS = 5 * 60_000
@@ -21,6 +21,7 @@ export interface AutoSyncState {
syncStatus: SyncStatus
lastSyncTime: number | null
conflictFiles: string[]
lastCommitInfo: LastCommitInfo | null
triggerSync: () => void
}
@@ -34,6 +35,7 @@ export function useAutoSync({
const [syncStatus, setSyncStatus] = useState<SyncStatus>('idle')
const [lastSyncTime, setLastSyncTime] = useState<number | null>(null)
const [conflictFiles, setConflictFiles] = useState<string[]>([])
const [lastCommitInfo, setLastCommitInfo] = useState<LastCommitInfo | null>(null)
const syncingRef = useRef(false)
const callbacksRef = useRef({ onVaultUpdated, onConflict, onToast })
callbacksRef.current = { onVaultUpdated, onConflict, onToast }
@@ -46,6 +48,9 @@ export function useAutoSync({
try {
const result = await tauriCall<GitPullResult>('git_pull', { vaultPath })
setLastSyncTime(Date.now())
tauriCall<LastCommitInfo | null>('get_last_commit_info', { vaultPath })
.then(info => setLastCommitInfo(info))
.catch(() => {})
if (result.status === 'updated') {
setSyncStatus('idle')
@@ -90,5 +95,5 @@ export function useAutoSync({
return () => clearInterval(id)
}, [performPull, intervalMinutes])
return { syncStatus, lastSyncTime, conflictFiles, triggerSync: performPull }
return { syncStatus, lastSyncTime, conflictFiles, lastCommitInfo, triggerSync: performPull }
}

3
src/mock-tauri/mock-handlers.ts
View File

@@ -3,7 +3,7 @@
* Each handler simulates a Tauri backend command.
*/
import type { VaultEntry, ModifiedFile, Settings, DeviceFlowStart, DeviceFlowPollResult, GitHubUser, GitPullResult } from '../types'
import type { VaultEntry, ModifiedFile, Settings, DeviceFlowStart, DeviceFlowPollResult, GitHubUser, GitPullResult, LastCommitInfo } from '../types'
import { MOCK_CONTENT } from './mock-content'
import { MOCK_ENTRIES } from './mock-entries'
@@ -153,6 +153,7 @@ export const mockHandlers: Record<string, (args: any) => any> = {
mockSavedSinceCommit.clear()
return `[main abc1234] ${args.message}\n ${count} files changed`
},
get_last_commit_info: (): LastCommitInfo => ({ shortHash: 'a1b2c3d', commitUrl: 'https://github.com/lucaong/laputa-vault/commit/a1b2c3d4e5f6a7b8c9d0e1f2a3b4c5d6e7f8a9b0' }),
git_pull: (): GitPullResult => ({ status: 'up_to_date', message: 'Already up to date', updatedFiles: [], conflictFiles: [] }),
git_push: () => 'Everything up-to-date',
ai_chat: handleAiChat,

5
src/types.ts
View File

@@ -38,6 +38,11 @@ export interface GitCommit {
date: number // unix timestamp
}
export interface LastCommitInfo {
shortHash: string
commitUrl: string | null
}
export interface ModifiedFile {
path: string
relativePath: string