local-kanban 1.14.1 → 1.15.0

package/CHANGELOG.md

@@ -8,6 +8,24 @@ version it goes out as and opens an empty one again. Released sections are histo
 
 ## [Unreleased]
 
+## [1.15.0]
+
+### Added
+
+- **A column can be sorted by task number.** Every column with more than one card has a sort button
+  in its header: by priority and your own order (as before), by number with the newest first, or by
+  number with the oldest first. Pinned cards stay on top either way. The choice is remembered per
+  board and column in this browser and changes only what you see: the order `kb take` follows stays
+  the same. While a column is sorted by number its cards cannot be reordered by hand, and a card
+  dragged in from another column lands where its number puts it.
+
+### Fixed
+
+- **`kb link` refuses a link type it does not know, whatever the word.** `kb link A B constructor` (or
+  `toString`) was taken for a valid type, because every object answers for those names, and the
+  board quietly made the link `related`. Now it is refused with exit code 2 before anything is
+  written, like any other unknown word.
+
 ## [1.14.1]
 
 ### Changed

package/bin/kb

@@ -309,10 +309,12 @@ const commands = {
 
   // kb link A B [child|parent|related] — `child`: B becomes a sub-task of A, `parent`: B becomes
   // A's parent. Without a third word the link is plain `related`, as it always was. A pair holds
-  // one link, so linking again with another word re-types it.
+  // one link, so linking again with another word re-types it. The word is looked up as an OWN key:
+  // `REL[rel]` also answers for `constructor`, `toString` or `__proto__` (they come from the
+  // prototype), and such a word went to the board, which quietly made the link `related`.
   async link() {
     const [id, other, rel = 'related'] = args;
-    if (!id || !other || !REL[rel]) die('kb link <key> <key> [child|parent|related]  (child: the second task becomes a sub-task of the first)');
+    if (!id || !other || !Object.hasOwn(REL, rel)) die('kb link <key> <key> [child|parent|related]  (child: the second task becomes a sub-task of the first)');
     const links = await api('POST', `/api/tasks/${id}/links`, { key: other, rel });
     console.log(linksLine(id, links));
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "local-kanban",
-  "version": "1.14.1",
+  "version": "1.15.0",
   "license": "MIT",
   "author": "Dannylamao",
   "repository": {

package/public/js/board.js

@@ -1,8 +1,9 @@
 
 import { $, ALL, ALL_STATUSES, api, DONE_LIMIT, esc, ic, LABEL_COLORS, LABEL_SELECTABLE, noteUnsaved, popoverPlacement, PRI_ICON, PRI_LEVELS, seg, state, tr } from './core.js';
 import { markKbCursor, openCardMenu, openDrawer, openDrawerNew, setKbCursor, statusOptionList } from './drawer.js';
+import { columnComparator, DEFAULT_SORT, orderColumn, slotBefore, sortMode } from './order.js';
 import { getSetting, plural } from './settings.js';
-import { styledAlert, styledConfirm } from './sidebar.js';
+import { popLayer, pushLayer, styledAlert, styledConfirm } from './sidebar.js';
 import { copyBacklogPrompt, copyTodoPrompt, refresh } from './sse.js';
 
 function matchesSearch(t) {
@@ -38,19 +39,22 @@ export function renderBoard() {
   const columns = ALL_STATUSES.map(([k]) => k)
     .filter((k) => k !== 'cancelled' || state.tasks.some((t) => t.status === 'cancelled'));
   for (const key of columns) {
-    let tasks = state.tasks
-      .filter((t) => t.status === key && matchesSearch(t))
-      .sort((a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0) || b.priority - a.priority || a.position - b.position || a.id - b.id);
-    if (key === 'done' || key === 'cancelled') {
-      tasks = tasks.sort((a, b) => b.id - a.id).slice(0, DONE_LIMIT)
-        .sort((a, b) => b.priority - a.priority || b.id - a.id);
-    }
+    const mode = colSort(key);
+    const tasks = orderColumn(state.tasks.filter((t) => t.status === key && matchesSearch(t)), mode, colOrderOpts(key));
 
     const col = document.createElement('div');
     col.className = 'col';
     const head = document.createElement('div');
     head.className = 'col-head';
     head.innerHTML = `<span class="dot s-${key}"></span>${labels[key]} <span class="n">${tasks.length}</span>`;
+    if (tasks.length > 1 || mode !== DEFAULT_SORT) {
+      const sort = document.createElement('button');
+      sort.className = `btn-icon col-sort${mode !== DEFAULT_SORT ? ' on' : ''}`;
+      sort.innerHTML = ic('sort', 13);
+      sort.title = mode === DEFAULT_SORT ? tr('Sort the column') : tr(SORT_LABELS[mode]);
+      sort.onclick = (e) => { e.stopPropagation(); openColSortMenu(sort, key); };
+      head.appendChild(sort);
+    }
     if (CREATABLE.has(key)) {
       const add = document.createElement('button');
       add.className = 'btn-icon col-add';
@@ -88,7 +92,7 @@ export function renderBoard() {
       e.preventDefault();
       body.classList.add('dragover');
       if (dragId == null) return;
-      const after = dragAfterCard(body, e.clientY, dragId);
+      const after = colSort(key) === DEFAULT_SORT ? dragAfterCard(body, e.clientY, dragId) : sortedSlotCard(body, key, dt);
       if (dropPh.parentNode !== body || dropPh.nextSibling !== after) body.insertBefore(dropPh, after);
     };
     body.ondragleave = (e) => { if (!body.contains(e.relatedTarget)) body.classList.remove('dragover'); };
@@ -470,6 +474,66 @@ export async function multiAction(act, btn) {
   }
 }
 
+const SORT_KEY = 'kb.ui.colSort';
+const SORT_LABELS = {
+  manual: 'By priority, then by hand',
+  'num-desc': 'By number, newest first',
+  'num-asc': 'By number, oldest first',
+};
+function readColSorts() {
+  try {
+    const v = JSON.parse(localStorage.getItem(SORT_KEY));
+    return v && typeof v === 'object' && !Array.isArray(v) ? v : {};
+  } catch { return {}; }
+}
+export function colSort(status) { return sortMode(readColSorts()[`${state.slug}:${status}`]); }
+function setColSort(status, mode) {
+  const all = readColSorts();
+  const k = `${state.slug}:${status}`;
+  if (sortMode(mode) === DEFAULT_SORT) delete all[k]; else all[k] = mode;
+  try { localStorage.setItem(SORT_KEY, JSON.stringify(all)); } catch {  }
+  renderBoard();
+}
+function colOrderOpts(status) {
+  return { mixed: state.slug === ALL, closed: status === 'done' || status === 'cancelled', limit: DONE_LIMIT };
+}
+function sortedSlotCard(body, status, t) {
+  const id = slotBefore(state.tasks.filter((x) => x.status === status && matchesSearch(x)), t, colSort(status), colOrderOpts(status));
+  return id == null ? null : body.querySelector(`.card[data-id="${id}"]`);
+}
+
+function closeColSortMenu() {
+  popLayer('col-sort-menu');
+  $('col-sort-menu')?.remove();
+  document.removeEventListener('click', colSortOutside);
+}
+function colSortOutside(e) { if (!e.target.closest('#col-sort-menu')) closeColSortMenu(); }
+function openColSortMenu(anchor, status) {
+  const was = $('col-sort-menu')?.dataset.status;
+  closeColSortMenu();
+  if (was === status) return;
+  pushLayer('col-sort-menu', closeColSortMenu);
+  const menu = document.createElement('div');
+  menu.className = 'drawer-menu-pop col-sort-menu';
+  menu.id = 'col-sort-menu';
+  menu.dataset.status = status;
+  const cur = colSort(status);
+  menu.innerHTML = Object.entries(SORT_LABELS).map(([v, label]) =>
+    `<div class="dm-item${v === cur ? ' on' : ''}" data-v="${v}">${esc(tr(label))}${v === cur ? '<span class="dm-chev">✓</span>' : ''}</div>`).join('')
+    + `<div class="dm-sep"></div><div class="dm-hint">${esc(tr('Sorted by number, cards cannot be reordered by hand'))}</div>`;
+  document.body.appendChild(menu);
+  const r = anchor.getBoundingClientRect();
+  let left = r.left;
+  if (left + menu.offsetWidth > window.innerWidth - 8) left = window.innerWidth - menu.offsetWidth - 8;
+  menu.style.left = `${Math.max(8, left)}px`;
+  menu.style.top = `${r.bottom + 4}px`;
+  menu.querySelectorAll('.dm-item').forEach((el) => {
+    el.onclick = () => { closeColSortMenu(); if (el.dataset.v !== cur) setColSort(status, el.dataset.v); };
+  });
+  requestAnimationFrame(() => menu.classList.add('open'));
+  document.addEventListener('click', colSortOutside);
+}
+
 function dragAfterCard(body, y, draggedId) {
   const cards = [...body.querySelectorAll('.card')].filter((c) => Number(c.dataset.id) !== draggedId);
   return cards.find((c) => y < c.getBoundingClientRect().top + c.offsetHeight / 2) || null;
@@ -587,16 +651,19 @@ async function onDrop(e, status, body) {
   if (dragGroupIds && dragGroupIds.length > 1) return onDropGroup(e, status, body);
   if (moveBlocked(t.status, status, { manual: taskIsNoclaude(t) })) return;
 
-  const cards = [...body.querySelectorAll('.card')].filter((c) => Number(c.dataset.id) !== id);
-  const y = e.clientY;
-  let idx = cards.findIndex((c) => y < c.getBoundingClientRect().top + c.offsetHeight / 2);
-  if (idx === -1) idx = cards.length;
-  const colTasks = state.tasks
-    .filter((x) => x.status === status && x.id !== id)
-    .sort((a, b) => b.priority - a.priority || a.position - b.position || a.id - b.id);
-  const prev = colTasks[idx - 1]?.position ?? 0;
-  const next = colTasks[idx]?.position ?? prev + 2;
-  const position = (prev + next) / 2;
+  const fixedOrder = colSort(status) !== DEFAULT_SORT;
+  if (fixedOrder && t.status === status) { dropPh.remove(); return; }
+  let patch = { status };
+  if (!fixedOrder) {
+    const cards = [...body.querySelectorAll('.card')].filter((c) => Number(c.dataset.id) !== id);
+    const y = e.clientY;
+    let idx = cards.findIndex((c) => y < c.getBoundingClientRect().top + c.offsetHeight / 2);
+    if (idx === -1) idx = cards.length;
+    const colTasks = state.tasks.filter((x) => x.status === status && x.id !== id).sort(columnComparator(DEFAULT_SORT));
+    const prev = colTasks[idx - 1]?.position ?? 0;
+    const next = colTasks[idx]?.position ?? prev + 2;
+    patch = { status, position: (prev + next) / 2 };
+  }
 
   const card = $('board').querySelector(`.card[data-id="${id}"]`);
   if (card) {
@@ -607,10 +674,10 @@ async function onDrop(e, status, body) {
   }
   dropPh.remove();
   try {
-    await api('PATCH', `/api/tasks/${seg(id)}`, { status, position });
+    await api('PATCH', `/api/tasks/${seg(id)}`, patch);
   } catch (e) {
     renderBoard();
-    if (e?.offline) noteUnsaved(() => api('PATCH', `/api/tasks/${seg(id)}`, { status, position }).then(refresh));
+    if (e?.offline) noteUnsaved(() => api('PATCH', `/api/tasks/${seg(id)}`, patch).then(refresh));
     return;
   }
   await refresh();
@@ -637,16 +704,16 @@ async function onDropGroup(e, status, body) {
   const y = e.clientY;
   let idx = cards.findIndex((c) => y < c.getBoundingClientRect().top + c.offsetHeight / 2);
   if (idx === -1) idx = cards.length;
-  const colTasks = state.tasks
-    .filter((x) => x.status === status && !draggedSet.has(x.id))
-    .sort((a, b) => b.priority - a.priority || a.position - b.position || a.id - b.id);
+  const colTasks = state.tasks.filter((x) => x.status === status && !draggedSet.has(x.id)).sort(columnComparator(DEFAULT_SORT));
   const prev = colTasks[idx - 1]?.position ?? 0;
   const next = colTasks[idx]?.position ?? prev + movable.length + 1;
   const step = (next - prev) / (movable.length + 1);
+  const fixedOrder = colSort(status) !== DEFAULT_SORT;
 
   dropPh.remove();
   for (let i = 0; i < movable.length; i++) {
-    await api('PATCH', `/api/tasks/${seg(movable[i].id)}`, { status, position: prev + step * (i + 1) });
+    if (fixedOrder && movable[i].status === status) continue;
+    await api('PATCH', `/api/tasks/${seg(movable[i].id)}`, fixedOrder ? { status } : { status, position: prev + step * (i + 1) });
   }
   clearSelection();
   await refresh();

package/public/js/core.js

@@ -13,6 +13,7 @@ const ICONS = {
   warn: 'M8 2.6 14.4 13.4H1.6L8 2.6ZM8 6.6v3M8 11.4v.1',
   trash: 'M2.8 4.4h10.4M6.4 4.4V2.9h3.2v1.5M4.2 4.4l.6 8.7a1 1 0 0 0 1 .9h4.4a1 1 0 0 0 1-.9l.6-8.7M6.7 6.9v4.6M9.3 6.9v4.6',
   plus: 'M8 3.4v9.2M3.4 8h9.2',
+  sort: 'M4.8 2.8v10.4M4.8 13.2 2.4 10.8M4.8 13.2l2.4-2.4M11.2 13.2V2.8M11.2 2.8 8.8 5.2M11.2 2.8l2.4 2.4',
   download: 'M8 2.6v7.8M5 7.4 8 10.4l3-3M2.8 12.6v.8a1 1 0 0 0 1 1h8.4a1 1 0 0 0 1-1v-.8',
   duplicate: 'M3.4 10.6H2.6a1 1 0 0 1-1-1V2.6a1 1 0 0 1 1-1h7a1 1 0 0 1 1 1v.8M6.4 5.4h7a1 1 0 0 1 1 1v7a1 1 0 0 1-1 1h-7a1 1 0 0 1-1-1v-7a1 1 0 0 1 1-1Z',
   person: 'M8 8.4a2.6 2.6 0 1 0 0-5.2 2.6 2.6 0 0 0 0 5.2ZM3.2 14a4.8 4.8 0 0 1 9.6 0',
@@ -111,6 +112,9 @@ const I18N_RU = {
   'built-in section — cannot be deleted': 'служебный раздел — удалить нельзя',
   'built-in section — the name cannot be changed': 'служебный раздел — имя менять нельзя',
   'Busiest around': 'Жарче всего около',
+  'By number, newest first': 'По номеру: сначала новые',
+  'By number, oldest first': 'По номеру: сначала старые',
+  'By priority, then by hand': 'По приоритету, затем вручную',
   'Calendar': 'Календарь',
   'Cancel': 'Отмена',
   'Cancel task': 'Отменить задачу',
@@ -582,6 +586,8 @@ const I18N_RU = {
   'Setup via Claude': 'Настройка через Claude',
   'Skip': 'Пропустить',
   'Skip — work locally': 'Пропустить — работать локально',
+  'Sort the column': 'Сортировка колонки',
+  'Sorted by number, cards cannot be reordered by hand': 'При сортировке по номеру карточки вручную не переставить',
   'Sound diagnostics': 'Диагностика звука',
   'Sound for Done': 'Звук на «Готово»',
   'Sound for Review': 'Звук на «Проверяю»',

package/public/js/drawer.js

@@ -1,6 +1,7 @@
 
-import { WORKING, buildSelect, canMoveTo, clearSelection, labelChip, moveBlocked, scheduleDrawLinks, selVal, selectedIds, setScrollToNewCardId, taskIsNoclaude } from './board.js';
+import { WORKING, buildSelect, canMoveTo, clearSelection, colSort, labelChip, moveBlocked, scheduleDrawLinks, selVal, selectedIds, setScrollToNewCardId, taskIsNoclaude } from './board.js';
 import { $, ALL, ALL_STATUSES, DASH, LABEL_COLORS, LABEL_SELECTABLE, PRI_LEVELS, SETTINGS, TITLE_LABEL_WORDS, api, apiBlob, esc, ghSyncOn, ic, noteUnsaved, seg, state, tr } from './core.js';
+import { columnComparator, DEFAULT_SORT } from './order.js';
 import { getSetting } from './settings.js';
 import { currentProject, overlayLayer, popLayer, pushLayer, selectProject, styledAlert, styledConfirm } from './sidebar.js';
 import { autoGrow, copyText, refresh, relTime, renderTimeline } from './sse.js';
@@ -393,12 +394,12 @@ function syncDrawerToCursor() {
     if (t && t.key !== state.drawerKey) openDrawer(t.key);
   }, 150);
 }
-const kbBoardSort = (a, b) => b.priority - a.priority || a.position - b.position || a.id - b.id;
 export async function kbMoveCard(dr, dc) {
   const t = state.tasks.find((x) => x.id === state.kbCursor);
   if (!t) return;
   if (dr) {
-    const sorted = state.tasks.filter((x) => x.status === t.status).sort(kbBoardSort);
+    if (colSort(t.status) !== DEFAULT_SORT) return;
+    const sorted = state.tasks.filter((x) => x.status === t.status).sort(columnComparator(DEFAULT_SORT));
     const ri = sorted.findIndex((x) => x.id === t.id);
     const ti = Math.max(0, Math.min(sorted.length - 1, ri + dr));
     if (ti === ri) return;

package/public/js/init.js

@@ -58,7 +58,7 @@ $('search').addEventListener('input', (e) => {
 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';
+const POPUP_SELECTOR = '.modal-overlay, #card-menu, #col-sort-menu, #drawer-menu-pop, #return-pop, .lbl-picker, #status-picker, .lightbox, .kbsel.open';
 
 function escClosePopup() {
   if (document.querySelector('.kbsel.open')) { closeOpenSelect(); return true; }

package/public/js/order.js

@@ -0,0 +1,37 @@
+
+export const SORT_MODES = ['manual', 'num-desc', 'num-asc'];
+export const DEFAULT_SORT = 'manual';
+
+export function sortMode(v) { return SORT_MODES.includes(v) ? v : DEFAULT_SORT; }
+
+export function taskNumber(t) {
+  const n = Number(String(t.key || '').split('-').pop());
+  return Number.isFinite(n) ? n : 0;
+}
+
+const pinnedFirst = (a, b) => (b.pinned ? 1 : 0) - (a.pinned ? 1 : 0);
+
+export function columnComparator(mode, { mixed = false, closed = false } = {}) {
+  const m = sortMode(mode);
+  const pin = closed ? () => 0 : pinnedFirst;
+  if (m === DEFAULT_SORT) {
+    return closed
+      ? (a, b) => b.priority - a.priority || b.id - a.id
+      : (a, b) => pin(a, b) || b.priority - a.priority || a.position - b.position || a.id - b.id;
+  }
+  const num = mixed ? (t) => t.id : taskNumber;
+  const dir = m === 'num-asc' ? 1 : -1;
+  return (a, b) => pin(a, b) || dir * (num(a) - num(b)) || dir * (a.id - b.id);
+}
+
+export function orderColumn(tasks, mode, { mixed = false, closed = false, limit = Infinity } = {}) {
+  let list = [...tasks];
+  if (closed) list = list.sort((a, b) => b.id - a.id).slice(0, limit);
+  return list.sort(columnComparator(mode, { mixed, closed }));
+}
+
+export function slotBefore(tasks, task, mode, opts = {}) {
+  const cmp = columnComparator(mode, opts);
+  const next = orderColumn(tasks.filter((x) => x.id !== task.id), mode, opts).find((x) => cmp(task, x) < 0);
+  return next ? next.id : null;
+}

package/public/style.css

@@ -229,7 +229,14 @@ html.booted #horizon, html.booted #calendar, html.booted #chaos { animation: boo
 }
 .col-head .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
 .col-head .n { color: var(--muted); font-weight: 400; }
-.col-add { margin-left: auto; }
+.col-head .n + .btn-icon { margin-left: auto; }
+.col-sort { font-size: 12px; opacity: .65; }
+.col-sort:hover { opacity: 1; }
+.col-sort.on { opacity: 1; color: var(--accent); }
+.col-sort-menu { transform-origin: top left; min-width: 214px; }
+.col-sort-menu .dm-item.on { color: var(--accent); }
+.col-sort-menu .dm-chev { color: var(--accent); }
+.dm-hint { width: 0; min-width: 100%; box-sizing: border-box; padding: 3px 10px 6px; font-size: 11.5px; line-height: 1.35; color: var(--muted); }
 .col-copy { font-size: 12px; opacity: .65; }
 .col-copy:hover { opacity: 1; }
 .col-copy.copied { opacity: 1; color: var(--done); font-size: 14px; }