Shell: tooltips at once, one or two words; text-size buttons are drawn − and +

Every header and top-bar button's title becomes a tip the shell shows the
moment the pointer arrives (the browser's own waits a second and looks
different everywhere); it moves from `title` to data-tip so the native one
never appears, and a module that sets `title` again is picked up on the
next hover. The shell's own labels are "Settings" and "Remove"; the top
bar's are "Fullscreen", "Add tile", "Layouts", "Admin"; Slack, PCO Plan,
ProdCom and Timers shorten theirs to match. A− / A+ are a drawn − and +
in Slack, PCO Plan and ProdCom, sized like every other header icon.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Waters Church
2026-09-15 10:49:58 -04:00
co-authored by Claude Fable 5.1
parent 1930fb142d
commit 818def822d
8 changed files with 127 additions and 31 deletions
+8 -4
View File
@@ -635,6 +635,10 @@ const emojiMenu = (() => {
/* ── the factory ────────────────────────────────────────────────────── */
/* the text-size buttons: a drawn − and + at the icon size, like every other header icon */
const MINUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M5 12h14"/></svg>';
const PLUS_SVG = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg>';
export default function create({ root, moduleApi }) {
const variant = String(moduleApi.variant || '');
// The entry's preset `view` is authoritative; a tile added under 1.0.0 has
@@ -680,11 +684,11 @@ function createTranscriptTile({ root, moduleApi }) {
moduleApi.saveInstanceSettings({ textSize: Math.min(48, Math.max(10, textSizePx(moduleApi) + delta)) });
applyInstanceSettings();
}
moduleApi.header.addButton({ label: 'A−', title: 'Smaller text', onClick: () => bumpTextSize(-1) });
moduleApi.header.addButton({ label: 'A+', title: 'Larger text', onClick: () => bumpTextSize(1) });
moduleApi.header.addButton({ icon: MINUS_SVG, title: 'Smaller text', onClick: () => bumpTextSize(-1) });
moduleApi.header.addButton({ icon: PLUS_SVG, title: 'Larger text', onClick: () => bumpTextSize(1) });
moduleApi.header.addButton({
icon: JUMP_SVG,
title: 'Jump to latest',
title: 'Latest',
onClick() {
pinnedToLatest = true;
jumpBtn.hidden = true;
@@ -1056,7 +1060,7 @@ function createSendTile({ root, moduleApi, mode }) {
const gate = root.querySelector('.sl-gate');
const compose = root.querySelector('.sl-compose');
const lockBtn = moduleApi.header.addButton({ icon: LOCK_SVG, title: 'Lock now', onClick: () => lock('Locked') });
const lockBtn = moduleApi.header.addButton({ icon: LOCK_SVG, title: 'Lock', onClick: () => lock('Locked') });
lockBtn.style.display = 'none';
function applyInstanceSettings() {