refactor(sidebar): unify left sidebar panel sizing and resize logic
Replace per-panel height constants, state, loaders and resize handlers with a single model for all left sidebar panels. Panel sizes are now stored/read as a JSON object under "gitlite.sidebarPanelHeights.v2" and managed via shared helpers. Key changes and behavior: - Introduce SIDEBAR_PANEL_ORDER, per-panel MIN/DEFAULT heights and a shared MAX/STEP. - Single in-memory map sidebarPanelHeights with clamp/load/persist helpers. - One pointer/keyboard resize flow: startSidebarPanelResize, onSidebarPanelResizeMove, endSidebarPanelResize and onSidebarPanelResizeKeydown. Dragging moves the border between the panel above (grows) and the next expanded panel below (shrinks). The last expanded panel is flexible (1fr) and follows automatically. - Double-click on a handle resets the above/below panels to their defaults. - buildLeftSidebarRows now derives grid rows from the unified state; template uses new handlers and aria attributes. - LocalStorage remains best-effort; persistence failures are ignored as before. Removes many duplicate functions/variables for individual panels and simplifies the UI logic for showing/hiding resize handles and resizing behavior.
This commit is contained in:
+240
-271
@@ -296,10 +296,7 @@
|
||||
const AUTO_REFRESH_ENABLED_KEY = "gitlite.autoRefreshEnabled.v1";
|
||||
const COMMIT_PANEL_HEIGHT_KEY = "gitlite.commitPanelHeight.v1";
|
||||
const LEFT_SIDEBAR_WIDTH_KEY = "gitlite.leftSidebarWidth.v1";
|
||||
const LEFT_BRANCH_PANEL_HEIGHT_KEY = "gitlite.leftBranchPanelHeight.v1";
|
||||
const LEFT_TAGS_PANEL_HEIGHT_KEY = "gitlite.leftTagsPanelHeight.v1";
|
||||
const LEFT_WORKTREE_PANEL_HEIGHT_KEY = "gitlite.leftWorktreePanelHeight.v1";
|
||||
const LEFT_STASH_PANEL_HEIGHT_KEY = "gitlite.leftStashPanelHeight.v1";
|
||||
const SIDEBAR_PANEL_HEIGHTS_KEY = "gitlite.sidebarPanelHeights.v2";
|
||||
const BRANCH_PANEL_COLLAPSED_KEY = "gitlite.branchPanelCollapsed.v1";
|
||||
const STASH_PANEL_COLLAPSED_KEY = "gitlite.stashPanelCollapsed.v2";
|
||||
const EXPLORER_PANEL_COLLAPSED_KEY = "gitlite.explorerPanelCollapsed.v1";
|
||||
@@ -310,13 +307,26 @@
|
||||
const LEFT_SIDEBAR_DEFAULT_WIDTH = 280;
|
||||
const LEFT_SIDEBAR_MIN_WIDTH = 220;
|
||||
const LEFT_SIDEBAR_MAX_WIDTH = 420;
|
||||
const LEFT_BRANCH_PANEL_DEFAULT_HEIGHT = 260;
|
||||
const LEFT_BRANCH_PANEL_MIN_HEIGHT = 180;
|
||||
const LEFT_BRANCH_PANEL_MAX_HEIGHT = 560;
|
||||
const LEFT_STASH_PANEL_DEFAULT_HEIGHT = 190;
|
||||
const LEFT_STASH_PANEL_MIN_HEIGHT = 150;
|
||||
const LEFT_STASH_PANEL_MAX_HEIGHT = 420;
|
||||
const LEFT_EXPLORER_PANEL_MIN_HEIGHT = 220;
|
||||
// Sidebar panels, top to bottom. A drag handle moves the border between two
|
||||
// neighbours: the panel above grows, the next expanded panel below gives way.
|
||||
const SIDEBAR_PANEL_ORDER = ["branch", "worktree", "tags", "stash", "explorer"] as const;
|
||||
type SidebarPanelId = (typeof SIDEBAR_PANEL_ORDER)[number];
|
||||
const SIDEBAR_PANEL_MIN_HEIGHT: Record<SidebarPanelId, number> = {
|
||||
branch: 120,
|
||||
worktree: 96,
|
||||
tags: 96,
|
||||
stash: 110,
|
||||
explorer: 140,
|
||||
};
|
||||
const SIDEBAR_PANEL_DEFAULT_HEIGHT: Record<SidebarPanelId, number> = {
|
||||
branch: 260,
|
||||
worktree: 150,
|
||||
tags: 150,
|
||||
stash: 190,
|
||||
explorer: 260,
|
||||
};
|
||||
const SIDEBAR_PANEL_MAX_HEIGHT = 900;
|
||||
const SIDEBAR_RESIZE_STEP = 24;
|
||||
const HISTORY_ASIDE_DEFAULT_WIDTH = 620;
|
||||
const HISTORY_ASIDE_MIN_WIDTH = 420;
|
||||
const HISTORY_ASIDE_MAX_WIDTH = 920;
|
||||
@@ -553,22 +563,12 @@
|
||||
let resizingLeftSidebar = false;
|
||||
let leftSidebarResizeStartX = 0;
|
||||
let leftSidebarResizeStartWidth = 0;
|
||||
let leftBranchPanelHeight = loadLeftBranchPanelHeight();
|
||||
let resizingLeftBranchPanel = false;
|
||||
let leftBranchResizeStartY = 0;
|
||||
let leftBranchResizeStartHeight = 0;
|
||||
let leftWorktreePanelHeight = loadLeftWorktreePanelHeight();
|
||||
let resizingLeftWorktreePanel = false;
|
||||
let leftWorktreeResizeStartY = 0;
|
||||
let leftWorktreeResizeStartHeight = 0;
|
||||
let leftTagsPanelHeight = loadLeftTagsPanelHeight();
|
||||
let resizingLeftTagsPanel = false;
|
||||
let leftTagsResizeStartY = 0;
|
||||
let leftTagsResizeStartHeight = 0;
|
||||
let leftStashPanelHeight = loadLeftStashPanelHeight();
|
||||
let resizingLeftStashPanel = false;
|
||||
let leftStashResizeStartY = 0;
|
||||
let leftStashResizeStartHeight = 0;
|
||||
let sidebarPanelHeights: Record<SidebarPanelId, number> = loadSidebarPanelHeights();
|
||||
let resizingSidebarPanel: SidebarPanelId | null = null;
|
||||
let sidebarResizeStartY = 0;
|
||||
let sidebarResizeAboveStart = 0;
|
||||
let sidebarResizeBelowStart = 0;
|
||||
let sidebarResizeBelow: SidebarPanelId | null = null;
|
||||
let tagsPanelCollapsed = loadStoredBoolean("gitlite.tagsPanelCollapsed.v1", true);
|
||||
let branchPanelCollapsed = loadStoredBoolean(BRANCH_PANEL_COLLAPSED_KEY, false);
|
||||
let stashPanelCollapsed = loadStoredBoolean(STASH_PANEL_COLLAPSED_KEY, true);
|
||||
@@ -624,7 +624,7 @@
|
||||
) as Record<string, string>;
|
||||
$: remoteBranches = branches.filter((b) => b.remote);
|
||||
$: currentBranchIsLocalOnly = Boolean(status?.current_branch) && !status?.upstream;
|
||||
$: leftSidebarRows = buildLeftSidebarRows(branchPanelCollapsed, stashPanelCollapsed, explorerPanelCollapsed, worktreePanelCollapsed, tagsPanelCollapsed);
|
||||
$: leftSidebarRows = buildLeftSidebarRows(branchPanelCollapsed, worktreePanelCollapsed, tagsPanelCollapsed, stashPanelCollapsed, explorerPanelCollapsed, sidebarPanelHeights);
|
||||
$: allLeftPanelsCollapsed = branchPanelCollapsed && worktreePanelCollapsed && tagsPanelCollapsed && stashPanelCollapsed && explorerPanelCollapsed;
|
||||
$: editorToolName = externalToolDisplayName("editor", externalToolsSettings.editor, detectedExternalTools);
|
||||
$: diffToolName = externalToolDisplayName("diff", externalToolsSettings.diff, detectedExternalTools);
|
||||
@@ -1976,50 +1976,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
function clampLeftBranchPanelHeight(value: number): number {
|
||||
return Math.min(LEFT_BRANCH_PANEL_MAX_HEIGHT, Math.max(LEFT_BRANCH_PANEL_MIN_HEIGHT, Math.round(value)));
|
||||
}
|
||||
|
||||
function loadLeftBranchPanelHeight(): number {
|
||||
try {
|
||||
const stored = Number(localStorage.getItem(LEFT_BRANCH_PANEL_HEIGHT_KEY));
|
||||
if (Number.isFinite(stored) && stored > 0) return clampLeftBranchPanelHeight(stored);
|
||||
} catch {
|
||||
// Fall through to the default below.
|
||||
}
|
||||
return LEFT_BRANCH_PANEL_DEFAULT_HEIGHT;
|
||||
}
|
||||
|
||||
function persistLeftBranchPanelHeight(value: number) {
|
||||
try {
|
||||
localStorage.setItem(LEFT_BRANCH_PANEL_HEIGHT_KEY, String(value));
|
||||
} catch {
|
||||
// Local storage is best-effort only; resizing must keep working without it.
|
||||
}
|
||||
}
|
||||
|
||||
function clampLeftStashPanelHeight(value: number): number {
|
||||
return Math.min(LEFT_STASH_PANEL_MAX_HEIGHT, Math.max(LEFT_STASH_PANEL_MIN_HEIGHT, Math.round(value)));
|
||||
}
|
||||
|
||||
function loadLeftStashPanelHeight(): number {
|
||||
try {
|
||||
const stored = Number(localStorage.getItem(LEFT_STASH_PANEL_HEIGHT_KEY));
|
||||
if (Number.isFinite(stored) && stored > 0) return clampLeftStashPanelHeight(stored);
|
||||
} catch {
|
||||
// Fall through to the default below.
|
||||
}
|
||||
return LEFT_STASH_PANEL_DEFAULT_HEIGHT;
|
||||
}
|
||||
|
||||
function persistLeftStashPanelHeight(value: number) {
|
||||
try {
|
||||
localStorage.setItem(LEFT_STASH_PANEL_HEIGHT_KEY, String(value));
|
||||
} catch {
|
||||
// Local storage is best-effort only; resizing must keep working without it.
|
||||
}
|
||||
}
|
||||
|
||||
function clampHistoryAsideWidth(value: number): number {
|
||||
return Math.min(HISTORY_ASIDE_MAX_WIDTH, Math.max(HISTORY_ASIDE_MIN_WIDTH, Math.round(value)));
|
||||
}
|
||||
@@ -2098,176 +2054,172 @@
|
||||
persistLeftSidebarWidth(leftSidebarWidth);
|
||||
}
|
||||
|
||||
function buildLeftSidebarRows(branchCollapsed: boolean, stashCollapsed: boolean, explorerCollapsed: boolean, worktreeCollapsed: boolean, tagsCollapsed: boolean): string {
|
||||
const branchRow = branchCollapsed
|
||||
? "auto"
|
||||
: `minmax(${LEFT_BRANCH_PANEL_MIN_HEIGHT}px, var(--branch-panel-height, ${LEFT_BRANCH_PANEL_DEFAULT_HEIGHT}px))`;
|
||||
const branchHandleRow = branchCollapsed ? "0" : "6px";
|
||||
const stashRow = stashCollapsed
|
||||
? "auto"
|
||||
: `minmax(${LEFT_STASH_PANEL_MIN_HEIGHT}px, var(--stash-panel-height, ${LEFT_STASH_PANEL_DEFAULT_HEIGHT}px))`;
|
||||
const stashHandleRow = explorerCollapsed || stashCollapsed ? "0" : "6px";
|
||||
const explorerRow = explorerCollapsed ? "auto" : `minmax(${LEFT_EXPLORER_PANEL_MIN_HEIGHT}px, 1fr)`;
|
||||
// ── Sidebar panel sizing ───────────────────────────────────────────────────
|
||||
|
||||
return `${branchRow} ${branchHandleRow} ${worktreeCollapsed ? "42px 0" : "var(--worktree-panel-height, 140px) 6px"} ${tagsCollapsed ? "42px 0" : "var(--tags-panel-height, 140px) 6px"} ${stashRow} ${stashHandleRow} ${explorerRow}`;
|
||||
function clampSidebarPanelHeight(panel: SidebarPanelId, value: number): number {
|
||||
return Math.min(SIDEBAR_PANEL_MAX_HEIGHT, Math.max(SIDEBAR_PANEL_MIN_HEIGHT[panel], Math.round(value)));
|
||||
}
|
||||
|
||||
function clampLeftWorktreePanelHeight(value: number) {
|
||||
return Math.min(420, Math.max(80, Math.round(value)));
|
||||
}
|
||||
|
||||
function loadLeftWorktreePanelHeight() {
|
||||
function loadSidebarPanelHeights(): Record<SidebarPanelId, number> {
|
||||
const heights = { ...SIDEBAR_PANEL_DEFAULT_HEIGHT };
|
||||
try {
|
||||
const stored = Number(localStorage.getItem(LEFT_WORKTREE_PANEL_HEIGHT_KEY));
|
||||
if (Number.isFinite(stored) && stored > 0) return clampLeftWorktreePanelHeight(stored);
|
||||
} catch { /* Preferences are optional. */ }
|
||||
return 140;
|
||||
const stored: unknown = JSON.parse(localStorage.getItem(SIDEBAR_PANEL_HEIGHTS_KEY) ?? "{}");
|
||||
if (stored && typeof stored === "object") {
|
||||
for (const panel of SIDEBAR_PANEL_ORDER) {
|
||||
const value = Number((stored as Record<string, unknown>)[panel]);
|
||||
if (Number.isFinite(value) && value > 0) heights[panel] = clampSidebarPanelHeight(panel, value);
|
||||
}
|
||||
}
|
||||
} catch {
|
||||
// Stored sizes are a convenience; the defaults above always work.
|
||||
}
|
||||
return heights;
|
||||
}
|
||||
|
||||
function persistLeftWorktreePanelHeight() {
|
||||
try { localStorage.setItem(LEFT_WORKTREE_PANEL_HEIGHT_KEY, String(leftWorktreePanelHeight)); }
|
||||
catch { /* Preferences are optional. */ }
|
||||
}
|
||||
|
||||
function startLeftWorktreePanelResize(event: PointerEvent) {
|
||||
event.preventDefault();
|
||||
resizingLeftWorktreePanel = true;
|
||||
leftWorktreeResizeStartY = event.clientY;
|
||||
leftWorktreeResizeStartHeight = leftWorktreePanelHeight;
|
||||
(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftWorktreePanelResizeMove(event: PointerEvent) {
|
||||
if (!resizingLeftWorktreePanel) return;
|
||||
leftWorktreePanelHeight = clampLeftWorktreePanelHeight(leftWorktreeResizeStartHeight + event.clientY - leftWorktreeResizeStartY);
|
||||
}
|
||||
|
||||
function endLeftWorktreePanelResize(event: PointerEvent) {
|
||||
if (!resizingLeftWorktreePanel) return;
|
||||
resizingLeftWorktreePanel = false;
|
||||
persistLeftWorktreePanelHeight();
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftWorktreePanelResizeKeydown(event: KeyboardEvent) {
|
||||
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
||||
event.preventDefault();
|
||||
leftWorktreePanelHeight = clampLeftWorktreePanelHeight(leftWorktreePanelHeight + (event.key === "ArrowDown" ? 20 : -20));
|
||||
persistLeftWorktreePanelHeight();
|
||||
}
|
||||
|
||||
function clampLeftTagsPanelHeight(value: number) {
|
||||
return Math.min(420, Math.max(80, Math.round(value)));
|
||||
}
|
||||
|
||||
function loadLeftTagsPanelHeight() {
|
||||
function persistSidebarPanelHeights() {
|
||||
try {
|
||||
const stored = Number(localStorage.getItem(LEFT_TAGS_PANEL_HEIGHT_KEY));
|
||||
if (Number.isFinite(stored) && stored > 0) return clampLeftTagsPanelHeight(stored);
|
||||
} catch { /* Preferences are optional. */ }
|
||||
return 140;
|
||||
}
|
||||
|
||||
function persistLeftTagsPanelHeight() {
|
||||
try { localStorage.setItem(LEFT_TAGS_PANEL_HEIGHT_KEY, String(leftTagsPanelHeight)); }
|
||||
catch { /* Preferences are optional. */ }
|
||||
}
|
||||
|
||||
function startLeftTagsPanelResize(event: PointerEvent) {
|
||||
event.preventDefault();
|
||||
resizingLeftTagsPanel = true;
|
||||
leftTagsResizeStartY = event.clientY;
|
||||
leftTagsResizeStartHeight = leftTagsPanelHeight;
|
||||
(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftTagsPanelResizeMove(event: PointerEvent) {
|
||||
if (!resizingLeftTagsPanel) return;
|
||||
leftTagsPanelHeight = clampLeftTagsPanelHeight(leftTagsResizeStartHeight + event.clientY - leftTagsResizeStartY);
|
||||
}
|
||||
|
||||
function endLeftTagsPanelResize(event: PointerEvent) {
|
||||
if (!resizingLeftTagsPanel) return;
|
||||
resizingLeftTagsPanel = false;
|
||||
persistLeftTagsPanelHeight();
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftTagsPanelResizeKeydown(event: KeyboardEvent) {
|
||||
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
||||
event.preventDefault();
|
||||
leftTagsPanelHeight = clampLeftTagsPanelHeight(leftTagsPanelHeight + (event.key === "ArrowDown" ? 20 : -20));
|
||||
persistLeftTagsPanelHeight();
|
||||
}
|
||||
|
||||
function startLeftBranchPanelResize(event: PointerEvent) {
|
||||
if (branchPanelCollapsed) return;
|
||||
event.preventDefault();
|
||||
resizingLeftBranchPanel = true;
|
||||
leftBranchResizeStartY = event.clientY;
|
||||
leftBranchResizeStartHeight = leftBranchPanelHeight;
|
||||
(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftBranchPanelResizeMove(event: PointerEvent) {
|
||||
if (!resizingLeftBranchPanel) return;
|
||||
leftBranchPanelHeight = clampLeftBranchPanelHeight(leftBranchResizeStartHeight + (event.clientY - leftBranchResizeStartY));
|
||||
}
|
||||
|
||||
function endLeftBranchPanelResize(event: PointerEvent) {
|
||||
if (!resizingLeftBranchPanel) return;
|
||||
resizingLeftBranchPanel = false;
|
||||
persistLeftBranchPanelHeight(leftBranchPanelHeight);
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftBranchPanelResizeKeydown(event: KeyboardEvent) {
|
||||
if (branchPanelCollapsed || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
|
||||
event.preventDefault();
|
||||
leftBranchPanelHeight = clampLeftBranchPanelHeight(leftBranchPanelHeight + (event.key === "ArrowDown" ? 20 : -20));
|
||||
persistLeftBranchPanelHeight(leftBranchPanelHeight);
|
||||
}
|
||||
|
||||
function startLeftStashPanelResize(event: PointerEvent) {
|
||||
if (stashPanelCollapsed && branchPanelCollapsed) return;
|
||||
event.preventDefault();
|
||||
resizingLeftStashPanel = true;
|
||||
leftStashResizeStartY = event.clientY;
|
||||
leftStashResizeStartHeight = stashPanelCollapsed ? leftBranchPanelHeight : leftStashPanelHeight;
|
||||
(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftStashPanelResizeMove(event: PointerEvent) {
|
||||
if (!resizingLeftStashPanel) return;
|
||||
if (stashPanelCollapsed) {
|
||||
leftBranchPanelHeight = clampLeftBranchPanelHeight(leftStashResizeStartHeight + (event.clientY - leftStashResizeStartY));
|
||||
} else {
|
||||
leftStashPanelHeight = clampLeftStashPanelHeight(leftStashResizeStartHeight + (event.clientY - leftStashResizeStartY));
|
||||
localStorage.setItem(SIDEBAR_PANEL_HEIGHTS_KEY, JSON.stringify(sidebarPanelHeights));
|
||||
} catch {
|
||||
// Local storage is best-effort only; resizing must keep working without it.
|
||||
}
|
||||
}
|
||||
|
||||
function endLeftStashPanelResize(event: PointerEvent) {
|
||||
if (!resizingLeftStashPanel) return;
|
||||
resizingLeftStashPanel = false;
|
||||
if (stashPanelCollapsed) persistLeftBranchPanelHeight(leftBranchPanelHeight);
|
||||
else persistLeftStashPanelHeight(leftStashPanelHeight);
|
||||
function sidebarPanelIsCollapsed(panel: SidebarPanelId): boolean {
|
||||
if (panel === "branch") return branchPanelCollapsed;
|
||||
if (panel === "worktree") return worktreePanelCollapsed;
|
||||
if (panel === "tags") return tagsPanelCollapsed;
|
||||
if (panel === "stash") return stashPanelCollapsed;
|
||||
return explorerPanelCollapsed;
|
||||
}
|
||||
|
||||
/** Expanded panels, top to bottom. The last one always fills the leftover space. */
|
||||
function expandedSidebarPanels(): SidebarPanelId[] {
|
||||
return SIDEBAR_PANEL_ORDER.filter((panel) => !sidebarPanelIsCollapsed(panel));
|
||||
}
|
||||
|
||||
/** The first expanded panel below `panel` — the one that gives way while dragging. */
|
||||
function nextExpandedSidebarPanel(panel: SidebarPanelId): SidebarPanelId | null {
|
||||
const expanded = expandedSidebarPanels();
|
||||
const index = expanded.indexOf(panel);
|
||||
return index >= 0 && index < expanded.length - 1 ? expanded[index + 1] : null;
|
||||
}
|
||||
|
||||
/** A handle only makes sense between two expanded panels. */
|
||||
function sidebarHandleVisible(panel: SidebarPanelId, ...markers: boolean[]): boolean {
|
||||
void markers;
|
||||
return !sidebarPanelIsCollapsed(panel) && nextExpandedSidebarPanel(panel) !== null;
|
||||
}
|
||||
|
||||
function buildLeftSidebarRows(
|
||||
branchCollapsed: boolean,
|
||||
worktreeCollapsed: boolean,
|
||||
tagsCollapsed: boolean,
|
||||
stashCollapsed: boolean,
|
||||
explorerCollapsed: boolean,
|
||||
heights: Record<SidebarPanelId, number>,
|
||||
): string {
|
||||
void branchCollapsed; void worktreeCollapsed; void tagsCollapsed; void stashCollapsed; void explorerCollapsed;
|
||||
|
||||
const expanded = expandedSidebarPanels();
|
||||
const flexible = expanded[expanded.length - 1];
|
||||
const rows: string[] = [];
|
||||
|
||||
for (const panel of SIDEBAR_PANEL_ORDER) {
|
||||
if (sidebarPanelIsCollapsed(panel)) rows.push("auto");
|
||||
else if (panel === flexible) rows.push(`minmax(${SIDEBAR_PANEL_MIN_HEIGHT[panel]}px, 1fr)`);
|
||||
else rows.push(`${heights[panel]}px`);
|
||||
|
||||
if (panel !== "explorer") rows.push(sidebarHandleVisible(panel) ? "8px" : "0");
|
||||
}
|
||||
|
||||
return rows.join(" ");
|
||||
}
|
||||
|
||||
function startSidebarPanelResize(event: PointerEvent, panel: SidebarPanelId) {
|
||||
const below = nextExpandedSidebarPanel(panel);
|
||||
if (!below) return;
|
||||
event.preventDefault();
|
||||
resizingSidebarPanel = panel;
|
||||
sidebarResizeBelow = below;
|
||||
sidebarResizeStartY = event.clientY;
|
||||
sidebarResizeAboveStart = sidebarPanelHeights[panel];
|
||||
sidebarResizeBelowStart = sidebarPanelHeights[below];
|
||||
(event.currentTarget as HTMLElement).setPointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onSidebarPanelResizeMove(event: PointerEvent) {
|
||||
const panel = resizingSidebarPanel;
|
||||
if (!panel) return;
|
||||
applySidebarPanelResize(panel, event.clientY - sidebarResizeStartY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Move the border by `delta`: the panel above grows, the neighbour below
|
||||
* shrinks by the same amount. The last expanded panel is sized with 1fr, so
|
||||
* it follows on its own and only the panel above needs a new height.
|
||||
*/
|
||||
function applySidebarPanelResize(panel: SidebarPanelId, delta: number) {
|
||||
const below = sidebarResizeBelow;
|
||||
const expanded = expandedSidebarPanels();
|
||||
const belowIsFlexible = below !== null && below === expanded[expanded.length - 1];
|
||||
|
||||
if (below === null) return;
|
||||
|
||||
if (belowIsFlexible) {
|
||||
sidebarPanelHeights = {
|
||||
...sidebarPanelHeights,
|
||||
[panel]: clampSidebarPanelHeight(panel, sidebarResizeAboveStart + delta),
|
||||
};
|
||||
return;
|
||||
}
|
||||
|
||||
const maxGrow = sidebarResizeBelowStart - SIDEBAR_PANEL_MIN_HEIGHT[below];
|
||||
const maxShrink = sidebarResizeAboveStart - SIDEBAR_PANEL_MIN_HEIGHT[panel];
|
||||
const applied = Math.max(-maxShrink, Math.min(maxGrow, Math.round(delta)));
|
||||
|
||||
sidebarPanelHeights = {
|
||||
...sidebarPanelHeights,
|
||||
[panel]: clampSidebarPanelHeight(panel, sidebarResizeAboveStart + applied),
|
||||
[below]: clampSidebarPanelHeight(below, sidebarResizeBelowStart - applied),
|
||||
};
|
||||
}
|
||||
|
||||
function endSidebarPanelResize(event: PointerEvent) {
|
||||
if (!resizingSidebarPanel) return;
|
||||
resizingSidebarPanel = null;
|
||||
sidebarResizeBelow = null;
|
||||
persistSidebarPanelHeights();
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
|
||||
}
|
||||
|
||||
function onLeftStashPanelResizeKeydown(event: KeyboardEvent) {
|
||||
if ((stashPanelCollapsed && branchPanelCollapsed) || (event.key !== "ArrowUp" && event.key !== "ArrowDown")) return;
|
||||
event.preventDefault();
|
||||
if (stashPanelCollapsed) {
|
||||
leftBranchPanelHeight = clampLeftBranchPanelHeight(leftBranchPanelHeight + (event.key === "ArrowDown" ? 20 : -20));
|
||||
persistLeftBranchPanelHeight(leftBranchPanelHeight);
|
||||
} else {
|
||||
leftStashPanelHeight = clampLeftStashPanelHeight(leftStashPanelHeight + (event.key === "ArrowDown" ? 20 : -20));
|
||||
persistLeftStashPanelHeight(leftStashPanelHeight);
|
||||
function onSidebarPanelResizeKeydown(event: KeyboardEvent, panel: SidebarPanelId) {
|
||||
const below = nextExpandedSidebarPanel(panel);
|
||||
if (!below) return;
|
||||
|
||||
if (event.key === "Home") {
|
||||
event.preventDefault();
|
||||
resetSidebarPanelHeight(panel);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
|
||||
event.preventDefault();
|
||||
|
||||
sidebarResizeBelow = below;
|
||||
sidebarResizeAboveStart = sidebarPanelHeights[panel];
|
||||
sidebarResizeBelowStart = sidebarPanelHeights[below];
|
||||
applySidebarPanelResize(panel, event.key === "ArrowDown" ? SIDEBAR_RESIZE_STEP : -SIDEBAR_RESIZE_STEP);
|
||||
sidebarResizeBelow = null;
|
||||
persistSidebarPanelHeights();
|
||||
}
|
||||
|
||||
/** Double-click on a handle puts the panel above back to its default height. */
|
||||
function resetSidebarPanelHeight(panel: SidebarPanelId) {
|
||||
const below = nextExpandedSidebarPanel(panel);
|
||||
sidebarPanelHeights = { ...sidebarPanelHeights, [panel]: SIDEBAR_PANEL_DEFAULT_HEIGHT[panel] };
|
||||
if (below) sidebarPanelHeights = { ...sidebarPanelHeights, [below]: SIDEBAR_PANEL_DEFAULT_HEIGHT[below] };
|
||||
persistSidebarPanelHeights();
|
||||
}
|
||||
|
||||
function toggleBranchPanelCollapsed() {
|
||||
@@ -6153,8 +6105,9 @@
|
||||
class:stash-collapsed={stashPanelCollapsed}
|
||||
class:explorer-collapsed={explorerPanelCollapsed}
|
||||
class:all-collapsed={allLeftPanelsCollapsed}
|
||||
class:resizing-panels={resizingSidebarPanel !== null}
|
||||
aria-label="Repository navigation"
|
||||
style="--tags-panel-height: {leftTagsPanelHeight}px; --worktree-panel-height: {leftWorktreePanelHeight}px; --branch-panel-height: {leftBranchPanelHeight}px; --stash-panel-height: {leftStashPanelHeight}px; grid-template-rows: {leftSidebarRows};"
|
||||
style="grid-template-rows: {leftSidebarRows};"
|
||||
>
|
||||
<BranchPanel
|
||||
{branches}
|
||||
@@ -6175,24 +6128,26 @@
|
||||
collapsed={branchPanelCollapsed}
|
||||
onToggleCollapsed={toggleBranchPanelCollapsed}
|
||||
/>
|
||||
{#if !branchPanelCollapsed}
|
||||
{#if sidebarHandleVisible("branch", branchPanelCollapsed, worktreePanelCollapsed, tagsPanelCollapsed, stashPanelCollapsed, explorerPanelCollapsed)}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="panel-resize-handle left-panel-resize-handle branch-panel-resize-handle"
|
||||
class:resizing={resizingLeftBranchPanel}
|
||||
class="panel-resize-handle left-panel-resize-handle"
|
||||
class:resizing={resizingSidebarPanel === "branch"}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
aria-label="Resize branches panel height"
|
||||
aria-valuenow={leftBranchPanelHeight}
|
||||
aria-valuemin={LEFT_BRANCH_PANEL_MIN_HEIGHT}
|
||||
aria-valuemax={LEFT_BRANCH_PANEL_MAX_HEIGHT}
|
||||
aria-valuenow={sidebarPanelHeights.branch}
|
||||
aria-valuemin={SIDEBAR_PANEL_MIN_HEIGHT.branch}
|
||||
aria-valuemax={SIDEBAR_PANEL_MAX_HEIGHT}
|
||||
tabindex="0"
|
||||
onpointerdown={startLeftBranchPanelResize}
|
||||
onpointermove={onLeftBranchPanelResizeMove}
|
||||
onpointerup={endLeftBranchPanelResize}
|
||||
onpointercancel={endLeftBranchPanelResize}
|
||||
onkeydown={onLeftBranchPanelResizeKeydown}
|
||||
title="Drag to move the border · double-click to reset"
|
||||
onpointerdown={(event) => startSidebarPanelResize(event, "branch")}
|
||||
onpointermove={onSidebarPanelResizeMove}
|
||||
onpointerup={endSidebarPanelResize}
|
||||
onpointercancel={endSidebarPanelResize}
|
||||
ondblclick={() => resetSidebarPanelHeight("branch")}
|
||||
onkeydown={(event) => onSidebarPanelResizeKeydown(event, "branch")}
|
||||
></div>
|
||||
{:else}
|
||||
<span class="left-panel-resize-placeholder" aria-hidden="true"></span>
|
||||
@@ -6212,20 +6167,26 @@
|
||||
onManage={() => { void openWorktreeDialog(); }}
|
||||
onRefresh={() => { void refreshWorktrees(); }}
|
||||
/>
|
||||
{#if !worktreePanelCollapsed}
|
||||
{#if sidebarHandleVisible("worktree", branchPanelCollapsed, worktreePanelCollapsed, tagsPanelCollapsed, stashPanelCollapsed, explorerPanelCollapsed)}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="panel-resize-handle left-panel-resize-handle worktree-panel-resize-handle"
|
||||
class:resizing={resizingLeftWorktreePanel}
|
||||
role="separator" aria-orientation="horizontal" aria-label="Resize worktrees panel height"
|
||||
aria-valuenow={leftWorktreePanelHeight} aria-valuemin={80} aria-valuemax={420}
|
||||
class="panel-resize-handle left-panel-resize-handle"
|
||||
class:resizing={resizingSidebarPanel === "worktree"}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
aria-label="Resize worktrees panel height"
|
||||
aria-valuenow={sidebarPanelHeights.worktree}
|
||||
aria-valuemin={SIDEBAR_PANEL_MIN_HEIGHT.worktree}
|
||||
aria-valuemax={SIDEBAR_PANEL_MAX_HEIGHT}
|
||||
tabindex="0"
|
||||
onpointerdown={startLeftWorktreePanelResize}
|
||||
onpointermove={onLeftWorktreePanelResizeMove}
|
||||
onpointerup={endLeftWorktreePanelResize}
|
||||
onpointercancel={endLeftWorktreePanelResize}
|
||||
onkeydown={onLeftWorktreePanelResizeKeydown}
|
||||
title="Drag to move the border · double-click to reset"
|
||||
onpointerdown={(event) => startSidebarPanelResize(event, "worktree")}
|
||||
onpointermove={onSidebarPanelResizeMove}
|
||||
onpointerup={endSidebarPanelResize}
|
||||
onpointercancel={endSidebarPanelResize}
|
||||
ondblclick={() => resetSidebarPanelHeight("worktree")}
|
||||
onkeydown={(event) => onSidebarPanelResizeKeydown(event, "worktree")}
|
||||
></div>
|
||||
{:else}
|
||||
<span class="left-panel-resize-placeholder" aria-hidden="true"></span>
|
||||
@@ -6241,20 +6202,26 @@
|
||||
onDeleteTag={deleteLocalTag}
|
||||
onPushTag={pushLocalTag}
|
||||
/>
|
||||
{#if !tagsPanelCollapsed}
|
||||
{#if sidebarHandleVisible("tags", branchPanelCollapsed, worktreePanelCollapsed, tagsPanelCollapsed, stashPanelCollapsed, explorerPanelCollapsed)}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="panel-resize-handle left-panel-resize-handle tags-panel-resize-handle"
|
||||
class:resizing={resizingLeftTagsPanel}
|
||||
role="separator" aria-orientation="horizontal" aria-label="Resize tags panel height"
|
||||
aria-valuenow={leftTagsPanelHeight} aria-valuemin={80} aria-valuemax={420}
|
||||
class="panel-resize-handle left-panel-resize-handle"
|
||||
class:resizing={resizingSidebarPanel === "tags"}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
aria-label="Resize tags panel height"
|
||||
aria-valuenow={sidebarPanelHeights.tags}
|
||||
aria-valuemin={SIDEBAR_PANEL_MIN_HEIGHT.tags}
|
||||
aria-valuemax={SIDEBAR_PANEL_MAX_HEIGHT}
|
||||
tabindex="0"
|
||||
onpointerdown={startLeftTagsPanelResize}
|
||||
onpointermove={onLeftTagsPanelResizeMove}
|
||||
onpointerup={endLeftTagsPanelResize}
|
||||
onpointercancel={endLeftTagsPanelResize}
|
||||
onkeydown={onLeftTagsPanelResizeKeydown}
|
||||
title="Drag to move the border · double-click to reset"
|
||||
onpointerdown={(event) => startSidebarPanelResize(event, "tags")}
|
||||
onpointermove={onSidebarPanelResizeMove}
|
||||
onpointerup={endSidebarPanelResize}
|
||||
onpointercancel={endSidebarPanelResize}
|
||||
ondblclick={() => resetSidebarPanelHeight("tags")}
|
||||
onkeydown={(event) => onSidebarPanelResizeKeydown(event, "tags")}
|
||||
></div>
|
||||
{:else}
|
||||
<span class="left-panel-resize-placeholder" aria-hidden="true"></span>
|
||||
@@ -6271,24 +6238,26 @@
|
||||
collapsed={stashPanelCollapsed}
|
||||
onToggleCollapsed={toggleStashPanelCollapsed}
|
||||
/>
|
||||
{#if !explorerPanelCollapsed && !stashPanelCollapsed}
|
||||
{#if sidebarHandleVisible("stash", branchPanelCollapsed, worktreePanelCollapsed, tagsPanelCollapsed, stashPanelCollapsed, explorerPanelCollapsed)}
|
||||
<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
|
||||
<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
|
||||
<div
|
||||
class="panel-resize-handle left-panel-resize-handle stash-panel-resize-handle"
|
||||
class:resizing={resizingLeftStashPanel}
|
||||
class="panel-resize-handle left-panel-resize-handle"
|
||||
class:resizing={resizingSidebarPanel === "stash"}
|
||||
role="separator"
|
||||
aria-orientation="horizontal"
|
||||
aria-label={stashPanelCollapsed ? "Resize files panel space" : "Resize stash and explorer panels"}
|
||||
aria-valuenow={stashPanelCollapsed ? leftBranchPanelHeight : leftStashPanelHeight}
|
||||
aria-valuemin={stashPanelCollapsed ? LEFT_BRANCH_PANEL_MIN_HEIGHT : LEFT_STASH_PANEL_MIN_HEIGHT}
|
||||
aria-valuemax={stashPanelCollapsed ? LEFT_BRANCH_PANEL_MAX_HEIGHT : LEFT_STASH_PANEL_MAX_HEIGHT}
|
||||
aria-label="Resize stashes panel height"
|
||||
aria-valuenow={sidebarPanelHeights.stash}
|
||||
aria-valuemin={SIDEBAR_PANEL_MIN_HEIGHT.stash}
|
||||
aria-valuemax={SIDEBAR_PANEL_MAX_HEIGHT}
|
||||
tabindex="0"
|
||||
onpointerdown={startLeftStashPanelResize}
|
||||
onpointermove={onLeftStashPanelResizeMove}
|
||||
onpointerup={endLeftStashPanelResize}
|
||||
onpointercancel={endLeftStashPanelResize}
|
||||
onkeydown={onLeftStashPanelResizeKeydown}
|
||||
title="Drag to move the border · double-click to reset"
|
||||
onpointerdown={(event) => startSidebarPanelResize(event, "stash")}
|
||||
onpointermove={onSidebarPanelResizeMove}
|
||||
onpointerup={endSidebarPanelResize}
|
||||
onpointercancel={endSidebarPanelResize}
|
||||
ondblclick={() => resetSidebarPanelHeight("stash")}
|
||||
onkeydown={(event) => onSidebarPanelResizeKeydown(event, "stash")}
|
||||
></div>
|
||||
{:else}
|
||||
<span class="left-panel-resize-placeholder" aria-hidden="true"></span>
|
||||
|
||||
Reference in New Issue
Block a user