@tiagojct/subsub 0.7.0 → 0.8.0

package/web/app.js

@@ -104,9 +104,12 @@ function updateLayoutUI() {
 	const isWide = currentLayout === "wide";
 	document.body.classList.toggle("layout-full", isWide);
 	const textEl = $("width-btn-text");
-	if (textEl) textEl.textContent = isWide ? t("layoutFocus") : t("layoutWide");
+	if (textEl) textEl.textContent = t("layoutWide");
 	const btn = $("width-btn");
-	if (btn) btn.title = t("toggleWidth");
+	if (btn) {
+		btn.title = t("toggleWidth");
+		btn.setAttribute("aria-pressed", String(isWide));
+	}
 }
 
 function toggleLayout() {
@@ -121,16 +124,23 @@ function themeLabel(theme) {
 	return t("themeAuto");
 }
 
+/** Stroke icons for the theme button: fixed markup, no user text. */
+const THEME_ICONS = {
+	light: '<circle cx="12" cy="12" r="4"/><path d="M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M5.3 5.3l1.4 1.4M17.3 17.3l1.4 1.4M5.3 18.7l1.4-1.4M17.3 6.7l1.4-1.4"/>',
+	dark: '<path d="M20 14.5A8 8 0 0 1 9.5 4a8 8 0 1 0 10.5 10.5Z"/>',
+	auto: '<rect x="3" y="4.5" width="18" height="12" rx="1.5"/><path d="M8.5 20h7M12 16.5V20"/>',
+};
+
 function updateThemeUI() {
-	const icon = currentTheme === "light" ? "☀️" : currentTheme === "dark" ? "🌙" : "💻";
-	const label = `${icon} ${themeLabel(currentTheme)}`;
+	const label = `${t("theme")}: ${themeLabel(currentTheme)}`;
 	const btn = $("theme-btn");
 	if (btn) {
-		btn.textContent = label;
-		btn.title = t("themeToggle");
+		btn.innerHTML = `<svg viewBox="0 0 24 24" aria-hidden="true">${THEME_ICONS[currentTheme] ?? THEME_ICONS.auto}</svg>`;
+		btn.append(el("span", { class: "visually-hidden", text: label }));
+		btn.title = `${label} (${t("themeToggle")})`;
 	}
 	const sideBtn = $("theme-btn-side");
-	if (sideBtn) sideBtn.textContent = label;
+	if (sideBtn) sideBtn.textContent = themeLabel(currentTheme);
 }
 
 function setTheme(theme) {
@@ -153,7 +163,10 @@ function toggleTheme() {
 function applyLang() {
 	document.documentElement.lang = lang === "pt" ? "pt-PT" : "en";
 	for (const e of document.querySelectorAll("[data-i18n]")) e.textContent = t(e.dataset.i18n);
+	for (const e of document.querySelectorAll("[data-i18n-placeholder]")) e.placeholder = t(e.dataset.i18nPlaceholder);
+	for (const e of document.querySelectorAll("[data-i18n-title]")) e.title = t(e.dataset.i18nTitle);
 	updateThemeUI();
+	updateLayoutUI();
 }
 
 function mode() {
@@ -165,7 +178,7 @@ function renderHeader() {
 	for (const b of document.querySelectorAll(".modes button")) b.setAttribute("aria-pressed", String(b.dataset.mode === mode()));
 	if (state?.profile) $("profile").value = $("profile-side").value = state.profile;
 	$("starbuck-toggle").checked = Boolean(state?.starbuck);
-	$("starbuck-toggle").parentElement.title = t("starbuckHint");
+	$("starbuck-label").title = t("starbuckHint");
 	const m = state?.model ?? session?.model;
 	$("model-btn").textContent = $("model-btn-side").textContent = m ? m.id : t("noModel");
 	const lib = $("library");
@@ -179,16 +192,22 @@ function renderHeader() {
 		txt.textContent = t("zoteroDown");
 		lib.classList.add("down");
 	} else {
-		const parts = [t("items", { n: L.items ?? "?" })];
-		if (L.toReview) parts.push(t("toReview", { n: L.toReview }));
+		const num = (n) => (typeof n === "number" ? n.toLocaleString(lang === "pt" ? "pt-PT" : "en-GB") : (n ?? "?"));
+		const parts = [t("items", { n: num(L.items) })];
+		if (L.toReview) parts.push(t("toReview", { n: num(L.toReview) }));
 		txt.textContent = `Zotero: ${parts.join(", ")}`;
 		lib.classList.add("reachable");
 	}
 	if (state?.down?.length) {
-		txt.textContent += ` | ${t("serversDown", { x: state.down.join(", ") })}`;
+		txt.textContent += ` · ${t("serversDown", { x: state.down.join(", ") })}`;
 		lib.classList.add("down");
 	}
+	lib.title = txt.textContent;
 	$("input").placeholder = mode() === "librarian" ? t("placeholderLibrarian") : t("placeholderResearcher");
+	if (log.querySelector(".empty")) {
+		clearEmpty();
+		renderEmpty();
+	}
 	renderActions();
 	renderBanner();
 	updateThemeUI();
@@ -355,14 +374,16 @@ function renderEmpty() {
 		el(
 			"div",
 			{ class: "empty" },
+			el("p", { class: "kicker", text: t(mode()) }),
 			el("h1", { text: t("emptyTitle") }),
+			el("p", { class: "lede", text: t(mode() === "librarian" ? "emptyLibrarian" : "emptyResearcher") }),
 			el(
 				"div",
 				{ class: "chips" },
 				s.map((x) =>
 					el("button", {
 						type: "button",
-						text: x.trim(),
+						text: x.endsWith(" ") ? `${x.trim()}…` : x,
 						onclick: () => {
 							const input = $("input");
 							input.value = x;
@@ -771,6 +792,7 @@ function nextDialog() {
 	const d = dialogs[0];
 	shownDialog = d;
 	const dlg = $("dialog");
+	$("dialog-kicker").textContent = d.method === "confirm" ? t("previewKicker") : "";
 	$("dialog-title").textContent = dialogTitle(d);
 	const hint = $("dialog-hint");
 	hint.textContent = d.method === "confirm" ? t("approveHint") : "";

package/web/i18n.js

@@ -72,9 +72,9 @@ export const STRINGS = {
 		layoutFocus: "Focus",
 		toggleWidth: "Toggle wide layout",
 		copy: "Copy",
-		copied: "Copied!",
+		copied: "Copied",
 		copyNote: "Copy text",
-		searchConversations: "Search conversations...",
+		searchConversations: "Search conversations",
 		export: "Export",
 		exportTitle: "Export conversation",
 		confirmShortcutHint: "Y to approve, N to decline",
@@ -82,6 +82,10 @@ export const STRINGS = {
 		starbuckHint: "Checks that cited works exist, match their citation and were not retracted. Sub-Sub restarts when you change this.",
 		starbuckOn: "Reference checks are on. Use /verify, or ask the researcher to check a manuscript's references.",
 		starbuckOff: "Reference checks are off.",
+		composerHint: "Enter sends. Shift+Enter starts a new line. / shows the commands.",
+		emptyResearcher: "The researcher reads your library and searches PubMed, Europe PMC and OpenAlex. It cannot change your library.",
+		emptyLibrarian: "The librarian changes your library. You see a preview of each change, and nothing changes until you approve it.",
+		previewKicker: "Preview",
 	},
 	pt: {
 		researcher: "Investigador",
@@ -153,9 +157,9 @@ export const STRINGS = {
 		layoutFocus: "Foco",
 		toggleWidth: "Mudar largura do ecrã",
 		copy: "Copiar",
-		copied: "Copiado!",
+		copied: "Copiado",
 		copyNote: "Copiar texto",
-		searchConversations: "Procurar conversas...",
+		searchConversations: "Procurar conversas",
 		export: "Exportar",
 		exportTitle: "Exportar conversa",
 		confirmShortcutHint: "Y para aprovar, N para recusar",
@@ -163,6 +167,10 @@ export const STRINGS = {
 		starbuckHint: "Verifica se as obras citadas existem, correspondem à citação e não foram retratadas. O Sub-Sub reinicia quando muda esta opção.",
 		starbuckOn: "A verificação de referências está ligada. Use /verify, ou peça ao investigador que verifique as referências de um manuscrito.",
 		starbuckOff: "A verificação de referências está desligada.",
+		composerHint: "Enter envia. Shift+Enter muda de linha. / mostra os comandos.",
+		emptyResearcher: "O investigador lê a sua biblioteca e pesquisa na PubMed, Europe PMC e OpenAlex. Não pode alterar a biblioteca.",
+		emptyLibrarian: "O bibliotecário altera a sua biblioteca. Vê uma pré-visualização de cada alteração, e nada muda até a aprovar.",
+		previewKicker: "Pré-visualização",
 	},
 };
 

package/web/icon.svg

@@ -1,12 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
-  <rect width="32" height="32" rx="5" fill="#f8f6f0"/>
-  <rect width="28" height="28" x="2" y="2" rx="4" fill="none" stroke="#211e1b" stroke-width="1.2"/>
-  <!-- Open Folio Book -->
-  <path d="M7 21.5V9A2 2 0 0 1 9 7h7v15H9a2 2 0 0 0-2 2v-2.5Z" fill="none" stroke="#211e1b" stroke-width="1.6" stroke-linejoin="round"/>
-  <path d="M25 21.5V9A2 2 0 0 0 23 7h-7v15h7a2 2 0 0 1 2 2v-2.5Z" fill="none" stroke="#211e1b" stroke-width="1.6" stroke-linejoin="round"/>
-  <line x1="16" y1="7" x2="16" y2="22" stroke="#211e1b" stroke-width="1.5"/>
-  <line x1="10" y1="11" x2="13" y2="11" stroke="#211e1b" stroke-width="1.2" stroke-linecap="round"/>
-  <line x1="10" y1="14" x2="13" y2="14" stroke="#211e1b" stroke-width="1.2" stroke-linecap="round"/>
-  <line x1="19" y1="11" x2="22" y2="11" stroke="#211e1b" stroke-width="1.2" stroke-linecap="round"/>
-  <line x1="19" y1="14" x2="22" y2="14" stroke="#211e1b" stroke-width="1.2" stroke-linecap="round"/>
+  <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"/>
 </svg>

package/web/index.html

@@ -6,25 +6,22 @@
 	<meta name="color-scheme" content="light dark">
 	<title>Sub-Sub</title>
 	<link rel="icon" href="/icon.svg" type="image/svg+xml">
-	<link rel="preconnect" href="https://fonts.googleapis.com">
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-	<link href="https://fonts.googleapis.com/css2?family=Courier+Prime:ital,wght@0,400;0,700;1,400&family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=JetBrains+Mono:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&display=swap" rel="stylesheet">
-	<link rel="stylesheet" href="/glauca.css">
+	<link rel="preload" href="/fonts/IBMPlexSans.woff2" as="font" type="font/woff2" crossorigin>
 	<link rel="stylesheet" href="/app.css">
 	<script type="module" src="/app.js"></script>
 </head>
 <body data-mode="researcher">
 	<div class="app">
 		<header class="top">
-			<button type="button" class="ghost menu-btn" id="menu-btn" aria-controls="side" aria-expanded="true" title="Toggle catalog sidebar"><svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="18" height="18" x="3" y="3" rx="2"/><path d="M9 3v18"/></svg> <span data-i18n="menu">Menu</span></button>
-			<div class="brand"><span class="mark" aria-hidden="true"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z"/><path d="M6 6h10"/><path d="M6 10h10"/></svg></span> Sub-Sub</div>
+			<button type="button" class="icon-btn" id="menu-btn" aria-controls="side" aria-expanded="true" data-i18n-title="menu" title="Menu"><svg viewBox="0 0 24 24" aria-hidden="true"><rect x="3.5" y="4.5" width="17" height="15" rx="2"/><path d="M9.5 4.5v15"/></svg><span class="visually-hidden" data-i18n="menu">Menu</span></button>
+			<div class="brand"><svg class="mark" viewBox="0 0 24 24" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="1.5"/><path d="M6.5 9h7M6.5 12h11"/><circle cx="12" cy="16" r="1.1"/></svg><span>Sub<span class="hyphen">-</span>Sub</span></div>
 			<div class="modes" role="group" aria-label="Mode">
 				<button type="button" data-mode="researcher" aria-pressed="true" data-i18n="researcher">Researcher</button>
 				<button type="button" data-mode="librarian" aria-pressed="false" data-i18n="librarian">Librarian</button>
 			</div>
 			<div class="status">
 				<span class="library" id="library"><span class="library-dot" aria-hidden="true"></span><span class="library-text"></span></span>
-				<label class="profile"><span class="visually-hidden" data-i18n="profile">Profile</span>
+				<label class="profile wide-only"><span class="visually-hidden" data-i18n="profile">Profile</span>
 					<select id="profile">
 						<option value="reader">Reader</option>
 						<option value="scholar">Scholar</option>
@@ -32,14 +29,14 @@
 						<option value="editor">Editor</option>
 					</select>
 				</label>
-				<button type="button" class="ghost model-btn" id="model-btn"></button>
-				<button type="button" class="ghost width-btn" id="width-btn" aria-label="Toggle wide layout" title="Toggle wide layout"><svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" x2="14" y1="3" y2="10"/><line x1="3" x2="10" y1="21" y2="14"/></svg> <span id="width-btn-text">Wide</span></button>
-				<button type="button" class="ghost theme-btn" id="theme-btn" aria-label="Toggle theme" title="Toggle theme"></button>
+				<button type="button" class="chip-btn model-btn wide-only" id="model-btn"></button>
+				<button type="button" class="icon-btn wide-only" id="width-btn" aria-pressed="false"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 12h16M4 12l3.5-3.5M4 12l3.5 3.5M20 12l-3.5-3.5M20 12l-3.5 3.5"/></svg><span class="visually-hidden" id="width-btn-text">Wide</span></button>
+				<button type="button" class="icon-btn" id="theme-btn"></button>
 			</div>
 		</header>
 
 		<aside class="side" id="side">
-			<button type="button" class="primary block" id="new-btn" data-i18n="newConversation">New conversation</button>
+			<button type="button" class="new-btn" id="new-btn"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg><span data-i18n="newConversation">New conversation</span></button>
 			<section class="phone-only settings">
 				<label><span data-i18n="profile">Profile</span>
 					<select id="profile-side">
@@ -53,12 +50,9 @@
 					<button type="button" class="secondary model-btn" id="model-btn-side"></button>
 				</label>
 				<label><span data-i18n="theme">Theme</span>
-					<button type="button" class="secondary theme-btn" id="theme-btn-side"></button>
+					<button type="button" class="secondary" id="theme-btn-side"></button>
 				</label>
 			</section>
-			<section class="addons">
-				<label class="check" title=""><input type="checkbox" id="starbuck-toggle"> <span data-i18n="starbuck">Reference checks (Starbuck)</span></label>
-			</section>
 			<section>
 				<h2 data-i18n="actions">Actions</h2>
 				<div class="actions" id="actions"></div>
@@ -66,16 +60,17 @@
 			<section class="grow">
 				<div class="side-subhead">
 					<h2 data-i18n="conversations">Conversations</h2>
-					<button type="button" class="ghost small" id="export-btn" title="Export conversation as Markdown" data-i18n="export">Export</button>
-				</div>
-				<div class="search-wrap">
-					<input type="search" id="session-search" placeholder="Search conversations..." autocomplete="off">
+					<button type="button" class="link-btn" id="export-btn" data-i18n="export" data-i18n-title="exportTitle">Export</button>
 				</div>
+				<input type="search" id="session-search" class="search" data-i18n-placeholder="searchConversations" placeholder="Search conversations" autocomplete="off">
 				<ul class="sessions" id="sessions"></ul>
 			</section>
 			<footer class="side-foot">
-				<button type="button" class="ghost small" id="quit-btn" data-i18n="quit">Close Sub-Sub</button>
-				<span class="version" id="version"></span>
+				<label class="switch" id="starbuck-label"><input type="checkbox" role="switch" id="starbuck-toggle"><span class="track" aria-hidden="true"></span><span data-i18n="starbuck">Reference checks (Starbuck)</span></label>
+				<div class="side-foot-row">
+					<button type="button" class="link-btn" id="quit-btn" data-i18n="quit">Close Sub-Sub</button>
+					<span class="version" id="version"></span>
+				</div>
 			</footer>
 		</aside>
 
@@ -84,10 +79,15 @@
 			<div class="log" id="log" aria-live="polite"></div>
 			<form class="composer" id="composer">
 				<div class="suggest" id="suggest" role="listbox" hidden></div>
-				<textarea id="input" rows="2" autocomplete="off" spellcheck="true"></textarea>
-				<div class="composer-buttons">
-					<button type="button" class="secondary" id="stop" hidden data-i18n="stop">Stop</button>
-					<button type="submit" class="primary" id="send" data-i18n="send">Send</button>
+				<div class="composer-box">
+					<textarea id="input" rows="1" autocomplete="off" spellcheck="true"></textarea>
+					<div class="composer-row">
+						<span class="composer-hint" data-i18n="composerHint">Enter to send, Shift+Enter for a new line, / for commands</span>
+						<div class="composer-buttons">
+							<button type="button" class="secondary" id="stop" hidden data-i18n="stop">Stop</button>
+							<button type="submit" class="primary" id="send" data-i18n="send">Send</button>
+						</div>
+					</div>
 				</div>
 			</form>
 		</main>
@@ -95,6 +95,7 @@
 
 	<dialog id="dialog" class="modal">
 		<form method="dialog" id="dialog-form">
+			<p class="modal-kicker" id="dialog-kicker"></p>
 			<h2 id="dialog-title"></h2>
 			<p class="hint" id="dialog-hint"></p>
 			<pre class="preview" id="dialog-message"></pre>
@@ -106,7 +107,7 @@
 	<dialog id="model-dialog" class="modal wide">
 		<div class="modal-head">
 			<h2 data-i18n="modelTitle">Model</h2>
-			<button type="button" class="ghost small" id="model-close" data-i18n="close">Close</button>
+			<button type="button" class="link-btn" id="model-close" data-i18n="close">Close</button>
 		</div>
 		<h3 data-i18n="chooseModel">Choose a model</h3>
 		<label class="check"><input type="checkbox" id="model-both" checked> <span data-i18n="forBoth">Use it in both modes</span></label>

package/web/glauca.css

@@ -1,87 +0,0 @@
-/* Sub-Sub Glauca tokens: Vintage & Minimal Bookmaking System */
-:root {
-  --gl-font-serif: "EB Garamond", "Newsreader", "IBM Plex Serif", Georgia, serif;
-  --gl-font-sans: "EB Garamond", "IBM Plex Sans", system-ui, -apple-system, sans-serif;
-  --gl-font-mono: "JetBrains Mono", "Courier Prime", "IBM Plex Mono", ui-monospace, monospace;
-  --gl-font-reading: "EB Garamond", Garamond, Georgia, serif;
-  --gl-text-xs: 0.72rem;
-  --gl-text-sm: 0.88rem;
-  --gl-text-base: 1.05rem;
-  --gl-text-lg: 1.25rem;
-  --gl-text-xl: 1.55rem;
-  --gl-text-2xl: 1.95rem;
-  --gl-text-3xl: 2.45rem;
-  --gl-text-4xl: 3.05rem;
-  --gl-text-display: clamp(2.4rem, 5vw, 3.6rem);
-  --gl-text-poster: clamp(3rem, 8vw, 5.5rem);
-  --gl-leading-tight: 1.15;
-  --gl-leading-snug: 1.35;
-  --gl-leading-normal: 1.65;
-  --gl-leading-relaxed: 1.8;
-  --gl-weight-regular: 400;
-  --gl-weight-medium: 500;
-  --gl-weight-semibold: 600;
-  --gl-weight-bold: 700;
-  --gl-space-0: 0;
-  --gl-space-1: 0.25rem;
-  --gl-space-2: 0.5rem;
-  --gl-space-3: 0.75rem;
-  --gl-space-4: 1rem;
-  --gl-space-5: 1.25rem;
-  --gl-space-6: 1.5rem;
-  --gl-space-8: 2rem;
-  --gl-space-10: 2.5rem;
-  --gl-space-12: 3rem;
-  --gl-space-16: 4rem;
-  --gl-space-20: 5rem;
-  --gl-space-24: 6rem;
-  --gl-radius-none: 0;
-  --gl-radius-sm: 2px;
-  --gl-radius-md: 4px;
-  --gl-radius-lg: 6px;
-  --gl-radius-pill: 999px;
-  --gl-border-width: 1px;
-}
-
-/* Light Default: Warm Archival Paper & Printer's Inks */
-:root,
-[data-mode="light"],
-[data-theme="light"],
-html[data-theme="light"] {
-  --gl-bg: #f8f6f0;
-  --gl-surface: #f2ede2;
-  --gl-surface-raised: #ffffff;
-  --gl-text: #211e1b;
-  --gl-text-muted: #5c554a;
-  --gl-border: #dfd7c6;
-  --gl-accent: #234b6e;
-  --gl-accent-bright: #2f648e;
-  --gl-accent-deep: #15344e;
-  --gl-on-accent: #f8f6f0;
-  --gl-tint-deep: #182a36;
-  --gl-tint: #2c4659;
-  --gl-tint-bright: #486980;
-  --gl-tint-pale: #c4d3dc;
-  --gl-on-tint: #f8f6f0;
-}
-
-/* Dark Mode: Antique Study by Candlelight */
-[data-theme="dark"],
-html[data-theme="dark"],
-[data-mode="dark"] {
-  --gl-bg: #141210;
-  --gl-surface: #1c1916;
-  --gl-surface-raised: #24201c;
-  --gl-text: #eae4d5;
-  --gl-text-muted: #9e9585;
-  --gl-border: #2e2924;
-  --gl-accent: #6ea3cc;
-  --gl-accent-bright: #8bb9dc;
-  --gl-accent-deep: #4a7e9f;
-  --gl-on-accent: #141210;
-  --gl-tint-deep: #0f181f;
-  --gl-tint: #243642;
-  --gl-tint-bright: #3d596b;
-  --gl-tint-pale: #7a9cb3;
-  --gl-on-tint: #eae4d5;
-}