M6 dashboard: reconnect card list (#38)

* feat(dashboard): M6 reconnect card list

    - New `ReconnectCard` renders avatar, name, ring badge,
      and time-since-last-connected subtitle for each active
      reminder from `/api/dashboard/reconnect`.
    - Dashboard route now renders a `Reconnect` section under
      the stat cards: loading state, list of cards, or empty
      state with copy from design lock #21
      (`You're all caught up. / Check back tomorrow or add
      someone new.`).
    - Fix typo in `RingBadge` `acquaintances` variant
      (`bg-tieracquaintances-bg` was missing a hyphen, so
      acquaintance pills had no background).

    Piece 2 of 3 for M6 Dashboard. Next piece wires
    expand-to-log interactions (We connected / snooze pill row)
    onto each card.

* chore(deps): bump net-imap to 0.6.4

    Patches GHSA-hm49-wcqc-g2xg (command injection via raw
    arguments) and GHSA-75xq-5h9v-w6px (command injection via
    unvalidated Symbol inputs). Both surfaced in CI on the M6
    reconnect-card PR; bumping here to unblock that branch.

Author: bstruong

Gemfile.lock

@@ -158,7 +158,7 @@ GEM
       drb (~> 2.0)
       prism (~> 1.5)
     msgpack (1.8.0)
-    net-imap (0.6.3)
+    net-imap (0.6.4)
       date
       net-protocol
     net-pop (0.1.2)

client/src/components/ReconnectCard.tsx

@@ -0,0 +1,32 @@
+import { Avatar } from "./Avatar";
+import { RingBadge } from "./RingBadge";
+import { relativeDays } from "@/lib/time";
+import type { ReconnectReminder } from "@/api/dashboard";
+
+export function ReconnectCard({ reminder }: { reminder: ReconnectReminder }) {
+  const { person } = reminder;
+  const lastConnected = person.last_connected_at
+    ? relativeDays(person.last_connected_at)
+    : "Not yet connected";
+
+  return (
+    <article className="rounded-lg border bg-card">
+      <div className="grid grid-cols-[auto_1fr] gap-3 px-3.5 py-3">
+        <Avatar name={person.name} />
+        <div className="min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div className="min-w-0">
+              <p className="truncate text-name font-medium">{person.name}</p>
+              <p className="mt-0.5 text-label text-muted-foreground">
+                {lastConnected}
+              </p>
+            </div>
+            <div className="flex shrink-0 items-conter gap-1.5">
+              <RingBadge ring={person.ring} />
+            </div>
+          </div>
+        </div>
+      </div>
+    </article>
+  );
+}

client/src/components/RingBadge.tsx

@@ -13,7 +13,7 @@ const VARIANTS: Record<Ring, string> = {
   inner_circle: "bg-tier-inner-bg text-tier-inner-fg",
   network: "bg-tier-network-bg text-tier-network-fg",
   community: "bg-tier-community-bg text-tier-community-fg",
-  acquaintances: "bg-tieracquaintances-bg text-tier-acquaintances-fg",
+  acquaintances: "bg-tier-acquaintances-bg text-tier-acquaintances-fg",
 };
 
 export function RingBadge({

client/src/routes/dashboard.tsx

@@ -1,3 +1,4 @@
+import { Sparkles } from "lucide-react";
 import { useCurrentUser } from "@/auth/hooks";
 import {
   useReconnectReminders,
@@ -7,6 +8,8 @@ import {
 import { useDocumentTitle } from "@/lib/use-document-title";
 import { getGreeting } from "@/lib/greeting";
 import { StatCard } from "@/components/StatCard";
+import { ReconnectCard } from "@/components/ReconnectCard";
+import { EmptyState } from "@/components/EmptyState";
 
 function displayNameFromEmail(email: string | undefined): string {
   if (!email) return "";
@@ -43,6 +46,28 @@ export default function DashboardPage() {
         <StatCard label="Coming up soon" value={upcomingCount} />
         <StatCard label="In your cirle" value={peopleCount} />
       </div>
+
+      <section className="space-y-2.5">
+        <h2 className="text-label font-medium uppercase tracking-wider text-muted-foreground">
+          Reconnect
+        </h2>
+
+        {reconnectQuery.isPending ? (
+          <p className="text-meta text-muted-foreground">Loading...</p>
+        ) : reconnectQuery.data && reconnectQuery.data.length > 0 ? (
+          <div className="flex flex-col gap-2.5">
+            {reconnectQuery.data.map((reminder) => (
+              <ReconnectCard key={reminder.id} reminder={reminder} />
+            ))}
+          </div>
+        ) : (
+          <EmptyState
+            icon={Sparkles}
+            headline="You're all caught up."
+            subtext="Check back tomorrow or add someone new."
+          />
+        )}
+      </section>
     </div>
   );
 }