feat: unify alerts into one plugin, channels, rules and inbox

src/ui/sidebar/RailBadge.tsx

@@ -0,0 +1,30 @@
+/**
+ * The count a rail item shows on its icon. Each badge is its own component so
+ * the item's useBadge hook runs once per render of a stable element.
+ */
+export function RailBadge({
+  useBadge,
+  variant = "count",
+  className = "",
+}: {
+  useBadge: () => number | null | undefined;
+  variant?: "count" | "dot";
+  className?: string;
+}) {
+  const count = useBadge();
+  if (!count || count <= 0) return null;
+  if (variant === "dot") {
+    return (
+      <span
+        className={`absolute size-1.5 rounded-full bg-accent-brand ${className}`}
+      />
+    );
+  }
+  return (
+    <span
+      className={`absolute min-w-[14px] h-[14px] px-[3px] rounded-full bg-accent-brand text-[9px] font-bold leading-[14px] text-center text-white tabular-nums ${className}`}
+    >
+      {count > 99 ? "99+" : count}
+    </span>
+  );
+}