A phone, and how much of this could not be used on one
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:
Claude Opus 5
@@ -78,7 +78,7 @@
|
||||
<input class="input input--mono" id="unload-{{ connection.id }}" name="unload_url"
|
||||
value="{{ connection.unload_url }}" placeholder="No unload call"
|
||||
style="flex: 1; min-width: 0">
|
||||
<select class="select" name="unload_method" style="flex: none">
|
||||
<select class="select" name="unload_method" aria-label="How to ask it to unload" style="flex: none">
|
||||
<option value="POST" {{ 'selected' if connection.unload_method != 'GET' }}>POST</option>
|
||||
<option value="GET" {{ 'selected' if connection.unload_method == 'GET' }}>GET</option>
|
||||
</select>
|
||||
@@ -91,6 +91,20 @@
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field__label" for="headers-{{ connection.id }}">Extra headers</label>
|
||||
<textarea class="textarea input--mono" id="headers-{{ connection.id }}"
|
||||
name="extra_headers" rows="2"
|
||||
placeholder="HTTP-Referer: https://example.org">{% for name, value in (connection.extra_headers_json or {}).items() %}{{ name }}: {{ value }}
|
||||
{% endfor %}</textarea>
|
||||
<p class="field__hint">
|
||||
One <code>Name: value</code> per line, sent with every request to this
|
||||
endpoint. OpenRouter reads <code>HTTP-Referer</code> and
|
||||
<code>X-Title</code> and attributes your usage with them. Leave it empty
|
||||
unless an endpoint has asked for something.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="checkbox">
|
||||
<input type="checkbox" name="enabled" value="true"
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
#}
|
||||
<form method="post" action="/admin/prompts" id="prompt-form">
|
||||
<div class="tabs">
|
||||
<div class="tabs__bar" role="tablist">
|
||||
<div class="tabs__bar" role="radiogroup" aria-label="Prompt groups">
|
||||
{% for key, label, fragments in groups %}
|
||||
<input class="visually-hidden" type="radio" name="prompts-tab"
|
||||
id="tab-{{ key }}" {{ 'checked' if loop.first }}>
|
||||
|
||||
@@ -32,7 +32,8 @@
|
||||
<button class="btn btn--sm btn--danger" type="submit"
|
||||
formaction="/admin/suggestions/{{ suggestion.id }}/delete"
|
||||
data-confirm-button="Delete the suggestion “{{ suggestion.name }}”?"
|
||||
data-confirm-title="Delete suggestion">
|
||||
data-confirm-title="Delete suggestion"
|
||||
aria-label="Delete suggestion" title="Delete suggestion">
|
||||
{{ icon("trash", "icon--sm") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">{% block heading %}Connections{% endblock %}</h1>
|
||||
<div class="topbar__actions">{% block actions %}{% endblock %}</div>
|
||||
</header>
|
||||
|
||||
@@ -13,7 +13,15 @@
|
||||
data-themes="{{ brand.theme_list }}"{% if layout %} style="{{ layout }}"{% endif %}>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
{#
|
||||
`viewport-fit=cover` is what lets `env(safe-area-inset-*)` resolve to
|
||||
anything but zero, and without it the `black-translucent` status bar style
|
||||
below is a promise with nothing behind it: iOS puts the page under the clock
|
||||
and the notch and the tokens that would have paid for it stay at 0.
|
||||
No `maximum-scale` and no `user-scalable=no` -- pinch-zoom is somebody's
|
||||
accessibility setting, not a layout problem to be suppressed.
|
||||
#}
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
|
||||
<title>{% block title %}{{ brand.name }}{% endblock %}</title>
|
||||
<meta name="description" content="{{ brand.tagline or brand.name ~ ' — a web UI for your language models.' }}">
|
||||
<meta name="color-scheme" content="dark light">
|
||||
@@ -36,7 +44,16 @@
|
||||
only what the browser paints with before the stylesheet has resolved.
|
||||
#}
|
||||
<link rel="manifest" href="/manifest.webmanifest">
|
||||
<meta name="theme-color" content="#101317">
|
||||
{#
|
||||
Two, scoped by preference, so the browser has an answer before any of our CSS
|
||||
or JavaScript has run. There used to be one and it was Moria's near-black, so
|
||||
every reader of the light theme got a dark browser chrome on every page load
|
||||
until `app.js` -- which is deferred -- corrected it. `applyTheme` still has
|
||||
the last word, and still reads the value from `--bg` rather than repeating a
|
||||
hex here; these two are only what is painted before it can.
|
||||
#}
|
||||
<meta name="theme-color" content="#101317" media="(prefers-color-scheme: dark)">
|
||||
<meta name="theme-color" content="#F6F1E4" media="(prefers-color-scheme: light)">
|
||||
{% if brand.icon_paths['apple-touch'] %}
|
||||
<link rel="apple-touch-icon" href="/branding/{{ brand.icon_paths['apple-touch'] }}">
|
||||
{% else %}
|
||||
@@ -92,6 +109,23 @@
|
||||
<body{% block body_attrs %}{% endblock %}>
|
||||
{% include "partials/icons.html" %}
|
||||
|
||||
{#
|
||||
Every fetch this application makes, said out loud.
|
||||
|
||||
htmx has had `htmx-request` on the triggering element since the beginning and
|
||||
nothing here has ever used it, so a click that saved a setting, opened a
|
||||
panel or loaded a page of a list looked exactly like a click that did nothing
|
||||
until the answer arrived. On a local endpoint that is a few milliseconds and
|
||||
on anything else it is long enough to click again.
|
||||
|
||||
One bar for the whole page rather than a spinner per control: the interesting
|
||||
question is "is the application busy", and an indicator on the control would
|
||||
need adding to every control ever written, which is how the last one came to
|
||||
be used nowhere. `aria-hidden` because the answer arriving is the thing worth
|
||||
announcing, and htmx already moves focus for that.
|
||||
#}
|
||||
<div class="progress" data-progress aria-hidden="true"><span></span></div>
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
|
||||
<script src="{{ url_for('static', path='vendor/htmx.min.js') }}" defer></script>
|
||||
|
||||
@@ -18,10 +18,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
<button class="btn btn--icon" type="button" aria-label="Toggle sidebar"
|
||||
aria-expanded="true" data-toggle="#sidebar">
|
||||
{{ icon("sidebar") }}
|
||||
</button>
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
|
||||
<h1 class="topbar__title">
|
||||
<span id="chat-title">{{ chat.title if chat else "New chat" }}</span>
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">
|
||||
{{ icon("folder", "icon--sm") }}
|
||||
<span>{{ folder.name }}</span>
|
||||
|
||||
@@ -21,6 +21,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">{% block heading %}Library{% endblock %}</h1>
|
||||
<div class="topbar__actions">{% block actions %}{% endblock %}</div>
|
||||
</header>
|
||||
|
||||
@@ -21,8 +21,16 @@
|
||||
hx-trigger="load"
|
||||
hx-target="this"
|
||||
hx-swap="outerHTML">
|
||||
{# The shape of what is coming, rather than an ellipsis that says only that
|
||||
something is missing. `aria-hidden` and a `role="status"` label beside it,
|
||||
because a paragraph of grey blocks is nothing to read aloud. #}
|
||||
<section class="card">
|
||||
<h2 class="card__title">Shared with <span class="badge">…</span></h2>
|
||||
<h2 class="card__title">Shared with</h2>
|
||||
<span class="visually-hidden" role="status">Loading who this is shared with</span>
|
||||
<div aria-hidden="true">
|
||||
<div class="skeleton skeleton--row"></div>
|
||||
<div class="skeleton skeleton--row skeleton--short"></div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{% elif not is_owner %}
|
||||
|
||||
@@ -24,7 +24,11 @@
|
||||
hx-target="this"
|
||||
hx-swap="outerHTML"
|
||||
hx-sync="this:drop">
|
||||
<span class="text-xs faint">Loading earlier messages…</span>
|
||||
<span class="visually-hidden" role="status">Loading earlier messages</span>
|
||||
<div class="history-sentinel__shape" aria-hidden="true">
|
||||
<div class="skeleton skeleton--line"></div>
|
||||
<div class="skeleton skeleton--line skeleton--short"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -24,6 +24,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">{{ icon("chat", "icon--sm") }} Messages</h1>
|
||||
<div class="topbar__actions">
|
||||
{% if schedules %}
|
||||
@@ -78,7 +79,11 @@
|
||||
hx-target="this"
|
||||
hx-swap="outerHTML"
|
||||
hx-sync="this:drop">
|
||||
<span class="text-xs faint">Loading earlier messages…</span>
|
||||
<span class="visually-hidden" role="status">Loading earlier messages</span>
|
||||
<div class="history-sentinel__shape" aria-hidden="true">
|
||||
<div class="skeleton skeleton--line"></div>
|
||||
<div class="skeleton skeleton--line skeleton--short"></div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -27,6 +27,20 @@
|
||||
aria-label="Rename chat" title="Rename chat">
|
||||
{{ icon("pencil", "icon--sm") }}
|
||||
</button>
|
||||
{#
|
||||
Archiving, and un-archiving, are the same control reading the opposite
|
||||
way round -- so one button, and the sidebar re-renders because a row has
|
||||
to leave one group and appear in the other.
|
||||
#}
|
||||
<button class="btn btn--icon btn--sm" type="button"
|
||||
hx-patch="/api/chats/{{ chat_item.id }}"
|
||||
hx-vals='{"archived": "{{ 0 if chat_item.archived else 1 }}"}'
|
||||
hx-target="#sidebar-tree" hx-swap="outerHTML"
|
||||
aria-label="{{ 'Restore chat' if chat_item.archived else 'Archive chat' }}"
|
||||
title="{{ 'Put this chat back in the list' if chat_item.archived
|
||||
else 'Hide this chat without deleting it' }}">
|
||||
{{ icon("arrow-up" if chat_item.archived else "archive", "icon--sm") }}
|
||||
</button>
|
||||
<button class="btn btn--icon btn--sm" type="button"
|
||||
hx-delete="/api/chats/{{ chat_item.id }}"
|
||||
hx-confirm="Delete “{{ chat_item.title }}”? This cannot be undone."
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
{% from "_macros.html" import icon %}
|
||||
{#
|
||||
The control that opens and closes the sidebar.
|
||||
|
||||
A partial rather than markup in each topbar, because for most of this
|
||||
application's life it existed on `/chat` alone -- and below the phone
|
||||
breakpoint the sidebar is a fixed overlay, so every other page rendered 280px
|
||||
of opaque drawer over itself with nothing anywhere to dismiss it. `/settings`
|
||||
was one of them, which is where the Install and Notifications buttons live.
|
||||
|
||||
`aria-expanded` is deliberately absent rather than `"true"`: it used to be
|
||||
hard-coded open, which is a lie the moment anything closes the drawer, and
|
||||
`app.js:syncToggles` writes the honest value on load and on every change.
|
||||
#}
|
||||
<button class="btn btn--icon sidebar-toggle" type="button"
|
||||
aria-label="Toggle sidebar" aria-controls="sidebar"
|
||||
data-toggle="#sidebar">
|
||||
{{ icon("sidebar") }}
|
||||
</button>
|
||||
@@ -87,4 +87,26 @@
|
||||
</p>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{#
|
||||
Archived chats, closed, and absent entirely when there are none.
|
||||
|
||||
A `<details>` rather than a page of their own: archiving is for getting a
|
||||
conversation out of the way, not for filing it somewhere, and a second
|
||||
screen to visit would make putting one back a journey. Closed by default
|
||||
because that is the whole point, and the browser keeps the open state
|
||||
across the out-of-band swaps the unread poll makes -- the same property the
|
||||
folder tree relies on.
|
||||
#}
|
||||
{% if archived_chats %}
|
||||
<details class="nav-group nav-group--archived">
|
||||
<summary class="nav-group__label">
|
||||
{{ icon("archive", "icon--sm") }} Archived
|
||||
<span class="nav-group__count">{{ archived_chats|length }}</span>
|
||||
</summary>
|
||||
{% for chat_item in archived_chats %}
|
||||
{% include "partials/_chat_link.html" %}
|
||||
{% endfor %}
|
||||
</details>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -9,6 +9,22 @@
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar__header">
|
||||
{{ brandlink(uid="side") }}
|
||||
{#
|
||||
The way out, and the reason it is *inside* the drawer.
|
||||
|
||||
Below the phone breakpoint this whole element is a fixed overlay, and the
|
||||
toggle that opens it lives in the topbar underneath -- so once it was
|
||||
open, the control for closing it was behind it. That was true on /chat,
|
||||
where at least a toggle existed; on the seven other pages that carry this
|
||||
sidebar there was no such control at all, and no way back.
|
||||
|
||||
Hidden above that breakpoint, where the sidebar is an ordinary column and
|
||||
the topbar's toggle is perfectly visible.
|
||||
#}
|
||||
<button class="btn btn--icon sidebar__close" type="button"
|
||||
aria-label="Close sidebar" data-toggle="#sidebar">
|
||||
{{ icon("x") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{% include "partials/_sidebar_actions.html" %}
|
||||
@@ -47,6 +63,26 @@
|
||||
</a>
|
||||
|
||||
<div class="sidebar__tools">
|
||||
{#
|
||||
Installing.
|
||||
|
||||
The only one of these was in the Appearance tab of /settings, which on
|
||||
a phone is behind a drawer that used to be impossible to close and a tab
|
||||
strip that gave no sign of scrolling -- so the button for installing
|
||||
this on a phone was, on a phone, three taps into a place you could not
|
||||
get to. It stays there as well; this is simply where somebody will meet
|
||||
it.
|
||||
|
||||
Hidden until the browser says the app is installable: `app.js` reveals
|
||||
every `[data-install-app]` when `beforeinstallprompt` fires, and hides
|
||||
them again once it is installed. Firefox and desktop Safari never fire
|
||||
it, and an Install button that does nothing is worse than none.
|
||||
#}
|
||||
<button class="btn btn--icon" type="button" data-install-app hidden
|
||||
onclick="window.lembas.promptInstall()"
|
||||
aria-label="Install as an app" title="Install as an app">
|
||||
{{ icon("arrow-down") }}
|
||||
</button>
|
||||
{% if user.is_admin %}
|
||||
<a class="btn btn--icon" href="/admin" aria-label="Admin settings" title="Admin settings">
|
||||
{{ icon("shield") }}
|
||||
@@ -66,3 +102,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
{#
|
||||
The scrim behind the open drawer. It carries the same `data-toggle` as every
|
||||
other control that closes it, so tapping beside the drawer closes it through
|
||||
exactly one code path rather than a second one written for touch.
|
||||
|
||||
Rendered always and shown by CSS: it exists only below the breakpoint and only
|
||||
while the drawer is open, which is a question about width and state that the
|
||||
server cannot answer and the stylesheet can.
|
||||
#}
|
||||
<div class="sidebar-scrim" data-toggle="#sidebar" aria-hidden="true"></div>
|
||||
|
||||
@@ -27,6 +27,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">{% block heading %}Reports{% endblock %}</h1>
|
||||
<div class="topbar__actions">{% block actions %}{% endblock %}</div>
|
||||
</header>
|
||||
|
||||
@@ -20,6 +20,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">{% block heading %}Scheduled{% endblock %}</h1>
|
||||
<div class="topbar__actions">{% block actions %}{% endblock %}</div>
|
||||
</header>
|
||||
|
||||
@@ -16,6 +16,7 @@
|
||||
|
||||
<main class="main">
|
||||
<header class="topbar">
|
||||
{% include "partials/_sidebar_toggle.html" %}
|
||||
<h1 class="topbar__title">Your settings</h1>
|
||||
</header>
|
||||
|
||||
@@ -25,7 +26,18 @@
|
||||
state. Each panel is a real fragment of the page, not a fetch.
|
||||
#}
|
||||
<div class="tabs">
|
||||
<div class="tabs__bar" role="tablist">
|
||||
{#
|
||||
Deliberately no `role="tablist"`.
|
||||
|
||||
It had one, and the children are `<input type="radio">` and `<label>` -- so a
|
||||
screen reader announced a tablist containing no tabs, and the panels carried
|
||||
neither `role="tabpanel"` nor an `aria-labelledby` to be announced as. What
|
||||
this actually is, is a radio group, and a perfectly good one: arrow keys move
|
||||
between the options, the checked one is announced, and the CSS that reveals
|
||||
the matching panel keys off exactly that. Being an honest radio group beats
|
||||
claiming to be a tab interface and then not behaving as one.
|
||||
#}
|
||||
<div class="tabs__bar" role="radiogroup" aria-label="Settings sections">
|
||||
<input class="visually-hidden" type="radio" name="settings-tab" id="tab-account" checked>
|
||||
<label class="tabs__tab" for="tab-account">{{ icon("user", "icon--sm") }} Account</label>
|
||||
|
||||
@@ -196,7 +208,7 @@
|
||||
redirect back is what stops a refresh re-submitting it.
|
||||
#}
|
||||
<form method="post" action="/api/preferences/timezone" class="btn-row">
|
||||
<select class="select" name="timezone" style="flex: 1">
|
||||
<select class="select" name="timezone" style="flex: 1" aria-label="Your timezone">
|
||||
<option value="" {{ 'selected' if not timezone }}>
|
||||
Follow the server ({{ server_timezone }})
|
||||
</option>
|
||||
@@ -367,12 +379,14 @@
|
||||
<form method="post" action="/api/library/memories/{{ memory.id }}"
|
||||
class="row" style="flex: 1; gap: var(--sp-2); min-width: 0">
|
||||
<input class="input" name="content" value="{{ memory.content }}"
|
||||
maxlength="{{ memory_limit }}" style="flex: 1">
|
||||
maxlength="{{ memory_limit }}" style="flex: 1"
|
||||
aria-label="What this memory says">
|
||||
<button class="btn btn--sm" type="submit">Save</button>
|
||||
<button class="btn btn--sm btn--danger" type="submit"
|
||||
formaction="/api/library/memories/{{ memory.id }}/delete"
|
||||
data-confirm-button="Forget this?"
|
||||
data-confirm-title="Forget">
|
||||
data-confirm-title="Forget"
|
||||
aria-label="Forget this" title="Forget this">
|
||||
{{ icon("trash", "icon--sm") }}
|
||||
</button>
|
||||
</form>
|
||||
@@ -396,6 +410,7 @@
|
||||
style="gap: var(--sp-2)">
|
||||
<input class="input" name="content" required style="flex: 1"
|
||||
maxlength="{{ memory_limit }}"
|
||||
aria-label="Something worth remembering"
|
||||
placeholder="Prefers metric units and a 24-hour clock.">
|
||||
<button class="btn btn--primary" type="submit">Remember</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user