From 502c6af1b80c17df6b7cdac686f5c0dcb4cb5254 Mon Sep 17 00:00:00 2001
From: byGalax <dennis@landmann.dev>
Date: Sat, 16 May 2026 16:49:16 +0200
Subject: [PATCH] feat(desktop): EmptyState primitive component

---
 apps/desktop/src/components/EmptyState.tsx | 32 ++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 apps/desktop/src/components/EmptyState.tsx

diff --git a/apps/desktop/src/components/EmptyState.tsx b/apps/desktop/src/components/EmptyState.tsx
new file mode 100644
index 0000000..a54e991
--- /dev/null
+++ b/apps/desktop/src/components/EmptyState.tsx
@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+
+interface Props {
+  icon: ReactNode;
+  title: string;
+  description: string;
+  action?: { label: string; onClick: () => void };
+}
+
+// Reusable empty-state placeholder: large icon + heading + description +
+// optional primary CTA. Used everywhere there's a meaningfully-empty list
+// (no chats, no friends, no search results, fresh conversation).
+export function EmptyState({ icon, title, description, action }: Props) {
+  return (
+    <div className="flex h-full flex-col items-center justify-center px-6 py-12 text-center">
+      <div className="mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-accent/10 text-accent">
+        {icon}
+      </div>
+      <h3 className="font-display text-lg font-semibold text-fg">{title}</h3>
+      <p className="mt-2 max-w-xs text-sm text-fg-muted">{description}</p>
+      {action && (
+        <button
+          type="button"
+          onClick={action.onClick}
+          className="mt-5 inline-flex cursor-pointer items-center justify-center rounded-lg bg-accent px-4 py-2 text-sm font-semibold text-accent-fg transition hover:brightness-110 focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
+        >
+          {action.label}
+        </button>
+      )}
+    </div>
+  );
+}