Active sessions card

"use client";import { Button } from "@/components/ui/button";import {  Card,  CardContent,  CardDescription,  CardHeader,  CardTitle,} from "@/components/ui/card";import { trpc } from "@/lib/trpc";import { deviceLabel } from "./device-label";/** Human-readable timestamp; dates cross the tRPC boundary as ISO strings. */function formatWhen(value: string | Date): string {  return new Date(value).toLocaleString();}/** * An account-settings card listing every live session for the signed-in user, * composed over the user router's `listSessions` / `revokeSession` surface (the * same surface `features/auth/components/sessions-list.tsx` uses). The session * making this request is badged "This device" and has no revoke button — * signing out is the app shell's job, not a self-revoke here. Revoking any other * session invalidates the query so its row disappears without a manual reload. * The raw `User-Agent` is rendered through the pure `deviceLabel` helper. */export function ActiveSessionsCard() {  const utils = trpc.useUtils();  const sessions = trpc.user.listSessions.useQuery();  const revoke = trpc.user.revokeSession.useMutation({    // Router-level invalidation per GUIDELINES §4 (no measured hotspot here).    onSuccess: () => utils.user.invalidate(),  });  return (    <Card>      <CardHeader>        <CardTitle>Active sessions</CardTitle>        <CardDescription>          Devices currently signed in to your account. Revoke any you don&apos;t          recognise.        </CardDescription>      </CardHeader>      <CardContent>        {sessions.isPending ? (          <p className="text-sm text-muted-foreground">Loading sessions…</p>        ) : sessions.isError ? (          <p role="alert" className="text-sm text-destructive">            Could not load your sessions: {sessions.error.message}          </p>        ) : (          <ul className="flex flex-col gap-3">            {sessions.data.map((session) => (              <li                key={session.id}                className="flex items-center justify-between gap-4 rounded-md border px-4 py-3"              >                <div className="min-w-0 text-sm">                  <p className="truncate font-medium">                    {deviceLabel(session.userAgent)}                  </p>                  <p className="text-muted-foreground">                    {session.ipAddress ? `${session.ipAddress} · ` : ""}                    Signed in {formatWhen(session.createdAt)}                  </p>                </div>                {session.current ? (                  <span className="shrink-0 rounded-full bg-green-100 px-2.5 py-0.5 text-xs font-medium text-green-700 dark:bg-green-900/40 dark:text-green-400">                    This device                  </span>                ) : (                  <Button                    variant="secondary"                    className="h-9 shrink-0"                    onClick={() => revoke.mutate({ token: session.token })}                    disabled={revoke.isPending}                  >                    Revoke                  </Button>                )}              </li>            ))}            {revoke.isError && (              <p role="alert" className="text-sm text-destructive">                Could not revoke that session: {revoke.error.message}              </p>            )}          </ul>        )}      </CardContent>    </Card>  );}