ConversationList (conversation-list.tsx)

Displays a filterable, searchable list of message conversations with selection, pinning, read/unread status, and bulk actions like archive, delete, and search.

"use client";

import * as React from "react";
import { Archive, Check, Mail, Pin, Search, Trash2, X } from "lucide-react";

import { cn } from "@/lib/utils";
import { GradientAvatar } from "@/components/ui/gradient-avatar";
import {
  useMessages,
  useMessagesActions,
  type Conversation,
  type ConversationFlag,
} from "@/lib/comms-store";

type Filter = "all" | "unread" | "starred";
const FILTERS: { key: Filter; label: string }[] = [
  { key: "all", label: "All" },
  { key: "unread", label: "Unread" },
  { key: "starred", label: "Pinned" },
];

function formatRelative(at: number, now: number): string {
  const s = Math.max(0, Math.round((now - at) / 1000));
  if (s < 60) return "now";
  const m = Math.round(s / 60);
  if (m < 60) return `${m}m`;
  const h = Math.round(m / 60);
  if (h 

... (truncated -- full source via MCP)