|
| 1 | +# CLAUDE.md |
| 2 | + |
| 3 | +This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository. |
| 4 | + |
| 5 | +## Project Overview |
| 6 | + |
| 7 | +Git Diff Viewer is a Tauri-based desktop application built with SvelteKit that provides a GUI for viewing and searching git diff results. The application allows users to compare different git states (working directory vs HEAD, between commits, etc.), search within diffs, and navigate directly to files in their editor. |
| 8 | + |
| 9 | +## Commands |
| 10 | + |
| 11 | +### Development |
| 12 | +- `npm run check` - Run Svelte type checking |
| 13 | + |
| 14 | +## Architecture |
| 15 | + |
| 16 | +### Frontend (SvelteKit + Svelte 5) |
| 17 | +- **Framework**: SvelteKit with static adapter for SPA mode (required for Tauri) |
| 18 | +- **UI Library**: Custom components using CSS custom properties for theming |
| 19 | +- **State Management**: Svelte 5 runes (`$state`, `$effect`) for reactive state |
| 20 | +- **Styling**: Component-scoped CSS with global theme variables |
| 21 | + |
| 22 | +### Backend (Tauri + Rust) |
| 23 | +- **Main Backend**: `src-tauri/src/lib.rs` contains all Tauri commands |
| 24 | +- **Git Operations**: Rust backend handles all git commands via `tokio::process::Command` |
| 25 | +- **Editor Integration**: Automatic detection and launching of VS Code, Sublime Text, Atom, Notepad++, etc. |
| 26 | + |
| 27 | +### Key Components |
| 28 | +- **Main App**: `src/routes/+page.svelte` - Root component with application state |
| 29 | +- **DiffViewer**: `src/lib/DiffViewer.svelte` - Core diff display component |
| 30 | +- **ComparisonControls**: `src/lib/ComparisonControls.svelte` - Git ref selection and comparison options |
| 31 | +- **SearchBar**: `src/lib/SearchBar.svelte` - Search functionality with highlighting |
| 32 | +- **DirectorySelector**: `src/lib/DirectorySelector.svelte` - Git repository selection |
| 33 | + |
| 34 | +### Data Flow |
| 35 | +1. User selects a git repository via DirectorySelector |
| 36 | +2. Frontend calls `get_git_diff` Tauri command with comparison parameters |
| 37 | +3. Rust backend executes git commands and parses diff output |
| 38 | +4. Structured diff data returned to frontend as `GitDiffResult` |
| 39 | +5. DiffViewer renders the diff with syntax highlighting (highlight.js) |
| 40 | +6. Search functionality uses mark.js for text highlighting |
| 41 | + |
| 42 | +### Tauri Commands |
| 43 | +- `get_git_diff(directory_path, context_lines, include_untracked, comparison_source, comparison_target)` - Main diff generation |
| 44 | +- `get_git_refs(directory_path)` - Fetch available branches and recent commits |
| 45 | +- `open_file_in_editor(file_path, working_directory, line_number)` - Launch editor at specific file/line |
| 46 | + |
| 47 | +### Storage & Settings |
| 48 | +- LocalStorage used for user preferences (theme, search mode, context size, recent projects) |
| 49 | +- Window state persistence via `tauri-plugin-window-state` |
| 50 | + |
| 51 | +### Theme System |
| 52 | +- Supports light/dark/auto themes with CSS custom properties |
| 53 | +- Dynamic highlight.js theme switching |
| 54 | +- Smooth transitions between themes |
| 55 | + |
| 56 | +## Development Notes |
| 57 | + |
| 58 | +### Frontend Technologies |
| 59 | +- **Svelte 5**: Uses new runes syntax (`$state`, `$effect`) |
| 60 | +- **SvelteKit**: Configured as SPA with static adapter |
| 61 | +- **highlight.js**: Syntax highlighting for diff content |
| 62 | +- **mark.js**: Search term highlighting |
| 63 | + |
| 64 | +### Backend Dependencies |
| 65 | +- **chrono**: Date/time handling for file stats |
| 66 | +- **regex**: Git diff parsing |
| 67 | +- **tokio**: Async process execution |
| 68 | +- **serde**: JSON serialization for Tauri commands |
| 69 | + |
| 70 | +### Cross-platform Considerations |
| 71 | +- Windows-specific command creation (hidden console windows) |
| 72 | +- Path handling for different file systems |
| 73 | +- Editor detection varies by platform (Windows vs Unix) |
| 74 | + |
| 75 | +### Testing & Quality |
| 76 | +- TypeScript checking via `svelte-check` |
| 77 | +- No specific test framework configured - add tests as needed |
0 commit comments