From 03f68061b1798c45c93958e776a8a3bb233be909 Mon Sep 17 00:00:00 2001
From: Ricel Leite <ricelleite@MacBook-Pro-de-Ricel.local>
Date: Wed, 18 Feb 2026 18:03:04 -0300
Subject: [PATCH] fix: Preserve line breaks in comments (whitespace-pre-wrap)

---
 backend/app/main.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/backend/app/main.py b/backend/app/main.py
index 6417ee2..27faaaf 100644
--- a/backend/app/main.py
+++ b/backend/app/main.py
@@ -46,7 +46,7 @@ HTML = """<!DOCTYPE html>
 <div id="project-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50"><div class="bg-white rounded-xl p-6 w-full max-w-md mx-4"><h3 class="text-lg font-semibold mb-4">New Project</h3><form id="project-form" onsubmit="createProject(event)"><div class="space-y-4"><div><label class="block text-sm font-medium mb-1">Name</label><input type="text" name="name" required class="w-full border rounded-lg px-3 py-2"></div><div><label class="block text-sm font-medium mb-1">Key</label><input type="text" name="key" required pattern="[A-Za-z]{2,10}" class="w-full border rounded-lg px-3 py-2 uppercase"></div><div><label class="block text-sm font-medium mb-1">Webhook URL</label><input type="url" name="webhook_url" class="w-full border rounded-lg px-3 py-2"></div></div><div class="flex gap-3 mt-6"><button type="button" onclick="hideProjectModal()" class="flex-1 border rounded-lg py-2">Cancel</button><button type="submit" class="flex-1 bg-blue-600 text-white rounded-lg py-2">Create</button></div></form></div></div>
 <div id="ticket-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50"><div class="bg-white rounded-xl p-6 w-full max-w-lg mx-4"><h3 class="text-lg font-semibold mb-4">New Ticket</h3><form id="ticket-form" onsubmit="createTicket(event)"><div class="space-y-4"><div><label class="block text-sm font-medium mb-1">Title</label><input type="text" name="title" required class="w-full border rounded-lg px-3 py-2"></div><div><label class="block text-sm font-medium mb-1">Description</label><textarea name="description" rows="4" required class="w-full border rounded-lg px-3 py-2"></textarea></div><div><label class="block text-sm font-medium mb-1">Priority</label><select name="priority" class="w-full border rounded-lg px-3 py-2"><option value="low">Low</option><option value="medium" selected>Medium</option><option value="high">High</option><option value="critical">Critical</option></select></div></div><div class="flex gap-3 mt-6"><button type="button" onclick="hideTicketModal()" class="flex-1 border rounded-lg py-2">Cancel</button><button type="submit" class="flex-1 bg-green-600 text-white rounded-lg py-2">Create</button></div></form></div></div>
 <div id="detail-modal" class="fixed inset-0 bg-black/50 hidden items-center justify-center z-50"><div class="bg-white rounded-xl w-full max-w-2xl mx-4 max-h-[90vh] overflow-hidden flex flex-col"><div class="p-4 border-b flex justify-between"><h3 id="detail-key" class="text-lg font-semibold"></h3><button onclick="hideDetail()" class="text-gray-500">✕</button></div><div class="p-6 overflow-y-auto flex-1"><div id="detail-content"></div><div class="mt-6 border-t pt-4"><h4 class="font-medium mb-3">Comments</h4><div id="comments" class="space-y-3 mb-4"></div><form onsubmit="addComment(event)" class="flex gap-2"><input type="text" id="comment-input" class="flex-1 border rounded-lg px-3 py-2" placeholder="Add comment..."><button type="submit" class="bg-blue-600 text-white px-4 py-2 rounded-lg">Send</button></form></div></div></div></div>
-<script>const API='/api';let curProj=null,curTkt=null;loadProjects();async function loadProjects(){const r=await fetch(API+'/projects'),p=await r.json(),c=document.getElementById('projects-list');if(!p.length){c.innerHTML='<div class="text-gray-500">No projects yet</div>';return}c.innerHTML=p.map(x=>`<button onclick="selectProject(${x.id})" class="px-4 py-2 rounded-lg border ${curProj?.id===x.id?'bg-blue-100 border-blue-300':'bg-white hover:bg-gray-50'}"><span class="font-medium">${x.key}</span> <span class="text-gray-500">(${x.ticket_count})</span></button>`).join('')}async function selectProject(id){const r=await fetch(API+'/projects/'+id);curProj=await r.json();loadProjects();loadTickets();document.getElementById('new-ticket-btn').classList.remove('hidden')}async function loadTickets(){if(!curProj)return;const r=await fetch(API+'/tickets?project_id='+curProj.id),t=await r.json(),c=document.getElementById('tickets-list');if(!t.length){c.innerHTML='<div class="p-8 text-center text-gray-500">No tickets</div>';return}c.innerHTML=t.map(x=>`<div onclick="showDetail(${x.id})" class="p-4 hover:bg-gray-50 cursor-pointer priority-${x.priority}"><div class="flex justify-between"><div><span class="text-sm font-mono text-gray-500">${x.key}</span><span class="font-medium ml-2">${x.title}</span></div><span class="px-2 py-1 rounded text-xs font-medium status-${x.status}">${x.status.replace('_',' ')}</span></div><p class="text-sm text-gray-500 mt-1 truncate">${x.description}</p></div>`).join('')}async function showDetail(id){const r=await fetch(API+'/tickets/'+id);curTkt=await r.json();document.getElementById('detail-key').textContent=curTkt.key;document.getElementById('detail-content').innerHTML=`<h2 class="text-xl font-semibold">${curTkt.title}</h2><div class="flex gap-2 mt-2"><span class="px-2 py-1 rounded text-xs font-medium status-${curTkt.status}">${curTkt.status.replace('_',' ')}</span><span class="px-2 py-1 rounded text-xs bg-gray-100">${curTkt.priority}</span></div><p class="mt-4 whitespace-pre-wrap">${curTkt.description}</p><select onchange="updateStatus(this.value)" class="mt-4 border rounded px-2 py-1 text-sm"><option value="open" ${curTkt.status==='open'?'selected':''}>Open</option><option value="in_progress" ${curTkt.status==='in_progress'?'selected':''}>In Progress</option><option value="resolved" ${curTkt.status==='resolved'?'selected':''}>Resolved</option><option value="closed" ${curTkt.status==='closed'?'selected':''}>Closed</option></select>`;loadComments();document.getElementById('detail-modal').classList.remove('hidden');document.getElementById('detail-modal').classList.add('flex')}async function loadComments(){const r=await fetch(API+'/tickets/'+curTkt.id+'/comments'),c=await r.json();document.getElementById('comments').innerHTML=c.length?c.map(x=>`<div class="bg-gray-50 rounded-lg p-3"><div class="flex justify-between text-sm"><span class="font-medium">${x.author}</span><span class="text-gray-500">${new Date(x.created_at).toLocaleString()}</span></div><p class="mt-1">${x.content}</p></div>`).join(''):'<div class="text-gray-500 text-sm">No comments</div>'}async function addComment(e){e.preventDefault();const i=document.getElementById('comment-input');if(!i.value.trim())return;await fetch(API+'/tickets/'+curTkt.id+'/comments',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({author:'user',content:i.value})});i.value='';loadComments()}async function updateStatus(s){await fetch(API+'/tickets/'+curTkt.id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:s})});loadTickets()}function hideDetail(){document.getElementById('detail-modal').classList.add('hidden');document.getElementById('detail-modal').classList.remove('flex')}function showProjectModal(){document.getElementById('project-modal').classList.remove('hidden');document.getElementById('project-modal').classList.add('flex')}function hideProjectModal(){document.getElementById('project-modal').classList.add('hidden');document.getElementById('project-modal').classList.remove('flex')}function showTicketModal(){document.getElementById('ticket-modal').classList.remove('hidden');document.getElementById('ticket-modal').classList.add('flex')}function hideTicketModal(){document.getElementById('ticket-modal').classList.add('hidden');document.getElementById('ticket-modal').classList.remove('flex')}async function createProject(e){e.preventDefault();const f=e.target;await fetch(API+'/projects',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:f.name.value,key:f.key.value.toUpperCase(),webhook_url:f.webhook_url.value||null})});f.reset();hideProjectModal();loadProjects()}async function createTicket(e){e.preventDefault();const f=e.target;await fetch(API+'/tickets',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({project_id:curProj.id,title:f.title.value,description:f.description.value,priority:f.priority.value})});f.reset();hideTicketModal();loadTickets();loadProjects()}</script></body></html>"""
+<script>const API='/api';let curProj=null,curTkt=null;loadProjects();async function loadProjects(){const r=await fetch(API+'/projects'),p=await r.json(),c=document.getElementById('projects-list');if(!p.length){c.innerHTML='<div class="text-gray-500">No projects yet</div>';return}c.innerHTML=p.map(x=>`<button onclick="selectProject(${x.id})" class="px-4 py-2 rounded-lg border ${curProj?.id===x.id?'bg-blue-100 border-blue-300':'bg-white hover:bg-gray-50'}"><span class="font-medium">${x.key}</span> <span class="text-gray-500">(${x.ticket_count})</span></button>`).join('')}async function selectProject(id){const r=await fetch(API+'/projects/'+id);curProj=await r.json();loadProjects();loadTickets();document.getElementById('new-ticket-btn').classList.remove('hidden')}async function loadTickets(){if(!curProj)return;const r=await fetch(API+'/tickets?project_id='+curProj.id),t=await r.json(),c=document.getElementById('tickets-list');if(!t.length){c.innerHTML='<div class="p-8 text-center text-gray-500">No tickets</div>';return}c.innerHTML=t.map(x=>`<div onclick="showDetail(${x.id})" class="p-4 hover:bg-gray-50 cursor-pointer priority-${x.priority}"><div class="flex justify-between"><div><span class="text-sm font-mono text-gray-500">${x.key}</span><span class="font-medium ml-2">${x.title}</span></div><span class="px-2 py-1 rounded text-xs font-medium status-${x.status}">${x.status.replace('_',' ')}</span></div><p class="text-sm text-gray-500 mt-1 truncate">${x.description}</p></div>`).join('')}async function showDetail(id){const r=await fetch(API+'/tickets/'+id);curTkt=await r.json();document.getElementById('detail-key').textContent=curTkt.key;document.getElementById('detail-content').innerHTML=`<h2 class="text-xl font-semibold">${curTkt.title}</h2><div class="flex gap-2 mt-2"><span class="px-2 py-1 rounded text-xs font-medium status-${curTkt.status}">${curTkt.status.replace('_',' ')}</span><span class="px-2 py-1 rounded text-xs bg-gray-100">${curTkt.priority}</span></div><p class="mt-4 whitespace-pre-wrap">${curTkt.description}</p><select onchange="updateStatus(this.value)" class="mt-4 border rounded px-2 py-1 text-sm"><option value="open" ${curTkt.status==='open'?'selected':''}>Open</option><option value="in_progress" ${curTkt.status==='in_progress'?'selected':''}>In Progress</option><option value="resolved" ${curTkt.status==='resolved'?'selected':''}>Resolved</option><option value="closed" ${curTkt.status==='closed'?'selected':''}>Closed</option></select>`;loadComments();document.getElementById('detail-modal').classList.remove('hidden');document.getElementById('detail-modal').classList.add('flex')}async function loadComments(){const r=await fetch(API+'/tickets/'+curTkt.id+'/comments'),c=await r.json();document.getElementById('comments').innerHTML=c.length?c.map(x=>`<div class="bg-gray-50 rounded-lg p-3"><div class="flex justify-between text-sm"><span class="font-medium">${x.author}</span><span class="text-gray-500">${new Date(x.created_at).toLocaleString()}</span></div><pre class="mt-1 whitespace-pre-wrap font-sans text-sm">${x.content}</pre></div>`).join(''):'<div class="text-gray-500 text-sm">No comments</div>'}async function addComment(e){e.preventDefault();const i=document.getElementById('comment-input');if(!i.value.trim())return;await fetch(API+'/tickets/'+curTkt.id+'/comments',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({author:'user',content:i.value})});i.value='';loadComments()}async function updateStatus(s){await fetch(API+'/tickets/'+curTkt.id,{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({status:s})});loadTickets()}function hideDetail(){document.getElementById('detail-modal').classList.add('hidden');document.getElementById('detail-modal').classList.remove('flex')}function showProjectModal(){document.getElementById('project-modal').classList.remove('hidden');document.getElementById('project-modal').classList.add('flex')}function hideProjectModal(){document.getElementById('project-modal').classList.add('hidden');document.getElementById('project-modal').classList.remove('flex')}function showTicketModal(){document.getElementById('ticket-modal').classList.remove('hidden');document.getElementById('ticket-modal').classList.add('flex')}function hideTicketModal(){document.getElementById('ticket-modal').classList.add('hidden');document.getElementById('ticket-modal').classList.remove('flex')}async function createProject(e){e.preventDefault();const f=e.target;await fetch(API+'/projects',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({name:f.name.value,key:f.key.value.toUpperCase(),webhook_url:f.webhook_url.value||null})});f.reset();hideProjectModal();loadProjects()}async function createTicket(e){e.preventDefault();const f=e.target;await fetch(API+'/tickets',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({project_id:curProj.id,title:f.title.value,description:f.description.value,priority:f.priority.value})});f.reset();hideTicketModal();loadTickets();loadProjects()}</script></body></html>"""
 
 @app.get("/", response_class=HTMLResponse)
 async def root():
