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>
113 lines
4.4 KiB
HTML
113 lines
4.4 KiB
HTML
{% from "_macros.html" import icon %}
|
|
{#
|
|
The Chat/Agent switch, the folder tree and the unfiled chats.
|
|
|
|
Its own partial because it is rendered from two places: the sidebar on every
|
|
page, and `POST /api/preferences/sidebar-kind` when the switch is flicked.
|
|
Pinned models stay above it in `sidebar.html` -- they start a chat of either
|
|
kind and are not part of what is being switched.
|
|
|
|
The switch is INSIDE the swapped fragment on purpose. Targeting only the tree
|
|
would leave the two buttons showing the side you just left, which is the same
|
|
class of failure as a control whose verb goes somewhere the event does not:
|
|
the request works and the interface says otherwise. Each button keeps a stable
|
|
id so htmx puts focus back on the one that was pressed.
|
|
|
|
`sidebar_kind` is narrowed already: `sidebar_context` drops a folder holding
|
|
nothing of this kind at any depth, so the heading below cannot appear above
|
|
nothing. It is still passed down to `_folder.html`, which needs it for its own
|
|
contents and for the children it recurses into.
|
|
#}
|
|
<div id="sidebar-tree">
|
|
{% if sidebar_split %}
|
|
{#
|
|
The same component the new-chat screen uses to pick a kind, which is the
|
|
same choice in a different place. The verb goes on the input, not on the
|
|
wrapper: `change` fires on the control and bubbles through its DOM
|
|
ancestors, and htmx binds its listener to the annotated element itself.
|
|
|
|
`hx-vals` rather than relying on the input's own value being collected --
|
|
the two radios are not inside a form, so what htmx would gather is worth
|
|
not depending on.
|
|
#}
|
|
<div class="segmented segmented--grow" role="group" aria-label="Which chats to show">
|
|
{% for option, label, glyph in [("chat", "Chats", "chat"), ("agent", "Agents", "terminal")] %}
|
|
<label class="segmented__option">
|
|
<input type="radio" name="sidebar_kind" value="{{ option }}"
|
|
id="sidebar-kind-{{ option }}"
|
|
{{ 'checked' if sidebar_kind == option }}
|
|
hx-post="/api/preferences/sidebar-kind"
|
|
hx-vals='{"kind": "{{ option }}"}'
|
|
hx-trigger="change"
|
|
hx-target="#sidebar-tree" hx-swap="outerHTML">
|
|
<span>{{ icon(glyph, "icon--sm") }} {{ label }}</span>
|
|
</label>
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
{#
|
|
"New chat" becomes "New agent chat" with the switch, and it lives above the
|
|
scroll area rather than inside this fragment -- so it comes along out of
|
|
band. Only when this is the fragment response: on a full page load the row
|
|
is already rendered in its own place, and a second copy marked
|
|
`hx-swap-oob` would be a stray element sitting in the tree.
|
|
#}
|
|
{% if oob %}
|
|
{% with oob = true %}
|
|
{% include "partials/_sidebar_actions.html" %}
|
|
{% include "partials/_sidebar_pinned.html" %}
|
|
{% endwith %}
|
|
{% endif %}
|
|
|
|
{% if folders %}
|
|
<div class="nav-group">
|
|
<div class="nav-group__label">Folders</div>
|
|
{% for folder in folders %}
|
|
{% include "partials/_folder.html" %}
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<div class="nav-group">
|
|
<div class="nav-group__label">
|
|
{{ "Agent chats" if sidebar_kind == "agent" else "Chats" }}
|
|
</div>
|
|
{% if unfiled_chats %}
|
|
{% for chat_item in unfiled_chats %}
|
|
{% include "partials/_chat_link.html" %}
|
|
{% endfor %}
|
|
{% else %}
|
|
<p class="nav-empty">
|
|
{%- if sidebar_kind == "agent" -%}
|
|
No agent chats yet. Nothing is stirring out there.
|
|
{%- else -%}
|
|
No chats yet. The road begins here.
|
|
{%- endif -%}
|
|
</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>
|