Improved deployments ui

src/app/deployments/page.tsx

@@ -2,16 +2,32 @@
 
 import { useEffect, useMemo, useState } from "react";
 import { DashboardLayout } from "@/components/dashboard/DashboardLayout";
-import { Card, CardContent } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import { Rocket, RotateCcw, Eye, MoreVertical, Plus } from "lucide-react";
+import {
+  Rocket,
+  RotateCcw,
+  Eye,
+  MoreVertical,
+  Plus,
+  Play,
+  Pause,
+  Trash,
+} from "lucide-react";
 import { Application, Deployment } from "@/lib/types";
 import { getDeployments } from "@/lib/dockship/deploy";
 import { getApps } from "@/lib/dockship/application";
 import { cn } from "@/lib/utils";
 import DeployAppDialog from "@/components/dialogs/DeployApp";
-import { useAsync } from "@/hooks/use-async";
+import { useAsync, useAsyncInterval } from "@/hooks/use-async";
+import RemoveDialog from "@/components/dialogs/Remove";
 
 const statusDot = {
   running: "bg-chart-2",
@@ -20,7 +36,7 @@ const statusDot = {
 } as const;
 
 export default function DeploymentsPage() {
-  const { value: apps } = useAsync([], getApps);
+  const { value: apps } = useAsyncInterval([], getApps, 5000);
 
   const { value: deployments, loading } = useAsync([], getDeployments, [apps]);
 
@@ -44,7 +60,7 @@ export default function DeploymentsPage() {
         <Badge>
           {loading
             ? "Loading…"
-            : `${deployments.length} deployment${deployments.length > 0 && 's'}`}
+            : `${deployments.length} deployment${deployments.length > 0 && "s"}`}
         </Badge>
 
         <DeployAppDialog>
@@ -55,79 +71,48 @@ export default function DeploymentsPage() {
         </DeployAppDialog>
       </div>
 
-      {/* Desktop */}
+      <div className="divide-y divide-border">
-      <div className="hidden md:block space-y-3">
         {deployments.map((dep) => {
           const appName =
             appNameByContainer.get(dep.container) ?? "Unknown app";
 
           return (
-            <div
+            <Card key={`${dep.image}-${dep.container ?? "latest"}`}>
-              key={`${dep.image}-${dep.container ?? "latest"}`}
+              <CardContent>
-              className="flex items-center justify-between py-2 border-b border-border last:border-0"
-            >
-              <div className="flex items-center gap-3">
-                <span
-                  className={cn(
-                    "size-2 rounded-full",
-                    statusDot[dep.status as keyof typeof statusDot] ??
-                      statusDot.stopped
-                  )}
-                />
-                <div>
-                  <div className="font-mono text-sm">{appName}</div>
-                  <div className="text-xs text-muted-foreground">
-                    {dep.image}
-                  </div>
-                </div>
-              </div>
-
-              <div className="flex items-center gap-1">
-                <Button variant="ghost" size="icon-sm">
-                  <Eye className="w-3 h-3" />
-                </Button>
-                <Button variant="ghost" size="icon-sm">
-                  <RotateCcw className="w-3 h-3" />
-                </Button>
-                <Button variant="ghost" size="icon-sm">
-                  <MoreVertical className="w-3 h-3" />
-                </Button>
-              </div>
-            </div>
-          );
-        })}
-      </div>
-
-      {/* Mobile */}
-      <div className="md:hidden divide-y divide-border">
-        {deployments.map((dep) => {
-          const appName =
-            appNameByContainer.get(dep.container) ?? "Unknown app";
-
-          return (
-            <div key={`${dep.container}-mobile`} className="p-4 space-y-3">
                 <div className="flex items-center justify-between">
                   <div className="flex items-center gap-2">
-                  <Rocket className="w-4 h-4 text-muted-foreground" />
+                    <span
-                  <span className="font-mono text-sm">{appName}</span>
+                      className={cn(
-                </div>
+                        "size-2 rounded-full animate-pulse",
-                <span className="text-xs text-muted-foreground">
+                        statusDot[dep.status as keyof typeof statusDot] ??
-                  {dep.status}
+                          statusDot.stopped,
+                      )}
+                    />
+                    <CardTitle>{appName}</CardTitle>
+                    <CardDescription className="flex gap-3">
+                      {dep.ports.map(([to, from]) => (
+                        <span key={`${from}-${to}`}>
+                          {from} → {to}
                         </span>
+                      ))}
+                    </CardDescription>
                   </div>
-
+                  <p className="hidden xl:block text-muted-foreground">
-              <div className="flex justify-end gap-1 pt-2">
+                    {dep.image}
+                  </p>
+                  <div className="flex justify-end gap-1">
                     <Button variant="ghost" size="icon-sm">
-                  <Eye className="w-3 h-3" />
+                      {dep.status === "running" ? (
-                </Button>
+                        <Pause className="w-3 h-3" />
-                <Button variant="ghost" size="icon-sm">
+                      ) : (
-                  <RotateCcw className="w-3 h-3" />
+                        <Play className="w-3 h-3" />
-                </Button>
+                      )}
-                <Button variant="ghost" size="icon-sm">
-                  <MoreVertical className="w-3 h-3" />
                     </Button>
+                    <RemoveDialog remove={() => {}} />
                   </div>
                 </div>
+              </CardContent>
+            </Card>
           );
         })}
       </div>