@mdguggenbichler/slugbase-core 0.0.31 → 0.0.32

package/frontend/src/components/FilterChips.tsx

@@ -1,4 +1,5 @@
 import { X } from 'lucide-react';
+import { Badge } from './ui/badge';
 
 export interface FilterChipItem {
   key: string;
@@ -20,9 +21,10 @@ export function FilterChips({ chips, onRemove, onClearAll, clearAllLabel, clearA
   return (
     <div className="flex flex-wrap items-center gap-2">
       {chips.map(({ key, label, ariaLabel }) => (
-        <span
+        <Badge
           key={key}
-          className="inline-flex items-center gap-1.5 pl-2.5 pr-1.5 py-1 rounded-md bg-muted text-muted-foreground text-sm border border-border"
+          variant="secondary"
+          className="inline-flex items-center gap-1.5 pl-2.5 pr-1 py-1 text-sm font-normal"
         >
           <span>{label}</span>
           <button
@@ -39,7 +41,7 @@ export function FilterChips({ chips, onRemove, onClearAll, clearAllLabel, clearA
           >
             <X className="h-3.5 w-3.5" />
           </button>
-        </span>
+        </Badge>
       ))}
       <button
         type="button"

package/frontend/src/components/StatCard.tsx

@@ -3,6 +3,18 @@ import { LucideIcon } from 'lucide-react';
 import { Card, CardContent } from './ui/card';
 import { cn } from '@/lib/utils';
 
+/** Optional usage display for plan/limit (e.g. slugbase-cloud). Only rendered when used + limit are both set. */
+export interface StatCardUsageProps {
+  used: number;
+  limit: number;
+  /** e.g. "Bookmarks used" */
+  labelOverride?: string;
+  showProgress?: boolean;
+  progressVariant?: 'normal' | 'warning' | 'danger';
+  /** Upgrade CTA; only pass in cloud when plan limits apply */
+  cta?: { label: string; onClick: () => void };
+}
+
 interface StatCardProps {
   label: string;
   value: string | number;
@@ -15,21 +27,86 @@ interface StatCardProps {
   /** Tailwind classes for the icon color (e.g. text-blue-600 dark:text-blue-400) */
   iconColorClassName?: string;
   className?: string;
+  /** Optional secondary line below value (e.g. "+12 this week") */
+  secondaryLine?: string;
+  /** Optional usage/limit display for cloud plan; only shown when both used and limit are provided */
+  used?: number;
+  limit?: number;
+  labelOverride?: string;
+  showProgress?: boolean;
+  progressVariant?: 'normal' | 'warning' | 'danger';
+  cta?: { label: string; onClick: () => void };
 }
 
-export function StatCard({ label, value, icon: Icon, href, dense, iconContainerClassName, iconColorClassName, className }: StatCardProps) {
+export function StatCard({
+  label,
+  value,
+  icon: Icon,
+  href,
+  dense,
+  iconContainerClassName,
+  iconColorClassName,
+  className,
+  secondaryLine,
+  used: usedProp,
+  limit: limitProp,
+  labelOverride,
+  showProgress = true,
+  progressVariant = 'normal',
+  cta,
+}: StatCardProps) {
+  const hasUsage = usedProp != null && limitProp != null;
+  const used = hasUsage ? usedProp : 0;
+  const limit = hasUsage ? limitProp : 0;
+  const showProgressBar = hasUsage && showProgress;
+  const progressPercent = limit > 0 ? Math.min(100, (used / limit) * 100) : 0;
+
   const content = (
     <>
       <div className="flex items-center justify-between">
-        <div>
-          <p className={cn('font-medium text-muted-foreground', dense ? 'text-xs' : 'text-sm')}>
+        <div className="min-w-0 flex-1">
+          <p className={cn('text-muted-foreground', dense ? 'text-xs' : 'text-sm')}>
             {label}
           </p>
-          <p className={cn('font-semibold mt-2', dense ? 'text-xl' : 'text-2xl')}>
+          <p className={cn('font-semibold mt-1 text-foreground', dense ? 'text-xl' : 'text-2xl')}>
             {value}
           </p>
+          {secondaryLine && (
+            <p className="mt-0.5 text-xs text-muted-foreground">{secondaryLine}</p>
+          )}
+          {hasUsage && (
+            <p className="mt-1 text-xs text-muted-foreground">
+              {labelOverride ?? label} {used} / {limit}
+            </p>
+          )}
+          {showProgressBar && (
+            <div className="mt-2 w-full overflow-hidden rounded-full bg-primary/20">
+              <div
+                className={cn(
+                  'h-2 transition-all',
+                  progressVariant === 'warning' && 'bg-amber-500',
+                  progressVariant === 'danger' && 'bg-destructive',
+                  (progressVariant === 'normal' || !progressVariant) && 'bg-primary'
+                )}
+                style={{ width: `${progressPercent}%` }}
+              />
+            </div>
+          )}
+          {cta && (
+            <button
+              type="button"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                cta.onClick();
+              }}
+              className="mt-2 text-xs font-medium text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded"
+            >
+              {cta.label}
+            </button>
+          )}
         </div>
-        <div className={cn('rounded-lg', iconContainerClassName ?? 'bg-muted', dense ? 'p-2' : 'p-3')}>
+        <div className={cn('shrink-0 rounded-lg', iconContainerClassName ?? 'bg-muted', dense ? 'p-2' : 'p-3')}>
           <Icon className={cn(iconColorClassName ?? 'text-muted-foreground', dense ? 'h-5 w-5' : 'h-6 w-6')} />
         </div>
       </div>