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-yellow-500/15 text-yellow-600 border-yellow-500/30"
-				: "bg-green-500 text-white border-green-600"
+				: "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,36 +552,20 @@ export default function DomainsTable() {
 							</div>
 						) : (
 							<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3">
-								{filteredDomains.map((domain) => {
+								{filteredDomains.map((domain) => (
-									const isExpired = domain.status === "expired"
+									<div key={domain.id} className="rounded-lg border bg-card p-4 space-y-3 hover:shadow-md transition-shadow">
-									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">
+											<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-8 w-8 shrink-0 rounded-lg bg-background p-1"
+														className="h-5 w-5 shrink-0"
 														onError={(e) => (e.currentTarget.style.display = "none")}
 													/>
 												)}
-													<div className="min-w-0 flex-1">
+												<div className="min-w-0">
-														<div className="font-semibold text-base truncate hover:underline">{domain.domain_name}</div>
+													<div className="font-medium 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>
@@ -615,7 +599,7 @@ export default function DomainsTable() {
 												{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"
+														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}
@@ -624,32 +608,24 @@ export default function DomainsTable() {
 											</div>
 										)}
 
-											<div className="space-y-3">
+										<div className="grid gap-2 text-sm">
+											<div className="flex items-center justify-between">
 												{displayOptions.showExpiryDate && (
-													<div className="flex items-center justify-between text-sm">
+													<span className="text-xs text-muted-foreground">{domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"}</span>
-														<span className="text-xs text-muted-foreground">Expiry</span>
-														<span className="font-medium">{domain.expiry_date ? formatDate(domain.expiry_date) : "Unknown"}</span>
-													</div>
 												)}
-												<div className="flex items-center justify-between gap-2">
+												{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" />
 												)}
-													<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>
 										</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 }) {
@@ -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 })}