@tiagojct/subsub 0.17.0 → 0.19.0

package/web/app.js

@@ -83,11 +83,21 @@ marked.use({
 			if (!SAFE_LINK.test(token.href ?? "")) return text;
 			return `<a href="${escapeHtml(token.href)}" target="_blank" rel="noopener noreferrer">${text}</a>`;
 		},
+		code(token) {
+			return (token.lang === "mermaid" && flowHtml(token.text)) || false;
+		},
 		codespan(token) {
 			const code = `<code>${escapeHtml(token.text)}</code>`;
 			return NOTE_PATH.test(token.text) ? noteLink(token.text, code) : code;
 		},
 		image(token) {
+			// In the notes pane, an image next to the note (a figure cut out of the PDF) is shown;
+			// anywhere else, and for any other address, only its description.
+			const href = decodeURI(token.href ?? "");
+			if (noteDir && /^(?![a-z][\w+.-]*:|[\\/])[^?#]+\.(png|jpe?g|gif|webp)$/i.test(href)) {
+				const src = `/api/note-file?path=${encodeURIComponent(`${noteDir}/${href}`)}`;
+				return `<img class="note-img" src="${escapeHtml(src)}" alt="${escapeHtml(token.text ?? "")}" loading="lazy">`;
+			}
 			return escapeHtml(token.text || token.href || "");
 		},
 		table(token) {
@@ -110,6 +120,45 @@ marked.use({
 		},
 	},
 });
+/**
+ * The flow of works that /lit writes as Mermaid (a chain of boxes, with dotted branches to the side
+ * for what was left out), drawn as boxes. Any other diagram stays as code; Obsidian draws it.
+ */
+function flowHtml(src) {
+	const lines = String(src).split("\n").map((l) => l.trim()).filter(Boolean);
+	if (!/^(flowchart|graph)\s+(TD|TB)\b/.test(lines.shift() ?? "")) return null;
+	const label = {};
+	const next = {};
+	const side = {};
+	const into = new Set();
+	for (const line of lines) {
+		const n = /^(\w+)\["([^"]*)"\]$/.exec(line);
+		if (n) {
+			label[n[1]] = n[2];
+			continue;
+		}
+		const m = /^(\w+)(?:\["([^"]*)"\])?\s*(-->|-\.->)\s*(\w+)(?:\["([^"]*)"\])?$/.exec(line);
+		if (!m) return null;
+		const [, a, la, arrow, b, lb] = m;
+		if (la !== undefined) label[a] = la;
+		if (lb !== undefined) label[b] = lb;
+		if (arrow === "-->") {
+			if (next[a]) return null; // a branch of the main chain: not this kind of diagram
+			next[a] = b;
+			into.add(b);
+		} else (side[a] ??= []).push(b);
+	}
+	const rows = [];
+	const seen = new Set();
+	for (let id = Object.keys(next).find((k) => !into.has(k)); id && !seen.has(id); id = next[id]) {
+		seen.add(id);
+		const sides = (side[id] ?? []).map((s) => `<div class="flow-side">${escapeHtml(label[s] ?? s)}</div>`).join("");
+		rows.push(`<div class="flow-row"><div class="flow-box">${escapeHtml(label[id] ?? id)}</div>${sides}</div>`);
+	}
+	if (rows.length < 2) return null;
+	return `<div class="flow">${rows.join("")}</div>`;
+}
+
 function md(text) {
 	try {
 		return marked.parse(String(text ?? ""));
@@ -344,6 +393,7 @@ function searchLibrary() {
 // ---------------------------------------------------------------- notes pane
 
 let noteShown = null; // the note on screen, or null for the list
+let noteDir = ""; // while a note is rendered: its folder, for the images next to it
 let notesList = [];
 
 function showPane(open) {
@@ -379,6 +429,7 @@ async function showNoteList() {
 	$("note-name").textContent = t("notes");
 	$("note-back").hidden = true;
 	$("note-app").hidden = true;
+	$("note-read").hidden = true;
 	$("note-filter").hidden = false;
 	showPane(true);
 	try {
@@ -406,9 +457,20 @@ async function openNote(path) {
 	$("note-filter").hidden = true;
 	const front = /^---\r?\n([\s\S]*?)\r?\n---(?:\r?\n|$)/.exec(data.text);
 	const content = el("div", { class: "md" });
+	noteDir = data.path.replace(/[\\/][^\\/]*$/, "");
 	content.innerHTML = md(front ? data.text.slice(front[0].length) : data.text);
+	noteDir = "";
 	attachCopyButtons(content);
-	$("note-body").replaceChildren(front ? el("details", { class: "front" }, el("summary", { text: t("properties") }), el("pre", { text: front[1] })) : "", content);
+	attachTableButtons(content, data.name.replace(/\.md$/i, ""));
+	// The evidence line: what the note was written from, drawn solid, dashed or dotted.
+	const evidence = front && /^evidence:\s*(.+?)\s*$/m.exec(front[1])?.[1];
+	const kind = evidence && (/full/i.test(evidence) ? "ev-full" : /abstract/i.test(evidence) ? "ev-abstract" : /metadata/i.test(evidence) ? "ev-meta" : "");
+	$("note-body").replaceChildren(
+		evidence ? el("p", { class: `evidence ${kind}` }, "evidence: ", el("span", { text: evidence })) : "",
+		front ? el("details", { class: "front" }, el("summary", { text: t("properties") }), el("pre", { text: front[1] })) : "",
+		content,
+	);
+	$("note-read").hidden = false;
 	$("note-body").scrollTop = 0;
 	showPane(true);
 }
@@ -519,17 +581,40 @@ function exportConversation() {
 	if (!msgs.length) return;
 	const date = new Date().toISOString().slice(0, 10);
 	const content = `# ${t("exportHeading")} (${date})\n\n${t("exportMode")}: ${t(mode())}\n\n---\n\n${msgs.join("\n---\n\n")}`;
-	const blob = new Blob([content], { type: "text/markdown;charset=utf-8" });
-	const url = URL.createObjectURL(blob);
-	const a = document.createElement("a");
-	a.href = url;
-	a.download = `Sub-Sub-${date}.md`;
+	download(content, `Sub-Sub-${date}.md`, "text/markdown;charset=utf-8");
+}
+
+/** Save text as a file in the downloads folder. */
+function download(content, name, type) {
+	const url = URL.createObjectURL(new Blob([content], { type }));
+	const a = el("a", { href: url, download: name });
 	document.body.append(a);
 	a.click();
 	a.remove();
 	URL.revokeObjectURL(url);
 }
 
+/** A table as CSV for Excel, Rayyan or Covidence. Excel in Portuguese expects semicolons; the BOM keeps the accents. */
+function tableCsv(table) {
+	const sep = lang === "pt" ? ";" : ",";
+	const cell = (c) => {
+		const v = c.textContent.replace(/\s+/g, " ").trim(); // not innerText: the header is upper case only in CSS
+		return /[",;\n]/.test(v) ? `"${v.replaceAll('"', '""')}"` : v;
+	};
+	return `\ufeff${[...table.rows].map((r) => [...r.cells].map(cell).join(sep)).join("\r\n")}\r\n`;
+}
+
+/** A "Download CSV" button under each table (evidence tables, extraction sheets, matrices). */
+function attachTableButtons(root, name) {
+	const wraps = [...root.querySelectorAll(".md-table-wrap")];
+	wraps.forEach((wrap, i) => {
+		if (wrap.nextElementSibling?.classList.contains("table-actions")) return;
+		const file = `${name}${wraps.length > 1 ? `-${i + 1}` : ""}.csv`;
+		const btn = el("button", { type: "button", class: "msg-action-btn", text: t("downloadCsv"), onclick: () => download(tableCsv(wrap.querySelector("table")), file, "text/csv;charset=utf-8") });
+		wrap.after(el("div", { class: "table-actions" }, btn));
+	});
+}
+
 function closeSide() {
 	$("side").classList.remove("open");
 	$("menu-btn").setAttribute("aria-expanded", "false");
@@ -801,6 +886,7 @@ function renderAssistantFinal(message, msg = startAssistant()) {
 			const node = el("div", { class: "md" });
 			node.innerHTML = md(c.text);
 			attachCopyButtons(node);
+			attachTableButtons(node, `Sub-Sub-${new Date().toISOString().slice(0, 10)}`);
 			msg.box.append(node);
 		} else if (c.type === "toolCall") {
 			const row = toolRow(c.id, c.name, c.arguments);
@@ -1436,6 +1522,14 @@ $("library-search").addEventListener("input", searchLibrary);
 $("notes-btn").addEventListener("click", () => ($("note-pane").hidden ? showNoteList() : showPane(false)));
 $("note-back").addEventListener("click", showNoteList);
 $("note-close").addEventListener("click", () => showPane(false));
+// Reading mode for notes: larger type and wider spacing, remembered on this computer.
+function setReading(on) {
+	$("note-pane").classList.toggle("reading", on);
+	$("note-read").setAttribute("aria-pressed", String(on));
+	localStorage.setItem("subsub-reading", String(on));
+}
+$("note-read").addEventListener("click", () => setReading(!$("note-pane").classList.contains("reading")));
+setReading(localStorage.getItem("subsub-reading") === "true");
 $("note-app").addEventListener("click", () => noteShown && api("/api/open", { path: noteShown.path }).catch((err) => note(err.message, "warning")));
 $("note-filter").addEventListener("input", renderNoteList);
 $("note-pane").addEventListener("keydown", (e) => {

package/web/i18n.js

@@ -109,6 +109,9 @@ export const STRINGS = {
 		notesHint: "The notes in your Sub-Sub folder",
 		allNotes: "All notes",
 		properties: "Properties",
+		readingMode: "Reading mode",
+		readingModeHint: "Larger type and wider line spacing for the note",
+		downloadCsv: "Download CSV",
 		filterNotes: "Filter notes",
 		noNotes: "No notes yet.",
 		openInApp: "Open in app",
@@ -248,6 +251,9 @@ export const STRINGS = {
 		notesHint: "As notas da sua pasta do Sub-Sub",
 		allNotes: "Todas as notas",
 		properties: "Propriedades",
+		readingMode: "Modo de leitura",
+		readingModeHint: "Letra maior e mais espaço entre linhas na nota",
+		downloadCsv: "Transferir CSV",
 		filterNotes: "Filtrar notas",
 		noNotes: "Ainda não há notas.",
 		openInApp: "Abrir na aplicação",
@@ -293,7 +299,7 @@ export const ACTIONS = {
 		{ cmd: "lit", en: "Literature review", pt: "Revisão da literatura" },
 		{ cmd: "lit reading list:", en: "Reading list", pt: "Lista de leitura" },
 		{ cmd: "compare", en: "Compare sources", pt: "Comparar fontes" },
-		{ cmd: "lit-note", item: true, en: "Literature note", pt: "Nota de leitura" },
+		{ cmd: "lit-note", item: true, en: "Literature note", pt: "Nota de literatura" },
 		{ cmd: "synthesis", en: "Synthesis", pt: "Síntese" },
 		{ cmd: "gaps", en: "What is missing", pt: "O que falta" },
 		{ cmd: "manuscript", en: "Check a manuscript", pt: "Verificar um manuscrito" },
@@ -311,6 +317,7 @@ export const ACTIONS = {
 		{ cmd: "import-queue", send: true, en: "Import the queue", pt: "Importar a fila" },
 		{ cmd: "history", send: true, en: "Recent changes", pt: "Alterações recentes" },
 		{ cmd: "undo", send: true, en: "Undo the last change", pt: "Desfazer a última alteração" },
+		{ cmd: "feedback", en: "Report a problem", pt: "Comunicar um problema" },
 	],
 };
 
@@ -332,6 +339,7 @@ export const SUGGESTIONS = {
 export const TOOLS = {
 	en: {
 		find_items: "search the library",
+		get_figure: "cut a figure out of the PDF",
 		standalone_items: "list files without a parent item",
 		set_parent_items: "give files a parent item",
 		find_reference: "look up a reference",
@@ -392,6 +400,7 @@ export const TOOLS = {
 	},
 	pt: {
 		find_items: "pesquisar na biblioteca",
+		get_figure: "recortar uma figura do PDF",
 		standalone_items: "listar ficheiros sem item principal",
 		set_parent_items: "dar um item principal aos ficheiros",
 		find_reference: "procurar uma referência",

package/web/icon.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="7" fill="#1d4f7c"/>
-  <rect x="5.5" y="8" width="21" height="16" rx="1.5" fill="#f7f6f2"/>
-  <path d="M9 12.5h8M9 16h14" stroke="#1d4f7c" stroke-width="1.6" stroke-linecap="round"/>
-  <circle cx="16" cy="20.3" r="1.5" fill="#1d4f7c"/>
+  <rect width="32" height="32" rx="7" fill="#2c5d87"/>
+  <rect x="5.5" y="8" width="21" height="16" rx="1.5" fill="#f4f5f1"/>
+  <path d="M9 12.5h8M9 16h14" stroke="#2c5d87" stroke-width="1.6" stroke-linecap="round"/>
+  <circle cx="16" cy="20.3" r="1.5" fill="#2c5d87"/>
 </svg>

package/web/index.html

@@ -6,7 +6,7 @@
 	<meta name="color-scheme" content="light dark">
 	<title>Sub-Sub</title>
 	<link rel="icon" href="/icon.svg" type="image/svg+xml">
-	<link rel="preload" href="/fonts/IBMPlexSans.woff2" as="font" type="font/woff2" crossorigin>
+	<link rel="preload" href="/fonts/AtkinsonHyperlegibleNext.woff2" as="font" type="font/woff2" crossorigin>
 	<link rel="stylesheet" href="/app.css">
 	<script type="module" src="/app.js"></script>
 </head>
@@ -86,6 +86,7 @@
 			<div class="note-head">
 				<button type="button" class="link-btn" id="note-back" data-i18n="allNotes">All notes</button>
 				<span class="note-name" id="note-name"></span>
+				<button type="button" class="link-btn" id="note-read" aria-pressed="false" data-i18n="readingMode" data-i18n-title="readingModeHint" hidden>Reading mode</button>
 				<button type="button" class="link-btn" id="note-app" data-i18n="openInApp" hidden>Open in app</button>
 				<button type="button" class="link-btn" id="note-close" data-i18n="close">Close</button>
 			</div>