feat: shared, more pleasing empty-state component across the app

Every "nothing here" page had its own copy-pasted dashed-border box — icon + one muted line, inconsistent (some had a CTA, some didn't, no description text anywhere). Replaced with one shared EmptyState component: icon in a soft tinted circle, a real heading plus optional description, and primary/secondary actions (either a Link or an arbitrary action slot for things like "New Collection" that open a dialog rather than navigate). Applied to: recipes (no recipes / no search match), favorites, feed (no one followed / no new posts / trending / for-you), collections (index + detail), shopping lists, pantry, notifications, can-cook. Left the small inline "no trending"/"no recent" lines inside Explore's already-labeled sections and the notification-bell dropdown alone — different context, a full empty-state box would be heavier than the space warrants. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-07-10 16:30:56 +02:00
parent e0d39c86ef
commit 8b749f432e
13 changed files with 163 additions and 70 deletions
@@ -0,0 +1,78 @@
+import type { ComponentType, ReactNode } from "react";
+import Link from "next/link";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type Action = {
+  label: string;
+  href: string;
+};
+
+/**
+ * Shared "nothing here yet" state — replaces the ad-hoc dashed-border boxes that used
+ * to be copy-pasted per page (icon + one line of muted text, inconsistent spacing,
+ * only some had a CTA). One consistent, warmer treatment: icon in a soft tinted
+ * circle, a real heading instead of just a muted caption, and an optional primary/
+ * secondary action.
+ */
+export function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  secondaryAction,
+  actionSlot,
+  compact = false,
+  className,
+}: {
+  icon: ComponentType<{ className?: string }>;
+  title: string;
+  description?: string;
+  action?: Action;
+  secondaryAction?: Action;
+  /** Arbitrary action element (e.g. a button that opens a dialog) instead of a plain Link. */
+  actionSlot?: ReactNode;
+  /** Smaller variant for empty states nested inside a section rather than a full page. */
+  compact?: boolean;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex flex-col items-center justify-center text-center rounded-2xl border border-border/60 bg-gradient-to-b from-muted/40 to-transparent",
+        compact ? "gap-2 px-6 py-10" : "gap-3 px-6 py-16",
+        className
+      )}
+    >
+      <div className={cn(
+        "flex items-center justify-center rounded-full bg-primary/10 text-primary",
+        compact ? "h-11 w-11" : "h-14 w-14"
+      )}>
+        <Icon className={compact ? "h-5 w-5" : "h-6 w-6"} />
+      </div>
+      <div className="space-y-1">
+        <p className={cn("font-semibold text-foreground", compact ? "text-sm" : "text-base")}>{title}</p>
+        {description && (
+          <p className={cn("text-muted-foreground max-w-sm text-balance", compact ? "text-xs" : "text-sm")}>
+            {description}
+          </p>
+        )}
+      </div>
+      {(action || secondaryAction || actionSlot) && (
+        <div className="flex items-center gap-2 mt-2">
+          {action && (
+            <Link href={action.href} className={cn(buttonVariants({ size: compact ? "sm" : "default" }))}>
+              {action.label}
+            </Link>
+          )}
+          {secondaryAction && (
+            <Link href={secondaryAction.href} className={cn(buttonVariants({ variant: "outline", size: compact ? "sm" : "default" }))}>
+              {secondaryAction.label}
+            </Link>
+          )}
+          {actionSlot}
+        </div>
+      )}
+    </div>
+  );
+}