refactor(components): improve widget injection logic for prompt list

src/components/ads/ezoic-placeholder.tsx

@@ -42,8 +42,11 @@ export function EzoicPlaceholder({ id }: EzoicPlaceholderProps) {
   if (blocked) return null;
 
   return (
-    <div ref={containerRef} className="min-h-[250px]">
-      <div id={`ezoic-pub-ad-placeholder-${id}`} />
+    <div 
+      ref={containerRef} 
+      className="min-h-[250px] w-full border rounded-[var(--radius)] bg-muted/30 flex items-center justify-center"
+    >
+      <div id={`ezoic-pub-ad-placeholder-${id}`} className="w-full h-full" />
     </div>
   );
 }

src/components/prompts/infinite-prompt-list.tsx

@@ -60,9 +60,15 @@ export function InfinitePromptList({
   const [isLoading, setIsLoading] = useState(false);
   const [hasMore, setHasMore] = useState(initialPrompts.length < initialTotal);
   const [hasError, setHasError] = useState(false);
+  const [isMounted, setIsMounted] = useState(false);
   const loaderRef = useRef<HTMLDivElement>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
 
+  // Set mounted state after hydration
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
   // Reset when new data arrives from server
   useEffect(() => {
     // Cancel any in-flight request when filters change
@@ -187,7 +193,8 @@ export function InfinitePromptList({
   }
 
   // Inject widgets into the prompt list (widgets decide their own injection logic)
-  const itemsToRender = injectWidgets(prompts, { filters });
+  // Only inject after mount to prevent hydration mismatch
+  const itemsToRender = isMounted ? injectWidgets(prompts, { filters }) : prompts;
 
   return (
     <div className="space-y-4">

src/lib/plugins/widgets/index.ts

@@ -13,7 +13,7 @@ const widgetPlugins: WidgetPlugin[] = [
   bookWidget,
   textreamWidget,
   commandcodeWidget,
-  ...(process.env.EZOIC_ENABLED === "true" ? [ezoicWidget] : []),
+  ezoicWidget,
 ];
 
 /**