From 66f58446b480410ff32a11fe52fb24c3e89effd9 Mon Sep 17 00:00:00 2001
From: lucaronin <luca.rossi.917@gmail.com>
Date: Fri, 6 Mar 2026 21:04:24 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=20Pulse:=20lazy=20pagination=20with?=
 =?UTF-8?q?=20IntersectionObserver=20infinite=20scroll?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Page size reduced from 30 → 20 commits per fetch
- Backend: add `skip` param to get_vault_pulse (git log --skip)
  → true pagination instead of re-fetching everything
- Frontend: IntersectionObserver sentinel at bottom of feed
  → auto-loads next page when user scrolls near end
- Append-only updates (no full re-render on load more)
- Add IntersectionObserver mock to test setup
---
 src-tauri/src/commands.rs         |  6 ++-
 src-tauri/src/git/pulse.rs        | 22 ++++++----
 src/components/PulseView.test.tsx | 14 ++-----
 src/components/PulseView.tsx      | 70 +++++++++++++++++++++----------
 src/test/setup.ts                 |  7 ++++
 5 files changed, 77 insertions(+), 42 deletions(-)

diff --git a/src-tauri/src/commands.rs b/src-tauri/src/commands.rs
index a451384b..32861ea5 100644
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -221,10 +221,12 @@ pub fn get_file_diff_at_commit(
 pub fn get_vault_pulse(
     vault_path: String,
     limit: Option<usize>,
+    skip: Option<usize>,
 ) -> Result<Vec<PulseCommit>, String> {
     let vault_path = expand_tilde(&vault_path);
-    let limit = limit.unwrap_or(30);
-    git::get_vault_pulse(&vault_path, limit)
+    let limit = limit.unwrap_or(20);
+    let skip = skip.unwrap_or(0);
+    git::get_vault_pulse(&vault_path, limit, skip)
 }
 
 #[tauri::command]
diff --git a/src-tauri/src/git/pulse.rs b/src-tauri/src/git/pulse.rs
index 1e3cc7c5..a747bff8 100644
--- a/src-tauri/src/git/pulse.rs
+++ b/src-tauri/src/git/pulse.rs
@@ -53,7 +53,8 @@ fn parse_file_status(code: &str) -> &str {
 }
 
 /// Get the pulse (commit activity feed) for a vault, showing only .md file changes.
-pub fn get_vault_pulse(vault_path: &str, limit: usize) -> Result<Vec<PulseCommit>, String> {
+/// `skip` offsets into the commit list for pagination; `limit` caps how many to return.
+pub fn get_vault_pulse(vault_path: &str, limit: usize, skip: usize) -> Result<Vec<PulseCommit>, String> {
     let vault = Path::new(vault_path);
 
     if !vault.join(".git").exists() {
@@ -61,6 +62,7 @@ pub fn get_vault_pulse(vault_path: &str, limit: usize) -> Result<Vec<PulseCommit
     }
 
     let limit_str = limit.to_string();
+    let skip_str = skip.to_string();
     let output = Command::new("git")
         .args([
             "log",
@@ -69,6 +71,8 @@ pub fn get_vault_pulse(vault_path: &str, limit: usize) -> Result<Vec<PulseCommit
             "--diff-filter=ADM",
             "-n",
             &limit_str,
+            "--skip",
+            &skip_str,
             "--",
             "*.md",
         ])
@@ -255,7 +259,7 @@ mod tests {
         fs::write(vault.join("project.md"), "# Project\n").unwrap();
         git_commit(vp, "Add project").unwrap();
 
-        let pulse = get_vault_pulse(vp, 30).unwrap();
+        let pulse = get_vault_pulse(vp, 30, 0).unwrap();
 
         assert_eq!(pulse.len(), 2);
         assert_eq!(pulse[0].message, "Add project");
@@ -273,7 +277,7 @@ mod tests {
         let dir = TempDir::new().unwrap();
         let vp = dir.path().to_str().unwrap();
 
-        let result = get_vault_pulse(vp, 30);
+        let result = get_vault_pulse(vp, 30, 0);
         assert!(result.is_err());
         assert!(result.unwrap_err().contains("Not a git repository"));
     }
@@ -283,7 +287,7 @@ mod tests {
         let dir = setup_git_repo();
         let vp = dir.path().to_str().unwrap();
 
-        let pulse = get_vault_pulse(vp, 30).unwrap();
+        let pulse = get_vault_pulse(vp, 30, 0).unwrap();
         assert!(pulse.is_empty());
     }
 
@@ -297,7 +301,7 @@ mod tests {
         fs::write(vault.join("config.json"), "{}").unwrap();
         git_commit(vp, "Add files").unwrap();
 
-        let pulse = get_vault_pulse(vp, 30).unwrap();
+        let pulse = get_vault_pulse(vp, 30, 0).unwrap();
         assert_eq!(pulse.len(), 1);
         assert_eq!(pulse[0].files.len(), 1);
         assert_eq!(pulse[0].files[0].path, "note.md");
@@ -318,7 +322,7 @@ mod tests {
             git_commit(vp, &format!("Add note {}", i)).unwrap();
         }
 
-        let pulse = get_vault_pulse(vp, 3).unwrap();
+        let pulse = get_vault_pulse(vp, 3, 0).unwrap();
         assert_eq!(pulse.len(), 3);
     }
 
@@ -334,7 +338,7 @@ mod tests {
         fs::write(vault.join("note.md"), "# Updated\n").unwrap();
         git_commit(vp, "Update note").unwrap();
 
-        let pulse = get_vault_pulse(vp, 30).unwrap();
+        let pulse = get_vault_pulse(vp, 30, 0).unwrap();
         assert_eq!(pulse[0].message, "Update note");
         assert_eq!(pulse[0].files[0].status, "modified");
         assert_eq!(pulse[0].modified, 1);
@@ -360,7 +364,7 @@ mod tests {
             .output()
             .unwrap();
 
-        let pulse = get_vault_pulse(vp, 30).unwrap();
+        let pulse = get_vault_pulse(vp, 30, 0).unwrap();
         assert!(pulse[0].github_url.is_some());
         let url = pulse[0].github_url.as_ref().unwrap();
         assert!(url.starts_with("https://github.com/owner/repo/commit/"));
@@ -375,7 +379,7 @@ mod tests {
         fs::write(vault.join("note.md"), "# Note\n").unwrap();
         git_commit(vp, "Add note").unwrap();
 
-        let pulse = get_vault_pulse(vp, 30).unwrap();
+        let pulse = get_vault_pulse(vp, 30, 0).unwrap();
         assert!(pulse[0].github_url.is_none());
     }
 
diff --git a/src/components/PulseView.test.tsx b/src/components/PulseView.test.tsx
index fcd3b7b5..e67dd29c 100644
--- a/src/components/PulseView.test.tsx
+++ b/src/components/PulseView.test.tsx
@@ -183,19 +183,13 @@ describe('PulseView', () => {
     expect(screen.getByText('Retry')).toBeInTheDocument()
   })
 
-  it('shows Load more button when hasMore is true', async () => {
-    const manyCommits = Array.from({ length: 30 }, (_, i) => ({
-      ...mockCommits[0],
-      hash: `hash${i}`,
-      shortHash: `h${i}`,
-      message: `Commit ${i}`,
-    }))
-    mockInvokeFn.mockResolvedValue(manyCommits)
+  it('calls get_vault_pulse with skip=0 on initial load and passes correct page size', async () => {
+    mockInvokeFn.mockResolvedValue([])
 
     render(<PulseView vaultPath="/test/vault" />)
 
     await waitFor(() => {
-      expect(screen.getByText('Load more')).toBeInTheDocument()
+      expect(mockInvokeFn).toHaveBeenCalledWith('get_vault_pulse', { vaultPath: '/test/vault', limit: 20, skip: 0 })
     })
   })
 
@@ -205,7 +199,7 @@ describe('PulseView', () => {
     render(<PulseView vaultPath="/my/vault" />)
 
     await waitFor(() => {
-      expect(mockInvokeFn).toHaveBeenCalledWith('get_vault_pulse', { vaultPath: '/my/vault', limit: 30 })
+      expect(mockInvokeFn).toHaveBeenCalledWith('get_vault_pulse', { vaultPath: '/my/vault', limit: 20, skip: 0 })
     })
   })
 
diff --git a/src/components/PulseView.tsx b/src/components/PulseView.tsx
index 75e198d6..a072c3cc 100644
--- a/src/components/PulseView.tsx
+++ b/src/components/PulseView.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, memo } from 'react'
+import { useState, useEffect, useCallback, useRef, memo } from 'react'
 import { invoke } from '@tauri-apps/api/core'
 import { isTauri, mockInvoke } from '../mock-tauri'
 import type { PulseCommit, PulseFile } from '../types'
@@ -207,20 +207,29 @@ function ErrorState({ message, onRetry }: { message: string; onRetry: () => void
   )
 }
 
+const PAGE_SIZE = 20
+
 export const PulseView = memo(function PulseView({ vaultPath, onOpenNote, sidebarCollapsed, onExpandSidebar }: PulseViewProps) {
   const [commits, setCommits] = useState<PulseCommit[]>([])
   const [loading, setLoading] = useState(true)
+  const [loadingMore, setLoadingMore] = useState(false)
   const [error, setError] = useState<string | null>(null)
   const [hasMore, setHasMore] = useState(true)
-  const batchSize = 30
+  const [skip, setSkip] = useState(0)
+  const sentinelRef = useRef<HTMLDivElement | null>(null)
 
-  const loadPulse = useCallback(async (limit: number) => {
+  // Initial load
+  const loadInitial = useCallback(async () => {
     setLoading(true)
     setError(null)
+    setCommits([])
+    setSkip(0)
+    setHasMore(true)
     try {
-      const result = await tauriCall<PulseCommit[]>('get_vault_pulse', { vaultPath, limit })
+      const result = await tauriCall<PulseCommit[]>('get_vault_pulse', { vaultPath, limit: PAGE_SIZE, skip: 0 })
       setCommits(result)
-      setHasMore(result.length >= limit)
+      setHasMore(result.length >= PAGE_SIZE)
+      setSkip(result.length)
     } catch (err) {
       const msg = typeof err === 'string' ? err : 'Failed to load activity'
       setError(msg)
@@ -229,12 +238,35 @@ export const PulseView = memo(function PulseView({ vaultPath, onOpenNote, sideba
     }
   }, [vaultPath])
 
-  useEffect(() => { loadPulse(batchSize) }, [loadPulse])
+  // Append next page
+  const loadMore = useCallback(async () => {
+    if (loadingMore || !hasMore) return
+    setLoadingMore(true)
+    try {
+      const result = await tauriCall<PulseCommit[]>('get_vault_pulse', { vaultPath, limit: PAGE_SIZE, skip })
+      setCommits((prev) => [...prev, ...result])
+      setHasMore(result.length >= PAGE_SIZE)
+      setSkip((s) => s + result.length)
+    } catch {
+      // silently fail for pagination — user can scroll up/retry
+    } finally {
+      setLoadingMore(false)
+    }
+  }, [vaultPath, skip, loadingMore, hasMore])
 
-  const handleLoadMore = useCallback(() => {
-    const nextLimit = commits.length + batchSize
-    loadPulse(nextLimit)
-  }, [commits.length, loadPulse])
+  useEffect(() => { loadInitial() }, [loadInitial])
+
+  // Intersection Observer for infinite scroll
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    if (!sentinel) return
+    const observer = new IntersectionObserver(
+      (entries) => { if (entries[0].isIntersecting) loadMore() },
+      { threshold: 0.1 },
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [loadMore])
 
   const dayGroups = groupCommitsByDay(commits)
 
@@ -260,12 +292,12 @@ export const PulseView = memo(function PulseView({ vaultPath, onOpenNote, sideba
 
       {/* Feed */}
       <div className="flex-1 overflow-y-auto">
-        {loading && commits.length === 0 ? (
+        {loading ? (
           <div className="flex items-center justify-center" style={{ padding: 32 }}>
             <span className="text-[13px] text-muted-foreground">Loading activity…</span>
           </div>
         ) : error ? (
-          <ErrorState message={error} onRetry={() => loadPulse(batchSize)} />
+          <ErrorState message={error} onRetry={loadInitial} />
         ) : commits.length === 0 ? (
           <EmptyState />
         ) : (
@@ -278,15 +310,11 @@ export const PulseView = memo(function PulseView({ vaultPath, onOpenNote, sideba
                 onOpenNote={onOpenNote}
               />
             ))}
-            {hasMore && (
-              <div style={{ padding: '12px 16px' }}>
-                <button
-                  className="flex w-full cursor-pointer items-center justify-center rounded border border-border bg-transparent py-2 text-[12px] text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
-                  onClick={handleLoadMore}
-                  disabled={loading}
-                >
-                  {loading ? 'Loading…' : 'Load more'}
-                </button>
+            {/* Sentinel for infinite scroll */}
+            <div ref={sentinelRef} style={{ height: 1 }} />
+            {loadingMore && (
+              <div className="flex items-center justify-center" style={{ padding: 12 }}>
+                <span className="text-[12px] text-muted-foreground">Loading…</span>
               </div>
             )}
           </>
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 3fd5595b..4850672d 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -45,6 +45,13 @@ globalThis.ResizeObserver = class {
   disconnect() {}
 } as unknown as typeof ResizeObserver
 
+// Mock IntersectionObserver for jsdom (not implemented)
+globalThis.IntersectionObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+} as unknown as typeof IntersectionObserver
+
 // Mock @tauri-apps/plugin-opener for test environment
 vi.mock('@tauri-apps/plugin-opener', () => ({
   openUrl: vi.fn(),