signalk-maintenance-tracker 1.2.0 → 1.4.0

package/public/app/lib/autolink.js

@@ -0,0 +1,136 @@
+/**
+ * Bare-URL autolinking for markdown output (§7.8). snarkdown only links
+ * explicit [text](url), so a note that just pastes a URL renders as dead text.
+ * This turns http(s):// and www. runs in the text into anchors.
+ *
+ * Runs *after* sanitizeHtml() on already-clean HTML: every href here is built
+ * from a match that must start with http://, https:// or www., so this pass
+ * cannot reintroduce a javascript: URL. Text inside existing links and inside
+ * code is left alone. Only <MarkdownView/> consumes this.
+ */
+
+/** Bare URL run: everything up to whitespace or a tag; trimmed below. */
+const URL_RE = /(?:https?:\/\/|www\.)[^\s<]+/gi;
+
+/**
+ * Elements whose text must not be linkified.
+ * @type {Record<string, boolean>}
+ */
+const SKIP_TAGS = {
+  A: true,
+  CODE: true,
+  PRE: true,
+};
+
+/** Sentence punctuation that follows a URL far more often than it ends one. */
+const TRAILING = '.,;:!?\'"';
+
+/**
+ * @param {string} clean sanitized HTML from sanitizeHtml()
+ * @returns {string} the same HTML with bare URLs wrapped in anchors
+ */
+export function autolinkHtml(clean) {
+  const doc = new DOMParser().parseFromString(clean, 'text/html');
+  autolinkNode(doc.body);
+  return doc.body.innerHTML;
+}
+
+/** @param {Node} parent */
+function autolinkNode(parent) {
+  // Snapshot: linkifying replaces text nodes with fragments as we walk.
+  const children = Array.prototype.slice.call(parent.childNodes);
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node.nodeType === 3) {
+      linkifyText(/** @type {Text} */ (node));
+    } else if (
+      node.nodeType === 1 &&
+      !SKIP_TAGS[/** @type {Element} */ (node).tagName]
+    ) {
+      autolinkNode(node);
+    }
+  }
+}
+
+/**
+ * Replace one text node with its text plus <a> elements for any URLs in it.
+ * @param {Text} node
+ */
+function linkifyText(node) {
+  const text = node.nodeValue || '';
+  const doc = node.ownerDocument;
+  if (!doc) return;
+  let frag = null;
+  let last = 0;
+  let match;
+  URL_RE.lastIndex = 0;
+  while ((match = URL_RE.exec(text)) !== null) {
+    const url = trimTrailing(match[0]);
+    // Resume after what we kept, so trimmed punctuation stays plain text.
+    URL_RE.lastIndex = match.index + url.length;
+    if (!url) continue;
+    if (!frag) frag = doc.createDocumentFragment();
+    if (match.index > last) {
+      frag.appendChild(doc.createTextNode(text.slice(last, match.index)));
+    }
+    const href = url.indexOf('www.') === 0 ? 'https://' + url : url;
+    const a = doc.createElement('a');
+    a.setAttribute('href', href);
+    // The host is the readable part; the full URL stays on hover.
+    a.setAttribute('title', href);
+    a.textContent = hostnameOf(href) || url;
+    frag.appendChild(a);
+    last = match.index + url.length;
+  }
+  if (!frag) return;
+  if (last < text.length) {
+    frag.appendChild(doc.createTextNode(text.slice(last)));
+  }
+  node.parentNode && node.parentNode.replaceChild(frag, node);
+}
+
+/**
+ * The host is what identifies a link to a reader; a pasted path is usually
+ * noise ("example.com" beats a 90-character tracking URL). Returns '' if the
+ * URL will not parse, and the caller falls back to showing it whole.
+ *
+ * @param {string} href
+ * @returns {string}
+ */
+function hostnameOf(href) {
+  try {
+    return new URL(href).hostname;
+  } catch (_e) {
+    return '';
+  }
+}
+
+/**
+ * Drop punctuation a sentence left on the end of a URL: "see https://x.com."
+ * A closing paren only counts as the URL's when the URL opened one, so both
+ * "(see https://x.com)" and "https://x.com/a_(b)" come out right.
+ *
+ * @param {string} url
+ * @returns {string}
+ */
+function trimTrailing(url) {
+  let end = url.length;
+  while (end > 0) {
+    const ch = url.charAt(end - 1);
+    if (TRAILING.indexOf(ch) !== -1) {
+      end--;
+    } else if (ch === ')' && closesMoreThanOpens(url.slice(0, end))) {
+      end--;
+    } else {
+      break;
+    }
+  }
+  return url.slice(0, end);
+}
+
+/** @param {string} s */
+function closesMoreThanOpens(s) {
+  const opens = s.match(/\(/g);
+  const closes = s.match(/\)/g);
+  return (closes ? closes.length : 0) > (opens ? opens.length : 0);
+}

package/public/app/lib/format.js

@@ -121,8 +121,25 @@ export function formatUser(name) {
   return isTokenUser(trimmed) ? trimmed.slice(0, 8) : trimmed;
 }
 
-/** Status → human label. @param {string} status */
+/**
+ * Every task status, most urgent first (mirrors STATUS_RANK in src/types.ts).
+ * @type {import('../types.js').Status[]}
+ */
+export const STATUSES = ['overdue', 'due_soon', 'ok', 'info', 'archived'];
+
+/**
+ * Status → human label, cased like the stock badges ("Low stock").
+ * @type {Record<string, string>}
+ */
+const STATUS_LABELS = {
+  overdue: 'Overdue',
+  due_soon: 'Due Soon',
+  ok: 'OK',
+  info: 'Info',
+  archived: 'Archived',
+};
+
+/** @param {string} status */
 export function statusLabel(status) {
-  if (status === 'due_soon') return 'due soon';
-  return status;
+  return STATUS_LABELS[status] || status;
 }

package/public/app/lib/softbreak.js

@@ -0,0 +1,163 @@
+/**
+ * Authored line breaks for markdown output (§7.8). People type notes into a
+ * textarea and mean every newline they press, but markdown does not: snarkdown
+ * drops a lone newline to whitespace, and collapses any run of blank lines into
+ * a single <br>. So "Maxwell HRC10\n\n\n<url>" came out as one run-on line, and
+ * spacing the author added could not be got back.
+ *
+ * Two steps, on either side of snarkdown:
+ *
+ *  - keepBlankLines() runs first, splitting each run of newlines with a marker
+ *    character so snarkdown sees single newlines it leaves alone instead of the
+ *    blank-line run it would collapse.
+ *  - softBreakHtml() runs last, turning the newlines left in the text into <br>
+ *    and dropping the markers.
+ *
+ * The usual one-step trick — rewriting "\n" to "  \n" before snarkdown — does
+ * not work here: it merges list items and leaves trailing spaces inside code
+ * fences. Only <MarkdownView/> consumes this.
+ */
+
+/**
+ * Stands in for a blank line between two newlines. A control character, so it
+ * is inert to snarkdown's grammar and cannot occur in a note by accident.
+ */
+const MARKER = '\u0001';
+
+/**
+ * Unmarked newlines at either edge of a text node. Marked ones are blank lines
+ * the author typed and survive; these are snarkdown's own output formatting.
+ */
+const LEAD_RE = /^\n+/;
+const TAIL_RE = /\n+$/;
+
+/** Fenced code, kept whole: blank lines in there are code, not layout. */
+const FENCE_RE = /(```[\s\S]*?```)/g;
+
+/**
+ * Split runs of blank lines so snarkdown cannot collapse them. Runs before
+ * snarkdown; softBreakHtml() clears up after it.
+ *
+ * @param {string} markdown as the author typed it
+ * @returns {string} markdown with blank-line runs marked
+ */
+export function keepBlankLines(markdown) {
+  // Odd indices are the fences themselves — left exactly as written.
+  const chunks = String(markdown).replace(/\r\n?/g, '\n').split(FENCE_RE);
+  for (let i = 0; i < chunks.length; i += 2) {
+    chunks[i] = chunks[i]
+      .split(MARKER)
+      .join('')
+      .replace(/\n{2,}/g, markRun);
+  }
+  return chunks.join('');
+}
+
+/** @param {string} run two or more newlines */
+function markRun(run) {
+  let out = '\n';
+  for (let i = 1; i < run.length; i++) out += MARKER + '\n';
+  return out;
+}
+
+/**
+ * Newlines are content here, not layout.
+ * @type {Record<string, boolean>}
+ */
+const SKIP_TAGS = {
+  CODE: true,
+  PRE: true,
+};
+
+/**
+ * Elements that already break the line. A newline next to one of these came
+ * from snarkdown's own output formatting, not from the author.
+ * @type {Record<string, boolean>}
+ */
+const BLOCK_TAGS = {
+  BLOCKQUOTE: true,
+  DIV: true,
+  H1: true,
+  H2: true,
+  H3: true,
+  H4: true,
+  H5: true,
+  H6: true,
+  HR: true,
+  LI: true,
+  OL: true,
+  P: true,
+  PRE: true,
+  TABLE: true,
+  UL: true,
+};
+
+/**
+ * @param {string} clean sanitized HTML from sanitizeHtml()
+ * @returns {string} the same HTML with authored newlines as <br>
+ */
+export function softBreakHtml(clean) {
+  const doc = new DOMParser().parseFromString(clean, 'text/html');
+  breakNode(doc.body);
+  return doc.body.innerHTML;
+}
+
+/** @param {Node} parent */
+function breakNode(parent) {
+  // Snapshot: breaking replaces text nodes with fragments as we walk.
+  const children = Array.prototype.slice.call(parent.childNodes);
+  for (let i = 0; i < children.length; i++) {
+    const node = children[i];
+    if (node.nodeType === 3) {
+      breakText(/** @type {Text} */ (node));
+    } else if (
+      node.nodeType === 1 &&
+      !SKIP_TAGS[/** @type {Element} */ (node).tagName]
+    ) {
+      breakNode(node);
+    }
+  }
+}
+
+/**
+ * Replace one text node with its lines separated by <br>.
+ * @param {Text} node
+ */
+function breakText(node) {
+  const doc = node.ownerDocument;
+  let text = node.nodeValue || '';
+  if (!doc || (text.indexOf('\n') === -1 && text.indexOf(MARKER) === -1)) {
+    return;
+  }
+  // A newline against a block is snarkdown's formatting, not a typed line.
+  if (isBlockEdge(node.previousSibling)) text = text.replace(LEAD_RE, '');
+  if (isBlockEdge(node.nextSibling)) text = text.replace(TAIL_RE, '');
+  if (text.indexOf('\n') === -1) {
+    node.nodeValue = text.split(MARKER).join('');
+    return;
+  }
+  const lines = text.split('\n');
+  const frag = doc.createDocumentFragment();
+  for (let i = 0; i < lines.length; i++) {
+    if (i > 0) frag.appendChild(doc.createElement('br'));
+    // A marked line is a blank one: the <br> pair around it is the whole line.
+    const line = lines[i].split(MARKER).join('');
+    if (line) frag.appendChild(doc.createTextNode(line));
+  }
+  node.parentNode && node.parentNode.replaceChild(frag, node);
+}
+
+/**
+ * True at the start/end of the enclosing block, or against a sibling that
+ * breaks the line on its own — a <br> there would be a stray blank line.
+ *
+ * @param {Node|null} sibling
+ * @returns {boolean}
+ */
+function isBlockEdge(sibling) {
+  if (!sibling) return true;
+  return (
+    sibling.nodeType === 1 &&
+    BLOCK_TAGS[/** @type {Element} */ (sibling).tagName] === true
+  );
+}

package/public/app/pages/TaskDetailPage.js

@@ -4,7 +4,13 @@
  */
 import { html } from '../lib/html.js';
 import { useState } from '../../vendor/preact-hooks.js';
-import { useTask, useTaskLogs, deleteTask, deleteLog } from '../api/hooks.js';
+import {
+  useTask,
+  useTaskLogs,
+  updateTask,
+  deleteTask,
+  deleteLog,
+} from '../api/hooks.js';
 import { useAuth } from '../auth/auth.js';
 import {
   formatDate,
@@ -28,6 +34,7 @@ import { LogEntryModal } from '../components/LogEntryModal.js';
 import { ConfirmModal } from '../components/ConfirmModal.js';
 import { DownloadLogModal } from '../components/DownloadLogModal.js';
 import { apiFetch } from '../api/client.js';
+import { stowageItemUrl } from '../api/stowage.js';
 
 /** @typedef {import('../types.js').TaskDTO} TaskDTO */
 /** @typedef {import('../types.js').LogDTO} LogDTO */
@@ -196,6 +203,23 @@ export function TaskDetailPage(props) {
                   >
                     <i class="bi bi-pencil" />Edit
                   </button>
+                  <button
+                    type="button"
+                    class="btn btn-warning"
+                    onClick=${async () => {
+                      await updateTask(task.slug, {
+                        is_archived: !task.is_archived,
+                      });
+                      toast(
+                        task.is_archived
+                          ? 'Task unarchived.'
+                          : 'Task archived.',
+                        'success',
+                      );
+                    }}
+                  >
+                    <i class="bi bi-archive" />${task.is_archived ? 'Unarchive' : 'Archive'}
+                  </button>
                   <button
                     type="button"
                     class="btn btn-danger"
@@ -214,15 +238,17 @@ export function TaskDetailPage(props) {
           // Nothing to say without a description or parts: drop the card.
           task.description || consumables.length
             ? html`<div class="card">
-                <h3>Description</h3>
                 ${
                   task.description
-                    ? html`<${MarkdownView} markdown=${task.description} />`
-                    : html`<p class="muted" style="margin:0">No description.</p>`
+                    ? html`<h3>Description</h3>
+                        <${MarkdownView} markdown=${task.description} />`
+                    : null
                 }
                 ${
                   consumables.length
-                    ? html`<div style="margin-top:16px">
+                    ? html`<div
+                        style=${task.description ? 'margin-top:16px' : ''}
+                      >
                         <h3>Consumables</h3>
                         <ul class="consumables-list">
                           ${consumables.map(
@@ -231,7 +257,9 @@ export function TaskDetailPage(props) {
                               class="consumables-row"
                             >
                               <span class="consumables-name"
-                                >${c.item_name}${' '}
+                                ><a href=${stowageItemUrl(c.item_id)}
+                                  >${c.item_name}</a
+                                >${' '}
                                 <span class="muted"
                                   >× ${c.qty_per_service}</span
                                 ></span

package/public/app/pages/TaskListPage.js

@@ -7,7 +7,12 @@ import { useState, useEffect } from '../../vendor/preact-hooks.js';
 import { useTasks, useTags, deleteTask } from '../api/hooks.js';
 import { useAuth } from '../auth/auth.js';
 import { useListParams } from '../lib/useListParams.js';
-import { formatRemainingHours, formatRemainingTime } from '../lib/format.js';
+import {
+  STATUSES,
+  formatRemainingHours,
+  formatRemainingTime,
+  statusLabel,
+} from '../lib/format.js';
 import { toast } from '../lib/toasts.js';
 import { Table } from '../components/Table.js';
 import { Pagination } from '../components/Pagination.js';
@@ -28,6 +33,7 @@ export function TaskListPage() {
   const page = parseInt(params.page || '1', 10) || 1;
   const search = params.search || '';
   const tagsCsv = params.tags || '';
+  const statusCsv = params.status || '';
   const sort = params.sort || '';
   const order = params.order || '';
 
@@ -48,6 +54,7 @@ export function TaskListPage() {
   const tasksRes = useTasks({
     search: search || undefined,
     tags: tagsCsv || undefined,
+    status: statusCsv || undefined,
     sort: sort || undefined,
     order: order || undefined,
     page: page,
@@ -64,15 +71,29 @@ export function TaskListPage() {
   );
   const [deleting, setDeleting] = useState(/** @type {TaskDTO|null} */ (null));
 
+  // Tags and status are single-select, so search, tag and status simply AND
+  // together. A task has exactly one status, and tags are used as categories,
+  // so combining two of either narrows to nothing more often than not. Clicking
+  // a chip replaces the current selection; clicking the selected one clears it.
+  // The API still accepts CSV, so a hand-written multi-value URL keeps
+  // filtering (and highlighting) — it just collapses on the next click.
   const selectedTags = tagsCsv ? tagsCsv.split(',').filter(Boolean) : [];
   /** @param {string} tag */
-  const toggleTag = (tag) => {
-    const next =
-      selectedTags.indexOf(tag) === -1
-        ? selectedTags.concat([tag])
-        : selectedTags.filter((t) => t !== tag);
-    update({ tags: next.join(',') || undefined, page: undefined });
-  };
+  const selectTag = (tag) =>
+    update({
+      tags: selectedTags.indexOf(tag) === -1 ? tag : undefined,
+      page: undefined,
+    });
+
+  const selectedStatuses = statusCsv
+    ? statusCsv.split(',').filter(Boolean)
+    : [];
+  /** @param {string} status */
+  const selectStatus = (status) =>
+    update({
+      status: selectedStatuses.indexOf(status) === -1 ? status : undefined,
+      page: undefined,
+    });
 
   /** @param {string} key */
   const onSort = (key) => {
@@ -161,6 +182,7 @@ export function TaskListPage() {
     },
   ];
 
+  const tagList = tagsRes.data ? tagsRes.data.data : [];
   const pageData = tasksRes.data;
 
   return html`
@@ -191,19 +213,45 @@ export function TaskListPage() {
         }
       </div>
 
-      <div class="chips">
-        ${(tagsRes.data ? tagsRes.data.data : []).map(
-          (tag) => html`
-            <button
-              type="button"
-              key=${tag.name}
-              class=${'chip' + (selectedTags.indexOf(tag.name) !== -1 ? ' selected' : '')}
-              onClick=${() => toggleTag(tag.name)}
-            >
-              ${tag.name}<span class="chip-count">${tag.count}</span>
-            </button>
-          `,
-        )}
+      <div class="chip-filters">
+        ${
+          tagList.length
+            ? html`
+                <div class="chips" role="group" aria-labelledby="tag-filter-label">
+                  <span class="chips-label" id="tag-filter-label">Tags:</span>
+                  ${tagList.map(
+                    (tag) => html`
+                      <button
+                        type="button"
+                        key=${tag.name}
+                        class=${'chip' + (selectedTags.indexOf(tag.name) !== -1 ? ' selected' : '')}
+                        aria-pressed=${selectedTags.indexOf(tag.name) !== -1}
+                        onClick=${() => selectTag(tag.name)}
+                      >
+                        ${tag.name}
+                      </button>
+                    `,
+                  )}
+                </div>
+              `
+            : null
+        }
+        <div class="chips" role="group" aria-labelledby="status-filter-label">
+          <span class="chips-label" id="status-filter-label">Status:</span>
+          ${STATUSES.map(
+            (status) => html`
+              <button
+                type="button"
+                key=${status}
+                class=${'chip' + (selectedStatuses.indexOf(status) !== -1 ? ' selected' : '')}
+                aria-pressed=${selectedStatuses.indexOf(status) !== -1}
+                onClick=${() => selectStatus(status)}
+              >
+                ${statusLabel(status)}
+              </button>
+            `,
+          )}
+        </div>
       </div>
 
       ${
@@ -219,7 +267,7 @@ export function TaskListPage() {
                 order=${order}
                 onSort=${onSort}
                 loading=${tasksRes.loading}
-                emptyMessage=${search || tagsCsv ? 'No tasks match your filters.' : 'No maintenance tasks yet.'}
+                emptyMessage=${search || tagsCsv || statusCsv ? 'No tasks match your filters.' : 'No maintenance tasks yet.'}
               />
               ${
                 pageData

package/public/app/types.js

@@ -5,7 +5,7 @@
  */
 
 /** @typedef {'days'|'weeks'|'months'|'years'} TimeUnit */
-/** @typedef {'overdue'|'due_soon'|'ok'|'unknown'} Status */
+/** @typedef {'overdue'|'due_soon'|'ok'|'info'|'archived'} Status */
 
 /**
  * @typedef {Object} TaskConsumableDTO
@@ -47,6 +47,7 @@
  * @property {number|null} remaining_time_ms
  * @property {number|null} time_fraction
  * @property {Status|null} time_status
+ * @property {boolean} is_archived
  * @property {Status} status
  * @property {number} status_rank
  * @property {number} urgency
@@ -100,6 +101,7 @@
  * @property {string[]} [tags]
  * @property {string|null} [last_maintenance]
  * @property {number|null} [last_runtime]
+ * @property {boolean} [is_archived]
  * @property {TaskConsumableDTO[]} [consumables]
  */
 

package/public/styles/main.css

@@ -246,6 +246,16 @@ pre {
   border-color: var(--ok-hover);
 }
 
+.btn-warning {
+  background: var(--warn);
+  border-color: var(--warn);
+  color: var(--accent-text);
+}
+.btn-warning:hover {
+  background: var(--warn-hover);
+  border-color: var(--warn-hover);
+}
+
 .btn-icon {
   display: inline-flex;
   align-items: center;
@@ -430,6 +440,21 @@ pre {
   margin-bottom: 4px;
 }
 
+/* The task list's two filter rows (tags, status), each behind its own label.
+   The labels share a min-width so both rows' chips start on the same column. */
+.chip-filters {
+  margin-bottom: 8px;
+}
+.chip-filters .chips {
+  margin-bottom: 0;
+}
+.chips-label {
+  flex: 0 0 auto;
+  min-width: 3.6em;
+  color: var(--text-muted);
+  font-size: 13.5px;
+}
+
 .chip {
   display: inline-flex;
   align-items: center;
@@ -452,10 +477,6 @@ pre {
   border-color: var(--accent);
   color: var(--accent-text);
 }
-.chip .chip-count {
-  opacity: 0.7;
-  margin-left: 5px;
-}
 .chip .bi {
   margin-left: 6px;
 }
@@ -624,9 +645,13 @@ pre {
   background: var(--ok-bg);
   color: var(--ok);
 }
-.badge.unknown {
-  background: var(--unknown-bg);
-  color: var(--unknown);
+.badge.info {
+  background: var(--accent-bg);
+  color: var(--accent);
+}
+.badge.archived {
+  background: var(--info-bg);
+  color: var(--info);
 }
 
 /* stock status badge (parts linked via signalk-stowage-mgmt) */

package/public/styles/tokens.css

@@ -18,12 +18,13 @@
   --danger-hover: #b02525;
   --danger-bg: #ffe3e3;
   --warn: #e8590c;
+  --warn-hover: #d9480f;
   --warn-bg: #ffe8cc;
   --ok: #2b8a3e;
   --ok-hover: #237434;
   --ok-bg: #d3f9d8;
-  --unknown: #5c6570;
-  --unknown-bg: #e9ecef;
+  --info: #5c6570;
+  --info-bg: #e9ecef;
   --shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
   --overlay: rgba(20, 24, 28, 0.5);
 }
@@ -44,12 +45,13 @@
   --danger-hover: #ff8787;
   --danger-bg: #3d2224;
   --warn: #ffa94d;
+  --warn-hover: #ffc078;
   --warn-bg: #3d2f1f;
   --ok: #69db7c;
   --ok-hover: #8ce99a;
   --ok-bg: #1e3325;
-  --unknown: #9aa4ae;
-  --unknown-bg: #272d33;
+  --info: #9aa4ae;
+  --info-bg: #272d33;
   --shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
   --overlay: rgba(0, 0, 0, 0.65);
 }