You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Few touch ups needed throughout, lot to improve on...
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.
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.
Activity
jseifeddine commentedon Oct 10, 2026
Also: the page snaps when switching between Connections and Sessions. The
max-width: 1800pxbreakpoint 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.pages: bake the caller's role into the served page, version the logo
pages: one navigation for every page, gated by role in CSS
connections: app shell with independent panes, sidebar panel, tenant …
jseifeddine commentedon Oct 10, 2026
connections: scroll only the entries pane on selection, clip the body
reports: show entry names as host over a tenant subline
reports, recordings: fit the tables on 1710px-wide displays
sessions, recordings: show the session type with the shared badge (so…
pages: facet filters, sticky folder header, ad-hoc session modal, fol…
folders: optional display name in the folder config (sol1#254)
sessions, connections: tidy the ad-hoc and folder modals (sol1#254)
connections: move search to the brand row, engaged mode, tidy results…
connections: search results as a floating overlay; left gutter; match…
ui: align the ad-hoc modal buttons and center section headings (sol1#254
71 remaining items
connections: folder filter box, keyboard tree navigation and ARIA roles
connections: app shell with independent panes, sidebar panel, tenant …
pages: one navigation on every page, with the caller's role baked int…
sessions: move the ad-hoc session form into a modal
sessions: move the ad-hoc session form into a modal
pages: shared facet filters and one list toolbar on every list page
folders: optional display name beside the folder key
ui: themed confirm/alert dialogs in place of the native ones
ui: themed confirm/alert dialogs in place of the native ones
search: one global connection search, as a floating overlay on every …
connections: sticky self-scrolling sidebar, flush-left folder rows (#254
connections: selection feedback and in-place sidebar updates (#254)
tests: sidebar scrolls on its own, selected folder marked and kept in…
connections: folder filter box, keyboard tree navigation and ARIA rol…
tests: folder filter box, ARIA tree and keyboard navigation (#254)