You are an expert AI software architect and lead developer tasked with generating a complete, production-ready MVP of a developer tool application. The application, named 'Code Diff Pro', aims to revolutionize how developers review code changes using Git. It will integrate advanced tools like `delta` for enhanced diff visualization and `fzf` for fuzzy file searching directly within a user-friendly interface. The MVP should be a multi-page Next.js application with robust backend capabilities, including user authentication and database integration.
**1. PROJECT OVERVIEW:**
Code Diff Pro is a desktop and web application designed to significantly improve the code review process for developers using Git. It addresses the common pain point of wading through complex, text-based diffs by providing a visually rich, interactive, and searchable interface powered by `delta` and `fzf`. The core value proposition is to make code reviews faster, more accurate, and less error-prone by offering a superior diff viewing experience and streamlined navigation.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **Language:** TypeScript
- **UI Library:** shadcn/ui (for high-quality, accessible components)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (for PostgreSQL database interaction)
- **Database:** PostgreSQL
- **Authentication:** NextAuth.js (with PostgreSQL adapter)
- **CLI Integration:** Utilize child process execution in Next.js API routes to run `git`, `delta`, and `fzf` commands.
- **Desktop App Packaging:** Electron or Tauri (for the MVP, focus on Electron for broader compatibility first).
- **State Management:** React Context API and Server Components for efficient data fetching and state handling.
- **Form Handling:** React Hook Form with Zod for validation.
- **Utility Libraries:** `zod` (validation), `clsx` (conditional class names), `date-fns` (date manipulation).
**3. DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
* **`users` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `name` (Text)
* `email` (Text, Unique)
* `emailVerified` (TimestampZ)
* `image` (Text)
* `createdAt` (TimestampZ, default: now())
* `updatedAt` (TimestampZ, default: now())
* **`accounts` Table (for NextAuth.js):**
* `id` (BigInt, Primary Key, autoIncrement)
* `userId` (UUID, Foreign Key to `users.id`)
* `type` (Text)
* `provider` (Text)
* `providerAccountId` (Text)
* `refresh_token` (Text)
* `access_token` (Text)
* `expires_at` (BigInt)
* `token_type` (Text)
* `scope` (Text)
* `id_token` (Text)
* `session_state` (Text)
* **`sessions` Table (for NextAuth.js):**
* `id` (BigInt, Primary Key, autoIncrement)
* `sessionToken` (Text, Unique)
* `userId` (UUID, Foreign Key to `users.id`)
* `expires` (TimestampZ)
* **`verificationTokens` Table (for NextAuth.js):**
* `identifier` (Text)
* `token` (Text, Unique)
* `expires` (TimestampZ)
* **`repositories` Table:**
* `id` (UUID, Primary Key, default: uuid_generate_v4())
* `userId` (UUID, Foreign Key to `users.id`)
* `path` (Text, Unique) // Local path to the git repository
* `name` (Text) // Repository name derived from path
* `createdAt` (TimestampZ, default: now())
* `updatedAt` (TimestampZ, default: now())
* **`settings` Table:**
* `userId` (UUID, Primary Key, Foreign Key to `users.id`)
* `deltaConfig` (JSONB | null) // Stores custom delta configurations
* `fzfOptions` (JSONB | null) // Stores custom fzf options
* `themePreference` (Text, default: 'system') // e.g., 'light', 'dark', 'system'
* `createdAt` (TimestampZ, default: now())
* `updatedAt` (TimestampZ, default: now())
**4. CORE FEATURES & USER FLOW:**
* **Authentication Flow:**
1. User lands on the homepage.
2. Clicks 'Sign In'.
3. Redirected to NextAuth.js sign-in page (e.g., GitHub, Google, Email).
4. Upon successful authentication, user is redirected to the dashboard.
5. User session is managed via cookies and NextAuth.js.
* **Repository Management:**
1. **Add Repository:** User navigates to 'Settings' -> 'Repositories'. Clicks 'Add Repository'. A modal or form appears prompting for the local Git repository path. Input is validated to ensure it's a valid directory and a Git repository.
2. **View Repositories:** The 'Repositories' page lists all added repositories with their names and paths. Each entry has options to 'View Diffs', 'Configure', or 'Remove'.
3. **Remove Repository:** User clicks 'Remove' on a repository entry. A confirmation prompt appears. Upon confirmation, the repository is removed from the list and the database.
* **Diff Viewing:**
1. User selects a repository and clicks 'View Diffs' or navigates to the 'Diffs' page.
2. The application prompts the user to select a branch or commit range (using `git branch` and potentially `fzf` for selection).
3. Once a range is selected (e.g., `main..feature-branch`), the application executes `git diff <range>` and pipes the output to `delta`. A custom configuration based on user settings will be applied.
4. **Output:** The diff is displayed in a scrollable, syntax-highlighted, and interactive panel using `delta`'s output formatting. Line numbers, +/- indicators, and file headers are clearly presented.
5. **File Navigation:** Within the diff view, clicking on a file name scrolls the view to that file's changes.
* **Fuzzy File Search (within Diffs/Repo):**
1. On the Diffs page or within a specific repository view, the user can trigger the fuzzy search (e.g., via a hotkey like `Ctrl+P` or `Cmd+P`).
2. An overlay or input field appears, powered by `fzf` (executed via a child process). The command might be `find . -type f | fzf` for general file search, or a command tailored to find changed files within a diff context.
3. As the user types, `fzf` filters the list.
4. Selecting a file from the `fzf` results navigates the diff view to that file's changes.
* **PR Review Mode (Simplified MVP):**
1. User initiates a 'PR Review' from a selected branch comparison (e.g., comparing `develop` to `my-feature`).
2. The UI presents a split view or a navigable list of changed files.
3. Clicking a file shows its diff, similar to the standard diff view but potentially with added UI elements for comments (initially static, no backend storage for MVP).
* **Settings Configuration:**
1. User navigates to the 'Settings' page.
2. **Delta Settings:** Allows users to input or select pre-defined `delta` configurations (e.g., `--line-numbers`, `--syntax-theme`, `--features`). These are saved to the `settings` table.
3. **Fzf Settings:** Allows basic customization of `fzf` behavior (e.g., `--height`, `--reverse`). Saved to the `settings` table.
4. **Theme:** Select application theme ('Light', 'Dark', 'System').
**5. API & DATA FETCHING:**
* **`POST /api/repositories`:** Adds a new repository. Accepts `{ path: string }`. Returns the added repository object or error.
* **`DELETE /api/repositories/[id]`:** Removes a repository. Returns success/failure status.
* **`GET /api/repositories`:** Fetches all repositories for the current user.
* **`GET /api/diffs`:** Generates Git diffs. Accepts query parameters like `repoId`, `branchA`, `branchB` (or commit range). Executes `git diff <branchA>..<branchB>` and pipes to `delta`. Returns the formatted diff string.
* **`GET /api/git/branches`:** Fetches branches for a given repository (`repoId`). Executes `git branch --list`. Returns a list of branch names.
* **`POST /api/exec/fzf`:** (Potentially) Executes `fzf` with provided arguments and input. Returns the selected output. *Note: Direct `fzf` execution might be complex; consider if simpler file input is sufficient for MVP.*
* **Data Fetching:** Server Components will fetch repository lists and user settings. Client Components will fetch diffs and potentially trigger `fzf` executions. Use SWR or React Query for client-side caching and revalidation if needed.
**6. COMPONENT BREAKDOWN (Next.js App Router):**
* **`app/layout.tsx`:** Root layout (html, body, Tailwind setup, theme provider).
* **`app/page.tsx`:** Landing page (marketing content, call to action).
* **`app/(auth)/signin/page.tsx`:** Sign-in page using NextAuth.js.
* **`app/(app)/layout.tsx`:** Authenticated application layout (sidebar, header).
* **`app/(app)/dashboard/page.tsx`:** Main dashboard showing recent activity, quick access to repositories.
* **`app/(app)/repositories/page.tsx`:** Page to list, add, and remove repositories.
* `components/RepositoryList.tsx`: Displays repositories.
* `components/AddRepositoryForm.tsx`: Modal/form for adding repos.
* **`app/(app)/diffs/[repoId]/page.tsx`:** Primary diff viewing page.
* `components/BranchSelector.tsx`: Component to select branches/commits for diff.
* `components/DiffViewer.tsx`: Renders the `delta` output. Handles scrolling and potentially `fzf` triggering.
* `components/FzfSearchOverlay.tsx`: Overlay for fuzzy file searching.
* **`app/(app)/settings/page.tsx`:** User settings page.
* `components/DeltaSettings.tsx`: Configuration for `delta`.
* `components/FzfSettings.tsx`: Configuration for `fzf`.
* `components/ThemeSwitcher.tsx`: Theme selection component.
* **`components/ui/...`:** All shared UI components from shadcn/ui (Button, Input, Card, Dialog, etc.).
* **`lib/db.ts`:** Drizzle ORM client initialization.
* **`lib/auth.ts`:** NextAuth.js configuration.
* **`lib/exec.ts`:** Utility for safely executing shell commands (`git`, `delta`, `fzf`).
**7. UI/UX DESIGN & VISUAL IDENTITY:**
* **Design Style:** "Dark Cyberpunk" with clean, functional elements. Focus on readability and efficient information display.
* **Color Palette:**
* Primary Dark: `#1a1a2e`
* Secondary Dark: `#0f3460`
* Accent (Cyberpunk Neon): `#e94560` (for highlights, buttons)
* Accent Secondary: `#00bfff` (for links, active states)
* Text: `#e0e0e0` (light text)
* Muted Text: `#888888`
* Code/Diff Highlight: Subtle variations of blues, greens, and purples.
* **Typography:** Monospaced font for code/diffs (e.g., 'Fira Code', 'JetBrains Mono'). Sans-serif font for UI elements (e.g., 'Inter', 'Roboto').
* **Layout:** Sidebar navigation for authenticated app. Main content area displays diffs, settings, etc. Clear separation between code/diff content and UI controls.
* **Responsiveness:** Desktop-first, but ensure the web version is usable on larger screens and tablets. The desktop app will have fixed window sizing.
**8. SAMPLE/MOCK DATA:**
* **User:**
```json
{
"id": "uuid-for-user-1",
"name": "Alice Coder",
"email": "alice@example.com",
"image": "https://example.com/alice.jpg"
}
```
* **Repository:**
```json
{
"id": "uuid-for-repo-1",
"userId": "uuid-for-user-1",
"path": "/Users/alice/Projects/my-cool-app",
"name": "my-cool-app"
}
```
* **Mock Diff Output (Simulated Delta):**
```
diff --git a/src/App.tsx b/src/App.tsx
index abc123d..def456e 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,7 +1,7 @@
import React from 'react';
-import './App.css';
+import './styles/App.css';
function App() {
return (
- <div className="App">
+ <div className="App font-inter">
<h1>Welcome to Code Diff Pro</h1>
</div>
);
```
* **Mock `git branch` Output:**
```
* main
develop
feature/new-ui
release/v1.0
```
* **Settings:**
```json
{
"userId": "uuid-for-user-1",
"deltaConfig": {"lineNumbers": true, "syntaxTheme": "TwoDark"},
"fzfOptions": {"height": "40%"},
"themePreference": "dark"
}
```
**9. TURKISH TRANSLATIONS:**
* **App Title:** Kod Farkı Pro (Code Diff Pro)
* **Sign In:** Giriş Yap
* **Sign Out:** Çıkış Yap
* **Dashboard:** Pano
* **Repositories:** Repolar
* **Add Repository:** Repo Ekle
* **Settings:** Ayarlar
* **View Diffs:** Farkları Gör
* **Search Files:** Dosya Ara
* **Loading...:** Yükleniyor...
* **No changes:** Değişiklik yok
* **Select Branches:** Dalları Seç
* **Compare:** Karşılaştır
* **Save Settings:** Ayarları Kaydet
* **Choose Theme:** Tema Seç
* **Pull Request Review:** PR İncelemesi
* **Repository Path:** Depo Yolu
* **Error:** Hata
* **Success:** Başarılı
**10. ANIMATIONS:**
* **Page Transitions:** Subtle fade-in/out or slide animations between pages using `Framer Motion` or CSS transitions.
* **Hover Effects:** Slight scaling or color change on interactive elements (buttons, links).
* **Loading States:** Use spinners or skeleton loaders (from shadcn/ui) for data fetching and command execution.
* **Diff Interaction:** Smooth scrolling to selected file diffs.
**11. EDGE CASES:**
* **No Repositories Added:** Display a helpful message and a clear call-to-action to add the first repository.
* **Invalid Repository Path:** Validate path input and provide clear error messages.
* **Git Command Failures:** Gracefully handle errors from `git`, `delta`, or `fzf` commands, displaying informative messages to the user.
* **Empty Diffs:** Display a message indicating no differences found for the selected range.
* **Authorization:** Ensure all API routes and data access are protected by authentication middleware.
* **Validation:** Use Zod for robust validation of all user inputs, especially repository paths and configuration settings.
* **`delta`/`fzf` Not Installed:** Provide clear instructions or attempt automatic installation (especially for the desktop version).
* **Large Diffs:** Implement efficient rendering and potentially pagination or virtualized scrolling for very large diffs.
This comprehensive prompt provides all the necessary details to build a fully functional, multi-page Next.js MVP application with authentication, database integration, and core features powered by `git`, `delta`, and `fzf`, adhering to modern development practices.