Sidebar density overhaul, modelled on VS Code / Cursor. Per-level…#183
Merged
Conversation
* US-001: tighten file-tree per-level indent and row height Apply Pierre's `density: 'compact'` preset (factor 0.8, itemHeight 24) plus explicit `--trees-level-gap-override: 3px` and `--trees-item-row-gap-override: 2px` so the sidebar's per-level horizontal step lands near VS Code's flat ~10px (down from ~20px at Pierre defaults). Row height drops to 24px via the preset. Extracted createFileTreeStyle and FILE_TREE_DENSITY_OPTIONS into a new file-tree-density.ts so bun unit tests can import the config without pulling in @lingui/core/macro through FileTree.tsx. The new test pins the density preset and the three CSS-var overrides; per-level pixel measurement remains the job of a Playwright e2e since jsdom does not compute calc() through Pierre's shadow root. * US-002: show file-tree indent guides at rest Pierre's spacing-item border has opacity 0 at rest and only lifts to 0.75 under :host(:hover), so the tight per-level indent leaves rows without a visible parent-trace. Republish the rule in @layer unsafe with a 0.5 resting opacity (hover 0.85), and lift Pierre's default guide-bg alpha from 25% to 30% so the rendered border still reads against the sidebar in both themes after the per-element opacity multiplies it down. The new FILE_TREE_INDENT_GUIDE_CSS lives in file-tree-density.ts beside the density tuning it depends on, so a single test file pins both. Three new bun unit tests cover: the new bg-override exists in both themes within the 25-35% alpha window, the CSS targets Pierre's spacing-item selector, and the hover state stays stronger than rest. * US-003: shrink file-tree icon-width to 14px * [US-004] style sticky folder header with elevation tint and hairline divider * [US-005] enable compact folders (flattenEmptyDirectories) for the sidebar tree * docs(open-knowledge): sidebar density VS Code tricks spec * local-review fixups: e2e race, color-mix space, forced-colors, comments - e2e: wait for the seeded breadcrumb in the shadow tree (not just shadow root presence) — shadow-root mount precedes async row render and the evaluate could see an empty DOM under CI load. - color-mix in oklab everywhere (matches the rest of packages/app/src/); affects the indent-guide-bg override and the sticky-header bg tint. - sticky header: add `@media (forced-colors: active)` fallback so the hairline divider remains visible in Windows High Contrast (parallel to FILE_TREE_ROOT_DROP_CSS). - file-tree-density.ts: comment why `--trees-item-height: 24px` lives on the React style prop even though Pierre would set the same value from JS (CSS-only consumers + pre-empts JS write). - FileTree.tsx: drop the stale "createFileTreeStyle below" pointer; it lives in file-tree-density.ts now. * sticky-header comment: cover both gates (conditional render + visibility:hidden) Original comment only mentioned Pierre's CSS `visibility: hidden` rule, which omits the conditional-render path. Pierre uses both: the overlay element is rendered only when stickyRows is non-empty, and when populated but the user is at scrollTop=0 the CSS rule hides it. A maintainer debugging "why does my CSS not apply at rest" needs both paths to find the right answer. * fixup! local-review: address findings (pass 1) * fixup! local-review: address findings (pass 2) * chore(open-knowledge): bump @pierre/trees to 1.0.0-beta.4; reveal via scrollToPath beta.4 narrowed the useFileTree model surface (dropped getFocusedIndex/ getItemHeight). Migrate reveal-on-activate to Pierre's native scrollToPath (offset: nearest, focus: false), removing the hand-rolled scroll math in file-tree-scroll.ts that reimplemented it. * feat(open-knowledge): end-truncate folder names in the file tree Folders rendered middle-truncation (open-...wledge) because Pierre center- splits dot-less names, while files end-truncate as a side effect of the badge hiding their extension segment. Extend the badge observer to recompose folder rows the same way: write the full name into the first truncate segment and hide the second, so folders end-truncate (open-knowl...) consistently with files. * chore(open-knowledge): regenerate THIRD_PARTY_NOTICES for pierre/trees beta.4 * chore(open-knowledge): raise app main-bundle size budget to 410 kB The sidebar-density feature (file-tree-density module, folder end-truncation logic, extension-badge additions) adds ~1.3 kB gzipped to the main index bundle, pushing it from under to 408.26 kB. Raise the size-limit budget from 407 kB to 410 kB to cover the legitimate increase with a small headroom margin. * fix(open-knowledge): defer compact folders and re-port pierre patch to beta.4 The @pierre/trees beta.4 bump surfaced two regressions: 1. beta.4 flipped the flattenEmptyDirectories default from false to true, so omitting it silently enabled compact folders. Compact folders does not flatten single-child chains under the show-all-files + lazy-per-dir-fetch default (children aren't loaded until expand, so Pierre can't collapse the chain), so pin it off explicitly and defer the feature to a follow-up. Remove the two compact-folders e2e; the density test now asserts it is off. 2. The root-drop patch (PRD-7043: drop a nested item on empty tree space to promote it to root) was keyed to beta.3, so Bun stopped applying it after the bump, breaking the feature. Re-port the two FileTreeView hunks to a beta.4 patch (dropping the obsolete getFocusedIndex hunk now that reveal uses scrollToPath); remove the stale beta.3 patch and regenerate notices. * refactor(open-knowledge): dedup file-tree extension-badge segment helpers Address review feedback: extract resolveBasenameSegment(row) shared by the extension-badge path and the folder end-truncation recompose (both target Pierre's leading middle-truncate segment), and route setSegmentText and trimTrailingDotInBasenameSegment through one mapSegmentTextNodes core so the visible/overflow text-node walk lives in a single place. Behavior unchanged. GitOrigin-RevId: 04f70f64e2b4e1e5cc8727b432dccdcdf924b1db
![inkeep-internal-ci[bot]](https://avatars.githubusercontent.com/in/2806322?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Automated approval from agents-private public-mirror-sync (run: https://github.com/inkeep/agents-private/actions/runs/27709025277). Source of truth is the monorepo; direct edits on inkeep/open-knowledge are overwritten on next sync.
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
1 participant
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.
Sidebar density overhaul, modelled on VS Code / Cursor. Per-level indent drops from ~20px to ~10px, row height tightens from 30px to 24px, and the file icon shrinks from 16px to 14px, so longer filenames stay readable and more rows fit on screen at the same width. Indent guide lines are now visible at rest (not only on hover) so the tighter indent stays traceable. The pinned ancestor header that appears when you scroll into a deep subtree picks up a subtle elevation tint and a hairline divider so it reads as separate from the scrolling content. Long folder names now truncate at the end (
open-knowl…) to match files, instead of in the middle (open-…wledge). The JSON/MDX extension badge still renders unchanged.Updates
@pierre/treesto1.0.0-beta.4; the file tree's reveal-on-activate now uses Pierre's nativescrollToPath(replacing the previous hand-rolled scroll math).