diff --git a/src/components/inbox/conversation-list.tsx b/src/components/inbox/conversation-list.tsx index dd4b585..69f51dd 100644 --- a/src/components/inbox/conversation-list.tsx +++ b/src/components/inbox/conversation-list.tsx @@ -36,8 +36,11 @@ const STATUS_COLORS: Record = { closed: "bg-muted-foreground", }; -const FILTER_OPTIONS: { label: string; value: ConversationStatus | "all" }[] = [ +type InboxFilter = ConversationStatus | "all" | "unread"; + +const FILTER_OPTIONS: { label: string; value: InboxFilter }[] = [ { label: "All", value: "all" }, + { label: "Unread", value: "unread" }, { label: "Open", value: "open" }, { label: "Pending", value: "pending" }, { label: "Closed", value: "closed" }, @@ -51,7 +54,7 @@ export function ConversationList({ resyncToken = 0, }: ConversationListProps) { const [search, setSearch] = useState(""); - const [filter, setFilter] = useState("all"); + const [filter, setFilter] = useState("all"); const [loading, setLoading] = useState(true); // Keep the latest callback in a ref so the fetch effect below can @@ -110,7 +113,9 @@ export function ConversationList({ const filtered = useMemo(() => { let result = conversations; - if (filter !== "all") { + if (filter === "unread") { + result = result.filter((c) => c.unread_count > 0); + } else if (filter !== "all") { result = result.filter((c) => c.status === filter); }