local-kanban 1.6.3

package/public/js/horizon.js

@@ -0,0 +1,140 @@
+
+import { $, LANG, api, esc, seg, tr } from './core.js';
+import { DOW, isoWeek, ymdLocal } from './settings.js';
+import { styledPrompt } from './sidebar.js';
+import { SHORT_MONTHS } from './sse.js';
+
+const HZ_TRASH = '<svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true"><path d="M2.5 4h11M6.5 4V2.8a.8.8 0 0 1 .8-.8h1.4a.8.8 0 0 1 .8.8V4M5 4l.5 9a1 1 0 0 0 1 .95h3a1 1 0 0 0 1-.95L12 4" stroke="currentColor" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" fill="none"/></svg>';
+const HORIZON_SCALES = [['days', tr('Days')], ['weeks', tr('Weeks')], ['months', tr('Months')], ['years', tr('Years')]];
+const WEEKDAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const MONTHS = LANG === 'ru'
+  ? ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь']
+  : ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+let horizonScale = 'months';
+let calMonth = null; // {y, m}
+const pad2 = (n) => String(n).padStart(2, '0');
+const weekKey = (d) => `${d.getFullYear()}-W${pad2(isoWeek(d))}`;
+const hzSaveTimers = {};
+const hzAdd = (scale, period, text) => api('POST', '/api/horizons', { scale, period, text });
+const hzPatch = (id, body) => api('PATCH', `/api/horizons/${seg(id)}`, body);
+const deleteHorizonGoal = (id) => api('DELETE', `/api/horizons/${seg(id)}`);
+function hzScheduleSave(id, text) { clearTimeout(hzSaveTimers[id]); hzSaveTimers[id] = setTimeout(() => hzPatch(id, { text }).catch(() => {}), 450); }
+
+function goalRowHTML(g) {
+  return `<div class="hz-goal${g.done ? ' done' : ''}" data-id="${g.id}">`
+    + `<button class="hz-check" data-act="toggle">${g.done ? '✓' : ''}</button>`
+    + `<input class="hz-text" data-act="text" value="${esc(g.text)}" placeholder="${tr('goal')}"${g.done ? ' readonly' : ''}>`
+    + `<button class="hz-del" data-act="del" title="${tr('delete')}">${HZ_TRASH}</button></div>`;
+}
+function wireGoals(container, afterChange) {
+  container.querySelectorAll('.hz-goal').forEach((row) => {
+    const id = row.dataset.id;
+    row.querySelector('[data-act="toggle"]').onclick = async () => { await hzPatch(id, { done: !row.classList.contains('done') }).catch(() => {}); afterChange(); };
+    const inp = row.querySelector('[data-act="text"]');
+    if (inp && !inp.readOnly) inp.oninput = () => hzScheduleSave(id, inp.value);
+    row.querySelector('[data-act="del"]').onclick = async () => { await deleteHorizonGoal(id).catch(() => {}); afterChange(); };
+  });
+  container.querySelectorAll('.hz-add-input').forEach((inp) => {
+    inp.onkeydown = async (e) => {
+      if (e.key === 'Enter' && inp.value.trim()) { await hzAdd(inp.dataset.scale, inp.dataset.period, inp.value.trim()).catch(() => {}); afterChange(inp.dataset.period); }
+    };
+  });
+}
+
+function horizonColumns(scale) {
+  const now = new Date(); now.setHours(0, 0, 0, 0);
+  const cols = [];
+  if (scale === 'years') {
+    const y = now.getFullYear();
+    for (let i = -1; i <= 3; i++) cols.push({ period: String(y + i), label: String(y + i), cur: i === 0 });
+  } else if (scale === 'months') {
+    for (let i = -1; i <= 4; i++) { const d = new Date(now.getFullYear(), now.getMonth() + i, 1); cols.push({ period: `${d.getFullYear()}-${pad2(d.getMonth() + 1)}`, label: MONTHS[d.getMonth()], sub: String(d.getFullYear()), cur: i === 0 }); }
+  } else if (scale === 'weeks') {
+    const mon = new Date(now); mon.setDate(mon.getDate() - ((mon.getDay() + 6) % 7));
+    for (let i = -1; i <= 4; i++) { const d = new Date(mon); d.setDate(d.getDate() + i * 7); cols.push({ period: weekKey(d), label: `W${isoWeek(d)}`, sub: `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]}`, cur: i === 0 }); }
+  } else {
+    for (let i = 0; i < 7; i++) { const d = new Date(now); d.setDate(d.getDate() + i); cols.push({ period: ymdLocal(d), label: tr(WEEKDAYS[d.getDay()]), sub: `${d.getDate()} ${SHORT_MONTHS[d.getMonth()]}`, cur: i === 0 }); }
+  }
+  return cols;
+}
+
+export async function renderHorizon(focusPeriod) {
+  const el = $('horizon');
+  let goals = [];
+  try { goals = await api('GET', `/api/horizons?scale=${horizonScale}`); } catch {  }
+  const byP = {};
+  for (const g of goals) (byP[g.period] ||= []).push(g);
+  const cols = horizonColumns(horizonScale);
+  el.innerHTML = `<div class="hz-wrap">
+    <div class="hz-scales">${HORIZON_SCALES.map(([v, l]) => `<button class="hz-scale${v === horizonScale ? ' active' : ''}" data-scale="${v}">${l}</button>`).join('')}</div>
+    <div class="hz-cols">${cols.map((c) => `<div class="hz-col${c.cur ? ' cur' : ''}">
+        <div class="hz-col-h">${esc(c.label)}${c.sub ? `<small>${esc(c.sub)}</small>` : ''}</div>
+        <div class="hz-goals">${(byP[c.period] || []).map(goalRowHTML).join('')}
+          <input class="hz-add-input" placeholder="${tr('Add…')}" data-scale="${horizonScale}" data-period="${c.period}"></div>
+      </div>`).join('')}</div>
+  </div>`;
+  el.querySelectorAll('.hz-scale').forEach((b) => { b.onclick = () => { horizonScale = b.dataset.scale; renderHorizon(); }; });
+  wireGoals(el, (fp) => renderHorizon(fp));
+  if (focusPeriod) el.querySelector(`.hz-add-input[data-period="${focusPeriod}"]`)?.focus();
+}
+
+export async function renderCalendar(focusPeriod) {
+  if (!calMonth) { const n = new Date(); calMonth = { y: n.getFullYear(), m: n.getMonth() }; }
+  const el = $('calendar');
+  let life = [], years = [], months = [], days = [];
+  try { [life, years, months, days] = await Promise.all(['life', 'years', 'months', 'days'].map((s) => api('GET', `/api/horizons?scale=${s}`))); } catch {  }
+  const yKey = String(calMonth.y); const mKey = `${calMonth.y}-${pad2(calMonth.m + 1)}`;
+  const byDay = {}; for (const g of days) (byDay[g.period] ||= []).push(g);
+  const card = (title, scale, period, list) => `<div class="cal-hz">
+      <div class="cal-hz-h">${esc(title)}</div>
+      <div class="hz-goals">${list.map(goalRowHTML).join('')}
+        <input class="hz-add-input" placeholder="${tr('Add…')}" data-scale="${scale}" data-period="${period}"></div>
+    </div>`;
+  const first = new Date(calMonth.y, calMonth.m, 1);
+  const start = new Date(first); start.setDate(start.getDate() - ((start.getDay() + 6) % 7));
+  const today = ymdLocal(new Date());
+  let grid = '';
+  for (let w = 0; w < 6; w++) {
+    let row = '';
+    const wd = new Date(start); wd.setDate(wd.getDate() + w * 7);
+    for (let i = 0; i < 7; i++) {
+      const d = new Date(start); d.setDate(d.getDate() + w * 7 + i);
+      const key = ymdLocal(d); const gl = byDay[key] || [];
+      row += `<div class="cal-day${d.getMonth() === calMonth.m ? '' : ' off'}${key === today ? ' today' : ''}" data-day="${key}">
+        <div class="cal-day-n">${d.getDate()}</div>
+        <div class="cal-day-goals">${gl.map((g) => `<div class="cal-chip${g.done ? ' done' : ''}" data-id="${g.id}" title="${esc(g.text)}">${esc(g.text || '…')}</div>`).join('')}</div></div>`;
+    }
+    grid += `<div class="cal-row"><div class="cal-wk">W${isoWeek(wd)}</div>${row}</div>`;
+  }
+  el.innerHTML = `<div class="cal-wrap">
+    <div class="cal-horizons">
+      ${card(tr('Life'), 'life', 'life', life)}
+      ${card(yKey, 'years', yKey, years.filter((g) => g.period === yKey))}
+      ${card(MONTHS[calMonth.m], 'months', mKey, months.filter((g) => g.period === mKey))}
+    </div>
+    <div class="cal-head">
+      <button class="cal-nav" data-nav="-1">‹</button>
+      <span class="cal-title">${MONTHS[calMonth.m]} ${calMonth.y}</span>
+      <button class="cal-nav" data-nav="1">›</button>
+      <button class="cal-today" data-nav="0">${tr('Today')}</button>
+    </div>
+    <div class="cal-grid">
+      <div class="cal-row cal-wdh"><div class="cal-wk"></div>${DOW.map((w) => `<div class="cal-wd">${tr(w)}</div>`).join('')}</div>
+      ${grid}
+    </div>
+  </div>`;
+  wireGoals(el, () => renderCalendar());
+  el.querySelectorAll('.cal-nav').forEach((b) => { b.onclick = () => {
+    const n = Number(b.dataset.nav);
+    if (n === 0) { const t = new Date(); calMonth = { y: t.getFullYear(), m: t.getMonth() }; }
+    else { let m = calMonth.m + n, y = calMonth.y; if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; } calMonth = { y, m }; }
+    renderCalendar();
+  }; });
+  el.querySelectorAll('.cal-chip').forEach((ch) => { ch.onclick = async (e) => { e.stopPropagation(); const id = ch.dataset.id; await hzPatch(id, { done: !ch.classList.contains('done') }).catch(() => {}); renderCalendar(); }; });
+  el.querySelectorAll('.cal-day').forEach((cell) => { cell.onclick = () => {
+    styledPrompt(tr('Goal for the day'), { placeholder: tr('what to do'), okLabel: tr('Add'), onSubmit: async (text) => {
+      if (text && text.trim()) { await hzAdd('days', cell.dataset.day, text.trim()).catch(() => {}); renderCalendar(); }
+    } });
+  }; });
+  if (focusPeriod) el.querySelector(`.hz-add-input[data-period="${focusPeriod}"]`)?.focus();
+}

package/public/js/init.js

@@ -0,0 +1,208 @@
+
+import { clearSelection, closeOpenSelect, initMarquee, multiAction, renderBoard, scheduleDrawLinks, selectedIds } from './board.js';
+import { chaosPending } from './chaos.js';
+import { $, ALL, CHAOS, DASH, SETTINGS, api, loadLabelPalette, seg, state } from './core.js';
+import { addChecklistItem, applyCommentDraft, applyKeepDrawer, applyTitleLabelShortcut, closeDrawer, commentDrafts, deleteTask, doAutosave, kbMoveCard, kbMoveCursor, onDrawerPaste, openDrawer, openDrawerMenu, openDrawerNew, openReturnPop, pendingAttachments, renderComments, scheduleAutosave, setKbCursor } from './drawer.js';
+import { closeProjectSettings, openProjectSettings } from './project.js';
+import { applyCompact, applyTheme, getSetting, matchKey, syncLangToServer } from './settings.js';
+import { closeTopLayer, loadTasks, maybeOnboarding, switchProject } from './sidebar.js';
+import { autoGrow, connectSSE, ensureAudio, ensureSSE, refresh, refreshSync } from './sse.js';
+
+/* ── init ── */
+$('new-task').onclick = () => openDrawerNew('backlog');
+$('drawer-close').onclick = closeDrawer;
+$('drawer-menu').onclick = openDrawerMenu;
+$('d-return-icon').onclick = openReturnPop;
+$('d-accept-btn').onclick = async () => {
+  if (!state.drawerKey) return;
+  await api('PATCH', `/api/tasks/${seg(state.drawerKey)}`, { status: 'done' });
+  closeDrawer();
+  await refresh();
+};
+$('d-desc').addEventListener('input', scheduleAutosave);
+$('d-checklist-add').onclick = addChecklistItem;
+$('d-title').addEventListener('input', (e) => { autoGrow(e.target); applyTitleLabelShortcut(); scheduleAutosave(); });
+$('d-title').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); e.target.blur(); doAutosave(); }
+});
+$('project-menu').onclick = () => openProjectSettings();
+$('c-send').onclick = async () => {
+  const body = $('c-input').value.trim();
+  if (!body || !state.drawerKey) return;
+  await api('POST', `/api/tasks/${seg(state.drawerKey)}/comments`, { body, author: 'me' });
+  commentDrafts.delete(state.drawerKey);
+  $('c-input').value = '';
+  autoGrow($('c-input'));
+  renderComments(state.drawerKey);
+};
+$('c-input').addEventListener('keydown', (e) => {
+  if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); $('c-send').click(); }
+});
+$('c-input').addEventListener('input', (e) => {
+  autoGrow(e.target);
+  if (state.drawerKey) {
+    if (e.target.value) commentDrafts.set(state.drawerKey, e.target.value);
+    else commentDrafts.delete(state.drawerKey);
+  }
+});
+$('drawer').addEventListener('paste', onDrawerPaste);
+
+let searchTimer = null;
+$('search').addEventListener('input', (e) => {
+  state.search = e.target.value.trim();
+  renderBoard();
+  clearTimeout(searchTimer);
+  searchTimer = setTimeout(loadTasks, 120);
+});
+
+window.addEventListener('resize', scheduleDrawLinks);
+$('board').addEventListener('scroll', scheduleDrawLinks, true);
+
+const POPUP_SELECTOR = '.modal-overlay, #card-menu, #drawer-menu-pop, #return-pop, .lbl-picker, #status-picker, .lightbox, .kbsel.open';
+
+function escClosePopup() {
+  if (document.querySelector('.kbsel.open')) { closeOpenSelect(); return true; }
+  if (closeTopLayer()) return true;
+  if (selectedIds.size) { clearSelection(); return true; }
+  return false;
+}
+
+document.addEventListener('keydown', (e) => {
+  if (e.key === 'Escape') {
+    if (escClosePopup()) { e.stopImmediatePropagation(); return; }
+    if (state.projSettings) {
+      const inp = document.activeElement;
+      if (inp && /^(INPUT|TEXTAREA)$/.test(inp.tagName) && $('projset').contains(inp)) inp.blur();
+      else closeProjectSettings();
+      e.stopImmediatePropagation();
+      return;
+    }
+    const ae = document.activeElement;
+    if (ae && /^(INPUT|TEXTAREA)$/.test(ae.tagName) && $('drawer').contains(ae)) {
+      ae.blur(); e.stopImmediatePropagation(); return;
+    }
+    if (!$('drawer').classList.contains('hidden') && !$('drawer').classList.contains('is-empty')) closeDrawer();
+    else if (state.kbCursor != null) setKbCursor(null);
+    return;
+  }
+  if (e.key === 'Enter' && e.metaKey && !$('drawer').classList.contains('hidden')) { doAutosave(); return; }
+
+  const inField = /^(INPUT|TEXTAREA|SELECT)$/.test(e.target.tagName) || e.target.isContentEditable;
+  const drawerClosed = $('drawer').classList.contains('hidden') || $('drawer').classList.contains('is-empty');
+
+  if (drawerClosed && !inField && (matchKey(e, 'prevProject') || matchKey(e, 'nextProject'))) {
+    e.preventDefault();
+    switchProject(matchKey(e, 'nextProject') ? 1 : -1);
+    return;
+  }
+
+  const delDefault = !(getSetting('keymap') || {}).deleteCard;
+  if ((matchKey(e, 'deleteCard') || (delDefault && e.key === 'Backspace' && !e.shiftKey && !e.metaKey && !e.ctrlKey && !e.altKey)) && !inField) {
+    if (selectedIds.size) { e.preventDefault(); multiAction('del'); return; }
+    if (!drawerClosed && state.drawerKey) { e.preventDefault(); deleteTask(state.drawerKey); return; }
+    if (drawerClosed && !$('board').classList.contains('hidden') && state.kbCursor != null) {
+      const t = state.tasks.find((x) => x.id === state.kbCursor);
+      if (t) { e.preventDefault(); deleteTask(t.key); }
+      return;
+    }
+  }
+
+  const boardVisible = !$('board').classList.contains('hidden') && !inField;
+  if (!boardVisible) return;
+
+  if (drawerClosed && matchKey(e, 'newTask')) {
+    e.preventDefault();
+    openDrawerNew('backlog');
+    return;
+  }
+  if (document.querySelector(POPUP_SELECTOR)) return;
+
+  const ARROW = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1] };
+  if (ARROW[e.key] && !e.metaKey && !e.ctrlKey && !e.altKey) {
+    e.preventDefault();
+    const [dr, dc] = ARROW[e.key];
+    if (e.shiftKey) kbMoveCard(dr, dc); else kbMoveCursor(dr, dc);
+    return;
+  }
+  if (matchKey(e, 'openCard') && state.kbCursor != null) {
+    const t = state.tasks.find((x) => x.id === state.kbCursor);
+    if (t) { e.preventDefault(); openDrawer(t.key); }
+  }
+});
+
+applyTheme();
+applyCompact();
+applyCommentDraft(null);
+state.dashRange = getSetting('dashRange');
+const sessionSlug = sessionStorage.getItem('kb.session.slug');
+if (sessionSlug) {
+  state.slug = sessionSlug;
+} else if (getSetting('startScreen') === 'chaos') {
+  state.slug = CHAOS;
+} else if (getSetting('startScreen') === 'last') {
+  const last = localStorage.getItem('kb.ui.project');
+  if (last && last !== SETTINGS) state.slug = last;
+}
+
+const launchParams = new URLSearchParams(location.search);
+const launchAction = launchParams.get('action');
+if (launchParams.get('view') === 'dash') state.slug = DASH;
+if (launchAction === 'new') {
+  const last = localStorage.getItem('kb.ui.project');
+  state.slug = (last && last !== SETTINGS && last !== DASH) ? last : ALL;
+}
+if (location.search) history.replaceState(null, '', location.pathname);
+
+let appVer = null;
+export let pendingReload = false;
+function safeToReload() {
+  const d = $('drawer');
+  const drawerBusy = !d.classList.contains('hidden') && !d.classList.contains('is-empty');
+  return !drawerBusy && !selectedIds.size && !document.querySelector(POPUP_SELECTOR) && !hasUnsavedInput();
+}
+function hasUnsavedInput() {
+  const chaos = $('chaos-input');
+  if (chaos && chaos.value.trim()) return true;
+  if (chaosPending.length || pendingAttachments.length) return true;
+  if (commentDrafts.size) return true;
+  const ae = document.activeElement;
+  if (ae && /^(INPUT|TEXTAREA)$/.test(ae.tagName) && ae.value.trim()) return true;
+  return false;
+}
+export async function checkVersion() {
+  try {
+    const res = await fetch('/api/ui-version', { cache: 'no-store' });
+    const v = String((await res.json()).mtime || '');
+    if (appVer === null) { appVer = v; return; }
+    if (v && v !== appVer) pendingReload = true;
+  } catch {  }
+  if (pendingReload && safeToReload()) location.reload();
+}
+
+if ('serviceWorker' in navigator) navigator.serviceWorker.register('/sw.js').catch(() => {});
+
+function bootDone() {
+  const html = document.documentElement;
+  if (!html.classList.contains('booting')) return;
+  html.classList.remove('booting');
+  html.classList.add('booted');
+  setTimeout(() => html.classList.remove('booted'), 400);
+}
+setTimeout(bootDone, 8000);
+
+loadLabelPalette().catch(() => {}).then(() => refresh()).catch(() => {}).then(() => {
+  bootDone();
+  refreshSync(); applyKeepDrawer();
+  if (launchAction === 'new') openDrawerNew('backlog');
+  maybeOnboarding();
+});
+syncLangToServer();
+initMarquee();
+connectSSE();
+ensureAudio();
+checkVersion();
+setInterval(refreshSync, 30000);
+setInterval(checkVersion, 30000);
+window.addEventListener('focus', checkVersion);
+setInterval(renderBoard, 60000);
+setInterval(ensureSSE, 20000);