Skip to content

Connections UX: sidebar indent, independent scrolling, selection feedback, long-list handling #254

Open

Description

@jseifeddine

Problem

Few touch ups needed throughout, lot to improve on...

Image

The Connections page gets worse the more customers it holds. With twenty-odd tenant folders in the sidebar:

  • The indent is wrong. Every top-level folder row sits about 90px in from the sidebar edge: a hidden 32px chevron column is reserved for leaves that have no children, on top of list and row padding. The names end up ellipsised while a third of the sidebar is empty space.
  • Clicking a customer looks like nothing happened. The sidebar and the entries table share the page scroll. Deep in a long list, the click changes a table that is off screen, so the page appears not to react.
  • No independent scrolling. You scroll the whole page to reach a folder, then scroll back up to see its entries. There is no way to keep the list and the content in view at the same time.
  • Nothing helps with a long list. No quick filter for folders, no keyboard movement through them, and the selected folder is not brought into view on load.
  • Every click re-renders the entire sidebar (renderFolders() runs inside loadEntries() to update one count badge), which flickers and gets slower with the list.

What good looks like

  • Sidebar and content scroll on their own: the sidebar stays put and scrolls internally, the entries area scrolls separately, the header stays reachable.
  • Selecting a folder scrolls the content to its top and makes the change visible: a highlighted row with an accent bar, a title that visibly changes, a loading state instead of a frozen table.
  • Rows flush with the sidebar edge, chevron only where there are children, name and count on one line, description beneath, tighter vertical rhythm so more folders fit without feeling cramped.
  • A filter box pinned at the top of the sidebar that narrows the folder list as you type; arrow keys move the selection, Enter opens, Home/End jump; the selected folder is scrolled into view on load.
  • Count badges update in place; the sidebar is rebuilt only when the folder set changes.

Branch ux-enhancements, one PR (#255).

Activity

  1. jseifeddine commented on Oct 10, 2026

    @jseifeddine
    ContributorAuthor

    Also: the page snaps when switching between Connections and Sessions. The max-width: 1800px breakpoint from #252 sets the page padding only on the connections page, so its gutter differs from every other page at that width. The padding belongs in the shared stylesheet so all pages move together.

  2. jseifeddine commented on Oct 10, 2026

    @jseifeddine
    ContributorAuthor
    Image
  3. 71 remaining items

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

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions