all: fix formatting
diff --git a/webui/src/web-components/sketch-diff2-view.ts b/webui/src/web-components/sketch-diff2-view.ts
index 5ac7459..1b673cd 100644
--- a/webui/src/web-components/sketch-diff2-view.ts
+++ b/webui/src/web-components/sketch-diff2-view.ts
@@ -4,7 +4,11 @@
import "./sketch-diff-range-picker";
import "./sketch-diff-file-picker";
import "./sketch-diff-empty-view";
-import { GitDiffFile, GitDataService, DefaultGitDataService } from "./git-data-service";
+import {
+ GitDiffFile,
+ GitDataService,
+ DefaultGitDataService,
+} from "./git-data-service";
import { DiffRange } from "./sketch-diff-range-picker";
/**
@@ -20,58 +24,64 @@
try {
// Validate incoming data
if (!event.detail || !event.detail.formattedComment) {
- console.error('Invalid comment data received');
+ console.error("Invalid comment data received");
return;
}
-
+
// Create and dispatch event using the standardized format
- const commentEvent = new CustomEvent('diff-comment', {
+ const commentEvent = new CustomEvent("diff-comment", {
detail: { comment: event.detail.formattedComment },
bubbles: true,
- composed: true
+ composed: true,
});
-
+
this.dispatchEvent(commentEvent);
} catch (error) {
- console.error('Error handling Monaco comment:', error);
+ console.error("Error handling Monaco comment:", error);
}
}
-
+
/**
* Handle save events from the Monaco editor
*/
private async handleMonacoSave(event: CustomEvent) {
try {
// Validate incoming data
- if (!event.detail || !event.detail.path || event.detail.content === undefined) {
- console.error('Invalid save data received');
+ if (
+ !event.detail ||
+ !event.detail.path ||
+ event.detail.content === undefined
+ ) {
+ console.error("Invalid save data received");
return;
}
-
+
const { path, content } = event.detail;
-
+
// Get Monaco view component
- const monacoView = this.shadowRoot?.querySelector('sketch-monaco-view');
+ const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
if (!monacoView) {
- console.error('Monaco view not found');
+ console.error("Monaco view not found");
return;
}
-
+
try {
await this.gitService?.saveFileContent(path, content);
console.log(`File saved: ${path}`);
(monacoView as any).notifySaveComplete(true);
} catch (error) {
- console.error(`Error saving file: ${error instanceof Error ? error.message : String(error)}`);
+ console.error(
+ `Error saving file: ${error instanceof Error ? error.message : String(error)}`,
+ );
(monacoView as any).notifySaveComplete(false);
}
} catch (error) {
- console.error('Error handling save:', error);
+ console.error("Error handling save:", error);
}
}
@property({ type: String })
initialCommit: string = "";
-
+
// The commit to show - used when showing a specific commit from timeline
@property({ type: String })
commit: string = "";
@@ -81,16 +91,16 @@
@state()
private files: GitDiffFile[] = [];
-
+
@state()
- private currentRange: DiffRange = { type: 'range', from: '', to: 'HEAD' };
+ private currentRange: DiffRange = { type: "range", from: "", to: "HEAD" };
@state()
private originalCode: string = "";
@state()
private modifiedCode: string = "";
-
+
@state()
private isRightEditable: boolean = false;
@@ -117,18 +127,18 @@
background-color: var(--background-light, #f8f8f8);
flex-shrink: 0; /* Prevent controls from shrinking */
}
-
+
.controls-container {
display: flex;
flex-direction: column;
gap: 12px;
}
-
+
.range-row {
width: 100%;
display: flex;
}
-
+
.file-row {
width: 100%;
display: flex;
@@ -136,15 +146,15 @@
align-items: center;
gap: 10px;
}
-
+
sketch-diff-range-picker {
width: 100%;
}
-
+
sketch-diff-file-picker {
flex: 1;
}
-
+
.view-toggle-button {
background-color: #f0f0f0;
border: 1px solid #ccc;
@@ -155,7 +165,7 @@
white-space: nowrap;
transition: background-color 0.2s;
}
-
+
.view-toggle-button:hover {
background-color: #e0e0e0;
}
@@ -179,14 +189,15 @@
height: 100%; /* Take full height */
}
- .loading, .empty-diff {
+ .loading,
+ .empty-diff {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
font-family: var(--font-family, system-ui, sans-serif);
}
-
+
.empty-diff {
color: var(--text-secondary-color, #666);
font-size: 16px;
@@ -210,22 +221,22 @@
right: 0;
bottom: 0;
height: 100%; /* Take full height */
- width: 100%; /* Take full width */
+ width: 100%; /* Take full width */
}
`;
@property({ attribute: false, type: Object })
gitService!: GitDataService;
-
+
// The gitService must be passed from parent to ensure proper dependency injection
constructor() {
super();
- console.log('SketchDiff2View initialized');
-
+ console.log("SketchDiff2View initialized");
+
// Fix for monaco-aria-container positioning
// Add a global style to ensure proper positioning of aria containers
- const styleElement = document.createElement('style');
+ const styleElement = document.createElement("style");
styleElement.textContent = `
.monaco-aria-container {
position: absolute !important;
@@ -249,15 +260,21 @@
super.connectedCallback();
// Initialize with default range and load data
// Get base commit if not set
- if (this.currentRange.type === 'range' && !('from' in this.currentRange && this.currentRange.from)) {
- this.gitService.getBaseCommitRef().then(baseRef => {
- this.currentRange = { type: 'range', from: baseRef, to: 'HEAD' };
- this.loadDiffData();
- }).catch(error => {
- console.error('Error getting base commit ref:', error);
- // Use default range
- this.loadDiffData();
- });
+ if (
+ this.currentRange.type === "range" &&
+ !("from" in this.currentRange && this.currentRange.from)
+ ) {
+ this.gitService
+ .getBaseCommitRef()
+ .then((baseRef) => {
+ this.currentRange = { type: "range", from: baseRef, to: "HEAD" };
+ this.loadDiffData();
+ })
+ .catch((error) => {
+ console.error("Error getting base commit ref:", error);
+ // Use default range
+ this.loadDiffData();
+ });
} else {
this.loadDiffData();
}
@@ -266,18 +283,20 @@
// Toggle hideUnchangedRegions setting
@state()
private hideUnchangedRegionsEnabled: boolean = true;
-
+
// Toggle hideUnchangedRegions setting
private toggleHideUnchangedRegions() {
this.hideUnchangedRegionsEnabled = !this.hideUnchangedRegionsEnabled;
-
+
// Get the Monaco view component
- const monacoView = this.shadowRoot?.querySelector('sketch-monaco-view');
+ const monacoView = this.shadowRoot?.querySelector("sketch-monaco-view");
if (monacoView) {
- (monacoView as any).toggleHideUnchangedRegions(this.hideUnchangedRegionsEnabled);
+ (monacoView as any).toggleHideUnchangedRegions(
+ this.hideUnchangedRegionsEnabled,
+ );
}
}
-
+
render() {
return html`
<div class="controls">
@@ -288,28 +307,39 @@
@range-change="${this.handleRangeChange}"
></sketch-diff-range-picker>
</div>
-
+
<div class="file-row">
<sketch-diff-file-picker
.files="${this.files}"
.selectedPath="${this.selectedFilePath}"
@file-selected="${this.handleFileSelected}"
></sketch-diff-file-picker>
-
+
<div style="display: flex; gap: 8px;">
- ${this.isRightEditable ? html`
- <div class="editable-indicator" title="This file is editable">
- <span style="padding: 6px 12px; background-color: #e9ecef; border-radius: 4px; font-size: 12px; color: #495057;">
- Editable
- </span>
- </div>
- ` : ''}
- <button
+ ${this.isRightEditable
+ ? html`
+ <div
+ class="editable-indicator"
+ title="This file is editable"
+ >
+ <span
+ style="padding: 6px 12px; background-color: #e9ecef; border-radius: 4px; font-size: 12px; color: #495057;"
+ >
+ Editable
+ </span>
+ </div>
+ `
+ : ""}
+ <button
class="view-toggle-button"
@click="${this.toggleHideUnchangedRegions}"
- title="${this.hideUnchangedRegionsEnabled ? 'Expand All' : 'Hide Unchanged'}"
+ title="${this.hideUnchangedRegionsEnabled
+ ? "Expand All"
+ : "Hide Unchanged"}"
>
- ${this.hideUnchangedRegionsEnabled ? 'Expand All' : 'Hide Unchanged'}
+ ${this.hideUnchangedRegionsEnabled
+ ? "Expand All"
+ : "Hide Unchanged"}
</button>
</div>
</div>
@@ -317,9 +347,7 @@
</div>
<div class="diff-container">
- <div class="diff-content">
- ${this.renderDiffContent()}
- </div>
+ <div class="diff-content">${this.renderDiffContent()}</div>
</div>
`;
}
@@ -336,7 +364,7 @@
if (this.files.length === 0) {
return html`<sketch-diff-empty-view></sketch-diff-empty-view>`;
}
-
+
if (!this.selectedFilePath) {
return html`<div class="loading">Select a file to view diff</div>`;
}
@@ -369,40 +397,45 @@
}
// Load diff data based on the current range type
- if (this.currentRange.type === 'single') {
- this.files = await this.gitService.getCommitDiff(this.currentRange.commit);
+ if (this.currentRange.type === "single") {
+ this.files = await this.gitService.getCommitDiff(
+ this.currentRange.commit,
+ );
} else {
- this.files = await this.gitService.getDiff(this.currentRange.from, this.currentRange.to);
+ this.files = await this.gitService.getDiff(
+ this.currentRange.from,
+ this.currentRange.to,
+ );
}
// Ensure files is always an array, even when API returns null
if (!this.files) {
this.files = [];
}
-
+
// If we have files, select the first one and load its content
if (this.files.length > 0) {
const firstFile = this.files[0];
this.selectedFilePath = firstFile.path;
-
+
// Directly load the file content, especially important when there's only one file
// as sometimes the file-selected event might not fire in that case
this.loadFileContent(firstFile);
} else {
// No files to display - reset the view to initial state
- this.selectedFilePath = '';
- this.originalCode = '';
- this.modifiedCode = '';
+ this.selectedFilePath = "";
+ this.originalCode = "";
+ this.modifiedCode = "";
}
} catch (error) {
- console.error('Error loading diff data:', error);
+ console.error("Error loading diff data:", error);
this.error = `Error loading diff data: ${error.message}`;
// Ensure files is an empty array when an error occurs
this.files = [];
// Reset the view to initial state
- this.selectedFilePath = '';
- this.originalCode = '';
- this.modifiedCode = '';
+ this.selectedFilePath = "";
+ this.originalCode = "";
+ this.modifiedCode = "";
} finally {
this.loading = false;
}
@@ -419,64 +452,75 @@
let fromCommit: string;
let toCommit: string;
let isUnstagedChanges = false;
-
+
// Determine the commits to compare based on the current range
- if (this.currentRange.type === 'single') {
+ if (this.currentRange.type === "single") {
fromCommit = `${this.currentRange.commit}^`;
toCommit = this.currentRange.commit;
} else {
fromCommit = this.currentRange.from;
toCommit = this.currentRange.to;
// Check if this is an unstaged changes view
- isUnstagedChanges = toCommit === '';
+ isUnstagedChanges = toCommit === "";
}
// Set editability based on whether we're showing uncommitted changes
this.isRightEditable = isUnstagedChanges;
// Load the original code based on file status
- if (file.status === 'A') {
+ if (file.status === "A") {
// Added file: empty original
- this.originalCode = '';
+ this.originalCode = "";
} else {
// For modified, renamed, or deleted files: load original content
- this.originalCode = await this.gitService.getFileContent(file.old_hash || '');
+ this.originalCode = await this.gitService.getFileContent(
+ file.old_hash || "",
+ );
}
-
+
// For modified code, always use working copy when editable
if (this.isRightEditable) {
try {
// Always use working copy when editable, regardless of diff status
// This ensures we have the latest content even if the diff hasn't been refreshed
- this.modifiedCode = await this.gitService.getWorkingCopyContent(file.path);
+ this.modifiedCode = await this.gitService.getWorkingCopyContent(
+ file.path,
+ );
} catch (error) {
- if (file.status === 'D') {
+ if (file.status === "D") {
// For deleted files, silently use empty content
- console.warn(`Could not get working copy for deleted file ${file.path}, using empty content`);
- this.modifiedCode = '';
+ console.warn(
+ `Could not get working copy for deleted file ${file.path}, using empty content`,
+ );
+ this.modifiedCode = "";
} else {
// For any other file status, propagate the error
- console.error(`Failed to get working copy for ${file.path}:`, error);
+ console.error(
+ `Failed to get working copy for ${file.path}:`,
+ error,
+ );
throw error; // Rethrow to be caught by the outer try/catch
}
}
} else {
// For non-editable view, use git content based on file status
- if (file.status === 'D') {
+ if (file.status === "D") {
// Deleted file: empty modified
- this.modifiedCode = '';
+ this.modifiedCode = "";
} else {
// Added/modified/renamed: use the content from git
- this.modifiedCode = await this.gitService.getFileContent(file.new_hash || '');
+ this.modifiedCode = await this.gitService.getFileContent(
+ file.new_hash || "",
+ );
}
}
-
+
// Don't make deleted files editable
- if (file.status === 'D') {
+ if (file.status === "D") {
this.isRightEditable = false;
}
} catch (error) {
- console.error('Error loading file content:', error);
+ console.error("Error loading file content:", error);
this.error = `Error loading file content: ${error.message}`;
this.isRightEditable = false;
} finally {
@@ -489,9 +533,9 @@
*/
handleRangeChange(event: CustomEvent) {
const { range } = event.detail;
- console.log('Range changed:', range);
+ console.log("Range changed:", range);
this.currentRange = range;
-
+
// Load diff data for the new range
this.loadDiffData();
}
@@ -507,7 +551,7 @@
/**
* Refresh the diff view by reloading commits and diff data
- *
+ *
* This is called when the Monaco diff tab is activated to ensure:
* 1. Branch information from git/recentlog is current (branches can change frequently)
* 2. The diff content is synchronized with the latest repository state
@@ -515,15 +559,17 @@
*/
refreshDiffView() {
// First refresh the range picker to get updated branch information
- const rangePicker = this.shadowRoot?.querySelector('sketch-diff-range-picker');
+ const rangePicker = this.shadowRoot?.querySelector(
+ "sketch-diff-range-picker",
+ );
if (rangePicker) {
(rangePicker as any).loadCommits();
}
-
+
if (this.commit) {
- this.currentRange = { type: 'single', commit: this.commit };
+ this.currentRange = { type: "single", commit: this.commit };
}
-
+
// Then reload diff data based on the current range
this.loadDiffData();
}