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).

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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