From 4e3fcd7252b15b97583a6be6824bc59435a50515 Mon Sep 17 00:00:00 2001
From: Andras Schmelczer <andras@schmelczer.dev>
Date: Sat, 7 Feb 2026 10:12:52 +0000
Subject: [PATCH] Unify empty state

---
 frontend/src/components/AreaPane.tsx       | 11 ++++++--
 frontend/src/components/Filters.tsx        |  2 ++
 frontend/src/components/PropertiesPane.tsx | 12 +++++++--
 frontend/src/components/ui/EmptyState.tsx  | 30 ++++++++++------------
 4 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/AreaPane.tsx b/frontend/src/components/AreaPane.tsx
index 1fcd4a0..22f96b6 100644
--- a/frontend/src/components/AreaPane.tsx
+++ b/frontend/src/components/AreaPane.tsx
@@ -12,7 +12,7 @@ import ExternalSearchLinks from './ExternalSearchLinks';
 import { InfoIcon, CloseIcon } from './ui/Icons';
 import { IconButton } from './ui/IconButton';
 import { FeatureInfoPopup } from './FeatureInfoPopup';
-import { PaneEmptyState } from './ui/EmptyState';
+import { EmptyState } from './ui/EmptyState';
 
 interface AreaPaneProps {
   stats: HexagonStatsResponse | null;
@@ -62,7 +62,14 @@ export default function AreaPane({
   );
 
   if (!hexagonId) {
-    return <PaneEmptyState message="Click a hexagon or postcode to view area statistics" />;
+    return (
+      <EmptyState
+        icon={<InfoIcon className="w-8 h-8 text-warm-300 dark:text-warm-600" />}
+        title="No area selected"
+        description="Click a hexagon or postcode to view area statistics"
+        centered
+      />
+    );
   }
 
   return (
diff --git a/frontend/src/components/Filters.tsx b/frontend/src/components/Filters.tsx
index 2c458b2..3fb6df8 100644
--- a/frontend/src/components/Filters.tsx
+++ b/frontend/src/components/Filters.tsx
@@ -113,7 +113,9 @@ function FeatureBrowser({
         ))}
         {grouped.length === 0 && (
           <EmptyState
+            icon={<FilterIcon className="w-8 h-8 text-warm-300 dark:text-warm-600" />}
             title={search ? 'No matching features' : 'All features are active'}
+            description={search ? 'Try a different search term' : 'Remove a filter to see available features'}
             className="px-3 py-4"
           />
         )}
diff --git a/frontend/src/components/PropertiesPane.tsx b/frontend/src/components/PropertiesPane.tsx
index 051fe4c..04a2a8e 100644
--- a/frontend/src/components/PropertiesPane.tsx
+++ b/frontend/src/components/PropertiesPane.tsx
@@ -5,7 +5,8 @@ import { getNum } from '../lib/property-fields';
 import InfoPopup from './InfoPopup';
 import { SearchInput } from './ui/SearchInput';
 import { PaneHeader } from './ui/PaneHeader';
-import { PaneEmptyState } from './ui/EmptyState';
+import { EmptyState } from './ui/EmptyState';
+import { InfoIcon } from './ui/Icons';
 
 interface PropertiesPaneProps {
   properties: Property[];
@@ -54,7 +55,14 @@ export function PropertiesPane({
   }, [properties, sortBy, search]);
 
   if (!hexagonId) {
-    return <PaneEmptyState message="Click a hexagon to view properties" />;
+    return (
+      <EmptyState
+        icon={<InfoIcon className="w-8 h-8 text-warm-300 dark:text-warm-600" />}
+        title="No area selected"
+        description="Click a hexagon or postcode to view area statistics"
+        centered
+      />
+    );
   }
 
   return (
diff --git a/frontend/src/components/ui/EmptyState.tsx b/frontend/src/components/ui/EmptyState.tsx
index 9562337..3eed56f 100644
--- a/frontend/src/components/ui/EmptyState.tsx
+++ b/frontend/src/components/ui/EmptyState.tsx
@@ -1,31 +1,27 @@
 import type { ReactNode } from 'react';
 
 interface EmptyStateProps {
-  icon?: ReactNode;
+  icon: ReactNode;
   title: string;
-  description?: string;
+  description: string;
+  centered?: boolean;
   className?: string;
 }
 
-export function EmptyState({ icon, title, description, className = '' }: EmptyStateProps) {
+export function EmptyState({
+  icon,
+  title,
+  description,
+  centered = false,
+  className = '',
+}: EmptyStateProps) {
   return (
     <div
-      className={`flex flex-col items-center justify-center py-8 text-center ${className}`}
+      className={`flex flex-col items-center justify-center text-center ${centered ? 'h-full px-4' : 'py-8'} ${className}`}
     >
-      {icon && <div className="mb-2">{icon}</div>}
+      <div className="mb-2">{icon}</div>
       <span className="text-sm font-medium text-warm-400 dark:text-warm-500">{title}</span>
-      {description && (
-        <span className="text-xs text-warm-400 dark:text-warm-500 mt-1">{description}</span>
-      )}
-    </div>
-  );
-}
-
-// Centered message variant for panes
-export function PaneEmptyState({ message }: { message: string }) {
-  return (
-    <div className="flex items-center justify-center h-full text-warm-500 dark:text-warm-400 px-4 text-center text-sm">
-      {message}
+      <span className="text-xs text-warm-400 dark:text-warm-500 mt-1">{description}</span>
     </div>
   );
 }