From 680883f0474eda6813618c058e0959fdae77abca Mon Sep 17 00:00:00 2001
From: Jandl-hostacny <jakub.hostacny@jandl.sk>
Date: Thu, 8 Oct 2026 09:53:12 +0200
Subject: [PATCH] feat: moznost skrytia oznamovacej listy

---
 src/app/page.tsx                      | 66 ++++++++++++++++++++++-----
 src/components/editor/ConfigPanel.tsx | 17 +++++++
 src/lib/emailRenderer.ts              |  3 ++
 src/types/newsletter.ts               |  1 +
 4 files changed, 75 insertions(+), 12 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 47f88e3..7f63417 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -651,18 +651,42 @@ export default function Home() {
                         {mod.title}
                       </span>
 
-                      {/* Ak je modul ukotvený (Hlavička / Letáky / Recepty / Pätička), nezobrazujeme tlačidlá na presun a zmazanie */}
+                      {/* Ak je modul ukotvený (Hlavička / Letáky / Recepty / Pätička / Oznamovacia lišta) */}
                       {isAnchored ? (
-                        <span className="text-[9px] font-bold bg-white/10 text-amber-300 px-2 py-0.5 rounded-full border border-white/10 uppercase flex items-center gap-1">
-                          <Lock className="w-2.5 h-2.5" />
-                          {isFooter
-                            ? 'Ukotvená pätička'
-                            : isFlyers
-                            ? 'Ukotvené letáky'
-                            : isRecipes
-                            ? 'Ukotvené recepty'
-                            : 'Ukotvená hlavička'}
-                        </span>
+                        <div className="flex items-center gap-1.5">
+                          {mod.type === 'announcement' && (
+                            <button
+                              type="button"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                handleUpdateModule({
+                                  ...mod,
+                                  data: { ...mod.data, enabled: mod.data.enabled === false ? true : false }
+                                });
+                              }}
+                              className={`text-[9px] font-bold px-2 py-0.5 rounded-full border transition-all flex items-center gap-1 ${
+                                mod.data.enabled === false
+                                  ? 'bg-red-500/20 text-red-300 border-red-400/30 hover:bg-red-500/30'
+                                  : 'bg-emerald-500/20 text-emerald-300 border-emerald-400/30 hover:bg-emerald-500/30'
+                              }`}
+                              title={mod.data.enabled === false ? 'Aktivovať lištu v e-maile' : 'Skryť lištu v e-maile'}
+                            >
+                              {mod.data.enabled === false ? 'Skrytá (zapnúť)' : 'Zobrazená'}
+                            </button>
+                          )}
+                          <span className="text-[9px] font-bold bg-white/10 text-amber-300 px-2 py-0.5 rounded-full border border-white/10 uppercase flex items-center gap-1">
+                            <Lock className="w-2.5 h-2.5" />
+                            {isFooter
+                              ? 'Ukotvená pätička'
+                              : isFlyers
+                              ? 'Ukotvené letáky'
+                              : isRecipes
+                              ? 'Ukotvené recepty'
+                              : mod.type === 'announcement'
+                              ? 'Oznamovacia lišta'
+                              : 'Ukotvená hlavička'}
+                          </span>
+                        </div>
                       ) : (
                         <>
                           <button
@@ -712,7 +736,7 @@ export default function Home() {
                     </div>
                   )}
 
-                  {/* Vykreslenie modulu: ak je loyalty_club vypnutý, zobrazíme prívetivý placeholder */}
+                  {/* Vykreslenie modulu: ak je loyalty_club alebo announcement vypnutý, zobrazíme prívetivý placeholder */}
                   {mod.type === 'loyalty_club' && mod.data.enabled === false ? (
                     <div className="p-8 my-4 border-2 border-dashed border-red-500/40 bg-red-950/30 rounded-2xl text-center">
                       <p className="text-xs font-bold text-red-300 uppercase tracking-wider">
@@ -731,6 +755,24 @@ export default function Home() {
                         Aktivovať vernostné zľavy
                       </button>
                     </div>
+                  ) : mod.type === 'announcement' && mod.data.enabled === false ? (
+                    <div className="p-4 my-2 border-2 border-dashed border-red-500/40 bg-red-950/30 rounded-xl text-center">
+                      <p className="text-xs font-bold text-red-300 uppercase tracking-wider">
+                        Top oznamovacia lišta (Vypnutá / Skrytá)
+                      </p>
+                      <p className="text-[11px] text-gray-300 mt-0.5">
+                        Táto lišta je v e-maile skrytá. Kliknutím sem ju môžete aktivovať.
+                      </p>
+                      <button
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          handleUpdateModule({ ...mod, data: { ...mod.data, enabled: true } });
+                        }}
+                        className="mt-2 px-3 py-1 bg-red-600 hover:bg-red-700 text-white text-xs font-bold rounded-lg transition-colors shadow-sm"
+                      >
+                        Aktivovať oznamovaciu lištu
+                      </button>
+                    </div>
                   ) : (
                     <div
                       dangerouslySetInnerHTML={{
diff --git a/src/components/editor/ConfigPanel.tsx b/src/components/editor/ConfigPanel.tsx
index 87af19d..083c5ed 100644
--- a/src/components/editor/ConfigPanel.tsx
+++ b/src/components/editor/ConfigPanel.tsx
@@ -68,6 +68,23 @@ export const ConfigPanel: React.FC<ConfigPanelProps> = ({
       {/* TOP ANNOUNCEMENT */}
       {module.type === 'announcement' && (
         <div className="space-y-4">
+          {/* Toggle zapnuté / vypnuté */}
+          <div className="bg-red-50/60 p-3.5 rounded-xl border border-red-200 flex items-center justify-between">
+            <div>
+              <span className="text-xs font-bold text-gray-900 block">Zobraziť v e-maile</span>
+              <span className="text-[11px] text-gray-500">Top oznamovacia lišta</span>
+            </div>
+            <label className="relative inline-flex items-center cursor-pointer">
+              <input
+                type="checkbox"
+                checked={module.data.enabled !== false}
+                onChange={(e) => updateData({ enabled: e.target.checked })}
+                className="sr-only peer"
+              />
+              <div className="w-11 h-6 bg-gray-300 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-red-600"></div>
+            </label>
+          </div>
+
           <div>
             <label className="block text-xs font-semibold text-gray-700 mb-1">Text badge (napr. TIP)</label>
             <input
diff --git a/src/lib/emailRenderer.ts b/src/lib/emailRenderer.ts
index 81d8c91..0d96930 100644
--- a/src/lib/emailRenderer.ts
+++ b/src/lib/emailRenderer.ts
@@ -205,6 +205,9 @@ export function renderSingleModuleHtml(m: any, campaign: NewsletterCampaign): st
 function renderModule(m: any, campaign: NewsletterCampaign): string {
   switch (m.type) {
     case 'announcement':
+      if (m.data?.enabled === false) {
+        return '';
+      }
       return `
       <!-- 0. TOP OZNAMOVACIA LIŠTA -->
       <table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="margin: 15px 0 20px 0;">
diff --git a/src/types/newsletter.ts b/src/types/newsletter.ts
index 2ad484e..d8528db 100644
--- a/src/types/newsletter.ts
+++ b/src/types/newsletter.ts
@@ -48,6 +48,7 @@ export interface AnnouncementModuleData {
   linkText: string;
   linkUrl: string;
   bgColor: string;
+  enabled?: boolean;
 }
 
 export interface HeaderModuleData {