feat: premenovanie newslettera v zozname a vyber nazvu pri duplikovani

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/app/page.tsx

@@ -12,6 +12,7 @@ import { ConfigPanel } from '@/components/editor/ConfigPanel';
 import { ProductImportModal } from '@/components/editor/ProductImportModal';
 import { BadgeEditorModal } from '@/components/editor/BadgeEditorModal';
 import { SavedCampaignsModal } from '@/components/editor/SavedCampaignsModal';
+import { NameDialog } from '@/components/editor/NameDialog';
 import JSZip from 'jszip';
 import { prepareCardImages } from '@/lib/cardImages';
 import { useCampaignReview } from '@/components/review/useCampaignReview';
@@ -42,6 +43,7 @@ export default function Home() {
   const [isImportOpen, setIsImportOpen] = useState(false);
   const [isBadgeEditorOpen, setIsBadgeEditorOpen] = useState(false);
   const [isSavedCampaignsOpen, setIsSavedCampaignsOpen] = useState(false);
+  const [isDuplicateOpen, setIsDuplicateOpen] = useState(false);
   const [targetProductIdForBadge, setTargetProductIdForBadge] = useState<string | null>(null);
   const [availableBadges, setAvailableBadges] = useState<BadgeTemplate[]>(DEFAULT_BADGE_TEMPLATES);
 
@@ -412,10 +414,9 @@ export default function Home() {
   };
 
   // Duplikácia aktuálnej kampane v Supabase
-  const handleDuplicateCurrentCampaign = async () => {
+  const handleDuplicateCurrentCampaign = async (newTitle: string) => {
     setIsSaving(true);
     try {
-      const newTitle = `${campaign.title} (kópia)`;
       const { data, error } = await supabase
         .from('templates')
         .insert([
@@ -439,7 +440,7 @@ export default function Home() {
           status: 'draft',
           modules: campaign.modules
         });
-        alert(`Kampaň bola zduplikovaná ako "${newTitle}"!`);
+        setIsDuplicateOpen(false);
       }
     } catch (err: any) {
       alert(`Chyba pri duplikovaní: ${err.message}`);
@@ -662,7 +663,7 @@ export default function Home() {
         onSave={handleManualSave}
         onUpdateTitle={(title) => setCampaign((prev) => ({ ...prev, title }))}
         onOpenSavedCampaigns={() => setIsSavedCampaignsOpen(true)}
-        onDuplicateCampaign={handleDuplicateCurrentCampaign}
+        onDuplicateCampaign={() => setIsDuplicateOpen(true)}
         onExportZip={handleExportZip}
         onExportBrevo={handleExportBrevo}
         isExportingBrevo={isExportingBrevo}
@@ -1012,8 +1013,18 @@ export default function Home() {
       />
 
       {/* Modál Moje newslettre (Ukladanie, duplikácia, vytváranie a prepínanie) */}
+      <NameDialog
+        open={isDuplicateOpen}
+        title="Duplikovať newsletter"
+        initial={campaign.title || ''}
+        confirmText="Vytvoriť kópiu"
+        onConfirm={handleDuplicateCurrentCampaign}
+        onCancel={() => setIsDuplicateOpen(false)}
+      />
+
       <SavedCampaignsModal
         isOpen={isSavedCampaignsOpen}
+        onRenameCurrent={(title) => setCampaign((prev) => ({ ...prev, title }))}
         onClose={() => setIsSavedCampaignsOpen(false)}
         currentCampaign={campaign}
         onLoadCampaign={(selected: NewsletterCampaign) => {

src/components/editor/NameDialog.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+
+interface NameDialogProps {
+  open: boolean;
+  title: string;
+  initial: string;
+  confirmText: string;
+  onConfirm: (name: string) => void | Promise<void>;
+  onCancel: () => void;
+}
+
+// Malé okno na zadanie názvu (premenovanie, duplikovanie newslettera).
+// Pri každom otvorení sa obsah pripojí nanovo, takže začína s predvyplneným názvom.
+export const NameDialog: React.FC<NameDialogProps> = ({ open, ...props }) => (open ? <NameDialogBody {...props} /> : null);
+
+const NameDialogBody: React.FC<Omit<NameDialogProps, 'open'>> = ({ title, initial, confirmText, onConfirm, onCancel }) => {
+  const [value, setValue] = useState(initial);
+  const [busy, setBusy] = useState(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  // predvyplnený názov označíme, aby sa dal hneď prepísať alebo len doplniť
+  useEffect(() => {
+    const t = setTimeout(() => inputRef.current?.select(), 30);
+    return () => clearTimeout(t);
+  }, []);
+
+  const submit = async () => {
+    const name = value.trim();
+    if (!name || busy) return;
+    setBusy(true);
+    try {
+      await onConfirm(name);
+    } finally {
+      setBusy(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 z-[60] bg-black/50 flex items-center justify-center p-4" onMouseDown={onCancel}>
+      <div className="bg-white rounded-2xl shadow-2xl w-full max-w-md p-5 space-y-4" onMouseDown={(e) => e.stopPropagation()}>
+        <h3 className="text-sm font-bold text-gray-900">{title}</h3>
+        <input
+          ref={inputRef}
+          autoFocus
+          value={value}
+          onChange={(e) => setValue(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') submit();
+            if (e.key === 'Escape') onCancel();
+          }}
+          placeholder="Názov newslettera"
+          className="w-full text-sm border border-gray-300 rounded-xl px-3 py-2 outline-none focus:border-red-500 focus:ring-2 focus:ring-red-500/15"
+        />
+        <div className="flex justify-end gap-2">
+          <button type="button" onClick={onCancel} className="px-4 py-1.5 text-xs font-bold text-gray-600 hover:bg-gray-100 rounded-xl">
+            Zrušiť
+          </button>
+          <button
+            type="button"
+            onClick={submit}
+            disabled={!value.trim() || busy}
+            className="px-4 py-1.5 text-xs font-bold bg-red-600 hover:bg-red-700 disabled:opacity-40 text-white rounded-xl"
+          >
+            {busy ? 'Ukladám…' : confirmText}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+};

src/components/editor/SavedCampaignsModal.tsx

@@ -4,6 +4,7 @@ import React, { useState, useEffect } from 'react';
 import { supabase } from '@/lib/supabase';
 import { NewsletterCampaign } from '@/types/newsletter';
 import { DEFAULT_CAMPAIGN } from '@/lib/defaultCampaign';
+import { NameDialog } from './NameDialog';
 import {
   FolderOpen,
   Plus,
@@ -15,7 +16,8 @@ import {
   CheckCircle2,
   Layers,
   Search,
-  Sparkles
+  Sparkles,
+  Pencil
 } from 'lucide-react';
 
 interface SavedCampaignsModalProps {
@@ -24,6 +26,7 @@ interface SavedCampaignsModalProps {
   currentCampaign: NewsletterCampaign;
   onLoadCampaign: (campaign: NewsletterCampaign) => void;
   onSaveCurrentAsCopy: (newTitle: string) => Promise<void>;
+  onRenameCurrent: (title: string) => void;
 }
 
 export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
@@ -31,13 +34,16 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
   onClose,
   currentCampaign,
   onLoadCampaign,
-  onSaveCurrentAsCopy
+  onSaveCurrentAsCopy,
+  onRenameCurrent
 }) => {
   const [campaigns, setCampaigns] = useState<any[]>([]);
   const [loading, setLoading] = useState(false);
   const [search, setSearch] = useState('');
   const [isCreatingNew, setIsCreatingNew] = useState(false);
   const [newTitle, setNewTitle] = useState('');
+  // okno na názov: premenovanie alebo duplikovanie vybraného newslettera
+  const [nameAction, setNameAction] = useState<{ kind: 'rename' | 'duplicate'; camp: { id: string; title: string; data?: unknown } } | null>(null);
 
   const fetchCampaigns = async () => {
     setLoading(true);
@@ -66,9 +72,20 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
 
   if (!isOpen) return null;
 
-  const handleDuplicate = async (camp: any) => {
+  const handleRename = async (camp: { id: string }, title: string) => {
+    try {
+      const { error } = await supabase.from('templates').update({ title }).eq('id', camp.id);
+      if (error) throw error;
+      setCampaigns((prev) => prev.map((c) => (c.id === camp.id ? { ...c, title } : c)));
+      if (camp.id === currentCampaign.id) onRenameCurrent(title);
+      setNameAction(null);
+    } catch (err) {
+      alert(`Chyba pri premenovaní: ${(err as Error).message}`);
+    }
+  };
+
+  const handleDuplicate = async (camp: any, clonedTitle: string) => {
     try {
-      const clonedTitle = `Kópia - ${camp.title}`;
       const { data, error } = await supabase
         .from('templates')
         .insert([
@@ -90,6 +107,7 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
           status: 'draft',
           modules: data[0].data?.modules || []
         });
+        setNameAction(null);
         onClose();
       }
     } catch (err: any) {
@@ -326,7 +344,7 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
                     </button>
 
                     <button
-                      onClick={() => handleDuplicate(camp)}
+                      onClick={() => setNameAction({ kind: 'duplicate', camp })}
                       className="px-3 py-1.5 text-xs font-bold bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-xl flex items-center gap-1 transition-colors"
                       title="Vytvoriť kópiu"
                     >
@@ -334,6 +352,14 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
                       <span>Duplikovať</span>
                     </button>
 
+                    <button
+                      onClick={() => setNameAction({ kind: 'rename', camp })}
+                      className="p-2 text-gray-400 hover:text-gray-900 hover:bg-gray-100 rounded-xl transition-colors"
+                      title="Premenovať"
+                    >
+                      <Pencil className="w-4 h-4" />
+                    </button>
+
                     <button
                       onClick={() => handleDelete(camp.id, camp.title)}
                       className="p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-xl transition-colors"
@@ -359,6 +385,14 @@ export const SavedCampaignsModal: React.FC<SavedCampaignsModalProps> = ({
           </button>
         </div>
       </div>
+      <NameDialog
+        open={!!nameAction}
+        title={nameAction?.kind === 'rename' ? 'Premenovať newsletter' : 'Duplikovať newsletter'}
+        initial={nameAction?.camp.title || ''}
+        confirmText={nameAction?.kind === 'rename' ? 'Uložiť názov' : 'Vytvoriť kópiu'}
+        onConfirm={(title) => (nameAction?.kind === 'rename' ? handleRename(nameAction.camp, title) : handleDuplicate(nameAction!.camp, title))}
+        onCancel={() => setNameAction(null)}
+      />
     </div>
   );
 };

src/components/editor/TopBar.tsx

@@ -142,7 +142,7 @@ export const TopBar: React.FC<TopBarProps> = ({
               <h1 className="text-xs md:text-sm font-bold text-gray-900 leading-tight max-w-[180px] md:max-w-xs truncate group-hover:text-blue-600">
                 {campaign.title || 'COOP Jednota Newsletter'}
               </h1>
-              <Edit2 className="w-3 h-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
+              <Edit2 className="w-3 h-3 text-gray-400 group-hover:text-blue-600 transition-colors" />
             </div>
           )}