Enhance Git status display in project session detail page by separating added and removed file indicators into distinct badges. Update UI for clearer visual feedback on changes, improving user experience during directory browsing.

Author: Gkrumbach07

components/frontend/src/app/projects/[name]/sessions/[sessionName]/page.tsx

@@ -1401,9 +1401,18 @@ export default function ProjectSessionDetailPage({
                     <Folder className="h-4 w-4" />
                     <span>Directory Browser</span>
                     {gitStatus?.hasChanges && (
-                      <Badge variant="outline" className="bg-yellow-50 text-yellow-700 border-yellow-200 ml-auto mr-2">
-                        +{gitStatus.totalAdded} -{gitStatus.totalRemoved}
-                      </Badge>
+                      <div className="flex gap-1 ml-auto mr-2">
+                        {gitStatus.totalAdded > 0 && (
+                          <Badge variant="outline" className="bg-green-50 text-green-700 border-green-200">
+                            +{gitStatus.totalAdded}
+                          </Badge>
+                        )}
+                        {gitStatus.totalRemoved > 0 && (
+                          <Badge variant="outline" className="bg-red-50 text-red-700 border-red-200">
+                            -{gitStatus.totalRemoved}
+                          </Badge>
+                        )}
+                      </div>
                     )}
                   </div>
                 </AccordionTrigger>