Skip to content

UI: split-pane item detail via HTMX (no full reload) #9

Description

@deOliveira-R

Zotero's three-pane layout (collections / items / detail) is fast because selecting an item doesn't reload the page. The current web UI reloads on every click to `/items/{id}`.

Proposal

Add a right-hand detail pane that updates in place when the user clicks an item row. Use htmx (single small `<script>` include) — no SPA framework.

Sketch

```html

...
Select an item to view details.
\`\`\`
  • Server supports `?partial=1` on `/items/{id}` and returns just the `` fragment (no base.html wrap).
  • `hx-push-url` keeps back-button behavior working.
  • On small screens (<= 760px) fall back to the full-page detail route.

Acceptance

  • Click row → detail pane updates; URL updates; back button works.
  • Full-page route still serves correctly for deep links and small screens.
  • Keyboard nav (see UI: keyboard navigation (j/k/enter, /, esc, g/G) #7) selects rows and loads detail pane in sync.
  • Total added JS footprint ≤ 20 KB (htmx is ~14 KB).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions