feat: add sidebar

web/src/components/PlatformsCard.tsx

@@ -0,0 +1,97 @@
+import { AlertTriangle, Radio, Wifi, WifiOff } from "lucide-react";
+import type { PlatformStatus } from "@/lib/api";
+import { isoTimeAgo } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { useI18n } from "@/i18n";
+
+export function PlatformsCard({ platforms }: PlatformsCardProps) {
+  const { t } = useI18n();
+  const platformStateBadge: Record<
+    string,
+    { variant: "success" | "warning" | "destructive"; label: string }
+  > = {
+    connected: { variant: "success", label: t.status.connected },
+    disconnected: { variant: "warning", label: t.status.disconnected },
+    fatal: { variant: "destructive", label: t.status.error },
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-2">
+          <Radio className="h-5 w-5 text-muted-foreground" />
+          <CardTitle className="text-base">
+            {t.status.connectedPlatforms}
+          </CardTitle>
+        </div>
+      </CardHeader>
+
+      <CardContent className="grid gap-3">
+        {platforms.map(([name, info]) => {
+          const display = platformStateBadge[info.state] ?? {
+            variant: "outline" as const,
+            label: info.state,
+          };
+          const IconComponent =
+            info.state === "connected"
+              ? Wifi
+              : info.state === "fatal"
+                ? AlertTriangle
+                : WifiOff;
+
+          return (
+            <div
+              key={name}
+              className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
+            >
+              <div className="flex items-center gap-3 min-w-0 w-full">
+                <IconComponent
+                  className={`h-4 w-4 shrink-0 ${
+                    info.state === "connected"
+                      ? "text-success"
+                      : info.state === "fatal"
+                        ? "text-destructive"
+                        : "text-warning"
+                  }`}
+                />
+
+                <div className="flex flex-col gap-0.5 min-w-0">
+                  <span className="text-sm font-medium capitalize truncate">
+                    {name}
+                  </span>
+
+                  {info.error_message && (
+                    <span className="text-xs text-destructive">
+                      {info.error_message}
+                    </span>
+                  )}
+
+                  {info.updated_at && (
+                    <span className="text-xs text-muted-foreground">
+                      {t.status.lastUpdate}: {isoTimeAgo(info.updated_at)}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              <Badge
+                variant={display.variant}
+                className="shrink-0 self-start sm:self-center"
+              >
+                {display.variant === "success" && (
+                  <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
+                )}
+                {display.label}
+              </Badge>
+            </div>
+          );
+        })}
+      </CardContent>
+    </Card>
+  );
+}
+
+interface PlatformsCardProps {
+  platforms: [string, PlatformStatus][];
+}