From 96f9a719fd02d5f21c2bd3753c4eb8afd36887c6 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 18 Feb 2026 09:17:10 +0300
Subject: [PATCH] fix: hide empty blocks in connection installation guide

Filter out blocks with no title, description, or buttons
instead of rendering empty cards/accordions/timeline items.
---
 src/components/connection/blocks/AccordionBlock.tsx |  8 +++++++-
 src/components/connection/blocks/CardsBlock.tsx     |  8 +++++++-
 src/components/connection/blocks/MinimalBlock.tsx   | 10 ++++++++--
 src/components/connection/blocks/TimelineBlock.tsx  | 10 ++++++++--
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/src/components/connection/blocks/AccordionBlock.tsx b/src/components/connection/blocks/AccordionBlock.tsx
index f0ee2d0..fd46c36 100644
--- a/src/components/connection/blocks/AccordionBlock.tsx
+++ b/src/components/connection/blocks/AccordionBlock.tsx
@@ -13,9 +13,15 @@ export function AccordionBlock({
 }: BlockRendererProps) {
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
+  const visibleBlocks = blocks.filter(
+    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+  );
+
+  if (!visibleBlocks.length) return null;
+
   return (
     <div className="space-y-2">
-      {blocks.map((block, index) => {
+      {visibleBlocks.map((block, index) => {
         const gradientStyle = getColorGradient(block.svgIconColor || 'cyan', isLight);
         const isOpen = openIndex === index;
 
diff --git a/src/components/connection/blocks/CardsBlock.tsx b/src/components/connection/blocks/CardsBlock.tsx
index 0c528d8..5ef48c5 100644
--- a/src/components/connection/blocks/CardsBlock.tsx
+++ b/src/components/connection/blocks/CardsBlock.tsx
@@ -10,9 +10,15 @@ export function CardsBlock({
   getSvgHtml,
   renderBlockButtons,
 }: BlockRendererProps) {
+  const visibleBlocks = blocks.filter(
+    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+  );
+
+  if (!visibleBlocks.length) return null;
+
   return (
     <div className="space-y-3">
-      {blocks.map((block, index) => {
+      {visibleBlocks.map((block, index) => {
         const gradientStyle = getColorGradient(block.svgIconColor || 'cyan', isLight);
 
         return (
diff --git a/src/components/connection/blocks/MinimalBlock.tsx b/src/components/connection/blocks/MinimalBlock.tsx
index ff2e5f5..e5abb99 100644
--- a/src/components/connection/blocks/MinimalBlock.tsx
+++ b/src/components/connection/blocks/MinimalBlock.tsx
@@ -10,11 +10,17 @@ export function MinimalBlock({
   getSvgHtml,
   renderBlockButtons,
 }: BlockRendererProps) {
+  const visibleBlocks = blocks.filter(
+    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+  );
+
+  if (!visibleBlocks.length) return null;
+
   return (
     <div>
-      {blocks.map((block, index) => {
+      {visibleBlocks.map((block, index) => {
         const gradientStyle = getColorGradient(block.svgIconColor || 'cyan', isLight);
-        const isLast = index === blocks.length - 1;
+        const isLast = index === visibleBlocks.length - 1;
 
         return (
           <div
diff --git a/src/components/connection/blocks/TimelineBlock.tsx b/src/components/connection/blocks/TimelineBlock.tsx
index 4fc626f..400469f 100644
--- a/src/components/connection/blocks/TimelineBlock.tsx
+++ b/src/components/connection/blocks/TimelineBlock.tsx
@@ -10,11 +10,17 @@ export function TimelineBlock({
   getSvgHtml,
   renderBlockButtons,
 }: BlockRendererProps) {
+  const visibleBlocks = blocks.filter(
+    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+  );
+
+  if (!visibleBlocks.length) return null;
+
   return (
     <div className="space-y-0">
-      {blocks.map((block, index) => {
+      {visibleBlocks.map((block, index) => {
         const gradientStyle = getColorGradientSolid(block.svgIconColor || 'cyan', isLight);
-        const isLast = index === blocks.length - 1;
+        const isLast = index === visibleBlocks.length - 1;
 
         return (
           <div key={index} className="flex gap-3 sm:gap-4">