diffwatch 2.0.5 → 2.0.7

package/README.md

@@ -8,15 +8,12 @@ A TUI app for watching git repository file changes with diffs.
 
 - **File Status Tracking**: Shows all changed files in a Git repository with their status (modified, new, deleted, renamed, etc.)
 - **Visual Diff Viewer**: Displays differences between file versions with syntax highlighting and line-by-line comparison
-- **Interactive Terminal Interface**: Built with React-like components for terminal UI using the @opentui library
-- **Real-time Updates**: Automatically polls for changes in the repository every 2 seconds
 - **File Operations**: 
   - Revert changes to files
   - Delete files safely (with trash/recycle bin support)
   - Open files in the default editor
 - **Search Functionality**: Allows searching for files by content within the repository
 - **Commit History Browser**: View commit history with hash, message, author, and date
-- **Keyboard Navigation**: Full keyboard controls for navigating files and diffs
 
 ## Installation
 
@@ -62,8 +59,6 @@ bun install
 
 ## Usage
 
-### Basic Usage
-
 To watch the current git repository:
 ```bash
 diffwatch
@@ -97,16 +92,6 @@ Watch a specific project:
 diffwatch --path ~/projects/my-app
 ```
 
-Check version:
-```bash
-diffwatch --version
-```
-
-Show help:
-```bash
-diffwatch --help
-```
-
 ## Keyboard Shortcuts
 
 - `↑` / `↓` - Navigate through the file list
@@ -119,26 +104,6 @@ diffwatch --help
 - `Q` - Quit the application
 - `Esc` - Exit search mode or close dialogs
 
-## Development
-
-### Prerequisites
-
-- [Bun](https://bun.sh/) - Fast JavaScript runtime and package manager
-- Node.js 18+ (for running published package)
-
-### Setup
-
-1. Clone the repository:
-```bash
-git clone https://github.com/sarfraznawaz2005/diffwatch.git
-cd diffwatch
-```
-
-2. Install dependencies:
-```bash
-bun install
-```
-
 ### Running the App in Development
 
 ```bash

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diffwatch",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "description": "A TUI app for watching git repository file changes with diffs.",
   "keywords": [
     "git",

package/src/components/DiffViewer.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useMemo, useRef } from 'react';
-import { useKeyboard } from '@opentui/react';
+import { useKeyboard, useRenderer } from '@opentui/react';
 import { getRawDiff } from '../utils/git';
 import * as Diff2Html from 'diff2html';
 import * as fsPromises from 'fs/promises';
@@ -22,6 +22,7 @@ export function DiffViewer({ filename, focused, searchQuery, status, repoPath }:
     const [isBinary, setIsBinary] = useState(false);
     const scrollRef = useRef<any>(null);
     const pollingIntervalRef = useRef<NodeJS.Timeout | null>(null);
+    const renderer = useRenderer();
 
     const loadContent = async (showLoading = true) => {
         if (!filename) {
@@ -115,9 +116,19 @@ const diffData = useMemo(() => {
         return fileContent.split('\n');
     }, [fileContent]);
 
-    // Soft wrap lines at approximately 80 characters
-    const MAX_LINE_WIDTH = 80;
+    // Calculate the max line width based on available width in the diff viewer
+    // The diff viewer takes up 67% of the total width, and we need to account for:
+    // - Line numbers (6 chars: " 1234: ")
+    // - Prefix (+/-/space) (1 char)
+    // - Borders (2 chars: left and right)
+    // - Some padding (1 char)
+    // Total overhead: 6 (line numbers) + 1 (prefix) + 2 (borders) = 9 chars
+    const calculateMaxLineWidth = (): number => {
+        const estimatedWidth = Math.floor((renderer.width * 0.67) - 9); // 9 chars for line numbers, prefix, and borders
+        return Math.max(20, estimatedWidth); // minimum width of 20
+    };
 
+    // Soft wrap lines based on available width
     const wrapLine = (text: string, maxLength: number): string[] => {
         if (text.length <= maxLength) return [text];
 
@@ -145,11 +156,13 @@ const diffData = useMemo(() => {
         return lines;
     };
 
+    const maxLineWidth = calculateMaxLineWidth();
+
     return (
         <box
             border
             title={` Diff (${filename || 'None'}) `}
-            width="70%"
+            width="67%"
             borderColor={focused ? 'yellow' : 'grey'}
             flexDirection="column"
         >
@@ -162,7 +175,7 @@ const diffData = useMemo(() => {
             ) : isNewFile ? (
                 <scrollbox flexGrow={1} ref={scrollRef}>
                     {contentLines.flatMap((line, i) => {
-                        const wrappedLines = wrapLine(line, MAX_LINE_WIDTH);
+                        const wrappedLines = wrapLine(line, maxLineWidth);
 
                         return wrappedLines.map((wrappedLine, wrapIdx) => {
                             const isFirstLine = wrapIdx === 0;
@@ -214,7 +227,7 @@ const diffData = useMemo(() => {
                                 const lnText = ln ? `${String(ln).padStart(4)}: ` : '      ';
 
                                 // Wrap content if it's too long
-                                const wrappedContent = wrapLine(content, MAX_LINE_WIDTH);
+                                const wrappedContent = wrapLine(content, maxLineWidth);
 
                                 return (
                                     <>

package/src/components/FileList.tsx

@@ -1,4 +1,5 @@
 import { useRef, useEffect } from 'react';
+import { useRenderer } from '@opentui/react';
 import { type FileStatus } from '../utils/git';
 
 interface FileListProps {
@@ -12,6 +13,7 @@ interface FileListProps {
 
 export function FileList({ files, selectedIndex, focused, searchQuery, onSelect, onScroll }: FileListProps) {
     const scrollRef = useRef<any>(null);
+    const renderer = useRenderer();
 
     useEffect(() => {
         if (scrollRef.current) {
@@ -26,6 +28,32 @@ export function FileList({ files, selectedIndex, focused, searchQuery, onSelect,
         }
     }, [selectedIndex]);
 
+    // Calculate the max length for file paths based on available width
+    // Account for the symbol, space, and padding
+    const calculateMaxPathLength = (): number => {
+        // Get the width of the container (33% of total width)
+        // Since we can't directly measure the rendered width, we'll estimate based on a percentage
+        // considering that the container is 33% of the total width
+        // and we need to account for the symbol (1 char) + space (1 char) before the filename
+        // Also account for borders (left and right = 2 chars total)
+        // Total overhead: 1 (symbol) + 1 (space after symbol) + 2 (borders) = 4 chars
+        const estimatedWidth = Math.floor((renderer.width * 0.33) - 4); // 4 chars for symbol + space + borders
+        return Math.max(10, estimatedWidth); // minimum length of 10
+    };
+
+    const truncatePath = (path: string, maxLength: number): string => {
+        if (path.length <= maxLength) {
+            return path;
+        }
+        if (maxLength <= 3) {
+            return '.'.repeat(maxLength);
+        }
+        // Truncate the path and add ellipsis (...) at the end
+        return path.substring(0, maxLength - 3) + '...';
+    };
+
+    const maxPathLength = calculateMaxPathLength();
+
     const title = searchQuery
         ? ` Files (${files.length}) - "${searchQuery}" `
         : ` Files (${files.length}) `;
@@ -34,7 +62,7 @@ export function FileList({ files, selectedIndex, focused, searchQuery, onSelect,
         <box
             border
             title={title}
-            width="30%"
+            width="33%"
             height="100%"
             borderColor={focused ? 'yellow' : 'grey'}
             flexDirection="column"
@@ -74,6 +102,8 @@ export function FileList({ files, selectedIndex, focused, searchQuery, onSelect,
                     };
                     const symbol = symbolMap[file.status] || '?';
 
+                    const truncatedPath = truncatePath(file.path, maxPathLength);
+
                     return (
                         <box
                             key={file.path}
@@ -84,7 +114,7 @@ export function FileList({ files, selectedIndex, focused, searchQuery, onSelect,
                             <text
                                 fg={isSelected ? 'black' : color}
                             >
-                                {` ${symbol} ${file.path}`}
+                                {` ${symbol} ${truncatedPath}`}
                             </text>
                         </box>
                     );

package/src/version.ts

@@ -1 +1 @@
-export const BUILD_VERSION = "2.0.5";
+export const BUILD_VERSION = "2.0.7";