diffwatch 2.0.5 → 2.0.6

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.6",
   "description": "A TUI app for watching git repository file changes with diffs.",
   "keywords": [
     "git",

package/src/components/DiffViewer.tsx

@@ -149,7 +149,7 @@ const diffData = useMemo(() => {
         <box
             border
             title={` Diff (${filename || 'None'}) `}
-            width="70%"
+            width="67%"
             borderColor={focused ? 'yellow' : 'grey'}
             flexDirection="column"
         >

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,30 @@ 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) = 2 chars
+        // Also account for potential borders and padding (approximately 2-3 chars)
+        const estimatedWidth = Math.floor((renderer.width * 0.33) - 5); // 5 chars for symbol + spaces + borders/padding
+        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);
+        }
+        return path.substring(0, maxLength - 3) + '...';
+    };
+
+    const maxPathLength = calculateMaxPathLength();
+
     const title = searchQuery
         ? ` Files (${files.length}) - "${searchQuery}" `
         : ` Files (${files.length}) `;
@@ -34,7 +60,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 +100,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 +112,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.6";