all: fix formatting
diff --git a/webui/src/web-components/sketch-diff-range-picker.ts b/webui/src/web-components/sketch-diff-range-picker.ts
index 38d29b0..aebe6ff 100644
--- a/webui/src/web-components/sketch-diff-range-picker.ts
+++ b/webui/src/web-components/sketch-diff-range-picker.ts
@@ -170,14 +170,14 @@
setTimeout(() => this.loadCommits(), 0); // Give time for provider initialization
});
}
-
+
// Listen for popstate events to handle browser back/forward navigation
- window.addEventListener('popstate', this.handlePopState.bind(this));
+ window.addEventListener("popstate", this.handlePopState.bind(this));
}
disconnectedCallback() {
super.disconnectedCallback();
- window.removeEventListener('popstate', this.handlePopState.bind(this));
+ window.removeEventListener("popstate", this.handlePopState.bind(this));
}
/**
@@ -354,7 +354,7 @@
// Check if we should initialize from URL parameters first
const initializedFromUrl = this.initializeFromUrlParams();
-
+
// Set default selections only if not initialized from URL
if (this.commits.length > 0 && !initializedFromUrl) {
// For range, default is base to HEAD
@@ -373,7 +373,7 @@
// For single, default to HEAD
this.singleCommit = this.commits[0].hash;
}
-
+
// Always dispatch range event to ensure diff view is updated
this.dispatchRangeEvent();
} catch (error) {
@@ -389,10 +389,13 @@
*/
setRangeType(type: "range" | "single") {
this.rangeType = type;
-
+
// If switching to range mode and we don't have valid commits set,
// initialize with sensible defaults
- if (type === 'range' && (!this.fromCommit || !this.toCommit === undefined)) {
+ if (
+ type === "range" &&
+ (!this.fromCommit || !this.toCommit === undefined)
+ ) {
if (this.commits.length > 0) {
const baseCommit = this.commits.find(
(c) => c.refs && c.refs.some((ref) => ref.includes("sketch-base")),
@@ -403,17 +406,17 @@
: this.commits[this.commits.length - 1].hash;
}
if (this.toCommit === undefined) {
- this.toCommit = ''; // Default to uncommitted changes
+ this.toCommit = ""; // Default to uncommitted changes
}
}
}
-
+
// If switching to single mode and we don't have a valid commit set,
// initialize with HEAD
- if (type === 'single' && !this.singleCommit && this.commits.length > 0) {
+ if (type === "single" && !this.singleCommit && this.commits.length > 0) {
this.singleCommit = this.commits[0].hash;
}
-
+
this.dispatchRangeEvent();
}
@@ -455,8 +458,10 @@
* Validate that a commit hash exists in the loaded commits
*/
private isValidCommitHash(hash: string): boolean {
- if (!hash || hash.trim() === '') return true; // Empty is valid (uncommitted changes)
- return this.commits.some(commit => commit.hash.startsWith(hash) || commit.hash === hash);
+ if (!hash || hash.trim() === "") return true; // Empty is valid (uncommitted changes)
+ return this.commits.some(
+ (commit) => commit.hash.startsWith(hash) || commit.hash === hash,
+ );
}
/**
@@ -485,30 +490,30 @@
*/
private updateUrlParams(range: DiffRange) {
const url = new URL(window.location.href);
-
+
// Remove existing range parameters
- url.searchParams.delete('from');
- url.searchParams.delete('to');
- url.searchParams.delete('commit');
-
- if (range.type === 'range') {
+ url.searchParams.delete("from");
+ url.searchParams.delete("to");
+ url.searchParams.delete("commit");
+
+ if (range.type === "range") {
// Add from parameter if not empty
- if (range.from && range.from.trim() !== '') {
- url.searchParams.set('from', range.from);
+ if (range.from && range.from.trim() !== "") {
+ url.searchParams.set("from", range.from);
}
// Add to parameter if not empty (empty string means uncommitted changes)
- if (range.to && range.to.trim() !== '') {
- url.searchParams.set('to', range.to);
+ if (range.to && range.to.trim() !== "") {
+ url.searchParams.set("to", range.to);
}
} else {
// Single commit mode
- if (range.commit && range.commit.trim() !== '') {
- url.searchParams.set('commit', range.commit);
+ if (range.commit && range.commit.trim() !== "") {
+ url.searchParams.set("commit", range.commit);
}
}
-
+
// Update the browser history without reloading the page
- window.history.replaceState(window.history.state, '', url.toString());
+ window.history.replaceState(window.history.state, "", url.toString());
}
/**
@@ -516,20 +521,20 @@
*/
private initializeFromUrlParams() {
const url = new URL(window.location.href);
- const fromParam = url.searchParams.get('from');
- const toParam = url.searchParams.get('to');
- const commitParam = url.searchParams.get('commit');
-
+ const fromParam = url.searchParams.get("from");
+ const toParam = url.searchParams.get("to");
+ const commitParam = url.searchParams.get("commit");
+
// If commit parameter is present, switch to single commit mode
if (commitParam) {
- this.rangeType = 'single';
+ this.rangeType = "single";
this.singleCommit = commitParam;
return true; // Indicate that we initialized from URL
}
-
+
// If from or to parameters are present, use range mode
if (fromParam || toParam) {
- this.rangeType = 'range';
+ this.rangeType = "range";
if (fromParam) {
this.fromCommit = fromParam;
}
@@ -537,11 +542,11 @@
this.toCommit = toParam;
} else {
// If no 'to' param, default to uncommitted changes (empty string)
- this.toCommit = '';
+ this.toCommit = "";
}
return true; // Indicate that we initialized from URL
}
-
+
return false; // No URL params found
}
}
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 1514fcd..f655933 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -49,25 +49,27 @@
// Get the monaco view that emitted the event
const monacoView = event.target as HTMLElement;
if (!monacoView) return;
-
+
// Find the parent file-diff-editor container
- const fileDiffEditor = monacoView.closest('.file-diff-editor') as HTMLElement;
+ const fileDiffEditor = monacoView.closest(
+ ".file-diff-editor",
+ ) as HTMLElement;
if (!fileDiffEditor) return;
-
+
// Get the new height from the event
const newHeight = event.detail.height;
-
+
// Only update if the height actually changed to avoid unnecessary layout
const currentHeight = fileDiffEditor.style.height;
const newHeightStr = `${newHeight}px`;
-
+
if (currentHeight !== newHeightStr) {
// Update the file-diff-editor height to match monaco's height
fileDiffEditor.style.height = newHeightStr;
-
+
// Remove any previous min-height constraint that might interfere
- fileDiffEditor.style.minHeight = 'auto';
-
+ fileDiffEditor.style.minHeight = "auto";
+
// IMPORTANT: Tell Monaco to relayout after its container size changed
// Monaco has automaticLayout: false, so it won't detect container changes
setTimeout(() => {
@@ -77,14 +79,13 @@
const editorWidth = fileDiffEditor.offsetWidth;
monacoComponent.editor.layout({
width: editorWidth,
- height: newHeight
+ height: newHeight,
});
}
}, 0);
}
-
} catch (error) {
- console.error('Error handling Monaco height change:', error);
+ console.error("Error handling Monaco height change:", error);
}
}
@@ -143,7 +144,10 @@
private currentRange: DiffRange = { type: "range", from: "", to: "HEAD" };
@state()
- private fileContents: Map<string, { original: string; modified: string; editable: boolean }> = new Map();
+ private fileContents: Map<
+ string,
+ { original: string; modified: string; editable: boolean }
+ > = new Map();
@state()
private fileExpandStates: Map<string, boolean> = new Map();
@@ -456,13 +460,15 @@
const currentState = this.fileExpandStates.get(filePath) ?? false;
const newState = !currentState;
this.fileExpandStates.set(filePath, newState);
-
+
// Apply to the specific Monaco view component for this file
- const monacoView = this.shadowRoot?.querySelector(`sketch-monaco-view[data-file-path="${filePath}"]`);
+ const monacoView = this.shadowRoot?.querySelector(
+ `sketch-monaco-view[data-file-path="${filePath}"]`,
+ );
if (monacoView) {
(monacoView as any).toggleHideUnchangedRegions(!newState); // inverted because true means "hide unchanged"
}
-
+
// Force a re-render to update the button state
this.requestUpdate();
}
@@ -480,7 +486,9 @@
<div class="file-row">
<div class="file-count">
- ${this.files.length > 0 ? `${this.files.length} file${this.files.length === 1 ? '' : 's'} changed` : 'No files'}
+ ${this.files.length > 0
+ ? `${this.files.length} file${this.files.length === 1 ? "" : "s"} changed`
+ : "No files"}
</div>
</div>
</div>
@@ -545,7 +553,7 @@
// Load content for all files
if (this.files.length > 0) {
// Initialize expand states for new files (default to collapsed)
- this.files.forEach(file => {
+ this.files.forEach((file) => {
if (!this.fileExpandStates.has(file.path)) {
this.fileExpandStates.set(file.path, false); // false = collapsed (hide unchanged regions)
}
@@ -696,9 +704,7 @@
if (!content) {
return html`
<div class="file-diff-section">
- <div class="file-header">
- ${this.renderFileHeader(file)}
- </div>
+ <div class="file-header">${this.renderFileHeader(file)}</div>
<div class="loading">Loading ${file.path}...</div>
</div>
`;
@@ -706,9 +712,7 @@
return html`
<div class="file-diff-section">
- <div class="file-header">
- ${this.renderFileHeader(file)}
- </div>
+ <div class="file-header">${this.renderFileHeader(file)}</div>
<div class="file-diff-editor">
<sketch-monaco-view
.originalCode="${content.original}"
@@ -738,12 +742,14 @@
const pathInfo = this.getPathInfo(file);
const isExpanded = this.fileExpandStates.get(file.path) ?? false;
-
+
return html`
<div class="file-header-left">
<span class="file-status ${statusClass}">${statusText}</span>
<span class="file-path">${pathInfo}</span>
- ${changesInfo ? html`<span class="file-changes">${changesInfo}</span>` : ''}
+ ${changesInfo
+ ? html`<span class="file-changes">${changesInfo}</span>`
+ : ""}
</div>
<div class="file-header-right">
<button
@@ -753,9 +759,7 @@
? "Collapse: Hide unchanged regions to focus on changes"
: "Expand: Show all lines including unchanged regions"}"
>
- ${isExpanded
- ? this.renderCollapseIcon()
- : this.renderExpandAllIcon()}
+ ${isExpanded ? this.renderCollapseIcon() : this.renderExpandAllIcon()}
</button>
</div>
`;
diff --git a/webui/src/web-components/sketch-monaco-view.ts b/webui/src/web-components/sketch-monaco-view.ts
index aaf186f..915da57 100644
--- a/webui/src/web-components/sketch-monaco-view.ts
+++ b/webui/src/web-components/sketch-monaco-view.ts
@@ -633,8 +633,8 @@
renderSideBySide: true,
ignoreTrimWhitespace: false,
scrollbar: {
- vertical: 'hidden',
- horizontal: 'hidden',
+ vertical: "hidden",
+ horizontal: "hidden",
handleMouseWheel: false, // Let outer scroller eat the wheel
},
minimap: { enabled: false },
@@ -1080,7 +1080,7 @@
original: this.originalModel,
modified: this.modifiedModel,
});
-
+
// Set initial hideUnchangedRegions state (default to enabled/collapsed)
this.editor.updateOptions({
hideUnchangedRegions: {
@@ -1090,7 +1090,7 @@
revealLineCount: 10,
},
});
-
+
// Fit content after setting new models
if (this.fitEditorToContent) {
setTimeout(() => this.fitEditorToContent!(), 50);
@@ -1137,27 +1137,29 @@
try {
const originalEditor = this.editor!.getOriginalEditor();
const modifiedEditor = this.editor!.getModifiedEditor();
-
+
const originalHeight = originalEditor.getContentHeight();
const modifiedHeight = modifiedEditor.getContentHeight();
-
+
// Use the maximum height of both editors, plus some padding
const maxHeight = Math.max(originalHeight, modifiedHeight) + 18; // 1 blank line bottom padding
-
+
// Set both container and host height to enable proper scrolling
if (this.container.value) {
// Set explicit heights on both container and host
this.container.value.style.height = `${maxHeight}px`;
this.style.height = `${maxHeight}px`; // Update host element height
-
+
// Emit the height change event BEFORE calling layout
// This ensures parent containers resize first
- this.dispatchEvent(new CustomEvent('monaco-height-changed', {
- detail: { height: maxHeight },
- bubbles: true,
- composed: true
- }));
-
+ this.dispatchEvent(
+ new CustomEvent("monaco-height-changed", {
+ detail: { height: maxHeight },
+ bubbles: true,
+ composed: true,
+ }),
+ );
+
// Layout after both this component and parents have updated
setTimeout(() => {
if (this.editor && this.container.value) {
@@ -1165,13 +1167,13 @@
const width = this.container.value.offsetWidth;
this.editor.layout({
width: width,
- height: maxHeight
+ height: maxHeight,
});
}
}, 10);
}
} catch (error) {
- console.error('Error in fitContent:', error);
+ console.error("Error in fitContent:", error);
}
};
@@ -1288,7 +1290,7 @@
this._resizeObserver.disconnect();
this._resizeObserver = null;
}
-
+
// Clear the fit function reference
this.fitEditorToContent = null;