feat(branch-panel): add branch filtering, persistent view state, and UI polish

- Add a text filter with highlight and clear (Esc to clear) that narrows visible branches and auto-opens folders while filtering.
- Persist panel view state (local/remote open + collapsed folders) to localStorage under "gitlite.branchPanelView.v2" so folder open/collapse and section visibility survive reloads.
- Reveal current branch action: clears filter, expands path to current branch, scrolls it into view and briefly flashes it.
- Rework branch list rendering: unified folder/branch ids, scope-aware rows, tracking status computation (tracked/gone/local/remote-tracked), richer titles/tooltips, updated icons, and better context-menu positioning/behavior (separate showBranchMenuAt + open-from-button).
- Prevent toggling folder collapse while filtering; folder rows are implicitly open when a filter is active.
- Add slim, rounded custom scrollbars for the left sidebar in src/app.css.

No external APIs changed; behavior is additive and intended to improve branch navigation and discoverability.
This commit is contained in:
2026-09-17 17:37:41 +02:00
parent 3ef2941190
commit f71a07ab11
2 changed files with 719 additions and 202 deletions
+40
View File
@@ -9253,3 +9253,43 @@ section > header.page-header.page-header {
.sidebar-tags-list { min-height: 0; overflow: auto; padding: 4px 0; }
.left-sidebar .tags-panel .tag-create-form { grid-template-columns: auto minmax(0, 1fr) auto auto; margin: 4px 8px; }
.left-sidebar .tags-panel .tag-create-form input[aria-label="Tag message"] { grid-column: 2 / -1; grid-row: 2; }
/* --- Sidebar scrollbars ---------------------------------------------------
Slim, rounded thumb that brightens while hovering a scroll area.
scrollbar-width/color are reset so WebKit uses the pseudo-element styling.
The panel lists are named explicitly so they win over any other rule. */
.left-sidebar,
.left-sidebar *,
.left-sidebar .sidebar-tags-list,
.left-sidebar .sidebar-worktree-list,
.left-sidebar .stash-list,
.left-sidebar .explorer-list {
scrollbar-width: auto !important;
scrollbar-color: auto !important;
}
.left-sidebar ::-webkit-scrollbar,
.left-sidebar .sidebar-tags-list::-webkit-scrollbar,
.left-sidebar .sidebar-worktree-list::-webkit-scrollbar,
.left-sidebar .stash-list::-webkit-scrollbar,
.left-sidebar .explorer-list::-webkit-scrollbar { width: 8px !important; height: 8px !important; background: transparent; }
.left-sidebar ::-webkit-scrollbar-track,
.left-sidebar .sidebar-tags-list::-webkit-scrollbar-track,
.left-sidebar .sidebar-worktree-list::-webkit-scrollbar-track,
.left-sidebar .stash-list::-webkit-scrollbar-track,
.left-sidebar .explorer-list::-webkit-scrollbar-track { margin: 6px 0; background: transparent; }
.left-sidebar ::-webkit-scrollbar-corner { background: transparent; }
.left-sidebar ::-webkit-scrollbar-thumb,
.left-sidebar .sidebar-tags-list::-webkit-scrollbar-thumb,
.left-sidebar .sidebar-worktree-list::-webkit-scrollbar-thumb,
.left-sidebar .stash-list::-webkit-scrollbar-thumb,
.left-sidebar .explorer-list::-webkit-scrollbar-thumb {
min-height: 28px;
border: 2px solid transparent;
border-radius: 999px;
background-clip: padding-box;
background-color: color-mix(in srgb, var(--app-scrollbar-thumb) 55%, transparent);
}
.left-sidebar :hover::-webkit-scrollbar-thumb { background-color: var(--app-scrollbar-thumb); }
.left-sidebar ::-webkit-scrollbar-thumb:hover,
.left-sidebar ::-webkit-scrollbar-thumb:active { background-color: var(--app-scrollbar-thumb-hover); }