Planner UI translated to English

private/app.html

@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="pt-BR">
+<html lang="en">
 <head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
-<title>Planner — autenticado</title>
+<title>Planner — authenticated</title>
 <style>
-  :root { --accent: #0d9488; --accent-2: #99f6e4; --danger: #e11d48; --border: #e2e8f0; --muted: #64748b; --bg: #f8fafc; --card: #fff; }
+  :root { --accent: #0d9488; --danger: #e11d48; --border: #e2e8f0; --muted: #64748b; --bg: #f8fafc; --card: #fff; }
   * { box-sizing: border-box; }
   body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: #1e293b; }
   header { background: #fff; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
@@ -35,9 +35,9 @@
   .row .t { font-size: 14px; font-weight: 500; }
   .row .s { font-size: 11px; color: var(--muted); }
   .chip { font-size: 10px; padding: 2px 8px; border-radius: 99px; font-weight: 600; white-space: nowrap; }
-  .chip.alta { background: #ffe4e6; color: #be123c; }
-  .chip.media { background: #fef3c7; color: #b45309; }
-  .chip.baixa { background: #e0f2fe; color: #0369a1; }
+  .chip.high { background: #ffe4e6; color: #be123c; }
+  .chip.medium { background: #fef3c7; color: #b45309; }
+  .chip.low { background: #e0f2fe; color: #0369a1; }
   .chip.late { background: #fef2f2; color: var(--danger); }
   .dot { width: 20px; height: 20px; border-radius: 6px; border: 2px solid #cbd5e1; background: #fff; cursor: pointer; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 12px; padding: 0; }
   .dot.on { border-color: var(--accent); background: var(--accent); }
@@ -74,28 +74,28 @@
   <div class="hwrap">
     <div class="brand"><div class="badge">🍃</div> Planner <span id="who" class="who"></span></div>
     <nav id="nav">
-      <button data-v="hoje" class="on">Hoje</button>
-      <button data-v="habitos">Hábitos</button>
-      <button data-v="tarefas">Tarefas</button>
-      <button data-v="foco">Foco</button>
-      <button data-v="sair">Sair</button>
+      <button data-v="today" class="on">Today</button>
+      <button data-v="habits">Habits</button>
+      <button data-v="tasks">Tasks</button>
+      <button data-v="focus">Focus</button>
+      <button data-v="exit">Sign out</button>
     </nav>
   </div>
 </header>
 <main>
-  <h1 id="main-title">Hoje</h1>
+  <h1 id="main-title">Today</h1>
   <div id="page"></div>
 </main>
 <div class="msg" id="msg" style="max-width:960px;margin:0 auto 12px;"></div>
 
 <script>
 'use strict';
-/* Planner autenticado: TODOS os dados vêm do servidor, identificados pela
-   sessão (cookie httpOnly). Qualquer 401 devolve o usuário ao login. */
+/* Authenticated planner: ALL data comes from the server, identified by the
+   session (httpOnly cookie). Any 401 sends the user back to the login. */
 const $ = (id) => document.getElementById(id);
 const esc = (s) => String(s ?? '').replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
-let me = null, habits = [], checkins = [], tasks = [], sessions = [], view = 'hoje';
-let selEmoji = '💧', selColor = '#0d9488', taskFilter = 'todas';
+let me = null, habits = [], checkins = [], tasks = [], sessions = [], view = 'today';
+let taskFilter = 'all';
 
 const EMOJIS = ['💧','🏃','📚','🧘','🥗','😴','✍️','💪','🌿','🎸'];
 const COLORS = ['#0d9488','#0ea5e9','#8b5cf6','#f59e0b','#f43f5e','#10b981'];
@@ -107,18 +107,18 @@ async function api(path, body, method) {
     body: body ? JSON.stringify(body) : undefined,
     credentials: 'same-origin'
   });
-  if (res.status === 401) { location.href = '/'; throw new Error('Sessão expirada'); }
+  if (res.status === 401) { location.href = '/'; throw new Error('Session expired'); }
   const data = await res.json().catch(() => ({}));
-  if (!res.ok) throw new Error(data.error || 'Erro (' + res.status + ')');
+  if (!res.ok) throw new Error(data.error || 'Error (' + res.status + ')');
   return data;
 }
 
-/* ---------- datas ---------- */
+/* ---------- dates ---------- */
 const iso = (d = new Date()) => d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0');
 const today = () => iso();
 const addDays = (d, n) => { const x = new Date(d); x.setDate(x.getDate() + n); return x; };
 const lastNDays = (n) => Array.from({ length: n }, (_, i) => iso(addDays(new Date(), -(n - 1 - i))));
-const fmt = (s) => new Intl.DateTimeFormat('pt-BR', { day: '2-digit', month: '2-digit' }).format(new Date(s + 'T12:00:00'));
+const fmt = (s) => new Intl.DateTimeFormat('en-US', { day: '2-digit', month: '2-digit' }).format(new Date(s + 'T12:00:00'));
 const done = (h, d) => checkins.some(c => c.habitId === h.id && c.date === d);
 function streak(h) {
   if (h.freq === 'weekly') return 0;
@@ -145,10 +145,10 @@ async function loadAll() {
   const [h, c, t, s] = await Promise.all([api('/api/habits'), api('/api/checkins'), api('/api/tasks'), api('/api/sessions')]);
   habits = h.habits; checkins = c.checkins; tasks = t.tasks; sessions = s.sessions;
 }
-function note(t, isErr) {
+function note(t) {
   const el = $('msg');
-  el.className = 'msg ' + (isErr ? 'err' : 'err');
-  el.textContent = (isErr ? '⚠ ' : 'ℹ ') + t;
+  el.className = 'msg err';
+  el.textContent = '⚠ ' + t;
   setTimeout(() => { el.className = 'msg'; }, 4000);
 }
 
@@ -156,53 +156,53 @@ function note(t, isErr) {
 function render() {
   document.querySelectorAll('nav button').forEach(b => b.classList.toggle('on', b.dataset.v === view));
   $('msg').className = 'msg';
-  if (view === 'hoje') vHoje();
-  else if (view === 'habitos') vHabitos();
-  else if (view === 'tarefas') vTarefas();
-  else if (view === 'foco') vFoco();
+  if (view === 'today') vToday();
+  else if (view === 'habits') vHabits();
+  else if (view === 'tasks') vTasks();
+  else if (view === 'focus') vFocus();
   bind();
 }
 
-function vHoje() {
-  $('main-title').textContent = 'Hoje';
+function vToday() {
+  $('main-title').textContent = 'Today';
   const daily = habits.filter(h => h.freq === 'daily');
   const dn = daily.filter(h => done(h, today())).length;
   const pct = daily.length ? Math.round(dn / daily.length * 100) : 0;
   const late = tasks.filter(t => !t.done && t.due && t.due < today());
   const dueToday = tasks.filter(t => !t.done && t.due === today());
-  const wd = weekDates(), dayNames = ['seg','ter','qua','qui','sex','sáb','dom'];
+  const wd = weekDates(), dayNames = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
   const tIdx = (new Date().getDay() + 6) % 7;
   $('page').innerHTML = `
     <div class="grid">
-      <div class="card stat"><b style="color:${pct === 100 ? '#0d9488' : 'inherit'}">${dn}/${daily.length}</b><span>hábitos de hoje</span></div>
-      <div class="card stat"><b style="color:${late.length ? 'var(--danger)' : 'inherit'}">${late.length}</b><span>tarefas atrasadas</span></div>
-      <div class="card stat"><b>${focusMin(today())} min</b><span>de foco hoje</span></div>
+      <div class="card stat"><b style="color:${pct === 100 ? '#0d9488' : 'inherit'}">${dn}/${daily.length}</b><span>habits done today</span></div>
+      <div class="card stat"><b style="color:${late.length ? 'var(--danger)' : 'inherit'}">${late.length}</b><span>overdue tasks</span></div>
+      <div class="card stat"><b>${focusMin(today())} min</b><span>of focus today</span></div>
     </div>
     <div class="two">
       <div class="card">
-        <h1 style="font-size:15px">Hábitos de hoje</h1>
+        <h1 style="font-size:15px">Today's habits</h1>
         ${daily.length ? daily.map(h => {
           const d = done(h, today());
           return `<div class="row">
             <button class="dot ${d ? 'on' : ''}" data-tog="${h.id}">${d ? '✓' : ''}</button>
             <span style="font-size:17px">${h.emoji}</span>
             <div class="grow"><div class="t">${esc(h.name)}</div></div>
-            ${streak(h) ? `<span class="chip media">🔥 ${streak(h)}</span>` : ''}
+            ${streak(h) ? `<span class="chip medium">🔥 ${streak(h)}</span>` : ''}
           </div>`;
-        }).join('') : '<div class="empty">Nenhum hábito diário. Crie um na aba Hábitos.</div>'}
+        }).join('') : '<div class="empty">No daily habits yet. Create one on the Habits tab.</div>'}
       </div>
       <div class="card">
-        <h1 style="font-size:15px">Tarefas para hoje</h1>
+        <h1 style="font-size:15px">Tasks for today</h1>
         ${[...late, ...dueToday].length ? [...late, ...dueToday].map(t => `
           <div class="row">
             <button class="dot" data-task="${t.id}"></button>
             <div class="grow"><div class="t" style="font-size:13px">${esc(t.title)}</div></div>
-            <span class="chip ${t.due < today() ? 'late' : ''}">${t.due < today() ? 'atrasada' : 'hoje'}</span>
-          </div>`).join('') : '<div class="empty">Tudo em ordem por aqui ✨</div>'}
+            <span class="chip ${t.due < today() ? 'late' : ''}">${t.due < today() ? 'overdue' : 'today'}</span>
+          </div>`).join('') : '<div class="empty">All clear here ✨</div>'}
       </div>
     </div>
     <div class="card">
-      <h1 style="font-size:15px">Sua semana</h1>
+      <h1 style="font-size:15px">Your week</h1>
       <div class="week" style="margin-top:10px">${wd.map((d, i) => {
         const pd = habits.length ? Math.round(habits.filter(h => done(h, d)).length / habits.length * 100) : 0;
         const future = d > today();
@@ -215,27 +215,27 @@ function vHoje() {
     </div>`;
 }
 
-function vHabitos() {
-  $('main-title').textContent = 'Hábitos';
+function vHabits() {
+  $('main-title').textContent = 'Habits';
   let selE = '💧', selC = COLORS[0];
   $('page').innerHTML = `
     <div class="card">
-      <h1 style="font-size:15px">Novo hábito</h1>
+      <h1 style="font-size:15px">New habit</h1>
       <form id="hf">
-        <label>Nome</label>
-        <input id="hName" required maxlength="80" placeholder="Ex.: Ler 20 páginas">
-        <label>Ícone</label>
+        <label>Name</label>
+        <input id="hName" required maxlength="80" placeholder="e.g. Read 20 pages">
+        <label>Icon</label>
         <div class="emoji-pick">${EMOJIS.map((e, i) => `<button type="button" data-e="${e}" class="${i === 0 ? 'on' : ''}">${e}</button>`).join('')}</div>
-        <label>Cor</label>
+        <label>Color</label>
         <div class="color-pick">${COLORS.map((c, i) => `<button type="button" data-c="${c}" class="${i === 0 ? 'on' : ''}" style="background:${c}"></button>`).join('')}</div>
-        <label>Frequência</label>
-        <select id="hFreq"><option value="daily">Todos os dias</option><option value="weekly">Semanal</option></select>
-        <div id="goalWrap" style="display:none"><label>Meta semanal: <span id="goalV">3×</span></label>
+        <label>Frequency</label>
+        <select id="hFreq"><option value="daily">Every day</option><option value="weekly">Weekly</option></select>
+        <div id="goalWrap" style="display:none"><label>Weekly goal: <span id="goalV">3×</span></label>
           <input id="hGoal" type="range" min="1" max="7" value="3" style="accent-color:var(--accent)"></div>
-        <button class="pri">Criar hábito</button>
+        <button class="pri">Create habit</button>
       </form>
     </div>
-    ${habits.map(h => habitCard(h)).join('') || '<div class="empty">Nenhum hábito ainda — crie o primeiro acima. 🌱</div>'}`;
+    ${habits.map(h => habitCard(h)).join('') || '<div class="empty">No habits yet — create your first one above. 🌱</div>'}`;
   $('hFreq').onchange = (e) => { $('goalWrap').style.display = e.target.value === 'weekly' ? 'block' : 'none'; };
   $('hGoal').oninput = (e) => { $('goalV').textContent = e.target.value + '×'; };
   document.querySelectorAll('.emoji-pick button').forEach(b => b.onclick = () => {
@@ -251,7 +251,7 @@ function vHabitos() {
     try {
       await api('/api/habits', { name: $('hName').value, emoji: selE, color: selC, freq: $('hFreq').value, goal: +$('hGoal').value });
       await loadAll(); render();
-    } catch (er) { note(er.message, true); }
+    } catch (er) { note(er.message); }
   };
 }
 
@@ -261,33 +261,33 @@ function habitCard(h) {
     <div style="display:flex;align-items:center;justify-content:space-between">
       <div style="display:flex;align-items:center;gap:10px">
         <span style="width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;background:${h.color}1a">${esc(h.emoji)}</span>
-        <div><div class="t">${esc(h.name)}</div><div class="s" style="font-size:11px;color:var(--muted)">${h.freq === 'daily' ? 'Todos os dias' : (h.goal || 3) + '× por semana · ' + weekCount(h) + '/' + (h.goal || 3) + ' nesta semana'}</div></div>
+        <div><div class="t">${esc(h.name)}</div><div class="s" style="font-size:11px;color:var(--muted)">${h.freq === 'daily' ? 'Every day' : (h.goal || 3) + '× per week · ' + weekCount(h) + '/' + (h.goal || 3) + ' this week'}</div></div>
       </div>
-      <button class="x" data-delh="${h.id}" title="Excluir">✕</button>
+      <button class="x" data-delh="${h.id}" title="Delete">✕</button>
     </div>
     <div class="days">${last7.map(d => {
       const on = done(h, d), future = d > today();
       return `<button class="day ${on ? 'on' : ''}" data-h="${h.id}" data-d="${d}" ${future ? 'disabled' : ''} ${on ? `style="background:${h.color}"` : ''}>${fmt(d).slice(0, 2)}</button>`;
     }).join('')}</div>
-    <div style="font-size:12px;color:var(--muted)">🔥 ${streak(h)} dias seguidos · ${rate30(h)}% em 30 dias</div>
+    <div style="font-size:12px;color:var(--muted)">🔥 ${streak(h)} day streak · ${rate30(h)}% in 30 days</div>
   </div>`;
 }
 
-function vTarefas() {
-  $('main-title').textContent = 'Tarefas';
+function vTasks() {
+  $('main-title').textContent = 'Tasks';
   let list = tasks.filter(t => !t.done);
-  if (taskFilter === 'hoje') list = list.filter(t => t.due && t.due <= today());
-  if (taskFilter === 'semana') list = list.filter(t => t.due && t.due <= iso(addDays(new Date(), 7)));
-  if (taskFilter === 'concluidas') list = tasks.filter(t => t.done);
+  if (taskFilter === 'today') list = list.filter(t => t.due && t.due <= today());
+  if (taskFilter === 'week') list = list.filter(t => t.due && t.due <= iso(addDays(new Date(), 7)));
+  if (taskFilter === 'done') list = tasks.filter(t => t.done);
   $('page').innerHTML = `
     <div class="card">
       <form id="tf" style="display:flex;gap:8px;flex-wrap:wrap">
-        <input id="tTitle" required maxlength="200" placeholder="Adicionar uma tarefa…" style="flex:2;min-width:180px">
-        <select id="tPrio" style="width:auto"><option value="alta">🔴 Alta</option><option value="media" selected>🟡 Média</option><option value="baixa">🔵 Baixa</option></select>
+        <input id="tTitle" required maxlength="200" placeholder="Add a task…" style="flex:2;min-width:180px">
+        <select id="tPrio" style="width:auto"><option value="alta">🔴 High</option><option value="media" selected>🟡 Medium</option><option value="baixa">🔵 Low</option></select>
         <input id="tDue" type="date" value="${today()}" style="width:auto">
-        <button class="pri" style="margin-top:0">Adicionar</button>
+        <button class="pri" style="margin-top:0">Add</button>
       </form>
-      <div style="margin-top:12px;display:flex;gap:6px;flex-wrap:wrap">${['todas','hoje','semana','concluidas'].map(f =>
+      <div style="margin-top:12px;display:flex;gap:6px;flex-wrap:wrap">${['all','today','week','done'].map(f =>
         `<button class="ghost ${taskFilter === f ? 'on' : ''}" data-f="${f}" style="${taskFilter === f ? 'background:#f0fdfa;border-color:#0d9488;color:#0f766e' : ''}">${f}</button>`).join('')}</div>
     </div>
     <div>${list.map(t => {
@@ -295,26 +295,26 @@ function vTarefas() {
       return `<div class="row">
         <button class="dot ${t.done ? 'on' : ''}" data-task="${t.id}">${t.done ? '✓' : ''}</button>
         <div class="grow"><div class="t" style="${t.done ? 'text-decoration:line-through;color:var(--muted)' : ''}">${esc(t.title)}</div></div>
-        <span class="chip ${t.priority}">${({ alta: 'alta', media: 'média', baixa: 'baixa' })[t.priority]}</span>
-        ${t.due ? `<span class="chip ${late ? 'late' : ''}">${late ? 'atrasada · ' : ''}${fmt(t.due)}</span>` : ''}
-        <button class="x" data-up="${t.id}" title="Subir">↑</button>
-        <button class="x" data-delt="${t.id}" title="Excluir">✕</button>
+        <span class="chip ${t.priority}">${({ alta: 'high', media: 'medium', baixa: 'low' })[t.priority]}</span>
+        ${t.due ? `<span class="chip ${late ? 'late' : ''}">${late ? 'overdue · ' : ''}${fmt(t.due)}</span>` : ''}
+        <button class="x" data-up="${t.id}" title="Move up">↑</button>
+        <button class="x" data-delt="${t.id}" title="Delete">✕</button>
       </div>`;
-    }).join('') || '<div class="empty">Nada aqui. 🎉</div>'}</div>`;
+    }).join('') || '<div class="empty">Nothing here. 🎉</div>'}</div>`;
   document.querySelectorAll('[data-f]').forEach(b => b.onclick = () => { taskFilter = b.dataset.f; render(); });
   $('tf').onsubmit = async (e) => {
     e.preventDefault();
     try {
       await api('/api/tasks', { title: $('tTitle').value, priority: $('tPrio').value, due: $('tDue').value || null });
       await loadAll(); render();
-    } catch (er) { note(er.message, true); }
+    } catch (er) { note(er.message); }
   };
 }
 
-/* ---------------- Foco ---------------- */
+/* ---------------- Focus ---------------- */
 let pomo = { mode: 'work', total: 25 * 60, rem: 25 * 60, run: false, timer: null, label: '' };
-function vFoco() {
-  $('main-title').textContent = 'Foco';
+function vFocus() {
+  $('main-title').textContent = 'Focus';
   const circ = 2 * Math.PI * 80;
   $('page').innerHTML = `
     <div class="two">
@@ -326,26 +326,26 @@ function vFoco() {
             stroke-dasharray="${circ}" stroke-dashoffset="${circ * (1 - pomo.rem / pomo.total)}" style="transition:stroke-dashoffset .3s linear"/>
         </svg>
         <div class="tmin" id="tmin">${fmtT(pomo.rem)}</div>
-        <div class="tmode">${pomo.mode === 'work' ? 'FOCO' : 'PAUSA'}</div>
-        <input id="plabel" placeholder="Em que você vai focar?" style="margin-top:14px" value="${esc(pomo.label || '')}">
+        <div class="tmode">${pomo.mode === 'work' ? 'FOCUS' : 'BREAK'}</div>
+        <input id="plabel" placeholder="What will you focus on?" style="margin-top:14px" value="${esc(pomo.label || '')}">
         <div style="display:flex;gap:8px;justify-content:center">
-          <button class="pri" id="ptog" style="min-width:110px">${pomo.run ? 'Pausar' : 'Iniciar'}</button>
-          <button class="ghost" id="prst" style="margin-top:12px">Zerar</button>
+          <button class="pri" id="ptog" style="min-width:110px">${pomo.run ? 'Pause' : 'Start'}</button>
+          <button class="ghost" id="prst" style="margin-top:12px">Reset</button>
         </div>
       </div>
       <div class="card">
-        <h1 style="font-size:15px">Sessões de hoje</h1>
+        <h1 style="font-size:15px">Today's sessions</h1>
         ${sessions.filter(s => iso(new Date(s.at)) === today()).map(s => `
           <div class="row" style="padding:8px 10px">
-            <div class="grow"><div class="t" style="font-size:13px">${esc(s.label || 'Sessão de foco')}</div>
-            <div class="s" style="font-size:11px;color:var(--muted)">${s.minutes} min · ${new Date(s.at).toLocaleTimeString('pt-BR', { hour: '2-digit', minute: '2-digit' })}</div></div>
-          </div>`).join('') || '<div class="empty">Nenhuma sessão hoje ainda. 🍅</div>'}
-        <p style="font-size:12px;color:var(--muted)">Total hoje: <b>${focusMin(today())} min</b> · semana: <b>${focusWeek()} min</b></p>
+            <div class="grow"><div class="t" style="font-size:13px">${esc(s.label || 'Focus session')}</div>
+            <div class="s" style="font-size:11px;color:var(--muted)">${s.minutes} min · ${new Date(s.at).toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit' })}</div></div>
+          </div>`).join('') || '<div class="empty">No sessions today yet. 🍅</div>'}
+        <p style="font-size:12px;color:var(--muted)">Today: <b>${focusMin(today())} min</b> · this week: <b>${focusWeek()} min</b></p>
       </div>
     </div>`;
   $('plabel').oninput = (e) => { pomo.label = e.target.value; };
   document.querySelectorAll('[data-p]').forEach(b => b.onclick = () => {
-    if (pomo.run) return note('Pause o timer antes de trocar.');
+    if (pomo.run) return note('Pause the timer before switching.');
     pomo.total = +b.dataset.p * 60; pomo.rem = pomo.total; pomo.mode = 'work'; render();
   });
   $('ptog').onclick = () => {
@@ -366,55 +366,55 @@ async function tick() {
   if (pomo.rem <= 0) {
     clearInterval(pomo.timer); pomo.run = false;
     if (pomo.mode === 'work') {
-      try { await api('/api/sessions', { label: pomo.label || '', minutes: Math.round(pomo.total / 60) }); } catch { /* sessão salva na próxima */ }
+      try { await api('/api/sessions', { label: pomo.label || '', minutes: Math.round(pomo.total / 60) }); } catch { /* saved next time */ }
       pomo.mode = 'break'; pomo.total = 5 * 60; pomo.rem = 5 * 60;
-      note('Ciclo concluído! Pausa de 5 min ☕');
+      note('Cycle complete! Take a 5 min break ☕');
     } else {
       pomo.mode = 'work'; pomo.total = 25 * 60; pomo.rem = 25 * 60;
-      note('Pausa encerrada. De volta ao foco! 💪');
+      note('Break over. Back to focus! 💪');
     }
     try { await loadAll(); } catch {}
     render();
   }
 }
 
-/* ---------------- Ações delegadas por data-* ---------------- */
+/* ---------------- Actions via data-* attributes ---------------- */
 function bind() {
   document.querySelectorAll('[data-tog]').forEach(b => b.onclick = async () => {
     try { await api('/api/checkins/toggle', { habitId: b.dataset.tog, date: today() }); await loadAll(); render(); }
-    catch (e) { note(e.message, true); }
+    catch (e) { note(e.message); }
   });
   document.querySelectorAll('[data-h]').forEach(b => b.onclick = async () => {
     if (b.disabled) return;
     try { await api('/api/checkins/toggle', { habitId: b.dataset.h, date: b.dataset.d }); await loadAll(); render(); }
-    catch (e) { note(e.message, true); }
+    catch (e) { note(e.message); }
   });
   document.querySelectorAll('[data-task]').forEach(b => b.onclick = async () => {
     const t = tasks.find(x => x.id === b.dataset.task);
     if (!t) return;
     try { await api('/api/tasks/' + t.id, { done: !t.done }, 'PUT'); await loadAll(); render(); }
-    catch (e) { note(e.message, true); }
+    catch (e) { note(e.message); }
   });
   document.querySelectorAll('[data-delt]').forEach(b => b.onclick = async () => {
     try { await api('/api/tasks/' + b.dataset.delt, null, 'DELETE'); await loadAll(); render(); }
-    catch (e) { note(e.message, true); }
+    catch (e) { note(e.message); }
   });
   document.querySelectorAll('[data-delh]').forEach(b => b.onclick = async () => {
-    if (!confirm('Excluir este hábito e seu histórico?')) return;
+    if (!confirm('Delete this habit and its history?')) return;
     try { await api('/api/habits/' + b.dataset.delh, null, 'DELETE'); await loadAll(); render(); }
-    catch (e) { note(e.message, true); }
+    catch (e) { note(e.message); }
   });
   document.querySelectorAll('[data-up]').forEach(b => b.onclick = async () => {
     const i = tasks.findIndex(t => t.id === b.dataset.up);
     if (i <= 0) return;
     [tasks[i - 1], tasks[i]] = [tasks[i], tasks[i - 1]];
     try { await api('/api/tasks/reorder', { ids: tasks.map(t => t.id) }); await loadAll(); render(); }
-    catch (e) { note(e.message, true); }
+    catch (e) { note(e.message); }
   });
 }
 
 document.querySelectorAll('nav button').forEach(b => b.onclick = async () => {
-  if (b.dataset.v === 'sair') {
+  if (b.dataset.v === 'exit') {
     try { await fetch('/api/logout', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, body: '{}' }); } catch {}
     location.href = '/';
     return;
@@ -423,7 +423,7 @@ document.querySelectorAll('nav button').forEach(b => b.onclick = async () => {
   render();
 });
 
-/* ---------------- Init: exige sessão válida ---------------- */
+/* ---------------- Init: requires a valid session ---------------- */
 (async function init() {
   try {
     const r = await api('/api/me');
@@ -432,8 +432,8 @@ document.querySelectorAll('nav button').forEach(b => b.onclick = async () => {
     await loadAll();
     render();
   } catch (e) {
-    if (e.message !== 'Sessão expirada') {
-      document.body.innerHTML = '<p style="font-family:sans-serif;padding:40px;text-align:center">Erro ao carregar: ' + esc(e.message) + '</p>';
+    if (e.message !== 'Session expired') {
+      document.body.innerHTML = '<p style="font-family:sans-serif;padding:40px;text-align:center">Failed to load: ' + esc(e.message) + '</p>';
     }
   }
 })();