trackops 2.0.2 → 2.0.4

package/ui/js/views/timeline.js

@@ -0,0 +1,265 @@
+/**
+ * timeline.js — Vista de línea temporal con milestones y tareas
+ * Muestra barras horizontales por tarea y diamantes para milestones.
+ */
+
+import { icon } from '../icons.js';
+import * as state from '../state.js';
+import { esc, formatDate } from '../utils.js';
+import { t } from '../i18n.js';
+
+/** Constantes de layout */
+const ROW_HEIGHT = 32;
+const ROW_GAP = 6;
+const LABEL_WIDTH = 200;
+const DAY_WIDTH = 28;
+const HEADER_HEIGHT = 40;
+const MILESTONE_SIZE = 14;
+
+export async function render() {
+  const payload = state.getPayload();
+  if (!payload) {
+    return `<div class="empty-state" style="margin:3rem auto;max-width:440px">
+      ${icon('alertCircle', 32)}
+      <p>${t('ui.timeline.noData', {}, 'No project data available.')}</p>
+    </div>`;
+  }
+
+  const { control, derived } = payload;
+  const tasks = (control.tasks || []).filter(t => t.status !== 'cancelled');
+  const milestones = control.milestones || [];
+
+  if (tasks.length === 0 && milestones.length === 0) {
+    return `<div class="empty-state" style="margin:3rem auto;max-width:440px">
+      ${icon('timeline', 32)}
+      <h3>${t('ui.timeline.empty', {}, 'No timeline data')}</h3>
+      <p style="font-size:var(--text-sm);color:var(--text-secondary)">${t('ui.timeline.emptyDesc', {}, 'Create tasks and milestones to see the timeline.')}</p>
+    </div>`;
+  }
+
+  // Calcular rango de fechas
+  const { startDate, endDate, days } = _computeDateRange(tasks, milestones);
+  const totalWidth = LABEL_WIDTH + days.length * DAY_WIDTH;
+  const totalHeight = HEADER_HEIGHT + (tasks.length + milestones.length) * (ROW_HEIGHT + ROW_GAP) + 40;
+
+  return `
+    <div class="view-enter">
+      <div class="section-header">
+        <div class="section-header-left">
+          <p class="eyebrow">${t('ui.timeline.eyebrow', {}, 'Timeline')}</p>
+          <h2>${t('ui.timeline.title', {}, 'Project timeline')}</h2>
+        </div>
+        <div class="section-header-right">
+          <span class="badge badge-muted">${tasks.length} ${t('ui.timeline.tasks', {}, 'tasks')}</span>
+          <span class="badge badge-accent">${milestones.length} ${t('ui.timeline.milestones', {}, 'milestones')}</span>
+        </div>
+      </div>
+
+      <div class="timeline-container" role="img" aria-label="${t('ui.timeline.ariaLabel', {}, 'Project timeline chart')}">
+        <div class="timeline-scroll" style="overflow-x:auto;overflow-y:visible">
+          <svg width="${totalWidth}" height="${totalHeight}" viewBox="0 0 ${totalWidth} ${totalHeight}" class="timeline-svg">
+            <defs>
+              <style>
+                .tl-grid { stroke: var(--border); stroke-width: 0.5; }
+                .tl-today { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 4 2; }
+                .tl-label { fill: var(--text-secondary); font-family: var(--font-ui); font-size: 11px; }
+                .tl-date { fill: var(--text-muted); font-family: var(--font-mono); font-size: 10px; }
+                .tl-bar { rx: 4; ry: 4; cursor: pointer; transition: opacity 0.15s; }
+                .tl-bar:hover { opacity: 0.85; }
+                .tl-milestone { fill: var(--accent); }
+                .tl-milestone-label { fill: var(--accent); font-family: var(--font-heading); font-size: 11px; font-weight: 700; }
+              </style>
+            </defs>
+
+            <!-- Date header -->
+            ${_renderDateHeader(days, startDate)}
+
+            <!-- Grid lines -->
+            ${_renderGrid(days, totalHeight)}
+
+            <!-- Today marker -->
+            ${_renderTodayLine(days, startDate, totalHeight)}
+
+            <!-- Task bars -->
+            ${_renderTaskBars(tasks, days, startDate)}
+
+            <!-- Milestones -->
+            ${_renderMilestones(milestones, tasks.length, days, startDate)}
+          </svg>
+        </div>
+      </div>
+
+      <!-- Legend -->
+      <div class="timeline-legend" style="margin-top:var(--space-4);display:flex;gap:var(--space-5);flex-wrap:wrap">
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--success)"></span> ${t('status.completed', {}, 'Completed')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--accent)"></span> ${t('status.in_progress', {}, 'In progress')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--warning)"></span> ${t('status.pending', {}, 'Pending')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--danger)"></span> ${t('status.blocked', {}, 'Blocked')}</div>
+        <div class="donut-legend-item"><span class="donut-legend-dot" style="background:var(--info)"></span> ${t('status.in_review', {}, 'In review')}</div>
+        <div class="donut-legend-item">
+          <svg width="12" height="12"><polygon points="6,0 12,6 6,12 0,6" fill="var(--accent)"/></svg>
+          ${t('ui.timeline.milestone', {}, 'Milestone')}
+        </div>
+      </div>
+    </div>
+  `;
+}
+
+// ─────────────────────────────── DATE COMPUTATION ────────────────────────────
+
+function _computeDateRange(tasks, milestones) {
+  const today = new Date();
+  let min = new Date(today);
+  let max = new Date(today);
+
+  // From task history
+  tasks.forEach(task => {
+    (task.history || []).forEach(h => {
+      const d = new Date(h.at);
+      if (d < min) min = new Date(d);
+      if (d > max) max = new Date(d);
+    });
+  });
+
+  // From milestones
+  milestones.forEach(m => {
+    if (m.date) {
+      const d = new Date(m.date);
+      if (d < min) min = new Date(d);
+      if (d > max) max = new Date(d);
+    }
+  });
+
+  // Padding: 3 days before, 7 days after
+  min.setDate(min.getDate() - 3);
+  max.setDate(max.getDate() + 7);
+
+  const days = [];
+  for (let d = new Date(min); d <= max; d.setDate(d.getDate() + 1)) {
+    days.push(new Date(d));
+  }
+
+  return { startDate: min, endDate: max, days };
+}
+
+function _dayIndex(days, dateStr) {
+  const target = dateStr.slice(0, 10);
+  return days.findIndex(d => d.toISOString().slice(0, 10) === target);
+}
+
+// ─────────────────────────────── SVG RENDERS ─────────────────────────────────
+
+function _renderDateHeader(days, startDate) {
+  const labels = [];
+  let lastMonth = '';
+
+  days.forEach((d, i) => {
+    const x = LABEL_WIDTH + i * DAY_WIDTH;
+    const dayNum = d.getDate();
+    const month = d.toLocaleString('default', { month: 'short' });
+
+    // Show day number for 1st, 5th, 10th, 15th, 20th, 25th
+    if (dayNum === 1 || dayNum === 5 || dayNum === 10 || dayNum === 15 || dayNum === 20 || dayNum === 25) {
+      labels.push(`<text x="${x + DAY_WIDTH / 2}" y="14" text-anchor="middle" class="tl-date">${dayNum}</text>`);
+    }
+
+    // Month label on 1st
+    if (month !== lastMonth) {
+      labels.push(`<text x="${x + 2}" y="30" class="tl-date" font-weight="700">${month}</text>`);
+      lastMonth = month;
+    }
+  });
+
+  return labels.join('\n');
+}
+
+function _renderGrid(days, totalHeight) {
+  return days.map((d, i) => {
+    const x = LABEL_WIDTH + i * DAY_WIDTH;
+    const isWeekend = d.getDay() === 0 || d.getDay() === 6;
+    const opacity = isWeekend ? 0.06 : 0;
+    return `
+      ${opacity > 0 ? `<rect x="${x}" y="${HEADER_HEIGHT}" width="${DAY_WIDTH}" height="${totalHeight - HEADER_HEIGHT}" fill="var(--text-muted)" opacity="${opacity}"/>` : ''}
+      ${d.getDay() === 1 ? `<line x1="${x}" y1="${HEADER_HEIGHT}" x2="${x}" y2="${totalHeight}" class="tl-grid"/>` : ''}
+    `;
+  }).join('');
+}
+
+function _renderTodayLine(days, startDate, totalHeight) {
+  const todayStr = new Date().toISOString().slice(0, 10);
+  const idx = _dayIndex(days, todayStr);
+  if (idx < 0) return '';
+  const x = LABEL_WIDTH + idx * DAY_WIDTH + DAY_WIDTH / 2;
+  return `<line x1="${x}" y1="${HEADER_HEIGHT}" x2="${x}" y2="${totalHeight}" class="tl-today"/>`;
+}
+
+function _renderTaskBars(tasks, days, startDate) {
+  const statusColor = {
+    completed: 'var(--success)',
+    in_progress: 'var(--accent)',
+    in_review: 'var(--info)',
+    blocked: 'var(--danger)',
+    pending: 'var(--warning)',
+    cancelled: 'var(--text-muted)',
+  };
+
+  return tasks.map((task, i) => {
+    const y = HEADER_HEIGHT + i * (ROW_HEIGHT + ROW_GAP);
+    const color = statusColor[task.status] || 'var(--text-muted)';
+
+    // Find start and end dates from history
+    const history = task.history || [];
+    const createEntry = history.find(h => h.action === 'create') || history[0];
+    const completeEntry = history.find(h => h.action === 'complete');
+    const startEntry = history.find(h => h.action === 'start') || createEntry;
+
+    if (!startEntry) {
+      // No history, just show label
+      return `<text x="8" y="${y + ROW_HEIGHT / 2 + 4}" class="tl-label">${_truncate(task.title, 24)}</text>`;
+    }
+
+    const startIdx = Math.max(0, _dayIndex(days, startEntry.at));
+    const endIdx = completeEntry
+      ? Math.max(startIdx + 1, _dayIndex(days, completeEntry.at) + 1)
+      : Math.max(startIdx + 1, _dayIndex(days, new Date().toISOString()));
+
+    const barX = LABEL_WIDTH + startIdx * DAY_WIDTH;
+    const barW = Math.max(DAY_WIDTH, (endIdx - startIdx) * DAY_WIDTH);
+
+    return `
+      <g>
+        <text x="8" y="${y + ROW_HEIGHT / 2 + 4}" class="tl-label">${_truncate(task.title, 24)}</text>
+        <rect x="${barX}" y="${y + 4}" width="${barW}" height="${ROW_HEIGHT - 8}" fill="${color}" class="tl-bar" opacity="0.7">
+          <title>${esc(task.title)} (${task.status})</title>
+        </rect>
+      </g>
+    `;
+  }).join('');
+}
+
+function _renderMilestones(milestones, taskCount, days, startDate) {
+  return milestones.map((m, i) => {
+    if (!m.date) return '';
+    const idx = _dayIndex(days, m.date);
+    if (idx < 0) return '';
+
+    const y = HEADER_HEIGHT + (taskCount + i) * (ROW_HEIGHT + ROW_GAP) + ROW_HEIGHT / 2;
+    const x = LABEL_WIDTH + idx * DAY_WIDTH + DAY_WIDTH / 2;
+    const half = MILESTONE_SIZE / 2;
+
+    return `
+      <g>
+        <text x="8" y="${y + 4}" class="tl-milestone-label">${_truncate(m.title, 24)}</text>
+        <polygon points="${x},${y - half} ${x + half},${y} ${x},${y + half} ${x - half},${y}" class="tl-milestone">
+          <title>${esc(m.title)} — ${formatDate(m.date, 'date')}</title>
+        </polygon>
+      </g>
+    `;
+  }).join('');
+}
+
+function _truncate(str, max) {
+  if (!str) return '';
+  const s = String(str);
+  return s.length > max ? esc(s.slice(0, max - 1)) + '…' : esc(s);
+}

package/ui/js/views/topbar.js

@@ -1,5 +1,8 @@
 /**
- * topbar.js — Barra superior del dashboard
+ * topbar.js — Top bar (glassmorphism redesign)
+ *
+ * Simplified: project selector and locale selector moved out.
+ * Keeps hamburger, search, timer, repo badge, sync, theme, refresh.
  */
 
 import { icon } from '../icons.js';
@@ -10,24 +13,28 @@ import { esc, debounce } from '../utils.js';
 import * as theme from '../theme.js';
 import { t } from '../i18n.js';
 
-/** Renderiza el topbar */
+/** Render the topbar into #topbar */
 export function render() {
   const el = document.getElementById('topbar');
   if (!el) return;
 
-  const payload  = state.getPayload();
-  const projects = state.get('projects');
-  const currentId = state.get('currentProjectId');
-  const currentLocale = state.get('locale') || payload?.i18n?.locale || 'es';
-  const runtime  = payload?.runtime;
+  const payload = state.getPayload();
+  const runtime = payload?.runtime;
 
   el.innerHTML = `
     <div class="topbar">
       <!-- Hamburger (mobile) -->
-      <button class="topbar-hamburger" type="button" id="sidebar-toggle" aria-label="${t('ui.topbar.openMenu', {}, 'Open menu')}" aria-expanded="false" aria-controls="sidebar">
+      <button class="topbar-hamburger" type="button" id="sidebar-toggle"
+        aria-label="${t('ui.topbar.openMenu', {}, 'Open menu')}"
+        aria-expanded="false" aria-controls="sidebar">
         <span></span><span></span><span></span>
       </button>
 
+      <!-- Active project name -->
+      <div class="topbar-project-name" id="topbar-project-name">
+        ${_renderProjectName()}
+      </div>
+
       <!-- Search -->
       <div class="topbar-search">
         <div class="search-wrapper" role="search">
@@ -36,45 +43,53 @@ export function render() {
             type="search"
             id="global-search"
             aria-label="${t('ui.topbar.searchAria', {}, 'Search tasks')}"
-            placeholder="${t('ui.topbar.searchPlaceholder', {}, 'Search tasks…')}"
+            placeholder="${t('ui.topbar.searchPlaceholder', {}, 'Search tasks\u2026')}"
             autocomplete="off"
             value="${esc(state.get('searchQuery'))}"
           />
-          <span class="search-kbd" aria-hidden="true">⌘F</span>
+          <span class="search-kbd" aria-hidden="true">\u2318F</span>
         </div>
       </div>
 
-      <!-- Derecha -->
+      <!-- Right -->
       <div class="topbar-right">
-
-        <!-- Timer activo -->
-        <div class="topbar-timer" id="topbar-timer" aria-label="${t('ui.topbar.timer', {}, 'Time tracking')}" aria-live="polite">
+        <!-- Timer -->
+        <div class="topbar-timer" id="topbar-timer"
+          aria-label="${t('ui.topbar.timer', {}, 'Time tracking')}" aria-live="polite">
           <span class="topbar-timer-dot" aria-hidden="true"></span>
           <span id="topbar-timer-display">00:00:00</span>
         </div>
 
-        <!-- Repo status -->
+        <!-- Repo badge -->
         ${runtime ? _renderRepoBadge(runtime) : ''}
 
-        <!-- Project selector -->
-        ${projects.length > 0 ? _renderProjectSelector(projects, currentId) : ''}
-
-        <!-- Locale selector -->
-        ${_renderLocaleSelector(currentLocale)}
-
-        <!-- Sync button -->
-        <button class="btn btn-ghost btn-sm" id="sync-btn" type="button" aria-label="${t('ui.topbar.syncAria', {}, 'Sync documentation')}">
+        <!-- Sync -->
+        <button class="btn btn-ghost btn-sm" id="sync-btn" type="button"
+          aria-label="${t('ui.topbar.syncAria', {}, 'Sync documentation')}">
           ${icon('sync', 16)} ${t('ui.topbar.sync', {}, 'Sync')}
         </button>
 
+        <!-- Language selector -->
+        <div class="topbar-locale" id="topbar-locale">
+          <button class="btn btn-ghost btn-sm btn-icon" type="button" id="locale-toggle-btn"
+            aria-label="${t('ui.topbar.locale', {}, 'Change language')}"
+            title="${t('ui.topbar.locale', {}, 'Change language')}">
+            ${icon('globe', 16)}
+          </button>
+          <div class="locale-dropdown is-hidden" id="locale-dropdown">
+            <button class="locale-option ${_currentLocale() === 'es' ? 'is-active' : ''}" data-locale="es" type="button">Español</button>
+            <button class="locale-option ${_currentLocale() === 'en' ? 'is-active' : ''}" data-locale="en" type="button">English</button>
+          </div>
+        </div>
+
         <!-- Theme toggle -->
         ${theme.renderButton()}
 
         <!-- Refresh -->
-        <button class="btn btn-ghost btn-sm btn-icon" id="refresh-btn" type="button" aria-label="${t('ui.topbar.refresh', {}, 'Refresh state')}">
+        <button class="btn btn-ghost btn-sm btn-icon" id="refresh-btn" type="button"
+          aria-label="${t('ui.topbar.refresh', {}, 'Refresh state')}">
           ${icon('refresh', 16)}
         </button>
-
       </div>
     </div>
   `;
@@ -82,78 +97,55 @@ export function render() {
   _bindEvents();
 }
 
+/* ── Helpers ─────────────────────────────────────────────────────────── */
+
+function _renderProjectName() {
+  const projects = state.get('projects') || [];
+  const currentId = state.get('currentProjectId');
+  const current = projects.find(p => p.id === currentId);
+  if (!current) return '';
+  return `
+    <span class="topbar-project-icon" aria-hidden="true">${icon('folder', 14)}</span>
+    <span class="topbar-project-label">${esc(current.name)}</span>
+  `;
+}
+
+function _currentLocale() {
+  return state.get('locale') || 'es';
+}
+
 function _renderRepoBadge(runtime) {
   const isClean = runtime.clean;
   const label = isClean
-    ? t('ui.topbar.repoClean', {}, 'Clean repo')
+    ? t('ui.topbar.repoClean', {}, 'Clean')
     : t('ui.topbar.repoDirty', {
         staged: runtime.staged,
         unstaged: runtime.unstaged,
         untracked: runtime.untracked,
       }, `${runtime.staged}s ${runtime.unstaged}u ${runtime.untracked}?`);
+
   return `
     <div class="repo-badge ${isClean ? 'clean' : 'dirty'}" title="${esc(runtime.branch || '')}">
       <span class="repo-badge-dot" aria-hidden="true"></span>
-      <span>${icon('gitBranch', 12)} ${esc(runtime.branch || t('ui.topbar.noBranch', {}, 'no branch'))} · ${label}</span>
-    </div>
-  `;
-}
-
-function _renderProjectSelector(projects, currentId) {
-  const options = projects.map(p =>
-    `<option value="${esc(p.id)}" ${p.id === currentId ? 'selected' : ''} ${p.available ? '' : 'disabled'}>
-      ${esc(p.name)}${p.available ? '' : ` (${t('ui.topbar.unavailable', {}, 'unavailable')})`}
-    </option>`
-  ).join('');
-
-  return `
-    <div class="project-select-wrapper" title="${t('ui.topbar.activeProject', {}, 'Active project')}">
-      <select id="project-select" aria-label="${t('ui.topbar.activeProject', {}, 'Active project')}">
-        ${options}
-      </select>
-    </div>
-  `;
-}
-
-function _renderLocaleSelector(currentLocale) {
-  return `
-    <div class="project-select-wrapper locale-select-wrapper" title="${t('ui.topbar.language', {}, 'Language')}">
-      <select id="locale-select" aria-label="${t('ui.topbar.languageAria', {}, 'Select dashboard language')}">
-        <option value="es" ${currentLocale === 'es' ? 'selected' : ''}>${t('ui.topbar.languageEs', {}, 'ES')}</option>
-        <option value="en" ${currentLocale === 'en' ? 'selected' : ''}>${t('ui.topbar.languageEn', {}, 'EN')}</option>
-      </select>
+      <span>${icon('gitBranch', 12)} ${esc(runtime.branch || t('ui.topbar.noBranch', {}, 'no branch'))} \u00b7 ${label}</span>
     </div>
   `;
 }
 
-function _applyLocaleState(payload) {
-  if (!payload) return;
-  state.update('payload', payload);
-  if (payload.i18n) {
-    state.update({
-      phases: payload.i18n.phases || [],
-      statusLabels: payload.i18n.statusLabels || {},
-      locale: payload.i18n.locale || 'es',
-      messages: payload.i18n.messages || {},
-    });
-  }
-}
+/* ── Event bindings ──────────────────────────────────────────────────── */
 
 function _bindEvents() {
-  // Hamburger → sidebar open
+  // Hamburger -> sidebar toggle
   document.getElementById('sidebar-toggle')?.addEventListener('click', () => {
     const sidebar = document.getElementById('sidebar');
-    const isOpen  = sidebar?.classList.toggle('is-open');
+    const isOpen = sidebar?.classList.toggle('is-open');
     document.getElementById('sidebar-toggle')?.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
   });
 
-  // Theme toggle
-  theme.bindButton();
-
-  // Cerrar sidebar al hacer clic fuera (mobile)
+  // Close sidebar on outside click (mobile)
   document.addEventListener('click', e => {
     const sidebar = document.getElementById('sidebar');
-    const toggle  = document.getElementById('sidebar-toggle');
+    const toggle = document.getElementById('sidebar-toggle');
     if (sidebar?.classList.contains('is-open') &&
         !sidebar.contains(e.target) && !toggle?.contains(e.target)) {
       sidebar.classList.remove('is-open');
@@ -161,41 +153,13 @@ function _bindEvents() {
     }
   });
 
-  // Project selector
-  document.getElementById('project-select')?.addEventListener('change', async e => {
-    const id = e.target.value;
-    state.update('currentProjectId', id);
-    localStorage.setItem('ops-dashboard-project', id);
-    state.update('selectedTaskId', null);
-    // Trigger refresh global
-    window.dispatchEvent(new CustomEvent('ops:refresh'));
-  });
-
-  document.getElementById('locale-select')?.addEventListener('change', async e => {
-    const select = e.target;
-    const previousLocale = state.get('locale') || 'es';
-    const nextLocale = select.value;
-
-    if (nextLocale === previousLocale) return;
-
-    select.disabled = true;
-    try {
-      const result = await api.updateProjectLocale(nextLocale);
-      _applyLocaleState(result.state);
-      flash(t('ui.topbar.localeUpdated', {}, 'Language updated.'), 'success');
-      window.dispatchEvent(new CustomEvent('ops:refresh'));
-    } catch (err) {
-      select.value = previousLocale;
-      flash(err.message, 'error');
-    } finally {
-      select.disabled = false;
-    }
-  });
+  // Theme toggle
+  theme.bindButton();
 
   // Sync button
   document.getElementById('sync-btn')?.addEventListener('click', async () => {
     const btn = document.getElementById('sync-btn');
-    if (btn) { btn.disabled = true; btn.innerHTML = `${icon('sync', 16)} ${t('ui.topbar.syncing', {}, 'Syncing…')}`; }
+    if (btn) { btn.disabled = true; btn.innerHTML = `${icon('sync', 16)} ${t('ui.topbar.syncing', {}, 'Syncing\u2026')}`; }
     try {
       await api.syncDocs();
       flash(t('ui.topbar.synced', {}, 'Documentation synced.'), 'success');
@@ -212,7 +176,30 @@ function _bindEvents() {
     window.dispatchEvent(new CustomEvent('ops:refresh'));
   });
 
-  // Búsqueda global (debounced)
+  // Locale toggle
+  document.getElementById('locale-toggle-btn')?.addEventListener('click', () => {
+    document.getElementById('locale-dropdown')?.classList.toggle('is-hidden');
+  });
+  document.getElementById('locale-dropdown')?.addEventListener('click', async (e) => {
+    const btn = e.target.closest('[data-locale]');
+    if (!btn) return;
+    const locale = btn.dataset.locale;
+    try {
+      await api.updateProjectLocale(locale);
+      document.getElementById('locale-dropdown')?.classList.add('is-hidden');
+      window.dispatchEvent(new CustomEvent('ops:refresh'));
+    } catch (err) {
+      flash(`Error: ${err.message}`, 'error');
+    }
+  });
+  // Close locale dropdown on outside click
+  document.addEventListener('click', (e) => {
+    if (!e.target.closest('#topbar-locale')) {
+      document.getElementById('locale-dropdown')?.classList.add('is-hidden');
+    }
+  });
+
+  // Global search (debounced)
   const searchInput = document.getElementById('global-search');
   if (searchInput) {
     const handleSearch = debounce(e => {
@@ -221,7 +208,7 @@ function _bindEvents() {
     }, 250);
     searchInput.addEventListener('input', handleSearch);
 
-    // Atajo de teclado ⌘/Ctrl+F
+    // Keyboard shortcut Ctrl/Cmd+F
     document.addEventListener('keydown', e => {
       if ((e.metaKey || e.ctrlKey) && e.key === 'f') {
         e.preventDefault();
@@ -232,7 +219,7 @@ function _bindEvents() {
   }
 }
 
-/** Actualiza solo el timer del topbar sin re-renderizar */
+/** Update only the timer display without a full re-render */
 export function updateTimer(display) {
   const el = document.getElementById('topbar-timer-display');
   if (el) el.textContent = display;