Update uptime route and dependencies for improved functionality

app/routes/uptime.tsx

@@ -12,6 +12,7 @@ import { Separator } from "~/components/ui/separator";
 import { Alert, AlertDescription } from "~/components/ui/alert";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "~/components/ui/dialog";
 import { Avatar, AvatarFallback } from "~/components/ui/avatar";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip";
 import { Plus, LogOut, Pencil, Trash2, Activity, Clock, TrendingUp, AlertCircle } from "lucide-react";
 import { ThemeToggle } from "~/components/theme-toggle";
 
@@ -143,7 +144,7 @@ export function meta({}: Route.MetaArgs) {
 export default function Uptime({ loaderData, actionData }: Route.ComponentProps) {
   const { stats, user } = loaderData;
   const revalidator = useRevalidator();
-  const [showAddForm, setShowAddForm] = useState(false);
+  const [showAddDialog, setShowAddDialog] = useState(false);
   const [editingMonitor, setEditingMonitor] = useState<UptimeStats | null>(null);
   const [deletingMonitor, setDeletingMonitor] = useState<string | null>(null);
 
@@ -159,7 +160,7 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
   // Close forms on successful action
   useEffect(() => {
     if (actionData?.success) {
-      setShowAddForm(false);
+      setShowAddDialog(false);
       setEditingMonitor(null);
       setDeletingMonitor(null);
       revalidator.revalidate();
@@ -167,8 +168,9 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
   }, [actionData, revalidator]);
 
   return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto px-4 py-8 max-w-7xl">
+    <TooltipProvider>
+      <div className="min-h-screen bg-background">
+        <div className="container mx-auto px-4 py-8 max-w-7xl">
         {/* Header */}
         <header className="mb-8 flex items-center justify-between">
           <div>
@@ -200,73 +202,12 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
 
         {/* Add Monitor Button */}
         <div className="mb-6">
-          <Button onClick={() => setShowAddForm(!showAddForm)}>
+          <Button onClick={() => setShowAddDialog(true)}>
             <Plus className="h-4 w-4 mr-2" />
-            {showAddForm ? "Cancel" : "Add New Monitor"}
+            Add New Monitor
           </Button>
         </div>
 
-        {/* Add Monitor Form */}
-        {showAddForm && (
-          <Card className="mb-6">
-            <CardHeader>
-              <CardTitle>Add New Monitor</CardTitle>
-              <CardDescription>
-                Start monitoring a new service endpoint
-              </CardDescription>
-            </CardHeader>
-            <CardContent>
-              {actionData?.error && (
-                <Alert variant="destructive" className="mb-4">
-                  <AlertCircle className="h-4 w-4" />
-                  <AlertDescription>{actionData.error}</AlertDescription>
-                </Alert>
-              )}
-              <Form method="post" className="space-y-4">
-                <input type="hidden" name="intent" value="create" />
-
-                <div className="space-y-2">
-                  <Label htmlFor="url">URL to Monitor</Label>
-                  <Input
-                    id="url"
-                    type="url"
-                    name="url"
-                    required
-                    placeholder="https://example.com"
-                  />
-                </div>
-
-                <div className="space-y-2">
-                  <Label htmlFor="interval">Check Interval (seconds)</Label>
-                  <Input
-                    id="interval"
-                    type="number"
-                    name="interval"
-                    required
-                    min="10"
-                    defaultValue="30"
-                    placeholder="30"
-                  />
-                  <p className="text-xs text-muted-foreground">
-                    Minimum 10 seconds
-                  </p>
-                </div>
-
-                <div className="flex gap-3">
-                  <Button type="submit">Create Monitor</Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    onClick={() => setShowAddForm(false)}
-                  >
-                    Cancel
-                  </Button>
-                </div>
-              </Form>
-            </CardContent>
-          </Card>
-        )}
-
         {stats.length === 0 ? (
           <Card>
             <CardContent className="pt-6 text-center py-12">
@@ -386,17 +327,26 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
                             .slice(-20)
                             .reverse()
                             .map((check, idx: number) => (
-                              <div
-                                key={idx}
-                                className={`w-3 h-16 rounded ${
-                                  check.status === "up"
-                                    ? "bg-green-500"
-                                    : "bg-red-500"
-                                }`}
-                                title={`${new Date(check.timestamp).toLocaleString()} - ${
-                                  check.status
-                                } (${check.responseTime}ms)`}
-                              />
+                              <Tooltip key={idx}>
+                                <TooltipTrigger asChild>
+                                  <div
+                                    className={`w-3 h-16 rounded cursor-pointer transition-opacity hover:opacity-80 ${
+                                      check.status === "up"
+                                        ? "bg-green-500"
+                                        : "bg-red-500"
+                                    }`}
+                                  />
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  <div className="space-y-1">
+                                    <p className="font-semibold">{check.status === "up" ? "Online" : "Offline"}</p>
+                                    <p>{new Date(check.timestamp).toLocaleString()}</p>
+                                    {check.responseTime && <p>Response: {check.responseTime}ms</p>}
+                                    {check.statusCode && <p>Status Code: {check.statusCode}</p>}
+                                    {check.error && <p className="text-red-300">Error: {check.error}</p>}
+                                  </div>
+                                </TooltipContent>
+                              </Tooltip>
                             ))}
                         </div>
                       </div>
@@ -408,6 +358,61 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
           </div>
         )}
 
+        {/* Add Monitor Modal */}
+        <Dialog open={showAddDialog} onOpenChange={setShowAddDialog}>
+          <DialogContent>
+            <DialogHeader>
+              <DialogTitle>Add New Monitor</DialogTitle>
+              <DialogDescription>
+                Start monitoring a new service endpoint
+              </DialogDescription>
+            </DialogHeader>
+            {actionData?.error && (
+              <Alert variant="destructive">
+                <AlertCircle className="h-4 w-4" />
+                <AlertDescription>{actionData.error}</AlertDescription>
+              </Alert>
+            )}
+            <Form method="post" className="space-y-4">
+              <input type="hidden" name="intent" value="create" />
+
+              <div className="space-y-2">
+                <Label htmlFor="url">URL to Monitor</Label>
+                <Input
+                  id="url"
+                  type="url"
+                  name="url"
+                  required
+                  placeholder="https://example.com"
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label htmlFor="interval">Check Interval (seconds)</Label>
+                <Input
+                  id="interval"
+                  type="number"
+                  name="interval"
+                  required
+                  min="10"
+                  defaultValue="30"
+                  placeholder="30"
+                />
+                <p className="text-xs text-muted-foreground">
+                  Minimum 10 seconds
+                </p>
+              </div>
+
+              <DialogFooter>
+                <Button type="button" variant="outline" onClick={() => setShowAddDialog(false)}>
+                  Cancel
+                </Button>
+                <Button type="submit">Create Monitor</Button>
+              </DialogFooter>
+            </Form>
+          </DialogContent>
+        </Dialog>
+
         {/* Edit Monitor Modal */}
         <Dialog open={!!editingMonitor} onOpenChange={() => setEditingMonitor(null)}>
           <DialogContent>
@@ -502,5 +507,6 @@ export default function Uptime({ loaderData, actionData }: Route.ComponentProps)
         </footer>
       </div>
     </div>
+    </TooltipProvider>
   );
 }

package-lock.json

@@ -13,6 +13,7 @@
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-separator": "^1.1.7",
         "@radix-ui/react-slot": "^1.2.3",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@react-router/node": "^7.9.2",
         "@react-router/serve": "^7.9.2",
         "class-variance-authority": "^0.7.1",
@@ -1573,6 +1574,44 @@
         "node": ">=18"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.3.tgz",
+      "integrity": "sha512-sGnvb5dmrJaKEZ+LDIpguvdX3bDlEllmv4/ClQ9awcmCZrlx5jQyyMWFM5kBI+EyNOCDDiKk8il0zeuX3Zlg/w==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.7.4",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.4.tgz",
+      "integrity": "sha512-OOchDgh4F2CchOX94cRVqhvy7b3AFb+/rQXyswmzmGakRfkMgoWVjfnLWkRirfLEfuD4ysVW16eXzwt3jHIzKA==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/core": "^1.7.3",
+        "@floating-ui/utils": "^0.2.10"
+      }
+    },
+    "node_modules/@floating-ui/react-dom": {
+      "version": "2.1.6",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.6.tgz",
+      "integrity": "sha512-4JX6rEatQEvlmgU80wZyq9RT96HZJa88q8hp0pBd+LrczeDI4o6uA2M+uvxngVHo4Ihr8uibXxH6+70zhAFrVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/dom": "^1.7.4"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.10",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.10.tgz",
+      "integrity": "sha512-aGTxbpbg8/b5JfU1HXSrbH3wXZuLPJcNEcZQFMxLs3oSzgtVu6nFPkbbGGUvBcUjKV2YyB9Wxxabo+HEH9tcRQ==",
+      "license": "MIT"
+    },
     "node_modules/@inquirer/ansi": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@inquirer/ansi/-/ansi-1.0.1.tgz",
@@ -3132,6 +3171,29 @@
       "integrity": "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg==",
       "license": "MIT"
     },
+    "node_modules/@radix-ui/react-arrow": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.1.7.tgz",
+      "integrity": "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-avatar": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.10.tgz",
@@ -3310,6 +3372,38 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-popper": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.8.tgz",
+      "integrity": "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw==",
+      "license": "MIT",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.0.0",
+        "@radix-ui/react-arrow": "1.1.7",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-use-callback-ref": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.1",
+        "@radix-ui/react-use-rect": "1.1.1",
+        "@radix-ui/react-use-size": "1.1.1",
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-portal": {
       "version": "1.1.9",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.9.tgz",
@@ -3422,6 +3516,40 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-tooltip": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.2.8.tgz",
+      "integrity": "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.3",
+        "@radix-ui/react-compose-refs": "1.1.2",
+        "@radix-ui/react-context": "1.1.2",
+        "@radix-ui/react-dismissable-layer": "1.1.11",
+        "@radix-ui/react-id": "1.1.1",
+        "@radix-ui/react-popper": "1.2.8",
+        "@radix-ui/react-portal": "1.1.9",
+        "@radix-ui/react-presence": "1.1.5",
+        "@radix-ui/react-primitive": "2.1.3",
+        "@radix-ui/react-slot": "1.2.3",
+        "@radix-ui/react-use-controllable-state": "1.2.2",
+        "@radix-ui/react-visually-hidden": "1.2.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-use-callback-ref": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.1.tgz",
@@ -3525,6 +3653,71 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-use-rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.1.1.tgz",
+      "integrity": "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/rect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-use-size": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.1.1.tgz",
+      "integrity": "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-use-layout-effect": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-visually-hidden": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.2.3.tgz",
+      "integrity": "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/rect": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.1.1.tgz",
+      "integrity": "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw==",
+      "license": "MIT"
+    },
     "node_modules/@react-router/dev": {
       "version": "7.9.4",
       "resolved": "https://registry.npmjs.org/@react-router/dev/-/dev-7.9.4.tgz",

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@react-router/node": "^7.9.2",
     "@react-router/serve": "^7.9.2",
     "class-variance-authority": "^0.7.1",