From 061e6471803029ad279c8810d88b90afa17ffe74 Mon Sep 17 00:00:00 2001
From: Jandl-hostacny <jakub.hostacny@jandl.sk>
Date: Wed, 21 Oct 2026 11:44:59 +0200
Subject: [PATCH] feat: mazanie pripomienok v editore aj na stranke s odkazom

- editor: tlacidlo Zmazat v bubline pripomienky na platne
- odkaz: Zmazat v bubline aj ikona kosa v zozname pripomienok
- pred zmazanim potvrdenie (zmizne pre vsetkych s odkazom)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 src/app/page.tsx                | 26 ++++++++++++----
 src/app/review/[token]/page.tsx | 53 ++++++++++++++++++++++++++++-----
 2 files changed, 66 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7c6494e..4a52c31 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -928,15 +928,29 @@ export default function Home() {
                 selectedId={selectedCommentId}
                 onSelect={setSelectedCommentId}
                 renderActions={(c: ReviewComment) => (
-                  <button
+                  <>
+                    <button
+                      type="button"
+                      onClick={() => reviews.toggleDone(c)}
+                      className={`text-[11px] font-bold px-2.5 py-1 rounded-lg ${
+                        c.done ? 'bg-gray-100 text-gray-700' : 'bg-emerald-600 text-white hover:bg-emerald-700'
+                      }`}
+                    >
+                      {c.done ? 'Vrátiť ako neurobené' : '✓ Označiť ako hotové'}
+                    </button>
+                    <button
                     type="button"
-                    onClick={() => reviews.toggleDone(c)}
-                    className={`text-[11px] font-bold px-2.5 py-1 rounded-lg ${
-                      c.done ? 'bg-gray-100 text-gray-700' : 'bg-emerald-600 text-white hover:bg-emerald-700'
-                    }`}
+                    onClick={() => {
+                      if (confirm('Zmazať túto pripomienku? Zmizne aj pre ostatných s odkazom.')) {
+                        reviews.remove(c);
+                        setSelectedCommentId(null);
+                      }
+                    }}
+                    className="text-[11px] font-bold px-2.5 py-1 rounded-lg text-red-700 bg-red-50 hover:bg-red-100"
                   >
-                    {c.done ? 'Vrátiť ako neurobené' : '✓ Označiť ako hotové'}
+                    Zmazať
                   </button>
+                  </>
                 )}
               />
             )}
diff --git a/src/app/review/[token]/page.tsx b/src/app/review/[token]/page.tsx
index e84de09..05476dd 100644
--- a/src/app/review/[token]/page.tsx
+++ b/src/app/review/[token]/page.tsx
@@ -3,7 +3,7 @@
 // Náhľad newslettra na pripomienky (zdieľaný odkaz). Nič sa tu nedá upravovať – len komentovať,
 // písať text priamo do newslettra a kresliť. Pripomienky sa ukladajú k odkazu, vidí ich každý s odkazom.
 import React, { use, useCallback, useEffect, useRef, useState } from 'react';
-import { MessageCircle, Type, Pencil, MousePointer2, CheckCircle2, Loader2 } from 'lucide-react';
+import { MessageCircle, Type, Pencil, MousePointer2, CheckCircle2, Loader2, Trash2 } from 'lucide-react';
 import { renderSingleModuleHtml } from '@/lib/emailRenderer';
 import {
   Review,
@@ -12,7 +12,8 @@ import {
   REVIEW_COLORS,
   getReviewByToken,
   listReviewComments,
-  addReviewComment
+  addReviewComment,
+  deleteReviewComment
 } from '@/lib/reviews';
 import { AnnotationLayer, pointToModuleCoords, useModuleLayout } from '@/components/review/AnnotationLayer';
 import { NewsletterCampaign } from '@/types/newsletter';
@@ -124,6 +125,18 @@ export default function ReviewPage({ params }: { params: Promise<{ token: string
     }
   };
 
+  // Zmazanie pripomienky (zmizne pre všetkých s odkazom aj v editore)
+  const removeComment = async (c: ReviewComment) => {
+    if (!confirm('Zmazať túto pripomienku? Zmizne aj pre ostatných s odkazom.')) return;
+    try {
+      await deleteReviewComment(c.id);
+      setComments((prev) => prev.filter((x) => x.id !== c.id));
+      if (selectedId === c.id) setSelectedId(null);
+    } catch (e) {
+      alert(e instanceof Error ? e.message : 'Pripomienku sa nepodarilo zmazať.');
+    }
+  };
+
   // Klik do newslettra: komentár / text → okienko na napísanie
   const onCanvasClick = (e: React.MouseEvent) => {
     if (tool !== 'comment' && tool !== 'text') return;
@@ -246,7 +259,21 @@ export default function ReviewPage({ params }: { params: Promise<{ token: string
               />
             ))}
 
-            <AnnotationLayer layout={layout} comments={comments} selectedId={selectedId} onSelect={setSelectedId} />
+            <AnnotationLayer
+              layout={layout}
+              comments={comments}
+              selectedId={selectedId}
+              onSelect={setSelectedId}
+              renderActions={(c) => (
+                <button
+                  type="button"
+                  onClick={() => removeComment(c)}
+                  className="flex items-center gap-1 text-[11px] font-bold px-2.5 py-1 rounded-lg text-red-700 bg-red-50 hover:bg-red-100"
+                >
+                  <Trash2 className="w-3 h-3" /> Zmazať
+                </button>
+              )}
+            />
 
             {/* Plocha na pridávanie pripomienok */}
             {tool !== 'view' && (
@@ -338,11 +365,12 @@ export default function ReviewPage({ params }: { params: Promise<{ token: string
             {comments.map((c) => {
               const number = comments.filter((x) => x.kind === 'comment').indexOf(c) + 1;
               return (
-                <button
+                <div
                   key={c.id}
-                  type="button"
+                  role="button"
+                  tabIndex={0}
                   onClick={() => setSelectedId(c.id === selectedId ? null : c.id)}
-                  className={`w-full text-left rounded-lg border p-2 transition-colors ${
+                  className={`group w-full text-left rounded-lg border p-2 transition-colors cursor-pointer ${
                     c.id === selectedId ? 'border-gray-900 bg-gray-50' : 'border-gray-200 hover:border-gray-300'
                   } ${c.done ? 'opacity-60' : ''}`}
                 >
@@ -353,11 +381,22 @@ export default function ReviewPage({ params }: { params: Promise<{ token: string
                     <span className="text-[11px] font-bold text-gray-900 truncate">{c.author || 'Anonym'}</span>
                     {c.done && <CheckCircle2 className="w-3.5 h-3.5 text-emerald-600 shrink-0" />}
                     <span className="ml-auto text-[10px] text-gray-400 shrink-0">{new Date(c.created_at).toLocaleDateString('sk-SK')}</span>
+                    <button
+                      type="button"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        removeComment(c);
+                      }}
+                      className="text-gray-300 hover:text-red-600 opacity-0 group-hover:opacity-100 transition-opacity"
+                      title="Zmazať pripomienku"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
                   </div>
                   <p className="mt-1 text-xs text-gray-700 whitespace-pre-wrap line-clamp-3">
                     {c.text || (c.kind === 'drawing' ? 'Kresba' : '')}
                   </p>
-                </button>
+                </div>
               );
             })}
           </div>