feat(desktop): unify unread pills into one shared UnreadPill component (#1111)

Signed-off-by: Wes <wesbillman@users.noreply.github.com>
Co-authored-by: Brain <21994759fc7a6fa6b965551d35cfd7897d262f2495467f2d78694ddcfa6a5c7e@sprout-oss.stage.blox.sqprod.co>

desktop/src/shared/ui/UnreadPill.tsx

@@ -0,0 +1,37 @@
+import { ArrowDown, ArrowUp } from "lucide-react";
+
+import { Button } from "@/shared/ui/button";
+
+const UNREAD_PILL_CLASS =
+  "pointer-events-auto h-7 min-h-7 gap-1.5 rounded-full border-primary/40 bg-primary/10 px-2.5 text-2xs font-medium text-primary shadow-xs backdrop-blur-sm hover:bg-primary/20 [&_svg]:size-4";
+
+export function unreadCountLabel(count: number) {
+  return `${count} new message${count === 1 ? "" : "s"}`;
+}
+
+export function UnreadPill({
+  direction,
+  label,
+  onClick,
+  testId,
+}: {
+  direction: "up" | "down";
+  label: string;
+  onClick: () => void;
+  testId: string;
+}) {
+  const Arrow = direction === "up" ? ArrowUp : ArrowDown;
+  return (
+    <Button
+      className={UNREAD_PILL_CLASS}
+      data-testid={testId}
+      onClick={onClick}
+      size="sm"
+      type="button"
+      variant="outline"
+    >
+      <Arrow aria-hidden />
+      {label}
+    </Button>
+  );
+}