HomerandClaude Opus 5
28390095a9
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>
116 lines
4.6 KiB
HTML
116 lines
4.6 KiB
HTML
{% from "_macros.html" import icon, brandlink, model_avatar %}
|
|
{#
|
|
Sidebar: brand, new chat, pinned models, the folder tree, then unfiled chats.
|
|
|
|
"New chat" is a link, not a button that creates a row. The chat is written
|
|
when the first message is sent, so opening one and walking away leaves
|
|
nothing behind.
|
|
#}
|
|
<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" %}
|
|
|
|
{# Every 10s, refresh the unread dots and announce anything that finished
|
|
while this page was showing something else. Out-of-band spans only, so the
|
|
folder tree keeps its open/closed state. #}
|
|
<div hidden hx-get="/api/chats/unread" hx-trigger="every 10s"
|
|
hx-swap="none"></div>
|
|
|
|
<nav class="sidebar__scroll" aria-label="Chats">
|
|
{% include "partials/_sidebar_pinned.html" %}
|
|
{% include "partials/_sidebar_sections.html" %}
|
|
{% include "partials/_sidebar_tree.html" %}
|
|
</nav>
|
|
|
|
<div class="sidebar__footer">
|
|
{% if can.get("library.use") %}
|
|
<a class="nav-item" href="/library/knowledge">
|
|
{{ icon("archive", "icon--sm") }}
|
|
<span class="nav-item__label">Library</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
{% if can.get("agent.ssh") %}
|
|
<a class="nav-item" href="/agents">
|
|
{{ icon("server", "icon--sm") }}
|
|
<span class="nav-item__label">Connections</span>
|
|
</a>
|
|
{% endif %}
|
|
|
|
<a class="nav-item" href="/settings">
|
|
{{ icon("user", "icon--sm") }}
|
|
<span class="nav-item__label">{{ user.name }}</span>
|
|
{% if user.is_admin %}<span class="badge badge--leaf">admin</span>{% endif %}
|
|
</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") }}
|
|
</a>
|
|
{% endif %}
|
|
<button class="btn btn--icon" type="button" data-theme-toggle
|
|
aria-label="Switch theme" title="Switch theme">
|
|
<span class="theme-icon theme-icon--dark">{{ icon("moon") }}</span>
|
|
<span class="theme-icon theme-icon--light">{{ icon("sun") }}</span>
|
|
</button>
|
|
<span class="spacer"></span>
|
|
<form method="post" action="/auth/logout">
|
|
<button class="btn btn--icon" type="submit" aria-label="Sign out" title="Sign out">
|
|
{{ icon("logout") }}
|
|
</button>
|
|
</form>
|
|
</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>
|