Houmeres/LLeMbas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 23 Wiki Activity

A phone, and how much of this could not be used on one

Browse Source 
The sidebar was a 280px panel laid over the page below the phone breakpoint,
opened from first paint, with the only control that closed it underneath it --
and that control existed on /chat and on none of the seven other pages carrying
a sidebar, Settings included. It starts closed at that width now, slides, dims
the page behind it, and closes by tapping beside it, by Escape, or by its own
button, which is inside the drawer where it can be reached.

Everything a finger has to hit was 36px, or 28 for renaming a chat, every action
on a message and every panel's close button. Raising --control-h under a coarse
pointer is the only fix that reaches all forty of them, which is what that token
is for. The row and message actions were also hover-only, so on a phone they did
not exist at all.

Installing: the splash and the browser chrome follow the instance's theme rather
than always being Moria's near-black; there are screenshots, so the install
offer is a dialog rather than a one-line bar; a new release no longer takes over
a page somebody is reading; the notification badge is a silhouette rather than a
grey square; and a browser rotating its own subscription no longer ends
notifications for good.

Every request now says it is happening -- nothing did before, so anything slower
than a few milliseconds looked like a click that had not registered.

A chat can be archived. The column has been filtered on in four places since
folders arrived and written by nothing, which is what made it look built.

chat.css may contain media queries. The ban protected the composer toolbar from
being "fixed" with a breakpoint; that guarantee is asserted directly now, and
the old test would have passed a version of the file that wrapped the toolbar
without one.

scripts/shoot.py is the instrument all of this was found with: it renders a page
through TestClient into a real headless browser at a real size and refuses to
run if an asset URL was left pointing at testserver.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Homer
2026-09-25 13:39:35 +00:00
co-authored by Claude Opus 5
parent 92070d7879
commit 28390095a9
44 changed files with 2290 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/lembas/web/static/js/app.js
+182 -5
View File
@@ -54,11 +54,20 @@
/* Installed, the browser's own chrome is the application's chrome, so it
has to follow the theme too. Read from the stylesheet rather than
repeating the hex here: tokens.css is the one place colours live. */
var meta = document.querySelector('meta[name="theme-color"]');
if (meta) {
var bg = getComputedStyle(document.documentElement)
.getPropertyValue("--bg").trim();
if (bg) meta.setAttribute("content", bg);
var metas = document.querySelectorAll('meta[name="theme-color"]');
var bg = getComputedStyle(document.documentElement)
.getPropertyValue("--bg").trim();
if (bg) {
metas.forEach(function (meta) {
/* There are two of them, scoped by `prefers-color-scheme`, so that a
light instance is not painted dark before this file has run. Once it
has, the reader's *chosen* theme is the answer and the system's
preference is not -- somebody on the parchment theme inside a dark
desktop wants parchment. Dropping the `media` attribute is what makes
the choice win; leaving it would let the unchosen one apply. */
meta.removeAttribute("media");
meta.setAttribute("content", bg);
});
}
/* The toggle names where it is going, not where it is. With more than two
@@ -668,7 +677,51 @@
}
}
/* --- The sidebar -------------------------------------------------------
Its own pair of functions rather than a branch inside `setPanel`, because
it is the one panel whose *default* depends on the width of the window:
open beside the conversation on a desktop, closed over it on a phone. The
`hidden` attribute the other three use is a single value for both, which
is how the drawer came to be open on every phone with its own toggle
underneath it.
`data-sidebar` on <html> has a third state -- absent -- meaning "follow
the width", and absent is what the server renders, because the server
cannot know the width. Everything downstream is unchanged: `syncToggles`
still writes `aria-expanded` on every control pointing here, and the panel
still gets `lembas:toggle`. */
var NARROW = "(max-width: 48rem)";
function sidebarOpen() {
var state = document.documentElement.dataset.sidebar;
if (state === "open") return true;
if (state === "closed") return false;
return !window.matchMedia(NARROW).matches;
}
function setSidebar(open) {
var panel = document.querySelector("#sidebar");
document.documentElement.dataset.sidebar = open ? "open" : "closed";
syncToggles("#sidebar", open);
/* Nothing behind an open drawer may be reached by the keyboard -- but only
while it *is* a drawer. Cleared whenever the query stops matching, and
cleared unconditionally when it closes: an `inert` left behind on a
window somebody widened is a page that has stopped responding, which is
a far worse bug than the one it is here to fix. */
var main = document.querySelector(".shell > .main");
if (main) main.toggleAttribute("inert", open && window.matchMedia(NARROW).matches);
if (panel) {
panel.dispatchEvent(
new CustomEvent("lembas:toggle", { bubbles: true, detail: { open: open } })
);
}
}
function setPanel(selector, open, group) {
if (selector === "#sidebar") return setSidebar(open);
var panel = document.querySelector(selector);
if (!panel) return;
@@ -855,6 +908,10 @@
var toggle = event.target.closest("[data-toggle]");
if (toggle) {
event.preventDefault();
if (toggle.dataset.toggle === "#sidebar") {
setSidebar(!sidebarOpen());
return;
}
var panel = document.querySelector(toggle.dataset.toggle);
if (!panel) return;
setPanel(toggle.dataset.toggle, panel.hasAttribute("hidden"), toggle.dataset.toggleGroup);
@@ -900,12 +957,132 @@
applyTheme(currentTheme());
setupDropzone();
setupResize();
/* The toggle used to render `aria-expanded="true"` in the template, which
is a claim nobody checked and which was false on every phone. The
stylesheet decides whether the drawer is showing; this is the one place
that can ask it and say so. */
syncToggles("#sidebar", sidebarOpen());
});
/* A drawer that is dismissed by tapping beside it should be dismissed by
Escape too -- and only while it *is* a drawer, or Escape would collapse the
sidebar on a desktop, where nobody asked it to. */
document.addEventListener("keydown", function (event) {
if (event.key !== "Escape") return;
if (!window.matchMedia(NARROW).matches || !sidebarOpen()) return;
if (document.querySelector("dialog[open]")) return;
setSidebar(false);
});
/* Widening the window past the breakpoint must not leave `inert` on the page
behind a drawer that is no longer a drawer. Recomputed rather than cleared,
so narrowing it again while the drawer is open puts the guard back. */
window.matchMedia(NARROW).addEventListener("change", function () {
var main = document.querySelector(".shell > .main");
if (main) {
main.toggleAttribute(
"inert", sidebarOpen() && window.matchMedia(NARROW).matches
);
}
syncToggles("#sidebar", sidebarOpen());
});
/* Before first paint rather than on DOMContentLoaded, so a panel that was
dragged wider does not open at its default and jump. */
applyWidths();
/* --- Saying that something is happening --------------------------------
A count, not a flag: several requests overlap constantly here -- the
unread poll every ten seconds, the transcript tail, whatever somebody just
clicked -- and a flag means the first of them to finish switches the bar
off while the others are still running.
The poll and the tail are excluded. They are the two requests nobody
started and nobody is waiting for, and a bar that sweeps every ten seconds
on an idle page is not information, it is a tic. */
var pending = 0;
function quiet(event) {
var el = event.detail && event.detail.elt;
if (!el || !el.getAttribute) return false;
var url = (event.detail.pathInfo && event.detail.pathInfo.requestPath) || "";
return url.indexOf("/unread") !== -1 || url.indexOf("/tail") !== -1;
}
function showProgress(on) {
var bar = document.querySelector("[data-progress]");
if (bar) bar.classList.toggle("is-busy", on);
}
document.body.addEventListener("htmx:beforeRequest", function (event) {
if (quiet(event)) return;
pending += 1;
showProgress(true);
});
["htmx:afterRequest", "htmx:sendError", "htmx:timeout", "htmx:abort"].forEach(
function (name) {
document.body.addEventListener(name, function (event) {
if (quiet(event)) return;
pending = Math.max(0, pending - 1);
if (!pending) showProgress(false);
});
}
);
/* --- A release that arrived while you were reading ----------------------
The worker no longer takes over open pages on its own -- see sw.js -- so
something has to say that one is waiting, and the reader decides. A toast
rather than a reload: an application with a reply streaming into it must
not be navigated out from under somebody. */
function watchForUpdate(registration) {
function offer(worker) {
if (!worker || !navigator.serviceWorker.controller) return;
worker.addEventListener("statechange", function () {
if (worker.state !== "installed") return;
window.lembas.notify(
"A new version is ready. Reload to use it.",
{ kind: "info", action: { label: "Reload", run: function () {
worker.postMessage({ type: "SKIP_WAITING" });
} } }
);
});
}
if (registration.waiting && navigator.serviceWorker.controller) {
window.lembas.notify(
"A new version is ready. Reload to use it.",
{ kind: "info", action: { label: "Reload", run: function () {
registration.waiting.postMessage({ type: "SKIP_WAITING" });
} } }
);
}
registration.addEventListener("updatefound", function () {
offer(registration.installing);
});
}
/* The new worker calling skipWaiting() is what fires this, and reloading is
the right answer to it -- the page is now being served by a worker whose
cache it did not start from.
Two guards, and the second is the one that is easy to miss. A flag, because
`controllerchange` can fire more than once. And `hadController`, because on
a *first* visit there is no worker at all: the one that installs then calls
`clients.claim()`, which fires this event for the first time -- so without
it, the very first page anybody loads reloads itself in front of them for
no reason they could possibly work out. */
var reloading = false;
if ("serviceWorker" in navigator) {
var hadController = !!navigator.serviceWorker.controller;
navigator.serviceWorker.addEventListener("controllerchange", function () {
if (reloading || !hadController) return;
reloading = true;
window.location.reload();
});
navigator.serviceWorker.ready.then(watchForUpdate).catch(function () {});
}
/* After any htmx swap: re-measure the composer and follow new content. */
document.body.addEventListener("htmx:afterSwap", function () {
document.querySelectorAll("[data-autosize]").forEach(autosize);