fix(connection): Happ TV connect renders through the active block style (all 4)

The TV quick-connect was rendered as standalone cards inserted between two
sliced block lists, which broke the panel's chosen style (e.g. split the
timeline rail) and dropped a step. Now it renders THROUGH the active renderer:

- Blocks gain an optional customNode; every renderer (cards/timeline/accordion/
  minimal) drops it into the block body, so it inherits that exact style.
- InstallationGuide renders the FULL block list in the active style and injects
  the TV connect widget as customNode on the "add subscription" step (no more
  slicing / dropped steps) — only for the Happ Android TV app.
- TvQuickConnect is now content-only (no one-off cards/titles); the block step is
  the wrapper. Buttons already use the shared blockButtonClass.

src/components/connection/InstallationGuide.tsx

@@ -10,7 +10,7 @@ import type {
 } from '@/types';
 import { useTheme } from '@/hooks/useTheme';
 import { CardsBlock, TimelineBlock, AccordionBlock, MinimalBlock, BlockButtons } from './blocks';
-import type { BlockRendererProps } from './blocks';
+import type { BlockRendererProps, RenderBlock } from './blocks';
 import TvQuickConnect from './TvQuickConnect';
 import { BackIcon, BookOpenIcon, ChevronIcon } from '@/components/icons';
 
@@ -194,6 +194,21 @@ export default function InstallationGuide({
   const blockType = appConfig.uiConfig?.installationGuidesBlockType || 'cards';
   const Renderer = RENDERERS[blockType] || CardsBlock;
 
+  // For the Happ Android TV app, inject the TV connect widget into a step as
+  // customNode so it renders THROUGH the active block style (cards/timeline/
+  // accordion/minimal) instead of as separate clashing cards that break it.
+  const showTvConnect = Boolean(
+    selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl,
+  );
+  let renderBlocks: RenderBlock[] = selectedApp?.blocks ?? [];
+  if (selectedApp && showTvConnect && appConfig.subscriptionUrl) {
+    // install → add-subscription → connect: attach to the add step (index 1);
+    // fall back to the last block for shorter configs.
+    const idx = selectedApp.blocks.length >= 3 ? 1 : Math.max(0, selectedApp.blocks.length - 1);
+    const widget = <TvQuickConnect subscriptionUrl={appConfig.subscriptionUrl} isLight={isLight} />;
+    renderBlocks = selectedApp.blocks.map((b, i) => (i === idx ? { ...b, customNode: widget } : b));
+  }
+
   return (
     <div className="space-y-6 pb-6">
       {/* Header + platform dropdown */}
@@ -321,42 +336,19 @@ export default function InstallationGuide({
         </a>
       )}
 
-      {/* Blocks — for the Happ TV app: first block, Quick Connect, last block.
+      {/* Blocks rendered in the panel's active style. For the Happ Android TV
-          Other apps (or non-TV) render their blocks normally. */}
+          app the TV connect widget is injected into a step (customNode), so it
-      {selectedApp && isAndroidTvLayout && isHappApp(selectedApp) && appConfig.subscriptionUrl ? (
+          adapts to that style instead of breaking it. */}
-        <>
+      {selectedApp && (
-          {selectedApp.blocks.length > 0 && (
-            <Renderer
-              blocks={selectedApp.blocks.slice(0, 1)}
-              isMobile={isMobile}
-              isLight={isLight}
-              getLocalizedText={getLocalizedText}
-              getSvgHtml={getSvgHtml}
-              renderBlockButtons={renderBlockButtons}
-            />
-          )}
-          <TvQuickConnect subscriptionUrl={appConfig.subscriptionUrl} isLight={isLight} />
-          {selectedApp.blocks.length > 1 && (
-            <Renderer
-              blocks={selectedApp.blocks.slice(-1)}
-              isMobile={isMobile}
-              isLight={isLight}
-              getLocalizedText={getLocalizedText}
-              getSvgHtml={getSvgHtml}
-              renderBlockButtons={renderBlockButtons}
-            />
-          )}
-        </>
-      ) : selectedApp ? (
         <Renderer
-          blocks={selectedApp.blocks}
+          blocks={renderBlocks}
           isMobile={isMobile}
           isLight={isLight}
           getLocalizedText={getLocalizedText}
           getSvgHtml={getSvgHtml}
           renderBlockButtons={renderBlockButtons}
         />
-      ) : null}
+      )}
     </div>
   );
 }

src/components/connection/TvQuickConnect.tsx

@@ -191,10 +191,6 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
     }
   }, [tgNative, sendToTV, showToast, onScanDecoded, t]);
 
-  const cardClass = isLight
-    ? 'rounded-2xl border border-dark-700/60 bg-white/80 shadow-sm p-4 sm:p-5'
-    : 'rounded-2xl border border-dark-700/50 bg-dark-800/50 p-4 sm:p-5';
-
   const inputClass = isLight
     ? 'w-full rounded-xl border border-dark-700/60 bg-white px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500'
     : 'w-full rounded-xl border border-dark-700 bg-dark-900/50 px-4 py-3 text-center text-2xl font-bold tracking-[0.3em] uppercase text-dark-100 outline-none focus:border-accent-500 focus:ring-1 focus:ring-accent-500';
@@ -204,66 +200,46 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
   const actionBtnClass = `${blockButtonClass('light', isLight)} flex w-full items-center justify-center`;
 
   return (
-    <div className="space-y-3">
+    <div className="mt-3 space-y-4">
-      {/* Code input */}
+      {/* Code import — the block step (timeline/cards/accordion/minimal) is the
-      <div className={cardClass}>
+          wrapper; here we only render the interactive controls so the widget
-        <div className="flex items-start gap-3">
+          inherits whatever style the panel config produced. */}
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500/20 to-accent-600/10">
+      <div className="space-y-2">
-            <svg
+        <p className="text-sm font-medium text-dark-200">
-              className="h-5 w-5 text-accent-500"
+          {t('subscription.tvQuickConnect.title')}
-              fill="none"
+        </p>
-              viewBox="0 0 24 24"
+        <input
-              stroke="currentColor"
+          type="text"
-              strokeWidth={1.5}
+          maxLength={5}
-            >
+          value={code}
-              <path
+          onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''))}
-                strokeLinecap="round"
+          placeholder="12345"
-                strokeLinejoin="round"
+          autoComplete="one-time-code"
-                d="M6 20.25h12m-7.5-3v3m3-3v3m-10.125-3h17.25c.621 0 1.125-.504 1.125-1.125V4.875c0-.621-.504-1.125-1.125-1.125H3.375c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125z"
+          inputMode="numeric"
-              />
+          className={inputClass}
-            </svg>
+        />
-          </div>
+        <button
-          <div className="min-w-0 flex-1">
+          onClick={() => sendToTV(code)}
-            <h3 className="font-semibold text-dark-100">
+          disabled={sending || code.length !== 5}
-              {t('subscription.tvQuickConnect.title')}
+          className={`${actionBtnClass} disabled:opacity-50`}
-            </h3>
+        >
-            <p className="mt-1 text-sm text-dark-400">
+          {sending ? (
-              {t('subscription.tvQuickConnect.description')}
+            <div className="h-5 w-5 animate-spin rounded-full border-2 border-accent-500/30 border-t-accent-500" />
-            </p>
+          ) : (
-
+            t('subscription.tvQuickConnect.sendBtn')
-            <div className="mt-3 space-y-2">
+          )}
-              <input
+        </button>
-                type="text"
-                maxLength={5}
-                value={code}
-                onChange={(e) => setCode(e.target.value.toUpperCase().replace(/[^A-Z0-9]/g, ''))}
-                placeholder="12345"
-                autoComplete="one-time-code"
-                inputMode="numeric"
-                className={inputClass}
-              />
-              <button
-                onClick={() => sendToTV(code)}
-                disabled={sending || code.length !== 5}
-                className={`${actionBtnClass} disabled:opacity-50`}
-              >
-                {sending ? (
-                  <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/30 border-t-white" />
-                ) : (
-                  t('subscription.tvQuickConnect.sendBtn')
-                )}
-              </button>
-            </div>
-          </div>
-        </div>
       </div>
 
-      {/* QR Scanner */}
+      {/* QR scan */}
-      <div className={cardClass}>
+      <div className="space-y-2">
-        <div className="flex items-start gap-3">
+        <p className="text-sm font-medium text-dark-200">
-          <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-gradient-to-br from-accent-500/20 to-accent-600/10">
+          {t('subscription.tvQuickConnect.scanTitle')}
+        </p>
+        {!scanning && (
+          <button onClick={startScan} className={actionBtnClass}>
             <svg
-              className="h-5 w-5 text-accent-500"
+              className="mr-2 h-5 w-5"
               fill="none"
               viewBox="0 0 24 24"
               stroke="currentColor"
@@ -280,47 +256,16 @@ export default function TvQuickConnect({ subscriptionUrl, isLight }: Props) {
                 d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
               />
             </svg>
-          </div>
+            {t('subscription.tvQuickConnect.scanBtn')}
-          <div className="min-w-0 flex-1">
+          </button>
-            <h3 className="font-semibold text-dark-100">
+        )}
-              {t('subscription.tvQuickConnect.scanTitle')}
+        <div className={scanning ? 'space-y-2' : 'hidden'}>
-            </h3>
+          <div id="tv-qr-reader" className="overflow-hidden rounded-xl" />
-            <p className="mt-1 text-sm text-dark-400">
+          {scanning && (
-              {t('subscription.tvQuickConnect.scanDescription')}
+            <button onClick={stopScan} className={actionBtnClass}>
-            </p>
+              {t('subscription.tvQuickConnect.stopScan')}
-
+            </button>
-            {!scanning && (
+          )}
-              <button onClick={startScan} className={`${actionBtnClass} mt-3`}>
-                <svg
-                  className="mr-2 h-5 w-5"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  stroke="currentColor"
-                  strokeWidth={1.5}
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"
-                  />
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"
-                  />
-                </svg>
-                {t('subscription.tvQuickConnect.scanBtn')}
-              </button>
-            )}
-            <div className={scanning ? 'mt-3 space-y-2' : 'hidden'}>
-              <div id="tv-qr-reader" className="overflow-hidden rounded-xl" />
-              {scanning && (
-                <button onClick={stopScan} className={actionBtnClass}>
-                  {t('subscription.tvQuickConnect.stopScan')}
-                </button>
-              )}
-            </div>
-          </div>
         </div>
       </div>
 

src/components/connection/blocks/AccordionBlock.tsx

@@ -15,7 +15,11 @@ export function AccordionBlock({
   const [openIndex, setOpenIndex] = useState<number | null>(0);
 
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -68,6 +72,7 @@ export function AccordionBlock({
                   {getLocalizedText(block.description)}
                 </p>
                 {renderBlockButtons(block.buttons, 'light')}
+                {block.customNode}
               </div>
             </div>
           </div>

src/components/connection/blocks/CardsBlock.tsx

@@ -11,7 +11,11 @@ export function CardsBlock({
   renderBlockButtons,
 }: BlockRendererProps) {
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -43,6 +47,7 @@ export function CardsBlock({
                   {getLocalizedText(block.description)}
                 </p>
                 {renderBlockButtons(block.buttons, 'light')}
+                {block.customNode}
               </div>
             </div>
           </div>

src/components/connection/blocks/MinimalBlock.tsx

@@ -11,7 +11,11 @@ export function MinimalBlock({
   renderBlockButtons,
 }: BlockRendererProps) {
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -44,6 +48,7 @@ export function MinimalBlock({
               {getLocalizedText(block.description)}
             </p>
             {renderBlockButtons(block.buttons, 'subtle')}
+            {block.customNode}
           </div>
         );
       })}

src/components/connection/blocks/TimelineBlock.tsx

@@ -11,7 +11,11 @@ export function TimelineBlock({
   renderBlockButtons,
 }: BlockRendererProps) {
   const visibleBlocks = blocks.filter(
-    (b) => getLocalizedText(b.title) || getLocalizedText(b.description) || b.buttons?.length,
+    (b) =>
+      getLocalizedText(b.title) ||
+      getLocalizedText(b.description) ||
+      b.buttons?.length ||
+      b.customNode,
   );
 
   if (!visibleBlocks.length) return null;
@@ -43,6 +47,7 @@ export function TimelineBlock({
                 {getLocalizedText(block.description)}
               </p>
               {renderBlockButtons(block.buttons, 'light')}
+              {block.customNode}
             </div>
           </div>
         );

src/components/connection/blocks/index.ts

@@ -3,4 +3,4 @@ export { TimelineBlock } from './TimelineBlock';
 export { AccordionBlock } from './AccordionBlock';
 export { MinimalBlock } from './MinimalBlock';
 export { BlockButtons } from './BlockButtons';
-export type { BlockRendererProps } from './types';
+export type { BlockRendererProps, RenderBlock } from './types';

src/components/connection/blocks/types.ts

@@ -1,7 +1,16 @@
+import type { ReactNode } from 'react';
 import type { RemnawaveBlockClient, RemnawaveButtonClient, LocalizedText } from '@/types';
 
+/**
+ * A block to render. Beyond the panel's data (title/description/buttons), it may
+ * carry `customNode` — extra interactive content (e.g. the Happ TV connect
+ * widget) that every renderer drops into the block body, so it inherits the
+ * active style (cards/timeline/accordion/minimal) instead of clashing with it.
+ */
+export type RenderBlock = RemnawaveBlockClient & { customNode?: ReactNode };
+
 export interface BlockRendererProps {
-  blocks: RemnawaveBlockClient[];
+  blocks: RenderBlock[];
   isMobile: boolean;
   isLight: boolean;
   getLocalizedText: (text: LocalizedText | undefined) => string;