feat(history-ui): add resizable commit history aside

The commit history panel is now resizable with a draggable handle and
keyboard support. The chosen width is persisted in local storage so the
layout stays consistent across sessions. Git commit loading was also
adjusted to include all branch tips for a more complete graph.

- Add width persistence and pointer/keyboard resizing for history panel
- Update commit graph query to use topo-order across all refs
- Extend tests to ensure branch tips are included in commit results
This commit is contained in:
Christoph Brandau
2026-07-03 23:35:46 +02:00
parent 835bfae254
commit 9c371ec520
4 changed files with 821 additions and 100 deletions
+81 -1
View File
@@ -117,9 +117,13 @@
const RECENT_REPOS_KEY = "gitlite.recentRepos.v1";
const AI_SETTINGS_KEY = "gitlite.aiSettings.v1";
const COMMIT_PANEL_HEIGHT_KEY = "gitlite.commitPanelHeight.v1";
const HISTORY_ASIDE_WIDTH_KEY = "gitlite.historyAsideWidth.v1";
const COMMIT_PANEL_DEFAULT_HEIGHT = 220;
const COMMIT_PANEL_MIN_HEIGHT = COMMIT_PANEL_DEFAULT_HEIGHT;
const COMMIT_PANEL_MAX_HEIGHT = 640;
const HISTORY_ASIDE_DEFAULT_WIDTH = 620;
const HISTORY_ASIDE_MIN_WIDTH = 560;
const HISTORY_ASIDE_MAX_WIDTH = 920;
// ── State ──────────────────────────────────────────────────────────────────
@@ -207,6 +211,10 @@
let resizingCommitPanel = false;
let resizeStartY = 0;
let resizeStartHeight = 0;
let historyAsideWidth = loadHistoryAsideWidth();
let resizingHistoryAside = false;
let historyResizeStartX = 0;
let historyResizeStartWidth = 0;
// ── Derived ────────────────────────────────────────────────────────────────
@@ -226,6 +234,7 @@
: "";
$: canCompare = hasRepository && compareFrom.length > 0 && compareTo.length > 0 && compareFrom !== compareTo && !isBusy;
$: localBranches = branches.filter((b) => !b.remote);
$: localBranchNames = localBranches.map((b) => b.name);
$: remoteBranches = branches.filter((b) => b.remote);
$: repoSearchTerm = repoSearch.trim().toLowerCase();
$: openRepoRows = repoTabs.filter(repoMatchesSearch);
@@ -625,6 +634,28 @@
}
}
function clampHistoryAsideWidth(value: number): number {
return Math.min(HISTORY_ASIDE_MAX_WIDTH, Math.max(HISTORY_ASIDE_MIN_WIDTH, Math.round(value)));
}
function loadHistoryAsideWidth(): number {
try {
const stored = Number(localStorage.getItem(HISTORY_ASIDE_WIDTH_KEY));
if (Number.isFinite(stored) && stored > 0) return clampHistoryAsideWidth(stored);
} catch {
// Fall through to the default below.
}
return HISTORY_ASIDE_DEFAULT_WIDTH;
}
function persistHistoryAsideWidth(value: number) {
try {
localStorage.setItem(HISTORY_ASIDE_WIDTH_KEY, String(value));
} catch {
// Local storage is best-effort only; resizing must keep working without it.
}
}
function startCommitPanelResize(event: PointerEvent) {
event.preventDefault();
resizingCommitPanel = true;
@@ -653,6 +684,34 @@
persistCommitPanelHeight(commitPanelHeight);
}
function startHistoryAsideResize(event: PointerEvent) {
event.preventDefault();
resizingHistoryAside = true;
historyResizeStartX = event.clientX;
historyResizeStartWidth = historyAsideWidth;
(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
}
function onHistoryAsideResizeMove(event: PointerEvent) {
if (!resizingHistoryAside) return;
historyAsideWidth = clampHistoryAsideWidth(historyResizeStartWidth + (historyResizeStartX - event.clientX));
}
function endHistoryAsideResize(event: PointerEvent) {
if (!resizingHistoryAside) return;
resizingHistoryAside = false;
persistHistoryAsideWidth(historyAsideWidth);
const target = event.currentTarget as HTMLElement;
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
}
function onHistoryAsideResizeKeydown(event: KeyboardEvent) {
if (event.key !== "ArrowLeft" && event.key !== "ArrowRight") return;
event.preventDefault();
historyAsideWidth = clampHistoryAsideWidth(historyAsideWidth + (event.key === "ArrowLeft" ? 24 : -24));
persistHistoryAsideWidth(historyAsideWidth);
}
function rememberRecentRepo(path: string) {
recentRepoPaths = uniqueRepoPaths([path, ...recentRepoPaths]).slice(0, 40);
persistRepoLists();
@@ -1945,7 +2004,7 @@
</section>
{:else}
<!-- Workspace -->
<section class="workspace" aria-label="Git workspace">
<section class="workspace" aria-label="Git workspace" style="--history-aside-width: {historyAsideWidth}px;">
<!-- Left sidebar: branches + explorer -->
<aside class="left-sidebar" aria-label="Repository navigation">
@@ -2049,8 +2108,29 @@
<!-- Right sidebar: commit graph + file history -->
<aside class="history-aside" aria-label="Commit history">
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
<div
class="history-resize-handle"
class:resizing={resizingHistoryAside}
role="separator"
aria-orientation="vertical"
aria-label="Resize history panel width"
aria-valuenow={historyAsideWidth}
aria-valuemin={HISTORY_ASIDE_MIN_WIDTH}
aria-valuemax={HISTORY_ASIDE_MAX_WIDTH}
tabindex="0"
onpointerdown={startHistoryAsideResize}
onpointermove={onHistoryAsideResizeMove}
onpointerup={endHistoryAsideResize}
onpointercancel={endHistoryAsideResize}
onkeydown={onHistoryAsideResizeKeydown}
></div>
<HistoryPanel
{commits}
{localBranchNames}
activeBranch={status?.current_branch ?? ""}
repositoryKey={activeRepoPath}
{hasRepository}
{isBusy}
{expandedCommitHashes}