Repository navigation
connections: folder filter box, keyboard tree navigation and ARIA roles - #272
Closed
jseifeddine wants to merge 2 commits into
Closed
jseifeddine wants to merge 2 commits into
jseifeddine wants to merge 2 commits into
Conversation
jseifeddine
force-pushed
the
ux/connections-folder-filter-keyboard
branch
from
October 12, 2026 04:21
32f2c86 to
6f23069
Compare
…ion feedback connections: sticky self-scrolling sidebar, flush-left folder rows (sol1#254) With 20+ customer folders the sidebar shared the page scroll with the entries table, so picking a folder far down the list changed content off screen, and every leaf row was pushed ~90px in by a hidden chevron placeholder while names were ellipsised. - .sidebar is position: sticky with its own thin scrollbar and max-height tied to the viewport; .main keeps scrolling with the page. - The FOLDERS header is wrapped in .sidebar-pin together with a new empty #sidebar-tools slot, both pinned at the top of the sidebar. - buildFolderNode() renders a .tree-chevron only for folders with children; leaves get no placeholder (removed the .tree-chevron.leaf rule), so rows start right after the 3px accent bar. - Name, entry-count pill (.folder-count, now just the number with a data-count attribute and "N entries" title) and a smaller scope glyph share one line; description sits beneath at --fz-xs; rows are ~40px. - Nested .tree-children indent 14px behind the existing dashed guide. All new CSS is in one block at the end of the page's <style>. connections: selection feedback and in-place sidebar updates (sol1#254) With a long folder list, clicking a folder appeared to do nothing: the entries table was off screen, the only loading state was a text swap, and nothing drew the eye to the changed title. loadEntries() also called renderFolders() just to update one count badge, rebuilding the whole sidebar on every click. - Jump to the entries header when the shown folder changes (smooth, 'auto' under prefers-reduced-motion); never on initial load, live refresh, forceRefresh after a mutation or search clear. - .changed on #entries-header replays a 350ms title slide-in and an accent underline flash on the action bar; cleared on animationend. - Skeleton table (4 shimmering rows, same geometry as the real table) while entries are fetched from the server; the cached path renders immediately with no skeleton. - updateFolderCount() swaps the number in the existing .folder-count badge in place; renderFolders() only as a fallback when the badge does not exist yet. - renderFolders() is wrapped (not edited) to preserve the sidebar scroll position across rebuilds and to reveal the selected row within the sidebar (nearest, no page scroll) when the selection changes or after loadFolders() rebuilds the tree. tests: sidebar scrolls on its own, selected folder marked and kept in view (sol1#254)
connections: folder filter box, keyboard tree navigation and ARIA roles (sol1#254) The sidebar lists one folder per customer and gets long. Add a live filter box (name, path, description; loaded subfolders included, with ancestors of a match kept visible) mounted in a new #sidebar-tools div, persisted in sessionStorage so live refreshes keep it. Make the tree keyboard-navigable (arrows, Home/End, Enter/Space, Left/Right to collapse/expand) with role=tree/treeitem, aria-selected/expanded and a roving tabindex, and add an 'f' shortcut that mirrors the '/' one. Implemented by post-processing the DOM renderFolders() builds and by wrapping that function; its body is unchanged. tests: folder filter box, ARIA tree and keyboard navigation (sol1#254)
jseifeddine
force-pushed
the
ux/connections-folder-filter-keyboard
branch
from
October 13, 2026 07:04
6f23069 to
7e60c25
Compare
Member
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Builds on #271 (
ux/connections-sidebar-scroll-selection); its own change is the last commit, the compare on the fork: jseifeddine/rustguac@ux/connections-sidebar-scroll-selection...ux/connections-folder-filter-keyboard. The branch carries #271 until they merge intomain, so the Files tab shows them too.Part 2/3 of #254.
Live filter (name, path, description; ancestors of a match kept visible) persisted in
sessionStorage;role=tree/treeitem,aria-selected/expanded, roving tabindex; arrows, Home/End, Enter/Space, Left/Right;ffocuses the filter as/focuses the search.Testing
connections-folder-filter.spec.mjs.