Add a big banner above the navbar if the frontend is running in dev mode (vibe-kanban) (#595)

* Perfect! I've successfully added a big banner above the navbar that appears when the frontend is running in dev mode. Here's what I implemented:
## Changes Made:
1. **Created a new `DevBanner` component** (`frontend/src/components/DevBanner.tsx`):
   - Only renders when `import.meta.env.MODE === 'development'`
   - Features an orange background with white text and an alert triangle icon
   - Displays "Development Mode - This is a development build"
2. **Updated `App.tsx`** to include the banner:
   - Added the import for the DevBanner component
   - Positioned the banner above the navbar with the same conditional rendering logic
## Key Features:
- **Conditional Rendering**: The banner only appears in development mode using Vite's `import.meta.env.MODE`
- **Prominent Styling**: Orange background with white text and an alert icon for high visibility
- **Proper Positioning**: Appears above the navbar but below other UI elements
- **Consistent with Existing Code**: Uses the same dev mode detection pattern already used in the codebase
The banner will now be clearly visible to developers whenever they run the frontend in development mode, helping them distinguish between development and production builds. The implementation passed TypeScript type checking and follows the existing code patterns in the project.

* Cleanup script changes for task attempt 5ec194cd-4a78-4b25-a7b7-66ad1b366431

frontend/src/App.tsx

@@ -31,6 +31,7 @@ import { GitHubLoginDialog } from '@/components/GitHubLoginDialog';
 import { ReleaseNotesDialog } from '@/components/ReleaseNotesDialog';
 import { AppWithStyleOverride } from '@/utils/style-override';
 import { WebviewContextMenu } from '@/vscode/ContextMenu';
+import { DevBanner } from '@/components/DevBanner';
 
 const SentryRoutes = Sentry.withSentryReactRouterV6Routing(Routes);
 
@@ -212,6 +213,7 @@ function AppContent() {
             />
             <CreatePRDialog />
             <TaskFormDialogContainer />
+            {showNavbar && <DevBanner />}
             {showNavbar && <Navbar />}
             <div className="flex-1 h-full overflow-y-scroll">
               <SentryRoutes>

frontend/src/components/DevBanner.tsx

@@ -0,0 +1,17 @@
+import { AlertTriangle } from 'lucide-react';
+
+export function DevBanner() {
+  // Only show in development mode
+  if (import.meta.env.MODE !== 'development') {
+    return null;
+  }
+
+  return (
+    <div className="bg-orange-500 text-white text-center py-2 px-4 text-sm font-medium border-b border-orange-600">
+      <div className="flex items-center justify-center gap-2">
+        <AlertTriangle className="h-4 w-4" />
+        <span>Development Mode - This is a development build</span>
+      </div>
+    </div>
+  );
+}