From e3bd942d10b8313914fb96554ecfcc57ef4f01b9 Mon Sep 17 00:00:00 2001 From: Jad Seifeddine Date: Tue, 13 Oct 2026 13:58:04 +0700 Subject: [PATCH] connections: sticky self-scrolling sidebar, flush folder rows, selection feedback connections: sticky self-scrolling sidebar, flush-left folder rows (#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 @@ -444,9 +568,13 @@

No folders yet

-
- Folders - +
+
+ Folders + +
+ +
    @@ -1904,32 +2032,44 @@

    Enter Credentials

    var row = document.createElement('div'); row.className = 'folder-row'; - var chevron = document.createElement('span'); - chevron.className = 'tree-chevron'; var isExpanded = !!expandedPaths[key]; if (f.has_children) { + // Chevron column exists only for folders that can expand; leaves + // render no placeholder so their names start flush left (#254). // Full-size triangles (U+25BC/U+25B6), matching every other // collapsible on the page; the small variants (U+25BE/U+25B8) - // rendered as faint, hard-to-see ink even at 20px. + // rendered as faint, hard-to-see ink. + var chevron = document.createElement('span'); + chevron.className = 'tree-chevron'; chevron.textContent = isExpanded ? '\u25BC' : '\u25B6'; + chevron.title = isExpanded ? 'Collapse' : 'Expand'; if (isExpanded) chevron.classList.add('expanded'); chevron.addEventListener('click', function(ev) { ev.stopPropagation(); toggleFolder(f); }); - } else { - chevron.classList.add('leaf'); - chevron.textContent = '\u25B6'; + row.appendChild(chevron); } - row.appendChild(chevron); var main = document.createElement('div'); main.className = 'folder-row-main'; var nameRow = document.createElement('div'); nameRow.className = 'folder-name-row'; var nameSpan = document.createElement('span'); + nameSpan.className = 'folder-name'; nameSpan.textContent = f.name; + nameSpan.title = f.name; nameRow.appendChild(nameSpan); + if (folderEntryCounts[key] !== undefined) { + // Entry count as a small right-aligned pill on the name line. + var count = folderEntryCounts[key]; + var countSpan = document.createElement('span'); + countSpan.className = 'folder-count'; + countSpan.setAttribute('data-count', count); + countSpan.textContent = count; + countSpan.title = count + (count === 1 ? ' entry' : ' entries'); + nameRow.appendChild(countSpan); + } if (showScope) { var scopeBadge = document.createElement('span'); scopeBadge.className = 'folder-scope'; @@ -1940,12 +2080,6 @@

    Enter Credentials

    nameRow.appendChild(scopeBadge); } main.appendChild(nameRow); - if (folderEntryCounts[key] !== undefined) { - var countSpan = document.createElement('span'); - countSpan.className = 'folder-count'; - countSpan.textContent = folderEntryCounts[key] + ' entries'; - main.appendChild(countSpan); - } if (f.description) { var desc = document.createElement('span'); desc.className = 'folder-desc'; @@ -2280,18 +2414,23 @@

    Enter Credentials

    var cacheKey = folderKey(scope, folderPath); var cached = folderEntries[cacheKey]; + // UX (#254): jump to the entries header and flash the title, but + // only when the shown folder actually changed (not on initial + // load, live refresh, forceRefresh after a mutation, or search + // clear re-rendering the same folder). + announceFolderShown(cacheKey, header); // Use cache if available and not forcing refresh (e.g. after mutation) if (cached && !forceRefresh) { currentEntries = cached; folderEntryCounts[cacheKey] = cached.length; - renderFolders(); + updateFolderCount(scope, folderPath, cached.length); renderEntries(cached, scope, folderPath); return; } var content = document.getElementById('entries-content'); - content.innerHTML = '

    Loading...

    '; + content.innerHTML = entriesSkeletonHtml(); fetch('/api/addressbook/folders/' + encodeURIComponent(scope) + '/' + encodeURIComponent(folderPath) + '/entries', { headers: apiHeaders(), @@ -2316,7 +2455,7 @@

    Enter Credentials

    currentEntries = entries; folderEntries[cacheKey] = entries; folderEntryCounts[cacheKey] = entries.length; - renderFolders(); // Update count badge + updateFolderCount(scope, folderPath, entries.length); // in-place badge update renderEntries(entries, scope, folderPath); }) .catch(function(err) { @@ -4887,6 +5026,179 @@

    Enter Credentials

    startOnboarding(currentUserRole); }); + // ── UX (#254): selection feedback & sidebar render hygiene ────────── + // Everything here wraps existing functions or post-processes the DOM; + // renderFolders() itself is untouched. + + var prefersReducedMotion = (function() { + try { return window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches; } + catch (e) { return false; } + })(); + var lastShownFolderKey = null; // "scope|path" last passed to loadEntries() + var sidebarRevealPending = false; // set by loadFolders(); consumed by the renderFolders wrapper + + // Nearest scrollable ancestor of el, stopping at (and including) the + // sidebar. null when the sidebar is not its own scroll container, + // in which case the page scroll already handles visibility. + function sidebarScrollContainer(el) { + var sidebar = document.querySelector('.sidebar'); + var node = el ? el.parentElement : null; + while (node) { + var oy = getComputedStyle(node).overflowY; + if ((oy === 'auto' || oy === 'scroll') && node.scrollHeight > node.clientHeight) return node; + if (node === sidebar) break; + node = node.parentElement; + } + return null; + } + + // scrollIntoView({ block: 'nearest' }) confined to the sidebar's own + // scroll container: moves container.scrollTop only, never the page. + function revealSidebarRow(li) { + if (!li) return; + var box = sidebarScrollContainer(li); + if (!box) return; + var row = li.querySelector('.folder-row') || li; + var cr = box.getBoundingClientRect(); + var lr = row.getBoundingClientRect(); + if (lr.top < cr.top) box.scrollTop -= (cr.top - lr.top); + else if (lr.bottom > cr.bottom) box.scrollTop += Math.min(lr.bottom - cr.bottom, lr.top - cr.top); + } + + function selectedFolderLi() { + return document.querySelector('#folder-list li.selected'); + } + + // Bring the entries header to the top of the viewport when it is not + // comfortably in view (above the viewport after scrolling a long + // sidebar, or pushed into the lower half by the strips above it). + function jumpToEntriesHeader(header) { + if (!header) return; + var r = header.getBoundingClientRect(); + var vh = window.innerHeight || document.documentElement.clientHeight; + var inView = r.top >= 0 && r.top <= vh * 0.5 && r.bottom <= vh; + if (inView) return; + try { + header.scrollIntoView({ block: 'start', behavior: prefersReducedMotion ? 'auto' : 'smooth' }); + } catch (e) { + header.scrollIntoView(true); + } + } + + // Replay the .changed animation on the entries header. + function flashEntriesHeader(header) { + if (!header) return; + header.classList.remove('changed'); + void header.offsetWidth; // restart keyframes + header.classList.add('changed'); + clearTimeout(header._rgChangedTimer); + // Fallback clear: with reduced motion the animation is disabled so + // no animationend fires; otherwise animationend clears it earlier. + header._rgChangedTimer = setTimeout(function() { header.classList.remove('changed'); }, 900); + } + (function() { + var header = document.getElementById('entries-header'); + if (!header) return; + header.addEventListener('animationend', function(e) { + // The title finishes first; clear when the (longer) border + // flash ends so both animations complete. + if (e.animationName === 'rg-header-flash') header.classList.remove('changed'); + }); + })(); + + // Called by loadEntries() for every folder it shows. Only a change of + // folder (after one has already been shown) gets the jump + flash. + function announceFolderShown(key, header) { + var prev = lastShownFolderKey; + lastShownFolderKey = key; + if (prev === null || prev === key) return; + flashEntriesHeader(header); + jumpToEntriesHeader(header); + revealSidebarRow(selectedFolderLi()); + } + + // Skeleton placeholder shown while entries are fetched (never for the + // cached path). Same table class and column count as renderEntries(). + function entriesSkeletonHtml() { + var cols = ['Name', 'Type', 'Host', 'User', '']; + var html = ''; + if (isAdmin) html += ''; + cols.forEach(function(c) { html += ''; }); + if (isAdmin) html += ''; + html += ''; + for (var i = 0; i < 4; i++) { + html += ''; + if (isAdmin) html += ''; + html += '' + + '' + + '' + + '' + + ''; + if (isAdmin) html += ''; + html += ''; + } + return html + '
    ' + c + '
    '; + } + + function cssAttrEscape(s) { + if (window.CSS && CSS.escape) return CSS.escape(s); + return String(s).replace(/["\\]/g, '\\$&'); + } + + // Update one folder's count badge in place instead of rebuilding the + // whole sidebar. Keeps whatever text format renderFolders() produced + // (only the number is swapped). Falls back to a full render when the + // row or its badge does not exist yet. + function updateFolderCount(scope, path, n) { + folderEntryCounts[folderKey(scope, path)] = n; + var li = document.querySelector('#folder-list li[data-scope="' + cssAttrEscape(scope) + '"][data-path="' + cssAttrEscape(path) + '"]'); + var badge = null; + if (li) { + var all = li.querySelectorAll('.folder-count'); + for (var i = 0; i < all.length; i++) { + if (all[i].closest('li') === li) { badge = all[i]; break; } + } + } + if (!badge || !/\d/.test(badge.textContent)) { renderFolders(); return; } + badge.textContent = badge.textContent.replace(/\d[\d,]*/, String(n)); + badge.setAttribute('data-count', String(n)); + badge.title = n + ' entr' + (n === 1 ? 'y' : 'ies'); + } + + // Wrap renderFolders(): preserve the sidebar's scroll position across + // a rebuild, and reveal the selected row (within the sidebar only) + // when the selection changed or a tree reload asked for it. + var __renderFolders = renderFolders; + var __lastRenderedSelKey = null; + renderFolders = function() { + var boxes = []; + var node = document.getElementById('folder-list'); + while (node) { + if (node.scrollTop) boxes.push({ el: node, top: node.scrollTop }); + if (node.classList && node.classList.contains('sidebar')) break; + node = node.parentElement; + } + var result = __renderFolders.apply(this, arguments); + boxes.forEach(function(b) { b.el.scrollTop = b.top; }); + var selKey = selectedFolder ? folderKey(selectedFolder.scope, folderPath(selectedFolder)) : null; + var li = selectedFolderLi(); + if (li && (sidebarRevealPending || selKey !== __lastRenderedSelKey)) { + sidebarRevealPending = false; + revealSidebarRow(li); + } + __lastRenderedSelKey = selKey; + return result; + }; + + // Wrap loadFolders(): after a tree (re)build the selected row should + // be visible in the sidebar. Arguments pass through untouched. + var __loadFolders = loadFolders; + loadFolders = function() { + sidebarRevealPending = true; + return __loadFolders.apply(this, arguments); + }; + // ── end UX (#254) ──────────────────────────────────────────────────── + init(); diff --git a/tests/e2e/README.md b/tests/e2e/README.md index 0744087..b51e0ea 100644 --- a/tests/e2e/README.md +++ b/tests/e2e/README.md @@ -24,6 +24,7 @@ One spec per change, named after the branch that introduced it: | spec | pins | |---|---| | `tables-1710` | #252: no horizontal overflow at 1710px on Connections, Recordings and Reports, with short and with long unbreakable names | +| `connections-sidebar` | #254: independent sidebar scroll, selected row marked and kept in view | The fixture suppresses the first-visit onboarding tour (`options.onboarding` re-enables it) and defaults to the admin role; pass `role` to test gating. diff --git a/tests/e2e/specs/connections-sidebar.spec.mjs b/tests/e2e/specs/connections-sidebar.spec.mjs new file mode 100644 index 0000000..d487e7d --- /dev/null +++ b/tests/e2e/specs/connections-sidebar.spec.mjs @@ -0,0 +1,61 @@ +// #254: with 20+ tenant folders the sidebar shared the page scroll with the +// entries table, picking a folder far down the list changed content off +// screen, and nothing drew the eye to the changed title. The sidebar must +// scroll on its own, the chosen row must be marked and kept in view, and +// selecting a folder must not scroll the page. +import { test, expect } from '@playwright/test'; +import { installApi, settle } from '../lib/api.mjs'; + +// Short viewport so the 22-folder list is longer than the sidebar. +test.use({ viewport: { width: 1400, height: 600 } }); + +test('the sidebar scrolls independently of the page', async ({ page }) => { + await installApi(page); + await page.goto('/connections.html'); + await settle(page); + const sidebar = page.locator('.sidebar'); + await expect(sidebar).toBeVisible(); + const m = await sidebar.evaluate(el => ({ + overflowY: getComputedStyle(el).overflowY, + scrollHeight: el.scrollHeight, + clientHeight: el.clientHeight + })); + expect(['auto', 'scroll']).toContain(m.overflowY); + expect(m.scrollHeight, 'the folder list must overflow the sidebar box').toBeGreaterThan(m.clientHeight); + // Scrolling the sidebar moves the sidebar, not the document. + await sidebar.evaluate(el => { el.scrollTop = 400; }); + const after = await page.evaluate(() => ({ + sidebarTop: document.querySelector('.sidebar').scrollTop, + pageTop: document.scrollingElement.scrollTop + })); + expect(after.sidebarTop).toBeGreaterThan(0); + expect(after.pageTop).toBe(0); +}); + +test('selecting a folder marks the row and keeps it in view', async ({ page }) => { + await installApi(page); + await page.goto('/connections.html'); + await settle(page); + const row = page.locator('.folder-row').filter({ hasText: /tenant-18/ }).first(); + await row.scrollIntoViewIfNeeded(); + await row.click(); + await expect(page.locator('#entries-title')).toHaveText(/tenant-18/); + // The tree marks the chosen node (the row's list item) as selected. + await expect(row.locator('xpath=ancestor::li[1]')).toHaveClass(/selected/); + const vis = await row.evaluate(el => { + const r = el.getBoundingClientRect(); + const s = el.closest('.sidebar').getBoundingClientRect(); + return { inside: r.top >= s.top - 1 && r.bottom <= s.bottom + 1 }; + }); + expect(vis.inside, 'the selected row must be within the sidebar viewport').toBe(true); + // Whether the page itself may move on selection is the app shell's + // business: connections-app-shell.spec.mjs pins that it does not. +}); + +test('leaf folders start flush left: no chevron placeholder before the name', async ({ page }) => { + await installApi(page); + await page.goto('/connections.html'); + await settle(page); + // No fixture folder has children, so no row may carry a chevron. + expect(await page.locator('.folder-row .tree-chevron').count()).toBe(0); +});