Revert "ui(site): enhance table components and visibility"

This reverts commit 298c514087.

internal/site/src/components/domains-table/domains-table.tsx

@@ -88,17 +88,17 @@ function DaysLeftBadge({ days, label = "days" }: { days: number | undefined; lab
 	const isExpired = days < 0
 	
 	const colorClass = isExpired 
-		? "bg-red-500 text-white border-red-600"
+		? "bg-red-500/15 text-red-600 border-red-500/30"
 		: isCritical 
-			? "bg-red-500 text-white border-red-600"
+			? "bg-red-500/15 text-red-600 border-red-500/30"
 			: isWarning 
-				? "bg-yellow-500 text-white border-yellow-600"
-				: "bg-green-500 text-white border-green-600"
+				? "bg-yellow-500/15 text-yellow-600 border-yellow-500/30"
+				: "bg-green-500/15 text-green-600 border-green-500/30"
 	
 	return (
 		<div className={`inline-flex flex-col items-center justify-center px-3 py-1.5 rounded-lg border-2 ${colorClass} min-w-[70px]`}>
 			<span className="text-lg font-bold leading-none">{isExpired ? Math.abs(days) : days}</span>
-			<span className="text-[10px] font-medium uppercase tracking-wide opacity-90">{isExpired ? "EXPIRED" : days === 1 ? "DAY" : label.toUpperCase()}</span>
+			<span className="text-[10px] font-medium uppercase tracking-wide opacity-80">{isExpired ? "EXPIRED" : days === 1 ? "DAY" : label.toUpperCase()}</span>
 		</div>
 	)
 }
@@ -552,104 +552,80 @@ export default function DomainsTable() {
 							</div>
 						) : (
 							<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-								{filteredDomains.map((domain) => {
-									const isExpired = domain.status === "expired"
-									const isExpiring = domain.status === "expiring"
-									const isActive = domain.status === "active"
-									
-									const cardGradient = isExpired 
-										? "from-red-500/5 to-red-500/10 border-red-500/20" 
-										: isExpiring 
-											? "from-yellow-500/5 to-yellow-500/10 border-yellow-500/20" 
-											: isActive 
-												? "from-green-500/5 to-green-500/10 border-green-500/20" 
-												: "from-gray-500/5 to-gray-500/10 border-gray-500/20"
-									
-									return (
-										<div key={domain.id} className={`rounded-lg border bg-gradient-to-br ${cardGradient} p-4 space-y-3 hover:shadow-lg hover:scale-[1.02] transition-all duration-200`}>
-											<div className="flex items-start justify-between">
-												<Link href={`/domain/${domain.id}`} className="flex items-center gap-3 cursor-pointer min-w-0 flex-1">
-													{domain.favicon_url && (
-														<img
-															src={domain.favicon_url}
-															alt=""
-															className="h-8 w-8 shrink-0 rounded-lg bg-background p-1"
-															onError={(e) => (e.currentTarget.style.display = "none")}
-														/>
-													)}
-													<div className="min-w-0 flex-1">
-														<div className="font-semibold text-base truncate hover:underline">{domain.domain_name}</div>
-														{displayOptions.showRegistrar && (
-															<div className="text-xs text-muted-foreground truncate mt-0.5">{domain.registrar_name || "Unknown"}</div>
-														)}
-													</div>
-												</Link>
-												<DropdownMenu>
-													<DropdownMenuTrigger asChild>
-														<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
-															<MoreHorizontal className="h-4 w-4" />
-														</Button>
-													</DropdownMenuTrigger>
-													<DropdownMenuContent align="end">
-														<DropdownMenuItem onClick={() => handleEdit(domain)}>Edit</DropdownMenuItem>
-														<DropdownMenuItem onClick={() => handleRefresh(domain.id)} disabled={refreshMutation.isPending}>
-															<RefreshCw className="mr-2 h-4 w-4" />
-															Refresh
-														</DropdownMenuItem>
-														<DropdownMenuItem onClick={() => handleDelete(domain.id)} className="text-destructive">
-															Delete
-														</DropdownMenuItem>
-													</DropdownMenuContent>
-												</DropdownMenu>
-											</div>
-
-											<div className="flex items-center gap-2">
-												{getStatusIcon(domain.status)}
-												<Badge className={getStatusBadgeColor(domain.status)}>
-													{getStatusLabel(domain.status)}
-												</Badge>
-											</div>
-
-											{displayOptions.showTags && domain.tags && domain.tags.length > 0 && (
-												<div className="flex flex-wrap gap-1">
-													{domain.tags.map((tag: string) => (
-														<span
-															key={tag}
-															className="inline-flex items-center gap-1 rounded-md bg-background/50 border px-2 py-0.5 text-[10px] font-medium"
-														>
-															<Tag className="h-3 w-3" />
-															{tag}
-														</span>
-													))}
-												</div>
-											)}
-
-											<div className="space-y-3">
-												{displayOptions.showExpiryDate && (
-													<div className="flex items-center justify-between text-sm">
-														<span className="text-xs text-muted-foreground">Expiry</span>
-														<span className="font-medium">{domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"}</span>
-													</div>
+								{filteredDomains.map((domain) => (
+									<div key={domain.id} className="rounded-lg border bg-card p-4 space-y-3 hover:shadow-md transition-shadow">
+										<div className="flex items-start justify-between">
+											<Link href={`/domain/${domain.id}`} className="flex items-center gap-3 cursor-pointer min-w-0">
+												{domain.favicon_url && (
+													<img
+														src={domain.favicon_url}
+														alt=""
+														className="h-5 w-5 shrink-0"
+														onError={(e) => (e.currentTarget.style.display = "none")}
+													/>
 												)}
-												<div className="flex items-center justify-between gap-2">
-													<DaysLeftBadge days={domain.days_until_expiry} />
-													{displayOptions.showSSL && domain.ssl_valid_to && (
-														<DaysLeftBadge days={domain.ssl_days_until} label="ssl" />
-													)}
-													<Button
-														onClick={() => handleRefresh(domain.id)}
-														disabled={refreshMutation.isPending}
-														variant="outline"
-														size="sm"
-														className="h-8 px-2"
-													>
-														<RefreshCw className={`h-4 w-4 ${refreshMutation.isPending ? 'animate-spin' : ''}`} />
-													</Button>
+												<div className="min-w-0">
+													<div className="font-medium truncate hover:underline">{domain.domain_name}</div>
 												</div>
+											</Link>
+											<DropdownMenu>
+												<DropdownMenuTrigger asChild>
+													<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0">
+														<MoreHorizontal className="h-4 w-4" />
+													</Button>
+												</DropdownMenuTrigger>
+												<DropdownMenuContent align="end">
+													<DropdownMenuItem onClick={() => handleEdit(domain)}>Edit</DropdownMenuItem>
+													<DropdownMenuItem onClick={() => handleRefresh(domain.id)} disabled={refreshMutation.isPending}>
+														<RefreshCw className="mr-2 h-4 w-4" />
+														Refresh
+													</DropdownMenuItem>
+													<DropdownMenuItem onClick={() => handleDelete(domain.id)} className="text-destructive">
+														Delete
+													</DropdownMenuItem>
+												</DropdownMenuContent>
+											</DropdownMenu>
+										</div>
+
+										<div className="flex items-center gap-2">
+											{getStatusIcon(domain.status)}
+											<Badge className={getStatusBadgeColor(domain.status)}>
+												{getStatusLabel(domain.status)}
+											</Badge>
+										</div>
+
+										{displayOptions.showTags && domain.tags && domain.tags.length > 0 && (
+											<div className="flex flex-wrap gap-1">
+												{domain.tags.map((tag: string) => (
+													<span
+														key={tag}
+														className="inline-flex items-center gap-1 rounded-md bg-muted px-1.5 py-0.5 text-[10px] font-medium"
+													>
+														<Tag className="h-3 w-3" />
+														{tag}
+													</span>
+												))}
+											</div>
+										)}
+
+										<div className="grid gap-2 text-sm">
+											<div className="flex items-center justify-between">
+												{displayOptions.showExpiryDate && (
+													<span className="text-xs text-muted-foreground">{domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"}</span>
+												)}
+												{displayOptions.showRegistrar && (
+													<span className="text-xs text-muted-foreground truncate max-w-[120px]">{domain.registrar_name || "Unknown"}</span>
+												)}
+											</div>
+											<div className="flex gap-2">
+												<DaysLeftBadge days={domain.days_until_expiry} />
+												{displayOptions.showSSL && domain.ssl_valid_to && (
+													<DaysLeftBadge days={domain.ssl_days_until} label="ssl" />
+												)}
 											</div>
 										</div>
-									)
-								})}
+									</div>
+								))}
 							</div>
 						)}
 					</CardContent>

internal/site/src/components/monitors-table/monitors-table.tsx

@@ -70,8 +70,9 @@ import {
 } from "@/lib/monitors"
 import { cn, useBrowserStorage } from "@/lib/utils"
 import { AddMonitorDialog } from "./add-monitor-dialog"
+import { GroupedMonitorsTable } from "./grouped-monitors-table"
 import { Link } from "@/components/router"
-import ContainersTable from "../containers-table/containers-table"
+import { Network } from "lucide-react"
 
 // Status indicator component
 function StatusIndicator({ status }: { status: MonitorStatus }) {
@@ -186,7 +187,7 @@ function MonitorCard({
 						{getMonitorTypeLabel(monitor.type)}
 					</div>
 				</div>
-
+				
 				{/* Uptime - Prominent pill display */}
 				<div className="flex flex-col gap-2">
 					<div className="flex items-center gap-2 flex-wrap">
@@ -197,7 +198,7 @@ function MonitorCard({
 					</div>
 					<UptimeDots heartbeats={monitor.recent_heartbeats} />
 				</div>
-
+				
 				<div className="flex items-center justify-between text-sm">
 					<div className="text-xs text-muted-foreground">Response</div>
 					<div>
@@ -224,11 +225,6 @@ function MonitorCard({
 				</div>
 			)}
 
-			{/* Containers Section */}
-			<div className="pt-3 border-t">
-				<ContainersTable />
-			</div>
-
 			<div className="flex items-center gap-2 pt-2 border-t">
 				<TooltipProvider>
 					<Tooltip>
@@ -283,18 +279,18 @@ function MonitorCard({
 
 // Uptime pill badge component - big and visible
 function UptimePill({ uptime, label = "24h" }: { uptime: number; label?: string }) {
-	let colorClass = "bg-green-500 text-white border-green-500"
+	let colorClass = "bg-green-500/15 text-green-600 border-green-500/30"
 	let icon = <CheckCircleIcon className="h-3.5 w-3.5" />
-
+	
 	if (uptime < 99.9) {
-		colorClass = "bg-green-500 text-white border-green-500"
+		colorClass = "bg-green-500/15 text-green-600 border-green-500/30"
 	}
 	if (uptime < 95) {
-		colorClass = "bg-yellow-500 text-white border-yellow-500"
+		colorClass = "bg-yellow-500/15 text-yellow-600 border-yellow-500/30"
 		icon = <AlertTriangle className="h-3.5 w-3.5" />
 	}
 	if (uptime < 90) {
-		colorClass = "bg-red-500 text-white border-red-500"
+		colorClass = "bg-red-500/15 text-red-600 border-red-500/30"
 		icon = <XCircle className="h-3.5 w-3.5" />
 	}
 
@@ -302,7 +298,7 @@ function UptimePill({ uptime, label = "24h" }: { uptime: number; label?: string
 		<div className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full border-2 ${colorClass}`}>
 			{icon}
 			<span className="text-sm font-bold">{formatUptime(uptime)}</span>
-			<span className="text-[10px] font-medium uppercase opacity-90">{label}</span>
+			<span className="text-[10px] font-medium uppercase opacity-70">{label}</span>
 		</div>
 	)
 }
@@ -313,6 +309,10 @@ function UptimeBar({ stats }: { stats?: Record<string, number> }) {
 	const uptime7d = stats?.uptime_7d ?? 100
 	const uptime30d = stats?.uptime_30d ?? 100
 
+	let color = "bg-green-500"
+	if (uptime24h < 95) color = "bg-yellow-500"
+	if (uptime24h < 90) color = "bg-red-500"
+
 	return (
 		<div className="flex flex-col gap-1.5">
 			<div className="flex items-center gap-2">
@@ -532,7 +532,7 @@ function MonitorRow({
 	)
 }
 
-type ViewMode = "table" | "grid"
+type ViewMode = "table" | "grid" | "network"
 type StatusFilter = "all" | MonitorStatus
 type TypeFilter = "all" | MonitorType
 
@@ -745,6 +745,10 @@ export default memo(function MonitorsTable() {
 										<LayoutGridIcon className="size-4" />
 										<Trans>Grid</Trans>
 									</DropdownMenuRadioItem>
+									<DropdownMenuRadioItem value="network" className="gap-2">
+										<Network className="size-4" />
+										<Trans>Network (Grouped)</Trans>
+									</DropdownMenuRadioItem>
 								</DropdownMenuRadioGroup>
 								<DropdownMenuSeparator />
 
@@ -803,6 +807,8 @@ export default memo(function MonitorsTable() {
 							</div>
 						)}
 					</div>
+				) : viewMode === "network" ? (
+					<GroupedMonitorsTable />
 				) : viewMode === "table" ? (
 					<Table>
 						<TableHeader>

internal/site/src/components/systems-table/systems-table.tsx

@@ -51,7 +51,6 @@ import { $router, Link } from "../router"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../ui/card"
 import { SystemsTableColumns, ActionsButton, IndicatorDot } from "./systems-table-columns"
 import { AddSystemDialog } from "../add-system"
-import ContainersTable from "../containers-table/containers-table"
 
 type ViewMode = "table" | "grid"
 type StatusFilter = "all" | SystemRecord["status"]
@@ -513,9 +512,6 @@ const SystemCard = memo(
 								)
 							})}
 						</div>
-						<div className="mt-4 pt-4 border-t border-border/60">
-							<ContainersTable systemId={system.id} />
-						</div>
 					</CardContent>
 					<Link
 						href={getPagePath($router, "system", { id: row.original.id })}