feat(rrule-display): display recurrence rule as a Badge instead of plain text

src/components/rrule-display.tsx

@@ -13,7 +13,9 @@ export function RRuleDisplay({ rrule, className }: RRuleDisplayProps) {
 
 	return (
 		<div className={className}>
-			<span className="text-sm text-muted-foreground">{humanText}</span>
+			<Badge variant="secondary" className="text-[10px] font-normal h-5">
+				{humanText}
+			</Badge>
 		</div>
 	);
 }