From ba256bbb426e5c6c2a20940ad5a53c1dc73badbe Mon Sep 17 00:00:00 2001
From: Louis Knight-Webb <louis@bloop.ai>
Date: Thu, 25 Sep 2025 13:33:28 +0100
Subject: [PATCH] Update Create GitHub PR style (vibe-kanban) (#850)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Done! I've successfully updated the CreatePRDialog to use the Alert component pattern, matching the style used in DeleteTaskConfirmationDialog:

- Added `Alert` import from `@/components/ui/alert`
- Replaced the custom error div with `<Alert variant="destructive">`
- Added error clearing when starting PR creation for better UX

The error messages now use a consistent, accessible Alert component across the application.

* Cleanup script changes for task attempt 3757c2b1-becb-4b8f-80ab-03be9bc3f096

* Perfect! I've successfully refactored all dialog error messages to use the consistent Alert component pattern:

## ✅ Completed Changes:

**1. [TaskTemplateEditDialog.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/3757-update-create-gi/frontend/src/components/dialogs/tasks/TaskTemplateEditDialog.tsx)**
- Added `Alert` and `AlertDescription` imports
- Replaced simple error div with proper Alert component

**2. [GitHubLoginDialog.tsx](file:///private/var/folders/m1/9q_ct1913z10v6wbnv54j25r0000gn/T/vibe-kanban/worktrees/3757-update-create-gi/frontend/src/components/dialogs/auth/GitHubLoginDialog.tsx)**
- Added `Alert` and `AlertDescription` imports
- Replaced both custom styled error divs with Alert components
- Maintained the same error display locations for proper context

## 🎯 Benefits Achieved:
- **Consistent UI/UX**: All dialogs now use the same error styling
- **Better Accessibility**: Semantic alert components with proper roles
- **Unified Theming**: All errors follow the same design system
- **Maintainability**: Single pattern for error display across the app

All dialog error messages now follow the same pattern as DeleteTaskConfirmationDialog and the updated CreatePRDialog.

* Done! I've simplified all Alert components to use the same pattern as CreatePRDialog:

- **Removed AlertDescription wrapper** from all error messages
- **Updated imports** to only import Alert
- **Consistent pattern**: `<Alert variant="destructive">{error}</Alert>` across all dialogs

Now all dialog error messages use the exact same simple Alert pattern throughout the application.

* Cleanup script changes for task attempt 3757c2b1-becb-4b8f-80ab-03be9bc3f096
---
 .../components/dialogs/auth/GitHubLoginDialog.tsx   | 13 +++----------
 .../src/components/dialogs/tasks/CreatePRDialog.tsx |  8 +++-----
 .../dialogs/tasks/TaskTemplateEditDialog.tsx        |  3 ++-
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/dialogs/auth/GitHubLoginDialog.tsx b/frontend/src/components/dialogs/auth/GitHubLoginDialog.tsx
index b1f48437..8c0c9325 100644
--- a/frontend/src/components/dialogs/auth/GitHubLoginDialog.tsx
+++ b/frontend/src/components/dialogs/auth/GitHubLoginDialog.tsx
@@ -8,6 +8,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog';
 import { Button } from '@/components/ui/button';
+import { Alert } from '@/components/ui/alert';
 import { useUserSystem } from '@/components/config-provider';
 import { Check, Clipboard, Github } from 'lucide-react';
 import { Loader } from '@/components/ui/loader';
@@ -235,11 +236,7 @@ const GitHubLoginDialog = NiceModal.create(() => {
               </span>
             </div>
 
-            {error && (
-              <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
-                <div className="text-destructive text-sm">{error}</div>
-              </div>
-            )}
+            {error && <Alert variant="destructive">{error}</Alert>}
 
             <DialogFooter>
               <Button
@@ -292,11 +289,7 @@ const GitHubLoginDialog = NiceModal.create(() => {
               </CardContent>
             </Card>
 
-            {error && (
-              <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-lg">
-                <div className="text-destructive text-sm">{error}</div>
-              </div>
-            )}
+            {error && <Alert variant="destructive">{error}</Alert>}
 
             <DialogFooter className="gap-3 flex-col sm:flex-row">
               <Button
diff --git a/frontend/src/components/dialogs/tasks/CreatePRDialog.tsx b/frontend/src/components/dialogs/tasks/CreatePRDialog.tsx
index 30da7fea..6bf4dd8f 100644
--- a/frontend/src/components/dialogs/tasks/CreatePRDialog.tsx
+++ b/frontend/src/components/dialogs/tasks/CreatePRDialog.tsx
@@ -10,6 +10,7 @@ import { Label } from '@radix-ui/react-label';
 import { Textarea } from '@/components/ui/textarea.tsx';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
+import { Alert } from '@/components/ui/alert';
 import BranchSelector from '@/components/tasks/BranchSelector';
 import { useCallback, useEffect, useState } from 'react';
 import { attemptsApi } from '@/lib/api.ts';
@@ -70,6 +71,7 @@ const CreatePrDialog = NiceModal.create(() => {
   const handleConfirmCreatePR = useCallback(async () => {
     if (!data?.projectId || !data?.attempt.id) return;
 
+    setError(null);
     setCreatingPR(true);
 
     const result = await attemptsApi.createPR(data.attempt.id, {
@@ -166,11 +168,7 @@ const CreatePrDialog = NiceModal.create(() => {
                 }
               />
             </div>
-            {error && (
-              <div className="text-sm text-destructive bg-red-50 p-2 rounded">
-                {error}
-              </div>
-            )}
+            {error && <Alert variant="destructive">{error}</Alert>}
           </div>
           <DialogFooter>
             <Button variant="outline" onClick={handleCancelCreatePR}>
diff --git a/frontend/src/components/dialogs/tasks/TaskTemplateEditDialog.tsx b/frontend/src/components/dialogs/tasks/TaskTemplateEditDialog.tsx
index bb44c105..bb37a6f7 100644
--- a/frontend/src/components/dialogs/tasks/TaskTemplateEditDialog.tsx
+++ b/frontend/src/components/dialogs/tasks/TaskTemplateEditDialog.tsx
@@ -3,6 +3,7 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Textarea } from '@/components/ui/textarea';
+import { Alert } from '@/components/ui/alert';
 import {
   Dialog,
   DialogContent,
@@ -154,7 +155,7 @@ export const TaskTemplateEditDialog =
                   disabled={saving}
                 />
               </div>
-              {error && <div className="text-sm text-destructive">{error}</div>}
+              {error && <Alert variant="destructive">{error}</Alert>}
             </div>
             <DialogFooter>
               <Button