Applications patch

src/app/applications/page.tsx

@@ -1,7 +1,14 @@
 "use client";
 
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
-import { Card, CardContent } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import { MoreVertical, Plus, Rocket } from "lucide-react";
@@ -50,20 +57,12 @@ export default function ApplicationsPage() {
       <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
         {applications.map((app) => (
           <Card key={app.id}>
-            <CardContent className="p-4">
+            <CardHeader>
-              <div className="flex flex-col gap-4">
+              <CardTitle>{app.name}</CardTitle>
-                {/* Status & Name */}
+              <CardDescription>{app.repo}</CardDescription>
-                <div className="flex items-center gap-3 min-w-0">
+            </CardHeader>
-                  <div className="min-w-0">
-                    <div className="font-mono text-sm font-medium truncate">
-                      {app.name}
-                    </div>
-                    <div className="text-xs text-muted-foreground font-mono truncate">
-                      {app.repo}
-                    </div>
-                  </div>
-                </div>
 
+            <CardContent className="flex flex-col gap-2">
               {/* Deployments */}
               <div className="flex justify-between items-center">
                 <span className="text-xs text-muted-foreground">
@@ -73,25 +72,19 @@ export default function ApplicationsPage() {
                   {app.deployments?.length ?? 0}
                 </span>
               </div>
+            </CardContent>
 
-                {/* Actions */}
+            <CardFooter className="justify-end">
-                <div className="flex items-center justify-end gap-1">
               <Button variant="ghost" size="icon-sm" aria-label="Deploy">
                 <Rocket className="w-3 h-3" />
               </Button>
 
-                  {app.id && <RemoveDialog remove={() => remove(app.id)} />}
+              <RemoveDialog remove={() => remove(app.id)} />
 
-                  <Button
+              <Button variant="ghost" size="icon-sm" aria-label="More options">
-                    variant="ghost"
-                    size="icon-sm"
-                    aria-label="More options"
-                  >
                 <MoreVertical className="w-3 h-3" />
               </Button>
-                </div>
+            </CardFooter>
-              </div>
-            </CardContent>
           </Card>
         ))}
       </div>